Статья 1. Строение макета шаблона сайта.

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



Боковая ( обычно  одна или две) панель сайта  он же «sidebar»  или «bokpan».  Используется для размещения дополнительной информации. Например  форм  Входа,Регистрации,Навигации, блока Меток, рекламы и так далее.
Блок «content» соответственно для размещения полезного содержимого сайта.
Блок «clear»  служит для прижатия следующего под ним блока ( в данном случае блока «footer»)  Изучающим прорисовку макета шаблона сайта  данный блок принимать во внимание не нужно. Он пустой  и используется только при вёрстке шаблона. Блок «footer»  он же «подвал» сайта . Используется для размещения  информации о дизайне, копирайте,  и прочая мелкая и нужная информация.
Блок «container»  он же «list» – это тот блок в котором размещены все блоки сайта.  Название «контейнер» говорит само за себя.
Наглядно смотрим внизу на представленной картинке.

Прочтя выше написанное  и внимательно изучив рисунок вы должны понять что самым первым и самым нижним слоем будет блок  «container»  – «лист».   Внимание: Общепринятой шириной  блока «контейнер» на сегодняшний день считается ширина этого блока не превышающая 1000 px.  Почему?  По статистическим исследованиям (да и по моим личным наблюдениям в службе мониторинга сайтов)   около 20% мониторов пользователей мира имеют разрешение   1024х768  и менее.  Из этого следует что каждый пятый посетитель пришедший  на сайт имеющий большую  ( более 1000 px) ширину страницы испытывает неудобства в просмотре сайта. И? И моментально его покидает. Хотя на момент написания данной статьи значительный процент пользователей имеет мониторы с шириной 1200px. Так что я думаю через пару-тройку лет стандартной шириной сайта будет именно ширина в 1200px.  Если же  у вас есть желание что бы ваш сайт одинаково отображался на всех мониторах с любым разрешением, то для этого используется так называемый «резиновый» шаблон. Тоесть шаблон с переменной шириной выраженной не пикселах, а в процентах.  100% ширина.  Но  и здесь  есть одно большое НО. «Резиновый» шаблон будет хорош только при условии отсутствия в нём графических элементов.  Так как любая картинка имеет постоянный размер и не может растягиваться как «резиновый» шаблон.  В следствии этого происходит сдвиг изображений и нарушение общего вида и целостности сайта.

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

Если вы делаете фиксированный шаблон (  99%  заграничных сайтов именно фиксированные и поэтому такие красивые)  то можете использовать любые графические элементы  для украшения шаблона.  Естественно не нужно переусердствовать и нагружать шаблон большим кол-вом картинок , что может сказаться на скорости загрузки страницы. В общем всего нужно в меру.

Это всё что касается введения в основы веб-дизайна. Если всё понятно то открыв Фотошоп создаём новый документ шириной в 990  и высотой  например 1500 px.  Какого цвета? Пока в принципе всё равно. Я сделаю прозрачный.  Продолжение  в  следующих  статьях.  Удачи! :)