Календари & Календарные сетки: Статья 11. Заполнение блоками боковой (sidebar) панели макета шаблона сайта.

Первое что нужно сделать при оформлении данного блока – это установить необходимую ( разумную) ширину. Стандартная ширина боковой панели колеблется в пределах 200 – 250px. ( или 25-30%) . Естественно каждый дизайнер вправе сам решать что разумно, а что нет. Но в данном случае я воспользуюсь стандартами и сделаю ширину блока »sidebar» 220 px.

Для обозначения границ блока воспользуюсь направляющими.

Далее согласно статьи 9 выберу тип блока наиболее подходящий для этого макета. Я выбираю прямоугольный блок №3. В этом макете данный блок не будет иметь собственного фонового цвета ( для фона мы сделали S-blok). А это значит что будут присутствовать только заголовок блока и его текстовое содержимое. Заголовок блока исполняется в том же стиле и тем же шрифтом, что и остальные заголовки. Внимание: Большое разнообразие различных типов шрифтов и их цветовых гамм существенно ухудшает визуальное восприятие страницы сайта. Стандартные шрифты для использования в веб-страницах – это Arial, Tahoma, Werdana, Sans Serif, Georgia. Если вы используете какие либо не стандартные шрифты не забудьте вложить файл шрифта в конечный архив готового макета. Зачем? Для того что бы верстальщик не гадал: «Что это за шрифт? И как сделать подобную надпись?». При вёрстке шаблона верстальщик поместит переданный вами файл шрифта в папку шаблона и укажет путь его нахождения для правильного отображения в окне браузера.

В папке слои »sidebar» создам новый пустой слой. Инструментом «прямоугольная область» и последующей обводкой нарисую блок. И верхний колонтитул блока. В поле верхнего колонтитула расположен текстовый слой.

Выглядит это вот так. Что значит выделенная запись названия блока. Это значит: блок имеет ширину 220px и ширина линии бордюра (обводки) равна 0px. Без обводки. Высота блока не прописана, а это значит что высота блока изменяется по его содержимому. Если вы не думаете в дальнейшем перезваниваться с верстальщиком по поводу уточнения различных мелких деталей, то предусмотрительно максимально точно пишите о свойствах того или иного документа. Можно конечно не употреблять значения CSS написанные мной, просто написать человеческим языком. Ширина 220 пик. без обводки. Внутри текстового поля блока будет содержаться необходимая информация. И выглядеть это будет так.

Так как по обыкновению стиль всех блоков боковой панели одинаков, то и следующие блоки выполняются абсолютно идентично сделанному ранее. Естественно при прорисовке макета не стоит заполнять боковую панель всевозможными блоками. Одного – двух более чем достаточно.