Pervyiurok.ru


Видеокурсы, видео уроки, аудио, книги...

К учебнику по созданию Web-страниц

"Все Технические Моменты Сайтостроения в Видеоформате". Коллекция видеокурсов, которая за 36 часов и 45 минут сделает из Вас профессионала во всех технических моментах создания сайта.



Реклама:


Глава 14. Стили сайтов: разработка, доступность и глобализация

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

Речь пойдет и о спецификациях: CSS, а также HTML и XHTML в специальных применениях (в частности, с голосовыми браузерами). Если вы хотите создать полноценный стиль сайта, нужно задуматься о том, чтобы он включал в себя и элементы, необходимые для людей с ограниченными возможностями.

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

Эта глава содержит следующие разделы:

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

Стили сайтов

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

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

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

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

Базовый сайт

Начнем с создания «рыбы», то есть базового сайта, оформление которого будем впоследствии изменять. Предположим, что он уже существует. Цель нашего при мера — изменить его оформление при помощи таблиц стилей. До того как мы взялись за него, он представлял собой невообразимую смесь из визуальных элемен тов и атрибутов, что приводило к тому, что впечатления целостности сайта не возникало (рис. 14.1).

Рис. 14.1. «Сырой» сайт, над которым нам предстоит работать

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

Рассмотрим пример части кода HTML, описывающей одну из страниц:

 <head> 
<titlе>Пример без стилей</titlе>
</head>
<body>
<hr width="50%" />
<h2><font face="arial. helvet1ca">0т редактора...</font></h2>
<h4><font face="times. times new roman" size="+l">Прощай,
малышка!</font></h4>
<blockquote>
<p><font face="times. times new roman"><b>Привет
Bceм</b></font></p>

<pxfont face="times, times new romman">Как это обычно
бывает среди пишущей братии? Их жизнь состоит не из
поступков, а из впечатлений. Они заводят отношения,
поддерживают и разрывают их только для того,
чтобы прочувствовать сюжеты своих будущих книг.</font></p>
<pxfont face="times. times new готап">Я не могу сказать,
что поддерживаю это болезненное стремление пренебречь
всем, кроме чистого искусства. </font></p>
<р><а href="letter.html ">Продолжение колонки редактора...</а></р>
</blockquote>
<hr width=-"50% />
</body>

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

Рис. 14.2. Вот как этот отрывок выглядит в браузере

Разработка стилей

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

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

  • Если вы предполагаете использовать элемент <hr> с параметром widtn="50%" до статочно часто, можно для начала внести в таблицу его: hr {width: 50%}. Это означает то же самое, что и <hr width="50%>.
  • Давайте оформим все заголовки шрифтом Arial, Helvetica или Sans Serif: h1i, h2, h.3, h4, h.5, h.6 {font-family: Arial, Helvetica, Sans Serif}.
  • В оригинале элемент <h2> выступал в качестве первого заголовка. Так посту пать не рекомендуется, а в примере, видимо, пытались сделать шрифт заголовка чуть поменьше за счет замены <hl> на <h2>. Но в таблице стилей мы можем просто переопределить <hl>, если не хотим видеть на сайте большие заголовки: h1 {font-size: 18pt}.
  • Опять же, в оригинале сразу после заголовка второго уровня (<h2>) следовал заголовок четвертого уровня (<h4>). Это, разумеется, тоже не лучший вариант, но <п4> здесь работает не заголовком, а подзаголовком. Давайте мы определим подзаголовок отдельно: р.subhead {font-family: Times, Times New Roman, Serif; font-size: 16pt: color: blue}.
  • Теперь определим абзац с отступом, чтобы избежать использования элемента <blockquote>. Это мы сделаем следующим образом: font-size: 12pt: margin-left: 50px; margin-right: 50px}.

Даже после этих действий у нас уже вырисовывается некоторая таблица стилей:

hr {width: 50%}
h1. h2. h3. h4. h5. h6 {font-family: Anal. Helvetica. Sans Serif}
h1 {font-size: 18pt}
p.subhead {font-family: Times. Times New Roman.
Serif: font-size: 16pt: font-weight: bold} I
p.indent {font-family: Times. Times New Roman.
Serif: font-size: 12pt: margin-left: 50px;
margin-right: 50px}

Будем исходить из предположения, что все контейнеры <р> оформляются шрифтами Times или Times New Roman размером 12 пунктов. Мы можем определите это для себя, а затем применять принцип наследования в таблицах стилей. При этом нам нужно будет только добавлять новые свойства уже имеющихся стилей.

