Internet_tehnologii_kurs_lek

Рис. 6.3. Страница с фреймами, состоящая из четырех столбцов; левый и правый столбцы занимают по 25 % от пространства окна браузера, ширина левого центрального столбца является динамической, а ширина правого центрального столбца является фиксированной и составляет 100 пикселов

Работа со строками

Используя атрибут rows, можно создавать строки точно таким же образом, как создаются столбцы. В примере 6.6 определяется страница с фреймами, состоящая из двух строк: верхняя строка занимает 25% доступного пространства окна браузера, а высота нижней строки изменяется динамически в соответствии с доступным пространством окна браузера.

Пример 6.6. Страница с фреймами, состоящая га двух строк

<frameset rows="25%,*"> <frame src="lightgray.html" /> <frame src="darkgray.html" /> </frameset>

На рисунке 6.4 показаны результирующие строки.

Рис. 6.4. Строки на странице с фреймами

Теперь вы понимаете, что порядок следования элементов frame на странице должен соответствовать порядку описания столбцов и строк. Фрейм, расположенный первым в стеке, сопоставляется с первой составляющей значения атрибута col s или rows.

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

Более сложный подход к дизайну страниц с использованием фреймов подразумевает комбинирование столбцов и строк для получения желаемого эффекта. Это достигается при помощи вложенных элементов frameset, как показано в примере 6.7.

Пример 6.7. Комбинирование столбцов и строк

<frameset rows="100,*"> <frame src="top.html" /> <frameset cols="200, *"> <frame src="nav.html" /> <frame src="main.html" /> </frameset>

</frameset>

В результате, над двумя столбцами будет располагаться строка, как показано на рисунке 6.5.

Рис. 6.5. Комбинирование строк и столбцов

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

Атрибуты marginheight и marginwidth позволяют указывать значение в пикселах для управления высотой и шириной границ фрейма. Атрибут noresize фиксирует положение фрейма таким образом, что пользователь не сможет передвинуть границы фрейма.

Атрибут scrolling позволяет управлять отображением полос прокрутки внутри фрейма. Это важно в том случае, когда размер фрейма зафиксирован, а содержимое фрейма выходит за пределы его области. Для атрибута scrolling существуют три допустимых значения: yes (полосы прокрутки отображаются все время), по (полосы прокрутки не отображаются никогда) и auto (полосы прокрутки отображаются только при необходимости).

В примере 6.8 демонстрируется документ с набором фреймов, в котором применяются элементы управления границами, изменением размеров и скроллингом.

Пример 6.8. Управление границами, изменением размеров и прокруткой во фреймах

<frameset cols="200, *">

71

<frame src="menu.html" marginheight="5" marginwidth="5" nore-size="noresize" scrolling="yes" /> <frame src="main.html" marginheight="9" marginwidth="9" nore-size="noresize" scrolling="yes" /> </frameset>

На рисунке 6.6 показаны результаты.

Рис. 6.6. Обратите внимание на отображаемые полосы прокрутки в каждом фрейме

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

целевые фреймы, используя атрибут target. Существует также и другой метод позиционирования, который мы рассмотрим, известный, как

волшебные целевые имена (magic target name).

Именное позиционирование осуществляется при помощи атрибута name и значения, описывающего фрейм. Обычно это значение описывает функцию фрейма. Следовательно, фрейм для навигации может быть назван именем nav, фрейм с содержимым - content, и так далее.

Впримере 6.9 представлен документ с набором фреймов, всем фреймам которого присвоены корректные названия. Пример 6.9. Именование фреймов

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtmll/DTD/xhtmll-frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>

<title>Frames with Names</title> </head>

<frameset cols="200, *">

<frame src="menu.html" marginheight="5" marginwidth="5" noresize="noresize" scrolling="auto" name="menu" />

<frame src="main.html" marginheight="9" marginwidth="9" noresize="noresize" scrolling="auto" name="content" />

</frameset>

</html>

Документ описывает страницу с фреймами, имеющую область меню и область содержимого. Теперь, когда отдельным фреймам присвоены названия, можно позиционировать любые ссылки, используя язык HTML для корректного поведения ссылок.

