Internet_tehnologii_kurs_lek

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

Элемент label позволяет присоединять информацию к конкретному элементу управления. Этот элемент и его атрибут for позволяют описывать используемый элемент управления формы более подробно, как показано в примере 5.13.

Пример 5.13. Добавление контекста при помощи элемента label

<form method="get" action="http://www.myserver.com/cgi-bin/ mailscript">

<label for="firstname">MMH:</labelxinput type="text" name="firstname" id="firstname" /><br /> <label for="reading"><input type="checkbox" name="reading" id="reading" />Чтение<Ьг />

<label for="requaestbox">Kaкие-либо особенные пожелания?</1аЬе1> <br> <textarea name="comments" id="requestsbox" cols="25" rows="5">

</form>

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

Обратите внимание, что элемент label всегда располагается перед описываемым элементом управления. В каждом случае, когда описывается элемент управления формы, значение атрибута for должно точно соответствовать значению атрибута id описываемого элемента управления. Это позволит читателям жрана предоставлять более подробную информацию об элементе управления.

Другим важным моментом является то, что использование меток бля кнопок submit (Отправить) и reset (Сбросить) не обязательно. Все благодаря тому, что читатели экрана считывают текст, отображаемый на кнопках, автоматически предоставляя необходимый контекст. Группирование полей формы Другим способом улучшения доступности формы является группирование ее информации. В главе 4 «Создание таблиц»

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

В случае с формами, области формы можно разбить на определенные наборы полей при помощи элемента f ieldset. Если форма состоит из трех контекстуальных частей, например контактной информации, увлечений, а также кнопок Reset (Сбросить) или Submit (Отправить), в каждой части можно создавать поля. После этого можно использовать элемент legend для добавления заглавия к каждой части, предоставляя дополнительный контекст, как показано в примере 5.14.

Пример 5.14. Разделение формы на логические поля с использованием элемента f ieldset

<form method="get" action="http://www.myserver.com/cgi-bin/ mailscript"> <fieldset>

<legend>KoHTaKTHaH MH<|>opMauHH</legend> Имя: <input type="text" name="firstname" id="firstname" size="31" maxlength="40" /xbr />

Фамилия: <input type="text" name="lastname" id="lastname" size="25" maxlength="40" /xbr />

Телефон: <input type="text" name="phone" id="phone" size="15" maxlength="0" /xbr />

</fieldset>

<fieldset>

<1едепс1>Любимая деятельность^/legend>

<input type="checkbox" name="reading" id="reading" />Чтение<Ьг /> <input type="checkbox" name="sports" id="sports" checked="checked" />Спорт<Ьг />

<input type="checkbox" name="games id="games" ^Компьютерные игры<Ьг />

</fieldset>

<fieldset>

<legend>Oткaжитecь или согласитесь с вашими oTBeTaMH</legend> <input type="reset" value="сбросить" />

<input type="submit" value="отправить" /> </fieldset>

</form>

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

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

Рис. 5.15. Использование элементов £ieldset и 1 egend для группирования и идентификации полей формы

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

51

Квантовый скачок

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

Применить стиль можно и к тексту элемента legend, чтобы его шрифт, цвет, размер и все остальное соответствовали общему дизайну страницы. Однако, для сохранения целостности элементов f ieldset и legend разумно не отклоняться слишком далеко от стандартных настроек (например, совсем удалить границы вокруг элемента fieldset), чтобы удостовериться, что специальные возможности остаются доступными.

Группирование элементов меню

Еще один способ внесения ясности в формы заключается в группировании элементов меню. Это можно сделать с помощью элемента opt group. Вместе с элементом optgroup используется атрибут label, как в открывающем теге элемента, так и для всех отдельных элементов данной группы, как показано в примере 5.15.

Пример 5.15. Использование элемента optgroup для вариантов группы в меню формы

<select name="regions" size="14"> <optgroup label="Западный регион">

<option value="Arizona" label="Arizona">ApM30Ha</option>

<option value="California" label="California">Ka.ra^opHMH</op-tion> <option value="Colorado" label = "Colorado">F^opaflo</option> <option value="Nevada" label="Nevada">HeBafla</option>

