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

Hy что, нравится?<НЗ>');
Здесь используется метод insertAdjacentHTML, что позволяет вставлять не только текст, но и HTML-тети. Аргумент AfterBegin означает, что вставля-емый код будет помещен в начало блока

. Если бы мы напи-сали BeforeEnd, то код был бы вставлен в конец блока. Кстати, методы lnsertAdjacentText и insertAdjacentHTML позволяют вставить текст (и HTML-код) не только внутрь какого-либо элемента, но и непосредственно перед и им или после него! Для этого используются аргументы BeforeBegin и, соответственно, AfterEnd. Как вы уже поняли, в качестве второго аргумента используется строка с текстом или HTML-кодом, который надо вставить.
Остальное уже просто. Добавим в каждую функцию отображения текста при введенную выше строку в сочетании с установкой таймера — setTimeout:
setTimeout("document.all.rasskaz.insertAdjacentHTML ('AfterBegin','

Hy что, нравится?<НЗ>') ", "60000");
Правда, это еще не все. Если оставить страницу в таком виде, то таймер включит метод добавления текста через минуту после щелчка на мнимой гипересылке, даже если пользователь за это время успеет щелкнуть на другой, а это нами не задумывалось. Поэтому во время щелчка на каждой мнимой гиперссылке следует останавливать предыдущий таймер. Для этого достаточно определить глобальную переменную:
var timer; И присвоить ей значение запущенного таймера:
time=setTimeout("document.all.rasskaz.insertAdjacentHTML ('AfterBegin','

Hy что, нравится?<НЗ>') ", "60000");
Тогда для его остановки достаточно будет написать следующее:
clearTimeout(timer); В тот момент таймер будет остановлен.

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







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









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

— писатель-авангардист, автор 20 рассказов.

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

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

---

Сказка «Иван-царевич и серый заяц&гадио; 

Рассказ «МОЛОTOK»

---

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

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

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

onClick="show('ivan')"

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

document.all.rasskaz.innerHTML=arg;

то содержимое блока

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

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

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



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

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

То, что у нас получилось, показано на рис. 4.6. Прежде чем мы займемся стилевым оформлением каждого блока, давайте вместо однотонового фона установим градиент. Пусть основная информация находится на светлом фоне, а в районе блока гиперссылок логично было бы начать градиентный перелив в более темный оттенок. Только вот беда: если мы будем создавать фоновый рисунок с градиентным переливом справа, то совершенно непонятно, какой ширины он должен быть. Еще хорошо, что на этой страничке абсолютное позиционирование — можно, в принципе, начать градиент на 565-й точке слева. Однако все равно непонятно, где его заканчивать — ведь ширина экрана зависит от разрешения!
Давайте воспользуемся более изящным методом. Создадим градиент, имеющий слева тот же цвет, что и цвет фона, и расположим его справа. Для этого нам надо написать в свойствах элемента BODY:
background-position: right;
Однако посмотрите на результат (рис. 4.7). Фоновый рисунок действительно выровнен по правому краю, но он повторяется во все стороны, а нам это не нужно. Чтобы он повторялся только по вертикали, нужно добавить в свой ства BODY еще такую строку:
background-repeat: repeat-y; i

Рис. 4.6. Позиционирование блока гиперссылок
Вот теперь получилось то, что нужно. Кстати, можно заставить фоновый рисунок повторяться только по горизонтали (repeat-x) или вообще не повторяться (no-repeat). В этом случае можно указать любое значение свойства background-position в процентах, пикселах или иных единицах.

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

В предыдущих главах мы рассмотрели оформление веб-страниц с помощью таблиц стилей 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. А между прочим, у этого объекта есть еще ряд интересных свойств. Чтобы их просмотреть, давайте создадим страницу, содержащую небольшой сценарий.









Работает этот сценарий следующим образом. Переменной 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() — просто какая-то функция, определенная где-то на веб-странице.

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

отображают текст, находящийся между тегами

курсивом. Например, если вы напишете следующее"
А.С. Пушкин сам говорил,
что он лиру посвятил народу
своему по этому есть все основания считать, что судьба русского народа
была для него не безразлична.
то большинство броузеров отобразят это так. как показано на рис 2.5(ниже)
 
Об этом хорошо сказал С.С.Сергеев в своей бессмертной повести "Обыкновенный обрыв":
Мечтая об освобжденном времени и свернутом пространстве, мы иногда плохо представляем себе, что же будем делать, если вдруг сможем позволить себе распоряжаться ими. Если мне сегодня вечером скажут, что я могу свернуть пространство вокруг себя нажатием одной клавиши компьютера, я либо не буду знать, что же мне с этим делать, либо от радости наделаю чего-нибудь такого, что придется потом очень долго расхлебывать.
Но еще лучше ни о чем не мечтать, а спокойно почитать научные статьи и трезво оценить ситуацию.

Рис. 2.5. Применение длинной цитаты
также отобразить и обычные типографские кавычки (“? ”) вместо машинописных (" "). Запись Книга « Путеводитель по Атлантиде &raquо; отобразится в броузере так:
Книга “Путеводитель по Атлантиде”
Теперь давайте представим себе, что нам надо воспроизвести на веб-страничке фрагмент кода-HTML и проиллюстрировать его отображение. Причем код HTML мы хотим выделить моноширинным шрифтом (как это обычно и делается, например, в этой книге). Для этого можно применить тег

, как показано ниже.
Если вы напишете следующий код:

<hr WIDTH="80%" SIZE="15">,

то это отобразится так:

---

Нa рис. 2.6 показано, как это отобразится в броузере. Помимо тега

, обратите внимание на употребление специальных символов < и > для отображения угловых скобок,

Вместо тега



можно также употребить и тег

<ТТ>

. Разница между ними такая же, как между тегами

<ЕМ>

и



. То есть, тег



определяет логический фрагмент, который обычно выводится моноширинным!

То есть шрифтом, в котором все символы имеют одинаковую ширину, на манер пишущей машинки.



Рис. 2.6. Отображение исходного кода программ в броузере

шрифтом, как код, а тег

<ТТ>

просто применяет к фрагменту моноширинный шрифт. Разница, прямо скажем, небольшая.

Для отображения больших фрагментов кода существует еще один тег —



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

). Однако использование этого тега уже давно не рекомендовано WWW-консорциумом.


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

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


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








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







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

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

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





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



, но ни то, ни другое не поддерживается броузером Internet Explorer. Как же быть?

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

:

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

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

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

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

<Н2>Производство 


Рис. 6.6. Предварительная заготовка для веб-страницы с мигающим заголовком


Доступ к элементам 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);


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




















