Чиртик Александр Анатольевич - HTML: Популярный самоучитель
---
HTML: Популярный самоучитель, 0, <first-name/><last-name/><id>046ebc0b-b024-102a-94d5-07de47c81719</id>, Санкт-Петербург, 2008
Программирование
978-5-91180-937-9
***
В книге кратко и просто описывается язык HTML. Прочитав ее, вы научитесь создавать собственные веб-страницы, причем не только простые, но и содержащие таблицы, видео и звук. Более гибко оформить веб-страницы вам поможет рассмотренная в книге технология CSS. А при желании вы сможете сделать веб-страницы динамичными с помощью сценариев JavaScript: описание этого языка вместе с кратким описанием DOM (объектной модели документа) также приведено в этой книге. В последних главах рассматривается пример создания небольшого сайта с использованием всех рассмотренных в книге технологий, а также освещаются основные вопросы публикации сайта в сети Интернет.
Приведенные в книге коды можно найти на сайте www.piter.com.
***Александр Анатольевич Чиртик
HTML: Популярный самоучитель
Введение
Путешествуя по просторам Всемирной паутины, можно обратить внимание, как различаются между собой оформление и возможности веб-страниц. Однако не каждый пользователь знает, что почти все это разнообразие реализовано на основе одного средства разметки текста – HTML.
Язык разметки гипертекста HTML – стандартное средство представления информации в среде World Wide Web (WWW) в виде веб-страниц. Поскольку HTML является стандартизированным языком разметки, документы, написанные с его использованием, можно легко просматривать и редактировать на компьютерах с различным программным и аппаратным обеспечением.
Cуществует большое количество графических сред, предназначенных для быстрой и качественной разработки веб-сайтов. Тем не менее одной из замечательных особенностей HTML является то, что полноценные веб-страницы можно создавать, имея под рукой лишь простейший текстовый редактор. Создание веб-страниц с использованием HTML и CSS или JavaScript – уже не простое форматирование текста, а интересное занятие, очень похоже на программирование.
Большая часть представленной вашему вниманию книги посвящается именно HTML. В девяти первых главах последовательно изложен материал, в котором рассмотрены практически все возможности «чистого» языка HTML. После изучения этого материала вы научитесь создавать не только простые страницы, но и достаточно сложные сайты, а также познакомитесь со средствами HTML, позволяющими без привлечения дополнительных средств и технологий (например, CSS, DHTML) создавать привлекательный и функциональный интерфейс своих веб-страниц. Последние главы книги посвящены двум более новым технологиям, дополняющим HTML и позволяющим разнообразить и «оживить» статичные по своей природе HTML-документы, – CSS (каскадные таблицы стилей) и DHTML (динамический HTML) с основами DOM (объектной модели документа). В книге также приведен небольшой пример создания сайта целиком и освещены основные вопросы публикации созданного сайта в Интернете.
Большинство примеров, приведенных в книге, достаточно просты, чтобы можно было легко понять, какие именно их части относятся к рассматриваемой теме. При желании тексты примеров можно дополнить самостоятельно, тем более что экспериментирование – это наилучший способ узнать и запомнить как можно больше полезной информации.
Тексты программ на сайте издательстваТексты программ (листинги), приведенные в книге, вы можете скачать с сайта издательства по адресу http://www.piter.com/download.
От издательстваВаши замечания, предложения, вопросы отправляйте по следуюшему адресу электронной почты: gurski@minsk.piter.com (издательство «Питер», компьютерная редакция).
На сайте издательства http://www.piter.com вы найдете подробную информацию о наших книгах.
Глава 1
Введение в HTML
Итак, почему же HTML так широко распространен и используется для публикации информации в сети Интернет? Своей популярностью HTML во многом обязан удобству навигации между документами и простоте создания самих HTML-документов. Так, нажимая кнопку мыши над участком текста или изображением, можно открывать документы, расположенные в различных частях света на компьютерах с различными операционными системами.
Сеть из связанных между собой гипертекстовых документов является прозрачной для пользователя. Поэтому при работе с ней вас совершенно не заботят операции, которые осуществляются сотнями устройств глобальной компьютерной сети только для того, чтобы доставить на ваш компьютер содержимое HTML-документа.
1.1. Краткая история HTML
Началось все для HTML (а вместе с ним и для WWW) в конце 1980-х годов, когда у ученых из Европейской лаборатории элементарных частиц (CERN) возникла необходимость обмениваться множеством различных документов при помощи быстро развивающейся сети Интернет. Тогда необходимо было придумать способ публикации документов в сети таким образом, чтобы к любому нужному документу можно было легко получить доступ. К тому же нужно было, чтобы документы отображались на всех компьютерах одинаковым образом.
Решение поставленной задачи было найдено сотрудником CERN Бернерс-Ли. В 1989 году Тим Бернерс-Ли создал новый язык форматирования документов. В его основу был положен другой ранее созданный язык – SGML, который предусматривал установку связей между документами с помощью гиперссылок. Новый язык разметки был назван HTML (HyperText Markup Language). Этот же человек реализовал и первую программу для просмотра HTML-документов – браузер.
Затея с гипертекстом очень быстро прижилась. Вскоре в Интернете выросла большая сеть гипертекстовых документов, которую постепенно стали называть World Wide Web. К тому же в 1993 году команда программистов, руководителем которой являлся основатель компании Netscape Марк Андриессен, разработала первый браузер, имеющий полноценный графический интерфейс и позволяющий работать с мышью, – Mosaic. Это не могло не добавить популярности быстро развивающейся Сети.
Со временем Интернет стал востребован не только учеными: к нему пришли и рядовые пользователи, причем их число неуклонно возрастало. Для многих было очевидно, что HTML, не предполагающий никакой динамики в создаваемых с его помощью документах, достаточно скучен и невзрачен. Это дало толчок развитию технологий CSS, введению поддержки апплетов Java, а после и сценариев (первым языком был JavaScript).
Нельзя не отметить, что с образованием и ростом Сети создателей HTML не на шутку взволновала «чистота» своего детища. Существовали небезосновательные опасения, что производители браузеров, которые скоро должны были прийти на рынок, будут «баловать» своих пользователей фирменными нововведениями, которые, естественно, будут поддерживаться только фирменными браузерами. В 1994 году была создана организация, взявшая на себя разработку единых стандартов развития WWW – World Wide Web Consortium (W3C). Эта организация и занялась подготовкой стандартов HTML (начиная с HTML 2.0). Правда, несмотря на наличие W3C, нововведения в HTML начинали поддерживаться производителями браузеров гораздо раньше, чем эта организация их стандартизировала (так, например, обстояло дело с фреймами, с внедрением сценариев в HTML-документы, с объектной моделью документов и т. д.).
Организация W3C существует и сейчас. Она занимается теми же вопросами стандартизации, однако уже давно не HTML (последняя спецификация HTML 4.01 была принята 24 декабря 1999 года). Развитие языка HTML сегодня практически завершено, а основные усилия W3C сконцентрированы на работе над более новыми технологиями, например расширяемым языком разметки XML, языком преобразований XSLT и др. (если интересно, можно заглянуть на www.w3.org – официальный сайт этой организации).
Язык HTML в том виде, в котором он существует сейчас, обладает большим потенциалом представления информации. Причем он рассчитан не только на пользователей персональных компьютеров. Документы HTML можно просматривать на очень большом количестве различных по своим возможностям устройств: от черно-белого экрана мобильного телефона до телетайпа или терминала. Кроме того, в последние версии HTML включен ряд возможностей, облегчающих представление документов неграфическими средствами (например, речевыми синтезаторами), позволяющими пользоваться услугами WWW людям с физическими недостатками.
1.2. Базовые понятия HTML
После маленького исторического экскурса можно наконец-то перейти к практической части. Перед подробным рассмотрением HTML нужно ознакомиться с основными понятиями, используемыми в книге, а также с базовыми элементами языка HTML.
Для начала следует разобраться с тем, что такое HTML-документ. HTML-документ – это обычный текстовый документ, созданный в любом текстовом редакторе, например в Блокноте, и оформленный в соответствии с правилами языка HTML. Для файлов, содержащих HTML-документы, используется расширение HTML или HTM (например, MyWedPage.html или MyWedPage.htm). Расширение HTM использовалось ранее для корректного отображения имен файлов в формате MS-DOS. На самом деле неважно, какое из приведенных расширений использовать.
Далее в книге HTML-документы могут называться просто документами, а также страницами и веб-страницами. Под сайтами в тексте книги подразумевается несколько документов, объединенных единой системой навигации.
Элементы
Элемент – это конструкция языка HTML, содержащая данные. HTML включает в себя различные типы элементов, которые позволяют задавать абзацы, гипертекстовые ссылки, списки, таблицы, изображения и т. д. Конструкция Привет ! представляет собой элемент. Обычно элемент можно разделить на три части. Первая часть – – называется открывающим тегом (англ. tag). Далее идет содержание элемента, которое в данном случае состоит из слова Привет !. И наконец, является закрывающим тегом. Как видно, название элемента (P) присутствует и в открывающем, и в закрывающем теге. Регистр символов в названии элемента не имеет значения. Однако в соответствии с соглашениями, принятыми большинством разработчиков, в примерах данной книги названия элементов записаны в верхнем регистре.
Открывающий и закрывающий теги нужны для указания начала и конца элемента. Теги всегда начинаются символом < и заканчиваются символом >. В закрывающем теге перед его именем помещается символ /. Для некоторых типов элементов допускается отсутствие закрывающего тега (например, элемент P, указывающий начало абзаца). Существуют также элементы, не имеющие закрывающего тега, то есть его не просто можно опустить, а он вообще не существует в языке.
Атрибуты
Элементы могут содержать параметры, называемые атрибутами. Атрибуты могут иметь определенные значения (по умолчанию или устанавливаемые авторами). Пара атрибут/значение указывается в начальном теге элемента перед символом >, например:
Каждому атрибуту может быть присвоено значение определенного типа. В приведенном примере указание атрибута bgcolor (имеющего тип %Color) в элементе BODY приведет к тому, что цвет фона страницы станет красным. Значения атрибутов заключаются в кавычки, хотя в определенных случаях кавычки необязательны.
В начальном теге элемента может быть указано любое количество допустимых пар атрибут/значение, разделенных пробелами, например:
В приведенном примере устанавливаются красный цвет фона страницы и синий цвет основного текста. При установке значений нескольких атрибутов порядок их записи не имеет значения. Важно отметить, что регистр, в котором записываются названия атрибутов, также не имеет значения. Однако для повышения читабельности HTML-кода названия атрибутов обычно записываются в нижнем регистре (как в приведенных выше и ниже примерах).
Существует любопытная разновидность атрибутов – булевы атрибуты. Для них возможны только два значения: ИСТИНА и ЛОЖЬ. По умолчанию эти атрибуты имеют значение ЛОЖЬ. Чтобы присвоить им истинное значение, достаточно просто указать имя этого атрибута, не присваивая ему никакого значения. Ниже приведен пример, в котором устанавливаются истинные значения двух атрибутов HTML-элемента INPUT:
Вложенные элементы
Важным моментом HTML является возможность использования вложенных элементов. Элемент, находящийся внутри другого элемента, называется вложенным. Пример использования вложенных элементов для задания начертания шрифта:
Курсив-Полужирный курсив-Курсив
При обработке приведенного HTML-кода получится страница, показанная на рис. 1.1 (как и чем обрабатываются HTML-документы, будет рассказано далее).
Рис. 1.1. Применение вложенных элементов
На приведенном рисунке видно, как действие внешнего (или родительского) элемента I (задание курсива) дополняет действие внутреннего элемента B (задание полужирного начертания шрифта).
При использовании вложенности следует помнить, что вложенные элементы должны закрываться до того, как будут закрыты внешние элементы. Так, следующий пример является неверным:
Неправильное закрытие внутреннего элемента
до закрытия внешнего
Блочные и встроенные элементы
Различают также блочные и встроенные элементы (иногда их называют элементами уровня блока и элементами уровня текста). Основным отличием блочных элементов является форматирование их браузером как обособленной части документа. Блочные элементы задаются парными тегами и могут содержать вложенные блочные или встроенные элементы и, естественно, текст.
Встроенные элементы обычно находятся прямо в тексте и могут иметь содержимое или не иметь его. Примерами встроенных элементов могут служить приведенные ранее элементы B и I, а также элементы перевода строки, изображения и т. д. В отличие от блочных элементов, встроенные элементы могут содержать только текст или вложенные встроенные элементы.
1.3. Просмотр HTML-документа
Сам по себе HTML-документ практически нечитабелен для обычного пользователя. Для чего же тогда применяется форматирование документа с использованием HTML? Для просмотра HTML-документов используются специальные программы – браузеры. При открытии HTML-документа браузер распознает теги и учитывает их при отображении текста. Если по каким-то причинам (например, при ошибке в записи тега) тег не распознается браузером, то он игнорируется.
Существует большое количество программ, позволяющих просматривать HTML-документы. Это такие распространенные приложения, как Internet Explorer, Opera, Firefox, Netscape Navigator.
Ниже приведен пример простого HTML-документа (назначение используемых элементов будет рассмотрено далее в книге) (пример 1.1).
Пример 1.1. HTML-документ
Простой HTML-документ
Заголовок
Текст страницы
Этот HTML-документ отображается браузером Internet Explorer так, как показано на рис. 1.2.
Рис. 1.2. Отображение HTML-документа
1.4. Универсальный идентификатор ресурса URI
Чтобы полностью понимать, как происходит взаимодействие HTML-документов, переход между страницами и откуда вообще компьютер пользователя получает данные при работе с сетью, нужно рассмотреть, как и к чему осуществляется доступ при помощи Глобальной сети.
Многие виды ресурсов, размещенных в Интернете, независимо от того, являются ли они HTML-документами, рисунками или файлами архива, чаще всего представляют собой файлы на жестком диске компьютера (сервера), подключенного к сети. С каждым ресурсом сопоставляется значение, по которому можно однозначно определить его расположение, – универсальный идентификатор ресурса или URI (Universal Resource Identifier). URI широко используются как при самостоятельном доступе пользователя к ресурсу (когда, например, пользователь сам вводит URI в адресной строке браузера), так и при переходе между веб-страницами. URI также используются в HTML-документе для указания браузеру, где искать ресурсы (например, рисунки), используемые в самом документе.
Примечание
В литературе также часто применяется обозначение URL. Следует отметить, что URI является более общим понятием, включающим в себя URL: любой URL является универсальным идентификатором ресурса и подчиняется тем же правилам, что и URI.
Идентификатор ресурса URI состоит из трех частей: из наименования механизма доступа к ресурсу, доменного имени компьютера и пути файла ресурса. Для пояснения сказанного можно рассмотреть пример:
http://www.somesite.com/info/examples/ex_1.html
Здесь можно увидеть, что для доступа к ресурсу, которым в данном случае является HTML-документ, используется протокол HTTP (Hyper Text Transfer Protocol). Ресурс хранится на компьютере, имеющем доменное имя somesite.com в файле ex_1.html, расположенном в папке /info/examples.
При помощи URI можно также ссылаться на части HTML-документов, например:
http://www.somesite.com/info/examples/ex_1.html#description
При использовании этого URI можно получить доступ к части HTML-документа, имеющей имя description (то, как создавать имена для фрагментов HTML-документов, будет рассмотрено в гл. 5).
URI также позволяют ссылаться на ресурсы в пределах одного компьютера. При этом указывается относительный путь ресурса. Например, чтобы из HTML-документа, расположенного в папке /info/examples, сослаться на файл /info/files/file1.jpg, достаточно задать URI /files/file1.jpg. В HTML-документах при помощи подобных ссылок указываются пути рисунков и других объектов, используемых в документах, но непосредственно не хранимых в них.
В общем случае URI считаются нечувствительными к регистру символов. Однако для полной уверенности в правильности интерпретации URI все же обращайте внимание на регистр символов в URI гиперссылок, рисунков и т. д. Это полезно для устранения таких ситуаций, когда, например, при работе сайта на компьютере под Windows все гиперссылки работают, а при помещении сайта на UNIX-сервер работать отказываются (в UNIX имена файлов чувствительны к регистру).
Глава 2
Структура HTML-документа
В идеальном случае HTML-документ состоит из трех частей, в которых описывается следующая информация:
• данные о версии используемого HTML;
• заголовок документа;
• тело документа.
Выражение «в идеальном случае» означает то, что один или несколько элементов могут пропускаться: если HTML-документ содержит хоть какой-то текст, пусть без информации о версии, без заголовка и без явного указания тела документа, то браузер все равно отобразит информацию, содержащуюся в этом документе, при этом применяя к тексту еще и форматирование. Правда, в этом случае заведомо неизвестно, насколько исказится содержимое документа.
Итак, полноценный (полный, стандартный) HTML-документ должен содержать все три указанные элемента структуры или хотя бы два последних элемента. Далее приводится пример простейшего HTML-документа, содержащего все указанные структурные элементы (пример 2.1).
Пример 2.1. Задание структуры HTML-документа
HTML-документ
Заголовок
Первый абзац
Второй абзац
2.1. Информация о версии HTML
Первая строка HTML-документа содержит информацию об используемой версии языка HTML: 2.0, 3.0, 3.2, 4.0 и 4.01 (используется в данной книге). Здесь же задается, какое определение типа документа (DTD) должен использовать браузер при интерпретации содержимого документа. Для указания версии при использовании HTML 4.01 можно использовать одно из следующих определений типа документа:
• – использовать строгое определение HTML версии 4.01, в которое не включаются нежелательные для версии 4.01 элементы и атрибуты, а также фреймы;
• – применять переходное определение HTML версии 4.01, в которое включаются нежелательные для версии 4.01 элементы и атрибуты;
• – использовать определение HTML версии 4.01, в которое включаются нежелательные для версии 4.01 элементы и атрибуты, а также фреймы.
В информации о версии языка также можно указать URI, откуда браузер может загрузить последнюю версию файла с DTD-определением используемой версии HTML. Для трех указанных выше вариантов определений URI следующие (в том же порядке):
• http://www.w3.org/TR/html4/strict.dtd;
• http://www.w3.org/TR/html4/loose.dtd;
• http://www.w3.org/TR/html4/frameset.dtd.
Пример использования одного из приведенных URI:
Информация о версии HTML, безусловно, должна использоваться при профессиональной разработке HTML-документов. Далее будет рассказано еще об одном способе задания версии HTML, который является нежелательным с точки зрения использования чистого языка HTML 4.01, но все же имеет место. В большинстве примеров данной книги версия HTML вообще не указывается для того, чтобы не загромождать HTML-код строками, не относящимися к рассматриваемым примерам.
Однако при создании документов, предназначенных для публикации в Интернете, следует обязательно позаботиться о включении определения версии HTML в документ, особенно если в нем используются сценарии (будут рассмотрены в гл. 12 и 13).
2.2. Элемент HTML
Корневым элементом структуры HTML-документа является одноименный элемент HTML. Его использование позволяет явно указать браузеру, что им обрабатывается HTML-код. Элемент HTML содержит в себе все остальные структурные части HTML-документа, например HEAD и BODY, и задается при помощи парных тегов и . Все, что находится между этими тегами, – есть HTML-документ.
Теги и являются необязательными. В открывающем теге можно задать используемую версию HTML при помощи атрибута version. Например, при использовании HTML 4.01 можно написать так:
Это и есть второй вариант задания версии HTML. Правда, при использовании объявления типа документа задание версии в элементе HTML является излишним. На текущем этапе изучения HTML не стоит особо волноваться о том, правильно ли вы указываете версию HTML, ведь HTML-документы нормально отображаются большинством современных браузеров без всякого указания версии HTML, также как и без указания атрибутов, которые все-таки необходимо рассмотреть.
В элементе HTML можно также задать основной язык документа (атрибут lang) и направления текста (атрибут dir). Атрибут dir может принимать одно из двух значений: RTL или LTR (задают направление текста справа налево или слева направо соответственно). Для указания языка в атрибуте lang используется сокращенное стандартное обозначение языка, например: "ru", "en", "de" и т. д. Ниже приведены примеры задания языка и направления текста:
Задавать атрибуты lang и dir совершенно не обязательно. Они доступны для большинства HTML-элементов (не поддерживаются только для элементов APPLET, BASE, BASEFONT, BR, FRAME, FRAMESET, IFRAME, PARAM, SCRIPT).
Теперь, наконец, можно рассмотреть, как задаются наиболее важные элементы HTML-документа – заголовок и тело документа.
2.3. Заголовок
В заголовке (его еще называют «шапкой») HTML-документа содержатся сведения о документе: название (тема документа), ключевые слова (используются поисковыми системами), а также ряд других данных, которые не являются содержимым документа.
Элемент HEAD
Заголовок HTML-документа содержится в элементе HEAD. Для задания этого элемента используются парные теги и . Все, что находится между двумя указанными тегами, относится к заголовку HTML-документа. Теги и не являются обязательными, но все же лучше их указывать, чтобы можно было легко определить, что именно относится к заголовку HTML-документа (браузер определит это автоматически, независимо от наличия тегов и ). В простых примерах книги элемент HEAD опускается, если заголовок документа содержит только элемент TITLE (информация об этом элементе приведена далее).
Рассматриваемые далее элементы TITLE и META являются информативными элементами заголовка HTML-документа. Они определяются внутри элемента HEAD (между его тегами).
...
...
Элемент TITLE
В самом простом случае в заголовке документа содержится только один элемент – TITLE. Он используется для задания названия HTML-документа. Этот элемент задается при помощи парных тегов и , причем только один раз. Текст, находящийся между приведенными тегами, воспринимается и отображается браузерами (и поисковыми системами) как название документа. К тексту названия нельзя (бессмысленно) применять форматирование.
Название документа должно быть кратким, но информативным и должно адекватно отражать содержание документа, например:
Программирование на Java. Введение
Операторы языка C++
Использование тегов и является обязательным. Правда, браузер (например, Internet Explorer) обработает документ и без этих тегов. Но ведь при публикации документов в Интернете документы надо как-то обозначить, чтобы пользователь знал, имеет ли документ отношение к нужной ему теме.
Элемент BASE
Элемент BASE, появляющийся в заголовке HTML-документа, позволяет задать базовый URI, относительно которого разрешаются все относительные URI в документе.
Элемент BASE задается одиночным тегом . Его атрибуту href присваивается URI, который будет считаться базовым для HTML-документа, например:
...
При таком использовании элемента BASE, где бы ни был расположен открытый HTML-документ, рисунок, задаваемый элементом IMG, будет загружаться из файла D:\test\image.gif.
Метаданные
В заголовке документа помещаются также некоторые важные данные, используемые браузерами и поисковыми системами, но в большинстве случаев не отображаемые, – метаданные. Задание метаданных представлено как задание значений переменным (иногда говорят про задание значений свойствам), имеющим определенные имена, осуществляемое с помощью HTML-элемента META (элемент задается одиночным тегом ). При использовании элемента META обычно задают значения следующих атрибутов:
• name – имя переменной (значения чувствительны к регистру символов, по крайней мере, официально);
• content – значение переменной;
• lang – код языка, для которого действительно значение переменной; может быть задано несколько значений одной переменной для разных языков;
• http-equiv – применяется для указания браузеру дополнительных параметров по обработке HTML-документа, значением атрибута является название параметра (в отличие от name, значения не чувствительны к регистру символов).
Перечисленные атрибуты обычно используются парами: name и content или http-equiv и content. Атрибут lang применяется, если дополнительно нужно указать значения атрибутов для различных языков.
Сначала будет рассмотрено использование пары name и content. Эта пара атрибутов позволяет задавать значения переменным, которые часто, но не всегда используются поисковыми системами и другими сервисами Интернета: описание и авторство документа, ключевые слова и еще много информации. В табл. 2.1 приведены основные значения атрибута name, а также дана расшифровка возможных значений атрибута content в каждом случае.
Таблица 2.1. Значения атрибута name и соответствующие значения атрибута contentНа практике полезным оказывается задание переменной, содержащей список ключевых слов. Ведь именно этот список воспринимается поисковыми системами при поиске по запросу пользователя. По этой причине перед публикацией ваших творений в Интернете позаботьтесь о том, чтобы список состоял из слов, наиболее часто используемых (или очевидных) при запросах на тему, соответствующую или близкую теме вашего документа.
При создании списка ключевых слов крайне удобно использование атрибута lang для указания различных наборов ключевых слов на различных языках (и для различных языков поиска). Например, как в следующем случае:
В приведенном примере использованы все возможные значения атрибута 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, типа & и прочие
Снова кнопки
В 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-текст c использованием разметки
Даже таблицы, не говоря уже об изображениях:
Таблица
12
34
Внимание!
В тексте между тегами и правильного 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
Пункт 1
Пункт 2
Пункт 3
Пункт 4
Пункт 5
Пункт 6
size = 4
Пункт 1
Пункт 2
Пункт 3
Пункт 4
Пункт 5
Пункт 6
В тексте примера вы видите также упомянутый ранее 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
Пункт 1.1
Пункт 1.2
Пункт 1.3
Пункт 2.1
Пункт 2.2
Пункт 2.3
size = 4
Пункт 1.1
Пункт 1.2
Пункт 1.3
Пункт 2.1
Пункт 2.2
Пункт 2.3
Меню, описанные в примере 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-элементов
H1 {color: red; font-family: arial}
H2, H3 {color: blue; font-family: courier}
P {font-style: italic}
Заголовок первого уровня
Текст абзаца
Заголовок второго уровня
Текст абзаца
Заголовок третьего уровня
Текст абзаца
На рис. 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. Использование стилевых классов
Использование стилевых классов
H1.arial {color: red; font-family: arial}
H2.newroman {color: blue; font-family: newroman}
P.italic {font-style: italic}
.bold {font-weight: bold}
Заголовок первого уровня
Текст абзаца
Измененный заголовок первого уровня
Заголовок второго уровня
Курсивный текст абзаца
Измененный заголовок второго уровня
Полужирный текст абзаца
Страница, формируемая браузером 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
#left_pointer {width: 60; height: 120}
#right_pointer {width: 120; height: 60}
Рисунки без применения стилей
А к этим рисунками применен стиль (изменение размера)
В данном случае при помощи CSS задаются параметры отображения двух рисунков. Как это реализуется браузером, можно увидеть на рис. 10.3.
Рис. 10.3. Задание стилей отдельных элементов
Задать параметры отображения только одного элемента рассмотренным способом можно потому, что значение атрибута id, если оно используется, обычно делается уникальным.
Контекстные селекторы
Помимо селекторов, связанных с определенными HTML-элементами, стилевыми классами или идентификаторами элементов, можно создавать и более сложные селекторы. Они подходят для случаев, когда стиль должен применяться только к элементам документа, находящимся внутри какого-то другого элемента. Например, средствами CSS можно особым образом оформить элементы LI, находящиеся внутри элемента LO, принадлежащего к различным стилевым классам (пример 10.5).
Пример 10.5. Применение сложных селекторов
Сложные селекторы
OL.ordinary_list LI {}
OL.italic_list LI {font-style: italic}
OL.colored_list LI {color: green; background-color: yellow}
Список, оформленный обычным шрифтом
Элемент списка
Элемент списка
Список, оформленным курсивным шрифтом
Элемент списка
Элемент списка
Раскрашенный список
Элемент списка
Элемент списка
Чтобы применить стиль к каждому отдельному элементу списков, не потребовалось назначать никакие стилевые классы для самих элементов списков. Потребовалось лишь отнести сами списки (элементы 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 будет отображаться подчеркнутым, шрифтом синего цвета с полужирным начертанием.
...
P {font-weight: bold}
.p {color: blue}
Текст абзаца
...
Если бы свойства, заданные, например, для стилевого класса и с помощью встроенного стиля, перекрывались, то они были бы переопределены в соответствии с приведенным выше списком (не забывайте также про модификатор important).
Еще одной особенностью применения стилей является наследование. Это означает, что настройки стиля родительского HTML-элемента автоматически применяются к вложенным элементам. Например, настройки шрифта, заданные для BODY, будут применены по умолчанию ко всему тексту документа. Если же для абзацев (P) также заданы другие стилевые настройки, то они будут дополнять или переопределять настройки, назначенные элементу BODY. Кроме того, стили наследуются в зависимости от того, как они записаны в таблице стилей. Так, в приведенном ниже фрагменте настройки шрифта наследуются в следующем порядке (пример 10.6):
• стиль элемента BODY имеет настройки стиля по умолчанию, кроме свойства font-size, значение которого явно задается в таблице стилей;
• стиль элемента P наследует настройки элемента BODY и переопределяет цвет шрифта;
• стиль элемента P класса italic добавляет к шрифту курсивное начертание;
• «инлайн-стиль» элемента P класса italic наследует настройки последнего и добавляет полужирное начертание шрифта.
Пример 10.6. Наследование стилей
Наследование свойств стиля
BODY {font-size: 18}
P {color: blue}
P.italic {font-style: italic}
Текст 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 эффект достигнут применением совсем простой таблицы стилей:
UL.list {list-style-image: url("marker.gif")}
UL.compact_list {list-style-image: url("marker.gif");
list-style-position: inside}
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
Ячейка с разными границами
В этом небольшом примере задействованы все перечисленные выше виды границы. Внешний вид самих границ хорошо виден на рис. 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. Использование границ различной толщины
Толщина границ элементов
TD {border-style: solid}
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. Фон страницы и фон элементов
Фон
BODY {padding-left: 40px}
BODY {background-image:url(background.jpg); background-repeat:repeat-y}
P.p1 {background-color: blue}
P.p2 {background-image: url(P_background.GIF)}
STRONG {background-color: yellow}
Абзац с фоном одного цвета
Абзац с рисунком в качестве фона
В этом примере при помощи свойств 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
Использование элементов DIV и SPAN
.person {border-style: solid; border-width: 1;
background-color: fuchsia; width: 80%; padding: 3}
.person2 {border-style: solid; border-width: 1;
background-color: fuchsia; width: 80%; padding: 3;
left: 20%; position: relative}
.ptitle {font-weight: bold}
Список сотрудников
Имя: Василий
Фамилия: Пупкин
Должность: Директор
Телефон: 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-документа (не могут быть заданы вообще). Но в частности в примере с гиперссылками сам браузер при показе документа обладает информацией, по каким гиперссылкам переходит пользователь, а по каким нет, где находится указатель мыши и какая часть документа получила фокус ввода. По этим признакам элементы документа можно объединить в виртуальные группы – псевдоклассы, на которые можно ссылаться из таблицы стилей.
Задание параметров каждого вида гиперссылок в остальном полностью аналогично заданию этих параметров для обычного текста. Например:
A:link {text-decoration: none}
A:hover {font-style: italic}
A:active {color: red}
A:visited {color: green; font-weight: bold}
В документе, содержащем приведенную таблицу стилей, все непосещенные гиперссылки не будут подчеркнуты. Посещенные будут отображаться полужирным подчеркнутым шрифтом зеленого цвета. Активные (но еще не посещенные) гиперссылки будут иметь красный цвет, а при наведении указателя мыши начертание шрифта всех типов гиперссылок будет становиться курсивным.
11.10. Псевдоклассы текста
Помимо гиперссылок, еще как минимум два псевдокласса предусмотрены для обычного текста. При помощи этих псевдоклассов можно ссылаться на первую букву или первую строку текста, содержащегося в HTML-элементе.
Для ссылки на первую букву текста используется псевдокласс first-letter. Его можно использовать, например, для создания буквицы (см. рис. 11.10). Правда, добиться такого же результата можно и при помощи рассмотренного далее HTML-элемента SPAN в сочетании со стилем CSS, примененным к этому элементу. Но теперь речь идет не об элементе SPAN, а о псевдоклассе first-letter.
Итак, для создания буквицы, показанной на рис. 11.10, используется приведенный в примере 11.6 HTML-код.
Рис. 11.10. Заглавная буква страницы
Пример 11.6. Создание буквицы
Первая буква
P.first_par:first-letter {font-size:300%; font-weight:bold; color:blue}
Первая буква этого текста будет большой и красивой буквой синего цвета.
Все последующие абзацы будут начинаться по-обычному
Как было сказано ранее, в CSS можно также ссылаться на первую строку текста HTML-элемента. Для этого используется псевдокласс first-line. Этот псевдокласс бывает очень полезен, так как нельзя точно предугадать, где браузер разорвет строку (если, конечно, не используется запрет разрывов строки, рассмотренный в гл. 3). Место разрыва первой строки зависит от ширины окна браузера или ширины HTML-элемента, в который помещен текст, а также от размера шрифта и стиля текста. Пример выделения первых строк абзацев приведен на рис. 11.11.
Рис. 11.11. Особое оформление первых строк абзацев
Текст HTML-документа, показанного на рис. 11.11, приведен ниже (пример 11.7).
Пример 11.7. Особое оформление первых строк абзацев
Первая строка
P:first-line {font-weight:bold; color:blue}
P.big {font-size:150%}
P.small {font-size:75%}
Абзац, оформленный шрифтом по умолчанию. ...
Абзац, оформленный шрифтом большого размера. ...
Абзац, оформленный шрифтом малого размера. ...
Как видите, использование псевдокласса 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. Документ для различных устройств
Использование встроенной таблицы стилей
H1 {color: black; font-family: newroman; text-align: center}
H2, H3 {color: black; font-family: newroman; text-align: center}
P {font-style: normal; font-weight: normal; color: black}
BODY {background-color: black}
H1 {color: red; font-family: arial; text-align: center}
H2, H3 {color: yellow; font-family: courier; text-align: left}
P {font-style: italic; font-weight: bold; color: white}
Заголовок первого уровня
Текст абзаца
Заголовок второго уровня
Текст абзаца
Заголовок третьего уровня
Текст абзаца
На экране монитора документ выглядит так, как показано на рис. 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. >, >=, 12)
if (a 25
В приведенном примере проиллюстрирована одна проблема, с которой часто сталкиваются начинающие программисты на C-подобных языках. Здесь специально проставлены отступы так, чтобы проиллюстрировать тот факт, что ключевое слово else относится к последнему по порядку оператору if. Если бы использовался блок, то принадлежность else была бы очевидной:
if (a > 12){
if (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
Браузеры, поддерживающие элемент SCRIPT, должны проигнорировать HTML-комментарий внутри этого элемента (хотя некоторые версии браузера Netscape Navigator не воспринимали сценарий, заключенный в комментарий HTML).
Другим вариантом скрытия, который должен точно работать, является помещение сценария во внешнем файле и подключение его при помощи атрибута src элемента SCRIPT.
13.2. Исполнение сценария
Теперь рассмотрим, как организовать выполнение написанных и внедренных в документ сценариев. Итак, сценарий может исполняться в двух случаях: при загрузке документа и при возникновении события (а также при вызове его интерпретатором, например, по таймеру, но это рассмотрим особо).
Исполнение при загрузке документа
Интерпретатор браузера выполняет операторы языка JavaScript, записанные вне тела какой-либо функции, только один раз по мере загрузке документа. Причем положение HTML-элемента SCRIPT с текстом сценария определяет момент времени, в который сценарий будет выполняться. Так, сценарий в примере 13.1 выполнялся именно до того, как было загружено остальное содержимое документа, поэтому выведенный им текст и появился раньше основного содержимого документа.
Чтобы при загрузке HTML-документа выполнялась какая-либо функция, в нужном месте сценария должен быть записан вызов функции. Так, пример 13.1 можно переписать следующим образом (пример 13.2 сокращен).
Пример 13.2. Вызов функции при загрузке документа...
function greeting(){
//Те же действия, что и в примере 13.1...
}
//Вызов функции greeting();
Страница, содержащая сценарий
Прочий текст страницы...
Если бы в коде сценария не было явного вызова функции 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-документ, к элементам которого нужно получить доступ
Заголовок документа
Главный заголовок документа
Текст документа...
Если осуществлять доступ к элементам документа при помощи коллекции all с использованием номеров, то доступ ко всем элементам документа будет выглядеть следующим образом:
var elements = []; //Массив, в который скопируем ссылки на объекты страницы
var i;
for (i=0; i
КодОписаниеПросмотр
В приведенном примере обратите внимание на элемент 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Первый пункт меню
Второй пункт меню
Третий пункт меню
Четвертый пункт меню
Пятый пункт меню
Из приведенного текста можно увидеть, каким образом используется таблица: пунктами меню являются строки таблицы. Чтобы строки таблицы подсвечивались при наведении указателя мыши, их стилевой класс динамически изменяется при обработке событий 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 x 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. Анимация на странице
Страница с анимацией
//Назначаем функцию, вызываемую по таймеру и меняющую
//изображения window.setInterval(new_frame, 300);
var inc = 1;
var curFrame = 1;
var maxFrame = 6;
//Функия смены кадров function new_frame(){
//Покажем текущий кадр animate.src = "frames/" + curFrame + ".gif";
//Переход на следующий кадр curFrame += inc;
if (curFrame > maxFrame){
//Начинаем воспроизведение в обратном порядке curFrame = maxFrame;
inc = –1;
}
else if (curFrame == 0){
//Начинаем воспроизведение в прямом порядке curFrame = 1;
inc = 1;
}
}
В коде сценария количество кадров задается в переменной maxFrames. Предполагается, что кадры помещаются в папке frames и имеют имена вида номер.gif.
Создание всплывающих оконИногда бывает удобно использовать дополнительные так называемые всплывающие окна, например, чтобы открывать в них список файлов для закачки, если речь идет о каком-то веб-архиве. Как вы уже догадались, в этом примере для открытия новых окон используется метод open() объекта window. Кроме открытия нового окна, в приведенном ниже примере 13.10 реализовано также его закрытие через 5 секунд.
Пример 13.10. Создание и закрытие всплывающего окна
Всплывающие окна
//Функция открывает окно\
function open_window(){
wnd = window.open("13.9.html", "asd", "height = 200, width = 350");
//Функция закрытия окна вызывается через 5 секунд window.setTimeout(wnd.close, 5000);
}
Щелкните
чтобы открыть новое окно на 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. Перемещающиеся элементы
Страница с анимацией
.ball {position: absolute}
.ballarea {border-style: solid; border-width:1px;
position: absolute; background-color: white}
//Позиционируем элемент DIV
area.style.left = area.style.top = "10mm";
area.style.width = area.style.height = 200;
//Установим размер изображений-шариков ball1.style.pixelWidth = ball1.style.pixelHeight = 16;
ball2.style.pixelWidth = ball2.style.pixelHeight = 16;
ball3.style.pixelWidth = ball3.style.pixelHeight = 16;
ball4.style.pixelWidth = ball4.style.pixelHeight = 16;
ball5.style.pixelWidth = ball5.style.pixelHeight = 16;
Здесь предполагается использование пяти изображений из папки 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 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=0) ? R : 0;
R = (R=0) ? G : 0;
G = (G=0) ? B : 0;
B = (B
Первый пункт меню
Второй пункт меню
Третий пункт меню
Четвертый пункт меню
Пятый пункт меню
Первый пункт меню
Второй пункт меню
Третий пункт меню
Показать меню1
Показать меню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. Отслеживание положения мыши
Слежение за мышью
.category {font-weight: bold}
.value {font-family: "courier new"}
function move(){
//Записываем в элементы страницы текущее значение
//координат указателя мыши scr.innerText = event.screenX + "x" + event.screenY;
wnd.innerText = event.clientX + "x" + event.clientY;
element.innerText = event.offsetX + "x" + event.offsetY;
prnt.innerText = event.x + "x" + event.y;
//Индикация состояния мыши switch (event.button){
case 0: mouse.innerText = "0|0|0"; break;
case 1: mouse.innerText = "1|0|0"; break;
case 2: mouse.innerText = "0|0|1"; break;
case 3: mouse.innerText = "1|0|1"; break;
case 4: mouse.innerText = "0|1|0"; break;
case 5: mouse.innerText = "1|1|0"; break;
case 6: mouse.innerText = "0|1|1"; break;
case 7: mouse.innerText = "1|1|1"; break;
}
}
Экранные координаты:
Оконные координаты:
Относительно элемента:
Относительно родителя:
Кнопки мыши (л|c|п):
Заголовок
Содержимое страницы...
Приведенный HTML-документ выглядит так, как показано на рис. 13.7.
Рис. 13.7. Отслеживание указателя и состояния кнопок мыши
В следующем примере реализовано перетаскивание элементов страницы с помощью мыши. Перетаскивание элемента начинается при нажатии левой кнопки мыши и заканчивается при ее отпускании. Операции начала перемещения, самого перемещения и «бросания» элемента на новом месте реализованы в обработчиках событий элемента BODY (пример 13.18).
Пример 13.18. Перетаскивание элементов
Перемещение элементов страницы
var dX, dY; //Координаты точки, за которую "держат" элемент var element; //Перемещаемый элемент var fMoving = false; //==true, если перемещается элемент
//Функция начинает перемещение элемента function start(){
if (event)
fMoving = true;
element = event.srcElement;
//Сохраняем координаты "хватания" элемента dX = event.offsetX;
dY = event.offsetY;
//Для перемещения элемент должен свободно позиционироваться element.style.position = "absolute";
}
//Функция перемещения элемента function move(){
if (fMoving){
//Установим новые координаты для элемента element.style.pixelLeft = event.x – dX;
element.style.pixelTop = event.y – dY;
}
}
Перемещаемый текст
Перемещаемый заголовок
Документ, текст которого приведен в примере 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";
Итак, после рассмотрения файла шаблона страниц сайта можно назвать первую причину, по которой все файлы помещаются в одной папке, – это отсутствие необходимости изменения значений атрибутов в тегах , и каждой новой страницы. Вторая причина станет очевидна при рассмотрении сценария, создающего меню при загрузке страницы.
Реализация меню
Итак, с меню связаны два сценария. Первый находится в файле create_menu.js и записывает в HTML-документ строки, создающие таблицы – раскрывающиеся меню и таблицу строки меню. Рассмотрим содержимое этого файла (пример 14.2).
Пример 14.2. Содержимое файла create_menu.js/*
Сценарий в этом файле вставляет в документ определение пунктов меню,
а также определение строки главного меню (выполняется при загрузке)
*/
//Определение меню "Информация"
document.write("");
document.write("");
document.write("История");
document.write("");
document.write("");
document.write("Пищевая ценность яблок");
document.write("");
document.write("");
document.write("Сбор и хранение яблок");
document.write("");
document.write("");
//Определение меню «Сорта яблок»
document.write("");
document.write("");
document.write("Летние");
document.write("");
document.write("");
document.write("Осенние");
document.write("");
document.write("");
document.write("Зимние");
document.write("");
document.write("");
document.write("Позднезимние");
document.write("");
document.write("");
//Определение меню «Рецепты»
document.write("");
document.write("");
document.write("Салаты с яблоками");
document.write("");
document.write("");
document.write("Супы с яблоками");
document.write("");
document.write("");
document.write("Мясные блюда с яблоками");
document.write("");
document.write("");
document.write("Рыбные блюда с яблоками");
document.write("");
document.write("");
//Определение строки меню
document.write("");
document.write("");
document.write("");
document.write("");
document.write("");
document.write("");
document.write("");
document.write("");
document.write("");
document.write("Главная");
document.write("");
document.write("");
document.write("");
document.write("Информация");
document.write("");
document.write("");
document.write("");
document.write("Сорта яблок");
document.write("");
document.write("");
document.write("");
document.write("Рецепты");
document.write("");
document.write("");
document.write("");
document.write(" О проекте");
document.write("");
document.write("");
document.write("");
Приведенный пример является самым объемным в этой книге, однако его суть довольно проста. Вначале в документ записывается HTML-код создания трех таблиц, соответствующих раскрывающимся меню (идентификаторы таблиц: general, types, recepts). Четвертая таблица, добавляемая в документ сценарием, является строкой меню. Начнем рассмотрение именно с нее.
Для начала перепишем HTML-код, описывающий строку меню, в более наглядной форме (то есть рассмотрим создаваемую сценарием таблицу) (пример 14.3).
Пример 14.3. Таблица строки меню
Главная
Информация
Сорта яблок
Рецепты
О проекте
Как можно увидеть, строка меню во многом аналогична той, что была создана в предыдущей главе. Исключением является использование гиперссылок вместо обработки событий onClick для пунктов Главная и О проекте. Конечно, можно было бы осуществлять переход к страницам для этих пунктов при обработке события onClick с использованием объекта location, но зачем? Ведь для простого перехода к другой странице проще использовать стандартную обработку выбора пользователем гиперссылки. Да и к тому же не нужно заботиться о форме указателя, когда он находится над текстом пункта меню.
Обратите также внимание, что для остальных гиперссылок (пункты меню Информация, Сорта, Рецепты) выполнение действия по умолчанию не используется.
Подсветка выделенных пунктов меню осуществляется за счет назначения ячейкам таблицы соответствующего стилевого класса при обработке событий onMouseOver (ячейка выделяется, включается подсветка) и onMouseOut (подсветка убирается).
При выборе одного из пунктов Информация, Сорта, Рецепты обработчиком события onClick вызывается функция show_menu(), показывающая меню возле выбранного пункта. Эта функция вместе с функцией hide_menu() находится в файле popup_menu.js. Они приводятся в примере 14.4.
Пример 14.4. Сценарий, показывающий и скрывающий всплывающее менюvar lastMenu = null; //Прошлое показанное меню
//Функция показывает меню function show_menu(menu, main_menu, item){
if (menu.className == "menu"){
//Закрываем открытое меню hide_menu();
return;
}
//Скрываем прошлое меню hide_menu();
//Определяем положение меню menu.className = "menu";
menu.style.top = main_menu.offsetTop + main_menu.clientHeight;
menu.style.left = main_menu.offsetLeft + item.offsetLeft;
lastMenu = menu;
//Сделаем так, чтобы до BODY событие onClick не дошло event.cancelBubble = true;
}
//Функция скрывает меню, открытое ранее
function hide_menu(){
if (lastMenu != null){
lastMenu.className = "hidden";
lastMenu = null;
}
}
Скрытие всплывающего меню, кроме случая, когда пользователь выбрал один из его пунктов, происходит также при повторном щелчке кнопкой мыши на пункте меню, а также при щелчке кнопкой мыши в любом месте документа за пределами меню. Для реализации последнего элемент BODY каждой страницы настроен следующим образом:
Теперь рассмотрим, как реализованы раскрывающиеся меню. Они реализуются даже проще, чем сама строка меню. Как и в примерах предыдущей главы, раскрывающиеся меню основаны на использовании свободно позиционируемых таблиц (хотя это можно сделать на основе любого свободно позиционируемого элемента, например DIV, причем внешний вид такого меню будет ничуть не хуже). Каждая строка таблицы представляет собой отдельный пункт меню. Ниже приводится HTML-код, добавляемый сценарием для создания раскрывающегося меню Информация (это меню самое маленькое и поэтому его реализацию удобнее изучать) (пример 14.5).
Пример 14.5. Таблица, соответствующая меню Информация
История
Пищевая ценность яблок
Сбор и хранение яблок
При просмотре текста примера 14.5 можно увидеть, что текст пунктов меню, как и текст пунктов строки меню, заключен в теги и . Это сделано для упрощения, ведь, кроме навигации (основная функция гиперссылок), других функций на меню не возлагается.
Подсветка выделенных пунктов меню осуществляется за счет изменения их стилевого класса при обработке событий onMouseOver и onMouseOut.
Следует отметить один недостаток использованной реализации меню: хотя и подсвечивается вся ячейка таблицы, «срабатывает» пункт меню только при щелчке кнопкой мыши на тексте гиперссылки. Это потому, что внутрь тегов и заключен только текст, а не вся ячейка таблицы. Это сделано лишь для того, чтобы не усложнять еще больше сценарий, создающий меню. Вы можете устранить этот недостаток самостоятельно, изменив фрагменты типа
История
на
История
Если же просто поместить внутрь элемента A ячейку (не помещая еще и текст), то меню тоже будет работать, но форма указателя над текстом будет уже не та (текстовый I-указатель).
Разворачивающиеся абзацы
Как было сказано выше, особое внимание нужно уделить представлению на страницах рецептов (если не забыли, сайт по большей части кулинарной тематики). Поэтому рассмотрим, как можно повысить удобство при работе со списком рецептов, который планируется разместить на сайте.
Для этого можно использовать следующий прием. В текст страницы помещаются как рецепты, так и их названия. При этом сразу показываются пользователю только названия рецептов. При щелчке кнопкой мыши на названии под ним появляется сам рецепт (порядок приготовления и состав блюда). Для скрытия рецепта пользователь должен опять щелкнуть кнопкой мыши на его названии.
Собственно так и реализовано представление рецептов на сайте. Фрагмент HTML-документа, в котором используется описанный подход (разворачивающиеся абзацы), приведен в примере 14.6.
Пример 14.6. Использование разворачивающихся абзацев...
Текст страницы...
Рецепт 1
Порядок приготовления блюда
Состав блюда
Рецепт 2
Порядок приготовления блюда
Состав блюда
Прочий текст страницы...
...
В приведенном выше примере, помимо текста, к содержимому страницы добавлены два рецепта (см. элементы, имеющие стилевой класс exp, разворачиваемая часть этих элементов имеет стилевой класс exp_hidden, когда она скрыта, и класс expboby, когда показана).
Страница, фрагмент которой приведен в примере 14.6, выглядит так, как показано на рис. 14.3.
Рис. 14.3. Представление рецептов
Работоспособность используемого способа представления рецептов обеспечивает небольшой сценарий (функция), находящийся там же, где и сценарий, отвечающий за всплывающее меню, то есть в файле popup_menu.js (пример 14.7).
Пример 14.7. Сценарий, реализующий работу разворачивающихся абзацев//Функция разворачивает или сворачивает абзац, на котором щелкнул
//пользователь (если, конечно, абзац для этого предназначен)
function expand(element){
if (element.className == "exp_hidden"){
//Показываем абзац element.className = "expbody";
}
else if (element.className == "expbody"){
//Скрываем элемент element.className = "exp_hidden";
}
}
Приведенная в примере функция expand() скрывает или показывает элемент страницы, ссылка на который передана ей в качестве параметра, путем изменения его стилевого класса (описание используемых стилевых таблиц приведено далее).
Прочие сценарии
Кроме рассмотренных сценариев, обеспечивающих создание, работоспособность меню и разворачивающихся абзацев, каждая страница использует еще два сценария для заполнения секции дополнительной информации (ячейка, образующая левый ряд основной таблицы) и информации об авторских правах (нижняя часть страницы, образованная слиянием ячеек последней строки основной таблицы).
Первый из указанных сценариев находится в файле load_info.js и выглядит следующим образом (пример 14.8).
Пример 14.8. Содержимое файла load_info.js/*
Сценарий в этом файле загружает картинки яблок
и рекламные сообщения
*/
//Функция генерации случайного значения (целого)
function rand(min, max){
return Math.floor(Math.random()*(max-min)+min);
}
//Загрузка изображения document.write("");
document.write("");
//Типа загрузка рекламы...
document.write("Здесь могла быть Ваша реклама");
document.write("");
При анализе текста приведенного сценария можно увидеть, что сценарием создается таблица, занимающая все доступное пространство (имеется в виду левая часть страницы). В ячейки этой таблицы и добавляются различные сведения. В данном случае это одна из 14 картинок с изображением яблок в папке apples, а также надпись.
Еще один сценарий используется для заполнения ячейки в нижней части страницы сведениями об авторских правах. Он записан в файле copyright.js и состоит из одной-единственной строки:
document.write(«© Чиртик Александр 2006»);
Используемые таблицы стилей
В двух CSS-файлах помещены используемые таблицы стилей. В файле page.css находится таблица стилей, используемая для оформления текста страниц (плюс оформление основной таблицы страниц) (пример 14.9).
Пример 14.9. Содержимое файла page.css/*
Определения стилей для таблицы, форматирующей страницу
*/
TABLE.main_table {width: 100%; border-style: none;
background-color: green}
COL.info {width: 100px; background-color: rgb(180,255,200)}
COL.content {background-color: rgb(200,255,200)}
TR.copyright {background-color: green; color: white; text-align: right;
padding: 5; font-size: 3mm}
/*
Стили рецептов
*/
.process {font-size: 85%}
.products {font-style: italic; font-size: 85%}
/*
Прочие стили разметки
*/
H1 {text-align: center}
В файле menu.css находится таблица стилей, используемая для оформления пунктов меню и рецептов (пример 14.10).
Пример 14.10. Содержимое файла menu.css/*
Стиль строки меню и ее пунктов
*/
.menu_line {border-style: none; background-color: green;
width:100%; text-align: center}
.main_item {background-color: green}
.main_selected {background-color: magenta}
A.main_href {color: rgb(230,230,230); text-decoration: none;
font-family: "times new roman"}
/*
Стиль пунктов меню
*/
.item {background-color: rgb(230,230,230)}
.selected {background-color: magenta}
A.main_href {}
/*
Стили отображаемого и спрятанного меню
*/
.menu {border-style: solid; border-width: 1px;
visibility: visible; position: absolute;
background-color: rgb(230,230,230); border-color: black}
.hidden {display: none}
/*
Определение стилей для разворачиваемых элементов exp – класс элемента, при щелчке кнопкой мыши на котором будет показан соответствующий элемент класса expbody
*/
.exp {background-color: rgb(150, 255, 200)}
.exp_ref {text-decoration: none; font-weight: bold}
.expbody {display: block; background-color: rgb(150, 255, 150)}
.exp_hidden {display: none}
В приведенных таблицах стилей использовано небольшое количество настроек, чтобы слишком не увеличивать размер таблиц.
14.5. Примеры работы сайта
При открытии сайта пользователь попадает на главную (стартовую) страницу (файл index.html), показанную на рис. 14.4.
Рис. 14.4. Главная страница сайта
Реализованная страница истории яблок особого интереса не представляет. Обратим внимание, как выглядит страница с рецептами, ведь там дополнительно используются реализованные нами разворачивающиеся абзацы. Итак, внешний вид страницы с рецептами приведен на рис. 14.5 (начало страницы).
Рис. 14.5. Страница с рецептами
Сами рецепты выглядят так, как показано на рис. 14.6.
Рис. 14.6. Страница с рецептами (сами рецепты)
Ну вот, мы выполнили практически все необходимое для того, чтобы можно было поместить сайт в сеть Интернет (правда, содержание сайта пока неполное). Как раз этому посвящена следующая – последняя – глава книги.
Глава 15
Публикация сайта в Интернете
После того как пройден путь от изучения основ HTML до создания собственного сайта, наступило время выйти в большой мир, то есть опубликовать сайт в Интернете. Для этого нужно узнать еще совсем немного (на первый взгляд): как, где помещается сайт в Сети.
15.1. Ищем место для сайта
Чтобы опубликовать сайт в Интернете, нужно сначала найти для него место. В Сети существует ряд серверов, предназначенных как раз для размещения на них сайтов. Услуга предоставления места на таком сервере называется хостингом.
Существует большое количество компаний, осуществляющих как платный, так и бесплатный хостинг. Оба вида хостинга имеют свои преимущества и недостатки. Основными недостатками бесплатного хостинга зачастую являются следующие:
• ограничение на объем данных сайта (часто, но не всегда);
• отсутствие поддержки полезных сервисов и сценариев, выполняемых на сервере (например, PHP-сценариев);
• довольно строгие требования к содержанию сайта и возможность удаления сайта (некоторые хостеры удаляют сайты, содержащие, например, файловые архивы);
• отсутствие гарантий постоянной готовности сервера, то есть вероятность (и иногда она бывает высокой), что ваш сайт будет недоступен пользователям Сети;
• более «слабое» оборудование по сравнению с серверами платного хостинга.
Кроме всего перечисленного, при пользовании бесплатным хостингом часто приходится расплачиваться местом страницы, отведенным под рекламу (баннеры, ссылки и пр.), ведь хостеру нужно как-то зарабатывать деньги.
Естественно, что при пользовании платным хостингом открывается значительно больше возможностей, появляются гарантии того, что ваш ресурс будет доступен, по крайней мере, максимально возможное время, а также многое другое. Однако начинающему веб-мастеру, особенно если его проекты не связаны с коммерцией и не приносят дохода (как наш сайт о яблоках), резонно воспользоваться услугами бесплатного хостинга.
Чтобы получить информацию, где и на каких условиях вы можете разместить свой сайт, достаточно ввести слово «хостинг» или что-то подобное в строке поиска любого поисковика, например Google (www.google.com).
Не стоит оставлять без внимания и тот факт, что возможность размещения для зарегистрированных пользователей личного сайта на своем сервере предоставляют некоторые интернет-порталы. Для таких сайтов бесплатно выделяется очень небольшой объем (5–10 Мбайт), но зато вероятность удаления сайта не более чем вероятность удаления учетной записи пользователя портала. Только следует помнить, что и здесь действует законодательство о цензуре. Для поделок начинающих мастеров такой хостинг подходит как нельзя лучше. Тем более что, помимо сайта, вы будете располагать еще и почтовым ящиком.
Для размещения созданного в предыдущей главе сайта воспользуемся услугами как раз интернет-портала, а конкретно – интернет-портала www.tut.by. Пользователю этого портала предоставляется 50 Мбайт на почтовый ящик и 5 Мбайт на личный сайт. Ну что же, для начала вполне хватит. К тому же здесь вполне снисходительно относятся к пользователям в отношении обязательного размещения рекламы на личном сайте – ее нет.
15.2. Доменное имя для сайта
Сайт мало просто разместить на сервере, доступном по Интернету. Его же нужно как-то идентифицировать. Для сайта нужно заполучить доменное имя. Что же это такое?
Система доменных имен возникла как средство повышения удобства работы с сетью пользователя. Эта система первоначально обеспечивала возможность назначения компьютерам Сети символьных имен, которые преобразовываются в IP-адреса серверами службы DNS. Сеть WWW позволяет не только определять адреса компьютеров Сети при использовании доменных имен, но и получить доступ к опубликованным на этих компьютерах ресурсам.
Рассмотрим, из чего состоит доменное имя на примере имени www.some.site.mysoft.com. Здесь www – это просто обозначение, что адрес в сети WWW. Итак, собственно доменное имя имеет вид: some.site.mysoft.com. Читать адрес нужно справа налево. При таком порядке разбора адреса получим следующую последовательность адресов доменов и поддоменов, которым принадлежит сайт с указанным адресом.
• com – домен первого уровня, самый верхний. В домены первого уровня входят ресурсы, объединенные по территориальному признаку (например, домены ru, by, de и т. д.) и типам организаций, использующих этот домен (например, com – коммерческие организации, gov – правительственные организации, edu – образовательные учреждения). Доменов верхнего уровня немного, и заполучить такое имя нельзя.
• mysoft.com – доменное имя второго уровня (поддомен домена com). Получить такое имя можно, но за плату. Оптимальный выбор для организаций.
• site.mysoft.com – доменное имя третьего уровня. Обычно такие имена могут бесплатно предоставляться пользователям бесплатного хостинга.
• some.site.mysoft.com – доменное имя четвертого уровня, в нашем примере идентифицирующее сайт.
Полным именем сайта будет some.site.mysoft.com/index.html, где последняя часть указывает, какой именно HTML-файл открывать. Однако серверы, на которых размещаются ресурсы, предусматривают автоматическое преобразование к таким адресам. Могут различаться только имена страниц, открываемых по умолчанию.
Теперь вернемся к публикации сайта о яблоках. Используемый портал tut.by предоставляет для личных сайтов довольно короткие доменные адреса четвертого уровня вида: .at.tut.by. Значит, сайт будет иметь имя applesite.at.tut.by.
15.3. Проблема стартовой страницы
Рассмотрим небольшой вопрос, связанный с различными именами стартовых страниц сайтов на различных серверах. Так, используемый домен at.tut.by предъявляет требование: стартовая страница должна иметь имя default.html. В соответствии с этим требованием стартовую страницу можно переименовать с index.html на default.html, а можно создать стартовую страницу-редиректор, используя элемент META следующим образом (пример 15.1).
Пример 15.1. Страница-редиректор
Приведенный в примере HTML-документ нужно назвать default.html и скопировать вместе с остальными страницами сайта (как это делается, рассказано далее). При открытии файла default.html браузер пользователя сразу перейдет к файлу index.html.
15.4. Администрирование сайта
Итак, непосредственно администрирование сайта (копирование и изменение информации на сервере) может осуществляться как минимум двумя путями. Первый из них – наименее удобный, пригодный для небольших изменений сайта (например, для закачки нового файла) – это применение форм, своеобразных файловых менеджеров, предоставляемых хостерами. Второй способ – куда более мощный и удобный – использование файловых менеджеров, поддерживающих соединение по протоколу FTP (Проводник Windows, FAR Manager и т. д.). Рассмотрим оба способа.
Использование форм
Этот вопрос удобнее рассматривать на конкретном примере, в данном случае на примере at.tut.by. Итак, чтобы приступить к редактированию сайта, нужно войти под зарегистрированным ранее именем и перейти по ссылке Личный сайт. Здесь вы увидите форму, похожую на ту, что приводится на рис. 15.1.
Рис. 15.1. Форма администрирования сайта
В частности, на рисунке приведена форма администрирования сайта applesite.at.tut.by. Пользоваться этой формой довольно легко, пока не нужно создавать большое количество каталогов или закачивать на сервер много файлов. Для этого более пригоден способ, описанный в следующем разделе.
Использование Проводника Windows
Чтобы получить возможность управлять файлами и папками сайта прямо из Проводника, достаточно подключиться к соответствующему FTP-серверу. Для tut.by этим сервером является ftp.tut.by.
Чтобы подключиться к FTP-серверу, в адресной строке вводится строка вида:
ftp://:@ftp.tut.by
Пароль можно прямо в строке адреса и не вводить, тогда его нужно будет ввести в окне, показанном на рис. 15.2 (или подобном).
Рис. 15.2. Окно авторизации пользователя FTP-сервера
В данном случае показано окно, которое появилось при подключении с использованием строки ftp://applesite@ftp.tut.by
После того как авторизация произведена, получаем в свое распоряжение окно Проводника, в котором позволено производить все необходимые операции над файлами и папками сайта (рис. 15.3).
Рис. 15.3. Папка сайта в Проводнике
Показанное на рис. 15.3 окно использовалось для помещения файлов сайта на сервер. Ненужность ручного создания папок и копирования каждого файла в отдельности при этом сэкономила много, прежде всего, оплачиваемого времени подключения к Интернету.
После того как файлы сайта помещены на сервер, можно открыть браузер, ввести в строке адреса applesite.at.tut.by и посмотреть, как сайт открывается уже непосредственно с сервера в Интернете (рис. 15.4).
Рис. 15.4. Сайт при загрузке с сервера
Ну вот, собственно, и все, что необходимо для публикации сайта. Теперь он стал доступен многочисленной аудитории Интернета.
15.5. Увеличение посещаемости сайта
Здесь мы кратко рассмотрим основные направления увеличения посещаемости сайтов. На самом деле эта тема очень объемна. Существует множество методов, как честных так и не очень, направленных на рост посещаемости сайта. Раскруткой сайтов занимается множество компаний, да и качественной информации в Интернете на этот счет очень много, поэтому ограничимся общими замечаниями на эту тему.
Итак, после публикации сайта в Сети вы можете обмениваться рекламой с авторами других сайтов. Это может представлять собой простой обмен гиперссылками (вы размещаете ссылку на другой сайт, и на нем размещают ссылку на ваш сайт). Даже тут существует ряд тонкостей, которые нужно знать, чтобы быть уверенным в честном сотрудничестве с вами других авторов.
Кроме того, разновидностью обмена рекламной информацией можно назвать и участие вашего сайта в баннерных сетях. Суть обмена баннерами (графическими ссылками) в следующем: ваш баннер показывается на других сайтах в обмен на показ баннеров других сайтов на вашем сайте. Можно также купить показы собственных баннеров на популярных сайтах у рекламных агентств.
Не забывайте рассказывать о новом ресурсе всем заинтересованным и незаинтересованным лицам (вдруг им станет интересно). Интерес могут представлять публикации сайта на досках объявлений Интернета, форумах, чатах и т. д.
Существует еще одно средство увеличения посещаемости сайтов, наверное, даже первое по значимости – это регистрация сайта в поисковых системах. По статистике большинство пользователей сайтов (особенно новых пользователей) обнаруживают сайт при пользовании поисковиком.
Современные поисковые системы производят автоматическое индексирование сайтов специальными программами (так называемые роботы). При этом очень часто может анализироваться не только содержимое элементов META, но и содержимое самого сайта. Кстати, созданный в предыдущей главе сайт несколько неудачен для подобного индексирования: гиперссылки создаются сценарием, что делает невозможном перемещение по страницам при индексировании сайта. Способ решения проблемы с гиперссылками уже рассмотрен в предыдущей главе. Можно также постараться сформировать текст главной страницы сайта таким образом, чтобы в нем упоминались все ключевые слова (главное, чтобы получился нормальный текст, а не «масло масляное»).
Роботы, занимающиеся индексированием сайтов для поисковых систем, учитывают целый ряд факторов, от которых зависит и то, будет ли ваш сайт включен в индекс поисковика, и то, какое место в списке результатов поиска будет занимать сайт. Это сам текст содержимого сайта, количество ссылок на ваш сайт с других сайтов, удачный набор ключевых слов и многое другое.
И еще одно. Периодически роботы производят повторное индексирование сайтов. Если в индексированном вновь сайте обнаружится ссылка на ваш сайт, то он тоже наконец-то будет обработан. Но стоит ли полагаться на то, что, может быть, через неделю, месяц, год ваш сайт будет наконец добавлен в каталог поисковика? Если сайт готов или почти готов, то не лучше ли проявить инициативу и вручную предложить поисковой системе проиндексировать сайт? Поисковиков в Интернете достаточно, и, чтобы лишний раз никакой из них не рекламировать, рассмотрим общие детали в процессе регистрации сайта.
Итак, на главной странице большинства поисковиков (например, yandex.ru, rambler.ru, tut.by, aport.ru, google.com) есть ссылка типа Добавить ресурс. При переходе по такой ссылке вам будет предложено заполнить форму с информацией о вашем сайте. Если используется стартовая страница-редиректор, то лучше все-таки указать путь к настоящей стартовой странице, чтобы не возникло проблем при индексировании. В данном случае этот адрес имеет вид:
applesile.at.tut.by/index.html
Возможно, что при заполнении формы вам будет предложено составить список ключевых слов, характеризующих ваш сайт (некоторые поисковики используют такой список, а не содержимое элемента META с ключевыми словами). Время, в течение которого будет рассмотрена поданная вами заявка на регистрацию, зависит от конкретной поисковой системы. Кстати, ручная регистрация сайта в поисковой системе – хороший способ проверить, не найден ли сайт роботом поисковика раньше. В таких случаях после заполнения формы вас обычно предупредят, что заданный сайт уже обработан или уже найден и будет в скором времени обработан.
Заключение
В этой книге рассмотрены основные вопросы, знание которых весьма пригодится не только начинающему веб-мастеру. В книге приведено практически полное описание HTML, изложены основные концепции создания не только статичных, но и динамических веб-страниц. Представлено краткое руководство по JavaScript, и приведены примеры использования сценариев на этом языке.
При изложении я старался придерживаться стандарта языка HTML 4.01. Однако для того чтобы создавать полностью переносимые сайты, нужно знать не только HTML на уровне стандарта организации W3C. Дело в том, что браузеры различных производителей могут не только по-разному реализовывать поведение стандартных атрибутов HTML-элементов, но и предоставлять множество дополнительных возможностей, поддержка которых браузерами других производителей отнюдь не гарантирована.
По этой причине крайне полезно знать об отличиях, особенностях браузеров различных производителей. Для этого нужно изучать, так сказать, первоисточники – документацию самих производителей браузеров. Вот несколько ссылок, по которым можно найти много полезного:
• http://msdn.microsoft.com/ie/ – документация к браузеру Microsoft Internet Explorer, информация об HTML и не только;
• http://opera.com/docs/ – документация к браузеру Opera.
Кроме того, в Сети можно найти огромное количество русскоязычных ресурсов, посвященных веб-дизайну (не только HTML, но и многим современным технологиям, его использующим).
И конечно же, нужно помнить про официальный сайт W3C: http://www.w3.org. Здесь есть многое, практически все о современных интернет-технологиях.
Полезной в качестве справочника является официальная спецификация HTML, которую можно найти по адресу http://www.w3.org/TR/1999/REC-html401-19991224/. Один из весьма приятно оформленных русскоязычных вариантов этого документа можно найти по адресу http://gigo.ru/doc/html/book/.
На этом я с вами прощаюсь. Творческих вам успехов!
Приложение 1
Именованные ссылки на символы
В табл. П1.1 приведен список именованных ссылок на символы.
Таблица П1.1. Список ссылок на символы (стандарт ISO8859–1)Полный список греческих букв, а также математические и прочие символы приведены в табл. П1.2.
Таблица П1.2. Греческие буквы, математические и прочие символыПриложение 2
Свойства CSS
Ввиду большого количества свойств их список в главах книги полностью не приводится. Здесь представлен более полный список свойств, доступных в таблицах стилей. Свойства задания цвета текста и фона представлены в табл. П2.1. Свойства для настройки рамок, отступов и полей приведены в табл. П2.2. Свойства отображения текста приведены в табл. П2.3. Свойства, применяемые к спискам, приведены в табл. П2.4. Наконец, свойства позиционирования, размера и видимости элементов находятся в табл. П2.5.
Таблица П2.1. Цвет и фонТаблица П2.2. Рамки, поля и отступыТаблица П2.3. Свойства отображения текстаТаблица П2.4. СпискиТаблица П2.5 Свойства позиционирования, размера и видимости элементов страницыПриложение 3
Названия основных цветов
В табл. П3.1 приведен список названий основных цветов и их численные значения.
Таблица П3.1. Название основных цветов и их RGB-значения
---
lib.faint.ru - мобильная библиотека, проект wap-портала faint.ru