<< Пред. стр.

стр. 21
(общее количество: 51)

ОГЛАВЛЕНИЕ

След. стр. >>

ground-attachment.
Используйте стиль background-repeat для управления тем, как будет (и будет ли во-
обще) использоваться мозаичное заполнение для фонового изображения, как показа-
но на рисунке 39.2.
Листинг 39.1. Просмотр исходного кода для рисунка 39.2
<body style="background-image: url(images/ufo.gif);
background-repeat: repeat-y;">




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

Место расположения фонового изображения на странице определите при помощи а г-
рибута background-position, как показано на рисунке 39.3.
Атрибут background-attachment определяет, как фоновое изображение реагирует
на прокрутку. Установите атрибут background-attachment в значение fixed, что
бы фоновое изображение не реагировало на прокрутку; т.е. фоновое изображение ос-
тается привязанным к своему положению в окне браузера. Содержимое страницы мо-
жет прокручиваться, однако фоновое изображение будет находиться на прежнем мес-
те, как показано на рисунке 39.4.
ГЛАВА 39. Использование фоновых изображений на Web-страницах 201




Arriving UFOs:
Startling New Evidence That Th




Рис. 39.3. Перемещайте фоновое изображение по всему экрану,
включив в определение стиля атрибут background-position

Листинг 39.2. Просмотр исходного кода для рисунка 39.3
<body style="background-image: url(images/ufo.gif);
background-repeat: repeat-y;
background-position: right;">



с goes hen Startling new evu
Startling new evidei
Startling new evidence goes h e r
Startling new evidenci
Startling new evidence goes heri

Stardmg new evidence goes here. Startling new evideno
Startling new evidence goes here Startling new evidei
Startimg new evidence goes here. Startling new evidenc
Starthng new evidence goes here. Starting new evidenc

Startling new evidence goi • here. Startimg new evidenc
s
Startling new •vidence g Л here. Startling new evidenc
Startiing new :vidence go> Ш here. Startling new evidenc
Startling new ividence go' ;s here Startling new evidei
is here. Starthng new evidence go>
Startimg new
s here. Starthng new evidence go
Startiing new
Startling new :vidence g :s here. Starthng new evidence
Starthng new evidence g II here.
<

Startling new ividence go here. Startimg new evidence goes here Startling new evidence
Starting new evidence goe s here. Startimg new evidence goes here. Startimg new evidei
Startimg new evidence go s hrre Startling new evidence goes here. Starthng new evidei
Startling new ividence go s here. Startling new evidence goes here. Starthng new evidence



Puc. 39.4. При использовании таблиц CSS можно даже сделать так,
чтобы фоновое изображение не реагировало на прокрутку


Листинг 39.3. Просмотр исходного кода для рисунка 39.4
<body style="background-image: url(images/ufо.gif);
background-repeat: no-repeat;
Строим Web-сайты
202

background-position: right;
background-attachment: fixed;">



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


Чтобы фоновое изображение прокручивалось вместе с остальным содержимым стра-
ницы, установите значение атрибута background-attachment в s c r o l l .
Для удобства программирования в таблице 39.1 перечислены возможности таблиц
CSS, касающиеся фоновых изображений.
Табл. 39.1. Распространенные возможности таблиц CSS
для фоновых изображений

Пример
Стиль Определяет Возможные
значения
background- Как используется background-repeat:
repeat-x,
repeat repeat-y;
и используется ли repeat-y,
вообще мозаич- no-repeat, background-repeat;
ное заполнение repeat repeat;
для изображения

background- Положение фоно- Любая комбинация background-position:
вого изображения следующих значе-
position left;
внутри раздела ний:
background-position
right bottom;
left,right,
center, top, background-position:
bottom center left;
background-position:
center;

background- Как фоновое fixed, scroll background-attachmen
fixed;
изображение реа-
attachment
гирует на про- background-attachmen
крутку scroll;
ЧАСТЬ 4.
Текст

