№27. Шаблоны Joomla. Часть 6 |
Автор Леонид Мальков | ||||||||||||||||||||||||||||||||||||||||
25.07.2008 г. | ||||||||||||||||||||||||||||||||||||||||
Шаблоны Joomla. Часть 6. Уровень: Пользователь - Веб-мастер Здравствуйте, уважаемые подписчики. Сегодня мы продолжим разговор о стилевом оформлении модулей. Попытаемся воспроизвести дизайн модулей сайта MailList.ru Почему именно его? Потому что там он ярко выражен. Откройте, например, сайт http://MailList.ru/", предварительно отключив загрузку изображений в Вашем браузере. Приятно смотрится? Да. По сравнению с некоторыми сайтами, которые в подобном случае будут пестреть дырками от пустых рисунков. Обращаем внимание, что мы будем воспроизводить дизайн как можно точнее с внешней точки зрения. HTML-структуру сайта мы воспроизводить не будем, а используем собственные приемы, немного упрощенные в некоторых случаях. Проделываем мы это исключительно в учебных целях, чтобы показать насколько легко и быстро можно создать дизайн не хуже любого популярного сайта в сети. У нас есть учебный шаблон, разработанный в выпуске рассылки №25,который мы будем дорабатывать (cкачать исходный шаблон). План разработкиВ исходном шаблоне стилями оформлены сами модули, а в воспроизводимом дизайне видно, что модули находятся в контейнере (это правый и левый столбцы с обрамлением). Необходимо изменить текущий стиль модулей и задать стиль для контейнера, которым являются ячейки таблицы, в которые модули выводятся. Изменение стиля модулейНеобходимо получить следующее:
Измененные стили: table.moduletable {
Это для таблицы в целом, теперь для ячейки: table.moduletable td {
Модули готовы :) Установка стиля контейнера Зададим стиль для ячеек таблицы, в которых выводятся модули (в шаблоне для соответствующих тегов <td> необходимо установить class=maillist): td.maillist { Как видите, все предельно просто. Единственное, что нуждается в комментарии, это способ установки жирной рыжей полосы вверху столбцов с модулями. Мы решили проблему единственным стилем border-top-width. При этом внутри полосы простым способом не написать какой-либо текст. Если посмотреть оригинальный сайт, в нем над центральным столбцом присутствует надпись "Почтовые рассылки MailList.Ru". Используя наше решение, такую надпись не создашь, в таблице необходимо создавать дополнительные ячейки. У оригинального сайта разметка, вообще, на много сложнее. Например, разрывы между столбцами, задаются тоже дополнительными ячейками с рисунками-растяжками, а мы лишь зададим для таблицы значение свойства cellspacing="5" ( подробнее об этом ниже), а визуальный эффект тот же! Последние штрихиЧтобы результат трудов выглядел более менее эстетично. Сделаем еще несколько действий:
Шаблон в работе и его дистрибутивПосмотреть шаблон на демо-сайте (имя шаблона efft_table_27).
Автор данной статьи: Леонид Мальков
Просмотров: 18585
Добавить коментарий |
||||||||||||||||||||||||||||||||||||||||
Последнее обновление ( 08.12.2011 г. ) |