| Издательский дом ООО "Гейм Лэнд" | СПЕЦВЫПУСК ЖУРНАЛА ХАКЕР #67, ИЮНЬ 2006 г. |
верстаем не по-детски
БОРИС ВОЛЬФСОН
Спецвыпуск: Хакер, номер #067, стр. 067-034-2
[ставим цель] Не будем заниматься изощренным web-дизайном и сделаем довольно стандартную страницу на слоях.
Из графики на странице есть только логотип, остальные элементы дизайна можно сделать при помощи связки HTML+CSS. Начнем решать задачу шаг за шагом. Первым делом еще раз уточним способ решения: будем использовать XHTML версии 1.0 и CSS во внешнем файле style.css, что и пропишем в нашей страничке, которую назовем index.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Название странички</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
Здесь я использую самый строгий стандарт языка XHTML — Strict, в котором полностью разделяется оформление и содержание web-страницы. Также я прописал тег meta с кодировкой, в которой мы пишем нашу страницу. По идее, кодировку должен пересылать web-сервер в заголовке ответа на запрос страницы, но никогда не помешает перестраховаться. В теге title прописано название страницы, а с помощью тега link я подключаю файл style.css с каскадной таблицей стилей.
Все содержимое нашей страницы будет находиться в теге div класса all:
<body>
<div class="all">
<!—Контент -->
</div>
</body>
HTML-шаблон написан, теперь займемся CSS. Мы планируем небольшие отступы слева и справа на странице, для реализации чего устанавливаем параметр margin-left и margin-right для тега body. В этом теге также нужно выбрать семейство шрифтов, размер шрифта и фоновый цвет всей станицы. Очень желательно прописать нулевые границы и внутренние и внешние отступы тега div. Обрати внимание на комментарий: если раскомментировать эту строчку, то все блоки будут иметь рамку, что очень удобно для определения границ блоков.
Параметров тега all не будет, он нужен нам лишь как контейнер.
body
{
margin-left: 1%;
margin-right: 1%;
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
background-color: #FDFDEF;
}
div
{
margin: 0px;
padding: 0px;
border: 0px;
/* border: 1px solid black; */
}
.all
{
}
Теперь можем приняться собственно за верстку. Все, что мы напишем далее, будет располагаться в теге div класса all. Делаем шапку… Она состоит из двух блоков. Первый — это логотип в виде картинки и подменю, которое появляется при наведении (или клике) мышки на пункт главного меню. В принципе, вместо подменю можно вставить и баннер. Вот что мы пишем в index.html:
<div class="logo_and_submenu">
<div class="logo"><img width="255" height="108" alt="Логотип Splendot" src="logo_gray.jpg" /></div>