Правильное использование текстовых элементов
Правильное использование элементов фраз
Добавление каскадных таблиц стилей
Замена тегов форматирования каскадными
таблицами стилей
Создание специальных стилей форматирования
Изменение вида текстового элемента
Определение стилей классов
Управление типом шрифта
Управление размером шрифта
БЛОГ: Подведение итогов по заданию размеров
Управление интервалами
Управление стилями с выключкой и без выключки
Управление отступами
Создание списков
Выделение текста цветом
Восстановление горизонтальных линеек
Добавление строки даты и метки времени
Разработка таблиц данных
Использование псевдоэлементов
Определение стилей описания элементов
ГЛАВА 4 0 ,
Правильное использование
текстовых элементов
Практически каждому Web-дизайнеру приходится время от времени делать это: с по-
мощью HTML-тегов размечать текст, основываясь на внешнем виде текста в браузере,
а не на функциональном назначении используемого тега. Необходимо быстро полу-
чить строку полужирного текста? Кто среди нас не поддавался искушению воспользо-
ваться тегом заголовка, даже если рассматриваемый текст не является заголов-
ком? Требуется создать отступ? Этот фокус можно проделать с помощью те] а
< b l o c k q u o t e > , даже когда вам не надо форматировать цитату с отступами.
Теперь, когда каскадные таблицы стилей (CSS — Cascading Style Sheets) поддерживают-
ся на приемлемом уровне большинством браузеров, прежние аргументы о допустц-
мости всего, что работает, уже больше не выдерживают критики. Каскадные таблицы
стилей позволяют придать любому HTML-элементу такой вид, какой хочет получить
дизайнер, поэтому нет необходимости заимствовать тег на основании его внешнего
вида в браузере — это означает, что HTML-теги могут вернуться обратно к своему ис-
ходному назначению: определять структуру документа. Другими словами, когда вы
размечаете что-нибудь тегом заголовка, это действительно должно функциони-
ровать как заголовок на Web-странице. Когда вы размечаете что-нибудь тегом
<blockquote>, это должен быть текстовый блок с отступами, а не изображение, для
которого требуется вставить немного дополнительного пустого пространства.
Если вы достаточно долго разрабатываете Web-сайты, возможно у вас выработались
некоторые вредные привычки, и вы, вероятно, уже забыли, для разметки чего пред-
назначались первоначально текстовые теги HTML. Ознакомьтесь с таблицей 40.1.
Табл. 40.1. Распространенные текстовые теги HTML

Тег Определяет Пример
address Почтовый адрес, номер теле- <address>3flecb располагается ваш
фона, адрес электронной поч- aдpec</address>
ты или другая форма контакт-
ной информации

<blockquote>3flecb располагается
blockquote Цитата с отступами
цитата с OTCTynaMH</blockquote>

<Ь1>Здесь располагается заголо-
hi Заголовок первого уровня
вок/hi >

<Ь2>Здесь располагается заголо
h2 Заголовок второго уровня
вок</Ь2>

h3 Заголовок третьего уровня <ЬЗ>Здесь располагается заголо
ГЛАВА 40. Правильное использование текстовых элементов 205


Определяет
Тег Пример

Заголовок четвертого уровня
h4 <Ь4>Здесь располагается заголо-
вок/h4>
Заголовок пятого уровня <Ь5>Здесь располагается заголо-
h5
вок</Ь5>
Заголовок шестого уровня <Ь6>Здесь располагается заголо-
h6
вок</Ь6>
<р>3десь располагается абзац</р>
Абзац
Р

Внутристрочная цитата <q>3дecь располагается внутри-
q
строчная цитата<7д>



Работа с тегами заголовков
Как показано на рисунке 40.1, язык HTML предоставляет шесть уровней заголовков —
с h i no h6 — в порядке убывания структурной и визуальной важности. Заголовки пер-
вого уровня отображаются полужирным и крупным шрифтом и являются основными
заголовками на первой странице газеты. Заголовки второго уровня не такие крупные
и похожи на дополнительные заголовки или заголовки разделов в газете. Так заголов-
ки изменяются до заголовков шестого уровня, которые похожи на полужирный текст
рубричной рекламы: большей частью по внешнему виду это не заголовок, но, тем не
менее, выполняет функцию заголовка.

tile Edit Sew Favort« Tods цв|р



Heading 1
Heading 2
Heading 3

Heading 4

Headings




Рис. 40.1. В языке HTML определяются шесть уровней заголовков

В размеченном надлежащим образом HTML-документе должны содержаться теги за-
головка для обозначения логической структуры страницы. Это означает, что основ-
ной заголовок Web-страницы должен использовать тег <hl >. Подраздел, расположен-
ный под данным заголовком, оформляется тегом <h2 >; под-подраздел заключается в
тег <h3>, и т. д. В идеале, если удалить повествовательный текст со страницы,
206 Строим Web-сайты

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



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