<option value="Texas" label="Texas">Texac</option> <option value="Utah" label="Utah">K)Ta</option> </optgroup>

<optgroup label="Восточный регион">

<option value="Connecticut" label="Connecticut">KoHHeKTMKyT </option>

<option value="Maine" label="Maine">M3UH</option>

<option value="New_Hampshire" label=" New_Hampshire">НыоГемпшир </option>

<option value="New_Jersey" label="New_Jersey">Hbra-№epcM</op-tion> <option value="New_York" label="New_York">Hbro-flopK</option> <option value="Vermont" label="Vermont">BepMOHT</option> </optgroup>

</select>

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

Рис. 5.16. Группирование элементов меню форм в логические разделы

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

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

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

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

Квантовый скачок

Чтобы подробнее узнать о различных аспектах процесса обработки форм, обратитесь к документу «Web Authoring FAQ» компании Web Design Group по адресу: http://www.htmlhelp.com/faq/html/forms.html.

Список множества удаленных узлов, подходящих для ряда задач по обработке форм, можно получить в разделе «The CGI Resource», который находится по адресу: http://cgi.resourceindex.com/Remotely_Hosted/Form_Processing/.

Примеры скриптов, написанных на языке РНР и используемых для обработки форм, можно найти по адресу: http://php.resourceindex.com/Complete_Scripts/ Form_Processing/.

Полезная статья по реализации обработки форм на платформе Microsoft .NET находится по адресу: http7/www.ondotnet.com/pub/a/dotnet/2003/01/06/formsauthp1.html.

Теперь вы правильно сформированы...

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

На самом деле, в мире профессиональных Web-раэработок, существуют целые подразделения, в которых отдельные разработчики тратят

52

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

Хорошим примером повсеместного использования форм являются порталы. Компании Yahoo!, Excite и даже America online - все они широко используют формы для управления членством, параметрами персонализации и так далее.

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

Никогда не пользовались онлайновыми банковскими услугами? Проверьте и посмотрите, предоставляет ли ваш банк такие возможности. Мой банк, Wells Fargo, обслуживающий западную часть Соединенных Штатов, владеет отличным Web-сайтом по адресу http://wellsfargo.com/, и его разработчики даже работают над его соответствием стандартам и обеспечением доступности.

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

Работа с цветом и изображениями с использованием языка CSS

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

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

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

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

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

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

Цвет и язык CSS

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

