Основная часть

В этой части страницы располагается контент в белой рамке с декоративными границами, а также градиент, с которого мы и начнём.

Градиент

Вначале подготовим изображение градиента в графическом редакторе. Рисунок имеет высоту 457 пикселов и состоит из плавного перехода от цвета #f9db94 (сверху) до #f9f2e3 (снизу). Сам градиент с указанием цветов представлен на рис. 8.8.

Рис. 8.8. Градиент для основной части

Содержание на каждой странице может быть разным, соответственно высота основной части также варьируется, поэтому сделать градиент с учётом высоты проблематично. Пойдём на хитрость и установим цвет фона основной части как #f9f2e3, т.е. совпадающим с нижним цветом градиента. Получится, что цвет от тёмного оттенка плавно переходит в цвет фона.

.content-gradient {

}background: #f9f2e3 url(images/content-gradient.png) repeat-x;

Здесь цвет и фоновый рисунок установлен через универсальное свойство background, оно же указывает повторение фона по горизонтали.

Декоративная рамка

Для центральной части требуется подготовить фоновое изображение с декоративными границами. Оно должно иметь ширину 760 пикселов и содержать прозрачные участки для наложения на градиент (рис. 8.9). В качестве графического формата лучше всего подойдёт PNG-24.

Рис. 8.9. Фоновая картинка для создания границ

В стилях указываем ширину макета, выравнивание по центру и фон с повторением по вертикали.

.content-bg {

width: 760px; /* Ширина макета */

margin: auto; /* Выравнивание по центру */

}background: url(images/content-bg.png) repeat-y; /* Фон с границами */

Текст добавлять пока нельзя, потому что не определены поля (padding), так что текст будет накладываться прямо на границу. В принципе, ничего не мешает включить их для слоя content-bg, подкорректировав ширину, но надо принять во внимание вот какой момент. Белый цвет фона получается путём вставки фонового рисунка и у пользователя, отключившего показ изображений в браузере, никакого белого фона не будет. Надо бы предусмотреть такую ситуацию и добавить ещё один слой, у которого будет белый цвет фона, необходимые отступы и поля.

.content-white {

background: #fff; /* Белый цвет фона */ margin: 0 11px; /* Отступы по горизонтали */ padding: 20px 40px; /* Поля */

}text-align: justify; /* Выравнивание по ширине */

Значение отступов подобрано, исходя из ширины «зубчиков» границы, полей же по желанию. Заодно добавлено выравнивание текста по ширине. Окончательный код показан в примере 8.2.

Пример 8.2. Основная часть страницы

<div class="content-gradient"> <div class="content-bg">

<div class="content-white">

<p>Перед вами учебный сайт для демонстрации возможностей HTML и CSS по созданию своего ресурса и его публикации в Интернете. Поскольку любой сайт должен содержать полезную или интересную информацию, мы

выбрали тему ловли льва в пустыне, которая будет, без всяких сомнений, полезна любому посетителю. Так, на всякий случай.</p>

</div>

</div>

</div>

Свойство text-align наследуется, поэтому не имеет значения, к какому слою оно добавляется.

Подвал страницы

В подвале у нас располагается рисунок лежащего льва и контактная информация. Если проанализировать изображение, видно, что оно не однородное — трава слева, справа и по центру различается. Также она накладывается поверх линии (рис. 8.10).

Рис. 8.10. Трава отображается поверх границы

Ещё один момент, который следует учесть заранее — как отображать подвал при небольшом объёме контента. Возможен «висящий» подвал, внизу которого отображается фон веб-страницы (рис. 8.11а) или подвал, заполненный до нижнего края окна (рис. 8.11б).

а. Висящий подвал

б. Подвал прижат к краю

Рис. 8.11. Разновидности подвала

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

Способов добавления рисунка травы для подвала несколько, пойдём самым простым путём и сделаем его фоном. Изображение, чтобы оно корректно смотрелась на разных разрешениях, придётся задать достаточно большим, 2000 пикселов по ширине. Картинка ставится через свойство background и в параметрах её положение указывается по центру значением 50% 0.

.footer {

background: url(images/grass.png) 50% 0 no-repeat; /* Фоновый рисунок травы */

}

Рисунок с травой специально выполнен узким и имеет высоту 27 пикселов, что явно недостаточно для высоты нашего подвала, поэтому дополним рисунок тем же фоновым цветом #e2ed9c. Для этого

добавим ещё один слой с именем footer-bg и для него укажем необходимый цвет фона.

.footer-bg {

}background: #e2ed9c; /* Цвет фона */

Код HTML будет простым.

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

Copyright </div>

</div

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

.copyright {

width: 740px; /* Ширина макета без полей */ padding: 0 10px 10px; /* Поля */

margin: auto; /* Выравнивание по центру */

}color: #526118; /* Цвет текста */

.copyright p {

}margin: 0 0 5px 170px; /* Отступы текста */

Здесь к ширине контента (width) добавляется значение padding слева и справа, что в итоге и даёт ширину нашего макета в 760px. Текст сдвигается вправо с помощью универсального свойства margin, добавляемого к селектору P. Код для создания подвала и текста:

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

<div class="copyright">

<p><strong>Учебный сайт «Как поймать льва в пустыне»</strong></p> <p>© Влад Мержевич</p>

</div>

</div>

</div>

Осталось только включить рисунок с лежащим львом и окончательно подкорректировать стили. Льва добавим в виде обычного изображения через тег <img>, а чтобы управлять его положением поместим рисунок в <div> с классом lion. Впрочем, этот класс можно также установить напрямую тегу <img>. Окончательный код нашего подвала представлен в примере 8.3.

Пример 8.3. Код подвала

<div class="footer">

<div class="lion"><img src="images/lion.png" alt="" width="130" height="80"

/></div>

<div class="footer-bg"> <div class="copyright">

<p><strong>Учебный сайт «Как поймать льва в пустыне»</strong></p> <p>© Влад Мержевич</p>

</div>

</div>

</div>

Положение льва укажем с помощью позиционирования. Для этого родительскому элементу footer следует указать свойство position как relative, а элементу lion как absolute. В таком случае свойства left и top управляют координатами относительно родителя, т.е. footer. Однако здесь есть одна сложность, footer занимает всю ширину страницы, а льва надо установить относительно макета в 760px. Значение для left указать нельзя, потому что мы не знаем, чему в пикселах равно расстояние от левого края браузера до левого края макета. Воспользуемся следующим трюком: для left установим 50%, что выровняет край рисунка по центральной оси, а относительно этого положения будем сдвигать рисунок свойством margin-left с отрицательным (влево) или положительным (вправо) значением.

.footer {

}position: relative; /* Относительное позиционирование */

.lion {

position: absolute; /* Абсолютное позиционирование */ left: 50%; /* По центру */

margin-left: -347px; /* Сдвигаем влево */

}top: 3px; /* От верхнего края */

Значения margin-left и top подбираются опытным путём, чтобы добиться наилучшего результата.

Добавление рисунка вносит путаницу с фоновыми рисунками, и они начинают накладываться друг на друга, так что пора восстановить их исконное место. Для начала сдвинем рисунок с травой вниз на 53 пиксела. Это число получилось вычитанием из высоты рисунка льва (80px) высоты рисунка травы (27px). И подымем наш подвал целиком вверх на 77–80 пикселов. Во-первых, поднять надо, потому что из-за рисунка льва подвал опускается вниз, во-вторых, получим наложение подвала на границу макета, как показано на рис. 8.10.

К сожалению, все эти действия не имеют никакого смысла, потому что из-за эффекта схлопывающихся отступов положение элементов считается совсем иначе. Отменить этот эффект можно разными способами, к примеру, с помощью полей, границ, абсолютного позиционирования, но в конкретном случае они не подходят. Здесь поля и границы окажутся лишними. Так что вспомним ещё один метод и добавим свойство overflow со значением auto. Вообще-то это свойство при необходимости добавляет полосы прокрутки, если контент не помещается в заданные размеры. Но сейчас overflow нам нужно только для одного — отменить схлопывающиеся отступы.

background: url(images/grass.png) 50% 53px no-repeat; /* Фоновый рисунок травы */

margin-top: -77px; /* Поднимаем вверх */

overflow: auto; /* Отменяем схлопывающиеся отступы */ }position: relative; /* Относительное позиционирование */

Текст в подвале и зелёный фон также поднимается вверх, поэтому для слоя footer-bg надо установить отступ сверху на высоту рисунка льва.

.footer-bg { }margin-top: 80px;

Окончательно для контента основной части добавляем поле снизу равное высоте рисунка, чтобы текст не закрывался подвалом.

.content-white {

}padding: 20px 40px 80px; /* Поля */

Стиль для подвала приведён в примере 8.4.

Пример 8.4. Стиль подвала

.footer {

background: url(images/grass.png) 50% 53px no-repeat; /* Фоновый рисунок травы */

margin-top: -77px; /* Поднимаем вверх */

overflow: auto; /* Отменяем схлопывающиеся отступы */

} position: relative; /* Относительное позиционирование */

.lion {

position: absolute; /* Абсолютное позиционирование */ left: 50%; /* По центру */

margin-left: -347px; /* Сдвигаем влево */

} top: 3px; /* От верхнего края */

.footer-bg {

background: #e2ed9c; /* Цвет фона подвала */ } margin-top: 80px; /* Сдвигаем вниз */

.copyright {

width: 740px; /* Ширина макета без полей */ padding: 0 10px 10px; /* Поля */

margin: auto; /* Выравнивание по центру */

} color: #526118; /* Цвет текста */

.copyright p {

} margin: 0 0 5px 170px; /* Отступы текста */

Осталось решить последний вопрос, делать подвал висящим или нет (см. рис. 8.11). Вся реализация, показанная выше, направлена на висящий подвал, изменить поведение можно всего-навсего перенеся background из footer-bg в BODY. Хотя это действие установит зелёный цвет фона для всей страницы целиком, заметно это будет только там, где видно пространство под подвалом. Для остальных разделов

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

BODY {

}background: #e2ed9c; /* Цвет фона подвала */