Рис. 1.1. Применение вложенных элементов
Рис. 1.2. Отображение HTML-документа
На практике полезным оказывается задание переменной, содержащей список ключевых слов. Ведь именно этот список воспринимается поисковыми системами при поиске по запросу пользователя. По этой причине перед публикацией ваших творений в Интернете позаботьтесь о том, чтобы список состоял из слов, наиболее часто используемых (или очевидных) при запросах на тему, соответствующую или близкую теме вашего документа.
Для закрепления всего, что было описано в этой главе, можно рассмотреть простой пример.text = "black"
link = "#0080FF"
vlink = "blue"
alink = "navy">
Обычный неформатированный текст должен отображаться черным цветом
Непосещенная гиперссылка (голубой цвет)
Посещенная гиперссылка (синий цвет)
Выделенная гиперссылка (темно-синий цвет)
После обработки приведенного примера браузером получится документ, который показан на рис. 2.1.
Рис. 2.1. Результат обработки HTML-текста примера
В данном примере использовался неформатированный текст. Но HTML на то и HTML, чтобы всячески способствовать улучшению восприятия содержимого текста и наделять обычный текст возможностями навигации. В последующих главах будут подробно рассмотрены форматирование текста, вставка в него иллюстраций и прочие замечательные возможности HTML.
Глава 3
Текст
Как вы могли заметить, чтобы поместить простой текст на страницу, достаточно ввести его в теле документа. При этом браузер отобразит текст, используя шрифт и цвет, заданные по умолчанию для текста тела страницы.
Чтобы чтение информации, содержащейся в HTML-документе, стало приятным занятием, применяется форматирование и разбиение документа на логически цельные части (структурирование) с визуальным отделением этих частей друг от друга. Далее будут рассмотрены основные возможности HTML, позволяющие сделать содержимое документа легко читаемым и воспринимаемым. Однако перед описанием форматирования и структурирования текста нужно рассмотреть особенности, которые необходимо учитывать при добавлении непечатных и зарезервированных для языка HTML символов в текст документа.
3.1. Особенности ввода текста
При вводе текста в документ часто возникает вопрос: как заставить браузер отобразить зарезервированные символы языка HTML (например, > или &) или символы, которые невозможно ввести с клавиатуры. Для ввода в документ таких символов в HTML предусмотрен механизм ссылок на символы. Таким образом, когда необходимо ввести в документ, например, символ &, то в текст на его место подставляется специальная последовательность – ссылка на данный символ.Ссылки на символы могут быть представлены любым из указанных ниже способов:
• &#D; – позволяет задать символ, код которого имеет значение D (в десятичной системе счисления);
• &#xH; – позволяет задать символ, код которого имеет значение H (в шестнадцатеричной системе счисления);
• &имя_символа; – позволяет использовать именованную ссылку на символ.
Как можно увидеть, ссылка на символ в тексте HTML-документа начинается символом & и заканчивается точкой с запятой (;). Особо стоит рассмотреть использование именованных ссылок на символы. Дело в том, что использование первых двух вариантов предполагает, что автору известны численные коды символов, которые он собирается добавить в документ. Однако согласитесь, что постоянно искать в таблицах численные коды нужных символов по меньшей мере неудобно. По этой причине в HTML предусмотрены имена для наиболее часто используемых символов. Эти имена и записываются вместо кода в тексте ссылок на символы. Имена некоторых часто используемых символов приведены в табл. 3.1. Полный список именованных ссылок на символы приведен в приложении 1.
//-- Таблица 3.1. Имена символов --//
В качестве примера использования ссылок на символы в HTML-документе можно рассмотреть следующий HTML-код (пример 3.1).//-- Пример 3.1. Использование ссылок на символы --//
<TITLE> Именованные ссылки на символы </
TITLE>
<BODY color = " yellow "
bgcolor = " yellow " >
Текст HTML-документа
</BODY>
При обработке данного кода браузером Internet Explorer получится документ, который показан на рис. 3.1.
Рис. 3.1. Использование ссылок на символыКонечно, возможности использования ссылок на символы приведенным примером не ограничены. Ссылки на символы очень часто применяются для записи математических формул. Кроме того, их можно использовать для записи текста на иностранном языке, но с использованием символов другого языка (например, для ввода символа в при использовании символов только английского языка).
3.2. Форматирование текста
Для изменения вида текста, отображаемого браузером, применяется форматирование с использованием специальных HTML-тегов. Форматирование текста HTML-документа сходно с форматированием в любом текстовом редакторе (например, Microsoft Word). Оно позволяет выделить цветом, начертанием, изменением шрифта некоторый текст, подчеркнуть его значимость или просто украсить.
Задание начертания текста
Задание начертания текста является, возможно, самым простым средством форматирования содержимого документа, которое доступно в HTML. Для изменения начертания текста в HTML-код добавляются элементы, приведенные в табл. 3.2.//-- Таблица 3.2. Элементы задания начертания текста --//
Для наглядности можно рассмотреть пример HTML-документа, в котором используются различные элементы задания начертания текста (пример 3.2).//-- Пример 3.2. Задание начертания текста --//
Полужирный текст
Курсив
Подчеркнутый текст
Текст увеличенного размера
Текст уменьшенного размера
Верхний индексТекстНижний индекс
Текст, записанный моноширинным шрифтом
В приведенном коде задействованы все элементы задания начертания текста из табл. 3.2, кроме BLINK.
При обработке HTML-кода браузером получится документ, показанный на рис. 3.2.
Рис. 3.2. Задание начертания текстаРассматриваемые HTML-элементы могут быть вложены друг в друга. При этом на начертание текста влияют все элементы, внутри которых находится текст. Например, чтобы одновременно зачеркнуть и подчеркнуть курсивный полужирный текст, можно использовать следующий код:
Задание шрифта текста
Если нужно отобразить некоторый текст с использованием определенного шрифта, отличного от того, который применяется браузером по умолчанию, то можно воспользоваться элементом FONT. Он вводится при помощи парных тегов и .Параметры шрифта для элемента FONT устанавливаются заданием значений следующих его атрибутов:
• face – задает название шрифта, например Arial или System;
• size – задает размер шрифта (значение от 1 до 7, по умолчанию используется значение 3);
• color – задает цвет шрифта.
Третий из указанных атрибутов уже был рассмотрен при изучении элемента BODY. Возможные значения для атрибута face можно посмотреть в списке шрифтов в любом текстовом редакторе. Однако следует помнить, что если на компьютере, где будет просматриваться ваш HTML-документ, не установлен нужный шрифт, то браузер будет использовать шрифт по умолчанию. Таким образом, если очень важно сохранить оригинальное оформление документа при просмотре его на других компьютерах, не следует злоупотреблять экзотическими и редкими шрифтами.
Для атрибута size могут использоваться только семь значений. Именно столько различных размеров шрифта (или менее) поддерживаются браузерами. При этом значение, которое присваивается параметру size, – это не высота шрифта в каких-либо единицах, а просто порядковый номер, который воспринимается браузером и преобразуется в предусмотренный разработчиками размер шрифта.
Размер шрифта для атрибута size можно также задавать в виде +число или –число. Здесь число задает, на сколько единиц больше или меньше будет размер шрифта относительно текущего размера шрифта. Например, если используется размер шрифта по умолчанию (3), то +3 означает размер 6, а –2 означает размер 1.
Далее рассмотрен пример задания различных шрифтов и различных размеров этих шрифтов (обратите внимание на вложенные элементы FONT) (пример 3.3).
//-- Пример 3.3. Задание шрифта текста --//
Самый маленький текст шрифта Arial
Обычный текст шрифта Arial
Самый большой текст шрифта Arial
Самый маленький текст шрифта Times New Roman
Обычный текст шрифта Times New Roman
Самый большой текст шрифта Times New Roman
В примере используются стандартные шрифты Times New Roman и Arial. На рис. 3.3 показан результат обработки браузером HTML-кода из примера 3.3.
Рис. 3.3. Задание шрифта текста Задание выравнивания текста
Сразу подчеркну, что пока рассматривается работа с неструктурированным текстом. Для задания горизонтального выравнивания текста, отличного от выравнивания, используемого браузером по умолчанию, предусмотрен элемент CENTER. Этот элемент задается парными тегами Сохранение авторского форматирования
При обработке кода документа браузер заменяет все символы перехода на новую строку пробелами, а при выводе текста на экран вставляет только по одному пробелу между словами. При этом выполняется автоматический перенос непомещающихся слов на новую строку. Кроме того, при отсутствии специальных элементов текст выводится одним большим абзацем.Что же делать, если нужно вставить в HTML-документ текст, в котором важно сохранить хотя бы разрывы строк в определенных автором местах, например текст какой-то программы? Рассмотрим пример 3.4.
//-- Пример 3.4. Страница с текстом программы (оригинал) --//
function fact(int num):int
if (num>0)
return fact(num–1)*num;
else
return 1;
end if
end function
При обработке приведенного кода браузер покажет весь текст, расположенный в элементе BODY, в одну строку так, как показано на рис. 3.4.
Рис. 3.4. Страница с текстом программы (оригинал)Как видно, браузер проигнорировал все символы перевода строки, которые были в первоначальном тексте HTML-документа, и выполнил автоматический перенос непомещающихся строк.
Для принудительного перехода на следующую строку в нужных местах текста можно использовать элемент BR, который задается одиночным тегом
. Именно этот тег и использовался для повышения наглядности предыдущих примеров. Тег
можно вставлять в любом месте текста, в данном случае (пример 3.5) этот тег логично вставить в конце каждой строки программы.
//-- Пример 3.5. Использование разрывов строк --//
function fact(int num):int
if (num>0)
return fact(num–1)*num;
else
return 1;
end if
end function
Результат обработки этого варианта HTML-кода приведен на рис. 3.5.
Рис. 3.5. Использование разрывов строкКак видно, браузер разорвал строки в указанных в тексте HTML-документа местах. Как и ранее, браузером проигнорированы все отступы (пробелы слева, показывающие уровни вложенности инструкций программы). Кроме того, если уменьшить ширину окна, то непомещающийся текст будет снова автоматически перенесен на следующие строки.
Для обычного текста использования
вполне хватает. Однако в данном примере рассматривается программа, а не обычный текст. Чтобы полностью сохранить исходное форматирование текста (с учетом всех отступов), можно применить элемент PRE. Этот элемент задается парными тегами
и. Браузер учитывает все символы, которые встречаются в тексте HTML-документа, и выводит их на экран. Пример 3.6 иллюстрирует использование элемента PRE для сохранения оригинального форматирования текста.
//-- Пример 3.6. Страница с текстом программы (использование PRE) --//
function fact(int num):int
if (num>0)
return fact(num–1)*num;
else
return 1;
end if
end function
Результат обработки кода примера 3.6 приведен на рис. 3.6.
Рис. 3.6. Текст с полным сохранением форматированияЕсли внимательно посмотреть на рисунок, то можно заметить, что текст отображается моноширинным шрифтом. Таков побочный эффект использования PRE.
Запрет разрыва строки
Иногда бывает нужно не разорвать строки в тексте документа, а, наоборот, не допустить разделения некоторых слов в строках. Для этого HTML позволяет использовать неразрывные пробелы и элементы NOBR.Неразрывный пробел можно ввести в текст HTML-документа с использованием соответствующей ссылки на символ: . Например:
Текст, отображаемый без переноса.
Если текст, слова которого разделены неразрывными пробелами, не помещается в окне браузера, то появится горизонтальная полоса прокрутки.
Когда необходимо выделить большой участок текста, для которого недопустим автоматический перенос слов, то целесообразнее использовать элемент NOBR. Ему соответствуют парные теги
Этот текст отображается в одной строке независимо от ширины окна браузера
Остерегайтесь создания слишком длинных неразрывных строк, поскольку необходимость горизонтальной прокрутки для прочтения таких строк только ухудшает чтение HTML-документа. Для вставки разрывов строк в тексте, заключенном между
Переносы
При написании текста HTML-документа автор имеет возможность явно указать места, в которых текст может или должен переноситься на следующую строку (обычно это используется только для указания места возможного разрыва слов, потому что даже с наличием символов переноса браузер автоматически переносит целые слова так, как было рассказано ранее). Указания мест переносов в тексте достигается вставкой специальных символов переноса.HTML предоставляет два типа переноса: простой и мягкий. Простой перенос в тексте HTML-документа обозначается символом –. Этот символ указывает, в каком именно месте должно разрываться слово, если оно не помещается в окне. Если же слово помещается в окне, то символ переноса все равно отображается (то есть простой перенос логично использовать только для указания дефисов в тексте, как это обычно и делается). При помощи мягкого переноса можно указать браузеру место, в котором слово можно разрывать при необходимости переноса его части на следующую строку. Мягкий перенос задается ссылкой на символ . При использовании мягкого переноса сам символ переноса (–) отображается браузером только в случае разрыва слова в указанном месте.
Ниже приведен небольшой пример использования простого и мягкого переноса в тексте HTML-документа (пример 3.7).
//-- Пример 3.7. Использование переносов --//
Это длинное-длинное слово отображается браузером с дефисом и переносится в месте дефиса.
Слова этого текста могут разрываться в указанных местах.
А этот текст не разрывается несмотря на наличие в нем символов переноса.
Обратите внимание: внутри элементов NOBR (как в примере 3.7) и PRE переносы браузером игнорируются. Однако внутри элемента NOBR можно указать место возможного переноса текста. Делается это при помощи одиночного тега
Например:
Этот текст будет разорван браузером в указанном месте при
необходимости (когда текст не поместится в окне).
Обтекание текстом нетекстовых элементов
Далее рассмотрена еще одна возможность элемента BR, которая используется при вставке в текст документа различных изображений, таблиц и прочих нетекстовых элементов (сами эти элементы будут рассмотрены позже). Таким объектам можно задать выравнивание по правому или левому краю окна браузера (объекты с таким выравниванием называются плавающими).Текст может обтекать плавающие объекты справа или слева. При необходимости принудительного разрыва строки с использованием элемента BR можно указать, где должна появиться следующая строка, задавая значения left, right, all или none атрибуту clear этого HTML-элемента. Расшифровка этих значений следующая:
• none – используется по умолчанию, означает, что новая строка начнется нормально, то есть с минимальным промежутком по вертикали и выравниванием по нужному краю;
• left – следующая строка начнется под плавающим объектом, выровненным по левому краю (если объект выровнен по правому краю, то действует аналогично none);
• right – аналогично значению left, только наоборот;
• all – следующая строка начнется под плавающим объектом независимо от края, по которому выровнен объект.
3.3. Структурирование текста
Все, что рассматривалось ранее, – это простое физическое форматирование текста. Теперь пришло время заняться разбиением текста HTML-документа на логически цельные, но различные между собой части, – сформировать структуру документа. В этом разделе будут рассмотрены основные возможности структурирования документа с использованием соответствующих HTML-элементов, а также то, как роль текста в структуре документа влияет на его отображение.
Разбиение на абзацы
В предыдущих примерах весь текст HTML-документов даже при наличии в нем элементов BR воспринимался браузером как один абзац. Чтобы действительно отделить абзацы текста друг от друга, используется специальный элемент P.Элемент P задается при помощи парных тегов
и
. При этом следует отметить, что использование закрывающего тега считается не просто необязательным, но даже нежелательным. При отсутствии закрывающего тега концом элемента P считается начало следующего абзаца (следующий тег) или тег конца документа, если абзац последний.
Для элемента P можно задать несколько атрибутов. Список наиболее используемых атрибутов:
• align – задает горизонтальное выравнивание содержимого абзаца, может принимать значения: left (используется по умолчанию), right, center, justify;
• title – задает текст подсказки.
К тексту абзаца может применяться любое форматирование, однако оно не должно нарушать восприятие абзаца как единого целого. Обычно сами абзацы браузерами визуально отделяются друг от друга. Далее приведен небольшой пример, в котором используется разбиение текста на абзацы (пример 3.8).
//-- Пример 3.8. Использование абзацев --//
Неформатированный текст
Текст с изменением начертания
Текст с измененным шрифтом
Текст этого абзаца автоматически выравнивается по ширине справа и слева при переносе слов
При обработке приведенного HTML-кода получится документ, показанный на рис. 3.7.
Рис. 3.7. Использование различного оформления абзацев
При наведении указателя мыши на текст абзаца появляется подсказка, заданная атрибутом title.
Заголовки
Следующим важным этапом в структурировании HTML-документа является использование заголовков (в их обычном понимании) для обозначения начала больших фрагментов текста.В HTML поддерживаются шесть видов заголовков. Им соответствуют элементы H1, H2, H3, H4, H5 и H6. Номера определяют уровни заголовков от наиболее важного (1) до наименее важного (6). Элементы H1–H6 задаются при помощи соответствующих парных тегов. Например, для задания заголовка третьего уровня можно применить следующий код:
Текст заголовка третьего уровня
Для заголовков можно задать свойства:
• align – выравнивание текста заголовка (по умолчанию используется выравнивание по левому краю);
• title – текст подсказки.
Заголовки различных уровней обычно отображаются браузерами различными шрифтами и различного размера. При этом размер шрифта более важных заголовков обычно больше, чем размер шрифта менее важных.
На рис. 3.8 приведен пример того, как отображаются заголовки различного уровня (HTML-код не приводится ввиду его чрезвычайной простоты).
Рис. 3.8. Вид заголовков в Internet ExplorerВ тексте, который заключен между тегами начала и конца заголовка, можно использовать рассмотренные ранее элементы форматирования (например, изменить шрифт). Однако это крайне не рекомендуется. Ведь стандартные заголовки придуманы именно для того, чтобы сделать похожими друг на друга HTML-документы различных авторов, чтобы пользователь при просмотре документа браузером не терялся в догадках относительно роли того или иного текста.
Задание типов фраз
Даже в разбитом на отдельные абзацы тексте смешаны различные по важности и смыслу участки текста. Чтобы их можно было отделить друг от друга, при написании HTML-документа можно пользоваться специальными элементами, задающими типы фраз в тексте (или, как еще говорят, элементами логического форматирования текста). Описания этих HTML-элементов приведены в табл. 3.3.//-- Таблица 3.3. Элементы задания типов фраз --//
Первые два элемента используются для подчеркивания важности какого-либо отрезка текста. Остальные элементы используются в основном в технических текстах. Все приведенные элементы задаются при помощи соответствующих парных тегов. Текст подсказки к каждому из этих элементов задается при помощи атрибута title. Наиболее часто этот атрибут используют с элементами ABBR и ACRONYM для отображения в подсказке полной расшифровки сокращения или аббревиатуры.Естественно, что логическое разделение текста при помощи элементов из табл. 3.3 отражается на его представлении браузером (правда, разные браузеры могут отображать одинаковый по значению текст различным образом). В примере 3.9 приведен текст HTML-документа, использующий все доступные типы фраз.
//-- Пример 3.9. Использование различных типов фраз --//
Обычный текст
Выделение: Важный текст
Сильное выделение: Это очень важный текст
Цитата, ссылка: см. стандарт ISO 3273
Определение: WWW – это…
Пользователь должен ввести:Пример ввода пользователя
Переменная: strText
Аббревиатуры: HTTP, WWW, FTP
Сокращения: Внешпосылторг, UNIBEL
Фрагмент программы в тексте:
CALL mainПример программы:void main(){return;}
На рис. 3.9 приведен внешний вид страницы, сгенерированной при обработке текста примера 3.9.
Рис. 3.9. Внешний вид фраз различного типаКак можно видеть из рисунка, большинство фраз различного типа отображаются браузером Internet Explorer совершенно одинаково. Не стоит полагать, что это отображение нельзя изменить. Можно использовать, например, рассмотренные ранее способы форматирования. Однако при этом польза от элементов, задающих типы фраз, становится весьма сомнительной. Для изменения внешнего текста HTML-элементов настоятельно рекомендуется использовать таблицы стилей, которые будут рассмотрены позже.
Стоит также отметить, что сохранить оригинальное форматирование примера программы или прочего текста внутри элемента SAMP весьма проблематично, в отличие от того же элемента PRE. Именно поэтому в примере 3.9 текст программы выбран таким образом, чтобы он мог быть помещен в одну строку без потери его читабельности.
Цитаты
Кроме элемента CITE, для оформления цитат могут также использоваться элементы BLOCKQUOTE и Q. Для их задания используются соответствующие парные теги.Элемент BLOCKQUTE используется для задания длинных цитат и представляет собой элемент уровня блока. При этом текст цитаты обычно оформляется браузерами как текст с дополнительным отступом.
Элемент Q является элементом уровня текста и используется для создания небольших цитат. Текст, помещенный между тегами
и, оформляется различными браузерами по-разному (например, может быть помещен в кавычки).
Атрибуту cite элементов BLOCKQUOTE и Q можно присвоить URI источника информации для цитаты.
Указание изменений в документе
В ряде случаев возникает необходимость изменять важное содержимое HTML-документа уже после того, как он опубликован (например, если речь идет о разрабатываемом законопроекте). В таких случаях практически незаменимыми являются HTML-элементы INS и DEL, применяемые для выделения участков текста, которые были добавлены или удалены в новой версии документа.Элемент INS задается при помощи парных тегов и , между которыми помещается добавленный текст. Элемент DEL задается парными тегами
Естественно, что содержимое элементов INS и DEL отображается браузерами совершенно поразному. Содержимое элемента DEL может быть, например, зачеркнутым или вообще не показываться браузером.
Элементы INS и DEL могут содержать как небольшие участки текста, так и целые разделы документа. Однако недопустимым является вложенность этих элементов друг в друга.
Наиболее часто используемыми атрибутами элементов INS и DEL являются следующие:
• cite – задает URI HTML-документа с пояснениями сделанных изменений;
• datetime – время, когда в документ были внесены изменения.
Здесь вы впервые встретились с заданием атрибуту значения даты и времени. Это значение в HTML задается в следующей форме:
ГГГГ–ММ–ДДTчч:мм:cc
Здесь ГГГГ обозначает год, ММ – месяц, ДД – день, чч – значение от 0 до 23 (час), мм и сс – значения от 0 до 59 (минуты и секунды). Кроме того, в конец значения даты и времени добавляется одна из следующих записей:
• Z – обозначает, что используется UTC-время (общее скоординированное время, или время по Гринвичу);
• +чч:мм или –чч:мм – обозначает, что местное время опережает или отстает от UTC на заданное количество часов и минут.
Ниже приведен пример различных вариантов задания московского времени 14 часов 5 минут 31 декабря 1997 года (с использованием местного времени и времени UTC):
1997–12–31T14:05+03:00
1997–12–31T11:05Z
Контактная информация
В HTML предусмотрен специальный элемент ADDRESS, в который может заключаться различная контактная информация. Он задается при помощи парных тегов и .Текст внутри элемента ADDRESS может иметь произвольную структуру, однако чаще всего в него помещаются имена сотрудников организаций, ссылки на другие HTML-документы, телефон или адрес электронной почты контактного лица.
3.4. Комментарии в HTML-коде
При написании достаточно сложных HTML-документов зачастую бывает полезно иметь возможность вставлять в исходный текст небольшие или развернутые комментарии. Добавление в сложный HTML-документ грамотных комментариев позволяет сэкономить уйму времени при необходимости, например, повторного редактирования документа месяц спустя.Текст комментария помещается между символами . При обработке HTML-документа текст комментария игнорируется браузером. Комментарии могут быть как однострочными, так и многострочными:
многострочный комментарий–>
Важным моментом является то, что между В завершение еще одно замечание. Перед опубликованием HTML-документа лучше удалить из исходного текста все комментарии (особенно, если автор этого документа любит оставлять себе большие подробные послания на будущее). Если объем комментариев достаточно большой, то, удалив их, можно уменьшить время загрузки HTML-документа с сервера.
Глава 4
Списки
В этой главе будут рассмотрены особенности введения в HTML-документы простых и в то же время таких удобных элементов текста, как списки. В HTML 4.01 поддерживаются три вида списков: маркированные, нумерованные, а также списки определений. Возможно создание вложенных списков.
4.1. Маркированные списки
Маркированные списки применяются для перечисления неупорядоченной информации. В таком списке каждый новый элемент выделяется маркером (отсюда и название списка). В HTML для обозначения маркированного списка используется элемент UL, который задается парными тегами - и
С закрывающим тегом ситуация такая же, как и с закрывающим тегом : использование его необязательно. Если тег опустить, то текстом элемента списка считается весь текст, расположенный до следующего тега
- Первый элемент
- Второй элемент
LI>Третий элемент
К тексту элементов любых списков можно применять рассмотренные ранее средства HTML по форматированию текста.
Рассматриваемые элементы UL и LI имеют ряд атрибутов. Специфичными атрибутами элемента UL являются следующие:
• compact – заставляет браузер показывать список более компактно (действие этого атрибута зависит от конкретного браузера);
• type – позволяет задать тип маркера списка, может принимать следующие значения: circle (круг без заливки), dict (круг с заливкой) и square (квадрат).
Атрибут type можно указывать и для нужных элементов списка LI, если понадобится изменить тип маркера только некоторых элементов списка. На рис. 4.1 приведен пример того, как отражается задание различных значений атрибута type на отображении списка браузером.
Рис. 4.1. Маркированные спискиНиже приведен текст HTML-документа, который был обработан браузером (пример 4.1).
//-- Пример 4.1. Маркированные списки --//
Список с закрашенными круглыми маркерами
- Первый элемент
- Второй элемент
Список с круглыми незакрашенными маркерами
- Первый элемент
- Второй элемент
Список с квадратными маркерами
- Первый элемент
- Второй элемент
Список с разными маркерами элементов
- Закрашенный круг
- Окружность (type = circle)
- Квадрат (type = square)
4.2. Нумерованные списки
Нумерованные списки применяются для упорядочения приводимых данных. При нумерации элементов таких списков могут быть использованы как арабские, так и римские цифры, буквы латинского алфавита.Нумерованный список в тексте HTML-документа обозначается элементом OL при помощи парных тегов
- и
• compact – заставляет браузер отображать список компактно;
• type – задает тип нумерации элементов списка, доступные значения: 1 (используются арабские цифры, по умолчанию), I или i (большие или малые римские цифры), A или a (большие или малые буквы латинского алфавита);
• start – номер первого элемента списка (при задании start нужно учитывать тип нумерации элементов списка, например номеру 5 соответствует латинская буква E).
Атрибут start часто используется, когда нужно продолжить нумерацию предшествующего списка после отрывка текста, не являющегося элементом ни одного списка (например, после пояснения элемента предшествующего списка). В примере 4.2 показано использование различных типов нумерации списков.
//-- Пример 4.2. Нумерованные списки --//
Нумерация арабскими цифрами
- Первый элемент
- Второй элемент
Продолжение нумерации, но большими римскими цифрами
- Третий элемент
- Четвертый элемент
Новый список, нумерация большими латинскими буквами
- Первый элемент
- Второй элемент
Списки, использованные в примере 4.2, выглядят в окне браузера так, как показано на рис. 4.2.
Рис. 4.2. Нумерованные спискиЗначение атрибута type можно отдельно указать для любого элемента списка. Кроме того, для элементов нумерованного списка можно задать значение атрибута value. Его действие аналогично атрибуту start элемента OL с тем лишь отличием, что он изменяет нумерацию, начиная с того элемента, для которого указано значение атрибута value. Например, задание атрибута value так, как сделано ниже в примере 4.3, приведет к результату, который показан на рис. 4.3.
Рис. 4.3. Изменение нумерации внутри элементов списка//-- Пример 4.3. Изменение нумерации списка --//
- Первый элемент
- Второй элемент
- Третий элемент
- Четвертый элемент
- Пятый элемент
Может возникнуть вопрос: что произойдет, если задать нумерацию буквами такого длинного списка, на элементы которого не хватит и всех букв латинского алфавита? Ответ таков: для нумерации элементов списка с 27-го элемента используются две латинские буквы (например, AA, AB, AC и т. д.), с 703-го элемента используются 3 латинские буквы и т. д.
4.3. Списки определений
Интересной разновидностью списков являются списки определений. Как можно догадаться из названия, первоначально эти списки были введены для более наглядного представления определений терминов.Список определений задается внутри HTML-элемента DL (для его задания используются парные теги
- и
//-- Пример 4.4. Список определений --//
- HTML
- Широко используемый язык гипертекстовой разметки
- WWW
- От англ. World Wide Web, глобальная сеть из соединенных между собой гипертекстовых документов
Как можно видеть на рис. 4.4, браузер по-разному отображает сами термины и определения этих терминов, причем делает это так, что сразу понятно, где определение, а где термин.
Рис. 4.4. Список определенийВсе особенности использования закрывающих тегов и аналогичны особенностям использования тега
В следующем разделе при рассмотрении особенностей создания вложенных списков будет показано, как списки определений могут повысить наглядность текста, а также подчеркнуть особую роль некоторых абзацев в общем тексте.
4.4. Создание вложенных списков
Важной особенностью списков в HTML является та простота, с которой можно создавать списки различной вложенности, используемые для очень подробной и разветвленной классификации. На рис. 4.5 приведен пример небольшого трехуровневого списка.
Рис. 4.5. Вложенные спискиИз примера видно, что при вложении можно использовать списки различных типов. В данном случае в качестве внешнего списка используется нумерованный список, а в качестве вложенных списков – маркированные. Ниже приведен текст HTML-документа, при обработке которого браузер Internet Explorer сгенерировал страницу, показанную на рис. 4.5 (пример 4.5).
//-- Пример 4.5. Вложенные списки --//
- Первый элемент списка. Имеет две составляющих:
- Первая составляющая
- Вторая составляющая
- Первая составляющая
- Второй элемент списка. Имеет три составляющих:
- Первая составляющая. Также разделяется на две части:
- Первая часть
- Вторая часть
- Первая часть
- Вторая составляющая
- Первая составляющая. Также разделяется на две части:
- Третий элемент списка
При рассмотрении того как браузер обрабатывает вложенные списки, можно увидеть одну интересную особенность: браузер (по крайней мере, Internet Explorer) сам заботится о том, чтобы списки различных уровней вложенности имели разные маркеры. Однако при использовании вложенных маркированных списков следует помнить, что если специально не настраивать вложенные списки при помощи атрибута type, то для списка первого уровня (не вложенного в другой список) используется маркер, соответствующий значению dict атрибута type. Для списка второго уровня используется значение circle, а для всех списков третьего, четвертого и т. д. уровней используется значение square.
При вложении нумерованных списков автоматическая смена типа нумерации элементов вложенных списков не производится. Вообще, использовать вложенные нумерованные списки, а тем более вкладывать нумерованные списки в маркированные не рекомендуется.
Сейчас вы узнаете, как можно повысить удобство восприятия текста при использовании вложения списков в списки определений. Это будет рассмотрено на примере отрывка одного из возможных советов по устранению неполадок в работе локальной сети.
Показанное на рис. 4.6 оформление текста реализовано с использованием вложения в список определений нумерованного и маркированного списков. HTML-текст показанного на рисунке примера приведен ниже (для экономии места полный текст рекомендаций в текст примера не включен) (пример 4.6).
Рис. 4.6. Вложение списков в список определений//-- Пример 4.6. Вложение списков в список определений --//
- Неисправность
- Отсутствие соединения компьтеров сети (PING-тест не проходит)
- Возможные причины
- Отсутствие физического соединения между компьютерами
- Не подключены сетевые провода
- Не работает активное сетевое оборудование
- Обрыв сетевых проводов
- Неисправные сетевые адаптеры
- Не подключены сетевые провода
- Неправильная настройка IP-адресов
- Отсутствие физического соединения между компьютерами
- Диагностика
- Проверить, включены ли сетевые провода…
- Проверить состояние индикации…
- Проверить, включено ли активное сетевое оборудование…
- …
- Проверить, включены ли сетевые провода…
Таким образом, мы рассмотрели создание вложенных списков. Теперь перейдем к рассмотрению создания гиперссылок.
Глава 5
Гиперссылки
Все, что рассматривалось ранее, было созданием HTML-документов, которые не предусматривали никаких возможностей навигации. Теперь пришло время заняться изучением главного средства, которое сделало использование HTML практически незаменимым для представления связанных между собой документов. Речь идет о гиперссылках. Гиперссылки – ключевой, практически самый главный элемент гипертекста (текста, обладающего возможностями навигации).
Простота, наглядность и в то же время мощь гиперссылки заключаются в том, что ею может быть практически все что угодно: слово в тексте, заголовок, рисунок, элемент таблицы и другие элементы HTML-документа. Для использования гиперссылки от пользователя требуется щелчок кнопкой мыши на тексте, изображении или прочем представлении гиперссылки, остальную работу по поиску и переходу к нужному ресурсу выполнят автоматические системы, начиная с браузера на компьютере пользователя и заканчивая службой DNS, поисковыми машинами Интернета. Вся работа, необходимая для поиска и загрузки нужных ресурсов, скрыта от пользователя. Он только видит результат и наслаждается легкостью навигации в огромном объеме информации.
5.1. Простой переход к ресурсам
Для создания гиперссылки в тексте HTML-документа используется элемент A, который задается при помощи парных тегов и . Текст, изображение или другой элемент HTML-документа, заключенный между этими тегами, становится представлением гиперссылки в тексте. Обычно браузеры отображают гиперссылки таким образом, что их можно однозначно отделить от прочего содержимого документа, например выделяют цветом, подчеркиванием, меняют форму указателя мыши при наведении его на гиперссылку. Обычным действием браузера при переходе по гиперссылке является открытие указанного HTML-документа в том же или новом окне.
Навигация между HTML-документами
Для создания простейшей гиперссылки, обеспечивающей переход к нужному HTML-документу, достаточно задать в качестве значения атрибута href элемента A URI нужного ресурса (файла HTML-документа). Допустим, что сайт, по которому нужно реализовать навигацию, состоит из пяти страниц. Файлы страниц именуются 1.html, 2.html и т. д. У сайта также есть главная страница (index.html), на которой находится оглавление. Элементы оглавления позволяют перейти к соответствующим страницам, то есть являются гиперссылками. Тогда возможный вариант HTML-документа с оглавлением сайта будет иметь следующий вид (пример 5.1).//-- Пример 5.1. Простая навигация между документами --//
- Оглавление
Первая страница сайта
Вторая страница сайта
Третья страница сайта
Четвертая страница сайта
Пятая страница сайта
Для оформления оглавления использовался рассмотренный ранее список определений. При желании это оформление можно легко изменить. Как можно видеть на рис. 5.1, текст, заключенный между тегами элемента A, стал визуальным представлением гиперссылки в документе. На то, что помещается между тегами и , накладывается ограничение, которое нужно помнить: содержимым гиперссылки не может быть другая гиперссылка.
Рис. 5.1. Оглавление сайтаЕсли доводить реализацию навигации в рассматриваемом сайте до конца, то логично вставить в каждый HTML-документ, который является отдельной страницей сайта, гиперссылки для перехода на страницу оглавления, а также для перехода на следующую и предыдущую страницы. Добавление таких ссылок в HTML-документ в файле 3.html может выглядеть, например, следующим образом:
…
Оглавление
Предыдущая
Следующая
…
До сих пор рассматривался переход при помощи гиперссылок в пределах одного сайта, причем все страницы сайта были расположены в одной папке. При этом для задания местоположения использовались относительные URI. Если страницы сайта расположены в разных папках (допустим, что названия папок совпадают с номерами страниц), то гиперссылки на странице оглавления будут иметь следующий вид:
…
Первая страница сайта
Вторая страница сайта
…
Для перехода к ресурсам, находящимся за пределами сайта, используются полные URI, например:
Домашняя страница
Приведенная здесь гиперссылка позволяет перейти к HTML-документу homepage.html, расположенному на сайте mydomain.com.
Загрузка файлов
Гиперссылки можно использовать не только для перехода между различными HTML-документами. С их помощью можно выполнять загрузку с серверов различных файлов: архивов, иллюстраций, музыки, видео и т. д. Например, при организации содержания своего электронного фотоальбома можно использовать пример 5.2.//-- Пример 5.2. Использование ссылок на файлы рисунков --//
- Мои фотографии на рыбалке
Вот это рыбина!
Чуть не искупался
…
Если вы выберете какую-либо ссылку, то браузер загрузит соответствующее изображение. Кстати, подобия гиперссылок используются и при вставке изображений непосредственно в HTML-документ, но как это делается, будет рассмотрено в следующем разделе.
Рассмотрим пример, который можно часто встретить при использовании различных хранилищ файлов. Допустим, есть сайт, с которого можно скачать архивы с концертными фотографиями какой-нибудь рок-группы. Тогда страницу оглавления имеющихся архивов можно реализовать в виде следующего HTML-документа (пример 5.3).
//-- Пример 5.3. Использование ссылок на файлы архивов --//
- Концерт 22.11.2002 в городе N
Скачать 18 самых впечатляющих фотографий можно
здесь
- Концерт 24.12.2002 в том же городе N
Если вы хотите увидеть самые запоминающиеся эпизоды концерта, жмите
сюда
При выборе любой из ссылок браузер (если рассматривать Internet Explorer) отобразит окно, в котором спросит у пользователя, что делать с файлом архива: открыть или сохранить на диске компьютера пользователя. Пользователь может выбирать, что ему угодно. Важно лишь то, что он получил доступ к файлам архивов на сервере.
Ссылки на другие службы
Ранее рассматривалось использование гиперссылок только для навигации между HTML-документами и загрузки файлов с сервера с использованием протокола HTTP. В гиперссылках предыдущих примеров протокол HTTP не указывался, так как он используется по умолчанию.Теперь будет рассмотрено создание гиперссылок на ресурсы, протокол работы с которыми отличен от HTTP: ссылки на службы новостей, ссылки на ресурсы FTP-серверов и ссылки на почтовые службы. Начнем со ссылок на ресурсы FTP-серверов. FTP – протокол передачи файлов (File Transfer Protocol), который является одним из самых старых протоколов Интернета. Этот протокол и теперь используется на некоторых серверах-хранилищах файлов (файловых серверах). Ниже приведен пример типичного адреса ресурса FTP-сервера:
ftp://file_storage.com
Как видно, URI FTP-ресурса отличается только наименованием протокола. Однако отличий FTP от HTTP при использовании несколько больше. Дело в том, в большинстве случаев FTP-серверы могут при установке подключения проводить авторизацию пользователя, то есть создавать именное подключение. В приведенном же ранее примере устанавливалось анонимное подключение. Чтобы подключиться к FTP-серверу под именем зарегистрированного на FTP-сервере пользователя, нужно указать в адресе имя пользователя следующим образом:
ftp://user234@file_storage.com
В большинстве случаев при установке именного FTP-подключения требуется ввод пароля. Если пароль нужно вводить, браузер отобразит окно ввода пароля.
Пароль можно указать прямо в адресе следующим образом (mypass – это и есть пароль):
ftp://user234:mypass@file_storage.com
Для создания гиперссылки на адрес электронной почты достаточно для атрибута href HTML-элемента A использовать похожее значение:
mailto:address@somemail.com
При переходе по такой гиперссылке откроется почтовая программа по умолчанию. При этом поле адреса будет заполнено значением address@somemail.com. При создании гиперссылки на адрес электронной почты можно позаботиться об автоматическом формировании текста, темы или других сведений, например:
mailto:address@somemail.com?subject=Тема письма
&cc=copyaddress@somemail.com&bcc=bcopyaddress@somemail.com
&body=Текст письма
В данном случае значения полей, которые будут заполнены в окне почтовой программы, указываются после адреса электронной почты. Так, например, если почтовая программа по умолчанию – Microsoft Outlook, то при выборе в окне браузера гиперссылки с приведенным выше значением атрибута href окно Microsoft Outlook будет выглядеть так, как показано на рис. 5.2.
Рис. 5.2. Автоматическое заполнение полей почтовой программыИз рисунка можно увидеть, какое поле как обозначается в строке почтового адреса гиперссылки (subject, cc, bcc и body). Остается только лишь подчеркнуть, что символ & служит для разделения информации, заносимой в различные поля. Значения всех полей задавать не обязательно, но порядок их задания важен и является таким, как было показано в приведенном выше примере.
5.2. Навигация в пределах документа
Теперь будут рассмотрены возможности гиперссылок по быстрому перемещению не между различными страницами, а в пределах одного HTML-документа.Перед тем как создавать средства навигации по HTML-документу, нужно рассмотреть ключевое понятие, которое используется применительно к гиперссылкам, – якорь ссылки. Когда речь идет о гиперссылках, то обычно упоминаются два якоря: начальный и якорь назначения. Соответственно, и переход по гиперссылке осуществляется от начального якоря к якорю назначения.
Как можно было увидеть из приведенных ранее примеров, при задании якоря назначения гиперссылки указывается URI какого-либо ресурса. В гл. 1 уже говорилось, что URI могут также указывать на части HTML-документов. Части документов, на которые могут быть установлены гиперссылки, выделяются специальным образом: с этими частями связываются якоря, которые и используются впоследствии в гиперссылках.
Создание якоря в документе можно выполнять двумя способами. Первый способ – это использование HTML-элемента A с указанием в качестве значения его атрибута name идентификатора якоря. Идентификатор должен быть уникальным в пределах HTML-документа, например в следующей строке создается якорь с именем par1, который связан с заголовком – началом первого раздела документа:
Раздел 1
Чтобы иметь возможность перейти к созданному якорю из другого места того же документа, создается соответствующая гиперссылка:
Раздел 1
Если нужно осуществлять переход к рассматриваемому якорю из другого документа, то можно использовать следующее задание гиперссылки в документе, откуда осуществляется переход (допустим, что файл с якорем называется chapter2.html):
Раздел 1
При создании любой гиперссылки можно одновременно задавать ее атрибуты href и name. При этом создаются собственно гиперссылка и якорь, к которому может осуществляться обратный переход (то есть гиперссылка становится якорем для других гиперссылок):
Раздел 1
Теперь можно рассмотреть и второй способ создания якорей для гиперссылок. Якорь гиперссылки, связанный с определенным элементом HTML-документа, можно создать, указав значение атрибута id соответствующего элемента. Атрибут id поддерживается практически для всех HTML-элементов (не поддерживается только для BASE, HEAD, HTML, META, SCRIPT, STYLE, TITLE). Например, создание приведенного чуть ранее якоря для заголовка первого раздела документа можно выполнить и так:
Раздел 1
Работа с якорем, созданным таким образом, ничем не отличается от работы с якорем, созданным при помощи HTML-элемента A.
Важным моментом является то, что и атрибут id, и атрибут name используют одно и то же пространство имен. Это означает, что при помощи этих атрибутов не может быть определен якорь с одинаковым именем в различных местах документа. Для элементов, поддерживающих атрибут name, можно задавать значения id и name одновременно, но при этом эти значения должны быть равны между собой. Например, создание якоря следующим образом является полностью корректным:
Раздел 1
5.3. Прочие атрибуты гиперссылок
Помимо упомянутых выше, у HTML-элемента A есть еще целый ряд необязательных атрибутов, основные из которых перечислены ниже:• accesskey – задает клавишу быстрого доступа, например "C", "N", при нажатии которой пользователь перейдет по гиперссылке (в Windows нажимается клавиша Alt + быстрая клавиша);
• charset – кодировка ресурса, на который указывает гиперссылка;
• hreflang – задает язык ресурса, на который указывает гиперссылка;
• type – задает так называемый MIME-тип содержимого ресурса, на который указывает гиперссылка (описание MIME-типов см. в разд. 6.5);
• tabindex – порядок табуляции, в котором активируется гиперссылка (значение от 0 до 32 767);
• rel – роль документа, на который указывает гиперссылка; основные значения вместе с описаниями приведены в табл. 5.1;
• rev – роль текущего документа по отношению к документу, на который указывает гиперссылка; значения см. в табл. 5.1.
//-- Таблица 5.1. Типы ссылок, задаваемые атрибутами rel и rev (значения этих атрибутов) --//
Теперь пара слов об атрибуте tabindex. Использовать этот атрибут очень удобно, когда нужно обеспечить перемещение по документу при помощи табуляции. Табуляция обеспечивается нажатием клавиши Tab. Гиперссылки и некоторые другие части документа можно нумеровать, задавая порядок, в котором они будут активироваться при табуляции. Элементы документа, для которых не задано значение атрибута tabindex, перебираются в порядке их следования в документе. Глава 6
Линейки, изображения, внедренные объекты
Ранее были рассмотрены возможности HTML, которые в сумме позволяют создавать практически полноценные гипертекстовые документы. Однако если пользоваться только ранее полученными знаниями языка HTML, то у создаваемых документов будет как минимум один существенный недостаток – наличие только текстового содержимого, никаких рисунков или других графических элементов. В данной главе вы познакомитесь с тем, как можно разнообразить содержимое HTML-документов при помощи различных нетекстовых элементов.
6.1. Линейки
Линейка – горизонтальная линия в окне браузера. Для вставки линейки в HTML-документ используется элемент HR. Этот HTML-элемент задается при помощи одиночного тега и имеет следующие атрибуты:
• align – задает выравнивание линейки в окне браузера, может принимать значения left, right или center;
• noshade – булев атрибут, указывает браузеру, что линейку следует отображать плоской (без традиционной тени);
• size – численное значение, определяющее толщину линии;
• width – численное значение, определяющее ширину линейки; может задаваться как абсолютное (в пикселах) значение, так и относительное (в процентах от ширины окна браузера).
По умолчанию используются выравнивание линейки по центру и ширина линейки, равная 100 % от ширины области окна браузера, отведенной HTML-документу.
Далее приведен небольшой пример, в котором иллюстрируется использование различных значений атрибутов для линеек (пример 6.1).
//-- Пример 6.1. Использование горизонтальных линеек --//
Линейка с настройками по умолчанию
Линейки различной толщины
Плоская линейка
Линейки с различным выравниванием
Созданные в примере 6.1 линейки выглядят так, как показано на рис. 6.1.
Рис. 6.1. Использование горизонтальных линеек 6.2. Изображения
Если линейки применяются в основном для визуального отделения обособленных частей текста, то изображения могут внести в HTML-документ элемент иллюстративности. Своеобразная вставка изображения в документ уже рассматривалась при описании HTML-элемента BODY. Тогда указывалось изображение-фон страницы. Теперь пришло время научиться добавлять изображения непосредственно в текст HTML-документа.
Для вставки изображения в текст HTML-документа используется элемент IMG. Для задания этого HTML-элемента используется одиночный тег
• scr – задает URI изображения;
• alt – альтернативный текст, который отображается на месте изображения, если по каким-либо причинам само изображение не может быть показано;
• border – задает толщину границы вокруг рисунка в пикселах;
• align – определяет выравнивание изображения (описание возможных значений приведено в табл. 6.1);
• height – задает высоту изображения в пикселах;
• width – определяет ширину изображения в пикселах;
• vspace – задает величину свободного пространства между изображением и текстом сверху и снизу;
• hspace – определяет величину свободного пространства между изображением и текстом справа и слева;
• name – позволяет идентифицировать изображение так, что на него могут ссылаться различные сценарии (поддерживается для совместимости с более ранними версиями HTML, для идентификации изображений лучше использовать атрибут id).
Среди перечисленных атрибутов элемента IMG обязательным является только атрибут scr. Значение атрибута alt задается тогда, когда нужно, чтобы пользователь, браузер которого не показывает изображения на странице (например, если отображение рисунков отключено в настройках браузера), хоть что-то увидел на том месте, где должно быть изображение. Атрибуты height и width используются для того, чтобы браузер еще до загрузки изображения мог правильно расположить его в тексте. Кроме того, эти атрибуты можно применять для принудительного изменения (сжатия или увеличения) размера изображения.
Приведенный ниже пример 6.2 иллюстрирует использование атрибутов alt, width, height, а также атрибута border.
//-- Пример 6.2. Вставка изображений в HTML-документ --//
– небольшое изображение с рамкой.При обработке приведенного примера браузером получится документ, показанный на рис. 6.2 (предполагается, что браузер не может найти изображение image.gif).
Рис. 6.2. Вставка изображенийАтрибут align задает положение изображения в тексте. Он может принимать достаточно большое количество значений. Значения атрибута align и описание их воздействия на положения изображения приведены в табл. 6.1.
//-- Таблица 6.1. Положения изображения в тексте --//
Действие различных значений атрибута align на положение изображения приведено на рис. 6.3.
Рис. 6.3. Различное выравнивание изображенийДля большей наглядности и экономии места изображения показаны несколько уменьшенными (height=20 и width=23) и с использованием границы одинарной толщины (border=1).
Изображения-гиперссылки
Изображения, особенно небольшие пиктограммы и значки, часто используются в качестве графического представления гиперссылок. Создание изображения-гиперссылки выполняется очень просто: достаточно заключить HTML-элемент IMG внутрь элемента A, как показано ниже:Изображение-гиперссылка обычно обводится браузером рамкой такого же цвета, что и цвет текста обычной гиперссылки в соответствующем состоянии (посещенная, непосещенная или активная).
Изображения-карты
Рассмотрим еще один интересный способ использования изображений для навигации – создание изображений-карт. Карта – это заданный набор областей различной формы. Заданные области карты считаются активными, и браузер работает с ними практически аналогично тому, как он работает с изображениями-гиперссылками. Так вот, изображение-карта – это обычное изображение с наложенной на него картой активных областей. Карту можно использовать не только с изображениями, но здесь будет рассмотрено использование карт именно с ними – так нагляднее.Карта, используемая для изображения, может быть создана в любом документе, URI которого известен. Для создания карты используется элемент MAP (задается парными тегами ). Обычно для элемента MAP задается значение атрибута name – имя, которое используется для ссылок на созданную карту.
Внутри элемента MAP при помощи одиночных тегов (HTML-элемент AREA) задаются активные области карты. Для каждого элемента AREA могут задаваться следующие атрибуты:
• coords – координаты активной области (количество и значение зависят от типа области, заданного атрибутом shape);
• href – URI, на который указывает гиперссылка, ассоциированная с областью;
• nohref – булев атрибут, создает неактивную область (с областью ассоциируется пустая гиперссылка);
• shape – задает тип области, может принимать значения: rect (прямоугольник), circle (круглая область), poly (многоугольник) и default (по умолчанию используется вся область карты);
• alt – альтернативный текст;
• title – текст подсказки (отображается в виде всплывающей подсказки при наведении указателя мыши на область);
• tabindex – позиция элемента карты в порядке табуляции в HTML-документе (целое число от 0 до 32 767).
Задание набора значений атрибуту coords существенно отличается для областей различных видов. Значения задавать не нужно, если используется значение атрибута shape по умолчанию. Иначе при задании значений атрибуту coords нужно следовать следующим правилам.
• Если для атрибута shape установлено значение rect, то атрибуту coords задаются координаты верхнего левого и нижнего правого углов прямоугольника (например, coords="10,10,34,45").
• Если для атрибута shape установлено значение poly, то атрибуту coords задаются координаты всех вершин многоугольника. При этом лучше координаты первой вершины указать и в конце, а то вдруг разработчики браузера забыли создать автоматическое закрытие многоугольника (например, coords="10,10,34,45,50,20,10,10" – задание треугольной области).
• Если для атрибута shape установлено значение circle, то атрибуту coords задаются координаты центра и радиус окружности (например, coords="100,100,45"). Радиус можно задавать в процентах, тогда значение радиуса в пикселах будет вычислено браузером на основе размеров объекта, на который накладывается карта, при отображении HTML-документа.
В примере 6.3 приводится один из способов использования изображения-карты для осуществления навигации по документам.
//-- Пример 6.3. Использование изображения-карты --//
Здесь на изображение накладывается карта, состоящая из двух треугольников и одного прямоугольника. Обратите внимание на то, что для указания браузеру использовать карту в теге элемента IMG атрибуту usemap присвоено значение – URI карты. В данном случае используется карта, определенная в том же HTML-документе. Карта может быть определена и в другом файле того же сайта или вообще в файле, находящемся на другом сервере. Тогда нужно соответствующим образом изменить относительный URI (для файла того же сайта) или указать абсолютный URI HTML-документа, в котором определена нужная карта, например:
Изображение-карта из примера 6.3 выглядит так, как показано на рис. 6.4.
Рис. 6.4. Изображение-картаВ данном случае видно, что при наведении указателя мыши на элемент карты отобразилась подсказка для соответствующего элемента, а сам указатель имеет форму, сигнализирующую о том, что он находится над гиперссылкой.
6.3. Добавление фоновой музыки
Сейчас будет кратко рассмотрен HTML-элемент, позволяющий добавить музыку, которая будет проигрываться при открытии HTML-документа, – элемент BGSOUND. Он задается при помощи одиночного тега • src – URI аудиофайла (поддерживаются только форматы WAV и MID);
• loop – задает количество повторений (значения 0 или –1 используются при необходимости бесконечного воспроизведения, значения меньше –1 интерпретируются как 1), по умолчанию используется значение 1;
• volume – задает громкость воспроизведения; значения от –10 000 (минимальная громкость) до 0 (максимальная громкость, используется по умолчанию);
• balance – задает значение стереобаланса, принимает значения от –10 000 (левый баланс) до 10 000 (правый баланс); по умолчанию используется значение 0 (центральный баланс).
Ниже приведен пример 6.4, представляющий собой простейший HTML-документ, при открытии которого начинает проигрываться музыка из файла bgsound.wma.
//-- Пример 6.4. Проигрывание музыки при просмотре HTML-документа --//
Текст HTML-документа …
Как можно было убедиться, элемент BGSOUND позволяет очень легко добавить звуковое оформление HTML-документа. Жаль только, что этот элемент не является стандартным HTML-элементом. К тому же он поддерживается только браузером Internet Explorer.
6.4. Простое проигрывание видео
Браузер Internet Explorer поддерживает также ряд нестандартных дополнительных атрибутов элемента IMG, при помощи которых можно очень просто организовать проигрывание видео в окне браузера. Рассмотрим эти атрибуты:• dynsrc – URI видеофайла (поддерживается только стандарт AVI);
• loop – задает количество повторений видеоролика (полностью аналогичен атрибуту loop рассмотренного выше элемента BGSOUND).
Если задано значение атрибута src (адрес статичного изображения), то указанное изображение показывается во время загрузки видеофайла. Ниже приведен простой пример 6.5, содержащий HTML-документ, при загрузке которого начинается воспроизведение видеоролика из файла clip.avi, причем область воспроизведения занимает все окно браузера.
//-- Пример 6.5. Проигрывание видео в окне браузера --//
6.5. Внедрение объектов
В текст HTML-документа могут быть добавлены не только линейки, рисунки, видео и звук. Можно внедрить документы множества других приложений, построенных с использованием технологии OLE, а также элементы управления ActiveX.Для внедрения объектов в документ используется элемент OBJECT (задается парными тегами ). При внедрении объектов с помощью OBJECT используются следующие атрибуты:
• classid – при внедрении ActiveX-компонентов задает уникальный идентификатор класса (CLSID), строка вида clsid:xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx; при внедрении других объектов может содержать URI внедряемого объекта или другие сведения для идентификации объекта (см. приведенный далее пример с апплетом);
• codetype – если задан, то означает тип объекта, на который указывает classid; позволяет браузеру избежать загрузки объекта неподдерживаемого типа (значения см. у атрибута type);
• data – позволяет указать URI данных, необходимых для объекта; зависит от конкретного внедряемого объекта;
• type – тип данных, указанных в атрибуте data (так называемый MIME-тип);
• codebase – задает базовый URI, относительно которого разрешаются все относительные URI, задаваемые для этого элемента OBJECT; например, если codebase равен "http://www.someserver.com/images", то значение "img1.gif", заданное для атрибута data, означает " http://www.someserver.com/images/ img1.gif ";
• standby – задает текст, который отображается браузером до окончания загрузки объекта;
• height – задает высоту внедренного объекта;
• width – задает ширину внедренного объекта.
Для элемента OBJECT поддерживаются также другие атрибуты, задающие положение и оформление объекта, аналогичные атрибутам элемента IMG. Если не указать размер в атрибутах height и width, то внедренный объект будет невидимым. Текст, заключенный между тегами , выводится браузером в случае невозможности загрузить заданный объект.
При необходимости внедрения какого-либо конкретного ActiveX-компонента его CLSID можно посмотреть в документации для этого компонента реестра Windows или в разделе HKEY_CLASSES_ROOT\CLSID (например, CLSID компонента RichText (компонент для редактирования текста в RTF-формате, содержащего форматирование, рисунки и прочие объекты) равен 3B7C8860-D78F-101B-B9B5-04021C009402). Рассмотрим пример внедрения такого текстового поля в HTML-документ (пример 6.6).
//-- Пример 6.6. Внедрение компонента текстового поля в HTML-документ --//
Результат внедрения текстового поля RichText в HTML-документ (со вставленным фрагментом из редактора Microsoft Word) приведен на рис. 6.5.
Рис. 6.5. Внедренный компонент RichEditПри помощи элемента OBJECT документы некоторых распространенных приложений могут быть также легко внедрены в HTML-документ. Для этого достаточно указать значения атрибутов data и type, не используя атрибут classid. Например, для внедрения на страницу документа Microsoft Word достаточно следующего фрагмента (пример 6.7).
//-- Пример 6.7. Внедрение документа Microsoft Word --//
Результат внедрения документа Microsoft Word показан на рис. 6.6.
Рис. 6.6. Внедренный документ Microsoft WordТаким же образом можно внедрить видео, изображения и пр. Только нужно указать расположение внедряемого файла и его MIME-тип (список некоторых наиболее распространенных MIME-типов приведен в табл. 6.2).
//-- Таблица 6.2. Некоторые MIME-типы --//
До этого момента мы просто внедряли в документы объекты, не выполняя никаких настроек самих объектов. В случаях, когда объектам могут понадобиться значения специальных параметров (свойств объекта), может применяться HTML-элемент PARAM.Элемент PARAM задается одиночным тегом , который может использоваться только внутри элемента OBJECT. Элемент PARAM имеет следующие атрибуты:
• name – имя свойства; список доступных имен зависит от конкретного объекта;
• value – значение свойства;
• valuetype – тип значения свойства; для этого атрибута доступны следующие варианты значений:
· data – указывает, что value содержит значение, которое может быть представлено в виде строки и в таком виде передано внедренному объекту (значение по умолчанию);
· ref – показывает, что value содержит URI какого-то ресурса;
· object – указывает, что value содержит идентификатор (значение атрибута id) другого объекта, внедренного в страницу при помощи элемента OBJECT;
• type – если атрибуту valuetype присвоено значение ref, то задает тип (MIME-тип) ресурса, на который указывает заданный в атрибуте value URI.
Описать все возможные свойства объектов, доступных для внедрения в HTML-документы, просто невозможно. Таких объектов множество, да и каждый из них имеет свой собственный набор свойств. В любом случае, если вам понадобится использовать какой-то объект, придется разыскать или примеры его использования, или документацию. Здесь же мы ограничимся небольшим примером, а именно внедрением в документ Проигрывателя Window Media с заданием значений трех его свойств (пример 6.8).
//-- Пример 6.8. Внедрение Проигрывателя Windows Media --//
Как можно увидеть из текста примера, CLSID компонента проигрывателся равен 6BF52A52-394A-11d3-B153-00C04F79FAA6. В примере при помощи HTML-элемента PARAM задаются значения трех свойств:
• URL – файл для открытия в проигрывателе (в нашем случае это файл Clip.avi, расположенный в той же папке, что и HTML-документ);
• autoStart – установив значение в True, заставляем проигрыватель автоматически начинать воспроизведение;
• uiMode – установив значение этого свойства в none, убираем элементы управления проигрывателя, так что в документе будет показано только проигрываемое видео.
Кстати, этот пример хорошо показывает универсальность HTML-элемента OBJECT, позволяющую в реальной практике отказаться от использования нестандартных возможностей элементов IMG и BGSOUND, рассмотренных выше в этой главе.
Глава 7
Таблицы
Таблицы в том виде, в котором они реализованы в HTML, являются замечательным средством упорядочивания данных. Кроме группировки информации, таблицы предоставляют чрезвычайно полезные возможности при разработке дизайна HTML-документа. В данной главе рассмотрены оба способа использования таблиц. Но для начала нужно разобраться с тем, как добавлять таблицы в HTML-документ, а также рассмотреть возможности, предоставляемые HTML для работы с таблицами.
7.1. Структура простейшей таблицы
Таблица в HTML представляется множеством ячеек, которые заключены в строки. Совокупность же всех строк и образует целую таблицу. Для обозначения таблицы используется HTML-элемент TABLE, который задается парными тегами Строки таблицы задаются HTML-элементом TR (парные теги
Итак, учитывая приведенные выше сведения, можно добавить в документ простейшую таблицу, например, как показано ниже (пример 7.1).
//-- Пример 7.1. Создание простейшей таблицы --//
| 1 | 11 | 111 | 1111 |
| 2 | 22 | 222 | 2222 |
| 3 | 22 | 333 | 3333 |
| 4 | 44 | 444 | 4444 |
Таблица из приведенного примера выглядит так, как показано на рис. 7.1.
Рис. 7.1. Простейшая таблицаПриведенная на рисунке таблица выглядит не очень привлекательно. Но это всего лишь потому, что при ее создании не использовались никакие атрибуты элементов TABLE, TR и TD. Браузер применил к приведенной таблице настройки внешнего вида по умолчанию (даже не нарисовал ее границы).
7.2. Элементы таблицы
Теперь рассмотрим, какие же возможности настройки внешнего вида таблиц предоставляет HTML, а также некоторые дополнительные HTML-элементы, используемые при создании таблиц.
Заголовок таблицы
Для каждой таблицы имеется возможность создать заголовок, используя HTML-элемент CAPTION (задается парными тегами | 1 | 11 | 111 | 1111 |
| 2 | 22 | 222 | 2222 |
| 3 | 22 | 333 | 3333 |
| 4 | 44 | 444 | 4444 |
К тексту элемента CAPTION может применяться любой из рассмотренных в гл. 3 способов форматирования, чтобы хоть как-то можно было отличить заголовок таблицы от обычного текста. Таблица, приведенная в примере 7.2, выглядит так, как показано на рис. 7.2.
Рис. 7.2. Заголовок таблицыДля элемента CAPTION можно задать атрибут, определяющий положение заголовка относительно таблицы, – align. Этот атрибут может принимать следующие значения:
• top – заголовок показывается сверху таблицы (используется по умолчанию);
• bottom – под таблицей;
• left – слева от таблицы;
• right – справа от таблицы.
Здесь приведен официальный список (согласно спецификации HTML 4.01) функций, которые ассоциированы с каждым значением атрибута align. Однако в действительности поведение браузеров при отображении заголовка с заданным выравниванием может отличаться. Например, Internet Explorer при использовании значений left или right показывает заголовок таблицы все равно сверху, лишь изменяя горизонтальное выравнивание текста.
Параметры отображения таблицы
Многие параметры отображения таблицы задаются установкой соответствующих значений атрибутов элемента TABLE. Рассмотрим наиболее используемые атрибуты:• align – задает положение таблицы в окне браузера (left, right или center);
• bgcolor – задает цвет фона таблицы;
• border – задает толщину внешней границы таблицы;
• bordercolor – цвет границ таблицы (цвет внешней границы и цвет границ ячеек);
• cellpadding – размер пустого пространства между границами и содержимым ячеек таблицы;
• cellspacing – размер пустого пространства между ячейками таблицы;
• frame – задает отображаемые части внешней рамки таблицы, может принимать одно из перечисленных ниже значений;
· void – рамка не отображается (используется по умолчанию);
· above – отображается только верхняя граница;
· below – показывается только нижняя граница;
· hsides – отображаются верхняя и нижняя границы;
· vsides – показываются правая и левая границы;
· lhs – отображается только левая граница;
· rhs – показывается только правая граница;
· box – рамка отображается полностью;
· border – то же самое, что и box;
• rules – задает, какие именно границы между ячейками должны отображаться, может принимать одно из следующих значений:
· none – границы между ячейками не отображаются (используется по умолчанию);
· group – показывать границы только между группами строк и столбцов (группировка строк и столбцов будет рассмотрена ниже);
· rows – отображать только границы между строками таблицы;
· cols – показывать границы только между столбцами таблицы;
· all – отображать все границы между ячейками;
• height – задает рекомендуемую высоту таблицы;
• width – определяет рекомендуемую ширину таблицы.
Используя атрибуты border, frame и rules, следует помнить, что при установке значения атрибута border вручную значения атрибутов frame и rules считаются равными border и all соответственно (если другие значения этих атрибутов задаются вручную в том же элементе, то учитываются заданные вручную значения, а не border и all). Это значит, что для того чтобы просто показать рамку вокруг таблицы, достаточно задать только значение атрибута border.
В качестве значений атрибутов, задающих размер таблицы, можно использовать как абсолютные значения в пикселах, так и процентные значения, означающие долю от ширины окна браузера, занимаемую таблицей.
На рис. 7.3 показана все та же простейшая таблица. Однако теперь ее отображение настроено при помощи атрибутов HTML-элемента TABLE.
Рис. 7.3. Настроенная таблицаСогласитесь, что теперь эта таблица выглядит несколько симпатичнее. Кстати, она занимает сейчас ровно половину окна браузера. Для настройки отображения приведенной таблицы использовалось задание значений атрибутов следующим образом:
| 1 | 11 | 111 | 1111 |
| 2 | 22 | 222 | 2222 |
| 3 | 22 | 333 | 3333 |
| 4 | 44 | 444 | 4444 |
Таблица, формируемая браузером при обработке данного кода, показана на рис. 7.4.
Рис. 7.4. Настройка отображения строк таблицы Параметры отображения ячеек. Слияние ячеек
Теперь рассмотрим самое мощное средство настройки отображения данных таблицы – настройку параметров отображения отдельных ячеек таблицы. Итак, для задания внешнего вида содержимого ячейки используются следующие атрибуты HTML-элемента TD:• align – задает горизонтальное выравнивание текста ячейки, может принимать значения left, right, center или justify;
• valign – определяет вертикальное выравнивание текста ячейки, может принимать значения top, bottom, middle или baseline;
• bgcolor – задает цвет фона ячейки;
• bordercolor – определяет цвет рамки ячейки (если рамка отображается);
• height – позволяет указать рекомендуемую высоту ячейки;
• width – дает возможность указать рекомендуемую ширину ячейки;
• colspan – задает количество столбцов для слияния;
• rowspan – определяет количество строк для слияния.
Все указанные атрибуты, кроме двух последних, должны быть вам знакомы. Последние два атрибута элемента TD используются для объединения нескольких ячеек при создании более сложных таблиц. Рассмотрим реализацию именно объединения нескольких ячеек на примере таблицы отчетности некоторого предприятия (пример 7.4 демонстрирует также возможность применения форматирования к тексту ячеек таблицы).
//-- Пример 7.4. Таблица с объединенными ячейками --//
| Филиал\Период | 3 квартал | 4 квартал | ||||
| Июль | Август | Сентябрь | Октябрь | Ноябрь | Декабрь | |
| Филиал 1 | 123123 | 323233 | 323453 | 231423 | 323212 | 243673 |
| Филиал 2 | 223523 | 225243 | 314423 | 212445 | 373812 | 274673 |
| Филиал 3 | 183123 | 186834 | 323453 | 231423 | 323212 | 243673 |
| Филиал 4 | 125163 | 334343 | 123553 | 167423 | 254412 | 132367 |
Внешний вид таблицы представлен на рис. 7.5.
Рис. 7.5. Таблица с объединенными ячейкамиВообще, задание параметров отображения каждой ячейки таблицы вручную является операцией довольно трудоемкой и применяется в основном при использовании таблиц для формирования внешнего вида HTML-документа. Исключение могут составить особые случаи, к которым, например, относится необходимость слияния только некоторых ячеек таблицы.
В примере 7.4 использовалось форматирование текста внутри ячеек для выделения тех из них, которые относят к шапке таблицы. Такое выделение ячеек шапки приведено только в качестве примера и является нежелательным в реальной практике. Для выделения заголовочных ячеек (например, относящихся к шапке таблицы) используется HTML-элемент TH, рассматриваемый далее. Кроме того, слияние ячеек в некоторой степени можно реализовать, применяя другие средства HTML, – группировку строк и столбцов.
В этой главе говорится только о тексте внутри ячеек. Но это совсем не значит, что в ячейках таблиц могут содержаться только текстовые данные. Каждая ячейка таблицы может включать графику, внедренные объекты, списки, вложенные таблицы – практически все, что можно поместить в тело HTML-документа. Именно возможность помещения в ячейки таблицы любых данных используется в примере описываемой в конце главы страницы, целиком построенной на использовании таблицы.
Ячейки заголовков
В предыдущем примере для визуального выделения ячеек заголовков таблицы использовалось форматирование текста внутри HTML-элемента TD вручную. Как можно было заметить, такой способ выделения ячеек является отнюдь не самым удобным. Да и к тому же использовать такое форматирование текста крайне не рекомендуется.Чтобы избавиться от необходимости задания текста заголовочных ячеек вручную (да и для того, чтобы лучше структурировать содержимое HTML-документа), можно использовать элемент TH. Этот HTML-элемент задается парными тегами
Итак, для использования возможностей HTML-элемента TH рассмотренный ранее пример 7.4 можно переписать следующим образом (многоточие – строки с данными, аналогичными из примера 7.4) (пример 7.5).
//-- Пример 7.5. Таблица с заголовочными ячейками --//
| Филиал\Период | 3 квартал | 4 квартал | ||||
|---|---|---|---|---|---|---|
| Июль | Август | Сентябрь | Октябрь | Ноябрь | Декабрь … | |
При обработке браузером приведенного HTML-документа получится результат, аналогичный показанному на рис. 7.5.
7.3. Структурирование таблицы
Кроме рассмотренных ранее возможностей по манипулированию таблицами, HTML поддерживает разбиение таблицы на логически цельные части: группы строк и столбцов. Для отдельных частей таблицы можно устанавливать общие параметры отображения данных, которые автоматически применяются браузером при отображении таблицы. Кроме того, в некоторых случаях структурирование таблицы позволяет сделать возможным отображение таблицы по частям по мере ее загрузки (если, конечно, это поддерживается браузером). Последняя возможность очень пригодится при использовании таблиц для формирования дизайна HTML-документа.
Группировка строк
В любой добавляемой в HTML-документ таблице можно выделить три логически цельных части: шапка, тело таблицы и «футер» (нижняя часть таблицы, footer). Эти части состоят из строк, то есть строки таблицы можно сгруппировать в шапку, тело и футер.Рассматриваемые части таблицы задаются следующим образом: шапка обозначается HTML-элементом THEAD ( и ), тело задается элементом TBODY ( и ), а футер – элементом TFOOT ( и ). Все закрывающие теги являются необязательными. Внутри этих HTML-элементов (между задающими их тегами) помещаются строки, относящиеся к соответствующим частям таблицы (пример 7.6).
//-- Пример 7.6. Задание частей таблицы --//
Данные таблицы задаются с использованием элементов TH и TD. В приведенном примере закрывающие теги элементов THEAD, TBODY и TFOOT можно опустить. Задавая различные значения атрибутам align, valign, bgcolor в открывающих тегах рассматриваемых HTML-элементов, можно управлять отображением сразу всех ячеек той или иной части таблицы.
Любая таблица может содержать несколько частей, обозначенных элементом TBODY. Нужно также отметить, что принадлежность строк к телу таблицы подразумевается по умолчанию, то есть если в таблице есть строки, перед определением которых в тексте HTML-документа не было ни , ни , то такие строки считаются заданными внутри элемента TBODY.
Чтобы продемонстрировать использование группировки строк таблицы на практике, можно модифицировать таблицу из примера 7.4 (пример 7.7).
//-- Пример 7.7. Группировка строк таблицы --//
| Филиал\Период | 3 квартал | 4 квартал | ||||
|---|---|---|---|---|---|---|
| Июль | Август | Сентябрь | Октябрь | Ноябрь | Декабрь | |
| Филиал 1 | 123123 | 323233 | 323453 | 231423 | 323212 | 243673 |
| Филиал 2 | 223523 | 225243 | 314423 | 212445 | 373812 | 274673 |
| Филиал 3 | 183123 | 186834 | 323453 | 231423 | 323212 | 243673 |
| Филиал 4 | 125163 | 334343 | 123553 | 167423 | 254412 | 132367 |
| Всего: | 654932 | 1069653 | 1084882 | 842714 | 1274648 | 894386 |
Таблица, задаваемая в примере 7.7, выглядит так, как показано на рис. 7.6.
Рис. 7.6. Таблица со сгруппированными строкамиЧтобы подчеркнуть отделение частей таблицы друг от друга, задано отображение границ только между группами строк и столбцов (см. атрибут rules элемента TABLE). В приведенной таблице сгруппированы лишь строки, поэтому и отображаются только горизонтальные границы.
Описание и группировка столбцов
Помимо группировки строк таблицы, в HTML присутствуют элементы, позволяющие определять столбцы и формировать группы столбцов: HTML-элементы COL и COLGROUP. Если элементы COL или COLGROUP используются, то они должны следовать до элементов, группирующих строки таблицы (или до первой строки данных при отсутствии явной группировки строк). Сначала будет рассмотрено использование элемента COL.Итак, HTML-элемент COL задается одиночным тегом
• align – задает горизонтальное выравнивание текста ячеек столбца (столбцов), может принимать значения left, right, center или justify;
• valign – задает вертикальное выравнивание текста ячеек столбца (столбцов), может принимать значения top, bottom, middle или baseline;
• bgcolor – задает цвет фона ячеек столбца (столбцов);
• width – позволяет указать ширину столбца (столбцов);
• span – задает количество столбцов, к которым применяются параметры, заданные в описанных выше атрибутах (по умолчанию имеет значение 1).
Использование элемента COL не позволяет создавать группы столбцов – для этого используется HTML-элемент COLGROUP. Однако использование элемента COL значительно облегчает настройку внешнего вида таблицы, позволяя задавать одинаковые настройки для нескольких столбцов одновременно. Например, чтобы создать таблицу, показанную на рис. 7.7, пришлось бы задавать значения атрибутов bgcolor почти для всех ячеек таблицы.
Рис. 7.7. Раскрашенная таблицаПри использовании элемента COL все гораздо проще (пример 7.8).
//-- Пример 7.8. Задание параметров отображения столбцов --//
| Филиал\Период | 3 квартал | 4 квартал | ||||
|---|---|---|---|---|---|---|
| Июль | Август | Сентябрь | Октябрь | Ноябрь | Декабрь | |
| Филиал 1 | 123123 | 323233 | 323453 | 231423 | 323212 | 243673 |
| Филиал 2 | 223523 | 225243 | 314423 | 212445 | 373812 | 274673 |
| Филиал 3 | 183123 | 186834 | 323453 | 231423 | 323212 | 243673 |
| Филиал 4 | 125163 | 334343 | 123553 | 167423 | 254412 | 132367 |
| Всего: | 654932 | 1069653 | 1084882 | 842714 | 1274648 | 894386 |
В приведенном примере, кроме задания цвета столбцов, указание значения left атрибута align для первого столбца избавило от необходимости задавать для первой ячейки каждой строки выравнивание текста по левому краю, как это было в предыдущих примерах.
Обратите внимание, что в примере 7.8 также использовалось задание цвета двух первых и последней строки при помощи атрибута bgcolor элемента TR. В этом и подобных случаях при отображении каждой ячейки браузеры выбирают параметры в следующем порядке.
1. Атрибуты элементов TD и TH.
2. Атрибуты элемента TR.
3. Атрибуты элемента COL.
4. Атрибуты элемента COLGROUP.
5. Атрибуты элементов THEAD, TFOOT, TBODY.
6. Атрибуты элемента TABLE.
Приведенный список отражает приоритет, с которым используются значения каждого атрибута HTML-элементов, описывающих данные таблицы. Проще всего это пояснить на примере 7.9.
//-- Пример 7.9. Приоритеты элементов при отображении ячеек --//
| Ячейка 1 | Ячейка 2 |
В данном случае ячейка с текстом Ячейка 1 будет иметь желтый фон, выравнивание по правому краю, ширину 300 пикселов. Ячейка с текстом Ячейка 2 будет отображаться аналогично первой, но с зеленым фоном.
Следует сказать несколько слов о возможностях задания значения атрибута width. Итак, значением атрибута может быть либо абсолютная ширина ячеек в пикселах, либо доля от ширины таблицы (в процентах), либо относительный или пропорциональный размер ячеек. Для задания пропорционального размера используется запись вида width = "i*", где i является целым положительным числом ("*" интерпретируется как "1*"). Рассмотрим, каким образом по пропорциональному размеру определяется абсолютный размер. Пусть есть столбцы, заданные в следующем виде:
…
…
Кроме того, пусть таблица имеет ширину 100 пикселов. Сначала вычисляются процентные размеры, а потом пропорциональные, поэтому третий столбец таблицы будет иметь ширину 30. Оставшиеся 70 пикселов распределяются между первым и вторым столбцами в соотношении 2:3, то есть ширина этих столбцов получится равной 70 : 5 × 2 = 28 и 70 : 5 × 3 = 42 соответственно.
Теперь, после достаточно долгого изучения HTML-элемента COL, рассмотрим, как можно создавать группы столбцов таблицы с использованием элемента COLGROUP. Элемент COLGROUP задается парными тегами
Элемент COLGROUP может одновременно с группировкой задавать одинаковые параметры отображения всех столбцов группы аналогично тому, как это делается с использованием элемента COL. Однако если требуется задать различные значения атрибутов для разных столбцов группы, то нужно включить внутрь элемента COLGROUP описания всех столбцов таблицы с помощью элементов COL.
Например, если нужно создать группу из десяти столбцов, имеющих одинаковую ширину 30, а также одинаковые остальные параметры, то это можно сделать так:
или
или
…
В первом случае использовалась возможность задания параметров всех столбцов группы через установление соответствующих значений атрибутов элемента COLGROUP. Во втором случае внутри группы были явно определены десять столбцов. Использование третьего варианта в данном примере является нерациональным, хотя и допустимым.
Без явного определения столбцов не обойтись в том случае, если нужно включить в группу столбцы с различными параметрами отображения (например, с различным выравниванием). Допустим, нужно создать группу из десяти столбцов: выравнивание первого столбца левое, со второго по восьмой – правое, девятого и десятого – по центру. Группу столбцов наиболее кратко можно задать следующим образом:
Напоследок рассмотрим, как отразится наличие групп столбцов на отображении таблицы браузером. Можно дополнить таблицу из примера 7.7 группировкой столбцов следующим образом (оставлены только части текста HTML-документа, отличные от приведенного в примере 7.7) (пример 7.10).
//-- Пример 7.10. Группировка столбцов --//
| Филиал 1… |
| Филиал 2… |
| Филиал 3… |
| Филиал 4… |
| Всего:… |
Теперь таблица примет окончательный вид, показанный на рис. 7.8.
Рис. 7.8. Таблица со сгруппированными столбцами и строками Особенности задания ширины столбцов
В начале главы было сказано, что структурирование может позволить браузеру не дожидаться загрузки всей таблицы, а отображать ее частями по мере получения данных. Теперь пришло время уточнить, какие параметры и как должны быть заданы для того, чтобы браузер мог начать рисовать таблицу по частям.Дело в том, что самой трудной задачей при отображении таблицы является определение ширины как таблицы в целом, так и каждого столбца таблицы, а также определение количества столбцов в ней. Если ширина и количество столбцов не указаны явно, то браузер вынужден дожидаться загрузки всей таблицы, после чего определяется количество ячеек в самой длинной строке – количество столбцов. Ширина каждого столбца выбирается такой, чтобы поместить содержимое самой широкой ячейки этого столбца.
Чтобы браузер мог начать отображение таблицы по частям, он должен до получения первой строки с данными ячеек обладать сведениями о количестве и абсолютной (в пикселах) ширине каждого столбца, о созданных группах столбцов. Для этого нужно определить все столбцы с использованием COL или COLGROUP, а также указать ширину таблицы и ее столбцов так, чтобы абсолютные значения могли быть однозначно определены, например:
В этом случае точно известно, что таблица, содержащая два столбца, будет шириной 300 пикселов. На первый столбец приходится 30 пикселов и, соответственно, на второй – оставшиеся 270.
Можно также задавать для таблицы и ее столбцов процентную ширину, но это нужно делать внимательно, чтобы, зная размер окна браузера, можно было всегда однозначно определить точную ширину каждого столбца.
7.4. Использование таблиц для формирования дизайна HTML-документа
Ранее были рассмотрены возможности использования таблиц только по своему прямому назначению – для группировки данных. Теперь пришло самое время рассказать о применении таблиц для формирования дизайна HTML-документов. Здесь перед автором документа открываются поистине огромные возможности: точное позиционирование и упорядочивание элементов страницы, создание областей переменной или постоянной ширины и многие другие возможности, позволяющие сделать документ не только информативным, но и приятным глазу пользователя, удобным в использовании.Использование таблиц в данном ключе будет рассмотрено на примере создания страницы, дизайн которой целиком на них основан. Создаваемая страница будет иметь элементы, расположенные так, как показано на рис. 7.9, и будет как бы электронной копией этой главы.
Рис. 7.9. Расположение элементов страницыДля реализации задуманного можно использовать две таблицы. Первая таблица (пусть внешняя) имеет два столбца и две строки. Во вторую ячейку первой строки таблицы нужно поместить вложенную таблицу, содержащую одну строку из двух ячеек: для названия раздела и для рисунка-логотипа (см. рис. 7.9). В первой ячейке второй строки внешней таблицы помещаются гиперссылки на файлы примеров из этой главы книги, а во вторую ячейку помещается собственно текст.
С учетом всего вышеизложенного можно написать следующий HTML-документ (пример 7.11).
//-- Пример 7.11. Страница на таблицах --//
| |||
| | Таблицы в том виде, в котором они реализованы в HTML, Структура простейшей таблицыТаблица в HTML представляется множеством ячеек, которые заключены в строки. Совокупность же всех строк и образует целую таблицу. Для обозначения таблицы используется HTML- Строки таблицы задаются HTML-элементом TR (парные теги |
Страница из приведенного примера выглядит так, как показано на рис. 7.10.
Рис. 7.10. Страница, построенная на таблицахМожно сказать, что получилась хотя и простая, но довольно симпатичная страничка. При разработке данного примера ставилась задача подчеркнуть, какие огромные возможности предоставляются автору при разработке дизайна HTML-документов, построенного на использовании таблиц.
Попробуйте открыть любую прилично выглядящую страницу при помощи того же редактора Блокнот, и почти наверняка вы увидите, что для ее создания использовались всего лишь таблицы в сочетании со списками и изображениями. Все, с чем «поиграли» авторы, – это умело сгруппировали ячейки таблиц, раскрасили их и добавили в нужные ячейки списки, текст и рисунки. Вот она – настоящая мощь такого, казалось бы, простого средства, как таблицы.
Глава 8
Фреймы
Эта глава посвящена одному из самых интересных и удобных способов организации информации на веб-страницах: использованию фреймов. Если раньше в этой книге в основном рассматривалось создание отдельных HTML-документов (страниц сайта), то в примерах данной главы упор делается на создании сайтов, состоящих из нескольких страниц. Это обусловлено тем, что само по себе использование фреймов предполагает наличие нескольких страниц, одновременно показываемых пользователю.
8.1. Понятие фрейма
Прежде чем использовать фреймы на практике, не мешало бы узнать, что это такое, а также чем выгодно использование фреймов для организации информации на страницах сайта по сравнению с теми же таблицами.Во всех примерах ранее в книге рассматривалось выравнивание текста, графики, таблицы и прочего наполнения HTML-документов в окне браузера. При этом в нем могло отображаться содержимое только одного документа. Использование фреймов позволяет разбить окно браузера на несколько частей, в которых могут отображаться разные HTML-документы. Например, так, как показано на рис. 8.1.
Рис. 8.1. Три документа в одном окнеПри этом содержимое каждого документа выравнивается относительно своего собственного окна – фрейма. Теперь представьте себе, что в левом верхнем фрейме находятся ссылки на ресурсы сайта, в левом нижнем – какая-то рекламная или другая информация, в правом большом фрейме помещается текст. Допустим, при навигации по сайту изменяется только текст, отображаемый в правом фрейме. В этом случае использование фреймов позволяет следующее.
• Прокручивать содержимое одних фреймов независимо от содержимого других.
• Осуществлять переход между страницами сайта, загружая содержимое только в правый фрейм. Это экономит время пользователя, так как статичное содержимое сайта загружается с сервера только один раз.
Теперь, после знакомства с фреймами, можно рассмотреть, как выполняются создание и настройка сайтов с использованием фреймов.
8.2. Создание набора фреймов
Даже самый простой сайт, показанный на рис. 8.1, состоит из четырех HTML-документов. Содержимое трех из них показывается в окне браузера. Четвертый документ, который и нужно открывать браузером, содержит описания фреймов, на которые разбивается окно, а также включает в себя указания браузеру, откуда загружать страницы в созданные фреймы. Содержимое HTML-документа приведено в примере 8.1.//-- Пример 8.1. Файл с описанием фреймов --//
Здесь можно увидеть два новых HTML-элемента: FRAMESET и FRAME. Первый из них используется для разбиения окна браузера или окна родительского фрейма на отдельные фреймы. Элемент FRAMESET задается парными тегами . При разбиении окна на фреймы используются следующие атрибуты элемента FRAMESET:
• cols – список значений ширины создаваемых фреймов (могут использоваться как абсолютные значения в пикселах, так и процентные, а также пропорциональные, см. пример 8.1);
• rows – список значений высоты создаваемых фреймов (значения аналогичны значениям атрибута cols).
Можно задавать значения только одного из атрибутов. При этом если задано значение только атрибута col, то созданные фреймы будут занимать всю высоту окна браузера. Если задано значение только атрибута rows, то созданные фреймы будут занимать всю ширину окна браузера. Если заданы значения обоих атрибутов, то фреймы создаются слева направо и сверху вниз.
Между тегами должны содержаться либо описания каждого фрейма с использованием HTML-элемента FRAME, либо определения вложенных фреймов. Рассмотрим сначала описание фреймов при помощи элемента FRAME. Этот HTML-элемент задается при помощи одиночного тега . Ниже приведены его атрибуты, используемые чаще всего:
• name – задает имя фрейма, позволяя использовать его в качестве целевого фрейма в гиперссылках;
• src – URI документа, содержимое которого отображается в окне фрейма;
• noresize – булев атрибут, блокирует возможность изменения размера окна фрейма;
• scrolling – позволяет показать или убрать полосы прокрутки в окне фрейма, может принимать значения yes (показать полосы прокрутки), no (не отображать полосы прокрутки) или auto (используется по умолчанию: показать полосы прокрутки только в том случае, если содержимое не умещается в окне фрейма);
• frameborder – указывает, должен ли браузер показывать рамку окна фрейма, может принимать значения 1 (рамка показывается, как на рис. 8.1, используется по умолчанию) или 0 (рамка не показывается);
• marginwidth – задает расстояние между границами фрейма и его содержимым по горизонтали (в пикселах);
• marginheight – задает расстояние между границами и содержимым фрейма по вертикали.
Ранее было затронуто понятие вложенных фреймов. Теперь пришло время рассмотреть вложение фреймов подробно. В HTML фреймы могут вкладываться друг в друга любое количество раз. Это находит применение тогда, когда нужно разбить окно браузера, например так, как сделано на рис. 8.1. Изучите внимательно следующий фрагмент.
Здесь создается внешний набор из двух фреймов, занимающих всю высоту окна браузера. При этом в левом фрейме внешнего набора создается еще один набор фреймов. Нужно заметить, что блок аналогичен одному элементу FRAME (описывает содержимое одного фрейма из внешнего набора). Анализируя приведенный выше фрагмент, можно однозначно сказать, что левый фрейм внешнего набора разбивается, а в правый фрейм загружается содержимое документа page3.html.
Существует еще одно примечательное отличие документа, описывающего набор фреймов, – в нем нет тела (элемента BODY). В таком документе не допускается наличие содержимого, кроме определения набора фреймов.
8.3. Новые возможности гиперссылок
Практически в самом начале этой главы было сказано, что с помощью фреймов можно организовать навигацию по сайту таким образом, что загружаться с сервера будет только необходимая информация, а все статичные части (например, список ссылок сайта, название сайта и т. д.) не будут подвергаться изменениям или перезагрузке с сервера. Такая возможность достигается указанием целевого фрейма для гиперссылок, при переходе по которым необходимо изменять только содержимое одного из фреймов.
Целевой фрейм отдельных гиперссылок
Для указания целевого фрейма каждой гиперссылки, то есть фрейма, в котором будет показано содержимое открываемого по ссылке HTML-документа, используется атрибут target. Значением этого атрибута может быть либо имя нужного фрейма (значений атрибута name этого фрейма), либо одно из следующих предопределенных строковых значений:• _blank – открыть документ в новом окне;
• _self – открыть документ в том же окне, где находится гиперссылка;
• _parent – открыть документ в окне родительского фрейма (аналогично _self, если фрейм, в котором находится гиперссылка, не имеет родителя);
• _top – заменить содержимое окна браузера содержимым открываемого документа, отменяя все созданные ранее фреймы.
Атрибут target поддерживается для всех HTML-элементов, позволяющих создавать гиперссылки: A, LINK, AREA.
Теперь для закрепления полученных знаний переделаем документ из примера 7.11 предыдущей главы, поместив ссылки, название и текст сайта в отдельные фреймы.
Документ с описанием набора фреймов будет иметь имя index.html. Его содержимое приведено в примере 8.2.
//-- Пример 8.2. Файл с описанием набора фреймов --//
В приведенном выше примере имя назначено только одному фрейму (правому нижнему). Именно в этом фрейме и будет отображаться содержимое документов.
В файле links.html находится документ с гиперссылками на файлы примеров (в него также добавлена ссылка на стартовую страницу). Предполагается, что файлы примеров расположены в папке Examples. Ниже приводится содержимое файла links.html (обратите внимание на задание значения атрибута target гиперссылок) (пример 8.3).
//-- Пример 8.3. Файл с гиперссылками --//
Пример 7.10
В файле title.html помещен заголовок сайта (вместе с гипотетическим логотипом), который показывается в соответствующем фрейме (пример 8.4).
//-- Пример 8.4. Файл для фрейма с заголовком сайта --//
7. Таблицы |  |
Как можно увидеть из приведенного текста HTML-документа (см. пример 8.4), для достижения приемлемого расположения рисунка-логотипа пришлось прибегнуть к использованию таблицы.
В рассматриваемом примере сайта используется еще один файл – start.html. В этом файле помещена стартовая страница сайта. Содержимое этого файла может быть любым. При написании примера в файл start.html была помещена часть текста гл. 7. Из-за экономии места книги содержимое этого файла не приводится.
После того как все файлы сайта созданы, можно полюбоваться результатом (рис. 8.2).
Рис. 8.2. Сайт, созданный с использованием фреймов Целевой фрейм по умолчанию
Напоследок рассмотрим, как можно уменьшить объем текста HTML-документа при использовании для многих гиперссылок одного и того же фрейма в качестве целевого. Еще раз взгляните на текст примера 8.3. Для каждой гиперссылки из этого примера задано одно и то же значение атрибута target. Чтобы избавиться от необходимости много раз задавать его, можно назначить целевой фрейм по умолчанию.Для задания целевого фрейма по умолчанию используется HTML-элемент BASE (одиночный тег
С учетом сказанного пример 8.3 можно переписать следующим образом (пример 8.5).
//-- Пример 8.5. Использование целевого фрейма по умолчанию --//
8.4. Элемент NOFRAMES
Фреймы являются весьма привлекательным средством оформления сайтов, это должно было стать очевидным из приведенных ранее примеров. Однако фреймы в HTML появились не сразу, да и долгое время они не были стандартизированы, поэтому до сих пор обработка и представление документов с фреймами различными браузерами могут существенно отличаться. Кроме того, у достаточно большого количества пользователей до сих пор могут стоять старые версии браузеров, не поддерживающие фреймов вообще.Если важно, чтобы при просмотре сайта, использующего фреймы, пользователь хоть что-то увидел, то следует использовать HTML-элемент NOFRAMES. Этот элемент задается парными тегами
Между тегами элемента NOFRAMES помещается HTML-текст, который браузер показывает в том случае, если он не поддерживает фреймы (или если пользователь отключил в браузере поддержку фреймов). Если браузер в состоянии показать фреймы, то текст между тегами элемента NOFRAMES игнорируется. Текст между тегами
Очевидно, что с помощью элемента NOFRAMES можно создавать гораздо лучше переносимые сайты, особенно если позаботиться о том, чтобы при невозможности отображения фреймов никакая важная информация не была потеряна. Для рассмотренного ранее сайта можно создать версию, не использующую фреймы (выполненную, например, с использованием только таблиц), а внутри элемента NOFRAMES поместить информационное сообщение и ссылку на эту версию сайта (пример 8.6).
//-- Пример 8.6. Использование элемента NOFRAMES --//
8.5. Плавающие фреймы
Кроме обычных фреймов, рассмотренных ранее, HTML допускает использование так называемых плавающих фреймов. Плавающие фреймы выглядят точно так же, как и внедренные HTML-документы: показываются браузером в окне, расположенном прямо в тексте (рис. 8.3).
Рис. 8.3. Внешний вид плавающего фреймаДля создания плавающих фреймов используется HTML-элемент IFRAME (задается при помощи парных тегов ). Настройка плавающего фрейма осуществляется при помощи следующих атрибутов:
• src – URI HTML-документа, отображаемого в окне фрейма;
• frameborder – режим отображения границы фрейма, может принимать значения 0 (не показывать границу) или 1 (показывать границу);
• scrolling – режим отображения полос прокрутки содержимого фрейма, может принимать значения no (не показывать полосы прокрутки), yes (показывать полосы прокрутки) или auto (используется по умолчанию, показывать полосы прокрутки, только если содержимое не помещается);
• marginwidth – задает расстояние между границами фрейма и его содержимым по горизонтали (в пикселах);
• marginheight – задает расстояние между границами и содержимым фрейма по вертикали;
• align – задает положение плавающего фрейма в тексте, может принимать значения left, right и center;
• width – задает ширину окна плавающего фрейма, значение может быть как абсолютным (в пикселах), так и процентным;
• height – задает высоту окна плавающего фрейма.
Текст между тегами отображается браузером только в случае невозможности отобразить сам плавающий фрейм.
В качестве примера использования элемента IFRAME ниже приведен текст HTML-документа, внешний вид которого показан на рис. 8.3 (пример 8.7).
//-- Пример 8.7. Документ с плавающим фреймом --//
Плавающий фрейм выглядит следующим образом:
8.6. Замена фреймов внедренными HTML-документами
Если по каким-то причинам у вас нет возможности использовать фреймы, но все же хочется сохранить интерфейс сайта в том же виде, каким он был бы при использовании фреймов, можно прибегнуть к использованию HTML-элемента OBJECT. Взгляните на текст примера 8.8. Здесь для создания аналога плавающего фрейма, показанного на рис. 8.3, используется элемент OBJECT.//-- Пример 8.8. Замена плавающего фрейма элементом --//
Внедренный HTML-документ выглядит так:
Результат внедрения в HTML-документ еще одного HTML-документа приведен на рис. 8.4. Как видите, внедрение объекта по виду практически не отличается от добавления плавающего фрейма.
Рис. 8.4. Внедренный документ в роли плавающего фреймаПравда, есть в рассматриваемой здесь замене один подвох. Средствами только лишь HTML не получится использовать область внедренного документа как целевой фрейм для гиперссылок, так что область применения описанного здесь решения гораздо уже, чем область возможного применения фреймов.
Глава 9
Формы
Формы – замечательная возможность HTML, позволяющая с привлечением довольно небольшого количества усилий разработчика организовать взаимодействие с пользователями программ, работающих на удаленных серверах Сети.
Возможно, вам не раз приходилось заполнять анкеты на сайтах, например при регистрации ящика электронной почты. Если приходилось, то вспомните, что данные вы вводили прямо в окне браузера. После ввода данных нажимали кнопку типа Отправить. Далее браузер упаковывал и отсылал введенные вами данные на сервер, где их обрабатывало специализированное приложение (CGI-приложение). Так вот, формы нужны как раз для того, чтобы можно было организовать ввод данных от пользователя. HTML-документы с формами отличаются от обычных документов только наличием различных элементов управления: полей ввода текста, флажков, кнопок и др. (см. любое окно Windows или рис. 9.1).
Рис. 9.1. Пример HTML-документа с формойВыше было сказано, что данные, введенные пользователем в форму, обрабатываются CGI-приложениями, работающими на сервере. Подробное рассмотрение этих приложений выходит за рамки книги. Здесь же стоит сказать, что CGI-приложение – это обычное приложение (программа), запущенное на сервере и способное получать данные, отправленные с использованием CGI (Common Gateway Interface). Отсюда, собственно, и название этого класса приложений. Вообще, такое приложение может быть реализовано как угодно: на Java, сценарием PHP, JSP или ASP и т. д. Общее, что такие приложения выполняют, – прием запроса (набора значений полей формы) с некоторой служебной информацией и передача в ответ HTML-документа, являющегося результатом обработки принятого запроса.
Данные, введенные в форму, в некоторых случаях могут обрабатываться и на стороне клиента с помощью сценариев. Однако сценарии будут рассмотрены позже. Далее же в этой главе описываются создание и настройка форм, данные которых предназначены для отправки CGI-приложению.
9.1. Создание формы
Для вставки формы в HTML-документ используется элемент FORM. Он задается парными тегами . Между этими тегами помещаются описания элементов управления формы. Здесь также может быть помещен и другой текст с использованием разметки средствами HTML. Этот текст обычно используется для пояснения, какие данные и в какой элемент управления нужно вводить. При создании формы используются следующие атрибуты элемента FORM:• action – обязательный для каждой формы параметр, URI программы-обработчика данных формы;
• method – задает способ отправки данных, введенных в форму, может принимать значения get (используется по умолчанию) или post;
• enctype – задает тип данных формы, если используется метод отправки post; по умолчанию имеет значение application/x-www-form-urlencoded; при необходимости передачи файлов используется значение multipart/form-data;
• accept-charset – используется при передаче файлов, позволяет указать, какие кодировки используются для каждого из файлов (список строковых значений – названий кодировок), по умолчанию используется значение UNKNOWN (приложение на сервере должно само определять кодировки);
• accept – описывает типы файлов (MIME-типы), передаваемые серверу; если этот параметр не использовать, то серверное приложение должно уметь само определять типы передаваемых ему файлов.
Пример описания формы:
Перед тем как приступить к рассмотрению элементов управления, которые можно поместить на форму, приведу несколько слов о методах отправки данных форм: для чего они нужны и чем отличаются. Итак, метод get часто используется для отправки небольших объемов данных, для которых достаточно набора символов кодировки ASCII. При этом данные формы присоединяются к строке URI, заданной в action формы. Для отделения данных от URI используется символ ?. Точно таким же образом вы передавали данные почтовой программе при рассмотрении гиперссылок в гл. 5.
В отличие от get, метод post позволяет передавать CGI-приложению практически любые данные. При использовании метода post браузер отправляет приложению не строку URI с присоединенными данными, а по специальным правилам упаковывает данные формы и только после этого отправляет их CGI-приложению. Однако для того, чтобы с использованием метода post можно было пересылать бинарные или текстовые данные, для которых недостаточно символов кодировки ASCII, нужно указывать значения атрибута enctype элемента FORM равным multipart/form-data.
9.2. Элементы управления формы
Ранее были рассмотрены вопросы по созданию и настройке форм. Однако данные в формах пользователь вводит с помощью элементов управления. Теперь самое время перейти к рассмотрению того, какие элементы управления можно помещать на форму и как эти элементы управления выглядят и функционируют.
Стандартные элементы управления
Стандартными являются все элементы управления, которые можно поместить на HTML-форму. Просто нужно как-то объединить и назвать элементы управления, которые используются чаще всего: однострочное текстовое поле, поле для ввода пароля, флажки, переключатели, кнопки (как пользовательские, так и выполняющие стандартные действия), поля имен файлов. Все упомянутые элементы управления отображаются браузером Internet Explorer так, как показано на рис. 9.2.
Рис. 9.2. Стандартные элементы управленияДля обозначения всех этих элементов управления используется один HTML-элемент – INPUT. Элемент задается одиночным тегом и имеет следующие атрибуты:
• type – принимает строку, задающую тип элемента управления (по умолчанию используется строка text, и создается, соответственно, поле для ввода текста), возможные значения и специфика работы соответствующих элементов управления рассмотрены далее;
• name – используется для задания имени элементу управления (строка, которая, помимо идентификации элемента управления, добавляется в данные, отсылаемые серверу);
• value – начальное значение для полей ввода текста и полей для указания имен файлов, также используется как надпись таких элементов управления, как кнопки; необязательно для всех элементов управления, кроме флажков и переключателей;
• checked – булев атрибут, если он установлен, то флажок или переключатель считается (и отображается браузером) установленным (см. рис. 9.1);
• disabled – булев атрибут, установка которого не позволяет пользователю работать с элементом управления;
• readonly – булев атрибут, позволяет запретить изменение состояния элемента управления (работает только для текстовых полей и поля выбора файла, так что для остальных элементов управления лучше использовать атрибут disabled, однако при этом данные деактивированных элементов управления не отправляются серверу);
• size – задает размер элемента управления (единицы измерения и действие специфичны для разных элементов управления);
• maxlenth – задает максимальную длину текста, который может быть введен в текстовые поля (положительное численное значение);
• src – для элемента управления image задает расположение используемого изображения;
• title – описание элемента управления (может отображаться браузерами как всплывающая подсказка);
• align – задает горизонтальное выравнивание элемента управления, работает так же, как и для любого другого HTML-элемента, поддерживающего этот атрибут;
• tabindex – номер элемента управления при навигации при помощи табуляции;
• accesskey – горячая клавиша для элемента управления (для перехода к элементу управления нужно нажать Alt и заданную клавишу).
После того как дано начальное описание элемента INPUT, можно проанализировать текст HTML-документа с формой, показанной на рис. 9.2 (пример 9.1).
//-- Пример 9.1. Пример использования HTML-элемента INPUT --//
В приведенном примере использованы все возможные значения атрибута type, кроме значения hidden. Поскольку использование каждого из значений атрибута type налагает различные ограничения на использование других атрибутов HTML-элемента INPUT, то целесообразно рассмотреть влияние каждого значения подробно. Для краткости особенности использования каждого значения сведены в таблицу (табл. 9.1).
//-- Таблица 9.1. Значения атрибута type --//
Атрибут size упоминался только для элементов управления, имеющих в своем составе текстовые поля. Это потому, что хотя для остальных элементов управления этот атрибут и должен принимать значения в пикселах и задавать соответствующую ширину этих элементов управления, но трудно найти браузер, который бы это поддерживал. Многострочное текстовое поле
Теперь рассмотрим, как вставить в форму более продвинутый элемент управления для редактирования текста – многострочное текстовое поле. Этот элемент управления обозначается HTML-элементом TEXTAREA и задается парными тегами .Главным отличием этого элемента управления от обычного текстового поля, кроме возможности ввода текста, состоящего из большого количества строк, является то, что начальное значение не задается атрибутом value, а записывается между тегами .
При отображении в текстовом поле форматирование текста сохраняется точно так же, как при использовании HTML-элемента PRE.
В целом для настройки элемента TEXTAREA используются те же атрибуты, что и для настройки элемента INPUT со значением атрибута type, равным text или password. Однако размер элемента управления задается не атрибутом size, а с помощью следующих атрибутов:
• rows – задает количество строк, которые отображаются без необходимости вертикальной прокрутки;
• cols – задает максимальное количество символов в строке текстового поля, отображаемое без переноса.
Многострочное текстовое поле выглядит так, как показано на рис. 9.3 (в браузере Internet Explorer).
Рис. 9.3. Многострочное текстовое полеДля создания приведенного на рисунке текстового поля использовался следующий фрагмент кода (пример 9.2).
//-- Пример 9.2. Создание многострочного текстового поля --//
Снова кнопки
В HTML предусмотрен отдельный элемент BUTTON на случай, если разработчику формы не хватит возможностей обычных командных кнопок. При помощи этого HTML-элемента создаются кнопки, на которые можно поместить практически все, за исключением разве что других форм, фреймов и некоторых других особых HTML-элементов. Такая кнопка выглядит в браузере Internet Explorer так, как показано на рис. 9.4.
Рис. 9.4. Кнопка с расширенными возможностямиНовый вид кнопок используется аналогично кнопкам, создаваемым HTML-элементом INPUT со значением атрибута type, равным button. Новые кнопки отличаются от своего аналога, прежде всего, созданием: для задания HTML-элемента BUTTON используются парные теги , между которыми помещается форматированный текст. Так, за создание кнопки, показанной на рис. 9.4, отвечает следующий HTML-код (пример 9.3).
//-- Пример 9.3. Создание кнопки BUTTON --//
Внимание!
В тексте между тегами правильного HTML-документа не должны задаваться другие HTML-элементы, обладающие возможностями гиперссылок. В лучшем случае, если браузер это предусматривает, то такие HTML-элементы будут просто игнорироваться. В худшем же случае, если браузер не переносит HTML-документ с ошибками, то его поведение вообще сложно предугадать.
Специфичным в настройке кнопки, создаваемой HTML-элементом BUTTON, является использование атрибута type для задания типа кнопки: submit (отправка формы при нажатии), reset (сброс значений элементов управления формы при нажатии) или button (пользовательская кнопка, связываемая со сценарием). Кроме того, доступны атрибуты name, title, disabled, tabindex и accesskey, использование которых полностью аналогично использованию атрибутов элемента INPUT.
Следует особо рассмотреть атрибут value. Его использование только для подписи кнопки становится бессмысленным. Однако в спецификации HTML 4.01 говорится, что предполагается отправка значения этого атрибута вместе с прочими данными формы (видимо при нажатии соответствующей кнопки, имеющей значение атрибута type, равное submit, тогда задание значения атрибута value является весьма полезным для определения на сервере того, какую именно кнопку нажал пользователь).
Меню
При создании форм можно использовать еще один достаточно удобный элемент управления, позволяющий выбрать одну или несколько альтернатив из списка – меню (или список параметров). Этот элемент управления добавляется на форму использованием трех HTML-элементов: SELECT, OPTGROUP и OPTION. Хотя обязательно использовать только первый и последний из них.Начнем с HTML-элемента SELECT – он является контейнером пунктов меню, задается при помощи парных тегов и поддерживает следующие атрибуты:
• name – имя меню, которое также используется как название параметра при отправке формы;
• size – задает количество строк, одновременно видимых пользователем;
• multiple – булев атрибут, позволяет разрешить выделение нескольких пунктов меню одновременно;
• disabled – булев атрибут, деактивирует меню;
• title – текст подсказки для меню;
• tabindex – номер при перемещении между элементами управления при помощи табуляции.
Элемент управления меню может представляться различными браузерами по-разному: в виде списка, в виде раскрывающегося списка, в виде раскрывающегося меню, наконец. Рассмотрим представление меню браузером Internet Explorer. В зависимости от значения атрибута size меню может выглядеть так, как показано на рис. 9.5.
Рис. 9.5. Внешний вид менюЕсли использовать атрибут multiple, то Internet Explorer покажет меню простым списком даже при значении size равном 1: в раскрывающемся списке несколько пунктов сразу выбрать нельзя.
Ниже приведен фрагмент текста HTML-документа, создающий два меню, показанных на рис. 9.5 (согласитесь, что задание меню сходно с заданием списков) (пример 9.4).
//-- Пример 9.4. Два простых меню --//
size = 1
size = 4
В тексте примера вы видите также упомянутый ранее HTML-элемент OPTION. Итак, этот элемент используется для задания отдельных пунктов меню. Он задается парными тегами (закрывающий тег необязателен), между которыми помещается текст пункта меню. Имеет следующие атрибуты:
• value – текст, который будет отправлен с формой при выборе пункта меню;
• selected – булев атрибут, позволяет выделить пункт меню по умолчанию (не следует устанавливать для нескольких пунктов одно меню, если не установлен атрибут multiple);
• disabled – булев атрибут, запрещает выбор пункта меню (правда, в реализации меню списками, как в Internet Explorer, это сделать довольно сложно, поэтому разработчики браузера особенно не мучились и не реализовали этот атрибут).
Теперь осталось рассмотреть, для чего нужен третий HTML-элемент – OPTGROUP. Так вот, элемент OPTGROUP используется для группировки пунктов меню. Группы создаются заключением HTML-элементов OPTION, определяющих пункты меню одной группы, в парные теги . Параметры группы можно настроить с использованием следующих атрибутов HTML-элемента OPTGROUP:
• label – строка с подписью для группы;
• disabled – запретить выбор пунктов меню, принадлежащих этой группе (аналогично атрибуту disabled для элемента OPTION).
Ниже приведен пример разбиения пунктов меню на группы для двух меню (пример 9.5).
//-- Пример 9.5. Группировка пунктов меню --//
size = 1
size = 4
Меню, описанные в примере 9.5, выглядят так, как показано на рис. 9.6.
Рис. 9.6. Внешний вид меню с группированными пунктами Подписи элементов управления
Некоторые элементы управления, например кнопки, содержат надписи, по которым пользователь может определить назначение этих элементов управления. Для других элементов типа текстовых полей, флажков и т. п. приходится создавать подписи вручную, смешивая определения элементов управления формы с текстом.Существует еще один способ задания подписей к элементам управления – использование HTML-элемента LABEL. Задание подписей таким образом осуществляется ничуть не легче, а даже тяжелей, однако добавляет возможностей по автоматической обработке HTML-документа.
Итак, рассмотрим, каким образом создаются подписи с использованием элемента LABEL: между парными тегами помещается текст подписи, а атрибуту for элемента LABEL присваивается значение, идентифицирующее нужный элемент управления.
При задании значения атрибута for следует помнить, что нужно использовать значение атрибута id нужного элемента управления. Это значит, что элементам управления нужно дополнительно задавать значения атрибута id. Пример создания подписи таким образом:
В рассмотренном примере элемент LABEL явно ассоциируется с полем ввода пароля. Существует еще способ, при котором можно ассоциировать подпись с элементом управления неявно (без задания значения атрибута for элемента LABEL). Для этого нужно поместить элемент управления в теле элемента LABEL. Предыдущий пример при этом может выглядеть так:
Текст может находиться до или после определения элемента управления. В теле HTML-элемента LABEL в этом случае должно быть только одно определение элемента управления.
9.3. Группировка элементов управления
При создании форм есть возможность сделать более выразительным общее предназначение некоторых элементов управления, дополнительно заключив их в рамку так, как показано на рис. 9.1. Рамку можно подписать, а можно оставить без подписи.Рамка создается при помощи HTML-элемента FIELDSET. Между парными тегами помещаются определения элементов управления, принадлежащих группе. Вокруг этих элементов управления и будет нарисована рамка.
Для создания подписи к рамке нужно внутри элемента FIELDSET определить элемент LEGEND. Этот HTML-элемент задается при помощи парных тегов , между которыми помещается текст подписи. Можно «поиграть» также с выравниванием подписи при помощи атрибута align, однако следует знать, что разные браузеры по-разному реализуют значения этого атрибута, а некоторые значения и совсем не поддерживают.
В заключение рассмотрим, как реализована группировка элементов управления формы, показанной на рис. 9.1 (пример 9.6).
//-- Пример 9.6. Группировка элементов управления --//
Этот пример является практически законченной страницей с формой: жаль, что по адресу somesite.com/cgi-bin/proc.exe нет реального CGI-приложения, способного обрабатывать форму.
Глава 10
Введение в CSS
Следующие две главы посвящены замечательному и широко используемому средству HTML, значительно облегчающему реализацию единого стилевого оформления при разработке больших веб-сайтов, – каскадным таблицам стилей (CSS, Cascade Style Sheets).
10.1. Возможности CSS
Таблицы стилей позволяют управлять отображением практически любого содержимого HTML-документа. Например, с их помощью можно задать цвет, шрифт и прочие параметры, влияющие на то, как должны показываться заголовки. Можно задать полужирное или еще какое-нибудь начертание шрифта определений в списке определений. Помните, как это приходилось делать вручную в примерах гл. 4?С использованием таблиц стилей можно забыть о необходимости физического форматирования текста, а также о настройке отображения таблиц, списков и других элементов HTML-документов. Кроме того, таблицы стилей позволяют настраивать даже параметры отображения содержимого документа, недоступные при использовании HTML-элементов (отступы абзацев, стили рамок рисунков и многое другое, вплоть до интервала между буквами текста и свободного позиционирования элементов страницы).
По-настоящему убедиться в полезности CSS можно тогда, когда приходит время менять дизайн всего сайта. Представьте себе, что есть сайт, представляющий собой достаточно большое учебное пособие, например по программированию на С++, содержащее 50 страниц с 200 примерами (листингами). По какой-то причине нужно поменять цвет шрифта этих самых листингов: ничего не поделаешь, придется вносить изменения в каждый тег
(200 штук). При использовании CSS достаточно изменить (или добавить) одну запись в таблице стилей. И это лишь один из множества возможных примеров.
Наверное, теперь понятно, почему технология CSS получила большое распространение вскоре после разработки и реализации ее поддержки в браузерах. Кроме того, с использованием каскадных таблиц стилей можно создавать документы, которые по-разному отображаются на различных типах устройств: от карманного ПК до проектора.
Чтобы использовать таблицы стилей в документах, нужно сначала научиться их создавать, не так ли? Именно с рассмотрения особенностей создания таблиц стилей и начнем.
10.2. Внешние и встроенные таблицы стилей
Для начала нужно рассмотреть, где могут находиться таблицы стилей. Итак, внешние таблицы стилей названы так потому, что помещаются в отдельных файлах. Данные файлы являются обычными текстовыми файлами, созданными, например, в редакторе Блокнот. Нужно лишь при сохранении этих файлов использовать расширение CSS (например, mystyle.css). Внешние таблицы стилей подключаются к документу при помощи HTML-элемента LINK. При этом используются следующие атрибуты этого элемента:
• href – задает URI файла с подключаемой таблицей стилей;
• rel – для подключения таблицы стилей этому атрибуту присваивается значение stylesheet;
• type – при подключении CSS задается значение text/css;
• media – задает тип устройства, для которого применяется подключаемая таблица стилей (эта замечательная возможность будет рассмотрена далее).
HTML-элемент LINK задается при помощи одиночного тега , который помещается в шапке документа. Для одного и того же документа можно подключать неограниченное количество таблиц стилей. Пример подключения двух внешних таблиц стилей:
Встроенные таблицы стилей задаются внутри HTML-элемента STYLE (между парными тегами ), помещенного в разделе HEAD документа. При создании встроенных таблиц стилей нужно указывать значение атрибута type элемента STYLE, также можно задать значение атрибута media. Назначение этих атрибутов в этом случае совпадает с назначением одноименных атрибутов HTML-элемента LINK.
Кроме подключения внешних таблиц стилей, ссылаясь на них при помощи элемента LINK, можно подключать внешние таблицы стилей и из самих таблиц стилей. Это позволяет существенно сократить объем таблиц стилей, если в них предполагается наличие одинаковых фрагментов. Подключение внешней таблицы выполняется при помощи ключевого слова @import. Правило CSS в таком случае имеет следующий формат:
@import url(«URI внешней таблицы стилей»);
Пример подключения внешней CSS может выглядеть так:
…
P {font-size: 16pt}
@import url("external_stylesheer.css"); /*подключение таблицы стилей*/
…
В примерах данной главы используются встроенные таблицы стилей. Однако имейте в виду, что это сделано только потому, что, во-первых, примеры небольшие и создавать для них два файла просто нерационально, а во-вторых, такие примеры проще помещать в книгу и они так лучше воспринимаются. На практике удобнее использовать внешние таблицы стилей. Тогда не придется при изменении стиля одного элемента заново выкладывать на сервере все содержимое документа: достаточно обновить файл с измененной таблицей стилей.
10.3. Записи таблицы стилей
Таблицы стилей представляют собой множество записей, называемых правилами. Каждое правило CSS состоит из двух частей: селектора и объявления стиля. Селектор несет в себе информацию, достаточную для нахождения в документе элементов, к которым применяется стиль. Объявление стиля представляет собой набор пар свойство/значение, заключенный в фигурные скобки {}. Синтаксис правила CSS следующий:
селектор {свойство: значение; свойство: значение; …}
При объявлении стиля может быть задано как значение только одного свойства, так и значения сразу нескольких свойств CSS. В последнем случае пары свойство/значение отделяются друг от друга символом ;.
То, что обозначено в приведенном примере как селектор, может быть названием HTML-элемента (например, P, STRONG, H1), идентификатором фрагмента документа (#par1, #tabl1), именем стилевого класса (.par1, P.par1) или более сложной конструкцией, описанной ниже.
Свойство представляет один из предопределенных строковых идентификаторов, обозначающих тот или иной параметр, поддерживаемый для HTML-элемента (например, color, backgroundcolor, font-family). Тип присваиваемого значения зависит от конкретного параметра.
Одни и те же правила отображения могут применяться к нескольким различным селекторам. В этом случае запись в таблице стилей будет иметь следующий вид:
селектор, селектор, … {свойство: значение; свойство: значение; …}
Свойства CSS, которые можно задать для различных элементов, существенно отличаются. Часть их мы рассмотрим на примерах в тексте книги. Более полный перечень свойств с их описаниями вы сможете найти в приложении 2.
Правила отображения HTML-элементов
Рассмотрим самое простое применение CSS – задание стиля текста (или прочего содержимого), содержащегося внутри определенных HTML-элементов. Для этого нужно указать в качестве селектора название HTML-элемента (или нескольких HTML-элементов), например:
H1 {color: red; font-family: arial}
H2, H3 {color: blue; font-family: courier}
P {font-style: italic}
Теперь все заголовки первого уровня будут отображаться красным цветом шрифтом Arial, заголовки второго и третьего уровней будут отличаться только размером шрифта, а текст внутри каждого HTML-элемента P будет отображаться курсивом.
Приведенный выше текст уже является таблицей стилей. Его можно поместить в отдельный CSS-файл. Тогда получится внешняя таблица стилей. Можно поместить определение CSS внутрь HTML-документа так, как это показано в примере 10.1.
//-- Пример 10.1. Стили для HTML-элементов --//
Использование стилей HTML-элементов
Заголовок первого уровня
Текст абзаца
Заголовок второго уровня
Текст абзаца
Заголовок третьего уровня
Текст абзаца
На рис. 10.1 приведено подтверждение сказанных выше слов о том, как браузер покажет текст документа с рассмотренной таблицей стилей.
Рис. 10.1. Задание стилей для HTML-элементов
Использование стилевых классов
Второй способ применения таблиц стилей основан на использовании стилевых классов. Рассмотрим это на примере:
H1.arial {color: red; font-family: arial}
H2.newroman {color: blue; font-family: newroman}
P.italic {font-style: italic}
.bold {font-weight: bold}
Здесь созданные в таблице стилей селекторы указывают на четыре стилевых класса с именами arial, newroman, italic, bold. Перые три правила могут использоваться только для HTML-элементов H1, H2 и P, для которых заданы стилевые классы arial, newroman и italic соответственно. Четвертый селектор позволяет применить правило к любому элементу, стилевой класс которого указан как bold.
Назначение стилевого класса HTML-элементу осуществляется при помощи атрибута class. Этот атрибут поддерживается для всех элементов, кроме BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE, TITLE.
Рассмотрим пример использования стилевых классов (пример 10.2).
//-- Пример 10.2. Использование стилевых классов --//
Использование стилевых классов
Заголовок первого уровня
Текст абзаца
Измененный заголовок первого уровня
Заголовок второго уровня
Курсивный текст абзаца
Измененный заголовок второго уровня
Полужирный текст абзаца
Страница, формируемая браузером Internet Explorer при обработке приведенного примера, показана на рис. 10.2.
Рис. 10.2. Использование стилевых классов
Как можно увидеть, для использования стилевых классов нужно немного больше поработать над содержимым HTML-документа, назначая нужным элементам значения атрибутов class. При этом доступно гораздо больше возможностей по оформлению документа: например, может быть недостаточно одного и того же цвета абзацев, одинакового выравнивания или шрифта текста. Есть еще множество случаев, когда удобнее создать некоторое количество стилевых классов, а не задавать CSS-свойства одинаковых HTML-элементов, как это сделано в примере 10.1.
Задание отображения единичных элементов документа
Стили можно определять не только в таблице стилей. При помощи атрибута style можно создавать так называемые «инлайн-стили». Атрибут style поддерживается для тех же HTML-элементов, что и атрибут class. Для создания «инлайн-стиля» атрибуту style присваивается значение, которое обычно записывается в скобках {} в строке таблицы стилей (то есть объявление правила). Ниже приведен переделанный пример 10.2, в котором как раз и реализовано определение стилей в атрибуте style (обратите внимание, что при этом отпала необходимость определения самой таблицы стилей) (пример 10.3).
//-- Пример 10.3. Использование атрибута style --//
Заголовок первого уровня
Текст абзаца
Измененный заголовок первого уровня
Заголовок второго уровня
Курсивный текст абзаца
Измененный заголовок второго уровня
Полужирный текст абзаца
Рассмотрим еще один способ применения правил отображения, задаваемых с помощью стилевых таблиц. В стилевой таблице можно задать CSS-свойства HTML-элемента, имеющего определенное значение атрибута id (атрибут рассматривался в гл. 6). Как это делается, лучше сразу рассмотреть на примере 10.4.
//-- Пример 10.4. Использование атрибута id в CSS --//
Использование id в CSS
Рисунки без применения стилей
А к этим рисунками применен стиль (изменение размера)
В данном случае при помощи CSS задаются параметры отображения двух рисунков. Как это реализуется браузером, можно увидеть на рис. 10.3.
Рис. 10.3. Задание стилей отдельных элементов
Задать параметры отображения только одного элемента рассмотренным способом можно потому, что значение атрибута id, если оно используется, обычно делается уникальным.
Контекстные селекторы
Помимо селекторов, связанных с определенными HTML-элементами, стилевыми классами или идентификаторами элементов, можно создавать и более сложные селекторы. Они подходят для случаев, когда стиль должен применяться только к элементам документа, находящимся внутри какого-то другого элемента. Например, средствами CSS можно особым образом оформить элементы LI, находящиеся внутри элемента LO, принадлежащего к различным стилевым классам (пример 10.5).
//-- Пример 10.5. Применение сложных селекторов --//
Сложные селекторы
Список, оформленный обычным шрифтом
- Элемент списка
- Элемент списка
Список, оформленным курсивным шрифтом
- Элемент списка
- Элемент списка
Раскрашенный список
- Элемент списка
- Элемент списка
Чтобы применить стиль к каждому отдельному элементу списков, не потребовалось назначать никакие стилевые классы для самих элементов списков. Потребовалось лишь отнести сами списки (элементы OL) к нужным стилевым классам, что избавило нас от лишних усилий при составлении HTML-документа.
Обратите внимание на таблицу стилей из приведенного примера 10.5, а именно на селекторы. Как видите, если нужно указать, что данный стиль должен применяться только к элементам, находящимся внутри другого элемента, контекстный селектор будет состоять из соответствующих простых селекторов, разделенных пробелом.
Кроме того, что показано в примере, можно создать и другие виды контекстных селекторов, например:
P STRONG {color: red} /*применяется к элементам STRONG внутри P*/
.par .colored {color: red} /*применяется к элементам со стилевым классом
"colored", находящимся внутри элементов со стилевым классом "par"*/
Комментарии в таблице стилей
Примечательно, что даже в таблицы стилей можно помещать комментарии. Естественно, это весьма полезно при определении больших и сложных таблиц. При этом синтаксис комментария CSS отличается от синтаксиса комментария HTML. Комментарий в CSS задается в стиле языков программирования C или Java, то есть так:
/* Это однострочный комментарий */
/* А здесь записан
многострочный
комментарий */
10.4. Порядок применения стилей
В самом начале главы говорилось не просто о таблицах стилей, а о каскадных таблицах стилей. Рассмотрим, в чем же проявляется каскадирование и как его можно использовать. Каскадирование проявляется при наличии в одной или нескольких используемых документом таблицах стилей задания разных значений одного и того же свойства определенного HTML-элемента, стилевого класса или элемента с заданным значением id. Например, пусть в таблице есть следующие записи:
…
H3 {text-align: right; color: black}
…
H3 {text-align: center}
Какое из значений свойства text-align нужно использовать? Каскадирование предполагает, что нужно использовать последнее значение, которое присвоено этому свойству. Это и должен делать браузер.
Аналогичным образом выбираются значения при перекрытии не одного, а нескольких свойств.
Если нужно, чтобы присвоенное ранее значение нельзя было изменить, то при его задании применяется модификатор important.
…
H3 {text-align: right ! important; color: black}
…
H3 {text-align: center}
Теперь для всех HTML-элементов H3 будет использоваться выравнивание по правому краю, несмотря на то что последним было определение выравнивания по центру.
Возможен также случай, когда в нескольких таблицах или в нескольких местах одной и той же таблицы стилей установлен модификатор important сразу для нескольких значений одного и того же свойства.
Рассмотрим пример:
…
H3 {text-align: right ! important; color: black}
…
H3 {text-align: center ! important}
…
H3 {text-align: left}=
В этом случае для свойства text-align принимается последнее значение с модификатором important (значения без important вообще не рассматриваются). В этом случае также осуществляется каскадирование, но не для всех значений свойства, а только для значений с модификатором important.
Следует также отметить, что стили, заданные для HTML-элементов, стилевые классы и встроенные стили (заданные в атрибуте style) каскадируются следующим образом (последующие элементы списка переопределяют предыдущие):
• стили, заданные для HTML-элементов;
• стилевые классы;
• встроенные стили.
В результате обработки следующего фрагмента текст элемента P будет отображаться подчеркнутым, шрифтом синего цвета с полужирным начертанием.
…
Текст абзаца
…
Если бы свойства, заданные, например, для стилевого класса и с помощью встроенного стиля, перекрывались, то они были бы переопределены в соответствии с приведенным выше списком (не забывайте также про модификатор important).
Еще одной особенностью применения стилей является наследование. Это означает, что настройки стиля родительского HTML-элемента автоматически применяются к вложенным элементам. Например, настройки шрифта, заданные для BODY, будут применены по умолчанию ко всему тексту документа. Если же для абзацев (P) также заданы другие стилевые настройки, то они будут дополнять или переопределять настройки, назначенные элементу BODY. Кроме того, стили наследуются в зависимости от того, как они записаны в таблице стилей. Так, в приведенном ниже фрагменте настройки шрифта наследуются в следующем порядке (пример 10.6):
• стиль элемента BODY имеет настройки стиля по умолчанию, кроме свойства font-size, значение которого явно задается в таблице стилей;
• стиль элемента P наследует настройки элемента BODY и переопределяет цвет шрифта;
• стиль элемента P класса italic добавляет к шрифту курсивное начертание;
• «инлайн-стиль» элемента P класса italic наследует настройки последнего и добавляет полужирное начертание шрифта.
//-- Пример 10.6. Наследование стилей --//
Наследование свойств стиля
Текст 18-м шрифтом
синего цвета
курсивного начертания
полужирный
Рисунок 10.4 наглядно показывает постепенное наследование свойств стиля, использованное в примере 10.6.
Рис. 10.4. Наследование стилей
Автоматичесое наследование стилей применяется не для всех свойств CSS. Для свойств, не поддерживающих наследование (например, для свойств видимости элемента, рассмотренных в следующей главе), часто предусматривается специальное значение inherit, позволяющее явно указать, что значения свойства нужно унаследовать у родительского элемента.
В общем, каскадирование и наследование стилей являются мощным средством для формирования единого дизайна HTML-документов, которое к тому же уменьшает объем таблиц стилей.
10.5. Единицы измерения CSS
Здесь приводятся описания единиц измерения, которые могут использоваться для задания значений атрибутам CSS.
Линейный размер и положение
Обозначения, названия и расшифровки единиц измерения приведены в табл. 10.1. Единица измерения указывается после числа с количеством единиц (например, 10cm, 10%).
//-- Таблица 10.1. Единицы указания размера и положения --//Цвета
Задавать цвет в CSS можно двумя способами. Во-первых, можно использовать предопределенные названия цветов: black, white, red и т. д. (см. табл. 2.3). Второй способ состоит в указании RGB-кода цвета. В этом случае задается значение, определяющее цвет, которое состоит из трех компонентов: уровней интенсивности красного, зеленого и синего цветов. Существуют четыре модификации этого способа: задание цвета с использованием десятичных значений, использование процентных значений насыщенности цветов, задание цвета с использованием полного или сокращенного набора шестнадцатеричных значений. Ниже приведены примеры, иллюстрирующие использование указанных модификаций второго способа для задания одного и того же цвета.
color: rgb(255, 255, 0)
color: rgb(100%, 100%, 0%)
color: #FFFF00
color: #FF0
В данном случае все четыре строки задают желтый цвет. Для красного и зеленого каналов здесь заданы максимальные значения интенсивности (255, 100%, FF и F).
10.6. Скрытие таблиц стилей
В заключение рассмотрим небольшой прием, который позволяет документам, содержащим встроенные таблицы стилей, корректно отображаться старыми браузерами, вообще не поддерживающими таблицы стилей. Чтобы такой браузер точно не показал таблицу стилей как текст документа, содержимое CSS заключается в комментарий HTML. Например:
Для браузеров, поддерживающих CSS, добавление комментария ничего не изменит. Такой же способ применяется для скрытия сценариев, причем для сценариев это более актуально, так как они помещаются в теле документа. Об этом будет рассказано в гл. 13, как раз и посвященной созданию динамических страниц с использованием сценариев на JavaScript.
Глава 11
Использование таблиц стилей
В предыдущей главе мы рассмотрели основы каскадных таблиц стилей. Теперь же обратимся к тому, как использовать наиболее востребованные возможности CSS, коими является управление шрифтом и видом текста элементов страницы. Есть много аргументов в пользу таблиц стилей. Так, задание настроек шрифта в таблице стилей позволяет избавиться от элементов FONT, B, I и прочих украшений в теле документа, то есть хотя бы частично отделить оформление от содержимого (контента) страницы. К тому же при написании таблиц стилей доступны гораздо большие возможности, чем при использовании чистого HTML. И это относится не только к шрифтам, в чем вы скоро сможете убедиться.
Часть из рассмотренных далее свойств CSS мы уже использовали в примерах гл. 10, не объясняя особенностей. Теперь же использованные в примерах гл. 10 и другие свойства будут рассмотрены подробно.
11.1. Шрифт
Для управления шрифтом в CSS предусмотрена целая группа свойств. Начнем со свойства font-family. С его помощью можно задать, каким шрифтом должно быть выведено содержимое элемента.
Вообще, свойство font-family применяется двояко. Во-первых, можно задать семейство шрифтов, то есть одно из предопределенных значений: serif, sans-serif, cursive, fantasy, monospace. Различные семейства шрифтов имеют особые характерные для них начертания. И если конкретный шрифт для дизайна не слишком важен, то можно заданием семейства и ограничиться. В таком случае браузер сам подберет наиболее подходящий шрифт. Пример задания семейства шрифта может выглядеть так:
P.text {font-family: serif}
Во-вторых, можно задать название конкретного шрифта, например: Arial, «Courier New» или «Times New Roman». Заметьте, что если название шрифта состоит из нескольких слов, то оно берется в кавычки. Например:
P.text {font-family: «Times New Roman»}
Кроме того, при использовании font-family можно подстраховаться на случай, если на компьютере клиента не будет нужного шрифта. Для этого свойству font-family задается несколько значений, разделенных запятой, например:
P.text {font-family: «Times New Roman», cursive, fantasy}
Варианты, расположенные левее в списке значений, считаются более предпочтительными. Это значит, что если на компьютере пользователя не окажется шрифта Times New Roman, то будет использоваться подходящий шрифт семейства cursive. Если же и шрифты семейства cursive будут недоступны, то браузер попытается найти подходящий шрифт из семейства fantasy. Ну и, наконец, в самом худшем случае, когда и шрифт семейства fantasy подобрать не удастся, будет использован шрифт по умолчанию.
Кроме указания собственно шрифта, средствами CSS можно задать размер шрифта. Для этого пригодится свойство font-size. Причем размер шрифта можно задавать в абсолютных и относительных единицах измерения (см. разд. 10.5). Кроме того, для задания размера шрифта можно использовать значения, аналогичные значениям атрибута size HTML-элемента FONT: xx-small, x-small, small, medium, large, x-large, xx-large. Можно также использовать значения larger и smaller для увеличения и уменьшения, соответственно, размера шрифта (в терминах HTML) на одну единицу по сравнению с первоначальным шрифтом.
Ниже приведено несколько примеров использования свойства font-size:
P.size1 {font-size: 16pt} /* 16 пунктов */
P.size2 {font-size: 8mm} /* 8 миллиметров */
P.size3 {font-size: 150%} /* увеличение в 1,5 раза */
P.size4 {font-size: xx-large} /* самый большой шрифт для "чистого" HTML */
P.size5 {font-size: smaller} /* уменьшение на 1 единицу */
Для изменения начертания шрифта в CSS используется свойство font-style, принимающее одно из следующих значений: normal (используется по умолчанию, задает нормальное, некурсивное начертание), italic (курсивное начертание) и oblique (наклонное начертание).
Кроме того, еще одно свойство используется для указания жирности шрифта. Это свойство font-wieght. Ему можно присваивать одно из значений, непосредственно задающих жирность шрифта: 100, 200, 300, 400, 500, 600, 700, 800 и 900. Наряду с числовыми значениями жирности существуют два предопределенных литерала normal и bold, соответствующие жирности 400 и 700. Кроме того, в качестве значения свойства font-weight можно использовать литералы bolder или lighter, увеличивающие и уменьшающие жирность шрифта на 100 единиц по сравнению с первоначальной.
И наконец, последнее свойство шрифта, которое имеет имя fontvariant, используется для указания, как должны выглядеть строчные буквы текста: как обычные строчные или как уменьшенные прописные (см. рис. 11.1). В первом случае используется значение normal (это значение по умолчанию), а во втором – small-caps.
Рис. 11.1. Свойство font-variant
11.2. Стиль текста
Кроме рассмотренных в предыдущем разделе свойств шрифта, средствами CSS можно еще многого добиться в изменении внешнего вида текста. Описанные здесь свойства изменяют уже не внешний вид символов текста, а способ размещения текста на странице и добавляют к тексту разнообразные украшения.
Как раз с украшений текста мы и начнем. Чтобы зачеркнуть, подчеркнуть или «надчеркнуть» текст, используется свойство text-decoration. Оно может принимать следующие значения:
• underline – подчеркивает текст (значение по умолчанию для HTML-элементов A, INS, U);
• overline – выводит линию поверх текста;
• line-through – перечеркивает текст (значение по умолчанию для HTML-элементов DEL, S, STRIKE);
• none – убирает все украшения текста (значение для большинства HTML-элементов).
С помощью свойства text-decoration, кстати, можно с легкостью изменить внешний вид гиперссылок, убрав в них подчеркивание текста (если это, конечно, нужно). Кроме того, с помощью рассмотренных далее в этой главе псевдоклассов гиперссылок можно, например, подчеркивать текст гиперссылки только при наведении на нее указателя мыши. Но оставим гиперссылки в покое и обратимся к маленькому примеру использования свойства text-decoration:
P.under {text-decoration: underline}
P.strike {text-decoration: line-through}
P.crazy {text-decoration: underline overline}
Обратите внимание на последнее приведенное здесь правило CSS. Если браузер это поддерживает, то применение нескольких значений одновременно дает очень любопытный, правда вряд ли особо полезный результат. В данном случае получится подчеркнутый и «надчеркнутый» одновременно фрагмент текста.
Следующим рассмотрим свойство text-align, при помощи которого задается горизонтальное выравнивание текста. В качестве значения этого свойства может использоваться одно из следующих значений:
• left – выравнивание по левому краю;
• right – выравнивание по правому краю;
• center – выравнивание по центру;
• justify – выравнивание одновременно по правому и левому краям.
Использовать text-align крайне просто, а потому сразу переключим свое внимание на следующее свойство, позволяющее задать отступ первой строки текста или так называемый отступ красной строки. Это свойство именуется test-indent. Оно может принимать или абсолютное, или относительное значение (в единицах измерения CSS), или же процент от ширины родительского HTML-элемента, например:
…
Текст с отступом красной строки 10% от ширины ячейки таблицы
…
Изменить расстояние между строками текста подобно тому, как это делается в текстовом редакторе (при смене одинарного интервала полуторным, например), можно при помощи свойства line-height. Хотя если говорить более точно, то свойство line-height задает не расстояние между строками, а высоту самих строк. По умолчанию это свойство имеет значение normal. Кроме того, значениями свойства line-height могут быть абсолютные или относительные значения в единицах измерения размеров CSS и процентные значения, определяющие процент от высоты строк, унаследованной от родительского элемента страницы. Ниже приведено несколько примеров использования свойства line-height:
P.compact {line-height: 80%} /*компактный абзац*/
P.lagre {line-height: 150%} /*абзац с полуторным межстрочным интервалом*/
Как изменяется внешний вид текста при использовании свойства line-height, можно увидеть на рис. 11.2.
Рис. 11.2. Различная высота строк
Следующее свойство используется для изменения регистра символов. Оно называется texttransform и принимает одно из следующих значений:
• capitalize – делает первые буквы слов прописными;
• uppercase – переводит текст в верхний регистр;
• lowercase – переводит текст в нижний регистр;
• none – отключает преобразования регистра (значение по умолчанию).
Теперь рассмотрим два свойства CSS, при помощи которых можно влиять на вывод текста на уровне слов: word-spacing и white-space. Первое из них используется для увеличения или уменьшения промежутка между словами. Значением по умолчанию этого свойства считается normal, означающее нормальное расстояние между словами. Кроме того, свойству wordspacing можно задать значение в одной из единиц измерения длины CSS, например:
P.compact {word-spacing: 1mm}
P.usial {word-spacing: 10px}
Второе упомянутое свойство white-space позволяет разрешить или запретить перенос текста по словам. Значения этого свойства:
• normal – разрешает обычное поведение при переносе текста на следующую строку (значение по умолчанию);
• pre – сохраняет оригинальное форматирование текста (как внутри HTML-элемента PRE);
• nowrap – запрещает перенос текста по словам (аналогично HTML-элементам NOBR).
Наконец, последним рассмотрим свойство CSS letter-spacing, позволяющее управлять расстоянием между буквами текста. Значением этого свойства может быть normal (значение по умолчанию, означает обычное расстояние между буквами) или значение в одной из единиц измерения длины.
11.3. Cписки
В CSS предусмотрена группа свойств, позволяющих изменять внешний вид списков. Причем все рассмотренные здесь свойства влияют на внешний вид маркера, наличие которого, собственно, и является характерной особенностью любого списка.
Итак, в первую очередь обратимся к свойству list-style-type. Для маркированных списков этому свойству задаются следующие значения:
• disc – задает круглый маркер списка (маркер закрашен внутри);
• circle – задает маркер в виде окружности;
• square – задает маркер в виде квадрата.
Для нумерованных списков свойству list-style-type присваиваются такие значения, задающие тип нумерации:
• decimal – нумерация арабскими цифрами;
• lower-roman – нумерация малыми римскими цифрами;
• upper-roman – нумерация большими римскими цифрами;
• lower-alpha – нумерация малыми латинскими буквами;
• upper-alpha – нумерация большими латинскими буквами.
Воздействие каждого значения свойства list-style-type аналогично соответствующим значениям атрибута type HTML-элементов OL и UL, рассмотренных в гл. 4.
Следующее свойство, предназначенное для задания рисунка в качестве маркера списка, имеет имя list-style-image. Оно перекрывает значение свойства list-style-type и может иметь следующие значения:
• url("URI изображения для маркера") – указывает путь рисунка, который будет использоваться в качестве маркера списка;
• none – отменяет использование рисунка в качестве маркера (значение по умолчанию).
Наконец, свойство list-style-position позволяет задать более компактное отображение списка за счет изменения положения маркера. Свойство принимает следующие значения:
• inside – помещает маркер в текст элемента списка;
• outside – помещает маркер вне текста элемента списка (значение по умолчанию).
На рис. 11.3 показано, как могут выглядеть обычный и компактный списки с маркерами-изображениями.
Рис. 11.3. Обычный и компактный списки
Показанный на рис. 11.3 эффект достигнут применением совсем простой таблицы стилей:
11.4. Границы
В CSS предусмотрен целый набор свойств, позволяющий менять внешний вид границ элементов страницы. Причем с использованием таблиц стилей границы можно показать не только для ячеек таблиц или изображений, но и для других элементов страницы.
Свойства CSS, предназначенные для настройки границ, можно разбить на три группы: свойства для задания цвета границ, свойства для задания стиля границ и свойства для задания толщины границ. Рассмотрим эти три группы по очереди.
Итак, для задания цвета сразу всех границ элемента используется свойство border-color. Типы значений, задающих цвет, рассмотрены в разд. 10.5. Кроме того, можно задать цвет границ элемента по отдельности, то есть цвет верхней, нижней, левой и правой границ. Для этого используются следующие свойства:
• border-top-color – цвет верхней границы;
• border-bottom-color – цвет нижней границы;
• border-left-color – цвет левой границы;
• border-right-color – цвет правой границы.
Таким образом, приведенные ниже правила CSS дадут один и тот же эффект (конечно, если браузер поддерживает оба варианта задания цвета границ):
red_border1 {border-color: red}
red_border2 {border-left-color: red; border-right-color: red;
border-top-color: red; border-bottom-color: red}
Следующая группа свойств, которую мы рассмотрим, задает стиль сразу всех или же только отдельных границ элемента. Для задания стиля всех границ предназначено свойство borderstyle, а для задания стиля верхней, нижней, левой и правой границ – свойства border-topstyle, border-bottom-style, border-left-style и border-right-style соответственно. Значения свойств могут быть следующими:
• none – скрывает границу элемента;
• dotted – граница прерывистая, состоит из точек;
• dashed – граница прерывистая, состоит из отрезков;
• solid – сплошная линия границы;
• double – двойная сплошная линия границы;
• groove – вдавленная линия границы;
• ridge – выпуклая линия границы;
• inset – граница типа «ступенька вверх» (подобный вид границ используется для оформления кнопок);
• outset – граница типа «ступенька вниз» (так выглядит нажатие кнопки).
Небольшой пример использования свойств задания стиля рамки приведен ниже (пример 11.1).
//-- Пример 11.1. Стили границ элементов --//
Стили границ элементов
| none | dotted | dashed | solid | double | groove | ridge | inset | outset |
|
style = "border-top-style: dotted; border-left-style: solid; border-bottom-style: dashed; border-right-style: double"> Ячейка с разными границами | ||||||||
В этом небольшом примере задействованы все перечисленные выше виды границы. Внешний вид самих границ хорошо виден на рис. 11.4.
Рис. 11.4. Стили границ элементовНаконец, рассмотрим свойства CSS, позволяющие изменять толщину границ элементов. Для задания толщины сразу всех границ элементов предназначено свойство border-width. Для задания толщины верхней, нижней, левой и правой границ используются свойства border-top-width, border-bottom-width, border-left-width и border-right-width. Этим свойствам задаются как предопределенные значения thick (толстая граница), medium (граница средней толщины) и thin (тонкая граница), так и значения в одной из единиц измерения длины (пример 11.2).
//-- Пример 11.2. Использование границ различной толщины --//
| thin | medium | thick |
| 1px | 2px | 4px |
| 1pt | 2pt | 4pt |
| 1mm | 2mm | 4mm |
Обратите внимание на одну особенность использования границ, затронутую в этом примере. Очень часто (но не всегда и не во всех браузерах) по умолчанию границы элементов невидимы (стиль границ none). По этой причине задание толщины границ не будет иметь никакого эффекта. Чтобы границы ячеек (именно ячеек) были показаны, в этом примере использовалась небольшая таблица стилей, в которой для элементов TD включено отображение сплошных границ.
Страница, созданная по примеру 11.2, выглядит так, как показано на рис. 11.5.
Рис. 11.5. Границы разной толщиныПри использовании свойств, управляющих толщиной границ, нужно также иметь в виду, что не все стили границ, задаваемые свойством borderstyle, могут быть нарисованы с указанной толщиной. Так, например, не могут быть нарисованы с толщиной 1px двойные, а также выпуклые и вдавленные линии.
11.5. Поля и отступы
При помощи каскадных таблиц стилей можно устанавливать промежутки (или ширину полей) между соседними элементами страницы, а также отступы от границ элемента до его содержимого. Для задания ширины полей между соседними элементами используются следующие свойства:• margin-top, margin-bottom – задает высоту верхнего и нижнего полей соответственно; может принимать значения в абсолютных и относительных единицах измерения CSS; значение в процентах означает процент от высоты родительского элемента;
• margin-left, margin-right – задает ширину левого и правого полей соответственно; может принимать значения в абсолютных и относительных единицах измерения CSS; значение в процентах означает процент от ширины родительского элемента;
• margin – задает ширину и высоту всех полей сразу.
Все перечисленные свойства также могут принимать значение auto (собственно, это и есть значение по умолчанию), позволяющее браузеру самому выбрать нужные размеры полей. Как влияют перечисленные свойства на расположение элементов страницы, показано на рис. 11.6.
Рис. 11.6. Поля между элементами до (слева) и после (справа) применения свойства marginДля задания полей так, как показано на рис. 11.6, использовалось следующиее правило таблицы стилей:
IMG {margin-top:2px; margin-bottom:2px; margin-left:30px; margin-right:30px}
Теперь настал черед отступов от края элемента до его содержимого. Итак, для задания отступов используются следующие свойства:
• padding-top, padding-bottom – задает отступы от верхней и нижней границ элемента до его содержимого;
• padding-left, padding-right – задает отступы от левой и правой границ элемента до его содержимого;
• padding – задает значение всех отступов содержимого от границ элемента (для всех элементов по умолчанию имеет значение).
Использовать свойства для задания отступов так же просто, как и рассмотренные выше свойства для задания полей.
11.6. Цвет и фон
В HTML изменять цвет текста можно при помощи атрибута color элемента FONT. При использовании же таблиц стилей для всех элементов доступен атрибут color, выполняющий такую же функцию. Вот несколько примеров задания одного и того же цвета текста для совершенно разных элементов страницы:P {color: blue}
TH {color: rgb(0,0,255)}
TD {color: #0000FF}
Что касается фона, то если средствами «чистого» HTML нам позволено задавать лишь цвет фона для элементов BODY, TABLE, TR, TH и TD, то, используя CSS, можно задать не только цвет фона любых элементов страницы, но и рисунок, положение фона и еще кое-что.
Однако начнем все же с цвета фона. Для указания цвета фона элемента используется свойство background-color. Как и свойство color, оно принимает значение цвета в любом поддерживаемом CSS формате. Кроме того, свойству background-color по умолчанию присвоено значение transparent, которое сделает фон элемента прозрачным.
Кроме задания цвета фона, в CSS предусмотрено свойство для задания фонового изображения элемента – background-image. Оно может принимать значения none (значение по умолчанию, означает отсутствие фонового изображения) и URI файла рисунка.
Ну и, наконец, еще одно свойство, после которого последует маленький пример. Это свойство называется background-repeat. Оно отвечает за то, будет ли фоновый рисунок размножен, если он окажется меньше элемента. Свойство может принимать следующие значения:
• repeat – фоновое изображение повторяется по горизонтали и по вертикали;
• repeat-x – изображение повторяется по горизонтали;
• repeat-y – изображение повторяется по вертикали;
• no-repeat – изображение не повторяется.
Использование рассмотренных свойств CSS, отвечающих за настройку фона, показано в примере 11.3.
//-- Пример 11.3. Фон страницы и фон элементов --//
Абзац с фоном одного цвета
Абзац с рисунком в качестве фона
В этом примере при помощи свойств background-image и background-repeat для элемента BODY создается окантовка страницы слева (подобие «переплета»). Свойство paddingleft, заданное для элемента BODY, позволяет выводить остальные элементы страницы так, чтобы они не закрывали рисунок «переплета». Кроме того, в примере показано использование одноцветного фона и фона-рисунка для HTML-элементов.
Внешний вид страницы, создаваемой браузером по примеру, показан на рис. 11.7.
Рис. 11.7. Фон страницы и фон элементов
В завершение рассмотрим еще несколько свойств CSS, работающих с фоном. При помощи свойства backgroundattachment, которое применяется только к элементу BODY, можно указать, должен ли браузер прокручивать фоновый рисунок при прокрутке содержимого страницы. Свойство имеет два значения:
• scroll – фоновое изображение прокручивается вместе с содержимым страницы (значение по умолчанию);
• fixed – фоновое изображение зафиксировано, то есть при прокрутке содержимого страницы фон остается неподвижен.
И наконец, свойства background-position, background-position-x и backgroundposition-y. Первое из них позволяет указанием двух значений, разделенных пробелами, задать горизонтальную и вертикальную координаты фонового рисунка. Следующие два свойства дают возможность сделать то же самое, но по отдельности: свойством background-positionx задается горизонтальная координата, а свойством background-position-y – вертикальная.
Значения горизонтальной координаты рисунка (свойство background-position-x) могут быть следующими:
• предопределенные значения left, center, right, задающие выравнивание фона по левому краю, по центру или по правому краю элемента соответственно;
• численные значения в одной из единиц измерения длины, поддерживаемой CSS;
• процент от ширины элемента.
Значениями вертикальной координаты рисунка (свойство background-position-y) могут быть:
• предопределенные значения top, center, bottom, задающие выравнивание фона по верхнему краю, по центру или по нижнему краю элемента соответственно;
• численные значения в одной из единиц измерения длины, поддерживаемой CSS;
• процент от высоты элемента.
Пример использования свойств background-position:
BODY {background-position: 10% 100px}
Точно такое же положение фонового рисунка страницы можно получить и следующим способом:
BODY {background-position-x: 10%; background-position-y: 100px}
11.7. Свободное позиционирование
При использовании таблиц стилей появляется еще одна возможность, о которой веб-дизайнеры до CSS не могли даже мечтать. Установка определенных свойств в таблицах стилей позволяет задавать произвольное положение и размер практически любого элемента страницы. На рис. 11.8 наглядно показано, что представляет собой свободное позиционирование таких элементов, как изображения и текст абзаца.
Рис. 11.8. Свободное позиционирование элементов страницыВ примере 11.4 приведен текст HTML-документа, в котором реализуется показанное на рисунке свободное позиционирование элементов.
//-- Пример 11.4. Использование свободного позиционирования --//
А это свободно позиционированный текст абзаца
Возможность свободного позиционирования предоставляет не только много свободы при оформлении статичных HTML-документов, но и позволяет создавать разнообразные довольно интересные визуальные эффекты с использованием сценариев. Примеры таких эффектов приведены в гл. 13. Сейчас же мы более подробно рассмотрим свойства CSS, дающие возможность свободно позиционировать элементы страницы. Начнем с использованного в примере 11.4 свойства position, которое позволяет указать браузеру, как выполнить позиционирование элемента страницы.
Свойство position принимает три значения:
• static – обычное позиционирование в соответствии с порядком следования элементов в документе (значение по умолчанию);
• absolute – задает свободное позиционирование, координаты элемента задаются относительно родительского элемента;
• relative – задает свободное позиционирование, координаты элемента задают смещение от того места, где был бы выведен элемент, будь значение свойства position равным static.
Без задания координат элемента использование свойств позиционирования становится бессмысленным, потому кратко остановимся на свойствах, позволяющих задать положение и размер свободно позиционированных элементов. Итак, для задания положения элемента доступны следующие свойства:
• left и top – горизонтальная и вертикальная координаты левого верхнего угла элемента;
• right и bottom – горизонтальная и вертикальная координаты правого нижнего угла элемента.
Значения координат могут задаваться в любых единицах измерения длины CSS, а также в процентах от ширины или высоты родительского элемента. Когда размер элемента фиксирован, то можно ограничиться только заданием координат левого верхнего угла элемента. Если же нужно точно указать, какую область должен занимать элемент, то вместо задания координат правого нижнего угла можно использовать также свойства CSS width (ширина элемента) и height (высота элемента).
Еще одно свойство, которое используется для свободно позиционированных элементов, – z-index. С его помощью указывается порядок перекрытия элементов. Когда один элемент перекрывает другой, это выглядит как расположение одного элемента поверх другого. Значения свойства z-index:
• auto – порядок перекрытия элементов определяется порядком их следования в документе (значение по умолчанию);
• положительное или отрицательное целое число – элементы с большими значениями z-index перекрывают элементы с меньшим значением этого свойства.
На рис. 11.8 хорошо видно, как выглядит перекрытие элементов страницы. Поскольку для элементов в примере 11.4 явно не задается свойство z-index, то элементы перекрываются в порядке следования в документе. И на самом верху среди всех свободно позиционированных элементов показано содержимое элемента P, так как он следует в тексте документа последним.
Кроме того, при использовании свободно позиционированных элементов в сочетании со сценариями часто используется свойство CSS, позволяющее скрывать и показывать элементы, – visibility, принимающее значения:
• visible – делает элемент страницы видимым;
• hidden – скрывает элемент страницы;
• inherit – наследует значение свойства от родительского элемента (значение по умолчанию).
11.8. Использование элементов DIV и SPAN
Использование HTML-элементов SPAN и DIV позволяет в некоторых случаях значительно облегчить применение стилей к нужным фрагментам документа. С помощью HTML-элемента SPAN можно, например, изменить цвет шрифта в отрывке текста только с помощью таблиц стилей (без использования HTML-элемента FONT с атрибутом color):…
Слово зеленый отображается соответствующим цветом
…
Элемент SPAN применяется для создания встроенных элементов, как в предыдущем примере. Чаще всего этот элемент применяется потому, что надо где-то указать значение style, class или id для участка текста.
В отличие от SPAN, HTML-элемент DIV позволяет создавать блочные элементы. При этом можно объединять несколько элементов (в том числе и блочных) в один блочный элемент. Это удобно во многих случаях, например, когда нужно обвести рамкой или свободно позиционировать группу элементов, задать общий фон для группы элементов.
Использование HTML-элементов DIV и SPAN отражено в примере 11.5.
//-- Пример 11.5. Использование элементов DIV и SPAN --//
Список сотрудников
Имя: Василий
Фамилия: Пупкин
Должность: Директор
Телефон: 123-45-01 (секретарь)
Имя: Владимир
Фамилия: Замахов
Должность: Зам. директора
Телефон: 123-45-02
Имя: Мария
Фамилия: Иванова
Должность: Секретарь
Телефон: 123-45-01
…
Приведенный HTML-документ выглядит так, как показано на рис. 11.9.
Рис. 11.9. Использование элементов DIV и SPAN
Обратите внимание, что каждый элемент DIV имеет ширину 80 % от ширины окна браузера, а каждый четный элемент смещен на 20 % от ширины окна вправо. Главным в этом примере является то, что содержимое элемента DIV позиционируется как единое целое, а с помощью элемента SPAN удалось отделить текст с названием поля, описывающего данные сотрудника, от данных, соответствующих этому полю. Вообще, такого же эффекта можно добиться применением обычных таблиц, однако пришлось бы приложить гораздо больше усилий.
11.9. Псевдоклассы гиперссылок
Помните, как в самом начале книги мы задавали параметры отображения гиперссылок документа при помощи атрибутов HTML-элемента BODY? С использованием CSS можно сделать то же самое. Но при этом нужно использовать предопределенные названия стилевых классов элемента A: A:link (непосещенная гиперссылка), A:visited (посещенная ссылка), A:active (активная гиперссылка, проявляется, например, при перемещении по гиперссылкам при помощи табуляции) и A:hover (состояние при наведении указателя мыши на гиперссылку).Псевдоклассы так называются потому, что они явно не задаются в теле HTML-документа (не могут быть заданы вообще). Но в частности в примере с гиперссылками сам браузер при показе документа обладает информацией, по каким гиперссылкам переходит пользователь, а по каким нет, где находится указатель мыши и какая часть документа получила фокус ввода. По этим признакам элементы документа можно объединить в виртуальные группы – псевдоклассы, на которые можно ссылаться из таблицы стилей.
Задание параметров каждого вида гиперссылок в остальном полностью аналогично заданию этих параметров для обычного текста. Например:
В документе, содержащем приведенную таблицу стилей, все непосещенные гиперссылки не будут подчеркнуты. Посещенные будут отображаться полужирным подчеркнутым шрифтом зеленого цвета. Активные (но еще не посещенные) гиперссылки будут иметь красный цвет, а при наведении указателя мыши начертание шрифта всех типов гиперссылок будет становиться курсивным.
11.10. Псевдоклассы текста
Помимо гиперссылок, еще как минимум два псевдокласса предусмотрены для обычного текста. При помощи этих псевдоклассов можно ссылаться на первую букву или первую строку текста, содержащегося в HTML-элементе.Для ссылки на первую букву текста используется псевдокласс first-letter. Его можно использовать, например, для создания буквицы (см. рис. 11.10). Правда, добиться такого же результата можно и при помощи рассмотренного далее HTML-элемента SPAN в сочетании со стилем CSS, примененным к этому элементу. Но теперь речь идет не об элементе SPAN, а о псевдоклассе first-letter.
Итак, для создания буквицы, показанной на рис. 11.10, используется приведенный в примере 11.6 HTML-код.
Рис. 11.10. Заглавная буква страницы//-- Пример 11.6. Создание буквицы --//
Первая буква этого текста будет большой и красивой буквой синего цвета.
Все последующие абзацы будут начинаться по-обычному
Как было сказано ранее, в CSS можно также ссылаться на первую строку текста HTML-элемента. Для этого используется псевдокласс first-line. Этот псевдокласс бывает очень полезен, так как нельзя точно предугадать, где браузер разорвет строку (если, конечно, не используется запрет разрывов строки, рассмотренный в гл. 3). Место разрыва первой строки зависит от ширины окна браузера или ширины HTML-элемента, в который помещен текст, а также от размера шрифта и стиля текста. Пример выделения первых строк абзацев приведен на рис. 11.11.
Рис. 11.11. Особое оформление первых строк абзацев
Текст HTML-документа, показанного на рис. 11.11, приведен ниже (пример 11.7).
//-- Пример 11.7. Особое оформление первых строк абзацев --//
Абзац, оформленный шрифтом по умолчанию. …
Абзац, оформленный шрифтом большого размера. …
Абзац, оформленный шрифтом малого размера. …
Как видите, использование псевдокласса first-line является простым и универсальным способом изменения оформления первых строк текста, заключенного внутри HTML-элементов. При этом нас не интересует, как отделить от текста именно первую строку при разных разрешениях экрана, разных размерах окна браузера, да и в разных браузерах.
11.11. Создание CSS для различных устройств
При использовании таблиц стилей у автора имеется возможность позаботиться о том, чтобы страницы его сайта одинаково хорошо обрабатывались самыми различными устройствами. Это достигается созданием таблиц стилей, которые используются, если просмотр производится с помощью заданного устройства.Сами таблицы стилей создаются как обычно, то есть в CSS-файле или внутри HTML-элемента STYLE. Вся хитрость заключается в указании нужного значения атрибута media элемента LINK (при подключении внешней CSS) или элемента STYLE (для встроенной таблицы).
Атрибут media может принимать в качестве значения список из одного или более следующих строковых идентификаторов:
• all – таблица подходит для любого устройства;
• aural – таблица используется для речевых синтезаторов (таблицы управления свойствами потоком речи гораздо более сложны, чем таблицы для графических средств просмотра, и в этой книге не рассматриваются);
• braille – таблица применяется для устройств, генерирующих последовательность символов алфавита Брайля (предназначенного для людей с ослабленным зрением);
• handled – таблица используется для устройств с небольшим экраном, имеющим также ограничения по цветопередаче и прочим параметрам (карманные ПК и прочие портативные устройства);
• print – таблица применяется при выводе страницы на печать, а также при выводе в окне предварительного просмотра;
• projection – таблица используется при просмотре документа с помощью проектора или другого сходного устройства;
• screen – таблица применяется при отображении на экране стандартного монитора (используется по умолчанию);
• tty – таблица используется при выводе на устройства с ограниченными возможностями отображения (телетайпы, терминалы и др.);
• tv – таблица применяется при отображении на экране телевизора или сходного по возможностям устройства.
Теперь рассмотрим небольшой пример документа, который по-разному отображается, например, на экране монитора и при выводе на печать (самые доступные режимы при применении только ПК) (пример 11.8).
//-- Пример 11.8. Документ для различных устройств --//
Заголовок первого уровня
Текст абзаца
Заголовок второго уровня
Текст абзаца
Заголовок третьего уровня
Текст абзаца
На экране монитора документ выглядит так, как показано на рис. 11.12 (используется таблица со значением атрибута media равным screen).
Рис. 11.12. Страница в окне браузера
При выводе на печать (в окне предварительного просмотра) используется таблица стилей со значением media=print, что видно из рис. 11.13.
Рис. 11.13. Страница в окне предварительного просмотра
Конечно, даже при выводе на печать может потребоваться гораздо больше работы при создании таблицы стилей, чем показано в приведенном здесь примере. Однако думается, что даже в этом простом случае хорошо заметна потенциальная мощь CSS в подготовке документов для различных устройств.
Глава 12
Краткий курс JavaScript
Все, что было рассмотрено в предыдущих главах книги, относится к созданию хоть и красивых и удобных, но все же статичных веб-страниц. Этого в большинстве случаев оказывается вполне достаточно. Однако по-настоящему эффектными страницы получаются, если использовать при их создании возможности, предоставляемые большинством современных браузеров, – добавление в документы исполняемого содержимого.
Итак, исполняемым содержимым документа являются небольшие программы (названные сценариями), написанные автором документа и выполняющие в большинстве случаев несложные задачи по обработке данных или украшающие страницу.
Сценарии являются программами, поэтому естественно, что написаны они с использованием какого-то языка программирования.
Среди языков, разработанных для программирования сценариев, можно привести JavaScript, VBScript, JScript как наиболее простые. В данной книге будет рассмотрено только программирование на языке JavaScript.
Язык программирования сценариев JavaScript претендует на то, чтобы быть упрощенной версией популярного языка Java, хотя во многих вопросах это сходство ограничивается только сходством в названии. JavaScript является интерпретируемым языком программирования (как и другие языки программирования сценариев). Это значит, что, когда наступает нужный момент, браузер находит в документе программу JavaScript, проверяет ее на наличие ошибок, после чего выполняет команду за командой.
Далее в этой главе рассматриваются основные возможности языка JavaScript и правила написания программ с его использованием.
Объем книги не позволяет привести развернутое описание языка программирования, поэтому материал изложен кратко.
12.1. Замечание о строках кода JavaScript
Логически цельные и обособленные действия программы на JavaScript, будь то присвоение значения переменной, вызов функции и пр., записываются в отдельных строках (эти действия называются операторами, или инструкциями). В конце строк обязательный для многих других языков программирования (для того же Java) символ ; ставить необязательно, за исключением тех случаев, когда нужно явно задать пустой оператор (в тех местах, где оператор требуется синтаксисом языка, но он не нужен программисту) или если все же нужно записать несколько действий в одной строке. Например:var a, b = 123
a = a + 12 + b*2
a = a + b; c = a – b / 2
Однако во всех примерах книги строки заканчиваются символом ;, чтобы избежать путаницы (особенно для людей, которые уже имеют опыт программирования на C/C++ или Java). Выражения и операторы программы можно переносить на следующую строку, но только там, где допускается пробел. Например:
var a, b = «text»
a = b + "=" + "Очень длинная строка текста, которая настолько длинна, что "+" даже не помещается на странице"
12.2. Комментарии
В тексте программы на JavaScript можно помещать два вида комментариев: однострочные и многострочные. Однострочный комментарий обозначается //, а многострочный заключается между /* и */. Примеры обоих видов комментариев://Однострочный комментарий
/* Многострочный комментарий */
12.3. Типы данных, переменные, выражения
Основные типы данных, которыми позволяет манипулировать JavaScript, приведены в табл. 12.1 (кроме того, существуют ссылки на объекты и функции, но они будут рассмотрены позже).//-- Таблица 12.1. Типы данных JavaScript --//
Перечисленные выше типы данных применяются в выражениях, например следующее выражение: 524 + 45.23 + «sometext» в результате даст значение «569.23sometext». Из полученного результата можно увидеть, что при расчете значений выражений производится автоматическое преобразование типов значений от менее универсальных типов к более универсальным (сверху вниз по табл. 12.1).Относительно строковых значений осталось рассказать о том, что такое escape-символы. Так вот, escape-символы применяются для вставки в строки символов, которые не могут быть введены в текстовом редакторе либо являются недопустимыми (например, двойные кавычки в строке, заключенной в двойные кавычки). Доступные в JavaScript escape-символы, а также их описания приведены в табл. 12.2.
//-- Таблица 12.2. Escape-символы --//
Чтобы хранить значения выражений, используются переменные. Каждая переменная имеет имя (идентификатор). Имя переменной может содержать символы латинского алфавита, цифры и символ подчеркивания, причем первым символом не должна быть цифра, например: myVar, _any123var. Имена переменных не должны совпадать с зарезервированными словами языка JavaScript (они далее называются ключевыми, так менее точно, но короче). Ключевыми словами являются также все названия операторов, которые будут рассмотрены далее.Переменные могут использоваться в выражениях наряду с численными и строковыми значениями (численными и строковыми константами). Например, если в переменной val содержится значение "text = ", то результатом выражения val + "sometext" будет строка "text = sometext".
Внимание!
Регистр символов в именах переменных, а также функций, классов (на будущее) в JavaScript имеет значение. Это значит, что, например, val и Val – это различные переменные.
Перед использованием переменные нужно объявлять. При этом тип переменной указывать не надо (определенных типов просто нет, есть тип, хранящий любые данные). Переменные объявляются при помощи ключевого слова var следующим образом:
var v1, somevar = «asd»;
Как видно, в одной строке можно объявить сразу несколько переменных. При объявлении переменных их можно инициализировать (оператор = используется для присвоения значений переменным). Неинициализированные переменные содержат значение undefined (в данном случае это переменная v1). Переменные могут также содержать специальное значение null, означающее, что в переменной нет данных. Кроме того, можно использовать специальное значение NaN (Not a Number), сигнализирующее о том, что в переменной содержится не число.
Если необходимо определить тип выражения или тип значения, которое хранится в переменной, то можно использовать оператор typeof(выражение). Этот оператор возвращает строковые значения: number (для численных выражений или значения NaN), string (для строк), object (для значения null и ссылок на объекты).
12.4. Простые и составные операторы
Простыми операторами называются единичные конструкции, выполняющие какое-нибудь действие, например вычисление значения одного выражения, присвоение значения, вызов функции и др.В отличие от простых операторов, составной оператор может содержать в себе любое количество простых или вложенных операторов. Составной оператор задается (часто называемый блоком) при помощи скобок {}. Внутри этих скобок помещаются простые или вложенные составные операторы. Составные операторы используются, если нужно поместить несколько операторов, но ожидается присутствие только одного. В качестве примера рассмотрим оператор if (то, как работает этот оператор, описано далее). В теле оператора if ожидается наличие только одного оператора, выполняющего какое-либо действие, например:
if (a == 1) a++;
Что же делать, если нужно выполнить последовательность более чем из одного оператора? Ответ: применить составной оператор так, как это сделано ниже:
if (a == 1) {
a++;
//Другие действия…
}
12.5. Операторы языка JavaScript
Арифметические операторы. Инкремент и декремент
В языке JavaScript присутствуют стандартные для языков программирования арифметические операторы, позволяющие производить вычисления с численными и строковыми значениями (для строк только оператор +).К арифметическим операторам JavaScript относятся: + (сложение), – (вычитание), * (умножение), / (деление). В дополнение к ним присутствует оператор взятия остатка от деления %. Все указанные операторы являются бинарными (в том смысле, что принимают два значения и возвращают одно). Кроме указанных операторов, существует еще и унарный оператор –, инвертирующий значение аргумента (например –123, –val).
В JavaScript предусмотрена также удобная возможность записи выражений вида i = i + 1, i = i – 1, i = i * j и пр., где i – произвольная переменная, а j – произвольное выражение. Первые два выражения сокращенно записываются как инкремент и декремент: i++ и i–. Третье выражение и подобные ему можно сократить, применив следующие операторы:
• оператор –=, то есть i = i – j эквивалентно i –= j;
• оператор +=, то есть i = i + j эквивалентно i += j;
• оператор *=, то есть i = i * j эквивалентно i *= j;
• оператор /=, то есть i = i / j эквивалентно i /= j;
• оператор %=, то есть i = i % j эквивалентно i %= j.
Кроме того, предусмотрены соответствующие операторы &=, ^=, |= для двоичных операторов и <<=, >>=, >>>= для операторов сдвига.
Логические операторы и операторы сравнения
И логические операторы, и операторы сравнения возвращают результат – логическое значение true или false. Однако логические операторы принимают аргументы логического типа, в то время как операторы сравнения сравнивают значения произвольного типа. И логические операторы, и операторы сравнения языка JavaScript приведены в табл. 12.3.//-- Таблица 12.3. Логические операторы и операторы сравнения --//
Двоичные операторы
Двоичные операторы применяют при необходимости осуществления операций над численными (обычно целыми) значениями на уровне их битового представления. Здесь не рассматривается подробно, как представлены числа в памяти компьютера, а описываются только операторы.Итак, двоичных операторов в JavaScript семь. Эти операторы перечислены в табл. 12.4.
//-- Таблица 12.4. Двоичные операторы JavaScript --//
Приоритет операторов
Все операторы, которые могут быть использованы в выражениях, имеют свой приоритет, который учитывается при определении очередности вычисления значений подвыражений. Ниже приведен список операторов согласно их приоритету (от наивысшего к самому низкому).1. ++, –, – (унарный), ~, !, typeof.
2. *, /, %.
3. +, -.
4. <<, >>, >>>.
5. >, >=, <, <=.
6. ==, !=, ===.
7. &.
8. ^.
9. |.
10. &&.
11. ||.
12. =, +=, –=, *=, /=, %=, &=, |=, ^=.
Несмотря на приоритет операторов, очередность вычисления подвыражений может быть изменена использованием скобок () любой вложенности. Выражение, заключенное в скобки, всегда вычисляется раньше других на том же уровне вложенности.
Условные операторы
При программировании на JavaScript можно использовать три условных оператора: if, select и оператор ? (именно вопросительный знак). Последний из операторов является самым простым, поэтому рассмотрим его в первую очередь.Оператор ? используется как сокращенная версия оператора if при необходимости рассчитать значение одного из двух выражений в зависимости от истинности или ложности условия. Оператор имеет следующий формат:
условие ? выражение1 : выражение2
Здесь условие – логическое выражение (результат true или false). Выражение1 вычисляется в случае истинности выражения условие, иначе вычисляется значение выражения выражение2. Оператор ? возвращает значение (подобно любому другому оператору, например = или *), равное значению вычисленного выражения. Ниже приведено несколько примеров использования оператора ? (для большей наглядности выражения часто заключают в скобки):
a = (b > 3) ? b : 3; //Значение переменной a будет не меньше 3
a = (text == "continue") ? (a+=2) : a;
Следующим рассмотрим оператор if, который позволяет выбрать выполнение одной из двух последовательностей операторов в зависимости от истинности или ложности выражения-условия. Оператор if имеет следующий формат:
if (условие) оператор1
else оператор2
Если значение выражения условие равно true, то выполняется оператор1 (это может быть как простой, так и составной оператор), в противном случае выполняется оператор2 (также или простой, или составной оператор). Часть else оператор2 является необязательной. Ниже приведено несколько примеров использования оператора if:
if (b != 0) a /= b; //Проверяется отсутствие деления на ноль
else {
//Какие-то действия по информированию (в данном случае ничего)
}
if (a > 12)
if (a<25); //Действия при 12 < a < 25
else; //Действия при a > 25
В приведенном примере проиллюстрирована одна проблема, с которой часто сталкиваются начинающие программисты на C-подобных языках. Здесь специально проставлены отступы так, чтобы проиллюстрировать тот факт, что ключевое слово else относится к последнему по порядку оператору if. Если бы использовался блок, то принадлежность else была бы очевидной:
if (a > 12){
if (a<25) ; //Действия при 12 < a < 25
else ; //Действия при a > 25
}
Напоследок осталось рассмотреть последний из условных операторов – оператор множественного выбора switch. Он позволяет выбрать одну из многих альтернатив в зависимости от значения заданного выражения. Формат оператора приведен ниже:
switch (выражение){
case выражение1:
операторы1
case выражение2:
операторы2
…
default:
операторы_по_умолчанию
}
Оператор switch работает следующим образом. Сначала вычисляется значение выражения выражение. Далее это значение сравнивается с выражениями при каждом ключевом слове case сверху вниз. Если, например, значение выражение совпало со значением выражение2, то выполняется последовательность операторов операторы2. Выполнение продолжается до тех пор, пока не будет встречен оператор break либо выполнение не дойдет до конца тела оператора switch (закрывающая скобка }). Если перед следующим ключевым словом case отсутствует оператор break, то выполнится последовательность операторов операторы3 и т. д. Ключевое слово default используется для того, чтобы задать последовательность операторов, которые должны выполниться при несовпадении значения выражение со всеми выражениями при всех ключевых словах case. Для иллюстрации сказанного приводится пример использования оператора switch:
switch (var){
case 1:
//Операторы выполнятся при var == 1
break;
case 2:
//Операторы выполнятся при var == 2
case 3:
//Операторы выполнятся при var == 2 или var == 3
break;
case 4:
//Операторы выполнятся при var == 4
default:
//Операторы выполнятся при var != 1 && var != 2 && var != 3
}
Циклы
Язык JavaScript поддерживает три вида циклов: for, while и do-while. Начнем с более простых циклов while и do-while. Цикл while позволяет выполнять нужные действия, пока истинно выражение-условие. Формат оператора while следующий:while (условие) оператор
Здесь условие – логическое выражение (аналогично операторам if и ?), а оператор – простой или составной оператор, выполняемый при каждой итерации цикла. Пример использования цикла while:
var i = 0;
while (i<10){
//Какие-то действия…
i++; //Не забываем увеличить итератор, чтобы случайно
//не организовать бесконечный цикл
}
Следующий оператор цикла do-while имеет следующий формат:
do оператор while (условие)
Этот оператор цикла аналогичен оператору while с тем лишь отличием, что условие в цикле do-while проверяется после выполнения каждой итерации. Это значит, что оператор выполнится как минимум один раз. Предыдущий пример можно записать с использованием оператора do-while следующим образом:
var i = 0;
do{
//Какие-то действия…
i++; //Не забываем увеличить итератор, чтобы случайно
//не организовать бесконечный цикл
}while (i<10);
Теперь рассмотрим оставленный напоследок цикл for. Оператор for имеет следующий формат:
for (выражение1; условие; выражение2) оператор
Значение выражения выражение1 рассчитывается перед первой итерацией цикла. Обычно это инициализация счетчика или другой переменной, нужной в цикле. Операторы в теле цикла (оператор) выполняются до тех пор, пока истинно значение выражения условие. Перед второй и последующей итерациями вычисляется значение выражения выражение2 (обычно это выражение по изменению переменной цикла). Для демонстрации использования цикла for ниже приводится пример (аналог примеров для циклов while и do-while):
var i;
for(i=0; i<10; i++){
//Какие-то действия…
}
Операторы break и continue
Оператор break, помимо прерывания выполнения последовательности операторов внутри оператора switch, используется для прерывания итерации циклов. В следующем примере выполнение цикла for прерывается как раз с помощью оператора break:var i;
for (i=0; i<10; i++){
//Действия…
if (i == 5) break;
}
Если в теле цикла встречается оператор continue, то остальные операторы игнорируются, а выполнение переходит на проверку условия цикла. Например, в следующем цикле суммируются значения от 1 до 10 (с помощью оператора continue игнорируются значения 5 и 7):
var i, sum = 0;
for (i=0; i<10; i++){
if (i == 5 || i == 7) continue;
sum += i;
}
Оператор запятая
Оператор полезен в тех случаях, когда нужно одновременно вычислить значение нескольких выражений в том месте, где допускается запись только одного. Рассмотрим этот случай на примере оператора for. Пусть нужно, чтобы в цикле было два итератора, но очень не хочется писать увеличение (уменьшение) одного из них в теле цикла. С использованием оператора , (запятая) можно разрешить проблему следующим образом:var i, j;
for (i=0, j=100; i
}
Выражения, разделенные оператором , (запятая), вычисляются слева направо. При этом возвращаемым значением будет значение самого левого выражения. В следующем примере значение переменной res будет равным 3, а не 6:
var res, val = 2;
res = val+=1, val=5;
Из этого примера можно подчеркнуть одну особенность всех операторов присваивания языка JavaScript: они тоже возвращают значение. Корректными являются конструкции вида:
a = 1 + (b = c = d = 25);
Здесь значением переменной a будет 26, а остальных переменных – 25. Все сказанное об операторе , (запятая) не касается использования этого оператора при вызове функций.
12.6. Функции
Функции применяются в тех случаях, когда недостаточно программы, представляющей собой простую последовательность операторов, выполняющуюся один раз. В этом случае применение функций позволяет сгруппировать операторы и выполнять их произвольное количество раз (вызывая функцию из любого места программы). Упрощенно о функции можно сказать, что это именованная последовательность операторов.
Пользовательские функции
Пользовательская функция – любая функция, созданная программистом (а не встроенная в интерпретатор). Для создания пользовательских функций применяется следующая конструкция:function имя_функции(параметр1, параметр2, …){
//Операторы тела функции
return выражение
}
Здесь имя_функции – имя, идентификатор функции. На него распространяются те же ограничения, что и на имя любой переменной. В скобках задается список формальных параметров функции (она может и не иметь параметров). Каждый элемент этого списка – идентификатор переменной. Переменные с указанными в списке идентификаторами могут использоваться в функции так, как будто они были объявлены с использованием var (дополнительно эти переменные инициализируются значениями, переданными в функцию). Для возврата результата выполнения функции используется оператор return.
Рассмотрим пример функции, принимающей два значения и возвращающей сумму переданных ей значений:
function sum (v1, v2){
//Вычисляем сумму двух значений
return v1 + v2;
}
Для вызова этой функции в любом месте программы, а также в теле другой функции должна использоваться следующая запись:
sum(выражение1, выражение2)
Значения двух указанных выражений и будут переданы в функцию в качестве значений переменных v1 и v2. Если результат, возвращаемый функцией, используется, то в этом случае вызов функции записывают в правой части операторов присваивания либо как аргумент оператора в выражении, например:
summa = sum(3, 4); //В переменную summa заносится 7
summa = sum(3, sum(4, 5)); //Суммируются три значения
Встроенные функции JavaScript
Программист на JavaScript может использовать некоторые встроенные в интерпретатор функции, позволяющие значительно упростить некоторые аспекты программирования, связанные с преобразованиями строковых значений, вычислениями значений выражений. Эти функции приведены в табл. 12.5.//-- Таблица 12.5. Встроенные функции JavaScript --//
Глобальные и локальные переменные
При рассмотрении функций нельзя обойти вниманием такой вопрос, как область видимости переменных. Итак, переменные, объявленные вне функции, являются глобальными переменными. К ним можно получить доступ из любого места программы.Переменные можно объявлять и внутри функций с использованием все того же ключевого слова var. Такие переменные являются локальными, и доступ к ним можно получить только внутри той функции, в которой они объявлены. Объявление любой локальной переменной может находиться в любом месте функции. При этом переменную, объявленную ниже в тексте программы, можно использовать выше, потому что интерпретатор при входе в функцию создает сразу все объявленные в ней переменные. В месте же объявления переменных происходит только их инициализация. Следующий пример является абсолютно корректным:
var j;
i = 1;
j = i;
var i = 2;
Рассмотрим также, что происходит, если имеет место такой случай:
var i = 1; //Глобальная переменная
function f(){
var i = 2; //Локальная переменная
return i;
}
В данном случае функция возвратит значение 2, то есть в операторе return используется значение локальной переменной.
Ссылки на функции
Кроме значений описанных ранее типов, переменным можно присваивать имена функций. После такого присвоения функцию можно вызвать, используя в качестве имени функции имя переменной, как в приведенном ниже примере:var pfun = sum; //Присваиваем ссылку на функцию
var res = pfun(1,3); //Вызываем функцию sum
function sum(arg1, arg2){
return arg1+arg2;
}
Это может оказаться полезным во многих случаях. Например, в функциях сортировки массивов в число параметров функции сортировки часто включают параметр, предназначенный для передачи ссылки на функцию, сравнивающую элементы массива и возвращающую строго определенные значения (см. описание метода sort класса Array далее в тексте главы).
Кстати, оператор typeof возвращает значение function, если его параметром является имя функции или переменная, которой ранее присвоено имя функции.
12.7. Массивы
Использование массивов очень удобно, если нужно хранить большое количество однотипных значений. Массив – это список значений, хранящихся под одним именем. Доступ к каждому элементу массива осуществляется по номеру соответствующего элемента. Нумерация элементов массива в JavaScript начинается с нуля.Массивы создаются в два этапа: объявляется переменная для хранения массива, после чего производится инициализация массива. Например:
var arr;
arr = [1,2,3,4,5];
или
var arr = [1,2,3,4,5];
Результатом выполнения приведенного фрагмента кода является создание массива, состоящего из пяти элементов. Доступ к элементам массива осуществляется с помощью оператора []. Операция получения значения третьего элемента массива выглядит следующим образом:
val = arr[2];
Конструкцию вида имя_массива[номер] можно использовать и в выражениях аналогично обычным переменным. Значения элементов массива можно сразу не указывать, то есть можно объявить пустой массив:
var arr;
arr = [];
Созданный массив при этом не содержит элементов. Для заполнения массива можно также использовать оператор []. Во время присвоения значений элементам массива проявляется следующая особенность: массив автоматически расширяется, если номер элемента, которому присваивается значение, превосходит номер последнего элемента в массиве. В следующем примере в результате выполнения присваивания массив будет содержать пять элементов, причем четыре первых из них будут иметь значение undefined:
var arr;
arr = [];
arr[4] = 5;
Для создания многомерного массива нужно элементам уже объявленного массива также присвоить массивы. Создание пустого двумерного массива (четыре строки с неопределенным количеством элементов) может выглядеть следующим образом:
var arr;
arr = [[], [], [], []];
Для обращения к элементам многомерного массива используется тот же оператор [], например:
arr[0][1] = 124;
arr[2][1] = arr[0][1];
Массивы в JavaScript являются объектами (оператор typeof для переменных-массивов возвращает значение object). К тому же отсутствуют ограничения относительно формы, например, двумерных массивов: можно создавать как прямоугольные, так и треугольные или другие массивы произвольной формы. В ряде случаев это весьма полезно, но иногда может и запутать.
Размер массива можно получить с помощью свойства length этого объекта. Что такое свойство объекта и как его использовать, рассказано в следующем разделе.
12.8. Работа с объектами
Главная цель этого раздела – познакомить вас с приемами программирования на JavaScript, которые будут необходимы для организации взаимодействия с браузером и без которых сценарий в HTML-документе совершенно бесполезен.
Понятие объекта. Свойства и методы
С точки зрения программиста, объект – это сложный тип данных, содержащий совокупность значений переменных (свойств) и функций для их обработки (методов). Все объекты одного и того же типа (с одним и тем же набором свойств и методов) представляют собой конкретные экземпляры одного класса.Свойства объектов можно использовать в программе как обычные переменные, то есть можно присваивать и получать их значения. Методы объектов вызываются и возвращают значения так же, как и обычные встроенные или пользовательские функции.
Единственным существенным отличием использования свойств и методов объектов является необходимость указывать, к какому именно объекту относится свойство или метод. Это делается в программе с помощью оператора . (точка).
Объекты перед использованием необходимо создавать. Создание объектов осуществляется при помощи оператора new. Например, пусть есть класс point, содержащий свойства x и y, хранящие координату точки на плоскости, и метод distance(x, y), который позволяет рассчитать расстояние от точки с нужными координатами до точки, описываемой объектом. Тогда создание и использование объекта класса point можно проиллюстрировать следующим примером:
var p = new point; //Создание объекта класса point
p.x = p.y = 10; //Присвоение значений свойствам
var dist = distance(20, 0); //Вызов метода distance
В приведенном примере создавался пустой объект в том смысле, что изначально неизвестно, какое значение имеют свойства x и y только что созданного объекта. Если класс point поддерживает инициализацию при создании объектов, то присвоить начальные значения атрибутам можно следующим образом:
var p = new point(10, 10);
Примечание
При создании объекта оператором new происходит неявный вызов специального метода, называемого конструктором. Для одного и того же класса может быть предусмотрено несколько конструкторов, принимающих различное количество параметров. Поэтому в первом из приведенных выше примеров выполнялся конструктор, не имеющий параметров, а во втором – конструктор, принимающий два параметра.
Осталось сказать несколько слов об удалении объектов. Итак, JavaScript позаимствовал у Java такую особенность, как ненужность удаления объектов. Неиспользуемые объекты удаляются автоматически.
Встроенные классы JavaScript
После того как изложены основные принципы работы с объектами, можно кратко рассмотреть классы Array, Date, Number и String, которые могут очень пригодиться не только на начальном этапе освоения JavaScript. Кроме этих двух классов, нужно рассмотреть также объект Math, который может оказаться весьма полезным при создании различных визуальных эффектов.//-- Класс Array --//
Класс Array является достаточно удобным расширением обычных массивов. Главным образом за счет наличия дополнительных методов, позволяющих производить довольно сложные манипуляции с данными массива. Класс Array имеет следующие конструкторы:
Array()
Array(размер)
Array(элемент1, элемент2, …)
При использовании первого конструктора создается пустой массив. При использовании второго конструктора создается массив с заданным количеством элементов. При этом все элементы созданного массива имеют значение undefined. При использовании последнего конструктора создается массив, количество элементов которого совпадает с количеством переданных в конструктор параметров. Значения параметров копируются в соответствующие элементы массива. Ниже приведены примеры объявлений массивов:
var arr1 = new Array(); //Пустой массив
var arr2 = new Array(5); //Массив из пяти неопределенных элементов
var arr3 = new Array(1,2,3,4,5); //Массив [1,2,3,4,5]
Размер массива можно узнать с помощью свойства length объекта Array. Доступ к элементам массива осуществляется с помощью [] по индексам элементов. Нумерация элементов, как и в случае обычного массива, начинается с нуля.
Как было сказано ранее, объект Array отличает ряд методов, ориентированных на работу с данными в массиве. Описания этих методов приводятся в табл. 12.6.
//-- Таблица 12.6. Методы класса Array --//
Как можно заметить, большинство методов класса Array ориентированы на обработку одномерных массивов, но ничто не мешает создавать при помощи класса Array многомерные массивы. Для этого достаточно только присвоить элементам массива Array вложенные массивы, но только тоже созданные как объекты класса Array.Теперь несколько слов о том, для чего методу sort() нужна функция сравнения. Так вот, для возрастающей или убывающей сортировки строковых значений в массиве использование метода sort() без написания своей функции сравнения не представляет трудностей (для убывающей сортировки достаточно после метода sort() вызвать метод reverse()). А вот приведенная ниже сортировка чисел даст не очень хороший результат:
var arr = new Array(5,2,25,16);
arr.sort();
В результате получится массив [16,2,25,5], а не [2,5,15,25]. Ошибки здесь нет, были отсортированы посимвольно строки из переданных чисел. Но в данном примере нужно сортировать числа. Для этого и пишется своя функция сравнения:
function comp(val1, val2){
if (val1>val2) return 1;
else
if (val1
}
Теперь вызов метода в виде sort(comp) приведет к правильной сортировке чисел по возрастанию. Задание своей функции сравнения дает большие возможности при обработке массива. Похожим образом можно очень просто сделать сортировку, например, двумерного массива по количеству элементов во вложенных массивах, по среднему значению, по сумме значений и т. д.
//-- Класс Date --//
Объекты класса Date используются для хранения и обработки значений даты и времени. Конструкторы класса Date имеют следующий формат:
Date()
Date(миллисекунды)
Date(год, месяц, число, часы, минуты, секунды, миллисекунды)
При использовании конструктора без параметров созданный объект содержит текущую дату и время. Во втором варианте нужно указать количество миллисекунд, которое прошло с 00:00:00 01.01.1970 г. Третий вариант конструктора позволяет указать каждую составляющую даты и времени. При этом нужно учитывать один важный момент: год, месяц и число указывать обязательно, остальные параметры можно указывать только по мере необходимости. Однако если указываются, например, секунды, то нужно указать еще часы и минуты и т. д.
Кроме того, при использовании класса Date помните, что он оперирует датой и временем текущего часового пояса (локальным временем). Для перевода даты и времени в абсолютные значения (по Гринвичу, по универсальному времени) используются специальные методы этого класса.
В табл. 12.7 приводятся описание и формат основных методов класса Date.
//-- Таблица 12.7. Методы класса Date --//
//-- Класс String --//
Класс String является очень удобным средством манипулирования строками. Конструкторы класса String имеют следующий формат:
String()
String(строка)
Если используется конструктор без параметров, то созданный объект изначально хранит пустую строку. Если используется второй конструктор, то заданная в скобках строка станет начальным значением, хранимым в объекте:
var s = new String(«some text»)
Класс String поддерживает свойство length, позволяющее получить длину строки. В классе String реализовано также большое количество методов, которые могут пригодиться при работе со строковыми значениями. В табл. 12.8 приведены наиболее используемые из этих методов.
//-- Таблица 12.8. Методы класса String --//
//-- Объект Math --//
При необходимости расчетов с привлечением различных математических функций и констант удобным оказывается использование объекта Math. Объект Math является глобальным объектом, создаваемым интерпретатором автоматически. Обращением к свойствам объекта Math можно получить точные значения различных математических констант (табл. 12.9).
//-- Таблица 12.9. Свойства класса Math --//
Методы объекта Math представляют собой различные математические функции. Список методов приведен в табл. 12.10.//-- Таблица 12.10. Методы класса Math --//
Обращение к свойствам и методам объекта Math осуществляется аналогично обращению к свойствам и методам любого другого объекта, например:var pi = Math.PI;
var rnd = Math.random();
Стоит сказать несколько слов об использовании функции генерации случайных значений Math.random(). Часто бывает необходимо получить не значение от 0 до 1, а случайное значение в каком-либо определенном интервале. В этом случае можно использовать следующую функцию:
function rand(min, max){
return Math.random()*(max–min)+min;
}
12.9. Взаимодействие с пользователем
Одной из возможностей JavaScript по взаимодействию с пользователем является использование стандартных окон сообщений и окна ввода текста.Программа на JavaScript может выводить два типа окон сообщений: окно с одной кнопкой OK и окно с кнопками OK и Отмена. Для вывода окон сообщений первого типа используется функция alert(), имеющая следующий формат:
alert(текст_сообщения)
Кроме текста сообщения, в функцию alert() можно передавать численные и логические значения, а также массивы, прочие объекты и даже функции (по крайней мере, при использовании Internet Explorer). Эти возможности делают функцию alert() удобным средством не только взаимодействия с пользователем, а также средством отладки сценариев.
Для вывода окна сообщения с возможностью выбора (кнопки OK и Отмена) используется функция confirm():
confirm(текст_сообщения)
Функция confirm() возвращает значение true, если пользователь нажал кнопку OK, и false, если нажата кнопка Отмена.
При необходимости организации ввода текста пользователем можно применять функцию prompt(). Функция имеет следующий формат:
prompt(текст_сообщения, текст_по_умолчанию)
Как видно, функция принимает два параметра. В первый параметр помещается комментарий, который будет показан в окне. Во втором параметре задается текст, который уже будет введен в текстовое поле, как только окно станет видным пользователю. Окно ввода, приведенное на рис. 12.1, появляется при выполнении следующего отрывка программы:
var a = prompt(«Введите свое имя», «Не хочу регистрироваться»));
Рис. 12.1. Окно запроса пользователюЕсли пользователь нажимает в окне ввода кнопку OK, то функция prompt() возвращает введенное в текстовое поле значение. В противном случае функция prompt() возвращает значение null.
Примечание
Описанные в этом разделе функции вывода сообщений не являются специфичными только для JavaScript. Это методы глобального объекта window. Они рассмотрены раньше, чем объектная модель документа, ввиду чрезвычайной их полезности для отладки сценариев.
12.10. Поиск ошибок в программе
В заключение краткого рассмотрения языка JavaScript немного поговорим о видах ошибок в программе, а также о сообщениях об ошибках и поиске самих ошибок. Здесь идет речь об отладке программ (сценариев) средствами браузера.Итак, синтаксические ошибки выявляются при проверке текста программы. Обычно они проявляются как несбалансированные скобки, не там поставленные запятые или точки с запятой, ошибки в выражениях и т. д. В сообщениях о синтаксических ошибках обычно фигурируют слова типа «ожидалось» (expected), «не ожидалось» (unexpected). Пример сообщения об ошибке браузера Internet Explorer приведен на рис. 12.2.
Рис. 12.2. Сообщение о синтаксической ошибкеЭту конкретную ошибку вызвала следующая строка программы (ошибочно использован символ ; вместо , для разделения параметров функции):
prompt(«текст сообщения»;"значение по умолчанию")
Семантическими ошибками являются использование необъявленных переменных, функций, неправильное количество параметров при вызове функций, использование операторов к операндам несовместимых типов и т. д. При отладке программ только с помощью браузера семантические ошибки равносильны ошибкам времени выполнения, так как выявляются только во время исполнения программы. При этом за браузером Internet Explorer (версии 6.0) замечено довольно странное отношение к ошибкам такого рода (хотя и оправданное с точки зрения пользователя). Так, сообщения об использовании необъявленных переменных часто не выдаются. Вместо этого интерпретатор JavaScript просто завершает выполнение функции или последовательности операторов вне функции. В следующем примере сообщения с номером 12 пользователь не увидит, если переменная a не объявлена:
a += 12;
alert(12);
При таком поведении интерпретатора браузера достаточно сложно определить место возникновения ошибки, поэтому приходится прибегать к некоторым уловкам. Например, можно расставлять вызовы функции alert() до и после каждого подозрительного места программы.
Глава 13
Динамический HTML
Данная глава предназначена для того, чтобы познакомить вас с применением сценариев для создания динамических HTML-документов на примере языка программирования JavaScript.
13.1. Основы использования сценариев в HTML-документе
Помещение сценария в документ
Для помещения сценария в документ достаточно использовать HTML-элемент SCRIPT. Этот элемент задается парными тегами и имеет следующие атрибуты:• src – URI файла, в котором записан код внешнего сценария;
• type – задает тип содержимого элемента SCRIPT или файла, определенного атрибутом src, принимает значения вида text/язык_сценария (например, text/javascript, text/vbscript);
• language – задает язык сценария (например, javascript или vbscript); при использовании атрибута type этот атрибут излишен.
Элемент SCRIPT может появляться как в заголовке, так и в теле документа произвольное количество раз. Рассмотрим пример внедрения в документ простейшего сценария на JavaScript (язык рассмотрим чуть позже) (пример 13.1).
//-- Пример 13.1. Сценарий в HTML-документе --//
"http://www.w3.org/TR/html4/frameset.dtd">
Страница, содержащая сценарий
Прочий текст страницы…
Участки кода между , начинающиеся с document.write(), должны быть записаны в одну строку, иначе пример работать не будет. Что же делает сценарий в приведенном примере? Да ничего особенного, просто при загрузке страницы печатает в правом верхнем углу приветствие, цвет и текст которого зависят от времени суток.
Стоит сказать несколько слов о еще одном HTML-элементе, имеющем отношение к сценариям, – это NOSCRIPT. Этот HTML-элемент задается парными тегами и полезен, когда автор документа хочет подстраховаться на случай, если его документ будет открыт в браузере, не поддерживающем сценарии вообще или не поддерживающем сценарии на используемом языке программирования. Итак, если сценарий не может быть выполнен, то браузер отобразит содержимое элемента NOSCRIPT (в нем может быть, например, гиперссылка на версию документа, не использующую сценарии).
Скрытие сценария
Рассмотрим прием, который часто применяется для того, чтобы браузер, вообще «не знающий» HTML-элемента SCRIPT, не показал пользователю текст сценария. Это может случиться, если сценарий помещен в тело документа.Для предотвращения возникновения такой ситуации текст сценария помещают в HTML-комментарий следующим образом:
Браузеры, поддерживающие элемент SCRIPT, должны проигнорировать HTML-комментарий внутри этого элемента (хотя некоторые версии браузера Netscape Navigator не воспринимали сценарий, заключенный в комментарий HTML).
Другим вариантом скрытия, который должен точно работать, является помещение сценария во внешнем файле и подключение его при помощи атрибута src элемента SCRIPT.
13.2. Исполнение сценария
Теперь рассмотрим, как организовать выполнение написанных и внедренных в документ сценариев. Итак, сценарий может исполняться в двух случаях: при загрузке документа и при возникновении события (а также при вызове его интерпретатором, например, по таймеру, но это рассмотрим особо).
Исполнение при загрузке документа
Интерпретатор браузера выполняет операторы языка JavaScript, записанные вне тела какой-либо функции, только один раз по мере загрузке документа. Причем положение HTML-элемента SCRIPT с текстом сценария определяет момент времени, в который сценарий будет выполняться. Так, сценарий в примере 13.1 выполнялся именно до того, как было загружено остальное содержимое документа, поэтому выведенный им текст и появился раньше основного содержимого документа.Чтобы при загрузке HTML-документа выполнялась какая-либо функция, в нужном месте сценария должен быть записан вызов функции. Так, пример 13.1 можно переписать следующим образом (пример 13.2 сокращен).
//-- Пример 13.2. Вызов функции при загрузке документа --//
…
Страница, содержащая сценарий
Прочий текст страницы…
Если бы в коде сценария не было явного вызова функции greeting(), то на странице не появилось бы приветствие.
Реакция на события
Сценарий может быть также запущен браузером при возникновении на странице какого-либо события, с которым сопоставлен сценарий, – обработчика события. Генерацию событий могут вызывать различные действия пользователя: щелчок кнопкой мыши на элементе страницы, наведение указателя мыши на элемент и др.Для назначения обработчиков события используются атрибуты HTML-элементов, приведенные в табл. 13.1.
//-- Таблица 13.1. Атрибуты для назначения обработчиков событий --//
Значениями приведенных в таблице атрибутов могут быть фрагменты кода сценариев, например:Текст абзаца
Текст абзаца
Обратите внимание, что поскольку текст обработчика помещается в двойные кавычки, то сами кавычки в тексте сценария использовать не следует. Обычной практикой является создание функций-обработчиков события (обычной функции JavaScript) вместо записи действий по обработке события прямо в теге элемента. В таком случае в атрибут onСобытие записывается код вызова функции-обработчика.
События, возникающие в дочерних элементах, передаются вверх по иерархии родительским элементам. Так, например, если над текстом элемента B в приведенном ниже примере произойдет щелчок кнопкой мыши, то событие получит сначала элемент B, потом элемент P, а затем и элемент BODY:
Обычный текст
полужирный текст
13.3. Объектная модель документа
Чтобы можно было успешно применить полученные значения по программированию на JavaScript, нужно рассмотреть еще один специфический момент – это то, как сценарии могут воздействовать на HTML-документ. Для этого необходимо изучить технологию представления HTML-документа в виде совокупности объектов – объектную модель документа (DOM, Document Object Model). DOM включает не только объекты, из которых состоит документ, но и объекты, позволяющие получать различную информацию о браузере, системе (в частности, о видеосистеме компьютера), работать с окнами и многое другое.
Объект document
Для программиста на JavaScript HTML-документ представляется в виде объекта document. Этот глобальный объект существует в единичном экземпляре. О создании объекта document заботится интерпретатор.//-- Свойства и методы объекта document --//
Итак, объект document предоставляет ряд свойств и методов, позволяющих осуществлять практически любые манипуляции с HTML-документом. Основные свойства объекта document приведены в табл. 13.2.
//-- Таблица 13.2. Свойства объекта document --//
Свойства, отвечающие за цветовое оформление, хранят целочисленные значения. Другие свойства, кроме возвращающих коллекции, хранят строки. Особо следует рассмотреть свойства, которые возвращают коллекции: all, anchors, forms, frames, images и links. В этих коллекциях находятся объекты, описывающие соответствующие элементы HTML-документа.Коллекции – это тоже объекты, во многом похожие на массивы. Однако коллекции предоставляют доступ к своим элементам c помощью метода item(). Причем доступ может осуществляться как по номеру элемента в коллекции, так и по его имени (задается атрибутом id или name элемента). Нумерация элементов в коллекциях начинается с нуля. Кроме того, для коллекций предусмотрено свойство length, хранящее количество элементов в коллекции.
В качестве примера рассмотрим, как получить доступ к элементам следующего HTML-документа (пример 13.3).
//-- Пример 13.3. HTML-документ, к элементам которого нужно получить доступ --//
Главный заголовок документа
Текст документа… Щелкните Обычный текст Разноцветный текст Текст страницы… Кнопки мыши (л|c|п): Содержимое страницы… Перемещаемый текст
Если осуществлять доступ к элементам документа при помощи коллекции all с использованием номеров, то доступ ко всем элементам документа будет выглядеть следующим образом:
var elements = []; //Массив, в который скопируем ссылки на объекты страницы
var i;
for (i=0; i
В примере 13.3 в коллекции all содержится шесть элементов, поэтому массив elements после выполнения приведенного фрагмента программы должен содержать шесть элементов. Обратите внимание, как осуществляется доступ к элементам коллекции all: имя метода item() можно опускать.
Если бы доступ к элементам коллекции осуществлялся по имени HTML-элементов, то можно было бы получить объекты, описывающие заголовок и абзац, следующим образом:
var h = document.all(«main_part»);
var p = document.all("par1");
Возможно также прямое обращение к поименованным элементам документа. При использовании этого способа предыдущий фрагмент программы будет выглядеть следующим образом:
var h = main_part;
var p = par1;
Кроме достаточно богатого набора свойств, можно пользоваться методом write() объекта document для добавления к HTML-документу любого текста прямо из сценария. Метод write() принимает строку, в которой может содержаться любое HTML-форматирование, например:
document.write('Текст, напечатанный сценарием
')
При выполнении этого фрагмента программы не только появляется текст заголовка в окне браузера, но и создается объект с именем part2, к которому можно получить доступ с использованием той же коллекции all.
Использование методов open(URI_документа) и close() объекта document позволяет открывать новые HTML-документы и закрывать окно браузера с текущим документом, например:
open(«13.1.html») //Открываем пример 13.1 в новом окне
close(); //Пытаемся закрыть текущий документ
//-- Управление элементами документа --//
Итак, выше рассмотрено, как можно получить доступ к объектам, описывающим HTML-элементы документа. Теперь же рассмотрим, какие общие действия можно производить с полученными объектами.
Свойства, которые доступны для большинства элементов документа, приведены в табл. 13.3.
//-- Таблица 13.3. Основные свойства элементов документа --// 
В табл. 13.4 приводятся основные методы, которые можно использовать для манипулирования большинством элементов документа.
//-- Таблица 13.4. Основные методы элементов документа --// 
С использованием приведенных в таблицах свойств и методов можно осуществлять практически любые манипуляции с документом, показываемым в окне браузера. Сейчас дополнительно будут рассмотрены некоторые особенности доступа к элементам таблиц: доступ к строкам и ячейкам.
Объекты, описывающие таблицы, поддерживают внутреннюю коллекцию rows, с помощью которой организовывается доступ к отдельным строкам таблицы. Эти объекты поддерживают также методы insertRow(номер) и deleteRow(номер), которые принимают в качестве параметра номер строки и позволяют вставить или удалить строку таблицы. Если метод insertRow() вызвать без параметра, то строка будет добавлена в конец таблицы. При успешном добавлении строки метод insertRow возвращает ссылку на объект, описывающий созданную строку.
Каждым элементом коллекции rows является объект, одним из свойств которого является коллекция cells, содержащая объекты, управляющие ячейками таблицы. Каждый элемент коллекции cells позволяет оперировать конкретными ячейками таблицы. Добавление ячеек в строку таблицы можно осуществлять при помощи метода insertCell(номер) объектов коллекции rows. Удалять же ячейки можно, используя метод deleteCell(номер) объектов той же коллекции.
Наконец, как завершающий этап знакомства с объектом document создадим несколько страниц, использующих его возможности.
Страница следующего примера будет представлять собой своеобразный каталог изображений. Изображения вместе с текстом, описывающим их, будут помещены в таблице. При этом помещение и удаление данных должно выполняться интерактивно (то есть этим управляет пользователь). Внешний вид страницы примера приведен на рис. 13.1.
Рис. 13.1. Изменяемая страница (каталог изображений)
При реализации примера код сценария и HTML-код страницы расположены в отдельных файлах. Файл документа может иметь произвольное имя. Он выглядит следующим образом (пример 13.4).
//-- Пример 13.4. Файл HTML-документа --//
Код Описание Просмотр
В приведенном примере обратите внимание на элемент TBODY таблицы. Присвоив ему имя, вы можете работать с телом таблицы как с самостоятельной таблицей. Это же справедливо для THEAD и TFOOT. Обратите также внимание на получение значений, введенных в текстовые поля: в большинстве случаев можно пользоваться не методами getAttribute() и setAttribute(), а свойствами, которые имеют такие же названия, как и соответствующие атрибуты.
Теперь очередь файла с кодом сценария. В примере он имеет имя script_13_4.js (JS – стандартное расширение для файлов со сценариями на JavaScript) (пример 13.5).
//-- Пример 13.5. Файл script_13_4.js --//
//Функция принимает код, название, путь изображения и добавляет
//запись в таблицу function add_image(code, imagename, path){
if (valid_data(code, imagename, path)){
//Формирование строки таблицы (в части TBODY)
var row = mytable.insertRow();
//Ячейка с кодом рисунка row.insertCell().innerHTML = "" + code + "";
//Ячейка с названием row.insertCell().innerHTML = imagename;
//Ячейка с изображением row.insertCell().innerHTML = '';
}
}
//Функция проверяет правильность введеных данных function valid_data(code, imagename, path){
//Проверка, введены ли все значения if (code == "" || imagename == "" || path == ""){
alert("Введите значения во все поля");
return false;
}
else{
//Проверим, чтобы код изображения не дублировался var i;
for (i=0; i
alert("Изображение с кодом "+ code +" уже присутствует в таблице");
return false;
}
}
}
return true;
}
//Функция удаления записи из таблицы (код изображения
//вводит пользователь)
function delete_image(){
var code = prompt("Введите код удаляемого изображения", "");
if (code != null){
//Находим и удаляем запись var i;
for (i=0; i
mytable.deleteRow(i);
return true;
}
}
alert("Изображение с кодом " + code + " не найдено.");
}
}
Как видно, в файле script_13_4.js реализованы три функции. Первая функция add_image() используется для добавления записей в таблицу. Перед добавлением каждой новой записи она проверяет (с помощью функции valid_data()), чтобы были введены все данные (код, описание и путь изображения), а также, чтобы код нового изображения не дублировался кодом одного из изображений, ранее добавленных в таблицу. Третья функция delete_image() используется для удаления записи из таблицы.
Из примера 13.5 можно увидеть применение коллекций rows и cells таблицы на практике.
//-- Помещаем свое меню на страницу --//
Рассмотрим еще один довольно любопытный пример, позволяющий разнообразить оформление страницы. Используя таблицы, CSS и простые сценарии, создадим свое красочное меню. В пункты этого меню можно вставлять маленькие изображения. Пункты будут подсвечиваться при наведении на них указателя мыши. Внешний вид меню представлен на рис. 13.2.
Рис. 13.2. Внешний вид меню
Ниже приводится текст HTML-документа с созданным меню (пример 13.6).
//-- Пример 13.6. Документ с меню --//
onMouseOver = "item1.className = 'selected'"
onMouseOut = "item1.className = 'item'">
Первый пункт меню
onMouseOver = "item2.className = 'selected'"
onMouseOut = "item2.className = 'item'">
Второй пункт меню
onMouseOver = "item3.className = 'selected'"
onMouseOut = "item3.className = 'item'">
Третий пункт меню
onMouseOver = "item4.className = 'selected'"
onMouseOut = "item4.className = 'item'">
Четвертый пункт меню
onMouseOver = "item5.className = 'selected'"
onMouseOut = "item5.className = 'item'">
Пятый пункт меню
Из приведенного текста можно увидеть, каким образом используется таблица: пунктами меню являются строки таблицы. Чтобы строки таблицы подсвечивались при наведении указателя мыши, их стилевой класс динамически изменяется при обработке событий onMouseOver, onMouseOut. Изменив определения стилевых классов item, selected, menu, можно легко добиться нужного вида меню.
При выборе каждого из пунктов меню вызывается соответствующая функция-обработчик (см. значения атрибутов onClick для элементов TR). Все функции-обработчики собраны в файле menu.js, текст которого приводится ниже (пример 13.7).
//-- Пример 13.7. Содержимое файла menu.js --//
/*
В этом файле содержатся функции-обработчики для каждого пункта меню
*/
function item1_click(){
alert("Вы выбрали первый пункт меню");
//Другие действия…
}
function item2_click(){
alert("Вы выбрали второй пункт меню");
//Другие действия…
}
function item3_click(){
alert("Вы выбрали третий пункт меню");
//Другие действия…
}
function item4_click(){
alert("Вы выбрали четвертый пункт меню");
//Другие действия…
}
function item5_click(){
alert("Вы выбрали пятый пункт меню");
//Другие действия…
}
В каждую их приведенных выше функций помещен только код, сообщающий о работоспособности отдельного пункта меню.
Объект navigator
Глобальный объект navigator позволяет получить некоторую информацию о браузере, в котором происходит просмотр страницы со сценарием. Свойства объекта navigator, поддерживаемые большинством браузеров (по крайней мере, не только браузером Internet Explorer), приведены в табл. 13.5.
//-- Таблица 13.5. Свойства объекта navigator --// 
Часто использовать объект navigator нет необходимости, однако он может очень пригодиться при создании достаточно продвинутых и «живучих» веб-страниц, способных выбирать сценарии для выполнения в зависимости от браузера, в котором они открываются. Простейший код, позволяющий отличить браузер Internet Explorer, приведен ниже (пример 13.8).
//-- Пример 13.8. Определение браузера --//
function do_script(){
if (navigator.appName == "Microsoft Internet Explorer"){
//Код для Internet Explorer…
}
else{
//Код для другого браузера…
}
}
Объект window
Глобальный объект window предоставляет возможности по манипулированию окном браузера или окном фрейма, в котором открыт документ со сценарием. Кроме того, при помощи объекта window можно открывать новые окна, манипулировать фреймами, создавать таймеры (что очень нужно для анимации) и делать еще много полезного.
//-- Свойства и методы объекта window --//
Основные свойства объекта window приводятся в табл. 13.6.
//-- Таблица 13.6. Свойства объекта window --// 
В табл. 13.7 приведены основные методы объекта window.
//-- Таблица 13.7. Методы объекта window --// 
Как было сказано при описании метода open() в табл. 13.7, для этого метода предусмотрено несколько дополнительных параметров. Основные параметры перечислены в табл. 13.8.
//-- Таблица 13.8. Параметры метода open() --// 
Каждый из приведенных в таблице параметров может добавляться в строку параметры в виде: имя_параметра = значение. Так, для открытия документа в новом окне размером 300 × 400 можно использовать следующий вызов метода open():
window.open(«13.6.html», "", «width = 300, height = 400»);
Вообще, по крайней мере в браузере Internet Explorer, разделителем параметров в строке необязательно может быть запятая. Этот браузер нормально воспринимает в качестве разделителя и пробел, и точку с запятой. Еще при испытаниях метода open() в Internet Explorer замечена следующая особенность: если в строке задан хотя бы один параметр, то значения всех остальных параметров, принимающих значения 0 или 1, сбрасываются в 0. Так, созданное приведенным выше вызовом метода open() окно будет отображаться без строки состояния, панели инструментов, строки меню, полос прокрутки, строки адреса и будет неизменяемого размера.
Как можно было заметить, в табл. 13.8 приведены параметры, позволяющие задать ширину нового окна, но не приведены параметры, задающие положение окна. Эти параметры в действительности есть, но они отличаются для различных браузеров. Для Internet Explorer это left и top, а для Navigator – screenX и screenY.
//-- Примеры использования объекта window --//
Теперь рассмотрим, как можно использовать объект window для воспроизведения анимации в окне браузера.
Методы, позволяющие создавать таймеры, просто незаменимы при работе с анимацией средствами браузера. Суть данного примера состоит в последовательной загрузке изображений в элемент IMG. Интервал между сменами кадров выдерживается с помощью таймера. Всего кадров шесть (рис. 13.3).
Рис. 13.3. Изображения-кадры
Кадры меняются от первого до шестого, а затем от шестого до первого. Текст HTML-документа со сценарием, реализующим смену кадров, приведен ниже (пример 13.9).
//-- Пример 13.9. Анимация на странице --//
"http://www.w3.org/TR/html4/frameset.dtd">
В коде сценария количество кадров задается в переменной maxFrames. Предполагается, что кадры помещаются в папке frames и имеют имена вида номер.gif.
//-- Создание всплывающих окон --//
Иногда бывает удобно использовать дополнительные так называемые всплывающие окна, например, чтобы открывать в них список файлов для закачки, если речь идет о каком-то веб-архиве. Как вы уже догадались, в этом примере для открытия новых окон используется метод open() объекта window. Кроме открытия нового окна, в приведенном ниже примере 13.10 реализовано также его закрытие через 5 секунд.
//-- Пример 13.10. Создание и закрытие всплывающего окна --//
"http://www.w3.org/TR/html4/frameset.dtd">
чтобы открыть новое окно на 5 секунд.
Помните, что использовать всплывающие окна следует оправданно. Чаще всего пользователя очень раздражают появляющиеся неожиданно окна, например с какой-нибудь рекламой.
Объект style
Объект style, который для большинства элементов страницы поддерживается как свойство, предоставляет большие возможности по манипулированию стилем элементов. Эти возможности такие же, как и доступные при использовании таблиц стилей: можно получать и указывать значения тех же свойств, что и с использованием CSS. Сначала рассмотрим, как формируются имена свойств объекта style.
//-- Свойства объекта style --//
Итак, имена свойств CSS, состоящие из одного слова, в таком же виде и используются как имена свойств объекта style, например:
el.style.width = 100;
el.style.color = "red";
Здесь el предоставляет доступ к элементу страницы со значением атрибута id, равным «el».
В приложении 2, где приведен список основных свойств CSS, можно увидеть, что названия многих свойств состоят из нескольких слов, разделенных символом –. Так вот, имена таких свойств CSS преобразуются в имена свойств объекта style следующим образом: первое слово имени записывается cо строчной буквы, остальные слова начинаются с прописной буквы, все символы – из имени свойства удаляются. Ниже приведен пример для того же элемента el:
el.style.borderStyle = «solid»; //свойство border-style
el.style.borderColor = "blue"; //свойство border-color
el.style.borderBottomWidth = "10mm"; //свойство border-bottom-width
Как видно, значения свойств могут быть в тех же единицах измерения, которые применяются для CSS. Однако это хорошо до тех пор, пока не нужно производить вычисления с использованием текущих параметров элемента. Так, в приведенном выше примере el.style.borderBottomWidth вернет строковое значение «10mm». Удобно ли производить вычисления с такими значениями? В табл. 13.9 приведен перечень дополнительных свойств, поддерживаемых только интерпретатором браузера Internet Explorer, но значительно облегчающих программирование таких вещей, как перемещение элементов страницы.
//-- Таблица 13.9. Дополнительные свойства объекта style --// 
Примечание
При использовании описанных в этом разделе свойств объекта style следует учитывать одну неприятную особенность: до того, как сценарий может получить значение свойства, это значение должно быть установлено также с использованием сценария.
//-- Примеры использования объекта style --//
Теперь рассмотрим три примера, иллюстрирующих возможности элемента style. Первые два из них связаны с анимацией, а в последнем примере приводится реализация усовершенствованного меню на основе таблицы.
В первом примере реализуется перемещение изображений«шариков» внутри рамки (элемент DIV). Шарики имеют случайные первоначальные скорости и направления движения. Кроме того, при достижении стенок (рамки элемента DIV) они упруго он них отталкиваются. Страница примера выглядит так, как показано на рис. 13.4.
Рис. 13.4. Перемещение «шариков» внутри элемента DIV
Ниже приведен текст HTML-документа, который показан на рис. 13.4 (пример 13.11).
//-- Пример 13.11. Перемещающиеся элементы --//
"http://www.w3.org/TR/html4/frameset.dtd">
Здесь предполагается использование пяти изображений из папки balls. Как видно из примера, чтобы сценарий нормально работал с координатами и размером изображений, соответствующие свойства пришлось установить не в CSS, а опять же с помощью сценария.
Во внешний файл вынесен сценарий, отвечающий за перемещение изображений (файл balls.js). Cодержимое файла balls.js выглядит следующим образом (пример 13.12).
//-- Пример 13.12. Содержимое файла balls.js --//
//Массив со ссылками на объекты-изображения шариков var balls = [ball1, ball2, ball3, ball4, ball5];
//Массивы скоростей по горизонтали и вертикали (от –10 до 10)
var xSpeed = [rand(–10,10), rand(–10,10), rand(–10,10),
rand(–10,10), rand(–10,10)];
var ySpeed = [rand(–10,10), rand(–10,10), rand(–10,10),
rand(–10,10), rand(–10,10)];
//Минимальные значения координат изображений var minX = ball1.style.pixelLeft;
var minY = ball1.style.pixelTop;
//Максимальные значения координат изображений var maxX = area.style.pixelWidth + minX – balls[0].style.pixelWidth;
var maxY = area.style.pixelHeight + minY – balls[0].style.pixelHeight;
//Назначаем функцию обновления изображения, вызываемую по таймеру window.setInterval(redraw, 100);
//Функция генерации случайных значений function rand(min, max){
return Math.random()*(max–min)+min;
}
//Функция обновления координат и перерисовки изображений function redraw(){
var i, newX, newY;
for (i=0; i
newY = balls[i].style.pixelTop + ySpeed[i];
//Проверка столкновения с границами if (newX > maxX){
newX = maxX;
xSpeed[i] = –xSpeed[i];
}
else if (newX < minX){
newX = minX;
xSpeed[i] = –xSpeed[i];
}
if (newY > maxY){
newY = maxY;
ySpeed[i] = –ySpeed[i];
}
else if (newY < minY){
newY = minY;
ySpeed[i] = –ySpeed[i];
}
//Наконец, перемещаем изображение balls[i].style.pixelLeft = newX;
balls[i].style.pixelTop = newY;
}
}
В следующем примере рассматривается сценарий, позволяющий случайным образом изменять цвет текста, для которого задан определенный стилевой класс. Стилевой класс в примере имеет название colored. Пример разбит на две части: собственно сценарий (файл coloredtext.js) и HTML-документ, использующий возможности этого сценария.
Для начала рассмотрим сам сценарий, код которого приведен ниже (пример 13.13).
//-- Пример 13.13. Содержимое файла coloredtext.js --//
//Поиск всех элементов, имеющих класс «colored»
var i, j = 0;
var elements = [];
for (i=0; i
elements[j] = document.all(i);
j++;
}
}
//RGB-составляющие цвета текста var R = 0, G = 0, B = 0; //По умолчанию цвет черный
//Назначаем функцию перерисовки window.setInterval(redraw, 50);
//Функция генерации случайных значений function rand(min, max){
return Math.random()*(max–min)+min;
}
function redraw(){
//Вычисляем новые значения составляющих цвета
R += rand(–8, 8);
R = (R>=0) ? R : 0;
R = (R<=255) ? R : 255;
G += rand(–8, 8);
G = (G>=0) ? G : 0;
G = (G<=255) ? G : 255;
B += rand(–8, 8);
B = (B>=0) ? B : 0;
B = (B<=255) ? B : 255;
//Установка нового цвета для всех элементов for (i=0; i
"rgb(" + R + "," + G + "," + B + ")";
}
}
Этот сценарий работает следующим образом. После загрузки содержимого документа (для этого файл должен подключаться к документу перед закрывающим тегом ) производится просмотр всей коллекции all документа, и в массив elements помещаются ссылки на все элементы, имеющие стилевой класс colored. Кроме обозначения элементов, цвет которых нужно изменять, этот стилевой класс больше ни для чего не используется.
Изменение цвета в примере осуществляется по таймеру. Значения RGB-составляющих цвета случайным образом изменяются на небольшие значения, что обеспечивает эффект этакого плавного перехода цвета. Еще следует отметить, что цвет всех отобранных элементов всегда одинаков. Это сделано для упрощения программы.
В примере 13.14 показано, как используется рассматриваемый сценарий.
//-- Пример 13.14. Страница с разноцветным текстом --//
"http://www.w3.org/TR/html4/frameset.dtd">
Обычный заголовок
Разноцветный заголовок
Теперь создадим усовершенствованный вариант рассмотренного ранее меню. Сейчас это будет не просто набор пунктов, все время находящийся на странице, а настоящее меню, похожее на то, которое имеют многие Windows-приложения.
Пример реализован следующим образом: вверху окна организуется строка меню, в которой присутствуют два пункта, открывающих два различных меню. Первое меню выглядит так, как показано на рис. 13.5.
Рис. 13.5. Открыто первое меню
Второе меню, вызываемое при выборе второго пункта в строке меню, показано на рис. 13.6.
Рис. 13.6. Открыто второе меню
Как видно, оба меню появляются под соответствующими пунктами строки меню. Теперь рассмотрим, как реализован этот пример, а также какие существуют направления усовершенствования этого примера. Пример разбит на две части: HTML-документ и сценарий (файл popup_menu.js). Сначала разберем текст HTML-документа (пример 13.15).
//-- Пример 13.15. Документ со строкой меню --//
onMouseOver = "menu1_item1.className = 'selected'"
onMouseOut = "menu1_item1.className = 'item'">
Первый пункт меню
onMouseOver = "menu1_item2.className = 'selected'"
onMouseOut = "menu1_item2.className = 'item'">
Второй пункт меню
onMouseOver = "menu1_item3.className = 'selected'"
onMouseOut = "menu1_item3.className = 'item'">
Третий пункт меню
onMouseOver = "menu1_item4.className = 'selected'"
onMouseOut = "menu1_item4.className = 'item'">
Четвертый пункт меню
onMouseOver = "menu1_item5.className = 'selected'"
onMouseOut = "menu1_item5.className = 'item'">
Пятый пункт меню
onMouseOver = "menu2_item1.className = 'selected'"
onMouseOut = "menu2_item1.className = 'item'">
Первый пункт меню
onMouseOver = "menu2_item2.className = 'selected'"
onMouseOut = "menu2_item2.className = 'item'">
Второй пункт меню
onMouseOver = "menu2_item3.className = 'selected'"
onMouseOut = "menu2_item3.className = 'item'">
Третий пункт меню
onClick = "show_menu(menu1, main_menu1, main_item1)"
onMouseOver = "main_item1.className = 'selected'"
onMouseOut = "main_item1.className = 'item'">Показать меню1
onClick = "show_menu(menu2, main_menu1, main_item2)"
onMouseOver = "main_item2.className = 'selected'"
onMouseOut = "main_item2.className = 'item'">Показать меню2
Хотя документ практически не содержит текста, являющегося обычным содержимым страницы (ведь мы рассматриваем не наполнение страницы текстов, а меню), он все равно получился довольно объемным. Больше всего места в документе примера 13.5 занимают описания двух меню. Описание первого меню практически не отличается от рассмотренного ранее в примере 13.6. Второе же меню, обозначенное как menu2, создано по такому же шаблону.
В таблицу стилей пришлось добавить новый стиль menu_line. После этого очень просто создавать любое количество строк меню на странице. При создании строки меню основной работой является настройка пунктов, которые будут открывать нужные меню (см. определение пунктов в таблице с id, равным main_menu1 в примере 13.5).
При выборе пунктов из строки меню происходит вызов одной и той же функции сценария. Этой функции в качестве параметров передается ссылка на меню, которое нужно открыть, а также ссылки на строку меню и ссылка на пункт, к которому относится показываемое меню. При рассмотрении сценария станет ясно, зачем это нужно.
Ниже приводится текст сценария из файла popup_menu.js (пример 13.16).
//-- Пример 13.16. Содержимое файла popup_menu.js --//
/*
Функция показывает заданное всплывающее меню под заданным главным пунктом заданного меню
*/
var lastMenu = null; //Предыдущее показанное меню function show_menu(menu, main_menu, item){
if (menu.className == "menu"){
//Закрываем открытое меню hide_menu();
return;
}
if (lastMenu != null)
//Скрываем прошлое меню hide_menu();
//Определяем положение меню menu.className = "menu";
menu.style.top = main_menu.offsetTop + main_menu.clientHeight;
menu.style.left = main_menu.offsetLeft + item.offsetLeft;
lastMenu = menu;
}
//Функция скрывает меню, открытое ранее function hide_menu(){
lastMenu.className = "hidden";
lastMenu = null;
}
/*
Далее содержатся функции-обработчики для каждого пункта меню "menu1"
*/
function menu1_item1_click(){
hide_menu();
alert("Вы выбрали первый пункт в меню1");
//Другие действия…
}
function menu1_item2_click(){
hide_menu();
alert("Вы выбрали второй пункт в меню1");
//Другие действия…
}
function menu1_item3_click(){
hide_menu();
alert("Вы выбрали третий пункт в меню1");
//Другие действия…
}
function menu1_item4_click(){
hide_menu();
alert("Вы выбрали четвертый пункт в меню1");
//Другие действия…
}
function menu1_item5_click(){
hide_menu();
alert("Вы выбрали пятый пункт в меню1");
//Другие действия…
}
/*
Далее содержатся функции-обработчики для каждого пункта меню "menu2"
*/
function menu2_item1_click(){
hide_menu();
alert("Вы выбрали первый пункт в меню2");
//Другие действия…
}
function menu2_item2_click(){
hide_menu();
alert("Вы выбрали второй пункт в меню2");
//Другие действия…
}
function menu2_item3_click(){
hide_menu();
alert("Вы выбрали третий пункт в меню2");
//Другие действия…
}
Первая функция приведенного в примере 13.16 сценария отвечает за правильное отображение меню. Первый параметр является ссылкой на показываемое меню (таблица в HTML-документе).
Второй и третий параметры используются для корректного позиционирования показываемого меню. Перед тем как будет показано новое меню, скрывается то, которое было показано ранее (если оно имеется). Для этого ссылка на отображаемое меню сохраняется в глобальной переменной lastMenu.
Если пользователь открыл меню, но потом передумал выбирать какой-либо пункт, он должен иметь возможность закрыть меню. В рассматриваемом примере для закрытия меню пользователь должен повторно выбрать тот же самый пункт строки меню.
Основной объем сценария составляют обработчики выбора пунктов меню. Думаю, принцип именования функций-обработчиков в зависимости от принадлежности в меню очевиден. Новой же деталью является наличие в каждом обработчике вызова функции hide_menu(). Этим достигается закрытие меню после выбора одного из его пунктов.
Объект screen
Глобальный объект screen предоставляет набор свойств, которые сообщают сценарию некоторую информацию о возможностях видеосистемы компьютера пользователя.
Свойства объекта screen приводятся в табл. 13.10.
//-- Таблица 13.10. Свойства объекта screen --// 
Объект screen может представлять большой интерес для тех, кто заботится о том, чтобы пользователь получал максимум комфорта при просмотре веб-страниц независимо, например, от разрешения своего монитора.
Объект event
Глобальный объект event является большим подарком для тех, кто хочет создавать сценарии, досконально отслеживающие и адекватно реагирующие практически на все действия пользователя. Поддержка этого объекта очень сильно отличается в различных браузерах. В этом разделе рассмотрено использование объекта event только для браузера Internet Explorer.
//-- Свойства объекта event --//
Итак, используя браузер Internet Explorer, получить доступ к объекту event можно, как к свойству объекта window. Можно также указывать event как глобальный объект. Свойства объекта event приведены в табл. 13.11.
//-- Таблица 13.11. Свойства объекта event --// 
//-- Примеры использования объекта event --//
Для демонстрации работы с объектом event рассмотрены два небольших примера, использующие информацию о положении указателя и состоянии кнопок мыши.
В первом примере используется возможность получения координат указателя мыши относительно различных объектов документа. Текст HTML-документа примера приведен ниже. Обратите внимание, что благодаря «всплытию» событий отслеживать перемещение мыши можно, только написав обработчик события onMouseMove для элемента BODY (это самый верхний элемент, до которого доходит событие) (пример 13.17).
//-- Пример 13.17. Отслеживание положения мыши --//
Экранные координаты:
Оконные координаты:
Относительно элемента:
Относительно родителя:
Заголовок
Приведенный HTML-документ выглядит так, как показано на рис. 13.7.
Рис. 13.7. Отслеживание указателя и состояния кнопок мыши
В следующем примере реализовано перетаскивание элементов страницы с помощью мыши. Перетаскивание элемента начинается при нажатии левой кнопки мыши и заканчивается при ее отпускании. Операции начала перемещения, самого перемещения и «бросания» элемента на новом месте реализованы в обработчиках событий элемента BODY (пример 13.18).
//-- Пример 13.18. Перетаскивание элементов --//
onMouseUp = "fMoving = false">
Перемещаемый заголовок
Документ, текст которого приведен в примере 13.18, после перетаскивания элементов показан на рис. 13.8.
Рис. 13.8. Перетаскивание элементов страницы
Свободно позиционировать можно практически любой элемент страницы, однако наиболее эффектно выглядит перетаскивание изображений. Несмотря на кажущуюся ненужность, перетаскивание элементов может все же оказаться полезным при повышении «дружественности» интерфейса веб-страниц. Представьте себе, что вы, например, совершаете покупки в интернет-магазине. Понравился товар – перетаскиваете его изображение в свою корзину (определенная область окна). Хотите отказаться от покупки выбранного ранее товара – перетаскиваете его изображение за пределы корзины. Удобно, не так ли?
Глава 14
Создаем настоящий веб-сайт
После достаточно долгого изучения создания HTML-документов самих по себе, после изучения каскадных таблиц стилей и того, как добавляются и действуют сценарии в документах, наконец-то рассмотрим применение описанных ранее технологий на примере создания веб-сайта.
Эта глава посвящается непосредственно разработке и реализации веб-сайта. В следующей главе представлена довольно полезная информация, которая может пригодиться при публикации разработанного сайта в Интернете.
14.1. Содержание сайта
В начале определимся с содержанием сайта. Пусть это будет информационный ресурс, посвященный… яблокам. Да, это будет своеобразный сайт любителей яблок. Не столько важна тематика сайта, сколько решения, которые будут применены при его реализации.
Итак, наш информационный ресурс о яблоках будет содержать следующую информацию (кроме стартовой страницы и страницы информации о сайте):
• краткая история развития яблочной культуры;
• информация о пищевых свойствах яблок;
• информация о сборе и хранении яблок;
• информация о сортах яблок;
• рецепты приготовления различных блюд с использованием яблок.
Информация будет по большей части текстовой, а также немного таблиц. Нужно уделить особое внимание представлению рецептов блюд так, чтобы сайт можно было без проблем использовать как справочник по этим рецептам. Кстати, предположительно, что рецепты будут составлять основную долю информации, представленной на сайте.
14.2. Навигация по сайту
Для навигации по сайту будет использован усовершенствованный вариант всплывающего меню, рассмотренного в предыдущей главе. Меню организуем вверху страницы. Оно будет содержать следующие пункты.
• Главная (переход на главную страницу, файл index.html).
• Информация, содержит следующие пункты:
· История (файл history.html);
· Пищевая ценность яблок (файл values.html);
· Сбор и хранение яблок (файл collectsave.html).
• Сорта яблок, содержит следующие пункты:
· Летние (файл summer.html);
· Осенние (файл autumn.html);
· Зимние (файл winter.html);
· Позднезимние (файл deepwinter.html).
• Рецепты, содержит следующие пункты:
· Салаты с яблоками (файл salat.html);
· Супы с яблоками (файл soup.html);
· Мясные блюда с яблоками (файл meat.html);
· Рыбные блюда с яблоками (файл fish.html).
• О проекте (переход на страницу с информацией о сайте, файл about.html).
Внешний вид меню навигации показан на рис. 14.1. Реализация меню будет рассмотрена позже.
Рис. 14.1. Внешний вид меню навигации
14.3. Расположение файлов
Теперь определимся с тем, какие папки будут созданы и как в них будут располагаться файлы, используемые для сайта. Сразу отметим, что стартовый файл – index.html.
Пусть рассматривается папка, в которой находится сайт. Тогда ее содержимое можно представить следующим списком:
• все HTML-файлы сайта (index.html, history.html и т. д.);
• папка с именем css, в которой находятся используемые таблицы стилей;
• папка с именем script, в которой находятся все используемые сценарии;
• папка с именем apples, в которой находятся иллюстрации – картинки яблок (для чего они, см. далее).
В следующем разделе будет пояснено, почему все HTML-файлы сайта помещаются в одну папку, а не группируются в папки по своей тематике.
14.4. Реализация сайта
Шаблон и внешний вид страниц
Итак, внешний вид страниц строится на основе таблиц. Чтобы сделать наполнение страниц сайта как можно менее трудоемким, разработан HTML-файл шаблонной страницы (шаблон.html), его содержимое приведено в примере 14.1.
//-- Пример 14.1. Содержимое файла шаблон.html --//
Загружается сценарием–>
Чтобы сделать из приведенного в примере 14.1 файла страницу на конкретную тему, достаточно изменить название страницы, а также добавить на нее содержимое (место вставки содержимого указано HTML-комментарием). Страница шаблона выглядит так, как показано на рис. 14.2.
Рис. 14.2. Внешний вид страницы шаблона
Как можно заметить, кроме названия страницы, собственно текста страницы, а также расположения и размера главной таблицы, формирующей интерфейс страницы, ключевых слов и элементов, подключающих сценарии и таблицы стилей, в файлах создаваемого сайта нет жестко заданной информации. Это сделано для того, чтобы максимально облегчить последующую модификацию всех страниц сайта: меню, информация об авторских правах, информация в левой колонке формируются соответствующими сценариями при загрузке страниц.
Вообще для большей универсальности можно было бы поручить отдельному сценарию полностью формировать раздел HEAD документа (кроме содержимого элемента TITLE), а еще одному сценарию доверить формирование элемента BODY документа (кроме, естественно, содержимого страницы).
Однако за достигнутую с помощью сценариев универсальность надо платить, прежде всего тем, что пользователи, браузеры которых не поддерживают сценарии (что, однако, сегодня встречается крайне редко), смогут увидеть только текстовое наполнение страниц. Им будет недоступно меню, без которого в данной реализации сайта недоступна навигация.
Чтобы такого не случилось, можно добавить, например, в начало и конец текста каждой страницы гиперссылку на дополнительную страницу сайта, в которой содержится оглавление в виде гиперссылок. Тогда пользователь «ущербного» браузера сможет перемещаться по страницам сайта. Если же браузер пользователя поддерживает сценарии, то упомянутые гиперссылки целесообразно скрывать, для чего им можно присвоить идентификаторы, например index1, index2, а в один из файлов сценариев вставить следующие строки:
index1.style.display = «none»;
index2.style.display = "none";
Итак, после рассмотрения файла шаблона страниц сайта можно назвать первую причину, по которой все файлы помещаются в одной папке, – это отсутствие необходимости изменения значений атрибутов в тегах