Книга css3 3е издание Серия Бестселлеры OReilly

• Название: Книга css3 3е издание Серия Бестселлеры OReilly
• Анкор: TheBigBookofCSS33rdedition.pdf
• Дата: 08.08.2018
• Размер: 20.28 Mb.
• Имя файла: TheBigBookofCSS33rdedition.pdf
• Тип: Книга; #22630
• страница: 43 из 62

— для предоставления заголовка для навигационных целей и для другого вводного материала страницы или ее раздела. Есть также тег

, предназначенный для содержания завершающей информации, такой как сведения об авторских правах, имя создателя веб-сайта, дата публикации страницы и т. д. Короче говоря, в HTML5 есть теги, которые берут на себя работу тега

для определенных типов содержимого. (Краткое введение в элементы секциониро- вания в HTML5 можно найти по адресу www.adobe.com/devnet/dreamweaver/articles/
understanding-html5-semantics.html
.)
ПРИМЕЧАНИЕ
Если вы нацелились на использование HTML5, не забывайте использовать HTML5-прокладку, рас- смотренную во врезке «Обходной прием. Как заставить Internet Explorer 8 понимать HTML5» раз- дела «Дополнительные теги в HTML5» гл. 1, чтобы заставить Internet Explorer 8 и более ранние версии проводить форматирование с помощью этих новых элементов.
Как уже упоминалось в гл. 1, новые элементы HTML5 предназначены для до- бавления семантики к веб-странице. То есть имя тега, например

, сообщает идентификационную информацию о содержимом этого тега. Тег

предна- значен для содержимого рисунка. То есть, если нужно поместить внутри тега со-

Глава 12. Введение в разметку CSS
421
держимое конкретного типа, посмотрите, какой из тегов отвечает данным требова- ниям. Если содержимое является нижним колонтитулом вашей страницы, то вместо простого старого

-контейнера следует использовать контейнер

. В мире
HTML5

-тег по-прежнему существует и абсолютно пригоден к применению.
Но теперь он в основном используется для группировки содержимого по стили- стическим соображениям, например, если нужно добавить границу вокруг группы тегов или переместить эти теги к левому краю страницы, используя свойство float
(Как все это делается, будет рассмотрено в главе 13.)
Все это говорит о том, что, кроме демонстрации превосходства над конкурента- ми на очередной встрече веб-разработчиков, от использования HTML в данный момент нет никаких особых преимуществ. В будущем программные средства смо- гут просматривать ваш HTML и идентифицировать отдельные статьи на основе присутствия в нем тега

, или задействовать теги HTML5 каким-либо дру- гим образом, чтобы улучшить анализ вашей веб-страницы. Или же, если вы хотите предусмотреть для своих страниц долгую жизнь и подготовиться к тем временам, когда HTML5 начнет править миром, можете приступить к использованию HTML5 уже сегодня. Но если вы оттачивали свое мастерство на применении

-тегов и не желаете связываться с применением JavaScript, чтобы заставить HTML5 ра- ботать в Internet Explorer 8 (см. предыдущее примечание), то пока можете по-преж- нему использовать только

-тег.
Технологии разметки CSS
В большинстве веб-страниц для разметки используется CSS-свойство float
(дру- гие варианты CSS-разметки рассмотрены в следующей врезке с информацией для опытных пользователей). Вы уже сталкивались с этим, казалось бы, простым свойством в гл. 8, где оно было представлено как способ позиционирования изо- бражения внутри столбца с текстом перемещением его либо на левую, либо на правую сторону. Тот же принцип применяется и к другим тегам: устанавливая для них ширину и перемещая влево или вправо, вы можете создать столбец (текст, следующий за элементом, обтекает плавающий элемент, как будто тот является еще одним столбцом). Используя свойство float с множеством тегов

или других тегов, вы получаете возможность создавать многостолбцовые разметки.
Применяя эту методику дальше, вы будете быстро создавать сложные разметки, помещая одни плавающие теги

внутри других.
Еще одна CSS-технология — абсолютное позиционирование — позволяет по- местить элемент в любом месте страницы с точностью до одного пиксела. Вы може- те расположить элемент, например, в 100 пикселах от верхнего края окна браузера и в 15 пикселах от левого края. Такие программы для разметки страницы, как
InDesign и Quark Xpress, работают именно так. К сожалению, изменчивая природа веб-страниц, а также некоторые странные свойства абсолютного позиционирования затрудняют возможность полного контроля над разметкой при использовании этой технологии. Как вы узнаете из гл. 14, выполнить разметку страницы с помощью абсолютного позиционирования можно, но этот способ лучше подходит для не- больших задач вроде позиционирования логотипа в конкретном месте на странице.
Если пока все эти понятия вы воспринимаете слишком абстрактно, переживать не стоит — работа с использованием всех этих технологий будет рассмотрена в сле- дующих трех главах.