Клавинова






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


Клавинова


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


обычных


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


KJIABHHOBA


стоит


<В>дешевле


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


лучше


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


высокого)


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


  


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


.


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





Рис. 3.2. Не самое удачное применение фонового рисунка


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


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


....


Формат GIF
Формат 

GIF 

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

индекси- 

рованная цветовая палитра. 

Максимальное количество цветов в ней — 256. Так что не стоит сохранять в формате 

GIF, 

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

GIF 

до небольших размеров. Кроме того, . формат 

GIF 

имеет еще ряд достоинств.



Рис. 3.6. Страничка с круглой фотографией

Во-первых, GIF-рисунок может быть “прозрачным”. То есть, можно один цвет удалить из палитры 

GIF, 

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

Исходный текст этой странички самый простой:


















 АВТОПОРТРЕТ СЕРГЕЯ СЕРГЕЕВА





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

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



. Их основная часть определяется тегом



. Все, что заключено между ним и его закрывающим тегом



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

.

Его основным атрибутом является SRC=, значением которого является имя соответствующего .HTML-файла.

Кроме того, в первой строке файла, содержащего набор фреймов, необхидимо указывать тип Frameset, например, вот так:



Давайте напишем текст набора фреймов для нашего примера, а затем paссмотрим его подробнее. Итак, если страница с портретом называем ч sergport.html, а страница с текстом — sergtext.html, то текст основного документа будет следующим.













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




















 Давайте внесем некоторые пояснения. Чтобы фреймы располагались, как столбцы таблицы (а не как ряды, Hanpимер, сверху и снизу), нужно в теге  указать атрибут COLS= Его значением должно быть перечисление ширины каждого фрейма (через запятую). Например, если написать ,то окно броузера будет разделено на три фрейма: левый шириной в четверть окна броузера, средний такой же ширины и правый шириной в половину окна броузера. В данном случае ширина каждого фрейма указана в про- центах. Можно также указывать ширину фрейма в пикселах. В приведенном выше коде мы определяем ширину левого фрейма в 277 пикселов чтобы туда уместился рисунок:





В этой записи звездочка означает, что для другого фрейма отведено все оставшееся место в окне броузера. Сколько его будет — зависит только отi ширины окна броузера на компьютере пользователя. (Если у пользователя разрешение 1600х1200 и окно броузера развернуто на весь экран, то у него ширина правого фрейма будет около 1320 пикселов, а если он сузил окно броузера до 300 пикселов, то на правый фрейм у него останется менее 15 пикселов.) В большинстве случаев левый фрейм шириной 277 пикселов будет все же занимать меньше половины окна броузера, а значит, у пользователя сложится правильное впечатление, что основная информация заключена в правом фрейме.


Далее, чтобы между фреймами на было видимой границы, следует установить значения атрибутов FRAMESPACING= (расстояние между фреймами) и FRAMEBORDER= (наличие рамки фреймов) равными нулю.





 В принципе, если установить значение атрибута FRAMEBORDER= равным 1 (кстати, для Netscape версии 3 было необходимо вместо значений 0 и 1 для атрибута RAMEBORDER= использовать значения Yes или No), то можно проконтролировать толщину рамки с помощью атрибута BORDER=, а также ее цвет с помощью атрибута BORDERCOLOR=.


Если надо расположить фреймы, как строки таблицы, то вместо атрибута COLS= следует использовать атрибут ROWS=. В остальном все остается точно так же, как ранее. В принципе, возможно использовать в одном теге





оба атрибута: и COLS=, и ROWS=.


Но вернемся к приведенному выше коду. Между тегами





и





в нем находятся определения содержимого каждого из фрей-мов. Каждый фрейм определяется с помощью тега


:








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


Атрибут SRC=, как уже говорилось выше, является самым главным атрибутом,


поскольку его значение указывает, какой, собственно говоря, файл следует в этот фрейм загрузить. Атрибут SCROLLING= управляет наличием полосы прокрутки в каждом фрейме. Если его значением является auto, то броузер сам определяет, отображать ли полосу прокрутки. Как правило, это самое удобное значение — если все содержимое фрейма помещается и видимую область, то полоса прокрутки не отображается, а если часть содержимого не видна, то полоса прокрутки отображается.


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


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


.


Впрочем, если их будет меньше, не указано в теге





, то на месте “отсутствующего” фрейма отобразится просто белый прямоугольник.


Формирование структуры таблицы
Любая таблица определяется в

HTML 

с помощью тега



.

Все, что расположено между тегами
 и 

,

считается таблицей. Однако не спешите! Если вы напишете что-нибудь вроде



Это уже таблица?


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



и его закрывающего тега, а ячейки — с помощью тега



и его закрывающего тега.

Однако, написав







 Это уже таблица?





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

BORDER=,

например, вот так:


 

 Это уже таблица! 
 
 


Вот теперь это уже на что-то похоже (рис. 2.1

3

). Кстати, довольно интересно рассмотреть рамку, установив что-нибудь вроде

BORDER="30".


Где найти сервер для публикации
Не все имеют постоянное соединение с Интернетом. Тем, у кого соединение временное, гораздо проще разместить свою веб-страничку на каком-нибудь чужом компьютере, специально для этого настроенном. Это может быть, например, сервер вашего Интернет-провайдера (как прабило, все провайдеры предоставляют такую услугу бесплатно) или один из так называемых бесплатных Интернет-серверов. На бесплатном Интернет-сервере можно получить некоторое количество дискового пространства для своей веб-странички. Таких серверов в Интернете множество. Вот лишь некоторые из них: сообщество Geocities (www. yahoo, corn), XOOM (xoom.corn/home), российский сервер “Халява” (www.halyava.ru), сервер www.chat.ru и многие другие.


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

В нашем примере давайте выделим в отдельные файлы вступительный текст и каждый из рассказов. Основной файл назовем sergeev.html:














Дoмaшняя страница Сергея Cepreeaa
 


CKА3KА «ИBАH- царевич и серый зaяц» 

Paccкaз «Moлоток »
 


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


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

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

  

Затем создадим файл первого рассказа. Назовем его skazka.html:

  








ИBAH-ЦAPEBИЧ И СЕРЫЙ ЗАЯЦ<ВR> сказка



<Р ALIGN="right"XFONT SIZE="-l">Hy, погоди!.. 
  (Из мультфильма) 



<Р ALIGN="justify">      Жил да был Иван-Царевич, и все у него было: и злато-серебро, и невест полный дворец...


      Долго ли, коротко ли ... 


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


 <А НRЕF="sergeev.html">Вернуться на главную страницу