Если вы хотите щелкнуть на ссылке во фрейме меню, чтобы соответствующая связанная страница загрузилась во фрейм с именем content, используйте в ссылке атрибут target, значение которого должно соответствовать названию целевого фрейма, как показано в примере 6.10. Пример 6.10. Указание целевых фреймов при помощи атрибутов target и name

<ul>

<li> <a href="about.html" target="content">About the Company </ax/li>

<li> <a href="clients.html" target="content">Company Clients </a></li>

<li> <a href="contact.html" target="content">Contact Company </a></li>

</ul>

Теперь каждый раз при щелчке на любой из ссылок - about.html, clients.html или contact.html - соответствующие документы будут загружаться во фрейм с именем content.

Волшебные целевые имена

Волшебные целевые имена - это четыре предопределенных имени языка HTML, определяющие особое поведение браузера при активации ссылки:

target="_blank" - целевое имя _blank приводит к открытию связанного документа в совершенно новом окне браузера; target = "_self" - связанный документ будет загружен в том же окне, где находится исходная ссылка;

target="_parent" - загружает связанный документ в родительский набор фреймов ссылки;

target="_top" - этот атрибут используется для загрузки ссылки в полном окне, перекрывая все существующие фреймы.

Если вы хотите избавиться от фреймов и чтобы в окне браузера отобразился полный документ без фреймов, не используйте значение атрибута name в качестве цели; вместо этого используйте волшебное целевое имя _top:

<lixa href="contact .html" target="_top">Contact Company< / ax /1 i >

Врезультате страница contact.html полностью перекроет не только документ с набором фреймов, но и все соответствующие фреймы, как показано на рисунке 6.7.

Рис. 6.7. При использовании волшебного целевого имени связывание со страницей contact.html выполнено таким образом, что,

72

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

Не пытайтесь загрузить сайт другого человека во фреймы. Эта задача считается сомнительной и, вероятно, незаконной. Также будьте осторожны при выборе имен для объектов, избегайте чередований букв в разных регистрах и никогда не используйте символы, например символ подчеркивания, который уже зарезервирован для волшебного целевого имени. Наконец, использование волшебного целевого имени _Ыапк приводит к открытию нового браузера, что для многих людей кажется ненадежным.

Фреймы без границ Если вы хотите, чтобы на сайте не отображались границы фреймов, от них можно избавиться. Выполняя правила, создать фреймы, не

имеющие границ, не составит труда. В тег frame нужно просто добавить атрибут и значение frameborder="0", как показано в примере 6.11. Пример 6.11. Использование фреймов, не имеющих границ

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtmll/DTD/xhtmll-frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Borderless Frames</title> </head>

<frameset cols="200,*">

<frame frameborder="0" sre="menu.html" marginheight="5" margin-width="5" noresize="noresize" scrolling="auto" /> <frame frameborder="0" src="main.html" marginheight="9" margin-width="9" noresize="noresize" name="content" scrolling="auto" /> </frameset> </html>

Внешний вид фреймов, не имеющих границ, можно увидеть на рисунке 6.8.

Рис. 6.8. Посмотрите-ка, а границ-то нет!

Конечно, этот метод работает только в современных браузерах, поскольку изначально у браузеров Netscape и Internet Explorer существовали собственные способы, позволяющие избавляться от границ фреймов.

Вбраузерах Netscape до версии 6 избавиться от границ фреймов можно в следующих случаях: атрибуту border присваивается числовое значение, в пикселах, равное 0;

атрибуту framespacing не присваивается значение.

Ранние версии браузера Internet Explorer позволяли избавиться от границ фреймов в следующих случаях: атрибуту frameborder присваивается числовое значение, в пикселах, равное 0;

атрибуту framespacing присваивается числовое значение ширины, в пикселах, равное 0.

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

<frameset frameborder="0" framespacing="0" border="0">

или

<frameset frameborder="no" framespacing="0" border="0">

Впримере 6.12 показано, как может выглядеть приведенный ранее пример с использованием неверного синтаксиса.

Пример 6.12. Поддержка фреймов, не имеющих границ, в старых браузерах

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtmll/DTD/xhtmll-frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Borderless Frames</title> </head>

<frameset frameborder="0" framespacing="0" border="0" cols="200,*">

<frame src="menu.html" marginheight="5" marginwidth="5" nore-size="noresize" scrolling="auto" />

