Язык HTML

Цвета и единицы измерения

В коде HTML-документа нам всегда придется указывать размеры тех или иных объектов оформления Web-страницы, а также цветовые свойства этих объектов. В HTML предусмотрены стандартные правила для обозначения цветов и единиц измерения. Начнем мы с цветовых обозначений.
Предусмотрено два способа задания цвета,.Чаще всего используется способ с указанием RGB-кода требуемого цвета. Как известно, любой цвет разлагается на три основных: красный, зеленый и синий. Браузеры позволяют нам отображать более шестнадцати миллионов цветов. Все это многообразие обеспечивается за счет того, Что каждая доля основных цветов может варьироваться от нуля до. двухсот пятидесяти пяти, т. е. каждый цвет задается сочетанием трех .чисел» каждое из которых отражает Долю одного из трех основных цветов. Для удобства обработки в HTML цвет задается в виде группы из шести шестнадцатеричных цифр в следующей форме:
color="IFFOOOO" - '' ''
Из примера видно, что перед последовательностью шестнадцатеричных цифр ставится знак решетки. Порядок чисел, указывающих насыщенность основных цветов, должен выдерживаться строго. Сначала — красный, затем — зеленый, и в самом конце — синий. Легко догадаться, что в примере мы установили красный цвет.
Но есть и альтернативный вариант установки цвета. Для щестнадцати наиболее популярных цветов были введены символьные обозначения, приведенные в табл. 1.2.
Таблица 1.2. Цветовые обозначения

Цвет	Шестнадцатеричный код	Буквенное обозначение
Черный	#000000	Black
Серебряный	#СОСОСО	SHver
Серый	#808080	Gray
Белый	#FFFFFF	White
Темно-красный	#800000	Maroon
Красный	#FFOOOO	Red
Пурпурный	#800080	Purple
Малиновый	#FFOOFF	Fuchsia
Зеленый	#008000	Green
Ярко-зеленый	#OOFFOO	Lime
Оливковый	#808000	Olive
Желтый	#FFFFOO	Yellow
Темно-синий	#000080	Navy
Голубой	#OOOOFF	Blue
Темная морская волна	#008080	Teal
Морская волна	#OOFFFF	Aqua

С учетом этих обозначений, наш пример с красным цветом мы могли бы написать и вот таким образом:
color="Red"
Так, с цветом разобрались, теперь переходим к рассмотрению единиц измет рения длины. Согласно спецификации языка HTML, мы можем указывать размеры каких-либо объектов оформления Web-страниц только двумя способами. Либо указывать их размер в пикселах, либо — в процентном отношении. Процентное соотношение рассчитывается относительно "родительского" объекта, внутри которого и находится данный элемент оформления, /т.е., если мы на Web-странице размещаем, скажем, таблицу и указываем, что ее ширина должна составлять пятьдесят процентов, то эти пятьдесят процентов будут рассчитываться от ширины окна просмотра браузера. А уже процентное отношение ширины ячейки таблицы будет рассчитываться от общей ширины именно таблицы, в которой и находится эта ячейка. И если пользователь изменит размеры окна браузера, соответствующим образом изменится и компоновка содержимого Web-страницы. Поэтому, при создании Web-страницы всегда следует изыскивать такие способы размещения содержимого, чтобы их компоновка не изменялась кардинально при изменении размеров окна браузера. Также следует учитывать и тот факт,что удаленные пользователи используют различные разрешения мониторов. О том, как узнать, какое именно разрешение монитора установлено у посетителя Web-страницы, мы выясним в третьей главе, а пока вернемся к единицам измерения размеров объектов Web-страниц.
Для того чтобы указать размер некоего элемента в пикселах, достаточно в качестве значения соответствующего параметра указать необходимое число. Так, если мы захотим установить ширину некоего объекта в тридцать пикселов, следует использовать следующую конструкцию:
width="30"
А если ширина должна составлять тридцать процентов от "родительского" объекта, то мы запишем уже такой код:
width="30%"
Еще раз обращаю внимание на то, что все значения параметров записываются в обрамлении двойных кавычек.
Однако, помимо этих двух способов указания размеров, есть и еще один. Суть его в том, что это нечто среднее между процентным соотношением и прямым указанием размера в пикселах. Мы можем указывать размер, кратный некоторому количеству пикселов. Например, есть у нас таблица, состоящая из трех строк. Высота таблицы задана, причем, неважно, каким способом. Тогда, если мы хотим, чтобы высота каждой строки была кратна тридцати пикселам, то в каждый тег, создающий одну из этих строк, мы должны внести следующий фрагмент кода:
height ="3*"
То есть, кратность отсчитывается относительно десятков пикселов. При этом, браузер пытается отобразить такие объекты с максимально возможным размером, т.е., если таблица -в высоту имеет размер сто восемьдесят пикселов, то каждая строка займет в высоту по шестьдесят пикселов. Впрочем, то же самое случится, если мы создадим таблицу высотой в двести пикселов. Двадцать лишних пикселов просто пропадут. Поэтому, если необходимо, чтобы наши строки заняли равную высоту, то следует использовать следующий вариант параметра:
height-"*"
Впрочем, этот режим действует по умолчанию. Если для группы одинаковых объектов размеры не указаны, они размещаются максимально однородно в пространстве "родительского" объекта.
И это все, что мы можем сказать о единицах измерения, принятых в HTML. На самом деле, мы все-таки имеем возможность задавать абсолютные размеры элементов оформления Web-страниц не только в пикселах. Но для этого необходимо использовать возможности технологии стилевого оформления CSS, которые мы рассмотрим позднее. А сейчас пора переходить к рассмотрению возможностей отображения текста.

Формы

Не раз нам доводилось видеть Web-страницы, на которых нам предлагалось шести некоторые данные в поля ввода. В HTML существует механизм получения данных от пользователя. Естественно, эти данные необходимо еще обработать, но этим занимаются специализированные программы. Рассмотрим механизм их взаимодействия с Web-страницами.
Итак, пользователь загрузил себе Web-страницу, на которой располагаются эрганы управления для ввода информации. Все они объединены в общую совокупность, называемую формой. Каждая форма обладает кнопкой, по нажатию на которую введенные пользователем данные передаются обрабатывающей программе, Эта программа размещается на Web-сервере, который и обслуживает данную страницу. Подобные программы могут создаваться при юмощи самых различных технологий программирования. Объединяет их шшь единый порядок получения данных от Web-страницы. Данные передаются при помощи шлюзового интерфейса CGI (Common Gateway nterface). Поэтому обрабатывающие программы часто называют CGI-триложениями или CGI-скриптами.
Итак, приложение получает данные и обрабатывает их. Затем оно может гибо послать некое электронное письмо, либо произвести некоторую операцию в базе данных, или передать пользователю новую Web-страницу, возможные действия ограничиваются лишь свойствами технологии и фантазией программиста. При помощи подобных программ действуют всевозможные системы регистрации, обратной связи, гостевые книга, форумы, чаты. С их помощью создаются и более разветвленные и сложные системы, например, online-магазины.
Идя того чтобы создавать подобные приложения все-таки необходимо уметь программировать и знать соответствующие правила создания CGI-прилржений. До, тех пор, пока мы этого не умеем, нам остается пользоваться опять-таки общедоступными CGI-скриптами. Но если мы и получим эти приложения, то форму для ввода данных пользователем необходимо все равно делать самостоятельно. В данном разделе мы научимся это делать.
Форма ограничивается тегами. Между этими тегами располагаются теги, создающие органы ввода информации и теги создания обычного содержимого Web-страницы, т. е. сами органы ввода могут раз щаться в таблице, которая в свою очередь полностью размещается в фор Тег

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

Параметр action является обязательным. Значением его является URL указывающий на расположение того CGI-приложения, которое и бу, обрабатывать данные, введенные пользователем при помощи орш управления данной формы.
Параметр method предназначен для указания способа, которым данные будут передаваться обрабатывающему приложению. В качестве значен параметра используется одно из двух предустановленных ключевых cлов: get или post. Сейчас нам нет нужды узнавать, какие механизмы pear зуются при помощи того или иного метода. Так или иначе, в сопровод: тельной документации CGI-приложения указывается, какой метод neрдачи данных следует использовать. По умолчанию используется значек get.
Параметр enctype используется для указания типа передаваемых да ных из формы. Обычно нет нужды его использовать, так как значение application/x-www-form-urlencoded, используемое по умолчани идеально подходит для подавляющего большинства CGI-приложений.
Параметр accept-charset используется в тех случаях, когда пользователь передает из формы приложению не только информацию, но и файлы. В этом случае мы можем явно указать кодировки передаваемых фа лов. В качестве значения данного параметра используется текстов строка, в которой записывается одно или несколько названий кодировс В том случае, если применяется несколько кодировок, их наименование разделяются пробелами идя запятыми. По умолчанию используется значение unknown, которое указывает серверу, что тот должен сам разобраться с используемыми кодировками
Параметр accept задает типы передаваемых файлов. Обычно не испол зуется, так как сервер вполне в состояний сам адекватно распознать тип принимаемого файла.
Параметр name позволяет задавать уникальное имя формы. Естественно на одной Web-странице мозкет находиться несколько форм. В этом ел; чае значения параметров name у них не должны совпадать.

Тег с его закрывающим близнецом

, по сути, создают контейнер для размещения органов ввода информации. Большая часть эт органов ввода реализуется при помощи тега . Продемонстрируем эт на небольшом примере (рис. 1.32). Листинг 1.33
Рис. 1.32. Окно браузера с результатом отображения файла, приведенного в листинге 1.33
Итак, на иллюстрации видно, что мы смогли создать поле ввода текста и кнопку, при нажатии на которую введенная пользователем информация будет отправлена CGI-приложению для обработки. А если мы посмотрим на код листинга, то мы увидим, что и кнопка и поле ввода создавались при помощи одного и того же тега . Регулировка свойств этого тега производится при помощи его многочисленных параметров, которые мы сейчас и рассмотрим.

Параметр type является, пожалуй, ключевым параметром. При помощи его значения мы можем устанавливать тип создаваемого органа управления. В качестве значения используется одно из следующих ключевых слов: text, password, checkbox, radio, submit, reset, file, hidden, image, button. По умолчанию используется значение text. Более подробно эти типы мы рассмотрим немного позже.
Параметр name предназначен для установки уникальных имен для ка дого органа управления. Несмотря на то, что параметр не является обя: тельным, настоятельно рекомендуется использовать его. В сопровод тельной документации CGI-приложений обязательно указывается, как имена должны быть у соответствующих органов ввода информации.
Параметр value используется для указания значения, отображаемого по умолчанию для кнопок и полей текстового ввода. Если мы используем переключатели, то значение параметра value не будет видно пользоват лю, но именно это значение получить обрабатывающее CGI-приложени если пользователь выберет соответствующий переключатель.
Параметр cheked используется только для независимых переключателе и радиокнопок. Он устанавливает их начальное состояние. Если этот ni раметр будет введен в тег , то переключатель будет переведен во включенное состояние. Параметр используется без значений.
Параметр disabled делает орган управления недоступным для использс вания пользователем. Параметр используется без значений.
Параметр readonly применяется только для органов ввода типов text password. Использование этого параметра означает, что данные, отобра жаемые в этих полях, нельзя будет изменять.
Параметр size обычно задает размеры органа ввода данных. Но для каж дого отдельного типа органов ввода его действие специфично.
Параметр maxiength позволяет устанавливать максимально возможно число символов, которые пользователь может внести в поля текстовоп ввода. Значением параметра является целое положительное число.
Параметр src используется в тех случаях, когда мы создаем органы ввода связанные с графикой. Значением данного параметра является URL графического файла, который и содержит отображаемый рисунок.
Параметр alt позволяет создавать краткие описания создаваемого органа ввода данных. Это описание может отображаться в виде маленького хинта-подсказки, когда пользователь наводит курсор мыши на данный орган ввода.
Параметр tabindex задает номер органа управления в последовательности всех объектов, перемещение фокуса ввода между которыми осуществляется при помощи последовательных нажатий клавиши табуляции.
Параметр accesskey позволяет задавать "горячую клавишу", при нажатии на которую пользователем фокус ввода будет переходить к данному органу управления.

Итак, мы рассмотрели параметры, применяемые в теге . Но мы уже аем, что при помощи данного тега мы можем создавать самые различные объекты форм. Пришло время детально разобраться с ними.
Объекты, входящие в форму, разделяются на два типа — органы ввода данах и кнопки, инициирующие различные действия. Сначала посмотрим, как мы можем создавать органы ввода.
Одним из самых распространенных объектов форм является однострочное поле ввода. В листинге 1.33 мы видели, что оно создается при помощи паметра type со значением text. При этом достаточно часто нам надо задавать ограничения на максимально возможное количество символов, которые эльзователь может внести в это поле. Это ограничение реализуется при помощи параметра maxlength.
Существует модификация однострочного поля ввода текста, которая предназначена именно для ввода секретной информации, например, паролей. Они в отображают вводимый текст, а заменяют его звездочками. Создание подобных полей ввода производится при помощи следующей конструкции:

Использование типа checkbox позволяет создавать независимые переключатели. Они представляют собой всем знакомые квадратики, в которых щелчком мыши мы можем устанавливать и снимать флажки в виде галочек. При том используется параметр value. Значение этого параметра будет передана в обрабатывающее CGI-прияожение, если пользователь взведет флажок данном независимом переключателе.
'акже мы можем создавать группы переключателей, которые часто называет зависимыми переключателями. В этой группе пользователь может выбирать и помечать только один переключатель. Каждый переключатель создаtтся при помощи тега с параметром type, которому приписано значение radio. Чтобы браузер понял, что несколько переключателей принадлежат к одной группе, необходимо, чтобы их значения параметра name были одинаковыми. Но при этом у них обязательно должны различаться значения параметров value.
Рассмотрим на примере правила создания и отображения рассмотренных органов ввода информации. Листинг 1.34
, <t>opMbK/title> </head><br> <form action="http://www.mysite.com/.cgi-bin/test.exe" method="post"> .<br> <р>Поле для ввода строки текста <input type="text"x/p> <р>Поле для ввода пароля <input type="password"x/p> <р>Независимый переключатель <input type»"checkbox"<br> value="checked"x/p> <р>Группа переключателей</р><br> <р>Аньтернатива 1 <input type="radio" name="groupl" value="checkl"x'/p><br> <р>Альтернатива 2 ,<input type»"^adio" name="groupl" value="checki<br> checkedx/p><br> <р>Альтернатива 3 <input type="radio" name="groupl"<br> value="check3"x/p> '<br> <input type="submit" value="Отправить"> </form> ' ...<br> </body> </html><br> На приведенной иллюстрации (рис. 1.33) видно, как отображается введен ный текст в обычном поле ввода и в поле ввода конфиденциальной инфор мации. А в листинге 1.34 четко показано, как мы можем создавать незави симые переключатели и группы переключателей. При этом, второму по сче ту переключателю в группе мы изначально установили взведенное состояни по умолчанию. Но пользователь, естественно, всегда может сам выбрат требуемую альтернативу.<br> При помощи параметра type с приписанным значением hidden мы може« создавать скрытые поля. Это поле не только не позволяет пользователю вво дать какую-либо информацию, но и вообще не отображается в окне про смотра. Данный тип поля применяется обычно для служебных целей разработчиков.<br> А при помощи значения file мы можем создавать поле ввода имени файла При этом, рядом с полем ввода текста автоматически создается кнопкг с наименованием Обзор, при нажатии на которую открывается стандартный диалог выбора файла.<br> Помимо органов ввода информации, мы можем размещать еще и органы управления. В данном случае Ими являются кнопки. В формах используется три вида кнопок. Кнопка типа "submit" отправляет введенные пользователем данные обрабатывающему CGI-приложению. Кнопка "reset" убирает из органов ввода информацию, внесенную пользователем, и отображает информацию, установленную по умолчанию. Существуют и простые кнопки, реакцию которых мы можем программировать самостоятельно при помощи скриптовых языков. Также, вместо кнопки "submit" мы можем использовать любое графическое изображение. Рассмотрим способы создания этих органов управления.<br> <div style="text-align:center;"><img src="image/33.gif" alt="Формы"></div><br> Рис. 1.33. Окно браузера с результатом отображения файла, приведенного в листинге. 1.34<br> Кнопка типа "submit" создается при помощи конструкции следующего вида:<br> <input type="submit" vа1uе="Подтвердить"><br> Как видно, создание кнопки производится при помощи параметра type, a надпись на ней задается значением параметра value.<br> Если же нам необходимо создать кнопку очистки полей ввода информации, мы можем применить следующий фрагмент кода:<br> <input type="reset" value="Oчистить"><br> А для простой кнопки мы используем конструкцию следующего вида:<br> <input type-"button" value="Kнопка"><br> Мы уже говорили, что вместо обычной кнопки типа "submit" мы можем использовать любое графическое изображение. Для этого мы применяем такой фрагмент кода:<br> <input type="invage" src="http://www.mysite.com/image/picl.gif"><br> В этом случае нет нужды использовать параметр value<br> так как не нужно задавать надпись на кнопке. Но тогда необходимо использовать параметр src<br> значением которого является URL используемого графического файла.<br> Но помимо тех органов ввода информации, которые мы уже рассмотрели, есть и дополнительные органы, которые не реализуются при помощи тега <input>. К ним относится раскрывающегося списка и многострочное поле текстового ввода.<br> Выпадающий список реализуется при помощи тега <select>. При этом, естественно, используется и его закрывающая пара</select>. Между этими тегами мы объявляем элементы списка при помощи тегов <option>. Тег <select>, естественно, обладает некоторыми свойствами, регулируемыми при помощи параметров.<br> <ul> <li> Параметр name, как обычно, задает уникальное имя данного поля ввода, т. е. раскрывающегося списка.</li> <li> Параметр size задает количество видимых строк при раскрытии списка. Естественно, самих элементов в списке может быть больше, чем отображаемых строк. Но в этом случае всего-навсего будет отображаться вертикальная полоса прокрутки. Значением параметра является целое положительное число.</li> <li> Параметр multiple применяется, если мы хотим позволить пользователю выбирать из списка несколько значений сразу.</li> <li> Параметр disable заставляет браузер отображать данный выпадающий список, но при этом пользователь не получит возможность активизировать его и выбрать какое-либо значение.</li> <li> Параметр tabindex, как мы уже знаем, устанавливает порядковый номер элемента ввода данных в последовательности объектов, переход фокуса ввода между которыми производится при помощи клавиши табуляции.</li> </ul> A сами элементы выпадающего списка создаются при помощи тегов <option>. Эти теги тоже имеют свои свойства. Но их не так уж и много.<br> <ul> <li> Параметр selected используется для тех элементов, которые при активации выпадающего списка будут выделяться по умолчанию.</li> <li> Параметр value указывает значение, которое будет передано обрабатывающему CGI-приложению, если пользователь выделит именно этот элемент выпадающего списка.</li> </ul> Теперь рассмотрим несложную процедуру создания выпадающих списков в формах HTML-документов (рис. 1.34).<br> Листинг 1.35<br> Рис. 1.34. Окно браузера с результатом отображения файла, приведенного в листинге 1.35<br> Там осталось рассмотреть только один элемент ввода данных. Это многострочное поле текстового ввода. Оно реализуется при помощи тега textareax Этот тег создает область ввода, которая может быть достаточно бширной, и применяется обычно для ввода средних и больших объемов екстовой информации. Тег не может обойтись без параметров. И мы обязательно их рассмотрим.<br> <ul> <li> Параметр name позволяет задавать уникальное имя для данного элемента ввода данных,</li> <li> Параметр rows задает количество отображаемых строк у создаваемого поля ввода. По сути дела, это его высота, но задается она в строках. Параметр является обязательным. В качестве значения используется целое положительное число.</li> <li> Параметр cols задает ширину в символах создаваемого поля текстовог ввода. Параметр также является обязательным.</li> <li> Параметр disabled используется, если поле необходимо сделать недоступным для использования.</li> <li> Параметр readonly применяется для создания полей с нередактируемьм текстом. Текст в таких полях ввода может только отображаться, но пользователь не сможет изменить его.</li> <li> Параметр tabindex устанавливает порядковый номер элемента ввода данных а последовательности объектов, переход фокуса ввода между которыми производится при помощи клавиши табуляции.</li> <li> Параметр accesskey позволяет задавать клавишу, при нажатии на которую фокус ввода будет автоматически передан данному полю ввода.</li> </ul> Теперь посмотрим, как создаются подобные поля ввода (рис. 1.35).<br> Листинг 1.36<br> Помимо этих полей ввода есть и еще один объект, который относится к созданию форм. Мы можем создавать так называемые текстовые метки для неких органов ввода данных.<br> Ведь на самом деле радиокнопки и независимые переключатели достаточно малы по своим размерам, и для их активации неохбодимо точно попасть мышью в их активную область Это не всегда бывает удобно. Поэтому во многих программах с хорошо продуманным пользовательским интерфейсом можно активизировать подобные органы управления еще и при помощи щелчка мышью на их текстовые наименования. Точно такую же возможность предоставляет нам и HTML<br> <div style="text-align:center;"><img src="image/35.gif" alt="Формы"></div><br> Рис. 1 .35. Окно браузера с результатом отображения файла, приведенного в листинге 1 .36<br> Для создания подобных текстовых пометок и заголовков, связанных с конкретными элементами ввода данных, мы можем использовать тег <label> Но привязывать подобные метки мы сможем только к тем органам ввода данных, для которых мы явно задали идентифицирующий фаметр id. Именно по нему и устанавливается соответствие между меткой и объектом формы. Основным параметром для тега <label> служит параметр for, значением которого является значение параметра id объекта, к которому данная текстовая метка и привязывается. Приведем Пример создания подобной связи. Сначала мы создадим независимый переключатель, а затем присоединим к нему связанный текстовый заголовок. Производится подобная операция при помощи следующего фрагмента кода:<br> <label for="сheck1">Независимый переключатель</label><br> Input type="checkbox" name="check" value="checked" id="checkl"><br> Впрочем, можно обойтись и без параметра for, если тег, объявляющий связанный орган ввода данных, разместить между тегами <label><br> И на этом мы можем закончить рассмотрение процедуры создания форм для ввода данных в статических HTML-документах.<br></td> </tr> </table> <br><br> <h1>Фреймы</h1> <br> </h2> Как мы знаем, в одном окне просмотра браузера мы не можем одновременно загрузить два HTML-документа. Таким образом, если у нас на всех страницах есть одинаковое меню навигации, то абсолютно одинаковый фрагмент кода пользователь будет загружать каждый раз, когда будет переходить с одной Web-страницы сайта на другую. Даже если само меню невелико, это не самый удобный вариант, так как те каналы связи, которые есть у российских пользователей, не слишком велики, и загрузка меню может занять как минимум несколько секунд. Можем ли мы сделать так, чтобы неизменяемые элементы сайта всегда оставались в окне просмотра пользователя без перезагрузки? Можем.<br> Мы можем создать документ, который разобьет одно окно просмотра на несколько прямоугольных областей, в каждой из которых будет отображаться один HTML-документ. Эти прямоугольные области, каждая из которых является, по сути, отдельным окном просмотра, и называются фреймами.<br> Таким образом, мы можем оставить левое и/или верхнее меню навигации постоянно находиться » окне просмотра, а перезагружать только ту часть сайта, которая необходима.<br> Как любое окно просмотра, фреймы могут обладать полосами прокрутки, которые позволяют пользователю увидеть все содержимое фрейма, если оно не умещается полностью в видимой зоне. Именно эта особенность фреймов и вызывает постоянные споры между Web-мастерами. Кто-то утверждает, что подобные элементы управления не должны находиться во внутреннем пространстве основного окна просмотра, так как они занимают бесценное пространство и рассеивают внимание пользователя. Кто-то утверждает, что эти недостатки— не слишком большая цена за облегчение перезагрузки Web-страниц в условиях медленных каналов связи. Так или иначе, вопрос о возможности применения фреймов каждый должен решать самостоятельно.<br> В HTML предусмотрено два вида фреймов: обычные, и, так называемые, "плавающие". Если мы применяем обычные фреймы, то создается документ, который все окно просмотра разбивает на фреймы, и в них уже отображаются те или иные HTML-документы. Если же мы используем плавающий фрейм, то его можно включать в обычный HTML-документ без каких-либо особых ухищрений. Разницу между двумя этими типами фреймов мы увидим на примере.<br> Документ с фреймовой структурой создается при помощи тега <frameset> и его закрывающего близнеца </frameset>. Внутри этих двух тегов размещаются конструкции объявления отдельных фреймов и информация, отображаемая в окне просмотра браузера, если тот не распознает фреймы. Отдельные фреймы создаются при помощи пары тегов <frame> и </frame>. А информация, отображаемая, когда браузер не поддерживает фреймы, закладывается в HTML-документ при помощи тега <nof rames>. Но все по порядку.<br> Основой тега <frameset> является разбиение окна просмотра на несколько частей. Для этого у тега есть два основных параметра: rows и cols, которые указывают количество и размеры фреймов по вертикали и горизонтали. При этом задается прямоугольная табличная структура. Если нам необходимо сделать более детальное разбиение, например, один фрейм в левой части окна по вертикали и два фрейма, отделенных друг от друга горизонтальной границей в правой части окна, то можно создать два тега <frameset>, один внутри другого. Но все-таки, рассмотрим параметры тега <frameset> более детально.<br> <ul> <li> Параметр cols предназначен для указания количества и размеров фреймов по горизонтали в окне просмотра. В качестве значения параметра используется список размеров фреймов, разделенных запятыми. Как обычно, для указания размера мы можем использовать абсолютные и кратные величины, а также процентные соотношения. По умолчанию используется значение100%, т. е. основное окно просмотра по вертикали не разбивается. </li> <li> Параметр rows позволяет указывать количество и размеры фреймов по вертикали в окне просмотра, Специфика задания значений ложностью совпадает с параметром cols.</li> </ul> Но рассмотрим на примере, как будет выглядеть создание HTML-документов с фреймовой структурой. Предположим, что нам необходимо один фрейм слева выделить под навигационное меню, а оставшееся пространство использовать для отображения информации с основных страниц Web-сайта. В этом случае, мы разделим окно просмотра на две части. Для меню мы выделим фрейм шириной в сто пятьдесят пикселов, а оставшееся пространство должен занять второй фрейм. Подобная структура Web-страницы реализуется при'помощи кода, приведенного в листинге 1.31.<br> Листинг 1.31<br> <!DOCTYPE HTML PUBLIC "-//W3C/VDTD HTML 4.01//EN" ''http://www.w3.org/TR/html4/strict.dtd"><br> <fhtml><br> <head> <link rel="canonical" href="https://www.e-lave.ru//glava-1.htm"/> .<br> <title>0peuMbi

;

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

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

Рис. 1.30. Окно браузера с результатом отображения файла, приведенного в листинге 1.31
Между стартовым и закрывающим тегами мы разместили два тега . Обстоятельнытй и подробный разговор о них еще впереди, а пока же ограничимся замечанием, что эти теги объявляют каждый фрейм по отдельности и задают их свойства. В нашем случае мы использовали лишь один обязательный параметр зге, значением которого является URL того HTML-документа, который и будет отображаться в данном фрейме.
Также мы использовали тег . Между ним и его закрывающей парой располагается HTML-код сообщения, которое будет отображаться в окне просмотра браузера, если тот не поддерживает фреймовую технологию. Сейчас конечно, встретить подобный браузер чрезвычайно трудно, тег остался в спецификации HTML с давних времен текстовых браузеров, но использовать его все-таки стоит хотя бы из соображений вежливости к пользователям.
На иллюстрации (рис. 1.30) видно, что окно просмотра действительно было разбито на две части, и в каждой из них отображался один из созданных нами ранее HTML-файлов. При этом пользователь может самостоятельно изменять размеры фреймов, так как граница между ними, называемая также сплиттером, подвижна. Пользователю достаточно навести на нее курсор мыши, нажать основную кнопку мыши и, не отпуская ее перенести границу в необходимое место.
Единственным ограничением на размещение фреймов служит четко выраженная табличная структура набора фреймов. А что делать, если нам захочется, чтобы меню в девой части окна просмотра было само разбито на два фрейма? Классический подход не позволяет сделать это. Поэтому можно использовать вложенные структуры.
Для того, чтобы создать разбивку основного окна просмотра на три фрейма, два из которых расположены в одной колонке, друг под другом, а третий занимает все остальное свободное пространство, следует использовать следующий фрагмент кода:

' -
- '

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

Параметр name позволяет устанавливать уникальное имя фрейма. Не следует путать его с параметром id. Имя, которое мы задаем при помощи параметра name, используется в тегах гиперссылок, когда необходимо загрузить документ не в родительский фрейм, а в какой-либо другой.
Параметр src, как мы уже видели из предыдущего листинга, применяется для задания URL того HTML-документа, который должен быть отображен в искомом фрейме.
Параметр frameborder применяется для того, чтобы указать, будет ли отображаться граница данного фрейма или нет. Дело в том, что создавать видимую границу далеко не обязательно. В качестве значения данного параметра используется либо нуль, либо единица. Единичное значение, установленное по умолчанию, обозначает, что данный фрейм будет иметь видимую границу. При использовании нулевого значения, граница фрейма будет невидимой.
Параметр marginwidth позволяет задавать ширину полей данного фрейма в пикселах,
Параметр marginheght предназначен для установки размеров полей по вертикали в пикселах для данного фрейма.
Параметр noresize следует применять, если пользователь не должен иметь возможности передвигать границы фрейма, изменяя его размеры подобным образом. Если мы включаем его в состав тега , то пользователь не сможет изменять размеры данного фрейма. Параметр используется без Значений.
Параметр scrolling позволяет читателю Web-страницы управлять отображением полос прокрутки для данного фрейма. В качестве значения используется одно из трех предустановленных ключевых слов. Значение auto, установленное по умолчанию, обозначает, что полосы прокрутки у фрейма будут появляться только в том случае, если содержимое данного фрейма не будет полностью укладываться в отображаемой области. Значение yes указывает браузеру, что для данного фрейма необходимо постоянно отображать полосы прокрутки, вне зависимости от того, насколько велика его отображаемая область, и как ровно в нее "укладывается" содержимое фрейма. Значение по заставляет браузер отображать фрейм вообще без полос прокрутки. Несмотря на то, что полосы прокрутки являются самым раздражающим пользователя компонентом, не следует пользоваться подобным значением без особых на то причин. Еще раз повторюсь, что нам заранее неизвестно, какое разрешение монитора установлено у пользователя, загрузившего нашу страницу, и каков размер окна просмотра браузера. А если там не окажется достаточно места для отображения содержимого фрейма полностью, и будут отсутствовать полосы прокрутки, пользователь вообще не сможет увидеть скрытую информацию.

Теперь, когда мы рассмотрели параметры тега , следует сделать маленькое дополнение, объясняющее одно незначительное ограничение параметра src, тесно связанное с дополнительным тегом . Дело в том, что между этим тегом и его завершающим двойником </nof rames> мы размещаем некое содержимое, которое будет отображено в том случае, если браузер пользователя не поддерживает отображение фреймов. Это содержимое, естественно, тоже может быть структурировано при помощи тегов HTML. Следовательно, там могут быть использованы гиперссылки и закладки, называемые также "якорями". Так вот, если мы в этом фрагменте создадим такую закладку, то мы не можем для какого-либо из фреймов значением параметра src сделать URL данной закладки.<br> Также мы можем указать фрейм, в который загрузка HTML-документа будет происходить по умолчанию. Как мы знаем, тег гиперссылки <а> обладает параметром target, в качестве значения которого записывается имя фрейма, где и будет отображаться содержимое HTML-документа, на который указывает гиперссылка. Но если мы используем данный параметр в теге <base>, размещаемом, как мы помним, в заголовке HTML-документа, то все гиперссылки с неполным URL в параметре href, будут помещать документы, на которые они указывают, именно в тот фрейм, наименование которого обозначено в теге <base>.<br> До сих пор мы не рассматривали отдельно тег <noframes>. Но дело в том, что данный тег не обладает какими-либо уникальными параметрами, кроме общераспространенных, а механизм его применения мы могли видеть в предыдущих примерах. Поэтому мы и не будем на нем долго задерживаться.<br> До сих пор мы рассматривали обычные фреймы, которые полностью разбивают окно просмотра браузера на отдельные области, и для использования которых необходимо Применять документы со специализированной структурой. Но есть и другой вид фреймов, которые можно просто вставлять в обычный HTML-документ как стандартный объект. Больше всего это похоже на вставку графического изображения. Для вставки подобного встроенного фрейма используется тег <iframe> Но в отличие от процедуры вставки графики и иных объектов, для встроенных фреймов необходимо использовать и закрывающий тег </iframe> Приведем пример включения встроенного фрейма в обычный HTML-документ и посмотрим, как выглядит этот документ, при просмотре его в браузере.<br> Листинг 1.32<br> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" <br> "http://www.w3.org/TR/html4/strict.dtd"><br> <html> <br> <head> <link rel="canonical" href="https://www.e-lave.ru//glava-1.htm"/><br> <title><t>peftMbi</title><br> </head><br> <body><br> <р>Текст со встроенным <iframe src="l-25.htm"> </iframe> фреймом</р><br> </body><br> </html> <br> Как видно из листинга и приведенной иллюстрации (рис. 1.31), процедура использования встроенных фреймов отнюдь не сложна. Но в листинге мы, как всегда, использовали простейший вариант по умолчанию, а ведь фрейм, пусть даже и встроенный, естественно должен иметь достаточно обширный список свойств отображения, которые регулируются при помощи параметров. Их мы сейчас и рассмотрим.<br> <ul> <li> Параметр name позволяет задавать имя данного встроенного фрейма. Значением параметра является обычная текстовая строка. После этого на данный фрейм можно указывать в гиперссылках. Таким образом, мы получаем возможность динамического изменения содержимого встроенного фрейма.</li> <li> Параметр src предназначен для установки содержимого встроенного фрейма. Значением параметра является URL того HTML-документа, который будет загружен в этот встроенный фрейм.</li> <li> Параметр frameborder, наравне со многими другими параметрами, явно унаследован из обычных фреймов. Точно так же, как и там, он указывает браузеру, следует ли нет отображать границу у фрейма. В качестве значений используются нуль и единица. Единичное значение, установленное по умолчанию, обозначает, ига границу встроенного фрейма необходимо отображать. Нулевое значение делает границу невидимой.</li> <li> Параметры marginwidh и marginheight задают ширину и высоту полей встроенного фрейма, соответственно. Значением параметров являются числа, выражающие размеры в пикселах.</li> </ul> <div style="text-align:center;"><img src="image/31.gif" alt="Фреймы"></div><br> Рис. 1.31. Окно браузера с результатом отображения файла, приведенного в листинге 1.32<br> <ul> <li> Параметр scrolling регулирует отображение полос прокрутки встроенного фрейма. В качестве значения используется одно из трех предустановленных ключевых слов. Значение auto, установленное по умолчанию, означает, что полосы прокрутки будут появляться только в том случае, когда содержимое фрейма будет больше по размерам, чем сам фрейм. Значение yes принудительно отображает полосы прокрутки в любом случае, а значение по запрещает браузеру отображать эти полосы прокрутки для данного фрейма вообще.</li> <li> Параметр align позволяет нам устанавливать выравнивание встроенного фрейма по вертикали или горизонтали относительно остального содержимого Web-страницы. Возможные значения точно такие же, как у одноименного параметра тега <img>, поэтому не стоит их еще раз повторять. И результат действия этих значений тоже был нами рассмотрен ранее.</li> <li> Параметр height предназначен для явной установки размеров встроенного фрейма по вертикали. В качества значения данного параметра может использоваться любое обозначение размера.</li> <li> Параметр width позволяет задавать ширину встраиваемого фрейма. Значение может задаваться в пикселах, кратных величинах или процентных соотношениях.</li> </ul> И на этом мы заканчиваем рассмотрение фреймов. Мы знаем о них все, что нам необходимо знать для эффективного использования фреймов.<br> </td> </tr> </table> <br><br> <h1>Гиперссылки</h1> <br> </h2> Гиперссылки являются основным достоинством Web-страниц. Это, по сути, и есть ядро всемирной паутины. Тем, без чего бы она так и осталась просто еще одним средством отображения документов. Они являются видимым отображением той технологии связи самых различных интернет-ресурсов, которая и создает уникальную интегрированность Сети.<br> Мы все прекрасно знаем, что если при просмотре Web-страницы навести курсор мыши на гиперссылку, внедренную в состав содержимого Web-страницы, то курсор примет форму кисти руки с вытянутым указательным пальцем, а единичный щелчок по этой гиперссылке заставит браузер отыскать в Сети тот ресурс, на который гиперссылка указывает, и загрузить его.<br> В качестве гиперссылки может выступать любой фрагмент видимого содержимого Web-страницы, т. е. и текст, и графические изображения. Для этого применяется тег <а> со своим закрывающим близнецом </а>. Рассмотрим самый простой пример.<br> Листинг 1.15<br> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"<br> "http://www.w3.org/TR/html47strict.dtd"><br> <html> <head> <link rel="canonical" href="https://www.e-lave.ru//glava-1.htm"/><br> <title>Гиперссылки</title> <body><br> <р>0бычный текст. <a href="other_doc.htm">Гиперссылкa на другую web-страницу</а> </р><br> </body><br> </html> <br> <div style="text-align:center;"><img src="image/15.gif" alt="Гиперссылки"></div><br> Рис. 1.15. Окно браузера с результатом отображения файла, приведенного в листинге 1.15<br> Как легко увидеть на рис. 1.15, гиперссылка также выделяется цветом, чтобы ее можно было отличить от обычного текста. Цвет выделения устанавливается удаленным пользователем в своем браузере, но мы имеем возможность явно указывать, какой цвет использовать для выделения гиперссылок при помощи стилевых таблиц. Их применение мы рассмотрим в следующей главе. Если мы посмотрим на код листинга 1.15, то увидим, что текст, с которым связывается гиперссылка, обрамляется тегами <а> и </а>. При этом открывающий тег обладает параметром href, в качестве значения которого используется URL того Интернет-ресурса, на который и указывает создаваемая гиперссылка. При этом URL может быть как полным, т. е. включающем в себя наименование протокола доступа к ресурсу, наименования сайта и страницы, Как, например, "http://www.mysite.com/mypage.htm", так и относительным, когда указывается путь к документу, находящемуся на том же сайте, где и исходная Web-страница. При этом будет использоваться код приблизительно следующего вида:<br> <а href="/chap2/page1.htm"><br> Здесь мы ссылаемся на Web-страницу, находящуюся в файле с наименованием pagel.htm, который размещается в каталоге chap2.<br> Вообще, об URL следует рассказать несколько подробнее. Это единственное и абсолютно точное средство идентификации любых ресурсов, размещенных в Сети. В общем виде его можно написать следующим образом:<br> http://www.mysite.com/fоlderl/filel.htm<br> Сам URL можно разделить на три логические части. В самом начале URL мы описываем протокол, по которому производится доступ к интернет-ресурсу. Для Web-страниц используется протокол HTTP, как в нашем примере. Если необходимо установить гиперссылку на некий файл, размещенный на каком-либо FTP-сервере, то это наименование и записывается в начальной части URL. Также существует механизм, позволяющий при нажатии курсором мыши на гиперссылку, активировать почтовый клиент, установленный пользователем в системе по умолчанию, и запускать режим написания письма, одновременно указывая адрес получателя. Для этого используется гиперссылка следующего вида:<br> <а href="mailto://address@host.com"><br> Как видно, в качестве обозначения протокола используется ключевое поле maiito, а после двоеточия и пары слэшей, которые всегда отделяют наименование протокола от основной части адреса, записывается адрес электронной почты, на который будет отсылаться написанное пользователем электронное письмо.<br> Вторая часть URL описывает сам адрес ресурса. Для Web-страницы это доменное имя сайта. Обычно применяется доменное имя второго или третьего уровня. Доменные имена первого уровня записываются в самом конце доменного имени. Внутри каждого домена первого уровня контролирующими организациями выделяются доменные имена второго уровня. А владельцы доменных имен второго уровня самостоятельно создают доменные имена третьего уровня. Так, практически, каждый владелец доменного имени второго уровня выделяет себе доменное имя третьего уровня WWW.<br> А третья часть URL представляет собой путь к конкретному файлу во внутреннем файловом пространстве Web-сервера. Здесь необходимо сделать маленькое отступление, разъясняющее механизм действия Web-серверов.<br> Для того, чтобы любой удаленный пользователь мог получить доступ к какому-либо Web-сайту, представляющему собой, как известно, некую коллекцию отдельных Web-страниц и специализированных выполняемых приложений — скриптов, необходимо, чтобы все эти Web-страницы находились на отдельном компьютере, на котором действует специализированное приложение, называемое Web-сервером. В обязанности подобного Web-сервера входит получение запросов удаленных пользователей, обработка этих запросов и передача удаленным пользователям содержимого Web-страниц по протоколу HTTP. Для Web-сервера на диске компьютера выделяется отдельный каталог, в котором и размещаются html-файлы, содержащие Web-страницы, и приложения — скрипты, обеспечивающие интерактивные функции сайта. Естественно, внутри общего каталога, отведенного для Web-страниц, мы можем создавать свои структуры папок для более четкого разделения ресурсов сайта. Так в отдельные папки обычно выделяются графические изображения, используемые в оформлении Web-страниц, сами Web-страницы группируются в каталогах, по признаку принадлежности к тому или иному разделу сайта. И полный путь к некоему html-файлу или иному ресурсу, который используется в оформлении Web-страниц, и является третьей частью URL. Рассмотрим маленький пример: <br> http://www.mysite.com/content/about.html<br> Этот URL указывает на файл с наименованием about.html, который располагается в директории content, находящейся в файловом пространстве Web-сервера с доменным именем www.mysite.com. При этом передача пользователю содержимого искомого файла будет проходить с использованием протокола HTTP.<br> Впрочем, в поле ввода адреса интернет-ресурса любого браузера можно ввести только доменное имя сайта, и мы уже получим доступ к основной Web-странице данного сайта. Дело в том, что если не указывать в поле ввода протокол, то браузер автоматически использует протокол HTTP. А если не указывать полное наименование html-файла с Web-страницей, то Web-сервер, принимающий запрос удаленного пользователя, выдаст главную страницу сайта, называемую часто домашней страницей, которая обязательно хранится в файле с наименованием index.html, т. е. каждый сайт обязан содержать файл с таким наименованием, который и является стартовой страницей Web-сайта.<br> Но при этом необходимо осознавать, что если в браузере мы можем позволить себе написать адрес не полностью, понадеявшись на правильную его интерпретацию самим браузером, то в гиперссылках мы обязаны писать URL полностью, за исключением тех случаев, когда документы, на которые указывает гиперссылка, находятся на том же сайте, что и исходная Web-страница. В подобных случаях мы можем не указывать доменное имя сайта, ограничившись указанием протокола и полного наименования, включающего в себя путь в файловой системе Web-сервера, ресурса, на который указывает гиперссылка.<br> На самом деле, тег <а> обладает достаточно большим количеством параметров, которые позволяют задавать самые различные свойства гиперссылки. По мере изучения материала мы рассмотрим их все.<br> Гиперссылки принято разделять на глобальные и локальные. Глобальные гиперссылки указывают на интернет-ресурсы, размещенные вне исходной Web-страницы. Локальные же ссылки адресуют некоторые ресурсы, расположенные на текущей странице. Часто этот прием используется если страница содержит достаточно большой объем информации, который не умещается полностью в окне просмотра. Например, мы размещаем на Web-странице некую повесть, или текстовый документ, разбитый на разделы. При этом в начале этого документа мы можем создать его оглавление, действующее на основе гиперссылок, каждая из которых будет указывать на какой-либо раздел документа. Тогда пользователь, загрузивший Web-страницу, сможет перемещаться по документу с использованием этих гиперссылок, а не только при помощи вертикальной полосы прокрутки, что, несомненно, облегчает навигацию.<br> Для того чтобы в документе мы могли использовать локальные гиперссылки, необходимо сначала пометить те фрагменты документа, на которые они будут указывать. Например, если мы хотим, чтобы какая-либо локальная гиперссылка перемещала удаленного пользователя к некоему определенному абзацу, то в этот абзац мы должны поместить тег <а> с параметром name. При этом сама гиперссылка будет создаваться с использованием несколько измененного значения параметра href. Но проще все это увидеть на примере (рис. 1.16).<br> Листинг 1.16<br> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"<br> "http://www.w3.org/TR/html4/strict.dtd"><br> <html> <head> <link rel="canonical" href="https://www.e-lave.ru//glava-1.htm"/><br> <title>Гиперссылки</title> <br> <body><br> <p><a href="#аnсh1">Локальная гиперссылка</а></р> <р>0бычный текст</р><br> <р><а name="anch1">Teкст, на который мы ссылаемся в начале страницы</ах/р><br> </body> <br> </html><br> Легко увидеть из текста листинга, что при ссылке на идентификатор, располагающийся в теле Web-страницы, мы в качестве значения параметра href указываем наименование этого идентификатора со знаком решетки перед ним. Впрочем, подобным образом мы можем использовать гиперссылки не только на фрагменты содержимого исходной Web-страницы, но и на фрагменты иных Web-страниц, помеченные подобным способом. Подобная гиперссылка будет иметь приблизительно следующий вид:<br> <а href="http://www.mysite.com/doc2.htmfanch3"><br> To есть, мы совмещаем использование полного URL документа и одновременно указывааем на некий его фрагмент, помеченный как "anchs".<br> <div style="text-align:center;"><img src="image/16.gif" alt="Гиперссылки"></div><br> Рис. 1.16. Окно браузера с результатом отображения файла, приведенного в листинге 1.16<br> Следует отметить, что если текст, на который указывает гиперссылка, уже отображен в окне просмотра, как это случилось в нашем последнем примере, то никаких изменений не произойдет. Но стоит лишь изменить размеры окна просмотра браузера по вертикали так, чтобы скрыть последнюю строку содержимого, на которую и указывает гиперссылка, и результат ее действия можно будет наглядно продемонстрировать.<br> Естественно, все наименования подобных маркеров-закладок, которые определяются при помощи значения параметра name, должны быть уникальными. При этом следует учитывать, что HTML не делает различий между заглавными и прописными символами. Поэтому, если в нашем HTML-документе определены две закладки, на которые будут впоследствии ссылаться гиперссылки, различающиеся лишь регистром символов, то для HTML-анализатора, встроенного в браузер, эти идентификаторы будут считаться одинаковыми, и он не будет обрабатывать ни один из них.<br> Впрочем, мы уже знаем, что идентифицировать какой-либо элемент HTML-документа можно и при помощи параметра id, который может использоваться в составе любого тега. При этом гиперссылки, указывающие на фрагменты документов, могут использовать и эти параметры, т. е. для установки маркера-закладки на какой-либо тег не обязательно использовать тег <а> с параметром name, достаточно лишь использовать параметр id.<br> Значения параметра name и параметра id являются уникальными идентификаторами элементов HTML-документа. Поэтому ни одно значение параметра name не должно совпадать ни с одним значением параметра id.<br> Но какой вариант следует выбрать для своих Web-страниц, какой именно параметр стоит использовать? Здесь необходимо осознавать, что, несмотря на то, что параметр id может служить для выполнения нескольких действий, таких как идентификация маркера-закладки, создание уникальных щдентификаторов для выполняемых сценариев DHTML и стилевого оформления, некоторые устаревшие браузеры могут не воспринимать эти идентификаторы для ориентирования гиперссылок.<br> Совместно с тегом <а> может использоваться параметр title, который поможет идентифицировать гиперссылку для удаленного пользователя. Значением этого параметра является текстовая строка, которая будет отображаться виде маленькой подсказки — хинта, когда пользователь наведет курсор мыши на искомую гиперссыяку. Выглядит объявление подобной гиперссылки приблизительно следующим образом:<br> <а href="www.site.com" title="Очень симпатичный сайт"><br> При помощи параметра hrefiang мы можем указать язык, на котором написано текстовое содержимое того интернет-ресурса, на который и указывает данная гиперссылка. В качестве значения параметра используется одно из стандартных обозначений языка, которые мы рассматривали в этой главе несколько ранее.<br> Но одного указания языка, на котором написано текстовое содержимое Web-страницы, бывает мало. Необходимо указывать еще и применяемую кодировку. И здесь нам может помочь знакомый уже нам параметр charset, значением которого является стандартное обозначение кодировки, применяемой для отображения текстового содержимого того интернет-ресурса, на который указывает искомая гиперссылка.<br> При помощи параметра гel мы можем указывать назначение документа, на который указывает гиперссылка, т. е. значение этого параметра явно обозначает отношение между исходным документом и документом, на который мы ссылаемся. Использование данного параметра никак не влияет на способ отображения гиперссылки или механизм получения ресурса, но может быть полезным. Если Web-страницы предназначены не только для просмотра при помощи браузера, но и для обработки некоторыми специализированными приложениями. Такими, например, как продвинутые поисковые системы, которые в состоянии правильно распознавать и обрабатывать подобные отношения между документами, обозначаемые с помощью гиперссылок.<br> В качестве значения параметра rel применяется одно из предопределенных ключевых слов, которые мы сейчас рассмотрим.<br> <ul> <li> Alternate. Значение указывает, что документ является альтернативным представлением исходного документа. Если при этом в гиперссылке используется параметр lang со значением, которое отлично of языка исходного документа, то подобная гиперссылка обычно рассматривается как ссылка на копию исходного документа на другом языке.</li> <li> Stylesheet. Обозначает, что документ, на который указывает гиперссылка, является стилевой таблицей. О механизме применения стилевых таблиц подробно рассказано во второй главе.</li> <li> start. Применяется для обозначения начального, стартового документа некоего множества документов. Применительно к Web-сайту это, очевидно, будет домашняя страница.</li> <li> Next. Значение используется, если стартовый документ и документ, на который указывает гиперссылка, входят в некую линейную упорядоченную последовательность документов, и последний является следующим в последовательности по отношению к исходной Web-странице.</li> <li> Prev. Значение используется в том же случае, что и предыдущее, но теперь указывает на то, что документ в цепочке является не следующим, а предыдущим, по отношению к стартовому документу.</li> <li> index. Используется в гиперссылках, которые указывают на документ, являющийся индексированным содержанием исходной Web-страницы.</li> <li> Glossary. Значение указывает, что документ содержит словарь терминов, использующихся в исходном документе.</li> <li> copyright. Используется, если документ, на который указывает гиперссылка, содержит уведомление об авторских правах на содержимое исходного документа.</li> <li> chapter. Применяется в гиперссылках, указывающих на документы, являющиеся отдельными главами в некоем множестве документов.</li> <li> section. Гиперссылка с таким значением параметра rel указывает на документ, который является разделом в общем множестве документов, образующих единое целое содержание.</li> <li>subsection. Значение является некоторым продолжением концепции, обозначенной предыдущим рассмотренным нами значением. Оно обозначает, что документ является уже подразделом.</li> <li> Appendix. Значение указывает, что документ, на который указывает гиперссылка, является приложением к исходному документу.</li> <li> Help. Используется для ссылок на документы, которые предоставляют дополнительную справочную информацию по отношению к содержимому исходного документа.</li> <li> Bookmark. Применяется для ссылок на HTML-документы, содержащие ссылки на некоторые выделенные ключевые фрагменты исходного документа.</li> </ul> При использовании этих значений необходимо учитывать, что в данном случае HTML-анализаторы будут чувствительны к регистру символов, поэтому необходимо полностью придерживаться того написания, которое приведено в нашем списке.<br> На самом деле, в HTML присутствует возможность создавать свои значения для рассматриваемого нами атрибута, но так как для использования этого параметра в полной мере необходимо использовать специализированные средства описания этих новых значений и программное обеспечение, нацеленное на распознавание этих типов ссылок. Так как нас интересуют браузеры, то создание новых типов ссылок нам ни к чему.<br> Данная технология на самом деле является паллиативом, который призван обеспечить хотя бы часть возможностей, предоставляемых новым языком описания документов в Интернете — XML (extensible Markup Language), который пророчат на роль преемника и "убийцы" HTML Но пока не существует распространенных XML-браузеров и приложений, обрабатывающих XML-документы. И еще достаточно долгое время эта технология не станет общепринятой, а значит, технология HTML еще имеет полное право на жизнь и будет использоваться в качестве основы для Web-страниц еще достаточно долго.<br> Но вернемся к рассмотрению атрибутов тега <а>. Атрибут rev является противоположностью атрибутов тега <а>. Если атрибут rel определяет тип документа, на который указывает гиперссылка, то атрибут rev определяет тип исходного документа, содержащего гиперссылку. В качестве значений этого атрибута применяется все тот же набор ключевых слов, который использовался и для атрибута rel.<br> При помощи параметра target мы указываем, в каком фрейме необходимо отобразить документ, на который указывает гиперссылка. Дело в том, что обычно в одном окне просмотра браузера отображается один документ. Но в HTML существует возможность поделить окно просмотра на несколько областей, называемых фреймами, в каждом из которых будет отображаться свой HTML-документ. Саму технологию использования фреймов мы будем рассматривать в одном из следующих разделов этой главы, а пока лишь отметим, что параметр target позволяет явно указывать, в каком фрейме необходимо отобразить Web-страницу. Установка гиперссылки с использованием этого параметра будет выглядеть приблизительно следующим образом:<br> <а href="http://www.mysite.com/docl.html" target="_top"><br> Подобная гиперссылка заставит браузер загрузить Web-страницу, URL которой указан в качестве значения параметра href, в верхний фрейм, имя которого указано в параметре target. В качестве значения последнего параметра используются ключевые слова, определенные в спецификации HTML. Мы рассмотрим их в разделе, посвященном фреймам.<br> Некоторые органы ввода информации и гиперссылки позволяют перемещать фокус ввода между собой при помощи клавиши табуляции, т. е. одно нажатие этой клавиши активизирует следующий орган ввода, входящий в общую последовательность. А порядок перемещения между органами управления, входящими в общую последовательность, задается при помощи параметра tabindex. В качестве значения этого параметра используется обычное целое положительное число, и чем больше это число у какого-либо органа ввода данных или гиперссылки, тем позже дойдет до него очередь при перемещении фокуса ввода. Естественно, ни у какой пары элементов оформления Web-страницы значение этого параметра не должно совпадать, иначе браузер просто не будет включать их в последовательность элементов с перемещением фокуса ввода.<br> Впрочем, помимо доступа при помощи последовательных нажатий клавиши табуляции, мы можем использовать параметр access key, в качестве значения которого указывается символ. Когда пользователь нажимает на клавишу, которая отвечает за ввод данного символа, фокус ввода автоматически передается искомой гиперссылке, в объявление которой и встроен параметр access key, и пользователь может активировать ее без использования мыши, одним лишь нажатием на клавишу <Enter>. Рассмотрим маленький пример:<br> <а href="http://www.mysite.com/docl.html" tabindex="2" accesskey="U"><br> Этим тегом мы объявляем гиперссылку, доступ к которой можно получить либо при помощи последовательных нажатий клавиши табуляции, либо нажав клавишу с символом "U".<br> В качестве носителя гиперссылки может выступать не только текст, но и графическое изображение. Для этого необходимо тег, объявляющий вставку графики в состав содержимого Web-страницы, поместить между тегами <а> и </а>. Но дело в том, что на графическое изображение мы можем "навесить" не одну, а несколько гиперссылок, т. е. в пределах картинки выделяется несколько активных областей, нажатие мышью на каждую из которых активирует соответствующую гиперссылку. Подобная технология называется сегментированной графикой.<br> Для создания подобных графических изображений, связанных с несколькими гиперссылками, применяются специализированные теги. Сначала объявляются активные области рисунка, называемые также сегментами. Вся их совокупность составляет карту активных сегментов рисунка, которой присваивается некое имя. А затем это имя карты связывается с самим изображением, объявляемым при помощи тега <img>. Рассмотрим типичный пример. <br> Листинг 1.17<br> !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"<br> "http://www.w3.org/TR/htm!4/strict.dtd"><br> <html><br> <head> <link rel="canonical" href="https://www.e-lave.ru//glava-1.htm"/><br> <title>Ceгментированная графика</title> <br> <body> <br> <р>Это обычный текст.<img srce"redhood.gif" usemap="#mapl"<br> alt="docs"x/p> <map namee"mapl"><br> <area href^"1.htm" shape-"rect" coords="l, 1, Ю, 10" alt-"l">. <br> <area href="2.htm" shape="circle" coords«"20,20,5" alt-"2"><br> <area href-"l.htm" shape»"poly" coords-.111,30,10,35,1, 50', 1, 30" alt="3"><br> </raap><br> </body><br> </html><br> В этом примере видно, что при объявлении рисунка, в тег <img> мы вставляем параметр usemap, значением которого является наименование карты активнь!х сегментов рисунка, связанных с гиперссылками. Перед наименованием используемой карты активных сегментов вставляется символ решетки. Описание этой карты помещается между тегами <тар> и </тар>. При этом у открывающего тега <тар> существует обязательный параметр name, значением которого является наименование карты.<br> Карта состоит из описания сегментов. Каждый сегмент описывается при помощи одного тега <агеа>. Мы можем применять активные сегменты трех различных форм: прямоугольники, круги и многоугольники. Форма задается при помощи обязательного параметра shape. В качестве значения данного параметра мы можем использовать одно из трех предустановленных значений.<br> <ul> <li> Значение rect используется для создания прямоугольных активных областей.</li> <li>Значение circle используется для создания кругового сегмента.</li> <li>Значение poly позволяет создавать активные сегменты в виде выпуклых многоугольников.</li> </ul> После того, как мы задали тип формы, следует точно определить их размеры и расположение на нашем графическом изображении. Для этого используется параметр coords, в качестве значения которого записывается перечень координат, определяющих активный сегмент. В листинге 1.17 мы можем увидеть, что координаты в общем списке разделяются обычной запятой. Отсчет координат ведется от верхнего левого угла рисунка, который имеет координаты (0;0).<br> Для прямоугольных сегментов задаются координаты верхнего левого и правого нижнего угла. А для многоугольников последовательно перечисляются координаты всех точек, в порядке соединения их линиями. Естественно, первая и последняя пара координат должны совпадать, иначе многоугольник окажется незамкнутым, и активный сегмент не будет обрабатываться.<br> В тег <агеа> входит и параметр href, в качестве значения которого используется URL ресурса, на который указывает гиперссылка данного сегмента.<br> Но этот параметр, как ни удивительно, не является обязательным. В том случае, когда сегмент создается, но не должен соединятся с гиперссылкой, следует использовать параметр nohref, который не имеет значения.<br> Но обязательный параметр для тега <агеа> все-таки есть. Это параметр alt, значением которого является текстовая строка, являющаяся альтернативным представлением рисунка. Как мы знаем, данная строка отображается в виде хинта, когда пользователь наводит курсор мыши на объект. В нашем случае подобным объектом является активный сегмент, внедренный в графическое изображение.<br> Также в теге <агеа>, как и в тегах обычных гиперссылок, используются параметры tabindex и access key, которые позволяют активизировать гипер-ссылку без использования мыши, при помощи одной лишь клавиатуры. Структуру значений этих параметров мы рассмотрели несколько ранее. Немного отступая от темы, следует заметить, что любой «давильным Web-мастер непременно должен использовать эти параметры, так как только их применение может гарантировать активацию гиперссылок без помощи мыши.<br> Итак, мы разобрались с применением технологии сегментированной графики. Но о ссылках мы узнали далеко не все. В спецификации HTML определен тег <link>, который создает не привычную нам гиперссылку, а некоторую связь между отображаемым документом и каким-либо дополнительным файлом. Теги <link> могут размещаться только в разделе заголовка HTML-документа, между тегами <head> <link rel="canonical" href="https://www.e-lave.ru//glava-1.htm"/> и </head>В качестве примера применения рассматриваемого нами тега <link> можно привести следующий фрагмент кода:<br> Листинг 1.17<br> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"<br> "http://www.w3.org/TR/html4/strict.dtd"><br> <html><br> <head> <link rel="canonical" href="https://www.e-lave.ru//glava-1.htm"/><br> <title>Chapter 2</title><br> <link rel="Index" href="/index.html"><br> <link rel="Next" href="Chapter3.html"><br> <link rel="Prev" href="Chapterl.html"><br> </head><br> При помощи этого фрагмента мы указываем, что данная Web-страница содержит вторую главу некоего обширного документа, и при помощи тегов <link> указываем связи с Web-страницами, содержащими оглавление, а также предыдущую и следующую главу. Тип документа, на который указывает ссылка, определяется при помощи знакомого нам параметра гel, Обычный браузер, конечно, не сможет каким-либо образом обработать и отобразить подобные ссылки. Они были введены в HTML для создания документов, которые обрабатывались бы при помощи неких специализированных приложений, позволяющих на основе данного формата создавать системы документооборота. Но встроенных скудных возможностей HTML<br> для создания полноценных систем документооборота было явно недостаточно, и когда был разработан стандарт XML, разработчики с радостью сменили фаворита.<br> Так что же, получается, что в обычных Web-страницах тег <iink> абсолютно бесполезен? На самом деле нет. Только при помощи этого тега мы можем соединять Web-страницы с внешними стилевыми таблицами, мощнейшим средством управления отображением документа в браузере. Но о стилевых таблицах мы узнаем чуть позже, во второй главе. Там же мы и рассмотрим пример применения тега <link>. А пока нам осталось лишь перечислить параметры данного тега. Все эти параметры применяются и в тегах <а> с теми же возможными значениями, поэтому мы не будем детально рассматривать каждый параметр, а просто вкратце их перечислим:<br> <ul> <li> charset — указывает кодировку документа, на который указывает ссылка;</li> <li> href — в качестве значения используется URL документа, на который указывает ссылка;</li> <li> hrefiang — значением является кодовое обозначение языка, на котором написан связываемый документ;</li> <li> type — устанавливает тип документа, на который указывает ссылка;</li> <li> rel— задает статус документа, на который указывает ссылка по отношению к исходному документу;</li> <li> rev — задает статус исходного документа по отношению к тому, на который указывает данная ссылка;</li> <li> media — указывает тип устройства, на котором будет отображаться документ, на который указывает ссылка. </li> </ul> На данный момент поддерживаются документы, отображаемые на обычных мониторах, на брайлевских мониторах, рассчитанных на людей с потерей зрения, для печатающих устройств и устройств речевого воспроизведения.<br> И, естественно, помимо этих параметров используется набор общих для всех тегов параметров дополнительной идентификации.<br> Осталось нам рассмотреть только один тег, применяемый для обслуживания гиперссылок. Как мы знаем, мы можем не указывать полный URL для документов, на которые указывают гиперссылки, если этот документ находится на том же Web-сайте, что и исходная Web-страница. Но оказывается, мы можем точно так же поступать и с гиперссылками на Web-страницы, входящими в состав иных сайтов.<br> При помощи тега <base> мы задаем основание для гиперссылок с укороченными значениями параметра href. Попробуем продемонстрировать действие этого механизма на простом и наглядном примере:<br> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"<br> "http://www.w3.org/TR/html4/strict.dtd"><br> <html> <head> <link rel="canonical" href="https://www.e-lave.ru//glava-1.htm"/><br> <title>Web-Cтраница</title><br> <base href="http://www.mysite.com/tour.html"> </head> <body><br> <Р>Текст<А href="/cages/birds.gif">Ссылка</А> <br> </body> <br> </html><br> В качестве значения обязательного параметра href тега <base> мы задаем документ, являющийся основой для содержимого Web-страниц нашего сайта. И теперь, если в теле нашего HTML-документа мы используем гиперссылку с укороченным URL, то в качестве доменного имени для этого URL будет использоваться не имя исходного сайта, а того, который указан в теге <base>. Таким образом, в примере гиперссылка указывает на документ c URL www.mysite.com/cages/birds.gif.<br> Следует уточнить, что тег <base> размещается в заголовке документа между тегами <head> <link rel="canonical" href="https://www.e-lave.ru//glava-1.htm"/> и </head>.<br> И это все, что мы можем рассказать о применении гиперссылок в HTML.<br> </td> </tr> </table> <br><br> <h1>ЯЗЫК HTML</h1> <br> </h2> <ul> <li>Основы</li> <li>Cтруктура HTML-документа</li> <li>Используемые символы</li> <li> Цвета и единицы измерения</li> <li> Оформление текста</li> <li> Графика и мультимедиа</li> <li> Гиперссылки </li> <li>Списки</li> <li> Таблицы</li> <li> Фреймы</li> <li> Встраиваемые объекты</li> <li> Формы</li> <li>Использование сценариев</li> </ul></td> </tr> </table> <br><br> <h1>Графика и мультимедиа</h1> <br> </h2> Вторым по значимости компонентом наполнения Web-страниц после текста, несомненно, будет графическое оформление. Это различного рода рисунки, фотографии и, может даже, видеоклипы. Также мы можем использовать звуковое сопровождение отображения Web-страниц.<br> Начнем мы с размещения графических изображений. Браузеры в состоянии отображать только три вида графических файлов. Это файлы форматов GIF, JPEG и PNG. Файлы формата GIF позволяют создавать анимированные изображения. JPEG-файлы обьино применяются для сохранения фотографических изображений. Недавно появившийся формат PNG позволяет совмещать хорошее качество изображения и маленький объем графического файла. Но после того как изображение было упаковано в графический файл, его все-таки необходимо каким-либо образом внедрить в состав Web-страницы.<br> Для этого применяется тег <img> со множеством параметров. Данный тег не имеет закрывающей пары, так как он не создает какой-либо области действия правила отображения, он лишь внедряет в содержимое Web-страницы<br> графическое изображение. На самом деле графическое изображение может быть еще и гиперссылкой или, даже, скрывать за собой несколько гиперссылок но о гиперссылках мы поговорим в следующем разделе этой главы, а пока разберемся с правилами применения тега <img>.<br> Основным и обязательным атрибутом тега <img> является атрибут src. В качестве значения этого атрибута используется адрес вставляемого графического файла или, если быть точным, его URL. Если графический файл находится на том же Web-сервере, то достаточно записать полное наименование файла, включая путь к нему по вложенным каталогам, т. е. если в той же папке, что и HTML-файлы с Web-страницами, расположен каталог images с рисунками, то тег вставки графического изображения приобретет следующий вид: <br> <img src="images/pictl .gif "><br> В этом примере мы используем рисунок формата GIF, находящийся в файле с именем pictl.gif, который, в свою очередь, расположен в каталоге с наименованием images. Следует обратить внимание, что слэши — наклонные черты, наклонены в другую сторону, нежели при использовании их в путях файлов операционных систем семейств DOS и Windows. Дело в том, что изначально Web-серверы базировались на операционной системе Unix, которая и поддерживает файловую систему с подобными слэшами. А сейчас абсолютно неважно, какая операционная система поддерживает сервер с Web-сайтом, все пути записываются одинаковым способом и правильно обрабатываются программным обеспечением сервера.<br> На заре развития WWW браузеры отображали только текстовую информацию, никакая графика не поддерживалась. Сейчас они практически не встречаются, но каждый браузер имеет возможность отключения загрузки графики. Поэтому всегда следует использовать альтернативное текстовое представление рисунка. Попросту, необходимо приготовить текст, который будет отображаться вместо рисунка, если тот не может быть по каким-либо причинам загружен браузером. Этот текст добавляется к тегу <img> при помощи параметра alt, значением которого и является искомая текстовая строка, т. е. получится приблизительно следующая конструкция:<br> <img src="images/pictl.gif" alt="Это я на отдыхе"><br> В том случае, если графическое изображение все-таки показывается браузером, текст альтернативного текстового представления отображается в виде «хинта», короткой текстовой подсказки, когда пользователь наводит курсор мыши на искомое графическое изображение.<br> Впрочем, существует и более развернутый вариант создания подобных текстовых подсказок. При помощи параметра longdes с задается адрес интернет-ресурса, на котором находится полное описание данного графического изображения. В качестве значения этого параметра указывается, естественно, URL ресурса с описанием изображения.<br> Параметр name позволяет задавать уникальное имя изображения, которое идентифицирует этот элемент оформления Web-страницы. Этот параметр оставлен для целей обратной совместимости, он остался от предыдущих версий стандарта HTML. Сейчас для этих целей все теги используют параметр id.<br> По умолчанию графическое изображение показывается именно в таком виде, как оно и было создано, с сохранением размеров по вертикали и горизонтали. Однако мы имеем возможность явно задавать размеры рисунка по своему усмотрению. Для этого используются параметры height и width. Как задавать размеры в пикселах или процентном соотношении мы уже знаем. Необходимо отметить лишь, что браузеры стремятся сохранять пропорции рисунка, поэтому явное задание размеров, меняющее пропорции, может быть проигнорировано браузером, и тот выберет такие размеры, которые были бы максимально близки к указанным пользователем, не нарушая пропорций. Поэтому для Web-страниц обычно готовят графические изображения тех размеров, которые будут применяться и при отображении их в составе Web-страниц. И если одно изображение должно отображаться несколько раз с различными размерами, то проще приготовить несколько графических файлов, чем отдавать свои рисунки на самовольное отображение браузеру, который сможет нарушить всю верстку Web-страниц.<br> При помощи параметров мы можем указывать величину чистого пространства, которое будет отделять графическое изображение от окружающих его других элементов оформления Web-страницы, т. е. фактически, задавать отступ рисунка. Для этого применяются параметры hspace и vspace. Параметр hspace устанавливает отступ по горизонтали в пикселах, a vspace — по вертикали. Обратите внимание, в качестве значений этих параметров могут применяться только численные значения, указывающие расстояния в пикселах. Нулевого значения для этих параметров не предусмотрено, но обычно каждый браузер использует малое ненулевое значение.<br> А при помощи параметра border мы можем устанавливать толщину границы, окружающей рисунок. Как обычно, значением параметра является число, указывающее толщину в пикселах. По умолчанию используется нулевое значение, делающее границу невидимой.<br> Также необходимо упомянуть о выравнивании графического объекта относительно обтекающего его текста. Для этого используется параметр align. В качестве его значения может использоваться одно ключевое слово из предопределенного их набора. Значения bottom, middle и top применяются для позиционирования первой строки текста, обтекающего рисунок по вертикали. Значение top смещает ее наверх, bottom— вниз, a middle позволяет центрировать строку по вертикали. Для выравнивания по горизонтали графического изображения применяются значения left и right. Первое значение left, как нетрудно догадаться, смещает рисунок к левому края блока, в котором тот отображается, a right — к правому.<br> Теперь пришло время на примерах увидеть, как мы можем позиционировать рисунок и комбинировать его с текстом, который должен обтекать искомое графическое изображение.<br> Листинг 1.11<br> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" <br> "http://www.w3.org/TR/htm!4/strict.dtd"><br> <html> > .<br> <head> <link rel="canonical" href="https://www.e-lave.ru//glava-1.htm"/> ,<br> <1:11:1е>Рисунки и TeKCT</title> <br> <body><br> <р>Это текст, который обтекает рисунок.<img src="redhood.gif"><br> Это текст, который обтекает рисунок. Это текст, который обтекает рисунок.<br> Это текст, который обтекает рисунок.</р> <br> </body><br> </html><br> Внешний вид этого HTML-документа при отображении его с помощью браузера показан на рис. 1.11.<br> <div style="text-align:center;"><img src="image/11.gif" alt="Графика и мультимедиа"></div><br> Рис. 1.11. Окно браузера с результатом отображения файла, приведенного в листинге 1.11<br> В этом примере мы использовали чистый тег вставки изображения без каких-либо дополнительных параметров. Как мы можем видеть, изображение вставляется сразу после первого предложения, там, где мы и разместили тег <img>. При этом, если мы уменьшим размеры окна просмотра браузера по горизонтали так, чтобы первое предложение и рисунок не смогли бы поместиться там на одной строке, то сначала было бы отображено предложение, а уже под ним рисунок, прижатый к левому краю окна просмотра. Справа от него начиналось бы отображение следующего за ним текста таким образом, что базовая линия строки совпадала бы с нижним краем рисунка.<br> А теперь добавим к тегу отображения рисунка параметр горизонтального выравнивания. Получившийся код приведен в листинге 1.12.<br> Листинг 1.12<br> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"<br> "http://www.w3.org/TR/html4/strict.dtd"><br> <html> <head> <link rel="canonical" href="https://www.e-lave.ru//glava-1.htm"/><br> <title>Рисунки и текст</title> <body><br> <р>Это текст, который обтекает рисунок.<img src="redhood.gif"<br> align="ieft"><br> Это текст/ который обтекает рисунок. Это текст, который обтекает рисунок.<br> Это текст, который обтекает рисунок.</р> <br> </body><br> </html><br> Как видно, в этом случае опять сначала начийает отображаться текст, затем графическое изображение, прижатое к левому краю, согласно директиве, отданной при помощи параметра align, а справа от рисунка размещается остальной текст (рис. 1.12), т. е. изображение не может занять первую строку, так как текст начинается раньше него. То же самое произойдет, если применить параметр align со значением right, но рисунок окажется лишь прижатым к правому краю окна просмотра, а текст будет обтекать его с левой стороны. Вот и все изменения.<br> Теперь рассмотрим, как действует выравнивание по вертикали. Хотя параметр выравнивания вставляется в тег рисунка, наибольшие изменения заметны все-таки у текста, окружающего рисунок. Посмотрим действие параметра вертикального выравнивания на примере.<br> <div style="text-align:center;"><img src="image/12.gif" alt="Графика и мультимедиа"></div><br> Рис. 1.12. Окно браузера с результатом отображения файла, приведенного в листинге 1.12<br> Листинг 1.13<br> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"<br> "http://www.w3.org/TR/html4/striqt.dtd"><br> <html> -<br> <head> <link rel="canonical" href="https://www.e-lave.ru//glava-1.htm"/> '<br> <title>PMcyHKM и TeKCT</title><br> <body><br> <р>Это текст, который обтекает рисунок.<img src="redhood.gif"<br> align="middle"><br> Это текст, который обтекает рисунок. Это текст,<br> который обтекает рисунок.<br> Это текст, который обтекает рисунок.</р><br> </body><br> </html><br> Результат отображения этого HTML-документа показан на рис. 1.13.<br> <div style="text-align:center;"><img src="image/13.gif" alt="Графика и мультимедиа"></div><br> Рис. 1.13. Окно браузера с результатом отображения файла, приведенного в листинге 1.13<br> В данном примере мы установили вертикальное выравнивание посередине, т. е. первая строка текста, находящегося после тега вставки изображения, отображается в центре по вертикали свободного пространства справа от рисунка. Остальной текст отображается под рисунком. Если бы мы установили для параметра align значение top, то первая строка будет отображаться рядом с верхним обрезом рисунка. А при использовании значения bottom, первая строка текста будет отображаться рядом с нижней границей рисунка. Следует обратить внимание, что браузер распознает только один параметр align, т. е. мы можем указать либо вертикальное, либо горизонтальное выравнивание. Если же встроенных средств позиционирования и выравнивания рисунка не хватает, можно обратиться к процессу верстки с использованием таблиц. Применение таблиц мы рассмотрим в одном из следующих разделов этой главы.<br> Мы имеем возможность использовать в оформлении Web-страниц видеоролики. Следует быть очень аккуратным с их применением, так как файлы, содержащие эти видеоресурсы, обычно имеют достаточно большой объем. А для того, чтобы удаленный пользователь мог просмотреть их в своем браузере, ему понадобится полностью загрузить этот файл на свою машину. С использованием тех каналов, которые доступны большинству пользователей Интернета, подобная процедура может занять достаточно большое время. А ведь никто из нас не любит ждать загрузки Web-страницы.<br> Браузеры обычно в состоянии воспроизводить видеофайлы форматов AVI, Real Video и Windows Media. А внедрение их в состав Web-страницы производится при помощи все того же тега <img>. Но для указания местонахождения видеофайла используется параметр dunscr. По умолчанию, внедренный в Web-страницу видеоклип проигрывается один раз, сразу после полной загрузки страницы. Но мы имеем некоторые возможности регулировать процесс проигрывания клипа или давать самому пользователю возможность управления его воспроизведения.<br> Если в состав тега <img> мы включим параметр start, то мы сможем явно указывать событие, после которого браузер должен будет воспроизвести загруженный видеоклип. В качестве значений данного параметра могут использоваться ключевые слова mouseover и fileopen. Первое из них указывает, что клип необходимо воспроизвести после того, как пользователь поместит курсор мыши на пространство, отведенное под видеовставку, а второе — что воспроизведение начнется сразу после полной загрузки HTML-файла. Впрочем, мы можем сочетать эти два варианта. В этом случае, тег вставки видеоролика будет выглядеть следующим образом:<br> <img dynsгс="movie.avi" start="mouseover, fileopen"><br> Мы можем указывать, сколько раз необходимо воспроизвести видеоролик, используя для этой цели параметр loop. В качестве значения этого параметра используется число, устанавливающее количество повторения видеоклипа. Впрочем, если мы хотим, чтобы видео воспроизводилось постоянно, без какого-либо фиксированного количества повторений, то следует использовать значение infinite. А при помощи параметра loopdeiay мы можем устанавливать временную задержку между повторами воспроизведения видеоклипа. Значением данного параметра является число, указывающее промежуток времени в миллисекундах. Рассмотрим применение этих параметров на примере следующего фрагмента кода:<br> <img dynscr="movie.avi" loop="2" loopdelay="5000"><br> Здесь мы явно указываем, что видеоклип будет воспроизведен два раза сразу после загрузки Web-страницы с пятисекундной задержкой между воспроизведениями.<br> В данном случае мы сами управляем отображением видеофайла. Но мы можем передать эту прерогативу и удаленному пользователю, который будет загружать Web-страницу. Для этого необходимо ввести в состав тега <img> параметр controls без какого-либо значения. Наличие этого параметра в теге явно указывает, что вместе с видеоклипом на Web-странице будут отображены и ррганы управления воспроизведения.<br> Рассмотренных нами параметров вполне хватает для правильного внедрения видеофайлов в состав содержимого Web-страницы. Рассмотрим детальный пример (рис. 1.14).<br> Листинг 1.14<br> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"<br> "http : / /www . w3 . org/TR/html4 /strict . dtd"><br> <html>. <head> <link rel="canonical" href="https://www.e-lave.ru//glava-1.htm"/><br> <title>Видео</title> <body> <br> <р>Обычный текст. <img dynsre=" intro.avi" start="mouseover" loop="2"; loopdelay="5000"><br> </body><br> </html><br> <div style="text-align:center;"><img src="image/14.gif" alt="Графика и мультимедиа"></div> <br> Рис. 1.14. Окно браузера с результатом отображения файла, приведенного в листинге 1.14<br> Естественно, так как процедура вставки видеофрагмента в тело Web-страницы является частным случаем вставки графики, то к тегу вставки видеофрагмента применяются и все остальные параметры, применимые к тегу <img>, такие, как параметры выравнивания, явного указания размера и прочие.<br> К мультимедийным возможностям относятся и звуковое оформление Web-страницы. Но звук мы можем использовать лишь в качестве фонового формления, т. е. некий звуковой файл будет воспроизводиться на компьютере удаленного пользователя после того, как тот загрузит Web-страницу. Если, конечно, в его компьютере установлена звуковая плата, т. е. изначально на компьютер удаленного пользователя загружается HTML-файл с Web-страницей, а затем подгружаются все остальные файлы, используемые в оформлении этой Web-страницы, такие как графические файлы, видeo- и аудиоклипы.<br> Итак, для того, чтобы просмотр Web-страницы сопровождался звуковым воспроизведением, необходимо в код страницы вставить тег <bgsound>. Тег ставляется не в тело Web-страницы, а в его заголовок, т. е. между тегами <head> <link rel="canonical" href="https://www.e-lave.ru//glava-1.htm"/> и </head>. У данного тега существует обязательный параметр src, в качестве значения которого используется URL подключаемого звуквого файла. Необходимо отметить, что браузеры гарантированно распознают и воспроизводят аудиофайлы форматов MIDI и WAV. Воспроизведение иных форматов, таких как МРЗ и Real Audio, возможно только при подключении дополнительных модулей к браузерам.<br> Как и в случае с видеоклипами, мы можем задавать количество воспроизведений звукового файла при помощи параметра loop. В качестве значения этого параметра используется число повторений. Если необходимо воспроизводить аудиофрагмент постоянно, следует использовать значение "-1", т. е. если мы хотим, чтобы при загрузке Web-страницы непрерывно проигрывался некий аудиофайл, следует воспользоваться следующей конструкцией:<br> <bgsound src="song.mid" loop="-1"><br> На этом мы заканчиваем рассмотрение вопросов использования мультимедийных и графических объектов в оформлении Web-страниц и переходим к следующей части первой главы.<br> </td> </tr> </table> <br><br> <h1>Использование сценариев</h1> <br> </h2> В рамках HTML мы обладаем возможностью использовать при создании Web-страниц специальный вид программ, называемых сценариями или скриптами. Они очень тесно связаны с технологией динамического HTML (DHTML), которую мы будем рассматривать в третьей главе. Но сейчас мы лишь разберем возможности их подключения к HTML-документу.<br> Для создания подобных программ-сценариев могут использоваться два языка програмирования: JavaScript и VBScript. Эти программы просто встраиваются в Web-страницу, а браузер пользователя получает их и самостоятельно выполняет. В связи с тем, что VBScript недостаточно хорошо поддерживается всеми браузерами, чаще всего используется язык JavaScript.<br> Итак, мы создали или нашли на просторах Сети программу-сценарий, которую нам хотелось бы использовать на своей Web-странице для придания ей некоей динамичности и интерактивности. Теперь ее необходимо подключить к нашей странице. Для этих целей используется тег <script> со своим закрывающим близнецом </script>. Между этими тегами обычно размещается текст программы-сценария. Впрочем, иногда просто указывается UR.L файла с этим текстом,, и тогда браузер сам отыщет его, руководствуясь указанным URL. Однако, так как поиск он будет производить тогда, когда потребуется запустить скрипт, то между действиями пользователя и реакцией программы будет возникать определенная задержка. Поэтому, чаще всего текст программы присоединяют к HTML-документу.<br> Тег <script> с его содержимым чаще всего размещается в заголовке Web-страницы, между тегами <head> <link rel="canonical" href="https://www.e-lave.ru//glava-1.htm"/> и </head>. Связано это с тем, что подключаемый скрипт должен быть описан до момента его первого использования, т. е. мы можем описать его в теле документа, после тега <body>, но при этом мы должны быть уверены, что все элементы Web-страницы, использующие или активизирующие этот скрипт, будут описаны после него. Чтобы исключить возможные ошибки и коллизии, обычно скрипты описывают в заголовках. Это просто проявление правильного стиля создания документов, которого всегда следует придерживаться.<br> Итак, тег <script>, как мы уже знаем, позволяет внедрять в создаваемые Web-страницы программы-сценарии. Но тег обладает рядом параметров, которые позволяют браузеру максимально адекватно распознавать передаваемую информацию и выполнять инструкции программы. <br> <ul> <li> Параметр type предназначен для указания типа присоединяемого скрипта. Он используется вместо устаревшего параметра language. Обычно используются значения text/javascript и text/vbscript. Первое значение указывает, что присоединяемый скрипт написан на языке JavaScript, а второе, соответственно, зарезервировано для VBScript. Данный параметр является обязательным.</li> <li> Параметр src применяется в тех случаях, когда код присоединяемого скрипта не внедряется непосредственно в HTML-документ, а вынесен в отдельный файл, который браузер должен сам нати и загрузить. Значением данного параметра является URL искомого файла, содержащего код присоединяемого скрипта.</li> <li> Параметр charset имеет смысл использовать в паре с предыдущим параметром, так как его значение определяет кодировку символов, которая использовалась при создании файла с подключаемым скриптом.</li> </ul> Теперь, когда мы знаем, какие параметры есть у тега <script>, рассмотрим фрагмент кода, в котором показан порядок его использования.<br> ODOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"<br> "http://www.w3.org/TR/html4/strict.dtd"><br> chtml><br> <head> <link rel="canonical" href="https://www.e-lave.ru//glava-1.htm"/><br> <title>Интерактивная страница</title> ;<br> <script type="text/javascript"> ...Код скрипта...<br> </script> .<br> </head>'<br> В этом примере мы просто подключаем скрипт с вставкой его кода напрямую в создаваемую Web-страницу, Если необходимо присоединить отдельный файл со скриптом, следует использовать следующий фрагмент кода:<br> <script type="text/vbscript"<br> src="http://www.mysite.com/progs/vbcalc"><br> В этом примере мы подключаем файл, который находится в каталоге progs на сайте www.mysite.com. Как видно, все достаточно просто и понятно.<br> Очень часто при помощи подобных скриптов создатели Web-страниц динамически генерируют содержимое этих страничек. Это как раз одна из наиболее популярных возможностей DHTML. Но всегда есть вероятность, что пользователь будет использовать для просмотра Web-страницы устаревший браузер, который не сможет обрабатывать скрипты. В этом случае было бы хорошо иметь возможность установить альтернативное оповещение, которое отображалось бы браузером, если тот не в состоянии использовать программы-сценарии. Подобное сообщение мы можем устанавливать при помощи тегов <noscript> и </noscript>. Обычно они устанавливаются сразу после тегов <script>. В итоге получается конструкция следующего вида:<br> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"<br> "http://www.w3.org/TR/html4/strict.dtd"><br> <html> <br> <head> <link rel="canonical" href="https://www.e-lave.ru//glava-1.htm"/><br> <title>Интерактивная страница</title><br> <script type="text/javascript"><br> ...Код скрипта.... .<br> </script> -<br> <noscript><br> К сожалению, ваш браузер не поддерживает скрипты. <br> </noscript> <br> </head><br> И на этом мы заканчиваем. рассмотрение процедуры подключения программ-сценариев к HTML-документам, а вместе с ней и рассмотрение всего стандарта HTML. Он, действительно, не так уж и велик, но при этом достаточно гибок. </td> </tr> </table> <br><br> <h1>Используемые символы</h1> <br> </h2> А теперь обратимся к политике используемых символов в HTML. Как известно, в компьютерах каждый символ все-таки на самом деле является неким числом. И операционная система при дакэбражеши текста выводит уже символ, соответствующий какому-либо числу. Таблица соответствия чисел и символов называется кодировкой. Но дело в том, что кодировок только для русскоязычных символов уже не менее пяти. И если браузер не распознает, какая кодировка использована гфи создании Web-страницы, то вместо текста пользователь увидит мешанину непонятных символов. Каждый, наверное, с этим встречался. Поэтому в каждый браузер встроена функция смены кодировки отображаемой Web-страницы. Однако язык HTML обладает возможностями указания используемой кодировки, чтобы браузер не пытался распознать ее самостоятельно. Для этих целей используется уже знакомый нам тег <meta>. Дело в том, что среди предбпределенных переменных протокола HTTP есть переменная с наименованием Сontent-Type. Она задает тип содержимого Web-страницы и дополнительно позволяет указывать наименование применяемой кодировки. Полностью соответствующая конструкция выглядит так:<br> <МЕТА. http-equiv="Content-Type" content="text/html;<br> charset=ISO-8858-5"><br> В приведенном примере видно, что значение переменной состоит из двух частей, разделенных знаком точки с запятой. Первая часть говорит о том, что данный документ является обычным текстом с тегами HTML, а вторая часть указывает используемую кодировку. При этом использование слова charset является обязательным. А, после знака равенства указывается уже само название кодировки. В примере использовано стандартная кодировка, утвержденная Международной Организацией по Стандартизации (ISO) с поддержкой кириллицы. Однако вместо нее можно использовать стандартную кириллическую кодировку Windows или КОИ-8.<br> Также следует указать, что браузеры не могут обычным порядком отображать некоторые символы, которые встречаются в тексте. Так, если браузер в тексте встретит знак неравенства "меньше", то он просто интерпретирует его как открывающую скобку для тега. <br><br> <br> А так как стандартного тега за этим знаком не последует, то некоторая часть текста будет просто проигнорирована и не отображена. Более того, некоторые специализированные европейские символы просто отсутствуют на клавиатуре, и их будет затруднительно .вставить в текст содержимого Web-страницы. Проблему необходимо было решить. И выход был найден.<br> Вместо самих символов в текст подставлялись последовательности, которые можно было уже нормально интерпретировать. Так, знак неравенства "меньше", он же — открывающая угловая скобка, заменяется на последовательность ⁢, В данном случае вся последовательность заключена в кавычки, начинается она со знака амперсанта, а заканчивается знаком точки с запятой. Подобные последовательности перекочевали и в язык следующего поколения — XML, и получили название "eatities", что в русскоязычной литературе переводят как "сущности". Перевод, конечно, правильный, но, к сожалению, ничуть не разъясняет суть дела. Проще и, наверное, правильней называть эти сущности текстовыми подстановками. Список текстовых подстановок используемых в HTML приведен в табл. 1.1.<br><br> Таблица 1.1. Текстовые подстановки<br><br> <table border=1> <tr> <td> Символы </td> <td> Описание </td> </tr> <tr> <td> < </td> <td> Знак неравенства "меньше" (<) </td> </tr> <tr> <td> &gt ; <br><br> </td> <td> Знак неравенства "больше" (>), </td> </tr> <tr> <td> & </td> <td> Знак амперсанта (&) </td> </tr> <tr> <td> " </td> <td> Знак кавычек </td> </tr> <tr> <td> &Agrave </td> <td> Прописная А, тупое ударение </td> </tr> <tr> <td> &Aacute </td> <td> Прописная А, сильное ударение </td> </tr> <tr> <td> &Acirc </td> <td> Прописная А, диакритическое ударение </td> </tr> <tr> <td> &Atilde </td> <td> Прописная А, тильда </td> </tr> <tr> <td> &Auml </td> <td> Прописная А, умляут </td> </tr> <tr> <td> &Aring </td> <td> Прописная А, звонко» произношение </td> </tr> <tr> <td> &agrave </td> <td> Строчная а, тупое ударение </td> </tr> <tr> <td> &acute </td> <td> Строчная а, сильное ударение </td> </tr> <tr> <td> &acirc </td> <td> Строчная а, диакритическое ударение </td> </tr> <tr> <td> &atilde </td> <td> Строчная а, тильда </td> </tr> <tr> <td> &auml </td> <td> Строчная а, умляут </td> </tr> <tr> <td> &aring </td> <td> Строчная а, звонкое произношение </td> </tr> <tr> <td> &Aelig </td> <td> Прописные АЕ, дифтонг </td> </tr> <tr> <td> &aelig </td> <td> Строчные ае, дифтонг </td> </tr> <tr> <td> &Ccedil </td> <td> Прописная С, седиль </td> </tr> <tr> <td> &ccedil </td> <td> Строчная с, седиль </td> </tr> <tr> <td> &Egrave </td> <td> Прописная Е, тупое ударение </td> </tr> <tr> <td> &Eacute </td> <td> Прописная Е, сильное ударение </td> </tr> <tr> <td> &Ecirc </td> <td> Прописная Е, диакритическое ударение </td> </tr> <tr> <td> &Еuml </td> <td> Прописная Е, умляут </td> </tr> <tr> <td> &egrave </td> <td> Строчная е, тупое ударение </td> </tr> <tr> <td> &eacute </td> <td> Строчная е, сильное ударение </td> </tr> <tr> <td> &ecirc </td> <td> Строчная е, диакритическое ударение </td> </tr> <tr> <td> &euml </td> <td> Строчная е, умляут </td> </tr> <tr> <td> &Iacute </td> <td> Прописная I, сильное ударение </td> </tr> <tr> <td> &Igrave </td> <td> Прописная I, тупое ударение </td> </tr> <tr> <td> &Iuml </td> <td> Прописная I, умляут </td> </tr> <tr> <td> &iacute </td> <td> Строчная i, сильное ударение </td> </tr> <tr> <td> &igrave </td> <td> Строчная i, тупое ударение </td> </tr> <tr> <td> &ticirc </td> <td> Строчная i, диакритическое ударение </td> </tr> <tr> <td> &iuml </td> <td> Строчная i, умляут </td> </tr> <tr> <td> &ETH </td> <td> Сочетание Eth </td> </tr> <tr> <td> &eth </td> <td> Строчные eth </td> </tr> <tr> <td> &Ntilde </td> <td> Прописная N, тильда </td> </tr> <tr> <td> &ntilde </td> <td> Строчная п, тильда </td> </tr> <tr> <td> &Ograve </td> <td> Прописная О, тупое ударение </td> </tr> <tr> <td> &Oacute, </td> <td> Прописная О, сильное ударение </td> </tr> <tr> <td> &0circ . </td> <td> Прописная О, диакритическое ударение </td> </tr> <tr> <td> &0tilde </td> <td> Прописная 0, тильда </td> </tr> <tr> <td> &Ouml </td> <td> Прописная О, умляут </td> </tr> <tr> <td> &Oslash </td> <td> Прописная О, слэш </td> </tr> <tr> <td> &ograve </td> <td> Строчная о, тупое ударение </td> </tr> <tr> <td> &oacute </td> <td> Строчная о, сильное ударение </td> </tr> <tr> <td> &ocirc </td> <td> Строчная о, диакритическое ударение </td> </tr> <tr> <td> &otilde </td> <td> Строчная о, тильда , </td> </tr> <tr> <td> &ouml </td> <td> Строчная о, умляут </td> </tr> <tr> <td> &oslash </td> <td> Строчная о, слэш </td> </tr> <tr> <td> &Ugrave </td> <td> Прописная U, тупое ударение </td> </tr> <tr> <td> &Uacute </td> <td> Прописная U, сильное ударение </td> </tr> <tr> <td> &Ucirc </td> <td> Прописная U, диакритическое ударение </td> </tr> <tr> <td> &Uuml </td> <td> Прописная U, умляут </td> </tr> <tr> <td> &ugrave </td> <td> Строчная и, тупое ударение </td> </tr> <tr> <td> &uacute </td> <td> Строчная и, сильное ударение </td> </tr> <tr> <td> &ucirc </td> <td> Строчная и, диакритическое ударение </td> </tr> <tr> <td> &uuml </td> <td> Строчная и, умляут </td> </tr> <tr> <td> &Yacute </td> <td> Прописная Y, сильное ударение </td> </tr> <tr> <td> &yacute </td> <td> Строчная у, сильное ударение </td> </tr> <tr> <td> &reg </td> <td> Зарегистрированная торговая марка — Trademark </td> </tr> <tr> <td> scopy </td> <td> Права собственности - Copyright </td> </tr> <tr> <td> Snbsp </td> <td> Неразделяемый пробел </td> </tr> </table> Но подстановки бывают не только текстовыми. Мы можем воспользоваться подстановкой для вставки в текст любогр символа из текущей кодировки, если нам известен его числовой код. Для этого используется конструкция "&#числовой_код;". В подобном формате численных подстановок используется запись числового кода в десятичном виде. Если необходимо использовать шестнадцатеричную запись, то подстановка примет следующий вид: "&#хчисловой_код;", т. е. после знака решетки добавляется латинский символ "икс".<br><br> </td> </tr> </table> <br><br> <h1>Оформление текста</h1> <br> </h2> Как известно, основное наполнение Web-страниц — это все-таки текст. За редким исключением специальных сайтов-галерей. Поэтому неудивительно, что в HTML введено столько различных средств управления .отображения текста.<br> На самом деле, для того, чтобы в окне просмотра браузера отобразить текстовую строку, Никаких тегов применять не требуется: Достаточно просто написать сам текст. Но когда нужно уже разбит^ его хотя бы на абзацы, вот туг надо пользоваться тегами. Дело в том, что в различных компьютерных системах используются различные символы для разбивки текста на абзацы, a HTML-документы всегда должны отображаться по возможности одинаково на самых различных компьютерных платформах. Поэтому и пришлось ввести теги, обозначающие абзацы.<br> В начале каждого абзаца ставится тег <р>, а в конце -, закрывающий тег </Р>. При этом, тег, естественно, обладает некоторыми параметрами. В их число входят уже известные нам общие параметры идентификации class и id, параметр стилевого оформления style, который нам предстоит рассмотреть во второй главе, и параметр-выравнивания align. Вот о последнем параметре нам следует поговорить несколько поподробнее.<br> В HTML термин "выравнивание" относят как к горизонтальному, так и к вертикальному позиционированию элемента. Но в случае с абзацами текста имеет смысл говорить только о горизонтальном выравнивании или, как его еще называют, "выключке".<br> Выключка позволяет прижимать абзац к левому или правому краю окна просмотра браузера, центрировать его или растягивать слова таким образом, чтобы текст равномерно занимал всю ширину отведенного ему места. Для этих целей используются значения left, right, center и justify, соответственно. Рассмотрим их применение на примере еще одного HTML-документа.<br> Листинг 1.4<br> <!DOCTYPE1HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"<br> "http://www.w3.org/TR/html4/striet.dtd"><br> <html> <br> <head> <link rel="canonical" href="https://www.e-lave.ru//glava-1.htm"/><br> <title> Горизонтальное выравнивание a63aцeв</title> <br> </head><br> <body><br> <p align="left">Aбзац, прижатый к левому краю</р> <br> <р align="right">Aбзац, прижатый к лравому краю</р><br> <р align="center">Центрированный абзац</р><br> <p align="justify">Aбзац, растянутый по ширине</р> <br> </body><br> </html> <br> Результат просмотра файла с таким кодом при помощи браузера Internet Explorer показан на рис. 1.4. Как видно, последний абзац, который согласно нашему коду дожен был быть растянутым по ширине, отображается браузером Internet Explorer так же, как и первый. Данный случай может служить ярким примером того, как браузеры по разному воспринимают код HTML. В нашем случае Internet Explorer просто проигнорировал неизвестный параметр, воспользовавшись стандартным вариантом отображения.<br> <div style="text-align:center;"><img src="image/4.gif" alt="Оформление текста"></div><br> Рис. 1.4. Окно браузера с результатом отображения файла, приведенного в листинге 1.4<br> Иногда для того, чтобы сильнее отделить один абзац от другого, создатели Web-страниц пытаются использовать пустые абзацы, т. е. между стартовым и конечным тегом абзаца ничего нет. Согласно спецификациям, браузеры должны просто игнорировать подобные конструкции. Поэтому для разделения абзацев или принудительного обрыва строки внутри одного абзаца следует использовать тег <br>. Это директивный тег. Он просто обозначает то место, где надо перенести отображение на другую строку. Пример использования этого тега для достижения обеих этих целей показан на примере HTML-документа, чей код приведен в листинге 1.5.<br> Листинг 1.5<br> <!DOGTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"<br> "http://www.w3.org/TR/html4/strict.dtd"><br> <html> .<br> <head> <link rel="canonical" href="https://www.e-lave.ru//glava-1.htm"/><br> <title> Принудительные разрывы cтрок</title><br> </head><br> <body><br> <р>Aбзац, который мы <br>Принудительно разорвали</р><br> <р>Следующий абзац</р><br> <br><br> <р>Абзац после принудительного разрыва</р><br> </body><br> </html><br> А как выглядит этот файл при просмотре его с помощью браузера, показано на рис. 1.5.<br> <div style="text-align:center;"><img src="image/5.gif" alt="Оформление текста"></div><br> Рис. 1.5. Окно браузера с результатом отображения файла, приведенного в листинге 1.5<br> Тег <br> помимо всеобщих параметров идентификации обладает еще параметром clear, который применяется для более точного выравнивания текста, когда тот обтекает какой-либо объект, например, графическое изображение, внедренное в состав Web-страницы. В качестве значения этого параметра может использоваться одно из четырех заранее предопределенных ключевых слов: none, left, right, all. Значение none используется по умолчанию и указывает, что следующая строка начнется с того места, где она начиналась бы и без использования данного параметра, в обычных условиях. Значение left говорит о том, что следующая строка начнется у левого поля объекта, обтекаемого текстом. Если же необходимо использовать правое поле для этих целей, то следует воспользоваться значением right.<br> А значение all указывает браузеру, что воспользоваться можно как левым, так и правым полем объекта, лишь бы текст был максимально компактно отображен.<br> Теперь перейдем к рассмотрению шрифтового оформления текста. В любом месте абзаца мы можем использовать тег <font> с некоторым набором параметров, которые и будут определять внешний вид шрифта, который будет применяться для отображения текста, находящегося после этого тега. Прекращение действия этого тега осуществляется при помощи его закрывающей пары </font>.<br> Тег <font> обладает следующими, присущими именно ему параметрами: size, использующийся для указания размера применяемого шрифта, color - для установки цвета символов шрифта, и face, указывающий, какой именно шрифт будет применяться для отображения текста. Разберем эти параметры.<br> Как мы только что говорили, параметр size применяется для указания размера символов используемого шрифта. В качестве значений этого параметра используются цифры от единицы до семи. Они обозначают некий относительный размер символов. Дело в том, что в HTML нельзя установить абсолютный размер символов в пунктах, как мы это привыкли делать в обычных офисных приложениях. Пользователь будет просматривать Web-страницу на своем компьютере, и нам заранее неизвестно, какие шрифты могут быть у него установлены, и какие их размеры доступны. Поэтому мы можем лишь указать относительный размер шрифта, а браузер пользователя сам подберет максимально подходящий размер.<br> Также в качестве значения параметра size мы можем указывать и изменение размера шрифта. Например, для того, чтобы увеличить размер шрифта на один уровень, следует использовать следующую конструкцию:<br> <font size«"+1"><br> А для уменьшения размера символов на два уровня, применяется следующий код:<br> <font size«"-2"><br> Однако для использования подобных конструкций необходимо отталкиваться от некоего базового размера. Для установки такого размера применяется тег <basefont> с все тем же параметром size. Если же этот тег не использовать, то в качестве базового размера символов будет применяться третий уровень. Приведем пример использования этих тегов.<br> Листинг 1.6.<br> <!DOCTYPE HTML PUBLIC "-//W3C//DTO HTML*4.01//EN" <br> "http://www.wa.org/TR/html4/stcict.dtci"><br> <html> <br> <head> <link rel="canonical" href="https://www.e-lave.ru//glava-1.htm"/><br> <title> Размер сиволов</tit1е> <br> </head><br> <body><br> <p><font sizе=*7">Седьмой paзмep</font></p><br> <p><font sizе="6">Шестой paзмepp</font></p><br> <pxfont sizе="5">Пятый paзмep</font></p><br> <pxfont sizе="4">Четвертый paзмep</font></p><br> <pxfont sizе="3">Третий paзмep</font></p><br> <p><font sizе="2">Второй paзмep</font></p><br> <p><font size="l"^Первый paзмep</font></p><br> <p><basefont size=2xfont з12е="+2">Смещение paзмepa</font></p><br> </body> <br> </html><br> <div style="text-align:center;"><img src="image/6.gif" alt="Оформление текста"></div><br> Рис. 1.6. Окно браузера с результатом отображения файла, приведенного в листинге 1.6<br> Но мы рассмотрели применение только одного атрибута тега < font >. На очереди — процедура установки цвета символов применяемого шрифта. Мы уже знаем, что для этого применяется параметр color. О том, как именно записывать обозначение того или иного цвета мы говорили в предыдущем разделе, т. е. нам осталось всего лишь привести пример. Так, для установки зеленого цвети символов применяемого шрифта, следует использовать следующую конструкцию:<br> <font color="green"> <br> А последний рассматриваемый нами параметр face позволяет устанавливать вид применяемого шрифта, т. е. мы можем указать, что текст следует отображать, скажем, при помощи шрифта Times New Roman или Copperplate Gothic. Однако здесь следует понимать, что браузер пользователя будет отображать текст при помощи шрифтов, установленных в операционной системе удаленного пользователя, и если мы используем некий редкий шрифт для придания большей выразительности текстовому наполнению Web-страницы, то его может и не быть в системе пользователя. В этом случае браузер будет использовать свои собственные правила шрифтового оформления. В каждом браузере есть раздел настроек, в котором пользователь указывает, какие именно шрифты применять для текстового содержимого загружаемых Web-страниц. Поэтому в качестве значения параметра face применяется список из наименований шрифтов, разделенных запятой. Браузер пытается отыскать их в своей системе в том порядке, в котором они перечислены, и первый подошедший шрифт используется для отображения текста. Теперь, когда мы знаем порядок использования всех параметров тега <font>, приведем пример их общего использования:<br> <font size=4 color="black" face="Courier New, Arial Black"><br> При помощи этого тега мы объявляем, что текст, находящийся после него, будет отображаться четвертым размером, символы будут черными, а применяться должен шрифт Courier New или, если он в системе не установлен, Arial Black.<br> Но при создании обычных текстовых документов мы не удовлетворяемся одним указанием размера, цвета и вида шрифта. Есть ведь еще и различные начертания одного шрифта. Мы можем делать символы курсивными, полужирными, подчеркнутыми и перечеркнутыми. HTML также предоставляет нам эти возможности. Итак, все по очереди.<br> <ul> <li> Тег <b> с закрывающей парой </b> создает полужирное начертание символов выбранного шрифта.</li> <li>Теги <i> и </i> обрамляют курсивные символы.</li> <li>Тег <u> и </u> заставляют браузер подчеркивать текст, расположенный междуними </li> <li>Тег <strike> со своей закрывающей парой </strike> создают перечеркнутый текст.</li> <li>Теги <tt> и </tt> обрамляютсимволы, которые браузер отображает моноширинным шрифтом.</li> <li>Теги <small> и </small> указывают, что текст, заключенный между ними, необходимо отображать шрифтом уменьшенного размера. </li> <li>Теги <big> и </big>, наоборот увеличивают размер символов, находящихся между ними. </li> </ul> Естественно, без примера нам никак не обойтись.<br> Листинг 1.7.<br> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"<br> "htfcp://www.w3.org/TR/html4/strict.dtdH><br> <html> <br> <head> <link rel="canonical" href="https://www.e-lave.ru//glava-1.htm"/><br> <title> Начертания cимволов</title> <br> </head><br> <body> <br> <p><font face-="Times New Roman">Текст бывает <b>полужирным</b> или <i>курсивным</i><br><br> А может быть одновременно и <b><i>полужирным и курсивным</i></b></р><br> <р>Бывает <u>подчеркнутым</u> и <strike>nepeчepкнутым</strike>.<br> <Р>или <tt>моноширинным</tt> .<br> <р>Мы можем <big>увеличивать</big> и <small>уменьшать</small> размер символов.</р><br> </body><br> </html><br> Как видно из примера, мы можем сочетать различные начертаний друг с другом. Но следует быть аккуратным в порядке расстановки тегов. Открывающие и закрывающие теги должны оба вкладываться как в футляр в другие теги, которые были применены ранее. Пример этого можно увидеть в десятой строке листинга. А то, как выглядит данный HTML-документ при просмотре его с помощью браузера, показано на рис. 1.7.<br> Мы рассмотрели способы, при помощи которых задаются различные параметры отображения текста. Однако в HTML предусмотрено несколько базовых способов отображения текста, которые не обязательно задавать целым набором тегов. Для них выделены собственные теги, т. е. определены некоторые категории текста, которые отображаются заранее предопределенным способом. Все эти категории чаще всего применяются в научной и компьютерной отрасли. Перечислим их.<br> <ul> <li> Выделение термина в тексте производится при помощи пары тегов <еm> и </еm>.</li> <li>"Усиленное" выделение, призванное еще больше привлекать внимание, создается при помощи тега <strong> и его закрывающего близнеца </strong>.</li> <li>При помощи тегов <cite> и </cite> указывается, что текст, расположенный между ними, является цитатой.</li> <li>Определение некоего термина выделяется при помощи тегов <dfn> и </dfn>. </li> <li>Пара тегов <code> и </code> применяется для выделения исходного кода на каком-либо языке программирования.</li> <li>Текстовая информация, выводимая программой, оформляется при помощи тегов <samp> И </samp>.</li> <li>Текст, вводимый пользователем, обозначается тегами <kbd> и </kbd>. П Переменные в исходном коде программ обозначаются при помощи пары тегов <var> и </var>. </li> <li>Теги <abbr> и </abbr> выделяют аббревиатуры.</li> <li>А устоявшиеся буквосочетания, не являющиеся аббревиатурами, т. е. акронимы, выделяются тегами <acronym> и </acronym>.</li> </ul> Однако, знать наименования тегов мало, надо еще отчетливо себе представлять, как именно они оформляют текст. И здесь без примера никак не обойтись.<br> <div style="text-align:center;"><img src="image/7.gif" alt="Оформление текста"></div><br> Рис. 1.7. Окно браузера с результатом отображения файла, приведенного в листинге 1.7<br> Листинг 1.8<br> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"<br> "http://www.w3.org/TR/html4/strict.dtd"><br> <html> <br> <head> <link rel="canonical" href="https://www.e-lave.ru//glava-1.htm"/><br> <title>Стандартные варианты отображения</title> </head> <body> <p> <font face="Times New Нотап">Это обычный текст</р><br> <р>Это <еm>выделение</еm>. И <strong> Более заметное выделение </strongx> </p><br> <р>Это <cite>цитата </cite> А это <dfn>определение </dfn>.</p><br> <р>Мы можем писать <code>код программы</code>, текст, пoльзoвaтeлeм</kbd>, <br> <samp>выводимый текст</samp> и <var>nepeменные</var><br> <р>Так отображаются <аbbr>аббревиатуры </аbbr>.' А так — <аcronum>акронимы</аcronum> . <br> </р><br> </body><br> </html><br> Результат отображения подобного HTML-документа показан на рис. 1.8.<br> <div style="text-align:center;"><img src="image/8.gif" alt="Оформление текста"></div><br> Рис. 1.8. Окно браузера с результатом отображения файла, приведенного в листинге 1.8<br> Очень часто возникает необходимость разместить на Web-странице текст, заранее приготовленный при помощи какого-либо текстового редактора, который уже самостоятельно отформатировал текст. В этом случае формат текста, его переносы и размещение напрямую зависят от длины строки в символах, которая была установлена в этом текстовом редакторе. Если текст разместить на Web-странице при помощи обычных средств, это форматирование, естественно, будет нарушено. Поэтому для таких предварительно отформатированных фрагментов был введен собственный тег. Этот тег <рге> обладает параметром width, в качестве значения которого указывается длина строки в символах. Естественно, желательно перед применением этого тега принудительно устанавливать именно тот шрифт, который использовался при форматировании текста. Итак, для вставки предварительно форматированного текста мы можем использовать следующий фрагмент кода:<br> <pre width=60>текст.</pre><br> В данном примере мы указываем, что текст должен отображаться исходя из расчета, что строка составляет в длину шестьдесят символов. При этом, в предварительно отформатированном тексте также не действуют правила "сворачивания пробелов". Дело в том, что когда браузер встречает в обычном тексте Web-страницы несколько идущих подряд пробелов, он их сворачивает в один пробел. А предварительно отформатированный текст подобному преобразованию не подвергается, что и позволяет сохранять его форматирование, которое в простейших текстовых редакторах осуществляется при помощи пробельных символов. В HTML, кстати, символ табуляции тоже считается пробельным символом.<br> Также следует отметить, что HTML предоставляет возможность при помощи тегов отображать верхние кавычки, при помощи которых обычно выделяется прямая речь и некоторые цитаты. Для цитат предусмотрен тег <biockquote> с его завершающим близнецом </biockquote>. А для обрамления прямой речи обычно используются теги <q> и </q>. При этом, тег <biockquote> обладает параметром cite, в качестве значения которого используется сетевой адрес, называемый также URL, того интернет-ресурса, на котором изначально и находился цитируемый текст. А вместе с тегом <q> обычно используется параметр lang, значением которого является кодовое обозначение языка, согласно правил пунктуации которого и ставятся ограничивающие кавычки. Не секрет ведь, что в разных языках принято использовать различные символы кавычек.<br> Также следует упомянуть и о проблеме переносов. Обычно создатели Web-страниц даже не задумываются об этой проблеме, и браузеры не занимаются переносом слов с разбиением. Если слово не умещается в строке, оно просто переносится в другую строку. Но ведь это не единственный правильный способ отображать текст. Вполне может возникнуть ситуация, когда понадобится отображать текст, пользуясь переносами слов. В HTML предусмотрено два вида переносов — явный и, так называемый, "мягкий". Явный перенос создается при помощи символа короткого тире, заменяемого обычно численными текстовыми подстановками "-" и "&#х2D", Однако явный перенос неудобен тем, что при изменении размеров окна просмотра браузера может измениться и длина строки, а знак переноса все равно останется виден. Даже если он будет находиться в середине строки. Поэтому чаще все-таки пользуются "мягкими" переносами. Они создаются при помощи текстовой подстановки "". При этом символы мягких переносов в тексте не видны, и лишь в том случае, когда какое-либо слово, в которое были вставлены эти символы, не умещается целиком в строке, оно переносится с разбивкой на слоги, согласно вставленным "мягким" переносам. И лишь один из символов мягкого переноса в этом слове становится виден.<br> Также HTML при помощи своих тегов позволяет отображать верхние и нижние индексы. Для создания верхнего индекса используется пара тегов <sup> и </sup>, а нижний индекс должен быть обрамлен тегами <sub> и </sub>. Рассмотрим пример применения этих тегов.<br> Листинг 1.9<br> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"<br> "http://www.w3.org/TR/html4/strict.dtd"><br> <html><br> <head> <link rel="canonical" href="https://www.e-lave.ru//glava-1.htm"/> <br> <title>Bepxние и нижние индексы</title><br> <body><br> <р>Вода это H<sub>2</sub>0</p><br> <р>Соотношение массы и энергии — Е = mc<sup>2</supx/p><br> </body> <br> </html><br> Как именно отображает индексы браузер показано на рис. 1.9. <br> <div style="text-align:center;"><img src="image/9.gif" alt="Оформление текста"></div> <br> Рис. 1.9. Окно браузера с результатом отображения файла, приведенного в листинге 1.9<br> Также к текстовому оформлению относятся горизонтальные линии, которыми часто отделяют значимые части текстового содержимого Web-страниц. Линия вставляется в текст HTML-документа при помощи тега <hr>. Тег обладает несколькими параметрами, которые позволяют достаточно детально регулировать внешний вид горизонтальной линии.<br> Параметр align позволяет указывать горизонтальное выравнивание линии. Параметр может обладать одним из трех предустановленных значений: left, right и center, которые прижимают горизонтальную линию к левому или правому краю окна просмотра, или центрируют ее, соответственно. По умолчанию используется значение center. Если в состав тега <hr> входит параметр , то отображаемая горизонтальная линия не будет иметь тени. А последний параметр width позволяет устанавливать длину горизонтальной линии. По умолчанию используется значение "100 %". А высота линии в пикселах задается при помощи параметра size. Рассмотрим применение всех этих параметров на примере.<br> Листинг 1.10<br> <!DOCTYPE HTML POBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><br> <html> <br> <head> <link rel="canonical" href="https://www.e-lave.ru//glava-1.htm"/><br> <body><br> <р>Это обычная линия, отображаемая по умолчанию <hr></p><br> <р>Это укороченная линия, прижатая влево <hr align="left" width="70%" size=5x/p><br> <р>Это укороченная линия, расположенная по центру <hr align="center" width="70%" size=5x/p><br> <р>Это укороченная линия, прижатая вправо <hr align=" right" width="70%" size=5x/p><br> <р>Это утолщенная линия без тени <hr align="center" width="70%" size»10></p><br> </html><br> Как выглядит подобный HTML-документ при просмотре его с помощью браузера, показано на рис. 1.10.<br> И на этом, пожалуй, можно закончить рассмотрение возможностей оформления текста, присущих HTML. <br> <div style="text-align:center;"><img src="image/10.gif" alt="Оформление текста"></div> <br> Рис. 1.10. Окно браузера с результатом отображения файла, приведенного в листинге 1.10<br> </td> </tr> </table> <br><br> <h1>Основы</h1> <br> </h2> Интернет — это огромное объединение компьютерных сетей в планетарном масштабе. А если учесть, что обитатели Международной Космической Станции пользуются услугами электронной почты, то становится ясно, что Интернет уже шагнул за пределы планеты. Очень часто Интернет ошибочно отождествляют с самой популярной и масштабной его частью — всемирной путиной, которая в английском языке получила наименование WWW (World Wide, Web). По сути дела, паутина — просто огромное количество взаимосвязанных документов. Ключевое слово — взаимосвязанных, т. е. текст Web-страницы органично вставляются гиперссылки, которые служат механизмом соединения с другими Web-страницами. Честно говоря, рассказывать на словах о механизме гиперссылок достаточно трудно, но тот, кто ють раз посетил какой-либо Web-сайт, тот сразу поймет все их значение.<br> Именно гиперссылки, позволяющие связывать друг с другом самые различные документы из Сети, создали ту удивительную общность, которая и является теперь визитной карточкой всемирной паутины. Гиперссылки ис-вользуют для отыскания документа его уникальный адрес во всемирной паутине, который также называется URL (Universal Resource Locator).<br> Как мы знаем, основное предназначение Web-страниц — отображать информацию, доносить ее до пользователя. При этом существует ряд функциональных «раничений. Ведь заранее неизвестно, какой именно компьютер используется пользователем, просматривающим Web-страницу. Нельзя заранее предсказать, какое разрешение у его монитора, или какие размеры окна просмотра он установил. Да что там, мы не можем заранее знать, какая Используется операционная система или даже платформа. Web-страницы должны практически одинаково отображаться и на Intel-машинах, и на Макинтошах и на телевизионных Web-приставках. Неизвестно, какие шрифты установлены и; используются в операционной системе пользователя, неизвестно, какая глубина цвета поддерживается его видеокартой. Все эти неизвестности должны были бы послужить большим барьером для создания общего языка. Но этого не случилось.<br> Дело в том, что еще на заре компьютерной эры, в 1986 году, международной организацией по стандартизации ISO (International Organization for Standardization) был разработан язык разметки документов SGML (Standard Generalized Markup Language), который предусматривал практически все возможные случаи отображения информации. Как на бумаге, так и на мониторах. Естественно, чтобы учесть все возможные случаи, была разработана действительно мощная система. Казалось, для Web-страниц это идеальный вариант. Однако только описание правил этого языка занимало сотни страниц. Следовательно, на разработку программ, которые могли бы отображать страницы, созданные на основе такого языка, ушло бы очень много времени. Поэтому для нужд Интернета было выбрано некоторое подмножество этого языка, которое получило самостоятельное наименование — HTML (HyperText Markup Language), т. е. язык разметки гипертекстовых документов.<br> Это язык разметки, как следует из названия, т. е. в файле Web-страницы информация находится вперемешку с инструкциями по ее отображению. По сути, это обычный текстовый файл. Но читать его самостоятельно трудно, так как инструкции по отображению информации мешают читать сам текст. А графику тем более нельзя увидеть.<br> Web-страницы, которые все написаны на HTML, просматриваются при помощи специализированных программ, которые обычно называют браузерами. Это калька с англоязычного термина. Прямой перевод на русский язык, т. е. Программы-обозреватели, почему-то не прижился. Что ж, будем называть их устоявшимся термином. Основная задача браузера — по запросу пользователя отыскивать требуемый документ в Интернете и адекватно отображать его, т. е. браузер анализирует инструкции, написанные на языке HTML, а затем отображает информацию, находящуюся на Web-странице, пользуясь этими инструкциями. Отсюда вывод — если мы хотим создавать собственные Web-страницы, то жизненно необходимо знать язык HTML<br> Конечно, можно писать код Web-страницы вручную, пользуясь каким-нибудь простеньким текстовым редактором, таким, например, как тривиальный Блокнот. Однако, это не самое приятное времяпровождение. Сейчас существует огромное множество визуальных редакторов Web-страниц, которые позволяют простым и естественным образом размещать информацию, не заботясь о ее переводе в HTML. Казалось бы, если все так замечательно, то зачем изучать HTML самостоятельно? Оказывается, при создании HTML-кода эти редакторы в некоторых случаях пишут неверный, частично неверный или избыточный код. Иногда просто не получается добиться именно того результата, который необходим, я надо знать язык HTML, чтобы быть в состоянии преодолеть встречающиеся препятствия.<br> Также следует упомянуть о последствиях так называемой "браузерной войны". Дело в том, что в самом начале развития WWW лидерство на рынке занял браузер Netscape Navigator от Netscape. Фирма Microsoft изначально не смогла правильно оценить будущего потенциала WWW, и браузер Netscape Navigator благополучно занял почти весь рынок. Но когда менеджмент Microsoft донял, что они упустили, в ход пошла вся тяжелая артилле-гдия. Срочно был создан браузер Internejt Explorer, и началась браузерная война. В целях продвижения собственного браузера каждая из конкурирующих фирм немного "улучшала" стандарт HTML, т. е. добавляла в него конструкции, которые мог правильно обрабатывать только собственный браузер. Конечно, WWW Consortium, организация, курирующая развитие интернет-технологий, некоторые из этих новшеств включала в последующие версии стандартов, но конкуренты не останавливались на достигнутом. Более того, в рамках все той же браузерной войны, Microsoft вживила свой браузер в операционную систему Windows 9x. Закончилось вся эта эпопея, как мы помним, судебным разбирательством, в котором ставший в одночасье известным всему миру судья Джонсон обязал Microsoft вывести браузер Internet Explorer из состава операционных систем.<br> Но к тому времени задача-минимум была выполнена. Браузер Internet Explorer занял около половины объема рынка браузеров. Так закончилась "браузерная война". Или, если быть точным, перешла из "горячей" фазы в "холодную". Но отголоски этого противостояния до сих пор аукаются разработчикам Web-страниц, так как необходимо проверять, как выглядит разрабатываемая страница в каждом браузере. Более того, некоторые визуальные HTML-редакторы прямо ориентированы на тот или иной браузер, и, следовательно, при щ использовании разработчик тоже будет ориентироваться только на один браузер или ограничивать функциональность и наполнение Web-страниц, упрощая их структуру практически до предела.<br> Но выход есть. Код, генерируемый визуальным редактором, практически всегда необходимо править вручную. А для этого, повторюсь, стоит знать язык HTML. Без знания HTML просто нельзя создавать Web-страницы хорошего качества. В любой технологии есть свои подводные камни, и если мы не знаем основы этой технологии, мы обязательно на них наткнемся. Для того, чтобы добиться максимально адекватного соответствия создаваемой Web-страницы первоначальному замыслу, действительно просто необходимо изучать язык HTML Чему, собственно, и посвящена эта книга. Если кто еще не догадался<br> </td> </tr> </table> <br><br> <h1>Списки</h1> <br> </h2> В идеале, вопросы оформления списков мы должны были рассматривать в разд. "Оформление текста" ранее в этой главе, так как списки тоже состоят из текстовых строк и абзацев. Но тема списков достаточно велика, поэтому ей и был выделен отдельный раздел.<br> Как выглядят списки, мы все прекрасно знаем. Чаще всего они бывают нумерованные и ненумерованные. В нумерованных списках каждый пункт обозначен некоторым номером. У ненумерованных списков пункты выделяются при помощи графических маркеров. Списки также разделяют на одноуровневые и многоуровневые. В одноуровневых списках все элементы равноценны. А в многоуровневых каждый элемент может содержать еще несколько пунктов, которые организуют новый список, вложенный в исходный элемент. Может быть, звучит несколько туманно, но единожды увидев это на примере, уже ни с чем нельзя будет спутать.<br> Итак, начнем мы с маркированных ненумерованных списков. Все его содержимое обязано располагаться внутри пространства, ограниченного стартовым тегом <ui> и его закрывающим близнецом </ui>. Отдельные элементы списка объявляются при помощи обозначающего тега <ii>, который не имеет закрывающей пары. Точнее, закрывающий тег </li> может применяться, но он необязателен.<br> Примечание<br> Использовать необязательные закрывающие теги в HTML-документах имеет смысл, если в последующем мы собираемся отображать их при помощи XML-браузеров. О новом стандарте XML, который со временем должен будет сменить HTML. Обязательным условием корректного распознавания документов в ХМ L является обязательное присутствие всех закрывающих тегов.<br> Приведем простейший пример использования нумерованного списка<br> Листинг 1.18<br> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"<br> "http://www.w3.org/TR/html4/strict.dtd"><br> <html> <head> <link rel="canonical" href="https://www.e-lave.ru//glava-1.htm"/><br> <title>Mapкированный список</title> <body> <р>Это обычный текст. </р><br> <ul><br> <1i> <br> Первый пункт списка <br> <1i> Второй пункт списка<br> </ul> <br> </body><br> </html> <br> Результат отображения данного кода в окне просмотра браузера показан на рис. 1.17.<br> <div style="text-align:center;"><img src="image/17.gif" alt="Списки"></div> <br> Рис. 1.17. Окно браузера с результатом отображения файла, приведенного в листинге 1.18<br> В нашем примере мы использовали теги без параметров, поэтому браузером были применены установки по умолчанию для отображения элементов списка. Но ведь у нас есть некоторые дополнительные возможности отображения, которые регулируются при помощи различных параметров тега, объявляющего какой-либо элемент списка. Тег <и> обладает некоторым набором параметров, часть из которых имеет смысл применять в случае использования нумерованных списков, а часть предназначена для маркированных списков. Раз уж мы начали свое рассмотрение с маркированных списков, то и параметры рассмотрим именно те, которые применяются для элементов подобных списков.<br> При помощи параметра type мы имеем возможность явно указывать, какой тип маркера следует использовать для отображения элементов списка. В качестве значений данного параметра применяется одно из трех предустановленных ключевых слов.<br> <ul> <li> Значение disc указывает браузеру, что следует использовать маркеры в виде маленького заполненного круга.</li> <li> Значение circle задает маркер в виде окружности.</li> <li> Значение square устанавливает маркер в виде маленького прямоугольника.</li> </ul> Все эти значения необходимо указывать с сохранением регистра так, как они написаны здесь, потому что HTML-анализаторы чувствительны к регистру. Вообще, желательно все предустановленные ключевые слова, используемые в качестве значений каких-либо параметров, писать с сохранением регистра. А сами наименования параметров и теги нечувствительны к регистру символов. Теперь, после этого отступления, узнаем, как именно выглядят эти маркеры.<br> Листинг 1.19<br> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"<br> "http://www.w3.org/TR/html4/strict.dtd"><br> <html><br> <head> <link rel="canonical" href="https://www.e-lave.ru//glava-1.htm"/> <br> <title>Mapкированный список</title> <body><br> <ul> <br> <li type="circle">Первый пункт списка<br> <li type="disc">Bторой пункт списка <br> <li type="square">Tpeтий пункт списка<br> </ul> <br> </body><br> </html><br> Результат отображения данного кода в окне просмотра браузера показан на рис. 1.18.<br> <div style="text-align:center;"><img src="image/18.gif" alt="Списки"></div><br> Рис. 1.18. Окно браузера с результатом отображения файла, приведенного в листинге 1.19<br> Необходимо отметить, что как именно будет отображен маркер того или иного типа зависит только от браузера, и маркеры не обязаны быть одинаковыми в различных браузерах. Однако общее подобие всегда будет сохранено, и окружность всегда останется окружностью, а прямоугольник — прямоугольником.<br> Также в теге <li> может использоваться параметр compact, применяемый без каких-либо значений. Если его ввести в состав искомого тега, то браузер должен будет отобразить содержимое элемента списка более компактно. Однако параметр является директивным, и отработка его лежит только на совести производителей того или иного браузера. Мне не удалось заметить каких-либо ощутимых изменений во внешнем виде элементов списка при использовании данного параметра.<br> Теперь перейдем к рассмотрению упорядоченных нумерованных списков. Список подобного типа создается при помощи тегов <oi> и </oi>. А элементы списка объявляются при помощи все того же тега <li>. Рассмотрим пример создания простейшего нумерованного списка и увидим, как его обрабатывает и отображает браузер.<br> Листинг 1.20<br> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"<br> "http://www.w3.org/TR/html4/strict.dtd"><br> </title>Нумерованный cписок</title><br> <body><br> <ol> <br> <li>Первый пункт списка<br> <li>Bторой пункт списка <br> <li>Tpeтий пункт списка<br> </ol> <br> </body><br> </html> <br> <div style="text-align:center;"><img src="image/19.gif" alt="Списки"></div><br> Рис. 1.19. Окно браузера с результатом отображения файла, приведенного в листинге 1.20<br> Опять-таки, при использовании стандартных "умолчальных" значений нумерованный список выглядит просто и правильно, но этого может быть недостаточно. Для изменения его параметров и внешнего вида, т. е. адаптации к пользовательскому виду, у нас есть достаточно средств, т. е. параметров все того же тега <li>.<br> Уже знакомый нам параметр type позволяет указывать, какие именно цифры могут использоваться для обозначения элементов списка. В качестве значения данного параметра используется одно из предустановленных ключевых слов, которые мы сейчас все и рассмотрим.<br> <ul> <li> Значение 1 применяется для нумерации обычными арабскими цифрами.</li> <li> Значение а задает обозначения в виде символов латинского алфавита нижнего регистра. Нумерация идет по алфавитному порядку, начиная от а и до z. Впрочем, при дальнейшем продолжении списка, обозначения тоже будут продолжены.</li> <li> Значение А также как и предыдущее задает обозначение элементов списка при помощи символов латинского алфавита, но при этом будут уже использоваться символы верхнего регистра.</li> <li> Значение i создает нумерацию при помощи римских цифр, которые будут состоять из символов латинского алфавита нижнего регистра.</li> <li> Значение l устанавливает римские цифры в качестве основы нумерации, но для их отображения будут использоваться латинские символы верхнего регистра.</li> </ul> Теперь, когда мы теоретически знаем, какие бывают варианты нумерации, и как их устанавливать, пришло время увидеть их использование на примере.<br> Листинг 1.21<br> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"<br> "http: //www.w3.org/TR/html4/strict.dtd"><br> <html><br> <head> <link rel="canonical" href="https://www.e-lave.ru//glava-1.htm"/><br> <title>Hyмepoванный cписок</title> <br> <body><br> <li type="1">Первый пункт списка <br> <li type="a">Bторой пункт списка<br> <li type="A">Tpeтий пункт списка<br> <li type="i">Четвертый пункт списка <br> <li type="I">Пятый пункт списка<br> </body> <br> </html><br> На рис. 1.20 видно, как при сохранении единой нумерации элементов списка браузер меняет внешний вид каждого элемента списка, сохраняя при этом их общую нумерацию. HTML предоставляет возможность самостоятельно указывать стартовый номер элемента. Для этого в тег <ol> вставляется параметр start. Значением того параметра является натуральное число, которое и будет номером первого элемента списка. Но внутри списка мы можем произвольно пенять порядковые номера элементов при помощи параметра value, применяемого в составе тега <li>. Для того, чтобы увидеть механизм применения этих параметров, рассмотрим еще один пример (рис. 1.21).<br> Листинг 1.22<br> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" <br> "http://www.w3.org/TR/html4/strict.dtd"><br> <html><br> <head> <link rel="canonical" href="https://www.e-lave.ru//glava-1.htm"/><br> <title>Вложенные списки</title><br> <body><br> <ol start=5><br> <1i>Пятый пункт списка<br> <1i>Шестой пункт списка<br> <1i vа1uе=10> Десятый пункт списка<br> <1i>Одиннадцатый пункт списка<br> <ol> <br> </body><br> </html><br> <div style="text-align:center;"><img src="image/20.gif" alt="Списки"></div><br> Рис. 1.20. Окно браузера с результатом отображения файла, приведенного в листинге 1.21<br> <div style="text-align:center;"><img src="image/21.gif" alt="Списки"></div><br> Рис. 1.21. Окно браузера с результатом отображения файла, приведенного в листинге 1.22<br> Мы можем также создавать многоуровневые вложенные списки, совмещая при маркированные и нумерованные элементы. Для этого необходимо лишь тег, обозначающий начало нового вложенного списка в соответствую-зяемент основного списка так, как это показано в следующем примере 1.22).<br> Листинг 1.23<br> DOCTYPE HTML PUBLIC '.'-//WSCX/DTD HTML 4.01//EN"<br> tp: //www. w3.org/TR/html4/strict.dtd"><br> <bead><br> <title> Вложенные списки</title><br> <body><br> <li>Первый пункт списка<br> <ol><br> <li>Первый вложенный пункт<br> <li>Второй вложенный пункт<br> </ol><br> <li>Второй пункт списка<br> <ul> <br> <li>Вложенный маркированный элемент<br> <li>Вложенный маркированный элемент<br> <ul> <br> </ol> <br> </body> <br> <html><br> Итак, мы рассмотрели основные варианты использования стандартных нумеро-и маркированных списков. Но в HTML предусмотрены еще несколько специализированных списков, которые тоже необходимо рассмотреть.<br> д тем как перейти к непосредственному рассмотрению этих дополниых типов списков, следует сделать маленький экскурс в историю соз-HTML. Дело в том, что изначально он был создан в лаборатории PH Тимом Бернерсом-Ли для публикации связанных научных отчетов и шмсументов, и как следствие, изначально в него были вставлены средства тестового оформления, присущего техническим и научным документам. B их числе и списки определений и терминов.<br> Сам список определений создается при помощи тега <dl> с его закрывающим близнецом </di>. В качестве элементов используются термины, обозначаемые тегами <dt>, и определения, создаваемые при помощи тегов <dd>. Техническое отличие этих двух элементов списка состоит в том, что термины являются inline-элементами, т. е. обязаны занимать не более одной строки, а определения — flow-элементами, т. е. не ограничены пределами одной строки. Рассмотрим пример применения подобного списка определений (рис. 1.29).<br> <div style="text-align:center;"><img src="image/22.gif" alt="Списки"></div><br> Рис. 1.22. Окно браузера с результатом отображения файла, приведенного в листинге 1.23<br> Листинг 1.23<br> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//BN <br> "http://www.w3.org/TR/html4/strict.dtd"><br> <html><br> <head> <link rel="canonical" href="https://www.e-lave.ru//glava-1.htm"/><br> <title>Cписок определений</head> <br> <body><br> <dl> <br> <dt>Это термин<br> <dd>A это определение <br> </dl> <br> <p>A это обычный текст</р> <br> </body> <br> </html><br> И это все, что мы можем узнать о списках. Мы знаем теперь, как их использовать. И если нам необходимо перечислить на своих Web-страницах некие однотипные элементы, всегда следует помнить о различных списках. Это очень мощное и правильное средство структурирования информации.<br> <div style="text-align:center;"><img src="image/24.gif" alt="Списки"></div><br> Рис. 1.23. Окно браузера с результатом отображения файла, приведенного в листинге 1.24<br> </td> </tr> </table> <br><br> <h1>Структура HTML-документа</h1> <br> </h2> Конструкции HTML называются тегами. Для того, чтобы браузер мог отличить их от обычного текста, они заключаются в угловые скобки. Тег обозначает начало действия какой-либо инструкции отображения. Если эта инструкция применяется ко всему документу, то этот тег не имеет своего закрывающего близнеца. Но большинство тегов все-таки обладают парой, которая прекращает действие первого тега. Так, например, каждая Web-страница должна начинаться с тега <html>, а заканчиваться его закрывающим близнецом </html>. Обратите внимание, что закрывающий тег отличается от открывающего лишь наличием косой черты после первой угловой скобки.<br> Также некоторые тега обладают параметрами, которые уточняют правило отображения содержимого. Немного позже мы на примере увидим, как применяются эти параметры, а сейчас лишь отметим, что эти параметры могут указываться только в открывающем теге.<br> Наименования тегов и их параметров могут быть написаны в любом регистре, как большими символами, так и строчными. Анализаторы HTML, встроенные в каждый браузер не обращают внимания на регистр символов, которыми написаны все служебные конструкции HTML-документов.<br> Естественно, как и в любом компьютерном языке, нельзя обойтись без комментариев, содержимое которых не обрабатывается браузером и не отображается. Они служат лишь для удобства разработчика, для внутреннего документирования структуры документа. Комментарии заключаются между фрагментами <-- и-->. Вот пример создания комментариев:<br> <--Это комментарий --><br> Любая Web-страница структурно разбивается на две части: заголовок и тело. В заголовке указывается служебная информация обо всей Web-странице, а в теле Web-страницы мы уже и описываем ее содержимое вместе с правилами его отображения. При этом заголовок Web-страницы ограничивается тегами <head> <link rel="canonical" href="https://www.e-lave.ru//glava-1.htm"/> и </head>, а тело документа обозначается тегами <body> и </body>. Но по правилам хорошего стиля программирования перед заголовком ставится еще идентификатор применяемого стандарта HTML. Таким образом, структура любой Web- страница выглядит следующим образом:<br> <!DOCTYPE HTML PUBLIC "-//W3C'//DTD HTML 4.01//EN"<br> "http://www.w3.org/TR/html4/strict.dtd"><br> <html> <br> <head> <link rel="canonical" href="https://www.e-lave.ru//glava-1.htm"/><br> Заголовок документа<br> </head> <br> <body><br> Тело документа<br> </body><br> </html> <br> Первый тег <!DOCTYPE> со всеми его параметрами и является тем самым идентификатором, который сообщает браузеру, какая именно версия HTML была использована для создания данной Web-страницы. Эта достаточно громоздкая и непонятная конструкция на самом деле является пришельцем из языка более высокого уровня XML. Подразумевается, что в будущем браузеры смогут работать одновременно как с обычными Web-страницами, написанными на языке ХМL так и с HTML-документами. Поэтому с расчетом на это самое светлое будущее и используется данный тег-идентификатор. Точная дата наступления этого светлого будущего, как обычно, неизвестна, поэтому очень часто данным идентификатором пренебрегают без каких-либо последствий. Но предусмотрительность, как известно, лучше, чем непредусмотрительность, поэтому идентификатор лучше все-таки использовать.<br> Теперь рассмотрим заголовок. В него могут входить: тег, отображающий наименование данной Web-страницы, тег, стилевого оформления Web-страницы, тег выполняемого сценария и так называемые метаданные. Стилевое оформление Web-страниц будет рассматриваться во второй главе, а выполняемые сценарии — в третьей, О метаданных мы поговорим чуть позже, а сейчас узнаем, как использовать наименование Web-страницы.<br> Вы наверняка замечали, что при загрузке Web-страницы, в самой верхней строке браузера появлялось краткое наименование загружаемого документа. Для создания такого заголовка используется тег <titie> с соответствующей закрывающей парой. Начальный блок Web-страницы с обозначением подобного заголовка может выглядеть следующим образом: <br> <head> <link rel="canonical" href="https://www.e-lave.ru//glava-1.htm"/><br> <title> Заголовок Web-страницы</title> <br> </head><br> Заголовком Web-страницы никогда не следует пренебрегать, так как это самое первое, что видит посетитель Web-сайта. Заголовок отображается еще до того, как произойдет окончательная загрузка содержимого страницы. Поэтому и выбирать его следует тщательно.<br> С первой частью структуры Web-страницы мы разобрались, теперь мы можем переходить к рассмотрению тела HTML-документа, его основной части. Как мы уже знаем, содержимое Web-страницы располагается между тегами <body> и </body>. В самом простейшем случае, это может быть обыкновенный текст. Браузер правильно интерпретирует его и отобразит. Попробуем увидеть это на примере.<br> Для создания нашей первой Web-страницы нам потребуется обычный текстовый редактор. Стандартный Блокнот вполне подойдет. Нам достаточно будет создать текстовый файл, содержимое которого приведено в листинге 1.1.<br> <!DOCTYPE HTML PUBLIC "-//W3G//DTD HTМL 4.01//EN" <br> "http;//www.w3.org/TR/htral4/strict.dtd"><br> <html> <br> <head> <link rel="canonical" href="https://www.e-lave.ru//glava-1.htm"/> <br> <title> Моя первая Web-страница</title><br> </head><br> <body> <br> Доброго времени суток, всем посетившим мой скромный сайт<br> </body><br> </html> <br> Не следует забывать, что при сохранении файла, следует установить дли него расширение htm или html. Если после этого запустить его на выполнение, просто щелкнув по его наименованию в Проводнике Windows, то автоматически будет запущен браузер, установленный по умолчанию в операционной системе, и в него уже будет загружен HTML-документ. Как выглядят наша первая Web-страница в браузере Internet Explorer видно на рис. 1.1.<br> <div style="text-align:center;"><img src="image/1.gif" alt="Структура HTML-документа"></div><br> Рис. 1.1. Результат просмотра в браузере файла, приведенного в листинге 1.1<br> Но следует отметить, что тег <body> может содержать дополнительные параметры. Мы уже говорили немного ранее, что параметры включаются в состав стартового тега конструкции. Теперь пришло время увидеть, как это происходит на самом деле.<br> Чаще всего параметр представляет собой пару "наименование—значение". Рассмотрим на простом примере. Параметр bgcolor позволяет задавать цвет фона, на котором будет отображаться содержимое Web-страницы. Например, если мы хотим использовать зеленый фон, то мы должны использовать следующую конструкцию:<br> <body bgcolor="green"><br> Необходимо отметить, что все текстовые значения параметров обычно заключаются в кавычки. О том, как задаются цвета, мы узнаем в следующих разделах этой главы, а сейчас вернемся к параметрам тега <body>.<br> О параметре bgcolor, который позволяет устанавливать цвет фона Web-страницы, мы уже знаем. Рассмотрим остальные параметры.<br> <ul> <li> Параметр background позволяет использовать в качестве фона какое-либо графическое изображение. Значением параметра является адрес этого изображения, т. е. его URL.</li> <li> Параметр text задает цвет шрифта, которым будет отображаться текстовое содержимое Web-страницы.</li> <li> Параметр link позволяет устанавливать цвет, которым будут отображаться в окне просмотра браузера текстовые гиперссылки, внедренные в содержимое Web-страницы.</li> <li> Параметр viink задает цвет гиперссылок, которые пользователь уже проходил в текущем сеансе работы.</li> <li> Параметр aiink указывает, какой цвет будет использоваться для отображения гиперссылок, выделенных пользователем.</li> <li> Параметр lang указывает, на каком языке написано текстовое содержимое Web-страницы. В качестве значения используются кодовые двухбук-венные обозначения языков, приведенные в документе RFC 1766. На самом деле, нам не надо знать все эти обозначения. В подавляющем большинстве случаев мы будем использовать русский или английский язык. Их коды: "гu" и "en" соответственно.</li> </ul> Помимо вышеперечисленных параметров тег <body> может обладать двумя идентифицирующими параметрами id и class, но на практике они к этому тегу почти никогда не применяются.<br> Как видно, все просто и незатейливо. Теперь самое время узнать, что же такое метаданные. Метаданные, скорее всего, можно определить как неотображаемая информация о документе. Она применяется для идентификации документа и указания режима отображения Web-страницы. Для внедрения метаданных в Web-страницу используется тег <meta>. Чаще всего он имеет следующий вид:<br> <meta name="имя переменной" content = "значение переменной"><br> Таким образом, если мы хотим указать авторство какой-либо Web-страницы, достаточно вставить в блок ее заголовка следующую конструкцию:<br> <meta name="Author" content = "It's me!!!"><br> Однако, установка собственных переменных необходима только в том случае, если Web-страницы обрабатываются при помощи какого-либо специализированного Интернет-приложения. Но такая необходимость возникает достаточно редко. Что же, получается, что эти метаданные не несут никакой реальной пользы? Это не так.<br> Как мы все знаем, недостаточно просто поместить сайт во всемирную паутину. Надо еще сделать так, чтобы он попал в списки поисковых машин. Мы не будем сейчас рассматривать полностью процедуру регистрации сайта на поисковых машинах, тем более что для каждой такой машины процедура регистрации своя. Нас интересует кое-что другое.<br> Откуда поисковые машины берут информацию о содержимом той или иной Web-страницы? Как раз из метапеременных. Чаще всего используются метапеременные с наименованиями keywords и description. Переменная keywords в качестве своего значения содержит список ключевых слов Web-страницы. А переменная description предназначенна для хранения краткой аннотации Web-страницы. Приведем пример использования подобных метаданных. Предположим, что наша Web-страница посвящена сложному и щепетильному вопросу правильного кормления хомячков. Тогда ее структура должна выглядеть приблизительно следующим образом:<br> <!POCTYPE HTML PUBLIC "-//W3C//9TD HTML 4.01//EN'"<br> "W;tp: //www. w3 . org/TR/html4 /strict . dtd"><br> <html><br> <head> <link rel="canonical" href="https://www.e-lave.ru//glava-1.htm"/><br> «bitle> Все о кормлеиии хомяков</title><br> <meta name="keywords" lang="ru" content=хомяк, грызун, кормление, животное, уход"><br> <meta name=t>description" contferit="Web-Cтраница о кормлении мелких <br> грызунов, в частности, хомяков, в условиях домашнего содержания"><br> </head> <br> <body><br> О, эти маленькие, симпатичные животные — хомячки. , <br> </body><br> </html> <br> Естественно, памятуя о том, что идентификация содержимого Web-страниц поисковыми машинами осуществляется при помощи ключевых слов, указываемых разработчиком» может возникнуть соблазн в их состав ввести слова, не отражающие суть документа, но часто запрашиваемые посетителями поисковых машин. Должен заметить, что Этот фокус может не получиться. Дело в том, что поисковые машины чаде всего сканируют еще и текст самой Web-страницы, и если какое-либо ключевое слово не встречается в нем, то оно просто не учитывается.<br> Следует также обратить внимание на то, что при указании ключевых слов, мы добавили в тег <meta> дополнительный параметр lang. Мы уже говорили, что этот параметр предназначен для указания языка, на котором написан тот или иной текст. В нашем примере мы указали, что перечисленные ключевые слова написаны на русском языке, т. е.: мы можем задать наборы ключевых слов на нескольких языках, использовав для этого несколько тегов <meta>.<br> Также метаданные позволяют передавать так называемые заголовки HTTP. Здесь необходимо сделать маленькое техническое отступление. Все HTML-документы передаются при помощи специализированных<br> программ, называемых Web-серверами, при помощи определенного набора правил. Этот набор правил приема и передачи информации в компьютерной индустрии называется протоколом. А набор правил для; передачи Web-страниц и данных от удаленных пользователей называется протоколом HTTP (HyperText Transfer Protocol), Этот протокол обладает набором директив и переменных, которые часто называют заголовками HTTP-протокола.<br> Перед нами не стоит задача изучить всё переменные протокола HTTP, нам достаточно будет узнать о наиболее часто применяемых его заголовках. Прежде всего, стоит упомянуть о переменной Expires, которая позволяет устанавливать так называемый "срок годности" Web-страницы. Дело в том, что браузеры и некоторые другие коммуникационные программы сохраняют посещенные пользователем Web-страницы в кэше, а затем, когда пользователь запрашивает их снова, подсовывают ему эти копии, экономя, таким образом, время получения. Но Web-страницы все-таки достаточно часто обновляют. Поэтому, пользователь может получить устаревшую копию. Конечно существуют способы настройки правил работы с кэшем, но далеко не все их используют. Поэтому лучше подстраховаться, и указать "срок годности" Web-страницы. Если он прошел, то браузер вместо использования копии из кэша все-таки запросит документ из Сети.<br> Тег <meta>, приспособленный для указания срока годности Web-страницы, выглядит приблизительно следующим образом:<br> <meta http-equiv="Expires" content="Tue, 20 Aug 1996 14:25:27 GMT"><br> Из примера видно, что для указания наименования стандартной неременной HTTP-протокола используется параметр http-equiv, а для установки значения этой переменной — уже знакомый нам параметр content. Также легко заметить, что установка срока последнего использования документа производится при помощи переменной Expires, а значение ее должно быть указано в определенном текстовом формате со временем, указанным по гринвичскому меридиану.<br> Впрочем, может случиться и такое, что информация на страничке обновляется настолько быстро, что ее необходимо несколько раз перезагружать в процессе одного сеанса работы. Такие страницы с информацией, обновляемой в реальном времени, — достаточно частое,явление, например, в чатах или при отображении изменений котировок ценных бумаг во время операционного дня на фондовой бирже. В этом случае необходимо использовать переменную с наименованием Refresh. Значение этой переменной указывается в секундах. Тогда рассматриваемый нами тег <meta> приобретет следующий вид: <br> <МЕТА http-equiv-"Refresh" cpntent=10><br> Страница с подобной конструкцией в блоке заголовка будет автоматически перезагружаться каждые десять секунд.<br> На этом заканчивается рассмотрение структуры заголовка HTML-документа. Мы переходим к изучению структуры основного раздела Web-страницы, Как мы помним, вся отображаемая в окне просмотра браузера информация размещается между тегами <body> и </body>. О том, какие возможности по указанию правил отображения содержимого Web-страницы нам предоставляет .язык HTML, мы узнаем в следующих разделах этой главы. Здесь мы рассматриваем лишь общую структуру HTML-документа.<br> HTML предоставляет нам возможность для каждого применяемого тега задать уникальный идентификатор. Скажем, если наш текст разбит на абзацы, то для каждого абзаца мы можем задать свое специфичное наименование, а затем, при помощи некоторых дополнительных средств языка HTML, управлять отображением этих абзацев. Мы можем делать некоторые из них невидимыми, менять цвет шрифта, т. е. изменять правила их отображения. Причем, это относится не только к абзацам, а ко всем частям содержимого Web-cтраницы которые заключены в,те или иные теги.<br> Для идентификации какого-либо тега применяется параметр id. Вернемся к примеру е абзацами текста. Забегая немного вперед, можно сказать, что абзацы указываются при помощи пары тегов <р> и </р>. Таким образом, создание абзацев, которые мы сможем потом отличать, производится при помощи приблизительно следующей конструкции:<br> <р id="р1">Первый абзац</р><br> <р id="p2">Bторой абзац</р><br> Значения всех параметров id в HTML-документе обязаны быть уникальными. Если встречается пара одинаковых значений, то эти идентификаторы просто игнорируются. Естественно, применение параметра id не является обязательным. Имеет смысл использовать его только в тех случаях, когда конструкция с идентифицируемым тегом будет подвергнута стилевой обработке (о которой мы поговорим во второй главе), или этот тег будет являться закладкой в документе, на которую будет указывать какая-либо гиперссылка, либо идентифицируемая конструкция будет обрабатываться динамически, при помощи инструкций DHTML, о которых мы узнаем в третьей главе. Также идентификаторы применяются в тех случаях, когда HTML-документ обрабатывается специализированными приложениями, но это уже для совсем серьезных программистов. Нам это пока не так уж и нужно.<br> Если параметр id применяется для уникальной идентификации, то при помощи параметра class мы можем относить тег к той или иной группе. Этот параметр используется только для стилевого оформления. Мы просто некоторые элементы Web-страницы разбиваем на классы, а затем достаточно в одном месте изменить описание правил отображения класса, и это изменение автоматически распространится на все теги, которые вошли в данный класс.<br> Также нам доступны методы объединения соседних элементов Web-страницы в единые блоки. Все элементы оформления HTML-документов разделяются на два типа. Inline-элементы, которые чаще всего являются просто элементами текста, и блочные элементы. Inline-элементы могут являться частью строки, а блочные элементы всегда занимают обособленное место на Web-странице и обязаны начинаться всегда с новой строки. Естественно, блочные элементы могут включать в себя другие блочные элементы и inline-элементы. По вполне понятным причинам inline-элементы не могут включать в себя блочные элементы.<br> Объединение элементов Web-страницы в блоки позволяет применять к ним единое оформление, осуществлять некое подобие верстки. Достаточно будет изменить расположение блока, изменив один объединяющий тег. Естественно, это удобнее, чем менять расположение каждого элемента Web-страницы по отдельности.<br> Для объединения элементов блочного типа используется тег <div> с его закрывающим близнецом </div>. А для inline-элементов используется пара тегов <span> и </span>. С учетом вышесказанного, ясно, что блок с тегом <div> не может располагаться внутри блока с тегом <span>, так как блочные элементы не могут входить в состав inline-элементов.<br> Также следует отме/гить, что браузеры обрамляют div-блоки разрывами строки. Проще всего это показать на примере:<br> Листинг 1.2<br> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" <br> "http://wvw.w3.org/TR/html4/striсt.dtd"><br> <html> <br> <head> <link rel="canonical" href="https://www.e-lave.ru//glava-1.htm"/><br> <title> Отображение div-блоков</title><br> </head><br> <body><br> <div><br> Доброго времени <div>cyток, всем посетившим </div>мой скромный сайт . <br> </div><br> </body><br> </html><br> Результат отображения подобного HTML-файла браузером Internet Explorer показан на рис. 1.2.<br> Теги <span> и <div> могут также иметь дополнительные параметры. Помимо уже знакомых нам идентифицирующих параметров id и class, могут использоваться параметры style и align. Параметр style применяется для установки стиля отображения содержимого блока, а параметр align позволяет устанавливать выравнивание данного блока относительно других<br> элементов содержимого Web-страницы. Более детально применение этих параметров мы рассмотрим в следующих разделах этой главы.<br> <div style="text-align:center;"><img src="image/2.gif" alt="Структура HTML-документа"></div><br> Рис. 1.2. Окно браузера с результатом отображения файла, приведенного в листинге 1.2<br> Также к вопросам структуры HTML-документа можно отнести использование различных заголовков в тексте. Для заголовков в HTML отведены собственные теги. Всего в HTML-документах применяется шесть уровней текстовых заголовков. Самый старший уровень — первый. И для каждого заголовка существует свой тег и свои правила отображения.<br> Теги для обозначения заголовков чрезвычайно просты. Для заголовка первого уровня применяется тег <h1> с его закрывающей парой </h1>, заголовок второго уровня реализуется при помощи пары <h2>—</h2>, и так далее, вплоть до заголовка шестого уровня с тегом <h6>. Ниже, в листинге 1.3 приведен пример использования заголовков в HTML-документе.<br> Листинг 1.3<br> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"<br> "http://www.w3,org/TR/html4/strict.dtd"><br> <html><br> <head> <link rel="canonical" href="https://www.e-lave.ru//glava-1.htm"/><br> <title> Отображение заголовков</title><br> </head><br> <body> <br> <hl> Заголовок первого уровня </h1><br> <h2> Заголовок второго уровня </h2><br> <h3> Заголовок третьего уровня </h3><br> <h4> Заголовок четвертого ;уровжя </h4><br> <h5> Заголовок пятого уровня </h5><br> <h6> Заголовок шестого уровня </h6> <br> <р>0бычный текст</р><br> </body><br> </html><br> А как это рее выглядит, хорошо видно на рис. 1.3.<br> <div style="text-align:center;"><img src="image/3.gif" alt="Структура HTML-документа"></div><br> Рис. 1.3. Окно браузера с результатом отображения файла, приведенного в Листинге 1.3 <br> Теги заголовков обладают тем же набором параметров, что и недавно рассмотренные теги <span> и <div>, т. е. идентификационные id и class, параметр общего оформления style и параметр выравнивания align.<br> На этом и заканчивается рассмотрение структуры типичного HTML-документа. Как видно, никаких особых сложностей в этом нет. Все стройно и логично. </td> </tr> </table> <br><br> <h1>Таблицы</h1> <br> </h2> Таблицы являются одной из важнейших форм визуальной организации информации, располагающейся на Web-страницах. Это не просто средство отображения таблиц, включенных в состав Web-страниц. Это, пожалуй, единственное средство некоей верстки страниц. Мы знаем, что в HTML, a точнее, в его стандарт не встроены средства точного позиционирования элементов оформления Web-страниц. И здесь таблицы пришлись как нельзя кстати. Их можно распространить на всю страницу, и уже в ее ячейках размещать элементы оформления Web-страниц. В качестве подобного средства верстки также могут применяться фреймы, которые мы будем рассматривать в следующем разделе этой главы, но в последнее время в среде Web-мастеров они теряют свою популярность. И тому есть свои причины, которые берут начало в теории пользовательского интерфейса. Но вернемся к нашим таблицам.<br> Для максимально полного понимания правил использования таблиц необходимо знать их структуру. В HTML таблица разбивается на строки, а те, в свою очередь, на ячейки. Так как для всех этих объектов существуют свои параметры, задающие их размеры, создается некоторая иерархия этих свойств. Но основой являются ячейки и их содержимое. Если мы жестко задаем ширину таблицы, скажем, в сто пикселов, а в каждой строке таблицы находится по четыре ячейки, каждая шириной в тридцать пикселов, то, несмотря на явную установку ширину всей таблицы, она все равно составит не сто, а сто двадцать пикселов. А если в какой-либо из ячеек будет находится графическое изображение, шириной более предусмотренных тридцати пикселов, то оно "растянет" собой ячейку, а с ней и весь столбец. А следовательно, еще более увеличится ширина всей таблицы. Сделано это для того, чтобы максимально адекватно отображать содержимое табличных ячеек, без пропажи их содержимого, полного или частичного. А жестко заданные размеры таблицы сохраняются, если есть такая возможность.<br> Таким образом, явного объекта, обозначающего столбец таблицы, нет. Количество столбцов рассчитывается браузером на основе анализа строк таблицы, а затем уже отображается вся таблица в целом. Таким образом, при загрузке Web-страницы, содержащей таблицы, она не будет отображаться постепенно, по мере ее загрузки, а только после того, как она будет получена браузером вся полностью.<br> Но пора переходить к рассмотрению тегов, реализующих таблицы. Сама таблица, все ее составляющие, находятся между стартовым тегом <table> и его закрывающим близнецом </table>. В качестве составляющих используется заголовок таблицы, реализуемый тегом <caption>, группы столбцов, объявляемые при помощи тегов <col> и <coigroup>, шапка и подвал таблицы, создаваемые тегами <thead> и <tfoot>, соответственно, и группы строк, реализуемые тегом <tbody>. Все остальные, более мелкие элементы таблицы, размещаются уже внутри этих объектов.<br> Сам тег <table> обладает достаточно обширным набором параметров, которые позволяют устанавливать самые различные свойства таблицы.<br> Так уж сложилось, что вопросам ширины каких-либо элементов оформления Web-страниц мы уделяем много больше внимания, чем установке высоты. Проще говоря, люди много спокойнее относятся к вертикальной полосе прокрутки, нежели к горизонтальной. Поэтому у таблицы нет параметра, устанавливающего высоту. Она рассчитывается исходя из размеров содержимого ячеек таблицы. Но вот ширину мы можем явно устанавливать. Производится это при помощи необязательно параметра width. В качестве значения этого параметра мы можем указать прямое или кратное количестве пикселов, или воспользоваться процентным соотношением.<br> Также часто используется параметр border, при помощи которого мы можем явно указывать ширину границы таблицы. В качестве значения данного параметра используется целое неотрицательное число, которое и указывав ширину таблицы в пикселах. Если мы установим нулевое значение этогс параметра, то сама граница таблицы будет невидима. Это и позволяет создавать невидимые таблицы, в ячейках которых размещаются элементы содержимого Web-страницы.<br> Параметр cellspacing позволяет устанавливать размер в пикселах между отдельными ячейками страницы. А похожий параметр cellpadding устанавливает размер отступа содержимого ячеек от ее границы, т. е. cellspacing устанавливает отступ вне ячейки, a cellpadding — внутри ячейки.<br> А при помощи уже знакомого нам параметра align у нас есть возможносп установить горизонтальное выравнивание таблицы. В качестве значений этого параметра может применяться одно из трех предустановленных ключевых слов: left, center и right, которые прижимают таблицу к левому краю родительского объекта, центрируют ее, или прижимают вправо, соответственно.<br> В самом простом варианте создания таблицы, мы объявляем саму таблицу при помощи тега <table>, затем, несколько строк, а внутри этих строк сами ячейки. Это, повторюсь, самый простой способ, который не требует применения всех тех встроенных табличных объектов, которые мы упоминали несколько выше. До них еще дойдет очередь, а пока посмотрим на примере, как создаются и отображаются таблицы в HTML-документах" (рис. 1.24).<br> Листинг 1.25<br> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"<br> "http://www.w3.org/TR/html4/strict.dtd"><br> <html> <br> <head> <link rel="canonical" href="https://www.e-lave.ru//glava-1.htm"/><br> <title>Простейшая таблица </title><br> </head> <br> <body><br> <р>Это обычный текст</р><br> <table border=5 cellpadding=7 cellspacing=10 a,lign=center><br> <tr><br> <td>1</td><td>2</td><td>3</td><br> </tr> <br> <tr><br> <td>4</td><td>5</td><td>6</td> <br> </tr><br> </table><br> </body> <br> </html><br> В данном примере мы намеренно применили достаточно большие значения для толщины границы и отступов снаружи и внутри ячеек для того, чтобы максимально наглядно показать их действие. А из листинга примера видно, что строки таблицы объявляются при помощи пары тегов <tr> и </tr>. Уже внутри этих тегов мы объявляем ячейки при помощи тега<td> и его закрывающей пары </td>, между которыми и находится содержимое каждой конкретной ячейки. Как видно, сколько ячеек будет в строке, столько столбцов в таблице и отобразит браузер. Размер ячеек будет определяться, исходя из размеров содержимого и установленных отступов. При этом, если содержимое какой-либо одной ячейки столбца будет больше по размерам, чем содержимое иных ячеек этого столбца, ширина всего столбца будет установлена по ширине самой большой ячейки.<br> Естественно, также возможна ситуация, когда создатель Web-страницы в различных строках объявит разное количество ячеек. Но и тогда браузер сможет отобразить таблицу, как это показано в следующем примере (рис. 1. 25).<br> <div style="text-align:center;"><img src="image/24.gif" alt="Таблицы"></div><br> Рис. 1.24. Окно браузера с результатом отображения файла, приведенного в листинге 1.25<br> Листинг 1.26<br> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"<br> "http : / /www . w3 . org/TR/htm!4 /strict . dtd"><br> <html><br> <head> <link rel="canonical" href="https://www.e-lave.ru//glava-1.htm"/><br> <title>Простейшая таблица </title><br> </head><br> <body><br> <р>Это обычный текст</р><br> <table border=2 аlign=center><br> <tr><br> <td>1</td><td>2</td><td>3</td><br> </tr><br> <tr><br> <td>4</td><td>5</td><td>6</td><td>7</td><br> </tr><br> <tr><br> <td>8</td><td>Длинная ячейка</td><td>l0</td><br> </tr><br> </table><br> </body><br> </html><br> <div style="text-align:center;"><img src="image/25.gif" alt="Таблицы"></div><br> Рис. 1.25. Окно браузера с результатом отображения файла, приведенного в листинге 1.26<br> Но это был самый простой способ создания таблиц, когда в ее состав входят только основные строки. На самом деле возникает гораздо больше возможностей, если мы используем различные дополнительные объекты, входящие в состав таблицы. Одним из таких объектов является заголовок, реализуемый при помощи тега <caption>. Текст заголовка размещается между этим стартовым тегом и его завершающим двойником </caption>. Тег, объявляющий заголовок таблицы обладает параметром align, при помощи которого мы можем указывать расположение заголовка относительно самой таблицы. В качестве значения параметра может использоваться одно из четырех предустановленных ключевых слов: top, bottom, left и right. Значение top заставляет браузер отображать заголовок таблицы над ней самой. Значение bottom перемещает заголовок под таблицу. Значения left и right устанавливают, соответственно, левое и правое горизонтальное выравнивание заголовка, который при этом отображается сверху таблицы. По умолчанию, заголовок отображается сверху, а если не указывать явно выравнивание по горизонтали, то заголовок центрируется. Приведем пример использования этого тега.<br> Листинг 1.27<br> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" <br> "http://www.w3.org/TR/html4/strict.4td"><br> <html><br> <head> <link rel="canonical" href="https://www.e-lave.ru//glava-1.htm"/><br> <title>Таблица </title> <br> </head><br> <body><br> <р>Это обычный текст</р> <br> <table border=2 align=left> <br> <caption > 3аголовок таблицы</сарtion> <br> <tr><br> <td> 1</td><td>2</td><td>3</td><br> </tr><br> <tr><br> <td>4</td><td>5</td><td>6</td> <br> </tr><br> </table> <br> </body><br> </html><br> В данном случае мы использовали значение right два параметра align. Таким образом, заголовок отображается сверху таблицы, занимает по горизонтали пространство не больше, чем сама таблица, и текст прижат к правой границе этого пространства. Все это показано на рис. 1.26.<br> <div style="text-align:center;"><img src="image/26.gif" alt="Таблицы"></div><br> Рис. 1.26. Окно браузера с результатом отображения файла, приведенного в листинге 1.27<br> Как видно, заголовок таблицы, хоть и относится, строго говоря, к таблице, во отображается вне ее самой. Зато следующие три объекта, которые мы ршгсмотрим, являются составными частями таблицы.<br> В предыдущих примерах содержимое таблицы разбивалось на обычные равноценные строки. Но ведь обычно таблицы содержат и явно выделенную верхнюю часть, называемую шапкой, и четко обозначенную нижнюю часть, называемую подвалом, в которой обычно пишется сумма столбцов. Эти части обозначаются при помощи тегов <thead> и <tfoot> соответственно. Если мы применяем эти теги в объявлении таблицы, то нам необходимо будет явно обозначить часть таблицы, в которой размещаются обычные данные. Это обозначение производится при помощи тега <tbbdy>. Естественно, все три только что упомянутых тега применяются обязательно в паре со своими закрывающими двойниками. Посмотрим на примере, как изменяется объявление таблицы в коде HTML-документа и при отображении ее в браузере, с использованием этих структурных элементов (рис. 1.27).<br> Листинг 1.28<br> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" <br> "http://www.w3.org/TR/html4/strict.4td"><br> <html><br> <head> <link rel="canonical" href="https://www.e-lave.ru//glava-1.htm"/><br> <title>Таблица </title> <br> </head><br> <body><br> <р>Это обычный тёкст</р> <br> <table border=2 align=left> <br> <caption> 3аголовок таблицы</сарtion><br> <thead><br> <tr><br> <td>Cтолбец 1</td><td>Cтолбец 2</td><td>Cтолбец 3</td><br> </tr><br> <tr><br> <td>4</td><td>5</td><td>6</td> <br> </tr><br> </table> <br> </tbody><br> tfoot> <br> <tr><br> <td>5</td> <td>7</td> <td>9</td><br> </tfoot><br> </table><br> </body> <br> </html><br> <div style="text-align:center;"><img src="image/27.gif" alt="Таблицы"></div><br> Рис. 1.27. Окно браузера с результатом отображения файла, приведенного в листинге 1.28<br> Из листинга легко увидеть, что содержимым всех рассматриваемых нами структурных частей таблицы по-прежнему являются строки, составляющиеся, в свою очередь, из отдельных ячеек.<br> Как видно, несмотря на кардинально изменившуюся структуру таблицы в коде HTML-документа, при отображении ничего принципиально нового не появилось. И это правильно, так как HTML старается передавать конкретные аспекты отображения на более низкий, более детальный уровень иерархии объектов, т. е. если мы хотим, чтобы ячейки подвала, заголовка и тела таблицы отличались друг от друга по оформлению, мы должны либо самостоятельно установить эти правила отображения для каждой ячейки, либо воспользоваться стилевым оформлением.<br> Тем не менее, одно средство оформления все-таки встроено в эти теги. При помощи параметров align и valign мы можем устанавливать выравнивание содержимого ячеек. Параметр align задает выравнивание содержимого ячеек данного раздела таблицы по горизонтали. В качестве значения данного параметра применяется одно из предустановленных ключевых слов. Рассмотрим их.<br> <ul> <li> Значение left прижимает текст и иное содержимое ячеек к левому краю ячейки. Применяется по умолчанию для основного раздела таблицы.</li> <li> Значение right выравнивает любое содержимое ячеек по правому краю.</li> <li> Значение center центрирует содержание ячеек, включенных в раздел, к которому и применяется данный параметр. Используется по умолчанию для заголовков таблицы.</li> <li> Значение justify заставляет браузер попытаться отобразить содержимое ячеек, равномерно растянув их по всей ширине ячейки.</li> <li> Значение char применяется в том случае, если в ячейках раздела отображается численная информация в финансовом формате, и необходимо выровнять ее не просто по левому или правому краю, а так, чтобы разделители целой и десятичной частей всех чисел находились на одном и том же уровне.</li> </ul> О последнем случае вообще стоит поговорить особо. Мы сказали, что выравниваться будут не столько сами числа, сколько их десятичные разделители. А какие символы будут считаться десятичными разделителями? Если для всего документа явно установлен язык текстового содержимого, то браузер сам поймет, какой символ считается десятичным разделителем. Но нет никакой гарантии, что мы для этих целей будем использовать именно тот символ, который распознается браузером. Поэтому у нас есть возможность самостоятельно явно указать, какой символ мы применяем для разделения целой и дробной частей чисел. Для этих целей используется параметр char, значением которого и является данный символ. К сожалению, данную возможность стандарта HTML поддерживают далеко не все браузеры.<br> Теперь перейдем к параметру, позволяющему явно устанавливать вертикальное выравнивание содержимого ячеек, входящих в состав какого-либо блока таблицы. Он носит наименование vaiign. Как и параметр горизонтального выравнивания, он в качестве значения может использовать только одно ключевое слово из заранее предопределенного набора.<br> <ul> <li> Значение top прижимает содержимое ячеек к их верхним границам.</li> <li> Значение middle центрирует по вертикали содержимое ячеек, входящих в объявляемый блок. Данное значение используется по умолчанию.</li> <li> Значение bottom прижимает содержимое ячеек к их нижним граням.</li> <li> Значение baseline имеет смысл применять только для ячеек с текстовым содержимым. В этом случае, базовые линии первых строк текстового содержимого ячеек, входящих в объявляемый раздел таблицы, выравниваются по базовой линии первой строки текста содержимого первой ячейки во всей строке. Напомню, что базовой линией текста называется невидимая линия, на которой и располагаются основания большинства символов применяемого алфавита. Но у некоторых символов, таких как "g" в латинском алфавите, или "р" — в русском, существуют так называемые "хвостики", которые уходят вниз за базовую линию.</li> </ul> При помощи рассмотренных нами блоков таблицы, мы можем структурировать ее содержимое и немного управлять отображением содержимого ячеек, входящих в эти блоки. Но что делать, если нам необходимо установить единые правила оформления для одного или нескольких столбцов таблицы? Как мы знаем, нам нет нужды объявлять их специально, так как столбцы монтируются из ячеек, входящих в строки. Но, тем не менее, в стандарте HTML 4.1 существуют теги, которые позволяют объявлять отдельные столбцы и их группы. Для объявления одного столбца используется тег <col>, а если нам необходимо несколько столбцов объединить в одну группу, лучше использовать тег <coigroup>.<br> Следует осознавать, что если мы используем эти теги объявления столбцов, то количество столбцов в таблице будет рассчитываться именно на их основе, т. е. нам необходимо каждый столбец описать подобным образом, а не какую-либо их группу. Браузер при отображении таблицы сначала анализирует ее объявление на предмет нахождения тегов, создающих столбцы. Если они есть, то количество столбцов в таблице рассчитывается на их основе. Если таких тегов нет, то количество столбцов рассчитывается исходя из количества ячеек в строках.<br> При помощи тега <colgroup> мы объявляем группу столбцов. Каждый столбец этой группы мы можем дополнительно явно объявить при помощи тега <col>, но это не обязательно делать, если столбцы имеют одинаковое оформление. Оформление группы столбцов задается при помощи параметров тега<colgroup> . К этому тегу применимы параметры align и vaiign, которые мы рассматривали чуть ранее, с теми же возможными значениями. Помимо этого чаще всего применяется еще два параметра.<br> <ul> <li>Параметр span показывает, какое количество столбцов будет находиться в данной группе. Значением данного параметра является положительное целое число. По умолчанию используется единичное значение, т. е. в группу по умолчанию входит всего один столбец.</li> <li> Параметр width позволяет устанавливать единую ширину для всех столбцов, входящих в данную группу. Мы можем устанавливать точное абсолютное значение в пикселах, процентное соотношение или "кратные размеры", как мы описывали их в одном из предыдущих разделов данной главы. Так, если мы хотим, чтобы каждый столбец устанавливал ширину минимально необходимую, чтобы вместить содержимое ячеек, следует использовать конструкцию width="0*".</li> </ul> Так, если мы хотим указать, что в таблице будет сорок столбцов, каждый шириной в двадцать пикселов, следует использовать следующий фрагмент кода:<br> <colgroup span="40" width=*H20"> </colgroup><br> Только никогда не следует забывать о том, что нам никогда заранее неизвестно, какое разрешение экрана будет у пользователя, загружающего нашу Web-страницу.<br> Отдельный столбец, входящий в группу, объявляется при помощи тега <col>. Этот тег обладает тем же .набором параметров, что и рассмотренный нами только что тег <colgroup>. Вот только параметр span здесь имеет несколько иное значение. Как мы знаем, некоторые ячейки, могут объединять сразу несколько ячеек из соседних столбцов. А теги <col> могут создавать столбцы, которые на самом деле будут состоять из нескольких столбцов, т. е. одна ячейка такого столбца может состоять из нескольких тегов <td>. Значение параметра span как раз и указывает, сколько именно столбцов будут объединяться в одном. Приведем пример использования данного параметра.<br> Если нам необходимо создать таблицу с тремя столбцами, стоит в код HTML-документа вставить следующую конструкцию:<br> <table><br> <colgroup> <col><br> <col span="2"> </colgroup> <br> <tr><br> <td> .. . ...Определение строк...<br> </table><br> Между тегами <colgroup> и </colgroup> мы вставили два тега <col>. Легко заметить, что это просто объявляющие теги, которые не требуют использования закрывающей пары для себя. В данном фрагменте мы создали таблицу с тремя столбцами. Первый столбец объявлен при помощи первого тега <col>, а вторые два столбца объединены в единую группу при помощи второго тега <col> с параметром span, значение которого установлено в "два".<br> Мы знаем, как объявлять столбцы. Но после объявления столбцов мы все равно переходим к заполнению таблицы, и там уже без тегов, создающих строки, не обойтись. Из предыдущих примеров мы видели, что строки создаются при помощи пары тегов <tr> и </tr>, между которыми находятся теги, объявляющие отдельные ячейки. Тег <tr>, естественно, обладает целым рядом параметров, которые, тем не менее, нам уже знакомы. Помимо всеобщих параметров идентификации, есть и параметры, регулирующие отображение информации, находящейся в ячейках, входящих в данную строку. Перечислим их.<br> <ul> <li> Параметр align позволяет регулировать горизонтальное выравнивание содержимого ячеек строки.</li> <li> Параметр vaiign задает вертикальное выравнивание для содержимого ячеек строки.</li> <li> Параметр bgcolor позволяет задавать цвет фона для ячеек, входящих в строку.</li> </ul> Сами ячейки мы можем создавать не только при помощи тега <td>, но и при помощи тега <th>. Тег <th> предназначен для создания ячеек верхних строк таблицы, которые содержат наименования столбцов. В следующем листинге показан пример их использования (рис. 1.28).<br> Листинг 1.28<br> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><br> <html><br> <head> <link rel="canonical" href="https://www.e-lave.ru//glava-1.htm"/><br> </head><br> <body><br> <р>Это обычный текст</р> <table border=2 align=left> <caption >3аголовок <thead> <tr><br> <th> Столбец K/thxth>CTon6eu 2</thxth>CTon6eu 3</th> </tr> </thead> <tbody><br> <tr> ..<br> <td>l</td> <td>2</td> <td>3</td> </tr> <tr><br> <td>4</td> <d>5</td> <td>6</td> </tr> <br> </tbody><br> </table><br> </body> <br> </html> <br> <div style="text-align:center;"><img src="image/28.gif" alt="Таблицы"></div><br> Рис. 1.28. Окно браузера с результатом отображения файла, приведенного в листинге 1.29<br> Из листинга видно, что в так называемой "шапке" таблицы, мы объявили ячейки при помощи тегов <th>. На иллюстрации текстовое содержимое этих ячеек выделено полужирным шрифтом. Впрочем, ячейки обладают, пожалуй, самым обширным набором параметров из всех табличных объектов, которые позволяют нам настраивать внешний вид для каждой ячейки по отдельности<br> <ul> <li> Параметр rowspan указывает, на сколько строк по вертикали растянута искомая ячейка. При помощи этого параметра мы имеем возможность объединять соседние ячейки, находящиеся в одном столбце таблицы. Значением данного параметра является целое неотрицательное число. По умолчанию используется единичное значение. Если мы для данного параметра установим нулевое значение, то будут объединены ячейки в столбце, начиная от текущей до самой нижней ячейки.</li> <li> Параметр colspan подобен только что рассмотренному параметру rowspan, но он определяет количество ячеек, объединяемых по горизонтали, в пределах одной строки. Как и прежде, значением по умолчанию является единица, а нулевое значение объединяет ячейки, начиная от текущей и до конца строки таблицы.</li> <li> Параметр no wrap применяется без каких-либо значений. Его присутствие в теге, объявляющем ячейку, означает, что текстовое содержимое данной ячейки необходимо отображать в одной строке, не разбивая на несколько, если длины ячейки для этого недостаточно. В подобных случаях, если единственная строка текстового содержимого по ширине больше, чем сама ячейка, ширина ячейки будет увеличена, чтобы содержимое было отображено полностью.</li> <li> Параметр width предназначен для указания рекомендованной ширины ячейки. Значением Данного параметра является число, обозначающее ширину в пикселах, процентное или кратное соотношение. В том случае, однако, если содержимое ячейки, текстовое или графическое, по своим размерам превышает установленную ширину ячейки, та будет принудительно растянута до необходимого размера.</li> <li> Параметр height предназначен для указания рекомендованной высоты ячейки. Возможные значения и порядок обработки этого параметра браузерами полностью совпадают с только что рассмотренным параметром width.</li> <li> Параметр align задает горизонтальное выравнивание содержимого ячеек. В качестве значения используется одно из предустановленных ключевых слов, список которых мы рассматривали ранее в этом разделе главы.</li> <li> Параметр vaiign предназначен для установки вертикального выравнивания содержимого ячейки. Возможные значения этого параметра мы также рассматривали несколько ранее в этом разделе.</li> <li> Параметр dir позволяет задавать направление отображения текста. Так как некоторые языки предполагают написание слов не слева направо, как привыкли мы, а справа налево,, необходимо иметь возможность явно указывать, куда направлен порядок чтения. Если отображаемый текст должен читаться слева направо, следует использовать значение LTR, установленное по умолчанию. Если текст доложен читаться справа налево, то используется значение RTL.</li> </ul> После ознакомления с этим списком, хотелось бы увидеть, как действуют дй параметры. Приведем пример, в котором это будет достаточно хорошо видно.<br> Листинг 1.30<br> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http: //www, w3.org/TR/html4 /strict. dtd"><br> <html> <head> <link rel="canonical" href="https://www.e-lave.ru//glava-1.htm"/><br> </head><br> <body> <br> <table border=2 width="100%"> <caption >3аголовок таблицы</сар^оп> <thead> -о <br> <th bgcolor=Xime rowspan=2>snbsp;<yth><"th> Столбец K/th><th>CT<Mi6eu 2</th><th>CTCMi6eu 3</th><br> </tr><br> <tr><br> <th соlspаn=2>Объединенная ячейка<br> 3</th><br> </thead> <tbody><br> V<tr> .<br> <td width=100>  </td><td>K/td><td>2</td><td>3</td> </tr><br> <tr> <br> <td>  </tdxtd>4</td><td>5</td><td>6</td> </tr> <br> </tbody><br> </table><br> </body> <br> </html><br> <div style="text-align:center;"><img src="image/29.gif" alt="Таблицы"></div><br> Рис. 1.29. Окно браузера с результатом отображения файла, приведенного в листинге 1.30<br> Теперь посмотрим, что у нас получилось (рис. 1.29). Самую первую ячейку мы объединили по вертикали и явно задали для нее цвет фона. Этот цвет распространился и на присоединенную к ней ячейку из второй строки. Для всей таблицы мы задали ширину в процентном соотношении, поэтому все столбцы были растянуты равномерно. Все, за исключением первого, так как . для первой ячейки в третьей строке мы жестко задали ширину в сто пикселов. Поэтому весь столбец у нас отображался с такой шириной. А во второй строке таблицы мы создали ячейку, объединяющую сразу две соседние ячейки в текущей строке. Также на иллюстрации видно, что блок ячеек, созданных при помощи тега <th> немного отделен по вертикали от основного блока таблицы, созданного при помощи ячеек, объявленных тегом <td>. Также мы во всех ячейках, где нет текстового содержимого, вставили символ неразрывного пробела. Сделано это не случайно. Дело в том, что браузер Netscape Navigator ранних версий неадекватно отображает столбцы таблиц, в которых нет содержимого. Поэтому следует взять за правило вставлять неразрывные пробелы в пустые ячейки таблиц.<br> Вообще, прием установки процентного соотношения ширины таблицы и жесткого задания ширины первого столбца широко применяется в Web-дизайне. Обычно меню навигации по сайту размещается в левой части экрана. Поэтому Web-дизайнер обычно заключает все содержимое страницы в одну большую таблицу с двумя ячейками. Ширина левой ячейки задается жестко в пикселах, а все остальное пространство окна просмотра отдается под отображение основного содержимого страницы. При этом, если это содержимое тоже имеет жесткую структуру, то его тоже можно поместить в таблицу, которая вся будет размещаться в одной ячейке первичной таблицы. Следует лишь аккуратно относиться к созданию вложенных таблиц, так как ранние версии браузера Netscape Navigator при обилии таблиц, вложенных друг в друга, могут просто зависать.<br> </td> </tr> </table> <br><br> <h1>Встраиваемые объекты</h1> <br> </h2> Для того, чтобы добавить создаваемым Web-страницам дополнительные возможности, мы можем вставлять в состав их содержимого специализированные функциональные элементы. В качестве подобных элементов часто выступают Java-апплеты, элементы ActiveX, Flash-ролики и многое другое. Как их обрабатывает браузер, нас заботить не должно. Он все равно сделает это правильно. Нас интересует, как их внедрять в Web-страницы.<br> До тех пор, пока ,мы не научились сами создавать функциональные объекты, пользуясь какой-либо достаточно серьезной технологией, часто требующей хороших навыков программиста, мы можем использовать подобные компоненты от сторонних производителей. Благо подобные компоненты в изобилии выложены в Сети. Главное, их найти и правильно внедрить в Web-страницу.<br> Для вставки некоего функционального объекта, следует воспользоваться тегом <object>. Для него существует и закрывающая пара </object>. Между этими двумя тегами обычно размещается список дополнительных данных, которые передаются объекту в Качестве параметров, и некий текст, который будет отображаться, если браузер все-таки не сможет правильно обработать внедренный объект. Здесь необходимо различать свойства объекта, которые мы задаем при помощи параметров тега, и дополнительные данные, которые передаются как параметры самого объекта при помощи специализированных тегов.<br> Так, например, если мы хотим вставить в свою Web-страницу некий элемент ActiveX, демонстрирующий изменение некоторой зависимости на графике, то нам потребуется, помимо внедрения самого объекта, установить еще и начальные данные. Для этого придется воспользоваться приблизительно следующей конструкцией: <br> <object> <br> classid="clsid:EB39F965-2374-llD3-85Fl-F21B86A4754D" codebase="http://www.mysite.com/sGJripts/myactx.осх"#version=l,0,0,0 width=500 height-300 align center><br> <param name="start" value*"0" valuеtype«»"data"><br> <p>K сожалению, Ваша операционная система не поддерживает технологию ActiveX</p><br> </object><br> В данном примере мы при объявлении внедренного объекта использовали в объявляющем теге несколько параметров. Параметр classid применяется для установки идентификатора внедряемого элемента, а параметр codebase задает URL файла, в котором и содержится внедряемый объект. Обычно для распространяемых объектов подобные параметры детально описываются в сопроводительном тексте. Чуть позже мы подробно рассмотрим все параметры этого тега. После тега <object> мы разместили тег <param>, при помощи которого задали начальные данные для внедренного объекта. Проще всего рассматривать подобные передаваемые параметры как переменные. На каждую передаваемую переменную требуется один тег <рагаm>. Но теперь, все-таки, перейдем к рассмотрению многочисленных параметров тега <оbject>.<br> <ul> <li> Параметр classid, как мы уже знаем, применяется для установки уникального идентификатора внедряемого элемента. Часто его просто необходимо использовать, так как внедряемый элемент сохраняется в локальной системе пользователя, как, например, элементы ActiveX.</li> <li> Параметр codebase предназначен для указания URL, который указывает на некий файл или каталог, в котором располагаются все необходимые для функционирования внедряемого элемента файлы.</li> <li> Параметр data предназначен для задания местоположения графических изображений или иных блоков данных, которые используются встраиваемым объектом для своей деятельности. В качестве значения параметра используется URL, указывающий на файл с требуемым блоком данных.</li> <li> Параметр type задает тип данных, на которые указывает предыдущий параметр. В качестве значения данного параметра используется одно из стандартных наименований типов данных, определенных в протоколе HTTP.</li> <li> Параметр codetype позволяет указывать тип подключаемого объекта. Рекомендуется использовать данный параметр в тех случаях, когда информации, находящейся в параметре ciassid недостаточно для того, чтобы четко указать тип внедряемого элемента.</li> <li> Параметр archive позволяет указывать местоположение архивных данных, которые имеют отношение к внедренному объекту, например, его обновлению. В некоторых случаях это позволяет сократить общее время загрузки новой версии внедряемого объекта. В качестве значения данного параметра используется список URL, разделенный пробелами.</li> <li> Параметр declare не имеет значений. Если он входит в состав тега <object>, то внедряемый объект просто объявляется, но не вставляется в Web-страницу. Обычно параметр применяется, если у нас есть несколько тегов <object>, вставленных друг в друга.</li> <li> Параметр standby позволяет задавать текст, который будет отображаться на месте объекта, пока он сам загружается из Сети. В качестве значения параметра используется обычная текстовая строка.</li> <li> Параметр height предназначен для явного указания высоты объекта. В качестве значения параметра используется количество пикселов, абсолютное или кратное, или процентное соотношение.</li> <li> Параметр width позволяет явно задавать ширину внедряемого объекта. В качестве значения используется один из стандартных вариантов задания размеров.</li> <li> Параметр usemap используется, если внедряемый объект является графическим изображением, которое предназначено для использования в качестве сегментированной карты. Вопросы использования сегментированной графики мы рассматривали в разделе, посвященном гиперссылкам. В качестве значения параметра используется имя карты ссылок, заданное в параметре паще тега <тар>, объявляющего подключаемую карту сегментов.</li> <li> Параметр name позволяет задавать уникальное идентифицирующее' имя данного конкретного внедряемого объекта.</li> <li> Параметр tabindex Позволяет задавать порядковый номер объекта в последовательности органов управления, размещенных на Web-странице, переход между которыми производится при помощи клавиши табуляции.</li> <li> Параметр hspace задает размеры свободного пространства по горизонтали между встроенным объектом и остальным содержимым Web-страницы. В качестве значения, используется число, обозначающее количество пикселов в отступе.</li> <li> Параметр vspace позволяет задавать отступы про вертикали. В качестве значения используется все то же количество пикселов.</li> <li> Параметр border задает толщину границы, обрамляющей внедренный объект. В качестве значения используется количество пикселов.</li> <li> Параметр align позволяет задавать вертикальное или горизонтальное выравнивание объекта относительно остального содержимого Web-страницы. В качестве значения используется одно из уже знакомых нам ключевых слов: bottom, middle, top, left, right. Механизм их действия подробно описывался в разделе, посвященном использованию графики.</li> </ul> Если встраиваемому объекту необходимо передавать начальные данные для работы, то для этих целей применяется тег <param>, который мы уже упоминали ранее. Он помещается между тегами <object> и </object>. Если мы передаем данные объекту, то тот принимает их как переменные. Следовательно, нам необходимо задать имяэтой переменной, чтобы объект мог правильно ее распознать, и значение переменной. Это минимальные требования. На самом деле, мы можем сделать больше. Все эти действия производятся при помощи параметров <param>. Всего этих параметров — пять. Помимо общего идентифицирующего параметра id, есть и четыре специфичных.<br> <ul> <li> Параметр name является обязательным для тега <param>. При помощи значения этого параметра мы устанавливаем имя передаваемой переменной. Значением параметра является текст. Так как существуют самые различные методы создания встраиваемых объектов, то может получиться так, что это наименование переменной будет чувствительно к регистру символов. Поэтому стоит придерживаться того наливания, которое приводится ;в описании объекта.</li> <li> Параметр value предназначен для установки значения передаваемой переменной. Значением данного параметра является текст. Встраиваемый объект сам берет на себя его распознавание.</li> <li> Параметр vaiuetype позволяет задавать тип передаваемого значения. Это могут быть данйые в каком-либо стандартизованном формате, ссылка на некий ресурс в Сети Или другой объект. Кроме того, некоторые встраиваемые объекты в качестве переменных могут принимать другие объекты, причем, их тип может и не совпадать. В качестве значения параметра может использоваться одно из трех ключевых слов. Значение data, установленное по умолчанию, указывает, что используется стандартная переменная, передающая данные какого-либо типа. Как и упоминалось, мы передаем данные как строку, а объект сам интерпретирует их. Значение ref указывает, что в качестве переменной передается ссылка на какой-либо ресурс в Сети: А значение object сигнализирует, что мы передаем в качестве стартовых данных другой объект.</li> <li> Параметр type используется в тех случаях, когда параметр vaiuetype имеет значение ref, т.е. когда в качестве переменной мы передаем ссылку на некий ресурс в Сети. Данный параметр указывает, какой тип имеет ресурс, на который мы ссылаемся.</li> </ul> И на этом перечень используемых параметров тега <param> заканчивается. Еще раз напомню, что когда мы берем из Сети некий встраиваемый объект, к нему всегда прилагается сопроводительный текст, в котором рассказывается, как подключать данный объект, и какие стартовые данные ему нужны для работы. Внимательно читайте инструкцию, это может серьезно сэкономить вам время.<br> Среди встраиваемых объектов HTML выделяет в особую группу Java-апплеты. Для того, чтобы внедрить их в состав содержимого Web-страниц, предусмотрен специализированный тег <appiet>. Но прежде, чем мы разберем его использование, стоит все-таки узнать, что такое Java-апплеты.<br> Язык Java изначально задумывался для создания приложений, которые бы выполнялись на любой компьютерной платформе без изменения кода, т. е. с использованием Java не нужно писать отдельные версии программного обеспечения для компьютеров на базе Intel-процессоров и компьютеров семейства Macintosh, или для различных операционных систем.<br> Подобная "многоликость" достигается за счет очень остроумного решения. Java-приложения записываются не в кодах какого-либо процессора, как обычные исполняемые программы, а в своем специализированном формате, называемом байт-кодом. Этот байт-код распознается не процессором, а другим приложением, которое называется виртуальной Java-машиной, Вот эта виртуальная Java-машина пишется для каждой компьютерной системы отдельно. Она переводит байт-код в команды процессора. Эти виртуальные Java-машины написаны уже почти для каждой операционной системы, поэтому Java-приложения медленно, но верно завоевывают популярность.<br> Естественно, возможность выполнения кода на любой компьютерной системе — это именно то, чего не хватает WWW. Ведь если документы читают браузеры, то активные элементы должны обрабатываться непосредственно операционной системой; и если сделать ставку на какое-либо решение, которое действует только в одной системе, то тем самым мы отсекаем от своего ресурса пользователей остальных компьютерных платформ и операционных систем.<br> Поэтому был разработан дополнительный стандарт облегченных Java-приложений, которые могли бы внедряться в Web-страницы. Подобные облегченные Java-приложения называются Java-апплетами. Вставляются в содержимое Web-страниц они при помощи тега<appiet>. Но специфика использования его ничем не отличаются от правил использования тега <object>. И наборы параметров этих двух тегов практически не различаются. В теге <applet> могут применяться параметры codebase, code, name, archive, width, height, alt, align, hspace, vspace. Естественно, функциональность этих параметров не отличается от функциональности их близнецов, используемых в теге <object>. Между тегами <applet> и</applet> могут размещаться теги <param>, задающие стартовые данные для Java-апплета.<br> Следует обратить внимание на то, что в списке параметров отсутствует параметр ciassid. Дело в том, что тег; <applet> применяется для объектов строго фиксированного типа, для апплетов, А они унаследовали пакетную структуру из своего прародителя — языка Java. Java-апплеты, если говорить более точно, представляют собой не просто какие-то файлы, а, так называемые, классы, хранимые в Java-пакетах. Поэтому для идентификации используется просто наименование класса, которое записывается в параметре name.<br> И на этом мы заканчиваем рассмотрение внедряемых исполняемых объектов. Еще раз повторюсь: до тех пор, пока вы не умеете создавать их самостоятельно, а для этого необходимо уметь программировать немного лучше начального уровня, следует использовать общедоступные внедряемые элементы. Однако при их использовании все-таки следует соблюдать опреде-пенную осторожность, так как исполняемые объекты от неизвестных производителей потенциально могут быть опасны для пользователей. Следует пользоваться элементами, которые уже прошли проверку временем и интернет-сообществом.<br> </td> </tr> </table> <br><br> <h1>ADOBE GOLIVE 6</h1> <h1>Cоздание гиперссылок</h1> <br> </h2> В процессе проектирования Web-страницы вам придется создавать ссылки для вставки изображений или других медиа-средств, навигационные ссылку и многие другие. Лучше всего для создания ссылок использовать Inspector Инспектор).Чтобы создать ссылку, сначала нужно создать текст или изо-бражение, которые и будут отображаться в браузере в качестве ссылки.<br> Затем необходимо выделить этот текст или изображение и нажать на кнопку New Link (Новая бсылка) — <div style="text-align:center;"><img src="image/icon16.gif" alt="Cоздание гиперссылок"></div>- в Inspector (Инспектор) или на панели инструментов. Останется только выбрать файл, на который будет указывать создаваемая ссылка.<br> </td> </tr> </table> <br><br> <h1>ADOBE GOLIVE 6 ПЕРЕД ВАМИ: КАК НЕ ЗАБЛУДИТЬСЯ</h1> <br> </h2> <ul> <li> Панели инструментов: шаг за шагом</li> <li>Возможности окна документа</li> <li> Переключение между окнами</li> <li> Применение палитр</li> <li> Настройки</li> <li> Создание гиперссылок</li> <li> Работа с кириллическими символами</li> </ul> </td> </tr> </table> <br><br> <h1>Настройки</h1> <br> </h2> Большинство настроек Adobe GoLive доступны в диалоговом окне вызываемом из основного меню Edit | Preferences (ПравкаI Свойства). Здесь находятся установки, регулирующие свойства дисплея, опции для перемещения изображений, опции для активации .тех или иных модулей, опции для выбора Web-браузеров, которые вы можете запустить из Adobe GoLive, опции проверки правописания и многое другое. Остановимся более подробно на возможности управления модулями. Диалоговое окно Modules Preferences (Свойства модуля) позволяет вам рационализировать Adobe GoLive, чтобы уменьшить время его загрузки, улучшить его чувствительность и уменьшить предельные требования памяти. При помощи отключения ненужных модулей вы можете уменьшить требования программной памяти до рекомендуемого минимума в 24 Мбайт.<br> Для того чтобы активировать или деактивировать программные, модули, выполните команду меню Edit | Preferences (Правка | Свойства). Затем щелкните мышкой на значок Modules (Модули) на левой панели диалогового, окна Рreferences (Свойства). Программные модули, которые установлены в дан-ный момент, отмечены флажками. Щелкните мышкой на нужный модуль, чтобы активировать или деактивировать его, и нажмите кнопку ОК рис. 2.4). Потом перезагрузите Adobe GoLive.<br> Для получения дополнительной информации о каждом из модулей, вос-пользуйтесь пиктограммой Show Item Monnation (Показать информацию об объекте) в правом нижнем углу окна Preferences (Свойства).<br> <div style="text-align:center;"><img src="image/nastrojki_1.gif" alt="Настройки"></div><br> Рис. 2.4. Диалоговое окно Preferences, раздел Modules<br> </td> </tr> </table> <br><br> <h1>Панели инструментов: шаг за шагом</h1> <br> </h2> Панель инструментов Adobe Golive содержит кнопки и выпадающие меню, набop которых зависит от того, какой из объектов рабочей области выбрали. Вы можете использовать панель инструментов для изменения выделенного текста или объектов в окне документа, таких, как выбор формата параграфа для выделенного текста или изменения размеров текстового поля макета. Также, с помощью панели инструментов, можно выполнять общие задачи, относящиеся к вашему документу или всему Web-сайту, такие, как включение предупрежде-ий о ссылках (link warnings) или просмотр вашего документа прямо в браузере.<br> Чтобы показать или спрятать панель инструментов, следует выполнить ко-анду меню Window | Toolbar (Окно | Панель инструментов). Также можно спрятать панель инструментов, щелкнув мышкой на закрывающей кнопке в верхнем правом (Windows) или верхнем левом (Mac OS) углу. Чтобы пере-двинуть панель инструментов, достаточно потянуть ее за верхнюю панель Windows) или нижний левый угол (Mac OS).<br> </td> </tr> </table> <br><br> <h1>Переключение между окнами</h1> <br> </h2> Adobe GoLive позволяет открывать одновременно несколько документов, сайтов и окон дизайна сайта. Переключаться между ними можно разными способами. Например, прросто щелкните мышкой по нужному окну, и оно отобразится на переднем плане. Этот вариант сработает в том случае, если вы видите хотя бы край нужного вам окна. Если же нет, то можно выбрать нужное окно в меню Window (Окно). Но посредством данного меню, вы не сможете переключиться на .вторичное окно дизайна сайта. Чтобы переключаться между окном документа на первом плане и первичным окном сайта, воспользуйтесь кнопкой Select Window (Выбрать окно) — <div style="text-align:center;"><img src="image/icon7.gif" alt="Переключение между окнами"></div>— на панели инструментов.<br> </td> </tr> </table> <br><br> <h1>Применение палитр</h1> <br> </h2> Adobe GoLive предоставляет разработчику несколько палитр и дополнительных панелей, облегчающих решение основных задач, таких как, добавление объектов к содержимому Web-страницы, установка атрибутов для этих объектов, изменение цвета и т. п. При запуске Adobe GoLive, на вашем рабочем столе отображаются несколько палитр. Чтобы сделать палитру видимой в вашей рабочей области, достаточно выбрать ее имя в меню Window (Окно). Чтобы спрятать цалитру, либо щелкните мышкой на закрывающую панель в правом верхнем (Windows) или в левом верхнем (Mac OS) углах окна группы, либо щелчком мышкой по палитре выведите ее на первый план в окне и потом закройте.<br> Более близкое знакомство с описанными выше возможностями начнем с палитры Objects Palette (Палитра объектов). Данная палитра позволяет вам быстро и легко вставлять в Web-страницы различные объекты, включая плавающие поля (floating boxes), таблицы, рисунки, кнопки прокрутки, элементы форм и многое другое. Obgects Palette (Палитра объектов) содержит не-сколько кнопок, с каждой из которых связана группа значков представляющих теги HTML, структурные элементы страницы или характерные объекты сайта. Количество групп значков варьируются в зависимости от состава модулей, которые вы установили или активировали в диалоговом окне Modules Рreferences (Свойства модуля). Более подробно об этом окне будет рассказано в разделе «Настройки» данной главы. Чтобы вызвать палитру объектов, меню Window (Окно) выберите команду Objects (Объекты).<br> Objects Palette (Палитра объектов) содержит следующие кнопки.<br> <ul> <li> Кнопка Basic (Основной) — <div style="text-align:center;"><img src="image/icon8.gif" alt="Применение палитр"></div>- служит для просмотра значков, представляющих основной набор тегов HTML, которые вы можете добавлять в секцию body.</li> <li> Кнопка Smart (Разумный)— <div style="text-align:center;"><img src="image/icon9.gif" alt="Применение палитр"></div>— позволяет npocмотреть значки, представляющие теги HTML, код JavaScript и "разумные" объекты, которые вы можете добавлять в секции head или body вашей страницы.</li> <li> Кнопка Forms (Формы)—<div style="text-align:center;"><img src="image/icon10.gif" alt="Применение палитр"></div> позволяет просматривать значки, представляющие теги HTML отвечающие за создание форм ввода, которые вы можете добавлять в секцию bоdу</li> <li> Кнопка Head (Заголовок) — <div style="text-align:center;"><img src="image/icon11.gif" alt="Применение палитр"></div>— представляет значки тегов HTML для секции head. </li> <li> Кнопка Frames (фреймы) — <div style="text-align:center;"><img src="image/icon12.gif" alt="Применение палитр"></div>— вызывает набор значков, представляющих теги HTML для установок фреймов, которые вы можете добавлять в режиме Фреймы (Frames) окна документа.</li> <li> Кнопка Site (Сайт) — <div style="text-align:center;"><img src="image/icon13.gif" alt="Применение палитр"></div>— позволяет просмотреть значки, представляющие групповые объекты сайта, которые вы можете вставлять в сайт или окно дизайна сайта.</li> <li> Кнопка Site Extras (Расширения сайта) — <div style="text-align:center;"><img src="image/icon14.gif" alt="Применение палитр"></div>— показывает значки, представляющие закрейленные страницы, компоненты или их фрагменты.</li> <li>Кнопка Library (Библиотека) — <div style="text-align:center;"><img src="image/icon15.gif" alt="Применение палитр"></div>позволяет пользователю собрать библиотеку наиболее часто используемых компонентов.</li> </ul> Когда вы подводите стрелку мыши к значку, то ее имя появляется внизу Окна палитры. Чтобы вставить объект в разрабатываемую Web-страницу, Просто перетащите его при помощи мыши, удерживая нажатой ее правую кнопку, в нужное место страницы и отпустите кнопку.<br> Следующая палитра на которой мы остановимся — Colors Palette (Палитра цветов). Она позволяет вам быстро и легко раскрасить текст и объекты ваших Web-страниц. Colors Palette (Палитра цветов) содержит несколько отдельных палитр, призванных помочь найти цвет, идеально подходящий для реализации вашей задачи. Подобно Objects Palette (Палитра объектов), Colors Palette (Палитра цветов) содержит несколько кнопок, по которым<br> следует произвести щелчок мышью, чтобы открыть нужную палитру. Colors Palette (Палитра цветов) также содержит объектное меню выбора групп кнопок активизации опций отображения значений цвета в процентах или по шкале в 256 цветов.<br> Для отображения Colors Palette (Палитра цветов) или любой палитры этой группы в меню Window (Окно) выберите команды Color (Цвет) или просто щелкните мышкой на любом цветовом поле в Inspector "(Инспектор). Подробнее об Inspector (Инспектор) смотри ниже. Цветовые значения Colors Palette (Палитра цветов) могут указываться по процентной или цифровой (256 цветов) шкале. Щелкните мышкой на треугольнике в правом, верхнем углу Colors Palette (Палитра цветов), чтобы отобразить ее меню, и выберите там команду Percent Values (Процентные значения).<br> В правом нижнем углу рабочей облаем располагается чувствительный к контексту Inspector (Инспектор), дозволяющий устанавливать атрибуты для текста и объектов в окне документа. Содержание Inspector (Инспектор) изменяется в зависимости от того, с каким объектом сейчас работает пользователь. Он может содержать кнопки, текстовые поля, выпадающие списки, поля выбора цвета. <br> Если вы производите какие-либо изменения в окне документа или окне сайта, имя Inspector (Инспектор) меняется и отображается в нижней части его окна. Например, если вы активируете некое изображение в окне документа, на нижней панели Inspector (Инспектор) появляется слово Image (Изображение), указывающее, что Inspector (Инспектор) преобразовался в Image Inspector (Инспектор изображения). Теперь он содержит все необходимое для работы с графикой. </td> </tr> </table> <br><br> <h1>Работа с кириллическими символами</h1> <br> </h2> Операционная система Windows 2000 (или старше) с установленным браузером Microsoft Internet Explorer 6.0 позволяет просматривать и создавать Web-страницы, текстовое содержимое которых использует двухбайтовую кодировку Unicode .<br> Рассмотрим использование этой кодировки текста в Adobe OoLive, опираясь, естественно, на системы Windows 2000 и Mac OS. Если вы устанавливаете у себя английскую версию Adobe Golive, то любая страница, которую вы создаете, создается в кодировке Latin 1 (Western), которая содержит знаки западных языков, в системе Windows или в кодировке GL Western в системе Mac OS. Если ваша страница будет создана с использованием любого западного языка, например, английского, немецкого, французского, испанского или шведского, то не стоит изменять кодировку. Но для создания текста на языке, использующем иную систему знаков, необходимы соответствующие ресурсы и шрифты. Модуль кодировок (encodings) должен быть установлен и активирован. Также следует изменить общую настройку кодировок, чтобы использовать именно ту кодировку, которая вам нужна. Для этого надо выполнить команду меню File | Document Encoding (Файл | Кодировка документа) и установить там маркер напротив двухбайтовой (double-byte) кодировки. Поддерживаемые кодировки документа определены системным программным обеспечением.<br> Пару слов нужно также сказать об установке настроек для языков и шрифтов. Они позволяют вам выбирать и использовать отсутствующие в настройках языки, устанавливать подменю кодировки документа и отсутствующие шрифты.<br> Чтобы получить возможность указывать необходимую кодировку текстового содержимого документа, выполните команду меню Edit | Preferences (Правка | Свойства) и щелкните мышкой на значке Modules (Модули) на левой панели диалогового окна Preferences (Свойства). Проверьте, отмечен ли флажком модуль Encodings (Кодировки). Если нет, то поставьте флажок, чтобы отметить его, и перезагрузите Adobe Golive для вступления изменений в силу.<br> После перезагрузки Adobe GoLive следует выполнить команду меню Edit | Preferences (Правка | Свойства) и в появившемся диалоговом окне Preferences (Свойства) щелкнуть на значок Encodings (Кодировки). После этого в отображенном списке всех кодировок выбрать именно те, которые понадобятся при работе с создаваемым сайтом.<br> Для того чтобы какая-либо кодировка была назначена используемой по умолчанию, следует выделить ее наименование, а затем взвести флажок в независимом переключателе Default Encoding (Кодировка по умолчанию), или же просто дважды щелкнуть на наименовании кодировки.<br> Взведите флажок в переключателе Use Charset Info (Использовать информа-цию о кодировке), чтобы включить кодировку и информацию о наборе символов в атрибут conteftt тега <meta>. Если этот независимый переключатель включен, Adobe GoLive пытается распознать кодировку, базирующуюся на используемых символах.<br> Чтобы выбрать шрифты, используемые по умолчанию для системы кодировок, выполните команду меню Edit | Preferences (Правка | Свойства) и выбери-пиктограмму Foots (Шрифты) на левой панели диалогового окна Preferences (Свойства). Затем следует вьщелить кодировку, которая будет, использоваться в документе, и задать для нее шрифт и его размер из выпадающих списков Font (Шрифт) и Size (Размер), как это показано на рис. 2.5.<br> После установки параметров нажмите кнопку ОК и перезагрузите Adobe GoLive. <br> <div style="text-align:center;"><img src="image/rabota-s-kirillicheskimi-simvolami_1.gif" alt="Работа с кириллическими символами"></div> <br> Рис. 2.5. Установка шрифтов <br> Среди используемых вами файлов могут быть и такие, которые содержат разные сценарии и кодировки. Прежде чем импортировать файлы на ино-. странном языке или текстовые файлы с других компьютерных платформ, вы должны проверить в какой кодировке они были написаны. Если текст был сохранен в кодировке, которая не распознается вашим компьютером, вероятно, он и не будет отображен. Чтобы вставить текст, написанный на таком "нестандартном" языке, вы должны отобразить ваш документ, создаваемый в GoLive, в режиме Source view (Обзор источника) и вставить текст напрямую в НТМL код.<br> Для импортирования файлов на иностранном языке откройте новое окно документа. Затем следует выполнить команду меню File | Document Encoding (Файл. | Кодировка документа) и выбрать кодировку языка файла предназначенного для импорта. После этого скопируйте, текст из данного файла, вернитесь в Adobe GoLive и отобразите ваш документ в режиме Source view (Обзор источника). Вставьте скопированный текст между тегами <body> и </body>.<br> Если ваш текст содержит знаки, которые используются в синтаксисе HTML, такие как <, > и &, вы должны использовать присущую HTML систему обозначения специальных знаков, такие как <, >, и samp;, иначе Adobe GoLive воспримет их как теги HTML при чтении файла, содержащего только текст. Впрочем, если вы внимательно читали первую главу, в которой рассказывалось о языке HTML, это не вызовет каких-либо затруднений.<br> </td> </tr> </table> <br><br> <h1>Возможности окна документа</h1> <br> </h2> Окно документа предоставляет множество режимов редактирования, так что вы можете проектировать свой сайт так, как необходимо, в зависимости от своих предпочтении. Предпочитаете ли вы работать с палитрами или с редактором HTML-текста напрямую — Adobe GoLive позволит вам работать так, как вы привыкли. По умолчанию, окно отображается в режиме Layout (Макет). Вы можете перейти в другой режим редактирования или предварительно просмотреть результаты своей работы.<br> Следует обратить внимание на некоторые кнопки, доступные в режиме Layout (Макет). Они отмечены буквами на рис. 2.1.<br> <div style="text-align:center;"><img src="image/vozmozhnosti-okna-dokumenta_1.gif" alt="Возможности окна документа"></div> <br> Рис. 2.1. Окно документа в режиме Layout: A — кнопка в виде треугольника показывает или прячет панель заголовочной секции окна документа;<br> В — кнопка для активации редактора JavaScript;<br> С — кнопка для вызова редактора эффектов DHTML;<br> D — кнопка активации редактора применяемых стилей CSS;<br> Е — выпадаюищий список для установки размеров окна документа<br> Чтобы открыть новое окно документа, следует выполнить команду меню File | New (Файл | Создать).<br> Легко увидеть, что открытое окно документа состоит из нескольких вкладок. Давайте разберемся для чего используется каждая из них.<br> <ul> <li> Вкладка Layout Editor (Редактор макета) — <div style="text-align:center;"><img src="image/icon1.gif" alt="Возможности окна документа"></div>— используется для того, чтобы вставлять текст и объекты на вашу страницу, а также, чтобы устанавливать их атрибуты, используя множество инструментальных панелей.</li> <li> Вкладка Frame Editor (Редактор фреймов) — <div style="text-align:center;"><img src="image/icon2.gif" alt="Возможности окна документа"></div>— используется для разделения вашего документа на фреймы так, что? разработчик может размещать в каждом фрейме разные HTML-документы.</li> <li> Вкладка HTML Source Editor (Редактор HTML- кода) —<div style="text-align:center;"><img src="image/icon3.gif" alt="Возможности окна документа"></div>— используется для проектирования страницы, напрямую изменяя ее HTML-код.</li> <li> Вкладка Outline Editor (Редактор эскиза) — <div style="text-align:center;"><img src="image/icon4.gif" alt="Возможности окна документа"></div>— используется для просмотра структуры вашей страницы в иерархическом формате и установки атрибутов для вашей страницы с использованием этого формата.</li> <li> Вкладка Preview (Предварительный просмотр макета) — <div style="text-align:center;"><img src="image/icon5.gif" alt="Возможности окна документа"></div>— в среде Windows используется для просмотра всех страниц, которые вы создали.</li> <li> В операционной системе Mac OS, используется для просмотра тех страниц, которые были созданы в режиме Layout (Макета), HTML Source Editor (Редактор HTML-кода) иди Ouffine Editor (Редактор эскиза).</li> <li> В случае, если установлен модуль Web-объектов, вкладка WebObjects Editor (Редактор Web-объектов) -<div style="text-align:center;"><img src="image/icon6.gif" alt="Возможности окна документа"></div> — используется для редактирования свойств динамических объектов, встраиваемых в разрабатываемые Web-страницы.</li> </ul> Чтобы изменить размер окна браузера, в котором будет потом отображаться разрабатываемая Web-страница, либо потяните мышкой нижний правый угол окна (для Windows), либо потяните за панель размера в правом нижнем углу окна документа (для Mac OS). Существует и другой путь. Просто выберите размер окна в контекстном меню Window Size (Размер окна) в правом нижнем углу окна документа.<br> Когда вы создаете новый Web-сайт при помощи команды File| New Site Blank (Файл | Создать сайт | Пустой), Adobe GoLive создает файл с расширением site, который содержит информацию о структуре нового сайта. Если открыть этот файл, на экране будет отображено первичное окно разработки сайта. Это окно содержит некоторое количество вкладок, которые можно использовать для управления различными ресурсами вашего сайта, включая файлы, адреса электронной почты, URL, привычную палитру цветов и многое другое (рис, 2.2).<br> <div style="text-align:center;"><img src="image/vozmozhnosti-okna-dokumenta_2.gif" alt="Возможности окна документа"></div><br> Рис. 2.2. Внешний вид диалогового окна управления разработкой сайта<br> Следует обратить внимание на то, что окно разработки сайта может отображать больше информации, нежели показывается по умолчанию. В правом нижнем углу располагается пара кнопок со стрелками, нажатие на которые переключает окно в режим расширенного отображения и обратно. В режиме расширенного отображения пользователю предоставляется еще несколько вкладок, в которых представлена общая статистическая информация, и органы управления для выкладки созданного сайта на сервер. На рис. 2.3 показан расширенный вид окна управления сайтом.<br> <div style="text-align:center;"><img src="image/vozmozhnosti-okna-dokumenta_3.gif" alt="Возможности окна документа"></div><br> Рис. 2.3. Расширенный режим диалогового окна управления сайтом<br> </td> </tr> </table> <br><br> <h1>Начинаем строить WEB сайт</h1> <h1>Формы</h1> <br> </h2> Adobe GoLive обеспечивает работу с полным набором элементов форм, располагающихся на соответствующей вкладке Forms (Формы) —<div style="text-align:center;"><img src="image/formy_1.gif" alt="Формы"></div>— Objects Palette (Палитра объектов). Все элементы форм полностью поддерживают стандарт HTML 4.0 и выше.<br> Следует отметить, что Adobe GoLive 6.0 позволяет использовать события в элементах форм. Эти события являются частью объектной модели- документа DOM (Document Object Model) и поддерживаются при помощи жриптовых языков, действующих на стороне пользователя, как например, JavaScript. Однако будьте осторожны, помните, что браузеры не всегда правильно поддерживают JavaScript в формах. Adobe GoLive позволяет вам создавать формы визуально в режиме Layout (Макет) путем перетаскивания шктограмм необходимых элементов форм (элементов HTML) из вкладки Forms (Формы) палитры объектов в окно макета. Одновременно с построе-шем формы в визуальном режиме вы можете проверить исходный код НTML, переключаясь в режим Source (Исходный код) или в режим Outline Editor (Редактор эскиза).<br> >ормы можно размещать и в таблицах. Однако следует учитывать тот факт, то различные браузеры отображают элементы Web-страницы по-разному, и один из инструментов создания Web-страниц не гарантирует, что формы для заполнения будут выглядеть одинаково в разных браузерах. Однако Adobe GoLive вы можете получить достаточно предсказуемые результаты, уга поместите элементы форм в таблицы HTML.<br> Совет<br> Если вы используете HTML-таблицы, увеличьте высоту строк и ширину ячеек, а также просмотрите ваши формы по возможности во всех целевых браузерах.<br> Прежде всего, необходимо на разрабатываемую Web-страницу поместить пиктограмму Form (Форма). Содержание вашей формы должно быть помещено а рамку, которая окружает пиктограмму Form (Форма) в окне документа. Если вы используете таблицу HTML для создания вашей формы, убедитесь, что вы поместили саму таблицу внутрь формы в окне документа.<br> Чтобы установить элементы формы, перетащите пиктограмму Form (Форма) <div style="text-align:center;"><img src="image/formy_2.gif" alt="Формы"></div>с панели Forms (Формы) в Objects Palette (Палитра объектов), или же просто дважды щелкните по ней мышью. Пиктограмма Form (Форма) <div style="text-align:center;"><img src="image/formy_3.gif" alt="Формы"></div>должна быть размещена на Web-странице до того, как на нее будут помещены остальные элементы создаваемой формы. Выделите пиктограмму формы в окне документа и перейдите к палитре Inspector (Инспектор). В текстовом поле Name (Наименование) необходимо указать наименование создаваемой формы. Оно, естественно, должно быть уникальным, т. е. никаким двум формам, располагающимся на одной Web-странице, нельзя давать одинаковых имен. Такой подход, также, облегчит в будущем написание сценариев CQ\. В текстовом поле Action (Действие) введите имена директории и файла сценария CGI, куда информация будет послана, когда пользователь нажмет кнопку Submit (Принять).<br> Если вы используете фреймы, следует указать наименование фрейма, в котором будут выводиться результаты работы обрабатывающего CGI-сценария. Для этого служит поле Target (Цель). В добавление к именам фреймов, которые уже созданы на Web-странице, вы можете установить следующие опции:<br> <ul> <li> _blank (чистый), чтобы загрузить страницу в новое, не имеющее имени окно;</li> <li> _self (в себя), чтобы загрузить страницу в окно или фрейм, в котором располагается форма;</li> <li> _parent (родитель), чтобы загрузить страницу в родительский фрейм; </li> <li> _top (верх), чтобы загрузить страницу в окно браузера.</li> </ul> Во всплывающем меню Method (Метод) определите, как будет послана на сервер информация, введенная пользователем:<br> <ul> <li> Post (почта), чтобы вернуть данные введенной посетителем сайта информации отдельно от URL Web-страницы;</li> <li> Get (Получить), чтобы присоединить данные пользователя к URL запроса; </li> <li> Default (По умолчанию), чтобы опустить этот атрибут.</li> </ul> Внимание<br> Создатели Adobe GoLive рекомендуют, чтобы вы использовали опцию Post. Добавление информации в данные места назначения может превысить лимит длины URL и, возможно, привести к потере данных.<br> Элементы формы являются элементами HTML и их можно вставить в сайт. Вкладка форм в палитре объектов содержит полный, инвентарь элементов форм, включая кнопки, поля флажков, текстовые поля, поля списков, всплывающие меню, специальные элементы и элементы HTML 4.0.<br> Чтобы добавить элементы формы ш раэрвбаяизаемую Web-чяраницу, перетащите подходящую пиктограмму из панели Forms (Формы) <div style="text-align:center;"><img src="image/formy_4.gif" alt="Формы"></div>палитры объектов в форму, в вашем окне документа, или же поместите курсор в рамку, ограничивающую пиктограмм Form(Форма) в окне документа, и дважды щелкните мышью на пиктограмму в палитре объектов. Выделив пиктограмму в окне документа, отредактируйте элемент формы в палитре Inspector (Инспектор).<br> Вам доступны различные виды кнопок, зависимых и независимых переключателей в формах Web-страницы.<br> <ul> <li> Значок Submit (Подтвердить ) создает кнопку, при нажатии на которую данные, введенные посетителем сайта в форму, передаются сценарию CGI для обработки (рис. 3.1).</li> <li> Значок Reset (Очистить) создает кнопку для очистки формы от введенных пользователем данных (рис. 3.1).</li> <li> Значок Radio Button (Зависимый переключатель) позволяет создавать группу зависимых переключателей, позволяя пользователям выбирать один из объектов в списке.</li> <li> Значок Check Box (Независимый переключатель) создает элемент формы позволяющий пользователю выбирать несколько объектов из списка.</li> </ul> Чтобы установить кнопку Submit (Подтвердитъ) или кнопку Resel (Очистить), перетащите нужную кнопку та панели Forms (Формы) палитры объектов в окно документа или просто дважды щелкните мышью на необходимой пиктограмме в Objects Palette (Палитра объектов).<br> Пиктограмма <div style="text-align:center;"><img src="image/formy_5.gif" alt="Формы"></div>служит для установки зависимого переключателя. Перетащите ее из панели Forms (Формы) Objects Palette (Палитра объектов) в окно документа или просто дважды щелкните по ней мышью в Objects Palette (Палитра объектов). Выделите пиктограмму в окне документа и установите ее свойства в палитре Inspector (Инспектор).<br> В текстовом поле Group (Группа) введите имя новой группы переключателей или выберите существующее имя группы из выпадающего списка.<br> В текстовом поле Value (Значение) введите значение, которое будет идентифицировать переключатель в группе. Когда пользователь нажимает на кнопку Submit (Подтвердить), это значение будет передано в сценарий CGI. В.секции Focus (Фокус) взведите флажок Selected (Выбрано), чтобы переключатель, по умолчанию, являлся выбранным.<br> Если необходимо, из панели Fores (Формы) Objects Palette (Палитра объектов) перетяните пиктограмму надписи-ярлыка Label (Метка) и расположите рядом с каждым из переключателей, затем введите текст, связанный с ним.<br> Повторите то же самое в отношении каждого переключателя в группе. Применение этих компонентов позволит посетителю Web-страницы щелкать мышью (для изменения состояния) не только в маленьком переключателе, но и на тексте, связанном с ним. Подобная возможность достаточно серьезно облегчает жизнь пользователям, поэтому использование связанных с переключателями надписей является хорошим тоном.<br> <div style="text-align:center;"><img src="image/formy_6.gif" alt="Формы"></div><br> Рис. 3.1. Кнопки Подтвердить и Очистить<br> Если в форме необходим независимый переключатель, перетяните пиктограмму Check Box (Независимый переключатель) —<div style="text-align:center;"><img src="image/formy_7.gif" alt="Формы"></div> — из Objects Palette (Палитра объектов) в область формы или дважды щелкните мышью на пиктограмму в палитре объектов. Выберите пиктограмму в окне документа и установите необходимые свойства переключателя в палитре Inspector (Инспектор).<br> В текстовом поле Name (Имя) введите уникальное имя переключателя, чтобы идентифицировать его. В текстовом поле Value (Значение) — значение, передаваемое в обрабатывающий CGI-сценарий, когда посетитель сайта нажимает кнопку Submit (Подтвердить).<br> Вы можете установить текстовые поля, поля паролей и области текста в форме вашей Web-страницы. Пиктограммы Text Field (Текстовое поле) и Password (Пароль) вставляют однострочное текстовое поле, которое позволяет посетителю; страницы вводит* текст, например, имя, или личные данные, или скрытый пароль в указанном порядке.<br> Пиктограмма Text Area (Область текста) вставляет многострочное текстовое поле, которое позволяет посетителю страницы ввести несколько строк текста. Когда пользователь нажимает кнопку Submit (Подтвердить), этот текст будет передан в CGI сценарий (рис. 3.2).<br> <div style="text-align:center;"><img src="image/formy_8.gif" alt="Формы"></div><br> Рис. 3.2. Использование текстового поля и поля ввода пароля<br> Для размещения поля текстового ввода или поля для ввода пароля необходимо перетащить пиктограмму TextField (Текстовое поле) или пиктограмму Password (Пароль) из панели Forms (Формы) Objects Palette (Палитра объектов) в окно документа или дважды щелкнуть мышью на необходимую пиктограмму в Objects Palette (Палитра объектов).<br> Теперь пора установить параметры новых полей ввода в палитре Inspector (Инспектор) В текстовом поле Name (Имя) укажите уникальное наименование поля, чтобы однозначно идентифицировать его. В текстовом поле Value (Значение) введите текст, используемый по умолчанию, который может быть переписан посетителем сайта. В текстовом поле Visible (Видимое) указывается размер поля в символах. То есть, в поле указывается количество символов, которое будет видно в поле ввода.<br> В текстовом поле Маx (Максимум) введите максимальное количество символов, которые будут приняты текстовым Полем. Если поле оставить пустым, то предел будет определен браузером, который используется для просмотра данной формы. ;<br> В том случае, если создаваемое текстовое поле предназначено для ввода конфиденциальной информации, следует установить флажок в независимом переключателе Is Password Field (Поле пароля).<br> Чтобы установить текстовую область в форме, перетащите пиктограмму Text Area (Текстовая область) — <div style="text-align:center;"><img src="image/formy_9.gif" alt="Формы"></div>— из панели Forms (Формы) Objects Palette (Палитра объектов) в пространство создаваемой формы на Web-странице, или дважды щелкните на пиктограмму в Objects Palette (Палитра объектов). Выделите пиктограмму в окне документа и установите ее свойства в палитре Inspector (Инспектор); Как обычно, поле Name (Имя) предназначено для указания уникального имени, чтобы идентифицировать текстовую область. В текстовом поле Row (Строка) указывается размер создаваемого текстового поля по вертикали в символах, т. е. это количество одновременно отображаемых строк текста. В текстовом поле Columns (Колонки) указывается количество символов, определяющее ширину видимой текстовой области.<br> Выберите подходящий элемент из выпадающего списка Wrap (Перенос), чтобы управлять переносами строк:<br> <ul> <li> Default (По умолчанию) использует установки текстового поля, назначение в браузере по умолчанию;</li> <li> Off (Выключено) приказывает браузеру игнорировать установленную ширину поля и не переносить строки;</li> <li> Virtual (Виртуальный) и Physical (Физический) приказывает браузеру учитывать ширину поля ввода. Введенный текст переносится, когда достигает правой границы поля и начинает прокручиваться вертикально.</li> </ul> Если хотите, введите в текстовом поле Content (Содержание) текст, отображающийся в поле по умолчанию, который пользователь сможет изменить.<br> Теперь о том, как можно установить выпадающий список. Пиктограмма Popup (Выпадающее меню) вставляет прокручивающееся поле списка с элементами, из которых пользователь может выбрать один или сразу несколько.<br> Чтобы установить поле списка или всплывающее меню, перетащите пиктограмму ListBox (Список) или пиктограмму Popup (Выпадающий список) из панели Forms (Формы) в Objects Palette (Палитра объектов) в окно документа или просто дважды щелкните мышью на соответствующую пиктограмму в Objects Palette (Палитра объектов). Затем выделите пиктограмму в окне документа и установите ее свойства в палитре Inspector (Инспектор).<br> В текстовом поле Name (Имя) введите уникальное имя, чтобы идентифицировать поле списка или выпадающее меню. В текстовом поле Rows (Строки) введите количество строк, которые будут одновременно; отображаться в списке. Для всплывающего меню эта будет количество рядов, которое видит пользователь, прокручивая меню. Взведите флажок а независимом переключателе Multiple Selection (Множественный выбор), чтобы сделать для пользователей возможным выбор одного или сразу нескольких, элементов.<br> Теперь необходимо создать элементы, входящие в обычный или выпадающий списки. Выберите элемент из списка Label/Value (Обозначение/Значение). Поставьте флажок напротив выбранного элемента, чтобы браузер отображал этот элемент как .выбранный по умолчанию. Естественно, разработчик также должен установить свойства и значения, для всех элементов списка в соответствующих текстовых полях (рис. 3.3).<br> <div style="text-align:center;"><img src="image/formy_10.gif" alt="Формы"></div><br> Рис. З.3. Установка выпадающего списка<br> Для добавления новых элементов в список можно использовать следующие кнопки:<br> <ul> <li> Duplicate (Дублировать), чтобы создать копию уже существующего элемента;</li> <li> New (Новый), чтобы вставить новый элемент. Введите обозначение и значение в соответствующих текстовых полях.</li> </ul> Набор специальных HTML-элементов позволяет вам вставлять кнопки в виде изображений, скрытые поля, включая криптографические ключи, и поля для выбора файлов из локальной системы пользователя.<br> <ul> <li> Пиктограмма Input Image (Вставка картинки) вставляет картинку, такую, как например, графическая кнопка подтверждения. Добавление графики может помочь пользователям ориентироваться на ваших страницах.</li> <li> Пиктограмма скрытого поля Hidden Icon (Скрытый значок) вставляет поле, которое не отображается браузерам, но его содержимое все равно отсылается На сервер. Этот тег используется, чтобы посылать дополнительную информацию при обменах информацией между браузером и сервером. </li> <li> Пиктограмма Key Generator (Генератор ключа) позволяет использовать шифровальный алгоритм для обеспечения безопасности транзакций с вашим Web-сайтом.</li> <li> Пиктограмма загрузки файла File Browser (Загрузка файла) вставляет диалоговое окно выбора файла. Это файл потом также может быть передам браузером на сервер. </li> </ul> Чтобы добавить изображение, которое будет играть роль кнопки, перетяните пиктограмму Input Image (Вставка картинки) — <div style="text-align:center;"><img src="image/formy_11.gif" alt="Формы"></div>— из панели Forms (Формы) Objects Palette (Палитра объектов) в окно документа или просто дважды щелкните мышью на этой пиктограмме в Objects Palette (Палитра объектов). На панели Mere (Дополнительно) в палитре Inspector (Инспектор) установите дополнительные свойства графической кнопки. Два элемента важны для вставляемых изображений:<br> <ul> <li> взведите флажок в переключателе Is Form (Форма), если вы планируете использовать изображение в качестве кнопки;</li> <li> убедитесь, что вы ввели имя в текстовом поле Name (Имя), чтобы идентифицировать изображение. Это особенно важно, если вы используете несколько графических кнопок подтверждения в пределах одной и той же формы.</li> </ul> Чтобы установить скрытое поле, генератор ключа или загрузчик файлов на разрабатываемую Web-страницу, перетащите пиктограмму Hidden (Скрытое поле), Key Generator (Генератор ключа) или File Browser (Загрузка файла) из панели Forms (Формы) в Objects Palette (Палитра объектов) на вашу страницу или просто дважды щелкните на пиктограмму в Objects Palette (Палитра объектов). После этого, для созданных элементов формы необходимо установить наименование в поле Name (Имя) и дополнительные свойства:<br> <ul> <li> для скрытого поля введите его содержимое в текстовом поле Value (Значение);</li> <li> для поля загрузки файла следует в текстовом поле Visible (Видимый) указать цифровое значение, чтобы определить ширину поля загрузки файла.</li> </ul> Разработчики Web-страниц; могут предоставлять возможность пользователям перемещаться между органами ввода данных, входящих в состав форм. В Adobe GoLive эта возможность реализуется при помощи органов управления, располагающихся в секции Focus (Фокус ввода) палитры Inspector (Инспектор).<br> В форме HTML каждый элемент должен получить фокус ввода, чтобы активизироваться и выполнить свою задачу. В более ранних версиях HTML это выполнялось при помощи щелчка мышью на выбранный элемент. HTML 4.0 представляет альтернативный путь навигации по форме, используя клавиатуру. Последовательный переход между элементами формы осуществляется по нажатию клавиши табуляции. Но для этого элементы формы должны входить в цепочки табуляции, о которой уже упоминалось в первой главе.<br> Adobe GoLive, естественно, позволяет вам определять цепочку табуляции для элементов формы. Цепочка табуляции указывает порядок, в котором выбираются элементы формы, когда пользователь нажимает кнопку табуляции.<br> Цепочка табуляции определяется путем установки значения табуляционного индекса для каждого элемента. Как было сказано в первой главе, табуляцион-ный индекс поддерживается при помощи атрибута tabindex, который может входить в состав любого тега, объявляющего элемент формы. Навигация осуществляется от элемента с наименьшим значением индекса к элементу с наибольшим его значением. Если вы назначаете одинаковое значение индекса табуляции двум элементам, последовательность в расположении HTML определяет порядок табулирования. Ярлыки, текстовые поля, поля паролей, области текста, кнопки подтверждения, кнопки очистки (Reset), независимые переключатели, группы переключателей, выпадающие меню и поля списков поддерживают навигацию при помощи клавиши табуляции.<br> Чтобы установить значение индекса табуляции для элементов форм автоматически, в режиме макета, в меню выполните команду Special | Start Tabulator Indexing (Особые возможности) Начать индексацию). Или выделите первый элемент и нажмите кнопку Start/Stop Indexing (Начать/закончить индексацию) — <div style="text-align:center;"><img src="image/formy_12.gif" alt="Формы"></div>— в палитре Inspector (Инспектор). Маленькие желтые поля индекса появляются сверху или внутри всех индексируемых элементов, и значок решетки присоединяется к курсору — <div style="text-align:center;"><img src="image/formy_13.gif" alt="Формы"></div>.<br> Щелкните мышью на каждый элемент последовательно в требуемом порядке табуляции. Номер появляется в каждом поле индекса и в текстовом поле Tab (Табуляция) палитры Inspector (Инспектор). Это порядковый номер элемента в цепочке табуляции.<br> Чтобы установить значение индекса табуляции для элемента формы вручную, выделите элемент формы по очереди в нужном порядке и введите его порядковый номер в цепочке в текстовом поле Tab (Табуляция) палитры Inspector (Инспектор).<br> В случае, если вы хотите изменить существующую цепочку табуляции, выделите элемент, с которого вы начнете перенумерацию. Затем стоит выполнить команду меню Special | Start Tabulator Indexing (Особые возможности | Начать индексацию) или нажать кнопку Start/Stop Indexing (Начать/ закончить индексацию) в Inspector Objects (Инспектор объектов). После этого придется щелчками мыши на каждом элементе установить новый порядок перехода по табуляции.<br> Стандарт HTML 4.0 позволяет создателям Web-страниц устанавливать некоторые элементы форм в состояние "только для чтения". В этом режиме, пользователь не сможет изменить данные, которые уже отображаются в полях ввода.<br> Чтобы установить этот статус, выберите элемент, который вы хотите сделать недоступным для изменения, и взведите флажок в независимом переключателе Readonly (Только для чтения) в палитре Inspector (Инспектор).<br> Также разработчик Web-страница может создавать органы ввода в неактивном состоянии, которые потом могут быть активированы выполняемым скриптовым сценарием. Эта возможность позволяет держать кнопку Подтвердить неактивной до тех пор, пока пользователь не введет какой-нибудь нужной информации. Надписи, ярлыки, текстовые поля, текстовые области, кнопки Подтвердить, кнопки Reset, независимые и зависимые переключатели могут быть созданы с применением неактивного статуса.<br> Чтобы создать какой-либо элемент с неактивным статусом, в окне документа следует выделить этот элемент, а затем в палитре Inspector (Инспектор) взвести флажок Disabled (Недоступен).<br> В формах, созданных для браузеров совместимых с HTML 4.0, пиктограмма Label (Метка) вставляет текст, связанный с каким-либо органом управления, расположенным на форме. Щелчок пользователя мышью на метку позволяет активировать объект, с которым эта метка связана.<br> Чтобы вставить метку в создаваемую форму, перетащите пиктограмму Label (Метка) — <div style="text-align:center;"><img src="image/formy_14.gif" alt="Формы"></div>— с панели Forms (Формы) на разрабатываемую страницу или дважды, щелкните мышью на соответствующую пиктограмму в Objects Palette (Палитра объектов). Затем следует выделить метку и указать ее наименование. Чтобы связать метку с каким-либо органом ввода данных, выделите метку, а затем произведите одно из следующих действий:<br> <ul> <li> либо нажмите кнопку Fetch URL (Пойти за URL) в Inspecter Objects (Инспектор объектов) и перетащите к элементу формы, который вы хотите пометить;</li> <li> либо щелкните мышью, одновременно удерживая клавишу <Alt> (в Windows) или <Command> (BI MacOS), по краю метки и перетащите образ метки в элемент формы, который вы хотите пометить.</li> </ul> Текстовое поле Reference (Ссылка) в палитре Inspector (Инспектор) отображает идентификатор, который создает соответствие между органом ввода данных и его меткой.<br> </td> </tr> </table> <br><br> <h1>НАЧИНАЕМ СТРОИТЬ WEB-САЙТ</h1> <br> </h2> <ul> <li> Формы</li> <li> Работа с таблицами</li> <li> Редактирование HTML-кода</li> <li> Настройки Web в Adobe GoLive</li> </ul> </td> </tr> </table> <br><br> <h1>Настройки Web в Adobe GoLive</h1> <br> </h2> Настройки Web это базовый строительный блок Adobe GoLive, который помогает поддерживать целостность и сохранность вашего HTML-кода. Они включают в себя полный набор тегов HTML, специальные знаковые коды и специфические настройки браузера. Настройки Web также помогают Web-разработчикам в выборе правильных тегов.и атрибутов для содержимого их страниц. Теги и атрибуты могут быть вставлены путем перетаскивания их из настроек Web в панель редактора источника.<br> Вы можете редактировать некоторые панели настроек Web, чтобы приспособить их для решения своих задач.<br> Внимание<br> Не редактируйте настройки Web без резервного копирования, если вы не являетесь специалистом в области HTML. Иначе результатом может явиться серьезное ухудшение качества ваших страниц. После установки прикладной системы, создайте резервную копию поля настроек Web. Когда вы редактируете базу данных настроек Web, время от времени делайте ее копию.<br> Вставка новых тегов, атрибутов, нумерации или других объектов в установки Web не повышает автоматически функциональность Adobe GoLive и не вставляет какие-либо новые значки в Objects Palette (Палитра объектов). Чтобы вставить новые теги, вы должны ввести их вручную в режиме Source (Исходный код) или выбрать их из выпадающих меию режима ОвШне Editor (Редактор эскиза). Элементы HTML, вставлеийме лойьзоватеяем, принимаются проверкой синтаксиса как прдайльные.<br> Если вы допустите ошибку во время редактирования настроек Web, то всегда сможете восстановить,основные настройки.<br> Чтофы просмотреть настройки Web, сначала надо их открыть. Для этого следует выполнить команду меню Edit | Web Settings (Правка | Настройки Web).<br> <ul> <li> Вкладка Global (Основные) — <div style="text-align:center;"><img src="image/icon35.gif" alt="Настройки Web в Adobe GoLive"></div>— содержит опции, которые контролируют внутреннее форматирование исходного кода.</li> <li> Вкладка Markup (Разметка) — <div style="text-align:center;"><img src="image/icon36.gif" alt="Настройки Web в Adobe GoLive"></div>— включает в себя полный набор тегов HTML, которые поддерживает Adobe GoLive.</li> <li> Вкладка Characters (Символы) — <div style="text-align:center;"><img src="image/icon37.gif" alt="Настройки Web в Adobe GoLive"></div>— включает все специальные знаки, определенные стандартам ISO 8859-1 и HTML 3.2. Это дает Adobe GoLive. возможность переводить .введенные пользователем специальные знаки в правильные коды знаков спецификации Web.</li> <li> Вкладка Browser Proffles (Профили браузера) — <div style="text-align:center;"><img src="image/icon38.gif" alt="Настройки Web в Adobe GoLive"></div>— предлагает специфические списки стилей для популярных браузеров на основных платформах. Вы можете выбирать любой список стилей в качестве корневого для предварительно просматриваемых страниц;</li> <li> Вкладка File Mappings (Подключение файлов) — <div style="text-align:center;"><img src="image/icon39.gif" alt="Настройки Web в Adobe GoLive"></div>— показывает, как отображаются типы файлов, такие как аудиозаписи или графические файлы, приложения, отображающие их, и так далее.</li> </ul> Пару слов следует сказать о формате MIME. Multipurpose Internet Mail Extensions (Многоцелевые почтовые расширения интернет) выполняют задачу упрощения отправки любых данных по почте пользователем, который не обладает специальными знаниями в вопросах кодирования и декодирования информации. Проще говоря, это автоматизация кодировочных процессов, происходящих в Интернет и дающих возможность передачи любых файлов от одного пользователя к другому. <br> Вкладка Global (Основные) настроек Web контролирует основные синтаксические правила HTML, включая такие возможности, как автоматический перенос текста, управление отстуцами и использование верхнего и нижнего регистров. Стилевые теги охватывают полные параграфы и блоки.<br> Вкладка Markup (Разметка)— сердце настроек Web. Она содержит полный перечень тегов HTML, которые Adobe GoLive может читать, отображать и писать. Они рассортированы на категории по функциям, таким, как контейнеры эталонов, формы и рамки.<br> Настройки Web содержат йодный комплект тегов HTML, известных Adobe GoLive на момент публикации, включая оба стандарта HTML (3.2 и 4.1) и специфические теги браузеров. Все правильные атрибуты, типы поддерживаемых значений и комментарии, идентифицирующие функцию каждого тега, предусмотрены. Стандартные теги HTML включают все, которые входят в стандартные публикации HTML 2.0 и 3.2 и плюс теги форм HTML 4.0 и выше. Нестандартные теги, использующиеся для реализации специфических особенностей браузера, также учтены — такие, как например, маркировочный тег Microsoft Internet Explorer. Вы можете добавлять новые теги в настройки Web,"Toгдa они становятся действующими.<br> Выпадающие списки тегов и атрибутов дают вам прямой доступ к базе данных во время определения элемента тега. Кроме того, вы можете открывать настройки Web в любое время и использовать их как сноску.<br> Если у вас есть какие-либо сомнения по поводу правильности использования тегов и атрибутов, откройте окно настроек Web и выберите тег. Информация о теге отображается в Inspector Web (Инспекторе Web). Если Inspector (Инспектор) не отображается, то выполните команду меню Window | Inspector (Окно | Инспектор). Чтобы использовать настройки Web, выполните команду меню Edit | Web Settings (Правка) Настройки Web). Перейдите на вкладку Markup (Разметка), выберите на левой панели Web | HTML и, прокручивая поле списка, раскрывайте категории и выбирайте нужный тег. Inspector (Инспектор) отобразит структурную информацию дня этого тега.<br> <ul> <li> Текстовое поле Comment (Комментарий) идентифицирует функцию тега внутри документа HTML. Выпадающий список Structure (Структура) отображает структурную информацию для тега. Например, Inline Invisible (Скрытый) отмечает, что тег заключает в себе видимое содержание, но не отображает его как видимый элемент в браузере.</li> <li> Выпадающий список Contest (Содержимое) показывает, как исходный режим упорядочивает содержимое тега, включая mline-теги, атрибуты и видимое содержание.</li> </ul> Для просмотра атрибутов того иди иного тега в окне настроек Web разверните тег щелчком мыши на символе радом с ним (если в теге нет атрибутов, то символ не появится). Выделите атрибут, чтобы просмотреть его опции в палитре Inspector (Инспектор) атрибутов настроек Web.<br> <ul> <li> Выпадающий список Attribute Is (Атрибут является) сообщает вам, является ли данный атрибут обязательным или опциональным (необязательным для употребления).</li> <li>"Выпадающий список Vatae Type (Тип значения) определяет формат атрибута (например, текстовый или URL).</li> <li> Выпадающее меню Value (Значение) позволяет вам задать значение атрибута, но для этого нужно еще предварительно взвести флажок в независимом переключателе Create This Attribute (Создать атрибут).</li> </ul> Настройки Web предлагают удобную среду для вставки, изменения или удаления тегов, атрибутов и их свойств. Контекстное меню, активизирующееся щелчком правой кнопкой мышки (в Windows) или <Control-щелчком (в Мас OS) на панели HTML окна настроек Web, позволяет вам легко вставлять новые теги или выделенные области в настройки Web. Контекстное меню для тегов и атрибутов позволяет вам редактировать или удалять эти элементы.<br> Внимание<br> Прежде чем вставлять новые элементы в настройки Web, проконсультируйтесь с документацией консорциума W3C на его сайте www.W3C.org, чтобы избежать использования неподдерживаемых тегов на вашей странице.<br> Удаляется любой элемент чрезвычайно просто. Выделите его и нажмите клавишу <Delete>. To же самое можно сделать, выбрав команду Delete (Удалить) в контекстном меню.<br> Если вы добавили новый тег, то необходимо дать ему имя на панели Basic (Основное) палитры Inspector (Инспектор), описать его функции и установить различные опции, зависящие от его структуры и содержания.<br> Чтобы редактироветь тег, сначала его необходимо создать, ввести его имя без угловых скобок в текстовом поле Name (Наименование) и нажать клавишу < Enter>. Далее введите описание в текстовом поле Comment (Комментарий) и нажмите клавишу < Enter>.<br> Затем в выпадающем списке Stractare (Структура) следует указать структурный уровень нового тега.<br> <ul> <li> Значение Block (Блок) создает элемент блочного уровня, который может содержать другие элементы, такие, как тег <body>.</li> <li> Значение Inline Visible (Видимый) создает элемент, который имеет видимое содержание HTML. Этот элемент может находиться только в пределах содержащего элемента, такого, как тег <img>.</li> <li> Значение Inline Invisible (Скрытый) создает элемент, который может существовать только в пределах содержащего элемента, но сам по себе невидим (хотя и влияет на визуальные качества содержания HTML), такой, как тег <bold>.</li> <li> Значение Inline Container (Контейнер) создает элемент-контейнер, который может существовать только в пределах другого содержащего элемента. Он может иметь как HTML содержание, так и видимое содержание HTML, как например, тег <applet>.</li> <li> Значение Inline Killer (Разрыв строки) зарезервировано для использования с тегом <Ьг>.</li> </ul> Тип содержимого тега и правила обработки этого содержимого указываются при помощи выпадающего списка Content (Содержание), чтобы определить, как. Adobe GoLive трактует содержание тега.<br> <ul> <li> Значение Normal (Стандартный) заставляет Adobe GoLive рассматривать содержание так, как оно было указано в списке Structure (Структура).</li> <li> Значение .Get All Spaces (Сохранять все пробелы) заставляет Adobe GoLive отображать текстовое содержимое тега без ликвидации двойных пробелов. Например, эта опция позволяет Adobe GoLive адекватно отображать пробелы в теге <рге>.</li> <li> Значение Соте Text (Чистый текст) указывает, что содержимое тега следует. отображать без добавления .или удаления каких бы то ни было элементов. Например, эта опция позволяет Adobe GoLive читать и писать информацию не входящую в обычный HTML, содержащуюся в теге </li> </ul> Некоторые теги нуждаются в применении закрывающих близнецов, некоторые, как например, <br>, нет. Поэтому Adobe GoLive предоставляет разра-бфийку возможность указать необходимость закрывающего тега. Для этого служит выпадающий список Bid Ifcg (Конечный тег). Элементы этого списка указывают, когда следует использовать закрывающий тег.<br> <ul> <li>Required (Обязательный) указывает, что тег нуждается в своем закрывающем близнеце, и Adobe ОоШе предполагает его наличие.</li> <li> Optional (do not write) (Необязательный, по умолчанию не писать) отмечает, что тег не обязательно нуждается в конечном теге и что Adobe GoLive не предполагает его применение.</li> <li> Optimal (write) (Необязательный, по умолчанию писать) отмечает, что тег не обязательно нуждается в конечном теге, но что вы хотите, чтобы Adobe GoLive вставил его.</li> </ul> Для любого тега в панели настроек Web вы можете указывать некоторые параметры отображения содержимого тега на вкладке Output (Вывод) в палитре Inspector (Инспектор).<br> Чтобы установить основное форматирование для содержимого текущего тега, выделите тег на панели HTML окна настроек Web. В палитре Inspector (Инспектор) на вкладке Output (Вывод) используйте один из выпадающих списков.<br> <ul> <li> Outside (Внешние) задает вертикальное расстояние между самими тегами и другими элементами над и под ними.</li> <li> Inside (Внутренние) задает вертикальное расстояние между начальным и конечным тегами и их содержимым.</li> </ul> Для любого тега внутри настроек Web вкладка Version (Версия) , палитра Inspector (Инспектор) позволяет указывать целевую версию,браузера или стандарта HTML и устанавливать обычные атрибуты. Настройки Web описывают поведение браузера, использующего определенные наборы тегов, атрибутов и перечней. Если вы создаете обычный тег, вы можете указать, должна ли проверка синтаксиса отмечать его как ошибочный или верный.<br> Внимание<br> Исходные свойства установок браузера и настройки на вкладке Version (Версия) палитры Inspector (Инспектор) не влияют на то, как Adobe GoLive пишет HTML-код; также они не влияют на то, как ваши страницы отображаются браузерами.<br> Если вы добавляете в тег новый атрибут, вы должны дать ему имя на панели Basic (Основное) палитры Inspector (Инспектор), описать его функции И установить требуемый статус и значения атрибута.<br> Чтобы отредактировать атрибут, создайте его и введите наименование в текстовое поле Attr Name (Имя Атрибута). Затем введите его описание в текстовое поле Comment (Комментарий) и нажмите клавишу <Enter>.<br> Выберите тип атрибута, из выпадающего списка Attribute Is (Атрибут является).<br> <ul> <li> Optional (He обязателен) показывает, что атрибут не обязателен для браузера, чтобы правильно интерпретировать тег.</li> <li> Required (Требуется) указывает, что атрибут должен быть обязательно использован браузером, чтобы правильно интерпретировать тег.</li> <li> Alternate (Возможен) показывает, что обе вышеуказанных функции приемлемы. Проверка синтаксиса Adobe GoLive не будет маркироватьдег как ошибочный, если атрибут пропущен.</li> </ul> При помощи выпадающего списка Value Type (Тип значения) разработчик может задать тип значения редактируемого атрибута.<br> <ul> <li> Text (Текст) допускает любой буквенно-цифровой ряд знаков в кодировке Weaern. Используйте эту функцию, если вы не уверены по поводу применения кодировки.</li> <li> Encoded Text (Кодированный текст)допускает любой буквенно-цифровой ряд знаков в любой кодировке.</li> <li> Number (Число) допускает только цифровое значение.</li> <li> Enumeration (Перечисление) указывает, что атрибут имеет перечислимый тип.</li> <li> Color (Цвет) допускает только цветовой код RGB.</li> <li> URL допускает только универсальный локатор ресурса (Universal Resource Locator).</li> <li> JavaScript допускает только JavaScript-код.</li> </ul> Взведите флажок в независимом переключателе Create this attribute (Создать этот атрибут) и введите значение нового атрибута в поле Value (Значение).<br> Как известно, HTML использует специфическую систему обозначения для специальных знаков, которые не входят в распространенные кодировки. Вкладка Characters (Символы) окна настроек Web включает такие специальные символы, которые описаны в ISO 8859-1 и поддерживаются стандартами HTML3.2 и выше. A4obe GoLive использует содержание вкладки Characters (Символы), чтобы управлять работой с подобными символами. Эти символы разделены на три категории.<br> <ul> <li> Basics (Основные) содержит часто используемые специальные знаки, такие, как зяаки кавычек, знак &, знаки "больше" (>) и "меньше" (<).</li> <li> Characters'(Символы) представляет списком полный набор знаков западных языков.</li> <li> General Punctuation (Общая пунктуация) включает варианты пробелов и тире.</li> </ul> Каждый знак имеет свое имя в HTML, визуальное изображение, коды Мае OS и ISO и текстовое описание. Если знак не может быть отображен в системном шрифте, в колонке Char (Символ) панели Characters (Символы) он не отображается.<br> При вставке новых символов руководствуйтесь изложенными ниже принципами.<br> <ul> <li> Новые символы должны быть утверждены консорциумом W3C. Только так можно гарантировать, что они будут поддерживаться браузерами.</li> <li> Mac OS не отображает некоторые символы которые отображаются на других платформах. Чтобы предварительно просмотреть символы вы, вероятно, будете должны запустить браузер.</li> <li> Символы, которые являются характерными для Mac OS, могут быть вставлены, но они не будут отображаться в браузерах других платформ.</li> </ul> Вкладка Browser Profiles (Профили браузеров) содержит установленные по умолчанию списки стилей для всех основных браузеров Windows и Mac OS. Они, в первую очередь, применяются для предварительного просмотра страниц. Они позволяют вам увидеть, как шрифты и другие элементы дизайна отображаются в Windows и Mac OS, но не влияют на то, как Adobe GoLive пишет HTML-код.<br> Внимание<br> Не путайте эти, установленные по умолчанию, списки стилей со списками стилей, которые вы создаете и на которые ссылаетесь, используя тег <style> в ваших HTML-файлах.<br> Вы можете также дублировать элемент и редактировать его, чтобы создать определяемый пользователем список.<br> Чтобы создать новый используемый по умолчанию список стилей, на панели CSS окна выберите список стилей, который наилучшим образом отвечает вашим требованиям.<br> Выберите новый список стилей и перейдите на вкладку Basic (Основное) палитры Inspector (Инспектор). Введите имя, системную информацию и комментарии для создаваемого списка стилей,<br> Список стилей Root (Корневой), который вы выбираете на панели CSS настроек Web, определяет значения, используемые по умолчанию в ваших страницах и сайтах. Но вы можете использовать палитру Inspector (Инспектор) и панель предварительного просмотра, чтобы контролировать внешний вид документов при использовании различных списков стилей.<br> Чтобы предварительно просмотреть ваши страницы с различными списками стилей, перейдите на вкладку Layout (Макет) вашего окна документа и в палитре Inspector (Инспектор) на вкладке View Controller выберите новый список стилей из списка Root CSS (Корневой CSS) и просмотрите эффекты вашего нового списка стилей. </td> </tr> </table> <br><br> <h1>Работа с таблицами</h1> <br> </h2> Таблицы в HTML-документах являются основным инструментом верстки. Они позволяют размещать в своих ячейках текст и почти любой объект, от картинки до другой таблицы или даже ролика QuickTime. Как и большинство других объектов Adobe GoLive, таблица может быть расположена прямо в окне документа или в сетке раскладки для наибольшего контроля над ее позицией на странице.<br> Чтобы вставить таблицу, выполните команду меню Window | Objects (Окно | Объекты). В Objects Palette (Палитра объектов), щелкните по ярлыку Basic (Основные) —<div style="text-align:center;"><img src="image/rabota-s-tablicami_1.gif" alt="Работа с таблицами"></div>.<br> Перетащите пиктограмму Table (Таблица) из Objects Palette (Палитра объектов) в окно документа или просто дважды щелкните мышью на эту пиктограмму. Теперь таблица уже появилась на разрабатываемой странице, осталось лишь задать ее свойства.<br> Чтобы изменить количество строк или колонок в таблице, вы можете произвести одно из следующих действий:<br> <ul> <li> введите нужное число строк в поле Row (Строки) или колонок в поле Columns (Колонки) палитры Inspector (Инспектор); </li> <li> удерживая <Shift>, щелкните мышью на ячейку, чтобы выделить ее, потом щелкните мышью на одну из следующих кнопок на панели Cell (Ячейка) палитры Inspector (Инспектор): <ul> <li> кнопкаAdd Row (Добавить строку)— <div style="text-align:center;"><img src="image/rabota-s-tablicami_2.gif" alt="Работа с таблицами"></div>вставляет пустую строку над выделенной ячейкой;</li> <li> кнопка Add Columns (Добавить колонку)— <div style="text-align:center;"><img src="image/rabota-s-tablicami_3.gif" alt="Работа с таблицами"></div>добавляет пустую колонку слева от выделенной ячейки;</li> <li> кнопка Delete Row (Удалить строку) —<div style="text-align:center;"><img src="image/rabota-s-tablicami_4.gif" alt="Работа с таблицами"></div> — удаляет строку, которая содержит выделенную ячейку;</li> <li> кнопка Delete Column (Удалить колонку) — <div style="text-align:center;"><img src="image/rabota-s-tablicami_5.gif" alt="Работа с таблицами"></div>— удаляет колонку., которая содержит выделенную ячейку.</li> </ul> </li> </ul> Чтобы изменить размер таблицы, воспользуйтесь одним из перечисленных ниже вариантов действий:<br> <ul> <li> Щелкните мышью вверху или на левой границе таблицы, чтобы выделить ее. В палитре Inspector (Инспектор) выберите единицы измерения из выпадающих списков для ширины и высоты, воспользовавшись полями Width (Ширина) и Height (Высота), соответственно, и введите необходимые размеры. Выберите команду Auto (Автоматически)» чтобы автоматически подкорректировать ширину и высоту к их оптимальному размеру.</li> <li> Щелкните мышью, удерживая одновременно клавишу <Alt> (в Windows) или <Control> (в Mac OS), по правому или нижнему краю таблицы. Затем можно будет изменить размеры таблицы просто перетаскивая мышью границы таблицы.</li> </ul> Для изменения размера строки или колонки в таблице, вы можете пойти одним из следующих путей.<br> <ul> <li> Щелкните мышью, удерживая одновременно кнопку <Alt> (в Windows) или <Control> (в Mac OS), по правому или нижнему краю ячейки в строке или колонке, размеры которой вы хотите изменить: Потом тяните в нужном направлении.</li> <li> Выделите ячейку в строке или колонке, размеры которой вы хотите изменить, двойным щелчком мышки, одновременно удерживая <Shift>.<br> На вкладке Cell (Ячейка) палитры Inspector (Инспектор) выберите единицы измерения из выпадающего списка для ширины (поле Width (Ширина)) и высоты (поле Height (Высота)) и введите необходимый размер.</li> </ul> Для большей наглядности описанные действия проиллюстрированы на рис. 3.4<br> <div style="text-align:center;"><img src="image/rabota-s-tablicami_6.gif" alt="Работа с таблицами"></div><br> Рис. 3.4. Установка свойств ячеек в таблице<br> После того как вы определились с размерами таблицы, самое время настроить параметры отображения. Щелкните мышью на верхнем или левом краю таблицы, тем самым выделив ее. Затем введите нужную ширину в поле ввода Border (Граница) в палитре Inspector (Инспектор). Если вы устанавливаете ширину границы 0, то границы затемнены в режиме макета и не видны в браузере. Чтобы скрыть затемненные границы, которые появляются в режиме Layout (Макет), выполните команду меню Edit Hide Invisible Items (Правка | Скрыть невидимые элементы).<br> Чтобы изменить вертикальные и горизонтальные отступы содержимого ячеек таблицы от их границ, введите величину отступа в поле Cell Pad (Отступ ячейки).<br> Поле Сеll Space (Расстояние между ячейками) служит для определения расстояниея между ячейками таблицы.<br> На рис. 3.5 показаны различные примеры границ таблицы, пространства внутри ячеек и расстояние между ячейками. <br> <div style="text-align:center;"><img src="image/rabota-s-tablicami_7.gif" alt="Работа с таблицами"></div><br> Рис. 3.5. Установка размеров границ и отступов в таблице:<br> А — граница шириной в 10 пикселов;<br> В — отступ внутри ячеек в 2 пиксела;<br> С — расстояние между ячейками в 5 пикселов<br> Чтобы задать фоновый цвет для вcей таблицы, взведите флажок в независимом переключателе Color (Цвет), затем щелкните мышью внутри цветового поля, чтобы его выделить. При этом будет активирована палитра Colors (Цвета). Обратите внимание на то, что когда вы применяете фоновый цвет к таблице и просматриваете таблицу в режиме предварительного просмотра Adobe GoLive или в Netscape Navigator, то цвет появляется только в тех ячейках таблицы, которые содержат какие-либо данные. Для решения этой проблем» необходимо в каждую пустую ячейку таблицы вставить неразрывный пробел. Воспользуйтесь следующим приемом — щелкните мышью внутри ячейки и нажмите <Shift>+<Пробел> (в Windows) или <Орtions>+<Пробел> (в Mac OS).<br> Заголовок — важный элемент таблицы. Взведите флажок в независимом переключателе Caption (Заголовок) и в соответствующем поле ввода выберите место расположения заголовка относительно самой таблицы.<br> Применив графическое изображение в качестве фона таблицы, вы можете заметно улучшить ее внешний вид. Взведите флажок в независимом переключателе Bglmage (Фоновое изображение), потом выберите файл изображения, используя кнопку Fetch URL (Пойти за URL) или кнопку Browse (Просмотр). <br> Чтобы выровнять по горизонтали текст во всех ячейках строки, выделите сначала строку, а затем выберите необходимый пункт из выпадающего списка Horizontal Alignment (Горизонтальное выравнивание), расположенного: на вкладке Row (Строка). Выберите пункт Default (По умолчанию), чтобы выровнять по горизонтали текст в соответствии с настройками браузера. В Adobe GoLive выбор этой опции приводит к выравниванию текста по левой границе ячейки. Выравнивание содержимого ячеек и строк по вертикали осуществляется при помощи выпадающего списка Vertical Alignment (Вертикальное выравнивание). '<br> Для установки высоты строк» выберите единицу измерения высоты из выпадающего списка Height (Высота). Потом в поле ввода укажите предполагаемую высоту строки в пикселах или процентах. Выберите строку Avto (Автоматически) списка Height (Высота), чтобы браузер сам рассчитывал высоту строки таблицы в зависимостщот содержимого ее ячеек.<br> Чтобы установить фоновый цвет для всей строки, взведите флажок в независимом переключателе Colors (Цвета),затем щелкните мышью внутри цветового поля, чтобы его выделить можно будет выбрать необходимый фоновый цвет из палитры Colors (Цвета) .<br> Перейдем к свойствам отдельной ячейки: щелкните дважды мышью, удерживая <Shift> на ячейке, тем самым выделив ее.<br> Совет <br> Чтобы изменить параметры нескольких ячеек одновременно, выделите нужные ячейки, а затем перейдите на вкладку Ceil (Ячейка) Inspector Objects (Инспектор объектов). Чтобы выделить дополнительные ячейки, вы можете, удерживая <Shift>, щелкнуть мышью внутри каждой дополнительной ячейки.<br> Чтобы ячейки могли объединять в себе несколько соседних строк по вертикали, следует ввести нужное .число строк в поле Row Span (Объединение строк), как это показано на рис. 3.6.<br> Аналогично полю Row Span (Объединение строк) поле Column Span (Объединение колонок) служит для объединения в одной ячейке нескольких соседних колонок.<br> Чтобы явно задать высоту и ширину ячейки, выберите необходимую единицу измерения из выпадающего списка Height (Высота) и Width (Ширина), соответственно, и введите размеры в связанные с этими списками поля ввода. Выберите строку Avto (Автоматически), чтобы браузер пользователя сам устанавливал высоту и ширину.<br> Внимание<br> Когда вы корректируете высоту Или ширину ячейки, Adobe GoLive автоматически корректирует высоту и ширину строки и колонки, которые содержат ячейку.<br> <div style="text-align:center;"><img src="image/rabota-s-tablicami_8.gif" alt="Работа с таблицами"></div><br> Рис. 3.6. Ячейка, объединяющая три строки<br> Обычно ячейки верхней строки содержат заголовки столбцов, поэтому было бы неплохо использовать для них отдельное форматирование. Чтобы отформатировать ячейку как подзаголовок взведите флажок в независимом переключателе Header Style (Стиль заголовка).<br> По умолчанию, в случае когда текст в ячейке не умещается в одну строку, он разбивается на несколько строк. Но иногда возникает необходимость размещать текст в ячейке в его первозданном виде. Если такая необходимость возникла, следует взвести флажок в независимом переключателе No Text Wrap (He переносить текст).<br> Мы уже умеем устанавливать фоновое изображение для всей таблицы, но HTML позволяет задавать фон отдельно для каждой ячейки. Чтобы использовать фоновое изображение в ячейке, взведите флажок в независимом переключателе Bglmage (Фоновое изображение) вкладки Сеll (Ячейка). Выбор графического файла производится точно так же, как и в случае с установкой фонового изображения для всей таблицы.<br> Adobe GoLive позволяет вставлять текст в таблицы разными способами. Вы можете вставить текст путем прямого ввода в ячейку таблицы, копированием текста из другого документа, перемещением текста между ячейками путем перетаскивания и импортированием текста из текстовых файлов в таблицу.<br> <ul> <li> Чтобы ввести текст внутрь ячейки, щелкните мышью внутри ячейки, устанавливая курсор, и введите содержимое ячейки.</li> <li> Чтобы скопировать текст из другого документа и вставить в ячейку, выделите текст в документе я скопируйте его. Установите курсор внутри ячейки, а затем выполните команду меню Edit | Paste (Правка | Вставить).</li> <li> Чтобы переместить текст между ячейками, удерживая правую кнопку мыши, выделите текст. Потом, удерживая кнопку мыши, перетащите его туда, куда необходимо.</li> <li> Чтобы импортировать данные их текстовых файлов в таблицу, создайте текстовый файл, содержащий данные, которые вы хотите поместить в таблицу Adobe GoUve. Вставьте таблицу в окно документа Adobe GoLive. Вам не нужно добавлять строки или колонки в таблицу, чтобы разместить перемещаемые данные. Когда Adobe GoLive перемещает данные в таблицу, он сам вставляет дополнительные строки и колонки в таблицу, как необходимо для расположения данных. Нажмите кнопку Browse (Просмотр) рядом с командой Import Tab-Text (Перемещение таблица-текст). Выберите текстовый файл, данные из которого будут пересылаться в таблицу, из выпадающего списка Column Separator (Разделитель колонок) выберите символ, который будет использоваться в качестве разделителя, и нажмите кнопку Open (Открыть).</li> </ul> Внимание<br> Перед импортом данных в таблицу, вы должны отформатировать текст в файле в таком виде, который будет принят Adobe GoLive. Для таблиц, состоящих из одной ячейки, текст можно просто отформатировать так, как вы хотите, чтобы текст отображался в таблице. Для таблиц с большим количеством ячеек вы должны так отформатировать данные, чтобы каждая строка представляла собой содержимое одной строки, а содержимое ячеек отделялось друг от друга символами-разделителями (табуляции, запятые, пробелы или точки с запятой).<br> Вы можете вложить таблицу путем помещения ее внутрь ячейки другой таблицы. Потом вы можете поместить еще одну таблицу в ячейку только что вложенной и так далее.<br> Чтобы создать выделенную область внутри вложенной таблицы, щелкните мышью внутри ячейки в пределах самой внутренней таблицы. Нажмите <Ctrl>+<Enter>, чтобы выделить ячейку. Повторите этот шаг, чтобы выделить всю самую внутреннюю таблицу. Продолжая нажимать ту же пару кнопок одновременно, вы добьетесь последовательного выделения ячеек, а затем целых таблиц содержащих в себе уже выделенные вами до этого ячейки и таблицы.<br> Пока ваше выделение в таблице состоит из одной ячейки или блока смежных ячеек, Adobe GoLive позволяет вырезать, копировать и вставлять их с помощью команд меню Edit (Правка). Вырезание помогает вам удалить одну или более ячеек из таблицы. Копирование и вставка выделенных вами фрагментов позволяет вам .перемещать содержимое подобных блоков ячеек в таблице, помещать выбранный вами фрагмент внутрь ячейки как вложенную таблицу и помещать выбранный, фрагмент как новую таблицу внутрь текстового поля.<br> Если вы копируете и вставляете дай того, чтобы переместить содержания сходных блоков, ваш выбор цеди при выделении должен соответствовать исходному выделению. Например, если вы копируете четыре ячейки в строке в качестве исходного фрагмента выделения, то вы можете переместить их только в такие же четыре ячейки. <br> <ul> <li> Чтобы вырезать выделенную в таблице область, выделите отдельную ячейку или блок соседних ячеек и выполните команду меню Edit | Cut (Правка) Вырезать). Чтобы скопировать и вставить выделенную область таблицы, выделите отдельную ячейку или блок соседних ячеек, выполните команду меню Edit | Сору (Правка | Копировать) и выберите один из описанных ниже способов действия.</li> <li> Чтобы переместить содержимое блока ячеек в таблице, выделите этот блок и выполните команду меню Edit | Paste (Правка (Вставить).</li> <li> Чтобы поместить выделенную область в ячейку в качестве вложенной таблицы, щелкните мышью внутри ячейки, в которую вы хотите поместить выделенный фрагмент, и выполните команду меню Edit |Paste (Правка | Вставить).</li> </ul> Внимание<br> Вы можете вставлять выбранный фрагмент в качестве вложенной таблицы, только если он содержит более одной ячейки. Иначе, если вы выделили только одну ячейку, Adobe GoLive просто перенесет содержимое этой ячейки в ту ячейку, по которой вы щелкнете мышью.<br> Используя вкладку Select (Выделить) в палитре Table (Таблица), можно отсортировать содержимое таблицы. Сортировка применима как ко всей таблице, так и к отдельным строкам или к отдельным колонкам. Например, если вы сортируете порядок строк в таблице, и верхняя строка содержит заголовки колонок, вы можете применить сортировку всех строк в таблице кроме верхней строки.<br> Adobe GoLive сортирует данные прежде всего в числовом порядке и только потом уже — в алфавитном. По умолчанию происходит сортировка по возрастанию. Но если вы хотите, то можно задать, чтобы сортировка была сделана в порядке убывания.<br> Чтобы сортировать содержимое таблицы, щелкните мышью по верхней или левой границам таблицы, тем самым выделяя ее. Выполните команду меню Window | Table (Окно | Таблица) и в палитре Table (Таблица) выберите вкладку Select (Выбор).<br> Пометьте область таблицы, которую хотите сортировать, создайте выделенную область в таблице в пределах окна документа или панели Select В палитре Table (Таблица) выберите из выпадающего списка Sort (Сортировка) предполагаемый порядок сортировки. Выберите Rows (Строки), если вы хотите, чтобы содержимое одной или более колонок было отсортировано. Выберите Cols (Колонки), если вы хотите, чтобы сортировалось содержимое строк. <br> По умолчанию, первая колонка имя строка, которую вы выбираете, сортируется в восходящем порядке, как отмечено кнопкой возрастающего порядка — <div style="text-align:center;"><img src="image/icon17.gif" alt="Работа с таблицами"></div>— рядом с самым левым выпадающим списком. Чтобы указать для первой колонки или строки необходимость сортировки в нисходящем порядке, нажмите кнопку восходящего порядка, чтобы она превратилась в кнопку нисходящего порядка — <div style="text-align:center;"><img src="image/icon18.gif" alt="Работа с таблицами"></div>.<br> После проведения всех этих довольно однообразных, но, несомненно, необходимых операций по сортировке, нажмите кнопку Sort (Сортировать), чтобы отсортировать таблицу, исполцуя те критерии, которые вы указали.<br> Adobe GoLive также включает в себя набор предопределенных стилей таблиц, которые вы можете применять дл| быстрого форматирования своей таблицы. Вы можете предварительно просмотреть варианты стилей на вкладке Styles (Стили) палитры Table (Таблица). Если палитра Table (Таблица) не отображена в текущий момент на экране, следует выполнить команду меню Window | ТаЫе (Окно | Таблица).<br> Чтобы применить предопределенные стили к таблице выделите всю таблицу, как обьгано щелкнув мышью на ее верхнюю или левую границу, а затем перейдите на, вкладку Style (Стиль) в палитре Table (Таблица) — рис. 3.7.<br> Выберите предопределенный стиль из выпадающего списка в верхнем левом углу панели Style (Стиль). Предварительный просмотр выбранного стиля отображается на рабочей панели. Синие скобки показывают, какие строки и колонки содержат стили, которые будут повторены по всей таблице. Например, если синие скобки отмечают вторую и третью строки, стиль первой строки Применим только к первой строке, в то время как стили второй и третьей строк повторяются для всех других строк в таблице.<br> Чтобы отменить выделенный фрагмент стилей таблицы, щелкните мышью на треугольник в верхнем правом углу меню палитры Table (Таблица) и выберите команду Undo Select TabteStyle (Отменить выделенный стиль таблицы).<br> Внимание<br> В зависимости от конкретного стиля вы можете быть не в состоянии изменить строки или колонки содержащие стили, повторенные по всей таблице. Например, если стиль всех, колонок одинаков и синие скобки отмечают вторую колонку, то вы не сможете изменить размер скобок, чтобы модифицировать стиль.<br> После того, как необходимый стиль выбран, нажмите кнопку Apply (Применить), чтобы применить стиль к своей таблице.<br> <div style="text-align:center;"><img src="image/rabota-s-tablicami_9.gif" alt="Работа с таблицами"></div><br> Рис. 3.7. Установка стиля таблицы<br> Чтобы удалить существующий стиль из таблицы, выделите всю таблицу целиком и на вкладке Style (Стиль) нажмите кнопку Remove (Удалить). Впрочем, имеется возможность к коллекции предустановленных стилей добавить и свои варианты стилевого оформления. Для этого нажмите кнопку New (Новый), чтобы создать новый стиль таблицы. В текстовом поле над кнопкой New (Новый) введите имя для нового стиля таблицы. Нажмите кнопку Capture (Зафиксировать), чтобы захватить стиль выделенной таблицы в окне документа и сохранить его как новый стиль таблицы. Теперь этот стиль добавится к списку предопределенных стилей, и вы сможете применять его к другим таблицам.<br> Конечно, стили можно не только добавлять, но и удалять. Для этого необходимый стиль надо просто выбрать из выпадающего списка-в левом верхнем углу вкладки Style (Стиль), а затем нажать кнопку Delete (Удалить).<br> </td> </tr> </table> <br><br> <h1>Редактирование HTML-кода</h1> <br> </h2> В режиме Source (Исходный код) вы можете просматривать HTML-код своего документа, проверять синтаксис HTML, исправлять ваш код или даже строить Web-страницы с самого начала, используя только HTML. Если вы уже закаленный программист HTML с хорошими профессиональными, навыками в области этого языка и использовали ориентированные на текст редакторы HTML, режим Source (Исходный код) будет для вас очень полезен. Работа в режиме исходного кода подобна работе в текстовом редакторе HTML. Вы можете создавать новый документ и открывать уже существующие в Adobe GoLive, HTML или текстовые документы. Вы можете печатать или вставлять текст из других документов, а также производить и сохранять изменения.<br> Во время работы в режиме Source (Исходный код), вы можете отбуксировывать пиктограммы HTML-элементов из Objects Palette (Палитра объектов) в текст вашего HTML-кода и использовать их как редактируемые теговые шаблоны. После того как вы вставали элемент, вы можете редактировать его атрибуты и значения атрибутов, в то время как в окне будут отображаться вводимые данные и основные ошибки.<br> Возможно также перетащить даже цвет из области окна предварительного просмотра палитры цветов и опустить его на выбранном теге в вашем HTML-коде. При этом искомый тег получит параметр цветового оформления с правильным указанием цвета.<br> Точно также можно перетягивать страницы или URL из окна сайта, чтобы создать ссылку.<br> В режиме Source (Исходный код) можно и нужно применять базовые команды для форматирования текста из меню Туре (Тип) к выделенному тексту на вашей странице. Чтобы отформатировать текст, в режиме Source (Исходный код) — <div style="text-align:center;"><img src="image/icon19.gif" alt="Редактирование HTML-кода"></div>— реализуйте одно из перечисленных действий:<br> <ul> <li> либо выделите абзац и потом выберите команду из одного из подменю Туре (Тип); </li> <li> либо дважды щелкните мышью на тексте, чтобы высветить одно слово, или же удерживая нажатой левую кнопку мышки, потащите ее, чтобы выделить большую область текста. Выберите нужную форматирующую команду из меню Туре (Тип).</li> </ul> Есть несколько кнопок, которые отвечают за выделение синтаксиса и перенос текста. Возможно, вы уже видели их, путешествуя по рабочему окну. Давайте познакомимся с ними поближе.<br> <ul> <li> КнопкаColorize Nothing (Выключение выделения синтаксиса) —<div style="text-align:center;"><img src="image/icon20.gif" alt="Редактирование HTML-кода"></div> — деактивирует выделение синтаксиса, показывая исходный код HTML в заданном по умолчанию цвете текста.</li> <li> Кнопка Colorize Detailed (Детальное выделение синтаксиса) — <div style="text-align:center;"><img src="image/icon21.gif" alt="Редактирование HTML-кода"></div>— активирует выделение синтаксиса. ,</li> <li> Кнопка Colorize Media and Links (Выделение средств информации и ссылок) — <div style="text-align:center;"><img src="image/icon22.gif" alt="Редактирование HTML-кода"></div>— высвечивает только графические «изображения и ссылки на них.</li> <li> Кнопка Colorize URLs (Подсвечивание URL) — <div style="text-align:center;"><img src="image/icon23.gif" alt="Редактирование HTML-кода"></div>— высвечивает сноски на другое страницы и ресурсы в Web.</li> <li> Кнопка Colorize Server Side Code (Подсвечивание кода, выполняющегося на сервере) высвечивает на Web-странице текст кода, который выполняется на стороне сервера, например ASP-код.</li> <li> Кнопка Line Numbers (Отображать номера строк) — <div style="text-align:center;"><img src="image/icon24.gif" alt="Редактирование HTML-кода"></div>— показывает номера строк кода.</li> </ul> В режиме исходного кода вы можете убедиться, что ваши Web-страницы содержат верный HTML-код. Встроенная проверка синтаксиса делает грамматический разбор вашего HTML-кода сообразно стандарту HTML и высвечивает предполагаемые ошибочные элементы.<br> Если вы выбираете специфический HTML-код и начинаете проверку синтаксиса, вы можете отметить, какие теги и атрибуты не поддерживаются установками браузера или специфичны для Adobe GoLive. Когда вы выбираете установку браузера из меню согласования браузеров, лист несогласованности появляется в поле ошибок, выделяя потенциальные проблемы.<br> Нажатием кнопки Start Check Syntax (Проверка синтаксиса) — <div style="text-align:center;"><img src="image/icon25.gif" alt="Редактирование HTML-кода"></div>— на панели инструментов исходного режима вы проверяете синтаксис на всей странице. В том случае, если ошибки в HTML-коде будут обнаружены, Adobe GoLive выделит их цветом.<br> После правки кода еще раз нажмите на кнопку Check Syntax (Проверить синтаксис), чтобы удостовериться, что ни одной ошибки на вашей странице не осталось.<br> Adobe GoLive позволяет вам обрабатывать HTML-код, который вы ввели сами, переформатируя его автоматически с абзацами и переносами строк, изменением положения тегов и атрибутов, и расставляя кавычки для значений атрибутов в соответствии с установками Web (о том, какую роль в Adobe GoLive играют "установки Web" будет рассказано немного позже).<br> Чтобы обработать HTML-код, переключитесь в режим Layout (Макет) и выполните команду меню Edit | Rewrite Source Code (Редактирование | Перепиcать исходный код). .<br> Режим Source (Исходный код) обладает рядом свойств, которые влияют на проведение проверки HTML-кода, методы работы с ним и его внешний вид в окне редактора.<br> Доступ к основным свойствам режима Source (Исходный код) можно получить из меню Edit| Preferences (Правка) Свойства), открыв вкладку Source (Исходный код).<br> Установки, доступные на данной вкладке, включают и выключают поддержку drag and drop (режима перетаскивания объектов мышью) и контролируют, каким образом HTML-код появляется в Окне исходного кода. Панель предварительного просмотра в диалоговом окне показывает вам, как будет выглядеть текст с установками, которые, вы выбрали. ;<br> Помимо вкладки основных свойств существуют еще ряд вкладок, предоставляющих доступ к свойствам режима редактирования исходного кода.<br> <ul> <li> Browser Sets (Установки браузера) позволяют вам комбинировать браузеры и пересмотры спецификаций HTML в комплексных установках правил синтаксиса HTML. Установки, которые вы объединяете здесь, появляются в окне совместимости браузеров в режиме Source. Основанные на описаниях тегов в установках Web Adobe GoLive, эти свойства инструктируют встроенную проверку синтаксиса, указывают, какие правила ей использовать при проверке синтаксиса вашего исходного кода.</li> <li> Colors (Цвета) позволяют вам включать и выключать подсвечивание синтаксиса и контролировать, как отдельные тега HTML и вложенный в них текст отображены в режиме редактирования исходного кода, когда пользователь активирует подсветку синтаксиса.</li> </ul> Чтобы установить правила подсветки синтаксиса, выполните команду меню Edit| Preferences (Правка | Свойства) и щелкните мышью по пиктограмме Source (Исходный код). Затем следует выбрать пункт Colors (Цвета). Если, например, вы не хотите использовать подсветку синтаксиса, активируйте пункт None (He подсвечивать) в группе переключателей Code Coloring (Подсветка кода). Если же вы хотите, чтобы синтаксис все-таки выделялся редактором, используйте любой другой переключатель из этой группы, в зависимости от того, какую именно часть кода необходимо выделять цветом.<br> Adobe GoLive позволяет вам работать как в режиме макета, так и в режиме редактирования исходного кода одновременно. Чтобы осуществить это, находясь в режиме макета, откройте окно исходного кода, выполнив команду меню Window | Source Code (Окно | Исходный код). Изменения, которые вы делаете в окне документа в режиме макета, немедленно отображаются в окне исходного кода и наоборот.<br> Выпадающее меню окна. исходного кода предоставляет самые различные возможности.<br> <ul> <li> Local Mode (Локальный режим) отображает код только для текущего выделенного элемента на вкладке Layout (Макет) окна документа. Обычно окно исходного кода отображает код всего документа сразу. Локальный режим позволяет вам ограничить объем отображенного кода для более легкой правки.</li> <li> Word Wrap (Перенос слов) осуществляет перенос слов на границе окна исходного кода. Если вы измените размер окна, когда эта опция активирована, то содержимое строк будет переноситься в соответствии с новыми размерами палитры.</li> <li> Display Line Numbers (Отображать, номера строк) доказывает номера строк кода.</li> <li> Dim When Inactive (Затенить, когда неактивно) делает содержимое окна нежадного кода затемненным, когда вы работаете на вкладке Layout (Макет) в окне документа. Затемнение выключается, когда вы возвращаетесь в окно исходного кода для дальнейшего редактирования.</li> </ul> Внимание<br> Окно исходного кода отображает лежаиций в основе вашего документа HTML-код только тогда, когда режим макета окна документа активен.<br> Для редактирования HTML-кода, помимо выше изложенных способов, вы можете воспользоваться вкладкой Outline Editor (Редактор эскиза). Он отображает элементы HTML-кода в иерархическом структурированном виде. Используя этот режим, вы можете генерировать чистый, правильный HTML не набирая ни единого элемента кода. Вы выбираете теги и атрибуты из меню или панели инструментов, перетягиваете объекты из палитры и используете кнопку Fetch URL (Пойти за URL), чтобы соединять страницы и графику. Вы можете построить Web-страницы с самого начала, улучшить ваш код и даже установить новые теги и атрибуты.<br> На рис. 3.8 изображены элементы окна в режиме Outline Editor (Редактор эскиза).<br> Режим Outline Editor (Редактор эскиза) имеет свою панель инструментов. Используйте ее для вставки и редактирования HTML-элементов.<br> <ul> <li> Кнопка New Tag (Новый тег) —<div style="text-align:center;"><img src="image/icon26.gif" alt="Редактирование HTML-кода"></div>— вставляет новый HTML тег под текущим выбранным тегом.</li> <li> Кнопка New Attribute (Новый атрибут) — <div style="text-align:center;"><img src="image/icon27.gif" alt="Редактирование HTML-кода"></div>— добавляет новый HTML атрибут в текущий выбранный тег. </li> <li> Кнопка New Text (Новый текст) — <div style="text-align:center;"><img src="image/icon28.gif" alt="Редактирование HTML-кода"></div>— вставляет новый блок текста HTML под выбранным тегом.</li> <li> Кнопка New Generic Item (Новый объект) —<div style="text-align:center;"><img src="image/icon29.gif" alt="Редактирование HTML-кода"></div> — вставляет пустой тег, так что вы можете ввести не HTML-код в ваш документ. Чаще всего эта возможность применяется для вставки тегов XML.</li> <li> Кнопка New Comment (Новый комментарий) — <div style="text-align:center;"><img src="image/icon30.gif" alt="Редактирование HTML-кода"></div>— вставляет новый комментарий HTML под выбранным тегом.</li> <li> Кнопка Toggle Binary (Переключить на парный формат) —<div style="text-align:center;"><img src="image/icon31.gif" alt="Редактирование HTML-кода"></div> — переключает формат тега с одиночного на парный и наоборот. Напомню, что парный тег содержит начальный и конечный теги, а непарный только начальный.</li> </ul> <div style="text-align:center;"><img src="image/redaktirovanie-html-koda_1.gif" alt="Редактирование HTML-кода"></div><br> Рис. 3.8. Режим Outline Editor<br> Вы можете перетаскивать наиболее часто используемые элементы HTML из Objects Palette (Палитра объектов) и помещать их где-нибудь в окне Outline Editor (Редактор, эскиза), как вы бы сделали в режиме макета. После вставки элемента вы можете редактировать его атрибуты.<br> Совет<br> Эскиз, доступный в режиме Outline Editor (Редактор эскиза), содержит все составляющие элементы страницы HTML. Вы можете использовать эту структуру как шаблон и наполнять его своим содержанием.<br> В режиме Outline Editor (Редактор эскиза) отступы отмечают позицию объекта в пределах иерархии HTML. Элементы <head> <link rel="canonical" href="https://www.e-lave.ru//glava-1.htm"/> и <body> тоже сдвинуты, чтобы показать, что они содержатся в элементе HTML. Элемент <head> <link rel="canonical" href="https://www.e-lave.ru//glava-1.htm"/> в свою очередь содержит элемент <titie> с текстовым полем.<br> Начальные и конечные тегИ соединены вертикальными линиями, чтобы показать, что они являются дополняющими друг друга объектами.<br> Outline Editor (Редактор эскиза) предлагает обширные возможности по редактированию кода и навигации в его пределах.<br> <ul> <li> Для перемещения, используйте клавиши со стрелками. Клавиша <<div style="text-align:center;"><img src="%E2%E2%E5%F0%F5.gif" alt="Редактирование HTML-кода"></div>отмечает объект над вьщеленной областью, а клавиша <<div style="text-align:center;"><img src="%E2%ED%E8%E7.gif" alt="Редактирование HTML-кода"></div>>, соответственно, нижний объект. Если курсор находится в текстовом поле, то стрелки двигают указатель в переделах поля.</li> <li> Чтобы передвигаться по листу атрибутов тегов, также используются клавиши со стрелками. Клавиша <<div style="text-align:center;"><img src="%E2%E2%E5%F0%F5.gif" alt="Редактирование HTML-кода"></div>> выбирает объект над выделенным вами объектом, а клавиша <<div style="text-align:center;"><img src="%E2%ED%E8%E7.gif" alt="Редактирование HTML-кода"></div>>, соответственно, — нижний.</li> <li> Чтобы развернуть или свернуть выбранный тег, нажмите клавишу <Enter> (в Windows) или <ReturaX (в Mac OS). Это возможно лишь, тогда, когда речь идет о парных тегах.</li> <li> Чтобы показать всплывающее меню атрибута тега, щелкните мышью на треугольник справа от имени элемента.</li> <li> Чтобы активировать следующее по порядку текстовое поле, нажмите кнопку табуляции. Чтобы аетивдзировать предыдущее текстовое поле, нажмите комбинацию клавиш <SWft>+<Tab>.</li> <li> Чтобы удалить выбранный элемент, используйте клавишу <Backspace>.</li> <li> Чтобы активировать выскакивающее меню выбора тега, нажмите клавишу <Control> (в Windows) или <Command> (в Mac OS),</li> <li> Чтобы вставить тег и определить его тип и атрибуты, используя панель инструментов Outline Еditor (Редактор эскиза), выберите в окне документа нужный элемент HTML, нажмите на кнопку New Tag (Новый тег) на панели инструментов и вставьте тег "без названия" под выбранным объектом. Дайте тегу имя, одним Из перечисленных ниже способов. <ul> <li> Либо введите выбранное имя тега в текстовое поле тега без имени и нажмите клавишу <Enter>. Чтобы вводить теги напрямую, вы должны хорошо знать возможности выбранного браузера. Теги, не поддерживающиеся этим браузером, будут им проигнорированы при отображении документа.</li> <li> Либо, чтобы использовать тег из установок Web, снимите выделение с тега, затем нажмите клавишу <Ctrl> (в Windows) или <Coinmand> (в Mac OS) и выберите тег из списка в выскакивающем меню.</li> </ul> </li> <li> Чтобы определить атрибут какого-либо тега, щелкните мышью на треугольник, который отображает и прячет атрибуты, и выберите необходимый атрибут из контекстного меню.</li> <li> Но чаще всего необходимо не только добавить некий атрибут, но и указать его значение. Для этого щелкните мышью на треугольник справа от атрибута и выберите значение из контекстного меню.</li> </ul> Внимание<br> Adobe GoLive не проверяет ошибки в синтаксисе Palette, которые вы можете ввести во время работы в режиме Outline Editor (Редактор эскиза). Для поиска ошибок вам необходимо переключиться в режим редактирования исходного кода.<br> Вы можете использовать панель инструментов режима Outline Editor (Редактор эскиза) для вставки текстовых полей, для ввода содержимого или комментариев на вашей Web-странице. Текст, введенный в поле комментариев HTML, не появляется на вашей Web-странице во время просмотра в окне браузера.<br> Чтобы вставить текстовое поле или поле комментария, в режиме Outline Editor (Редактор эскизов) выдадите элемент HTML и потом произведите одно из следующий действий:<br> <ul> <li> Чтобы вставить текст в вашу страницу, нажмите на кнопку New Text (Новый текст) на панели инструментов режима Outline Editor (Редактор эскиза). </li> <li>Чтобы вставить комментарии на вашей странице, нажмите кнопку New Comment (Новый комментарий) на панели инструментов режима редактора эскиза. Вы мажете поместить комментарии, в любое место вашего документа. </li> </ul> Комментарии появляются затемненными э режиме редактора эскиза, чтобы напомнить вам, что они не будут отображаться на вашей Web-странице, но остаются выбираемыми и редактируемыми.<br> Вы можете вставлять и редактировать атрибуты тегов, используя панель инструментов режима редактора эскиза. Атрибуты, как мы знаем, задают дополнительные свойства тегов. Чтобы вставить новый атрибут тега, выберите тег, куда вы хотите вставить атрибут и нажмите кнопку New Attribute (Новый атрибут) на панели инструментов. Бланк атрибута появляется под другими атрибутами тега. Осталось только ввести имя атрибута в текстовом поле и нажать клавишу <Enter>.<br> Внимание<br> Если вы не уверены, является ли атрибут правильным, вы можете проконсультироваться по этому поводу у консорциума W3C на его сайте www.W3C.org.<br> Чтобы переключить формат отображения тегов, выберите парный тег в окне документа в режиме эскиза. Нажмите кнопку Toggle Binary (Переключиться на парный) на панели инструментов. По умолчанию отображаются обе части парных тегов. Эта команда меняет отображение только выделенного тега.<br> HTML — язык, постоянно расширяющийся, и новые тега создаются часто. Чтобы гарантировать, что ваши Web-страницы всегда используют последние технологии, Adobe GoLive предоставляет вам возможность ввести имена новых тегов и отредактировать их атрибуты. Это можно сделать, в режиме макета перетянув пиктограмму Tag (Тег) —<div style="text-align:center;"><img src="image/icon32.gif" alt="Редактирование HTML-кода"></div> — из Objects Palette (Палитра объектов) — <div style="text-align:center;"><img src="image/icon33.gif" alt="Редактирование HTML-кода"></div>— в ваше окно документа.<br> Текстовые макросы помогут экономить время, если вы часто используете редакторы HTML, JavaScript и WebObjects, встроенные в Adobe GoLive.<br> <ul> <li> Четыре текстовых макроса содержатся в четырех разрешающих редактирование, файлах. </li> <li>Один файл содержит пользовательскую комбинацию тегов, три других являются специфическими для сред. Файл AdobeVGoLive 6.QJBNG\Setthig\Text Macros\All\Default.macro может содержать любую комбинацию тегов HTML, строк JavaScript и кодовых отрезков WebObjects. Эти объекты могут быть вставлены в любое из редактируемых окон Adobe GoLive.</li> <li> Файл Adobe\Golive 6.0_ENG\Setting\Text Macros\SS\Souree.macro может содержать текст так же, как теги HTML. Эти макросы могут быть вставлены в исходный код HTML, отображенный в режиме редактирования исходного кода.</li> <li> Файл Adobe\GoLive 6.0_ENG\Setting\Text Macros\JavaScript\Source.macro содержит заготовленные заранее строки кода JavaScript. Эти теги могут быть вставлены в исходный код JavaScript, отображаемый в редакторе JavaScript.</li> <li> Файл AdobeXGoLive 6.0_EN0\Setting\Text МаетовХАЩршее.тасго содержит отрезки кода WebObjects. Эти отрезки- кода могут быть вставлены в исходный код WebObjects, отображаемый редактором объявления WebObjects.</li> </ul> Все файлы макросов загружаются ори запуске Adobe GoLive, однако, файлы из каталогов SS, JavaScript и Аll загружаются, только если подходящие программные модули подключены в окне Modules Manager (Управление модулями), подробно описанной в разд. "Настройки" главы Adobe GoLive 6 перед вами: как на заблудиться.<br> Чтобы вставить автоматизированный исходный код. Введите имя макроса и нажмите <Shffi>+<Ctrl>+<M> (в Windows) или <Command>+<M> (в Мае OS). Эта комбинация клавиш вставит в то место, где находится курсор, содержимое соответствующего макроса.<br> Текстовые макросы нечувствительны к регистру букв, а это значит, что вы можете при вводе их имен путать буквы верхнего или нижнего регистра.<br> Вы можете изменять текстовые макросы. Для этого следует сначала открыть нужный исходный файл с помощью Adobe GoLive или текстового редактора, а потом редактировать его содержимое. Текстовые макроопределения должны иметь следующий базовый формат<br> ИмяМакроса [Разграничитель] СoдержаниеМакроса[Разграничитель]<br> Первый элемент в макроопределении — это имя макроса, которое вы вводите в соответственном редакторе, прежде чем нажать <Shift>+<Ctrl>+<M> (в Windows) или <Command>+<M> (в Mac OS). За исключением пробелов и позиций табуляции, вы можете использовать любую комбинацию знаков для имени макроса, но должны ограничиться использованием букв и цифр.<br> Отделенный знаком пробела, второй элемент определяет содержание макроса, т.е. текст, который собственно будет вставлен. Элемент содержания должен быть заключен в два идентичных разграничительных знака. Когда вы заставляете Adobe GoLive вставить текстовый макрос, интерпретатор макросов будет рассматривать первый знак после пробела как разграничитель и искать второй подобный знак, чтобы определить, где кончается содержание макроса.<br> Например, макрос тега изображения с основными атрибутами мог бы выглядеть так:<br> image §<img "зге-../GIFS/???.GIF" width="20" height-"20">§<br> Вы можете также использовать текстовые макросы, чтобы вставлять строки форматированного текста. Например:<br> Webdesign SThis Web Site was designed using <B>Adobe GoLive.<B>§<br> Уже было отмечено, что разграничители сообщают интерпретатору текстовых макросов Adobe GoLive, где начинается и заканчивается содержимое. Можно использовать любой знак в качестве разграничителя, руководствуясь только одним правилом: разграничитель (т. е. тот знак, который его представляет в данном макросе) не может встречаться в содержимом макроса. Возможно использовать даже пробелы и символы возврата каретки, чтобы вставить структурированный текст и многострочный код, соответственно.<br> Вот пример неправильного использования разграничителей:<br> image H<img "arc-../GIFS/???.GIF" width="2b" height«=n20">"<br> Как вы видите, значки (двойные кавычки), являющиеся разделителями, содержатся также в тексте макроса. Таким образом, главное и единственное правило использования разграничителей не выполнено. Это определение макроса не произведет полезного результата. Так что Adobe GoLive вставит только текст перед вторыми двойными кавычками. Результат будет таков:<br> image "<img<br> Внимание<br> В качестве общего правила можно вывести следующее: вам следует избегать использования знаков, которые обычно употребляется в качестве структурных элементов в пределах синтаксиса исходного кода. Например, знаки "больше чем" (>) и "меньше чем" (<) заключают теги HTML.<br> Обычно во время вставки текстового макроса, текстовый макроинструмент Adobe GoLive выделяет целую вставку. Однако чтобы обеспечить наибольшую гладкость процесса работы, вы можете также помещать место добавления или выделять текст для перепечатывания в любом месте вставки. Еще одно удобство работы с макросами заключается в том, что существует возможность указать Adobe GoLive .так называемые1 "места добавления" и "места перепечатывания".<br> Помещение "места добавления1' в макрос совершается путем вставки значка "вертикальная черта" (|). Например:<br> Image /<img "arc- I" width="20," height="2Q">"/ .<br> Вертикальная черта после атрибута БГС и знака равенства помещает место вставки так, что вы можете ввести значение атрибута без необходимости двигать курсор к нужному месту.<br> Выделение текста для перепечатывания совершается с применением одинарных кавычек. Например:<br> Image §<img ",src-. ./GIFS/ .'???'.GIF " width="20" height=*"20">"§<br> Три знака вопроса, заключенные в кавычки будут выделены, когда вы вставите этот макрос.<br> Чтобы сократить общую наборную работу и сделать ваши файлы макросов более легкими для поддержания, текстовый макро инструмент Adobe GoLive позволяет вам ссылаться на другие макросы изнутри макросов.<br> Чтобы вызвать другой макрос изнутри макроса, вам нужно заключить имя этого макроса в знаки доллара ($). Следующий пример показывает правильный синтаксис.<br> <ul> <li> Макрос № 1.<br> <br> Meta-author /<META NAME-"author" CONTENT="$author$"/<br> <br> </li> <li> Макрос№ 2.<br> <br> Author "John Smith"</li> </ul> При вставке макроса meta-author Adobe GoLive будет автоматически искать второй макрос с именем author и вставлять его содержимое в определенное заранее место первого макроса, так что в результате получится:<br> МЕТА NAME="author" CONTENT-"John Smith"<br> Бели вызываемый макрос содержит ссылку на вызвавший его макрос, возникнет феномен так называемой "циклической ссылки". Как поведет себя Adobe GoLive, столкнувшись с такой ситуацией? Оказывается вот как. Встретив ссылку на макрос, уже встречавшийся ранее, Adobe GoLive разорвет цепочку вставки, подставив в место содержимого последнего макроса его имя. Вот простой пример:<br> maerosa "A to $macrosb$" macrosb "В to $macrosc$" macrosc "С to $macrosa$"<br> В результате вызова макроса macrosa в исходный текст будет добавлена следующая строка:<br> A to В to С to macrosa<br> Как видно из примера, Adobe GoLive игнорирует циклическую ссылку назад к макросу macrosa и вставляют вместо этого наименование макроса.<br> Как уже было отмечено, вы можете использовать три контрольных знака, чтобы отметить, что происходит, когда текстовый макрос вставлен:<br> <ul> <li> одиночные кавычки отмечают выделение;</li> <li> вертикальнаячертауказывает место вставки;</li> <li> знаки доллара используются, чтобы ссылаться на Другие текстовые макросы.</li> </ul> Но может возникнуть ситуация, когда потребуется создать макрос, содержащий в себе один из этих символов. Например, синтаксис JavaScript требует, чтобы текстовые строки были заключены в одиночные кавычки. Этот конфликт решается путем замени знаков кавычек знаками процента (%) (или любыми другими подходящими знаками). Текстовый макрос инструмент Adobe GoLive имеет три встроенных ключевых слова, которые позволяют вам переименовывать контрольные знаки.<br> Selection (выделение) дает вам возможность переименовать маркеры выделения, если одинарные кавычки не позволены. Например:<br> Selection = %<br> Macros /Write.document.write('%what%')/ <br> В данном примере символ (%) играет роль маркера выделения.<br> Сaret (знак вставки) позволяет вам переименовать маркер места вставки, если вертикальная черта не позволена, например, потому, что она используется для выражения поразрядной операции логического сложения или (OR) в JavaScript<br> Caret =»%<br> Macro (макрос) позволяет вам переименовать знаки долларов заключающие между собой имя макроса.<br> Macro = %<br> Adobe GoLive позволяет вам сохранять части вашей Web-страницы как фрагменты HTML, т. е. куски уже готового HTML-кода, которые не закреплены в структуре страницы. Фрагменты HTML могут быть использованы в построении динамических страниц с использованием WebObjects.<br> Вы можете также сохранять части вашей Web-страницы как отрезки кода в окне сайта или как компоненты, которые могут быть вновь использованы и динамически обновлены в соответствии с новыми данными в Adobe GoLive.<br> Чтобы создать фрагмент HTML, выполните команду меню File INew (Файл | Новый) для создания нового документа. Затем вставьте в него часть вашей Web-страницы, которую вы хотите сохранить как фрагмент HTML. Щелкните на пиктограмму страницы <div style="text-align:center;"><img src="image/icon34.gif" alt="Редактирование HTML-кода"></div> в верхнем левом углу окна документа. В меню Window (Окно) выберите команду Inspector (Инспектор) и пе-рейдите на вкладку Удалите пометки напротив тегов <htmi>, <head> <link rel="canonical" href="https://www.e-lave.ru//glava-1.htm"/>, <titie> или <body>, чтобы частично или-полностью стереть основную структуру страницы. Затем сохраните новый документ.<br> Adobe GoLive стирает из исходного кода теги <htmi>, <head> <link rel="canonical" href="https://www.e-lave.ru//glava-1.htm"/>, <titie> (если они пустые) и <body>, оставляя все другие теги и атрибуты в пределах тега <body> нетронутыми.<br> Теперь у вас есть готовый фрагмент чистого HTML-кода, который можно безболезненно вставлять в другие разрабатываемые Web-страницы.<br> </td> </tr> </table> <br><br> <h1>Верстка страниц</h1> <h1>Добавление гипертекстовых ссылок</h1> <br> </h2> С помощью Adobe GoLive вы можете с легкостью создавать гиперссылки, которые отошлют посетителей на другие страницы вашего или чужого сайта, и даже на ресурсы, не относящиеся к Web, такие как FTP-серверы и адреса электронной почты.<br> В качестве альтернативы созданию гипертекстовых ссылок на основе текста, вы можете создавать ссылки, базирующиеся на изображениях или их фрагментах (так называемая "сегментированная графика"). Также вы можете создавать динамические элементы, активизируемые с помощью мыши.<br> Чтобы создать гипертекстовую ссылку, выделите текст, который будет служить гиперсеылкой. Затем выполните одно из приведенных ниже действий.<br> <ul> <li> В палитре Inspector (Инспектор) активируйте панель Link (Ссылка) и нажмите кнопку New link (Новая ссылка) на панели инструментов. Чтобы определить ресурс, да который будет указывать ссылка, выберите файл, используя кнопку Feteh URL (Пойти за URL) или кнопку Browse (Просмотр). Также можно ввести URL или адрес электронной почты напрямую в текстовое поле URL. Если вы делаете это, то не забудьте в начале адреса ввести префиксы http:// для Web-ресурсов или mailto: для адреса почты. </li> <li> Удерживая клавишу <Ctrl>, перетащите мышью выделенный текст к нужному месту назначения ссылки в пределах окна сайта. Целью ссылки может быть файл HTML на панели Files (Файлы) окна сайта, или URL, или адрес электронной почты на панели Externals (Внешнее) окна сайта.</li> </ul> Если вы хотите, чтобы место назначения вашей ссылки появилось в новом окне браузера, выберите соответствующий элемент из выпадающего списка Target (Цель) в палитре Inspector (Инспектор).<br> Чтобы,-удалить гипертекстовую ссылку, выделите текст, на котором установлена гиперссылка, а затем нажмите кнопку Remove Link (Удалить ссылку) на панели инструментов.<br> </td> </tr> </table> <br><br> <h1>Добавление горизонтальных линий</h1> <br> </h2> Специальный элемент — горизонтальные линии — служит, чтобы визуально отделять., группы объектов друг от друга. Чтобы добавить такую линию, перетащите с помощью мышки пиктограмму Lane (Линия) из Objects Palette (Палитра объектов) в окно документа или просто дважды щелкните мышью на этой пиктограмме.<br> Изменение внешнего вида добавленной линии происходит при помощи кнопок-переключателей Style (Стиль) в палитре Inspector (Инспектор): левая кнопка создает обычную непрерывную линию, правая придает линии некоторую трехмерность.<br> Для того чтобы установить толщину линии, выберите единицы измерения в выпадающем списке Width (Ширина) палитры Inspector (Инспектор). Выберите элемент Full (Полностью), чтобы установить толщину линии, равной ширине макетного текстового поля или окна документа. Элементы Percent (Процент) и Pixel (Точка) позволяют задавать .длину линии в процентах относительно макетного поля или окна просмотра документа и в точках соответственно. В том случае, если были выбраны элементы Percent (Процент) или Pixel (Точка), следует задать длину линии в поле ввода Width (Ширина).<br> Чтобы установить выравнивание линии по горизонтали, нажмите одну из кнопок группы Alignment (Выравнивание) в палитре Inspector (Инспектор). Следует отметить, что если для ширины линии был выбран элемент Full (Полностью), то эти кнопки будут недоступны для использования. Это вполне естественно, ведь линия и так занимает все отведенное ей пространство, поэтому выравнивание по горизонтали не принесет видимых изменений.<br> </td> </tr> </table> <br><br> <h1>Добавление тегов Head</h1> <br> </h2> Как нам известно, страница HTML состоит из двух основных секций: заголовка и тела. Режим просмотра Layout (Макет) Adobe GoLive отражает эту структуру при помощи представления панели головной секции как части окна документа. По умолчанию заголовочная секция каждой страницы уже содержит тег <titie>, который вы имеете возможность редактировать напрямую. Adobe GoLive облегчает добавление других заголовочных тегов в страницу при помощи вкладки Head (Заголовок) в Objects Palette (Палитра объектов).<br> Чтобы добавить тег заголовка, откройте панель заголовочной секции, щелкнув мышью по треугольнику рядом со значком Page (Страница) в левом верхнем углу окна документ» (рис. 4.7).<br> <div style="text-align:center;"><img src="image/dobavlenie-tegov-head_1.gif" alt="Добавление тегов Head"></div><br> Рис. 4.7. Окно разработки Web-страницы с отображенной заголовочной секцией<br> Затем активируйте вкладку Head (Заголовок). Оттуда перетащите нужную пиктограмму на панель заголовочной секции. Если эта панель закрыта, то вы можете перетянуть пиктограмму напрямую к треугольнику.<br> Вы можете использовать тег <base> для определения основного места расположения вашей Web-страницы, т.е. ее исходного URL. Этот адрес используется браузерами для обработки относительных ссылок на странице. В том случае, если ваша страница была перемещена с ее исходного местоположения, то браузер может корректно локализовать относительные ссылки, используя базовый URL.<br> Чтобы добавить тег <base>, перетащите соответствующую пиктограмму с вкладки Head (Заголовок) Objects Palette (Палитра объектов) на панель заголовочной секции вашего окна документа. Затем стоит перейти в палитре Inspector (Инспектор) и взвести флажок в независимом переключателе Base (Базовый). После этого укажите в соответствующем текстовом поле URL, который будет использован в качестве базового, Также рекомендуется взвести флажок в переключателе Write Base Always Absolute (Использовать абсолютные пути), чтобы гарантировать, что все ссылки указывают на корень сайта.<br> Для добавления скрытых комментариев к вашей странице (таких, например, как публикация информации для будущих ссылок), вы можете использовать теги <comment>. Если вы захотите просмотреть комментарии, то нужно использовать Adobe GoLive или другой редактор Web-страниц.<br> Чтобы добавить тег <comment>, перетащите соответствующую пиктограмму со вкладки Head (Заголовок) Objects Palette (Палитра объектов) на панель заголовочной секции вашего окна документа. А затем в палитре Inspector (Инспектор) можно указать сам текст создаваемого комментария.<br> Тег <keywords> можно использовать для. указание ключевых слов для поисковых систем. Поисковые системы Internet используют информацию, занесенную в тег <keywords>, при создании своих индексов, поэтому заданию его содержимого следует подходить весьма ответственно.<br> Чтобы добавить тег <keywords>, перетащите его пиктограмму со вкладки Head (Заголовок) Objects Palette (Палитра объектов) на панель заголовочной секции вашего окна документа. А затем в палитре Inspector (Инспектор) можно при помощи следующих действий редактировать набор ключевых слов, характеризующих разрабатываемую Web-страницу:<br> <ul> <li> чтобы добавить ключевое слово, введите его с клавиатуры в текстовом поле под прокручивающимся текстовым полем, а затем нажмите на кнопку Add (Добавить) или нажмите клавишу <Enter>;</li> <li> чтобы отредактировать ключевое слово, выберите уже существующее слово в прокручивающемся списке ключевых слов,, отредактируйте это слово в текстовом поле, и нажмите кнопку Update (Модифицировать);</li> <li> чтобы удалить ключевое слово, выделите уже существующее слово в прокручивающемся списке ключевых слов и нажмите кнопку Delete (Удалить).</li> </ul> Тег <refresh> используется для того, чтобы заставлять, Web-браузеры принудительно перезагружать содержимое вашей страницы или через определенный интервал времени автоматически загрузить другую Web-страницу.<br> Чтобы добавить тег <refresh>, перетащите одноименную пиктограмму со вкладки Head (Заголовок) Objects Palette (Палитра объектов) на панель заголовочной секции вашего окна документа. Для указания периода времени, после которого произойдет перезагрузка документа, следует использовать поле ввода Delay (Задержка) в палитре Inspector (Инспектор). В это поле необходимо будет ввести значение в секундах, чтобы указать интервал, после которого страница будет обновлена или заменена другой страницей.<br> Затем следует использовать один из группы переключателей, расположенной в нижней части палитры Inspector (Инспектор).<br> <ul> <li> Выберите переключатель Target This Document (Указать на текущий документ), чтобы обновить исходную страницу.</li> <li> Выберите переключатель Target URL (Указать URL), чтобы по истечении указанного периода переадресовать пользователя на другую страницу. Затем выберите замещающую страницу, используя кнопку Fetch URL (Пойти за URL) или кнопку Browse (Просмотр), связанные с соответствующим текстовым полем.</li> </ul> Вы можете использовать тег <script> для добавления сценария в заголовочную секцию ващей страницы. Сценарий, в заголовочной секции будет выполняться, пока Загружается видимая основная секция страницы.<br> Чтобы добавить заголовочный сценарий, перетащите пиктограмму Script (Сценарий) из Objects Palette (Палитра объектов) на панель заголовочной секции окна документа. Наименование подключаемого сценария указывается в поле Name (Имя) палитры Inspector (Инспектор). В выпадающем списке Language (Язык) указывается целевой браузер, в котором предполагается выполнять создаваемый сценарий.<br> Сам файл, содержащий код присоединяемого сценария указывается в поле Source (Источник), после того, как будет взведен флажок в соответствующем независимом переключателе. Впрочем, код сценария можно написать вручную, используя для этого встроеиный текстовый редактор, который вызывается по нажатию кнопки Edit (Редактировать).<br> </td> </tr> </table> <br><br> <h1>ВЕРСТКА СТРАНИЦ</h1> <br> </h2> <ul> <li>"Разумные" объекты и ссылки</li> <li> Создание новой Web-страницы <ul> <li> Добавление тегов Head</li> <li> Работа с текстом</li> <li> Применение макетной сетки</li> <li> Добавление горизонтальных линий</li> <li> Перемещение, изменение размеров и группировка объектов</li> <li> Работа с цветом</li> <li> Добавление гипертекстовых ссылок</li> <li> Применение закладок</li> <li> Создание выпадающих списков URL</li> <li> Отслеживание изменений на страницах</li> <li> Предварительный просмотр страниц</li> <li> Просмотр информации о документе</li> </ul> </li> <li> Дополнительные возможности <ul> <li> Выравнивание и распределение объектов</li> <li> Работа с часто используемыми объектами</li> </ul> </li> </ul> </td> </tr> </table> <br><br> <h1>Отслеживание изменений на страницах</h1> <br> </h2> Каждый, кто когда-нибудь всерьез занимался разработкой чего-либо, будь то планы на будущие выходные или очередной модуль космической станции, знает, как часто возникает необходимость вернуться назад, к одному из состояний разрабатываемого объекта в прошлом. Разработчики Adobe GoLive конечно же не могли упустить такую важную деталь. Во время дизайна ваших страниц вы можете использовать палитру History (История). Эта палитра записывает изменения, которые вы производите на странице в режимах просмотра Layout (Макет) и Source (Исходный код). Каждый раз, когда вы делаете какие-либо изменения на странице, новое состояние страницы добавляется в палитру History (История), Вы можете восстановить предыдущее состояние страницы, просто выбрав соответствующий элемент списка состояний в этой палитре.<br> Палитра History (История) сохраняет в списке до 20 состояний страницы. Если у вас одновременно открыто несколько окон документов, то для каждого из них ведется своя "история".<br> Внимание<br> Содержимое палитры очищается, когда вы переключаетесь из режима Layout (Макет) или Source (Исходный код) в другой режим окна документа.<br> Совет <br> Помимо палитры History (История) есть более простой способ отменить последние сделанные изменения. Воспользуйтесь командой меню Edit) Undo (Правка | Отмена) и последнее сделанное вами изменение будет отменено. Чтобы восстановить изменение, которое вы сделали перед его отменой, следует воспользоваться командой меню Edit | Redo (Правка (Повторить). В любой момент вы можете также вернуться к последнему сохраненному состоянию страницы, при помощи команды меню File | Revert to Saved (Файл | Вернуться к сохраненному варианту).<br> </td> </tr> </table> <br><br> <h1>Перемещение, изменение размеров и группировка объектов</h1> <br> </h2> Adobe GoUve предусматривает множество возможностей для точного позиционирования объектов на странице и изменения их. размеров. Вы можете перемещать объекты, изменять их размеры или группировать. Большинство этих возможностей предоставляет нам палитра Transform (Трансформация) из меню Window (Окно). Чуть позже мы рассмотрим ее более подробно, но сначала сделаем важное замечание.<br> Внимание<br> Прежде чем перемещать объекты, перетаскивая мышью, вводя конкретные значения на панели инструментов или используя палитру Transform (Трансформация), вам необходимо поместить их на макетную сетку.<br> Теперь, когда все необходимые объекты находятся на макетной сетке, попробуем изменить их расположение. Для этого, щелкните на нем мышью и произведите одно из следующих действий: <br> <ul> <li> перетащите объект с помощьвд мыши на нужное место;</li> <li> введите на панели инструментов или палитре Transform (Трансформация) нужные значения в пикселах для полей Position (Позиция).</li> <li> Для изменения размеров объекта также существует несколько путей: </li> <li> потяните мышью один из ограничивающих маркеров объекта;</li> <li> в поле Size (Размер) палитры Transform (Трансформация) или в соответствующих полях панели инструментов введите значение в пикселах в левом поле для ширины объекта, а в правом — для высоты.</li> </ul> Совет <br> Удерживайте клавишу <Shift> при перемещении маркера и размеры вашего объекта будут изменяться пропорционально. Или взведите флажок в независимом переключателе Constrain Proportion» (Соблюдать пропорции) палитры Transform (Трансформация).<br> Чтобы сгруппировать объекты, выдадите их в макетной сетке (щелкните мышью по первому объекту, а затем, удерживая в нажатом состоянии клавишу < Shift>, выделите остальные объекты один за другим). Затем нажмите кнопку Group (Группировать) на панели инструментов или палитре Transform (Трансформация). Обратите внимание на то, что плавающие поля вы группировать не можете.<br> Примечание<br> Польза группировки объектов заключается в том, что вы обретаете возможность перемещать их в макетной сетке как единый элемент, что обеспечивает сохранение интервалов между ними.<br> Чтобы разгруппировать объекты, выделите мышью группу объектов. Затем, нажмите кнопку Ungronp (Расформировать) панели инструментов или палитры Transform (Трансформация). </td> </tr> </table> <br><br> <h1>Предварительный просмотр страниц</h1> <br> </h2> Вы можете предварительно просматривать ваши страницы и тестировать ссылки прямо в Adobe GoLive без использования внешних браузеров. Также можно предварительно просматривать файлы QuickTime, анимированные GIF и любые другие встроенные медиа-элементы, поддерживаемые Adobe GoLive. Предварительный просмотр приблизительно показывает, как именно будет выглядеть опубликованная в Web страница.<br> Но не стоит излишне полагаться на режим предварительного просмотра Adobe GoLive. Всегда полезно просмотреть ее, используя целевые браузеры. Это выявит различия в отображении вашей страницы и даст вам возможность протестировать сценарии JavaScript, динамический HTML, анимацию Macromedia Shockwave или другие элементы. Если необходимо, вы можете запустить браузер прямо из Adobe GoLive при помощи команды меню File | Preview In (Файл | Предварительный просмотр В) или просто нажав кнопку Show in Browser (Показать в браузере) на панели инструментов.<br> Внимание<br> Если вы используете Adobe GoLive для Windows. Вам нужно установить Microsoft Internet Explorer, прежде чем вы сможете предварительно просматривать страницы в Adobe GoLive.<br> Чтобы добавить браузеры в список доступных для предварительного просмотра, выполните команду меню Edit | Preferences (Правка | Свойства) и выберите пиктограмму Browsers (Браузеры) на левой панели диалогового окна Preferences (Свойства). Затем нажмите кнопку Find All (Найти все). После этого Adobe GoLive просканирует жесткие диски системы, чтобы найти установленные браузеры. Список найденных браузеров будет отображен в диалоговом окне Preferences (Свойства). Радом с наименованием каждого найденного браузера будет отображаться независимый Переключатель. Если взвести в нем флажок, то этот браузер будет использован для запуска из Adobe GoLive.<br> Внимание<br> Большинство браузеров допускают открытие только одной версии одновременно. Например, вы можете: открыть одновременно Netscape Navigator и Microsoft Internet Explorer, но не Netscape Navigator 3.0 и 4.0.<br> Для удаления браузера из созданного списка, выделите браузер и нажмите кнопку Remove (Удалить). </td> </tr> </table> <br><br> <h1>Применение макетной сетки</h1> <br> </h2> Мы уже неоднократно отмечали тот факт, что окончательный вид вашей страницы напрямую зависит от настроек браузера посетителя вашего сайта. Чтобы убедиться, что ваша страница отображается именно так, как вы задумали, можно поместить текст и объекты в макетную сетку. Когда вы добавляете макетную сетку на страницу, Adobe, GoLive фактически создает теги таблицы в исходном коде HTML. Программа использует эти таблицы, чтобы разместить текст и объекты на странице с точностью до одного пиксела. Таким образом, использование макетной сетки позволяет достаточно точно позиционировать Флоки содержимого Web-страницы.<br> Внимание<br> Если вы используете макетную сетку, браузер пользователя должен поддерживать таблицы, чтобы отображать страницы правильно. Большинство браузеров сейчас поддерживают таблицы. Устаревшие браузеры, такие как Netscape Navigator 2.0, отображают таблицы не совсем точно.<br> Чтобы добавить макетную сетку, перетащите пиктограмму Layout Jrid (Макетная сетка) из Objects Palette (Палитра объектов) в окно документа,или просто дважды щелкните мышью по этой пиктограмме.<br> Внимание<br> Adobe GoLive вставляет тег <spacer> в HTML-таблицу, которая составляет макетную сетку. Этот тег удаляет ошибку являющуюся причиной округления размеров таблицы в браузерах Netscape. Microsoft Internet Explorer игнорирует этот тег. В результате ваш HTML-код должным образом отображается обоими браузерами.<br> Существуют несколько путей управлять размерами макетной сетки.<br> <ul> <li> Щелкните мышью на границе сетки, чтобы вывести на экран маркеры изменения размера и при помощи мыши измените этими маркерами размер сетки. Новая ширина и высота сетки отображается в палитре Inspector (Инспектор).</li> <li> В палитре Inspector (Инспектор) введите размеры в полях Width (Ширина) и Height (Высота).</li> <li> Если вы завершили процесс расположения объектов в макетной сетке, нажмите кнопку Optimize (Оптимизировать) в палитре Inspector (Инспектор), чтобы автоматически уменьшить размер сетки до минимально возможного. </li> <li> Помимо изменения размеров вам доступны и другие возможности.</li> <li> Чтобы изменить интервал между горизонтальными или вертикальными линиями сетки, укажите значения в пикселах в полях ввода Horizontal (Горизонтальный) и Vertical (Вертикальный), размещенные в группе Grid (Сетка) палитры Inspector (Инспектор).</li> <li> Чтобы привязать объекты к .горизонтальным или вертикальным линиям сетки, взведите флажки в независимых переключателях Snap (Защелка), связанных с соответствующими полями ввода. Если снять флажок в этих переключателях, можно будет размещать объекты в сетке без привязки к ее линиям, но тогда теряется весь эффект от ее применения.</li> <li> Чтобы отобразить горизонтальные и вертикальные линии в сетке, взведите флажки в независимых переключателях Visible (Видимый), связанных с полями ввода.</li> </ul> Совет <br> Чтобы ускорить выведение информации на экран во время просмотра макета страницы, скройте линии сетки. Сетка остается активной и тогда, когда ее линии скрыты.<br> <ul> <li> Чтобы задать выравнивание сетки относительно окна просмотра, используйте выпадающий список Align (Выравнивание). Выберите элемент Default (По умолчанию), чтобы использовать настройки окружающего контейнера HTML для выравнивания сетки. </li> <li> Чтобы использовать в сетке фоновый цвет, взведите флажок в независимом переключателе Background Color (Фоновый цвет). Щелкните мышью внутри цветового поля, чтоЙй выделить его, а затеет выберите цвет в палитре Colors (Цвета).</li> </ul> </td> </tr> </table> <br><br> <h1>Применение закладок</h1> <br> </h2> Закладка — это конкретное место на странице, на которое указывает гиперссылка. Обычные гиперсеылки загружают документ в окно просмотра полностью, и этот документ отображается, начиная с его верхней границы. В том случае, когда необходимо точно позиционировать отображение документа в окне просмотра, например, при ссылке на конкретный абзац в большом текстовом документе, имеет смысл использовать закладки. В любом случае при создании закладок вы должны руководствоваться приведенными ниже основными принципами.<br> <ul> <li> Не следует помещать закладки непосредственно на макетную сетку. Вместо этого поместите их в текст -HTML, в макетное текстовое поле или в ячейку таблицы. Если вы вставляете закладку в макетное текстовое поле или в ячейку таблицы, убедитесь, что в них есть и иное содержимое, например текст или графика, иначе закладка не будет распознана браузером Netscape Navigator старых версий. В крайнем случае в поле или ячейку таблицы можно добавить неразрывный пробел.</li> <li> Следует размещать закладку около левой границы страницы, что позволит избежать возможных проблем с позиционированием Web-страницы в окне просмотра браузера.</li> </ul> Чтобы создать закладку и ссылку на нее, в Objects Palette (Палитра объектов) активируйте вкладку Basic (Основная). Перетащите пиктограмму Anchor (Якорь) из палитры к месту на странице, где вы хотите установить закладку. В текстовом поле Name (Наименование) палитры Inspector (Инспектор) введите уникальное имя для закладки. В окне документа выделите текст, который будет служить ссылкой на установленную закладку. Затем на панели инструментов нажмите кнопку New Link (Новая ссылка). 6 палитре Inspector (Инспектор) активируйте вкладку Link (Ссылка), а затем просто при помощи мыши и кнопки Fetch URL (Пойти за URL) установите связь между ссылкой и закладкой. Следует отметить, что для проведения вышеизложенных действий, необходимо, чтобы разрабатываемая Web-страница была предварительна сохранена.<br> </td> </tr> </table> <br><br> <h1>Просмотр информации о документе</h1> <br> </h2> В диалоговом окне Document Statistics (Статистика документа) представлена общая информацию о вашей Web-странице включающая в себя ее размер в байтах, количество слов, количество знаков и примерное время, нужное для загрузки этого; документа.<br> Обратите внимание на то, что размер в байтах не включает медиа-ресурсы, как например, QuickTime, или звук (поскольку они могут начать проигрываться до того, как загрузятся целиком). Кроме того, время загрузки показывает только очень приблизительное время, основанное на весьма обобщенных условиях. Внешние условия, такие как маленькая скорость сети или перегрузка сервера, могут существенно изменить реальное время загрузки страницы.<br> Чтобы просмотреть информацию о разрабатываемой странице, выполните команду меню Special | Document Statistics (Особые возможности | Статистика документа).<br> </td> </tr> </table> <br><br> <h1>Работа с часто используемыми объектами</h1> <br> </h2> В случае, если в процессе разработки сайта вы часто пользуетесь какими-либо объектами, то панель Custom (Образец) палитры в Objects Palette (Палитра объектов) сможет сильно облегчить вам жизнь. Создав объект, который позднее вы хотели бы использовать вновь, перетащите его мышью на эту панель. Теперь, когда он понадобится вы сможете просто перетащить мышью эскизное изображение объекта из палитры в Objects Palette (Палитра объектов) в окно документа. При этом будут сохранены все установки, которые вы задали для данного объекта.<br> Если после того, как объект был перемещен из палитры на страницу, вы внесете изменения в его параметры, то эти изменения коснутся только того экземпляра, который вы редактируете. Все остальные копии этого объекта, располагающиеся на Web-страницах разрабатываемого сайта, останутся в прежнем виде.<br> Если вам необходимо сохранить несколько объектов, выделите их мышью (удерживая клавишу <Shift>). Затем перетащите выделенные объекты из окна документа на панель Custom (Образец) в Objects Palette (Палитра объектов). Чтобы гадать наименование для сохраненных объектов, дважды щелкните мышью на их пиктограмму на панели Custom (Образец), а затем введите имя объекта в появившемся редакторе объектов и нажмите кнопку ОК.<br> Для удаления объектов, выделите соответствующую пиктограмму и нажмите кнопку Delete (Удалить).<br> </td> </tr> </table> <br><br> <h1>Работа с цветом</h1> <br> </h2> В процессе разработки Web-страницы вам очень пригодится возможность раскрашивать текст и объекты. Палитра Colors (Цвета) поможет вам в этом. Вызовите ее из меню Window (Окно) или перейдите на соответствующую вкладку палитры Inspector Инспектор), Эта палитра содержит несколько отдельных палитр, включая RGB, CMYK и цвета, оптимизированные для Web (которые адекватно отображаются в любом Web-браузере). Чтобы выбрать цвет, откройте палитру Colors (Цвета) и нажмите на треугольник в правом верхнем углу палитры. В появившемся меню выберите необходимый пункт или же просто нажмите айтвётствующую кнопку палитры.<br> <ul> <li> Gray Slider (Серый бегунок), чтобы использовать один контрольный бегунок для корректировки процентного количества черного цвета при создании нужного оттенка серого. </li> <li> RGB Sliders (Бегунки RGB), чтобы использовать три контрольных бегунка для корректировки процентного количества частей красного, зеленого и синего цветов спектра.</li> <li> CMYK Sliders (Бегунки CMYK) чтобы использовать четыре контрольных бегунка для корректировки процентного количества частей голубого, пурпурного, желтого и черного цветов спектра.</li> <li> HSB Wheel (Колесо HSB), чтобы получить доступ к полному спектру цветов, в настоящее время поддерживаемому вашим аппаратным обеспечением. Чтобы выделить цвет, щелкните мышью по месту на цветовом кольце и потом откоррекщйЛге яркость, используя соответствующий бегунок.</li> <li> HSV Picker (Указатель HSV), чтобы установить уровень оттенка, насыщенности и яркости. Оттенок определяется на внешнем кольце, насыщенность — на горизонтальной оси квадрата, а яркость — на вертикальной оси квадрата. </li> <li> Palettes (Палитры),, чтобы отобразить различные фиксированные наборы цветов. Чтобы выбрать цвет, выберите набор цветов в выпадающем списке и нажмите на образец.</li> <li> Web Color List (Список цветов Web), чтобы отобразить 216 цветов, одинаково отображающихся во всех ^браузерах. Текстовое поле Value (Значение) показывает шестнадцатеричное значение красного, зеленого и синего цветов. Чтобы выбрать цвет, нажмите на его отображение в общем списке.</li> <li> PMColorPickerModule (Сборщик цветов), чтобы отобразить цвета, которые вы собрали на панели Color в окне сайта. Эти цвета активны только тогда, когда открыто окНо сайта. Чтобы выбрать цвет, щелкните на него в списке кнопкой мыши.</li> </ul> Окрасить текст можно, выделив его в окне документа и перетащив мышкой предварительно выбранный цвет с палитры Colors (Цвета), или же просто, щелкнув поле Text Color (Цвет Текста) на панели инструментов. Если вы окрашиваете другой объект, процедура будет несколько иной. Выделите объект в окне документа, затем щелкните на поле Colors (Цвета) в палитре Inspector (Инспектор) и выберите на палитре Colors (Цвета) желаемый цвет.<br> </td> </tr> </table> <br><br> <h1>Работа с текстом</h1> <br> </h2> Работа с текстом в Adobe GoLive очень похожа на аналогичную работу в любом из наиболее популярных текстовых редакторов. Вы можете вводить текст напрямую в окне документа, копировать текст из другого приложения и вставлять его в документ Adobe GoLive, импортировать текст из другого приложения в таблицу, а также использовать традиционные инструменты форматирования, проверки правописания и поиска.<br> Adobe GoLive предлагает самые разные способы форматирования текста, включая использование физических и структурных стилей.<br> Используя физические стили, вы можете путем форматирования сделать текст полужирным, курсивным, моноширинным или использовать их сочетание.<br> С помощью структурных стилей вы можете классифицировать текст как цитирование, переменную, код программы или что-либо еще.<br> Текст с примененным к нему структурным стилем обычно форматируется с использованием каскадных таблиц стилей или Web-браузера.<br> Чтобы применить физический стиль, сначала выделите текст, к которому необходимо будет применить форматирование, и выполните одно из следующих действий: <br> <ul> <li> выберите стиль, выполнив команду меню Туpе \ Style (Тип | Стиль). Из подменю можно выбрать один из предустановленных типов текста;</li> <li> для изменения начертания символов можно использовать кнопки Воld (Полужирный), Italic (Курсив) или Teletype (Моноширинный) на стандартной панели инструментов.</li> </ul> Adobe Golive позволяет применять к тексту, так называемый, относительный размер шрифта. Это дает возможность установить размер текста по отношению к размерам шрифта окружающего текста.<br> Чтобы применить относительный размер шрифта к тексту, выберите пункт меню Type | Size (Тип | Размер) или выпадающий список Font Size (Размер шрифта) на панели инструментов. Здесь содержатся несколько возможностей.<br> <ul> <li> Выбор размера между 1 и 7: выберите размер»!, чтобы браузер отображал текст на два размера меньше, чем установленный в свойствах браузера; размер 2, чтобы браузер отображал текст на один размер меньше; размер 3, чтобы текст отображался в том ;же размере; размер 4, чтобы браузер отображал текст на один размер больше, и так далее.</li> <li> Выбор размера между +1 и +7: выберите размер +1, чтобы браузер отображал текст на один размер больше, чем окружающий текст; размер +2, чтобы выделенный текст отображался на два размера больше, чем окружающий, и так далее.</li> <li> Выбор размера между — 1 и —7: выберите размер — 1, чтобы браузер отображал текст на один размер меньше, чем окружающий текст; размер -2 — на два размера меньше и так далее.</li> </ul> При помощи команды Type | Font (Тип | Шрифт) можно выбрать шрифт из стандартного набора. Стандартные наборы шрифтов появляются в меню по умолчанию, в то время как наборы шрифтов, используемые на отдельных страницах, появляются только тогда, когда их родительские окна открыты.<br> Чтобы добавить или отредактировать существующий набор шрифтов, выполните команду меню Type | Font | Edit Font Sets (Тип | Шрифт | Редактировать набор шрифтов). При этом будет отображено диалоговое окно Font Sets (Наборы шрифтов). Затем выполните одно из ниже перечисленных действий:<br> <ul> <li> чтобы добавить набор шрифтов, который вы можете использовать на любой странице, выберите пункт Default Font Sets (Набор шрифтов по умолчанию) из выпадающего списка в верхнем левом углу диалогового окна Font Sets (Наборы шрифтов);</li> <li> чтобы добавить набор шрифтов для использования только на текущей странице, выберите из выпадающего списка в верхнем левом углу страницы элемент Page Font Sets (Наборы шрифтов страницы). Затем, нажмите кнопку New (Новый), чтобы добавить новый набор шрифтов в список.</li> </ul> Adobe GoLive именует набор шрифтов, используя имя первого шрифта в наборе. Чтобы сменить имя набора шрифтов, вам нужно сначала добавить шрифт в список Font Sets (Наборы шрифтов), а затем изменить имя шрифта, используя палитру Inspector (Инспектор).<br> Для того чтобы добавить новый шрифт в набор, нажмите кнопку (Новый) под списком Font Names (Наименования шрифтов) и введите имя] нужного шрифта или выберите его иэ выпадающего списка. Повторяйте это! действие, пока не добавите все необходимые шрифты в набор.<br> Бели вы захотите удалить шрифт иэ набора, выделите его в списке Font Names (Наименования шрифтов) и нажмите кнопку Delete (Удалить).<br> </td> </tr> </table> <br><br> <h1>"Разумные" объекты и ссылки</h1> <br> </h2> Так называемые "разумные" объекты предлагают несколько более эффективный путь вставки изображений в Web-страницы, чем традиционный ход работы. Разумные объекты позволяют дизайнерам сосредоточиться на раскладке и дизайне страницы, а не на механизме конвертирования файлов между форматами. Их применение позволит вам отказаться от трудного процесса редактирования исходных файлов в одном формате, слежения за тем, где именно находится исходный файл для оптимизированных изображений, перевода их В формат сохранения для Web в отдельной программе, импортирования переведенных файлов в Adobe GoLive и последующего синхронизированного сохранения двух групп файлов.<br> Для более легкого и эффективного-восприятия информации, касающейся работы с файлами Photoshop, Illustrator и LiveMotion, которая последует дальше, следует сказать несколько слов о некоторых из существующих форматов изображений.<br> Adobe GoLive позволяет вам импортировать файлы Photoshop (форматы PSD, BMP, PICT, PCX, Pixar, Amiga IFF, TIFF и TARGA), Illustrator и Live Motion без каких-либо дополнительных ухищрений. Adobe GoLive создает копию исходного файла в формате сохранения Web и содержит ссылку на исходный файл. Формат исходного файла не меняется, у,нр. настройки формата Web, которые вы указываете, сохраняются с исходным файлом. Этот исходный объект и называется разумным объектом. Если вы дважды щелкнете мышью на подобный разумный объект в своем окне документа, исходный файл откроется в Photoshop, Illustrator или LiveMotion, в зависимости от типа файла. Если вы производите изменения в исходном изображении или изменяете размер разумного объекта в Adobe GoLive, программа автоматически модифицирует сохраненную для Web копию, когда вы возвращаетесь к Web-странице, содержащей изображение с использованием того же формата, настройки которого вы указали, когда впервые создавали разумный объект.<br> Разумные объекты предоставляют легкий способ соединения изображений Photoshop, Illustrator и LiveMotion на ваших Web-страницах. Общая процедура для любого типа разумного объекта одна и та же: перейдите на вкладку Smart (Разумные) иа Objects Palette (Палитра объектов), затем перетащите пиктограмму необходимого объекта (Photoshop, Illustrator или LiveMotion) на вашу Web-страницу. После этого следует выделить в окне основного документа добавленную пиктограмму и нажать кнопку Browse (Просмотр)— <div style="text-align:center;"><img src="image/razumnye-obekty-i-ssylki_1.gif" alt=""Разумные" объекты и ссылки"></div>— в текстовом поле Source (Источник) палитры Inspector (Инспектор).<br> После этого в появившемся диалоговом окне следует выбрать тот файл, который и будет связан со встраиваемым объектом.<br> Внимание<br> Панель Smart (Разумные) Object Palette (Палитра объектов) отображает пиктограммы только тех "разумных" объектов, для которых на вашем компьютере установлены соответствующие "родные" программы.<br> Графические файлы, импортированные в Adobe GoLive в качестве разумных объектов из Adobe Photoshop, Illustrator или LiveMotkm сохраняют связь с программой, в которой они создавались и в которой, если возникнет необходимость, их в последствии можно будет отредактировать и сохранить в формате, приемлемом для Web. Чтобы открыть "разумный" объект в его родном приложении, достаточно дважды щелкнуть на нем мышью. Если вы потом возвращаетесь к Web-странице в Adobe GoLive, которая содержит сохраненную в формате Web копию, Addbe GoLive модифицирует копию, чтобы отразить произведенные вами изменения.<br> Вы можете вручную изменить размер разумного объекта в Adobe GoLive просто путем выделения его и перетаскивания мышью одного из его маркеров, которые позволяют изменять размер объекта. Когда вы отпускаете кнопку мыши, Adobe GoLive обновляет сохраненную в формате Web копию на странице, используя последние настройки оптимизации, применяемые без изменения настоящего исходного файла. Поскольку форматы Flash и SVG базируются на векторах, модификация разумных объектов LiveMotion (которые всегда создаются в формате Flash) или fflustrator в форматах SVG или Flash не требуется.<br> Adobe GoLive дает возможность ссылаться на файлы Adobe Photoshop на вашей Web-странице. Файлы формата PSD должны быть 8-битовыми изображениями в цветовом режиме RGB и могут быть разделены на слои (любая добавленная интерактивность, как например, линейки прокрутки или карты .изображений будет игнорироваться).<br> Adobe GoLive также поддерживает форматы BMP, PICT (только для Mac OS), PCX, Pixar, Amiga IFF, TIFF и TARGA Программа создает копию исходного файла в формате сохранения для Web и поддерживает связь с "родным" приложением графического файла. Если вы позднее производите изменения в исходном изображении или меняете размер разумного объекта Photoshop, Adobe GoUve автоматически модифицирует копию, сохраненную в Web-формате.<br> Чтобы добавить простой разумный объект, связанный- с графическим файлом Photoshop, перетащите мышью пиктограмму Smart Photoshop с панели Smart (Разумные) — <div style="text-align:center;"><img src="image/razumnye-obekty-i-ssylki_2.gif" alt=""Разумные" объекты и ссылки"></div>— Objects Palette (Палитра объектов) в ваше окно документа или дважды щелкните по пиктограмме <div style="text-align:center;"><img src="image/razumnye-obekty-i-ssylki_3.gif" alt=""Разумные" объекты и ссылки"></div>в палитре. Затем выделите этот объект и нажмите на кнопку Вrowser (Просмотр), связанную с полем ввода Source (Источник) в Inspector Objects (Инспектор объектов), После этого выберите нужный файл Photoshop в диалоговом окне открытия файла и нажмите кнопку Открыть. <br> В появившемся диалоговом окне Save for Web (Сохранить для Web) (рис. 4.1) выберите одну, из вкладок, для работы с сохраняемым файлом:<br> <ul> <li> вкладка Original (Исходный вариант) предназначена для просмотра искомого изображения без оптимизации;</li> <li> вкладка Optimized (Оптимизированный вариант) позволяет увидеть изображение, к которому уже были применены правила оптимизации;</li> <li> вкладка 2-Up (Два, варианта) позволяет увидеть две версии изображения рядом друг с другом и выбрать более подходящий вариант для сохранения;</li> <li> вкладка 4-Up (Четыре варианта) позволяет просматривать четыре версии изображения рядом друг с другом.</li> </ul> Если, разумный объект ссылается на исходное изображение, которое содержит слои, Adobe GoLive должна сохранить каждый слой как отдельное изображение. Любая интерактивность, добавленная в слои в исходном файле, игнорируется. Для изображений, которые содержат анимацию, основанную на кадрах (frame-based) или разделенные на слои интерактивные объекты JavaScript, экспортируйте файл из ImageReady в подходящий для Web формат, а затем переместите экспортированный файл в Adobe GoLive.<br> Опции просмотра в Adobe GoLive дают вам возможность легко переключаться между оптимизированной и начальной версиями изображения и просматривать одновременно до четырех различных версий оптимизированных изображений. Также Adobe GoLive дает вам полный контроль над оптимизацией изображений Photoshop в форматах не подходящих для Web, которые, вы, импортируете, используя панель Smart (Разумные) в палитре Inspector {Инспектор). Когда вы вставляете разумный объект Photoshop и выделяете файл, Adobe GoLive отображает диалоговое окно Save Per Web (Сохранить для Web).<br> В режимах просмотра для двух и четырех версий изображения область примечания отображается по умолчанию под каждым оптимизируемым изображением, показывая его настройки (рис. 4.2). <br> <div style="text-align:center;"><img src="image/razumnye-obekty-i-ssylki_4.gif" alt=""Разумные" объекты и ссылки"></div> <br> Рис. 4.1. Сохранение изображения, оптимизированного для Web<br> <div style="text-align:center;"><img src="image/razumnye-obekty-i-ssylki_5.gif" alt=""Разумные" объекты и ссылки"></div><br> Рис. 4.2. Опции просмотра в Adobe GoLive<br> По умолчанию, режим просмотра 2-Up (Два варианта) отображает исходное изображение и изображение с текущими настройками оптимизации, а режим просмотра 4-Up (Четыре варианта) отображает исходное изображение, оптимизированное изображение с текущими настройками и две версии изображения меньшего размера и оолее низкого качества, основанные на модификациях текущих настроек оптимизации.<br> Вы можете выбрать версию изображения в режимах просмотра 2-Up (Два варианта) и 4-Up (Четыре варианта), чтобы применить новые настройки оптимизации. Также возможно автоматически обновить режимы просмотра 2-Up (Два варианта) и 4-Up (Четыре варианта) т. е. сгенерировать новые оптимизированные версии изображения, базирующиеся на выбранной версии.<br> Чтобы перестроить оптимизированные версии изображения в режимах просмотра 2-Up (Два варианта) и 4-Up (Четыре варианта)» следует выделить необходимую версию изображения в соответствующем режиме просмотра и в диалоговом окне Save For Web (Сохранить для Web) на панели Settings (Установки) активировать выпадающее меню, и уже из него выполнить команду Repopdate Views (Перестроить режимы отображения).<br> Adobe GoLive генерирует меньшие по размеру оптимизированные версии изображения, основанные на настройках оптимизации выделенной версии. Выбранная версия и оригинальная версия, если таковая имеется, не подвергаются изменению в режиме перестройки вереий оптимизированного изображения. По этой причине опция Repopulate Views (Перестроить режимы отображения) работает в режиме просмотра 2-Up (Два варианта) только в том случае, если исходная версия изображения в этом режиме не отображается.<br> Вы можете сохранять настройки оптимизации как поименованный объект и применять их во время работы с другими изображениями. Настройки, которые вы сохраняли, появляются в выпадающем меню на вкладке Optimized (Оптимизированный вариант). Adobe GoLive также включает несколько предопределенных поименованных настроек.<br> Если вы изменяете настройки оптимизации таким образом, что они больше не подходят к именованному набору, меню отображает их с наименованием Unnamed (Безымянный).<br> Чтобы сохранить настройки оптимизации; выделив нужные настройки на вкладке Optimized (Оптимизированный вариант) диалогового окна Save For Web (Сохранить для Web), выполните команду контекстного меню Save Set-tings (Сохранить настройки) из меню группы органов управления Settings (Настройки). Затем задайте имя настройкам и выберите место, где они будут сохранены. По умолчанию, поименованные настройки сохраняются в папке Settinp\SaveForWeb\Optimize основной папки Adobe GoLive.<br> Чтобы применить поименованные настройки оптимизации к изображению, предварительно выделив оптимизнруемое-изображение, выберите набор настроек оптимизации в выпадающем списке на панели Settings (Настройки).<br> Чтобы оптимизировать изображение, например, как формат JPEG, в выпадающем списке Settings (Настройки) выберите элементы, связанные с типом JPEG (рис. 4.3).<br> <div style="text-align:center;"><img src="image/razumnye-obekty-i-ssylki_6.gif" alt=""Разумные" объекты и ссылки"></div><br> Рис. 4.3. А — меню настроек; В — формат файла; С — меню выбора качества;<br> D — флажок Progressive; Е — флажок профиля 1СС;<br> F — бегунок оптимизации; G — флажок Optimized;<br> Н — бегунок Blur; I — матовый цвет<br> Для установки качества, сохраняемого в формате JPEG файла, следует выполнить одно из представленных ниже действий:<br> <ul> <li> установить коэффициент потери качества изображения при помощи бегунка, связанногос полем Quality (Качество);</li> <li> ввести численное значение в процентах напрямую в поле Quality (Качество);</li> <li> выбрать один из заранее подготовленных элементов выпадающего списка Settings (Настройки).</li> </ul> Установка наивысшего качества сохраняет больше информации о цвете, но результатом этого выбора является большой размер файла. Поэтому лучше просмотрите несколько настроек,качеств» для формата JPEG, чтобы определить наилучший баланс между качеством и размером файла.<br> Внимание<br> Формат JPEG Optimized рекомендуется для максимального сжатия файла. Однако помните, что некоторые старые браузеры не поддерживают эту особенность. Выберите опцию Optimized (Оптимизирован), чтобы создать изображение, которое отображается Web-браузером по мере его загрузки. Картинка буддт показана в нескольких вариантах все более высокого качества по мере того, как будет загружаться графический файл.<br> Чтобы применить к изображению эффект затуманивания с целью сгладить резкие грани, введите значение в поде Bluг (Размытие) или используйте выскакивающий бегунок. Эта опция эатшяет части узора, созданные вдоль острых граней в изображение и делает размер файла меньше, но она также может уменьшить деталитрясунка. Рекомендуется настройка 0.1—0.5.<br> Чтобы сохранить профиль ICC изображения в файле, взведите флажок в независимом переключателе ICC Profile (Профиль ICC).<br> Профили ICC используются некоторыми браузерами для коррекции цветов.<br> Если исходный рисунок содержит прозрачные элементы, взведите флажок в независимом переключателе Matte (Матовый), чтобы эмулировать появление фоновой прозрачности. Затем сохраните файл с расширением jpg.<br> Чтобы оптимизировать изображение как формат GIF или PNG-8, откройте исходный файл и лотом выберите любой из этих двух форматов в выпадающем списке Settings (Настройки).<br> Если вы собираетесь использовать формат GIF, то при помощи бегунка, связанного с полем ввода Lossy (Потеря), также можно задать степень, потери качества и, соответственно, сжатия графического файла. Часто можно применять значение Lossy (Потеря) в пределах 5%—10%. А иногда даже до 50%, не боясь ухудшить изображение. Размер файла тогда зачастую может быть уменьшен на 5—40.<br> Внимание<br> Вы не можете использовать опцию Lossy (Потеря) совместно с опцией Interlaced (Переплетение), а также с эффектами Noice (Шум) и Pattern Dither (Колебание).<br> После установки параметра потери качества выберите палитру Colors (Цвета). Чтобы самостоятельно задать необходимое количество цветов, следует ввести соответствующее значение в поле Colors (Цвета). Этот параметр указывает максимальное количество цветов, содержащихся в сохраняемом изображении. В случае, когда изображение содержит меньше цветов, чем указано в поле количества, палитра будет содержать только те цвета, которые присутствуют в изображении.<br> <div style="text-align:center;"><img src="image/razumnye-obekty-i-ssylki_7.gif" alt=""Разумные" объекты и ссылки"></div><br> Рис. 4.4. A — меню настроек; В — формат файла; С — меню Color;<br> D — меню алгоритма; Е — флажок прозрачности; F — флажок слоев;<br> G — меню Optimamize; H — бегунок Lossy; I — количество цветов;<br> J — бегунок Dither; К — матовый цвет; L — бегунок Web Snap<br> Выделите опцию Interlaced (Переплетение), чтобы создать чересстрочное изображение. При загрузке оно будет отображаться в версиях более низкого качества, пока идет полная загрузка файла. Опция Interlaced (Переплетение) может сделать время загрузки рисунка зрительно меньше и заверить пользователя в том, что процесс загрузки успешно продолжается.<br> Получившееся изображение следует сохранить .с расширением gif или png.<br> Чтобы оптимизировать изображение как формат РН<3?24, откройте исходный файл и выберите пункт PNG-24 из выпадающего- списка Settings (Настройки) в диалоговом окне Save For Web (Сохранить для Web).<br> Оба формата GIF и PNG-8 позволяют вам определять таблицу цветов для изображения. Эта таблица цветов появляется на вкладке Color Table (Таблица цветов) когда изображение выбрано, и вы получаете возможность вносить изменения в имеющиеся цвета. Таблица цветов для 8-битного изображения состоит из 256 цветов.<br> Существует несколько вариантов таблиц цветов.<br> <ul> <li> Perceptual (Воспринимаемый). Создает обычную таблицу цветов, отдавая предпочтение цветам, на которые лучше всего реагирует человеческий глаз.</li> <li> Selective (Выборочный). Создает таблицу цветов, сходную с Perceptaal, но предпочтение отдается большей области цветов и сохранению стандартных цветов Web. Эта таблица цветов обычно производит изображения с наилучшей цветовой целостностью и используется по умолчанию.</li> <li> Adaptive (Приспособленный). Создает обычную таблицу цветов путем показа образцов цветов из появляющегося спектра, максимально подходящего к спектру цветов изображения. Например, изображение с только зелеными и голубыми цветами производит таблицу цветов, состоящую в основном из разных оттейков зеленого и синего. Большинство изображений концентрирует в себе цвета из отдельных частей спектра.</li> <li> Web. Использует стандартную ;;216-цветную таблицу цветов, сходную с 8-битной палитрой Windows (256 цветов). Эта опция гарантирует, что никакое изменение гаммы со стороны браузера не применяется к цветам, когда изображение отображается с использованием 8-битных цветов. При использовании палитры Web файлы могут увеличиваться в размерах, и поэтому ее рекомендуется использовать только в том случае, если избежание цветовых искажений в браузере не является первостепенной задачей.</li> <li> Custom (По желанию). Сохраняет текущую perceptual, selective или adaptive таблицы цветов как фиксированную палитру, которая не модифицируется из-за изменений в изображении.</li> <li> Windows. Использует стоящую по умолчанию в системе Windows 8-битную (256-цветную) таблицу цветов, которая основана на представлении стандартных образцов цветов RGB-спектра.<br> Возможность выбора текущей таблицы предоставляет выпадающий список С, изображенный на рис. 4.4. Все другие таблицы цветов появятся в вашем меню, только если вы их предварительно сохранили.</li> </ul> Внимание<br> Если ваш рисунок имеет меньше цветов, чем общее количество, указанное в палитре цветов, неиспользованные цвета удаляются из палитры, чтобы уменьшить размер файла.<br> Цвета в таблице можно сортировать по оттенку, свету или популярности (т. е. по тому, как часто он используется в вдофражевии), делая ряд цветов удобнее для просмотра.<br> Чтобы отсортировать таблицу цветов, выберите сначала порядок сортировки в меню вкладки Table Color (Таблица цветов):<br> <ul> <li> Hue (Оттенок) — нейтральным цветам назначается нулевое значение;</li> <li> Luminance (Освещенность) сортирует цвета по уровню освещенности, т. е. по интенсивности или яркости цвета;</li> <li> Popularity (Популярность) — по популярности, т. е. по частоте появления цвета в изображении;</li> <li> Uasorted (Без сортировки) восстанавливает исходный порядок сортировки.</li> </ul> Можно добавлять новые цвета, которые были упущены при построении таблицы цветов. Если таблица цветов уже содержит их максимальное количест во (256 или 255 с прозрачностью), то добавить новый цвет нельзя.<br> Чтобы добавить новый цвету в диалоговом окне Save For Web (Сохранить дл Web) выберите инструмент {gj и щелкните ею по выбранному цвету в изобра жении. Цвет появится в поле образцов цветов диалогового окна Save For Web (Сохранить для Web). Можно выделять цвета прямо на изображении или н вкладке Color Table (Таблица цветов).<br> Вы можете изменить выделенный цвет на вкладке Color Table (Таблица цветов) на любое другое значение цвета палитры RGB. Когда вы восстанавли ваете оптимизированное изображение, деленный цвет будет изменен н новый, где бы тот ни появился на изображении.<br> Выделенные цвета можно удалять, чтобы уменьшить размер файла изобра жения. После того как вы удалите цвет, области оптимизированного изо бражения, прежде включавшие в себя этот цвет, будут изменены с исполь зованием ближайшего па тону имеющегося в палитре цвета, остающегося н палитре. При удалении цвета палитра автоматически принимает тип Custoir Это происходит потому, что палитры Adaptive, Perceptual и Selective автома тически бы добавили удаленный цвет обратно в палитру, когда вы бы стал] вновь оптимизировать изображение. А палитра Custom так не поступает.<br> Чтобы удалить выделенный цвет, выделите один или более цветов (при не обходимости) на вкладке Color Table (Таблица цветов). Удаление можно произвести двумя способами:<br> <ul> <li> нажатием кнопки Trash (Корзина);</li> <li> выбором в меню пункта Delete Color (Удалить цвет).</li> </ul> Вы имеете возможность сохранять таблицы цветов оптимизированных изо брожений и потом применять их к другим файлам, а также загружать табли цы цветов, созданные ранее. Как только вы загружаете новую таблицу, цвел в оптимизированном изображении меняются на цвета из новой таблицы.<br> Чтобы сохранить таблицу цветов, в меню вкладки Color Table (Таблица цве тов) выберите пункт Save Color Table (Сохранить таблицу цветов). Выберит» наименование для сохраняемого файла и укажите место, где он будет сохранен. По умолчанию файлу таблицы цветов дается расширение act (Adob Color Table).<br> Чтобы загрузить таблицу цветов, в меню вкладки Color Table (Таблица цве тов) выполните команду Load Color Table (Загрузить таблицу цветов). Най дите файл, содержащий нужную вам таблицу, и нажмите кнопку Открыть.<br> Transparency (Прозрачность) делает возможным помещение не прямоуголь ных графических объектов на фон Web-страницы. Фоновая прозрачность поддерживаемая форматами GIF и PNG, сохраняет прозрачные пикселы в изображении.<br> Внимание<br> Большинство изображений, просматриваемых в Web, созданы с использованием дисплеев с цветом в 24" бита, но многие браузеры работают только с отображением в 8 бит (256 цветов), так что часто происходит так, что изображения часто содержат больше цветов, чем может обработать браузер. Браузеры используют технику, называемую dithering (смешивание), чтобы симулировать цвета, которые не могут быть отображены в стандартной цветовой системе.<br> Как и в случае с файлами Photoshop, при импортировании файлов Illustrator, Adobe GoLive создает копию исходного файла в формате, ориентированном на Web, и создает ссылку, которая связывает исходный файл с его копией. Если позднее вы делаете изменения в исходном изображении или изменяете размер объекта, Adobe GoLive автоматически модифицирует изображение-копию, когда вы возвращаетесь к странице, содержащей изображение.<br> Внимание<br> Автоматическая модификация не проявляется, если файл, размеры которого изменены, был в формате Flash или SVG, поскольку эти форматы являются векторными.<br> Adobe GoLive позволяет вам использовать для оформления Web-страницы файлы LiveMotion. Программа создает копию исходного файла в формате Flask и сохраняет связь между двумя файлами в форме разумного объекта LiveMotion. Если вы позднее делаете изменения в исходном изображении разумного объекта LiveMotion, программа автоматически модифицирует копию в формате Flash, когда вы возвращаетесь к странице, содержащей изображение. Поскольку формат Flash является векторным, не требуется никакой модификации, когда вы изменяете размер разумного объекта LiveMotion.<br> Хотя применение "разумных объектов" делает процесс работы более эффективным, может быть так, что вы уже имеете изображения в формате, подходящем для Web, которые хотели бы использовать на разрабатываемой Web-странице. Когда вы вставляете такое изображение на страницу, Adobe GoLive создает простую ссылку от HTML-страницы к изображению. Adobe GoLive поддерживает форматы GIF, GIF89a (для прозрачных изображений), JPEG, Progressive JPEG и PNG.<br> Чтобы вставить изображение, перетащите пиктограмму Image (Рисунок) с панели Basic (Основная) — <div style="text-align:center;"><img src="image/razumnye-obekty-i-ssylki_8.gif" alt=""Разумные" объекты и ссылки"></div>Object Palette (Палитра объектов) в окно документа или просто дважды щелкните мышью по пиктограмме (рис. 4.5). Затем выберите нужный графический файл и нажмите кнопку Открыть. Если вы используете изображение, формат которого не поддерживается стандартными браузерами, то изображение будет отображаться в виде пиктограммы.<br> Вы можете изменить размеры изображения, добавленного на Web-страницу.<br> <div style="text-align:center;"><img src="image/razumnye-obekty-i-ssylki_9.gif" alt=""Разумные" объекты и ссылки"></div><br> Рис. 4.5. А — Используйте эти органы управления для изменения размера рисунка; В — Выберите элемент списка, чтобы выровнять изображение<br> Чтобы настроить размер изображения в Adobe GoLive, достаточно выделить изображение, выбрать нужную единицу измерения в палитре Inspector (Инспектор) и ввести новые значения в поля Height (Высота) и Width (Ширина).<br> В первой главе мы уже рассматривали возможность использовать рисунки в качестве "сегментированной графики". Естественно, Adobe GoLive позволяет создавать такие карты изображений.<br> Чтобы создать подобную карту изображения, выделите рисунок на странице, и в палитре Inspector (Инспектор) на вкладке Моте (Дополнительно) взведите флажок в независимом переключателе Use Map (Использовать в качестве карты). <br> Внимание<br> По умолчанию Adobe GoLive назначает уникальный идентификатор карте изображения и вводит его в текстовое поле Name (Имя). Можно заменить этот идентификатор, введя имя карты изображения в текстовом поле Name (Имя) самостоятельно. Чтобы указать используемый сегмент, щелкните мышью на один из инструментов области (выделение инструмента, прямоугольника или круга) на панели инструментов и потом потяните мышью на изображении, чтобы ограничить область ссылки.<br> Затем следует ввести: для ссылки использовать кнопку Browse (Просмотр), чтобы задать имя и адрес документа, на который будет указывать ссылка. Используйте текстовое поле Target (Цель) для указания фрейма, в который будет загружен документ, на который указывает ссылка.<br> </td> </tr> </table> <br><br> <h1>Создание новой Web-страницы</h1> <br> </h2> При запуске Adobe Gotive, программу по умолчанию, предлагает создать новую Web-страницу. Также, можно создавать новую страницу, используя команду меню File | New (Файл | Новая). После создания новой страницы измените ее наименование. Наименование отображается в строке названия документа в Web-браузере во время просмотра страницы. <br> Перед тем, как создавать страницу, стоит подумать о содержании страницы. Если вы планируете добавлять на страницу изображения или аудио- и видеоклипы, то следует начать с добавления нужных файлов в окно сайта. Окно сайта облегчает слежение за используемыми ресурсами.<br> Внимание<br> Если вы хотите, чтобы то же самое название страницы появилось на всех ваших Страницах, вы можете создать страницу с нужным названием и потом установить общие свойства (вкладка General (Общее)), чтобы Adobe GoLive создавал новые HTML-документы, используя исходную страницу в качестве шаблона.<br> Чтобы установить подобные общие свойства для запуска Adobe GoLive и открытия новых окон, документа, выполните команду меню Edit | Preferences (Правка | Свойства) и выделите пиктограмму General (Общее) на левой панели диалогового окна Preferences (Свойства).<br> На правой панели диалогового окна Preferences (Свойства) в группе органов управления Documents (Документы) выберите один из пунктов выпадающего списка At Launch (При запуске), чтобы задать действие, которое будет выполняться Adobe GoLive при его запуске.<br> <ul> <li> Create New Document (Создать новый документ), чтобы Adobe GoLive при запуске создавал и открывал окно нового HTML-документа.</li> <li> Show Open Dialog (Показывать диалог открытия файла), чтобы программа при запуске отображала диалоговое окно загрузки файла.</li> <li> Do Nothing (Ничего не делать), чтобы запускать программу без создания нового документа или отображения диалогового окна для загрузки существующего файла.</li> </ul> Также разработчик имеет возможность выбрать режим, в котором будет открываться окно редактируемого документа Adobe GoLive. Для этого следует выбрать элемент выпадающего списка Default Section (Вкладка, используемая по умолчанию).<br> Чтобы выделить файл, который должен быть использован в качестве шаблона для новых документов, взведите флажок в независимом переключателе New Document (Новый документ), а затем, при помощи кнопки Select (Выбор) выберите требуемый файл.<br> Флажок в независимом переключателе Write "Generator Adobe Go Live" (Добавить метку Adobe GoLive) служит, чтобы добавить тег метаданных <meta name«="generator" content-"Adobe GoLive 6"> В каждый файл, КО-торый вы создаете или сохраняете. Этот тег, по сути, выполняет рекламную функцию, указывая, в каком именно HTML-редакторе была разработана Web-страница.<br> Вы можете выбирать цвета для текста, который отображается на вашей странице, включая основной текст и текст ссылок. Также можно выбирать фоновый цвет для всей страницы. Выбранные вами цвета 'заменяют собой цвета, установленные по умолчанию в браузере пользователя. Вместо фонового цвета, как мы уже знаем, можно использовать и фоновое изображение. Но о том, как его устанавливать, мы поговорим несколько позже.<br> Для того чтобы установить цвет текста или фоновый цвет, щелкните мышью на пиктограмме Page (Страница), располагающейся в верхнем левом углу окна документа (рис. 4.6). В палитре Inspector (Инспектор) следует перейти на одноименную вкладку Page (Страница) и при помощи различных органов управления задать цвета для тех или иных текстовых объектов разрабатываемой Web-страницы. Мы можем использовать следующие поля:<br> <ul> <li> Text (Обычный текст), чтобы выбрать цвет для основного текста;</li> <li> Link (Гиперссылка), чтобы выбрать цвет для текста стандартной гиперссылки;</li> <li> Active Link (Активная гиперссылка), для выбора цвета, которым будет отображена ссылка в тот момент, когда пользователь наведет на нее курсор мыши;</li> <li> Visited Link (Пройденная ссылка), чтобы выбрать цвет для отображения уже Посещенной пользователем ссылки;</li> <li> Background Color (Цвет фона), чтобы задать фоновый цвет страницы.</li> </ul> Чтобы выбрать цвет, щелкните по цветовому полю. После этого будет активирована вкладка Color (Цвет), на которой и можно выбрать необходимый цвет. Для того, чтобы выбранный цвет был применен к искомому элементу оформления Web-страницы, следует взвести флажок в независимом переключателе, связанном с цветовым полем.<br> <div style="text-align:center;"><img src="image/sozdanie-novoj-web-stranicy_1.gif" alt="Создание новой Web-страницы"></div><br> Рис. 4.6. Инспектор свойств Web-страницы с активизированным окном выбора цвета<br> В первой главе, при рассмотрении основ языка HTML мы уже упоминали о том, что изображения можно использовать в качестве фона для Web-страниц. Естественно, зная, как это делается на уровне HTML, всегда можно вставить необходимый тег непосредственно в HTML-код разрабатываемой страницы, но все-таки Adobe GoLive предоставляет возможность сделать это более просто.<br> Для того чтобы добавить к Web-странице фоновое изображение, в основном окне документа щелкните мышью по вкладке Page (Страница), а затем активизируйте одноименную вкладку в палитре Inspector (Инспектор). После этого останется лишь взвести флажок в независимом переключателе, связанном с полем Image (Изображение) и выбрать файл с изображением, используя кнопку Fetch URL (Пойти за URL) или кнопку Browse (Просмотр).<br> </td> </tr> </table> <br><br> <h1>Создание выпадающих списков URL</h1> <br> </h2> Выпадающие списки URL позволят посетителям вашей страницы выбирать ссылки из меню. Для добавления такого списка на вашу страницу воспользуйтесь пиктограммой URL Pop-up (Выпадающий список URL) с вкладки Smart палитры Objects Palette (Палитра объектов). Перетащите ее в окно документа. В Inspector Objects (Инспектор объектов) нажмите кнопку New (Новый), чтобы создать новый элемент списка. Введите текст элемента в поле Label (Метка) и укажите URL для создаваемого элемента списка при помощи кнопки Fetch URL (Пойти за URL) или кнопки Browse (Просмотр). Следует обратить внимание на то, что Adobe GoUve по умолчанию создает один элемент списка, указывающий на корпоративный сайт Adobe. Вам вряд ли понадобится этот элемент, поэтому его можно удалить.<br> Для удаления элемента меню, выделите его и нажмите кнопку Delete (Удалить).<br> Для того чтобы удостовериться, что ссылки в созданном выпадающем списке URL работают правильно, просмотрите вашу страницу, используя браузер.<br> </td> </tr> </table> <br><br> <h1>Выравнивание и распределение объектов</h1> <br> </h2> Adobe GoLive оИяегчает вам четкое упорядочивание объектов на вашей странице. Для выравнивания объектов можно использовать панель инструментов или палитру Align (Выравнивание). Кроме того, вы можете использовать палитру Align (Выравнивание) и для распределения объектов по отношению друг к другу.<br> Внимание<br> Прежде чем выравнивать или распределять объекты, убедитесь что они расположены на макетной сетке.<br> Чтобы выровнять объект или группу объектов, выделите о помощью мыши нужный объект или их группу, и выполните одно из приведенных ниже действий.<br> <ul> <li> На панели инструментов нажмите кнопку выравнивания по горизонтали: Align Left (Выравнивание по левому краю), Align Center (Выравнивание по центру), или Align Right (Выравнивание по правому краю). Если необходимо выровнять объекты по вертикали/ то используйте кнопки Align Bottom (Выравнивание по нижнему краю), Align Center (Выравнивание по центру) или Align Top (Выравнивание по верхнему краю).</li> <li> На палитре Align (Выравнивание) в группе Align To Parent (Выравнивать по старшему объекту), можно использовать кнопки вертикального и горизонтального выравнивания. Кнопки выравнивания в палитре такие же, как и на панели инструментов.</li> </ul> Внимание<br> Поскольку Adobe GoLive не перемещает выделенный объект, если на яуш находится другой объект, то в зависимости от, выбранных объектов некоторые кнопки выравнивания могут быть недоступны.<br> Чтобы выровнять объект по отношению к другим объектам, выделите, их с помощью мыши. Для этого, выделив первый из объектов, выделяйте остальные, удерживая нажатой клавишу <Shflt>. Затем в палитре Align (Выравнивание) в группе Align Objects (Выравнивание объектов) нажмите кнопку горизонтального или вертикального выравнивания.<br> Помимо выравнивания объектов, BUM может пригодится возможность распределять объекты по отношению друг к другу. Выделите три или более объектов, которые вы хотите распределить относительно друг друга. В палитре Align (Выравнивание) находится группа кнопок Distribute Objects (Распределить объекты). Она позволяет перемещать выделенные объекты относительно друг друга.<br> Так же можно распределять объекты относительно самой Web-страницы, установив равные промежутки между ними по горизонтали и вертикали. Для этого используются кнопки группы Distribute Spacing (Установить интервалы).<br> <ul> <li> Кнопка Distribute Spacing Horizontally (Установить горизонтальные интервалы) перемещает объекты таким образом, чтобы расстояния между ними по горизонтали были одинаковыми.</li> <li> Кнопка Distribute Spacing Vertically (Установить вертикальные интервалы) перемещает объекты таким образом, чтобы расстояния между ними по вертикали были одинаковыми.</li> </ul> </td> </tr> </table> <br><br> <h1>Публикация сайта</h1> <h1>Файлы, входящие в состав сайта</h1> <br> </h2> В Adobe GoLive сайтом называется коллекция файлов на локальном жестком диске, которая используется для создания и управления Web-сайтом на общедоступном сервере в сети. Посетители сайтов, естественно, будут видеть далеко не все файлы, которые находятся на сервере. Они смогут увидеть только HTML-документы и иные файлы, которые входят в их состав.<br> Все файлы, которые входят в состав сайта, отображаются на вкладке Files (Файлы) основного окна сайта, которую мы уже рассматривали. Впрочем, следует отметить, что весьма полезна и вкладка Extras (Дополнительные), на которой отображаются дополнительные ресурсы сайта, скрытые от посетителей, такие как компоненты, разумные объекты, образцы Web-страниц, т. е. все служебные файлы (рис. 5.10).<br> <div style="text-align:center;"><img src="image/fajly-vhodjashhie-v-sostav-sajta_1.gif" alt="Файлы, входящие в состав сайта"></div><br> Рис. 5.10. Панели Files и Extras в окне сайта<br> Внимание<br> Adobe GoLive позволяет перемещать файлы с вашего рабочего стола в окно сайта. Однако, следует помнить, что если вы премещаете файлы сайта из од ной папки на рабочем столе в другую папку на том же столе, то ссылочная и формация не модифицируется.<br> Помимо отображения файлов основное окно сайта можно использовать для упорядочения нефайловых элементов и групп (здесь группами называются типы папок, хранящиеся скорее в предела сайта). Так например, элементы на панелях Files (Файлы) и Extras (Дополнения) попадают в постоянные папки, в отличие от элементов дизайна, цветовых схем и используемых шрифтов, для которых создаются специализированные хранилища.<br> Чтобы создать новую папку, активируйте панель, на который вы хотите расположить папку, а затем выполните одно из трех действий:<br> <ul> <li> нажмите кнопку New Folder (Новая папка) — — на панели инструментов;</li> <li> выполните команду меню Site | New | Folder (Сайт | Новое | Папка);</li> <li> перетащите пиктограмму Folder (Папка) с панели Site (Сайт) — <div style="text-align:center;"><img src="image/fajly-vhodjashhie-v-sostav-sajta_2.gif" alt="Файлы, входящие в состав сайта"></div>палитры объектов на панель, где вы собираетесь поместить папку.</li> </ul> После этого останется только указать имя папки и нажать клавишу <Enter>. Папка будет создана, и в нее можно будет переместить все необходимые элементы. Обычно простые элементы и файлы перемещаются перетаскиванием мышью.<br> Если вы удаляете файл, то он отправляется либо в корзину сайта — Site Trash (Корзина сайта), либо в корзину вашего компьютера. Файлы, отправленные в корзину сайта, могут быть перемещены в другую папку или же просто восстановлены.<br> Чтобы удалить какой-либо элемент сайта или отдельный файл, выделите нужный объект « выполните одно из следующих действий:<br> <ul> <li> нажмите кнопку Delete Selected Item (Удалить выделенный объект) —<div style="text-align:center;"><img src="image/fajly-vhodjashhie-v-sostav-sajta_3.gif" alt="Файлы, входящие в состав сайта"></div> — на панели инструментов;</li> <li> нажмите клавишу <DeIete>; </li> <li> выполните команду меню Edit |Delete (Правка |Удалить).</li> </ul> Команда меню Site | Clean Up Site (Сайт | Очистить сайт) совмещает набор функций в единой растраивающей процедуре:<br> <ul> <li> модификация панелей в окне сайта;</li> <li> удаление неиспользуемых ссылок, цветов и шрифтовых наборов;</li> <li> добавление использованных и удаление неиспользованных файлов.</li> </ul> Если первые две функции могут быть выполнены самостоятельно, то последняя выполняется только описываемой командой.<br> Внимание<br> Добавление или удаление файлов изменяет содержание панели Files (Файлы). Однако, это изменяет только содержание панели, а не папки, которую она представляет.<br> Прежде чем запускать процесс очистки сайта, следует задать его параметры. Для этого следует нажать кнопку Site Settings (Настройки сайта) — <div style="text-align:center;"><img src="image/fajly-vhodjashhie-v-sostav-sajta_4.gif" alt="Файлы, входящие в состав сайта"></div>— на панели инструментов или выполнить команду меню Sitel Settings (Сайт | Настройки). В появившемся диалоговом окне Site Settings (Настройки сайта) следует выбрать вкладку Clean Up Site (Очистить сайт) на левой панели и взвести флажок в независимом переключателе Site specific settings (Специфические настройки сайта) — рис. 5.11.<br> Затем следует настроить параметры процедуры при помощи независимых переключателей.<br> <ul> <li> Чтобы обновить отображение панели Files (Файлы), взведите флажок в независимом переключателе Refresh View (Обновить вид). Чтобы модифицировать панели External References (Внешние ссылки), Colors (Цвета) и Font Sets (Наборы шрифтов), следует взвести флажки в одноименных переключателях.</li> <li> Чтобы удалить неиспользованные элементы с панелей External References (Внешние ссылки), Colors (Цвета) и Font Sets (Наборы шрифтов), используйте флажки Unused External References (Неиспользованные внешние ссылки), Unused Colors (Неиспользованные цвета) и Unused Font Sets (Неиспользованные наборы шрифтов), располагающиеся в группе Remove (Удаление). </li> <li> Чтобы удалить неиспользованные файлы из сайта, отправив их в корзину, следует взвести флажок в переключателе Files not linked (Несвязанные файлы). </li> </ul> <div style="text-align:center;"><img src="image/fajly-vhodjashhie-v-sostav-sajta_5.gif" alt="Файлы, входящие в состав сайта"></div><br> Рис. 5.11. Раздал Clean Up Site диалогового окна Site Settings<br> Страницы сайта содержат ссылки к множеству присоединенных файлов: другим страницам в сайте (<href>, изображениям, показанным на странице (<img>), медиа элементам (<embed>) и т. д. Когда вы делаете такой путь абсолютным, показывается полный путь от коренной папки в файлу, на который сделана ссылка.<br> Пример. Страница /root/pages/info/page.html (где root — имя коренной папки) содержит изображение /root/images/image/gif. Абсолютный путь к файлу изображения—http://www.mysite/com/images/image/gif. Относительный путь будет записываться как .../.../images/image.gif.<br> Абсолютные пути полезны в следующих случаях.<br> <ul> <li> если форма соотносится со сценарием GGI на уровне директории сайта (или любой другой директории), любые ссылки к этому файлу обычно написаны как абсолютные;</li> <li> если общая навигационная панель используется на многих страницах, которые постоянно находятся в папках на разных иерархических уровнях, можно использовать абсолютную спецификацию пути повсюду для соотнесения с его файлами изображения, что позволит вам копировать и вставлять один и тот же блок HTML-кода во все страницы.</li> </ul> </td> </tr> </table> <br><br> <h1>ПУБЛИКАЦИЯ САЙТА</h1> <br> </h2> <ul> <li> Публикация, просмотр и управление сайтом <ul> <li> Индикация ошибок</li> <li> Проверка внешних ссылок</li> <li> Связь с FTP-сервером</li> <li> Методика обновления сайта</li> <li> Закачка сайта из WWW</li> </ul> </li> <li> Тестирование сайта</li> <li> Режимы просмотра</li> <li> Файлы, входящие в состав сайта</li> <li> Коллекции</li> <li> Общее цветовое оформление сайта</li> <li> Шрифты, используемые на сайте </li> </ul> </td> </tr> </table> <br><br> <h1>Индикация ошибок</h1> <br> </h2> Ошибки, распознаваемые Adobe GoLive, и их пиктограммы таковы: <br> <ul> <li> пиктограмма — <div style="text-align:center;"><img src="image/indikacija-oshibok_1.gif" alt="Индикация ошибок"></div>— сигнализирует о наличии испорченных ссылок в файле Web-страницы;</li> <li> пиктофамма — <div style="text-align:center;"><img src="image/indikacija-oshibok_2.gif" alt="Индикация ошибок"></div>— говорит о пустой странице; </li> <li> пиктограмма — <div style="text-align:center;"><img src="image/indikacija-oshibok_3.gif" alt="Индикация ошибок"></div>— показывает отсутствующий файл; </li> <li> файлы с иными проблемами отображаются значком с изображением знака вопроса — <div style="text-align:center;"><img src="image/indikacija-oshibok_4.gif" alt="Индикация ошибок"></div>— в колонке Name (Имя). </li> </ul> Пиктограмма ошибки в колонке Status (Статус) для папки показывает один или более файлов с данной ошибкой в папке. <br> Чтобы исправить испорченную ссылку на странице, помеченной пиктограммой — <div style="text-align:center;"><img src="image/indikacija-oshibok_5.gif" alt="Индикация ошибок"></div>, активируйте палитру Inspector (Инспектор). Дважды щелкните на странице с испорченной ссылкой на панели Files (Файлы). Если сразу найти ошибку трудно, обратите внимание на две наиболее часто встречающиеся проблемы: <br> <ul> <li> проверьте отсутствующие графические объекты на странице (например, заместитель изображения там, где должен быть рисунок); </li> <li> найдите предупреждения о неработающих ссылках, т. е. объект или текст выделенный красным (если выделенных объектов нет, нажмите кнопку Links Warnings (Предупреждения о ссылках) на панели инструментов). </li> </ul> Затем выделите объект или текст на странице, ссылка которой нуждается в исправлении, и проверьте ссылку в текстовом поле Source (Источник) или | URL Inspector (Инспектор URL). А затем создайте правильную ссылку, например, при помощи кнопки Fetch URL (Пойти за URL).<br> Файл, на который указывает ссылка на. Web-странице, может просто отсутствовать. Отсутствующий файл, .отмечаемый пиктограммой, не может быть найден, вероятно, по причине того, что вы.переименовали или переместили его.<br> Чтобы найти и исправить ссылку на отсутствующий файл, выделите его в списке Missing Files (Отсутствующие Файлы) вкладки Errors (Ошибки) (предварительно переключив окно сайта в расширенный режим, т. е. нажав кнопку в правом нижнем углу окна). Затем, проверьте следующие варианты:<br> <ul> <li> проверьте панель Files (Файлы), чтобы увидеть, не находится ли там в списке файл под другим именем, если да, то переделайте ссылку на переименованный файл;</li> <li> проверьте панель Error (Ошибки) или палитру Inspector (Инспектор), чтобы убедиться, что URL указан без ошибок;</li> <li> выполните команду меню Window | In & Out Links (Окно} Входящие и исходящие ссылки) (рис. 5.1), чтобы определить, какая страница соотносится с файлом.</li> </ul> <div style="text-align:center;"><img src="image/indikacija-oshibok_6.gif" alt="Индикация ошибок"></div><br> Рис. 5.1. Окно сайта с активированной вкладкой ошибок и панель In & Out Links </td> </tr> </table> <br><br> <h1>Коллекции</h1> <br> </h2> Коллекцией называется набор файлов страниц, определенный в навигационном, ссылочном или дизайновом режимах просмотра. Коллекции идентифицируются именем и выделяются цветом. Можно начинать работать с пустой коллекцией и добавлять в нее страницы, или же начать работать со страницами, постепенно создавая из них коллекцию.<br> Чтобы создать пустую коллекцию, выполните команду меню Diagram | Create Collection (Схема | Создать коллекцию). Затем необходимо будет в появившемся диалоговом окне задать наименование для создающейся коллекции, как это показано на рис. 5.12.<br> Чтобы добавить страницу в коллекцию иди удалить страницу из коллекции, выделите страницу в одном из режимов просмотра (навигационном, ссылочном или дизайна). Затем выполните команду меню Diagram | Reselect Coflection (Схема | Переключить коллекцию) и в списке этого элемента меню выберите необходимую коллекцию. Выбор новой коллекции добавляет страницу в нее. Выбор текущей коллекции удаляет страницу оттуда.<br> Ресурсами сайта являются файлы, нефайловые объекты и отрывки, которые вы собираете для того, чтобы использовать в сайте. Они перечисляются в шести панелях основного окна сайта.<br> <ul> <li> Files (Файлы) содержит файлы HTML-страниц и медиа-файлы, которые используются в оформлении HTML-страниц.</li> <li> External (Внешнее) содержит URL-адреса и электронные адреса для использования в гиперссылках на HTML-страницах.</li> <li> Diagrams (Диаграммы) содержит прототипы для дизайна сайта.</li> <li> Colors (Цвета) содержит перечисление цветов, которые вы можете использовать для оформления текста или иных объектов на HTML-страницах.</li> <li> Foat Sets (Шрифты) перечисляет наборы шрифтов, которые могут быть назначены для текста в HTML-страницах.</li> <li> Extras (Дополнительное) содержит компоненты, которые вы можете ис-j пользовать на HTML-страницах.</li> </ul> <div style="text-align:center;"><img src="image/kollekcii_1.gif" alt="Коллекции"></div><br> Рис. 5.12. Диалоговое окно Create Collection<br> </td> </tr> </table> <br><br> <h1>Методика обновления сайта</h1> <br> </h2> Во время первой загрузки весь сайт копируется на сервер. Последующие загрузки того же сайта являются обычными модификациями, которые синхронизируют локальные и располагающиеся на сервере файлы. Существует два основных варианта модификации сайта.<br> <ul> <li> Основой процесс постепенной загрузки копирует только новые файлы сайта и те файлы, даты локальных модификаций которых более поздние, чем даты модификаций соответствующих файлов на сервере. Если оба файла, на сервере я локальный, были модифицированы, и файл на сервере имеет более позднюю дату модификации, то локальный файл на вашем компьютере не будет загружаться с него.</li> <li> Загрузка модифицированных элементов копирует только новые файлы сайта и те файлы, которые были модифицированы в Adobe GoLive со времени последней загрузки. Бели локальный файл был модифицирован за пределами Adobe GoLive, то он не будет загружен, независимо от даты модификации. То есть, загрузка модифицированных элементов базируется на предположении, что пользователь изменяет файлы только при помощи Adobe GoLive.</li> </ul> <div style="text-align:center;"><img src="image/metodika-obnovlenija-sajta_1.gif" alt="Методика обновления сайта"></div><br> Рис. 5.4. Диалоговое окно FTP Browser<br> Можно также производить выборочные загрузки, которые будут переносить на сайт в сети только файлы, выбранные вами. Этот метод загрузки достаточно полезен, если модификация причиняет проблемы, например, если система вашего компьютера дала сбой в процессе постепенной загрузки и на сервере оказались не загрузившиеся до конца файлы, которые нуждаются в замещении.<br> Чтобы загрузить сайт на FTP-сервер, откройте окно сайта и подключитесь к соответствующему серверу. Затем выполните одно из приведенных ниже действий.<br> <ul> <li> Нажмите кнопку Incremental Uploading (Постепенная загрузка) на панели инструментов или же выполните команду меню Site | FTP Server | Incremental Uploading (Сайт | Сервер FTP | Постепенная загрузка).</li> <li> Нажмите кнопку Upload Modigied Items (Загрузить модифицированные элементы) — на панели инструментов или выполните команду меню Site | FTP Server | Upload Modigied Items (Сайт | Сервер FTP [Загрузить модифицированные элементы).</li> <li> Выделите папку или отдельные файлы, которые должны быть загружены на панели Files (Файлы) в основном окне сайта, и нажмите кнопку Upload Selection (Загрузить выделенное) на панели инструментов или выполните команду меню Site FTR Server Upload Selection (Caйт | Сервер FTP |Загрузить выделенные элементы).</li> </ul> Загрузки выполняются согласно параметрам, которые вы можете оставить используемыми по умолчанию, а можете изменить по своему желанию.<br> </td> </tr> </table> <br><br> <h1>Общее цветовое оформление сайта</h1> <br> </h2> Вы можете собирать цвета для последующего применения в панели Colors (Цвета). Таким образом, вам не нужно будет восстанавливать часто используемые цвета из различных окон выбора цвета. Достаточно будет использовать панель Colors (Цвета) для выбора цвета, который будет регулярно применяться в оформлении тех или иных элементов сайта. Цвета можно перетаскивать мышкой к выделенным частям текста или объектам на странице.<br> Панель Colors (Цвета) перечисляет цвета отдельно или группами. Для каждого цвета указывается имя объекта, имя HTML (текст), значение (контрольный код HTML).<br> Чтобы добавить цвет в палитру Colors (Цвета), выберите цвет в основном диалоговом окне создания цветов, а затем просто перетащите мышкой его в палитру Colors (Цвета), как это показано на рис. 5.13.<br> <div style="text-align:center;"><img src="image/obshhee-cvetovoe-oformlenie-sajta_1.gif" alt="Общее цветовое оформление сайта"></div><br> Рис. 5.13. Добавление цвета в палитру Colors<br> </td> </tr> </table> <br><br> <h1>Проверка внешних ссылок</h1> <br> </h2> Внешними ссылками мы называем те, которые указывают на какие-либо ресурсы, находящиеся вне нашего сайта. Естественно, разработчик Web-страницы не может контролировать внешние ссылки с такой же легкостью как внутренние, хотя быпотому, что владелец ресурсов, на которые мы ссылаемся, может переместить их, переименовать или просто удалить. Поэтому процедура проверки внешних ссылок заметно отличается от процедуры проверки внутренних ссылок.<br> Чтобы проверить внешние ссылки сайта, вам необходимо иметь активное подключение к Интернет. Откройте окно сайта и перейдите на панель Ехteraal (Внешнее). Затем следует выполнить команду меню Site | Check External Links (Сайт ( Проверить внешние ссылки). Колонка статуса вкладки External (Внешнее) окна сайта отразит каждую неправильную ссылку помеченной пиктограммой, <div style="text-align:center;"><img src="image/proverka-vneshnih-ssylok_1.gif" alt="Проверка внешних ссылок"></div> рис. 5.2).<br> <div style="text-align:center;"><img src="image/proverka-vneshnih-ssylok_2.gif" alt="Проверка внешних ссылок"></div><br> Рис. 5.2. Внешний вид панели External с отображением внешних ссылок<br> </td> </tr> </table> <br><br> <h1>Публикация, просмотр и управление сайтом</h1> <br> </h2> Публикацией сайта называется его загрузка на Web-сервер, где он может быть посещен пользователями сети Интернет. Также в понятие публикации входит изменение и обновление сайта как полностью, так и частично.<br> Процесс публикации довольно прост. Он заключается в трех шагах:<br> <ul> <li> подготовка сайта к публикации;</li> <li> соединение с Web-сервером;</li> <li> загрузка подготовленного материала на Web-сервер.</li> <li> Процесс подготовки сайта к публикации тоже не особенно сложен:</li> <li> проверьте сайт на наличие всех необходимых и запланированных страниц, изображений и прочих составных частей;</li> <li> проверьте его на наличие ошибок;</li> <li> проверьте сайт на адекватность, отображения в различных версиях целевых браузеров.</li> </ul> Обязательно следует проверить сайт на наличие оборванных и неверных ссылок, убедиться, что все ссылки ведут на реально существующие ресурсы в Web и для каждой новой созданной страницы, добавляемой к сайту, на остальных страницах присутствуют соответствующие гиперссылки.<br> Естественно, все процедуры, выполняемые перед публикацией сайта должны производиться в основном окне всего сайта, а не в режиме разработки отдельных HTML-документов. Сначала рекомендуется проверить ссылки в режиме навигации сайта. Для этого в основном окне сайта следует активировать выпадающий список режимов отображения, который вызывается нажатием на маленькую кнопку со стрелкой-треугольником в верхнем правом углу окна. В выпадающем списке режимов необходимо выбрать пункт Navigation (Навигация).<br> Чтобы проверить страницу на наличие оборванных ссылок в навигационном режиме просмотра, в выпадающем списке режимов выберите элемент Spotlight Pending (Подсвечивать оборванные ссылки). Подсветка производится при помощи стрелок, указывающих направление ссылки. <br> Мертвые ссылки нужно либо удалить, либо исправить. Дважды щелкните на страницу.являющуюся источником неразрешенной, висящей ссылки. Это действие открывает страницу в окне документа и позволяет разработчику изменить ее. <br> Если какая-либо Web-страница вашего сайта содержит ошибку, то колонка статуса панели Files (Файлы) сигнализирует об этом при помощи пиктограммы. Пиктограмма, свидетельствующая об ошибке, появляется, также, рядом с файлом в навигационном режиме просмотра и режиме просмотра | ссылок (вкладка Links (Ссылки) навигационного режима). <br> </td> </tr> </table> <br><br> <h1>Режимы просмотра</h1> <br> </h2> Для работы с режимами просмотра существуют несколько команд. Наиболее часто используется две из них — Move To Center (Переместить в центр) и Display Partial Tree (Показать, частичное дерево), которые располагаются в контекстном меню, вызываемом щелчком правой кнопкой мыши. Первая команда ограничивает просмотр входящих и исходящих ссылок. Вторая ограничивает навигационный режим просмотра до частичного показа одной или нескольких частей иерархического дерева сайта. Например, она показывает выбранную страницу и несколько соседних страниц, находящихся с ней в дочерних, родительских или параллельно родственных отношениях.<br> Самый простой путь ограничить область просмотра — это свернуть или вернуть ее. Но можно использовать и соответствующие команды контекст ного меню.<br> Чтобы отобразить только часть дерева иерархии, выделите одну или несколько страниц на центральной панели навигационного режима, а затем выполните команду их контекстного меню Display Partial Tree (Показать частичное дерево).<br> Для контроля над отображением деталей в любом окне Adobe GoLive используется Controller Visit (Контроллер просмотра). В работе с панелями контроллер определяет внешний вид и порядок отображения.<br> Чтобы вывести контроллер на экран, следует выполнить команду меню Window | View (Окно | Вид) и щелкнуть мышью по любой панели в окне. Контроллер просмотра управляет внешним видом панелей (рис. 5.8).<br> <div style="text-align:center;"><img src="image/rezhimy-prosmotra_1.gif" alt="Режимы просмотра"></div><br> Рис. 5.8. Окно просмотра сайта с активированным контроллером просмотра<br> Настройки отображения могут быть изменены для каждой из панелей просмотра. И если на экране отображаются как центральная, так и периферийные панели просмотра, то изменения могут быть применены только к активной на данный момент панели.<br> Контроллер просмотра позволяет настроить панели так, что те будут отображать только ресурсы определенного типа, например, графические файлы или циклические ссылки. Этот процесс обычно называют фильтрацией. Фильтрацию можно применять в навигационном, ссылочном и структурном режимах просмотра. Если режим просмотра отображает как центральную, так и периферийные панели, то фильтр применяется только к активной в данный момент панели.<br> Процесс фильтрации определенно полезен особенно в режиме просмотра ссылок, как средство упрощения просмотра сложных сайтов.<br> Чтобы установить фильтр в режиме просмотра, следует в контроллере просмотра выбрать вкладку Filter (Фильтр) и при помощи независимых переключателей выбрать комбинацию отображаемых на активной панели элементов. Внешний вид этой вкладки показан на рис. 5.9.<br> <div style="text-align:center;"><img src="image/rezhimy-prosmotra_2.gif" alt="Режимы просмотра"></div><br> Рис. 5.9. Вкладка Fitter контроллера просмотра<br> </td> </tr> </table> <br><br> <h1>Шрифты, используемые на сайте</h1> <br> </h2> Если вы собираете наборы шрифтов на панели Font Sets (Шрифты), вы можете перетаскивать любой из них к выделенному тексту в окне документа. Когда сайт открыт, шрифты на одноименной панели также доступны в подменю Туре | Font (Печать | Шрифт.)<br> Чтобы импортировать набор шрифтов в сайт со страницы в сайте, выделите текст, использующий набор шрифтов на странице в окне документа. Перетащите выделение на панель Font Sets (Шрифты). Новый шрифт появится на панели как "безымянный". Переименуйте созданный набор.<br> Чтобы добавить шрифт в набор шрифтов сайта, выделите панель Font Sets (Шрифты), вызовите контекстное меню и выполните команду New Font Set (Новый набор шрифтов). А затем останется лишь внести шрифты в этот набор при помощи палитры Inspector (Инспектор), как это показано на рис. 5.14. <br> <div style="text-align:center;"><img src="image/shrifty-ispolzuemye-na-sajte_1.gif" alt="Шрифты, используемые на сайте"></div><br> Рис. 5.14. Редактирование набора шрифтов<br></td> </tr> </table> <br><br> <h1>Связь с FТР-сервером</h1> <br> </h2> Вам нужно связаться с сервером FTP, прежде чем вы сможете загружать, скачивать сайт или производить любые операции по перемещению файлов.<br> Обычно для передачи файлов на сервер используется FTP-протокол.<br> Прежде чем вы сможете связаться с сервером в первый раз, вы должны установить правила доступа к нему.<br> Выполните команду меню Edit | Servers (Правка | Серверы). В ответ на это действие будет отображено диалоговое окно Available Servers (Доступные серверы), в котором отображается список доступных серверов (рис. 5.3).<br> <div style="text-align:center;"><img src="image/svjaz-s-ftr-serverom_1.gif" alt="Связь с FТР-сервером"></div><br> Рис. 5.3. Диалоговое окно Available Servers<br> Нажмите на кнопку New Item (Новый элемент), и выполните следующие действия, используя значения, предложенные администратором сервера FTP:<br> <ul> <li> введите адрес сервера в текстовом поле Server (Сервер);</li> <li> введите логин пользователя в текстовом поле Username (Имя пользователя);</li> <li> введите пароль в текстовом поле Password (Пароль);</li> <li> введите имя стартового каталога, в текстовом поле Directory (Каталог).</li> </ul> Совет<br> При помощи все того же диалогового окна Available Servers (Доступные серверы) можно изменять настройки серверов, с которыми работает пользователь.<br> Панель FTP в первичном окне сайта — это клиент FTP, который вы используете, чтобы связаться с Web-серверами для загрузки и модификаций сайта. Но на самом деле Adobe GoLive имеет два встроенных FTP-клиента.<br> <ul> <li> Панель FTP в окне сайта для загрузки и модификации Web-сайтов. Этот клиент работает с набором команд, которые разрешают постепенную загрузку или скачивание, экспорт и т. д.</li> <li> Браузер FTP для перемещения файлов.</li> </ul> Оба клиента отображают в виде списка файлы и папки в текущей директории вместе с размером файла, датой модификации и типом файла, Палитра Inspector (Инспектор) содержит дополнительную информацию об отдельных папках и файлах.<br> Чтобы связаться с текущим FTP сервером, из панели FTP в главном окне, откройте сайт и нажмите кнопку FTP Server connect/disconnect (Подключиться/Отключиться от FTP-сервера) — <div style="text-align:center;"><img src="image/svjaz-s-ftr-serverom_2.gif" alt="Связь с FТР-сервером"></div>— на панели инструментов или же выполните команду меню Site| FTP Server | Connect (Сайт | FTP-сервер | Подключиться), Содержимое директории на сервере отобразится на панели FTP.<br> Прежде, чем устанавливать доступ FTP, убедитесь, что настройки TCP/IP правильно установлены в вашей системе.<br> Чтобы связаться с сервером FTP из браузера FTP, выполните команду меню Ffle | FTP Browser (Файл | Браузер FTP). После этого будет отображено диалоговое окно FTP Browser (Браузер FTP), внешний вид которого показан на рис. 5.4.<br> Затем следует г выпадающем списке Server (Сервер) выбрать из списка серверов тот, к которому необходимо подключиться для модификации сайта, а затем нажать кнопку Connect (Подключиться). После этого начнется процесс передачи файлов на сервер, который можно оборвать принудительно при помощи кнопки Stop (Стоп). </td> </tr> </table> <br><br> <h1>Тестирование сайта</h1> <br> </h2> Следует сказать несколько слов о режимах просмотра Web-сайтов.<br> Режимы просмотра — это варианты графического отображения страниц сай та и ссылок, их соединяющих в Adobe GoLive. Существуют три режима просмотра разрабатываемого сайта.<br> <ul> <li> Режим просмотра ссылок показывает страницы сайта и все гиперссылки, которые их соединяют.</li> <li> Режим навигации показывает навигационную иерархию сайта, т. е. дре вовидную логическую структуру, которая создается опять-таки из Web страниц и ссылок, их соединяющих.</li> <li>Режим просмотра структуры показывает иерархию файлов сайта, древовидную структуру каталогов, подкаталогов и их содержимого.</li> </ul> Для того чтобы активировать один из этих режимов просмотра, следует нажать на кнопку Navigation View (Вид навигации), расположенную на основной инструментальной панели. Эта кнопка открывает диалоговое окно с отображением структуры сайта в режиме навигации, о котором Мы только что говорили. Если потребуется использовать другой режим отображения структуры сайта, следует вызвать меню этого окна при помощи кнопки в его верхнем правом углу. Помимо всего прочего, данное меню содержит группу опций позволяющих добавлять различные.панели к основному окну режима навигации (рис. 5.7).<br> <ul> <li> Panorama Pane (Панорамная панель) показывает схему сайта в общем виде, как бы "с высоты птичьего полета", что позволяет вам охватить весь сайт одним глазом. Этот режим просмотра содержит окно просмотра связанное с текущим видом в основном окне. Область просмотра можно перемещать, двигая просмотровое окно. С панорамной панелью можно производить те же действия, что и с общим видом сайта, например, выделять страницы или перемещать страницы с помощью мыши, чтобы сделать нужную страницу дочерней или, наоборот родительской по отношению к другой странице. Панорамная панель активна во всех режимах просмотра.</li> <li> Панель Scratch Pane (Панель доводки) показывает два вида файлов, хранящихся в корневой папке сайта и перечисленных в панели File (Файлы) первичного окйа сайта: страницы HTML, не являющиеся частью навигационной иерархии сайта, и различные медиа-файлы, такие как графика, видео или звук, не связанные ни с одним их HTML-файлов, перечисленных на панели Files (Файлы). Существующая возможность перетаскивать HTML-страницы с панели Scratch Pane (Панель доводки) в основное окно режима навигации позволяет создавать части дерева сайта иерархии страниц и добавлять их в необходимое место вашего сайта.</li> <li> Reference Раnе (Справочная панель) показывает медиа-объекты, расположенные «а выделенной НТМL- cтранице или нескольких выделенных страницах.</li> </ul> Внимание<br> Справочная панель доступна во всех режимах просмотра.<br> <div style="text-align:center;"><img src="image/testirovanie-sajta_1.gif" alt="Тестирование сайта"></div><br> Рис. 5.7. Панель навигации сайта с открытыми панелями / Panorama Pane и Scratch Pane<br> </td> </tr> </table> <br><br> <h1>Закачка сайта из WWW</h1> <br> </h2> Синхронизацию можно производить не только с локальной копии на сервер, но и в обратную сторону, т. е. разработчик имеет возможность закачать версию сайта с сервера на свой компьютер.<br> Для получения сайта с сервера тоже можно использовать два метода:<br> <ul> <li> основной процесс копирует только те файлы с сайта, даты модификаций которых на сервере более поздние, чем они же на соответствующих местных файлах;</li> <li> выборочное скачивание копирует только те файлы, которые выбрали на сервере вы.</li> </ul> Чтобы модифицировать локальную версию сайта путем его скачивания из WWW, откройте сайт и соединитесь с FTP сервером, используя кнопку FТР Server Connect (Соединение с FTP-сервером), располагающуюся на основной панели инструментов. После этого необходимо выполнить одно из следующих действий:<br> <ul> <li> выполнить команду меню Site | FTP Server | Incremental Download (Сайт | Сервер FTP | Постепенное скачивание);</li> <li> выделить папки или отдельные файлы, а затем выполнить команду меню Site | FTP Server j Download Selection (Сайт [Сервер FTP | Загрузить выделенное)</li> </ul> Совет <br> На самом деле в Adobe GoLive встроен полноценный FTP-клиент, поэтому его можно использовать не только для синхронизации разрабатываемых файлов, но и для обычной работы со сторонними РТР-серверами.<br> Вам может понадобиться изменить параметры ваших сетевых настроек, чтобы получить доступ в Интернет. Например, ваш провайдер может потребовать от вас Использования прокси-сервера из соображений безопасности или использовать пассивный режим, чтобы работать с защитой, которая запрещает входящие связи.<br> Чтобы установить доступ в Интернет, выполните команду меню Edit | Preferences (Правка | Свойства). Затем выделите пиктограмму Network (Сеть) —<div style="text-align:center;"><img src="image/zakachka-sajta-iz-www_1.gif" alt="Закачка сайта из WWW"></div>— на левой панели и установите необходимые настройки (рис. 5.6).<br> <div style="text-align:center;"><img src="image/zakachka-sajta-iz-www_2.gif" alt="Закачка сайта из WWW"></div><br> Рис. 5.6. Диалоговое окно Preferences x с активным разделом Network<br> <ul> <li> Если провайдер указывает адрес FTP-прокси, то взведите флажок в независимом переключателе Use FTP proxy (Использовать FTP-прокси) и в полях Host (Узел) и Port (Порт) введите адрес прокси-сервера и.номер порта.</li> <li> Если провайдер указывает адрес. НТТР-прокси, то взведите флажок в независимом переключателе Use HTTP proxy (Использовать FTP-прокси), и в полях Host (Узел) и Port (Порт) введите адрес прокси-сервера и номер порта.</li> <li> Если вы проверяете во время загрузки сайта ошибки, взведите флажок в независимом переключателе Keep connections alive (Оставаться на связи). Дело в том, что после завершения операций по синхронизации AdobeGoLive автоматически разрывает соединение с провайдером. И для того, чтобы закачать на сервер исправленную версию сайта, .следует снова соединяться с сервером. Если вы предполагаете, что выявленные после загрузки ошибки будут ликвидированы достаточно быстро, то вы можете не разрывать соединение, чтобы экономить свое время.</li> </ul> </td> </tr> </table> <br><br> <h1>Инструменты поиска</h1> <h1>ИНСТРУМЕНТЫ ПОИСКА</h1> <br> </h2> <ul> <li> Инструменты поиска</li> <li> Текстовый поиск</li> <li>Поиск в HTML-коде</li> <li>Поиск файлов</li> <li>Отчеты </li> </ul> </td> </tr> </table> <br><br> <h1>Инструменты поиска</h1> <br> </h2> Естественно, если разработчик создает маленький сайт, состоящий из двух-трех страничек, он способен хранить в памяти все его составляющие. Разработчик знает, на какой странице располагается тот или иной текст, и ему нет нужды прибегать к специальным возможностям поиска. Однако, если разрабатываемый или поддерживаемый сайт достаточно велик, без этих средств уже не обойтись. Представим простую ситуацию, когда на сайте ежедневно публикуется несколько статей, и в один далеко не прекрасный момент один из авторов заявляет, что у него изменился адрес электронной почты, который указывается вместе с именем автора в каждой статье. Неужели придется вручную перебирать все Web-страницы, входящие в состав сайта, и менять там адрес? На самом деле, подобная ситуация может быть решена достаточно легко. Используя многофункциональные средства поиска Adobe GoLive, найти все вхождения нужной нам-строки на всех страницах, и автоматически поменять этот текст не составит труда.<br> Используя инструменты поиска Adobe GoLive, вы можете найти и заменить элементы текстам! кода HML в любом файле сайта. Помимо этого, Adobe GoLive позволяет генерировать мощные отчеты, в которых отображается информация о каждом аспекте сайта, начиная с перечисления ошибок на страницах, например, "битые" ссылки, и заканчивая перечислением страниц, содержащих некоторые специфические типы компонентов, такие, как например, Flash-ролики.<br> </td> </tr> </table> <br><br> <h1>Отчеты</h1> <br> </h2> Панель Site Reports (Отчеты сайта) диалогового окна Find (Поиск) позволяет осуществлять поиск файлов по обширному списку критериев. А поскольку отчеты сайта доступны для просмотра такими же способами, что и сами сайты, они могут обеспечить дополнительный набор фильтруемых режимов просмотра. Внешний вид этой панели показан на рис. 6.6.<br> <div style="text-align:center;"><img src="image/otchety_1.gif" alt="Отчеты"></div><br> Рис. 6.6. Вкладка Site Reports диалогового окна Find<br> Для получения отчета вы определяете условия поиска на одной или нескольких вкладках панели Site Reports (Отчеты сайта). Запрос может быть простым или составным. Составные запросы могут содержать несколько критериев на одной или нескольких вкладках.<br> Запросы, которые используют более чем один критерий, применяют логику "И"; например, если вы определяете запрос, чтобы показать файлы, которые были созданы более чем две недели назад и содержат внешние ссылки, отчет покажет только те файлы, созданные более двух недель назад, которые содержат внешние ссылки.<br> Теперь рассмотрим краткий перечень вкладок, располагающихся на панели Site Reports (Отчеты сайта).<br> <ul> <li> Вкладка File Info (Информация о файле) позволяет задавать критерии поиска файлов по размеру в байтах, времени загрузки, дате модификации и дате создания. Для файлов HTML независимый переключатель Download Takes (Загрузка занимает) позволяет учитывать все, из чего состоит страница (изображения, клипы QuickTime и т. д.) при подсчете времени загрузки.</li> <li> Вкладка Errors (Ошибки) показывает страницы с отсутствующими атрибутами изображений, проблемными заголовками, ошибками в HTML и иными ошибками отображения страниц в браузерах.</li> <li> Вкладка Site Objects (Объекты сайта) показывает страницы в сайте, которые используют, определенные компоненты, адреса, шрифты, наборы шрифтов и наборы цветов.</li> <li> Вкладка Links (Ссылки) показывает страницы с внешними ссылками, ссылками на файлы с определенным расширением и ссылками с одним или более протоколами.</li> <li> Вкладка Misc (Разное) показывает страницы, располагающиеся на определенном количестве переходов по гиперссылкам относительно исходной страницы.</li> </ul> Кнопка Search (Поиск) активизирует поиск. Результаты отображаются в диалоговом окне, внешний вид которого показан на рис. 6.7.<br> <div style="text-align:center;"><img src="image/otchety_2.gif" alt="Отчеты"></div><br> Рис. 6.7. Диалоговое окно о результатами поиска<br> В диалоговом окне, отображающем результаты поиска, существуют три вкладки, представляющие информацию в различных форматах.<br> <ul> <li> Files (файлы) отображает таблицу файлов, которые соответствуют запросу. Колонки сходны с колонками на панели Files (Файлы) окна сайта: имя, статус, размер и т. д.</li> <li> Navigation (Навигация) обеспечивает тот же графический вид сайта, предлагаемый обычным навигационным режимом просмотра. Однако файлы, которые соответствуют запросу, подсвечены, а их вид не может быть изменен.</li> <li> Structure (Структура) обеспечивает три вида иерархии файлов вашего сайта, в которые входят только файлы, соответствующие запросу. Также показаны папки, содержащие соответствующие файлы, папки, содержащие эти папки, и так далее,</li> </ul> Чтобы отредактировать страницу, показанную в отчете сайта, выделите страницу в одной из панелей отчета. Здесь возможно выделение страниц, но не открытие их. Затем откройте режим навигации, просмотра или режим ссылок сайта. Страница, которую вы выделили на панели отчета, также останется выделенной в этих режимах. Откройте выделенную страницу в окне документа и отредактируйте ее. </td> </tr> </table> <br><br> <h1>Поиск файлов</h1> <br> </h2> Вы можете найти отдельные файлы или объекты (такие как цвета и адреса электронной почты) в файлах, входящих в состав сайта. Это свойство, в частности, полезно, если у вас большой сайт с десятками или даже сотнями страниц. Вместо прокручивания длинного списка файлов в основном окне сайта, вы можете ввести полное имя файла, его часть или URL.<br> Чтобы осуществить эту возможность, откройте файл сайта и диалоговое окно Find (Поиск). Затем следует перейти на вкладку in Site (На сайте), внешний вид которой показан на рис. 6.5.<br> <div style="text-align:center;"><img src="image/poisk-fajlov_1.gif" alt="Поиск файлов"></div><br> Рис. 6.5. Вкладка in Site диалогового окна Find<br> После того как фрагмент имени будет указан в текстовом поле, и при помощи выпадающего списка будут установлены параметры поиска, следует нажать кнопку Find (Поиск).<br> Adobe GoLive показывает первый найденный элемент в окне сайта. Если вы ищете файлы, соответствия появляются либо на панели Files (Файлы), либо на панели просмотра сайта Site (Сайт), в зависимости от того, какая панель была активирована в окне сайта когда вы начали поиск. Другие элементы, которые вы ищете, появляются в соответствующих им панелях. Так например, цвета появляются на панели Color (Цвет).<br> Для продолжения поиска нажмите кнопку Find Next (Найти следующее). </td> </tr> </table> <br><br> <h1>Поиск в HTML-коде</h1> <br> </h2> Панель Element (Элемент) в диалоговом окне Find (Поиск) позволяет вам находить и производить различные действия над элементами кода HTML, используя механизм поиска HTML, который предлагает несколько преимуществ перед простым действием find & Replace (Найти и заменить). Поиск обычного типа ищет буквенные текстовые строки. Например, вам необходимо найти строку: <body bgcoior="red">. Используя обычный механизм поиска, вы не найдете вхождения этого тега, которым недостает знаков кавычек или которые имеют другие включенные атрибуты. Так, строки <body bgcolor=red> ИЛИ <body text="black" bgcolor»"red4> не будут найдены при обычном поиске. Механизм поиска элементов HTML, с другой стороны, понимает структуру языка и в состоянии найти эти варианты. Кроме того, панель Element (Элемент) позволяет вам быстро вставлять, удалять или изменять атрибуты существующих тегов HTML.<br> Вкладка Element (Элемент) включает в себя три секции (рис. 6.4):<br> <div style="text-align:center;"><img src="image/poisk-v-html-kode_1.gif" alt="Поиск в HTML-коде"></div><br> Рис. 6.4. Вкладка Element диалогового окна Find<br> <ul> <li> верхняя секция Search (Поиск) позволяет вам устанавливать критерии поиска по элементам и .атрибутам HTML;</li> <li> средняя секция Action (Действие) определяет действия, которые вы хотите произвести на любом из элементов или атрибутов HTML, найденных в процессе поиска;</li> <li> нижняя секция Find In (Найти в) служит для установки области поиска: один файл, несколько несвязанных файлов или целый сайт.</li> </ul> Чтобы найти код HTML, выполните команду меню Edit | Find (Правка | Найти) и активируйте панель Element (Элемента) в диалоговом окне Find (Поиск). Затем, укажите параметры поиска при помощи следующих действий.<br> <ul> <li> В первом выпадающем списке следует установить критерий поиска тега HTML. Пользователь может выбирать из двух вариантов: Name Is (Полное соответствие) или Name matches (Частичное вхождение).</li> <li> Наименование элемента HTML, который вы ищете, указывается в правом верхнем текстовом поле или выбирается из всплывающего меню справа от него.</li> <li> Внизу, в текстовом" поле, снабженном линейкой прокрутки, введите атрибуты и значения атрибутов, которые вы хотите использовать в качестве критериев поиска, или же выберите их из соответствующих всплывающих меню прямо под текстовым полем.</li> </ul> После этого определите область поиска, нажав кнопку Add files (Добавить файлы). Впрочем, вы всегда сможете удалить отдельные файлы из списка файлов панели Element (Элемент), выделив их и нажав клавишу <Backspace> или <Delete>, или нажав кнопку Remove (Удалить).<br> После этого нажмите кнопку Start (Старт), чтобы начать поиск. Панель Element (Элемент) отображает количество найденных вхождений в списке файлов.<br> В дополнение к простому поиску тегов HTML, панель Element (Элемент) позволяет вам Манипулировать элементами HTML различными способами, используя выпадающий список действий в средней секции Action (Действие).<br> <ul> <li> Действие Keep Element (Сохранить элемент) сохраняет элемент и настраивает, модифицирует или удаляет его атрибуты.</li> <li> Действие Rename Element (Переименовать элемент) переименовывает элемент, но сохраняет его содержание. Вы можете сохранять атрибуты элемента или изменять их с помощью действия Attribute (Атрибут).</li> <li> Действие Delete Element (Удалить элемент) удаляет элемент полностью, включая его начальный и конечный теги, а также его содержимое.</li> <li> Действие Replace Element by its Content (Заменить элемент с его содержимым) удаляет только начальный и конечный теги, оставляя содержимое в неприкосновенности,</li> <li> Действие Delete Content Only (Удалить только содержание) удаляет только содержимое элемента, оставляя начальный и конечный теги на месте.<br> </li> </ul> Чтобы модифицировать существующий тег кода HTML, определите критерии и область поиска, как было описано выше. Выберите действие Keep Element (Сохранить элемент) из выпадающего списка Element Action (Действие над элементом). Нажмите кнопку New Action (Новое действие) чтобы задать параметры действия, которое будет выполнено в случае удачного завершения поиска. Для начала стоит воспользоваться выпадающим списком Action (Действие), который позволяет указать тип выполняемого действия.<br> <ul> <li> Элемент Set (Установить) устанавливает определенные атрибуты и значения для кода HTML вне зависимости от того, существует ли уже атрибут или еще нет.</li> <li> Элемент Update (Обновить) модифицирует атрибут, только если он уже существует в указанном элементе HTML. Эта опция не добавляет никаких атрибутов.</li> <li> Элемент Delete (Удалить) удаляет атрибут и его значение, где бы он ни появился.</li> </ul> Затем введите атрибут в одноименное текстовое поле или выберите атрибут из чувствительного к контексту выпадающего списка справа от текстового поля. Выпадающий список отображает только атрибуты, относящиеся к элементу HTML, выделенному в секции Had (Поиск) панели Element (Элемент). Введите значение атрибута в текстовом окне Value (Значение) или выберите значение из чувствительного к контексту выпадающего списка справа от текстового поля. Нажмите кнопку Start (Старт), чтобы запустить процесс поиска и выполнения указанных действий.<br> Аналогично проводятся операции по переименованию, удалению, замещению элемента и замещению элемента с его содержимым.<br> Панель Element (Элемент) позволяет вам задавать сразу несколько действий для одного сеанса поиска. Для добавления нового действия в список следует нажать на кнопку New Action (Новое действие) и повторить процедуру его задания, описанную ранее. Если какое-либо действие необходимо будет удалить из общего списка, следует воспользоваться кнопкой Delete Action (Удалить действие).<br> Один раз создав задание, вы можете сохранить его для использования в будущем, что убережет вас от необходимости повторно указывать те же самые настройки.<br> Чтобы сохранить задание, нажмите кнопку Save Task (Сохранить задание). Выберите папку, где вы хотите сохранить задание и дайте ему имя.<br> Чтобы повторно выполнить сохраненное задание, выберите элемент Browse (Открыть) в подменю Open Task (Открыть задание). В появившемся диалоговом окне открытия файла выделите нужное задание и нажмите кнопку Открыть (Open).<br> </td> </tr> </table> <br><br> <h1>Текстовый поиск</h1> <br> </h2> Вы можете использовать команду меню Find & Replace (Найти и заменить) в режимах Layout <Макет), Outline Editor (Редактор эскиза) или Source (Исходный код). В зависимости от режима просмотра, вы можете искать элементы текста и кода HTML в текущем документе. Когда вы найдете то, что искали, вы можете автоматически заменить найденную строку на иной текстовый фрагмент.<br> Хотя можно использовать опцию Find & Replace (Найти и заменить) для поиска тегов HTML, панель Element (Элемент) в диалоговом окне Find (Поиск) предлагает более мощный инструмент, ориентированный именно на работу с HTML-кодам. <br> Чтобы найти и изменить текст в текущем документе, выполните команду меню Edit | Find (Правка | Найти). При этом будет отображено диалоговое окно Find (Поиск), показанное на рис. 6.1.<br> <div style="text-align:center;"><img src="image/tekstovyj-poisk_1.gif" alt="Текстовый поиск"></div><br> Рис. 6.1. Диалоговое окно Find<br> В этом диалоговом окне необходимо ввести текст, который требуется найти, в основное поле ввода.<br> Внимание<br> Если строка поиска по своим размерам больше, чем может отобразить текстовое поле, вы можете либо прокрутить это поле, либо нажать кнопку Edit (Правка) с изображением карандаша рядом с текстовым полем, чтобы ввести текст в отдельном диалоговом окне. <br> Затем при помощи группы независимых переключателей следует задать параметры поиска.<br> <ul> <li> Ignore Case (Игнорировать регистр) позволяет вам искать подходящий текст, не принимая во внимание регистр символов. Например, поиск для "frequent flyer" также найдет "Frequent Ryer".</li> <li> Entire Word (Целое слово) игнорирует случаи включения искомой последовательности символов в другое слово. Например, если вы ищете целое слово "any", то GoLive не рассматривает слово "many".</li> <li> Regular Expression (Шаблон) разрешает поиск с использованием специальных шаблонов. Подробнее об этом варианте мы узнаем чуть позже.</li> <li> Backwards (Обратно) ищет указанный текст от текущего положения курсора по направлению к началу вашего документа. Это действие изменяет независимый переключатель From Top (Сверху) на переключатель From Bottom (Снизу).</li> <li> From Top (Сверху) начинает поиск с начала активного документа.</li> <li> Wrap Around (Перенос) перезапускает поиск с начала документа, после того как он достигнет конца документа.</li> </ul> Для того, чтобы заменить найденный текст, разверните секцию Replace (Заменить) диалогового окна, щелкнув мышкой по изображению маленького треугольника рядом с наименованием этой секции. Диалоговое окно изменит свой вид так, как это показано на рис. 6.2.<br> <div style="text-align:center;"><img src="image/tekstovyj-poisk_2.gif" alt="Текстовый поиск"></div><br> Рис. 6.2. Диалоговое окно Find с активированным разделом Replace<br> В дополнительном текстовом поле укажите последовательность символов, которой будет заменен найденный текст. После этого нажмите кнопку Find (Поиск), чтобы начать поиск в вашем документе. Adobe GoLive подсвечивает первое найденное вхождение, если таковое есть. В зависимости от настроек поиска, одноименное диалоговое окно перемещается на задний план или остается на переднем.<br> Поиск можно продолжить с помощью следующих кнопок:<br> <ul> <li> Find Next (Искать следующее), чтобы продолжить поиск после того, как первая строка, удовлетворяющая критерию поиска будет найдена;</li> <li> Replace (Заменить), чтобы заменить найденный текст;</li> <li> Replace & Find (Заменить и найти), чтобы заменить текст и найти следующее вхождение;</li> <li> Replace All (Заменить все), чтобы автоматически заменить все вхождения текста в документ.</li> </ul> Чтобы искать выделенный текст в текущем документе без открытия диалогового окна Find (Поиск), выделите нужный текст. Выделение должно занимать не больше одного абзаца. Затем выполните команду меню Edit Find Selection (Правка | Найти выделенное). Adobe GoLive начинает поиск выделенного текста от текущего выделенного фрагмента и подсвечивает следующие местонахождение текста, используя текущие настройки диалогового окна Find (Поиск).<br> Чтобы найти и заменить элементы текста или кода HTML в нескольких файлах сразу, в диалоговом окне Find (Поиск) откройте секцию Find in Files (Поиск в файлах), как это показано на рис. 6.3.<br> <div style="text-align:center;"><img src="image/tekstovyj-poisk_3.gif" alt="Текстовый поиск"></div> <br> Рис. 6.3. Диалоговое окно Find с активированным разделом Find In Files<br> Нажмите кнопку Add Files (Добавить файлы) и в появившемся одноименном диалоговом окне выберите файлы, в которых будет производиться поиск.<br> В выпадающем списке Files from (Файлы из) вы можете установить список файлов, в которых будет производится поиск.<br> В выпадающем списке Script of String (Написание строки) можно выбрать 'кодировку языка, используемую при поиске искомой строки.<br> После этого нажмите кнопку Find (Найти), чтобы начать поиск в выделенных файлах. Adobe GoLive показывает вам первый найденный файл, содержащий подходящий текст.<br> Поиск можно продолжить, нажав одну из следующих кнопок.<br> <ul> <li> Кнопка Find Next (Найти следующее) позволяет найти или просмотреть следующий результат поиска в том же или следующем документе.</li> <li> Кнопка Find All (Найти все) позволяет найти или просмотреть все результаты. В окне списка все файлы с подходящими элементами отмечены цифрой, появляющейся в колонке Hits (Вхождения). Дважды щелкните кнопкой мышки по имени необходимого файла, чтобы открыть его и подсветить первый удачный результат поиска.</li> </ul> </td> </tr> </table> <br><br> <h1>Динамический HTML</h1> <h1>Динамический HTML</h1> <br> </h2> Итак, изучив первые главы книги, мы научились разрабатывать HTML-документы, предназначенные для отображения в браузерах, и управлять стилевым оформлением элементов содержимого этих документов: Для получения еще более интересных возможностей следует сделать еще один шаг вперед — изучить технологию динамического HTML, которую часто обозначают как DHTML (Dynamic HTML). Но прежде чем мы узнаем, в чем же суть, следует сделать маленькое техническое отстуялейие.<br> Существует такое понятие, как языки сценариев, или, как их еще называют, скриптовые языки. Среди них есть такие языки, которые распознаются и обрабатываются непосредственно браузером. Это VBScript и JavaScript. Язык VBScript ведет свою родословную от языка Visual Basic, развиваемого и поддерживаемого корпорацией Microsoft. Язык JavaScript унаследовал свои конструкции от языка Java, который усиленно продвигает корпорация Sun. Как мы уже говорили, эти скриптовые языки распознаются и обрабатываются непосредственно браузерами то есть в тело HTML-документа мы внедряем код программы, написанной иа одном из этих языков, а браузер сам выполнит все действия, предписанные этой программой.<br> Эта простота использования и обусловила столь высокую популярность скриптовых языков. Однако создатели программ-браузеров являются конкурентами по отношению друг к другу. И получилось так, что компания Netscape, являющаяся изготовителями достаточно популярного браузера Netscape Navigator, не включила в состав своего браузера блок обработки языка VBScript. Это был серьезный удар по конкуренту. Результатом его явился тот факт, что подавляющее число разработчиков использует для своих нужд язык JavaScript. Несколько позже компания Microsoft нанесла "ответный удар", создав новую и очень интересную технологию, опирающуюся на язык VBScript, но эти и последующие события уже выходят за рамки нашей книги.<br> Также производители браузеров поддерживают так называемые "объектные модели",, которые позволяют программам-скриптам управлять некоторыми свойствами браузеров. Причем перечень управляемых объектов достаточно обширен и позволяет разработчикам виртуозно оперировать огромным количеством свойств браузеров и выполнять некоторые действия, которые нельзя сделать сдомощьюг HTML.<br> Сплав HTML, CSS, скриптовых языков, объектных моделей браузеров и получил наименование DHTML. Вся эта технология, которая выглядит гораздо «ложнее, чем есть на самом деле, предоставила разработчикам поистине огромные возможности. Если говорить максимально точно и правильно, то DHTML— это технология;динамического изменения содержимого Web-страниц при помощи скриптовых языков.<br> Как видно из приведенного определения, изменения содержимого Web-страниц мы можем производить только при помощи скриптовых языков. А значит, нам необходимо будет узнать, как ими пользоваться. Как видно, для того, чтобы получить возможность пользоваться самыми заманчивыми средствами создания Web-страниц все-таки придется немного программировать. Однако, в следующих главах мы увидим, как Adobe GoLive позволяет создавать сценарии практически без программирования. Но все-таки следует знать, как работают скриптовые языки, чтобы иметь возможность контролировать процесс создания сценариев Adobe GoLive. Для работы мы выберем JavaScript, так как сценарии, написанные на этом языке, будут гарантированно выполнены любым браузером. Итак, прежде чем переходить к технологии DHTML, следует рассмотреть язык JavaScript. Этому и будут посвящены несколько следующих разделов этой главы.<br> </td> </tr> </table> <br><br> <h1>ДИНАМИЧЕСКИЙ HTML</h1> <br> </h2> <ul> <li>Динамический HTML </li><br> <li> Структура JavaScript</li> <li> Объектная модель</li> <li> Обработка событий<br> </li> <li> Свойства и методы элементов Web-страниц</li> <li>Применение стилей</li> <li> Позиционирование элементов Web-страницы</li> <li> Обработка форм</li> <li> Графические фильтры </li> </ul></td> </tr> </table> <br><br> <h1>Графические фильтры</h1> <br> </h2> Пожалуй, самой необычной возможностью технологии DHTML является использование так называемых "графических фильтров". Это, по сути, некоторые графические преобразования, которые могут быть применены избирательно к любому элементу оформления Web-страницы. Изначально эти фильтры создавались на основе элементов ActiveX, и, соответственно, наилучшим образом они работают в браузере Microsoft Internet Explorer.<br> Обычно различают статические и динамические фильтры. Любой статический графический фильтр просто проводит мгновенное преобразование элемента содержимого Web-страницы, к которому он применяется. Динамические фильтры преобразование проводят в течение некоторого времени, что позволяет увидеть этот процесс "в динамике". Чаще всего при разработке Web-страниц используют статические фильтры, так как динамические графические фильтры адекватно поддерживаются далеко не всеми браузерами. Поэтому и рассмотрим мы именно работу со статическими графическими фильтрами.<br> Доступ к объектам графических фильтров обычно производится при помощи коллекции filters, которая является свойством практически каждого объекта, соответствующего тому или иному элементу содержимого Web-страницы. Естественно, из самого наличия коллекции объектов, следует тот факт, что к одному элементу можно применять несколько графических фильтров. Также можно воспользоваться свойством style, которое в свою очередь обладает подсвойством filter.<br> Приведем пример HTML-документа с использованием одного из статических фильтров, чтобы на этом примере рассмотреть механизм их применения.<br> Листинг 7.11<br> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><br> <html><br> <head> <link rel="canonical" href="https://www.e-lave.ru//glava-1.htm"/><br> f <title>Tpa<J>M4ecKMe (J>i^bTpbi</title><br> <script language="javascript"><br> <!-<br> function filtering()<br> {<br> document.all.pi.style.filter="xray";<br> } //--><br> </script><br> </head><br> <body><br> <p><img id="pl" src="redhood.gif" onClick="filtering()"></p><br> </form><br> </html><br> На рис. 7.11 видно, во что превратился рисунок gif-формата из двухсот пятидесяти шести цветов после того, как пользователь щелкнул мышью на графическом изображении. После этого щелчка к рисунку был применен статический графический фильтр с наименованием "хгау", которое, очевидно, указывает, что данный графичекий эффект имеет некоторое отношение к рентгеновским лучам. И если посмотреть на рисунок, станет понятно, что доля истины в этом названии есть, так как графическое изображение и в самом деле немного походит на рентгеновские снимки.<br> Активация фильтра происходит при помощи свойства filter у объекта style, являющегося составной частью объекта, реализующего графическое изображение. Доступ к этому объекту происходит при помощи уникального идентификатора элемента, через коллекцию all. <br> Итак, мы видели результат применения фильтра "хгау" к обыкновенному графическому изображению. Однако, осталось еще двенадцать статических фильтров, наименований которых мы не знаем. Более того, нам неизвестны также преобразования, которые они производят с тем или иным элементом содержимого Web-страницы. Поэтому следует рассмотреть способы работы с этими статическими фильтрами.<br> <div style="text-align:center;"><img src="image/graficheskie-filtry_1.gif" alt="Графические фильтры"></div><br> Рис. 7.11. Окно браузера с результатом отображения файла, приведенного в листинге 7.11, после того как пользователь щелкнул мышью на рисунке<br> Начнем с простых фильтров отражения. Фильтр с наименованием "fliph" задает горизонтальное отражение элемента. Код HTML-документа, в котором используется данный фильтр приведен в листинге 7.12.<br> Листинг 7.12<br> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><br> <html> <head> <link rel="canonical" href="https://www.e-lave.ru//glava-1.htm"/><br> <title>rpa<$M4ecioie <|>^bTpbi</title> <script language="javascript"> <!-function filtering()<br> I<br> document.all.pi.style.filter="fliph";<br> }<br> //--><br> </script><br> </head> <body><br> <pximg id="pl" src="htm.gif" onClick="filtering()"></p> </form> </html><br> <div style="text-align:center;"><img src="image/graficheskie-filtry_2.gif" alt="Графические фильтры"></div><br> Рис. 7.12. Окно браузера с результатом отображения файла, приведенного в листинге 7.12, после того как сработал графический фильтр<br> Как видно, код документа не слишком отличается от предыдущего листинга. Основное отличие — в механизме действия статического фильтра. Как легко видеть на рис. 7.12, в процессе его применения к рисунку, тот был отражен относительно вертикальной оси, проходящей через его центр.<br> Существует также фильтр, отражающий содержимое элемента по вертикали. В листинге 7.13 приведен код HTML-документа, использующего данный фильтр.<br> Листинг 7.13<br> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" <br> "http://www.w3.org/TR/html4/strict.dtd"><br> <html> <head> <link rel="canonical" href="https://www.e-lave.ru//glava-1.htm"/><br> <title>Tpa<i>M4ecKMe фильтры<^л^1е><br> <script language="javascript"><br> <!-<br> function filtering()<br> {<br> <div style="text-align:center;"><img src="image/graficheskie-filtry_3.gif" alt="Графические фильтры"></div><br> Рис. 7.13. Окно браузера с результатом отображения файла, приведенного в листинге 7.13, после того как сработал графический фильтр<br> Из приведенного кода HTML-документа становится ясно, данный статиче ский фильтр носит наименование "flipv". А на рис. 7.13 видно, что данньп фильтр отражает содежимое элемента Web-страницы по вертикали, относи тельно горизонтальной оси элемента, проходящей через его центр.<br> Все три рассмотренных нами фильтра обладают одной общей чертой — от не нуждаются в дополнительных параметрах. Однако далеко не все статиче ские графические фильтры так нетребовательны. Большинство из них тре бует указания дополнительных параметров. Пример применения подобной графического фильтра показан в листинге 7.14.<br> Листинг 7,14<br> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" <br> "http://www.w3.org/TR/html4/strict.dtd"><br> <html><br> <head> <link rel="canonical" href="https://www.e-lave.ru//glava-1.htm"/><br> <div style="text-align:center;"><img src="image/graficheskie-filtry_4.gif" alt="Графические фильтры"></div><br> Рис. 7.14. Окно браузера с результатом отображения файла, приведенного в листинге 7.14, после того как сработал графический фильтр<br> Листинг 7.15<br> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><br> <html> <head> <link rel="canonical" href="https://www.e-lave.ru//glava-1.htm"/><br> <title>Гpaфичecкиe фильтpы</title> <script language="javascript"> <!-<br> function filtering() {<br> document.all.pl.style.filter="invert"; }<br> //--> </script> </head> <body><br> <p><img id="pl" src="htm.gif" onClick="filtering()"></p> </form> </html><br> <div style="text-align:center;"><img src="image/graficheskie-filtry_5.gif" alt="Графические фильтры"></div><br> Рис. 7.15. Окно браузера с результатом отображения файла, приведенного в листинге 7.15, после того как сработал графический фильтр<br> Фильтр invert был применен к графическому изображению. Данный фильтр инвертирует, т. е. заменяет на противоположные, все цвета элемента, к котором'у он применяется. На рис. 7.15, однако, видно, что был изменен лишь цвет значимой части изображения, а фон остался неизмененным. Связано это с тем, что применяющееся в данном случае графическое изображение было сохранено в формате GIF, и фон его был обозначен как "прозрачный" цвет. Эта уникальная фозможность присуща только данному формату. И при применении фильтра invert всегда следует помнить, что прозрачный цвет не поддается инвертированию.<br> Существует также фильтр mask, чье действие весьма похоже на только что рассмотренный фильтр. Но фильтр "mask" не инвертирует цвета элемента, а делает, так называемую, "маску". То есть, фон изображения переводится в специально заданный разрабочиком цвет, а основной план изображения переводится в белый цвет. Пример использования подобного эффекта показан в листинге 7.16 и рис. 7.16.<br> Листинг 7.16<br> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><br> <html> <head> <link rel="canonical" href="https://www.e-lave.ru//glava-1.htm"/><br> <title>rpa<?M4ecKMe фильтpы</title> <script language="javascript"> <!-<br> function filtering() {<br> document.all.pl.style.filter="mask(color=green) ' } //--><br> </script><br> </head><br> <body><br> <pximg id="pl" src="htm. gif " onClick="f iltering ( ) "></p> </form> </html><br> Легко заметить, что для установки цвета, которым будет отображаться создаваемая маска, мы используем параметр с наименованием color. Значением параметра может быть любое принятое в HTML обозначение цвета. Если не использовать дополнительный параметр для эффекта, то в качестве цвета для создания маски будет использован черный цвет.<br> Способ применения еще одного графического фильтра показан в листинге 7.17. Фильтр с наименованием "blur" несколько "размазывает" отбражае-мый элемент, создавая эффект его движения.<br> <div style="text-align:center;"><img src="image/graficheskie-filtry_6.gif" alt="Графические фильтры"></div><br> Рис. 7.16. Окно браузера с результатом отображения файла, приведенного в листинге 7.16, после того как сработал графический фильтр<br> Листинг 7.17<br> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN "http://www.w3.org/TR/html4/strict.dtd"><br> <html> <head> <link rel="canonical" href="https://www.e-lave.ru//glava-1.htm"/><br> <title>Гpaфичecкиe фильтpы</title> <script language="javascript"> <! -function filtering()<br> {<br> document.all.pi.style.filter="blur(add=l, direction=90, strength=20)";<br> } //--><br> </script><br> </head><br> <body><br> <p><img id="pl" src="htm. gif " onClick="f iltering ( ) "></p> </form> </html><br> К сожалению, возможности полиграфии не позволяют показать результат применения данного фильтра в полном объеме. Но если все-таки есть желание увидеть его, стоит создать HTML-файл с кодом, приведенным в листинге 7.17, и загрузить его в браузер (рис. 7.17).<br> <div style="text-align:center;"><img src="image/graficheskie-filtry_7.gif" alt="Графические фильтры"></div><br> Рис. 7.17. Окно браузера с результатом отображения файла, приведенного в листинге 7.17, после того как сработал графический фильтр<br> Легко заметить, что данный эффект обладает тремя дополнительными параметрами. Параметр direction задает направление, в котором будет производиться смещение изображения элемента. Значением данного параметра является число, обозначающее количество градусов, отсчитываемых от вертикально направленной воображаемой линии. Параметр strength позволяет указывать, насколько "наполненным" будет смещенное отображение. Чем больше значение этого параметра, тем дальше будет смещаться изображение. Значением параметра является обычное целое число. Параметр add является логическим и указывает, следует ли добавлять более слабые копии изображения в итоговый результат, создавая подобным образом именно иллюзию движущегося элемента, или нет. Если мы используем нулевое значение, то ослабленные копии добавляться не будут, и мы просто получим достаточно сильно размазанное изображение. Чаще всего, опознать в нем оригинал будет затруднительно. Поэтому обычно в качестве значения данного параметра используется любое целое число. При этом не имеет значение, какое число мы используем, лишь бы оно не было нулем, так как, по сути, параметр является логическим.<br> Графический фильтр с наименованием dropshadow позволяет создавать тень элемента, к которому он применен. Пример HTML-документа, использующего данный фильтр, показан в листинге 7.18.<br> Листинг 7,18<br> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><br> <html> <head> <link rel="canonical" href="https://www.e-lave.ru//glava-1.htm"/> <title>rpa<|>M4ecKMe <J>i^bTpbi</title><br> Ocript language="javascript"><br> <!-<br> function filtering()<br> {<br> document.all.pi.style.filter="dropshadow(offx=10, offy=10, color=green, positive=l)";<br> }<br> //--><br> </script><br> </head><br> <body><br> <pximg id="pl" src="htm.gif" onClick="filtering()"></p> </form> </html><br> При помощи параметров графического фильтра мы можем управлять внешним видом изображения элемента, к которому данный фильтр применяется. Параметр offx и offy, как нетрудно догадаться, позволяют задавать смещение тени относительно исходного элемента по горизонтали и вертикали, соответственно. Для данных параметров, естественно, используются числовые значения. Параметр color задает цвет, которым будет отображаться тень. А параметр positive является логическим. В том случае, если ему присвоено ненулевое значение, или он вообще не установлен, тень будет отображаться в стандартном виде, как это показано на рис. 7.18. Иначе, тень будет инвертирована, и ее фон будет отображаться цветом, заданным при помощи параметра color, а само теневое изображение элемента будет отображаться цветом фона.<br> <div style="text-align:center;"><img src="image/graficheskie-filtry_8.gif" alt="Графические фильтры"></div><br> Рис. 7.18. Окно браузера с результатом отображения файла, приведенного в листинге 7.18, после того как сработал графический фильтр<br> Применение еще одного достаточно интересного статического графического фильтра показано в листинге 7.19. Данный фильтр имеет наименование "glow", и позволяет создавать размазанный контур вокруг элемента, повторяя его контур.<br> Листинг 7.19<br> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><br> <html> <head> <link rel="canonical" href="https://www.e-lave.ru//glava-1.htm"/> <title>rpa<i>M4ecKMe фильтpы</title><br> <script language="javascript"><br> <!-<br> function filtering()<br> {<br> document.all.pi.style.filter="glow(color=green, strength=10)<br> }<br> //--><br> </script><br> </head><br> <body><br> <p><img id="pl" src="htm.gif " onClick="f iltering ( ) "></p> </form> </html><br> <div style="text-align:center;"><img src="image/graficheskie-filtry_9.gif" alt="Графические фильтры"></div><br> Рис. 7.19. Окно браузера с результатом отображения файла, приведенного в листинге 7.19, после того как сработал графический фильтр<br> Легко заметить, что данный фильтр обладает двумя параметрами. Параметр color позволяет указывать цвет, которым будет создаваться дополнительный контур элемента, а параметр strength задает размер этого нового контура и, косвенно, его размытость. Чем больше значение этого параметра, тем больше дополнительный обтекающий контур у элемента (рис. 7.19).<br> При помощи фильтра "alpha" мы можем устанавливать уровень прозрачности для того или иного элемента. Пример использования данного фильтра показан в листинге 7.20 и рис. 7.20.<br> Листинг 7. 20<br> <br> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http: //www.w3.org/TR/html4/strict.dtd"><br> <html> <head> <link rel="canonical" href="https://www.e-lave.ru//glava-1.htm"/><br> <title>rpa<$M4ecKMe <fcMnbTpbi</title><br> <script language="javascript"><br> <!-<br> function filtering()<br> {<br> document.all.pi.style.filter="alpha(opacity=40)";<br> }<br> //--><br> </script><br> </head><br> <body><br> <p><img id="pl" src="htm. gif " onClick="f iltering ( ) "></p> </form> </html><br> В качестве знаения основного параметра opacity используется числовое значение от нуля до ста, указывающее процент прозрачности элемента. Если используется нулевое значение, то элемент становится полностью прозрачным и сливается с фоном, т. е. становится невидимым. Если же мы используем значение, равное ста процентам, то внешний вид элемента не изменяется.<br> Одним из самых интересных фильтров является фильтр "wave", накладывающий на объект волнообразное преобразование. Его применение проиллюстрировано листингом 7.21 и рис. 7.21.<br> Листинг 7. 21<br> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML ' "http: //www.w3.org/TR/html4/strict.dtd"><br> <html> <head> <link rel="canonical" href="https://www.e-lave.ru//glava-1.htm"/><br> <title>Гpaфичecкиe фильтpы</title> <script language="javascript"> <!-<br> function filtering() {<br> document.all.pl.style.filter="wave(freq=3, strength=5, add=0)" } //--><br> </script><br> </head><br> <body><br> <p><img id="pl" src="htm.gif " onClick="f iltering () "></p> </form> </html><br> <div style="text-align:center;"><img src="image/graficheskie-filtry_10.gif" alt="Графические фильтры"></div><br> Рис. 7.20. Окно браузера с результатом отображения файла, приведенного в листинге 7.20, после того как сработал графический фильтр<br> При помощи числового параметра freq мы задаем количество "волн" в результирующем изображении. Чем больше значение этого параметра, тем более "волнистым" окажется результат. А "высота" волн, точнее, их горизонтальный размер задается при помощи числового параметра strength. С действием параметра add мы уже знакомы. Если мы укажем для него ненулевое значение, то вместе с результатом действия графического фильтра будет отображает и'исходный элемент. Обычно этот вариант изображения выглядит достаточно громоздко, поэтому чаще используют нулевое значение для параметра add.<br> И последний рассматриваемый нами статический фильтр носит наименование "light". Он позволяет создавать эффекты освещения элемента различными источниками света, и его стоит рассмотреть несколько подробнее, так как он позволяет использовать несколько различных методов. Мы создадим Web-страницу с одной кнопкой, расположенной по центру строки, и установим реакцию на попадание курсора мыши на нее. В этом случае мы создадим иллюзию возникновения точечного освещения, источник которого будет находиться почти точно над кнопкой. Таким образом, мы сможем акцентировать внимание удаленного пользователя на этой кнопке. Естественно, вместо кнопки можно установить любой другой элемент Web-страницы.<br> <div style="text-align:center;"><img src="image/graficheskie-filtry_11.gif" alt="Графические фильтры"></div><br> Рис. 7.21. Окно браузера с результатом отображения файла, приведенного в листинге 7.21, после того как сработал графический фильтр<br> Итак, рассмотрим листинг.<br> Листинг 7.22<br> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http: //www.w3.org/TR/html4/strict.dtd"><br> <html><br> <head> <link rel="canonical" href="https://www.e-lave.ru//glava-1.htm"/> <title>rpa<$M4ecKMe фильтpы</title><br> <script language=" javascript"><br> <! —<br> function lighting()<br> {<br> m. style . filter=" light "; l=m.f liters [0] ;<br> l.addPoint(250,50,150,60,230,60,10000); }<br> // —><br> </script> </head> <body id="m"><br> <p align="center"xinput type="button" уа1ие="КНОПКА" name="BUTl" onMouseOver="lighting ( ) "></p><br> </body><br> </html><br> В теге HTML-документа мы создаем одну кнопку, установленную по центру строки (рис. 7.22). Для нее устанавливаем отслеживаемое событие onMouseOver, и приписываем ему выполнение функции lighting о. В самой функции мы работаем с объектом т, который является телом документа. Мы используем его подчиненный объект style и создаем для него графический фильтр light. При помощи этого графического фильтра можно создавать различные световые эффекты. Затем мы создаем переменную 1, которая становится первым (и единственным) экземпляром коллекции filters. А для нее выполняем метод addPoint, который создает точечный источник цвета. Первые три параметра этого метода содержат в себе координаты х, у и z точечного источника света, следующие три — RGB-код используемого цвета, а последний параметр — интенсивность света.<br> Необходимо отметить, что каждый раз при выполнении этой функции будет добавляться новый источник освещения. Поэтому, каждый раз при прохождении курсора мыши над кнопкой освещенность будет увеличиваться.<br> Для фильтра light, помимо метода addPoint, создающего точечный источник света, предусмотрены еще несколько специфичных функций, каждая из которых предназначена для работы с освещением. Метод addAmbient (R, с, в, strength) создает эффект общего освещения. В первых трех параметрах передается RGB-код цвета освещения, а в последнем параметре — интенсивность освещения.<br> Существует еще и метод, создающий эффект освещения фонариком, коническим пучком света. Этот метод вызывается конструкцией addcone(x, у, z, xi, yi, R, с, в, strength, spread). В первых трех параметрах передаются координаты источника света. Следующие два параметра содержат координаты точки на Web-странице, на которую будет направлен свет. Затем передается RGB-код цвета освещения, интенсивность освещения и величина освещаемого круга.<br> Для перемещение источника света применяется метод MoveLight (id, x, у, z, absolute). Первым параметром служит идентификатор источника света. Следующие три параметра — новые координаты источника. Последний параметр имеет логический тип. Если передаваемое значение — true, значит, применяемая система координат станет абсолютной, если было передано значение false, то переданные координаты станут использоваться как смещение, и система координат станет относительной. Ее центром будет исходное положение источника света.<br> Метод ChangeStrengthdd, new_strength, absolute) позволяет динамически менять интенсивность источника света без его явного переопределения. В первом параметре передается идентификатор источника света, во втором — его новая интенсивность, а в третьем — логическое значение, указывающее на характер применяемой системы отсчета. Если передано значение true, то интенсивность становится именно такой, которая указана во втором параметре. Если использовано значение false, то к уже имеющейся интенсивности будет прибавлено значение, переданное во втором параметре.<br> Для очистки всех фильтров типа light, применяется метод clear о .<br> <div style="text-align:center;"><img src="image/graficheskie-filtry_12.gif" alt="Графические фильтры"></div><br> Рис. 7.22. Окно браузера с результатом отображения файла, приведенного в листинге 7.22, после того как сработал графический фильтр<br> </td> </tr> </table> <br><br> <h1>Объектная модель</h1> <br> </h2> В предыдущем разделе, мы уже отмечали, что JavaScript потдерживает возможность работы с объектами, и что набор объектов фиксирован, т. е. разработчик не может добавлять в него свои объекты. Все доступные объекты JavaScript представлены в виде разветвленной иерархии. Так же необходимо отметить, что все эти объекты относятся именно к окну просмотра HTML- документа в браузере. Каждый объект является совокупностью его свойств, методов и событий. Методы, как мы уже говорили — это некие действия, которые можно произвести с данным объектом, а события — это различные ситуации, возникающие при работе с объектом и адекватно отображающие изменения его состояния. Для каждого объекта набор его свойств, методов и событий уникален, поэтому все объекты необходимо рассмотреть максимально детально.<br> Иерархия объектов для программ-скриптов является единственной возможностью динамически управлять отображением Web-страниц. Фактически, это интерфейс доступа к внутренним механизмам браузера. И для того, что бы наши скрипты, реализующие возможности DHTML, могли работать в любом браузере, очевидно необходимо, чтобы объектные модели для всех браузеров совпадали. К сожалению, полного соответствия не произошло, и каждый браузер пользуется своей объектной моделью. Но различаются эти модели только в незначительных деталях, основные характеристики одинаковы для всех браузеров. По сути дела, производители браузеров лишь попытались добавить нечто свое к общепринятой модели.<br> В этой книге мы не будем рассматривать эти дополнения и изменения, и на т. е. веская причина. Еще несколько лет назад достаточно часто можно было встретить в Сети Web-странице с надписями "Эта Web-страница лучше всего отображается в браузере", и указывалось наименование того браузера, которому благоволил разработчик Web-страницы. К счастью, в последнее время в среде разработчиков все-таки распространилось мнение о недопустимости подобного поведения, поэтому всегда необходимо стараться создать Web-страницу, которая бы максимально одинаково отображалась во всех основных браузерах. Исходя из этих же соображений, мы рассмотрим только стандартную объектную модель DHTML, которая одинаково функционирует в каждом браузере.<br> Прежде чем мы перейдем к непосредственному рассмотрению объектов, следует сделать некоторое уточнение. Дело в том, что некоторые объекты в Web-страницах могут существовать только в единственном экземпляре, как например, объект window, олицетворяющий окно просмотра, а некоторых объектов может быть много. Так например, графические изображения, внедренные в состав содержимого Web-страницы, создают такое множество однотипных объектов. Подобные множества называются коллекциями, и больше всего похожи на массивы однотипных объектов. Доступ к какому-либо конкретному элементу коллекции производится при помощи указания наименования коллекции и порядкового номера интересующего нас элемента.<br> А вот теперь настало время перейти к непосредственному рассмотрению всего множества объектов, которым мы можем пользоваться для добавления некоей динамики и интерактивности к статичному содержимому наших Web-страниц.<br> Как мы не раз уже говорили, основой всего является объект window, который позволяет нам оперировать с окном просмотра браузера. Естественно, данный объект обладает набором свойств, методов и событий, который мы и рассмотрим. Следует отметить, что в этой части главы мы устроим лишь "обзорную экскурсию" по объектной модели, а примеры использования объектов рассмотрим немного позже. А сейчас вернемся к объекту window. Как известно, пользователь может открывать несколько копий программы-браузера, а значит, мы будем иметь несколько объектов window. Если при этом в качестве еодежимого этих окон используются Web-страницы, взаимное вязанные между собой гиперссылками, то объекты window также связываются друг с другом при помощи некоторых свойств. Сейчас как раз пришло время рассмотреть все свойства объекта window.<br> <ul> <li> Свойство client содержит информацию о браузере, используемом пользователем для просмотра данной Web-страницы. Свойство имеет статус "только для чтения", т. е. его значение не может быть изменено в процессе действия программы-скрипта.</li> <li> Свойство status содержит текстовую строку,отображающуюся в строке; статуса в нижней части окна программы-браузера.</li> <li> Свойство defauitstatus содержит текст, отображаемый в строке статус по умолчанию, </li> <li> Свойство opener является ссылкой на окно просмотра, которое было открыто из текущего окна. То есть, в данном свойстве находится ссылка на дочернее окно;</li> <li> Свойство parent является ссылкой на родительское окно,, из которого открыли текущее.</li> <li> Свойство пате содержит наименование текущего окна.</li> <li> Свойство self содержит ссылку на данное окно, в сущности, при помощи этого свойства объект ссылается сам на себя.</li> <li> Свойство top содержит ссылку на самое первое окно в иерархии связанных друг с другом окон.</li> <li> Свойство closed имеет логический тип и сообщает, закрыто или открыто данное окно.</li> <li>diaiogArguments — переменная параметр, или массив параметров, передаваемых диалоговому окну.</li> <li> diaiogHeight — высота диалогового окна в пикселах. </li> <li> diai.ogwidth — ширина диалогового окна в пикселах.</li> <li> dialogic — вертикальная координата верхнего левого угла диалогового окна в пикселах.</li> <li> diaio.gi.ef t — горизонтальная Координата верхнего левого угла диалогового окна в пикселах.</li> <li> returnvalue — применяется в модальных окнах диалогов, содержит значение, возвращаемое родительскому окну:,</li> </ul> Помимо свойств, естественно, имеется и список методов. Они реализованы в виде функций.<br> <ul> <li> Метод alert(messagestring) создает окно сообщения. Текст собщения передается к параметре.</li> <li> Метод confirm(messagestring) отображает подтверждающее окно, текст которого передан в функцию в качестве параметра. Окно отличается от предыдущего наличием дополнительной кнопки Отмена.</li> <li> Метод snowModalpialogturl (url, header, attributes) создает модальное диалоговое окно. В параметрах передается URL отображаемого файла, заголовок окна и атрибуты создаваемого окна.</li> <li>Метод open(uri, header, attributes) открывает новое окно браузера. В параметрах передается URL HTML-документа, который будет отображаться в этом окне, заголовок нового окна просмотра и его параметры.</li> <li> Метод close () закрывает данное окно.</li> <li> Метод setTimeout (expression, time, language) создает таймер, который вычислит выражение или выполнит действие спустя определенное время. Выражение или код действия передается в параметре expression, язык, на котором оно записано — в параметре language, а время, по истечении которого произойдет вычисление выражения или выполнение инструкций,— в параметре time. Функция возвращает идентификатор, который предоставляет возможность управлять созданным таймером впоследствии. Одновременно можно создавать несколько таймеров с уникальными идентификаторами.</li> <li> Метод setinterval (expression, time} по своему действию очень похож на предыдущий метод setTimeout, но в отличие от него производит заданное действие не единожды, а многократно, каждый раз перед выполнением делая паузу, длительность которой указана в параметре time.</li> <li> Метод ciearTimeout(timerid) ликвидирует созданный таймер. В качестве параметра передается идентификатор ликвидируемого таймера, Который был получен как возвращаемое значение функции setTimeout.</li> <li> Метод clear interval (timerid) ликвидирует повторяющийся таймер, созданный при помощи метода setinterval. В качестве параметра передается идентификатор ликвидируемого таймера.</li> <li> Метод focus () устанавливает фокус ввода на данное окно. Одновременно инициализируется осбытне onfocus.</li> <li> Метод blur () принудительно сбрасывает фокус ввода с окна. Инициализируется событие onbiur.</li> <li> Метод prompt(message, defa«lt_value) создает ОКНО с полем ввода и текстом подсказки. Текст подсказки передается в параметре message, а значение, находящееся в поле ввода по умолчанию — в параметре<br> default_value. </li> <li> Метод execscript (script, language) выполняет блок кода, который передается в параметре script, а в параметре language — язык, на котором он написан.</li> <li> Метод scroll (mode) позволяет принудительно показывать и скрывать) полосы прокрутки в окне просмотра браузера. Для отображения полос | необходимо передать в параметре значение yes, для выключения — по.</li> </ul> Необходимо более тщательно рассмотреть метод open, при помощи которой создается новое окно просмотра браузера. Параметры uri и header достаточно понятны, а параметр attributes'мы не упомянули. Он представляет собой текстовую строку, в которой через запятую записываются пари "свойство—значение". Подобным способом указывается внешний вид создаваемого окна. Перечислим атрибуты создаваемого окна просмотра.<br> <ul> <li> fullscreen — открыть окно в полноэщшшом режиме или нет. Для полноэкранного режима необходимо значение i или yes, в ином случае — о или по. Эти значения используются и во всех других параметрах, которые указывают на наличие или отсутствие некоего свойства у вновь создаваемого окна просмотра.</li> <li> status — регулирует наличие строки состояния. Значения параметра полностью совпадают со значениями предыдущего параметра.</li> <li> menubar — указывает на использование строки меню в новом окне просмотра.</li> <li> scrollbars — будут ли присутствовать полосы прокрутки.</li> <li> resizable — будет ли пользователь иметь возможность изменять размеры нового окна просмотра.</li> <li> toolbar — регулирует наличие инструментальной панели.</li> <li> width — указывает ширину окна просмотра. В качестве значения указывается количество пикселов.</li> <li> height — указывает высоту нового окна просмотра. Как и в предыдущем параметре, значение указывается в пикселах.</li> <li>top — вертикальная координата верхнего левого .угла окна просмотра.</li> <li> left — горизонтальная координата верхнего левого угла окна просмотра.</li> </ul> Приведем пример использования метода open. Следующая конструкция предназначена для создания нового окна просмотра браузера, в котором будет отображаться основная .страница поискового ресурса www.yahoo.com. В заголовке будет находиться строка "Поисковая система", а само окно будет иметь панель быстрых кнопок и строку меню. Верхний левый угол окна будет находиться в точке с координатами (100; 100), а его размеры — 400 пикселов по вертикали и горизонтали: Выглядеть вызов метода для создания такого окна будет следующим образом:<br> open("http://www.yahoo.com", "Поисковая система", "menubar=yes, toolbar-yes, top-100, left-lQO, height=400, width=400"!;<br> У метода showModaioiaiog в качестве третьего параметра тоже передается строка атрибутов создаваемого диалогового окна. Но они не совпадают с набором свойств окна просмотра браузера, поэтому их придется перечислить отдельно.<br> <ul> <li> diaiogTop —вертикальная координата верхнего левого угла диалогового окна.</li> <li> diaiogLeft — горизонтальная координата верхнего левого угла диалогового окна.</li> <li> diaiogHeight — высота диалогового окна в пикселах. </li> <li> diaiogwidth — Ширина диалогового окна в пикселах.</li> <li> center — указывает на то, будет или нет диалоговое окно выводиться в центре экрана. Значения могут быть yes или по.</li> <li> border — позволяет выбрать внешний вид границы окна. На выбор предоставляется две вариации: "толстая" и "тонкая" границы. Указание конкретного варианта производится при помощи одного из двух возможных параметров: thin или thick.</li> <li> font — предназначендяя установки шрифта, .который будет использован в оформлении диалогового окна. В качестве значения параметра используется выражение CSS.</li> <li> font-family —Устанавливает семейство применяемого шрифта.</li> <li> font-style — позволяет указывать стиль применяемого шрифта, т. е. используемое начертание: полужирный, курсив, и т. д.</li> <li> font-weight — указывает величину используемого шрифта.</li> <li> font-variant — модификатор, указывающий, какие буквы будут использоваться в шрифте: строчные или прописные, чей размер не будет превышать размер строчных букв.</li> <li> help — регулирует наличие кнопки помощи в верхнем правом углу окна, на строке заголовка. Могут быть использованы значения yes или по.</li> <li> minimize — указывает на наличие или отсутствие кнопки минимизации окна в верхнем правом углу диалогового окна.</li> <li> maximize — указывает на наличие или отсутствие кнопки распахивания окна на весь экран в верхнем правом углу диалогового окна.</li> </ul> Формат указания атрибутов для диалогового окна немного отличается от порядка указания атрабутов окна просмотра. В данном случае они записываются не через знак равенства, а черед двоеточие. Приведем пример:<br> ShowModalDialog("dial.html", "New dialog", "border:thin, minimize-yes, center:yes, font-family:Courier, font-style: Bold");<br> При помощи этого метода мы создаем диалоговое окно, в котором будет отбражатьея содержимое HTML-файла dialhtml, в заголовке будет находиться текстовая отрока New dialog, диалоговое окно будет установлено<br> в центре экрана, его можно будет свернуть а использоваться в нем будет моноширинный шрифт Courier с полужирным начертанием. <br> А теперь перейдем к рассмотрению списка событий, которые возникают при работе с объектом window. В состав данного объекта входит девдаь событий.<br> <ul> <li> Событие onblur возникает в тот момент, когда текущее окна просмотра теряет фокус ввода, т. е. становится неактивным.</li> <li> Событие onfocus инициируется:в момент получения окном фокуса ввода. То есть, по своей сути данное событие противоположно предыдущему.</li> <li> Событие onerror возникает, если происходит ошибка при загрузке какого-либо ресурса, входящего в состав отображаемой Web-страницы. Чаще всего событие применяется для обработки ошибок загрузки графики и видеовставок. </li> <li> Событие onload инициируется сразу после того, как заканчивается загрузка Web-страницы в браузер.</li> <li> Событие onhelp инициируется, если пользователь нажал клавишу <F1> или кнопку оперативной справки.</li> <li> Событие onscroii возникает, когда пользователь использует прокрутку содержимого окна просмотра при помощи линеек прокрутки.</li> <li> Событие onresize возникает, когда пользователь изменяет размеры окна просмотра.</li> <li> Событие onbefpreunioad инициируется перед выгрузкой Web-страницы из браузера с маленькой временной задержкой, что позволяет провести некоторые операции, такие, как сохранение данных.</li> <li> Событие onunioad инициируется уже непосредственно в момент выгрузки Web-страницы из браузера.</li> </ul> На этом список свойств объекта window заканчивается. Таким образом, мы полностью рассмотрели структуру этого основного объекта. Теперь самое время перейти к другим объектам, которые детально описывают иные механизмы браузера и содержимое Web-страницы.<br> Как мы говорили, объект window является основой всей объещной иерархии, и все остальные объекты входят в его состав. Эти дочерние объекты мы можем разделить на два типа. Одни из них открывают доступ к частям отображаемой Web-страницы, а другие позволяют нам оперировать отдельными элементами самого браузера. Вот с этих объектов мы и начнем.<br> Объект location предоставляет нам доступ к URL текущей Web-страницы. Прежде всего, мы рассмотрим описание его свойств.<br> <ul> <li> Свойство href — содержит URL текущего документа. Если в процессе работы программы-скрипта этому свойству придается новое значение в виде URL, то браузер автоматически загружает в окно просмотра документ, находящийся по этому адресу.</li> <li> Свойство hostname — имя Web-сервера, указанное в URL, не включающее в себя явно указанный номер порта, на котором функционирует этот Web-сервер.</li> <li> Свойство host — имя Web-eepaepa» объединенное с номером порта, если тот указан явно.</li> <li> Свойство port — номер порта, на котором функционирует Web-сервер, чье имя указано в URL данного документа.</li> <li> Свойство pathname — путь к HTML-документу в файловой системе сервера.</li> <li> Свойство hash — имя локальной гиперссылки, не включающее в себя знак #.</li> </ul> Как видно, при помощи этих свойств мы можем полностью разобрать URL документа на составляющие. Что делать с ними потом, каждый решает для себя сам. <br> У объекта location есть и методы. Их всего три:<br> <ul> <li> Метод reload позволяет осуществлять принудительню перезагрузку данного HTML-документа.</li> <li> Метод replace (uri) загружает в окно просмотра браузера новый HTML-документ, URL которого передается в метод в качестве параметра. При этом изменяется и обвект history.</li> <li> Метод assign (uri) переназначает URL для данного окна просмотра, но принудительного перехода по новому адресу, который передается в качестве параметра, не производится.</li> </ul> Каких-либо специфичных событий объект location не имеет.<br> Адреса всех посещенных Web-ресурсов записываются в один список, и перемещение между ними осуществляется при помощи кнопок Back (Назад) и Forward (Вперед) любого браузера. Этот список доступен при помощи объекта с наименованием history. Обычно применяется три метода этого объекта.<br> <ul> <li> Метод forward () загружает следующий документ из списка загруженных ранее документов, фактически, аналог нажатия удаленным пользователем кнопки Forward (Вперед) в своем браузере.</li> <li> Метод back о загружает предыдущий документ из общего списка. Дублирует кнопку браузера Back (Назад).</li> <li> Метод go (offset) смешается по списку на величину, которая передается в параметре и загружает документ с данным URL. При положительном значении параметра смещение происходит вперед по списку, при отрицательном — назад.</li> </ul> Длина списка URL посещенных Web-страниц хранится в свойстве length.<br> Теперь рассмотрим объект navigator, предназначенный для получения данных об используемом, удаленным пользователем, браузере. Существование этого объекта обусловлено тем, что в результате "браузерных войн" основные браузеры Internet Explorer и Netscape Navigator по-разному интерпретируют некоторые тега HTML. У них не совпадают иерархии объектов, используемых в сценариях. Именно потому, если мы хотим создать HTML-документ, который будет максимально адекватно отображатся в обоих основных браузерах, мы должны получить информацию об используемом браузере, и на ее основании формировать страницу. Свойства объекта navigator перечислены в следующем списке. <br> <ul> <li> Свойство appName содержит наименование браузера. </li> <li> Свойство appveysion — номер версии браузера. </li> <li> Свойство appCodeName — наименование технологии, на которой работает браузер, часто называемой "движком" (engine).</li> <li> Свойство cookieEnabied указывает на то, разрешено ли сохранение cookie в данном браузере.</li> <li> Свойство us Agent содержит наименование браузера в том виде, в котором оно передается при помощи HTTP-протокола.</li> </ul> В состав Объекта navigator ВХОДИТ еще Два Объекта; mimeTypes И plugins, которые на самом деле являются не просто объектами, а коллекциями. Коллекция mimeTypes содержит различные типы MIME (способы кодирования передававемой информации), которые используются данным браузером. А при помощи коллекции plugins мы можем получить доступ к любому расширению браузера, установленному в качестве дополнения к стандартной поставке.<br> Помимо знания используемого браузера необходимо иметь информацию об установленном разрешении монитора удаленного пользователя. Для этого мы можем использовать свойства объекта screen.<br> <ul> <li> width — разрешение экрана по горизонтали. </li> <li> height — разрешение экрана по вертикали.</li> <li> coiorDepth — количество битов, используемых для указания цвета каждого пиксела. То есть, по сути это, глубина цвета.</li> <li> update interval—частота обновления экрана.</li> </ul> Данный-объект не имеет даже методов, так как вея работа с ним происходит путем изменения значений его свойств.<br> Мы видели, что большинство рассмотренных нами объектов не имеет обособленных событий. Связано это с тем, что большинство событий, происходящих при работе браузера, обрабатывается при помощи специализированного объекта event, который и несет информацию о большинстве подобных событий. В любой момент мы можем обратиться к одному из его свойств и получить информацию о каком-либо изменении статуса или произошедшем действии пользователя. Список свойств данного объекта достаточно обширен по сравнению с другими объектами и выглядит следующим образом.<br> <ul> <li> Свойство aitKey указывает, нажата или нет клавиша <Alt> в данный момент.</li> <li> Свойство button показывает состояние кнопки мыши в момент запроса.</li> <li> Свойство canceiBubbie запрещает событиям проходить вверх по объектной иерархии. Дело в том, что у многих объектов существуют одинаковые события, и в момент возникновения подобного события, оно сначала обрабатывается у активного объекта, а затем это же событие могут обрабатывать все родительские объекты. Если же значение свойства canceiBubbie установить в True, то это событие будет обработано лишь один раз и не будет передано по объектной иерархии вверх.</li> <li> Свойство ciientx содержит координату текущего объекта по горизонтали. </li> <li> Свойство clientY содержит координату текущего объекта по вертикали.</li> <li> Свойство fctrlKey указывает, нажата или нет клавиша <Ctrl> в данный момент. </li> <li> Свойство fromEiement указывает на элемент, с которого пользователь увел курсор мыши. Данное свойство обычно применяется при обработке событий onmpuseout И onmouseover.</li> <li> Свойство keyCode содержит код ASCII клавиши, нажатой пользователем.</li> <li> Свойство of fsetx содержит смещение по горизонтали в пикселах курсора мыши от элемента, при обработке которого было инициировано событие.</li> <li> Свойство offsetY содержит смещение по вертикали в пикселах курсора мыши от элемента, при обработке которого было инициировано событие.</li> <li> Свойство reason является индикатором успешной передачи данных. Если передача не удалась, в данном свойстве указывается причина.</li> <li> Свойство returnvalue содержит значение, которое будет возвращаться данным событием.</li> <li> Свойство screen x содержит абсолютную горизонтальную координату курсора мыши в пикселах относительно самого экрана.</li> <li> Свойство screen y содержит абсолютную вертикальную координату курсора мыши в пикселах относительно экрана.</li> <li> Свойство shi ftкеу указывает, нажата или нет клавиша < Shift> в данный момент.</li> <li> Свойство srcEiement ссылается на исходный, самый нижний объект в иерархии, при работе с которым было инициировано данное событие.</li> <li> Свойство srcjFiiter используется только вместе с событием onf iiterexchange и содержит указатель на графический фильтр, который и породил это событие.</li> <li> Свойство toEieraent указывает на элемент, на территории которого находится в данный момент курсор мыши.</li> <li> Свойство type содержит тип иницииррванного события. На самом деле, в качестве значения данного свойства используется наименование события без первьк двух символов "on".</li> <li> Свойство х содержит горизонтальную координату курсора мыши. </li> <li> Свойство у содержит вертикальную координату курсора мыши.</li> </ul> Объект event является именно информационным объектом, поэтому большинство его свойств имеют статус "только для чтения". Мы можем изменять значения только двух свойств: keycode и returnvaiue.<br> Теперь мы перейдем к рассмотрению объектов, которые описывают саму отображаемую Web-страницу. Основой этой ветви объектной иерархии является объект с наименованием document, который открывает нам доступ к операциям с Web-страницей, отображаемой в окне просмотра браузера. Естественно, в силу того, что данный объект является основой всей соответствующей ветви объектной иерархии, он обладает достаточно обширным списком свойств, .методов и событий. Начнем рассмотрение объекта document c его свойств.<br> <ul> <li> Свойство activeEiement содержит ссылку; на тот элемент управления Web-страницы, который в данный момент обладает фокусом ввода.</li> <li> Свойство alinkcoior содержит обозначение цвета, которым отображаются активные гиперссылки.</li> <li> Свойство bgcolor позволяет определять цвет фона загруженной Web-страяйаы.</li> <li> Свойство body в качестве значения содержит все наполнение Web-страницы, находящееся между тегами <body> и </body>. Естественно, свойство имеет статус "только для чтения".</li> <li> Свойство cookie содержит строку cookie, т. е. некоей информации» которая при зафузке Web-страницы записывается на локальном компьютере удаленного пользователя. Цри помощи технологии "cookie" разработчики Web-страниц могут сохранять некоторую информацию о посетителе страницы на его же компьютере и, таким образом, персонализиро-вать работу Web-сайта с пользователями.</li> <li> Свойство domain содержит доменное имя сайта, с которого была подучена загруженная Web-страница.</li> <li> Свойство fgcoior содержит определение цвета, применяемого для отображения текста по умолчанию.</li> <li> Свойство lastModified содержит, строку с рсазанием даты последнего изменения данной Web-страницы.</li> <li> Свойство linkdoior содержит обозначение цвета, которым отображаются ссылки, еще не активированные пользователем.</li> <li> Свойство location задает полный URL загруженной в браузер Web-страницы.</li> <li> Свойство parentwindow указывает на родительское окно, из которою было открыто текущее окно.</li> <li> Свойство readystate показывает текущий статус загрузки данного HTML-документа. В качестве значения данного свойства применяется число от единицы до четырех. Значение "1" указывает, что документ еще не инициализирован и загрузка его в браузер не началась. Значение "2" обозначает, что загрузка началась, но еще не закончилась. Значение "з" указывает, что загрузка закончена, но документ еще не отображен в окне просмотра. Значение "4" обозначает, что Web-страница полностью загружена, отображена в браузере и полностью готова к работе.</li> <li> Свойство referrer содержит URL страницы, которая ссылается на текущую Web-страницу загруженную в браузер. То на ту, с которой пользователь и перешел на текущую страничку,</li> <li> Свойство title содержит заголовок данной Web-страницы, заключенный между тегам» <title> и </titj«>.:. »</li> <li> Свойство URL содержит полный URt'Web-страницы, загруженной в браузер. Фактически дублирует свойство location, но у иных объектов может отличаться от него.</li> <li> Свойство viinkcoior определяет цвет, которым отображаются ссылки, уже посещенные пользователем.</li> </ul> На этом список свойств объекта document заканчивается, и мы переходим к рассмотрению его Методов.<br> <ul> <li> Метод createEiement (teg) срздает HTML-объект, наименование тега которого задано в качестве параметра данного метода. Так, если мы хотим создать на нашей Web-странице дополнительное графическое изображение, следует ВЫПОЛНИТЬ Метод document. createEiement {*IMG").</li> <li> Метод clear о очищает содержимое Web-страниц.</li> <li> Метод close () закрывает документ» ас ним и текущее окно просмотра.</li> <li> Метод eiententrrcmiPoint(x,y) возвращает HTML-объект,который находится в точке с координатами, переданными методу в качестве параметров.</li> <li> Метод execcommand(command) выполняет некую операцию, код которой, передан в качестве параметра, над выделенной областью Web-страницы.</li> <li> Метод open (type) создает новый документ, mime-тип которого передается в качестве параметра и открывает новое окно просмотра для отбраже-ния создаваемого документа. Метод обычно применяется для создания Web-страниц с динамически создаваемым содержимым, поэтому в качестве параметра передается строка "text/html".</li> <li> Метод queryCommandEnabled(command) ПОЗВОЛЯеТ определять, МОЖНО ЛИ выполнять данную команду над выделенной областью Web-страницы.</li> <li> Метод queryCcOTnandindetermfcommand) сообщает, какой статус имеет данная команда.</li> <li> Метод queryCoramandstate (command) возвращает в качестве своего значе-ния.текущее состояние данной команды. Может использоваться для контроля над выполнением переданных исполняемых инструкций.</li> <li> Метод queryeoramandsupported (command) указывает, поддерживается ли данная команда браузером пользователя.</li> <li> Метод queryCoraaandText (command) возвращает текстовое выделение, к которому применяется команда, переданная методу в качестве параметра. </li> <li>Метод write (text) записывает в тело документа новый HTML-код, который передается в качестве параметра. Таким образом можно динамически формировать содержимое Web^cfpammsi без использования CGI-приложений.</li> <li> Метод writein (text) позволяет записывать в тело документа HTML-код, но при этом дописывает в конце добавляемого блока символ перевода каретки.</li> </ul> Как видно, практически все методы объекта document предназначены для динамического формирования его содержимого. Немного позже мы увидим, как это делается, а пока перейдем к рассмотрению списка событий, которые могут возникнуть при работе с данным объектом.<br> <ul> <li> Событие onftf terupdate возникает, когда пользователь при работе с формой, размещенной на Web-странице, отослал свои данные на сервер, и тот успешно принял и обработал их.</li> <li> Событие onBeforeUpdate инициируется в том случае, если пользователь ввел данные в форму, но вместо их отправки попытался выгрузить страницу из браузера.</li> <li> Событие onclick происходит в момент, когда пользователь производит на документе одиночный щелчок мышью.</li> <li> Событие onDbiciick возникает в момент двойного щелчка мышью на одном из элементов загруженной Web-страницы.</li> <li> Событие onDragstart инициируется в тот момент, когда пользователь начинает перетаскивать при потйющи мыши какой-либо элемент загруженной Web-страницы.</li> <li> Событие onError инициируется щда наличии ошибки в сценарии или в случае возникновения ошибки.,при передаче каких-либо данных, например, графических изображений.</li> <li> Событие onHeip возникает в тот момент, когда пользователь нажимает клавишу <F1>.</li> <li> Событие onKeyDown возникает, когда пользователь нажимает какую-либо клавишу. Какая именно клавиша была нажата, мы можем узнать при помощи объекта event.</li> <li> Событие onKeyPress постоянно генерируется в то время, когда пользователь нажал какую-либо клавишу и еше не отпустил ее.</li> <li> Событие опкеуир возникает, когда пользователь отпускает ранее нажатую клавишу.</li> <li> Событие onLoact инициируется в тот момент, когда загрузка HTML-документа в браузер полностью заканчивается.</li> <li> Событие onMouseoown возникает в тот момент, когда пользователь нажимает какую-либо кнопку мыши.</li> <li> Событие onMouseMove постоянно генерируется при перемещении пользователем мыши.</li> <li> Событие onMbuseOut возникает, когда пользователь уводит курсор мыши с данного объекта.</li> <li> Событие onMouseOver возникает при попадании курсора мыши на объект.</li> <li>Событие onMouseup инициируется в тот момент, когда пользователь отпускает заранее нажатую кнопку мыши.</li> <li> Событие oaReadystateChange инициируется каждый раз, когда по каким-либо причинам изменяется значение свойства readystate.</li> <li> Событие onseiectstart инициируется в тот момент, когда пользователь начинает выделять мышью некую часть Web-страницы.</li> </ul> На этом заканчивается список событий, которые могут возникать при работе с объектом; document. Мы рдсемотреяи полностью структуру этого объекта. Но мы уже говорили что он является "родителем" для многих других объектов, которые более детально описывают элементы Web-страниц. Необходимо рассмотреть и их.<br> Мы уже видели, что объекта document существует свойство body, которое содержит все тело Web-страницы. Но страницы с фреймовой структурой вообще не содержат тег <body>. И здесь мы можем работать с коллекцией фреймов, которая носит наименование frames. Мы уже говорили, что коллекции, по сути, являются массивами, состоящими из объектов. Так, если нам надо получить доступ к какому-либо фрейму, мы можем сделать это либо при Помощи его порядкового номера, дибо при помощи его наименования. Так, например, если самый верхний фрейм нашей Web-страницы носит наименование "topframe", то обратиться к нему мы можем при помощи двух эквивалентых конструкций:<br> window.frames(0)<br> window,frames{"topframe")<br> Как мы помним, нумерация в массивах, а, следовательно, и в коллекциях, начинается с нуля. Но для циклической обработки коллекции нам необходимо будет знать не только стартовый номер, но и общее количество элементов, входящих в состав данной,коллекции. Поэтому следует знать, что для каждой коллекции существует служебное свойство length, которое содержит количество элементов в коллекции. Следует помнить, что количество элементов и порядковый номер последнего элемента — разные вещи, так как нумерация открывается нулем.<br> Из приведенного примера видно, что для доступа к элементу коллекции стоит сначала указать родительский объект. Наименования объектов разделяются точками.<br> Каждый элемент коллекции frames функционально эквивалентен объекту window, поэтому обладает всеми его свойствами, методами, событиями и встроенными объектами, исключая объекты, обеспечивающие доступ к внутренним механизмам браузера, такие как history и navigator. Следовательно, каждый элемент коллекции frames имеет встроенный объект document со всем его содержимым.<br> Объект document, как мы знаем, полностью описывает Web-страницу, отображаемую в окне просмотра браузера или фрейма. Следовательно, в состав этого объекта должны входить другие объекты и коллекции, которые смогут предоставить нам доступ к любому HTML-блоку, к любому тегу. Рассмотрим список этих объектов и коллекций с кратким описанием каждого из них.<br> <ul> <li> Коллекция links содержит все гиперссылки и области, сформированные тегами <агеа> на данной Web-странице.</li> <li> Коллекция forms обеспечивает яеступ ко всем формам данного HTML-документа. Соответственно, каждый элемент этой коллекции содержит в качестве своих составных частей объекты, позволяющие обращаться к различным органам ввода данных, из которых и состоит форма.</li> <li> Коллекция anchors содержит все закладки на странице, доступ к которым осуществляется при помощи гаперссылок.</li> <li> Коллекция linages предназначена для хранения объектов графических изображений, внедренных в состав содержимбго Web-страницы.</li> <li> Коллекция scripts обеспечивает доступ ко всем программам-сценариям, которые были вставлены в код HTML-документа при помощи тега <script>.</li> <li> Коллекция applets содержит все внедренные объекты, такие как аппле-ты, элементы ActiveX, графические изображения, видеоклипы и любые объекты, обрабатываемые и отображаемые при помощи расширений браузера. </li> <li> Коллекция piugins содержит объекты, связанные со всеми внедренными элементами, обрабатываемыми расширениями браузера.</li> <li> Коллекция stylesheets предоставляет нам доступ ко всем стилдевым таблицам, внедренным в данный HTML-документ.</li> <li> Коллекция filters содержит все графические фильтры, Примененные к содержимому данной Web-етраницы. Графические фильтры не уиаследо-ванны из HTML, они являются исключительной прерогативой DHTML.</li> <li> Колекция all содержит ссылки на все теги и объекты, внедренные в состав содержимого данной Web-страницы.</li> <li> Объект selection позволяет работать с выделенной частью содержимого Web-страницы- Обычно это выделение производит пользователь.</li> <li> Объект textRange представляет собой блок текста, при помощи которого обычно разработчик динамически формирует текстовое содержимое HTML-документа.</li> </ul> Мы перечислили основные составные гчасги объекта document. Конечно, одного их перечисления не достаточно для того, чтобы начать с ними работать. Но несколько позже, в следующих разделах данной главы мы будем разбирать примеры задач, решаемых с ломощью этих объектов, а следовательно, нам придется тщательно рассмотреть их структуру.<br> А сейчас пора перейти к рассмотрению; событийной модели DHTML и оза-накомиться с примерами применения программ-скриптов. </td> </tr> </table> <br><br> <h1>Обработка форм</h1> <br> </h2> Как мы знаем, чаще всего формы с их органами ввода данных, применяются для того, чтобы передавать информацию, введенную пользователем, обрабатывающей программе, которая расположена на каком-либо Web-сервере. Так как все скрипты, которые мы используем в DHTML, в силу своей природы выполняются в браузере удаленного пользователя, обработка форм средствами DHTML, казалось бы, невозможна. На самом деле, все немножко не так.<br> В предыдущих разделах главы мы уже видели примеры работы с органами ввода информации. При этом их даже необязательно было включать в формы. Более того, когда мы рассматривали объекты, создаваемые теми или иными элементами содержимого Web-страниц, то обращали внимание, что теги объявления форм и создания органов ввода информации тоже входят в объектную модель DHTML. Следовательно, мы имеем возможность работать с ними при помощи программ-скриптов.<br> Очень часто скрипты используют для проверки информации, вводимой пользователем, на соответствие некоторым условиям. Например, одно из полей текстового ввода предназначено для указания возраста удаленного посетителя. Естественно, разработчик Web-страницы ожидает, что туда будут вноситься только цифры. Но далеко не всегда так происходит.<br> Обязательно найдется человек (и далеко не один), который внесет в это поле ввода несоответствующую информацию просто из любопытства или по ошибке. Естественно, при отсылке введенных данных ничего произойти не должно. А если программа-анализатор, которая принимает эти данные из формы, спроектирована правильно, то она проверит введенное значение, и в том случае, если оно не входит в установленные разумные рамки (возраст не может быть отрицательным, более 100 лет и т. п.), сгенерирует Web-страницу, на которой будет указано, что была введена некорректная информация, и отправит ее в браузер удаленного пользователя. Но на все это необходимо время. Время для передачи данных на сервер, время для их обработки, и время для передачи созданной Web-страницы от сервера обратно к удаленному пользователю. А если процедуру проверки введенных данных мы встроим в саму Web-страницу, используя для этих целей технологию DHTML, то временной задержки можно будет избежать. В листинге 7.8 приведен пример кода подобного HTML-документа.<br> Листинг 7.8 <br> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><br> <html> <head> <link rel="canonical" href="https://www.e-lave.ru//glava-1.htm"/><br> <title>06pa6oTKa <?opM</title><br> <script language="javascript"><br> <! —<br> function checkdata()<br> {<br> if ((event.keyCode<48) I I (event.keyCode>57)) event.returnValue=false<br> }<br> //--><br> </script><br> </head><br> <body><br> <form><br> <p> Возраст <input type="text" onKeyPress="checkdata()"></p><br> </form> </body><br> </html><br> <div style="text-align:center;"><img src="image/obrabotka-form_1.gif" alt="Обработка форм"></div><br> Рис. 7.8. Окно браузера с результатом отображения файла, приведенного в листинге 7.8.<br> В этом HTML-документе мы создаем форму с одним полем текстового ввода (рис. 7.8). Данное поле предназначено для ввода возраста удаленного пользователя. Естественно, возраст может быть лишь числовым значением. Поэтому при помощи программы-скрипта мы просто блокируем ввод символов, не являющихся цифрами. Известно, что коды цифровых символов лежат в промежутке между 48 и 57. Этим фактом мы и воспользуемся.<br> Мы будем обрабатывать событие onKeypress для поля ввода текстовой информации. То есть, мы перехватываем нажатие каждой клавиши, когда фокус ввода передан полю ввода. Коды нажатых пользователем клавиш мы получаем при помощи свойства keyCode объекта event. А после этого остается лишь проверить, что эти коды находятся в оговоренном промежутке допустимых в данном случае значений. И если это не так, следовательно, пользователь нажал не цифровую клавишу. В этом случае мы используем returnvalue все того же объекта event. Введенный символ отображается в поле текстового ввода после того, как событие onKeypress возвратит его код. Если же мы присваиваем свойству returnvalue значение false, то возврата значения не произойдет. Следовательно, и введенный символ не будет отбражаться в поле ввода. Именно на этом механизме и основано действие скрипта, внедренного в HTML-документ, код которого приведен в листинге 7.8.<br> Однако одной проверки вводимых символов в соответствующее поле может и не хватить. Возраст человека должен быть правдоподобным. В текущем варианте ничто не помешает человеку внести в поле ввода значение, состоящее, например, из пяти цифр. Понятно, что полученное число будет иметь весьма отдаленное отношение к реальному возрасту удаленного пользователя. Поэтому было бы неплохо после ввода числа пользователем проверить, что оно находится в промежутке между, скажем, десятью и девяноста. Код документа с подобным скриптом приведен в листинге 7.9.<br> Листинг 7.9<br> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"<br> "http://www.w3.org/TR/html4/strict.dtd"><br> <html> <head> <link rel="canonical" href="https://www.e-lave.ru//glava-1.htm"/><br> <title>06pa6oTKa <$opM</title> <script language^"javascript"> <! —<br> function checkdata() {<br> if ((event.srcElement.value<10)||(event.srcElement.value>90) alert("Введите правильный возраст");<br> } //--><br> </script> </head> <body> <form><br> <p> Возраст <input type="text" name="fl" onChange="checkdata ( ) "></p><br> <p> Имя и фамилия <input type="text" name="f 2"></p> <p><input type="submit" value="OTnpaBHTb"x/p> </form> </body> </html><br> В этом документе для проверки значения, введенного пользователем, мы используем событие onChange, которое инициируется после того, как пользователь перейдет от поля ввода к какому-либо другому органу правления Web-страницы. То есть, это событие отрабатывается непосредственно перед событием onBlur.<br> Итак, пользователь ввел некоторое значение в интересующее нас поле. Теперь мы перехватываем событие onChange и проводим проверку введенного значения. Значение мы получаем в качестве свойства value. Доступ к текущему полю получим при помощи свойства srcElement объекта event. А затем остается при помощи условного оператора if проверить, удовлетворяет ли введенное значение необходимым условиям. В том случае, если значение не удовлетворяет наложенным условиям, мы при помощи оператора alert отображаем информационное окно с соответствующим текстом (рис. 7.9).<br> При помощи подобной технологии мы можем проверять все вводимые пользователем данные на соответствие неким условиям, которые определяются разработчиком Web-страницы. Как мы уже говорили, это помогает избежать досадных ошибок, которые неизбежно будут возникать из-за невнимательности пользователей, без дополнительного обращения к приложению, обрабатывающему данные.<br> <div style="text-align:center;"><img src="image/obrabotka-form_2.gif" alt="Обработка форм"></div><br> Рис. 7.9. Окно браузера с результатом отображения файла, приведенного в листинге 7.9, после того как пользователь внес неправильное значение в поле ввода<br> Но рассмотренные нами способы работы с формами и органами ввода не исчерпывают весь спектр возможностей DHTML в этой области. Мы можем динамически изменять содержимое формы в зависимости от действий пользователя.<br> Предположим, что нам необходимо провести на сайте некий опрос. При этом для мужчин и женщин используются различные наборы вопросов. Мы можем либо создать две отдельные Web-страницы, одну для мужчин и одну для женщин, с наборами вопросов, и два приложения, обрабатывающих эти формы. А можем при помощи DHTML модифицировать одну и ту же Web-страницу в зависимости от указанного пола удаленного пользователя. Код подобного HTML-документа приведен в листинге 7.10.<br> Листинг 7.10<br> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http: //www.w3.oi;g/TR/html4/strict.dtd"><br> <html> <head> <link rel="canonical" href="https://www.e-lave.ru//glava-1.htm"/><br> <title>06pa6oTKa <|>opM</title> <script language="javascript"> <! -<br> function changelist(x) {<br> if (x==l)<br> {document.all.selectl.options[0].text="Cmbra"; document.all.selectl.options[1].text="Eлeнa"; docшnent . all . selectl.options[2].text="Лариса"; рЗ. innerText="Bbi6epMTe Ваше любимое женское имя"; }<br> if (x==2)<br> {document.all.selectl.options[0].text="Игорь"; document.all.selectl.options[1].text="AneKceu"; document. all. selectl. options [2 ] . text="CXner" ; p3. innerText="Bbi6epnTe Ваше любимое мужское имя"; I } // —><br> </script><br> </head><br> <body><br> <form><br> <р>Ваш пол: </р><br> <р>Мужской <input type="radio" name="groupl" value="male" onClick="changelist (1) " checked></p><br> <р>Женский <input type="radio" name="groupl" value="female" onClick="changelist (2) "></p><br> <p id="p3">Bbi6epnTe Ваше любимое женское имя</р><br> <p><select name="menu" id="selectl"><br> <option value="l">0льгa</option><br> <option value="2">Eлeнa</option><br> <option value="3">Лapиca</option><br> </select><br> </р><br> <input type="submit" уа1ие="Подтвердить"> </form> <br> </body> </html><br> <div style="text-align:center;"><img src="image/obrabotka-form_3.gif" alt="Обработка форм"></div><br> Рис. 7.10. Окно браузера с результатом отображения файла, приведенного в листинге 7.10, после того как пользователь выбрал второй переключатель<br> Итак, рассмотрим механизм изменения содержимого отдельных элементов оформления Web-страницы, инициируемого действиями пользователя. Изменения происходят после того, как пользователь активизирует один из двух переключателей. Для этого мы в определении этих переключателей указали, что событие onclick, возникающее при одиночном щелчке мыши на нем, будет обрабатываться функцией changeiist. В качестве параметра данной функции передается единица или двойка, в зависимости от выбранного удаленным пользователем варианта.<br> Теперь рассмотрим принцип действия функции changeiist. Она призвана изменять содержимое выпадающего списка имен. Также, она изменяет текст, отображаемый перед этим списком. По умолчанию мы создали Web-страницу, ориентированную на мужчин. Как только пользователь при помощи соответствующего переключателя указывает, что он является женщиной, программа-скрипт изменяет список имен, вставляя туда мужские имена, и модифицирует текстовую строку перед этим списком (рис. 7.10). Естественно, необходимо учесть и тот вариант, что пользователь может несколько раз изменять свой выбор, активизируя тот или иной переключатель. Именно поэтому функция changeiist состоит из двух блоков, динамически изменяющих часть формы в зависимости от выбора удаленного пользователя.<br> Для того чтобы изменить имена в выпадающем списке, мы используем кон-стукцию следующего вида:<br> document.all.selectl.options[0].text<br> Идентификатор нашего выпадающего списка — seiecti. В данном случае мы осуществляем доступ к нему через коллекцию all объекта document. В самом этом объекте выпадающего списка есть коллекция options, в которой содержатся все пункты выпадающего списка. Доступ к ним осуществляется при помощи указания их номера в квадратных скобках.<br> Внимание<br> Необходимо учитывать, что нумерация в коллекциях ведется с нуля.<br> В элементах списка мы меняем только текст, отображаемый в окне просмотра. Значение, передаваемое в обрабатывающую программу не модифицируем. А для того, чтобы изменить текст элементов списка, мы воспользовались соответсвующим свойством text.<br> Также изменению подвергался текст абзаца с идентификатором рз. Для того, чтобы изменить его текстовое содержимое, мы воспользовались свойством innerText, присущим данному элементу. Данное свойство содержит только текст, находящийся между граничными тегами данного элемента.<br> </td> </tr> </table> <br><br> <h1>Обработка событий</h1> <br> </h2> В предыдущем разделе этой главы мы изучили список событий, присущий объектам document и window. Уже, исходя из их наименования и кратких описаний было ясно, что они инициируются при некоторых действиях пользователя или возникновении некоторых заранее определенных ситуаций. Любое действие, производимое при помощи программ-скриптов DHTML, может произойти только в ответ на некоторое событие, благо их перечень охватывает все мыслимые ситуации, возникающие при работе с Web-страницей. Рассмотрим простейший пример создания программы-скрипта, реагирующей на какой-либо событие. Например, при щелчке пользователя мышью на содержимом текстового абзаца, программа изменит цвет символов, которыми этот текст отображен. Для этого мы должны создать HTML-документ, код которого указан в следующем листинге.<br> Листинг 7. 1<br> <!bOCTYPE HTML PUBLIC "-//W3C7/DTD HTML 4. 01У/ЕЫМ "http://www.w3.org/TR/html4/strict.cltcl"><br> <h.tjai> <br> <head> <link rel="canonical" href="https://www.e-lave.ru//glava-1.htm"/><br> <^1?1е>Иэменяемый «BeT</title> . <br> <scrif>t language»" javascript"> <br> fuftotion changecolor ( ) ?<br> {pi. style. color-"blue";<br> .}. <br> " //"><br> </sc?ipt> </liead> .<br> <body><br> <p id«»"pl" onClick-"ch,angecolor () "<br> font з1ге«5>Стррка TeKCTa</fontx/p><br> </body> </html><br> Этот маленький пример позволяет очень наглядно продемонстрировать основные принципы работы DHTML (рис. 7.1). Начнем мы с правил внедрения скриптов в HTML-документ.<br> Мы уже знаем, что скрипт должен размещаться в заголовке HTML-документа между тегами <head> <link rel="canonical" href="https://www.e-lave.ru//glava-1.htm"/> и </head>. Сам код оформляется при помощи тегов ocript> и </script>. Пропуск закрывающего тега явяшся достаточно распространенной ошибкой начинающих разработчиков, поэтому всегда следует осуществлять контроль присутствия закрывающих парных тегов. В данном случае, если пропустить закрывающий тег, браузер будет считать весь код, размещенный после тега <script>, программой и соответственно, не будет отображать его,<br> <br><br> <br> <div style="text-align:center;"><img src="image/obrabotka-sobytij_1.gif" alt="Обработка событий"></div><br><br> Рис. 7.1. Внешний вид HTML-документа после работы программы-скрипта<br><br> Между дарой.тегов <script> размещен код самой программы. Для того чтобы устаревшие версий браузеров, не поддерживающие технологию программ-сценариев, не видели этот код, он обязательно оформляется как комментарии.<br> Теперь ненадолго отвлечемся от кода программы и перейдем к рассмотрению тела HTML-документа. Основным его элементом является один текстовый абзац, объявленный при помощи тега <р>. В коде листинга видно, что помимо самого тега мы использовали и дополнительные параметры. Одним из них является идентифицирующий параметр id, при помощи значения которого мы задаем уникальный идентификатор данного элемента содержимого Web-страницы. Только при помощи этого уникального идентификатора мы и смогли избирательно применить динамическое оформление текста.<br> Также в состав открывающего тега <р> входит дополнительный параметр, который мы не рассматривали в первой главе. Дело в том, что официально в HTML не существует подобного параметра. В качестве параметра мы записали наименование события, при возникновении которого управление перейдет к программе-скрипту..Подобные способы записи событий как параметров присущи именно технологии DHTML В качестве значения этого параметра мы записали выполняемый код. В нашем случае это был всего лишьлызов функции, которая была заранее определена в заголовке HTML-документа. Сама функция в данном случае также была чрезвычайно проста. Мы использовали всего лишь один оператор:<br><br> р1. style. со1ог="bluе" ;<br><br> Понятно, что левая часть оператора является .обращением к некоему объекту, но при рассмотрении объектной иерархии нам не встречался объект с наименованием "pi". Более того, очевидно, чтон связан с текстовым абзацем, который имеет точно такой же идентификатор.<br> Дело в том, что в Состав объекта document входит неявный объект с общим наименованием element. Объект мы называем "неявным", -потому что в качестве него может использоваться любой, я подчеркиваю, любой элемент Web-страницы, который создается при помощи какого-либо тега. <br><br> <br> При этом наименование объекта будет совпадать с идентификатором искомого элемента, т. е. соответствовать значению параметра id.<br> Для того, чтобы изменить свойства отображения даняого элемента, мы использовали объект style, являющийся дочерним по отношению к объекту element. Этот объект позволяет использовать всю мощь стилевых таблиц без прямого их создания. В коде Web-страницы мы не указали явно цвет шрифта, которым отображается текст абзаца. Но в программе-скрипте мы применили свойство color, которое позволяет регулировать цвет символов текста, и при выполнении функции цвет шрифта был переопределен.<br> Следует обратить внимание, что действие скрипта было выполнено в ответ на некое событие, порожденное действиями пользователя. Еще раз повторюсь, что технология DHTML полностью ориентирована именно на события. Подобный ставь, программирования обычно называют "событийно-ориентированным". Именно поэтому для овладения технологией DHTML в, полной мере необходимо досконально разбираться в принципах возникновения событий и их обработки.<br> Так же достойна внимания концепция "конвейера событий" в DHTML. Суть этой концепции достаточно проста. Мы знаем, что в HTML одни элементы могут находиться внутри других. Например, абзац, порождаемый тегами <р> и </р>, может находиться .внутри ячейки таблицы. Сами ячейки находятся внутри отдельных строк таблицы, а те, в свою очередь, сами содержатся в таблице, порожденной тегами <table> и </table>. Теперь посмотрим, что произойдет, если пользователь произведет одиночный щелчок мышью по этому абзацу. Абзац, естстественно, инициирует событие onclick. Но ведь абзац находиться в ячейке, следовательно, пользователь щелкнул и по ячейке. И сама ячейка тоже инициирует событие onclick, а за ней точно также поступит элемент строки таблицы и вся таблица. И так очередь дойдет до основного элемента body.<br> При этом, если для всех или некоторых элементов, через которые прошло это событие, были определены функции, выполняемые в ответ на щелчок мыши, то они все будут выполнены. <br><br> <br> Если же разработчику необходимо обрабатывать событие только в рамках того_ элемента, где оно произошло, не отправляя вверх по объектной иерархий, следует воспользоваться одним из свойств элемента event. Мы уже рассматривали этот объект и упоминали его свойство canceisubbie, которое отменяет перемещение события вверх по объектной иерархий. Поэтому, если бы мы в нашем скрипте захотели установить обработку события только для одного элемента, прерывая передвижение события вверх по объектной иерархии, наш скрипт выглядел бы следующим образом:<br><br> <script laguage="javascript"><br> function changecolor <br> {<br> (pi. style. color="blue" );<br> window. event , cance!Bubble<br> Txue;<br> </script><br><br> Как видно, в этом случае мы лишь присвоили логическое значение "Истина" данному свойству. Этого достаточно для того, чтобы отменить обработку данного события всеми вышестоящими элементами. В предыдущем разделе мы уже рассматривали струкутру объекта event «знаем, что даный объект при помощи своих свойств предоставляет детальную информацию обо всех событиях, которые входят в состав технологии DHTML.<br> Следует также упомянуть, что различные элемента! Web-страниц могут реагировать на разные события. Возможный список событий определяется функциональностью каждого конкретного элемента Web-страницы. Чтобы однозначно определить, какой тег какими событиями обладает, приведем таблицу соответствий.<br><br> Таблица 7.2 Теги и события<br><br> <table border=1> <tr> <td> Тег </td> <td> Описание </td> <td> Список поддерживаемых событий </td> </tr> <tr> <td> <а> </td> <td> Гиперссылка </td> <td> onblur, onclick, ondblclick, ondragstart, onerrorupdate, onf interchange, onfocus, onhelp, onkeydown, onkeyptess, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onselectstart </td> </tr> <tr> <td> <address> </td> <td> Специализированное форматирование текста </td> <td> Onclick, ondblclick, ondragstart, onhelp, bnkeydoWn, onkeypress, onkeyup, onmoaaedown, onmousemove, onmouseout, onmouseover, onmouseup, onselectstart </td> </tr> <tr> <td> <applet> </td> <td> Внедряет в состав Web-страницы Java-апплет </td> <td> Onafterupdate, onbef oreupdate, onblur, onclick, ondataavailable, ondatasetelianged, ondatasetcomplete, ondblclick, ondragstart, onerrorupdate, onfocus, onhelp, orikeydowri, onkeypress, onkeyup, onload, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onreadystatechange, onresize, onrdwenter, onrowexit, onselectstart </td> </tr> <tr> <td> <area><br> </td> <td> Создает активную область-гиперссылку в сегментированной графике<br> </td> <td> onblur, onclick, ondblclick, ondragstart, onfilterchange, onfocus, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup<br> </td> </tr> <tr> <td> <b><br> </td> <td> Выделяет текст полужирным шрифтом<br> </td> <td> onclick, ondblclick, ondragstart, onfilterchange, onhelp, orikeydown, onkeypress t onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onselectstart<br> </td> </tr> <tr> <td> <big><br> </td> <td> Увеличивает размер шрифта на единицу<br> </td> <td> onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, .onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup<br> </td> </tr> <tr> <td> <blockquote><br> </td> <td> Специализированное форматирование текста<br> </td> <td> onclick, ondblclick, ondragstart, onf ilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onselectstart<br> </td> </tr> <tr> <td> <body><br> </td> <td> Определяет содержательную часть Web-страницы<br> </td> <td> onafterupdate, onbeforeupdate, onblur, onclick, ondblclick, ondragstarti onfocus, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onresize, onrowenter, onrowexit» onscroll, onselectstart<br> </td> </tr> <tr> <td> <button><br> </td> <td> Создает кнопку<br> </td> <td> onafterupdate, onbeforeupdate, onblur, onclick, ondblclick, ondragstart, onfilterchange, onfocus, onhelp, onkeydown, onkeypieess, onkeyup, onmousedown, onmousemove, onmbuseout, onmouseover, onmouseup, onresize, onrowenter, onrowexit, onscroll, onselectstart<br> </td> </tr> <tr> <td> <caption><br> </td> <td> Создает<br> заголовок<br> таблицы<br> </td> <td> i onafterupdate, onbeforeupdate, onblur, onclick, ondblclick, ondragstart, onfilterchange, onfocus, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onresize, onrowenter, onrowexit, onscroll, onselectstart<br> </td> </tr> <tr> <td> <center> </td> <td> Центрирует блок содержимого </td> <td> «ftelick, onecibiclick, ondragstart, ®af ilterchange, ©iihelp, onkeydown, Qnkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, 'onselectstart </td> </tr> <tr> <td> <cite> </td> <td> Специализированное форматирование текста </td> <td> onclick, ondl&cllck, ondragstart, onfilterchange, оп&Цр, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onselectstart </td> </tr> <tr> <td> <code> </td> <td> Специализированное форматирование текста </td> <td> onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onselectstart </td> </tr> <tr> <td> <dd> </td> <td> Элемент списка </td> <td> onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, omaousedown, . onmousemove, onmouseout, onmouseover, onmotiseup, onselectststtr й ' • </td> </tr> <tr> <td> <dfn> </td> <td> Специализированное форматирование текста </td> <td> onclick, ondblclick, ondragstart, ©lifilter change, onhelp, onkeydown, oakeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onselectstart </td> </tr> <tr> <td> <div> </td> <td> Группировка элементов содержимого Web-страницы </td> <td> onafterupdate, onbeforeupdate, onblur, onclick, ondblclick, ondragstart, cuifojGus, onhelp, onkeydown, onk®ypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onresize, onrowenter, onrowexit, onscroll, onselectstart </td> </tr> <tr> <td> <dl> </td> <td> Создание списка </td> <td> onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onselectstart </td> </tr> <tr> <td> <dt> </td> <td> Создание элемента списка </td> <td> onclick, ondblolick, ondragstart, onf ilterchange, onhelp, onkeydown, onkeypress, onkeyup, oninousedown, onmousemove, onmouseout, omnouseover, onmouseup, onselect start </td> </tr> <tr> <td> <em> </td> <td> Специализированное форматирование текста </td> <td> onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onselectstart </td> </tr> <tr> <td> <embed> </td> <td> Внедрение в состав содержимого Web-страницы объектов различных типов </td> <td> onblur, onf ocus </td> </tr> <tr> <td> <font> </td> <td> Определение шрифта для отображения текста </td> <td> onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onselectstart </td> </tr> <tr> <td> <form> </td> <td> Определяет форму в HTML-документе </td> <td> onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress,, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onreset, onselectstart, onsubmit </td> </tr> <tr> <td> <hl> — <h6> </td> <td> Создают заголовки </td> <td> onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onselectstart </td> </tr> <tr> <td> <hr> </td> <td> Отображает горизонтальную линию </td> <td> onbeforeupdatte, onblur, onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onraouseup, onresize, onrowenter, on-rowexit, onselectstart </td> </tr> <tr> <td> <i> </td> <td> Выделяет текст курсивом </td> <td> onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onselectstart </td> </tr> <tr> <td> <img> </td> <td> Вставляет графическое изображение </td> <td> onabort, onaf terupdate, onbef oreupdate, onblur, onclick, ondblclick, ondragstart, onerror, onf ilterchange, onfocus, onhelp, onkeydown, onkeypress, onkeyup, onload, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onresize, onrowenter, onrowexit, onscroll, onselectstart </td> </tr> <tr> <td> <input> </td> <td> Создает орган ввода информации </td> <td> onaf terupdate, onbeforeupdate, onblur, onclick, ondblclick, ondragstart, onerrorupdate, onf ilterchange, onfocus, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onresize, onselect, onselectstart </td> </tr> <tr> <td> <kbd> </td> <td> Специализированное форматирование текста </td> <td> onclick, ondblclick, ondragstart, onf ilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onselectstart </td> </tr> <tr> <td> <label> </td> <td> Создает текстовую метку для некоторых органов ввода информации </td> <td> onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onselectstart </td> </tr> <tr> <td> <li> </td> <td> Создает элемент списка </td> <td> onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onselectstart </td> </tr> <tr> <td> <link> </td> <td> Объявляет связь между различными HTML-документами </td> <td> onerror, onload, onreadystatechange </td> </tr> <tr> <td> <listing> </td> <td> Специализированное форматирование текста </td> <td> onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onselectstart </td> </tr> <tr> <td> <map> </td> <td> Создает карту сегментированной графики </td> <td> onclick, ondblclick, ondragstart, onf ilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onselectstart </td> </tr> <tr> <td> <object> </td> <td> Внедряет какой-либо объект в HTML- доку мент </td> <td> onafterupdate, onbeforeupdate, onblur, onclick, ondataavailable, ondataset changed, ondatasetcomplete, ondblclick, ondragstart, oneror, onerrorupdate, onf ilterchange, onfocus, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onreadystatechange, onreset, onresize, onrowenter, onrowexit, onselectstart </td> </tr> <tr> <td> <ol> </td> <td> Создает нумерованный список </td> <td> onclick, ondblclick, ondragstart, onf ilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onselectstart </td> </tr> <tr> <td> <P> </td> <td> Задает текстовый абзац </td> <td> onclick, ondblclick, ondragstart, onf ilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onselectstart </td> </tr> <tr> <td> <plaintext> </td> <td> Устанавливает специализированное форматирование текста </td> <td> onclick, ondblclick, ondragstart, onf ilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onselectstart </td> </tr> <tr> <td> <pre> </td> <td> Устанавливает специализированное форматирование текста </td> <td> onclick, ondblclick, ondragstart, onf ilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onselectstart </td> </tr> <tr> <td> <s> </td> <td> Отображает зачеркнутый текст </td> <td> onclick, ondblclick, ondragstart, onf ilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onselectstart </td> </tr> <tr> <td> <sup> </td> <td> Устанавливает специализированное форматирование текста </td> <td> onclick, ondblclick, ondragstart, onf ilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, ons elect start </td> </tr> <tr> <td> <table> </td> <td> Создание таблицы </td> <td> onaf terupdate, onbeforeupdate, onblur, onclick, ondblclick, ondragstart, onfocus, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onresize, onrowenter, onrowexit, onscroll, onselectstart </td> </tr> <tr> <td> <tbody> </td> <td> Обозначает основной раздел таблицы </td> <td> onclick, ondblclick, ondragstart, onf ilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onselectstart </td> </tr> <tr> <td> <td> </td> <td> Объявляет ячейку таблицы </td> <td> onafterupdate, onbeforeupdate, onblur, onclick, ondblclick, ondragstart, onf ilterchange, onfocus, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onresize, onrowenter, onrowexit, onselectstart </td> </tr> <tr> <td> <textarea> </td> <td> Создает многострочное поле текстового ввода </td> <td> onafterupdate, onbeforeupdate, onblur, onchange, onclick, ondblclick, ondragstart, onerrorupdate, onf ilterchange, onfocus, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onresize, onrowenter, onrowexit, onscroll, onselect, onselectstart </td> </tr> <tr> <td> <tfoot> </td> <td> Создает нижнюю часть таблицы </td> <td> onclick, ondblclick, ondragstart, onf ilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onselectstart </td> </tr> <tr> <td> <th> </td> <td> Объявляет строку заголовка таблицы </td> <td> onclick, ondblclick, ondragstart, onf ilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onselectstart </td> </tr> <tr> <td> <thead> </td> <td> Создает область заголовка таблицы </td> <td> onclick, ondblclick, ondragstart, onf ilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onselectstart </td> </tr> <tr> <td> <tr> </td> <td> Объявляет строку таблицы </td> <td> onuf terupdate, onbeforeupdate, onblur, onclick, ondblclick, ondragstart, onf ilterchange, onfocus, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onresize, onrowenter, onrowexit, onselectstart </td> </tr> <tr> <td> <tt> </td> <td> Устанавливает специализированное шрифтовое оформление </td> <td> onclick, ondblclick, ondragstart, onf ilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onselectstart </td> </tr> <tr> <td> <u> </td> <td> Отображает подчеркнутый текст </td> <td> onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onselectstart </td> </tr> <tr> <td> <ul> </td> <td> Создает маркированный список </td> <td> onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onselectstart </td> </tr> <tr> <td> <var> </td> <td> Устанавливает специализированное форматирование текста </td> <td> onclick, ondblclick, ondragstart, onfilterchange, onhelp, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onselectstart </td> </tr> </table> <br><br> <br> Но иногда нам необходимо получить более детальную информацию о теку щей ситуации. При этом стандартных событий может быть мало. И здеа разработчик может воспользоваться объектом event. Его структуру мы уж( обсуждали в предыдущем разделе этой главы. Теперь мы можем на пример наглядно увидеть механизм использования этого элемента. Мы уже говори ли, что подавляющее большинство свойств этого объекта носят сугубо ин формативный характер, и потому доступны в режиме "только для чтения" Возможный способ работы с ними показан в листинге 7.2.<br><br> Листинг 7.2<br><br> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><br> <html> <head> <link rel="canonical" href="https://www.e-lave.ru//glava-1.htm"/><br> <title>06pa6oTKa co6biTMu</title> <script language^"javascript">  </script><br> </head> <body><br> <p><font з!ге=5>0бычная Web-CTpaHMua</fontx/p> <br> </body><br> </html><br><br> Разберем структуру приведенного скрипта. В самом начале программы мы объявляем функцию с наименованием info. После кода этой функции мы вставили строку следующего вида:<br><br> window.document.ondblclick=infо;<br><br> При помощи этой конструкции мы указываем, что функция info будет выполняться в том случае, если пользователь произведет двойной щелчок мышью в окне просмотра браузера. Так как мы не можем использовать для этих целей какой-либо тег содержимого Web-страницы, нам приходится использовать событие Объекта document.<br><br> <div style="text-align:center;"><img src="image/obrabotka-sobytij_2.gif" alt="Обработка событий"></div><br><br> Рис. 7.2. Окно браузера с результатом отображения файла, приведенного в листинге 7.2<br><br> Теперь рассмотрим механизм действия функции info. Функция состоит из двух операторов. Первый из них присваивает переменной некую строку, формируя ее из заданного текста и двух значений объекта event, которые указывают координату курсора мыши в момент совершения пользвателем двойного щелчка (рис. 7.2). <br><br> <br> Второй оператор при помощи ключевого слова alert отображает модальное окно с текстом, который является значением переменной из первого оператора.<br> Мы увидели в действии основные механизмы обработки событий в DHTML. Теперь мы можем создавать свои программы-скрипты, ориентированные на работу с событиями, возникающими при работе пользователя с нашими HTML-документами. Однако мы знаем, какие события соответствуют тому или иному объекту, но мы указали смысл далеко не для всех возможных событий. Пришло время это сделать. В табл. 7.3 перечислены все события, используемые в технологии DHTML, и ситуации, в которых они инициируются.<br><br> Таблица 7.3. События в DHTML<br><br> <table border=1> <tr VALIGN="TOP" class="text_b"> <td VALIGN="TOP" "32"> Событие </td> <td VALIGN="TOP" "32"> Описание </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "46"> onabort </td> <td VALIGN="TOP" "46"> Инициируется, когда пользователь принудительно прерывает загрузку данных </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "27"> onaf terupdate </td> <td VALIGN="TOP" "27"> Возникает при окончании передачи данных </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "27"> onbeforeunload </td> <td VALIGN="TOP" "27"> Инициируется перед выгрузкой страницы </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "30"> onblur </td> <td VALIGN="TOP" "30"> Утеря фокуса ввода объектом </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "30"> onchange </td> <td VALIGN="TOP" "30"> Инициируется при изменении содержимого объекта </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "25"> onclick </td> <td VALIGN="TOP" "25"> Происходит при одиночном щелчке мыши на объекте </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "27"> ondataa vail able </td> <td VALIGN="TOP" "27"> Инициируется при получении данных из источника </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "46"> ondataset changed </td> <td VALIGN="TOP" "46"> Возникает при изменении набора данных, на основе которого функционирует элемент </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "43"> ondataset complete </td> <td VALIGN="TOP" "43"> Инициируется в тот момент, когда исходый набор данных становится полностью доступным для документа </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "46"> ondblclick </td> <td VALIGN="TOP" "46"> Возникает при выполнении пользователем двойного щелчка мыши на элементе </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "43"> ondragstart </td> <td VALIGN="TOP" "43"> Возникает в тот момент, когда пользователь начинает перетаскивать объект при помощи мыши </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "48"> onerror </td> <td VALIGN="TOP" "48"> Инициируется в случае возникновения ошибки при передаче данных </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "25"> one rr or update </td> <td VALIGN="TOP" "25"> Возникает при отмене изменения данных </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "43"> onf ilterchange </td> <td VALIGN="TOP" "43"> Возникает при изменении состояния графического фильтра </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "43"> onf ilterevent </td> <td VALIGN="TOP" "43"> Инициируется при окончании этапа действия графического фильтра </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "25"> onfocus </td> <td VALIGN="TOP" "25"> Возникает при получении объектом фокуса ввода </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "45"> onhelp </td> <td VALIGN="TOP" "45"> Возникает в тот момент, когда пользователь нажимает клавишу <F1> </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "43"> onkeydown </td> <td VALIGN="TOP" "43"> Инициируется при нажатии пользователем какой-- либо клавиши на клавиатуре </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "48"> onkeypress </td> <td VALIGN="TOP" "48"> Инициируется при нажатии клавиши и ее удержании в нажатом положении </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "36"> onkeyup </td> <td VALIGN="TOP" "36"> Возникает, когда пользователь отпускает нажатую клавишу </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "52"> onload </td> <td VALIGN="TOP" "52"> Инициируется, когда загрузка объекта полностью завершается </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "30"> onmousedown </td> <td VALIGN="TOP" "30"> Возникает, когда пользователь нажимает кнопку мыши </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "20"> onmousemove </td> <td VALIGN="TOP" "20"> Возникает, когла пользователь перемещает мышь </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "39"> onmouseout </td> <td VALIGN="TOP" "39"> Инициируется в тот момент, когда пользователь уводит курсор мыши с пространства, занимаемого объектом </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "73"> onmouseover </td> <td VALIGN="TOP" "73"> Инициируется в тот момент, когда пользователь перемещает курсор мыши в пространство, занимаемое объектом </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "43"> onmouseup </td> <td VALIGN="TOP" "43"> Возникает, когда пользователь отпускает ранее нажатую кнопку мыши </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "32"> onreadystatechange </td> <td VALIGN="TOP" "32"> Возникает при изменении свойства readystate </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "43"> onreset </td> <td VALIGN="TOP" "43"> Возникает при нажатии пользователем на кнопку Reset, расположенную на форме </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "41"> onresize </td> <td VALIGN="TOP" "41"> Инициируется в тот момент, когда пользователь изменяет размеры окна просмотра </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "46"> onrowenter </td> <td VALIGN="TOP" "46"> Инициируется при изменении данных в строке, связанной с внешним источником данных </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "48"> onrowexit </td> <td VALIGN="TOP" "48"> Инициируется перед тем, как данные в строке будут изменены источником данных </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "43"> onscroll </td> <td VALIGN="TOP" "43"> Возникает, когда пользователь прокручивает содержимое Web-страницы в окне просмотра браузера </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "27"> onselect </td> <td VALIGN="TOP" "27"> Возникает при изменении текущей выделенной области </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "43"> onselectstart </td> <td VALIGN="TOP" "43"> Инициируется, когда пользователь начинает выделять область содержимого </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "61"> onsubmit </td> <td VALIGN="TOP" "61"> Инициируется, когда пользователь нажимает на кнопку Submit, расположенную на форме, и отсылает данные из формы на сервер </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "50"> onunload </td> <td VALIGN="TOP" "50"> Инициируется непосредственно перед выгрузкой страницы из окна просмотра браузера </td> </tr> </table> Теперь, когда мы знаем, какие события соответствуют различным элементам Web-страницы, и в каких ситуациях эти события возникают, единственное, чего нам не хватает для того, чтобы создавать действительно разветвленные и гибкие программы-сценарии, — это то, какие свойства и методы присущи различным элементам Web-страниц. Об этом мы узнаем в следующем разделе. </td> </tr> </table> <br><br> <h1>Позиционирование элементов Web-страницы</h1> <br> </h2> Одним из наиболее используемых преимуществ DHTML является возможность точно позиционировать элементы оформления Web-страницы. Как мы помним, в самом HTML у нас отсутствует возможность четкого позиционирования каких-либо элементов Web-страниц. Технология DHTML исправляет этот недостаток. Более того, DHTML позволяет не только четко устанавливать место отбражения того или иного элемента, но и перемещать его в окне просмотра браузера. Подобная возможность обычно называется "динамическим позиционированием ".<br> Всего используется три типа позиционирования. Различают статическое позиционирование, относительное и абсолютное. Статическое позиционирование — это порядок размещения элементов Web-страниц самим браузером, исходя из обычных стандартов HTML. Относительное позиционирование позволяет изменять расположение элемента, опираясь на его исходное расположение. То есть, его смещение отсчитывается от исходных координат. На основе относительного позиционирования обычно создают различные эффекты анимации текста. А абсолютное позиционирование позволяет нам указывать кооцдинаты элементов, относительно окна браузера. То есть, мы можем точно знать в каждый момент времени, в какой точке окна просмотра находится тот или иной элемент. Чаще всего для эффектов динамического позиционирования используется именно эта разновидность.<br> Необходимо осознавать, что статическое позиционирование полностью опирается на порядок расположения элементов, который указан в HTML-коде и умолчаниях браузера. Но если мы для какого-либо элемента установим абсолютное позиционирование, то он уже не будет учитываться браузером при размещении остальных элементов. Он как будто вынимается из процедуры статического позиционирования и не оказывает никакого влияния на соседние элементы.<br> Теперь от теории перейдем к практике. Попробуем создать HTML-документ, в котором текстовый абзац мог бы изменять свое расположение в тот момент, когда пользователь наводит на него курсор мыши. Код подобного документа приведен в листинге 7.6.<br> Листинг 7.6<br> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http: //www.w3.org/TR/html4/strict.dtd"><br> <html> <head> <link rel="canonical" href="https://www.e-lave.ru//glava-1.htm"/><br> <1;11:1е>Динамическое позиционирование</1:^1е><br> <script language="javascript"><br> <! —<br> function moving()<br> {<br> pi. style.position="relative";<br> pi.style.top="10px";<br> pi.style.left="10px";<br> }<br> function reverse ()<br> {<br> pi.style.position="static";<br> }<br> II —><br> </script><br> </head><br> <body><br> <p><font з1ге=5>Первый a63au</fontx/p><br> <p id="pl" onmouseover="moving()" onmouseout="reverse()"xfont з1ге=5>Второй a63au</fontx/p><br> </body><br> </html><br> <div style="text-align:center;"><img src="image/pozicionirovanie-jelementov-web-stranicy_1.gif" alt="Позиционирование элементов Web-страницы"></div><br> Рис. 7.6. Окно браузера с результатом отображения файла, приведенного в листинге 7.6, в тот момент, когда пользователь навел курсор мыши на второй абзац<br> При загрузке в браузер этого файла будет видно, что при попадании курсора мыши на второй абзац, тот сдвигается вправо и вниз, а после того, как курсор мыши покидает его, абзац возвращается к своему исходному положению (рис. 7.6).<br> Теперь рассмотрим код, чтобы узнать, за счет чего мы можем добиться подобного эффекта. Как видно, мы установили идентификатор для второго абзаца, и две функции, выполняемые при наступлении событий<br> onmouseover И onmouseout.<br> Событие onmouseover, наступающее в тот момент, когда пользователь наводит курсор мыши на второй абзац, мы обрабатываем при помощи функции moving. В этой функции мы изменяем некоторые свойства объекта style для элемента с идентификатором pi. Использование объекта style мы обсуждали в предыдущем разделе этой главы. Сейчас нас интересует именно механизм перемещения содержимого абзаца. Мы использовали три свойства: position, top и left. Свойству position мы придали значение relative, которое позволяет нам смещать расположение элемента относительно его начального размещения. После того достаточно было изменить значения свойств top и left, и абзац изменил бы свое расположение. В нашем примере мы использовали для этих свойств одно и то же значение — Юрх. Это позволяет смещать абзац вниз и влево одновременно на десять пикселов.<br> Но после того, как мы сместили абзац, было бы неплохо вернуть его на место. Возврат осуществляется при пернмещении пользователем курсора мыши с территории, занимаемой выбранным текстовым абзацем. Следовательно, необходимо обрабатывать событие onmouseout. Для этих целей мы внесли в наш<br> скрипт функцию reverse. Она также работает с объектом style. Но для того, чтобы вернуть абзац к его начальному положению, достаточно всего лишь придать свойству position значение static. Мы уже знаем, что при помощи этого значения мы задаем статическое позиционирование для элемента. Следовательно, он будет отображаться именно так, как это было при начальной загрузке страницы. Проще говоря, он вернется на исходное место.<br> Мы рассмотрели динамическое позиционирование элементов, которое основано на применении относительного типа позиционирования. Но ведь есть еще и абсолютное позиционирование. Оно обычно применяется для создания эффектов позиционирования элементов, не привязанных к их расположению на Web-странице по умолчанию.<br> В качестве примера мы можем создать страницу, на которой некое слово будет постоянно отображаться в верхнем левом углу окна просмотра браузера, вне зависимости от того, как пользователь прокручивает содержимое документа. Также мы разместим это слово под основным содержимым Web-страницы, применив для этого свойство z-index. В общем случае подобный документ может создаваться при помощи кода, приведенного в листинге 7.7.<br> Листинг 7.7<br> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><br> <html> <head> <link rel="canonical" href="https://www.e-lave.ru//glava-1.htm"/><br> е>Абсолютное позиционирование<^^1е> <script language="javascript">  </script> </head> <body onScroll="freezetext()"><br> <div id="freeze" style="position:absolute; z_index:-l; top:lpx; left:lpx"><br> <р>3амороженный текст</р><br> </div><br> <p><font з!ге=5>Первый a6aau</font></p><br> <pxfont size=5>Bтopoй a6aau</font></p><br> <pxfont з!ге=5>Третий a63au</font></p> <p><font з!ге=5>Четвертый a63au</fontx/p> <p><font з1ге=5>Пятый a63au</font></p> <br> </body><br> </html><br> <div style="text-align:center;"><img src="image/pozicionirovanie-jelementov-web-stranicy_2.gif" alt="Позиционирование элементов Web-страницы"></div><br> Рис. 7.7. Окно браузера с результатом отображения файла, приведенного в листинге 7.7, в тот момент, когда пользователь прокрутил содержимое документа вверх<br> На рис. 7.7 видно, что при прокрутке содержимого "замороженный текст" все равно остается прикрепленным к верхнему левому углу окна браузера. Попробуем разобраться, за счет чего это происходит.<br> В листинге данный текст мы заключили в контейнер, создаваемый тегами <div> и </div>. И уже для этого блока-контейнера мы создали стилевое оформление, воспользовавшись параметром style. В объявлении стиля мы установили для блока абсолютное позиционирование блока, задали его координаты и вертикальное псевдопозиционирование при помощи свойства z-index, которому придали значение -1. Это заставит браузер при прокрутке содержимого Web-страницы в окне просмотра всегда отображать наш "замороженный текст" под основным содержимым, так как все остальные элементы офомления Web-страницы имеют по умолчанию нулевое значение этого же свойства, а, следовательно, будут отображаться над "замороженным текстом".<br> Исходя из условий поставленной задачи, необходимо, чтобы наш текстовый блок постоянно отображался в одном и том же месте — в левом верхнем углу окна просмотра. Координаты, которые мы установили для текстового блока в его определении, указывают его расположение на Web-странице без учета того, какая ее часть помещается в окне просмотра. Поэтому, когда пользователь воспользуется полосами прокрутки, текстовый блок может выйти за пределы окна просмотра. Следовательно, нам необходимо реагировать именно на использование полос прокрутки пользователем. Для этого мы будем обрабатывать событие onscroil для всего содержимого документа. То есть, нас будет интересовать тег <body>. Поэтому, в коде нашего документе мы и использовали следующее объявление этого тега:<br> <body onScroll="freezetext()"><br> Итак, нам необходимо при прокрутке содержимого окна просмотра принудительно отображать текстовый блок в левом верхнем углу окна просмотра браузера. Для этих целей мы пользуемся абсолютным позиционированием. Но для того, чтобы позиционировать блок текста, нам необходимо знать, какие координаты документа соответствуют верхнему левому углу окна просмотра. И здесь следует вспомнить о свойствах scrollTop и scrollLeft элемента body, которые содержат координаты этого верхнего левого угла окна просмотра в системе координат самого документа. Эти координаты мы и присвоили значениям posiop и posLeft, соответственно, которые задают координаты верхнего левого угла текстового блока.<br> Естественно, подобную технологию мы можем применять не только к текстовым блокам, но и практически к любым элементам наполнения Web-страниц, в том числе и к графическим изображениям, и к их более продвинутой версии — видеовставкам. </td> </tr> </table> <br><br> <h1>Применение стилей</h1> <br> </h2> Мы уже знаем, что применение каскадных таблиц стилей позволяет нам добиваться самых поразительных эффектов в оформлении содержимого Web-страниц. Но когда эти и без того немалые возможности соединяются с технологией DHTML, разработчик Web-страниц получает в свое распоряжение практически неограниченные возможности манипулирования содержимым Web-страницы. В этом разделе мы рассмотрим основные приемы манипулирования правилами отображения элементов Web-страниц при помощи стилей.<br> Как мы знаем, есть два метода работы со стилями. Можно создать стилевую таблицу, причем, в данном случае не так уж важно, будет она встроенной или внешней, а затем обращаться к правилам отображения из этой таблицы при помощи значений параметров class, которые будут совпадать с теми или иными селекторами стилевой таблицы. А можно воспользоваться параметром style, который встраивается практически во все теги. Мы уже знаем, что создание отдельной стилевой таблицы оправданно в тех случаях, когда необходимо создать единообразное оформление. А если нам требуется, как можно более гибко управлять параметрами отображения многих элементов, стоит использовать задание стиля для каждого отдельного тега.<br> Для начала мы рассмотрим примеры операций с отдельными стилевыми таблицами. Существует два подхода к данной проблеме. Мы можем либо динамически изменять подключенную стилевую таблицу, либо менять идентификаторы классов у элементов оформления Web-страниц.<br> Изменение идентификаторов классов обычно используется в тех случаях, когда все необходимые правила отображения уже описаны в стилевой таблице, связанной с HTML-документом, а разработчику необходимо лишь гибко применять различные правила к одному и тому же элементу содержимого. Приведем один из примеров подобного подхода.<br> Мы можем создать документ, основным содержимым которого является таблица с тремя столбцами и одной строкой. В первой ячейке мы раполо-жим два наименования коротких заметок, связанных с переключателями. Сами заметки мы разместим во второй и третьей ячейках. <br><br> <br> А пользователь, выбирая тот или иной переключатель, будет визуализировать соответствующий текст. Таким образом, когда отображается содержимое второй ячейки, не отображается содержимое третьей ячейки, и наоборот. Код подобного документа приведен в листинге 7.3, а результат — на рис. 7.3.<br><br> Листинг 7.3<br><br> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><br> <html> <head> <link rel="canonical" href="https://www.e-lave.ru//glava-1.htm"/><br> <title>flMHaMM4ecKMe cTnrm</title><br> <script language="javascript"><br> <! —<br> function chan_cont(x)<br> {<br> if (x==l) {pi.className="visible"; p2.className="hidden"};<br> if (x==2) {p2.className="visible"; pi.className="hidden"};<br> }<br> //--><br> </script><br> <style type="text/css"><br> .visible {visibility: visible}<br> .hidden (visibility :hidden} </style> </head> <body><br> <table border=2 id="tablel"> <tr><br> <td><br> <р>Первая 3aM6TKa<input type="radio" name="groupl" onClick="chan_cont (1) " value="l" checkedx/p><br> <р>Вторая 3aM6TKa<input type="radio" name="groupl" onClick="chan_cont (2) " value="2"x/p><br> </td><br> <td><br> <p id="pl" class="visible">TeKCT первой заметки</р><br> </td><br> <td><br> <p id="p2" class="hidden">TeKCT второй заметки</р><br> </td> </tr> </table><br> </body><br> </html><br><br> <div style="text-align:center;"><img src="image/primenenie-stilej_1.gif" alt="Применение стилей"></div><br><br> Рис. 7.3. Окно браузера с результатом отображения файла приведенного в листинге 7.3, в тот момент, когда пользователь активизировал второй переключатель<br><br> Теперь рассмотрим структуру HTML-кода созданной нами Web-страницы. Функционально код разбивается на три части: программа-скрипт, стилевая таблица и содержимое документа. Начнем со стилевой таблицы.<br> Легко заметить, что мы объявляем два класса с селекторами visible и hidden. Правила отображения для этих классов чрезвычайно просты. <br><br> <br> В обоих случаях мы явно устанавливаем видимость элементов, входящих в тот или иной класс при помощи свойства visibility, которое отвечает за видимость элемента данного класса. Соответственно, класс visible будет отображаться в окне просмотра, а класс hidden — нет.<br> Содержимое страницы полностью "упаковано" в таблицу. В первой ячейке размещены два переключателя. Так как нам не придется передавать данные об их состоянии обрабатывающей программе на сервер, мы с успехом обходимся без формы, создаваемой при помощи тега <form>. Для каждого переключателя мы установили обработку события onclick, возникающего при щелчке мышью на данном переключателе. Так как щелчок мыши по переключателю вызывает изменение ее состояния, то, казалось бы, можно для этих целей воспользоваться и событием onchange. Однако здесь решающую роль играет тот факт, что событие onclick передается вверх по объектной иерархии до объекта document, a onchange — нет. Дело в том, что событие onclick для объекта document инициирует его обновление в окне просмотра браузера, если содержимое данного объекта было изменено каким-либо образом. То есть, если бы мы воспользовались событием onchange, то видимые изменения в отображении документа происходили бы только после того, как пользователь дополнительно бы щелкал мышью где-либо кроме переключателей.<br> Для обработки щелчка мышью на обоих переключателях мы используем одну и ту же функцию с наименованием chan_cont, которая объявлена в программе-скрипте. В качестве параметра для этой функции мы передаем порядковый номер заметки, которую необходимо сделать видимой. А затем в теле функции, в зависимости от переданного параметра мы меняем идентификаторы классов у заметок, пользуясь их уникальными идентификаторами, созданными при помощи параметров id. Для того, чтобы изменить наименование класса, мы пользуемся свойством className.<br> Впрочем, мы можем использовать более радикальный вариант динамического стилеобразования. Так, мы обладаем возможностью создать несколько полноценных стилевых таблиц, внедренных в HTML-документ, а затем в зависимости от обстоятельств менять их. <br><br> <br> Очень часто этой возможностью пользуются для создания так называемых "скинов" сайта, т. е. для всех Web-страниц сайта создается одинаковый набор стилевых таблиц, которые полностью определяют их внешний вид. А затем удаленному пользователю предоставляется возможность выбрать именно тот вариант оформления сайта, который ему больше всего нравится. Идентификатор соответствующей стилевой таблицы записывается в строку cookie-информации. Затем, при следующем посещении сайта, скрипт получает эту cookie-информацию, записанную в локальной системе удаленного пользователя, и на ее основе активизирует ту или иную стилевую таблицу. При создании подобного сценария следует учесть тот факт, что многие браузеры позволяют запретить создание cookie-записей на машине пользователя, следовательно, по умолчанию должна использоваться одна из стандартных стилевых таблиц.<br> Попробуем создать подобный документ. Мы не будем встраивать в него обработку cookie-информации, так как для ее создания и записи надо создавать специализированную форму. Мы ограничимся просто прямым выбором того или иного варианта оформления Web-страницы при помощи переключателей. Код подобного HTML-документа приведен в листинге 7.4.<br><br> Листинг 7.4<br><br> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><br> <html> <head> <link rel="canonical" href="https://www.e-lave.ru//glava-1.htm"/><br> <1;11;1е>Динамические стили</1:11:1е><br> <style id="stylel" type="text/css"><br> hi {color:red}<br> p {font-family:"Courier New"}<br> </style> <style id="style2" type="text/css"><br> hi {color:blue}<br> p {font-family:"Times New Roman"}<br> </style><br> <script language="javascript"><br> function chan_style(x)<br> if (x==l) {stylel.disabled=true; style2.disabled=false}; if (x==2) {style2.disabled=true; stylel.disabled=false};<br> </script><br> </head> <body><br> <р>Первый стиль o<$opwieHHH<input type="radio" name="groupl' onClick="chan_style (1) " value="l" checkedx/p><br><br> <br> <р>Второй стиль oфopмлeния<input type="radio" name="groupl'<br> onClick="chan_style (2) " value="2"x/p><br> <п!>3аголовок первого уровня</п!><br> <р>Пример обычной строки текста</р> <br> </body><br> </html><br><br> <div style="text-align:center;"><img src="image/primenenie-stilej_2.gif" alt="Применение стилей"></div><br><br> Рис. 7.4. Окно браузера с результатом отображения файла, приведенного в листинге 7.4, в тот момент, когда пользователь активизировал второй переключатель<br><br> Сама структура документа практически не претерпела изменений по сравнению с предыдущим документом. Только теперь мы использовали два тега <style> с двумя взаимоисключающими наборами правил отображения обычного текста и заголовков первого уровня. Для каждого такого тега мы задаем уникальный идентификатор. При загрузке HTML-документа, браузер изначально использует вторую стилевую таблицу, так как она полностью перекрывает область действия первой стилевой таблицы, будучи загруженой после нее.<br> После изменения состояния переключателей в дело вступает программа-скрипт. Для того, чтобы активизировать одну стилевую таблицу и отключить другую, используется свойство disabled, присущее тегам <style>. Его значением, как хорошо видно в тексте, является логическое выражение. В зависимости от переданного в функцию значения, мы отключаем одну стилевую таблицу и подключаем другую (рис. 7.4).<br> В самом начале данного раздела мы уже говорили, что можем воспользоваться объектом style, который входит в стандартную объектную иерархию DHTML. Этот объект присущ всем тегам в качестве встроенного свойства. Рассмотрим простейший пример его применения (рис. 7.5).<br><br> Листинг 7.5<br><br> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/htm!4/strict.dtd"><br> <html> <head> <link rel="canonical" href="https://www.e-lave.ru//glava-1.htm"/><br> <title>flMHdMM4ecKMe CTi«iJi</title> <script language="javascript"> <! —<br> function chan_style() {<br> pi.style.backgroundColor="blue" ; pi.style.color="white" ; }<br> //--> </script> </head> <body><br><br> <br> <p id="pl" onMouseover="chan_style()">Пример обычной строки текста</р> <br> </body><br> </html><br><br> <div style="text-align:center;"><img src="image/primenenie-stilej_3.gif" alt="Применение стилей"></div><br><br> Рис. 7.5. Окно браузера с результатом отображения файла, приведенного в листинге 7.5, в тот момент, когда пользователь навел курсор мыши на текстовую строку<br><br> Механизм подключения скрипта к единственному абзацу, расположенному на нашей демонстрационной Web-странице, уже должен быть вполне понятен. Единственное место в данном HTML-документе, которое следует несколько внимательнее рассмотреть — это тело функции, обрабатывающей событие onMouseover. В ее коде видно, что мы воспользовались объектом style, а точнее, его несколькими свойствами. По аналогии с технологией CSS легко догадаться, что свойство backgroundcoior устанавливает цвет фона, а свойство color — цвет шрифта. Однако хотелось бы точно знать, какими свойствами обладает объект style, и какие параметры CSS они дублируют. В табл. 7.8 перечислены все свойства объекта style.<br><br> Таблица 7.8. Свойства объекта style<br><br> <table border=1> <tr VALIGN="TOP" class="text_b"> <td VALIGN="TOP" "32"> Наименование свойства </td> <td VALIGN="TOP" "32"> Описание свойства </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "43"> background </td> <td VALIGN="TOP" "43"> Задает URL графического изображения, использующегося в качестве фона для элемента </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "41"> backgroundAttachment </td> <td VALIGN="TOP" "41"> Определяет механизм прокручивания фонового изображения вместе с содержимым элемента </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "34"> backgroundColor </td> <td VALIGN="TOP" "34"> Задает цвет фона </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "39"> background Image </td> <td VALIGN="TOP" "39"> Содержит URL графического изображения, используемого в качестве фона </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "41"> backgroundPosition </td> <td VALIGN="TOP" "41"> Определяет координаты левого верхнего угла фонового изображения </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "46"> backgoundPositionX </td> <td VALIGN="TOP" "46"> Устанавливает горизонтальную координату верхнего левого угла фонового рисунка </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "52"> backgoundPositionY </td> <td VALIGN="TOP" "52"> Устанавливает вертикальную координату верхнего левого угла фонового рисунка </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "82"> backgroundRepeat </td> <td VALIGN="TOP" "82"> Задает механизм повторения фонового изображения на пространстве, занимаемом элементом, если это пространство больше по размерам, чем применяемое графическое изображение </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "30"> border </td> <td VALIGN="TOP" "30"> Задает стиль отображения границы вокруг элемента </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "41"> borderBottom </td> <td VALIGN="TOP" "41"> Определяет параметры отображения нижней границы элемента </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "29"> borderBottomColor </td> <td VALIGN="TOP" "29"> Задает цвет нижней границы элемента </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "23"> borderBottomStyle </td> <td VALIGN="TOP" "23"> Задает стиль линии нижней границы элемента </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "25"> borderBottomWidth </td> <td VALIGN="TOP" "25"> Устанавливает ширину нижней границы элемента </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "29"> borderColor </td> <td VALIGN="TOP" "29"> Задает цвет границы элемента </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "41"> BorderLeft </td> <td VALIGN="TOP" "41"> Определяет параметры отображения левой границы элемента </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "34"> border LeftColor </td> <td VALIGN="TOP" "34"> Задает цвет левой границы элемента </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "25"> borderLeftStyle </td> <td VALIGN="TOP" "25"> Задает стиль линии левой границы элемента </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "30"> borderLeftWidth </td> <td VALIGN="TOP" "30"> Устанавливает ширину левой границы элемента </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "39"> borderRight </td> <td VALIGN="TOP" "39"> Определяет параметры отображения правой границы элемента </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "25"> border Right Color </td> <td VALIGN="TOP" "25"> Задает цвет правой границы элемента </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "32"> borderRight Style </td> <td VALIGN="TOP" "32"> Задает стиль линии правой границы элемента </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "30"> borderRightWidth </td> <td VALIGN="TOP" "30"> Устанавливает ширину правой границы элемента </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "25"> borderStyle </td> <td VALIGN="TOP" "25"> Указывает стиль линий границы элемента </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "41"> borderTop </td> <td VALIGN="TOP" "41"> Определяет параметры отображения верхней границы элемента </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "27"> borderTopColor </td> <td VALIGN="TOP" "27"> Задает цвет верхней границы элемента </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "30"> borderTopStyle </td> <td VALIGN="TOP" "30"> Задает стиль линии верхней границы элемента </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "27"> borderTopWidth </td> <td VALIGN="TOP" "27"> Устанавливает ширину верхней границы элемента </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "27"> borderWidth </td> <td VALIGN="TOP" "27"> Указывает ширину границы элемента </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "41"> clear </td> <td VALIGN="TOP" "41"> Указывает порядок позиционирования и выравнивания содержимого элемента </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "64"> clip </td> <td VALIGN="TOP" "64"> Задает порядок отображения содержимого элемента, если оно по размерам превосходит пространство, отведенное элементу в окне просмотра браузера </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "36"> color </td> <td VALIGN="TOP" "36"> Задает цвет элемента </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "43"> cssText </td> <td VALIGN="TOP" "43"> Содержит текстовое значение атрибута style, внедренного в тег </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "62"> cursor </td> <td VALIGN="TOP" "62"> Задает тип курсора мыши, который будет отображаться в то время, когда он будет находиться над элементом </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "41"> display </td> <td VALIGN="TOP" "41"> Определяет, будет или нет отображаться данный элемент в окне просмотра браузера </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "46"> filter </td> <td VALIGN="TOP" "46"> Указывает на набор всех графических фильтров, которые применялись к данному элементу </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "43"> font </td> <td VALIGN="TOP" "43"> Задает свойства шрифта, которым будет отображаться текстовое содержимое элемента </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "46"> font Family </td> <td VALIGN="TOP" "46"> Устанавливает шрифт, которым будет отображаться текст </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "25"> fontSize </td> <td VALIGN="TOP" "25"> Задает размер используемого шрифта </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "27"> fontStyle </td> <td VALIGN="TOP" "27"> Указывает начертание применяемого шрифта </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "25"> fontVariant </td> <td VALIGN="TOP" "25"> Задает способ отображения строчных символов </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "41"> fontWeight </td> <td VALIGN="TOP" "41"> Устанваливает ширину линий, которыми отображаются символы шрифта </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "29"> height </td> <td VALIGN="TOP" "29"> Задает высоту элемента </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "41"> left </td> <td VALIGN="TOP" "41"> Устанавливает горизонтальную координату верхнего девого угла элемента </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "32"> letterSpacing </td> <td VALIGN="TOP" "32"> Задает межсимвольное расстояние </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "25"> lineHeight </td> <td VALIGN="TOP" "25"> Устанавливает межстрочный интервал </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "27"> listStyle </td> <td VALIGN="TOP" "27"> Указывает способ отображения элементов списка </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "43"> listStylelmage </td> <td VALIGN="TOP" "43"> Задает графическое изображение для создания маркера </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "46"> listStyle Position </td> <td VALIGN="TOP" "46"> Устанавливает расположение маркеров элементов списка </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "36"> listStyleType </td> <td VALIGN="TOP" "36"> Указывает, какой тип стандартных маркеров будет использоваться в данном элементе </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "29"> margin </td> <td VALIGN="TOP" "29"> Определяет внешний вид полей элемента </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "32"> marginBottom </td> <td VALIGN="TOP" "32"> Задает размеры нижнего поля элемента </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "23"> MarginLeft </td> <td VALIGN="TOP" "23"> Задает размеры левого поля элемента </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "34"> MarginRight </td> <td VALIGN="TOP" "34"> Задает размеры правого поля элемента </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "36"> marginTop </td> <td VALIGN="TOP" "36"> Задает размеры вержнего поля элемента </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "66"> overflow </td> <td VALIGN="TOP" "66"> Определяет правило отображения содержимого элемента, переполняющего выделенное для него пространство </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "46"> paddingBottom </td> <td VALIGN="TOP" "46"> Определяет размер отступа между содержимым элемента и его нижней границей </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "41"> paddingLeft </td> <td VALIGN="TOP" "41"> Определяет размер отступа между содержимым элемента и его левой границей </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "43"> paddingRight </td> <td VALIGN="TOP" "43"> Определяет размер отступа между содержимым элемента и его правой границей </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "48"> paddingTop </td> <td VALIGN="TOP" "48"> Определяет размер отступа между содержимым элемента и его верхней границей </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "30"> pageBreakAfter </td> <td VALIGN="TOP" "30"> Устанавливает разрыв страницы перед элементом </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "25"> pageBreakBefore </td> <td VALIGN="TOP" "25"> Устанавливает разрыв страницы после элемента </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "41"> pixelHeight </td> <td VALIGN="TOP" "41"> Содержит численное значение высоты элемента в пикселах </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "48"> pixelLeft </td> <td VALIGN="TOP" "48"> Содержит численное выражение горизонтальной координаты верхнего левого угла элемента в пикселах </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "41"> pixelTop </td> <td VALIGN="TOP" "41"> Содержит численное выражение вертикальной координаты верхнего левого угла элемента в пикселах </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "45"> pixelWidth </td> <td VALIGN="TOP" "45"> Содержит численное значение ширины элемента в пикселах </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "41"> position </td> <td VALIGN="TOP" "41"> Определяет применяемую модедь позиционирования элемента </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "61"> posLeft </td> <td VALIGN="TOP" "61"> Содержит числовое значение горизонтальной координаты левого верхнего угла элемента в единицах измерения, заданных в последнюю очередь </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "64"> posTop </td> <td VALIGN="TOP" "64"> Содержит числовое значение вертикальной координаты левого верхнего угла элемента в единицах измерения, заданных в последнюю очередь </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "62"> posWidth </td> <td VALIGN="TOP" "62"> Содержит числовое значение ширины элемента в единицах измерения, заданных в последнюю очередь </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "27"> styleFloat </td> <td VALIGN="TOP" "27"> Задает стиль расположения содержимого элемента </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "43"> textAlign % </td> <td VALIGN="TOP" "43"> Устанавливает выравнивание текстового содержимого элемента </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "27"> text Decor at ion </td> <td VALIGN="TOP" "27"> Устанавливает способ отображения текста </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="Code" "36"> textlndent </td> <td VALIGN="TOP" "36"> Устанавливает отступ первой строки абзаца </td> </tr> <tr valign="TOP"> <td valign="TOP" class="Code" "50"> textTransform </td> <td valign="TOP" "50"> Задает стиль отображения различных регистров шрифта </td> </tr> <tr valign="TOP"> <td valign="TOP" class="Code" "43"> top </td> <td valign="TOP" "43"> Содержит вертикальную координату верхенго левого угла элемента </td> </tr> <tr valign="TOP"> <td valign="TOP" class="Code" "23"> verticalAlign </td> <td valign="TOP" "23"> Задает вертикальное выравнивание элемента </td> </tr> <tr valign="TOP"> <td valign="TOP" class="Code" "32"> visibility </td> <td valign="TOP" "32"> Регулирует видимость данного элемента </td> </tr> <tr valign="TOP"> <td valign="TOP" class="Code" "32"> width </td> <td valign="TOP" "32"> Задает ширину элемента </td> </tr> <tr valign="TOP"> <td valign="TOP" class="Code" "46"> zlndex </td> <td valign="TOP" "46"> Устанавливает псевдовертикальное позиционирование элемента </td> </tr> </table> Руководствуясь этой таблицей, мы получаем доступ ко всем свойствам стилевого оформления для каждого элемента содержимого Web-страницы. Таким образом, при помощи технологии DHTML мы получаем контроль над свойствами отображения любого элемента Web-страницы.<br><br> </td> </tr> </table> <br><br> <h1>Структура JavaScript</h1> <br> </h2> У любого языка программирования есть свои правила работы. Есть свои типы для переменных и ключевые слова этого языка. То есть, все то, что отличает этот язык от остальных его собратьев. Но все современные языки программирования практически одинаковы в своей структуре.<br> Как, собственно, действует программа-сценарий, внедренная в Web-страницу? В этот сценарии мы задаем самые различные реакции Web-страницы на какие-либо действия пользователя. Например, на нажатия кнопок, перемещение курсора мыши, работу с клавиатурой и так далее. На самом деле обрабатываемых событий достаточно много.<br> Как только произошло одно из указанных нами событий, браузер должен будет выполнить некоторую последовательность действий. Эта последовательность описывается при помощи блока ключевых слов и выражений. Подобные блоки кода называют процедурами. Помимо процедур в качестве блоков кода оформляются также функции. Их отличие в том, что процедуры<br> просто проделывают некоторые действия, а функции возвращают некоторое значение. Например, установить какой-либо цвет шрифта для абзаца — это процедура, а вычислить синус числа, являющегося вертикальной координатой верхнего левого угла графического изображения, — это уже функция.<br> В языке JavaScript заранее определены некоторые простейшие процедуры. Предопределенные заранее процедуры называются операторами. Также введены наиболее распространенные функции, но они особого наименования не получили. Так и остались функциями.<br> Для того, чтобы нам оперировать какими-либо числами, строками и прочими объектами, используются переменные. Переменная — это просто контейнер для хранения какого-либо значения. При этом значение переменной мы в любой момент можем изменить. В JavaScript используется несколько различных типов переменных. Мы можем создавать переменные, содержащие числовые значения, строки и логические выражения. При этом явно обозначать эти типы не нужно. Интерпретатор программы сам правильно обработает их. Достаточно лишь присвоить переменной какое-либо значение.<br><br> <br> Объявлять переменные мы можем в любом месте программы, но никто еще не отменял понятие "хорошего стиля программирования". Хороший стиль программирования предусматривает, что все переменные, используемые в процедуре или функции, будут объявлены в самом начале этой процедуры или функции. При этом следует использовать ключевое слово var. Строго говоря, оно не является обязательным. Но если у нас будут совпадать наименования переменных в различных процедурах, используемых совместно, то может возникнуть совпадение имен. Применение ключевого слова var позволяет браузеру правильно обрабатывать переменные в таких случаях.<br> Рассмотрим маленький пример.<br><br> var х=1;<br> var s="Строка";<br> var t=True;<br><br> В каждой строке мы объявляем одну переменную. Так как мы сразу присваиваем им некоторые значения, то переменные обретают соответствующий тип. Переменная х содержит число, переменная s — строку, а переменная t предназначена для хранения логических значений.<br> Числовые значения мы можем записывать в программе в десятичном виде, как целые, так и дробные. Также мы можем записывать числа в восьмеричной и шестнадцатеричной системе исчисления. Числа в восьмеричной записи должны начинаться с нуля, а в шестнадцатеричной — с сочетания Ох. Если перечисленных способов записи чисел нам не хватает, мы можем воспользоваться экспоненциальным способом записи числа.<br> Если нам необходимо присвоить переменной строковое значение, то это значение мы должны поместить между кавычками, двойными или одинарными. В качестве строки может быть использован и один символ.<br> Переменные логического типа обычно используются в операторах выбора. Логических значений, естественно, существует всего два: True— истина, и False —ложь.<br> Если же мы объявляем переменную, но не хотим сразу присваивать ей какого-либо конкретного значения, можно присвоить ей неопределенное значение обозначаемое ключевым словом null. Таким образом, объявление переменной без присваивания значения и типа выполняется при помощи следующего фрагмента кода:<br><br><br> <br> varr-x=null;<br><br> При работе с языком JavaScript всегда следует помнить, что он, в отличие от HTML, чувствителен к регистру символов. И если в написании ключевого слова допустить хотя бы одну ошибку, то интерпретатор языка, встроенный в браузер, не сможет выполнить всю программу.<br> Также следует обратить внимание на, то что каждое действие программы заканчивается символом точки с запятой. При помощи этого символа мы отделяем операторы и процедуры друг от друга, что позволяет браузеру правильно обрабатывать программу.<br> Язык JavaScript является языком со слабой типизацией. Это означает, что любая переменная в процессе работы программы может изменить свой тип. Так, например, при помощи следующего фрагмента кода мы превращаем переменную строкового типа в число:<br><br> var x="100";<br> х-х+1;<br><br> В первой строке этого фрагмента мы объявили переменную с наименованием х, которой присвоили текстовое значение, состоящее из трех символов. Во второй строке мы к этому строковому значению прибавили число. В результате этого действия в переменной х стало находиться числовое значение равное ста однрму.<br> Необходимо отметить, что в наименованиях переменных мы можем использовать только символы латинского алфавита, цифры и подчеркивания. Начинаться наименование должно только с буквенного символа. Пробелы в наименованиях переменных использовать нельзя.<br> Естественно, JavaScript, являясь достаточно развитым языком программирования, позволяет использовать в программах не только единичные переменные, но и массивы. По сути дела, массивы являются объектами, но это их свойство скрыто так глубоко, что нам не стоит о нем задумываться. Достаточно знать, как объявлять массив и обращаться к его элементам.<br> В языке JavaScript мы можем не только объявлять массив, но и динамически менять его размеры по мере выполнения программы. Следовательно, под массив должен выделяться некий фрагмент адресного пространства памяти. Подобное выделение всегда производится при помощи ключевого слова new.<br> А при помощи ключевого слова Array мы указываем интерпретатору программы, что выделяется пространство именно под массив. <br><br> <br> Поэтому типичное объявление массива выглядит следующим образом:<br><br> my_array= new Array!); my_array(9)=0;<br><br> Этой конструкцией мы объявляем массив с наименованием my_array. При этом мы во второй строке инициализируем один из элементов только что объявленного массива, присваивая ему нулевое значение. Интерпретатор будет считать этот элемент последним, и наш массив изначально будет содержать десять элементов, так как нумерация элементов массивов в JavaScript начинается с нуля. А для того, чтобы обратиться к какому-либо элементу, после наименования массива в скобках указать порядковый номер этого элемента, как это и показано в нашем примере.<br> Впрочем, если это необходимо, мы можем указать размер массива при его объявлении. Для этого надо после ключевого слова Array в скобках указать предполагаемое количество элементов массива. В этом случае объявление нашего массива из десяти элементов будет выглядеть следующим образом:<br><br> my_array= new Array(10);<br><br> Во всех наших примерах объявления переменных мы использовали знак равенства, который на самом деле является одним из основных операторов. Это оператор присваивания. С его помощью мы можем переменным присваивать некие значения. Всего в языке JavaScript^есть шесть операторов присваивания. Рассмотрим их.<br><br> <ul> <li> Оператор = осуществляет стандартное присваивание. Пример его применения мы уже видели.</li> <li> Оператор += осуществляет присваивание со сложением. Таким образом, выражение х+=у эквивалентно х=х+у.</li> <li> Оператор -= осуществляет присваивание с вычитанием. Таким образом, выражение х-=у эквивалентно х=х-у.</li> <li> Оператор *= позволяет производить присваивание с умножением. Выражение х*=у равносильно выражению х=х*у.</li> <li> Оператор /= производит присваивание с делением. Выражение х/=у равносильно выражению х=х/у.</li> <li> Оператор %= позволяет осуществлять присваивание остатка целочисленного деления. Таким образом, выражение х%=у эквивалентно х=х%у.</li> </ul> При рассмотрении операторов присваивания мы видели, что большинство из них является комбинацией обычного оператора присваивания с каким-либо арифметическим оператором. <br><br> <br> Естественно, язык JavaScript обладает достаточно обширным набором базовых операторов, выполняющих стандартные действия с переменными. Нам никак нельзя обойтись без их рассмотрения.<br><br> <ul> <li> Оператор + осуществляет сложение! 2+3 равно 5.</li> <li> Оператор — осуществляет вычитание. 3-2 равно 1.</li> <li> Оператор * осуществляет умножение. 2*3 равно 6.</li> <li> Оператор / осуществляет деление, 6/3 равно 2.</li> <li> Оператор % выделяет остаток от целочисленного деления. 9%4 равно 1.</li> <li>Унарный оператор ++ осуществляет операцию инкремента, т. е. увеличения на едонвду.13-и- равно 4.</li> <li> Унарный оператор -- производит декремент, т. е. уменьшение на единицу, 3-- равно 2.</li> <li> Оператор & эквивалентен оператору AND. Эти операторы производят операцию побитового "И". При этом числа, к которым применяется этот оператор, автоматически переводятся в двоичную систему, и к ним поразрядно применяется данная операция. 2&5 равно 0.</li> <li> Оператор | эквивалентен оператору OR. Эти операторы производят поразрядную операцию двоичного "ИЛИ". 2|5 равно 7.</li> <li> Оператор ^ эквивалентен оператору хок. Эти операторы производят операцию побитового сложения по модулю 2. 3^2 равно 1.</li> <li> Оператор « осуществляет побитовый сдвиг двоичного представления числа влево на один разряд. 2« равно 4.</li> <li> Оператор » осуществляет побитовый сдвиг двоичного представления числа вправо на один разряд. 2» равно 1.</li> <li> Оператор &s осуществляет операцию "И" для логических значений. True && False равно False.</li> <li> Оператор I I осуществляет операцию "ИЛИ" для логических значений.</li> <li> True I I False равно True.</li> <li> Оператор ! осуществляет операцию отрицания для логических значений.</li> <li> False paвно True.</li> </ul> Вот такие операции мы можем использовать в своих программах на языке JavaScript. Список не маленький, но чаще всего для нужд DHTML мы будем обходиться арифметическими и логическими операторами.<br> Любая программа, и наши скрипты не. являются исключением, практически никогда не может действовать без неких управляющих конструкций, которые и позволяют реализовать логику программы. <br><br> <br> К таким управляющим конструкциям относятся циклы, условные операторы и операторы-переключатели. Все они достаточно просты, и применение их не вызовет каких-либо затруднений.<br> Условный оператор позволяет выполнять некие действия в том случае, если выполняется заданное разработчиком условие. Приведем маленький пример.<br><br> if (х—2) х*=7;<br><br> Данный фрагмент Кода проверяет значение переменной х. Если это значение равно двум, то оно увеличивается в семь раз. Но умножение это будет производиться тогда и только тогда, когда значение переменной равно двум. Проверка логических условий, как мы видим, производится при помощи ключевого слова if.<br> Интуитивно конструкция условного оператора ясна, но на самом деле его использование может быть и не таким простым, как в приведенном только что примере. В том случае, если нам надо проверить несколько логических условий сразу, каждое условие заключается в скобки, и к ним применяются логические операторы, которые мы рассмотрели несколько ранее. Так, если нам необходимо проверить выполнение сразу двух условий, то наш пример будет выглядеть следующим образом:<br><br> if <x«2) S5 (у<0) х*=7;<br><br> В этом случае умножение происходит только тогда, когда переменная х равна двум, а значение переменной у меньше нуля.<br> Условия проверки могут задаваться я»бо при помощи переменных логического типа, либо при помощи операторов сравнения, список которых приведен в табл. 7.1.<br><br> Таблица 7.1. Операторы сравнения<br><br> <table border=1> <tr VALIGN="TOP" class="text_b"> <td VALIGN="TOP" "41"> Оператор </td> <td VALIGN="TOP" "20"> Значение </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="listing" "25"> == </td> <td VALIGN="TOP" "25"> Точное равенство </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="listing" "25"> != </td> <td VALIGN="TOP" "25"> Неравенство </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="listing" "34"> > </td> <td VALIGN="TOP" "34"> Больше </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="listing" "25"> >= </td> <td VALIGN="TOP" "25"> Больше или равно </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="listing" "27"> < </td> <td VALIGN="TOP" "27"> Меньше </td> </tr> <tr VALIGN="TOP"> <td VALIGN="TOP" class="listing" "23"> <= </td> <td VALIGN="TOP" "23"> Меньше или равно </td> </tr> </table> Естественно, эти операторы могут использоваться для сравнения, как числовых значений, так и строковых. Если необходимо сравнить строковые значения по соотношениям "больше — меньше", то сравнение производится посимвольно, начиная с начала строки. Чем символ ближе к концу алфавита, тем он "больше".<br> При выполнении условия программа интерпретатор выполняет только одно действие. А что делать, если надо выполнить не один оператор, а несколько? В этом случае необходимо все эти операторы объединить в единый блок. Для этого достаточно заключить все операторы в фигурные скобки, Я как это показано в следующем примере:<br><br> if (х-=2) {х*-7; у-1}; <br><br> Все рассмотренные нами примеры, применения условного оператора построены на допущении, что при выпонении некоторого условия необходимо лишь выполнить некий блок кода. Но может возникнуть ситуация, когда при выполнении условия мы должны выполнить один блок кода, а если условие не выполняется— другой. В этом случае наш оператор сравнения приобретет следующий вид:<br><br> if (х==2) {х*=7; у=1) . 1<br> else {у=х}; <br><br> Естественно, каждый блок действий может при необходимости включать в себя и другие условные операторы. Подобным образом создаются процедуры обработки сразу нескольких условий.<br> Однако, если есть целый список условий, каждому из которых мы должны сопоставить некоторый программный блок, следует воспользоваться оператором-переключателем. Но в нем выполнение тех или иных команд увязываются со значением какой-либо переменной, и нельзя использовать логические условия и уж тем более их комбинации. Вот как выглядит типичный пример применения оператора-переключателя: <br><br> switch (х) { 1<br> case 1: {Блок, выполнявшей, если х=1) , т<br> case 2: (Блок/ выполняемый, если х=2) J<br> default: {Блок, выполняемый, во всех остальных случаях<br> } <br><br> Смысл действия данного оператора достаточно ясен, но есть один подводный камень. В том случае, если переменная, относительно который мы и выстраиваем весь блок, равна некоторому значению, которое мы указали в операторе, то будет выполнен весь код от начала выполнения до конца оператора switch, я То есть, в нашем примере, если значение переменной х равно единице, то сначала будет выполнен блок кода для этого значения, затем блок, выполнявмый, если значение переменной равно двум, а потом еще и блок, используемый для всех остальных значений. Чтобы избежать этого, следует в конец каждого Шока кода вставлять оператор break. Данный оператор принудительно выводит управления за пределы конструкции, в которой он использовался. С его использованием типичный пример использования оператора-переключателя выглядит приблизительно следующим образом: <br><br> switch (х) { I<br> case 1: (y=x*2+z; break} . I<br> case 2: {y=x*3+z; break} I<br> default: {y-0; z=0) .1<br> }<br><br> Как видно, в последнем блоке, который выполняется для случаев, не перечисленных в операторе явно, мы не использовали оператор break, так как это блок кода является последним, и после его выполнения управление все равно выйдет за пределы оператора-переключателя.<br> Достаточно часто при написании своих скриптов нам потребуется использовать циклические конструкции, когда один и тот же блок кода необходимо выполнить определенное количество раз или выполнят* его до тех пор, пока 'некоторое логическое условие истинно. Обычно при помощи подобных циклов производится обработка массивов однородных данных, О массивах мы узнаем немного позже, а сейчас рассмотрим вопросы применения циклов в качестве управляющих конструкций.<br> В JavaScript предусмотрено три вида циклов. Стандартный цикл, когда некоторый блок кода выполняется определенное количество раз, реализуется при помощи оператора for. Наиболее типичный пример его использования выглядит следующим образом: <br><br> suro=0;<br> for (i=0; i<10; i-н-)<br> if my_array(i)>0 then sum»=sum+my_array (i) ;<br><br> В этом примере мы при помощи цикла производим суммирование всех положительных элементов массива с наименованием my_array, содержащим десять элементов. Как видно, для оператора for мы указываем некоторую дополнительную информацию в скобках. В скобках мы обязательно должны использовать три оператора. Все они связаны с переменной, которая является счетчиком повторений цикла. В нашем случае мы использовали переменную с наименованием 1. Первый оператор предназначен для присваивания переменной-счетчику стартового значения. Второй оператор является логическим условием. Цикл будет выполняться до тех пор, пока это условие истинно. А третий оператор обычно устанавливает операцию, которая будет выполняться каждый раз при завершении очередного прохода тела цикла. Чаще всего это операция соответствующего изменения значения переменного счетчика. Так как в нашем случае отсчет идет от нуля до девяти включительно, то мы используем инкремент, т. е. за один проход тела цикла, значение нашей переменной-счетчика увеличивается на единицу.<br> В нашем примере тело цикла представляет собой всего один условный оператор. Но если необходимо будет использовать не один оператор, а несколько, то их придется объединить в единый блок, при помощи уже знакомых нам фигурных скобок.<br> Также следует отметить, что для экстренного выхода из цикла, когда он еще не должен был закончиться штатным образом, мы можем использовать оператор break, который, как мы помним, выводит управление за пределы текущей логической конструкции. А если нам необходимо при наступлении каких-либо условий пропустить один шаг цикла, но при этом все-таки продолжить его .выполнение, стоит воспользоваться оператором continue, который выводит управление за пределы текущего блока. Но при этом оно будет оставаться в действующей логической конструкции. Как мы уже говорили ранее, в JavaScript существует три вида циклов. Один из них мы уже рассмотрели. Теперь мы узнаем, как действует цикл с предусловием. Если мы попробуем при помощи этой управляющей конструкции воспроизвести пример действия предыдущего цикла, то получится следующий фрагмент кода: <br><br> sum=0; 1<br> i=0; I<br> while (i<10) 1<br> '{ if my^_array(i)>0 then sum»&um+«ty_array(i); I<br> i++;} I<br><br> Как видно, данный вариант цикла реализуется при помощи оператора while, в котором указывается логическое условие. До тех пор, пока это условие будет истинным, тело цикла будет повторяться. Видно, что стартовое <br> значение переменной-счетчика мы задаем самостоятельно. И позаботиться <br> об ее изменении тоже нужно самим.<br> Последняя вариация циклической управляющей конструкции — цикл с постусловием — реализуется также при помощи оператора while, но на этот < раз с ним вместе должен использоваться оператор do. И наш цикл приобретет следующий вид:<br><br> sum=0; !<br> i=0;<br> do { . '.<br> if my_array (i)>0 then suro5»sum-t;my_array{i) ;<br> i++;-} while (i<10); <br><br> Как и прежде, тело цикла будет выполняться раз за разом до тех пор, пока логическое условие, указанное в операторе while, будет оставаться истинным. Но в чем же тогда разница между циклами с предусловием и с постусловием? Дело в том, что в первом из этих циклов логическое условие проверяется перед прохождением тела, цикла, а во втором — после. Таким образом, даже если логическое условие еще до старта не является истинным, цикл с постусловием все равно будет выполнен как минимум один раз.<br> И на этом список управляющих логических конструкций заканчивается. Но нам их будет вполне достаточно для того, чтобы реализовать любые свои замыслы.<br> Для создания программ-скриптов нам необходимо уметь создавать свои функции. Мы уже говорили, что функции, по сути дела, это те же процедуры, толька возвращающие некое значение. Следует отметить, что в качестве своих блоков действий мы можем в JavaScript создавать только функции. Но так как функции являются просто более общим вариантом процедур, то это не будет ограничением.<br> Вся программа-скрипт составлена из различных функций. Каждая функция выполняется интерпретатором в тот момент, когда наступает некоторое активизирующее событие. О событиях мы поговорим позже, а сейчас посмотрим, как объявляются функция в языке JavaScript. Простейший пример объявления функции выглядит следующим образом:<br><br> function my_first_function (name)<br> {alert("Hello, world! My naffie is "+name); return("Your name is "+na»e);}<br><br> Итак, из приведенного примера видно, что функция объявляется при помощи ключевого слова function, затем указывается ее наименование, и в скобках перечисляются переменные, которые передаются этой функции для работы. После этого пишется сам код функции, обязательно заключенный в фигурные скобки. Наша функция выводит окно сообщения с указанным текстом при помощи оператора alert.<br> Мы уже говорили, что любая функция должна возвращать какое-либо значение, даже если мы в этом и не нуждаемся. Таково обязательное условие. Возврат некоего значения, осуществляется при помощи ключевого слова return, которое одновременно обозначает, что последовательность действий, заложенных в нашу функцию, закончилась.<br> Завершая ознакомление со структурой языка JavaScript следует рассмотреть возможность работы с переменными составных типов и объектами. Но для того, чтобы рассматривать их, следует все же узнать, что такое объекты, и в чем их отличие от составных переменных. На самом деле, что такое объект понять достаточно легко, но вот точно и просто объяснить, что это, собственно, такое, не в пример сложнее. Можно сказать, что объект — это некоторая сущность со своим набором свойств и списком действий, которые могут выполняться по отношению к ним. Подобные действия назыаются методами, и их набор и механизм действия специфичны для каждого объекта. Также для каждого объекта определен набор возможных событий. Иными словами, объект заключает в себе как переменные, так и возможные действия над ними, определяемые происходящими событиями.<br> В JavaScript отсутствует возможность создавать свои собственные объекты, мы можем лишь пользоваться уже готовыми- Все доступные нам объекты так или иначе работают с Web-страницей, в которую внедрена программа на языке JavaScript. Так, основным объектом является объект с наименованием window, который позволяет работать с окном просмотра Web-страницы в браузере. А уже в этот основной объект в качестве вложенных частей входят другие объекты, такие как screen, связывающий нас с экраном монитора пользователя, или document, открывающий доступ к содержимому самой Web-страницы. Полностыо эти объекты мы рассмотрим позднее.<br> Как уже было отмечено, мы не можем самостоятельно создавать свои объек ты. Но в этом и нет необходимости. <br> Мы можем объявлять переменные составного типа. Так, например, мы можем создать свой тип для комплексных чисел, которые содержат мнимую и действительную части. То есть, подобные комплексные числа описываются при помощи пары обыкновенных чисел. А создать переменную подобного комплексного типа достаточно просто. Для этого необходимо использовать специализированную функцию-конструктор. Выглядит этот процесс сле-дующим образом: <br><br> function complex(х, у) <br> { this.x=x;<br> this.y«»y; <br> return this; <br> my_complex <br> new complex (5,2); <br><br> В этом примере мы видим, как создается функция-конструктор для комплексного типа чисел. А после кода функции следует объявление и инициа-лизация переменной при помощи оператора new, который используется для выделения памяти под создаваемые экземпляры объектов и составных пере-менных. Доступ к отдельным компонентам составной переменной осуществляется указанием их имени через точку, как<br><br> my_compiex.x. 1<br><br> И на этом мы заканчиваем рассмотрение структуры языка JavaScript. В этой главе мы постоянно будем пользоваться им для создания эффектов DHTML, поэтому все неясности будут устранены по ходу работы.<br><br> </td> </tr> </table> <br><br> <h1>Свойства и методы элементов Web-страниц</h1> <br> </h2> В предыдущем разделе главы мы узнали, что каждый элемент Web-страницы, объявляемый при помощи того или иного тега, обладает собственным набором событий. Наличие событий свойственно, как мы знаем, объектам DHTML. А раз наши элементы являются объектами, то у них должны быть свои свойства и методы. И это действительно так.<br> Основные свойства и методы мы рассмотрели в этой главе несколько ранее. А в данном разделе мы узнаем, какие именно свойства и методы специфичны для каждого конкретного элемента Web-страницы. В табл. 7.4 приведен список методов для каждого элемента.<br> Таблица 7.4. Теги и методы<br> <table border=1> <tr> <td>Тег</td> <td>Гиперссылка</td> <td>Список методов</td> </tr> <tr> <td> <а> </td> <td> Гиперссылка </td> <td> blur, click, contains, focus, getAttribute, insertAd j acentHTML, insert Adjacent Text, remove At tribute, scrollIntoView, setAttribute </td> </tr> <tr> <td> <address> </td> <td> Специализированное форматирование текста </td> <td> click, contains, getAttribute, insertAd acentHTML, insert Ad j a cent Text, removeAt tribute, scrollIntoView, setAttribute </td> </tr> <tr> <td> <applet> </td> <td> Внедряет в сост в Web-страницы Java-апплет </td> <td> blur, click, contains, focus, getAttribute, insertAd j acentHTML, insertAdj acentText, removeAt tribute, scrollIntoView, setAttribute </td> </tr> <tr> <td> <area> </td> <td> Создает активную область-гиперссылку в сегментированной графике </td> <td> blur, click, contains, focus, getAttribute, insertAdj acentHTML, insertAdj acentText, removeAt tribute, scrollIntoView, setAttribute </td> </tr> <tr> <td> <b> </td> <td> Выделяет текст полужирным шрифтом </td> <td> click, contains, getAttribute, insertAdj acentHTML, insertAdj acentText, removeAt tribute, scrollIntoView, setAttribute </td> </tr> <tr> <td> <base> </td> <td> Устанавливает URL основного документа </td> <td> contains, getAttribute, removeAttribute, setAttribute </td> </tr> <tr> <td> <basefont> </td> <td> Задает шрифт, используемый по умолчанию </td> <td> contains, getAttribute, removeAttribute, setAttribute </td> </tr> <tr> <td> <bgsound> </td> <td> Задает фоновый звук Web-страницы </td> <td> contains, getAttribute, removeAttribute, setAttribute </td> </tr> <tr> <td> <big> </td> <td> Увеличивает размер шрифта на единицу </td> <td> click, contains, getAttribute, insertAdj acentHTML, insertAdj acentText, removeAttribute, scrollIntoView, setAttribute </td> </tr> <tr> <td> <tfoot> </td> <td> Создает нижнюю часть таблицы </td> <td> click, contains, getAttribute, removeAt tribute, scrollIntoView, setAttribute </td> </tr> <tr> <td> <th> </td> <td> Объявляет строку заголовка таблицы </td> <td> click, contains, getAttribute, removeAt tribute, scrollIntoView, setAttribute </td> </tr> <tr> <td> <thead> </td> <td> Создает область заголовка таблицы </td> <td> click, contains, getAttribute, removeAt tribute, scrollIntoView, setAttribute </td> </tr> <tr> <td> <title> </td> <td> Применяется для создания заголовка HTML- документа </td> <td> contains, getAttribute, removeAttribute, setAttribute </td> </tr> <tr> <td> <tr> </td> <td> Объявляет строку таблицы </td> <td> blur, click, contains, focus, getAttribute, removeAttribute, scrollIntoView, setAttribute </td> </tr> <tr> <td> <tt> </td> <td> Устанавливает специализированное шрифтовое оформление </td> <td> click, contains, getAttribute, insertAd j acentHTML, insert Ad jacentText, removeAttribute, scrollIntoView, setAttribute </td> </tr> <tr> <td> <u> </td> <td> Отображает подчеркнутый текст </td> <td> click, contains, getAttribute, insert Adjacent HTML, insert Ad jacentText, removeAttribute, scrollIntoView, setAttribute </td> </tr> <tr> <td> <ul> </td> <td> Создает маркированный список </td> <td> click, contains, getAttribute, insertAd j acentHTML, insert Ad jacentText, removeAttribute, scrollIntoView, setAttribute </td> </tr> <tr> <td> <var> </td> <td> Устанавливает специализированное форматирование текста </td> <td> click, contains, getAttribute, insert Adjacent HTML, insert Ad jacentText, removeAttribute, scrollIntoView, setAttribute </td> </tr> <tr> <td> <blockquote> </td> <td> Специализированное форматирование текста </td> <td> click, contains, getAttribute, insertAd j acentHTML, insert Ad jacentText, removeAt tribute, scrollIntoView, setAttribute </td> </tr> <tr> <td> <body> </td> <td> Определяет содержательную часть Web-страницы </td> <td> blur, click, contains, focus, getAttribute, insertAd j acentHTML, insert Ad jacentText, removeAt tribute, scrollIntoView, setAttribute </td> </tr> <tr> <td> <br> </td> <td> Создает принудительный разрыв строки </td> <td> contains, getAttribute, insertAd j acentHTML, insert Ad jacentText, removeAttribute, setAttribute </td> </tr> <tr> <td> <button> </td> <td> Создает кнопку </td> <td> blur, click, contains, createtextRange, focus, getAttribute, insertAdj acentHTML, insert Ad jacentText, removeAttribute, scrollIntoView, setAttribute </td> </tr> <tr> <td> <caption> </td> <td> Создает заголовок таблицы </td> <td> blur, click, contains, focus, getAttribute, insert Adjacent HTML, insert Ad jacentText, removeAttribute, scrollIntoView, setAttribute </td> </tr> <tr> <td> <center> </td> <td> Центрирует блок содержимого </td> <td> click, contains, getAttribute, insertAdj acentHTML, insertAdj acentText, removeAttribute, scrollIntoView, setAttribute </td> </tr> <tr> <td> <cite> </td> <td> Специализированное форматирование текста </td> <td> click, contains, getAttribute, insert Adjacent HTML, insert Ad jacentText, removeAttribute, scrollIntoView, setAttribute </td> </tr> <tr> <td> <code> </td> <td> Специализированное форматирование текста * </td> <td> click, contains, getAttribute, insertAdj acentHTML, insertAdj acentText, removeAttribute, scrollIntoView, setAttribute </td> </tr> <tr> <td> <col> </td> <td> Устанавливает определение столбцов таблицы </td> <td> contains, getAttribute, removeAttribute, setAttribute </td> </tr> <tr> <td> <colgroup> </td> <td> Создает группу столбцов </td> <td> contains, getAttribute, removeAttribute, setAttribute </td> </tr> <tr> <td> <dd> </td> <td> Элемент списка </td> <td> click, contains, getAttribute, insert Adjacent HTML, insert Adjacent Text, removeAttribute, scrollIntoView, setAttribute </td> </tr> <tr> <td> <dfn> </td> <td> Специализированное форматирование текста </td> <td> click, contains, getAttribute, insertAdjacentHTML, insert Adjacent Text, removeAttribute, scrollIntoView, setAttribute </td> </tr> <tr> <td> <div> </td> <td> Группировка элементов содержимого Web-страницы </td> <td> blur, click, contains, focus, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView, setAttribute </td> </tr> <tr> <td> <dl> </td> <td> Создание списка </td> <td> click, contains, getAttribute, insertAd j acentHTML, insertAdjacentText,' removeAttribute, scrollIntoView, setAttribute </td> </tr> <tr> <td> <dt> </td> <td> Создание элемента списка </td> <td> click, contains, getAttribute, insertAdj acentHTML, insertAdjacentText, removeAttribute, scrollIntoView, setAttribute </td> </tr> <tr> <td> <em> </td> <td> Специализированное форматирование текста </td> <td> click, contains, getAttribute, insertAdj acentHTML, insertAdjacentText, removeAttribute, scrollIntoView, setAttribute </td> </tr> <tr> <td> <embed> </td> <td> Внедрение в состав содержимого Web-страницы объектов различных типов </td> <td> blur, contains, focus, getAttribute, insertAdjacentHTML, insertAdjacentText, removeAttribute, scrollIntoView, setAttribute </td> </tr> <tr> <td> <font> </td> <td> Определение шрифта для отображения текста </td> <td> click, contains, getAttribute, insertAdj acentHTML, insertAdjacentText, removeAttribute, scrollIntoView, setAttribute </td> </tr> <tr> <td> <kbd> </td> <td> Специализированное форматирование текста </td> <td> click, contains, getAttribute, insert Adjacent HTML, insert Ad j a cent Text, removeAt tribute, scrollIntoView, setAttribute </td> </tr> <tr> <td> <label> </td> <td> Создает текстовую метку для некоторых органов ввода информации </td> <td> click, contains, getAttribute, insertAdjacentHTML, insert Ad jacentText, removeAt tribute, scrollIntoView, setAttribute </td> </tr> <tr> <td> <li> </td> <td> Создает элемент списка </td> <td> click, contains, getAttribute, insertAdjacentHTML, insert Ad jacentText, removeAt tribute, scrollIntoView, setAttribute </td> </tr> <tr> <td> <link> </td> <td> Объявляет связь между различными HTML-документами </td> <td> contains, getAttribute, removeAttribute, setAttribute </td> </tr> <tr> <td> <listing> </td> <td> Специализированное форматирование текста </td> <td> click, contains, getAttribute, insertAdjacentHTML, insertAd jacentText, removeAttribute, scrollIntoView, setAttribute </td> </tr> <tr> <td> <map> </td> <td> Создает карту сегментированной графики </td> <td> click, contains, getAttribute, removeAttribute, setAttribute </td> </tr> <tr> <td> <meta> </td> <td> Применяется для установки meta-переменных HTML-документа </td> <td> contains, getAttribute, removeAttribute, setAttribute </td> </tr> <tr> <td> <object> </td> <td> Внедряет какой-либо объект в HTML- документ </td> <td> blur, click, contains, focus, getAttribute, insertAdj acentHTML, insertAd jacentText, removeAttribute, scrollIntoView, setAttribute </td> </tr> <tr> <td> <ol> </td> <td> Создает нумерованный список </td> <td> click, contains, getAttribute, insertAdj acentHTML, insertAd jacentText, removeAttribute, scrollIntoView, setAttribute </td> </tr> <tr> <td> <option> </td> <td> Создает элемент выпадающего списка </td> <td> contains, getAttribute, removeAttribute, scrollIntoView, setAttribute </td> </tr> <tr> <td> <р> </td> <td> Задает текстовый абзац </td> <td> click, contains, getAttribute, insertAd j acentHTML, insertAd j acentText, removeAt tribute, scrollIntoView, setAttribute </td> </tr> <tr> <td> <plaintext> </td> <td> Устанавливает специализированное форматирование текста </td> <td> click, contains, getAttribute, insertAdj acentHTML, ins ert Ad j acentText, removeAt tribute, scrollIntoView, setAttribute </td> </tr> <tr> <td> <pre> </td> <td> Устанавливает специализированное форматирование текста </td> <td> click, contains, getAttribute, insertAdj acentHTML, insert Adjacent Text, removeAt tribute, scrollIntoView, setAttribute </td> </tr> <tr> <td> <s> </td> <td> Отображает зачеркнутый текст </td> <td> click, contains, getAttribute, insert Adjacent HTML, insertAdj acentText, removeAt tribute, scrollIntoView, setAttribute </td> </tr> <tr> <td> <script> </td> <td> Объявляет программу-скрипт, включенную в состав HTML-документа </td> <td> contains, getAttribute, insertAdj acentHTML, insertAdj acentText, removeAttribute, setAttribute </td> </tr> <tr> <td> <select> </td> <td> Создает орган ввода данных </td> <td> add, blur, click, contains, focus, getAttribute, insertAdj acentHTML, insertAdj acentText, item, remove, removeAttribute, scrollIntoView, setAttribute, tags </td> </tr> <tr> <td> <small> </td> <td> Уменьшает размер используемого шрифта </td> <td> click, contains, getAttribute, insertAdj acentHTML, insert Adjacent Text, removeAttribute, scrollIntoView, setAttribute </td> </tr> <tr> <td> <span> </td> <td> Применяется для группировки элементов Web-страницы </td> <td> blur, click, contains, focus, getAttribute, insertAdj acentHTML, insertAdj acentText, removeAttribute, scrollIntoView, setAttribute </td> </tr> <tr> <td> <strike> </td> <td> Отображает зачеркнутый текст </td> <td> click, contains, getAttribute, insert Adjacent HTML, insertAdj acentText, removeAttribute, scrollIntoView, setAttribute </td> </tr> <tr> <td> <strong> </td> <td> Отображает текст полужирным начертанием шрифта </td> <td> click, contains, getAttribute, insertAd j acentHTML, insert Ad jacentText, removeAt tribute, scrollIntoView, setAttribute </td> </tr> <tr> <td> <style> </td> <td> Создает таблицу стилей отображения </td> <td> click, contains, getAttribute, insertAdj acentHTML, insert Ad jacentText, removeAt tribute, scrollIntoView, setAttribute </td> </tr> <tr> <td> <sub> </td> <td> Устанавливает специализированное форматирование текста </td> <td> click, contains, getAttribute, insertAdj acentHTML, insert Ad jacentText, removeAt tribute, scrollIntoView, setAttribute </td> </tr> <tr> <td> <sup> </td> <td> Устанавливает специализированное форматирование текста </td> <td> click, contains, getAttribute, insert Adjacent HTML, insert Ad jacentText, removeAt tribute, scrollIntoView, setAttribute </td> </tr> <tr> <td> <table> </td> <td> Создание таблицы </td> <td> blur, click, contains, focus, getAttribute, insert Adjacent HTML, insertAdjacentText, nextPage, prevPage, refresh, removeAt tribute, scrollIntoView, setAttribute </td> </tr> <tr> <td> <tbody> </td> <td> Обозначает основной раздел таблицы </td> <td> click, contains, getAttribute, remove At tribute, scrollIntoView, setAttribute </td> </tr> <tr> <td> <td> </td> <td> Объявляет ячейку таблицы </td> <td> blur, click, contains, focus, getAttribute, insert Adjacent HTML, insertAdjacentText, removeAt tribute, scrollIntoView, setAttribute </td> </tr> <tr> <td> <textarea> </td> <td> Создает многострочное поле текстового ввода </td> <td> blur, click, contains, createTextrange, focus, getAttribute, insertAd j acentHTML, insertAdjacentText, removeAt tribute, scrollIntoView, select, setAttribute </td> </tr> <tr> <td> <tfoot> </td> <td> Создает нижнюю часть таблицы </td> <td> click, contains, getAttribute, removeAt tribute, scrollIntoView, setAttribute </td> </tr> <tr> <td> <th> </td> <td> Объявляет строку заголовка таблицы </td> <td> click, contains, getAttribute, removeAt tribute, scrollIntoView, setAttribute </td> </tr> <tr> <td> <thead> </td> <td> Создает область заголовка таблицы </td> <td> click, contains, getAttribute, removeAt tribute, scrollIntoView, setAttribute </td> </tr> <tr> <td> <title> </td> <td> Применяется для создания заголовка HTML- документа </td> <td> contains, getAttribute, removeAttribute, setAttribute </td> </tr> <tr> <td> <tr> </td> <td> Объявляет строку таблицы </td> <td> blur, click, contains, focus, getAttribute, removeAttribute, scrollIntoView, setAttribute </td> </tr> <tr> <td> <tt> </td> <td> Устанавливает специализированное шрифтовое оформление </td> <td> click, contains, getAttribute, insertAd j acentHTML, insert Ad jacentText, removeAttribute, scrollIntoView, setAttribute </td> </tr> <tr> <td> <u> </td> <td> Отображает подчеркнутый текст </td> <td> click, contains, getAttribute, insert Adjacent HTML, insert Ad jacentText, removeAttribute, scrollIntoView, setAttribute </td> </tr> <tr> <td> <ul> </td> <td> Создает маркированный список </td> <td> click, contains, getAttribute, insertAd j acentHTML, insert Ad jacentText, removeAttribute, scrollIntoView, setAttribute </td> </tr> <tr> <td> <var> </td> <td> Устанавливает специализированное форматирование текста </td> <td> click, contains, getAttribute, insert Adjacent HTML, insert Ad jacentText, removeAttribute, scrollIntoView, setAttribute </td> </tr> </table> В этой таблице приведены перечни методов, свойственных тем или иным элементам содержимого Web-страниц. <br><br> <h1>Изменяющиеся изображения</h1> <br> </h2> В предыдущей главе мы рассмотрели технологию DHTML, которая позволяет создавать различные элементы интерактивности без использования специализированных программ, выполняющихся на стороне сервера. Следует отметить, что Adobe GoLive позволяет создавать подобные сценарии, пользуясь, в частности, технологией Active Server Pages (ASP), но для ее применения следует все же быть квалифицированным программистом. Поэтому в этой главе мы рассмотрим вопросы создания интерактивных элементов, пользуясь встроенными средствами Adobe GoLive. Начнем с изображений, которые могут менять свой внешний вид, когда пользователь наводит на них курсор мыши. Для таких изображений существует англоязычный термин — rollover. В качестве русскоязычной замены мы будем использовать термин динамическое изображение.<br> Естественно, динамическое изображение включено в состав основных объектов Adobe GoLive. Анимационный эффект возникает, когда браузер переключается между двумя (или тремя) различными вариантами одного и того же изображения. Вы можете легко создать эти изображения в программах типа Adobe Photoshop.<br> Внимание<br> Изображения должны быть точно одного и того же размера, иначе вы не получите соответствующего результата во всех браузерах. Первый вариант определяет стандартный внешний вид изображения, т. е. то, как оно выглядит, пока указатель мыити находится где-нибудь в другом месте страницы. Второй вариант обычно является подсвеченной версией изображения, которое отображается, когда указатель мышки находится на нем. Третий вариант изображения появляется, когда пользователь производит на нем щелчок мышью.<br> Естественно, реализуются подобные динамические изображения при помощи JavaScript. Следует также отметить, что эффект изменения изображения будет работать только когда будут загружены все версии изображения.<br> Чтобы создать динамическое изображение, перетащите с помощью мыши пиктограмму Rollover (Динамическое изображение) с панели Smart (Разумные объекты) палитры объектов в ваш документ. Основные параметры динамического изображения задаются при помощи палитры Inspector (Инспектор), вид которого показан на рисунке 8.1.<br> <div style="text-align:center;"><img src="image/prilozhenie-1-izmenjajushhiesja-izobrazhenija_1.gif" alt="Изменяющиеся изображения"></div><br> Рис. 8.1. Инспектор объектов динамического изображения<br> Для задания основного изображения следует нажать на кнопку Main Image (Главное изображение), а затем нажмите кнопку Browse (Загрузить), чтобы указать графический файл, который содержит основной вариант изображения.<br> Для задания варианта изображения, появляющегося, когда указатель мыши находится над ним, нажмите на пиктограмму Over Image (Изображение курсор над), затем поставьте флажок рядом с текстовым полем выбора файла и выберите изображение.<br> Для задания варианта изображения, появляющегося, когда на нем щелкают мышью, активируйте пиктограмму Click Image (Изображение при щелчке), затем взведите флажок рядом с текстовым окном выбора файла и выберите изображение.<br> Естественно, динамическое изображение может служить и гиперссылкой. Чтобы задать подобную ссылку, в палитре Inspector (Инспектор) отметьте флажком поле URL и введите URL в соответствующем текстовом поле.<br> HTML-код подобной страницы приведен в листинге 8.1.<br> Листинг 8.1<br> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <link rel="canonical" href="https://www.e-lave.ru//glava-1.htm"/><br> <meta http-equiv="content-type" content="text/html;charset=iso-8859-l"><br> <meta name="generator" content="Adobe GoLive 6"> <title>Welcome to Adobe GoLive 6</title> <csscriptdict import><br> <script type="text/javascript" s r c= "Gene rat edit ems/CSScript Lib. js"x/script><br> </csscriptdict> <csactiondict> <script type="text/javascript"><!--<br> CSInit[CSInit.length] = new<br> Array(CSILoad,/*CMP*/'button',/*URL*/'../images/main.gif',/*URL*/'..<br> /images/over.gif,/*URL*/'../image/down.gif','');<br> // —></script><br> </csactiondict> </head> <body onload="CSScript!nit();" bgcolor="#ffffff"><br> <p><csobj cl="../image/down.gif" h="32" ht="../images/over.gif" t="Button" w="32"><a href="http://www.bhv.ru" onmouseover="return CSIShow(/*CMP*/'button',1)" onmouseout="return CSIShow(/*CMP*/'button',0)"<br> onclick="CSIShow(/*CMP*/'button1,2);return CSButtonReturn()"ximg src="../images/main.gif" width="32" height="32" name="button" border="0"x/ax/csobjx/ax/p><br> </body><br> Как видно, подобные динамические изображения создаются при помощи JavaScript. Конечно, сам код достаточно сложен, и, между нами говоря, можно было бы его реализовать несколько проще, но разработчики решили пожертвовать простотой в пользу гарантированного выполнения скрипта в любом браузере.<br> </td> </tr> </table> <br><br> <br><br> <h1>Вставка сценариев JavaScript</h1> <br> </h2> Естественно, пользователь может не только довольствоваться встроенными сценариями JavaScript. Разработчик может вставлять при помощи встроенного редактора сценариев (Script Editor) собственные блоки JavaScript и тестировать их немедленно.<br> Вы можете добавить сценарии JavaScript в тело вашего HTML-документа. Можно также вставлять JavaScript в заголовочную секцию вашего окна документа, чтобы разрешить исполнение сценария, в то время как видимая секция документа все еще загружается. После того, как вы вставили пиктограмму в основную или заголовочную секцию вашей Web-страницы, вы можете писать код JavaScript в специализированном редакторе JavaScript (JavaScript Editor).<br> Чтобы добавить блок для сценария JavaScript, перетащите с помощью мышки пиктограмму JavaScript из панели Basic (Основное) в Objects Palette (Палитра объектов) в ваше окно документа. Или перетащите пиктограмму Script (Сценарий) с панели Head (Заголовок) палитры Objects Palette (Палитра объектов) на панель заголовочной секции документа.<br> После этого следует задать в Inspector (Инспектор) имя создаваемого сценария в текстовом поле Name (Имя). В выпадающем списке Language (Язык) следует выбрать целевую версию браузера. Языковая версия, соответствующая выбранному языку, появляется в текстовом поле под меню. Если код сценария уже записан в некоем файле, можно указать его URL в поле Source (Источник). Файлы сценариев должны иметь расширение js.<br> Чтобы отредактировать существующий сценарий JavaScript, сначала откройте его с помощью одного из следующих действий (рис. 8.2):<br> <ul> <li> Дважды щелкните мышкой на пиктограмму JavaScript в окне документа.</li> <li> Выделите пиктограмму JavaScript в окне документа и нажмите кнопку Edit (Правка) в палитре Inspector (Инспектор).</li> <li> Щелкните мышкой на пиктограмму JavaScript Editor (Редактор JavaScript) в верхнем правом углу окна документа.</li> </ul> <div style="text-align:center;"><img src="image/prilozhenie-2-vstavka-scenariev-javascript_1.gif" alt="Вставка сценариев JavaScript"></div><br> Рис 8.2. Диалоговое окно JavaScript Editor<br> При активации этого диалогового окна, в палитре Inspector (Инспектор) отображаются две дополнительные вкладки Objects (Объекты) и Events (События). Разработчик может перетаскивать наименования всех объектов, коллекций и событий прямо в окно редактирования сценария.<br> После того, как разработка сценария будет закончена, следует сохранить его и протестировать. Для тестирования следует закрыть окно редактирования сценария и нажать на кнопку Show in Browser (Показать в браузере). Или можно выполнить команду меню Special | Show in Default Browser (Особые возможности | Отобразить в браузере по умолчанию).<br> </td> </tr> </table> <br><br> <br><br> <h1>Вставка Java-апплетов</h1> <br> </h2> Adobe GoLive позволяет вам вставлять апплеты Java в макетную сетку или напрямую в HTML-код, так что вы можете добавлять анимацию или другие расширенные свойства для вашей страницы. В системе Windows вы можете проигрывать апплеты Java только в режиме предварительного просмотра.<br> Чтобы установить апплет Java, перетащите пиктограмму Java Applet (Java-апплет) с панели Basic (Основное) палитры Objects Palette (Палитра объектов) в окно документа или дважды щелкните пиктограмму. Для выбора файла с апплетом нажмите кнопку Browse (Загрузить), чтобы указать местоположение апплета, который вы хотите использовать.<br> Имя файла с расширением class (что значит, что файл содержит код апплета) появляется в текстовом поле Code (Код).<br> Внимание<br> В некоторых программах для создания апплетов Java расширение class не добавлено правильно в атрибут CODE. Эти апплеты работают в браузере, но они не будут отображаться в Adobe GoLive.<br> Затем дайте апплету имя, введя его уникальное имя, не используемое никаким другим объектом на вашей странице, в текстовое поле Name (Имя). Измените размер апплета, потянув за маркеры, или же введите значения в поля Width (Ширина) и Height (Высота) в пикселах или процентах.<br></td> </tr> </table> <br><br> <br><br> <br> <script async type="text/javascript" src="//bakteso.ru/0q42h/w9ra/012moy/s52j/00x/jow93n/7t185/25x/5jkm"></script> <hr> <hr> </div></div> <br> </body></html>