422
Часть 3. Макет страницы
Стратегии разметки
Разметка веб-страницы с помощью CSS — это скорее искусство, чем наука. Поэто- му нет четкой формулы, которой нужно придерживаться для разметки содержи- мого с HTML и создания CSS. То, что работает с одним дизайном, может не по- дойти для другого.
Изучение разметки CSS происходит на личном опыте. Нужно узнавать, как работают различные свойства CSS (особенно абсолютное и относительное пози- ционирование), читать о методах разметки, следовать обучающим примерам, таким как представленные в следующих двух главах, и много-много практиковаться.
Тем не менее определенно есть некоторые стратегии, которые можно принять, приступая к созданию разметки. Они больше похожи на установки или инструк- ции, а не на жесткие правила. Но, как только вы начнете проектировать дизайн для каких-либо проектов, имейте в виду эти инструкции.
Начнем с содержимого
Многие дизайнеры хотели бы сразу перейти непосредственно к своей теме — цве- там, шрифтам, значкам и изображениям. Но, начиная с визуального дизайна, вы ставите телегу впереди лошади.
Самые важные элементы веб-страницы — это ее содержимое (заголовки, абзацы текста, потрясающие фотографии, навигационные ссылки, видео, а также все то, ради чего люди придут к вам на сайт). Посетители захотят выяснить для себя, что ваш сайт может предложить им. Содержимое стоит во главе угла, и вам сначала нужно подумать, что вы хотите сказать, прежде чем решить, как это должно вы- глядеть. В конце концов, создавая фантастическую по красоте трехмерную боковую панель, вы ничего не добьетесь, если вам особо нечего вводить туда.
Кроме того, идея страницы должна диктовать ее дизайн. Если вы решите, что на домашней странице нужно продавать услуги вашей компании, и захотите выделить отличное предложение для клиентов, то вполне вероятно, что большое значение будет иметь фотография с приветливыми сотрудниками, как и цитата из отзыва одного из довольных клиентов. Поскольку оба этих элемента важны для страницы, вы должны сделать их видными и неотразимыми.
Сначала нужно подумать о мобильных
устройствах (Mobile First)
В связи с ростом количества смартфонов и планшетных компьютеров разработ- чикам пришлось призадуматься о сокращении содержимого до ключевых сообще- ний и фактов. Это движение под названием Mobile First связано с ограниченным размером экрана смартфонов, а также с ограниченным вниманием людей, находя- щихся в движении. Конструкции Mobile First касаются начального вида вашего содержимого, а также избавления от его излишнего зашумления, включая допол- нительную информацию, которая прекрасно помещается на больших экранах на- стольных систем, но создает помеху на экранах значительно меньшего размера и отвлекает от основной информации, которую вы надеялись донести до посети- теля.

Глава 12. Введение в разметку CSS
423
Учтите, если ваш сайт будет посещать существенное количество людей, исполь- зующих смартфоны или небольшие планшетные компьютеры, не каждый из них захочет прокручивать длинную информационную страницу (или сужать или рас- ширять поле зрения, чтобы увидеть все, что доступно на странице). Вместо попыт- ки заполнить каждый оставшийся квадратный сантиметр на 32-дюймовом настоль- ном мониторе, подумайте об упрощении своего содержимого, чтобы его усвоение давалось просто, легко и непосредственно.
ПРИМЕЧАНИЕ
Понятие Mobile First было придумано Люком Врублевским. В действительности им был написан фантастически короткий трактат на эту тему, который стоит прочитать: www.abookapart.com/
products/mobile-first.
ИНФОРМАЦИЯ ДЛЯ ОПЫТНЫХ ПОЛЬЗОВАТЕЛЕЙ
Другие возможности макетирования, предлагаемые в CSS3
Сначала для создания многоколоночных макетов веб­
дизайнеры использовали таблицы. Затем появилось
CSS­свойство float
, благодаря чему был предоставлен другой менее объемный по коду метод макетирова­
ния веб­страницы. И хотя большинство разработчиков все еще используют свойство float для достижения своих дизайнерских целей, в ближайшее время все может измениться.
Рабочая группа W3C настойчиво приводит к окончатель­
ному виду разработки некоторых других технологий
CSS­верстки. Например, CSS­модуль многоколоночно­
го макетирования — multicolumn
— предоставляет способ получения длинной колонки текста и ее отобра­
жения в нескольких смежных колонках. Разговор о нем пойдет в обучающем уроке следующей главы.
Модуль гибкого макетирования блоков — flexible box,
предоставляет еще один способ выстраивания блоков содержимого — вертикально, горизонталь­
но, а также в различных направлениях и порядках следования. Этот модуль имеет хорошую поддержку во многих современных браузерах. Он будет рас­
смотрен во врезке «Информация для опытных поль­
зователей. На подходе более совершенные способы разметки» в подразделе «Создание столбцов на всю высоту» раздела «Решение проблем плавающих эле­
ментов» гл. 13.
И наконец, CSS­модуль решетки — grid
— являет­
ся, наверное, наиболее амбициозной попыткой изме­
нить способ макетирования веб­страниц. Этот способ позволяет разбить страницу на набор строк и столбцов, затем аккуратно прикрепить элементы страницы к этой решетке. Он предназначен для упрощения создания веб­приложений и больше похож на создание про­
грамм для настольного компьютера. CSS grid довольно сложный модуль и (на момент написания данной кни­
ги) еще не поддерживается какими­либо из поставля­
емых браузеров, хотя поддерживается в бета­версии
Internet Explorer 10. Дополнительные сведения о нем можно получить по адресу http://blogs.msdn.com/b/
ie/archive/2011/04/14/ie10-platformpreview-and-css- features-for-adaptive-layouts.aspx
Начните с наброска
После решения вопроса с содержимым можно подумать о его визуальной органи- зации. Некоторые разработчики начинают с ручного программирования на HTML: создания div
-контейнеров, добавления тегов

