Joomla позволяет выбирать варианты вывода категорий и разделов в виде блога или списка. В виде блога выводятся статьи определенной категории или категории определенного раздела. Каждая статья или категория представлена на странице небольшим отрывком своего содержимого (несколько начальных абзацев) и ссылкой для перехода к полной версии статьи или перехода к статьям категории. В табличном варианте выводится таблица, в столбцах которой находятся название статьи или категории, имя автора, фильтр для сортировки статей а также другая информация.
вывод статей в виде блога…
…и в виде списка
Несмотря на то, что в версии 1.5 системы происходит переход от табличной разметки к блочной, основное содержимое все равно размечено таблицами.Рассмотрим сначала вывод статей в режиме блога. Хотелось бы уточнить. Что при выводе любой статьи (и в виде блога, и полностью) структура получается одинаковая.
Вот пример структуры статьи:
Любая таблица, в которой расположена статья имеет класс contentpaneopen
.Далее идет заголовок статьи (td.contentheading)
. В ячейках с классом .buttonheading
, расположены пиктограммы (email, pdf, печать).
Содержимое статьи и заголовок с пиктограммами находятся в разных таблицах с одинаковыми классами.
Переходим к таблице с основным содержимым: здесь нужно обратить внимание на элемент span
c классом small
. Это имя автора статьи. В ячейке с классом .createdate
находится дата создания статьи, а в ячейке с классом .modifydate
– информация о дате изменения статьи. К полному тексту статьи ведет ссылка с классом .readon
. Текст самой статьи не имеет никаких классов и просто находится в ячейке таблицы в виде абзацев (элементов p
).
Контейнером для всех статей в режиме блога является таблица c классом .blog
, состоящая из 2 строк. В первой строке размещенная одна статья, во второй строке таблицы имеется 2 ячейки, в которых также размещены все остальные статьи категории. Статьи разделены между собой элементом span
с классом .article_separator
.
На рисунке разноцветными рамками отмечены элементы статьи, у каждого элемента свой класс (за исключением текста статьи).
При выводе информации в виде списка, она также выводится в таблице, которая имеет класс .contenpane
. В первой строке таблицы находится описание (класс ячейки – .contentdescription
). Строкам таблицы, в которых перечислены названия статей (категорий), присвоены попеременно 2 разных класса (.sectiontableentry1 и sectiontableentry2
) – это нужно для того, чтобы выделить их разными цветами.
При выводе компонента контакты выводится форма, через которую можно отправить письмо например, администратору сайта. У нее также есть свои стили, которые проиллюстрированы на рисунках ниже:
В конце этой статьи, мне хотелось бы подвести итог, разместив рассмотренные классы и идентификаторы в таблицу:
Наименование класса или идентификатора | Описание |
---|---|
.contentheading | Класс ячейки с заголовком статьи |
.small | Класс элемента span, содержащего имя автора статьи |
.createdate | Класс ячейки таблицы с датой создания статьи |
.modifydate | Класс ячейки таблицы с датой изменения статьи |
.readon | Класс ссылки на полный текст статьи |
.buttonheading | Класс ячеек с пикторграммами (email,PDF,печать) |
.contentpaneopen | Класс таблицы, в которой расположена статья |
.contentpane | Класс таблицы, в которой выводится список статей или категорий |
.contentdescription | Класс ячейки таблицы, в которой находится описание статей(категорий) |
.sectiontableentry1 .sectiontableentry2 |
Классы четных/нечетных строк таблицы, в которых выводится список статей или категорий |
.form-validate #emailForm |
Класс и id формы для обратной связи |
.inputbox | Класс полей формы и элемента <textarea> |
.button .validate |
Классы кнопки «Отправить» в форме обратной связи |
#contact-name | id поля для ввода имени |
#contact-email | id поля для ввода e-mail |
#contact-subject | id поля для ввода темы письма |
#contact_emailmsg | id элемента <label> перед полем ввода e-mail |
#contact_textmsg | id элемента <label> перед полем для ввода текста сообщения |
#contact-text | id элемента <textarea> для ввода текста сообщения |
#contact_email_copy | id элемента-флажка в форме после поля для ввода текста сообщения |