Управление “подсветкой” кнопок

Теперь назначим обработчику событий onMouseOver смену изображения. Собственно говоря, для этого нужно всего лишь изменить атрибут SRC= тегa <IMG>:

Теперь при наведении указателя мыши на кнопку Altavista вид кнопки изме нится, так как будет загружен другой рисунок. Точно таким же способом Iнужно сменить изображение обратно при выведении указателя мыши за пределы кнопки:

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

Управление расположением элементов вебстраницы с помощью таблиц

8.2. Управление расположением элементов веб-страницы с помощью таблиц

В World Wide Web довольно часто встречаются страницы, на которых произвольное расположение элементов достигается с помощью таблиц. В частности, такой подход часто применяют, если необходимо оставить на странице относительно большие “пустоты”.

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

Сначала определим стили будущей страницы — цвет фона и центрирование текста:

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

} H2 { text-align: center;

} TD { font-family: MS Comic Sans, sans-serif;

text-align: center; } </STYLE>

Теперь можно задать параметры самой таблицы. При этом отступ от внутраннего края ячейки (CELLPADDING=) и расстояние между ячейками (CELLSPACING=) лучше задать равными нулю, чтобы ничто не отвлекало нас от задания минимальных размеров ячеек:

Управление шириной столбцов

Если вы посмотрите на Рисунок 2.2 0 , то увидите, что ширина столбцов в нашей таблице разная. Это происходит потому, что броузер распределяет место в таблице в зависимости от количества текста, которого в первом столбце оказалось больше. Однако, если в теге первой ячейки указать <TD WIDTH="50%"> , то оба столбца станут равными по ширине. Таким образом, можно пользоваться атрибутом WIDTH= в теге <TD> так же, как и в теге <TABLE> , определяя ширину каждой ячейки либо в пикселах, либо в процентах от общей ширины окна броузера. Правда, строго говоря, нельзя задать ширину каждой ячейки, а лишь ширину каждого столбца, поскольку в большинстве броузеров все ячейки в столбце всегда имеют одинаковую ширину.

Более того, надо иметь в виду, что большинство броузеров могут произвольно отходить от заданных нами значений ширины ячеек, если сочтут нужным. Так что никогда нельзя полностью полагаться на атрибут WIDTH=. А если совершенно необходимо точно задать ширину какой-либо ячейки, следует пользоваться более изощренными средствами. Например, для задания минимальной ширины можно поместить в ячейку таблицы прозрачный рисунок соответствующего размера. О том, как это делается.

Управление шрифтом

Чтобы изменить размер шрифта, можно использовать тег <FONT> с атрибутом SIZE=. Вообще говоря, WWW-консорциум не особенно рекомендует использовать тег <FONT> в HTML 4.0. Мы считаем, что злоупотреблять им действительно не нужно, когда есть возможность использования каскадных таблиц стилей CSS, о чем мы поговорим в главе 4. Однако иногда для мелких корректив этот тег бывает очень удобен. Например, если мы поставим перед вступительным текстом тег

f поcле него — закрывающий тег </FONT>, то весь текст, оказавшийся между этими тегами, будет отображен шрифтом на один “уровень” круп-нее обычного.

Возникает вопрос: а каков размер “обычного” шрифта? В языке HTML для тега <FONT> были определены семь основных размеров шрифта, измеряемых не в пунктах, а в некоторых условных единицах — от 1 до 7. Как правило, обычный шрифт имеет размер “З”, если не определено иное с помощью тега <BASEFONT> (например, так: <BASEFONT SIZE="6">) . В послед- нее время такое определение размеров не рекомендуется, поскольку с помощью CSS можно определить размеры шрифта в любых привычных единицах.

Необходимо различать записи <FONT SIZE="+1" и <FONT SIZE="1"> . В пер- вом случае указывается относительный размер шрифта, а во втором — абсолютный. Соответственно, для временного уменьшения размера шрифта можно использовать запись <FONT SIZE="-1"> . Можно использо- вать также значения "+2", "-2", "+3" и т. д. Кстати, для увеличения или уменьшения шрифта на одну единицу можно использовать также теги <BIG> и <SMALL> (они используются с закрывающими тегами).

Теперь давайте выделим еще некоторые элементы нашей страницы. Чтобы отобразить подзаголовки рассказов курсивом, их можно поместить между тегами <I> и </I> :

<Н2><Р АLIGN+"center">ИВАН-ЦАРЕВИЧ И СЕРЫЙ ЗАЯЦ<ВК> <I>сказка</I></Р></Н2>

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

Мы можем также выделить фамилию нашего героя во вступительном тексте полужирным шрифтом, используя тег <В> :

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

Такой же результат даст использование тега <STRONG> . Более гибко управлять выделением можно с помощью CSS

Для выделения какой-либо части текста можно использовать подчеркивание, поместив текст между тегами <U> и </U> . Однако злоупотреблять этим не следует, поскольку подчеркнутый текст в WWW ассоциируется с гиперссылками и читатель будет весьма разочарован, когда щелчок мыши по подчеркнутому тексту ни к чему не приведет.

Иногда требуется также зачеркнуть отдельные слова в тексте (например, при снижении цен на товары обычно указывают старую цену в зачеркнутом виде). Для этого служит тег <STRIKE>:

Старая цена: <STRIKE>168 рублей </STRIKE> Новая цена: <FONT SIZE="+1">102 рубля</FONТ>

Результат представлен на Рисунок 2.3. Некоторые броузеры понимают также сокращенное написание этого тега — <S> . Однако для хорошей совмести мости пользуйтесь лучше тегом <STRIKE> (пока возможно, совместимость

со всеми броузерами все же лучше поддерживать, тем более что на данном этапе это совсем несложно).

Управление выравниванием текста

В данном случае нам потребуется такой атрибут, как выравнивание (выключка) текста. Он может употребляться с разными тегами. Поскольку на нашей страничке и заголовок, и эпиграф должны быть отделены друг от друга и от основного текста, имеет смысл употребить тег <Р> . Каждый фрагмент текста, заключенный между тегами <Р> и </Р> , будет представлять собой отдельный абзац:

<Р>Это первый абзац.</Р> <Р>Это второй абзац.</Р> <Р>Это третий абзац и т. д.</Р>

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

<Р ALIGN="center">3AГOЛOBOK РАССКАЗА № !</Р>

Вы, очевидно, уже поняли, что атрибут ALIGN= означает выравнивание. Ему присвоено значение "center" для выравнивания текста по центру страницы. Между атрибутом и его значением всегда должен стоять знак равенства. Для того чтобы расположить эпиграф по правому краю, надо, соответственно, атрибуту ALIGN= присвоить значение "right":

<Р ALIGN="right">ЭПИГРАФ</P>

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