,

,

и т. д. Это вполне разумный подход, часто называемый разработкой в браузере, поскольку он дает вам главный старт для создания вашего сайта путем перехода непосредствен- но к HTML.

424
Часть 3. Макет страницы
Но перед переходом к HTML нужно хотя бы набросать план размещения содер- жимого. Здесь не нужно ничего особенного, сгодятся бумага и карандаш. Поскольку разработчик собирается поместить содержимое в блоки (
div и другие HTML-теги) и расположить эти блоки на странице, простой набросок группы блоков с прорисов- кой столбцов и т. д. является быстрым и простым способом проработки различных макетов страницы. Можно быстро понять, куда должно помещаться содержимое, насколько объемным оно будет и каким нужно сделать общий цветовой тон (свет- лым или темным).
СОВЕТ
Yahoo! предлагает свободный доступ к средству Stencil Kit (http://developer.yahoo.com/ypatterns/
wireframes), которое может использоваться в Illustrator, Visio, OmniGraffle и других программах ра- боты с графикой для создания макетов веб-страниц. Предоставляемые элементы пользовательско- го интерфейса, такие как кнопки, поля формы, окна и кнопки навигации, позволяют составить набросок макета страницы путем простого перетаскивания значков.
При наличии опыта работы с программами обработки графики типа Photoshop,
Illustrator или Fireworks, вы можете воспользоваться ими для создания визуаль- ного представления. Если вы несильны в работе с такими программами, простой рисунок блоков для обозначения различных мест расположения элементов стра- ницы поможет уточнить замысел намечаемого макета страницы. Намного проще будет изменить двухколоночный дизайн на четырехколоночный путем изменения размеров блоков в программе Illustrator, чем переписыванием кода HTML и CSS.
Но при использовании программ работы с графикой не стоит тратить слишком много времени на улучшение графического дизайна. Не тратьте для создания в Photoshop или Illustrator внешнего вида, получаемого при использовании CSS- свойств, слишком много усилий, для его переделки нужно будет просто восполь- зоваться кодом CSS. То есть постарайтесь уточнить предварительный вид своего сайта на бумаге, а затем переходите к текстовому редактору для создания HTML, в который помещается содержимое, и к использованию CSS-свойств, изученных благодаря данной книге, для тестирования различных стилей.
Идентифицируйте разделы
После того как вы создали визуальный макет, нужно подумать о том, как выполнить разметку HTML и CSS для достижения дизайнерских задумок. Этот процесс обыч- но включает представление различных структурных блоков страницы и идентифи- кацию элементов, которые выглядят как отдельные разделы. Например, на рис. 12.2 есть немало элементов, которые выглядят как небольшие разделы: наиболее круп- ным является раздел с тремя объявлениями внизу (помечены буквой A на рис. 12.2).
Каждый раздел, как правило, является кандидатом на выделение в отдельный тег

(если только нет более подходящего тега HTML, что мы обсуждали ранее).
Часто визуальная подсказка в макете может помочь решить, нужен ли вообще тег

. Например, линия границы, обведенная вокруг заголовка и нескольких абзацев, означает, что вам понадобится обернуть эту группу HTML-тегов тегом

, к которому применена граница.
Кроме того, когда вы видите фрагменты текста, идущие бок о бок (например, три фрагмента с содержимым в нижней части рис. 12.2), вы знаете, что нужно каж-

Глава 12. Введение в разметку CSS
425
дый из них заключить в отдельный тег

. HTML-теги, как правило, сами не располагаются бок о бок, поэтому вам придется использовать некоторые техники разметки (например, плавающие теги, описанные в следующей главе).
Желательно также группировать теги

, расположенные рядом, в один общий тег

. Например, в нижней части рис. 12.2 вы видите набор тегов

, которые обеспечивают структуру страницы. Разделы div
-контейнер news и тег footer явля- ются контейнерами для своих собственных наборов

