Глава VIII

Вёрстка сайта на практике

Чтобы получить подробное представление о вёрстки мы пройдем весь процесс работы, начиная с получения графического макета и заканчивая публикацией сайта. В качестве примера сверстаем страницы сайта lionindesert.ru представленные на рис. 8.1.

а. Главная страница сайта

б. Внутренняя страница

Рис. 8.1. Макеты сайта lionindesert.ru

Дизайнер подготовил макеты в программе Adobe Illustrator CS4 и одновременно экспортировал их в формат PSD (Adobe Photoshop CS4), так что все необходимые начальные изображения у нас имеются. Здесь надо учесть, что вёрстка это процесс творческий и возможно несколько решений одной задачи, поэтому с графикой придётся работать активно, готовя изображения под своё решение. Один большой PSD-файл надо превратить в набор небольших рисунков, которые будут выводиться в браузере с использованием HTML и CSS. Предполагаем, что верстальщик владеет программой Photoshop и может в ней выполнить какие-то типовые действия вроде вырезания фрагмента картинки и сохранения его в подходящем для веба формате. Либо верстальщик работает в паре с дизайнером и чётко указывает ему, что надо получить.

Для систематизации работы разобьём её на ряд задач по виду макета (рис. 8.2). Но и так хорошо заметно, что страница делится на три главные группы: шапка, основная часть, где располагается весь контент и подвал. «Шапка» и «подвал» это жаргонные выражения для обозначения заголовка страницы и её нижней части. Также применяются термины «хедер» и «футер», являющиеся калькой с английских слов header и footer.

Рис. 8.2. Задачи для вёрстки

Макет комбинированный, шапка и подвал занимают всю ширину веб-страницы, а основная часть имеет фиксированную ширину 760 пикселов.

Шапка страницы

Основная сложность с резиновым макетом это обеспечить корректное отображение на разных разрешениях, от высокого до низкого. Поскольку мы ограничили ширину контента 760 пикселами, картинку в шапке стоит разместить так, чтобы более важная часть изображения вписывалась в этот размер. На рис. 8.3 показано, как это сделать. Тёмным цветом выделена центральная часть шириной 760px, буквой А обозначены одинаковые по ширине оставшиеся фрагменты.

Рис. 8.3. Ширина шапки

Само добавление картинки в шапке делается через фоновый рисунок, который необходимо выровнять по центру слоя header.

.header {

height: 405px; /* Высота шапки */

}background: url(images/header-bg.png) no-repeat center bottom;

В идеале рисунок должен иметь большую ширину от 2000 пикселов, тогда практически при любом разрешении монитора рисунок будет показывать центральную часть, обрезая всё, что не помещается в окно. Но беда в том, что картинка не настолько широкая, а рисовать бесконечно тянущиеся по бокам чёрные полоски не хочется. Один из вариантов решения это включить повторение фона по горизонтали. Те, у кого разрешение 1280 пикселов по ширине и меньше, увидят единственную картинку, а владельцы широких мониторов смогут полюбоваться сразу несколькими животными и одновременно заходящими солнцами. Здесь важно подредактировать рисунок так, чтобы он без стыков совмещался сам с собой по горизонтали (рис. 8.4). Градиент для наглядности спрятан.

Рис. 8.4. Совмещение изображения по горизонтали

На данном рисунке место стыка обозначено стрелкой и промежутком, чтобы стык можно было заметить. Если правильно отредактировать правую и левую часть фоновой картинки, то она будет повторяться по горизонтали без видимых стыков, как один сплошной рисунок. Остаётся слегка подправить стиль, заменив значение no-repeat (без повторения) на repeat-x (повторение по горизонтали).

.header { height: 405px;

}background: url(images/header-bg.png) repeat-x center bottom;

На этом можно считать, что фоновый рисунок в шапке готов (рис. 8.5).

Рис. 8.5. Фоновая картинка для шапки

В формате PNG-24 файл с фоном размером 1325х405 пикселов занимает около 32 Кб, а в PNG-8 с 256цветовой палитрой, где качество градиента несколько хуже — около 15 Кб. Можно разбить фон на две составные части — градиент и картинку и сохранить каждое изображение в своём формате, что должно привести к повышению качества отображения градиента. Впрочем, 32 Кб для столь большого изображения это немного и дополнительную оптимизацию кто-то посчитает «экономией на спичках». Тем не менее, альтернативный подход к созданию шапки сайта кому-то окажется полезным, а при желании вы можете его пропустить.

