: header h1 { font-size: 1.5em; } Этот стиль уменьшает размер текста в теге
, чтобы теперь он поместился на одной строке. Уменьшение размеров заголовков при конвертировании дизайна для настольных систем в дизайн для просмотра на небольших телефонных эк- ранах зачастую отнюдь не лишено смысла. Можно также прийти к выводу, что для облегчения чтения нужно увеличить размер шрифта основного текста. Для настройки телефонного дизайна вашей страницы существует множество способов, а каким должен быть наилучший внешний вид — решать вам. Теперь займемся панелью навигации. Пунктирные границы, разделяющие кноп- ки, смотрятся плохо и сбивают с толку. Кроме того, кнопки выровнены по лево- му краю, создавая при этом несбалансированную асимметрию. Они будут лучше смотреться отцентрованными и без границ. 5. После стиля header h1 , созданного в предыдущем шаге, добавьте еще один стиль: nav { text-align: center; }
Глава 14. Адаптивный веб-дизайн 497 Кнопки nav содержатся внутри HTML5-элемента
498 Часть 3. Макет страницы nav li { display: inline-block; float: none; } nav a { float: none; display: inline-block; border: none; } } Сохраните все ваши файлы и откройте файл rwd.html в веб-браузере. Измените размер окна браузера, чтобы его ширина стала меньше 480 пикселов, и по смотрите на дизайн, предназначенный для телефона. Изменяйте ширину окна, пока в поле зрения не появится дизайн, состоящий из двух колонок, а затем продолжайте из- менение, пока не увидите версию для настольных устройств, имеющую три колон- ки. Вы должны видеть дизайны, похожие на те, что показаны на рис. 14.9. Рис. 14.9. Благодаря адаптивному дизайну отдельную веб-страницу можно преобразовать так, чтобы она наилучшим образом помещалась на устройстве с любой шириной экрана Полная версия этого обучающего урока находится в папке 14_finished
15 Позиционирование элементов на веб-странице Когда Консорциум Всемирной паутины представил CSS-позиционирование, неко- торые разработчики подумали, что они смогут делать так, чтобы веб-страницы вы- глядели как печатные документы, созданные в программах наподобие InDesign или Quark XPress. Благодаря лишь нескольким свойствам CSS-позиционирование поз- воляет поместить элемент в определенное место на странице, скажем, в 100 пиксе- лах от вершины страницы и 200 пикселах от левого края. Казалось, что точное пик- сельное размещение обещало, что вы наконец-то сможете проектировать страницу, просто помещая фотографию в одном месте, заголовок — в другом и т. д. К сожалению, те возможности управления, которые разработчики ожидали от CSS-позиционирования, так и не были реализованы. Различные браузеры всегда отоб- ражали элементы, расположенные с помощью CSS, по-разному. Но, что еще более существенно, Сеть работает не так, как печатная брошюра, журнал или книга. Веб- страницы намного более изменчивы, чем печатные. Как только журнал тиражирует- ся в издательстве, читатели не могут изменить размер страницы или шрифта. Единст- венной возможностью изменить вид журнала остается пролить на него кофе. Веб-посетители, с другой стороны, могут переделать вашу ручную работу. Они могут увеличить размер шрифта в своем браузере, а это, возможно, приведет к тому, что текст выйдет за пределы четко размещенных элементов разметки, которым заданы определенные размеры. Но все не так плохо: пока вы не пытаетесь навязать конкретные ширину, высоту и расположение каждого элемента, свойства CSS-по- зиционирования будут для вас мощными и полезными. Вы можете использовать их, чтобы разместить текстовый заголовок вверху над фотографией, поместить логотип где-нибудь на странице и т. д. Как работают свойства позиционирования CSS-свойство position позволяет управлять тем, где и как браузер отобразит опре- деленные элементы. Используя его, вы можете, например, поместить боковую па- нель на странице там, где вы этого желаете, или убедиться, что навигационная панель наверху страницы остается там, даже когда пользователи прокручивают страницу вниз. CSS предлагает четыре типа позиционирования.
500 Часть 3. Макет страницы Абсолютное. Такое позиционирование позволяет определять расположение эле- мента, задавая позиции left , right , top или bottom в пикселах, em или процентах (для получения дополнительной информации о выборе между различными еди- ницами измерения см. гл. 6). Вы можете поместить блок на расстоянии 20 пиксе- лов от верхнего и 200 пикселов от левого края страницы, как показано на рис. 15.1, посередине (далее вы узнаете, как писать код с этими инструкциями). Рис. 15.1. CSS предлагает несколько путей воздействия на размещение элементов на веб-странице Кроме того, абсолютно размещенные элементы полностью отделены от потока стра- ницы, определенного HTML-кодом. Другими словами, остальные элементы на стра- нице не знают, что существует абсолютно позиционированный элемент. Они могут даже полностью исчезнуть, попав под него, если вы будете невнимательны. ПРИМЕЧАНИЕ Не пытайтесь применять одновременно свойство float и любой тип позиционирования, кроме ста- тического (рассмотрен ниже). Перемещаемые объекты и позиционирование (абсолютное или фик- сированное) не могут применяться к одному и тому же элементу.
Глава 15. Позиционирование элементов на веб-странице 501 Относительное. Элемент с таким позиционированием размещается относитель- но его текущего положения в потоке HTML. Так, например, устанавливая зна- чение top — 20 пикселов и значение left — 200 пикселов для относительно раз- мещенного заголовка, вы переместите его на 20 пикселов вниз и 200 пикселов влево от того места, где он появился бы на странице. В отличие от абсолютного позиционирования, здесь остальные элементы стра- ницы регулируют старое HTML-размещение относительно позиционирован- ного объекта. Соответственно, перемещение объекта с относительным позици- онированием оставляет «дыру», на месте которой он должен был находиться. Посмотрите на темную полосу на рис. 15.1, внизу. Это то место, где появился бы относительно позиционированный блок, если бы ему не было дано указание на перемещение. Основная польза относительного позиционирования не в том, чтобы переместить элемент, а в установке новой точки привязки для абсолютно позиционированных элементов, которые вложены в него (больше об этой кон- цепции вы узнаете в подразделе «Когда абсолютное позиционирование являет- ся относительным» данного раздела). Фиксированное. Фиксированный элемент запирается в определенном месте на экране. Определение такого позиционирования играет ту же роль, что и установ- ка значения fixed для свойства background-attachment (см. подраздел «Фиксация изображения на месте» раздела «Позиционирование фоновых изображений» гл. 8). Когда посетитель прокручивает страницу, фиксированные элементы ос- таются на экране как абзацы и заголовки, в то время как фотографии прокручи- ваются вместе со страницей. Использование фиксированных элементов — отличный способ создать непо- движную боковую панель или воспроизвести эффект HTML-фреймов, где толь- ко определенная часть страницы прокручивается. Вы скоро узнаете, как выпол- няется такой эффект. Статическое позиционирование просто означает, что содержимое соответству- ет нормальному нисходящему потоку HTML (см. рис. 15.1, вверху). Но зачем вам назначать элементу статическое позиционирование? Скорее всего, вы ни- когда не будете делать этого. Итак, можно сделать выводы. Статическое размещение — это то, как браузеры представляли содержимое с начала существования Сети. Они просто показывали HTML в нисходящем порядке (сверху вниз). Абсолютное размещение удаляет элемент из потока страницы, определяя его на самый верх, иногда перекрывая ка- кое-нибудь другое содержимое. Относительное позиционирование размещает эле- мент относительно того места, где он появился бы на странице, и оставляет «дыру» там, где этот элемент находился бы без относительного позиционирования. Чтобы изменить расположение любого элемента, просто используйте свойство position , которому присваивается одно из этих четырех значений: static , absolute , relative , fixed . Чтобы создать абсолютно позиционированный элемент, добавьте это свойство к стилю: position: absolute; Статическое позиционирование — это обычный метод расположения элемен- тов, так что, если вы только не отменяете ранее созданный стиль, в котором уже
502 Часть 3. Макет страницы указано расположение absolute , relative или fixed , вам не нужно определять это позиционирование. Кроме того, статические элементы не подчиняются ни одному из значений позиционирования, обсуждаемых далее. Установка значений позиционирования — это обычно только часть сражения. Чтобы на самом деле определить элемент где-нибудь на странице, вы должны ра- зобраться с различными свойствами позиционирования. Установка значений расположения Область отображения браузера, также называемая областью просмотра, имеет верхний, нижний, правый и левый края. Для каждого из этих четырех краев есть соответствующее CSS-свойство: top , bottom , left и right . Вам не нужно задавать значения для всех четырех сторон. Обычно достаточно двух, чтобы определить элемент на странице. Вы можете, если хотите, поместить элемент на расстоянии 10 em от левого края страницы и 20 em от вершины. Чтобы определить расстояние от края страницы до соответствующей стороны элемента, используйте любую из действующих в CSS единиц измерения: пикселы, em, проценты и т. д. При позиционировании можно также применять отрицатель- ные значения, например left: -10px; , чтобы переместить элемент частично за стра- ницу (или от другого элемента). Это приведет к появлению особого визуального эффекта, который будет описан в подразделе «Исключение элемента за пределы блока» раздела «Эффективные стратегии позиционирования» этой главы. После свойства position вы указываете два свойства ( top , bottom , left или right ). Если вы хотите, чтобы элемент принял ширину меньше допустимой (например, чтобы сделать тонкую боковую панель), то можете установить свойство width . Что- бы поместить баннер страницы в определенном месте относительно верхнего и ле- вого краев окна, создайте следующий стиль: .banner { position: absolute; left: 100px; top: 50px; width: 760px; } Этот стиль поместит баннер, как показано на рис. 15.2, вверху. ПРИМЕЧАНИЕ Если не указать значение вертикальной позиции (top или bottom), браузер помещает элемент в то же самое место на странице по вертикали, где бы он располагался при отсутствии позиционирова- ния. Это же справедливо для горизонтальных настроек (left или right). То есть, если просто установить для элемента позицию absolute, но не предоставить значений размещения top, right, bottom или left, браузер просто оставляет элемент на том же месте, но располагает поверх другого содержимого. Рассмотрим другой пример: поместим элемент таким образом, чтобы он всегда оставался на фиксированном расстоянии от правой стороны браузера. Когда вы используете свойство right , браузер измеряет расстояние от правого края окна до правого края элемента (см. рис. 15.2, посередине). Чтобы поместить баннер на рас- стоянии 100 пикселов от правого края окна, вы создадите тот же самый стиль, что и ранее, но просто измените left на right : .banner { position: absolute;
Глава 15. Позиционирование элементов на веб-странице 503 right: 100px; top: 50px; width: 760px; } Рис. 15.2. Польза абсолютного расположения состоит в возможности поместить элемент относительно правого края окна браузера (посередине). Если ширина окна изменится, расстояние от правого края окна до правого края элемента останется неизменной (внизу) Поскольку рассчитываемая позиция основывается на правой стороне окна, ре- гулирование его размера автоматически меняет расположение баннера, что вы мо- жете видеть на рис. 15.2, внизу. Хоть баннер и перемещается, расстояние от правой стороны элемента до правого края окна браузера остается неизменным. Можно даже указать свойства для левой и правой позиций, а также для верхней и нижней и позволить браузеру определить ширину и высоту элемента. Скажем, вы хотите, чтобы центральный блок текста размещался на расстоянии 10 % от вер- шины окна и 10 пикселов от левой и правой его сторон. Чтобы определить блок, вы можете использовать стиль абсолютного позиционирования, который устано- вит свойствам top , left и right значение 10 %. В окне браузера левый край блока начинается от левой стороны окна на расстоянии 10 % от ширины окна, а правый край находится на расстоянии 10 % от правой стороны (рис. 15.3). Точная ширина блока при этом зависит от ширины окна браузера. Более широкое окно увеличит блок; чем тоньше окно, тем меньше будет блок. Левая и правая позиции, однако, по-прежнему составляют 10 % от ширины окна браузера.
504 Часть 3. Макет страницы Рис. 15.3. Можно позволить браузеру определить ширину элемента путем простого указания для элемента с абсолютным позиционированием значений как для левой, так и для правой позиции Свойства width и height , о которых вы узнали из гл. 7, аналогично работают для позиционированных элементов. Чтобы поместить серый блок размерами 50 × 50 пик- селов в верхний правый угол окна браузера, создайте такой стиль: .box { position: absolute; right: 0; top: 0; width: 50px; height: 50px; background-color: #333; } Здесь надо вспомнить предостережение, которое давалось в разделе «Определе- ние параметров высоты и ширины» гл. 7: будьте внимательны с установкой высоты для элементов. Если вы не разрабатываете какую-нибудь графику с уже заданной высотой, то не можете знать, насколько высоким будет на странице конкретный элемент. Вы могли бы определить для боковой панели высоту 200 пикселов, но если вы заканчиваете его описание добавлением слов или картинок, которые сделают боковую панель больше чем 200 пикселов в высоту, то в конечном счете содержимое панели выйдет за ее пределы. Даже если вы уверены, что содержимое поместится, посетитель всегда может увеличить размер шрифта своего браузера, сделав текст достаточно большим, чтобы он мог «выпасть» из блока. К тому же, когда вы определяете ширину и высоту в стиле, а содержимое внут- ри разрабатываемого элемента оказывается шире или выше, могут произойти странные вещи. Когда абсолютное позиционирование является относительным Ранее в этой главе мы говорили о расположении элемента в конкретном месте в окне браузера. Однако абсолютное позиционирование не всегда работает таким образом.
Глава 15. Позиционирование элементов на веб-странице 505 На самом деле абсолютно позиционированный элемент помещается относитель- но границ его ближайшего предка. Проще говоря, если вы уже создали элемент с аб- солютным расположением (скажем, тег
, который появится на расстоянии 100 пикселов от вершины окна браузера), то любые абсолютно позиционированные элементы с HTML-кодом внутри этого тега
размещаются относительно верх- него, нижнего, левого и правого краев области тега. ПРИМЕЧАНИЕ Если вы не помните, что такое родительские элементы и предки, перейдите к подразделу «Дерево HTML» раздела «Стилизация вложенных тегов» гл. 3. В верхнем изображении на рис. 15.4 светло-серый блок абсолютно позициони- рован на расстоянии 5 em от верхнего и левого краев окна браузера. Рис. 15.4. Вы можете разместить элемент относительно окна браузера (вверху) или относительно позиционированного предка (внизу) Есть также тег
, вложенный в этот блок. Применение абсолютного позицио- нирования для этого тега позволит поместить его относительно абсолютно пози- ционированного родительского элемента. Установка свойству bottom значения 0 переместит блок не к основанию экрана, а к основанию его предка. Аналогично свойство right для этого вложенного тега
относится к правому краю его ро- дителя (см. рис. 15.4, внизу). Каждый раз, когда вы используете абсолютное позиционирование, чтобы уста- новить элемент на странице, его точное место зависит от расположения любых
506 Часть 3. Макет страницы других тегов, в которые вложен разрабатываемый элемент. Позиционирование подчиняется следующим правилам: тег расположен относительно окна браузера, если у него абсолютное позицио- нирование и он не находится внутри любого другого тега, к которому примене- но абсолютное, относительное или фиксированное позиционирование; тег определен относительно сторон другого элемента, если он находится внутри другого тега с абсолютным, относительным или фиксированным позициониро- ванием. Когда и где использовать относительное позиционирование Вы получаете существенную выгоду, размещая элемент относительно другого тега: если этот тег передвигается, позиционированный элемент перемещается вме сте с ним. Скажем, вы определили изображение внутри тега
Скачать 20.28 Mb.