. Это довольно трудоемкий процесс. Во-вторых, можно убрать отступы из стилей в CSS-файла, а затем в файле start. html добавить в каждый столбец
-контейнер следующего вида:
458 Часть 3. Макет страницы
Затем в файле styles.css нужно просто создать стиль для добавления отсту- пов: .innerColumn { padding: 0 20px 0 10px; } Поскольку в стиле .innerColumn ширина не задается, Контейнер просто разра- стается, чтобы занять столбец, а отступы сдвигают все, что находится внутри этого контейнера (заголовки, абзацы и т. д.) внутрь на 10 пикселов. Недостаток такого подхода состоит в необходимости добавления дополнительного кода. Есть еще один, более простой, гибкий и широко поддерживаемый веб-браузе- рами способ. 2. Добавьте к таблице стилей еще один стиль: * { -moz-box-sizing: border-box; box-sizing: border-box; }} В этом стиле используется универсальный селектор. Благодаря ему свойство box-sizing применяется к каждому элементу страницы. Установка для этого свойства значения border-box заставляет веб-браузеры использовать размер от- ступов и границ в качестве части CSS-значения width . То есть отступы не добав- ляются к установленному ранее CSS-значению ширины. Тем самым предотвра- щаются любые выпадения плавающих элементов, поскольку столбцы теперь составляют только 100 % ширины окна браузера. Единственным недостатком этой технологии является то, что свойство box- sizing не распознается Internet Explorer 7 и более ранними версиями, поэтому в этих браузерах будет происходить выпадение плавающих элементов. Чтобы понять, нужно ли переживать за постоянно сокращающееся количество при- верженцев этих браузеров, прочитайте врезку «Часто задаваемые вопросы. Стоит ли волноваться насчет Internet Explorer 6, 7 или 8?» в разделе «Важность doctype» гл. 1. Если нужно вести разработку с учетом этих браузеров, восполь- зуйтесь технологией дополнительного div -контейнера, которая рассматрива- лась в шаге 1. И наконец, добавьте линии границы, чтобы отделить столбцы друг от друга. 3. Отредактируйте стиль .main , добавив к нему левую и правую границы: .main { float: left; width: 60%; padding: 0 20px; border-left: dashed 1px rgb(153,153,153); border-right: dashed 1px rgb(153,153,153); }
Глава 13. Разметка страницы на основе плавающих элементов 459 Эти свойства приведут к добавлению двух прямых линий по одной с каждой стороны раздела основного содержимого. Если теперь просмотреть страницу в веб-браузере, она должна быть похожа на рис. 13.14. Рис. 13.14. Добавление отступов к столбцам и линий границ между ними создает четкое разграничение столбцов Фиксация ширины В настоящее время у страницы свободный дизайн (см. раздел «Типы разметок веб- страницы» гл. 12), означающий, что она расширяется, чтобы заполнить всю шири- ну окна браузера. Но, допустим, вам больше хочется, чтобы страницы все время оставались одной и той же ширины, поэтому вам не нравится, как они выглядят на широкоформатных мониторах или что случается с дизайном, когда окно браузера
460 Часть 3. Макет страницы уменьшается до очень маленьких размеров. Изменить свободный дизайн на дизайн с фиксированной шириной легко. Начните с добавления HTML-кода. 1. Вернитесь в текстовый редактор к редактированию файла start.html . Сразу же за открывающим тегом добавьте новый тег
:
Вы заключаете всю страницу в блок, который будет использоваться для управ- ления шириной страницы. Вы должны убедиться, что этот тег закрыт. 2. Добавьте закрывающий тег
прямо перед закрывающим тегом
Глава 13. Разметка страницы на основе плавающих элементов 461 путем равномерного деления пространства между левой и правой сторонами и центрируя таким образом div -контейнер в окне браузера. Теперь страница должна приобрести вид, показанный на рис. 13.15. Рис. 13.15. Использование CSS-свойства max-width вместо width позволяет предоставлять гибкий дизайн, помещающийся в окна браузеров различной ширины, но при этом не приобретающий излишнюю ширину, затрудняющую чтение на слишком широких мониторах Смешанный свободный и фиксированный дизайн Страница выглядит вполне привлекательно, но она могла бы выглядеть лучше, если бы черный фон для навигационной панели вверху и для колонтитула внизу, а также темно-фиолетовый градиент в баннере распространялись на ширину всей страницы (рис. 13.16). Поскольку навигационная панель, баннер и нижний колон- титул находятся внутри div -контейнера pageWrapper , эти фоновые цвета останавли- ваются, когда окно браузера шире 1200 пикселов. Вместо этого нужно оставить часть страницы, теги с фоновыми цветами, свободной, при этом ограничив ширину тегов с основным содержимым. Дополнительные колонки можно добавлять про- стым добавлением дополнительных HTML-контейнеров (
, ,
462 Часть 3. Макет страницы Рис. 13.16. Создание многоколоночного дизайна ничуть не сложнее создания плавающих HTML-тегов: три столбца, три плавающих элемента 1. Удалите в файле styles.css недавно созданный стиль .pageWrapper div -контейнер pageWrapper в HTML можно оставить. Этот дополнительный HTML-код не станет обузой, и вы можете захотеть воспользоваться им позже для применения других стилей. Страница возвращается к своей полностью свободной форме. Теперь нужно ограничить только навигационную панель, текст баннера, текст нижнего колон- титула и основное содержимое, чтобы они не превышали по ширине 1200 пик- селов. Для этого нужно немного углубиться в код HTML и посмотреть, с каки- ми элементами следует поработать. Посмотрите на код HTML в файле start.html и найдите тег
Скачать 20.28 Mb.