<HTML>

<HEAD>

<TITLE>Домашняя страница Сергея Cepreeвa</TITLE>

</HEAD>

<BODY>

<FONT FACE="Times New Roman"><P>Домашняя страница Сергея Сергеева<BR>

<BR>

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

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

<BR>

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

<P ALIGN="CENTER">ИBAH-ЦAPEBИЧ И СЕРЫЙ ЗАЯЦ<BR>

сказка</Р></P>

<P ALIGN="RIGHT">Hy, погоди!.. <BR>

(Из мультфильма)</P>

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

Долго ли, коротко ли, ... (тут располагается еще несколько абзацев, разделенных тегом BR, хотя это не единственный способ разделения абзацев)...<BR>

И они жили долго и счастливо и умерли в один день. </P>

<P ALIGN="CENTER">MOЛOTOK<BR>

рассказ</P>

<P ALIGN="RIGHT">Мы кузнецы, и дух наш молод.<BR>

(Из песни)</P>

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

</BODY>

</HTML>

Результат показан на Рисунок 2.1. Как видите, это весьма похоже на то, что было задумано. Однако сразу бросаются в глаза несколько недостатков. Во-первых, абзацы в основном тексте на вид плохо отделены друг от друга, хотя и разделены тегом <BR> .

Усложненный пример

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

function callitO { var q; q=prompt ("Введите целое число от 0 до 170", "5") ;

q=parselnt(q) ; if (isNaN(q)) alert ("Должно быть введено ЧИСЛО в пределах от 0 до 170");

else if ((q<0)|| (q>l70)) alert ("Чиг-ло должно быть в пределах от 0 до 170");

else document .write<q+"! = "+fct(q)+"<BR>");

}

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

Теперь мы можем вызывать ее из “тела” документа сколько угодно раз, написав просто callit(). Например, можно организовать цикл для 10-кратного ее вызова:

for (var j=1; j<11; j++) callit();

Можно также организовать бесконечный цикл:

while (true) callit();

Для этого мы использовали оператор условной организации цикла while. Он проверяет условие, которое записано в скобках, и, если оно верно, выполняется действие (или блок действий), указанное после этого оператора.

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

Однако хорошо бы сначала спросить мнение пользователя, желает ли он повторения цикла, а то мы так и не позволим ему уйти со своей страницы. Для этого можно воспользоваться методом confirm. Он очень похож на метод alert, однако здесь пользователь имеет возможность нажать одну из двух кнопок (ОК или Отмена). Если нажата кнопка ОК, возвращается значение “истина” (true), если нажата кнопка Отмена, возвращается значение “ложь” (false).

while (confirm ("Повторить?")) callit();

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

do callit(); while (confirm ("Повторить?"));

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

Вот как будет вьглядеть текст этой веб-страницы целиком.

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

<HTML>

<HEAD>

<TITLE>Вычисление факториала</ТITLЕ>

<SCRIPT> function fct(a) { if ((a=0)| | (a=l)) return 1;

else { var i=l ; for (a; a>l; a--) i*=a; return i; } }

function callit() { var q; q=prompt ("Введите целое число от 0 до 170", "5") ; q=parselnt(q) ; if (isNaN(q)) alert("Должно быть введено ЧИСЛО в пределах от 0 до 170");

else if ( (q<0) | | (q>170) ) alert("Число должно быть в пределах от 0 до 170");

else document.write(q+"! = "+fct(q)+"<BR>");

} </SCRIPT>

</HEAD>

<BODY>

<SCRIPT> do callit() ;

while (confirm ("Повторить?")) ;

document.write("<HR WIDTH=100 ALIGN”'left'>");

</SCRIPT>

</BODY>

</HTML>

Действие этого кода показано на Рисунок 6.5. Как видите, результат каждого вычисления помещается в окно броузера. Если сейчас нажать кнопку Отмена, под результатами будет проведена горизонтальная черта.

Устранение постоянной составляющей

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

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

Устранение выделяющейся спектральной полосы

