Представление для нашего Web‑сайта, часть 6

Что ж, отступы и рамки мы создавать научились. По крайней мере, теоретически. Настала пора применить полученные знания на практике.

Прежде всего, сделаем отступы между контейнерами, формирующими дизайн наших Web‑страниц, и между границами этих контейнеров и их содержимым.

– Внешний отступ между краями окна Web‑обозревателя и содержимым Web‑ страницы равен нулю. Пусть пространство в окне Web‑обозревателя используется максимально полно.

НА ЗАМЕТКУ

По умолчанию каждый Web‑обозреватель создает свои отступы между краями своего окна и содержимым Web‑страницы.

– Внутренние отступы в контейнере с заголовком Web‑сайта (cheader) слева и справа – по 20 пикселов. Нам придется отодвинуть текст заголовка от краев окна Web‑обозревателя, иначе заголовок будет выглядеть некрасиво.

– Внешний отступ между контейнерами с полосой навигации (cnavbar) и с основным содержимым (cmain) – 10 пикселов.

– Внутренние отступы у контейнера с основным содержимым (cmain) со всех сторон – по 5 пикселов.

– Внутренний отступ у контейнера с основным содержимым (cmain) сверху – 10 пикселов. Так мы отделим его от контейнеров cnavbar и cmain.

– Внутренние отступы в контейнере со сведениями об авторских правах (ccopyright) слева и справа – по 20 пикселов. Текст сведений об авторских правах также следует отодвинуть от краев окна Web‑обозревателя.

Приведенные значения отступов получены автором в результате экспериментов. Вы можете задать другие.

Теперь разделим все четыре контейнера рамками.

– Контейнер cheader получит рамку с одной нижней стороной.

– Контейнер cmain – рамку с одной левой стороной.

– Контейнер ccopyright – рамку с одной верхней стороной.

Рамки мы сделаем тонкими и точечными. В качестве цвета зададим для них #B1BEC6 (светло‑синий).

В листинге 11.3 приведен исправленный фрагмент CSS‑кода таблицы стилей main.css, реализующий выбранные нами параметры отступов и рамок.