16 мая 2012 г.
Иногда нужно сделать несколько шаблонов с небольшой разницей. Скажем разные css-стили, изображения и прочие мелочи. Всё остальное: html-структура, настройки, функционал - идентичен.
Часто такие заказы встречаются, когда нужно создать сетку сайтов.
Чтобы не делать для каждого сайта отдельный шаблон, можно создать соответствующую опцию в шаблоне, которая будет переключать «изменяемые» части. Сейчас покажу, как это можно сделать.
Второй компонент шапки содержит логотип сайта. С практический точки зрения удобней было бы разместить логотип, название и описание сайта. Это наиболее частая комбинация. Справа же можно оставить место для каких-то других блоков. Скажем для ушки, в которой можно разместить баннер.
Второй компонент у нас занимает всю ширину браузера, поэтому его структура по сути повторит структуру первого компонента.
Дальнейшие действия по созданию шаблона должны опираться на дизайн сайта. В нашем макете лишь черновые элементы, без конкретного оформления. Я решил, что немного упрощу себе задачу и дизайн буду «придумывать» на ходу: в учебных целях будет проще понять для чего я прописываю различные css-свойста пошагово. Я буду использовать самый минимум оформления: так и проще его модифицирвать под свою задачу, да и разобраться в коде не составит труда.
Итак, у нас есть компоненты-заглушки и готовая модульная сетка сайта. Согласно чеклисту самое время задать основные стили оформления текстов и фона браузера (п.10). Но мы этот шаг пропустим потому что мы создаем шаблон по технологии Default и у нас уже определены все стандартные стили (defaul/css/style-all.css).
Сейчас же мы выставим лишь основные стили.
Первым этапом создания шаблона является его прототипирование. Это что-то вроде чернового варианта, где опущены мелкие детали и можно сосредоточиться на самых важных частях сайта. На этом этапе создается модульная сетка сайта и верстка основных блоков.
Для верстальщика есть один важный момент: прототипирование требуется там, где нет конечного дизайна. Иногда бывают ситуации, когда верстальщику в работу даётся уже полностью готовый макет. Поэтому нужно лишь наложить модульную сетку, как мы это рассмотрели в предыдущих уроках.
Если же стоит задача придумать сайт, то прототипирование будет обязательным этапом.
