Книга css3 3е издание Серия Бестселлеры OReilly
 Скачать 20.28 Mb.
|
|
Глава 12. Введение в разметку CSS Глава 13. Разметка страницы на основе плавающих элементов Глава 14. Адаптивный веб-дизайн Глава 15. Позиционирование элементов на веб-странице 12 Введение в разметку CSS CSS удобен при форматировании текста, навигационных панелей, изображений и других элементов веб-страницы, но его по-настоящему потрясающие способно- сти проявляются, когда нужно создать макет всей веб-страницы. В то время как HTML обычно отображает содержимое страницы на экране сверху вниз, размещая один блочный элемент за другим, CSS позволяет создавать расположенные бок о бок столбцы и помещать изображения или текст в любом месте на странице (и даже наслаивать поверх других элементов), поэтому веб- страницы имеют намного более интересный внешний вид. Разметка CSS — это достаточно обширная тема. Так, из следующих трех глав вы подробно узнаете о двух наиболее важных техниках CSS. А в этой главе я пред- лагаю краткий обзор принципов, на которых построена разметка, и немного по- лезных инструкций для решения возникающих в процессе работы проблем. Типы разметок веб-страницы Быть веб-дизайнером означает иметь дело с неизвестным. Какими браузерами поль- зуются ваши посетители? На чем они просматривают ваш сайт: на телефоне с опера- ционной системой Android или на iPad? Самая большая проблема, с которой сталки- ваются разработчики, состоит в создании привлекательных дизайнов, учитывающих различные размеры экрана. Мониторы различаются размерами и разрешением: от маленьких 15-дюймовых с разрешением 640 × 480 пикселов до чудовищных 30-дюй- мовых экранов с разрешением примерно 5 000 000 × 4 300 000 пикселов. Не говоря уже о небольших дисплеях мобильных телефонов и экранах планшетных компьютеров, имеющих размер от небольшого до среднего. Веб-разметка предполагает несколько основных подходов к решению упомя- нутой проблемы. Оформление практически каждой веб-страницы сводится к ис- пользованию одного из двух вариантов: с фиксированной либо с непостоянной шириной. Фиксированная ширина дает вам наибольший контроль над размет- кой, но может доставить неудобства некоторым посетителям. Людям с действи- тельно маленькими мониторами придется прокручивать страницу вправо, чтобы все увидеть, а те, у кого большие мониторы, будут видеть пустоту в части экрана, где могла полностью отобразиться ваша превосходная страница. Кроме того, владельцам смартфонов для получения нужного им содержимого приходится прибегать к сужению и расширению выводимой на экран информации. Исполь- Глава 12. Введение в разметку CSS 415 зование непостоянной ширины (которая увеличивается или уменьшается, чтобы соответствовать окнам браузера) делает управление дизайном страницы серьез- ным испытанием, но при этом эффективнее используется окно браузера. Одно из последних новшеств — адаптивный веб-дизайн — старается решить проблему сильно отличающихся по ширине экранов, но за счет усложнения. Фиксированная ширина. Многие дизайнеры предпочитают плотно распреде- лять страницу по ширине, как на странице на рис. 12.1, вверху. Независимо от ширины окна браузера, ширина содержимого страницы не изменяется. В неко- торых случаях страница «цепляется» за левый край окна браузера или, что бы- вает чаще, сосредотачивается посередине. С дизайном, основанным на фикси- рованной ширине, вам не нужно волноваться по поводу того, что случится с вашей страницей на очень широком (или маленьком) экране. Многие страницы с фиксированной шириной придерживаются ширины экра- на менее 1000 пикселов, позволяя окну, полосам прокрутки и другим частям браузера подходить по размерам для экранов с разрешением 1024 × 768. Очень распространенной является ширина 960 пикселов. Фиксированная ширина используется во многих веб-сайтах, но положение дел изменяется благодаря широкому внедрению смартфонов и планшетных компьютеров, экран которых зачастую имеет меньшую ширину, чем среднестатистический дизайн веб-стра- ниц с фиксированной шириной. ПРИМЕЧАНИЕ Чтобы увидеть примеры дизайнов с фиксированной шириной, нацеленных на большие мониторы, зайдите на сайты www.alistapart.com, www.espn.com или www.nytimes.com. Непостоянная ширина. Иногда легче плыть по течению вместо того, чтобы бороться с ним. Свободный дизайн приспосабливается так, чтобы соответ- ствовать любой ширине браузера путем задания процентного значения ши- рины вместо абсолютного значения в пикселах. Ваша страница становится шире либо уже, когда посетитель изменяет размеры окна (см. рис. 12.1, посе- редине). Хоть этот тип дизайна наилучшим образом использует доступное пространство окна браузера, вам придется приложить больше усилий, чтобы убедиться в том, что страница хорошо выглядит при различных размерах окна. На очень больших мониторах такой тип дизайна может смотреться слишком размашисто, с длинными строками текста, не подходящими для их нормаль- ного прочтения. ПРИМЕЧАНИЕ Чтобы увидеть примеры дизайнов с непостоянной шириной, зайдите на сайт http://maps.google.com. Адаптивный веб-дизайн (Responsive Web Design, RWD). Эта новая технология, отстаиваемая веб-дизайнером Этаном Маркоттом (Ethan Marcotte), предлагает другой способ решения проблемы, возникшей из-за большого разнообразия размеров экранов, имеющихся в распоряжении веб-браузеров смартфонов, планшетных и настольных компьютеров. Вместо предоставления единого макета 416 Часть 3. Макет страницы для всех устройств адаптивный веб-дизайн проводит коррекцию ширины для различных веб-браузеров путем изменения их представлений. Например, адаптивная веб-страница может ужаться с широкого, состоящего из несколь- ких колонок макета для мониторов настольных компьютеров до макета, со- держащего всего одну колонку для смартфонов. Таким образом, адаптивный веб-дизайн сильно напоминает макеты с непостоянной шириной — конструк- ции, использующие процентные отношения с целью расширения или сужения в ответ на задаваемую ширину окна браузера. Но в новом веб-дизайне техно- логия пошла дальше путем использования более сложного кода CSS, так на- зываемых уточнений носителей данных (Media Queries) для отправки различных дизайнерских решений для браузеров, располагающих экранами разной ширины, что позволяет создавать существенно отличающийся по внешнему виду макеты в зависимости от устройств, на которых просматривается страница. ПРИМЕЧАНИЕ Свойства max-width и min-width предлагают компромисс между фиксированной и свободной шири- ной. Факт наличия у посетителей вашего сайта мониторов с разным разрешением можно просто проигнорировать, и задать для страницы единую, неизменяющу- юся ширину (см. рис. 12.1, вверху). Можно создать дизайн с непостоянной шири- ной, элементы которого перетекают, чтобы занять ширину того или иного окна (см. рис. 12.1, по середине), Адаптивный дизайн предусматривает настоящее пе- реформатирование в зависимости от ширины окна браузера. Например, как по- казано в нижней части рис. 12.1, по мере увеличения окна браузера сайт газеты Boston Globe переходит от использования одной колонки (слева), к двум (посе- редине), а затем и к трем колонкам (справа). В обучающих уроках в конце этой главы вы создадите страницы с фиксирован- ной и свободной шириной. Техника адаптивного веб-дизайна будет подробно рас- смотрена в гл. 14. Как работает CSS-разметка Как говорилось в гл. 1, на заре развития Интернета ограничения HTML вынудили дизайнеров придумывать новые способы оформления сайтов. Самым распростра- ненным инструментом был тег |