Добро пожаловать на мой домашний сайт (заголовок 1)
Что находится на моем сайте (заголовок 2)
О странице с играми (заголовок 3)
О странице с новостями (заголовок 3)
О моем интерактивном магазине подарков (заголовок 3)
Информация обо мне (заголовок 2)
Мое резюме (заголовок 3)
Текущее место работы (заголовок 4)
Предыдущее место работы (заголовок 4)
Образование (заголовок 4)
Дипломная работа (заголовок 5)
Университет (заголовок 5)
Мои увлечения (заголовок 3)
Искусство вязания шнурком (заголовок 4)
Излюбленные методы (заголовок 5)
Ссылки на сайты, имеющие отношение к вязанию шнурком (заголовок 5)
Плетение корзин (заголовок 4)
Излюбленные методы (заголовок 5)
Ссылки на сайты, имеющие отношение к плетению корзин (заголовок 5)
Мои контактные данные (заголовок 3)
Почтовый адрес (заголовок 4)
Телефон/факс (заголовок 4)
Адрес электронной почты (заголовок 4)
Помните, что не важно какой эффект оказывают эти теги на вид текста, поскольку
можно использовать каскадные таблицы стилей для придания тексту любых требуе-
мых атрибутов. Важно обеспечить согласованное использование тегов и их соответ-
ствие соглашениям, принятым в HTML.
ГЛАВА 4 0 . Правильное использование текстовых элементов 207


Маркировка абзацев
Тег абзаца является, возможно, самым пренебрегаемым тегом во всем HTML. Кто хо-
чет замедлять производственный процесс и включать эти раздражающие символы
<р> и < /р> в начале и в конце каждого одиночного блока основного текста? Тем не ме-
нее, преимущества дополнительных усилий по вставке этих тегов могут быть исклю-
чительными. Каскадные таблицы стилей обеспечивают широкий диапазон возмож-
ностей по оформлению основного текста, из которых даже самые незначительные су-
щественно улучшают вид текста по сравнению со сжатыми, непривлекательными бло-
ками плохо сверстанных строк, которые выдает HTML (Рис. 40.2). Ключевое условие
надлежащего применения каскадных таблиц стилей — верная разметка документа, а
это означает разметку тегами абзацев всех элементов, которые, как предполагается,
должны быть абзацами текста.


Не Edit Ще« Favortes took «etp


Behold the majestic HTML paragraph. It looks bonng, and that's putting it mildly


Here is another As you can see. the browser automatically inserts a carnage return
between paragraphs




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


использование элементов цитат
В HTML существует два вида тегов для разметки цитат: <quote> и <blockquote>.
Тег <quote> предназначен для внутристрочных цитат, подобных диалогу в повес-
ти, тогда как тегом <blockquote> маркируются выделенные цитаты, как на рисун-
ке 40.3.
Консорциум World Wide Web (W3C) рекомендует указывать язык цитаты в атрибуте
lang тега <quote>, как в следующем примере:
<p>Her l i p trembled. <q l a n g = " e n - u s " > P l a s t i c , < / q > she r e p l i e d , won-
dering even as she s a i d i t if she should have asked for paper.</p>
Строим Web-сайты
208




Her hp trembled "Plasfac," she replied, wondering even as she said it if sr e should have asked for paper Tben
the words of her mentor returned:

Those who ask for plastic, do not ask for paper

"Yes, plastic wiU do fine," she said.




Рис. 40.3. Тег <quote> предназначен для внутристрочных цитат, -
тогда как тег <blockquote> используется для цитат с отступами


Совет
В любом браузере тег <blockquote> не добавляет автоматически
кавычки, и это не предусмотрено спецификациями HTML, поэтому
нет необходимости указывать язык в открывающем теге <Ыоск-
quote>.


Зачем? Предполагается, что браузеры добавляют кавычки автоматически в зависи-
мости от соглашений для выбранного языка. (В разных языках в качестве кавычек ис-
пользуются разные символы и применяются разные правила их расстановки.) Брау-
зер Netscape добавляет кавычки там, где он встречает теги <quote>, но браузер
Internet Explorer этого не делает.



Отображение адреса
Заключите контактную информацию о себе и своей организации в теги <address>,
подобно следующему примеру:
<address>
The Old Software Company<br>
100 Main St. S t e . 500<br> •-
'
Youngstown, O 9212 3
H
</address>
Обратите внимание на теги <Ьг> в конце каждой строки, предназначенные для при-
нудительного возврата каретки. Получаемый результат выглядит, как показано на ри-
сунке 40.4.
ГЛАВА 40. Правильное использование текстовых элементов 209

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


Fie ?* Vie*'/ Favorftes look


The Old Software Company
100 Main St.SU. 500
YoungstoYm, OH92123


<< Пред. стр.

стр. 21
(общее количество: 51)

ОГЛАВЛЕНИЕ

След. стр. >>