ПРИМЕЧАНИЕ

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

Итак, теперь наша таблица стилей выглядит следующим образом:

hr {width: 50%}
h1 h2. h3. h4. h5. h6 {font-family: Arial. Helvetica. Sans Serif}
h1 (font-size: 18pt }
p {font-family: Times. Times New Roman.
Serif: font-size: 12pt}
p.subhead {font-size: 16pt: font-weight: bold} p.indent
{margin-left: 50px: margin-right: 50px}

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

Сохраните таблицу стилей под именем default.css и поместите этот файл в каталог с .html-файлами вашего сайта. Последующий код приведет к результатам, показанным на рис. 14.3.

<head>
<title>Пример таблицы стилей</title>
<link rel="stylesheet" href="default.css" />
</head>

<body>
<hr />
<h1>0т редактора...</h1>
<p class="subhead">Прощай, малышка</p>
<p class="indent"><b>Привет всем</b></р>
<p class="indent">Kaк это обычно бывает среди пишущей
братии? Их жизнь состоит не из поступков, а из впечатлений.
Они заводят отношения, поддерживают и разрывают
их только для того, чтобы прочувствовать сюжеты своих
будущих книг. </р>
<р class="indent">Я не могу сказать, что поддерживаю это
болезненное стремление пренебречь всем, кроме
чистого искусства. Ибо оно теряется в нечестных поступках,
перестает быть чистым, а иногда и вовсе перестает
быть искусством.</р>
<р class="indent"><a href="letter.html">Пpoдoлжeниe
колонки редактора...</а></р>
<hr />
</body>

Рис. 14.3. Та же страница, но с применением таблицы стилей

Посмотрим на результат. На рисунке видно, что оформление почти не изменилось по сравнению с первоначальным вариантом, зато код стал значительно «чище». Уб раны стоявшие не на своем месте элементы типа <h4> и <blockquote>. А если страницу просматривать с помощью какого-нибудь необычного браузера, то она останется вполне читабельной. Проделано всего несколько шагов, которые позволили нам немного «подчистить» оформление и дали возможность более эффективно обновлять страницы и сайт в целом. Впрочем, думаю, вы увидели, что рис. 14.3 практически не отличается от рис. 14.2 — вся разница заключается только в исходном коде.

Мощь таблиц стилей

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

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

a: hover {color: yellow: background-color: blue}
indent (margin-left: lOOpx: margin-right: 1OOpx;
padding-left: lOpx: padding-right: Юрх:
background-color: ffccff}
hr {width: 50*}
h1. h2. h3. h4. h5. h6
{font-family: Anal, Helvetica.
Sans Serif: font-variant: small-caps)
p {font-family: Times.
Times New Roman. Serif: font-size: 12pt}
p.subhead
{font-family: Courier, Courier New.
Monaco: font-size: 16pt; color: blue}

Внеся указанные изменения, сохраните таблицу стилей в файле default.css. Сейчас мы увидим, как похорошеет наша страница. Для этого 'воспользуемся элементом <div class="indent"> (так делается из-за того, что класс indent был определен без указания какого-либо конкретного элемента). Что это даст? Мы сможем распространить стиль на все имеющиеся абзацы с отступом. Попробуем немного поэкс периментировать с оформлением страницы (рис. 14.4). Рассмотрим окончатель ный вариант:

<head>
<title>Пример таблицы стилей</title>
<link rel="stylesheet" href="default.css" />
</head>
<body>
<hr/>
<h1>OT редактора...</h1>
<div class="indent">
<p class="subhead">Прощай, малышка!</р>
<р><b>Привет всем</b></р>

<р>Как зто обычно бывает среди пишущей братии? Их жизнь состоит не из поступков, а из впечатлений. Они заводят отношения,
поддерживают и разрывают их только для того, чтобы
прочувствовать сюжеты своих будущих книг.</р>
<р>Я не ногу сказать, что поддерживаю это болезненное стремление пренебречь всем ради чистого искусства. Ибо оно теряется
в нечестных поступках, перестает быть чистым
вовсе перестает быть искусством.</р>
<р><а href="letter.html">Продолжение колонки редактора...</а></р>
</div>
<hr/>
</body>

Рис. 14.4. Страница после некоторых экспериментов

Не следует забывать о чувстве меры. Знаете, о чем гласит один из законов Мерфи? «Чем дольше дизайнер возится с оформлением кнопок телевизора, тем уродливей они получаются». И все же невозможно не восхититься возможностями таблиц стилей, позволяющими изменять оформление целого сайта, не открывая ни одной его страницы.