И, наконец, создадим файл второго рассказа, rasskaz.html.


  
 







VLINK="#634438" ALINK="Black">


MOЛOTOK
 рассказ


Mы кузнецы, и дух наш молод. 
 (Из песни) 



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


 <А НREF="sergeev.htm1">Вернуться на главную страницу








Как видите, чтобы установить гиперссылку на другой файл, необходимо в качестве значения атрибута HREF= указать имя этого файла:


Cкaзкa «Иван-царевич и серый зaяц»


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


в нашем примере в конце каждого файла с рассказом мы поместили гиперссылку


<А НRЕF="sergeev.html">Вернуться на главную страницу


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


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


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



В этом случае горизонтальная линия займет 75% от полной ширины экранной страницы. Можно также определять ширину линии и в пикселах ( экранных точках). Например, запись



определит ширину линии в 75 пикселов (это получится очень короткая линия). Если хотите, можете определить также толщину линии, установив атрибут SIZE=.

Некоторые проблемы могут возникнуть, если мы захотим оставить немного Свободного пространства между вступительным текстом и горизонталь ной линией (в данном случае это уместно, так как между линией и заголовком, определенным тегом

<Н2>

, пространство довольно большое, и желательно соблюсти некоторый баланс). Дело в том, что если поставить перед линией тег


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


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


использовать “пустой” абзац:




И то и другое не очень эстетично с точки зрения кода. Правда, если страничка делается для броузеров Netscape (версии 3 и более поздних), можно использовать тег



, чтобы задать вертикальный отступ:



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



Давайте посмотрим, что у нас получилось.





















Домашняя страница Сергея Сергеева 




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


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


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


 
ИBAH-ЦАРЕВИЧ И СЕРЫЙ ЗАЯЦ 


сказка



Hy, погоди!.. 
(Из мультфильма)


      Жил да


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


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


      Долго ли, коротко ли ... 


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


и умерли в один день.





MOЛOTOK 
 рассказ



Mы кузнецы, и дух наш молод. 
 (Из песни)



      Это


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


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








Результат наших трудов представлен на рис. 2.2. Что ж, страничка посте пенно становится все лучше. Но, не правда ли, хочется сделать вступи-





Рис. 2.2. Применение заголовочных стилей


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


Графические форматы Интернета
В предыдущем разделе мы рассмотрели способы использования графических элементов на веб-странице. Но, как вы, вероятно, знаете, существует великое множество различных форматов для представления графики. Какими же из них следует пользоваться в данном случае?

Несмотря на то что графических форматов очень много, в качестве стандартных для использования в Интернете приняты только три из них. Это 

CompuServe Graphic Interchange Format, 

или, попросту, 

GIF, 

формат 

JPEG 

(названный по имени группы создателей — 

Joint Picture Expert Group) 

и сравнительно новый формат 

PNG (Portable Network Graphics). 

Кроме того, на скорую стандартизацию претендуют форматы 

DjVu 

(этот формат оптимизирован для представления документов, содержащих одновременно текст и графику) и 

LuRaTech Wavelet (LWF) — 

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

Однако пока создателю веб-страниц лучше ориентироваться лишь на два наиболее распространенных в Интернете формата — 

GIF 

и 

JPEG. 

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

Оба эти формата были созданы для хранения графики в сжатом виде. Формат 

JPEG 

при этом использует метод “сжатия с потерями”, то есть при сжатии часть информации безвозвратно теряется. Влияет ли это на качество изображения? Безусловно, но при умелом обращении потерю качества можно сделать настолько малозаметной, что ею можно пренебречь.


Графические иллюстрации
И, наконец, проиллюстрируем наш текст, вставив перед описанием фотографию клавиновы. Предположим, что фотография у нас уже готова и лежит в палке \lmages под именем clavi.gif. Вставить ее в текст можно с помо щью тега



, например, вот так:



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



еще несколько атрибутов.

Во-первых, надо помнить, что картинки загружаются из сети всегда намного медленнее, чем обычный текст. Это я говорю не к тому, что сам файл картинки должен быть не очень большого объема (это верно, но этот вопрос мы обсудим отдельно), а к тому, что при такой записи, как выше, многие броузеры, начав загружать картинку, приостановят загрузку последующего текста до тех пор, пока картинка не будет загружена полностью. Но для читателя было бы удобнее, если бы текст продолжал загружаться араллельно с картинкой: пока она догружается, можно было бы что-то уже читать. Чтобы броузер мог это сделать, ему нужно явно указать размеры будущей картинки с помощью атрибутов WIDTH= и HEIGHT=:



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

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


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





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