Оптимизация шапки

Поскольку градиент в шапке повторяется по горизонтали, его можно вырезать из макета и установить как фоновую картинку. На рис. 8.6 показан градиент высотой 405 пикселов, подготовленный для этой цели. Формат PNG-24 не вносит искажения в изображения, а градиенты хорошо сжимает (итоговый объем 402 байта), так что в этом случае однозначно следует использовать именно его. Рамка вокруг рисунка добавлена для наглядности.

Рис. 8.6. Градиентный рисунок (header-gradient.png)

Картинка с силуэтными животными делается на прозрачном фоне и высотой 198 пикселов, нет смысла делать её на всю высоту шапки, поскольку она занимает лишь часть. Фрагмент изображения показан на рис. 8.7. Шахматное поле означает прозрачность.

Рис. 8.7. Фоновая картинка с прозрачностью (header-animal.png)

Поскольку сохранение этой картинки идет в формате PNG-8, у которого только один уровень прозрачности, в отличие от 256 уровней формата PNG-24, важно обеспечить корректное наложение на градиентный фон. Для этого при сохранении в Photoshop-е надо указать цвет краёв (Matte) близкий к средней части градиента, где идёт наложение силуэта. Примерно это цвет #9de1f0. В этом случае не

возникнет грязных контуров вокруг деревьев и животных, а картинка при наложении на градиент будет восприниматься как единое целое.

Два рисунка для фона шапки подготовлены, пишем код HTML.

<div class="header"> <div class="header-bg">

<img src="images/header-title.png" alt="Как поймать льва в пустыне" />

</div>

</div>

И стиль для слоёв header и header-bg.

.header {

}background: #00b0d8 url(images/header-gradient.png) repeat-x;

.header-bg {

background: url(images/header-animal.png) repeat-x center bottom; }height: 405px;

В итоге объем файлов оказался 12,5 Кб, что даже меньше ожидаемого.

Название сайта

Название написано на облаке с растушёванными краями, что должно создать трудности при наложении на градиент. Есть два способа, как их обойти.

1.Использовать формат PNG-24 при сохранении прозрачности.

2.Сохранить рисунок в формате GIF или PNG-8 с фрагментом градиента, а затем наложить рисунок на градиент так, чтобы совпадение было с точностью до пиксела.

Очевидно, что второй способ имеет ряд недостатков — изображение нельзя сдвинуть даже на пару пикселов, оно привязано к градиенту, и если его градиент изменить, придётся менять и картинку. Так что сохраняем заголовок в формате PNG-24. Код HTML останется прежним, а стили расширятся.

.header {

}background: #00b0d8 url(images/header-gradient.png) repeat-x;

.header-bg {

background: url(images/header-animal.png) repeat-x center bottom; height: 405px; /* Высота шапки */

}text-align: center; /* Выравнивание по центру */

.header img {

position: relative; /* Относительное позиционирование */ }top: 40px; /* Сдвигаем картинку вниз */

Выравнивание по центру делается через свойство text-align, добавляемое к родителю тега <img>, а сдвиг вниз через свойство top. Чтобы это свойство сработало, необходимо для картинки задать относительное позиционирование с помощью свойства position со значением relative.

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

<a href="/"><img src="images/header-title.png" alt="Как поймать льва в пустыне" /></a>

Значение / у атрибута href указывает на главную страницу и работает только на веб-сервере, но никак не локально.

Окончательный код для шапки приведён в примере 8.1.

Пример 8.1. Шапка сайта XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Как поймать льва в пустыне?</title>

<style type="text/css"> body { margin: 0; }

.header {

background: #00b0d8 url(images/header-gradient.png) repeat-x;

}

/* Градиент */

.header-bg {

background: url(images/header-animal.png) repeat-x center bottom;

/* Животные */ height: 405px; /* Высота шапки */

}text-align: center; /* Выравнивание по центру */

.header img {

position: relative; /* Относительное позиционирование */ }top: 40px; /* Сдвигаем картинку вниз */

</style>

</head>

<body>

<div class="header"> <div class="header-bg">

<img src="images/header-title.png" alt="Как поймать льва в пустыне" width="456" height="166" />

</div>

</div>

</body>

</html>