И, наконец, еще один момент. Если в записи присутствует сильно выделяющаяся спектральная полоса (это можно заметить визуально на так

Вебредактор Arachnophilia

Веб-редактор Arachnophilia

Завершив краткий обзор возможностей программы TextPad, давайте рассмотрим другую программу для написания .HTML-кода — Arachnophilia, которую можно получить по адресу www.arachnoid.com/arachnophilia.

Как и в предыдущем случае, программа автоматически подсвечивает синим цветом теги и атрибуты, а значения атрибутов — зеленым, что улучшает зрительное восприятие, хотя проверка правильности тегов и отсутствует. Зато если случайно забыть закрыть тег, то все последующее содержимое файла подсветится бордовым цветом, так что ошибка сразу бросится в глаза. В программе Arachnophilia предусмотрена автоматизация ввода тегов HTML. В нижней части окна имеются кнопки, каждая из которых открывает соответствующую кнопочную панель. На этих панелях расположены кнопки для быстрого ввода тегов. Например, если нажать кнопку Styles (Стили), то откроется панель управления, содержащая кнопки для ввода тегов форматирования текста . Нажатие на любую из них вводит тег или блок-заготовку. Например, после нажатия на кнопку BR в тексте появится тег <BR>, а после нажатия на кнопку HR — появится сразу целая заготовка: <HR WIDTH="95%" ALIGN=CENTER>.

Нажатие некоторых кнопок вызывает появление диалоговых окон. Например, нажав на кнопку Color (Цвет), можно открыть стандартное диалоговое окно выбора цвета, а с помощью кнопки TableWiz (Мастер таблиц) открывают диалоговое окно Table Wizard (Мастер таблиц), средствами которого можно предварительно задать количество строк и столбцов в таблице, а также определить ее ширину, цвет линий и некоторые другие параметры .

Отличительной особенностью программы является возможность легкого просмотра веб-страницы в различных броузерах, для чего в меню Preview (Предварительный просмотр) предусмотрен пункт Identify Browser (Указать Лроузер). Здесь можно назначить до шести различных броузеров, в каждом из которых легко открыть создаваемый HTML-файл для просмотра, даже не сохраняя его на диске.

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

В программе Arachnophilia существует множество дополнительных полезных функций. Например, в меню Selection (Фрагмент) есть команда Find/Replace/Count (Поиск/Замена/Пересчет), которая позволяет быстро найти или заменить нужные слова в выделенной области, что часто очень выручает при создании веб-страниц. Команда Tag Delimiters (Ограничители тегов) из того же меню позволяет преобразовать угловые скобки, являющиеся общепринятыми ограничителями тегов HTML, в специальные символы &lt и &gt, что необходимо, когда надо показать код HTML на самой веб-странице. Можно также осуществить обратное преобразование. В этом же меню есть команда Strip all HTML tags (Скрыть теги HTML), с помощью которой можно быстро освободить текст от HTML-тегов, например, для переноса его в другую программу. Программа Arachnophilia, кстати говоря, способна читать и записывать файлы формата RTF(Rich TextFormat). При открытии RTF-файла предлагается конвертировать его в формат HTML, но его можно редактировать и в обычном виде.

Интересно, что программу Arachnophilia 4.0 можно загрузить как в полном виде (это установочный файл размером полтора мегабайта), так и в сокращенном (1 Мбайт), если в системе установлены необходимые библиотеки. Можно также загрузить только исполняемый файл, а остальное дозагру-жать по мере необходимости.

Вебредактор TextPad

Веб-редактор TextPad

Итак, начнем. Тем, кто предпочитает набирать код HTML вручную, но кому не хватает функциональности Блокнота и подобных ему программ, можно посоветовать программу под названием TextPad, которую можно загрузить, обратившись по адресу www.textpad.com. Эта программа по сути весьма похожа на Блокнот, однако разработчики специально предусмотрели некоторые удобства для того, чтобы писать код HTML (а также языков Java, С, C++, Perl и еще некоторых). Это выражается в том, что при написании HTML -документа все теги автоматически подсвечиваются синим цветом, их атрибуты — темно-синим, а значения атрибутов — зеленым (цвета можно настроить по собственному желанию, так же, как и шрифт). Это очень удобно. К примеру, если автор случайно ошибется в имени тега или атрибута, то оно останется черным, и он сразу поймет, что здесь что-то не то. Правда, проверка не является “ интеллектуальной”: программа может спокойно “разрешить” приписать тегу какое-либо свойство, которого у него в принципе быть не может (спокойно подсвечивает абракадабру типа <BR ALIGN="top"> или </BR> ).

В отличие от Блокнота, TextPad — редактор многооконный. В нем можно открыть сразу несколько документов и работать, легко переключаясь между ними с помощью списка в левой части окна или вкладок в нижней части.

Веб-редактор TextPad позволяет автоматизировать набор многих тегов. Если не хочется набирать их вручную (многие этого не любят просто из-за того, что приходится переключаться на латинский шрифт), то обратите внимание на левую нижнюю часть окна программы. Там приведен список наиболее распространенных HTML-тегов, которые можно вставлять в свой основной текст двойным щелчком мыши. Правда, в списке указаны не сами теги, а их описание. Например, чтобы вставить тег <BR> , нужно выбрать из списка пункт Block > Break Line. Однако к этому быстро привыкаешь. Почти все пункты списка вставляют теги вместе с закрывающим парным тегом. Например, если выбрать пункт Block > Preformatted, в текст автоматически будут добавлены теги и <PRE> и </PRE> . Некоторые пункты добавляют сразу целые блоки-заготовки. Если, к примеру, выбрать пункт Table (Таблица), в текст будет вставлен такой код:

</TABLE>

Значения этих тегов и их атрибутов мы рассмотрим позже, а пока обратим внимание на то, что кроме списка тегов TextPad предоставляет нам также возможность выбирать из списка специальные символы (список HTML Characters), а также, если потребуется, любой управляющий символ, например символы псевдографики DOS и другие. Те, кто часто вводят какие-либо последовательности символов, что при написании веб-страниц не редкость, могут облегчить свою задачу, записав в TextPad соответствующие макросы. Для записи макроса надо нажать комбинацию клавиш CTRL+SHIFT+R (или выбрать из меню Macros пункт Record). При этом начнется запись макроса, то есть все последующие действия будут запомнены. Чтобы закончить запись, надо снова нажать комбинацию клавиш CTRL+SHIFT+R, после чего присвоить имя файлу макроса, а также дать название для представления макроса в меню. Здесь можно также дать, если нужно, краткое описание макроса и указать имя его автора. После нажатия на кнопку ОК название макроса появится в меню Macros. Выбрав его, можно ввести сразу всю заданную последовательность символов.

Для удобства отладки можно установить флажок в пункте Line Numbers (Нумерация строк) в меню View (Вид), — в этом случае все строки текста будут пронумерованы. Хочется отметить, что если в меню Configure (Настройка) включен пункт Word Wrap (Перенос по словам) для автоматического переноса концов длинных строк в видимую часть экрана, то каждая такая длинная строка все равно будет нумероваться одним номером, а не двумя или тремя (кстати, такая нумерация почему-то недоступна в замечательной программе Homesite, о которой речь пойдет ниже). А если в меню View (Вид) включить флажок Visible Spaces (Отображать пробелы), то можно увидеть на экране и “невидимые символы”, такие, как пробелы, символы табуляции и прочие.

В программе TextPad можно легко сравнить два файла, выбрав из меню Tools (Сервис) пункт Compare Files (Сравнить файлы). А если есть два (или более) похожих файла, в некоторые местах которых надо внести изменения, удобно использовать функцию Synchronize Scrolling (Одновременная прокрутка) из меню Configure (Настройка). В этом случае можно открыть сразу несколько файлов, например, выбрав из меню Windows (Окна) пункт Tile Vertically (Расположить по вертикали), и тогда при прокрутке одного из них другие прокручиваются синхронно. Среди других полезных функций программы TextPad стоит отметить возможность автоматической смены клавиатурного регистра командой Edit >

Change Case (Правка > Сменить регистр), автоматического копирования в буфер слова или строки, на которой находится курсор, с помощью команд Edit ” Cut Other (Правка > Вырезать) и Edit > Сору Other (Правка > Копировать), а также функцию проверки орфографии Tools > Spelling (Сервис > Правописание). И, конечно, здесь присутствует возможность просмотра созданного файла в броузере View > In Web Browser (Вид > В броузере).

Вебредакторы типа WYSIWYG

Веб-редакторы типа WYSIWYG

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

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

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

Вообще говоря, для редактирования HTML-текста в режиме WYSIWYG можно использовать даже такой текстовый процессор, как Microsoft Word. Начиная с версии MS Word 97 он позволяет набрать некоторый текст, отформатировать его и сохранить в формате HTML. Если будете это делать, не забудьте удалить комментарии...

Вебстраница на которой “бесполезная” в данный момент кнопка недоступна

Рисунок 7.6. Веб-страница, на которой “бесполезная” в данный момент кнопка недоступна

Заметим, что приведенная выше страница будет работать только в Internet Explorer. Ее можно заставить работать и в Netscape 6 тем же способом, который мы применили в предыдущем примере — путем написания функции, присваивающей одной и той же переменной либо значение document.all, либо document.getElementByld, в зависимости от типа броузера:

var doc, butti, butt2; function brws(),

{ if (navigator.appName!""Netscape") ( buttl=dofc.ument .all. butti; butt2=docwnent.all.butt2; doc=docunysnt. all. doc;

}

else (

buttl=document.getElementById("buttl") ;

butt2=document.getElementById("butt2") ;

doc=document.getElementById("doc") ;

} }

Затем следует переписать функции noBg() и colChange( ), убрав из них обра щение document.all:

function noBg() { if (doc.style.backgroundlmage!="none")

{ doc.style.backgroundlmage='none' ; butti,value='Вернуть фоновый рисунок'; butt2.disabled=false;

} else {

doc.style.backgroundlmage="url('Images/gradi.jpg')";

butti.value='Убрать фоновый рисунок'; butt2.disabled=true;

}

function colChange()

{ if (doc.style.backgroundColor!='white')

{ doc.style.backgroundColor='white' ; butt2.value='Сделать фон зеленым';

} else { doc.style.backgroundColor='#BFFFBF' ;

butt2.value='Сделать фон белым'; } }

И, наконец, назначить выполнение функции brws() сразу после загрузки страницы:

Теперь наш код будет одинаково работать и в Internet Explorer 4+, и в Netscape 6. Что касается Netscape 4, то, если постараться, можно заставить эту стра ницу работать и там, но это будет довольно сложно. В Netscape 4 нельзя получить доступ непосредственно к свойствам тега <BODY> , однако броузер можно “обмануть”, использовав либо тег <LAYER> и коллекцию document.layers, либо свойства типа document.body.bgColor. Давайте лучше не будем этим заниматься, тем более что смотреть нашу страницу в Netscape 4 все равно можно, просто обе наши кнопки в нем вообще не отобразятся (этот броу зер не воспринимает теги <INPUT> вне элемента <FORM> ).

Вложенные наборы фреймов

— Хорошо, — скажете вы, а как быть, если мы захотим, к примеру, oто- бразить заголовок страницы во всю ширину окна броузера, а уж под ним расположить левый и правый фреймы?

— Это весьма просто. Создадим отдельный НТМL-файл заголовка.

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

<HTML>

<HEAD>

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

<!--

BODY { background-color: #BABAAO;

color: rgb(29,29,24); . } HI { text-align: center; }

-->

</STYLE> </HEAD>

<BODY>

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

</BODY>

</HTML>

Назовем этот файл, например, serghdr. html. Далее удалим заголовок из файла sergtext.html. И теперь давайте немного подумаем. Чтобы расположить наш заголовок в верхнем фрейме, придется сначала определить набор горизонтальных фреймов с помощью атрибута ROWS= в теге <FRAMESET>:

Здесь мы определили высоту верхнего фрейма в 80 пикселов — вполне достаточно для заголовка. Теперь определим содержимое верхнего фрейма (загрузим туда наш только что созданный файл serghdr.html):

Теперь нужно определить содержимое нижнего фрейма. А что там должно находиться? А там должен находиться тот самый набор фреймов, который был определен в прошлом примере! К счастью, нам ничто не мешает в качестве содержимого одного из фреймов указывать тег <FRAMESET> — ведь каждый фрейм имеет те же “права”, что и отдельное окно броузера! Вот что у нас получится в целом.

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

<HTML>

<HEAD>

<ТITLE>Домашняя страница Сергея CepreeBa</TITLE>

</HEAD>

</FRAMESET> </FRAMESET> </HTML>

Внешние гиперссылки

Однако гиперссылки можно устанавливать не только на файлы, содержа-щиеся в своем каталоге на сервере, но и на любые другие Интернет-ресурсы. В этом случае в качестве значения атрибута HREF= необходимо указать полный URL-appec ресурса, как показано ниже. Рассмотрим такой пример. Допустим, мы хотим сделать страничку, с которой можно легко попадать на излюбленные поисковые системы 1 . Естественно, для этого необходимо указывать полные URL-адреса этих сайтов, например, вот так:

Поисковая машина <А HREF="http://www.altavista.com">"Altavista" </А>

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

Один из выходов состоит в том, чтобы не загружать сайт поисковой машины в том же окне броузера, в которое была загружена наша веб-страница, а открыть ее в новом окне. Для этого нужно в теге <А> установить атрибут TARGET= со значением "_blank", следующим образом:

Поисковая машина <А HREF="http://www.altavista.corn" TARGET="_blank">"Altavista"</A><BR>

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

<html>

<head>

<title>Поисковая машина</title>

</head>

<body BGCOLOR="#FPAEAE" TEXT="#480000" LINK="#C10000"

VLINK="#C10000" ALINK="#C10000">

<H1><DIV ALIGN="center">Поисковая машина</DIV></H1>

<br>

Если вы ищете в Интернете какую-либо информацию, вам помогут

следующие сайты:

Поисковая машина <A HREF="http://www.altavista.corn"

TARGET="_blank">"Altavista"</A><br>

Каталог ресурсов <A HREF="http://www.yahoo.corn"

TARGET="_blank">"Yahoo! "</A><br>

Поисковая машина <A HREF="http://www.yandex.ru"

TARGET="_blank">"Яndex"</A><br>

Поисковая машина <A HREF="http://www.aport.ru"

TARGET="_blank">"Anopт"</a>

</BODY>

</HTML>

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

Внешние стилевые таблицы

Еще одно замечательное свойство стилевых таблиц заключается в том, что с помощью одной таблицы, находящейся в отдельной файле, можно задавать стили для целого набора веб-страниц. Это, кстати, очень важно при разработке больших сайтов, поскольку, во-первых, способствует сохра нению единства стиля, а во-вторых, предоставляет возможность быстро изменить что-либо сразу во многих файлах проекта. Для этого следует просто написать всю таблицу стилей (без тегов <STYLE> и </STYLE> ) в отдельном файле с расширением .css, а затем “подключить” ее во всех HTML- документах, которые должны ее использовать. Например, если файл таблицы стилей называется mainstyle.css, то в раздел <HEAD> каждого из использующих ее HTML-документов, нужно вставить такую строку:

Атрибут TYPE= указывать не обязательно, но лучше это сделать (кстати, это можно делать и в теге <STYLE> ). Во-первых, это признак хорошего тона, а потом мало ли что — вдруг пользователю, к примеру, попадется какой-нибудь сумасшедший броузер, использующий для стилевых таблиц по умолчанию не CSS, а, допустим, JASS.

Есть и другой способ “подключения” стилевой таблицы из внешнего файла — директива @import. Она употребляется следующим образом:

<STYLE TYPE="text/css"> @import url (mainstyle.css) ; </STYLE>

Как видите, эта директива должна находится между тегами <STYLE> и </STYLE> , поскольку она не является элементом языка HTML (как тег <LINK> ). Ее использование менее предпочтительно, поскольку броузеры могут интерпретировать ее по-разному.

Встроенные функции JavaScript

Теперь о функциях. Мы уже научились определять собственные функции. Кроме того, в JavaScript существуют так называемые встроенные (или предопределенные) функции. Некоторые из них мы уже знаем — это isNaNQ и parselnt(). Кстати, функция parselnt() имеет еще одну замечательную особенность: с ее помощью можно распознать число, введенное в любой системе счисления, начиная от двоичной и кончая 36-ричной. Для этого нужно просто в качестве второго аргумента указать основание системы счисления, например, вот так: parselnt("1110", 2);

В этом случае строка 1110 будет интерпретирована как двоичное число, и результатом функции будет число 14.

Кроме этих двух функций существуют еще функции parseRoat() и isFinite(). Функция parseFloat() не может принимать второй аргумент, зато может выделить из строки дробное число. Например, если написать

parseint("3.289 times"); то результатом выполнения функции будет число 3, а если написать

parseFloat("3.289 times");

результатом будет число 3,289. Кроме того, с помощью этой функции можно распознать число, введенное в нормализованной форме, например:

parseFloat ("3.755е-2") ; даст в результате 0,03755.

Что касается функции isFinite(), то она принимает значение истина, если аргумент является числом, или ложь — в противном случае. Как вы можете заметить, она делает то же, что и функция isNaN(), только с противоположным результатом.

Существует еще полезная функция eval(). Она обычно определяется, как вычисление выражения без ссылки на конкретный объект. Сходу это понять довольно трудно.

Иногда в JavaScript используются конструкции, очень похожие на функции. Например, в одном из предыдущих разделов для возведения в степень мы написали:

Math.pow(j,i)

Такие конструкции, как правило, являются методами одного из встроенных объектов. Если вы пока плохо представляете себе, что это такое, не огорчайтесь. Для их употребления это совершенно не важно, поскольку их синтаксис очень похож на синтаксис функций. Например, выше было продемонстрировано возведение в степень. Можно осуществлять и другие действия с помощью объекта Math. Например, для округления числа i до ближайшего целого достаточно написать Math.round(i), а для вычисления его синуса — Math.sin(i).

Кроме того, можно пользоваться свойствами объекта Math. Если, к примеру, потребовалось ввести число тг, то не стоит вспоминать его с точностью до какого-то там знака — достаточно написать вместо него Math PI. Можно точно так же определить другие важные математические константы.

Помимо объекта Math, в JavaScript имеются и другие, например Array для работы с массивами, Date для работы с датами и прочие.

Вторая исходная фотография для монтажа

Рисунок 3.18. Вторая исходная фотография для монтажа

Сначала с помощью инструмента Волшебная палочка

Ввод данных пользователем в формы HTML

7.1. Ввод данных пользователем в формы HTML

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

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

Ввод текста в программе Adobe Photoshop

Рисунок 3.33. Ввод текста в программе Adobe Photoshop

В нем определим цвет будущего текста Happy Birthday, его размер (в данном случае 40 пункта) и шрифт (мы выбрали Regular). Теперь можно в нижнюю часть окна вводить сам текст. Во время ввода можно наблюдать появление текста прямо на рисунке. Закончив ввод, нажмите ОК. То, что получилось, представлено на Рисунок 3.34.

Как видите, текст не поместился на рисунке. Поэтому возьмем инструмент Двигатель (Move Tool) и подвинем текст влево так, чтобы он занял всю ширину рисунка. Теперь давайте придадим нашему тексту объемность. Выберите из меню Слой (Layer) пункт Эффекты (Effects) и дайте команду Рельефность (Bevel and Emboss). Немного настроив эффект “на глаз”, нажмите ОК. Получится приблизительно то, что изображено на рис (далее)

Выбор цвета который будет отображаться как прозрачный

Рисунок 3.14. Выбор цвета, который будет отображаться как прозрачный

Выбор изменяемых свойств

Кстати, использование переменной-флага дает нам возможность легко переделать это мигание во что-нибудь другое. Например, вместо временного исчезновения надписи можно на это время включать выворотку, то есть взаимно поменять цвет текста и цвет фона. Как мы уже говорили, получив доступ к элементу (например, через метод document.all), мы можем легко изменить любое его свойство. Вот, например, как можно организовать мигание с вывороткой:

function blink it() { if (vis"1) { document.all.mig.style.backgroundColor="#OD160E document.all.mig.style.color="#F9FFF9"; vis=0;

} else { document.all.mig.style.backgroundColor="#F9FFF9" ;

document.all.mig.style.color="#OD160E"; vis=l; } setTimeout ("blink_it()", 400); }

Результат (в момент включения выворотки) показан на Рисунок 6.7. Обратите внимание на то, что стилевые свойства, которые пишутся через дефис в нашем примере это background-color), при доступе из сценария необходимо писать без дефиса, но заменив букву, идущую после дефиса, на прописную. Так, background-color превращается в backgroundColor, font-size в fontSize, border-style в borderStyle и т. д. Кстати говоря, чтобы получить тот результат, который показан на Рисунок 6.10, нам пришлось добавить еще одно свойство нашему мигающему элементу:

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

а именно: мы установили ширину элемента. Если этого не сделать, цвет фона будет меняться на этой строке по всей ширине экрана.

Выбор шаблона

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

Выбор способа сохранения

Когда графический элемент создан, его нужно сохранить в оптимальном виде — чтобы качество было получше, а размер поменьше. Для этого в программе Xara WebStyle есть очень наглядная утилита. Если нажать на кнопку Save (Сохранить), открывается диалоговое окно, в котором можно выбрать тип файла — GIF или JPEG и размер файла (Fast Download — для быстрой загрузки, низкое качество; Medium Quality — среднее качество и средний размер, и High Quality — высокое качество, но и размер побольше). А если нажать на кнопку Advanced (Дополнительно), можно тонко настроить все параметры сохранения файла. Для формата JPEG это стандартная шкала качества (от 0 до 100), а для формата GIF можно выбрать количество цветов (16 или 256), палитру, режим передачи полутонов, режим чересстрочной развертки и режим прозрачного рисунка. В последнем случае с помощью движка Trim transparency можно выбрать количество цветов, которые будут преобразованы в цвет, назначенный прозрачным. Самое замечательное, что во время всех этих манипуляций их результат можно непосредственно наблюдать в области просмотра, и контролировать при этом размер получающегося файла (указывается в нижней части панели предварительного просмотра). Кроме того, можно нажать на кнопку Browser Preview (Просмотр в броузере) и просмотреть результат работы так, как он будет выглядеть в броузере. При этом выдаются также дополнительные сведения, например время загрузки данного файла при различной производительности модемного соединения с Интернетом.

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

Мы рассмотрели работу в программе Xara WebStyle на примере выбора заголовка, но и работа с другими типами графики практически ничем не отличается от рассмотренного примера. Разница заметна лишь в возможностях выбора: например, при создании графического маркера нельзя вводить текст и т. п.

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

Выравнивание эпиграфа с помощью вложенных блоков

Рисунок 4.2. Выравнивание эпиграфа с помощью вложенных блоков

Все бы хорошо, однако подпись под эпиграфом хорошо бы выровнять по правому краю (хотя, поскольку она занимает почти всю строку, это не очень заметно), как на Рисунок 4.3. Но поскольку тег <SPAN> “не понимает” отдельного выравнивания, придется эту подпись также заключить в блок <DIV> или <Р>.

Выравнивание подписи под эпиграфом

Рисунок 4.3. Выравнивание подписи под эпиграфом

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

</Р>

<Р STYLE="text-align: right; font-size: smaller; width: 35%; font-style: italic; position: relative; top:-18px;">

(Из описания мультфильма) </Р> </DIV>

Конечно, последняя конструкция выглядит несколько искусственной — собственно говоря, использованный здесь метод в данном случае напоминает известное выражение “Из пушки по воробьям”. Зато мы на этом примере сможем познакомиться с позиционированием объектов.

Обратите внимание на свойство position. Оно задает тип позиционирования — относительный или абсолютный. В данном случае определено относительное позиционирование (relative), то есть отсчет ведется от той позиции, которую должен был бы занимать этот элемент, если бы позиционирование не было задано. А абсолютное (absolute) позиционирование означает, что отсчет ведется от верхнего левого угла окна броузера (точнее, его рабочей области). Еще у этого свойства может быть значение static, означающее, что элемент не позиционируется индивидуально, и значение fixed (фиксированная позиция — элемент позиционируется абсолютно и не прокручивается вместе с остальным содержимым страницы), которое, однако, поддерживается пока только шестой версией Netscape.

Со свойством position тесно связаны еще два свойства — top и left, которые задают позицию верхнего левого угла элемента соответственно по верти кали и горизонтали. Чем больше значение top, тем ниже расположен эле мент, и, соответственно, чем больше значение left, тем элемент правее. В данном случае, для того чтобы приподнять текст примерно на высоту одной строки, нам пришлось написать: top: -18px;.

Ну, ладно, мы ведь договаривались пока что не менять ничего на страничке, поэтому вернемся к нашему короткому тексту, однако все равно приме ним к нему вышеуказанную конструкцию (со вложенными блоками <DlV>). Между прочим, даже с коротким текстом это все равно получается краси вее, чем раньше. Только заменим значение width на 130 точек (вместо процентного обозначения), а то при очень большом разрешении экрана короткий текст слишком сильно оторвется от подписи.

Завершая этот краткий обзор приемов

Заключение

Завершая этот краткий обзор приемов работы с программой Adobe Photoshop, хочется заметить, что за его рамками, разумеется, остались многие возможности программы, например такие, как фильтры, позволяющие размыть изображение, сделать его похожим на барельеф или акварель, добавить шум и т. п. Однако полное описание возможностей этой программы выходит за рамки данной книги. Тем, кто заинтересовался работой в Adobe Photoshop, можно посоветовать обратиться к специальной литературе (см., например, М. Стразницкас. Photoshop 5.5 для подготовки Web-графики. Учебный курс. “Питер”, 2000).

Законченная композиция после кадрирования

Рисунок 3.28. Законченная композиция после кадрирования

сохранением (в формате JPEG) необходимо “спрессовать” все слои в один, так как раздельно хранить информацию о слоях можно только в формате PSD. “Сплющивание” изображения выполняют командой Слой > Склеить все слои (Layer > Flatten Image). После этого его можно сохранить в любом формате, в том числе и в формате JPEG.

Замена тегов на стилевое описание

В следующем блоке использован отмененный тег <FONT>:

<FONT SIZE="+1"><В>Сергей Сергеев</В> - писатель-авангардист, автор 20 рассказов.<BR>

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

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

Вы можете спросить, что если атрибут STYLE= легко заменил отмененные атрибуты, то что делать с отмененными тегами? К чему “прикрепить” атри бут STYLE=? В большинстве случаев его можно “прикрепить” к тегу <DIV>. В данном случае мы так и поступим:

Как видите, значения свойства font-size отличаются от значений атрибута SIZE= тега < FONT> . Для относительного увеличения размера шрифта исполь зуется значение larger, для относительного уменьшения— smaller. Кроме того, можно, во первых, указывать процентное изменение величины шрифта, например font-size: 120%;, либо его абсолютную величину. Для этого можно использовать либо значения xx-small, x-small, small, medium, large, x-large и xx-large, либо просто указать величину шрифта в пикселах — font-size: 18px; или в других единицах.

Кроме того, в нашем блоке присутствует тег <В> , также относящийся к оформлению, хотя почему-то и не отмененный в HTML 4.0. В CSS ему соответствует свойство font-weight: bold;. Однако мы не можем написать вместо

<В>Сергей Сергеев</В> следующее:

<DIV STYLE="font-weight: bold;">Сергей CepreeB</DIV>

поскольку в этом случае следующий текст будет перенесен на новую строку. Поэтому вместо тега <DIV> здесь следует использовать тег <SPAN> :

<SPAN STYLE="font-weight: bold;">Сергей Сергеев</SPAN>

Этот тег, кстати, бессмысленно применять без атрибутов, поскольку тогда вообще не будет никакого эффекта. Как правило, он применяется именно с атрибутом STYLE= (либо с атрибутами CLASS=, ID=, LANG= или обработчиками событий, о которых речь пойдет ниже).

Свойство font-weight (“жирность” шрифта), кстати, может принимать не только значения bold (полужирный) и normal (обычный), но и любое числовое значение от 100 до 900 (правда, имеют смысл только значения, кратные 100) — то есть, от самого тонкого до самого жирного шрифта. При этом значение 400 — это то же самое, что normal, a 700 — то же, что bold. Можно также употреблять относительные значения bolder и lighter.

Пойдем далее. После этого текстового блока у нас на веб-странице была горизонтальная линия <HR > с отмененным атрибутом W1DTH=, вместо которого следует использовать стилевое свойство width:

Кроме того, если помните, для организации вертикального отступа между текстом и горизонтальной чертой мы использовали не очень красивую конструкцию <BR>  . В CSS имеется свойство margin, с помощью кото рого можно регулировать отступы (“поля”) со всех сторон элемента; а для индивидуальной регулировки отступов с каждой стороны можно исполь зовать свойства margin-top (отступ сверху), margin-bottom (отступ снизу), margin- left (отступ слева) и margin-right (отступ справа). Поскольку мы намеревались удалить горизонтальную черту от текста на расстояние, примерно равное одной строке, давайте напишем так:

Интервал, определенный свойством margin-top, составляет 24 пиксела.

Далее центрируем заголовки рассказов с помощью уже знакомого нам свойства text-align. Но у нас есть еще подзаголовки, выделенные курсивом:

<I>сказка</I>

Поскольку тег <I> тоже относится к оформлению (хоть и не отменен), заме ним его стилевым свойством font-style: italic;, применив уже знакомый тег <SPAN>:

<SPAN STYLE="font-style: italic;">сказка</SPAN>

Кроме значений normal (обычный) и italic (курсив) это свойство может при нимать значение oblique (наклонный шрифт). Различие между наклонным шрифтом и курсивом состоит в том, что буквы курсива имеют иное начер тание. Правда, при использовании определенных шрифтов большинство броузеров пока что “халтурят” — используют курсив, если нет готового варианта наклонного шрифта.

Стилевое позиционирование

Теперь исправим конструкцию для эпиграфа:

<Р ALIGN="right"XFONT SIZE="-l">Hy, погоди!.. <BR>

<I>(Из мультфильма )</I>

</FONT></P>

Вместо атрибута ALIGN=, а также тегов <FONT> и <I> применим уже знакомые конструкции:

<Р STYLE="text-align: right; font-size: smaller; ">Hy, погоди!.. <BR><SPAN STYLE="font-style: italic; "> (Из мультфильма) </SPAN></P>

Кстати говоря, на самом деле и эта конструкция, и та, что была в старом варианте, не совсем подходит для эпиграфа. Удачно, что эпиграф у нас короткий. А что бы было, если он был бы немного длиннее, например таким:

<Р STYLE="text-align: right; font-size: smaller;">«Ну, погоди!..» — что есть мочи закричал Волк, стремительно падая вниз с обрывком веревки в лапе прямо на милицейский мотоцикл, который как раз в этот момент проезжал по дороге. Через мгновение мотоцикл уже увозил его куда-то вдаль.<BR><SPAN STYLE="font-style: italic;">(Из описания мультфильма) </SPAN></P>

Результат показан на Рисунок 4.1. Согласитесь, что это больше похоже не на эпиграф, а на какой-то вводный текст, потому что эпиграф должен оста ваться в правой части экрана. В старом варианте веб-страницы с этой про блемой было бы трудно справиться (пришлось бы либо рисовать невидимую таблицу, либо вручную разбивать текст эпиграфа тегами <BR> , что привело бы к различным результатам при просмотре в окнах разного размера). А при использовании CSS можно просто использовать такие свойства блока, как width и height (ширина и высота). Второе из них нам сейчас не нужно, а вот свойство width как раз пригодится:

«Hy, погоди!..» — что есть мочи закричал Волк, стремительно падая вниз с обрывком веревки в лапе прямо на милицейский мотоцикл, который как раз в этот момент проезжал по дороге. Через мгновение мотоцикл уже увозил его куда-то вдаль.<BR>

<SPAN STYLE="font-style: italic;">(Из описания мультфильма)</SPAN>

</DIV>

Результат показан на Рисунок 4.2. Давайте с ним разберемся. Как видно из вышеприведенного кода, просто добавить свойство width: 35%; недоста точно. Действительно, тогда текст блока был бы выровнен по правому краю, но это выравнивание происходило бы внутри блока, а сам блок шириной 35% от полной ширины окна располагался бы слева. Поэтому весь блок, описанный тегом <Р> , пришлось заключить во внешний блок <DIV> , а уже в нем установить выравнивание по правому краю (text-align:right;). Ну, а раз уж выравнивание по правому краю взял на себя внешний блок, внутри текстового блока для лучшего восприятия мы выровняли текст но обоим краям (text-align: justify;).

Запись формата TwinVQ

Для того чтобы сжать файл в формат TwinVQ, также существует несколько программ. Одной из лучших является YAMAHA Sound VQ Encoder (ее можно загрузить с веб-сайта www.vqf.com). Программа имеет, кстати, довольно оригинальный дизайн. Обращаться с ней крайне удобно. Hа верхней панели можно ввести имя исходного звукового файла или выбрать его, нажав кнопку Browse (Обзор). При этом формат выбранного файла отображается автоматически. Затем с помощью раскрывающегося списке Encode Mode (Режим сжатия) можно задать степень сжатия. Только имейте в виду, что в этой программе указано количество бит в секунду на канал. То есть, если выбрать режим 32 kbps/ch для стереозаписи при установлен ном режиме Стерео, то фактически степень сжатия выходного файла составит 64 Кбит/с (по 32 Кбит/с на каждый из двух каналов).

С помощью переключателя Quality (Качество) можно выбрать качество сжатия: высокое, среднее и низкое. Чем выше качество, тем больше времени требуется программе для сжатия. Однако разница во времени не столь велика, чтобы жертвовать качеством, поэтому практически всегда следует выбирать параметр High (Высокое качество). На нижней панели можно выбрать имя выходного файла (программа по умолчанию предлагает то же имя, как и имя исходного файла, только рас-ширение заменяется на .vqf). Тут же можно указать дополнительные атрибуты, записываемые в ид-файл: название композиции, автора и данные об авторских правах. Можно также ввести собственное примечание.

Если установлен режим Permission to Save (Разрешить сохранение), то пользователь, прослушивающий этот файл в потоковом режиме, сможет сохранить его на жестком диске. Здесь же можно указать имя сохраняемого файла. А если включить режим Low Priority (Низкий приоритет), можно перевести процесс сжатия в фоновый режим. Хотя при этом кодирование займет, разумеется, больше времени, зато можно параллельно заниматься другими делами на компьютере.

С помощью SoundVQ Encoder можно также кодировать сразу несколько файлов в пакетном режиме. Для этого необходимо просто выбрать файлы в Проводнике Windows и перетащить их значки на панель программы. Далее будут предложены уже знакомые нам варианты настройки.

Кроме того, программа поддерживает функцию сжатия в режиме реального времени (“на лету”). Нажав кнопку Live Encoding (Сжатие в реальном времени), можно сжимать звуковой поток, поступающий на вход звуковой карты. Правда, для такого “живого” сжатия необходима достаточно мощная система.

Чтобы обеспечить потоковое воспроизведение, можно создать так называемый VQL-файл. Это текстовый файл, подобный упоминавшемуся выше RАМ-файлу, однако он может быть многострочным. В каждой строке при этом нужно указать местоположение одного VQF-фаи.ла (в виде полного URL-адреса, включая имя протокола http://). Таким образом, можно создать ссылку на несколько VQF-файлов, следующих подряд, то есть использовать VQL-файл в качестве своеобразного списка воспроизведения. Кроме того, в FQL-файл можно вставлять в конец строки любые примечания, отделив их знаком #.

Существуют и другие программы для сжатия файлов в формат TwinVQ. Некоторые из них можно загрузить, посетив уже упоминавшийся сайт www.vqf.com. Рекомендуем опробовать их самостоятельно.

Запись информации в вебдокумент

Запись информации в веб-документ

Для написания динамических веб-страниц используются фрагменты кода, написанные на языке JavaScript (или другом языке сценариев, о чем речь пойдет ниже), который имеет синтаксис, отличный от HTML. Для отде ления этих фрагментов от остальной части HTML-документа они распоагаются между тегами <SCRIPT> и </SCRIPT> . Например, так:

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

<HTML>

<HEAD>

<TITLE>SCRIPT!</TITLE>

</HEAD>

<BODY>

document.write("Эта страница написана на JavaScript!");

</SCRIPT>

</BODY>

</HTML>

Результат работы этого кода показан на Рисунок 6.1. Как видите, пока ничего необычного. Эту же надпись можно было написать и просто так, не используя JavaScript — результат был бы тот же. Зато теперь мы знаем, что если написать метод document.write, то на страницу будет вставлено то, что далее стоит в скобках. Если это текстовая строка, то нужно ее заключить еще и в кавычки.

Запись в формате МРЗ

Если желательно получить на выходе файл в формате МРЗ, лучше вос- пользоваться программой МРЗ Producer, которую предлагает компания Fraunhofer. Основное окно этой программы изображено на Рисунок 5.5. Как видите, здесь все просто и нет ничего лишнего. Нажав кнопку Select Input (Выбор источника), можно выбрать WAVE-файл, подлежащий сжатию. Имя выходного файла предлагается автоматически, но если оно не годится, его можно задать с помощью кнопки Set Output (Задать выходной файл). С помошью раскрывающегося списка можно выбрать степень сжатия и режим (стерео/моно). Интересная особенность этой программы — возможность предварительного прослушивания фрагмента в сжатом виде. Для этого служит кнопка Prelisten (Предварительное прослушивание). С ее помощью можно сравнить между собой различные режимы сжатия и выбрать подводящий. Кодирование начинают щелчком на кнопке Encode (Кодировать).

Запись звука от внешнего источника

Итак, если исходный звуковой материал расположен на компакт-диске, то с записью все просто. А что делать, если он расположен на аудиокассете, мини-диске, ЛАГ-кассете или ином внешнем носителе? В этом случае придется осуществить обычную аудиозапись через звуковую карту компьютера. Соедините линейный выход вашего внешнего устройства с линейным входом звуковой карты. Затем дважды щелкните на значке с изображением динамика на панели индикации Windows (Рисунок 5.1). Откроется окно системного микшера. В нем из меню Параметры выберите пункт Свойства и в открывшемся диалоговом окне выберите пункт Запись. Нажмите кнопку ОК. Появится окно, изображенное на Рисунок 5.2.

Запрос сведений у читателя

Как видите, нам не пришлось вручную заполнять все ячейки таблицы, мы ограничились вместо этого шестью изящными строками кода. Кроме того, если вам вдруг понадобится расширить таблицу, например организовать вывод значений вплоть до 20х20, это можно сделать, просто заменив два числа в коде (10 на 20). Более того, мы теперь можем дать пользователю

Звуковые гиперссылки

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

...А теперь послушайте <А HREF="mymusic.mid">музыкy</A>!

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

Звуковые объекты

Другой способ помещения музыкального объекта на страничку заключается в применении более универсального тега <OBJECT> . Вообще говоря, этот тег может использоваться не только для встраивания звуковых объектов. Он появился в свое время в Internet Explorer для встраивания объектов ActiveX/COM (что было альтернативой возможности запуска Java-апплетов в броузерах Netscape с помощью тега <APPLET> ). Если музыкальный объект размещен на веб-странице с помощью тега <OBJECT> , броузер в некоторых случаях может сообщить об отсутствии средств воспроизведения файлов такого типа. Иногда это вызывает удивление, так как те же файлы прекрасно воспроизводятся на том же компьютере, однако здесь требуется не любое средство воспроизведения, а только встроенное в данный броузер. В таких случаях необходимо доустановить модуль просмотра в броузер (может быть, предварительно загрузив его из Интернета).

Для помещения музыкального объекта на страничку используется такой синтаксис тега <OBJECT>:

</OBJECT>

Как видите, атрибут DATA= определяет файл — источник музыки, а атрибут TYPE= определяет его тип (формат). О форматах мы поговорим ниже.

Если при использовании тега <BGSOUND> музыка исполняется в качестве фона, то при использовании тега <OBJECT> объект можно наблюдать на экране, как правило, в виде встроенного проигрывателя с кнопками Пуск, Стоп и другими элементами управления. Поэтому для тега <OBJECT> возможно использование таких атрибутов, как ALIGN= (со значениями top, middle, bottom, left, right), WIDTH=, HEIGHT=, HSPACE=, VSPACE= и даже USEMAP=. Все эти атрибуты нам уже знакомы по тегу <IMG>. Кстати, с помощью тега <OBJECT> действительно можно вставлять в тексты веб-страниц графические объекты и видеоклипы. При этом список форматов существенно расширяется (например, можно просматривать картинки в форман тах TIFF и WMF), лишь бы только к броузеру был подключен соответствующий модуль просмотра. Кстати, можно вкладывать несколько элементов <OBJECT> друг в друга. Это приводит к следующему результату: если в броузере имеется средство просмотра внешнего объекта, будет отображен именно он, а если нет — броузер попытается отобразить внутренний объект, и т. д. Например, можно написать так:

<OBJECT DATA="MyPicture2.gif" TYPE="image/gif"> Здесь должен быть видеоклип... </OBJECT> </OBJECT> </OBJECT> </OBJECT>

В этом примере броузер сначала попытается воспроизвести видеоклип (файл в формате MPEG). Если это ему удастся, то все, что находится внутри данного тега, игнорируется, а если нет — броузер попытается воспроизвести музыкальный файл в формате АIFF. Если же он не найдет модуля вос произведения и для этого файла, он попытается отобразить рисунок в формате TIFF, а уж если и это не получится, то в формате GIF. При таком невероятном стечении обстоятельств, что броузеру и это не удастся сделать, на месте объекта будет просто отображен текст Здесь должен быть

видеоклип... И еще один момент. В теге <OBJECT> можно установить атрибут STANDBY=, значение которого (текстовая строка) будет отображаться на экране до тех пор, пока объект не загрузится целиком. Например, вполне целесообразно написать так:

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