Продолжаем разговор за CSS. Напоминаю: мы изучаем основы блочной верстки сайтов.

Вообще принято некое упорядоченное расположение правил в файле css. Вначале указываются общие правила для всей страницы, а потом они идут в той очерёдности, в которой элементы на странице появляются сверху вниз. Мы пока указали не все общие элементы. Нет заголовков, списков, ссылок (тэги h, ul, a). Их мы добавим позже, а пока начнём уже хоть что-нибудь прицеплять весомое к нашей странице.

Из нашего макета я вырезал целиком шапку (её мы используем не как картинку, а как фон), оба рисунка с поросятами, рисунки вензеля, зелёной линии внизу, фон полосы навигации (не весь, а только отрезанный кусочек размером 8х35 пикселов) и рисунок зеленой галочки у списка новостей. Итого у нас вышло 7 изображений. Их поместим в той же папке, где у нас лежит сама страничка и лист стилей.

Верстка шапки сайта

Далее в листе стилей мы напишем правило для «шапки» сайта (header):

#header {
background-image: url(header.jpg);
width: 760px;
height: 158px;
}

Здесь мы указали, что вся наша шапка залита фоном-картинкой с размерами 760х158 пикселей (такая у меня вышла при разрезании макета). url(header.jpg) — это ссылка на картинку. Важный момент(!) — почему ссылка выглядит как простое имя с расширением для картинки? Да потому, что сама картинка лежит в той же самой папке, где и лист стилей. Это так называемая относительная ссылка. Если бы была абсолютной, то начиналась бы с http://

А теперь сохраним наш лист стилей в ту же самую папочку, где лежит Главная страница и картинки. Сохраняем таким же образом, как и раньше, только в имени добавляем расширение .css — style.css

Теперь мы снова откроем нашу Главную страницу. Между тегами body добавляем следующий код:

<div id="container">
<div id="header">
</div>
</div>

Сохраняемся. Открываем нашу страничку браузером и любуемся на ровно посерёдке отцентрированную шапку. Что мы сделали? Мы добавили в тело страницы нашу «коробочку» — контейнер, а уже в него положили шапку. То есть вложенность тэгов налицо.

div id — это и есть тэг с индивидуальным атрибутом, который стоит после знака равенства и должен быть обязательно заключен в кавычки.

Полюбовались? Теперь продолжим писать код для листа стилей. Открываем его и следом за правилом для шапки запишем правила для блока навигации.

Верстка блока навигации сайта

#nav {
background: url(nav_bg.jpg) repeat-x;
color: #f00;
font-size: 120%;
font-weight: bold;
line-height: 1.8em;
text-align: center;
}
#nav ul {
list-style-type: none;
}
#nav li {
display: inline;
margin: 0 8px;
}
#nav li a {
color: #0c0;
}
#nav li a:hover {
color: #f00;
}

Уже немного сложнее, не правда ли? Разберём по косточкам.

Панель навигации будет у нас одна — сразу под шапкой, горизонтальная. (в подвале сделаем дублирование обычными ссылками). Для её реализации мы воспользуемся таким элементом как маркированный список.

Что такое маркированный список

Для тех, кто не в танке объясняю:

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

Список этот в HTML обозначается тэгом ul. Элементы списка (а попросту говоря — строчки) обозначаются тэгом li.

Выглядит это примерно так:

<ul>
<li>Утром надел трусы.</li>
<li>Не забыл про часы.</li>
<li>Снова не забыл.</li>
</ul>

Как видим, тэги имеют парные закрывающие тэги, и тэг li вложен в тэг ul. Теперь вернёмся к нашему листу стилей.

Блок навигации мы обозвали атрибутом nav. Вначале укажем общие настройки для него: бэкграунд — это картинка с именем nav_bg.jpg размером 8х35 пикселей. Это обычный такой «столбик» с градиентом от белого к серому сверху вниз. Чтобы растянуть его по всей полосе навигации, мы указали в значении слово repeat-x, что означает «повторить по оси х», то есть по горизонтали.

Далее указали цвет шрифта ярко-красного цвета #f00 для активного раздела. Он у нас не будет ссылкой, а останется простым текстом (делать на Главной странице ссылку на самое себя — тавтология).

Остальное в этом правиле несложно: размер шрифта, толщина, высота по вертикали (тут появилась новая единица измерения em, которая равна высоте прописной буквы выбранного шрифта. Значение 1.8em показывает, что шрифт увеличен на 1.8 высоты стандартной буквы), ну и выравнивание текста по центру.

Следующее правило указывает, что у нашего списка не должно быть никаких маркеров. Это задаётся значением none.

Далее указываем для строк списка расположение по горизонтали, то есть в линию inline, чтобы не получился обыкновенный столбец. И отступы: сверху и снизу по нулям, с боков по 8 пикселей.

А теперь укажем, каким образом наши менюшки будут раегировать на наведение мышкой на них. Понятное дело, что менюшки — это ссылки на другие разделы нашего сайта. А каким тэгом обозначаются ссылки? Правильно, тэгом a. Поэтому пропишем ещё пару правил для этих ссылок. В первом мы обозначили цвет ссылки в обычном (неактивном) состоянии, а во втором — в активном, то есть при наведении мыши.

Ну а теперь следом добавим вот такое правило:

a {
text-decoration: none;
}

Оно указывает, что все ссылки на странице по умолчанию не используют подчёркивание. Ну согласитесь, в меню навигации это не всегда выглядит красиво. А там где нужно, мы это правило изменим.

Устали? Ничего, это еще цветочки :) Дальше будет еще интереснее. Оставайтесь на связи. А если что-то непонятно, вэлкам писать вопросы в комментарии.

Блочная верстка сайта | Урок 1
Блочная верстка сайта | Урок 2
Блочная верстка сайта | Урок 3
Блочная верстка сайта | Урок 4
Блочная верстка сайта | Урок 5
Блочная верстка сайта | Урок 6
Блочная верстка сайта | Урок 7
Блочная верстка сайта | Урок 8
Блочная верстка сайта | Урок 9

Автор: Игорь Квентор
www.websovet.com