CSS позволяет использовать для позиционирования и оформления изображений общие свойства, в первую очередь следующие:
- border - для обрамления изображений;
- padding - для создания пространства между изображением и его рамкой;
- float - для выравнивания изображения по левому или правому краю контейнера (при этом текст обтекает изображение с другой свободной стороны и под ним);
- margin - отступ от соседних элементов страницы.
Рассмотрим свойство float (в отличие от остальных общих свойств, оно обычно применяется к изображениям с несколько другой целью по сравнению с другими элементами). Именно для создания такого эффекта как обтекание изображения текстом это свойство главным образом и предназначалось - затем его стали применять для многоколоночной вёрстки.
Сам принцип обтекания достаточно очевиден: нужно просто назначить изображению свойство float:left или float:right при помощи стиля. Сложнее разобраться в сопутствующих эффектах. Во-первых, как правило, изображению в этом случае следует назначать отступ с примыкающей к тексту стороны. Во-вторых, обтекание всегда необходимо вовремя останавливать: иначе изображение будет обтекаться не только последующим текстом, но и последующими изображениями. Следует назначать значение clear:both элементам, которые уже не должны обтекать изображения. И, наконец, контейнеры, содержащие плавающие элементы имеют неприятную особенность неправильно определять собственную высоту (не учитывается высота плавающего элемента). Противодействие существует: свойство overflow: hidden, применённое к контейнеру плавающего элемента, труднообъяснимым образом решает эту проблему.
.left { float: left; margin-right: 8px; } .right { float: right; margin-left: 8px; } div { margin: 8px 0; overflow: hidden; } p { margin: 0; } ... <div> <img class="left" src="flower1.jpg" alt="flower" /> <p> Этот текст обтекает изображение, т.е. занимает свободное пространство сбоку и снизу от него. При помощи CSS данный эффект достигается за счёт применения к обтекаемому объекту свойства float со значением left или right. Обычно при этом указывают ещё и отступ (margin). </p> </div> <div> <img class="right" src="flower2.jpg" alt="flower" /> <p> Изображения вместе с текстом заключены в данном примере в секции, которым назначен небольшой вертикальный отступ (margin: 8px 0). Свойство clear:both назначать здесь нет необходимости, поскольку секция стремится занять 100% ширины своего контейнера, и не станет обтекать другие элементы (если её ширину специально не ограничить). Контейнеры, содержащие плавающие элементы имеют неприятную особенность неправильно определять собственную высоту (не учитывается высота плавающего элемента). В качестве противодействия элементам div в данном примере назначено стилевое свойство overflow: hidden, которое решает эту проблему. </p> </div>Листинг 8.2. Обтекание изображений текстом
Рис. 8.2. Обтекание изображений текстом
Упражнение. Сделайте, чтобы оба изображения размещались слева. Проверьте, что будет, если: а) убрать свойство clear у div ; убрать там же свойство overflow ; в) убрать сброс отступов у параграфов. Каким образом эти свойства влияют на отображение страницы?
Фоновые изображения
Представляют собой мощный механизм внесения разнообразия в визуальное представление страницы. Фоновое изображение (одно в CSS 2, и несколько в CSS 3) можно назначить практически любому блочному элементу - body, div, table, ul и т.д.:
background-image: url(файл);Путь к файлу может быть, как обычно, абсолютным, относительным или корневым. По умолчанию изображение повторяется в обоих направлениях, заполняя всю площадь элемента, которому оно назначено. Дополнительные CSS-свойства позволяют управлять размещением изображения.
Свойство background-repeat определяет правило повтора: возможны значения no-repeat, repeat-x, repeat-y и repeat, смысл которых очевиден.
Свойство background-position определяет начальную позицию изображения. Для этого свойства требуется указать два значения - смещения по X и по Y от левого верхнего угла элемента. Значения могут быть заданы в любых единицах измерения CSS, а также ключевыми словами left, center, right (для указания горизонтальной позиции) и top, center, bottom (для вертикальных).
Ещё одно свойство - background-attachment - позволяет закрепить изображение в определённом месте окна браузера, сделав его независимым от прокрутки:
background-attachment:fixed;Значение этого свойства по умолчанию - scroll (прокручиваться).
И, наконец, сокращённое свойство background позволяет указать сразу все перечисленные свойства фоновых изображений (а также background-color ):
background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position]Могут быть указаны не все эти свойства, а только те, которые должны отличаться от значений по умолчанию.
body { padding-left: 100px; background-image: url(Texture.jpg); background-repeat: repeat-y; } ... <div> <h1> Заголовок 1 уровня</h1> <p> Фоновое изображение (одно в CSS 2, и несколько в CSS 3) можно назначить практически любому блочному элементу - body, div, table, ul и т.д.: background-image: url(файл); </p> <p> По умолчанию изображение повторяется в обоих направлениях, заполняя всю площадь элемента, которому оно назначено. Дополнительные CSS-свойства позволяют управлять размещением изображения. В данном примере изображение повторяется только по вертикали, поскольку задано свойство background-repeat: repeat-y.</p> </div>Листинг 8.3. Фоновые изображения
Рис. 8.3. Фоновые изображения
Упражнения.
Разместите фоновую текстуру горизонтальной полосой а) над текстом; б) под ним.
Создайте две горизонтальных полосы текстур - сверху и снизу текста. Для этого поместите в тело документа секцию, с полосой текстуры вверху; внутри этой секции - ещё одна секция с полосой текстуры внизу. Весь текст поместите во вложенную секцию.
Добейтесь того же эффекта, как и в предыдущем упражнении, заполнив внешнюю секцию текстурой полностью, а для внутренней установив фоновый белый цвет. Примерный вид результата см. на рис. 8.4.
Рис. 8.4. Горизонтальные полосы текстур
С фоновыми изображениями связан ряд трюков. Рассмотрим задачу создания специфической рамки (отличной от обычного прямоугольника) вокруг блочного элемента (рис. 8.5). В CSS 3 для этого есть встроенный механизм, а в CSS 2 - нет, поэтому нет альтернативы применению изображения. Чтобы предусмотреть возможные изменения в высоте элемента, вокруг которого создаётся рамка, изображение делится на две части, первая из которых размещается сверху блока, а вторая - снизу, так, что, блок, расширяясь, как бы раздвигает собой рамку. Но в CSS 2 нет и возможности назначить одному блоку два фоновых изображения (а в CSS 3 есть)! Поэтому блока должно быть тоже два, причём один вложен в другой.
div { background-image: url(rnd_bot.png); background-position: left bottom; background-repeat: no-repeat; width: 200px; } h3 { background-image: url(rnd_top.png); background-position: left top; background-repeat: no-repeat; margin: 0; padding: 12px; padding-bottom: 5px; } p { padding: 12px; padding-top: 0; margin: 0; } ... <div> <h3> Заголовок 3 уровня</h3> <p> Изображение разделено на две части, первая из которых назначена в качестве фона заголовку: background-image: url(rnd_top.png). Фон заголовка размещён слева вверху (background-position: left top) и без повтора (background-repeat: no-repeat). </p> <p> Нижняя часть изображения назначена фоном секции (в которую входят и заголовок, и абзацы). Оно позиционировано слева внизу и также без повтора. </p> </div>Листинг 8.4. Создание рамки при помощи фоновых изображений
Рис. 8.5. Создание рамки при помощи фоновых изображений
Упражнения.
Попробуйте увеличивать и уменьшать количество текста в заголовке и в абзаце, чтобы выяснить границы применения рассматриваемого приёма.
Создайте новый HTML-документ с несколькими заголовками и абзацами. Нарисуйте от руки в редакторе Paint (или любом другом) волнистую горизонтальную линию небольшой длины. При рисовании постарайтесь, чтобы начальная и конечная точки находились примерно на одном уровне по вертикали, и чтобы кривая в этих точках имела примерно одинаковый наклон. Сохраните рисунок в формате png и при помощи CSS-правила для элемента заголовка поместите его в HTML-документ. Заголовки должны подчёркиваться линиями.
Изменение ширины блока очевидно, рассмотренным трюком не предусматривается. Однако, развивая идею, можно увеличить количество задействованных блоков и изображений до четырёх, что решает эту проблему.
Ролловеры. Карты
Ролловеры
Под термином "ролловер" в веб-дизайне понимают визуальный элемент (например, кнопку), меняющий свой вид при таких действиях указателя мыши как наведение и нажатие. Элементы навигации в лабораторной работе 2 можно считать ролловерами, однако часто ролловеры полностью меняют изображение, а не только цвет. Разумеется, этого можно достичь теми же средствами, т.е. определить различные фоновые изображения ролловера в различных состояниях (для гиперссылки, например, таких состояний четыре - link, visited, hover и active ). Однако сменное изображение, загружаясь впервые, создаст ощутимую задержку, что нежелательно. Возможность регулировать позицию фонового изображения предоставляет возможность решения этой проблемы: изображения для всех состояний объединяются в одно, и при смене состояния ролловера меняется только позиция единственного фонового изображения.
a { background-image: url(A_rollover_bg.png); background-repeat: no-repeat; display: block; min-height: 27px; padding-top: 4px; padding-left: 35px; font-size: 16px; text-decoration: none; } a:visited { background-position: 0 -81px; } a:hover { background-position: 0 -54px; text-decoration: underline; } a:active { background-position: 0 -27px; } div { width: 230px; } ... <p> Для гиперссылок в данном примере определено единственное фоновое изображение. Четырём различным состояниям, определённым для гиперссылки (link, visited, hover и active), которым в CSS 2 соответствуют псевдоклассы, назначены разные позиции этого изображения (background-position).</p> <div> <a href="#">link - (0; 0) </a> <a href="#">active - (0; -27px) </a> <a href="#">hover - (0; -54px) </a> <a href="#">visited - (0; -81px) </a> </div>Листинг 8.5. Использование изображений-ролловеров в меню
Рис. 8.6. Использование изображений-ролловеров в меню
Упражнения.
Что будет, если текст ссылок сделать существенно длиннее? А если убрать указание ширины контейнера меню?
Измените ассоциации всех состояний ссылки с изображениями (произвольно).
Описанный приём имеет более и широкое применение: множество мелких изображений (маркеров, пиктограмм и т.п.) обычно рационально заменить одним составным, регулируя отображаемую часть средствами позиционирования фоновых изображений. Это сокращает число запросов к веб-серверу при загрузке документа.
Атрибуты ismap и usemap
Сообщают браузеру, что изображение представляет собой "навигационную карту", содержащую одну или несколько гиперссылок, которые пользователь может выбирать мышью. Атрибут ismap указывает на серверную навигационную карту и может определяться только в элементе <а>:
<а href="images/map2.aspx"> <img src="images/map2.gif" ismap="ismap" /> </а>Браузер автоматически посылает серверу координаты мыши относительно левого верхнего угла изображения, когда пользователь щелкает где-то на изображении ismap. Специальная программа на сервере может затем употребить эти координаты при создании ответа.
Атрибут usemap обеспечивает механизм клиентской навигационной карты. В этом случае браузер на компьютере пользователя преобразует координаты щелчка на изображении в некоторое действие, например, загрузку и отображение другого документа.
<img src="RegPageUml.jpg" alt="Web Diagram" usemap="#map1" /> <map name="map1"> <area shape="rect" coords="13,8,87,71" href="http://www.w3schools.com/html/html_intro.asp" title="HTML page" alt="HTML page" /> </map>Листинг 8.6. Клиентская навигационная карта
Рис. 8.7. Клиентская навигационная карта
Упражнение. Создайте ещё две области в навигационной карте - они должны ссылаться на страницы http://www.w3schools.com/TAGS/tag_form.asp и http://www.w3schools.com/JS/default.asp. Пусть одна из них будет круглой.
Вопросы
- Какой элемент используется для вставки изображения в документ? Какие атрибуты должен иметь этот элемент?
- Какие свойства позволяют указать или ограничить размеры изображения?
- Как достигается обтекание изображений текстом?
- Какие свойства определяют фоновое изображение элемента?
- Для чего используются ролловеры и как они создаются при помощи фоновых изображений?
- Как создаётся и действует клиентская навигационная карта?
Лекция 9:
Таблицы
Ключевые слова: таблица, объём, ячейка, 'border-collapse', 'groove', 'inset', 'outset', описание заголовка
Таблица, как правило, представляет собой довольно большой объём структурированной информации. В HTML-разметке объём ещё и увеличивается, поскольку каждая строка и каждая ячейка представляет собой HTML-элемент с открывающим и закрывающим тэгами. Вообще говоря, для создания HTML-таблиц желательно использовать WYSIWYG-редактор (либо генерировать таблицу программно). Во всяком случае, для того, чтобы уметь использовать все полезные возможности таблиц, следует ознакомиться со стилями, применимыми к таблице и составляющим её элементам. В этом заключается задача данной лекции.
Дата: 2019-02-02, просмотров: 279.
