Как создают вебстраницы

1. Как создают веб-страницы

Основные средства языка HTML

2. Основные средства языка HTML

Графика на вебстранице

3. Графика на веб-странице

Оформление вебстраницы с использованием стилей

4. Оформление веб-страницы с использованием стилей

Использование звука на вебстранице

5. Использование звука на веб-странице

Динамические вебстраницы на основе JavaScript

6. Динамические веб-страницы на основе JavaScript

Вебстраницы реагирующие на действия пользователя

7. Веб-страницы, реагирующие на действия пользователя

Размещение элементов на вебстранице и навигация по сайту

8. Размещение элементов на веб-странице и навигация по сайту

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

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

• использование фреймов;

• использование таблиц;

• и позиционирование независимых слоев.

Давайте же рассмотрим эти технологии по порядку, и начнем с той из них, которая еще не обсуждалась в этой книге — с использования фреймов.

Дополнительные возможности формирования вебстраниц

9. Дополнительные возможности формирования веб-страниц

В предыдущих главах мы рассмотрели основные приемы создания динамических веб-страниц, основанные на применении языка разметки HTML, таблиц стилей CSS и языка сценариев JavaScript. Собственно говоря на этом можно было бы и завершить эту книгу. Девятая глава, которую вы сейчас читаете, является лишь небольшим дополнением к основное тексту. В ней мы коротко проиллюстрируем некоторые дополнительны. возможности, которые имеются при создании веб-страниц. Такими возможностями являются, в частности, использование элементов управления Internet Explorer и применение простейших сценариев, исполняющихся на сервере.

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

Абзацный отступ

Далее, в основном тексте рассказов у нас были абзацные отступы, сделанные с помощью серии неразрывных пробелов ( ) — способ не самый изящный. С помощью стилевого свойства text-indent можно определить абзацный отступ в любых единицах. Правда, придется отказаться от деления на абзацы с помощью тега <BR>, поскольку он “не поймет” указаний сделать отступ. Можно делить текст на абзацы “официальным” способом — <Р> , однако, чтобы избежать пропуска строки, мы воспользуемся тегом <DIV> :

Здесь мы определили абзацный отступ, равный двум символам максимальной ширины в данном шрифте.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<ТIТLЕ>Домашняя страница Сергея Сергеева.</TITLE>

</HEAD>

<H1 STYLE="text-align: center;">Домашняя страница Сергея Сергеева</Н1>

<A HREF="#skazka">CKА3KА «Иван-царевич и серый зaяц»</A> 

<A HREF="#rasskaz">PАССKА3 «МОЛОТОК»</A>

</DIV>

<BR>

<SPAN STYLE="font-weight: bold;,>Сергей Сергеев</SPAN> — писатель-авангардист, автор 20 рассказов.<BR>

В жизни большой любитель собак и компьютерных игр.<ВR><ВR>

Некоторые его рассказы вы можете прочитать прямо здесь. </DIV>

<Н2 STYLE="text-align: center;"XA NAME="skazka">ИBAH-ЦAPEBИЧ И СЕРЫЙ ЗАЯЦ</А><ВR>

Ну, погоди!..

<DIV STYLE="font-style: italic; text-align: right;">(Из мультфильма)</DIV>

</DIV> </DIV>

<BR>

<DIV STYLE="text-align: justify; text-indent: 2ет;">Жил да был Иван-Царевич, и все у него было: и злато-серебро, и невест полный дворец, и книжек много умных, и тренажерный зал огромный. Однако тоскливо было у него на душе - как встанет утром с постели царской, так и начнет горевать, и горюет до вечера. </DIV>

<DIV STYLE="text-align: justify; text-indent: 2em;"> Долго ли, коротко ли, ...</DIV>

<DIV STYLE="text-align: justify; text-indent: 2em;"> ...И они жили долго и счастливо и умерли в один день.</DIV>

<Н2 STYLE="text-align: center;"><A NAME="rasskaz">МОЛОТОК</A> <BR>

<SPAN STYLE="font-style: italic; ">paccкaз</SPAN>

</H2> <DIV STYLE="text-align: right;">

Мы кузнецы, и дух наш молод.

<DIV STYLE="font-style: italic; text-align: right;">(Из песни) </DIV>

</DIV>

<BR>

<DIV STYLE="text-align: justify; text-indent: 2ет;">Это случилось очень давно, уж и не помню в каком году, в каком веке и в каком тысячелетии... (Здесь располагается текст рассказа) </DIV>

</BODY>

</HTML>

Результат показан на Рисунок 4.4. Вы можете заметить, что он практически не отличим от веб-страницы, представленной на Рисунок 2.8, если не считать немного “исправленных” эпиграфов и абзацных отступов.

Таким образом, мы переписали страничку в соответствии с требованиями HTML 4.0, а попутно рассмотрели еще некоторые дополнительные воз можности, предоставляемые CSS.

Адрес в Интернете

Подобно тому как любой телефон в телефонной сети имеет свой уникальный номер, любой компьютер, подключенный к Интернету, тоже имеет свой уникальный номер, который называется IP-адресом. IP-адрес состоит из четырех чисел, разделенных точками (это, конечно, только для облегчения человеческого восприятия — на самом деле это всего лишь 32-битная последовательность), например: 195.34.32.11. Кстати, это реальный IP-адрес DNS-сервера московского Интернет-провайдера “МТУ-Информ”). По IP-адресу в Интернете можно найти любой компьютер.

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

Анализ примера

