Разумеется, мы не будем полность разбирать вопрос о каскадных таблицах стилей (CSS) - этому посвящены тысячи страниц в Интернет. Мы разберем, как это сделано на наших сайтах.

О том, что визуальное оформление элементов страниц сайта (цвета, шрифты, размер текста и прочая, и прочая) нужно определять в файлах таблиц стилей, а не вписывать "намертво" в текст, знают все, кроме новичков. Здесь вопросов (кроме совместимости с браузерами) не возникает давно. Да и практически все современные браузеры поддерживают (за некоторыми неприятными исключениями) стандарты CSS.

Сложнее вопрос с версткой страниц. Вот на нашем сайте, в основном, классический трехколоночный дизайн страниц - презираемый креативными дизайнерами, но часто требуемый заказчиками. Много лет такие сайты верстались с использованием таблиц. Это было достаточно просто и надежно. О недостатках верстки с использованием таблиц написано немало, мы здесь повторяться не будем. До сих пор у таблиц немало поклонников. Блочная верстка с использованием CSS имеет немало преимуществ, но она намного сложнее. Сделать трехколоночный сайт "на CSS" не так уж сложно, но сделать его работающим, во всех браузерах, при разнообразном контенте - совсем непросто. Собственно этим и объясняется то, что у таблиц остаётся много поклонников.

К счастью, за последние годы появилось множество сайтов, где подробно описано - как это делается, можно разыскать множество шаблонов страниц (в том числе для MODx) с разными видами дизайна.

Рекомендуем посмотреть очень интересный проект http://www.csszengarden.com/  - на этом сайте публикуется множество (сотни) вариантов дизайна одной и той же страницы с использованием CSS-верстки.

Вот один из случайно взятых примеров:

А вот другой пример - текст тот же самый:

К сожалению, сайт не всегда доступен.

К счастью, мы его предусмотрительно сохранили на своём компьютере и можем иногда просматривать в поиске интересных решений.

Но это всё присказка, сказка будет впереди.  Зачем вообще мы пишем эти заметки, если указываем, что "всё в Интернете можно найти"? Объяснение простое - мы делаем типовые сайты для органов власти в виде прототипа. Затем эти сайты доводят (а иногда и нет) до конечного вида другие люди. Многие из них просто не имеют отношения к дизайну, но хотят что-то подправить (цвет, логотип и прочее). Вот для них мы эти заметки и пишем - чтобы представляли - что можно и нужно, а что - "нииззя".

Загрузка таблиц стилей

У нас используется несколько шаблонов страниц, но каждый шаблон использует один и тот же чанк. Вот там, внутри тега head и записана загрузка таблицы стилей:

<link href="assets/templates/site.css" 
rel="stylesheet" type="text/css"/>  
<!--[if lte IE 7]>     
<link href="assets/templates/patches/patch_vertical_listnav.css" 
rel="stylesheet" type="text/css" />  
<![endif]-->  
<!--[if lte IE 6]>    
<link rel="stylesheet" type="text/css"    href="assets/templates/patches/ie6_or_less.css" />    
<![endif]--> 

Здесь мы видим, что в каждую страницу сайта загружается наша основная таблица стилей site.css, а кроме того, для браузеров IE загружаются дополнительные таблицы - они предназначены для нейтрализации глюков Internet Explorer. Кроме того, некоторые сниппеты (например ePoll) подгружают собственные дополнительные таблицы стилей.

Таблица site.css выглядит так:

@charset "utf-8";
@import url(core/base.css);
@import url(core/basemod.css);
@import url(common.css);

 Мы видим, что сама она ничего не содержит, а загружает несколько включаемых файлов стилей. Вот в них-то и зашиты "чисто конкретные" объявления.

А можно всё записать в одном файле?
Конечно, можно. Но тогда это будет один очень большой файл и в нем будет сложно разбираться. А при включении файлов любой из них можно заменить, передвинуть выше или ниже.

 В файлах core/base.css и core/basemod.css даны описания,  связанные с трехколоночной версткой страниц, а в файле common.css - для всех страниц сайта. Это сделано для того, чтобы легко управлять стилями из одного места. Например, для шаблонов, использующих двухколоночную вёрстку будет загружаться не site.css, а site_2col.css:

