Блочная верстка сайта

Чтобы не повторяться, в сети и так много информации по блочной верстке, пробегусь только по азам и определениям, приведу несколько примеров html-кода, каким он должен быть по моему глубокому убеждению.

Несколько определений

Верстка страниц сайта — это процесс создания веб-страницы из макета дизайна, как правило, в формате PSD, с помощью кода соответствующего языка разметки (HTML, WML), так же состоящий из подключенных к ней стилей оформления (CSS) и подгружаемых скриптов (например, JavaScript) и объектов (например, Flash-анимация).

Блочная верстка создается благодаря семантическим конструкциям разметки, например,

1. Табличная верстка — верстка, построенная на таблицах ;
2. Блочная верстка — верстка в конструкции
   ;
3. Смешанная — использование в верстке табличных и блочный конструкций в примерно равных пропорциях.

Некоторые выделяют еще один вид — css-верстка, т.е. верстка страницы с использованием CSS.

Различают верстку и по ширине страницы:

Фиксированная верстка — означает, что сверстанная страница имеет одну заданную ширину, как правило, расположенную по центру при большем разрешении экрана.

Резиновая верстка — когда сверстанная страница тянется по ширине окна браузера, либо в заданных приделах, например, от 1024px до 1600px, либо не имеющая конечной ширины.

Кросс-браузерность — это корректное идентичное отображение сверстанной страницы сайта в различных браузерах: Internet Explorer, FireFox, Opera, Safari, Google Chrome и другие.

HTML-верстка

Итак, верстка страницы сайта начинается с оценки макета дизайна и выбора конструкции — модульной сетки, по которой будет верстаться страница. На модульных сетках останавливаться пока не будем, рассмотрим их позже, в новых статьях.

Далее, начинаем «нарезать» макет дизайна и выносим максимальное количество слоев в спрайты.

Готовим html-каркас или берем заранее приготовленный:

        


        
...
        

                
...
                
...
                
...
        
        
...

Далее, там где стоит многоточие «...», верстаем необходимые элементы разметки в соответствии с дизайном. Например, шапка сайта — header у нас получится такая:

        

                

                        Example
                
                

                        

                                О нас
                        
                        

                                Услуги
                        
                        

                                Контакты
                        
                
        

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

В контенте — content, понятное дело, располагается контент, текстовый, графический, какой угодно. Начинать следует с заголовка h1, текст желательно выделять в параграфы p, и т.д. в соответствии с семантикой.

В нижней части сайта, так называемого подвала — footer, как правило, размещают копирайты, кнопки счетчиков, какие-либо ссылки на разделы.

О стилях оформления CSS поговорим чуть позже, отмечу только что их необходимо выносить в отдельный файл и размещать между тегами и :

Гм.. что еще?

Несколько преимуществ блочной верстки

1. Блочная верстка имеет более логичный семантический код;
2. Блочная верстка имеет сравнительно небольшой вес, что способствует быстрой загрузке страницы;
3. Блочная верстка позволяет отделить структуру от представления.

Ну и все, пожалуй, вкратце по азам пробежались. На этом спешу отклониться.

Спасибо за внимание.