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

ГЛАВА 5. ПРИМЕРЫ РАЗМЕТОК СТРАНИЦ С ИСПОЛЬЗОВАНИЕМ CSS

В данной главе рассмотрим примеры разметок страниц, примененные в реальных сайтах сети Интернет. Это позволит объединить вышеизложенную информацию для лучшего ее понимания и усвоения. Кроме того, при рассмотрении каскадных таблиц стилей, читатель сможет познакомиться с наиболее распространенными свойствами CSS и увидит способы их определения.

Для лучшего понимания, при описании структуры страниц, будут представлены общие правила их форматирования на уровне HTML и CSS, несущественные детали, относящиеся к особенностям построения и функционирования конкретного сайта, будут опущены.

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

Сайт «Избранные кулинарные рецепты» представляет собой шаблон страниц с фиксированной шириной, расположенных по центру окна браузера. На фоне отображен рисунок, размером 1920x1000 пикселей, сохраненный в формате JPEG. Фоновый рисунок имеет фиксированное положение, поэтому, когда пользователь прокручивает содержимое страницы, рисунок остается на месте. Это создает красивый эффект фона и подчеркивает прозрачность некоторых элементов дизайна сайта.

Первой строкой в HTML-странице этого сайта идет тег <!doctype>, указывающий браузеру правила интерпретации тегов и их свойств в документе. Например, запись

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">

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

Следующие теги указывают на начало описания HTML-документа и определяют раздел head следующим образом:

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="shortcut icon" href="http://selrecipes.ru/images/fav.ico" type="image/x-icon"/> <link type="text/css" href="http://selrecipes.ru/css/styles.css" rel="stylesheet" /> <title>Избранные кулинарные рецепты</title> <base href="http://selrecipes.ru/" /> </head>

Здесь в первой строке раздела head задается кодировка страницы UTF-8. Во второй строке определяется фавикон страниц сайта (изображение, обычно 16х16 пикселей, отображаемое в закладке окна браузера перед именем страницы). Затем подключается таблица стилей style.css, в разделе title задается название страницы «Избранные кулинарные рецепты», и, наконец, определяется базовый адрес сайта в теге <base>.

Непосредственно разметка страницы описывается в разделе body, который определен в данном сайте как

<body class="body_style"> … </body>

где body_style – класс из таблицы стилей style.css, имеющий вид:

.body_style { min-width: 1100px; min-height: 900px; height: 100%; margin: 0px; background: #fff url('../images/page.jpg') no-repeat 50% 0 fixed; }

Свойства min-width и min-height определяют минимальную ширину и высоту страницы сайта в окне браузера. То есть, если окно браузера будет меньше этих значений, то появятся полосы прокрутки, сохраняя указанные минимальные значения. Значение height: 100% указывает браузеру создавать страницу на всю высоту окна, даже если ее содержимое отсутствует. Это нужно, например, для отображения информации по центру окна браузера. Если фактическая высота страницы не будет соответствовать высоте окна, то элемент не будет отцентрирован по высоте. Свойство margin позволяет задавать смещения блоковых элементов на HTML-страницы. По умолчанию раздел body имеет небольшие отступы слева и сверху страницы и если их не приравнять нулю, то изображение «шапки» сайта будет отображено с этими отступами, что в данном случае не соответствует дизайну страницы. Поэтому свойство margin было установлено равным 0. Наконец, последнее свойство

background: #fff url('../images/page.jpg') no-repeat 50% 0 fixed;

задает фон страниц сайта в виде изображения, находящегося по адресу:

http://selrecipes.ru/images/page.jpg

которое не должно дублироваться (повторяться) на странице no-repeat, быть выровненным по центру (50%), отображаться сверху (0) и не прокручиваться вместе с содержимым документа (fixed).

Непосредственно разметка страницы задается с помощью таблицы, которая записана в виде:

<table border=0 cellspacing="0" cellpadding="0" style="width:1100px;height:100%;" align=center> <tr><td valign=top class="header"> <div class="header_text">Избранные рецепты</div> <div class="header_text2">простые и вкусные блюда</div> </td></tr> <tr><td class="shadow"></td> </tr> <tr><td> Содержимое страницы </td></tr> <tr><td valign=top style="height:60px;"> <div class="footer"> <p>© SelRecipes.Ru 2013 </div> </td></tr> </table>

Рис. 5.1. Разметка страницы сайта таблицей (здесь временно был установлен параметр таблицы border=1)

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

Рис. 5.2. Разметка основной части страницы (здесь временно был установлен параметр таблицы border=1)

Ячейка, в которой находится основное содержание страницы сайта, дополнительно разбита еще на 3 ячейки, расположенных в горизонтальном порядке (рис. 5.2). Они были образованы с помощью вложенной таблицы в соответствующую ячейку первой таблицы. Вторая таблица имеет вид:

<table border=0 cellspacing="0" cellpadding="0" class="main-page"> <tr><td valign=top> Меню сайта </td><td valign=top class="content"> Содержимое страницы сайта </td><td valign=top> Форма авторизации </td></tr> </table>

соответствующие стили описаны следующим образом:

.main-page { background: #a0a0a0; background: rgba(255, 255, 255, 0.4); height: 100%; } .content { padding: 5px; width: 100%; font-family: Tahoma, Arial; font-size: 14px; } .content table { font-family: Tahoma, Arial; font-size: 14px; } .content h2 { font-size: 18px; }

Стиль таблицы main-page содержит два определения свойства background. Это сделано для отображения желаемого фона в браузерах разных версий. Дело в том, что значение rgba поддерживается только современными браузерами и игнорируется старыми. Поэтому для прежних версий свойство background описано как #a0a0a0, а для более современных браузеров оно будет заменено значением rgba(255, 255, 255, 0.4). Такой прием часто используется при описании стилей под разные версии браузеров. Свойство height со значение 100% соответственно вытягивает страницу на всю высоту ячейки таблицы, в которую она вложена. В результате в современных браузерах будет отображена таблица с белым полупрозрачным фоном, а в устаревших – с серым непрозрачным.

Стиль content средней ячейки содержит свойство padding:5px задает отступ от границ внутри блоковых элементов (в данном случае внутри элемента ячейки таблицы td). Свойство width:100% устанавливает ширину средней ячейки на максимально возможное значение (в данном случае на всю ширину страницы за вычетом ширины содержимого первой и третьей ячеек). Свойства font-family: Tahoma, Arial и font-size: 14px определяют параметры шрифта для отображения текста на странице.

На основе класса content образовано два контекстных селектора: .content table и .content h2. Они служат для задания свойств таблицы и заголовка второго уровня внутри блока с классом content, т.е. внутри средней ячейки второй таблицы. Селекторы имеют наборы свойств, которые уже были описаны выше.

Описанные таблицы и их свойства образуют общую разметку страниц сайта http://selrecipes.ru таким образом, чтобы они корректно отображались в браузерах с разным размером окна и разными версиями. При этом содержимое основной страницы может быть сколь угодно большим, оно будет корректно отображено в окне браузера в пределах дизайна страницы.