Разделы сайта

Статьи по PHP, книги, скрипты

Дизайн и верстка сайтов

Библиотеки JS, Фрэймворки

SEO и продвижение сайтов

Разные полезности

Популярные статьи

•	Закругление углов для сайта
•	DIV против TABLE
•	Блочная верстка - основы
•	Блочная верстка - пошагово
•	Использование прозрачных PNG
•	Знакомство с Ext JS
•	Блочная верстка в 3 колонки
•	Решения распространенных багов при верстке сайта на CSS
•	Использование SWFObject
•	Построение Flash-графиков на сайте
•	Связи таблиц в MySQL
•	Закругление углов без использования изображений
•	5 советов по улучшению html-формы
•	Что лучше – блочная или табличная верстка?
•	Работа с XML
•	jQuery – Javascript нового поколения
•	Как добавить страницу в избранное кроссбраузерно
•	CSS Float в теории и на практике
•	Графики и диаграммы средствами PHP+GD
•	Таблицы, созданные с помощью CSS
•	Основы PHP и MySQL
•	Начинаем работать с Ajax
•	Адаптивная разметка
•	PHP и XML
•	Базовая сетка в веб дизайне

• создание web сайтов
• каталог предприятий
• портал для гиков
• online-закладки

Верстка » Блок → Блочная верстка - основы

Когда браузеры имели маленькие номера версий, а список всех сайтов влезал в тонкую жёлтую книжечку, возникли изначальные правила и методы разметки веб-страниц. Например, верстка сложных страниц с помощью таблиц и невидимых изображений.

Но с развитием браузеров и стабилизацией стандартов, этот метод окончательно устарел, так как имеет много существенных недостатков. Поэтому постепенно все перешли на так называемую “блочную верстку”, о возможности использования которой первый раз я услышал ещё в 2002 году.

Суть блочной верстки - в использовании всех возможностей CSS (каскадных таблиц стилей) вместо таблиц и направляющих изображений.

В этой статье приведён пример использования блочной верстки для создания макета сайта с шапкой, навигационной панелью, основным контекстным пространством, блоком меню и подвалом, как на этой схеме.

1. Базовая структура

Для начала, создадим базовую структуру HTML-страницы:
<div id="wrap"> <div id="header"></div> <div id="nav"></div> <div id="main"></div> <div id="sidebar"></div> <div id="footer"></div> </div>

После этого наполним секции некоторым содержимым для наглядности.
<div id="wrap"> <div id="header"><h1>Заголовок страницы</h1></div> <div id="nav"> <ul> <li><a href="#">Раздел 1</a></li> <li><a href="#">Раздел 2</a></li> </ul> </div> <div id="main"> <h2>Колонка 1</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p> </div> <div id="sidebar"> <h3>Колонка 2</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p> <ul> <li><a href="#">Ссылка 1</a></li> <li><a href="#">Ссылка 2</a></li> </ul> </div> <div id="footer"> <p>Подвал</p> </div> </div>

У нас получился XHTML-документ без стилей, со структурой, которая позволяет использовать CSS для любых изменений в его отображении.

2. Параметры тегов <body> и <html>

Этот приём некоторые называют “ластик” - сброс параметров отступов на странице. Ну и заодно зададим основной цвет фона и текста.

body, html {margin:0;padding:0; background:#a7a09a; color:#000;}

3. Расположение основного контейнера

Теперь нужно расположить всё содержимое страницы в центре и задать ему ширину. Для этого у нас есть контейнер #wrap. Тут же зададим ему цвет фона.

Метод, который мы используем, основан на том, что если левый и правый отступы элемента определены как auto, то он всегда будет находиться в центре окна браузера.
А чтобы предотвратить проблемы в некоторых браузерах, связанные с тем, что окно может быть меньше контейнера #wrap, установим минимальную ширину и его и всей страницы.

body,html { margin:0; padding:0; background:#a7a09a; color:#000; } body { min-width:750px; } #wrap { background:#99c; margin:0 auto; width:750px; }

А для наглядности раскрасим фоны всех контейнеров в разные цвета.

#header {background:#ddd;} #nav {background:#c99;} #main {background:#9c9;} #sidebar {background:#c9c;} #footer {background:#cc9;}

4. Расположение колонок

Чтобы две колонки (#main и #sidebar) отображались рядом, определим для них фиксированную ширину.
#main { background:#9c9; float:left; width:500px;} #sidebar { background:#99c; float:right; width:250px; }

5. Расположение подвала

Чтобы опустить секцию подвала в низ страницы, используем свойство clear, определяющее невозможность нахождения элементов на одной строке с текущим.

#footer { background:#cc9; clear:both; }

6. Делаем панель навигации горизонтальной

Контейнер #nav содержит список ссылок. Расположим его более правильно.

#nav ul{ margin:0; padding:0; list-style:none; } #nav li{ display:inline; margin:0; padding:0; }

7. Настроим отступы

Почти готово. Небольшой тюнинг отступов элементов для лучшего отображения.

#header h1 { padding:5px; margin:0; } #nav { background:#c99; padding:5px; } #main h2, #main h3, #main p { padding:0 10px; } #sidebar { background:#99c; float:right; width:240px; } #sidebar ul { margin-bottom:0; } #sidebar h3, #sidebar p { padding:0 10px 0 0; } #footer p { padding:5px; margin:0; }

Ну вот и готово. Полученный код можно использовать как основу для серьёзного дизайна, который можно будет изменить простой правкой CSS-файла.

Увидеть полученный по этой инструкции html-файл можно здесь

По материалам

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Александер | 8 сентября 2008 14:35

Группа: Гости
Регистрация: --

Статья супер!!!
просто, понятно. Особенно что понравилось, что нет воды :)

На своём блоге сделаю ссылку на ваш сайт.