верстаем не по-детски

БОРИС ВОЛЬФСОН

Спецвыпуск: Хакер, номер #067, стр. 067-034-4

<p class="vertical_menu_item"><a class="white_link" href="#">Проекты</a></p>

<p class="vertical_menu_item"><a class="white_link" href="#">Веб-студия</a></p>

</div>

<div class="main">

<div class="breadcrumb"><a href="#">Главная </a>| <a href="#">О проекте</a> </div>

<div class="content">

<h1>Заголовок первого уровня</h1>

<h2>Заголовок второго уровня</h2>

<p>Здесь будет контент. Здесь будет контент. Здесь будет контент. Здесь будет контент. Здесь будет контент.

</p>

<h2>Заголовок второго уровня</h2>

<p>

Здесь будет контент. Здесь будет контент. Здесь будет контент. Здесь будет контент. Здесь будет контент.

</p>

</div>

</div>

</div>

Ты заметил, что было использовано несколько контейнерных слоев? Для чего они нужны? Их можно использовать для задания цвета фона различных областей нашей странички — попробуй поиграть с цветом фона этих слоев и увидишь все сам.

Теперь необходимо правильно расположить элементы, для чего опять же используем CSS:

.vertical_menu

{

clear: both;

float: left;

width: 180px;

background-color: #1F1C5B;

color: white;

}

.main

{

margin-left: 180px;

background-color: red;

}

.breadcrumb

{

background-color: #837C9B;

padding: 5px;

}

.content

{

background-color: #FDFDEF;

padding: 5px;

}

.middle

{

clear: both;

background-color: #FDFDEF;

}

Для создания эффекта двух колонок я использовал следующий прием: вертикальному меню (левой колонке) я задал ширину в 180 пикселей, а слою с основным содержанием (правой колонке) поставил внешний отступ слева во столько же пикселей. Такой прием довольно часто используется при верстке на слоях. Осталось сделать лишь пару последних штрихов. Прикручиваем строчку с копирайтом и дописываем для нее стили:

<div class="copyright_line">(c) 2006 Борис Вольфсон </div>

.copyright_line

{

clear: both;

text-align: right;

background-color: #837C9B;

color: white;

padding: 5px;

}

Осталось прописать стили для правильного отображения элементов вертикального и горизонтального меню. Прежде всего, шрифт элементов меню должен быть несколько больше шрифта обычного текста. Также должны быть проставлены внутренние отступы.

.vertical_menu_item, .horizontal_menu_item

{

font-weight: bold;

font-size: 110%;

}

.horizontal_menu_item

{

padding: 3px 5px 3px 5px;

}

.vertical_menu_item

{

padding: 5px 5px 5px 15px;

}

Для правильного отображения нужно проставить отступы и границы параграфов и форм и цвет ссылок. Поколдуй сам — оставлю тебе такую возможность.

[валидатор] Наступил самый страшный момент — проверка кода, написанного нами, валидатором, то есть специальной программой, которая проверяет код на соответствие стандартам. Дело в том, что обычно стандартный код правильно отображается большинством браузеров и более правильно индексируется поисковиками. Web-стандарты устанавливаются организацией The World Wide Web Consortium (W3C). Их можно почитать на официальном сайте www.w3c.org, там же располагаются и валидаторы. Нам понадобятся два валидатора для проверки HTML и CSS. Могу честно признаться, при первой проверке выяснилось, что в одном месте я не закрыл тег параграфа, к тому же валидатор ругнулся на то, что тег input, который стоит в форме поиска, не обернут никаким тегом. Исправив ошибки, я (и ты вместе со мной) увидел желанный зеленый свет! Что касается CSS-валидатора, то он только выдал несколько предупреждений (warning). С другой стороны, любое warning — это потенциальная ошибка.