- контейнеров. Хоть это и не всегда необходимо, такой подход помогает обеспечивать гибкость. Например, вы можете уменьшить основной раздел (изображение руки и подзаголовок) по ширине и передвинуть раздел с новостями по его правую сторону, который бы сформировал отдельный столбец. Новости могли бы идти друг под другом, а не бок о бок.
Плывите по течению
Теги обычно не располагаются рядом и не наслаиваются друг на друга. Как прави- ло, они действуют подобно тексту в программах для его обработки: заполняют всю ширину страницы и растекаются от верхнего до нижнего края. Каждый тег уровня блока — заголовок, абзац, маркированный список и т. д. — располагается наверху следующего тега уровня блока. Поскольку это стандартный подход, вам обычно не нужно ничего делать, если вы планировали вводить теги

один за другим.
Например, на рис. 12.2 четыре элемента — тег

, div
-контейнер main, тег

и тег

— охватывают всю ширину своего контейнера (тега

) и расположены друг за другом по вертикали. Это типичная ситуация для тегов уровня блока, и вам не нужно делать ничего особенного, применяя CSS, чтобы расположить эти четыре

таким образом.
Помните о фоновых изображениях
Вы, несомненно, видели черепичные изображения, заполняющие фон веб-страницы, или градиенты, которые добавляют эффект глубины для баннера. Свойство background- image предоставляет еще один способ добавления фотографий на страницу, не при- бегая к помощи тега

. Вставка изображения в фон существующего тега не только позволяет сохранить пару байтов данных, которые были бы потрачены на тег

, но и упрощает решение некоторых проблем, связанных с разметкой.
Например, на рис. 12.2 изображение руки по центру (B) на самом деле является обычным фоновым изображением. Это облегчает размещение другого тега

с подзаголовком Compassionate care… (C), поскольку он просто расположен поверх фона родительского тега. Кроме того, фотография с доктором чуть ниже, в правой части страницы, — обычное фоновое изображение, размещенное в текущем теге

. Добавление небольшого отступа справа отодвинет текст в этом разделе от фотографии.
ПРИМЕЧАНИЕ
Есть минусы использования фотографий в качестве фонов тегов

(или других тегов HTML).
Браузеры обычно не печатают фон, так что если у вас есть страница с картой, содержащей какие- то важные маршруты, вставьте ее с помощью тега , а не в качестве фонового изображения.
Кроме того, поисковые системы обходят стороной CSS, поэтому, если вы думаете, что изображение может привлечь дополнительный трафик на ваш сайт, используйте тег и добавьте описа- тельный атрибут alt.

426
Часть 3. Макет страницы
Кусочки пазла
Часто то, что выглядит как одно целое, на самом деле состоит из нескольких частей.
Вы можете увидеть простой пример этого в нижней части изображения веб- страницы на рис. 12.2. Здесь есть четыре расположенных друг за другом тега

, каждый из которых имеет белый фон. Если у вас возникли проблемы с размеще- нием больших элементов на странице (очень большого рисунка, занимающего мно- го столбцов, или массивного фонового изображения, которое займет не одну об- ласть страницы), подумайте о том, можно ли добиться желаемого внешнего вида страницы, разбив большой элемент на мелкие куски, которые потом сложатся, как части пазла.
Расслоение элементов
Если вы работали с Photoshop, Illustrator или Fireworks, то, вероятно, использова- ли концепцию слоев. Слои позволяют создавать отдельные полотна, которые на- кладываются друг на друга и образуют единое изображение. В этих программах можно легко сделать логотип поверх заголовка с текстом или разместить одну фотографию над другой. Если вы хотите сделать то же самое на веб-странице, у вас есть несколько вариантов.
Часто самым простым способом наложить слой поверх фотографии является добавление изображения в фон другого тега (см. выше). Поскольку фоновое изо- бражение идет за тегом, все, что находится внутри этого тега, — текст, другие изо- бражения — будет расположено поверх фотографии.
Но что делать, если вы хотите наложить фотографию поверх какого-нибудь текста? В таком случае нужно обратиться к единственному свойству CSS, позво- ляющему наслаивать элементы, — свойству position
. Мы рассмотрим его в гл. 15, поскольку размещение элементов поверх чего-либо требует абсолютного позицио- нирования.
Не забывайте о полях и отступах
Иногда самое простое решение оказывается лучшим. Вам не всегда нужен при- чудливый CSS-код, чтобы поместить элемент в нужное место на странице. Вспом- ните, что отступы и поля представляют собой обычное пустое пространство и, ис- пользуя их, вы можете двигать элементы по странице. Например, подзаголовок
(C на рис. 12.2) размещается простой установкой верхнего и левого отступа для его родительского тега. Как вы можете видеть на схеме в нижней половине рис. 12.2, подзаголовок помещен внутри другого тега

(

).
Этот тег на самом деле не имеет другого содержимого, кроме подзаголовка, — фотография является фоновым изображением, так что добавление отступа пере- мещает тег