Чего еще не хватает нашему HTML-файлу? Конечно же, гиперссылок! Без них любой документ в Интернете воспринимается гораздо скучнее, поскольку посетитель сразу видит, что зашел в тупик. Поэтому обязательно добавляйте гиперссылки везде, где это только можно. В данном случае, например, слово “Yamaha” просто просится стать гиперссылкой на сайт соответствующей компании. Сделаем это:


Yamaha


Кстати, картинки тоже могут содержать гиперссылки. Мы можем, напри мер, точно так же, как со словом “Yamaha”, поступить и с нашим тегом картинки. Тогда щелчок на изображении клавиновы также уведет пользователя на сайт компании Yamaha.


Давайте посмотрим, что у нас получается.





















KJIABHHOBA

















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


KJIABMHOBA


, выпускаемые компанией


<А HREF="http: //www.yamaha.com">Yamaha 


, являются достойной заменой


обычных


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


<ВIG>КЛАВИНОВА


стоит


<В>дешевле


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


Bыcoкoro


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














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


.


Текст теперь действительно воспринимается гораздо лучше. Правда, из-за использования слов разного размера и тега





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


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





Рис. 3.3. Пример странички с фоновым рисунком и иллюстрацией


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




Кстати, тег





может иметь собственный атрибут ALIGN=,  который управляет расположением рисунка относительно текста. В нашем примере это было не актуально, поскольку рисунок находился в отдельном блоке





. Но если рисунок “встроен” в текст, то есть несколько вариантов его расположения:


ALIGN="left" — текст обтекает рисунок, который располагается слева;


ALIGN="right" — текст обтекает рисунок, который располагается справа;


ALIGN="top" — рисунок располагается внутри текстовой строки, и его верхняя граница совпадает с верхней границей букв текста (можно также применять значение "texttop");


ALIGN="middle" — рисунок располагается внутри текстовой строки, которая вертикально выравнивается по центру рисунка (можно также при менять значение "absmiddle");


ALIGN="bottom" — рисунок располагается внутри текстовой строки, и его нижняя граница совпадает с нижней границей букв текста (можно также применять значение "absbottom" или "baseline").


Кроме того, чтобы рисунок не слишком “прижимался” к тексту, можно оставить между ними немного “воздуха”. Для этого в теге  используют атрибуты HSPACE= и VSРАСЕ=, значения которых задают соответственно горизонтальное и вертикальное “поля” рисунка.


И еще небольшое замечание: броузер Internet Explorer (версия 4 и выше) позволяет с помощью тега  загружать и просматривать также видеофрагменты в формате AVI (Video for Windows). Для этого можно установить атрибут DYNSRC=, в качестве значения которого указать имя AVT-файла. При этом можно дополнительно указать в атрибуте START=, когда следует начинать проигрывание видео: "FILEOPEN" — сразу после загрузки файла или "MOUSEOVER" — после наведения указателя мыши на изображение. Атрибут LOOP= позволяет установить количество проигрываний: "О" означает бесконечное повторение, алюбое другое число указывает точное количество повторов.


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

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

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

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


Графические маркеры
Итак, в предыдущем разделе мы упомянули о возможности создания графических маркеров списков. Она настолько привлекла создателей веб-страниц, что для их удобства были созданы специальные средства. Действительно, одно дело, когда маркерами списка являются стандартные кружочки или квадратики, и совсем другое — когда каждый сам имеет возможность создать маркер! Маркером может быть все что у годно — от просто цветных и немного выпуклых кружков и квадратов до изощренных миниатюрных художественных работ. Однако обратите внимание на то, что именно миниатюрных', маркеры списков должны по размеру как-то соответствовать высоте текстовой строки, и забота об этом ложится на автора еще на этапе создания изображения. Старайтесь создавать подобные изображения сразу в “натуральную величину”. Если создавать сначала крупные рисунки, а потом просто уменьшать их, то при уменьшении они могут стать неузнаваемыми! Все дело в том, что компьютер “не знает”, какие детали рисунка важны для нашего восприятия. Если при уменьшении исчезнут важные детали, результат будет ужасным. Если исчезнут второстепенные детали, качество восприятия ухудшится, но общее впечатление останется.

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

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