<frame src="main.html" marginheight="9" marginwidth="9" nore-size="noresize" scrolling="auto" /></frameset></html>

Вообще-то я не рекомендую нарушать корректность документа, но в данном случае необходимо взвесить все «за» и «против»: если фактически необходима обратная совместимость с определенными аспектами языка HTML, иногда приходится нарушать правила. К счастью, старые браузеры становятся менее популярными, поэтому их поддержка нужна все меньше и меньше.

Создание доступных фреймов при помощи элемента noframes

Одним из наиважнейших вопросов при разработке дизайнов с использованием фреймов, как упоминалось ранее, является гарантия того, что люди, не имеющие возможности использовать фреймы, например слепые или с нарушениями двигательной функции, могли получить доступ к важной информации Web-сайта. Один из способов добиться доступности на сайте с фреймами - воспользоваться элементом noframes. Этот элемент размещается внутри элемента frameset. Важная информация может находиться под тем же адресом URL, что и страница с набором фреймов, а полностью доступный сайт может быть сформирован из тех же страниц, которые используются для сайта с фреймами, как показано в примере 6.13 и на рисунке 6.9.

Пример 6.13. Создание доступных фреймов при помощи элемента noframes <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtmll/DTD/xhtmll-frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Frames with NOFRAMES Element</title> </head>

<frameset cols="200, *">

<frame src="menu.html" marginheight="5" marginwidth="5" noresize="noresize" scrolling="auto" />

<frame src="main.html" name="right" marginheight="9" marginwidth="9" noresize="noresize" scrolling="auto" />

<noframes>

73

<body>

<p>Welcome, We're happy to provide this non-frames access to our Web site. If you prefer to view our site using frames,

please upgrade your browser to a recent one that fully supports frames. Otherwise, please visit out <a href="index_noframes.html"> non-framed</a> version of this site.</p>

</body>

</noframes> </frameset> </html>

Готовы к отрицательным эмоциям? Отлично!

На рисунке приведен результат отображения страницы в браузере Mosaic 1.0, очень старом графическом браузере. В нем, конечно же, нет никакой поддержки фреймов, однако простое использование элемента noframes гарантирует, что я могу получить информацию, равно как и слепые люди или люди с нарушениями двигательной функции.

Рис. 6.9. Старые браузеры и программное обеспечение, предназначенное для людей с ограниченными возможностями, могут интерпретировать информацию, которая содержится

в элементе по frames, не имея встроенной поддержки фреймов

Поскольку в элементе noframes можно отформатировать весь документ, страницу index.html можно использовать в качестве домашней страницы сайта. На этой странице можно создать ссылки на внутренние страницы, которые используются в дизайне с фреймами.

Важно запомнить, что документы с набором фреймов не поддерживают элемент body, правда, с одним исключением: если используется элемент noframes, элемент body используется для создания информации раздела body для версии страницы, не использующей фреймов. В остальных случаях, никогда не используйте элемент body в наборе фреймов; вместо этого используйте элемент frameset.

Удивительные встроенные фреймы

Впервые представленные в браузере Internet Explorer 3.0, встроенные или плавающие фреймы (iframes) были официально приняты в языке HTML 4.O. Это хорошая новость, поскольку при надлежащем применении они очень эффективны. Плохие новости заключаются в том, что встроенные фреймы не поддерживаются браузером Netscape 4.61 и многими другими браузерами. В браузере Netscape версии 6.0 и выше такая поддержка реализована.

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

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

Встроенные фреймы не ограничены отображением только HTML-страниц. Из встроенного фрейма можно ссылаться на любой тип источника информации, включая изображения и объекты мультимедиа.

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

Пример 6.14. Встроенные фреймы

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtmll/DTD/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>

<title>Inline Frames</title> </head>

<body>

<iframe width="350 height="200 src="text.html" scrolling="auto" frameborder="1">

</iframe>

</body>

</html

Браузер отобразит встроенный фрейм в соответствии с указанными значениями атрибутов. В данном примере, ширина фрейма составляет 350 пикселов, высота -200 пикселов, с автоматическим отображением полос прокрутки и толщиной границы, равной 1, чтобы лучше представить результаты.

Мне нравится сравнивать встроенные фреймы с изображениями или объектами. Они все функционируют очень похожим образом: браузер рисует область, а затем вставляет объект — в данном случае, другой HTML-файл - в нарисованную область.

