Рисуем сайт, три.

Понятно, что это продолжение «Рисуем сайт, два».

5. Дизайн для nano-CMS.

Дизайн сайта - это, как я понимаю, внешний вид сайта и то, как этот внешний вид реализован. Реализация заключает в себе, картинки, шаблон и стили для шрифта, чёрточек, линий, фона и прочей необходимости.

Прошу запомнить: нет плохого дизайна, есть дизайн, который нравится или не нравится. Есть ошибки вёрстки, есть мешающие попингули и скрипты, есть, в конце концов, вирусы, а вот дизайн, насколько я понимаю, это дело сугубо индивидуальное. И верить самопровозглашенным дизайнерам, которые ради «срыва шаблонов» готовы и на не цензурные выражения, можно подумать, что других слов нет, верить не стоит. Просто делайте то, что ВАМ нравится. И пусть плюют мне в след дизайнеры.

Древние греки считали слова; красиво и пропорционально, чуть ли не синонимами. Интересно, что они думали, когда видели кочевников? А что думали про них кочевники, история замалчивает.

К делу!

Инструменты – прежде всего Mozilla, далее Html Validator, обязательно Firebug, естественно IE, Opera, и Safari. И любой или блокнот, или редактор, желательно с подсветкой кода.

Теперь находим папку simple, в скачанном вами одноимённом архиве, с сайта http://nanocms.name, и внутренности этой папки переносим в C:\WebServers\home\test1.ru\www\ или Z:\home\test1.ru\www\, что одно и тоже. Подробнее в «Рисуем сайт, два».

Вносим в settings.php необходимые изменения и набираем в Mozill-ле http://test1.ru/. И последнее, следует открыть в редакторе фай разметки _design.php (data\content\) и файлы стилей nano_default.css, left_content_right.css (css\).

Теперь можно править, тут вам и CSS в руки!

Стандартные шаблоны для nano-CMS изготовлены Мастером Горди. Шаблоны отличаются лёгкостью структуры, простотой изменения, и широкими возможностями адаптации.

Всё, что отвечает за внешний вид nano-CMS-ки, находится в таких файлах, как data\content\_design.php – разметка, css\gordi.css – стили, data\content\_menu.php – меню, особый, контейнерный файл – data\content\_add.php и естественно папка i, для картинок.

Про файл _design.php – разметка выполнена divным образом, без применения табличной вёрстки. Что в свою очередь снижает объём кода, но повышает ответственность к самой вёрстке. Увеличивает возможности, гибкость, но накладывает необходимость дополнительных знаний и естественно несколько увеличивает трудозатраты.

Спорить, что лучше, div или tab, здесь не уместно, я свой выбор сделал, если не согласны читайте это.

Грубо говоря, файл _design.php можно разбить на несколько частей;
1. DOCTYPE – стандартно и рассмотрению здесь не подлежит.
2. head – содержит title, необходимые и достаточные meta теги и link, для вывода иконки сайта и подключения стилей.
3. body – тело.

Вот про тело и стоит поговорить. Но с начала перечислю переменные, которые находятся в нашем теле:

$title – вывод названия страницы, которое прописывается в каждой странице, при её изготовлении.

$title_default – вывод названия страницы и ссылки с ней, ссылка с анкором.

$turl – вывод урла сайта, прописывается в файле настроек settings.php

$topmenu – горизонтальное меню навигации, выводится из _menu.php

$content – вывод страницы, в зависимости от адреса из папки data\content\

$add_468_60 – вывод рекламного блока размером 468х60, из фала _add.php

$add - вывод рекламного блока, из фала _add.php

$rightmenu – вывод вертикального, правостороннего меню из файла _menu.php

$leftmenu – вывод вертикального, левостороннего меню из файла _menu.php

К слову сказать, всё, что выводится из _add.php, не обязательно, а вспомогательно, и может, и должно меняться по прихоти и необходимости. И файл _menu.php, вообще можно не использовать, а меню прописать в _add.php. Про это попозже, но подробнее.

И ещё, к слову сказать, что перечисленные переменные, это только начало, при дальнейшем использовании nano-CMS мы можем сами изготовлять переменные. И с успехом их использовать.

И так ближе к телу, наш body разобьем на несколько частей;

header – это банер, это эпиграф, это название большими буквами, можно поиск, можно меню приклеить, можно и ещё придумать какие то полезные и бесполезные штучки-дрючки.

content – это наши сочинялки, это и картинки, и всё, что можем или сочинить, или стибрить, хитрым или тупым образом.

menu – вертикальное меню, с лева ли, с права ли, это решать не сейчас и не мне.

footer – традиционная «подошва».

Все эти части объединены одним контейнером div id="gordi", в данном конкретном случае, если кто-то не в курсе о чём речь, то есть, что такое контейнер и что такое id, прошу перейти по адресу http://htmlbook.ru/, и после вернутся и продолжить. Гляньте в файле left_content_right.css, на стиль #gordi, и в строке border:silver 1px solid попробуйте поменять silver на red. Сохранив файл и обновив Mozill-у, мы будем наблюдать контейнер div id="gordi" очерченный красным бордюром. Всё что в нутрии и есть наши хедеры, контенты, менюхи и «подошвы». Всё, что находится вне этого контейнера прописано в файле nano_default.css, стиль body.

Попробуйте в файле nano_default.css, стиль body, изменить background:url(../i/bg.gif) repeat #aaa, на background: red. Получим красный фон за контейнером div id="gordi". Нет надобности боятся что-либо менять, в редакторе можно сделать отмену.

Таким образом, с помощью селекторов border и background для разных классов и идентификаторов можно изменить цветовую гамму сайта, до неузнаваемости. А применяя к селектору background свойства image, position, repeat, натыкать картинок в разнообразных местах и по разному. Дело лени, фантазии и знаний, а за знаниями прошу, опять же, на http://htmlbook.ru/. Примером может служить данный блог, хоть я и особо не старался, но был взят за основы старый, стандартный дизайн Lasto-blog.

Но селекторами border и background не заканчивается, а только начинается. Нужно будет вставить правильно, правильную картинку, меню поставить на то место, где, по вашему мнению, ему и место. И много, много ещё чего надо, и не забудем, что разные броузеры, по разному к стилям относятся. Например, при вычислении ширины IE и Opera используют одинаковый алгоритм, а в других броузерах, ширина будет несколько отличаться, что создаёт лишние хлопоты.

Не зря CSS называют стилями, это ведь, не трогая основу, «легким» движением стиля можно свернуть «голову» и установить, оную, на иное, с первого просмотра, не свойственное, но нам понятное и приятное, место.

Тут уместно вспомнить про Firebug, потратить некоторое время на изучение и привыкнуть к открывшимся возможностям. А Html Validator скажет вам, ай-яй-яй, если допущена ошибка, и покажет где именно. Ну а, проверить на ошибки CSS, можно не шибко напрягаться, а просто использовать оперу 9.50 и более поздних версий, (инструменты – дополнительно – средства для разработчиков). И не надейтесь, что всё хорошие инструменты будут собранны в одном месте.

Продолжение

PS. Для финансовой поддержки моей писанины, не плохо было бы, не забыть тот факт, что за рекламу платят. Это в том случае, если опус понравился. Если не понравился, ну меня нафиг.