Таблицы стилей и доступность

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

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

ПРИМЕЧАНИЕ

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

Таблица 14.1. Речевые элементы CSS2

Свойство Значения Описание
azimuth left, center-left, center, center-right, right или угол (от -360° до 360°) Позволяет задать угол, под которым находится воображаемый источник звука относительно слушателя

cue-after
url Проигрывает звуковой файл, расположенный по указанному URL, после прочтения текста
cue-before url Проигрывает звуковой файл, расположенный по указанному URL, до прочтения текста
elevation below, level, above или значение угла (от -90° до 90°) Угол в вертикальной плоскости, под которым расположен воображаемый источник звука
pause-after секунды или миллисекунды Пауза после проговаривания элемента
pause-before секунды или миллисекунды Пауза перед проговариванием элемента
pause секунды или миллисекунды Пауза до и после проговаривания элемента
pitch low, medium, high или частота (Гц) Высота звучания голоса

pitch-range
0, 50 или другое число Величина колебания частот: 0 — монотонно, 50 — нормально
play-during url Адрес звукового файла для фонового
воспроизведения
speak none, normal, spell-out Манера произношения
speak-numeral digits, continuous Манера произнесения числительных: цифра за цифрой либо все число сразу
speak-punctuation и т. д.) none, code Значение «code» означает, что все знаки пунктуации нужно называть («точка», «запятая»
speak-rate
slow, medium, fast, число слов в минуту Скорость речи
voice-family male, female, Zervox, Princess, child «Чьим» голосом говорить (как и шрифты, голоса должны быть установлены на компьютере пользователя)
volume silent, soft, medium, loud Громкость

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

 h1 {volume: loud; voice-family:
Princess: pause: 1: speak-numerals: digits}
p {volume: loud: voice-family:
male: speak-punctuation: none}

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

Свойства azimuth, elevation и pitch — это уже какая-то эзотерика, но, в принципе, они позволяют настроить звучание, расположив мнимый источник звука в пространстве и задав высоту его звучания. Можно сделать так, чтобы, например, заголовки и обычный текст звучали из «разных углов» помещения.

ПРИМЕЧАНИЕ

Было бы неплохо иметь речевой браузер, чтобы все это проверить, не так ли? Стандарт еще очень молод, я надеюсь на скорый выход обновлений, и все-таки хочется привести хотя бы один пример такого браузера. Ищите его на сайте http://www.cast.org/bobby/.

Глобализация

Еще один шаг, который нужно сделать в процессе планирования сайта, — это определить, какие национальные языки он будет поддерживать. Для этого в стандарте XHTML существует даже специальный атрибут lang, элемент <q>, а также специальные команды, касающиеся таблиц и блоков текста.

Атрибут lang и элемент <q>

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

 <р lаnd="ru">Этот абзац написан по-русски.</р>

Зачем он нужен? Неужели и так непонятно, на каком языке что написано на странице? Ну, во-первых, это не всегда очевидно, но не в этом дело. Атрибут lang позволяет браузеру принять решение о том, как отображать элемент, как его произносить (если браузер речевой), он также помогает поисковым системам в классификации сайтов. По умолчанию язык, на котором написана страница, является частью определения XML, которое пишется в начале кода. Это уже обсуждалось в главе 4. Так что если lang встречается где-то посередине страницы, значит, временно изменился ее язык.

Вот некоторые двухбуквенные обозначения языков: а г означает арабский, de — немецкий, es — испанский, fr — французский, he — иврит, hi — хинди, It — итальянский, ja — японский, nl — голландский, pt — португальский, ги — русский, sа — санскрит и ch — китайский.

Атрибут lang может использоваться с элементом <q>, если цитата приводится на иностранном языке:

<p><q lang="en">I can't believe she said that</q>.
- сказал Филипп.</р> <p><q lang="es">
Si. es verdad</q>, - ответила Мария.</р>

Таблицы и направление текста

Интересно отметить тот факт, что внутри таблицы, да и во многих других нужных местах, можно задать направление текста. Для этого используется атрибут di r. Например:

<р dir="rtl">3TOT текст будет написан справа налево, 
а не слева направо</р>

Атрибут di г может быть включен в элементы <tr> или <td>, тогда в строке или ячейке
изменится направление текста. Эта возможность особенно часто используется при написании текста на таких языках, в которых принято писать справа налево (например, на иврите).

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

Резюме

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

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


Реклама: