Синтаксис таблицы стилей.

Таблицы стилей строятся в соответствии с определенным порядком (синтаксисом), в противном случае они не могут нормально работать.

Синтаксис всех методов, используемых для применения стилей к документа HTML, практически одинаков. Таблицы стилей составляются из определенных частей. Эти части включают следующие элементы:

Указатель (Selector). Указатель является элементом, к которому будут применяться назначаемые вами атрибуты. Это может быть просто тег типа заголовка (H1) или абзаца (Р). Таблицы стилей позволяют использовать различные объекты, включая классы, которые будут кратко обсуждаться далее.

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

Значение (Value). Значения определяют свойства. Предположим, что у вас есть заголовок первого уровня H1(указатель) и вы включаете свойство type family (семейство шрифта). Шрифт, который на самом деле будет применен к указанному фрагменту, задается значением этого свойства.

Описание (Declaration). Свойства и значения объединяются, образуя описание.

Строка (Rule). Указатель и описание образуют строку

Организация веб-страницы.

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

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

Вот некоторые советы.

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

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

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

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

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

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

Газетное оформление предполагает использование заголовков, подзаголовков, боковых колонок, а изображения обычно обтекаются текстом. Все это делается для того, чтобы разместить как можно больше "информации на ограниченном пространстве. Вы можете привести к подобному виду свою веб-страницу с использованием XHTML (рис. 2.2). Подобный газетный вид страниц, правда, встречается в Интернете довольно редко. Но среди них — официальные сайты крупных изданий, таких как, например, New York Times (http://nytimescom/). При таком оформлении гиперссылки указывают на более подробное изложение новостей.

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

Изображения и мультимедиа

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

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

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

ПРИМЕЧАНИЕ

При экспортировании изображения вы сохраняете его в новом файловом формате. Пока что большинство браузеров не могут отображать, например, родные форматы Excel, поэтому нужно экспортировать таблицы и графики в JPEG или GIF Это делается обычно с помощью специальной команды приложения (зачастую Файл > Экспорт).

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

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

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

ПРИМЕЧАНИЕ

Существует еще одна небольшая проблема с мультимедиа, которую мы подробнее опишем в главе 13, «Добавление мультимедийных элементов и Java-приложений». Чтобы иметь возможность просматривать различные мультимедийные приложения, необходимо установить определенное дополнительное программное обеспечение.

Это означает, что мультимедиа следует использовать только в тех случаях, когда это жизненно важно для передачи информации. Ну, или если весь сайт посвящен мультимедийным элементам, которые с него обычно и скачивают (В рунете это, например, http://www.mult.ru с мультиками про Масяню или http://www.bards.ru, где можно найти записи бардов в формате трЗ). В общем случае нужно стараться делать так, чтобы пользователь мог выбрать, хочет он скачивать мультимедиа-содержимое или нет. Просмотр элементов мультимедиа является привилегией пользователей с большой пропускной способностью канала.

ПРИМЕЧАНИЕ

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

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