На рисунке 6.10 показаны результаты.

74

Рис. 6.10. Встроенный фрейм в браузере Mozilla

У фреймов существуют проблемы с обратной совместимостью. Все современные браузеры реализуют поддержку фреймов, однако старые браузеры могут не поддерживать их. Обычно в таких случаях, элемент iframe полностью игнорируется. Для встроенных фреймов, однако, не существует метода, подобного методу с использованием элемента no frames. Таким образом, хотя зачастую использование встроенных фреймов является удобным, их применение необходимо ограничить случаями, когда не требуется поддержка старых Web-браузеров.

Вы познакомились с фреймами!

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

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

Никогда не знаешь наперед - может однажды вам понадобится именно это решение.

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

Использование языка CSS

Таблицы каскадных стилей приобрели популярность в конце 1996 года. Не смотря на относительно долгое существование этой технологии, ее практическое применение для Web-дизайна ограничивалось управлением шрифтами и цветом, по крайней мере, до недавнего времени. Данное ограничение возникло из-за отсутствия совместимой поддержки таблиц стилей браузерами. Поскольку не все браузеры одинаково обрабатывали инструкции языка CSS (если вообще обрабатывали), дизайнеры не могли в полной мере воспользоваться реальными преимуществами таблиц стилей. Вместо этого, ответственность за отображение информации возлагалась на язык HTML.

Теперь, когда поддержка языка CSS реализована гораздо лучше, и, благодаря этому, можно воспользоваться множеством ценных возможностей языка, Web-дизайнеры переходят от использования языка HTML, как средства стилизации и создания макетов страниц, к настоящему дизайну с применением языка CSS. Почему это так важно? Причин тому - множество:

Раздельное хранение представления и документа позволяет стилизовать этот документ для различных устройств, включая, монитор, принтер, проектор и даже портативные устройства.

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

Язык CSS позволяет управлять как одним документом, так и миллионами документов. Для внесения изменения потребуется модифицировать необходимый стиль в одном CSS-файле, и это изменение автоматически отразится на всех связанных документах. В языке HTML это сделать невозможно.

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

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

Очевидно, что язык CSS предоставляет множество возможностей. В этой главе мы узнаем, как эффективно и гибко использовать язык CSS для дизайнов.

Упрошенная теория языка CSS

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

Правила языка CSS

Правила языка CSS состоят из селектора и, по крайней мере, одного объявления. Селектор - это код элемента языка HTML, к которому будет применено правило стиля. Объявление состоит, по крайней мере, из одного CSS-свойства и соответствующего значения. При помощи CSS-свойств определяются стили:

h1 {color: red;}

Селектор h1 отвечает за заголовки h1 языка HTML, а объявление состоит из свойства color и значения red. Проще говоря, это правило изменяет цвет текста элементов h1 на красный цвет. Обратите внимание, что синтаксис правила стиля отличается от синтаксиса языка HTML. Объявления заключаются в фигурные скобки, за каждым названием свойства следует двоеточие, а после каждого свойства со значением ставится точка с запятой. В правиле можно использовать любое количество свойств.

Применение языка CSS

Существует шесть типов таблиц стилей:

Стиль браузера - это стандартная таблица стилей, используемая браузером. Если никакие правила стиля не объявлены, применяются эти стандартные стили.

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

Встроенный стиль - стиль, который определяется непосредственно в элементе и применяется с использованием атрибута style. Такой

75

подход полезен для стилей, единовременно применяемых к одному элементу, однако он не считается идеальным.

Внедренный стиль - этот стиль управляет представлением одного документа и размещается внутри элемента style HTML-документа. Связанный стиль - это таблица стилей, которая связана с HTML-документом при помощи элемента link, размещенного в разделе документа head. Любой документ, связанный с данным типом таблицы стилей, получает все стили, определенные в ней, в чем и заключается преимущество управления языка CSS.

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

Мы познакомимся с примерами использования перечисленных таблиц стилей по мере изучения материала главы. Каскад

Люди часто интересуются, почему стили называются каскадными. Каскад - это иерархия применения - красивое название для системы применения правил. Если внимательно посмотреть на пять перечисленных типов таблиц стилей, станут очевидными различные способы применения стиля к одному и тому же документу.