подзаголовка вправо вниз.

13
Разметка страницы
на основе плавающих
элементов
Разметка, основанная на плавающих элементах, использует преимущества свойства float для организации элементов бок о бок, создавая на веб-странице столбцы. Как было описано в разделе «Управление обтеканием содержимого плавающих элемен- тов» гл. 7, вы можете использовать это свойство с целью создания эффекта обтека- ния, скажем, для фотографии, но когда вы применяете его к тегу

, оно стано- вится мощным инструментом разметки страницы. Свойство float перемещает элемент в одну сторону страницы (или другого блока с содержимым). Любой HTML-объект, который появляется ниже плавающего элемента, изменяет свое положение на стра- нице и обтекает его.
Свойство float принимает одно из трех значений: left
, right или none
. Чтобы переместить изображение к правому краю страницы, вы можете создать класс сти- ля и применить его к тегу

:
.floatRight { float: right; }
То же самое свойство, примененное к тегу

с содержимым, может также создать боковую панель:
.sidebar {
float: left;
width: 170px;
}
ПРИМЕЧАНИЕ
Значение none отменяет любое перемещение и определяет элемент как обычный (неплавающий).
Это полезно только для отмены перемещения, которое уже относится к элементу. Допустим, у вас есть элемент, к которому применен специфический класс, такой как "sidebar", и этот элемент смещен вправо. На одной из страниц вы, возможно, захотите, чтобы элемент с этим классом не передвигал- ся, а был определен в общем потоке страницы. Создавая более специфичный CSS-селектор (см. раздел «Управление каскадностью» гл. 5) с float: none, вы можете предохранить этот элемент от перемещения.
На рис. 13.1 показаны эти два стиля в действии. Здесь блок новостей перемещен к левому краю. У него есть фиксированная ширина, однако у главного содержимо- го ее нет, что делает этот дизайн свободным. Главный раздел страницы просто рас- ширяется, заполняя окно браузера. Вверху справа фотография с ванной перемеще- на в правую сторону.

428
Часть 3. Макет страницы
Рис. 13.1. Используйте свойство float для разметки веб-страницы с множеством столбцов
Простой дизайн с двумя столбцами, как на рис. 13.1, требует выполнения всего нескольких действий.
1.
Укажите вокруг каждого столбца тег

с атрибутом класса или ID.
На рис. 13.1 заголовки новостей, перечисленные в левой части, заключены в один раздел (

), а главное содержимое страницы — в дру- гой (

).
2.
Переместите тег

с боковой панелью вправо или влево. Когда вы рабо- таете с плавающими элементами, важен порядок исходного кода (порядок, в ко- тором вы добавляете HTML к файлу). HTML для плавающего элемента должен появиться перед HTML для элемента, который указывается вокруг него.
На рис. 13.2 показаны три варианта разметки с двумя столбцами. Диаграммы на левой стороне показывают порядок HTML-кода страницы: тег

для баннера, за которым следует

для боковой панели, и, наконец, тег

для главного содержимого. Справа вы видите фактическую разметку стра- ницы. Боковая панель идет перед главным содержимым в HTML, так что она может переместиться или влево (вверху и внизу), или вправо (посередине).

Глава 13. Разметка страницы на основе плавающих элементов
429
Рис. 13.2. Создание разметки с двумя столбцами — лишь вопрос перемещения тега

влево
(вверху). Чтобы заставить боковую панель переместиться в правую сторону страницы
(посередине), просто измените CSS-стиль боковой панели на float: right
3.
Установите ширину для плавающей боковой панели. Всегда задавайте плава- ющим элементам ширину. Таким образом вы позволите браузеру создать место для другого содержимого, чтобы получить эффект обтекания.

430
Часть 3. Макет страницы
У ширины может быть фиксированный размер, такой как
170 px или
10 em
. Вы также можете использовать проценты для гибкого дизайна, основанного на шири- не окна браузера (см. в разделе «Типы разметок веб-страницы» обо всех «за» и «против» различных единиц измерения). Если у боковой панели ширина 20 %, а окно браузера — 700 пикселов в ширину, то ширина боковой панели будет
140 пикселов. Если же ваш посетитель изменит размер окна до 1000 пикселов, то боковая панель вырастет до 200 пикселов. Боковые панели с фиксированной ши- риной легче проектировать, так как не нужно рассматривать все различные значе- ния ширины, до которых боковая панель могла бы растянуться. Однако проценты позволяют вам поддерживать одинаковые пропорции между двумя столбцами, что может быть визуально привлекательнее. Кроме того, проценты делают ваши конструкции гибче, поскольку общие пропорции страницы могут подстраиваться под размер экрана, что играет важную роль при создании адаптивных веб-кон- струкций, речь о которых пойдет в следующей главе.
ПРИМЕЧАНИЕ
Когда дизайн всей страницы указан с фиксированной шириной, значения ширины для боковой па- нели в процентах основаны на элементе с фиксированной шириной. Ширина не зависит от размера окна и остается постоянной.
4.
Добавьте левый край к главному содержимому. Если боковая панель короче дру- гого содержимого на странице, то текст из главного столбца обтекает панель снизу.
Добавление левого края, большего или равного ширине боковой панели, выравни- вает главное содержимое страницы, создавая иллюзию второго столбца:
.main { margin-left: 180px ; }
Удобно делать левый край чуть больше по ширине, чем боковая панель: это добавляет промежуток между двумя элементами. Если для установки ширины боковой панели вы используете проценты, то задавайте немного большее зна- чение для левого края.
Избегайте установки ширины для раздела div с главным содержимым — брау- зеры расширяют его, чтобы оно занимало доступное место. Даже если вы хотите иметь дизайн с фиксированной шириной, вам не нужно устанавливать ширину для главного содержимого, что вы увидите в следующем разделе.
Использование плавающих элементов в разметках
Теперь, когда вы изучили свободную разметку с двумя столбцами, можете применять ее бесчисленным множеством способов. Преобразовать ее в разметку с фиксирован- ной шириной — просто. Надо обернуть все теги внутри тела страницы другим тегом

