<< Пред. стр.

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

ОГЛАВЛЕНИЕ

След. стр. >>

style="background-color: #FFFF00;">This sentence is highlight-
ed. </span> This sentence is not highlighted.</p>
282 Строим Web-сайты

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


Совет
КТО говорит, что выделение должно быть желтым? Попробуйте ис-
пользовать другие цвета: зеленовато-голубой (#OOFFFF), ярко розо-
вый (#FF0099), серый (#СССССС) или бледно-зеленый (#99FF00).
Чтобы привлечь еще большее внимание к выделенному тексту, до-
бавьте в определение стиля следующую строку кода:
font-weight: bold;
С добавлением данного кода текст внутри выделенной области при-
обретет полужирное начертание.


Правило стиля для выделения желтым цветом
Инструментарий
Краткое правило стиля в этом инструментарии предоставляет
желтое выделение для применения к любому тексту на Web-стра-
нице. Правило создает класс, именуемый highlight. Чтобы выде-
лить весь текстовый элемент, задайте для атрибута c l a s s в те-
ге элемента значение h i g h l i g h t :
<р class="highlight">3flecb содержится текст.

Чтобы выделить строку текста внутри элемента, разметьте стро-
ку с помощью тегов <span> и задайте для атрибута c l a s s в теге
<span> значение h i g h l i g h t :

<р>3десь содержится текст. <span c l a s s = " h i g h -
light">3flecb содержится выделенный текст.</span>
Здесь содержится текст</р>
Поместите это правило между тегами <style> в разделе заго
ловка своей Web-страницы или скопируйте правило как есть, и
сохраните во внешнем CSS-файле.
.highlight {
background-color: #FFFF00;
ГЛАВА 5 4 .
Реабилитация горизонтальных линий
ОДНИМ ИЗ наиболее полезных, но наименее часто используемых элементов во всем
HTML является скромная горизонтальная линия. Ее цель проста, но почетна: созда-
ние визуальной разделяющей линии между разделами Web-страницы.
Наилучшее свойство этого элемента — это то, что линия является встроенной графи-
кой. Браузер генерирует ее самостоятельно. Посетителям Web-сайта не надо загру-
жать ее, что уменьшает общее время загрузки графики и улучшает производитель-
ность Web-сайта.
Одна из проблем, присущих горизонтальной линии, состоит в том, что готовая линия
слишком длинна, неизящна и вызывающа, как можно заметить на рисунке 54.1. Больши-
нство Web-дизайнеров предпочли бы разделить разделы на своих Web-страницах с по-
мощью элегантного пустого пространства, не прибегая к этой безобразной линии. Од-
нако если потратить некоторое время на настройку ее атрибутов, можно создать ряд
действительно классных эффектов, примеры которых приведены на рисунке 54.2.




One Section of the Page
Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah Ы»Ь blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah




Another Section of the Page
Blah blah blah blah blah blah blah blah blah blah blah blab blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah



1 Ж К ILIKK | Ц И К |LINK | Ш К




Рис. 54.1. Неизменяемая горизонтальная линия,
созданная средствами HTML, имеет несколько неэстетичный вид

В таблице 54.1 приведены атрибуты HTML для тега <hr>, с помощью которого брау-
зером генерируются горизонтальные линии. У пользователя имеется возможность из-
менять большую часть этих атрибутов, чтобы сделать вид горизонтальных линий бо-
лее привлекательным.
В первую очередь следует избавиться от эффекта теней, используемого по умолча-
нию, из-за которого большей частью горизонтальная линия выглядит нелепо:
<hr noshade>
У атрибута nosh^de отсутствуют значения. Этот атрибут или присутствует в теге
<hr>, или его там нет.
Строим Web-сайты
284




One Section of the Page
Blah blah blah biah blah blah blah biah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah ^ blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah' >lah




Another Section of the Page
Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah slah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah




iiOi | УШ | in3: i;ii:n: | щ к




Рис. 54.2. Внеся небольшие изменения в атрибуты линии,
можно существенно улучшить ее вид

Табл. 54.1. HTML-атрибуты для горизонтальных линий

Атрибут Управляемый Возможные Примеры
элемент значения
align <hr a l i g n = " l e f t " >
Горизонтальное поло- left,right,
<hr a l i g n = " c e n t e r " >
жение элемента center
noshade <hr noshade>
Отключение объемно- Нет значений
го эффекта тени для го-
ризонтальной линии
size Любое числово е зна- <hr size="10">
Толщина элемента в
пикселах чение
width Размер элемента в пик- Любое числово е зна- <hr width="50">
селах по горизонтали чение, включая про- <hr width="33%">
центы

Далее, чтобы сделать вид горизонтальной линии более утонченным, уменьшите ее
толщину. По умолчанию толщина линии в Internet Explorer составляет 2 пиксела и 3 пик-
села в Netscape. Задавая значение атрибута s i z e равным 1, вы не только стандартизу-
ете вид элемента в браузерах, но и повышаете эффективность линии. Более тонкая
линия лучше выглядит; вряд ли требуется, чтобы горизонтальная линия привлекала к
себе слишком большое внимание. Таким образом:
<hr noshade size="l">
К том)' же стандартная горизонтальная линия слишком длинна. По умолчанию она
простирается на всю ширину страницы или ширину элемента контейнера, в котором
находится, как, например, в ячейке таблицы или в разделе каскадных таблиц стилей
div. Укороченные горизонтальные линии лучше подходят для большинства случаев.
Они вводят дополнительное пустое пространство в макет страницы, что помогает
создать более «воздушный» дизайн.
Некоторые дизайнеры предпочитают задать точные значения в пикселах для шири-
ны горизонтальной линии, подобно следующему примеру:
ГЛАВА 54. Реабилитация горизонтальных линий 285


<hr noshade s i z e = " l " width="200">
Точная величина зависит от ширины области, которую занимает горизонтальная ли-
ния. Если работа ведется с макетом фиксированной ширины, тогда, вероятно, такой
способ задания размера будет представлять наилучший вариант. Однако если макет
отличается плавающими размерами, которые зависят от размера окна браузера, гори-
зонтальная линия фиксированной ширины может не подойти. Она будет выглядеть
нормально в развернутом окне браузера, но может смотреться слишком большой в не-
развернутом полностью окне браузера. f




Совет
Цвет горизонтальных линий можно изменять с помощью каскадных
таблиц стилей, но браузеры для этого используют разные атрибуты
каскадных таблиц стилей. В Internet Explorer поддерживается атрибут
color, тогда как в Netscape применяется атрибут background-
color. Если задать атрибут color в Internet Explorer, то при просмот-
ре в Netscape с цветом линии ничего не происходит, и наоборот, если
задать атрибут background-color в Netscape, при просмотре в
Internet Explorer цвет линейки остается прежним.

Возможным решением этой проблемы является задание обоих атри-
бутов в определении стиля:
hr {
color: #FFOOOO; /* для Internet Explorer */
background-color: #FFOOOO; /* для Netscape */




Совет
Еще один классный эффект можно получить, задавая для высоты го-
ризонтальной линии умеренное значение, например, 4 или 5 пиксе-
лов, и убирая атрибут noshade. В результате получается пустой пря-
моугольник.


Чтобы устранить эту проблему, задайте плавающие размеры и для горизонтальной ли-
нии, указав ее ширину в процентах:
<hr noshade s i z e = " l " width="20%">
При значении в 20% ширина линии масштабируется до 20% ширины области, кото-
рую она занимает. Таким образом, если горизонтальная линия находится в ячейке таб-
лицы шириной 600 пикселов, то ее ширина будет равна 120 пикселам или 20% от 600.
По умолчанию браузер центрирует горизонтальные линии — это незаметно, посколь-
ку данный элемент автоматически простирается на всю ширину. Центрирование ста-
новится заметным при укорачивании ширины линии. Можете оставить ее центриро-
вание, но многие дизайнеры предпочитают располагать линию слева или справа:
<hr noshade size="l" width="20%" align="left">
Точно такие атрибуты заданы для горизонтальных линий, показанных на рисунке 54.2.
Строим Web-сайты
286


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


Определение
Знак конца (end sign)) — это маркер ИЛИ типографский знак, который
отображается в конце рассказа или статьи. Он также служит пророче •
ством о том, что грядет Армагеддон.




One Section of the Page
Blah bUh blah blah blah Hah blah blah blah blah blah blah blah blah olah blah blah blah blah
Hah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah bUh blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blab blah Hah blah blah blah blah I .lah blah blah blah blah
blah blah blah




Another Section of the Page
Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah Hah blah blah blah blab
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blab blah blah blah blah blah Hah blah blah blah blah blah Hah Hah blah Hah blah
blah blah Hah




kttffi IШКI ffiS I L 4 3 I I И



Puc. 54.3. Создайте сплошной или пустой прямоугольник с помощью
горизонтальных линий. (Отступы в абзацах получены с помощью
атрибута margin-left каскадных таблиц стилей.)

Чтобы создать квадрат, задайте одинаковые значения для атрибутов width и s i z e го-
ризонтальной линии:
<hr size="10" width="10">
Укажите атрибут noshade для получения сплошного квадрата или оставьте атрибут
noshade, чтобы получить незакрашенный квадрат. Обратите внимание, что на рисун-
ке 54.3 пустой квадрат выглядит как флажок из-за объемного эффекта тени, так что не
забывайте об этом. По этой причине, вероятно, лучше использовать в качестве знаков
конца окрашенные сплошным цветом квадратики.


Совет
Сплошные прямоугольники, получаемые из горизонтальной линии,
выглядят в Netscape с закругленными углами, тогда как пустые прямо-
угольники отображаются с обычными углами. Учитывайте это.
ГЛАВА 55.
Добавление строки даты и метки Времени
Строка даты — это фрагмент текста, сообщающий текущую дату и обычно отобража-
емый вверху страницы. Точно также, метка времени — это фрагмент текста, сообща-
ющий текущее время и чаще всего отображаемый внизу страницы. Оба элемента удоб-
ны для придания ощущения частого обновления Web-страницы. Ничто так не радует
посетителей, как посещение часто обновляемого, со свежими данными Web-сайта. Да-
же если вы обновляете содержимое Web-сайта от случая к случаю, вид текущей даты и
текущего времени помогает создать постоянное ощущение новизны.


Определение
Строка даты (dateline) — фрагмент текста, сообщающий текущую да-
ту. Метка времени (timestamp) — фрагмент текста, сообщающий те-
кущее время.


Вы можете самостоятельно вставлять строку даты и метку времени с помощью ряда
простых функций JavaScript. Полные сведения об этом приводятся в разделе «Инстру-
ментарий».

Генерирование строки даты
Инструментарий
Данная функция JavaScript состоит из двух частей. Основной
сценарий вставляется между тегами < s c r i p t > в разделе заголов-
ка HTML-файла или в отдельном JS-файле. Внутри тела Web-стра-
ницы, там, где требуется вставить строку даты, необходим до-
полнительный тег < s c r i p t > .

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

function doDateline() {
/* Вначале извлечем текущую дату. Это достигается
с помощью объекта Date языка JavaScript. С помощью
этой строки кода извлекается текущая дата и поме-
щается в переменную now. */
var now = new Date () ;
/* Следующие строки кода предназначены для извле-
чения из переменной now дня недели, месяца, кален-
дарной даты и года. Все эти значения являются чис-
ловыми. */
Строим Web-сайты
288

var day = now.getDay();
var month = now.getMonth();
var date = now.getDate();
var year = now.getYear();
/* Web-браузер Internet Explorer возвращает пра-
вильный год, тогда как Netscape и Opera уменьшают
год ровно на 1900 лет. Следующий блок кода с опе-
раторами if/then позволяет добиться вывода пра-
вильного года во всех браузерах. */
if (year <2000) {
year += 1900;


/* Инициализируем переменную dateline. Эта пере-
менная будет содержать в конечном итоге текст стро-
ки даты. */
var dateline = "";
/* Теперь сформируем текст строки даты. День неде-
ли в настоящее время существует в числовой форме,
со значениями от 0 до 6, представляющими дни
Sunday (воскресенье) до Saturday (субботы). Следу-
ющие блоки кода if/then добавляют корректное наз-
вание дня в переменную dateline на основе числово-
го значения переменной day.
Обратите внимание на запятую и конечный пробел пос-
ле названия дня недели. Пробел необходим, что::н
следующий элемент, название месяца, отделялся от
запятой.
Если требуется сформировать простую строку дать:,
такую, как 12/22/2005, опустите этот блок кода. ",
'•
if (day == 0) {
dateline = "Sunday, " ;


if (day == 1) {
dateline = "Monday,
}
if (day == 2) {
dateline = "Tuesday,


if (day == 3) {
dateline = "Wednesday, ";
ГЛАВА 55. Добавление строки даты и метки времени 289



if (day = = 4) {
dateline = "Thursday, ";


if (day == 5) {
dateline = "Friday, ";
}
if (day = = 6 ) {
dateline = "Saturday,


/* Месяц также существует в числовой форме, где О
соответствует January (январь), 1 — February (фев-
раль) , 2 — March (март) и так далее до числа 11
соответствующего December (декабрь). Эти блоки
кода if/then добавляют правильное название месяца
в переменную dateline. Обратите внимание на конеч-
ный пробел, необходимый для надлежащего .формати-
рования.
Если необходимо использовать европейский стиль для
строки даты, поменяйте местами этот блок кода с
'последующим блоком кода.
Если требуется получить простую строку даты, заме-
ните этот блок кода следующей строкой:
dateline += (month + 1) + "/";

V
if (month = = 0 ) {
dateline = "January ";


<< Пред. стр.

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

ОГЛАВЛЕНИЕ

След. стр. >>