Чтобы пойти дальше, чуть приподнимем завесу над материалом главы 4 и заменим атрибут TYPE= на атрибут STYLE= (как, кстати, и положено делать в соответствии со спецификацией HTML 4.0):






Теперь,  чтобы заменить кружок на графический маркер, заменим свойство list-style-type на свойство list-style-image и определим местоположение нашего файла-рисунка:





Вот и все! Можно наслаждаться списком с графическими маркерами. Обратите внимание на то, что при указании имени файла мы заключили его не в обычные двойные кавычки, а в одинарные. Это сделано потому, что все значение атрибута STYLE= заключено в двойные кавычки. Поэтому если бы мы ошибочно написали





то кавычка перед словом Images была бы воспринята как закрывающая, то есть атрибуту STYLE= было бы присвоено значение "list-style-image: url(", a все, что следует за этим, стало бы еще одним, нераспознанным атрибутом тега


 .


Группы элементов формы
Неплохо бы было еще логически объединить то, что связано со сведениями о пользователе, и то, что связано с его мнением. Для такого группирова ния элементов форм в HTML 4.0 был введет тег



. Все, что нахо дится между ним и его закрывающим тегом



, будет обведено в рамку и озаглавлено так, как указано в теге

.

Теги



и



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



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



и

.

Тег



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

 
Paccкaжитe о ce6e


После этого можно поместить несколько элементов формы и поставить закрывающий тег



. В броузере Internet Explorer значение атрибута TITLE= выводится в качестве всплывающей подсказки при наведении мыши на содержимое элемента



. Кстати, это относится также и к другим тегам, которые могут иметь атрибут TITLE=. Можно, например, установить его даже у элемента



. А то, что находится между тегами



и



, будет вынесено в заголовок рамки.

Аналогично, давайте создадим рамку для той части формы, в которую пользователь вводит свое мнение:



Baшe Mнeниe


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


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


Этот недостаток можно устранить, используя специальный тип тега





. Если в этом теге установить атрибут TYPE="file", то пользователь увидит на экране текстовое поле для ввода имени файла, а рядом с ним будет расположена кнопка, при нажатии на которую откроется стандартное окно выбора файла. Имя выбранного файла будет автоматически введено в текстовое поле. Можно написать, например, так:


BBennTe имя файла с описанием вашего мнения: 





Как видите, с помощью атрибута SIZE= здесь также можете задать ширину текстового поля.


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


 <Н1>Ваш отзыв о наших услугах


 









Paccжите о ce6e






Baшe имя:





Baш возраст :





Meнee 20


20–30


30–40


40–50


50–60


6onee 60 



Baш пол:


Мужской


Женский


Baши интересы:



Kомпьютеры


Cnopт


Иcкyccтво


Hayкa


 







Bame мнение






Введите имя файла с описанием вашего мнения :






 Или просто выскажите свое мнение прямо здесь: 



















 



 
 
 



Результат показан на рис. 7.4. Надпись на кнопке выбора файла зависит от используемого броузера, но, как правило, это Обзор или Browse.





Рис. 7.4. Логическое объединение элементов формы.


Имитация гиперссылок
Но как пользователь узнает, что на словосочетании Рассказ “Молоток” нужно щелкнуть, как на гиперссылке, для появления текста рассказа на кране? Для этого придется либо действительно оформить его как гипер-ссылку, то есть заключить в тег <А HREF='#'>, либо просто подчеркнуть его, а также изменить вид указателя мыши над ним:

Рассказ «MonoTOK»

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