(например,

), а затем создать стиль для этого нового элемен- та-контейнера, для которого определена ширина, скажем, 960 пикселов (см. рис. 13.2,
внизу). Эта установка ширины удерживает все внутри контейнера.
ПРИМЕЧАНИЕ
Существует также вариант создания страницы с фиксированной шириной без применения допол- нительного тега

, оборачивающего все элементы: задайте ширину для тега . Вы уже видели пример использования этого метода в гл. 7.

Глава 13. Разметка страницы на основе плавающих элементов
431
Разметить страницу на три столбца также нетрудно (рис. 13.3). Сначала добавь- те другой тег

между этими двумя столбцами и переместите его вправо. Затем добавьте правый край к среднему столбцу так, чтобы, если текст в нем окажется длиннее новой правой боковой панели, он не обтекал боковую панель.
Рис. 13.3. При дизайне с тремя столбцами вы перемещаете левую и правую панели и добавляете левый и правый края к центральному столбцу. Диаграмма слева показывает порядок исходного
HTML-кода, а справа вы можете увидеть, как выглядит веб-страница
В остальной части этого раздела рассматриваются многочисленные методы пла- нировки CSS, которые используют разметки, основанные на плавании.
ИНФОРМАЦИЯ ДЛЯ НОВИЧКОВ
Нужно ли снова изобретать колесо?
Если такие термины, как
«свободная разметка»
и
«содержащий элемент»,
кажутся немного пуга­
ющими, не расстраивайтесь. Прежде всего, обучающие уроки этой главы шаг за шагом проведут вас через весь процесс разметки веб­страниц с помощью CSS. Однако нет такого правила, которое бы говорило о том, как вы должны создавать собственные CSS­разметки с нуля.
В Интернете вы найдете множество предварительно созданных и протестированных дизайнов, которые мо­
жете применять для себя. Сайт Layout Gala предлагает
40 различных CSS­дизайнов, которые работают в боль­
шинстве распространенных браузеров (
http://blog.
html.it/layoutgala/
). Дизайны там — это просто «кар­
касы», состоящие из тегов

и CSS­кода, который размещает их. Все, что вам нужно сделать, — заполнить их собственными настройками форматирования, такими как стиль шрифта и изображения.
Есть также немало генераторов разметок — эти онлайн­
инструменты позволяют по вашему желанию настро­
ить такие основные параметры, как количе ство столб­
цов, тип разметки и т. д. Gridinator
(http://gridinator.
com)
предоставляет простое средство для создания сложных многоколоночных grid­систем (см. врезку
«Информация для опытных пользователей. Простой способ создания нескольких колонок» в подразделе
«Отмена и установка перемещения для элементов» раздела «Решение проблем плавающих элементов» дан­
ной главы). После этого можно будет загрузить HTML­ и CSS­файлы с созданным для вас кодом.

432
Часть 3. Макет страницы
Перемещение всех столбцов
В полной мере можно заставить перемещаться каждый столбец, а не только левую и правую боковые панели. Вы можете переместить левую боковую панель и сред- ний столбец влево, а правую боковую панель — вправо, как показано на рис. 13.4,
вверху. Этот подход позволяет размещать более трех столбцов на странице. Вы можете перемещать четыре или более столбца, пока есть место для всех плавающих элементов, чтобы они находились бок о бок.
Когда вы перемещаете все столбцы в дизайне, вы должны обратить пристальное внимание на ширину каждого столбца. Если совокупная ширина всех столбцов меньше доступного места, например, когда окно браузера меньше или столбцы помещены внутри другого тега

