5.3. Разметка страниц сайта http://reeders.ru

Сайт «Клуб читателей» имеет некоторые общие стили для описания изображений и ссылок:

img {border:0px;} a:link { color: #2B587A; text-decoration: none; } a:visited { text-decoration: none; color: #2B587A; } a:hover { text-decoration: underline; color: #2B587A; } a:active { text-decoration: none; color: #2B587A; }

Эти стили определены в файле style.css и подключаются через тег <link> в разделе <head>.

В первой строке каждой страницы идет объявление:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

для интерпретации тегов в соответствии со спецификацией XHTML 1.0. Эта строка необходима для верного представления страницы в окне браузера.

Для разметки страниц сайта http://reeders.ru также как и в предыдущих примерах использовалась таблица (рис. 5.5). Чтобы таблица плотно прилегала к границам окна, для тега <body> были установлены стили, записанные в классе body_style:

.body_style { min-width: 900px; min-height: 900px; height: 100%; margin: 0px; }

Рис. 5.5. Разметка страницы сайта http://reeders.ru (здесь временно установлен атрибут border=1 для отображения границ таблицы)

Таблица представляет собой три ячейки, расположенные вертикально друг за другом. Верхняя ячейка содержит «шапку» сайта, вторая – основное содержание страницы, а третья – «подвал» (footer) сайта:

<table id="site-table" border=0 cellspacing="0" cellpadding="0" style="width:900px;height:100%;" align=center> <tr><td valign=top align=left> <div class="header"> <div class="logo">Клуб читателей</div> <div class="logo_line"> <a href="http://reeders.ru">Главная</a> <a href="terms">Правила пользования сайтом</a> <a href="mailto:reeders@bk.ru">Обратная связь</a> </div> <div class="logo_line"> <input type="text" class="top_search"/> <input type="submit" value="Найти" /> </div> </div> </td></tr> <tr><td align=left> Основное содержание страницы </td></tr> <tr><td valign=top style="height:40px;"> <div class="footer"> <p>© Reeders.Ru 2013-2014 </div> <div class="separator"></div> </td></tr> </table>

Для создания разметки «шапки» сайта используется блоковый тег-контейнер <div> с классом стилей header

.header { width: 900px; height: 60px; }

который задает ширину и высоту «шапки» сайта. Внутри этого блока находятся три блока <div>, описывающие детали «шапки». Первый вложенный блок

<div class="logo">Клуб читателей</div>

отображает надпись «Клуб читателей» белыми буквами на синем фоне:

.logo { width:260px; height:55px; background: #6181A6; padding: 0 0 5px 5px; margin-right: 20px; font-family: Monotype Corsiva, Tahoma, Arial; font-size: 38px; color: #fff; float:left; }

Свойства класса logo определяют ширину и высоту блока логотипа, цвет фона, смещение и размер надписи в этом блоке, цвет шрифта и положение блока div слева относительно родительского блока <div class="header">. Последнее свойство float:left необходимо, чтобы вложенный блок <div> располагался слева, а последующие блоки <div> его обтекали справа. Если это свойство убрать, то по умолчанию блоки <div> располагаются друг за другом по вертикали, что не будет соответствовать дизайну сайта.

Следующие два вложенных блока

<div class="logo_line"> <a href="http://reeders.ru">Главная</a> <a href="terms">Правила пользования сайтом</a> <a href="mailto:reeders@bk.ru">Обратная связь</a> </div> <div class="logo_line"> <input type="text" class="top_search"/> <input type="submit" value="Найти" /> </div>

образуют две горизонтальные линии справа от логотипа (первого блока div) благодаря стилям класса logo_line:

.logo_line { height:25px; float: left; width: 610px; } .logo_line a { padding-right: 15px; }

Свойства height и width подобраны таким образом, чтобы блоки div занимали всю ширину и половину высоты блока логотипа. Свойство float:left обеспечивает расположение этих блоков друг за другом по горизонтали, но т.к. их ширина не позволяет им располагаться на одной линии, то они выравниваются по вертикали, образуя две линии общей высотой, равной высоте блока логотипа. В результате получается заголовок сайта, показанный на рис. 5.6.

Рис. 5.6. Вид «шапки» сайта http://reeders.ru

Для разметки основного содержания страницы используется таблица, вложенная во вторую ячейку первой таблицы. Вложенная таблица имеет две ячейки, расположенные горизонтально друг за другом (рис. 5.7). Содержимое каждой ячейки выравнивается по верхнему краю, т.е. ячейки <td> имеют атрибут valign=top. В первой ячейке располагается форма авторизации, а после авторизации – профиль пользователя. Во второй ячейке – содержание страницы. В результате получается разметка, универсальная для всех страниц сайта http://reeders.ru.

Рис. 5.7. Разметка основного содержания страницы (здесь временно установлен атрибут border=1 для отображения границ таблицы)