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

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

Полученных нами знаний уже достаточно для того, чтобы создать контейнерный дизайн для нашего Web-сайта. Давайте займемся этим.

Как обычно, выпишем список параметров для всех созданных ранее контейнеров. Для контейнера с заголовком Web-сайта (cheader):

— ширина — 100 % (все окно Web-обозревателя).

Для контейнера с полосой навигации (cnavbar):

— ширина — 30 % (примерно треть ширины окна Web-обозревателя);

— минимальная ширина — 240 пикселов (это значение получено автором в результате экспериментов; оно примерно равно ширине полосы навигации);

— выравнивание — по левому краю (т. е. это будет плавающий контейнер).

Для контейнера с основным содержимым (cmain):

— ширина — 70 % (примерно две трети ширины окна Web-обозревателя);

— выравнивание — по левому краю.

Для контейнера со сведениями об авторских правах (ccopyright):

— ширина — 100 % (все окно Web-обозревателя);

— расположение — ниже всех плавающих контейнеров, выровненных по левому и правому краям.

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

На основе перечисленных требований напишем CSS-код, определяющий нужные стили (листинг 10.5).

Листинг 10.5

#cheader { width: 100 % }

#cnavbar { width: 30 %; min-width: 240px; float: left }

#cmain { width: 70 %; float: left }

#ccopyright { width: 100 %; clear: both }

Поместим этот код в самый конец таблицы стилей main.css, после чего сохраним ее. Откроем Web-страницу index.htm в Web-обозревателе и посмотрим, что получилось (рис. 10.2).

Мы сделали это! Много времени ушло на изучение HTML и CSS, но результат того стоит. Вот она — наша первая Web-страница, выполненная по канонам современного Web-дизайна.

Еще немного полюбуемся на преобразившуюся Web-страницу. И снова за дело.

Рис. 10.2. Web-страница index.htm, выполненная на основе контейнерного Web-дизайна, в Web-обозревателе

Рис. 10.2. Web-страница index.htm, выполненная на основе контейнерного Web-дизайна, в Web-обозревателе

Данный текст является ознакомительным фрагментом.