@charset "UTF-8";
@import url(core/base2.css);
@import url(core/basemod_2col.css);
@import url(common.css);
 В нем загружаются уже core/base2.css и core/basemod_2col.css  - верстка двухколоночных страниц, и общий common.css.

Файл common.css, в свою очередь, загружает ещё кучу файлов:

@charset "utf-8";
@import url(screen/color.css);
@import url(screen/fonts.css);
@import url(screen/content.css);
@import url(snippets/ditto.css);
@import url(snippets/molio_nav_main.css);
@import url(print/print_003_draft.css);
@import url(custom/old.css);
@import url(snippets/mx_ajax_search.css);
@import url(core/positions.css);
@import url(custom/lists.css);
@import url(snippets/fd.css);
@import url(snippets/list_indexer.css);
@import url(snippets/list_sitemap.css);
 

Определения в файлах распределены по определенному принципу. Например, в screen/font.css - всё, что связано со шрифтами, в screen/color.css - всё, относящееся к цветам для сайта в целом. Но так делать не всегда удобно, например стили, относящиеся к конкретному сниппету, удобнее вынести в отдельные файлы. Например, используя AjaxSearch мы подключаем файл snippets/mx_ajax_search.css, в котором собраны все стили для этого сниппета. Удалим сниппет - отключим и таблицу стилей.

Разделение стилей по файлам и подкаталогам позволяет легче разбираться (ох, и помучились мы когда держали всё в одном файле) со своим "богатством" и легко менять дизайн. Например, если скопировать файл  screen/color.css в screen/color_green.css, изменить в нем описания цветов и сделать в common.css включение не screen/color.css, а screen/color_green.css, то будет изменена цветовая гамма всех страниц сайта.

  Как сделать хороший дизайн на CSS

Во-первых, надо определиться - а что такое "хороший"? Для официального сайта хорош один дизайн, для личного "хомяка" - другой, для тематического сайта - третий. Дизайн должен быть не только "красивый", но и технически безукоризненным. Вот это особенно трудно.  Остановимся на чисто технических требованиях:

1. Страницы должны одинаково правильно показываться во всех браузерах. Необходимо их тестировать как минимум в InternetExplorer разных версий, в Firefox, Opera, Safari. Последние три браузера, как правило, правильно показывают правильные страницы. Если что-то показывается неправильно в любом из этих браузеров - это 100% ошибка дизайнера.

А вот IE довольно много показывает неверно (при правильном коде). Добиться соответствия получается путем затрат немалых усилий. В то же время в IE может правильно отобразиться страница с ошибочным кодом.

2. Необходимо тестировать страницы на разное разрешение монитора, на изменение размеров окна, на изменение размеров шрифта. Конечно, проще сделать всё фиксированным, плохие верстальшики так и делают. Однако более вежливым по отношению к посетителям - дать возможность и полностью использовать экран монитора, и управлять размером шрифта.

3. При колоночной верстке нужно проверять вид страниц при разной заполненности колонок. Именно здесь часто выявляются глюки IE. Проверяя этот момент не забывайте периодически менять размер окна браузера.

4. Необходимо проверять, как работает сайт, если в браузере посетителя отключен Javascript. Об этом мы упоминали в заметке о браузерах.

Преодолеть все "подводные камни" самостоятельно довольно сложно. Самый лучшийспособ - воспользоваться чужим опытом. Например, поразбираться с примерами на  http://www.csszengarden.com/  - только надо учитывать, что там демонстрируется только одна, достаточно простая страница. Там дизайнеры соревнуются в "креативности".

Можно скачать и шаблоны страниц из репозитория самой MODx, только не стоит их заимствовать напрямую.

А вот для более стандартных ситуаций очень поможет  проект YAML. Это великолепный сайт:

Здесь можно и просто скачать великолепный, очень качественно выполненный проект со множеством примеров качественной верстки сайта в различных вариантах, а можно и воспользоваться YAML Builder - построителем дизайна:

Настроив, по своему усмотрению параметры верстки страницы, можно получить исходные тексты шаблона страницы и таблиц стилей:

Конечно, проще воспользоваться примерами из самого проекта, тем более, что его всё равно нужно скачивать - большинство таблиц стилей находится в самом архиве проекта.