Что же получится в результате, если у нас будет встроенный стиль, внедренная таблица стилей и связанная таблица стилей? Каскад определяет способ применения правил. В случае с типами таблиц стилей, пользовательский стиль переопределяет все остальные стили; встроенный стиль превосходит внедренный, связанный и импортированный стили; внедренный стиль имеет преимущественное значение перед встроенным стилем; связанные и импортированные стили рассматриваются, как равные по значимости, и применяются везде, где не были применены другие типы таблиц стилей. Стиль браузера используется только в том случае, когда для данного элемента не было предоставлено ни одного стиля.

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

Наследование Наследование означает, что стили наследуются от родительских элементов. Рассмотрим следующий пример: <body>

<hl>My header</hl> <p>Subsequent Text</p> </body>

Оба элемента h1 и р считаются потомками элемента body. Стили, заданные для элемента body, будут унаследованы потомками, если не будет применено другое правило, переопределяющее унаследованный стиль. В языке CSS наследуются почти все свойства, кроме свойств, относящихся к границам и к отступам.

Специфичность

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

Добавление встроенного стиля Встроенные стили используются редко, поскольку они задают стили только для одного конкретного элемента. Такой подход препятствует

использованию преимуществ управления языка CSS.

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

Рассмотрим следующий элемент:

<hl>welcome!</hl>

Если бы этот заголовок был частью готового HTML-документа и мы просмотрели его в браузере, результаты были бы такими же, как на рисунке 7.1.

Рис. 7.1. Стандартный размер элемента hi, определяемый стилем браузера

Допустим, что нам не нравится стандартный цвет и размер шрифта. Можно добавить CSS-правила непосредственно к этому элементу, воспользовавшись атрибутом style:

<hl style="color: gray; font-size: 24px;">Welcome!</hl>

Теперь у нас будет заголовок серого цвета с размером шрифта, равным 24 пикселам, как показано на рисунке 7.2.

Рис. 7.2. Переопределение цвета и размера с использованием встроенного стиля

Использование внедренного стиля Внедренный стиль управляет только тем документом, в который он был внедрен. Как и встроенные стили, этот подход не позволяет

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

Внедренный стиль добавляется в раздел документа head с использованием элемента style и обязательного атрибута type, как показано в примере 7.1.

Пример 7.1. Фрагмент HTML-документа с описанием внедренного стиля

<head>

<title>Working with style</title> <style type="text/css">

body {background-color: black; color:white;} h1 {font-size: 24px;}

p {font-size: 12px;}

76

</style> </head> <body>

<hl>Welcome!</hl> <p>Paragraph one.</p> <p>Paragraph two.</p> </body>

На рисунке 7.3 показаны результаты.

Рис. 7.3. Обратите внимание, что цвет элемента body наследуется всеми его потомками

Создание связанной таблицы стилей

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

В примере 7.2 показана таблица стилей, готовая для связывания. Я указала ряд правил стилей и сохранила файл под именем styles.css в моей локальной папке.

Пример 7.2. Таблица стилей, готовая для связывания body {

background-color: #999; color: black;

} hi {

font-family: Verdana; font-size: 24px,- color: #ccc;

} P I

font-family: Georgia; font-size: 12px; color: white; }

В примере 7.3 приведен готовый HTML-документ, связанный с необходимой таблицей стилей, которая размещается в том же каталоге, что и документ.

Пример 7.3. HTML-страница для таблицы стилей

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtmll/DTD/xhtml-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>Working with style</title>

<link rel="stylesheet" type="text/css" href="styles.css" nvedia="all" /> </head> <:body>

<h1>Welcome!</h1> <p>Paragraph one.</p> <p>Paragraph two.</p> </body>

</html>

Результаты приведены на рисунке 7.4.

Рис. 7.4. Результаты применения связанной таблицы стилей

Конечно, с данной таблицей стилей можно связать любое количество документов, используя элемент link. Для элемента link используется несколько атрибутов, перечисленных ниже:

rel - атрибут связи, который описывает связь ссылки. В данном случае, связь осуществляется с основной таблицей стилей, поэтому используется значение stylesheet.

type - как и для элемента style внедренного стиля, необходимо определить тип языка и используемый формат - в данном случае, text/css. href - знакомый атрибут ссылки. В данном случае, было указано только имя файла, поскольку оба документа находятся в одном каталоге. Таблицы стилей можно размещать в другом каталоге; просто проверяйте корректность значения атрибута href. Можно также использовать абсолютное связывание для непосредственной связи с таблицей стилей.

• media - атрибут media позволяет определять различные стили для различных устройств вывода. Если создать отдельную таблицу стилей для данного документа, предназначенную для вывода информации на портативных устройствах, в элементе link использовалась бы следующая информация: media="handheld". Подобным образом, атрибут media= "print" предполагает использование таблицы стилей только для печати. В данном случае, атрибуту media присвоено значение screen. По умолчанию, значением атрибута media является all, поэтому, если необходимо применить одни и те же стили ко всем устройствам вывода, используйте это значение или просто не указывайте атрибут media.

Как уже отмечалось, с документом можно связать любое количество таблиц стилей. Импортирование таблиц стилей

77

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

Непосредственное импортирование в документ При импортировании в документ на самом деле используются два типа таблиц стилей: отдельная импортируемая таблица стилей (я

назвала файл именем import.css) и встроенная таблица стилей в документе. Выполнить импортирование при помощи элемента link невозможно; поэтому вместо элемента link используется директива import языка CSS, как показано в примере 7.4.

Пример 7.4. Импортирование стиля из внедренной таблицы

<head>

<head>

<title>working with style</title> <style type="text/css"> @import url(import.ess); </style> </head>

Таблица стилей import.css будет импортирована непосредственно в документ. Представьте себе, что элемент style содержит все правила стилей из файла import.css - это как раз то, что происходит. Поэтому теперь стиль фактически внедрен в этот файл.

Этот способ можно использовать для любого количества документов, но обычно этот метод используется в основном для обходных решений. Ряд браузеров, в частности, браузер Netscape версии 4, не поддерживают директиву @import, но при этом они поддерживают элемент link. Поскольку в браузере Netscape 4.x реализована ограниченная поддержка языка CSS, применять стили необходимо с особой осторожностью. Выделение стилей, не поддерживаемых браузером, в связанные таблицы стилей, а поддерживаемых - в импортированные таблицы стилей, позволит пользователям браузера Netscape увидеть некоторые стили, но не все. Данный метод очень эффективен для обходного решения, когда необходимо поддерживать браузеры Netscape версии 4.

Другое обходное решение с использованием директивы @import заключается в размещении всех стилей в импортированной таблице. Любой браузер, не поддерживающий директиву @import, просто не сможет прочитать стили, и браузер отобразит документ без стилей. Импортирование стиля в связанную таблицу стилей

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

Рис. 7.5. Импортирование стилей в основную таблицу

Представьте, что каждый модульный файл (modl.css, mod2.css и mod3.css) содержит специфические стили для какой-либо возможности или функции сайта. Например, могут существовать стили для управления рекламой, стили для таблиц и стили для форм. Все эти стили можно оформить в виде отдельных модульных файлов, а затем импортировать в файл styles.ess, который связан со страницей index.html. Основная причина использования данного метода заключается в том, что изменения в модули можно вносить независимо от других модулей, а также можно легко избавляться от стилей, когда они больше не нужны. Этот метод наиболее эффективен для очень больших сайтов с множеством стилей.

Комментирование и форматирование кода на языке CSS

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

Комментирование кода на языке CSS

Комментарии языка CSS отличаются от комментариев языка HTML. Комментарии языка CSS начинаются с прямого слэша и звездочки, а закрываются звездочкой, за которой следует прямой слэш. Любое содержимое, расположенное в этой области, не интерпретируется браузером, как показано в примере 7.5.

Пример 7.5. Комментирование кода на языке CSS /* global styles */

body {

background-color: orange;

font-family: Arial, Helvetica, sans-serif; color: white;

}

/* layout styles */ #nav {

position: absolute; top: 0;

left: 0; width: 150px;

}

/* hide this style and comment temporarily

.warning { color: red;

} John: please ungide the warning style when you're ready to launch */

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

78

работающих над текущей таблицей стилей.

Иногда, код языка CSS, используемый для определения внедренной таблицы, заключается в комментарии языка HTML, как показано в примере 7.6.

Пример 7.6. Комментарии языка HTML для скрытия CSS-кода

<head>

<title>working with style</title> <style type="text/ess">

<! — Body {

background-color: #999; color: black;

} hi {

font-family: Verdana; font-size: 24px; color: #ccc;

} P (

font-family: Georgia; font-size: 12px; color: white;

}

— >

</style> </head>

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

Форматирование кода на языке CSS

Возможно, вы обратили внимание, что в этой главе были использованы два подхода по форматированию кода (с моей стороны это подло, не так ли?). В первом подходе за селектором на одной строке размещается объявление:

body {background-color: #999; color: black;}

Во втором подходе правило разбивается на строки: body {

background-color: #999; color: black;

}

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

Настало время использовать воображение!

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

Но, несомненно, вы хотите применить приобретенные знания и получить представление, как использовать язык CSS для улучшения внешнего вида объектов. Как никак, это то, что я обещала, не так ли?

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

Мы будем использовать изображения и цвет, чтобы нарядить документы, а также исследовать возможности языка CSS для работы с изображениями и цветом в дизайнах.

Эффекты ссылок, списки и навигация

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

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

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

Работа с состояниями ссылок Стандартные состояния ссылок:

1ink - это состояние ссылки до ее активации.

visited - состояние, в которое переходит ссылка после ее активации. hover - состояние, когда указатель мыши наведен на ссылку.

active - состояние, возникающее при щелчке на ссылке для ее активации.

Существует еще одно состояние - focus. Оно становится активным в тот момент, когда элемент способен получать вводимые с клавиатуры символы, например, как в случае с формой. Обычно это состояние не используется для ссылок, но о нем все равно стоит знать.

Вязыке CSS состояния link и visited относятся к категории псевдоклассов, а состояния hover и active - к категории динамических псевдоклассов. Не сложно понять, почему состояния hover и active считаются динамическими: для их активации пользователь должен выполнить какие-то действия. Состояния 1ink и visited активны до и после взаимодействия со ссылкой.

Перед всеми псевдоселекторами ставится двоеточие. Поэтому, для стилей ссылок доступны следующие селекторы: :1ink, :visited, :hover и :active.

Впримере 10.1 описываются некоторые общие стили для документа, а также стили для всех состояний ссылки.

Пример 10.1. Стилизация ссылок с использованием селекторов псевдоклассов

79

и динамических псевдоклассов

body {font: 14px Georgia, Times, serif; color: white; background-color: black;}

hi {font: 22px Arial, Helvetica, sans-serif; color: #ccc; background-color: black; text-trans form: lowercase,-} h2 {font: italic 20px Georgia, Times, serif; color: #ccc,- background-color: black; text-transform: lowercase;}

a {color: orange;} a:link {color: orange;} a:visited {color: yellow;} a:hover {color: fuchsia;} a:active {color: red;}

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

На рисунке 10.1 показан документ с примененными стилями. Обратите внимание, что указатель мыши наведен на ссылку для демонстрации изменений.

Рис. 10.1. Просмотр состояний 1 ink и hover в контексте документа

Чтобы эффекты ссылок функционировали правильно, описание их стилей необходимо располагать в следующем порядке: link, visited, hover, active. Другой порядок может привести к несоответствующему поведению. Просто запомните этот порядок, как слово LVHA, или, как популярную символику, используемую в промышленности, LoVe/HAte.

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

Рис. 10.2. Состояния link, visited, hover и active

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

Модификация стилей ссылки

Обычно большинство изменений касается состояния hover, но стилизовать можно и все остальные состояния. Популярным подходом является использование цвета фона для состояния hover, как показано в примере 10.2. Пример 10.2. Добавление цвета фона к состоянию hover

a {color: orange;} a:link {color: orange,-}

a:visited {color: yellow;}

a:hover {color: fuchsia; background-color: white;} a:active {color: red;}

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

Рис. 10.3. Изменение цвета фона в состоянии hover

Можно также изменить жирность текста, сделав его полужирным, или изменить его начертание и сделать курсивом, как показано в примере 10.3.

Пример 10.3. Добавление цвета фона к состоянию hover a {color: orange;}

a:link {color: orange;} a:visited {color: yellow;}

a:hover {color: fuchsia; font-style: italic;} a-.active {color: red;}

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

Когда указатель мыши проходит над ссылкой, текст ссылки отображается курсивом, как показано на рисунке 10.4.

80