Шестнадцатеричная (hex) система счисления с основанием 16 широко используется в компьютерной технике, поскольку 8 бит (1 байт памяти) могут представлять отдельное число или букву. В этой системе счисления используются цифры от 0 до 9 и буквы от а до f в любой комбинации, состоящей из шести разрядов (и начинающейся с символа решетки), для представления смешения красного, зеленого и синего цветов (#RRGGBB).

#FFFFFF = 255, 255, 255 = white

Любая шестнадцатеричная комбинация в языках HTML и CSS может представлять цвет, как показано в примере 8.1. Пример 8.1. Использование шестнадцатеричного значения цвета в стиле

body {color: #FFCC99; background-color: #808080;} a {color: #66CC33;}

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

составляющие. Это означает, что цифры в каждой составляющей - RR, GG и ВВ - должны совпадать, например, #00ССЗЗ или #888888. В сокращенном шестнадцатеричном значении мы из каждой пары берем одну цифру и в результате получаем #0СЗ и #888. В случае со значением #808080, цифры составляющих не являются парными, поэтому значение нельзя записать сокращенно, как показано в примере

8.2.

Пример 8.2. Сокращенное шестнадцатеричное значение цвета body {color: #FC9; background-color: #808080;}

a {color: #6C3;}

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

Значения RGB

Еще одним способом представления цвета в языке CSS является использование фактических RGB-значений. Определить нужные значения можно в программе для редактирования изображений, например Photoshop, как показано на рисунке 8.1.

53

Рис. 8.1. Поиск RGB-значений для серого цвета в программе Photoshop

Вданном случае цвет будет представлен с использованием следующего синтаксиса: color: rgb(128, 128, 128);

Процентные значения RGB

Можно также использовать процентное соотношение красного, зеленого и синего цветов. Значение 0% - это черный цвет, а 100% - это белый цвет. Поэтому, если задать цвет следующим образом:

color: rgb(50%, 100%, 30%);

будет применен ярко-зеленый цвет. Названия цветов

Для описания цвета можно использовать 17 названий цветов. Вот эти названия: aqua (зеленовато-голубой), black (черный), fuchsia (розовый), gray (серый), green (зеленый), lime (светло-зеленый), maroon (темно-красный), navy (темно-синий), olive (оливковый), purple (фиолетовый), red (красный), silver (серебристый), teal (бирюзовый), white (белый), yellow (желтый) и orange (оранжевый) (название цвета orange появилось только в языке CSS 2.1):

color: orange;

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

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

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

Задание цвета фона документа осуществляется путем выбора элемента body и использования свойства background-color и соответствующего значения цвета:

body {background-color: #999;}

Для всего раздела документа body мы выбрали темно-серый цвет фона. При просмотре в браузере цвет фона будет полностью серым, как показано на рисунке 8.2.

Рис. 8.2. Применение цвета к фону документа

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

Цвет и фон элемента

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

body {background-color: #999;} hi {background-color: #ccc;}

На рисунке 8.3 показан элемент hi с установленным цветом фона.

Рис. 8.3. Установка цвета для фона элемента hi

54

Давайте продолжим и добавим также правила для цвета фона элемента абзаца и якорного элемента, как показано в примере 8.3. Пример 8.3. Установленные цвета фона документа и элементов

body (background-color: #999;) hi (background-color: #ccc;) p (background-color: #fff; a (background-color: #ccc;)

На рисунке 8.4 показаны результаты применения цвета фона.

Рис. 8.4. Цвета фона применены к фонам документа

и элементов; обратите внимание, что цвета фона элементов растягиваются на всю ширину элементов Использование цвета фона для украшения таблиц

Вэтой части мы узнаем, как немного украсить таблицы при помощи цветов фона. До сих пор мы использовали селекторы элементов, которые относятся непосредственно к определенному элементу языка HTML, например, hi, p и а. В этой части мы добавим так называемый селектор класса (class selector).

Селекторы класса - это пользовательские селекторы, название для которых мы выбираем сами; перед этим названием ставится точка, например .classname. Классы применяются к элементу языка HTML с использованием атрибута class, значение которого соответствует названию класса:

<tr class="classname"> ... </tr>

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

Впримере 8.4 демонстрируется модифицированная таблица, с которой мы работали в главе 4 «Создание таблиц». Обратите внимание, что в разметку таблицы было внесено единственное изменение: удалены все атрибуты элемента table, кроме атрибута cellspacing. Этот атрибут пришлось оставить, поскольку в языке CSS не существует эффективных способов управления атрибутом cellspacing.

Также была добавлена внедренная таблица стилей, содержащая стили для атрибутов width, border, padding элемента table, а также селекторы элементов и селектор класса для стилизации таблицы при помощи цветов фона элементов.

Пример 8.4. Стилизация таблицы при помощи селекторов элементов и селектора класса

<!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">

<head>

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

body {color:white;}

caption {background-color: #999; border: lpx solid black;} table background-color: #ccc; border: lpx solid black; padding: 5px; width: 90%;}

th {background-color: #333; border:} tr {background-color: #999;}

td {background-color: #ccc; border: lpx solid black}

.highlight {background-color: #fff; color: orange;} </style>

<head>

<body>

<table cellspacing="5">

<caption>Comparing weather and time zone</caption> <tr>

<th>Location</th> <th>Tucson, Arizona</th> <th>Las Vegas, Nevada</th> </tr>

<tr>

<th>Weather</th> <td>Warm to Hot</td> <td>Warm to Hot</td> </tr>

<tr>

<th>Time Zone</th>

<td>No Daylight Savings</td>

<td class="highlight">Mountain Standard Time</td> </tr>

</table> </body> </html>

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

55

Рис. 8.5. Стилизация таблицы при помощи селекторов элементов и селектора класса

Обратите внимание, что были добавлены границы, чтобы еще больше улучшить внешний вид таблицы. Подробнее узнать о стилизации границ можно в главе 11 «Поля, границы и отступы».

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

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

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

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

Рис. 8.6. Фоновая текстура, используемая для создания эффекта обоев, которую я нашла по адресу http://www.grsites.com/textures/

Сначала, давайте присоединим фоновое изображение к документу. Это выполняется при помощи селектора body, для которого создается правило с использованием свойства background-image. Значение этого свойства содержит путь и имя файла изображения:

body {background-image: url(gray.jpg);}

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

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

Рис. 8.7. Заполнение фона раздела документа body

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

hi, h2, h3, h4, h5, h6 {background-image: url(gray.jpg);}

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

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

hi, p, .footertext {color: teal;}

К содержимому элементов hi, p и классу f ootertext будет применен бирюзовый цвет. Можно продолжить создание дополнительных правил для несовпадающих стилей.

hi {font-size: 24px,-}

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

Управление заполнением фона

Язык CSS позволяет управлять способом заполнения фона. Это осуществляется при помощи свойства background-repeat и подходящего значения.

Заполнение вдоль горизонтальной оси Горизонтальная ось, или ось х, позволяет заполнить фон только по горизонтальной оси элемента:

body {background-image: url(gray.jpg); background-repeat: repeat-x;}

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

56

Рис. 8.8. Управление горизонтальным заполнением при помощи свойства background-repeat

Заполнение вдоль вертикальной оси

Подобным образом, можно выполнить заполнение только вдоль вертикальной оси. Для этого используется свойство background-repeat со значением

repeat-y:

body {background-image: url(gray.jpg); background-repeat: repeat-y;}

На рисунке 8.9 показано, что фон был заполнен только вдоль вертикальной оси.

Рис. 8.9. Заполнение фона вдоль вертикальной оси

Можно отключить заполнение фона изображением, воспользовавшись значением no-repeat: body {background-image: url(gray.jpg); background-repeat: no-repeat;}

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

У свойства background-repeat доступны еще два значения. Первое значение - repeat. Использование этого значение приводит к заполнению фона, как по горизонтали, так и по вертикали, что является стандартным поведением для фона; возможно, вы не будете использовать это значение кроме случаев, когда предыдущее правило специально переписывается. Многие свойства языка CSS предоставляют значение по умолчанию, используемое именно для этой цели.

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

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

изображение, сначала необходимо установить свойство background-repeat в значение no-repeat. Затем, для размещения изображения можно использовать любое из значений, представленных в таблице 8.1.

Табл. 8.1. Значения свойства background-posit ion

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

Атрибут background-position позволяет комбинировать значения, выраженные в процентах и длине, но не ключевые слова. Таким образом, можно использовать значение 100% 20рх, но не 100% left.

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

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

hi {background-image: url(tile.gif); backgroundrepeat: no-repeat; background-position: 0% 0%;}

h2 {background-image: url(tile.gif); backgroundrepeat: no-repeat; background-position: lOOpx 4px;}

h3 {background-image: url(tile.gif); backgroundrepeat: no-repeat; background-position: bottom right;}

Чтобы обеспечить корректное функционирование значений атрибута background-position, я определила не только изображение, но и установила значение атрибута background-repeat в no-repeat. На рисунке 8.10 показано окончательное размещение фоновых изображений.

Рис. 8.10. Маленькое изображение с серой окантовкой размещено на фоне элементов заголовка

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

воспользуемся свойством background-attachment и значениями fixed или scroll.

Обычно это свойство используется для всего раздела документа body или для областей с содержимым внутри документа. Однако, как вы заметили, свойство background-attachment можно использовать в любом элементе, где это имеет смысл.

Рассмотрим следующее правило:

body {background-image: url(arrows.gif); background-position: right; background-repeat: no-repeat; background-attachment: scroll;}

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

Теперь, если записать то же правило со значением fixed для атрибута background-attachment, результаты будут совершенно другими, как показано на рисунке 8.12.

Рис. 8.11. Если прокрутка фонового изображения разрешена, изображение прокручивается вместе с элементом, к которому оно присоединено - в данном случае, элементом body

58

Рис. 8.12. Не важно, в какую сторону прокручивается документ - в данном случае, фоновое изображение остается зафиксированным

Используя прокрутку фоновых изображений, можно получить интересные эффекты. Конечно, вы должны попробовать это сами, чтобы увидеть, как на самом деле работает прокрутка в браузере. Поэкспериментируйте с различными вариантами: например, установите значение атрибута background-repeat в repeat или разместите изображение в другом месте и попробуйте использовать оба значения fixed и scroll, чтобы сравнить, как работает каждый из них.

Некоторые консультанты по доступности утверждают, что текст, прокручивающийся над фоном, гораздо сложнее различать. Мне это хорошо известно: я довопьно легко ощущаю движение, и если я попытаюсь прокрутить текст над текстурированным сроном, то почувствую легкое головокружение. Поэтому, используйте этот метод с осторожностью!

Создание прозрачного цвета фона

При обсуждении цветов фона не был затронут один момент - значение transparent свойства background-col or. Конечно, в моем безумии есть своя логика: я сначала хотела рассмотреть фоновые изображения, чтобы вы смогли ощутить всю значимость этого очень важного свойства языка CSS.

В примере 8.6 описывается использованная ранее таблица, но на этот раз фоновое изображение присоединено к элементу body. Обратите внимание, что я также изменила класс .highlight, чтобы присвоить значение transparent свойству background-color.

Пример 8.6. Установка прозрачного цвета фона

<!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">

<head>

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

body {background-image: url(gray.jpg); color:white;} caption {color: black; border: lpx solid black;}

table background-color: #ccc; border: lpx solid black; padding: 5px; width: 90%;}

th {background-color: #333;} tr {background-color: #999;}

td {background-color: #ccc; border: lpx solid black}

.highlight {background-color: transparent; color: orange;} </style>

<head>

<body>

<table cellspacing="5">

<caption>Comparing weather and time zones</caption> <tr>

<th>Location</th> <th>Tucson, Arizona</th> <th>Las Vegas, Nevada</th> </tr>

<tr>

< th>Wea ther</th> <td>Warm to Hot</td> <td>Warm to Hot</td> </tr>

<tr>

<th>Time Zone</th>

<td>No Daylight Savings</td>

<td class="highlight">Mountain Standard Time</td> </tr>

</table> </body> </html>

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

59

Рис. 8.13. Значение transparent позволяет фоновому изображению отображаться сквозь фон элемента - в данном случае, фоновое изображение отображается сквозь ячейку таблицы, к которой применен класс . highlight

Сокращение языка CSS для свойств фона

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

Сокращенные свойства объединяют значения всех связанных с ними свойств. Для свойства background это означает, что свойства color, image, repeat и attachment можно объединить в одно правило, воспользовавшись свойством

background.

Для сравнения, в примере 8.7 описаны стили для всех свойств background. Пример 8.7. Стили фона без сокращений

body { background-color: white;

background-image: url(images/lemon-slice.gif); background-repeat: no-repeat; background-attachment: scroll; background-position: right bottom;_}

Сокращенная версия выглядит так:

body {background: white url(images/lemon-siice.gif) no-repeat scroll right bottom;}

Я создала HTML-страницу с текстом на шуточном языке и применила стили фона, воспользовавшись сокращенной версией, как показано на рисунке 8.14.

Рис. 8.14. Применение свойств фона при помощи сокращений языка CSS

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

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

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

Стало веселее?

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

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

Сайт CSS Zen Garden (http://www.csszengarden.com/) - это фантастическое место, в котором нигде не используются внутристрочные изображения. На этом сайте все потрясающие изображения размещаются на фоне элементов, а управление изображениями осуществляется при помощи методики, описанной в данной главе.

Далее, мы узнаем, как эффективно стилизовать текст. Стилизация текста

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

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

60