Распознанный текст, спецсимволы и формулы могут содержать ошибки, поэтому с корректным вариантом рекомендуем ознакомиться на отсканированных изображениях учебника выше Также, советуем воспользоваться поиском по сайту, мы уверены, что вы сможете найти больше информации по нужной Вам тематике ГЛАВА 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 задается кодировка страницы UTF-8. Во второй строке определяется фавикон страниц сайта (изображение, обычно 16х16 пикселей, отображаемое в закладке окна браузера перед именем страницы). Затем подключается таблица стилей style.css, в разделе title задается название страницы «Избранные кулинарные рецепты», и, наконец, определяется базовый адрес сайта в теге <base>. Непосредственно разметка страницы
описывается в разделе body, который определен в данном сайте как
<body class="body_style">
где
body_style – класс из
таблицы стилей style.css, имеющий вид:
.body_style
{
Свойства 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>
Рис. 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">
соответствующие
стили описаны следующим образом:
.main-page
{
Стиль таблицы 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 таким образом, чтобы они корректно отображались в браузерах с разным размером окна и разными версиями. При этом содержимое основной страницы может быть сколь угодно большим, оно будет корректно отображено в окне браузера в пределах дизайна страницы.
|
1 |
Оглавление
|
