| Содержимое раздела: |
|---|
Web дизайн\Учебник по HTMLГлава 14. Стили сайтов: разработка, доступность и глобализацияВ этой главе мы подробно обсудим вопросы, связанные с концепцией таблиц стилей. Рассмотрим их некоторые дополнительные свойства, предоставляющие возможность изменять вид элементов таблиц. Речь пойдет и о спецификациях: CSS, а также HTML и XHTML в специальных применениях (в частности, с голосовыми браузерами). Если вы хотите создать полноценный стиль сайта, нужно задуматься о том, чтобы он включал в себя и элементы, необходимые для людей с ограниченными возможностями. Наконец, мы обсудим и некоторые проблемы, связанные с глобализацией, то есть созданием универсальных разработок для нескольких национальных языков. Эта глава содержит следующие разделы:
Идея использования таблиц стилей уже была затронута в главе 10, однако полностью мы ее не исследовали. Если вы приступаете к созданию собственного сайта и вы стремитесь придать ему профессиональный внешний вид, то я рекомендую вам начать с разработки единого стиля всего сайта. Тогда и структура текста будет ясна, и изменить оформление будет гораздо проще. Если вы потратите время до начала написания сайта на создание продуманного стиля, это избавит вас от многих проблем в будущем. Если у вас уже есть сайт, над которым вы работаете, к нему запросто можно добавить таблицу стилей. Зачем нужны элементы разметки типа <font> и ему подобные, когда с помощью таблицы стилей можно добиться единообразия как всех заголовков одного уровня, так и обычного текста? К тому же если вам придется когда-нибудь возвращаться к редактированию сайта, то гораздо проще будет разобраться в одном файле, содержащем стили, чем в нескольких десятках страниц, составляющих тело сайта. Как только вы определились с тем, что вы хотите включить в таблицу стилей, вы создаете один-единственный документ, в котором содержится все, что касается оформления целого сайта. С этим документом связываются все страницы при помощи элемента <style>. В этом разделе мы обсудим, как применение таблицы стилей может изменить внешний вид всего веб-узла. Начнем с создания «рыбы», то есть базового сайта, оформление которого будем впоследствии изменять. Предположим, что он уже существует. Цель нашего при мера — изменить его оформление при помощи таблиц стилей. До того как мы взялись за него, он представлял собой невообразимую смесь из визуальных элемен тов и атрибутов, что приводило к тому, что впечатления целостности сайта не возникало (рис. 14.1).
Рис. 14.1. «Сырой» сайт, над которым нам предстоит работать Мы попытаемся, затратив минимум усилий, придать сайту единообразный вид. Затем мы узнаем, как построить страницы таким образом, чтобы небольшие изме нения в таблице стилей приводили, например, к изменению всех заголовков. Не открывая в редакторе сами страницы! Все изменения будут производиться автоматически, поскольку имеется связь с таблицей стилей. Рассмотрим пример части кода HTML, описывающей одну из страниц: <head> Как видите, оформление страницы в виде HTML-кода не отличается стройностью и четкостью. Конечно, в браузере все это выглядит не так уж страшно (рис. 14.2). (На самом деле, я немного подумал и решил все-таки чуть-чуть «причесать» код, сделав все буквы в названиях элементов строчными, а ведь они были заглавными.) Первое, что хочется сделать с кодом, — это убрать повторения и длинные описания оформления чуть ли не каждого элемента. Вот здесь-то нам и пригодятся таблицы стилей.
Рис. 14.2. Вот как этот отрывок выглядит в браузере Написание таблицы стилей для веб-узла требует некоторых предварительных размышлений, поскольку нужно хорошо представлять, какие элементы оформления могут потребоваться и как они должны выглядеть. Кроме того, следует осознать, сколько разных стилей могут описывать один и тот же элемент. Например, может возникнуть потребность переопределять элемент <р> раз пять или шесть. Впрочем, как вы, наверное, догадываетесь, в процессе работы можно добавлять стили. Если мы боремся за то, чтобы код веб-страниц был как можно проще, значит, мы допускаем усложнение кода таблицы стилей. Это действительно взаимосвязанные вещи. Взглянем теперь на последний пример. Думаю, не нужно долго объяснять, какие именно элементы просятся быть записями таблицы стилей. Рассмотрим процесс замены.
hr {width: 50%}
Будем исходить из предположения, что все контейнеры <р> оформляются шрифтами Times или Times New Roman размером 12 пунктов. Мы можем определите это для себя, а затем применять принцип наследования в таблицах стилей. При этом нам нужно будет только добавлять новые свойства уже имеющихся стилей. ПРИМЕЧАНИЕ Наследование означает, что после того, как в таблице стилей определен какой-либо элемент, все последовательно определяемые стили его классов будут добавляться к базовому. Например, если вы определяете, что текст абзаца должен оформляться 24 кеглем, а затем определяете производный класс «абзац красного цвета», то шрифт, хоть и будет красным, не изменит своего размера, то есть его величина останется равной 24 пунктам. Правда, можно отказаться от базового определения, то есть в производном классе определить стиль, противоречащий базовому. Итак, теперь наша таблица стилей выглядит следующим образом: hr {width: 50%}
Обратите внимание на то, как легко читаются стили. Вначале определяется главный элемент, <р>, затем последовательно описываются классы, каждый из которых использует базовое определение и добавляет что-то свое. Сохраните таблицу стилей под именем default.css и поместите этот файл в каталог с .html-файлами вашего сайта. Последующий код приведет к результатам, показанным на рис. 14.3.
<head>Рис. 14.3. Та же страница, но с применением таблицы стилей Посмотрим на результат. На рисунке видно, что оформление почти не изменилось по сравнению с первоначальным вариантом, зато код стал значительно «чище». Уб раны стоявшие не на своем месте элементы типа <h4> и <blockquote>. А если страницу просматривать с помощью какого-нибудь необычного браузера, то она останется вполне читабельной. Проделано всего несколько шагов, которые позволили нам немного «подчистить» оформление и дали возможность более эффективно обновлять страницы и сайт в целом. Впрочем, думаю, вы увидели, что рис. 14.3 практически не отличается от рис. 14.2 — вся разница заключается только в исходном коде. Вы увидели, как легко таблицы стилей работают с веб-страницами, однако главное их достоинство состоит в том, что одни и те же определения могут распростра пяться на целый сайт. Описав несколько главных элементов и создав для каждого : из них некоторое количество классов, вы создадите прозрачный и соответствующий всем стандартам XHTML-код. Кроме того, можно создать несколько таблиц стилей для одного и того же веб-узла и переключаться между ними при помои элементов <link />. Таблицы стилей предоставляют широкое поле для экспериментов. Произведя несколько изменений в одном файле, вы увидите, как весь сайт начнет выглядеть по другому. Внимательно посмотрите на код, приведенный далее, и попробуйте по нять, в чем заключаются отличия от предыдущего варианта: a: hover {color: yellow: background-color: blue}
Внеся указанные изменения, сохраните таблицу стилей в файле default.css. Сейчас мы увидим, как похорошеет наша страница. Для этого 'воспользуемся элементом <div class="indent"> (так делается из-за того, что класс indent был определен без указания какого-либо конкретного элемента). Что это даст? Мы сможем распространить стиль на все имеющиеся абзацы с отступом. Попробуем немного поэкс периментировать с оформлением страницы (рис. 14.4). Рассмотрим окончатель ный вариант: <head> Рис. 14.4. Страница после некоторых экспериментов Не следует забывать о чувстве меры. Знаете, о чем гласит один из законов Мерфи? «Чем дольше дизайнер возится с оформлением кнопок телевизора, тем уродливей они получаются». И все же невозможно не восхититься возможностями таблиц стилей, позволяющими изменять оформление целого сайта, не открывая ни одной его страницы. Если вы ориентируетесь на аудиторию с ограниченными возможностями, например с плохим зрением, или просто хотите сделать сайт универсальным, следует учитывать специфику этой проблемы. В частности, полезно ознакомиться со стандартом CSS2, в котором описаны элементы, рассчитанные на речевые браузеры. Если вы уже знакомы с этими дополнительными элементами, то присоединить их к своей странице не составит для вас особого труда. Итак, обратимся к речевым возможностям CSS2. В таблице 14.1 показаны многие элементы, реализующие их. ПРИМЕЧАНИЕ Как я уже отмечал в главе 10, CSS2 отличается от спецификации CSS1 исключительно дополнительными элементами. Кроме речевых возможностей, CSS2 включает в себя элементы оформления таблиц. Позиционирование с помощью CSS обсуждается в главе 19. Таблица 14.1. Речевые элементы CSS2
Эти свойства можно использовать внутри определения стиля точно так же, как любые другие. Например: h1 {volume: loud; voice-family:
Примечательно, что большинство этих свойств действительно напоминают традиционные. Например, voice-family — это аналог font-family. Как и шрифт, звук голоса (в специальном формате) должен присутствовать на компьютере клиента. Конкретное значение этого свойства позволяет выбрать семейство голосов. Свойства azimuth, elevation и pitch — это уже какая-то эзотерика, но, в принципе, они позволяют настроить звучание, расположив мнимый источник звука в пространстве и задав высоту его звучания. Можно сделать так, чтобы, например, заголовки и обычный текст звучали из «разных углов» помещения. ПРИМЕЧАНИЕ Было бы неплохо иметь речевой браузер, чтобы все это проверить, не так ли? Стандарт еще очень молод, я надеюсь на скорый выход обновлений, и все-таки хочется привести хотя бы один пример такого браузера. Ищите его на сайте http://www.cast.org/bobby/. Еще один шаг, который нужно сделать в процессе планирования сайта, — это определить, какие национальные языки он будет поддерживать. Для этого в стандарте XHTML существует даже специальный атрибут 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>. Интересно отметить тот факт, что внутри таблицы, да и во многих других нужных местах, можно задать направление текста. Для этого используется атрибут di r. Например: <р dir="rtl">3TOT текст будет написан справа налево, Атрибут di г может быть включен в элементы <tr> или <td>,
тогда в строке или ячейке Следует помнить, что в разных браузерах результат применения этого атрибута будет разный. Он реализован далеко не во всех браузерах, даже современных. В этой главе мы обсудили применение таблиц стилей для решения проблемы оформления целых веб-узлов. Мы рассмотрели основные преимущества подхода, основанного на их применении. Дело в том, что таблица стилей помогает придать сайту единый, цельный вид, а код становится более понятным и прозрачным. Можно избежать применения некоторых элементов, которые либо находились не на своем месте, либо вообще уже вышли из употребления. Мы немного поэкспериментировали с оформлением, и вы, вероятно, убедились в том, что это вовсе не сложно — достаточно изменить пару-тройку строк в таблице стилей. Затем мы обсудили речевые возможности стандарта CSS2, позволяющие людям с ограниченным зрением прослушивать содержимое веб-страниц. В конце главы вы увидели элементы и атрибуты, относящиеся к национальным языкам, на которых написаны страницы или их части. В следующей главе мы обратимся к элементам, предназначенным для создания интерактивных форм на веб-страницах. Мы обсудим поля ввода, выпадающие меню и т. п. Все они призваны обеспечить более тесное взаимодействие с пользователями. |
| Главные новости: |
|---|
®Abifost,
2006. Копирование информации сайта разрешается только с указанием ссылки на
этот сайт. 