Иван Сагалаев
Пример одного из вариантов верстки трехколоночной страницы
Пример одного из вариантов верстки трехколоночной страницы 1
Содержимое 2
Про валидацию 3
Верстка 3
Организация 3
Раскладка 4
Шрифты 9
Цвета и декор 10
Заголовок и подвал 11
Колонки 13
Левая колонка 14
Колонка новостей 15
Главная колонка 17
Все 17
Пример может быть полезен и сам по себе, как просто готовый шаблон, но главная его цель — показать в действии все механизмы CSS, дать их почувствовать, чтобы свободно их применять.
Вот то, что получится в результате:
По поводу графического дизайна. Тот "дизайн", что на картинке, совершенно не претендует хоть на какую-то художественную ценность. Воспринимайте его как учебный макет.
Содержимое
Создание страницы начинается с определения структуры ее содержимого. Надо решить, из чего по-крупному страница состоит, и как оно между собой связано. Будем имитировать содержимое некоторого простенького гипотетического корпоративного сайта:
Шапка с названием компании
Основное содержимое страницы:
Собственно текст
Навигация
Меню разделов
Поиск
Новостная колонка
Мета-информация о странице: всякая мелочь вроде копирайтов и контактных email'ов.
Теперь превратим все это в HTML. Вот живая страница с тестовым текстом, которая и будет дальше верстаться. Для удобства восприятия структуры вот ее код без текста:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<title>...</title>
<link rel="stylesheet" href="style.css">
<div id="title"><h1>...</h1></div>
<div id="content">
<div id="main">...</div>
<div id="sections">
<h2>...</h2>
<ul>
...
</ul>
<form id="search">
...
</form>
</div>
<div id="news">...</div>
</div>
<div id="meta">...</div>
Если сравнить этот код с тем списком содержимого страницы, что приведен чуть раньше, то можно увидеть, что он ее полностью повторяет. Все просто.
Про валидацию
Эта страница должна быть валидной по стандарту HTML 4.01 Strict.
Вместе с тем, как можно видеть, на этой валидной странице отсутствуют теги <HTML>, <head>, <body>, нет кучи закрывающих тегов и т.п. Это не ошибка валидатора, это гибкость HTML: многие теги не только закрываются, но и добавляются автоматически. В частности, <title> и <link>, с которых страница начинается, будут помещены в автоматически созданный <head>, все остальное содержимое будет помещено в <body>, и они оба будут заключены в <HTML>. Так же будут закрыты все <p> и <li>.
Эти теги пропущены отчасти для того, чтобы продемонстрировать эту не очень широко известную особенность HTML, и отчасти потому что так код проще читается.
Верстка
По ходу всей верстки даются ссылки на страницы, которые показывают до чего мы дошли к данному моменту. Но для получения максимального удовольствия я рекомендую делать верстку непосредственно у себя на компьютере по ходу чтения. Скачайте HTML-файл, графику и создайте рядом пустой файл "style.css". Или сразу скачайте весь архив всех шагов.