с установленной шириной, то последний стол- бец опускается вниз (как решать проблему перемещения плавающих элементов, вы можете прочитать в подразделе «Предотвращение выпадений плавающих эле- ментов» раздела «Решение проблем плавающих элементов» этой главы).
Вдобавок, перемещая не только боковые панели, вы сможете изменить порядок своих разделов div в HTML. Возьмите, например, левую диаграмму на рис. 13.3, которая показывает порядок тегов

для страницы. По принципу своей работы плавающие элементы должны появляться перед любым содержимым, которое определяется вокруг них, так что в этом примере область главного содержимого должна идти после боковой панели.
Порядок тегов

в HTML может показаться чем-то не очень важным, пока вы не попытаетесь просмотреть веб-страницу без CSS, что имеет место во многих альтер- нативных браузерах, включая экранных дикторов, которые читают содержание стра- ницы вслух для слабовидящих посетителей. Без CSS весь материал боковой панели
(которое часто включает навигационные элементы, рекламу или другую информацию, не относящуюся к главной теме страницы) появится перед содержимым, ради которо- го зашел посетитель. Неудобство, которое заключается в необходимости прокручивать одно и то же содержимое боковой панели на каждой странице, может отпугнуть многих посетителей. Кроме того, ваша страница будет менее доступна пользователям с плохим зрением, которым придется выслушивать, как их экранный диктор читает длинный список ссылок и рекламы, прежде чем получить реально необходимую информацию.
Если же это никак не затрагивает вас, то стоит поволноваться насчет поисковых машин. Многие из них ограничивают количество HTML-кода, прочитываемое при поиске сайта. На особенно длинной веб-странице они просто остановятся на опре- деленном месте, возможно упустив важное содержимое, которое должно быть вне- сено в указатель поисковой машины. Кроме того, большинство поисковых машин придают большее значение тому HTML-коду, который находится в начале файла.
Таким образом, если вас волнует рейтинг вашего сайта при поиске такими машина- ми, то имеет смысл убедиться в том, что важное содержимое максимально близко к вершине HTML-кода страницы.
В левой верхней разметке на рис. 13.4 HTML-код с основным содержимым на- ходится между левой и правой боковыми панелями, что лучше, чем размещать его
по сле этих блоков. Вы можете даже поместить описание главного содержимого перед HTML-кодом для боковых панелей, определяя для него и левой боковой пане- ли один тег

и перемещая его влево. Затем внутри этого тега

нужно пере- местить основное содержимое вправо, а левую боковую панель — влево (см. рис. 13.4,
внизу). Вуаля! HTML-код главного столбца идет перед остальными тегами

Глава 13. Разметка страницы на основе плавающих элементов
433
Рис. 13.4. Существует несколько способов сделать страницу плавающей. Используя различные методы перемещения, вы можете легко изменять порядок исходного HTML-кода страницы
(слева). Схемы на правой стороне представляют заключительную разметку веб-страницы
Плавающие элементы внутри плавающих элементов
Нижняя разметка на рис. 13.4 иллюстрирует другую полезную методику — пере- мещение элементов внутри плавающих элементов. Предположим, что разделов главного содержимого (3) и левой боковой панели (4) не существует, а были оставлены только «обертка» столбца (2) и правая боковая панель (5). У вас будет просто базовый дизайн с двумя столбцами, где один столбец перемещен влево, а другой — вправо. На самом деле это все еще дизайн с двумя столбцами, хотя два раздела (3 и 4) помещены внутри «обертки» столбца (2). Различие в том, что левый столбец сам разделен на два столбца.

434
Часть 3. Макет страницы
Рис. 13.5. Пример разметки с плавающими элементами внутри плавающих элементов
Хотя эта разметка немного смущает, она бывает полезной во многих случаях.
Во-первых, она позволяет добавлять столбцы внутрь других столбцов. На размет- ке на рис. 13.5, вверху, показан маленький блок для подсказок в среднем столбце,