A:link,A:visited { color: #634438; }

Теперь же наша мнимая гиперссылка на самом деле является элементом .Mы могли бы просто заменить в приведенном выше определении стиля A:link, A:visited на SPAN. Но поскольку этот элемент может использоваться еще для чего-нибудь на той же странице, лучше определим для него специальный класс, допустим, под названием Ink:

.Ink { color: #634438; }

Кстати, подчеркивание и изменение формы указателя мыши можно также внести непосредственно в таблицу стилей:

.Ink { color: #634438; text-decoration: underline; cursor: hand; } Теперь осталось написать сам код нашей мнимой гиперссылки:

Рассказ «МОЛОTOK »

Итак, теперь эта страница приобрела внешний вид, показанный на рис. 7.11. После щелчка на мнимой гиперссылке Рассказ “Молоток” ее вид изменится (см. рис. 7.12).

Вот исходный текст этой страницы.








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




 


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


Сказка «Иван-царевич и серый заяц&гаquо; 


Рассказ « ;МОЛОTOK»







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


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






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


CАKЗKА





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


(Из мультфильма)
 
 
 


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



Долго ли, коротко ли ...



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



 
  


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


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



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



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

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




Использование других свойств при работе с текстом
Помимо рассмотренного здесь свойства innerHTML, каждый элемент веб страницы имеет еще три похожих свойства:

• innerText — то же, что и innerHTML, однако не может содержать HTML теги;

• outerHTML — то же, что и innerHTML, но включает в себя открывающий и закрывающий теги данного элемента, а также вложенные элементы:

• и, наконец, outerText — то же, что и outerHTML, однако не может содер жать HTML-tens..

Другими словами, свойства innerText и innerHTML каждого элемента содер жат только внутренний текст этого элемента, а свойства outerText и outerHTM L — весь текст элемента, включая вложенные элементы и теги самого элемента. При этом innerText и outerText не содержат HTML.-форматирования, innerHTML и outerHTML могут его содержать. Из всех этих свойств у начина ющих обычно вызывает вопросы только outerText. Однако оно используется довольно редко. Изменив его, можно практически убрать со страницы весь элемент.

Кроме того, существуют удобные методы для вставки текста и HTML-sop,” на страницу. Они называются insertAdjacentText и insertAdjacentHTML. Давайте рассмотрим такой пример. Допустим, мы хотим, чтобы на “домашней странице Сергея Сергеева” через минуту после нажатия на любую из наших мнимых “гиперссылок” и, соответственно, отображения текста одного из рассказов, перед ним появлялась красная надпись “Ну что, нравится?”

Потом к ней можно еще добавить разные кнопки типа ДА, НЕТ, НЕ ОЧЕНЬ

И связать с ними еще какие-либо действия, например, никогда больше не отображать рассказ, который не понравился. Однако сейчас давайте добавим только надпись.


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

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

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

if (navigator.appName!""Netscape") blink it();

Обратите внимание на то, что символ != означает неравно. Итак, эта функция должна то прятать наш элемент, то наоборот, показывать. Чтобы сдедать элемент невидимым, нужно присвоить его свойству visibility значение hidden. Поскольку мы дали элементу уникальное имя (с помощью атрибута ID=), теперь у нас есть возможность получить доступ к нему через коллекцию document.all:

document.all.mig.style.visibility="hidden";

Как видите, написав метод document.all, можно после точки просто указать имя элемента и далее любой атрибут, в данном случае STYLE=. После style можно снова поставить точку и указать любое стилевое свойство.

Чтобы сделать наше слово опять видимым, нужно присвоить свойству visibility значение visible:

document.all.mig.style.visibility="visible";

Теперь осталось только написать условие. Можно было бы просто написать:

if (document.all.mig.style.visibility="hidden") document.all.mig.style.visibility="visible";

else document.all.mig.style.visibility="hidden";

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




 Как видите, изначально мы присвоили переменной-флагу vis значение 0, чтобы в первый же момент надпись МИГАЛОК не исчезала (при первом запуске функции теперь элемент будет видим). В конце функции мы используем задержку в 400 миллисекунд и рекурсивный вызов той же функции.


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





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


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


до конца. Если же вам не удастся это сделать, то когда-нибудь вы очень сильно пожалеете об этом, говоря себе: а вот было оно совсем рядом, а я упустил его... Это мы про что, как вы думаете?


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


  


Изображение-карта
Теперь давайте рассмотрим более сложный пример. Представим себе, что надо сделать сайт, посвященный описанию старинного компьютера ATARI-800. Уже подготовлены файлы с описанием его монитора, самого компьютера и дисковода: monitor.html, computer.html и diskovod.html (мы для проверки работоспособности примера тоже создали такие файлы, но в них ничего нет, кроме заголовка). Наша задача: создать титульную страницу сайта и поместить на нее изображение компьютера (рис. 3.4).

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

Оказывается, есть возможность установить несколько гиперссылок с одного рисунка, не “разрезая” его! Такое изображение называется кар той графических ссылок (imagemap}. Создание карты графических ссылок — операция довольно кропотливая, но результат обычно довольно эффектен. Делается это так.

Вот, например, наш файл diskovod.html:



<НЕАD>

<ТIТLЕ>ДИСКОВОД



<ВODY>ОПИСАНИЕ ДИСКОВОДА





Рис. 3.4. Изображение компьютера, из которого мы будем делать

графическую карту ссылок

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



2. Затем необходимо установить в этом теге атрибут USEMAP=. Его значение должно содержать имя карты графических ссылок, с предвари тельным знаком #, Если карта еще не создана, как в нашем случае, то ей можно дать любое имя:





3.  Теперь нужно создать собственно карту ссылок. Вообще говоря, эта карта может располагаться где угодно, хоть в другом файле — тогда в атрибуте USEMAP= нужно будет указать, кроме имени карты, имя этого файла, например: “mapfile.html#mymap”). В нашем случае давайте рас положим ее в конце того же файла.


4. Карта графических ссылок начинается с тега


< МАР>


и завершается зак рывающим тегом





. В теге <МАР> следует установить (обязательно!) единственный возможный атрибут NAME=. Его значением должно быть имя карты, на которое мы ссылались в теге


<МАР>


(с помощью атрибута USEMAP=). В данном случае это должно быть имя "compmap":


<МАР NAME="compmap">


5. Между тегами


<МАР>


и





должна находиться основная часть карты. Она состоит из нескольких тегов





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


6. “Активные области” могут быть либо прямоугольной формы, либо круглой, либо многоугольной. Это определяется установкой значения атрибута SHAPE= в теге





(он употребляется без закрывающего тега). Если значение этого атрибута — "rect", область будет прямоугольной, если "circle" — круглой, а если "poly" — многоугольной.


7. Дальше начинается самое неприятное в составлении карты графических ссылок: нужно определить координаты каждой из активных областей и записать их как значения атрибута COORDS=.


Если “активная область” прямоугольная, то следует указать координаты левого верхнего ее угла и правого нижнего. Местоположение любой точки на рисунке может быть определено с помощью двух чисел — ее горизонтальной и вертикальной координат. Самая левая верхняя точка на рисунке имеет координаты “0,0”.





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





В этой записи атрибут COORDS= определяет прямоугольник с помощью двух точек: одна из них имеет координаты “0,0”, то есть левый верх ний угол, а другая — “ 200,150”, то есть это центральная точка рисунка размером 400х300.


Если “активная область” круглая, то задача немного упрощается: нужно определить координаты только одной точки — центра окружности, а также указать ее радиус, например:





Такая запись определяет круглую “активную область”, расположенную в центре нашего гипотетического рисунка размером 400х300 (координаты центральной точки— “200,150”). Окружность имеет радиус 40 точек.


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


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





Как видите, шесть координат определяют три точки — три угла нашего треугольника. В данном случае их последовательность не очень важна (можно было написать, например, "400,150,0,150,200,0"), но когда коли чество углов больше, становится важным порядок соединения точек.





Например, записи





И





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


Отпугивающим моментом в этой технологии является то, что приходится каким-то образом выяснять координаты каждой нужной точки. На реальном рисунке это невозможно сделать “на глаз”, и приходится, к примеру, выяснять все координаты в каком-либо графическом редакторе, а уже потом переносить их в HTML-документ. К счастью, в послед них версиях некоторых HTML-редакторов (например, Allaire Homesite) имеются встроенные средства для установки координат на картах графических ссылок.


8. Однако атрибуты SHAPE= и COORDS= — это еще не все. В теге





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





ведет себя так же, как если бы он был в обычном теге


<А>


.


9. Кроме того, бывает полезно определить также атрибут ALT=. Его значе ние может содержать поясняющий текст, который будет “всплывать” при наведении мыши на “активную область”.


Итак, теперь мы можем попытаться обвести “активные области” нашего изображения компьютера (см. рис. 3.4). Естественно, что все они должны быть многоугольными, так как ни один из трех объектов не “укладывается” в прямоугольник или круг. Посмотрим, что получится в результате.























ATARI-800



 3necь представлено описание старинного компьютера ATARI-800. Вот как он выглядел :





Для получения подробной информации о каждом узле щелкните на его изображении.



 <МАР NAME="compmap">




COORDS="95,41,289,40,289,180,212,180,211,167,86,168,86,54" HREF="monitor.html">











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


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





Рис. 3.5. Страничка с графической картой ссылок


Элемент управления для работы с базой данных
Теперь, чтобы иметь возможность обращаться к базе данных, поместим на страницу элемент управления — он называется Tabular Data):



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