Представление для нашего 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-обозревателе
Параметры переполнения. Контейнеры с прокруткой
Ни у одного из контейнеров, формирующих дизайн нашей Web-страницы, мы не задали явную высоту. Web-обозреватель сам установит для контейнеров такие значения высоты, чтобы они вместили свое содержимое полностью.
Но что случится, если мы зададим для контейнера высоту? Тогда может выйти так, что содержимое контейнера не поместится в нем, и возникнет переполнение контейнера. Поведение контейнера зависит от параметров, которые мы зададим для него.
Атрибут стиля overflow как раз и задает поведение контейнера при переполнении:
overflow: visible|hidden|scroll|auto|inherit
Здесь доступны четыре значения:
— visible — высота контейнера увеличится, чтобы полностью вместить все содержимое (обычное поведение);
— hidden — не помещающееся в контейнер содержимое будет обрезано. Контейнер сохранит свои размеры;
— scroll — в контейнере появятся полосы прокрутки, с помощью которых можно просмотреть не помещающуюся часть содержимого. Эти полосы прокрутки будут присутствовать в контейнере всегда, даже если в них нет нужды;
— auto — полосы прокрутки появятся в контейнере, только если в них возникнет необходимость.
Пример:
#cmain { overflow: auto }
Мы задали для контейнера cmain такое поведение, когда при выходе содержимого за границы контейнера в нем появятся полосы прокрутки.
Здесь нужно сказать еще вот что. Атрибут стиля overflow имеет смысл только в том случае, если мы зададим для высоты контейнера абсолютное значение. При указании относительного значения высоты контейнера он всегда будет увеличиваться в размерах для того, чтобы вместить все содержимое, как будто для атрибута стиля overflow задано значение visible:
#cmain { height: 500px; overflow: auto }
Вот теперь контейнер cmain при необходимости обзаведется полосами прокрутки.
А в следующем примере атрибут стиля overflow можно не указывать — контейнер cmain всегда будет вести себя так, будто для упомянутого атрибута стиля задано значение visible:
#cmain { height: 50 %; overflow: auto }
Атрибуты стиля overflow-x и overflow-y задают поведение контейнера при выходе содержимого за пределы его границ, соответственно, по горизонтали и вертикали. Доступные значения у них те же, что и у атрибута стиля overflow:
#cnavbar { width: 270px; overflow-x: hidden }
Пользуясь только что изученными атрибутами стиля, мы можем создать на Web-странице контейнеры с прокруткой! Это обычные контейнеры с большим содержимым, для просмотра которого предусмотрены полосы прокрутки. Их преимущество в том, что посетитель, прокручивая содержимое такого контейнера, не затрагивает все остальные фрагменты Web-страницы (заголовок Web-сайта, полоса навигации и сведения об авторских правах). Весьма удобно.
Контейнеры с прокруткой — высший шик современного Web-дизайна. Нужно будет и нам создать такие.
Представление для нашего Web-сайта, часть 5
Давайте создадим контейнер с прокруткой для вывода основного содержимого Web-страницы. Точнее, переделаем уже созданный контейнер cmain.
Что нам для этого потребуется? Во-первых, задать для данного контейнера абсолютное значение высоты, а лучше — и ширины, и высоты. Во-вторых, определить соответствующее поведение при переполнении.
При задании абсолютного значения ширины для контейнера cmain нужно установить абсолютное значение ширины и у контейнера cnavbar. Смешивать абсолютные и относительные значения ширины у плавающих контейнеров не рекомендуется — результат будет непредсказуемым.
Выпишем список параметров контейнеров cnavbar и cmain.
Для контейнера cnavbar:
— ширина — 240 пикселов;
— высота — 620 пикселов;
— выравнивание — по левому краю. Для контейнера cmain:
— ширина — 780 пикселов;
— высота — 620 пикселов;
— выравнивание — по левому краю;
— поведение при переполнении — появление полос прокрутки.
Размеры контейнеров автор определил в результате экспериментов. Он постарался выбрать такие значения, чтобы пространство Web-страницы было занято максимально полно, а полосы прокрутки у самой Web-страницы отсутствовали. Скорее всего, вам придется подобрать другие значения размеров.
Кроме того, мы задали одинаковую высоту у обоих контейнеров — и cnavbar, и cmain. Это нужно для того, чтобы исключить некоторые нежелательные эффекты, которые могут возникнуть, если мы создадим у контейнеров рамки или изменим цвет фона (о создании рамок речь пойдет в главе 11).
Осталось воплотить наши требования к контейнерам в CSS-код. В листинге 10.6 приведен исправленный фрагмент таблицы стилей main.css, создающий стили, соответствующие контейнерам cnavbar и cmain.
Листинг 10.6
#cnavbar { width: 240px; height: 620px; float: left }
#cmain { width: 780px; height: 620px; float: left; overflow: auto }
Внесем эти исправления в таблицу стилей, сохраним ее и проверим, что получилось. А получилось у нас то, что показано на рис. 10.3.
Рис. 10.3. Web-страница index.htm, содержащая контейнер с прокруткой, в Web-обозревателе
У нас получилась на Web-странице этакое "окошко", содержимое которого можно прокручивать независимо от всего остального. Многие ли Web-сайты могут этим похвастаться?..
Теперь давайте изменим размеры окна Web-обозревателя. И наш красивый и современный Web-дизайн превратится невесть во что…
В