Глава 13. Разметка страницы на основе плавающих элементов
435
внутри которого также есть два столбца. Вкладывая одни плавающие элементы внутрь других, вы можете создавать достаточно сложные дизайны.
Вдобавок, когда у вас всего несколько плавающих элементов, в свою очередь раз- деленных на столбцы с дополнительными плавающими элементами, легче вычис- лить (рассчитать) ширину элементов страницы. Это поможет при решении проблем выпадений плавающих элементов (см. подраздел «Предотвращение выпадений пла- вающих элементов» раздела «Решение проблем плавающих элементов» этой главы) и другие проблемы, возникающие, когда столбцы становятся слишком широкими.
Рассмотрим страницу на рис. 13.5, вверху. Чтобы добиться такого размещения объектов, создайте столбцы в столбцах, передвигая элементы внутри других пла- вающих элементов. В среднем столбце предусмотрена область подсказок, которая позволяет добавить простую заметку с двумя колонками, что придает привлека- тельности странице.
На рис. 13.5, внизу, видно, что неважно, в каком направлении перемещается контейнер (в этом случае — вправо), — вы просто передвигаете два дополнитель- ных столбца влево и вправо.
ИНФОРМАЦИЯ ДЛЯ ОПЫТНЫХ ПОЛЬЗОВАТЕЛЕЙ
Определение порядка в grid-системе
Графические дизайнеры использовали решетки (grid) для предоставления исходного порядка в своих макетах задолго до появления Интернета. Grid­система являет­
ся простым набором строк и столбцов, помогающим выровнять элементы в макете. Например, в 12­коло­
ночной grid­системе страница делится на 12 столбцов одинакового размера, обычно с небольшим межстолб­
цовым промежутком. Но наличие grid­системы не озна чает, что вашей странице нужны 12 узких столбцов содержимого. Вместо этого вы просто делите 12 столб­
цов (которые часто называют grid­элементами) на группы. Например, чтобы заполнить все 12 столбцов, в трехколоночном дизайне у вас может быть левая бо­
ковая панель шириной в три grid­элемента, основная колонка шириной в шесть grid­элементов и правая бо­
ковая панель шириной в три grid­элемента. Эта 12­коло­
ночная grid­система обладает гибкостью, позволяющей вам пробовать создавать и другие макеты при сохране­
нии общей и последовательной измерительной схемы.
Например, у вас может быть три столбца одинаковой ширины (по 4 grid­элемента в каждом).
В большинстве CSS grid­систем страница делится на строки, состоящие из столбцов. Для определения строки с помощью

обычно существует некая основанная на классе номенклатура:

А внутри строки помещаются дополнительные теги, зачастую

­теги, но вы можете использовать лю­
бые блочные элементы, например элементы секцио­
нирования HTML5. Каждый из этих тегов включает класс, показывающий его ширину в grid­элементах.
Например, трехколоночный макет может иметь сле­
дующий код:
Имя класса зависит от grid­системы. Две популяр­
ные структуры, основанные на grid­системах, —
Foundation
(http://foundation.zurb.com/docs/grid.
php)
и Twitter Bootstrap
(http://twitter.github.com/
bootstrap/scaffolding.html#grid)
— включают пол­
ные решения для grid­систем на основе CSS. Для соз­
дания столбцов различной ширины используется их исходный CSS­код и их соглашение об именах.
Более простой подход описан в блог­посте Криса
Койера (Chris Coyier) на сайте
CSS-Tricks.com
, где он объясняет порядок создания своей собственной простой grid­системы: http://css-tricks.com/dont- overthinkit-grids/

436
Часть 3. Макет страницы
Решение проблем плавающих элементов
Когда вы начнете активно работать с CSS, вероятно, как и многие веб-разработчи- ки до вас, столкнетесь с некоторыми сложностями при работе с перемещаемыми
(плавающими) элементами. В этом разделе описаны некоторые распространенные проблемы и пути их решения. Если же у вас когда-либо возникнет проблема, ко- торая не описана здесь, то всегда можете спросить о ней на одном из онлайн-фору- мов, перечисленных в приложении 2.
Отмена и установка перемещения для элементов
Перемещаемые элементы — мощные средства проектирования, поскольку позво- ляют содержимому обтекать их. Перемещение фотографии позволяет тексту, на- ходящемуся под ней, продвинуться вверх и «обернуться» вокруг изображения
(см. рис. 13.1). Даже если вы создаете дизайны, основанные на плавающих столб- цах, иногда не нужно, чтобы содержимое передвигалось и оказывалось рядом с пе- ремещаемым элементом. Например, вы хотите хранить записи об авторском праве, контактную информацию или другие подробности у основания веб-страницы, ниже остального содержимого.
В дизайнах с двумя и тремя столбцами, которые мы уже рассматривали, если главный столбец короче любого столбца с плавающей боковой панелью, нижний колонтитул может передвинуться вверх, оказавшись рядом с левым плавающим столбцом (рис. 13.6, слева). Чтобы заставить нижний колонтитул остаться внизу под боковой панелью, вы можете использовать свойство clear
(см. раздел «Управление обтеканием содержимого плавающих элементов» гл. 7). Оно устанавливает, с какой стороны элемента запрещено его обтекание другими элементами. Вы можете отме- нить обтекание с левого края элемента. При этом все другие элементы на этой сто- роне опустятся вниз и будут располагаться под текущим элементом (
clear: left;
).
Аналогично свойство clear: right;
отменяет обтекание с правой стороны элемента.
Для нижнего колонтитула и других элементов, которые должны оказаться у основа- ния страницы, вы должны устранить как левое, так и правое обтекания:
#footer { clear: both; }
Другая проблема появляется, когда вы перемещаете один или несколько эле- ментов внутри неперемещаемого содержимого тега, такого как тег

. Когда перемещаемый элемент выше, чем остальное содержимое в разделе, он придержи- вается основания содержащего его объекта. Эта путаница особенно заметна, если у тега есть фоновый цвет или граница. В веб-странице на рис. 13.7 есть тег

, в котором определены тег