Теперь, вооружившись полученными знаниями, давайте вернемся к таблице, представленной на Рисунок 2.13 и посмотрим, как же она сделана. В качестве основного цвета таблицы здесь выбран серебристый (#Е4Е4Е4), Атрибут WIDTH="100%" растягивает ее на всю ширину окна броузера, а значение CELLSPACING="0" “прижимает” ячейки друг к другу. С помощью значения CELLPADDING="2" обеспечивается наличие небольших “полей” в каждой ячейке.

В первой строке таблицы задается ширина столбцов. Ширина первого столбца с номерами хоккейных команд задана равной 20 пикселам, а всех столбцов с результатами матчей — 40 пикселам. Ширина столбца с названиями команд задана равной 20% от ширины окна. Ширина двух последних столбцов не задана вообще — им отводится все оставшееся место.

Во многих ячейках таблицы задан атрибут ALIGN="center", без которого выравнивание текста происходило бы по левому краю. Во всех ячейках с результатами встреч задан белый фон (BGCOLOR="white"), в ячейках с количеством очков и заброшенных/пропущенных шайб для лучшего визуального выделения использован другой цвет фона. Количество очков, как главная информация в каждой строке таблицы, выделено просто полужирным и чуть увеличенным шрифтом (с помощью тегов <В> и <ВЮ>). Для лучшего “разнесения” в разные стороны количества заброшенных и пропущенных шайб между ними использовано длинное тире — это специальный символ —.

Зачерненные квадраты турнирной таблицы сделаны просто — с помощью ячеек с черным цветом фона (BGCOLOR="black")“ И, наконец, для отобра-I жения рамки вокруг пустой ячейки (левой верхней) туда был помещен неразрывный пробел ( ).

Теперь давайте посмотрим на текст этой странички целиком:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD>

<TITLE>TypHMpHan таблица</Тitle>

</HEAD>

<DIV ALIGN="center"

<Н1>ЧЕМПИОНАТ ГОРОДА ПО ХОККЕЮ</Н1>

<НЗ>ТАБЛИЦА РЕЗУЛЬТАТОВ</НЗ>

</DIV>

<TD WIDTH="20%">Koмaндa</TD>

<TD ALIGN="center">Шайбы</TD>

<TR>

<TD

ALIGN="center">1</TD>

<TD>«POTOP»</TD>

<TD

BGCOLOR="black"></TD> <TD

ALIGN="center"

BGCOLOR="white">6:4</TD> <TD

ALIGN="center"

BGCOLOR="white">2:3</TD> <TD

ALIGN="center"

BGCOLOR="white">7:3</TD> <TD

ALIGN="center"

BGCOLOR="white">2:1</TD> <TD

ALIGN="center"

BGCOLOR="white">0:0</TD> <TD

ALIGN="center"

BGCOLOR="#DFFFDF">17—11</TD>

</TR> <TR>

<TD>«POTATOP»</TD>

</TR>

<TR>

<ТD>&lаquo;УРОЖАЙ»</ТD>

</TR>

<TR>

<TD>«МЕЧТА»</TD>

</TR>

<TR>

<TD>«МЕЧТА& raquo;</TD>

</TR>

<TR>

</TR>

</TABLE>

</BODY>

</HTML>

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

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

Автоматизация ввода

Теперь давайте обратим внимание на панель инструментов для быстрого ввода тегов (Quick Bar), расположенную в правой верхней части окна программы. Элементы управления, представленные на этой панели, предназначены для автоматизации ввода элементов веб-страницы. Элементы управления сгруппированы в несколько вкладок:

• Common — для ввода тегов, которые используются наиболее часто;

• Fonts — для изменения параметров шрифта;

• Tables — для создания таблиц;

• Frames — для создания фреймовых структур;

• Lists — для создания списков;

• Forms — для ввода элементов форм;

• Script — для подготовки ко вводу сценариев, Java-апплетов и элементов ActiveX;

• CFML—для ввода тегов ColdFusion;

• ASP — для определения некоторых элементов динамических страниц active server pages;

• Linkbot — для автоматической проверки ссылок с помощью внешней программы Linkbot.

Если на панели QuickBar видны не все вкладки, щелкните на ней правой кнопкой мыши, и в открывшемся меню отметьте те вкладки, которые хотите сделать видимыми. Подробно разбирать все вкладки панели Quick Bar мы здесь не будем, но общий принцип работы с ними рассмотрим.

На каждой вкладке представлены командные кнопки, с помощью которых можно быстро ввести нужный тег или целый блок-заготовку. Например, если перед вами совершенно чистая страница, нажмите на самую левую кнопку вкладки Common — это кнопка Quick Start (Быстрый старт). Из открывшегося списка можно выбрать тип документа и быстро сгенерировать его .HTML-заголовок. А если нажать вторую кнопку той же вкладки — кнопку Body, то откроется диалоговое окно, в котором можно изменить свойства текущей страницы. Наглядно, с помощью раскрывающегося списка, организован выбор цвета текста и фона, а если ни один из предложенных цветов не подходит, командой Custom (Настроить) можно открыть полную палитру доступных цветов. В небольшом окне справа можно увидеть, как будет смотреться избранное цветовое сочетание.

Для выбора фонового рисунка служит кнопка, расположенная рядом с полем Background Image (Фоновый рисунок). Она открывает стандартное окно выбора файла с возможностью его предварительного просмотра. Конечно, можно ввести название графического файла и просто с клавиатуры.

Для ввода значения атрибута STYLE= также можно воспользоваться раскрывающей кнопкой соответствующего поля. При этом открывается окно внешней программы TopStyle. Это же окно будет открываться при каждой установке атрибута STYLE= для любого тега или при редактировании стилевого блока. В его правой части находится панель Инспектора стилей (Style Inspector), на которой в алфавитном порядке приведены все доступные свойства стилей. Обратите внимание на то, что набор доступных свойств можно изменять в соответствии со своими запросами. Это может быть полный набор из спецификации CSS уровня 1 или 2, или набор свойств, поддерживаемых различными версиями броузеров. Необходимый набор можно выбрать из раскрывающегося списка в Инспекторе стилей.

Значения доступных свойств стилей можно выбирать в Инспекторе с помощью раскрывающихся списков. Правда, некоторые значения, например цифровые значения параметров в соответствующих диалоговых окнах, лучше все-таки вводить вручную. Все изменения значений тут же отображаются в левой части окна TopStyle. По завершении настройки нажмите кнопку Done (Готово) — и соответствующий текст появится в поле ввода Style (Стиль). Теперь обратите внимание на еще одну особенность окна Body . На его нижней панели (там, где имеются поля Left Margin, Top Margin и Fixed Background) изображен значок броузера Internet Explorer 4. Наличие этого значка означает, что атрибуты, представленные в данном разделе, будут ( работать только в этом броузере.

К этому вопросу мы еще вернемся, а пока нажмите кнопку ОК, и вы увидите, что все установленные атрибуты тега <BODY> появились в тексте, например, вот так:

<BODY TEXT="Blue" BACKGROUND="arrowl.gif" BGCOLOR="Fuchsia" LINK="Aqua" VLINK="Black" ALINK="Gray" STYLE="background-position: right;

border-style: dotted; background-repeat: repeat-y;">

Броузер Internet Explorer

На сегодняшний день наиболее популярной программой просмотра веб-страниц является броузер Microsoft Internet Explorer, которым пользуется примерно половина всех бродящих по Интернету. MS Internet Explorer версии 5 поддерживает большинство требований HTML 4.0, и именно на эту программу мы будем ориентироваться в примерах, приведенных в этой книге. Эта программа бесплатна, и ее можно загрузить с адреса http://www.microsoft.com/windows/ie_intl/ru/download/. Там же можно обновить версию броузера и взять различные дополнения к этой программе. Почти все кардинальные новшества появились в программе MS Internet Explorer начиная с версии 4. Однако некоторые моменты, связанные в основном с реакцией на пользовательские действия и интерпретацией кода, написанного на языке JavaScript, все же существенно изменились в пятой версии. Поэтому не удивляйтесь, если страничка, написанная для Internet Explorer версии 5, при просмотре в четвертой версии будет выдавать, например, сообщения об “ошибке сценария”. Кстати, пятая версия Internet Explorer способна автоматически корректировать мелкие неточности. Другие броузеры этого не умеют, и для них эти неточности будут выливаться и сообщения об ошибках. Программа Internet Explorer поддерживает в качестве сценарного языка не только язык JavaScript,но и изобретенный компанией Microsoft язык VBScript, который происходит от языка Visual Basic. Поскольку веб-страницы, написанные с использованием VBScript, реально существуют, то только использование броузера Internet Explorer позволяет сегодня адекватно отобразить их содержимое. В языке VBScript появились некоторые интересные возможности, отсутствовавшие в JavaScript 1.0, такие, например, как функция автоматического игнорирования ошибок в цикле (On Error Resume Next). Мы не рассматриваем в этой книге язык VBScript, поскольку все же универсальным языком сценариев на сегодняшний день является JavaScript.

Что касается более ранних версий MS Internet Explorer, то их использование порождает ряд проблем. Так, например, в третьей версии использована довольно своеобразная реализация JavaScript, и некоторые функции, написанные для более поздних версий или для броузеров компании Netscape, в Internet Explorer 3 работают не совсем правильно. Кроме того, поскольку проект HTML 4.0 тогда еще только зарождался, в Internet Explorer 3 отсутствуют функции реакции на пользовательские действия, возможность произвольного расположения элементов оформления и др. Нет также поддержки каскадных таблиц стилей. В некоторых случаях возникают проблемы с навигацией между фреймами. А в еще более ранних версиях этого броузера вообще отсутствовала поддержка языков сценариев и были доступны только самые простые средства.

Броузер Netscape Navigator

Вторым по популярности броузером в мире является Netscape Navigator. В отличие от MS Internet Explorer, эта программа реализована для многих платформ, включая OS/2 и UNIX с ее клонами. На “He-Win.dows-компью-терах” Netscape Navigator продолжает оставаться наиболее популярной программой просмотра веб-страниц.

На момент написания этих строк вышел второй предварительный релиз шестой версии Netscape Navigator В этой версии также реализована поддержка многих требований HTML 4.0, однако не в такой полной мере, как в MS Internet Explorer 5. В частности, на пользовательские действия по-прежнему могут реагировать далеко не все элементы веб-страницы. Программу Netscape Navigator можно бесплатно получить, обратившись по адресу www.netscape.com. В предыдущей версии этой программы (четвертой) не поддерживались новые теги, предложенные в четвертой версии Internet Explorer (например <BUTTON>), что очень затрудняло написание динамических страниц, совместимых одновременно и с Internet Explorer, и с Netscape Navigator. Третья и более ранние версии программы не поддерживали реакцию на пользовательские действия вообще, а также все теги, связанные с позиционированием.

Через минуту после появления текста рассказа возникает красная надпись “Ну что нравится?”

Рисунок 7.12. Через минуту после появления текста рассказа возникает красная надпись “Ну что, нравится?”

Числовые преобразования в программе Photoshop

Рисунок 3.22. Числовые преобразования в программе Photoshop

Итак, попробуем разместить наше вставленное изображение. Для того чтобы его уменьшить, дайте команду Правка > Трансформ > Число (Edit > Transform > Numeric). Она открывает диалоговое окно (Рисунок 3.22), в котором можно задать параметры преобразования текущего слоя. В нашем случае следует оставить включенным только флажок Масштаб (Scale). Установите также флажок Соблюдать пропорции (Constrain Proportions) и задайте ширину объекта 70% (при этом высота также автоматически изменится). Затем возьмите инструмент Двигатель (Move Tool) и с его помощью передвиньте изображение девушки, как показано на Рисунок 3.23.

Получается не совсем то, что надо. Яблоко находится как бы дальше от нас, чем остальное, однако ее изображение перекрывает их! Что делать? Можно, конечно, выделить из фона изображение, скопировать его на новый слой и поместить этот слой впереди всех остальных. Кстати, для упражнения можете проделать такую работу. Но мы для простоты просто поместим изображение девушки чуть левее, чтобы оно не перекрывало другие близкие к наблюдателю объекты.

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

Чтение дорожек компактдиска

Чтение дорожек компакт-диска

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

Основное окно программы XingAudioCatalyst . При вставке звукового компакт-диска в дисковод CD-ROM в этом окне появляется список доро- жек, правда с названиями, принятыми по умолчанию: Track 1, Track 2 и т. д. Если список не появляется, нажмите кнопку Refresh (Обновить).

Чтобы увидеть названия дорожек, надо предварительно соединиться с Интернетом, а потом нажать кнопку CDDB. Через некоторое время загру- зится название альбома и имя исполнителя, а названия дорожек станут содержательными. Это возможно в том случае, если информация о данном компакт-диске имеется в базе данных CDDB. Как правило, она там есть. Теперь осталось отметить те дорожки, которые надо переписать. После этого можно нажать на кнопку Grab! (Перехват), и выбранные дорожки будут скопированы на жесткий диск.

Перед тем как нажимать эту кнопку, хорошо бы определить папку, в которую дорожки будут скопированы. Для этого нажмите кнопку Settings (Наст ройки) — откроется одноименное диалоговое окно. Здесь в самой верхней строке указывается та папка, куда будет копироваться звукозапись. Папку можно изменить с помощью кнопки Browse (Обзор).

Кроме того, в этом окне можно выполнить еще некоторые настройки. В раз деле CD-ROM access method (Метод доступа к СD-ROM) можно настроить пара метры чтения звуковых дорожек. Здесь имеются две вкладки. Для дисководов с интерфейсом SCSI выбирают вкладку ASPI, а с интерфейсом

IDE — вкладку MSCDEX. Затем при необходимости можно поменять способ чтения в раскрывающемся списке Rip Method и скорость чтения в раскрывающемся списке DAE Speed.

А в нижней части этого окна имеется еще пять вкладок, некоторые из которых могут оказаться полезными. Например, на вкладке Silence (Тишина) можно включить автоматическое удаление тишины в начале и/или конце каждой дорожки; для нас это как раз актуально — зачем же передавать через Интернет тишину? А на вкладке Misc. (Прочее) можно включить режим остановки после каждой ошибки, сбросив флажок Continue even if ynchronization fails (Продолжать при нарушении синхронизации). Вообще-то чслать это не рекомендуется, так как возникающие ошибки синхрониза-ции при чтении чаще всего ни на что не влияют, если их не слишком много подряд. Можно также заставить программу начать воспроизведение про-читанного сразу по окончании копирования или даже выключить ком-пьютер после этого.

Кроме того, в основном окне программы есть еще две полезные кнопки — NORM. (Нормализация) и МРЗ (Сжатие в МРЗ). Первая позволяет выбрать режим оптимизации амплитуды звукового файла в реальном времени (“ на лету ”). А кнопка МРЗ позволяет даже включить режим сжатия в формат МРЗ в реальном времени. Однако учтите, что, хотя каждая операция в отдель ности (нормализация и сжатие) занимает не слишком много времени, при выборе обеих сразу компьютер может не успеть все сделать — появятся сообщения об ошибках. Но не беспокойтесь — эти операции можно выпол нять порознь, для чего в диалоговых окнах Normalizing (Нормализация) и МРЗ (Сжатие в МРЗ) есть команды Normalize a wave file right now (Нормализовать звуко запись) и Create an МРЗ now (Сжать звукозапись в формат МРЗ).

Как видите, программу AudioCatalyst можно использовать не только для копирования звукозаписей с компакт-диска на жесткий диск, но и для сжатия их в формат МРЗ. Однако имейте в виду, что встроенный в нее модуль сжатия XingEncoder кодирует звук в формат МРЗ хоть и.быстро, но не всегда качественно. Так что в большинстве случаев лучше использовать другие программы сжатия.

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

Цветовое оформление

Для этого проще всего установить соответствующие атрибуты тега <BODY> . Атрибут ТЕХТ= определяет цвет текста на страничке, а атрибут BGCOLOR= — цвет фона. Названия цветов можно вводить по названиям, например: "black" (черный), "white" (белый), "yellow" (желтый), "green" (зеленый), "fuchsia" (сиреневый) и т. д. Существует довольно много названий цветов, которые можно использовать в HTML, однако можно получить любой из цветов, введя его шестнадцатеричный номер. Причем это не так сложно, как может показаться.

Шестнадцатеричный номер цвета должен состоять из шести цифр. Первые две означают интенсивность красной составляющей, вторые две — зеленой и последние две — синей. Таким образом, красный цвет обозначается как FFOOOO, зеленый — OOFFOO и синий — OOOOFF. Цвет с номером 000000 — чер- ный (нет ни одной составляющей), a FFFFFF — белый. Если это понятно, то можно поэкспериментировать с интенсивностью каждой составляющей отдельно. Если FFOOOO — это красный цвет, то 880000 — уже темно-красный, а 440000 — красно-коричневый; 220000 похож на коричневый, а 110000 — черный с красноватым оттенком. Точно так же OOFFOO — это яркий зеле ный, ООААОО — приятный лиственно-зеленый, 007700 — темно-зеленый,

003300 — очень темный зеленый и 001100 — черный с зеленоватым оттенком. Немного поэкспериментировав с интенсивностью каждой составляющей, можно попробовать смешивать цвета. Таким образом, можно научиться быстро вводить цвет в цифровом виде. Конечно, в различных HTML-редакторах можно выбирать цвет из палитры обычным способом, “на глаз”, но всегда лучше знать точно, что происходит в коде. Кстати, если кому-то не по душе шестнадцатеричные числа, то с помощью CSS он сможет определять цвет и с помощью обычных, десятичных чисел.

Перед шестнадцатеричным номером цвета необходимо поставить знак #. Например, для нашей странички цвета можно определить так:

Это даст при просмотре одинаковый коричневатый оттенок и цвета, и фона, однако цвет фона будет более тяготеть к серебряно-белому, а цвет текста — к темно коричневому. Давайте посмотрим, что у нас получилось.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<title>Домашняя страница Сергея Cepreesa</title>

</head>

<h1><DIV aling="center">Домашняя страница Сергея Сергеева </div></h1>

<br> Сергей Сергеев - писатель-авангардист, автор 20 рассказов. <br>

В жизни большой любитель собак и компьютерных игр. <br> <br>

Некоторые его рассказы вы можете прочитать прямо здесь. <br>

<HR WIDTH="75%"> <H2><P ALIGN="center">ИBAH-ЦАРЕВИЧ И СЕРЫЙ ЗАЯЦ <br>

сказка</p></H2>

<p align="right">Hy, погоди!.. <BR>(Из мультфильма)</Р>

<p align="justify">      Жил да

был Иван-Царевич, и все у него было: и злато-серебро, и невест

полный дворец, и книжек много умных, и тренажерный зал огромный... <br>

      Долго ли, коротко ли ... <br>

      И они жили долго и счастливо

и умерли в один день.</Р>

<h2><p align="center">MOЛOTOK <br> рассказ</p></h2>

<p ALIGN="right">Mы кузнецы, и дух наш молод. <br> (Из песни)</P>

      Это

случилось очень давно, уж и не помню в каком году, в каком веке

и в каком тысячелетии... (Здесь располагается текст рассказа)

</BODY>

</HTML>

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

Декоративное оформление текста

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

.Ink { border-width: thick; border-style: ridge; border-color: #319CFF; color: red; text-align: center; } Чтобы рамка вообще отобразилась, необходимо определить свойство border-style (дело в том, что по умолчанию его значение — none, то есть рамки нет). Здесь мы можем выбрать вид рамки из возможных: solid (обычная), double (двойная), groove (вогнутая с обеих сторон), ridge (выпуклая с обеих сторон), inset (вогнутая), outset (выпуклая), dotted (точечная) и dashed (пунктир-

Диалоговые окна редактирования тегов

О том, что это все означает, мы поговорим в следующих главах, а пока что рассмотрим еще одно типичное диалоговое окно программы. Откройте вкладку Tables и нажмите кнопку Table dialog — обычно она вторая слева. Откроется диалоговое окно пелактопа тегов ТagEditor — TABLE

— Internet Explorer 3;

— Netscape Navigator 3;

—Internet Explorer 4;

— Netscape Communicator 4;

— броузер Opera (подразумевается версия 3.5).

Как правило, свойства, которые поддерживаются каким-либо типом броузера более низкой версии, поддерживаются и в его дальнейших версиях, то есть, если значок показывает, что тот или иной атрибут поддерживается в броузере Internet Explorer 3, то это означает, что он, скорее всего, будет поддерживаться также и в броузере Internet Explorer 4 или в пятой версии. Однако броузеры других типов, даже более старших версий, поддерживать этот атрибут, скорее всего, не будут.

Кроме того, в подобных диалоговых окнах имеется вкладка HTML 4.0, на которой можно устанавливать значения новых атрибутов, стандартизированных в четвертой версии языка HTML. Если какой-либо из этих “ новых ” атрибутов поддерживался и в более ранних версиях некоторых броузеров, то на этой вкладке вы увидите раздел Also in: (А также в...), в котором эти броузеры обозначены с помощью значков.

Дополнительно, данное диалоговое окно содержит еще три вкладки. Средства вкладки Style Sheets/Accessibility (Списки стилей) служат для установки значения атрибута STYLE= (с помощью внешней программы TopStyle, как уже говорилось выше) или для определения стилевого селектора (CLASS) и еще некоторых связанных с этим атрибутов. Средства вкладки Language (Язык) предназначены для установок, связанных с языком текста, и, наконец, средства вкладки Events (События)

Отметим еще одну полезную особенность программы HomeSite. В ней можно щелкнуть внутри любого тега правой кнопкой мыши и выбрать из контекстного меню пункт Edit Tag (Правка тега). После этого открывается диалоговое окно Редактора тегов (Tag Editor), в котором тоже очень удобно устанавливать значения всех доступных атрибутов.

Кстати, еще одна интересная возможность заключается в том, что теги И можно “сворачивать” командой Collapse Tag (Свернуть тег) из контекстного меню. При этом содержимое тега (все, что находится между его открывающим и закрывающим элементами, например, между <BODY> и </BODY> ) свернется в небольшой значок-кнопку. Это полезно при редактировании больших файлов, если надо быстро окинуть взглядом содержимое всей веб.

По крайней мере, они не обязаны этого делать.

границы. В контекстном меню имеется также команда Collapse All Identical QS (Свернуть все идентичные теги), которая сворачивает содержимое всех тегов, идентичных данному по имени. Например, если при подаче этой команды был выделен тег <TR>, то в значки свернется содержимое всех гов <TR> , имеющихся в файле. Чтобы снова развернуть эти значки в текст, щелкните правой кнопкой мыши в любом месте панели редактирования и выберите в контекстном меню пункт Expand All (Развернуть все).

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

Динамическое формирование таблицы

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

Чтобы связать таблицу с элементом управления, используем атрибут

DATASRС=:<TABLE DATASRC="#hudlit">

Обратите внимание на то, что мы указываем здесь не файл базы данных, а имя элемента управления, связанного с этим файлом. Теперь мы можем определить строку таблицы. В тех местах, куда нужно вставить значение кого-либо поля из базы данных, необходимо использовать атрибут DATAFLD=. Его удобно устанавливать в тегах <DIV> и <SPAN>:

<TR>

<TD><SPAN DATAFLD="Author"></SPAN>, «

<SPAN DATAFLD="Name"></SPAN>»,

<SPAN DATAFLD="Size"></SPAN>  кбайт.

</SPAN></TD>

</TR>

Посмотрите внимательно на этот код. Здесь определена одна строка таблицы, состоящая из одной ячейки (можно было сделать и по-другому, напримеp, значение каждого поля поместить в свою ячейку). В этой ячейке последовательно отображаются: значения первого поля (автор книги), за- пятая, открывающая кавычка, значение второго поля (название книги), закрывающая кавычка, запятая, значение третьего поля (размер файла), пробел, слово “кбайт”, точка и значение четвертого поля (гиперссылка для загрузки текста книги). Обратите внимание на то, что в последнем случае нам пришлось использовать атрибут DATAFORMATAS='html', чтобы указать, что в базе данных содержатся НТМL-тетта. Если бы мы забыли применить этот атрибут, то в окне броузера ссылка отобразилась бы в виде исходного кода.

Собственно говоря, нам осталось только поставить закрывающие теги:

</TABLE>

</BODY>

</HTML>

Всe остальное сделает элемент управления Tabular Data. Он “пройдется” по всем записям файла базы данных, и для каждой из них автоматически создаст новую строку таблицы.

Динамическое изменение графических элементов вебстраницы

7.5. Динамическое изменение графических элементов веб-страницы

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

Динамическое изменение внешнего вида страницы

6.3. Динамическое изменение внешнего вида страницы

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

Динамическое отображение текста вебстраницы

7.4. Динамическое отображение текста веб-страницы

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

Вообще-то говоря, в разделе 7.2 мы уже один раз немного изменяли текст, но это был текст на кнопке. Если помните, тогда мы меняли надписи Сде лать фон белым и Сделать фон зеленым. Надпись на кнопке изменялась при помощи значения атрибута VALUE= тега <INPUT> . Однако что делать, если текст, подлежащий изменению, не является кнопкой?

Давайте рассмотрим такой пример. Предположим, нам надо несколько усовершенствовать “Домашнюю страницу Сергея Сергеева”, которую мы создавали в Главах 1, 2 и 4. К примеру, нам хочется, чтобы сначала на странице отображался только вступительный текст и текст первого рас сказа. А при нажатии на ссылку вместо текста первого рассказа появлялся бы текст второго рассказа и т. д.

(Оказывается, это осуществить очень легко! Заключим для начала текст первого рассказа в блок <DIV> и присвоим ему уникальное имя:

< DIV ID="rasskaz"> <Н2>ИВАН-ЦАРЕВИЧ И СЕРЫЙ ЗАЯЦ<ВР> OPAN STYLE="font-style: italic; ">cкaзкa</SPAN></H2>

<DIV STYLE="text-align: right;"> <DIV CLASS="epig"> Ну, погоди!.. <DIV CLASS="pdps">(Из мультфильма)</DIV> </DIV> </DIV> <BR>

<DIV CLASS="аЬ">Жил да был Иван-Царевич, и все у него было: и злато-серебро, и невест полный дворец, и книжек много умных, и тренажерный зал огромный. Однако тоскливо было у него на душе - как встанет утром с постели царской, так и начнет горевать, и горюет до вечера.</DIV>

<DIV CLASS="аЬ">Долго ли, коротко ли ...</DIV>

<DIV CLASS="аЬ">И они жили долго и счастливо и умерли в один день.</DIV>

<HR> </DIV> Теперь вместо ссылки на второй рассказ напишем просто

<SPAN onClick="show_hammer()">Рассказ «МОЛОTOK»</SPAN>

Как видите, теперь, если пользователь щелкнет мышью на словах Рассказ “Молоток”, то будет выполнена функция show_hammer(). По нашей задумке, она должна заменить текст сказки на текст рассказа “Молоток”.

Вспомним, что весь текст сказки был заключен в блок <DIV> . А у любого блока <DIV> , как и у большинства других элементов, имеется свойство innerHTML, значение которое содержит весь HTML-код данного элемента! Это означает, что если мы изменим значение этого свойства, изменится и HTML-V.OJS,, а значит, и текст, содержащийся на странице. Наша функция show_hammer() может выглядеть, например, вот так:

function show_hammer() { document .all. rasskaz . innerHTML=' <H2>MOЛOTOK<BR>

<SPAN STYLE="font-style: italic ;">paccкaз</SPAN></H2>

<DIV CLASS="epig">Mы кузнецы, и дух наш молод.<DIV CLASS="pdps">(Из песни) </DIV></DIV></DIV><BR>

<DIV CLASS="аЬ">Это случилось очень давно, уж и не помню в каком году, в каком веке и в каком тысячелетии. . . (Здесь располагается текст рассказа) </DIV>;

}

Как видите, эта функция выполняет всего одно действие — присваивает свойству document.all. rasskaz. innerHTML значение, содержащее длинную-предлинную строку. В этой строке содержится весь HTML-код, рассказа “Молоток”

Динамическое управление позиционированием элементов

Чтобы все это реализовать, придется использовать позиционирование объектов на экране. Прежде всего, определим позицию блока, в который будет включена таблица (“игровое поле”):

<DIV STYLE="width: 400px; height: 400px; position: absolute;

top: 100px;">

Вероятно, вы обратили внимание на то, что сейчас мы задали только пози- цию блока <DIV> по вертикали (с помощью стилевого свойства top). А каким должно быть свойство left (позиция по горизонтали)? Хотелось бы, чтобы наше игровое поле располагалось по центру, но ведь мы не знаем ширину окна броузера пользователя!

К счастью, в Internet Explorer есть возможность определить ширину окна броузера, прочитав значение свойства document.body.clientWidth. После этого все уже просто. Сначала разделим это значение на 2, чтобы получить пози цию в центре экрана. Поскольку наша таблица будет иметь ширину 400 пикселов, для вычисления позиции ее левого края вычтем из позиции центра экрана половину ширины таблицы, то есть 200:

tstart=document.body.clientWidth/2-200;

В данном примере мы присвоили вычисленное значение переменной tstart. Поскольку оно будет неоднократно использоваться в дальнейшем, полезно объявить эту переменную как глобальную (то есть не внутри какой-либо функции, а в самом начале кода JavaScript). Теперь осталось дать имя нашему блоку <DIV>:

и присвоить его свойству left вычисленное значение:

var tstart; function mainpos()

{ tstart document.body.clientWidth/2-200;

document.all.maintab.style.left=tstart; )

//--> </SCRIPT>

Приведенная выше функция mainposO должна выполняться сразу после загрузки страницы (иначе пользователь увидит таблицу неизвестно где). Поэтому установим в теге <BODY> уже знакомый нам обработчик событий on Load:

Вот теперь при загрузке страницы (а точнее, сразу после нее) наш блок <DIV> , содержащий таблицу, будет отцентрирован. Но как быть с ячейками таблицы? Ведь мы знаем, что если даже в тегах <TD> указать ширину и высоту, эти требования будут восприняты броузером лишь как рекомендательные, и на экране просто не отобразится ни одна ячейка. Если же поместить в ячейки неразрывные пробелы, то строки таблицы получатся мизерной высоты (Рисунок 7.8).

Длинный эпиграф при таком оформлении становится не похожим на эпиграф

Рисунок 4.1. Длинный эпиграф при таком, оформлении становится не похожим, на эпиграф

Добавим на страничку блок гиперссылок

Рисунок 4.5. Добавим на страничку блок гиперссылок

.hdr

{ position: absolute; left: 50px;

top: 10рх; } Мы немного отступили от края странички, хотя можно было указать,

конечно, и нулевые значения left и top. Заодно можно сразу указать свойство text-align: center;

для центрирования нашего заголовка. В тексте документа напишем:

<DIV CLASS="hdr">ФИРМА ЛЕНТЯЙ</DIV>

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

.ift { position: absolute; font-size: meduim; left: 10рх; top: 160px; width: 550px; height: 400px; overflow: auto; }

Здесь нужно немного пояснить. Во-первых, мы определили отступ от верх него края в 160 пикселов, чтобы оставить место для заголовка. Кроме того, свойство width определяет ширину этого блока так, чтобы оставить немного места справа для блока гиперссылок. Мы могли не определять свойство height, однако с его помощью можно “вогнать” всю информацию в преде лы экрана, а ту, что не поместится, доставать с помощью дополнительной полосы прокрутки, определив для этого свойство overflow: auto. Тогда назва ние фирмы будет всегда оставаться в верхней части экрана. Можно также было определить свойство overflow: scroll;, и тогда дополнительная полоса прокрутки (для левого блока) была бы видна в любом случае. Значение auto заставляет броузер показывать ее только тогда, когда это необходимо, то есть, когда есть информация, не помещающаяся в пределах блока.

В тексте документа, соответственно, заключим всю основную информацию в блок класса Ift:

<DIV CLASS="lft"> Наша фирма предоставляет следующие услуги: <UL>

<li>Бытовые услуги

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

.rght { position: absolute; font-size: large; left: 565px;

top: 160px;

width: 160px; height: 400px; }

Поскольку гиперссылки должны быть хорошо заметны на фоне всего остального, мы сразу определяем для них более крупный шрифт (font-size: large;). Значение свойства top должно быть таким же, как и у класса Ift, чтобы оба блока расположились на одинаковой высоте. Значение left выбрано таким, чтобы слева осталось достаточно места для информационного блока. Теперь присвоим класс rght нашему блоку гиперссылок:

<DIV CLASS="lnk">УСЛУГИ</DIV>

<DIV CLASS="lnk"><A HREF="forml.html">ФОPMA 3AKA3A</A></DIV>

<DIV CLASS="lnk"><A HREF="history.html">ИСТОРИЯ КОМПАНИИ</А> </DIV>

<DIV CLASS="lnk"><A HREF="guestbook .html">KHИГА OT3ЫBOB</A></DIV>

</DIV>

Добавление дополнительных надписей

Для этого можно сделать следующее. Определим соответствующий стиль.

Н3 { text-align: center; color: red; }

В нашем примере для запроса к пользователю мы используем тег <НЗ>. После этого вставим нашу надпись таким образом:

document.all.rasskaz.insertAdjacentHTML("AfterBegin", '<H3>Hy что, нравится?<НЗ>');

Здесь используется метод insertAdjacentHTML, что позволяет вставлять не только текст, но и HTML-тети. Аргумент AfterBegin означает, что вставля-емый код будет помещен в начало блока <DIV ID='rasskaz'> . Если бы мы напи-сали BeforeEnd, то код был бы вставлен в конец блока. Кстати, методы lnsertAdjacentText и insertAdjacentHTML позволяют вставить текст (и HTML-код) не только внутрь какого-либо элемента, но и непосредственно перед и им или после него! Для этого используются аргументы BeforeBegin и, соответственно, AfterEnd. Как вы уже поняли, в качестве второго аргумента используется строка с текстом или HTML-кодом, который надо вставить.

Остальное уже просто. Добавим в каждую функцию отображения текста при введенную выше строку в сочетании с установкой таймера — setTimeout:

setTimeout("document.all.rasskaz.insertAdjacentHTML ('AfterBegin','<H3>Hy что, нравится?<НЗ>') ", "60000");

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

var timer; И присвоить ей значение запущенного таймера:

time=setTimeout("document.all.rasskaz.insertAdjacentHTML ('AfterBegin','<H3>Hy что, нравится?<НЗ>') ", "60000");

Тогда для его остановки достаточно будет написать следующее:

clearTimeout(timer); В тот момент таймер будет остановлен.

И так давайте еще раз посмотрим на текст получившейся страницы. В ней использована одна функция show() для отображения любого из текстов. Обратите внимание на то, что при ее написании использован тот факт, что имя переменной, содержащей текст каждого рассказа, если к нему приба- вить окончание Ink, совпадает с именем соответствующей мнимой гипер- ссылки. Подобный разумный выбор имен позволяет передавать функции не два параметра (ivanink и ivan), а только один, что экономит время и ресурсы компьютера. В данном случае это не столь существенно, поскольку раз мер страницы невелик, но в некоторых случаях может сыграть большую роль.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<ТITLЕ>Домашняя страница Сергея Сергеева.</TITLE>

<STYLE>

<!--

BODY { background-color: #BABAAO;

color: rgb(29,29,24); } H1,H2 { text-align: center;

} H3 { text-align: center; color: red;

} .Ink { color: #634438;

text-decoration: underline;

cursor: hand;

} .Ink0 { color: rgb(29,29,24);

text-decoration: none;

cursor: default;

} HR { margin-top: 24px;

width: 75%;

DIV.epig { text-align: justify; font-size: smaller;

width: 130;

} DIV.pdps { font-style: italic;

text-align: right;

} DIV.ab { text-align: justify; text-indent: 2em; }

-->

</STYLE>

<!--var oldlnk="ivanlnk";

var timer;

var hammer”'

<H2>MOЛTOK<BR><SPAN STYLE="font-style: italic; "> paccrap</SPAN></H2>

<DIV CLASS="epig">Mы кузнецы, и дух наш молод.

<DIV CLASS="pdps">(Из песни) </DIV></DIV></DIV> <BR>

<DIV CLASS="ab">Это случилось очень давно, уж и не помню в каком году, в каком веке и в каком тысячелетии... (Здесь располагается текст рассказа) </DIV>' ;

var ivan='<Н2>ИВАН-ЦАРЕВИЧ И СЕРЫЙ ЗАЯЦ<ВR>

<SРАN STYLE="font-style: italic; ">CKА3KА</SPAN></H2><DIV STYLE="text-align: right;"><DIV CLASS="epig">Hy, погоди!..

<DIV CLASS="pdps"> (Из мультфильма) </DIV></DIV> </DIV><BR>

<DIV CLASS="ab">Жил да был Иван-Царевич, и все у него было: и злато-серебро, и невест полный дворец, и книжек много умных, и тренажерный зал огромный. Однако тоскливо было у него на душе -как встанет утром с постели царской, так и начнет горевать, и горюет до вечера.</DIV><DIV CLASS="ab">Дoлгo ли, коротко ли... </DIV>

<DIV CLASS="ab">И они жили долго и счастливо и умерли в один день.</DIV><НR>';

function show(arg)

{ clearTimeout(timer) ;

document.all.rasskaz.innerHTML=eval(arg);

document.all[oldink].className="lnk";

oldlnk=arg+'Ink'; document.all[oldink].className="lnk0";

timer=setTimeout("document.all.rasskaz.insertAdjacentHTML ("AfterBegin",'<H3>Hy что, нравится?<НЗ>') ", "60000");

}

//-->

</SCRIPT>

</HEAD>

<BODY>

<Н1>Домашняя страница Сергея Сергеева</Н1>

<BR>

<SPAN STYLE="font-weight: bold;" Сергей CepreeB</SPAN> — писатель-авангардист, автор 20 рассказов.<BR>

В жизни большой любитель собак и компьютерных игр.

<BR><BR> Некоторые его рассказы вы можете прочитать прямо здесь.</DIV> <HR>

<SPAN CLASS="lnk" ID="ivanlnk" onClick="show('ivan')">Сказка «Иван-царевич и серый заяц&гадио;</SPAN> 

<SPAN CLASS="lnk" ID="hammerlnk" onClick="show('hammer')">Рассказ «МОЛОTOK»</SPAN> </DIV>

<HR>

</BODY>

</HTML>

Как видите, переменная oldink играет здесь еще одну, вспомогательную роль: ей присваивается результат “вычисления” имени мнимой гиперссылки, и она используется при обоих сменах ее стиля. Кроме того, в этом тексте используется функция eval(), которую мы с вами еще не рассматривали:

document.all.rasskaz.innerHTML=eval(arg) ;

Для чего она нужна? Давайте разберемся. Наша функция show() получает аргумент в виде текстовой строки:

onClick="show('ivan')"

Это сделано, чтобы легче было получить имя мнимой гиперссылки, про сто сцепив эту строку со строкой Ink (ivan + Ink = ivanink). Однако если Tenepь написать просто:

document.all.rasskaz.innerHTML=arg;

то содержимое блока <DIV ID='rasskaz'> будет заменено именем переменной. то есть строкой, поступившей в качестве аргумента. Использование функции

eval() здесь позволяет получить ссылку не на имя переменной, а на ее значение,

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

Добавление фонового рисунка

То, что у нас получилось, показано на Рисунок 4.6. Прежде чем мы займемся стилевым оформлением каждого блока, давайте вместо однотонового фона установим градиент. Пусть основная информация находится на светлом фоне, а в районе блока гиперссылок логично было бы начать градиентный перелив в более темный оттенок. Только вот беда: если мы будем создавать фоновый рисунок с градиентным переливом справа, то совершенно непонятно, какой ширины он должен быть. Еще хорошо, что на этой страничке абсолютное позиционирование — можно, в принципе, начать градиент на 565-й точке слева. Однако все равно непонятно, где его заканчивать — ведь ширина экрана зависит от разрешения!

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

background-position: right;

Однако посмотрите на результат (Рисунок 4.7). Фоновый рисунок действительно выровнен по правому краю, но он повторяется во все стороны, а нам это не нужно. Чтобы он повторялся только по вертикали, нужно добавить в свой ства BODY еще такую строку:

background-repeat: repeat-y; i

Добавление звукового оформления

5.1. Добавление звукового оформления

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

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

Доменные имена

Хорошо, а как же будет “называться” наша страничка? Как пользователи Интернета смогут ее найти? Как мы уже говорили выше, любой компьютер в Интернете имеет свой уникальный IP-адрес. Поэтому, если страничка лежит на компьютере с IP-адресом, например, 194.34.45.8 в каталоге /Мураде, то любому пользователю для ее просмотра достаточно набрать в адресной строке броузера следующий адрес: http://194.34.45.8/Mypage. Однако запоминать и вводить адреса в цифровом виде не слишком удобно. Для облегчения задачи существует система так называемых доменных имен (DNS — Domain Name System). Большинству IP-адресов поставлено в соответствие некоторое название — доменное имя. Например, сайт Интернет-провайдера “Гласнет” находится по адресу http://www.glasnet.ru. Согласитесь, что запомнить и набрать такую запись человеку гораздо проще, чем бессмысленную комбинацию цифр.

Доменные имена выдаются в соответствии со строгими правилами. В конце имени, после последней точки, в них содержится так называемое имя домена верхнего уровня. В большинстве случаев это двухбуквенный код страны, которой принадлежит данный ресурс. Например, окончание .ru означает Россию, .иа — Украину, .de — Германию, .fr — Францию и т. д. Обширный список кодов стран вы можете найти в Приложении 6. Кроме того, доменом верхнего уровня может являться также трехбуквенный код, означающий организационную принадлежность ресурса. Например, .com — коммерческая организация, .gov — правительственная, .mil — военная и т. п.

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

Владельцы доменных имен второго уровня, в свою очередь, могут распоряжаться доменными именами третьего уровня и т. д., но дальнейшее раз-вертывание имен в большинстве случаев имеет только декоративный смысл. Крайнюю левую позицию в записи доменного имени занимает сетевое имя компьютера (в локальной сети), на котором работает серверная программа. Многие дают этому компьютеру имя www, чтобы подчеркнуть, что его ресурсы относятся к службе World Wide Web — тогда доменное имя сайта начинается с сочетания www.

Поясним сказанное на примере. Предположим, что имеется пользователь Сергей Сергеев, который зарегистрировался у провайдера Black Line, выбрав себе регистрационное имя (логин) sergesergeev. У провайдера, разумеется, есть собственный сервер и сайт с адресом www.blackline.ru. На этом сервере провайдер размещает веб-странички своих пользователей, каждую в отдельном каталоге. После того как Сергей Сергеев разместит свою веб-страничку на сервере провайдера, она будет, скорее всего, иметь адрес www.blackline.ru/~sergesergeev или просто www.blackline.ru/sergesergeev. Некоторые провайдеры вместо имени каталога позволяют использовать регистрационное имя в качестве домена третьего уровня, например, так: www.sergesergeev. blackline. ru.

Если же Сергей Сергеев решил разместить свою страничке на бесплатном сервере, например, в сообществе Geocities, то там ему выдадут какое-нибудь длинное имя, например: www.geocities.com/SiHconValley/6285. Сообщество Geocities — это виртуальный город со своими виртуальными улицами, кварталами и домами. Веб-страница клиента в этом “городе” — это как бы отдельное виртуальное домовладение. “Жители” этого “города” стараются селиться на тематических “улицах” по общим интересам, чтобы в свободное от основной работы время заходить друг к другу “в гости”. На самом деле, конечно. Silicon Valley (Кремниевая долина) — это просто каталог на жестком диске, и возможно, что и “домовладение” (то есть веб-страничка) с номером 6285 в нем уже реально существует.

На первый взгляд, размещать свою Web-страничку на сервере, предоставляющем такой длинный адрес, не очень удобно, и многие стараются использовать место, которое предоставляет собственный сервис-провайдер. Однако вспомните о том, что сервис-провайдеров часто меняют. Если мы разместим свою страничку у провайдера, а затем решим его сменить, то потеряем к ней доступ. Тогда наши посетители, скорее всего, еще долго будут созерцать ее в законсервированном виде — ведь мы не сможем ее обновлять. Зато когда веб-страничка расположена на Geocities или ином подобном сервере, никак не связанном с сервис-провайдером, то менять провайдеров можно сколько угодно без всякого ущерба для себя.

Здесь и далее все имена и названия гипотетические. Например, провайдера Black Line у нас не существует. В тех случаях, когда используются реальные названия, это специально указано в тексте.

Логин (login, от log in) —имя для входа в систему.

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

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

Дополнительные операторы JavaScript

Подведем промежуточный итог знакомства с JavaScript. На самом деле, мы с вами рассмотрели не так уж мало: достаточно сказать, что мы изучили практически все операторы этого языка. Конечно, все дело в том, что их не так много: операторы организации циклов (for, while и do...while), услов ные операторы (if и switch) и операторы манипулирования объектами, кото рые мы пока не рассматривали. Этих операторов всего два: with и for...in. Оба применяются в основном для сокращения объема вводимого текста. Например, вместо того чтобы написать

document.open (); document.write("Привет!") ; document.close();

можно использовать такую сокращенную запись:

with (document) {

open () ;

write("Привет!");

close ();

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

Другой оператор — for... in так же, как и оператор for, организует цикл. Но только вместо условия цикла при этом нужно указать объект, по всем свой ствам которого этот цикл и “пройдется”. Наверное, предыдущая фраза была не совсем понятна, поэтому поясним ее на примере.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE>Cвойствa Navigator</TITLE>

</HEAD>

<BODY>

for (q in. navigator) document.write(q+"="+navigator[q]+"<BR>") ;

</SCRIPT>

</BODY>

</HTML>

Работает этот сценарий следующим образом. Переменной q поочередно присваивается имя каждого свойства объекта navigator. На экран при этом выводится (с помощью метода document.write) имя свойства (q), и, после знака равенства, значение свойства — (navigator[q]) . Таким образом, можно узнать о свойствах, о существовании которых мы до этого даже не подо зревали!

Вот, например, что нам покажет броузер Internet Explorer версии 5.0, если загрузить в него эту страницу:

appCodeName=Mozilla appMinorVersion=0 appName=Microsoft Internet Explorer appVersion=4.0 (compatible; MSIE 5.0; Windows 98; DigExt) cookieEnabled=true cpuClass=x86 mimeTypes=

onLine=true opsProfile= platform=Win32 plugins= systemLanguage=ru userAgent=Mozilla/4.0 (compatible; MSIE 5.0; Windows 98; DigExt) userLanguage=ru userProfile=

Как видите, свойств довольно много. Некоторые из них, правда, дублируют друг друга. Например, свойство appMinorVersion — это число, стоящее после точки в appVersion (номер подверсии). А значение свойства userAgent состоит из комбинации значений appCodeName и appVersion. Кстати, различные броузеры покажут нам не только различные значения свойств, но и представят различный их набор. Вот, например, результат загрузки той же страницы в броузер Netscape 6:

appCodeName=Mozi1 la appName=Netscape appVersion=5.0 (Windows; en-US) language=en-US mimeTypes=[object MimeTyi " •Array] platform=Windows plugins=[object PluginArray] securityPolicy=

userAgent=Mozilla/5.0 (Windows; N; Win98; en-US; ml4) Netscape6/ 6. Obi

cookieEnabled=true

Таким образом, оператор цикла for...in можно использовать не только для сокращения времени “стучания по клавиатуре”, но и для исследования броузера!

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

Например, вместо:

if (a<=100) some function(a) ; else alert("Число превышает допустимое значение!");

можно написать так:

(а<=100) ? some function(a) : alert("Число превышает допустимое значение!");

Здесь some_function() — просто какая-то функция, определенная где-то на веб-странице.

Дополнительные варианты оформления

отображают текст, находящийся между тегами <CITY></CITY> курсивом. Например, если вы напишете следующее"

А.С. Пушкин сам говорил,

что он <CITY>лиру посвятил народу

своему</CITY> по этому есть все основания считать, что судьба русского народа

была для него не безразлична.

то большинство броузеров отобразят это так. как показано на рис 2.5(ниже)

Доступ к элементам HTML по имени

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<ТITLЕ>Мигающий зaгoлoвок</TITLE>

<STYLE> BODY { background-color: #F9FFF9;

color: #OD160E; } H2 {

text-align: center; } P { text-indent: 3em;

} </STYLE>

</HEAD>

<BODY>

<Н2>Производство <ВR>МИГАЛОК<ВR> и цветомузыкальных установок </Н2>

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

<Р>Итак, решено: вы, во что бы то ни стало, дочитываете этот текст до конца. (ДАЛЕЕ ИДЕТ КАКОЙ-НИБУДЬ ДЛИННЫЙ И СКУЧНЫЙ ТЕКСТ...)</Р>

</BODY>

</HTML>

Результат работы этой заготовки показан на Рисунок 6.6. Итак, проблема в том, чтобы заставить мигать слово “МИГАЛОК”. Ну, разумеется, можно применить стилевое свойство text-decoration: blink; или просто тег <BLINK> , но ни то, ни другое не поддерживается броузером Internet Explorer. Как же быть?

Прежде всего, надо выделить слово МИГАЛОК в отдельный элемент. Поскольку оно находится на отдельной строке, можно использовать тег <DIV>:

<Н2>Производство <DIV>МИГАЛOK</DIV> и цветомузыкальных установок.</Н2>

Чтобы иметь возможность управлять этим элементом, нужно дать ему уникальное имя, установив атрибут ID=:

<Н2>Производство <DIV ID="mig">МИГАЛOK</DIV> и цветомузыкальных установок.</Н2>

Теперь, если у пользователя броузер Netscape, можно сразу установит! мигающий стиль:

<Н2>Производство <DIV ID="mig" STYLE="text-decoration: blink;>МИГАЛOK</DIV> и цветомузыкальных установок.</Н2>

Доступ к элементам HTML по номеру

Возьмем такой пример. Предположим, что мы поместили на веб-страницу графический элемент (картинку), но хотим, чтобы она не сразу возникла в своем реальном размере, а постепенно выросло “из ничего”. Для примера можно взять изображение компьютера ATARI-800, которое уже исполь- зовалось нами в главе 3. Карту графических ссылок мы в этом примере на него ставить не будем, хотя это легко сделать, просто перенеся код из последнего примера раздела 3.1'. Сначала просто поставим картинку на сграницу:

Физический размер этой картинки — 451х310, но мы, как видите, специально уменьшили ее ширину и высоту на 300 пикселов. Теперь давайте попытаемся обратиться к ней из сценария JavaScript.

Оказывается, доступ ко всем картинкам на странице можно получить, просто написав метод document.images и указав в квадратных скобках номер картинки на странице. Вообще говоря, такой синтаксис в JavaScript употребляется по отношению к массивам элементов. То есть, если у нас есть массив из пяти элементов под названием MoyMassiv, то к его элементам следует обращаться так: MoyMassiv[0], MoyMassiv[1],..., MoyMassiv[4]-. Мас сив document.images называется коллекцией.

Нумерация картинок начинается с нуля. Наша картинка, как первая на странице, будет иметь номер 0. Следовательно, для обращения к ней из сценария следует использовать метод document.images[0]. Если бы мы поместили на страницу еще одну картинку, после первой, то к этой второй кар тинке мы могли бы обратиться так: document.images[1].

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

if (document.images[0].width<451)

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

document.images[0].width+=2;

В данном случае мы увеличили ширину картинки на 2 пиксела. Точно так же можно поступить и с ее высотой:

document.images[0].height+=2 ;

Теперь, чтобы “зациклить” нашу функцию, можно просто в конце выз вать ее же после некоторой задержки. Например, если наша функция будет называться sizer(), то последней ее строкой может быть:

setTimeout("sizer()", 20);

Такой вызов функции из самой себя называется рекурсивным вызовом и довольно часто употребляется в JavaScript. (Учтите, что так можно поступать далеко не во всех языках программирования — в некоторых языках из-за рекурсивных вызовов может случиться, например, ошибка переполнения стека, или еще какая-нибудь гадость... Но пока мы пишем код на JavaScript, об этом можно не беспокоиться.) Теперь достаточно один раз вызвать эту функцию, и далее она будет все время вызывать себя сама. Конечно, можно было сделать и как-нибудь по-другому, например оста вить в “теле” функции только само увеличение размера, а проверку и повторный вызов вынести в “тело” документа, написав там что-нибудь вроде:

while (document.images[0].width<451) setTimeout("sizer()", 20);

Однако для иллюстрации возможностей давайте все же применим рекурсивный вызов. Итак, посмотрим, что у нас получается.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE>Картинка с изменяющимся размером</ТIТLЕ>

function sizer () { if (document.images[0].width<451)

{ document.images[0].width+=2; document.images[0].height+=2; setTimeout("sizer()", 20); } } //--> </SCRIPT>

</HEAD>

<BODY>

sizer(); //-->

</SCRIPT>

</BODY>

</HTML>

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

document.images[0] width+=10;

document.images[0].height+=10;

setTimeout("sizer()", 100);

При этом, разумеется, увеличение будет происходить не так плавно, зато мы можем быть уверены, что на большинстве компьютеров такая “анимация” будет воспроизведена корректно.

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

document.images[0].width+=a; document.images[0],height+=a;

Тогда мы сможем присваивать этой переменной то положительное, то отрицательное значение, например, +2 и -2. Пусть изначально значение будет положительным:

var а=2 ;

причем это определение переменной не должно происходить внутри “тела” функции. Теперь, если картинка достигла нормальных размеров, изменим значение а на -2:

if (document.images[0].width>=451) a=-2;

Картинка начнет уменьшаться. Осталось при слишком маленьком ее раз-мере снова изменить значение а:

if (document.images[0].width<=151) a=2;

Посмотрим, как теперь будет выглядеть функция целиком (все остальное на этой странице остается таким же, как в предыдущем примере, поэтому мы не будем повторять текст всей страницы):

<!-- var a=2; function sizer()

( if (document.images[0].width>=451) a=-2;

if (document.images[0],width<=151) a=2;

document.images[0].width+=a;

document.images[0].height+=a;

setTimeout("sizer0", 20); }

//-->

</SCRIPT>

Итак, мы рассмотрели, каким образом можно получить доступ из сценария к любой картинке на веб-странице. Таким же способом можно управлять еще некоторыми элементами: ссылками и элементами тега <AREA> через метод document.links, формами через метод document.forms и document.forms[номep_формы].elements, якорями через метод document.anchors и т.д.

Другие элементы формы

Итак, запомним, что тег <INPUT> может использоваться в формах для создания самых разных элементов управления. Вид элемента зависит от значения атрибута TYPE= этого тега. Некоторые из этих значений мы уже рассмотрели. Теперь давайте просто перечислим оставшиеся:

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

А такая запись создает кнопку произвольного назначения. В отличие от кнопок типа Submit (Отправить) или Reset (Сброс), при нажатии на эту кнопку ничего не произойдет, если не написан соответствующий обработчик события (с обработчиками событий мы познакомимся в следующем разделе). Тег <lNPUTTYPE="button"> во многом аналогичен рассмотренному в главе 3 тегу <BUTTON> . Однако, в отличие от последнего, он не позволяет отображать на кнопках графику и другие нестандартные объекты. С другой стороны, будучи элементом формы, он доступен для обработки в броузере Netscape 4.

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

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

Другие свойства просмотра

Несмотря на то что программами MS Internet Explorer и Netscape Navigator пользуется подавляющее большинство пользователей Интернета, существуют и другие броузеры, то и дело используемые в работе. Среди них стоит отметить программу Opera, которую можно получить по адресу www.operasoftware.com (однако эта программа не является бесплатной — она распространяется по принципу Shareware). Кстати, в 1999 г. эксперты отмечали, что поддержка каскадных таблиц стилей (CSS) лучше всего реализована именно в этой программе. Броузер Opera имеет много достоинств (компактность, скорость работы, удобный интерфейс с детальной индикацией загрузки страницы), и прочие. Однако поддержка динамических элементов здесь осуществлена еще в меньшей степени, чем в броузерах от Netscape.

Достоин внимания также и чисто российский броузер Ariadna. Он был спроектирован специально под нужды российских пользователей. К сожалению, после версии 1.3 разработчики прекратили работу над проектом.

Средства просмотра веб-страниц сейчас встраиваются также во многие программы более “общего” назначения, например в kfm (это файловый менеджер-просмотрщик KDE, StarOffice и даже в программу работы с электронной почтой The Bat! (для просмотра HТМL-вложений). Однако все они имеют ограниченные возможности по сравнению со специализированными программами, и при создании веб-страниц на них ориентироваться не следует.

Другие возможности языка JavaScript

6.4. Другие возможности языка JavaScript

Две спектрограммы обычной звукозаписи и звукозаписи с сильно выделяющейся частотной полосой

Рисунок 5.7. Две спектрограммы: обычной, звукозаписи и звукозаписи с сильно- выделяющейся частотной полосой

называемой спектрограмме или сонограмме). На Рисунок 5.7 показаны две спектрограммы звука — для обычной записи и для записи с сильной спек тральной полосой. Если такая выделяющаяся полоса присутствует, то лучше ее перед сжатием “сравнять” с остальными. Обычно это удается сделать с помощью графического эквалайзера. В программе Sound Forge выберите из меню Process (Обработка) пункт EQ (Эквалайзер) и далее — Graphic (Графический). Открывшееся окно очень похоже по виду на обычный графический эквалайзер, с помощью которого останется только уменьшить уровень выделяющейся частотной полосы.

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

Двухслойное изображение в программе Photoshop

Рисунок 3.19. Двухслойное изображение в программе Photoshop

— А дело в том, что здесь мы подошли к одному из самых замечательных свойств программы Adobe Photoshop — умению работать со слоями. Любое изображение может состоять из нескольких слоев, которые можно произвольно располагать один над другим. Если в изображении присутствуют несколько слоев, то все манипуляции происходят только с тем слоем, который выделен на служебной палитре Слои (Layers). В нашем случае в момент вставки изображения из буфера обмена для него автоматически был создан новый слой. Таким образом, сейчас в нашем рисунке два слоя (Рисунок 3.21). Тот слой, который выделен, считается текущим. Поэтому все, что мы делаем, сейчас относится только к нему. Кстати, обратите внимание на то, что один из слоев на Рисунок 3.21 называется Фон (Background). Такой слой обязательно присутствует в каждом многослойном рисунке, и при этом он является самым нижним.

Фильтрация таблицы

Теперь можно добавить возможность выбора автора из списка и затем ото- бражать на экране книги только выбранного автора. Если в библиотеке очень много книг, такая возможность будет совсем не лишней! Сначала создадим список выбора с помощью тега <SELECT>.

Выберите автора: <SELECT NAME="auth" onChange="auth ()">

<OPTION VALUE="">Bce

<OPTION VALUE="Дюма">Дюма

<OPTION VALUE="Достоевский">Достоевский

<OPTION VALUE="Толстой">Толстой </SELECT>

Поскольку при выборе какого-либо из пунктов списка содержимое акии броузера должно изменяться, применим обработчик событий onChange (напомним, что он реагирует на изменения значения). Пусть он вызывает еще не написанную функцию auth(), которая будет выводить на экран книги только выбранного автора. Для облегчения написания этой функпии мы продублировали названия пунктов списка в атрибуте VALUE= каждого из тегов <OPTION>.

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

Поскольку имя автора у нас уже хранится как значение атрибута VALUE= , мы можем написать так:

hudlit.Filter="Author="+document.all.auth.value;

Кстати, в качестве значения атрибута VALUE= первого элемента списка (“Все”) мы не зря использовали пустую строку. Сравнение с ней в любом случае даст положительный результат, поэтому она как бы отменяет фильтр. Теперь остается только перерисовать изображения с помощью метода Reset:

hudlit.Reset () ; Вот и все1 Давайте теперь посмотрим, что у нас получилось.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE>Электронная библиотека</ТITLЕ>

<STYLE> BODY { background-color: #F4FFEF; color: #182F1A;

font-family: sans-serif;

font-size: 120%; } </STYLE>

<SCRIPT> function auth() { hudlit.Filter="Author="+document.all.auth.value ; hudlit.Reset () ; } </SCRIPT>

</HEAD>

<BODY>

<Н1>Художественная литература</Н1> Выберите автора:

<OPTION VALUE="">Bce <OPTION VALUE="Дюма">Дюма

<OPTION VALUE="Достоевский">Достоевский

<OPTION VALUE="Толстой">Толстой </SELECT> <BR><BR>

<TD><SPAN DATAFLD="Author"></SPAN>, «

<SPAN DATAFLD="Name"> </SPAN>»,

<SPAN DATAFLD="Size"></SPAN> кбайт.

</TR>

</TABLE>

</BODY>

</HTML>

Результат показан на Рисунок 9.1. На этом рисунке вы можете видеть все назва ния книг, но если пользователь выберет из списка одного из авторов, то в окне броузера отобразятся только книги выбранного автора.

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

Флажки

Теперь давайте спросим пользователя о его интересах. Для этого органи зуем список из нескольких пунктов, которые он сможет отметить флаж ками. Каждый из пунктов такого списка создается с помощью все того же тега <INPUT> , однако теперь у него должен быть атрибут TYPE="checkbox". Впрочем, этот вариант практически ничем не отличается от предыдущего, кроме того, что пользователь может выбрать сразу несколько пунктов или даже все. Например:

<LABEL FOR="Interestsl">Baiim интересы :<BR></LABEL>

<INPUT TYPE="checkbox" NAME="Interestsl" VALUE="Computers">КОМПЬЮТЕРЫ

<INPUT TYPE="checkbox" NAME="Interests2" VALUE="Sports">Cnopт

<INPUT TYPE="checkbox" NAME="Interests3" VALUE="Art">Иcкyccтво

<INPUT TYPE="checkbox" NAME="Interests4" VALUE="Science">Hayкa

В данном случае мы установили для каждого пункта разные значения атрибута NAME=, но они могли бы быть и одинаковыми. Как и в предыду щем случае, здесь можно установить атрибут CHECKED, чтобы соответствующий пункт появился на экране заранее отмеченным по умолчанию.

Давайте посмотрим, что у нас получается (для экономии места приведем текст не всей страницы, а только ее левой части):

<DIV CLASS="lft"> <Н1>Ваш отзыв о наших услугах</Н1>

<INPUT TYPE="text" NAME="Name" VALUE="Аноним" SIZE="30"><BR><BR> <LABEL FOR="Age">Baш возраст:</LABEL>

<OPTION VALUE""10">менее 20 <OPTION VALUE="20">20–30 <OPTION VALUE="30">30–40

<OPTION VALUE="40">40–50

<OPTION VALUE="50">50–60

<INPUT TYPE="radio" NAME="Sex" VALUE="М">Мужской

<INPUT TYPE="radio" NAME="Sex" VALUE="F">Женский

<BR><BR> <LABEL FOR="Interestsl">Baши интересы:<BR></LABEL>

<INPUT TYPE="checkbox" NAME="Interestsl" VALUE="Computers">Компьютеры

<INPUT TYPE="checkbox" NAME="Interests2" VALUE="Sports">Cnopт

<INPUT TYPE="checkbox" NAME="Interests3" VALUE="Art">Иcкyccтво

<INPUT TYPE="checkbox" NAME="Interests4" VALUE="Science">Hayкa

<BR><BR> <LABEL FOR="Opinion">Baшe мнение:</LABEL>

</FORM>

</DIV>

Результат работы кода показан на Рисунок 7.3. Как видите, эта форма полу чилась более разнообразной благодаря использованию разных типов эле ментов управления для ввода данных. Поэтому она и смотрится более привлекательно.

Фоновая музыка

Для воспроизведения фоновой музыки проще всего применить тег <BGSOUND> . Правда, он работает только в броузерах Internet Explorer и Mosaic, зато очень удобен. Если написать так:

то на веб-странице в качестве фоновой музыки будет исполняться файл beeth.mid, который указан в атрибуте SRC=. Атрибут LOOP= нужен для того, чтобы определить, что делать, когда музыкальный фрагмент завершится. Значение LOOP="-1" или LOOP="infinite" означает, что музыкальный файл будет проигрываться от начала до конца бесконечное количество раз (пока пользователь не покинет веб-страницу). Значением атрибута LOOP= может быть положительное число, означающее количество повторов звукозаписи. Например, при LOOP="4" файл будет проигран четыре раза.

Для броузера Internet Explorer версии 4 (и более поздних) можно применять еще два атрибута: VOLUME= и BALANCE=. С помощью атрибута VOLUME= можно уменьшить громкость звучания. Именно уменьшить, поскольку | значение этого атрибута по умолчанию равно нулю, что соответствует максимальной громкости. Теоретически, предельное значение атрибута

VOLUME= равно -10 000, однако обычно в использовании значений менее -1000 особого смысла нет.

Атрибут BALANCE= задает смещение звука по панораме. Его значение равное “-10 000” соответствует крайнему левому положению, а “10 ООО” — крайнему правому. Значение по умолчанию равно нулю, что соответствует расположению звука по центру, в большинстве случаев является оптимальным решением.

Существует еще один атрибут тега <BGSOUND>, работающий только в броузере Mosaic. Это атрибут DELAY=, который определяет паузу перед нача лом звучания фонового музыкального файла. Интересно, что значение DELAY= нужно указывать в секундах (а не в миллисекундах, как обычно). Применение этого атрибута имеет смысл только для не больших аудиоклипов, поскольку обычно музыкальный файл все равно начинает звучать после некоторой задержки, так как загружается довольно долго, особенно если это файл формата WAVE или AIFF.

Фоновое изображение

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

Допустим, что у нас заготовлен соответствующий фоно вый рисунок (о том, как это сделать, см. в разделе 3.5) — он записан в файле под именем back1 .jpg (Рисунок 3.1). Если при отдельном просмотре этого рисунка он вам нравится, это еще ничего не значит. Чтобы определить, подходит ли рисунок в качестве фона к тексту, его нужно проверить “в деле”.

Чтобы поместить рисунок на веб-страницу в качестве фона, нужно установить в теге <BODY> атрибут BACKGROUND= со значением, содержащим имя файла рисунка.

Если рисунок меньше окна броузера, то он будет повторяться по горизонтали и по вертикали. Это происходит автоматически, и до недавнего времени это нельзя было отменить. Теперь же, если вы не хотите повторения

Фоновый рисунок

Рисунок 3.1. Фоновый рисунок

Можно указать либо относительное местоположение файла рисунка (то есть путь доступа к нему относительно расположение исходного HTML-файла), либо его полный URL-адрес. Здесь и далее мы предполагаем, что вы разместили в той же папке, что и HTML-файл, папку \lmages, в которую складываете все графические файлы.

Вернемся к нашему рисунку. Ясно, что на таком сероватом фоне черные буквы будут читаться плохо, поэтому сразу определим для текста белый цвет (или почти белый). Гиперссылок у нас пока нет, но о них все равно надо позаботиться заранее. Пока давайте определим для них желтый цвет. Посмотрим, что у нас получается:

<HTML>

<HEAD>

<TITLE>Клавинова</TITLE>

</HEAD>

<H1><DIV ALIGN="center">Клавинова</DIV></H1>

Инструменты серии

<BIG>Клавинова</BIG>

, выпускаемые компанией Yamaha, являются достойной заменой

<I>обычных</I>

пианино для массового пользователя. Во-первых,

<BIG>KJIABHHOBA</BIG>

стоит

<В>дешевле</В>

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

<U>лучше</U>

, чем на «живых» инструментах того же (или даже чуть более

<SUP>высокого</SUP>)

ценового диапазона.

</Р> </BODY> </HTML>

Результат показан на Рисунок 3.2. Кстати, обратите внимание, что здесь мы немного “поработали” с элементами текста, чтобы чуть-чуть оживить их: название “клавинова” выделено крупным шрифтом, достоинства — где подчеркнуты, где выделены полужирным шрифтом, слово “обычных” для подчеркивания иронии выделено курсивом, а слово “высокого” поднято над основным текстом с помощью тега <SUP>.

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

Форма с элементами управления

Рисунок 7.3. Форма с элементами управления

Формат GIF

Формат GIF предназначен в основном для “рисованных” изображений: чертежей, графиков и т. д. В нем используется так называемая индекси- рованная цветовая палитра. Максимальное количество цветов в ней — 256. Так что не стоит сохранять в формате GIF, например, многоцветные фотографии — размер файла останется довольно большим, а качество изображения заметно ухудшится за счет уменьшения количества цветов. Зато файлы, содержащие много одноцветных точек, расположенных рядом, сжимаются с помощью формата GIF до небольших размеров. Кроме того, . формат GIF имеет еще ряд достоинств.

Формат JPEG

Теперь несколько слов о другом распространенном графическом формате — JPEG (файлы этого формата могут иметь расширение как .jpeg, так и .jpg). В отличие от GIF, этот формат предназначен для изображений типа фотографий. Файлы этого формата не ограничены палитрой из 256 цветов, при желании они могут содержать до 16 777 216 (то есть 2 24 ) цветов.

При сохранении JPEG-файла любая графическая программа указать степень сжатия, которую обычно измеряют в некоторых условных единицах от 1 до 100 (иногда от 1 до 10). При этом большее число соответствует меньшей степени сжатия, но лучшему качеству. И здесь важно найти хороший баланс. В большинстве случаев сжатие порядка 30-40% дает вполне качественный результат.

Итак, старайтесь во всех случаях обходиться этими двумя форматами. Если же возникла ужасная необходимость воспользоваться каким-либо другим форматом, потрудитесь выяснить, какие броузеры способны его отображать и какие дополнительные модули для этого нужны. Сообщите об этом на своей страничке рядом с файлом “экзотического” формата и поставьте гиперссылки на сайты, откуда можно эти дополнительные средства загрузить. А еще лучше будет, если в качестве альтернативного варианта поместите также изображение в формате GIF или JPEG

Формат МРЗ

Другой распространенный формат сжатия звуковых данных называется MPEG 1 Layer 3, а сокращенно — просто МРЗ (именно такое расширение имени обычно имеют файлы этого формата). Этот формат использует другие алгоритмы сжатия. Для некоторых звуковых файлов они подходят лучше, чем алгоритмы RealAudio, для некоторых — хуже). Кроме того, поддерживаются степени сжатия до 320 Кбит/с. Такое сжатие уменьшает исходный несжатый файл всего в четыре раза, зато его качество практи- чески неотличимо от “настоящего”. Часто используют МРЗ-сжатие с шириной потока 128 Кбит/с, при котором исходные файлы сжимаются приблизительно в 10 раз, а качество звучания все еще остается близким к оригиналу.

Формат MPEG 1 Layer 3 также поддерживает возможность потокового воспроизведения. Например, если в .RAM-файле указать файл формата МРЗ, то он тоже начнет воспроизводиться почти сразу же после нажатия на гиперссылку. Но все же главным преимуществом МРЗ является поддержка степеней сжатия от 128 до 320 Кбит/с, а такие скорости соединения с Интернетом встречаются не очень часто. При степени сжатия 64 Кбит/с и менее, как правило, более качественный результат дает сжатие в формате RealAudio. Поэтому МРЗ-файлы редко используют для прослушивания через Интернет. Обычно их предлагают сначала загрузить целиком. В отличие от WAVE-файлов, у МРЗ-файлов есть еще дно полезное свойство. Если при загрузке МРЗ-файла прервется связь и нет возможности дозагрузки, то это не так обидно, поскольку можно прослушать хотя бы ту часть файла, которая загрузилась.