Nov. 10, 2006 CosmoFarmer Bought By Google
514 Часть 3. Макет страницы Рис. 15.8. Абсолютное позиционирование хорошо подходит для простых элементов дизайна, например для размещения даты в нижнем правом углу заголовка (1), выдавливания изображения из содержащего его блока (2) или расположения заголовка поверх фотографии (3) Теперь стоит вопрос о создании стилей. Нужно задать содержащему элементу (здесь — тегу ) значение relative (относительное позиционирование). Затем следует применить абсолютное позиционирование (значение absolute ) для элемен- та, который желаете разместить, — даты. Здесь приведен CSS-код для нижнего изо- бражения в первом примере на рис. 15.8, 1: h1 { position: relative; border-bottom: 1px dashed #999999; } h1 .date { position: absolute; bottom: 0; right: 0; font-size: .5em; background-color: #E9E9E9; color: black; padding: 2px 7px 0 7px; } Некоторые из приведенных выше свойств, например border-bottom , представле- ны просто для наглядности. Ключевые свойства выделены полужирным шрифтом: position , bottom и right . Как только вы задаете заголовку относительное позицио- нирование, вы можете поместить тег
, содержащий дату, в нижний правый угол заголовка, установив свойствам bottom и right значение
0
Глава 15. Позиционирование элементов на веб-странице 515Исключение элемента за пределы блокаВы можете также использовать позиционирование для размещения элемента таким образом, чтобы он «выглядывал» из-за другого элемента. На рис. 15.8, 2, верхнее изображение показывает заголовок с графикой. Так, тег ![]() помещен внутрь тега
как часть заголовка. Использование абсолютного позиционирования и отри- цательных значений свойств top и left позволяет переместить изображение к лево- му краю заголовка и вытеснить его за верхний и левый края. Рассмотрим CSS-код, который применяется в этом примере:
h1 {
position: relative;
margin-top: 35px;
padding-left: 55px;
border-bottom: 1px dashed #999999;
}
h1 img {
position: absolute;
top: -30px;
left: -30px;
}
Основная концепция этого кода такая же, что и в предыдущем примере, но с не- которыми дополнениями. Значения top и left изображения отрицательные, так что графика фактически появляется на расстоянии 30 пикселов над вершиной заголов- ка и 30 пикселов слева от левого края заголовка. Будьте внимательны, когда исполь- зуете отрицательные значения. В результате может получиться так, что элемент будет частично (или полностью) расположен вне страницы или будет перекрывать содержимое другого элемента. Для предотвращения того, чтобы «отрицательно» позиционированный элемент выходил за рамки окна браузера, добавьте достаточно полей или отступов либо к самому элементу, либо к включающему его относитель- но позиционированному тегу — в данном примере к тегу
. Дополнительные поля обеспечат достаточно места для выступающего изображения. В данном случае, что- бы предотвратить перекрытие изображением любого содержимого над заголовком, добавьте поле сверху. Левый отступ шириной 55 пикселов также «вытолкнет» текст заголовка из-под абсолютно позиционированного изображения.
Создание фреймов с помощью стилей CSS
с использованием фиксированного позиционирования
Поскольку многие веб-страницы длиннее одного экрана, может возникнуть необ- ходимость сохранения на виду некоторых элементов страницы, например навига- ционной панели, поля для поиска или логотипа сайта. Фреймы HTML были когда- то единственным способом «удержать» важные элементы, в то время как другое содержимое прокручивалось и исчезало из области видимости. Однако у HTML- фреймов есть важные недостатки. Поскольку каждый фрейм описывается в отде- льном файле веб-страницы, приходится создавать несколько HTML-файлов, что- бы сделать одну полноценную веб-страницу (называемую страницей, содержащей
набор фреймов). Это не только отнимало много времени у разработчиков, но и ус- ложняло поиск по сайту для поисковых машин.
516 Часть 3. Макет страницы HTML-страницы, содержащие набор фреймов, могут также быть неудобными посетителям, которые используют экранных дикторов из-за проблем со зрением или которые хотят распечатать страницы сайта. Тем не менее идея фреймов все еще пригодна, так что CSS предлагает вариант позиционирования, который позволит вам получить видимость фреймов с мень- шим количеством работы. Вы можете увидеть страницу, созданную с использова- нием фиксированного позиционирования, на рис. 15.9. С помощью значения fixed свойства position вы можете имитировать HTML-фреймы, фиксируя некоторые элементы в определенных местах, но все еще разрешая пользователям прокручи- вать содержимое очень длинной веб-страницы. Рис. 15.9. Страница с фреймами, созданная посредством CSS. Полоса прокрутки (отмечена кружком) позволяет прокручивать только большую текстовую область; верхний и нижний баннеры и боковая панель остаются неподвижными Фиксированное позиционирование работает во многом подобно абсолютно- му — вы точно так же можете использовать свойства top , bottom , left или right для размещения элемента. Как и абсолютное, фиксированное позиционирование уда- ляет элемент из потока HTML. Он «плавает» над другими частями страницы, ко- торые просто игнорируют его. Рассмотрим, как можно создать страницу, похожую на изображенную на рис. 15.9, у которой есть фиксированный баннер, боковая панель и нижний колонтитул, а так- же прокручиваемая область с главным содержимым. 1. Добавьте теги с классами (или атрибутами ID) для каждого раздела стра- ницы. У вас может быть четыре основных тега
с такими классами (или
ID), как banner
, sidebar
, main и footer
(рис. 15.10). Порядок, в котором вы указы- ваете эти теги в HTML, не имеет значения. Как и абсолютное позиционирова- ние, фиксированное позволяет вам размещать элементы на странице независи- мо от их расположения в HTML.
Глава 15. Позиционирование элементов на веб-странице 517Рис. 15.10. С фиксированным позиционированием можно закрепить все элементы страницы, чтобы они всегда были в поле зрения при прокрутке. В этом примере заголовок (1), боковая панель (3) и нижний колонтитул (4) зафиксированы, а область с главным содержимым (2) может прокручиваться 2. Добавьте свой материал к каждому тегу . Вообще, используйте фиксиро- ванные разделы div для материала, к которому у посетителя всегда должен быть доступ, в областях, которые вы желаете закрепить в конкретном месте. В этом примере баннер, боковая панель и нижний колонтитул содержат логотип, гло- бальную навигацию по сайту и сведения об авторском праве. Главное содержимое помещается в последний тег . Однако не добавляйте слишком много информации к фиксированному тегу . Если фиксирован- ная боковая панель длиннее, чем окно браузера пользователя, посетитель не сможет увидеть боковую панель целиком. Поскольку фиксированные элементы не прокручиваются, у пользователя не будет никакой возможности (за исклю- чением покупки большего монитора) увидеть содержимое боковой панели, ко- торое не соответствует окну его браузера. 3. Создайте стили для всех фиксированных элементов. Значения top , bottom , left и right задаются относительно окна браузера. Таким образом, просто определи- те, где вы хотите их видеть на экране, и добавьте значения. Кроме того, укажите ширину для элементов. ПРИМЕЧАНИЕ В отличие от абсолютного позиционирования, фиксированное всегда задается относительно окна браузера, даже когда элемент с таким позиционированием помещается внутрь другого тега с отно- сительным или абсолютным позиционированием. Стили для размещения элементов 1, 3 и 4 на рис. 15.10 выглядят следующим образом: .banner { position: fixed; left: 0; right: 0; top: 0; } .sidebar { position: fixed; 518 Часть 3. Макет страницы left: 0; top: 110px; width: 175px; } .footer { position: fixed; bottom: 0; left: 0; right: 0; } 4. Создайте стиль для прокручиваемой области содержимого. Поскольку фикси- Создайте стиль для прокручиваемой области содержимого. Поскольку фикси- рованно позиционированные элементы удаляются из потока HTML, другие теги на странице не представляют, что эти элементы находятся там. Так, тег с главным содержимым страницы, например, появляется под фиксированными элементами. Основная задача определяемого стиля состоит в том, чтобы ис- пользовать поля для свободного перемещения содержимого (концепция здесь такая же, как и для абсолютно позиционированных разметок, которые мы об- суждали в предыдущем подразделе). .main { margin-left: 190px; margin-top: 110px; } Фиксированное позиционирование хорошо поддерживается в браузерах: в Internet Explorer 8 и выше, а также во всех других основных браузерах (включая самые последние браузеры мобильных устройств iOS и Android). Обучающий урок: позиционирование элементов страницыЭтот обучающий урок позволит вам исследовать несколько различных способов использования абсолютного позиционирования, таких как создание разметки на три столбца, размещение элементов внутри баннера и добавление заголовков по- верх фотографий. В отличие от предыдущей главы, где вы заключали фрагменты HTML-кода в теги
и добавляли к ним имена классов, в этих уроках большая часть работы с HTML уже была выполнена. Вы можете сосредоточиться на оттачи- вании ваших новых навыков в CSS.
Чтобы приступить, загрузите учебные файлы, расположенные на сайте, www.
sawmac.com/css3/
. Как работать с ними, описывается в конце гл. 2.
Улучшение баннера страницы
Сначала сделаем несколько маленьких, но визуально важных изменений в баннере страницы. Создадим стили, которые ссылаются на HTML-теги с примененными к ним классами (эта часть работы также уже сделана за вас).
1. Запустите браузер и откройте файл hats.html из папки
15
На этой веб-странице (рис. 15.11) начните с перепозиционирования некоторых частей баннера.
Глава 15. Позиционирование элементов на веб-странице
519
Рис. 15.11. Обычная статическая HTML-страница, где все заполнено сверху донизу. Вы можете сделать ее более удобной для чтения, организовав все содержимое по столбцам
2. Откройте файл hats.html в текстовом редакторе. Поместите курсор между от- крывающим и закрывающим тегами
|
Скачать 20.28 Mb.