– заголовка таблицы по левому краю/правому краю/по центру (по умолчанию по центру);
• |  – данных в ячейке по левому краю/ правому краю/по центру/по заданному символу (по умолчанию по левому краю).
Атрибут valign также применяется ко всем элементам таблицы и определяет общее вертикальное выравнивание:
•  – элементов таблицы внизу/по центру/вверху (по умолчанию по центру);
•  – элементов строки внизу/по центру/ вверху;
• (со стандартным фоновым цветом ячеек), можно создать таблицу, изображенную на рис. 3.13.
Рис. 3.13. Пример использования атрибута bgcolor
С помощью атрибута background можно задать графический фон ячейки или таблицы целиком, указав путь к изображению. Например, для ячеек в таблицах. Но в XHTML наличие закрывающих тегов обязательно, например два смежных абзаца должны записываться так:
Рто первый абзац
<Рто второй абзац>
Конечно, такое требование сильно загромождает код, однако устраняет какие-либо двусмысленности в разметке документа, поскольку позволяет точно идентифицировать любой элемент кода.
То же самое касается и пустых элементов. Каждый тег такого элемента должен иметь как открывающий, так и закрывающий тег, например тег обрыва строки теперь должен писаться так:
, иначе строка разорвана не будет. К счастью, в этом случае допускается запись , то есть перед завершающей угловой скобкой следует поместить наклонную черту. Если же у тега есть атрибуты, то угловая черта пишется после них, например .
Необходимо корректно вкладывать элементы друг в друга
Рто требование стандарта XHTML РЅРµ отличается РѕС‚ требований HTML. Каждый элемент, вложенный РІ РґСЂСѓРіРѕР№ элемент, должен быть закрыт завершающим тегом, лежащим внутри содержащего его элемента. Например, РІ данном примере элемент для задания РєСѓСЂСЃРёРІРЅРѕРіРѕ текста включает тег полужирного начертания:
…форматируемый текст…
Ртот пример корректен. Однако если РјС‹ напишем так:
…форматируемый текст…
то нарушим требования HTML. Тем не менее эти и им подобные требования не всегда выполнялись разработчиками, и «добрые» браузеры обычно корректировали такие нарушения кода. Однако стандарт XHTML запрещает подобные нарушения. Кроме того, XHTML запрещает следующие вложения:
• тег не может содержать теги ;
• тег
 – заголовка таблицы внизу/по центру/ вверху;
• |  – данных в ячейке внизу/по центру/ вверху.
В листинге 3.6 приведен пример использования в различных комбинациях описанных выше атрибутов форматирования таблицы и содержимого ячеек (рис. 3.11).
Листинг 3.6. Пример использования выравнивания таблицы и содержимого ячеек
Простая HTML-таблица
Наименование товара
Товар | Код | Количество | Цена |
Клей | 028 | 190 шт | 12,2 руб |
Скотч | 058 | 120 шт | 4,6 руб |
Ластик | 986 | 100 шт | 2,3 руб |
Рис. 3.11. Пример использования выравнивания таблицы и содержимого ячеек
3.8. Объединение ячеек таблицы
На практике встречается большое количество таблиц, в которых одна ячейка объединяет в себе несколько ячеек по высоте и ширине (см. рис. 3.2). В HTML ячейки объединяют с помощью атрибутов colspan и rowspan. Атрибут colspan определяет количество ячеек, на которые простирается данная ячейка по горизонтали, а rowspan – по вертикали.
На рис. 3.12 изображена таблица с объединенными ячейками. Заголовок таблицы находится в ячейке, объединяющей все три ячейки строки. Таблица содержит еще две ячейки, каждая из которых объединяет две ячейки по вертикали. Код такой таблицы приведен в листинге 3.7.
Рис. 3.12. Таблица с объединенными ячейками
Листинг 3.7. Пример использования атрибутов объединения ячеек
HTML-таблица
Ячейка объединяет в себе все ячейки строки |
Ячейка на две строки |
Ячейка 2х2 | Ячейка 2х3 |
Ячейка 3х2 | Ячейка 3х3 |
Ячейка на две строки |
Ячейка 4х2 | Ячейка 4х3 |
Ячейка 5х2 | Ячейка 5х3 |
3.9. Установка фонового цвета или рисунка ячейки
В HTML возможны различные варианты установки фонового цвета или рисунка. Благодаря атрибуту bgcolor можно изменять цвет содержимого ячейки, строки, группы столбцов, группы строк, таблицы целиком.
Рспользуя конструкцию | , чередующуюся СЃ конструкцией | |
.
Если размеры изображения превышают габариты ячейки или таблицы, для которых оно предназначено, браузер обрезает его таким образом, чтобы оно уместилось в пределах соответствующего объекта.
3.10. Создание вложенных таблиц
Существуют такие моменты, когда необходимо создать ячейки, границы которых не должны совпадать (рис. 3.14). Здесь атрибут colspan бессилен.
Рис. 3.14. Сложная HTML-таблица
Команды, управляющие созданием и отображением таблиц, допускают вложение одного элемента TABLE внутрь другого, поэтому в ячейке можно создать новую таблицу с независимой структурой.
В листинге 3.8 приведен код таблицы, изображенной на рис. 3.13. Здесь применяется метод вложения одной таблицы в другую. Внешняя таблица состоит из двух строк. Первая строка содержит четыре ячейки, вторая – таблицу со своей независимой структурой. Внутренняя таблица, в свою очередь, содержит две строки, каждая из которых содержит по три ячейки.
Листинг 3.8. Пример таблицы, которая содержит еще одну таблицу
HTML-таблица
Создание вложенных таблиц
1x1 | 1x2 | 1x3 | 1x4 |
|
Резюме
В заключение следует отметить, что таблицы являются важнейшей частью любой веб-страницы. Для контроля над элементами веб-узла фирмы Microsoft () использованы таблицы.
Умелое обращение СЃ таблицами позволяет жестко связать текстовые блоки документа СЃ графикой Рё РґСЂСѓРіРёРјРё объектами. Рспользование таблиц позволит странице загружаться быстрее, РЅРѕ большие СЂРёСЃСѓРЅРєРё следует разбить РЅР° несколько маленьких. Чтобы РЅРµ нарушить целостность всего СЂРёСЃСѓРЅРєР°, его отдельные части следует расположить РІ ячейках таблицы таким образом, чтобы РѕРЅРё образовали целый СЂРёСЃСѓРЅРѕРє.
Рспользование таблиц также позволит вам разделить РІСЃСЋ HTML-страницу РЅР° функциональные части: заголовок страницы, место для рекламы, панель инструментов Рё С‚.В Рґ. РџРѕРґРѕР±РЅРѕРµ разделение страницы даст возможность быстро создать СЃРІРѕР№ индивидуальный «остов» сайта, который РІ последующем можно использовать для создания РґСЂСѓРіРёС… страниц.
Глава 4
Добавление изображений и мультимедиа
4.1. Встраивание изображений
4.2. Добавление мультимедиа
При создании сайта невозможно обойтись без использования активных объектов вроде Flash-анимации, видео или картинок. Так мы можем улучшить вид сайта, сделать его ярче, интереснее и удобнее для посетителей. Однако неграмотное использование мультимедиа на странице способно погубить самые лучшие и интересные сайты. Поэтому в данной главе, помимо технических аспектов встраивания мультимедиа, будут освещены эстетические аспекты и моменты, связанные с удобством для посетителя.
4.1. Встраивание изображений
Начнем СЃ добавления изображения, потому что это самый простой для добавления Рё самый распространенный мультимедийный элемент, встречающийся РІ Рнтернете. РЈ изображений РјРЅРѕРіРѕ плюсов: статичность, небольшие размеры файлов (относительно РґСЂСѓРіРёС… типов мультимедиа-содержимого), широкая область применения. Сейчас трудно представить сайт без картинок. Дизайнеры научились использовать РёС… очень разумно. Современные скорости соединений позволяют размещать большое количество графики РЅР° странице. Однако нужно знать меру, сайт РЅРµ должен выглядеть пустым, РЅРѕ РІ то же время РЅРµ стоит Рё злоупотреблять рисунками. Грамотное Рё уместное использование изображений поможет сделать сайт красивым, интересным Рё удобным. Бывают ситуации, РєРѕРіРґР° без большого количества картинок невозможно обойтись, например РїСЂРё создании галереи, фотоальбома, каталога. Р’ таких случаях умелое распределение файлов РїРѕ сайту Рё удобная навигация РїРѕРјРѕРіСѓС‚ сэкономить время загрузки Рё трафик. Получается, что РїСЂРё создании сайта без изображений вам РЅРµ обойтись, этот объект является самым простым, удобным Рё распространенным.
Для встраивания изображений в HTML-документ применяется элемент IMG. Он имеет обязательный атрибут src, значением которого должен быть адрес встраиваемого изображения.
Простейший вариант записи для включения картинки: . При такой записи размер картинки на экране будет соответствовать ее реальному размеру.
Примечание
Адрес изображения может быть указан либо полностью (например, когда картинка находится на другом сервере ( http://www.mypage.ru/IMG/myfoto.jpg )), либо относительно местоположения вашего документа (например, если картинка находится во вложенной папке (IMG/myfoto.jpg)). Во втором случае для указания директории, находящейся выше в иерархии каталогов, используются символы../ (переход из папки DOC, находящейся в одном каталоге с папкой IMG, будет выглядеть так:. /IMG/myfoto.jpg).
В листинге 4.1 продемонстрирован простейший вариант встраивания картинки.
Листинг 4.1. Простое встраивание изображения в документ
Встраивание изображения
На рис. 4.1 показан результат обработки браузером кода из листинга 4.1 – простое встраивание картинки, без редактирования.
Рис. 4.1. Вставка изображения
Р РёСЃСѓРЅРѕРє РЅР° странице отображается РІ реальном размере. Рто простейший вариант вставки картинки, его можно использовать, РєРѕРіРґР° нет необходимости РЅРё РІ какой трансформации СЂРёСЃСѓРЅРєР°, например, если СЂРёСЃСѓРЅРѕРє будет единственным элементом РЅР° странице.
Один рисунок на странице встречается нечасто, обычно на странице, помимо рисунка, присутствуют другие объекты, и большие размеры картинки становятся проблемой, но ничего страшного – размеры изображения можно легко подкорректировать.
Размер изображения
Если необходимо значительно изменить размер изображения, то лучше использовать специальные программы, однако в небольших пределах допустимо использовать и атрибуты элемента IMG.
Чтобы редактировать размер картинки, используют атрибуты width Рё height. РС… значения можно указывать РІ пикселах или процентах РѕС‚ размера РѕРєРЅР° (РІ этом случае после размера ставится знак %).
Примечание
При изменении размеров окна картинка, размер которой указан в процентах, тоже меняет размер.
Можно указать только один из атрибутов, и тогда второй будет вычисляться автоматически для сохранения пропорций рисунка.
Меняя размер картинки СЃ помощью атрибутов элемента IMG, внимательно следите Р·Р° изображением, есть вероятность того, что СЂРёСЃСѓРЅРѕРє исказится. Сам браузер РЅРµ обрабатывает картинки РїРѕРґ новый размер, поэтому, если размер выставлен неаккуратно, РёР· произведения искусства СЂРёСЃСѓРЅРѕРє может превратиться РІРѕ что-то непонятное (особенно если задать размер больше, чем РІ реальности). Рскажение пропорций тоже РЅРµ РїСЂРёРІРѕРґРёС‚ Рє улучшению качества изображения, как РІРёРґРЅРѕ РЅР° СЂРёСЃ.В 4.2.
Рис. 4.2. Размеры изображения
В листинге 4.2 показан пример встраивания изображения с заданными размерами.
Листинг 4.2. Задание размеров изображения
Встраивание изображения
Задана только ширина в пикселах
Задана ширина в процентах
Ширина и высота заданы непропорционально (изображение искажается)
IMG_0628.jpg
В листинге 4.2 для первого изображения задана только ширина, высота вычисляется автоматически. Для второго изображения размер определен в процентах, а для третьего установлены неверные размеры, которые искажают картинку.
Результат работы листинга 4.2 показан на рис. 4.2.
РќР° СЂРёСЃ.В 4.2 РІРёРґРЅРѕ, что размеры РІСЃРµ-таки имеют значение, особенно для картинок, поэтому следить Р·Р° РёС… изменением нужно очень внимательно. Если нет необходимости РІ изменении размеров, то задавайте размеры картинки, соответствующие реальности. Рто позволит избежать искажений Рё СѓСЃРєРѕСЂРёС‚ обработку картинки браузером.
Совет
Если вам нужно значительно изменить размер картинки, то используйте специальные программы для работы с изображениями. Они смогут проделать эту операцию, минимально исказив картинку или вовсе без искажений.
Помимо размеров картинки, на внешний вид сайта влияет расположение изображений.
Выравнивание изображения
Расположение картинки влияет на общий вид страницы, на восприятие текста вокруг нее. Удобство чтения текста, находящегося около картинки, сильно зависит от их взаимного расположения.
Есть множество вариантов выравнивания картинок относительно текста, и за все отвечает атрибут align элемента IMG. Он позволяет выравнивать изображения с правой, с левой стороны окна или относительно элементов строки.
У атрибута align много значений, которые позволяют установить картинку именно так, как надо, и именно там, где надо.
Горизонтальное выравнивание:
• left – по левому краю;
• right – по правому краю.
Вертикальное выравнивание:
• top – выравнивание верхней границы картинки по самому высокому элементу строки;
• texttop – выравнивание верхней границы картинки по самому высокому элементу текста;
• middle – середина изображения выравнивается по базовой линии строки;
• absmiddle – середина изображения выравнивается по середине строки;
• baseline – выравнивание нижней границы изображения по базовой линии строки;
• bottom – аналогично baseline;
• absbottom – нижняя граница изображения выравнивается по нижней границе текущей строки.
Примечание
Базовая линия строки – это линия, на которой расположены все элементы. При этом некоторые буквы выступают за эту линию, например буква «р». Ее палочка заканчивается ниже базовой линии и будет самым нижним элементом строки. Заглавные буквы, наоборот, выступают сверху этой линии.
В листинге 4.3 приведены примеры выравнивания картинок относительно текста по вертикали.
Листинг 4.3. Выравнивание картинки по вертикали
Встраивание изображения
Выравнивание по самому верхнему элементу в строке
Нижняя граница изображения выравнивается по нижней границе текущей строки
Нижняя граница изображения выравнивается по базовой линии строки
Середина изображения выравнивается по базовой линии строки
На рис. 4.3 показан результат обработки кода из листинга 4.3, где можно увидеть разницу между выравниваниями по базовой линии и по границам строки.
Рис. 4.3. Выравнивание по вертикали
С выравниваниями по горизонтали все проще. Код для выравнивания по горизонтали приведен в листинге 4.4.
Листинг 4.4. Выравнивание картинки по горизонтали
Встраивание изображения
Кролики – потрясающие животные, особенно декоративные. Многие люди заводят их дома вместо кошек или собак, потому что они менее прихотливы. Кролики – чистоплотные животные, и их хозяева не испытывают проблем с воспитанием. Кормить этих зверюшек просто: овощи, сено и немного специального корма. Следите, чтобы клетка была чистой и в ней всегда лежали свежие опилки. Если вы рискуете выпускать зверя на прогулки по дому, то следите за проводами. Кролик может решить, что провода – это сено, и перегрызть их.
На рис. 4.4 виден результат обработки браузером кода из листинга 4.4, текст обтекает картинку слева.
Рис. 4.4. Выравнивание по горизонтали
При горизонтальном выравнивании текст плотно обтекает картинку и для внешнего вида страницы важным параметром становится расстояние между текстом и изображением.
Расстояние между текстом и изображением
Расстояние между текстом и картинкой влияет на читаемость текста. Очень маленькое или очень большое расстояние может оказаться неудобным.
Чтобы отодвинуть текст от картинки, используют атрибуты hspace и vspace элемента IMG. Они задают расстояние в пикселах между изображением и текстом по горизонтали и вертикали.
В листинге 4.5 указано очень большое расстояние по вертикали (100 пикселов) и очень маленькое по горизонтали (1 пиксел). На рис. 4.5 видно, что такое сочетание расстояний неудобно для чтения.
Рис. 4.5. Задано расстояние от картинки до текста
Листинг 4.5. Задание расстояния от текста до изображения
Встраивание изображения
Кролики – потрясающие животные, особенно декоративные. Многие люди заводят их дома вместо кошек или собак, потому что они менее прихотливы. Кролики – чистоплотные животные, и их хозяева не испытывают проблем с воспитанием. Кормить этих зверюшек просто: овощи, сено и немного специального корма. Следите, чтобы клетка была чистой и в ней всегда лежали свежие опилки. Если вы рискуете выпускать зверя на прогулки по дому, то следите за проводами. Кролик может решить, что провода – это сено, и перегрызть их.
Рамка вокруг изображения
Кроме регулировки расстояния до текста, есть еще один способ отделить картинку от остального содержимого страницы.
Отделить изображение РѕС‚ текста можно, поступив СЃ РЅРёРј, как СЃ обычной картиной: поставив РІ рамку. Рто делается СЃ помощью атрибута border, значение которого указывает ширину рамки РІ пикселах.
В листинге 4.6 задана рамка шириной 10 пикселов, а слева и справа указаны разумные расстояния по 50 пикселов. На рис. 4.6 видно, что с такими параметрами изображение выглядит намного лучше, чем в предыдущем примере, и текст гораздо проще воспринимать.
Рис. 4.6. Рамка
Листинг 4.6. Задание рамки вокруг изображения
Встраивание изображения
Кролики – потрясающие животные, особенно декоративные. Многие люди заводят их дома вместо кошек или собак, потому что они менее прихотливы. Кролики – чистоплотные животные, и их хозяева не испытывают проблем с воспитанием. Кормить этих зверюшек просто: овощи, сено и немного специального корма. Следите, чтобы клетка была чистой и в ней всегда лежали свежие опилки. Если вы рискуете выпускать зверя на прогулки по дому, то следите за проводами. Кролик может решить, что провода – это сено, и перегрызть их.
Альтернативный текст
С атрибутами, отвечающими за оформление картинки, все понятно, но существуют еще атрибуты, напрямую не влияющие на отображение картинки, но тем не менее сильно облегчающие жизнь посетителям сайта.
РРЅРѕРіРґР° получается так, что картинка РЅРµ загружается, например, РєРѕРіРґР° пользователь отключил загрузку картинок или сервер, РЅР° котором РѕРЅР° расположена, «упал». Если размеры картинки указаны РІ СЏРІРЅРѕРј РІРёРґРµ, то посетитель имеет Рѕ РЅРёС… представление, однако зачем ему этот размер, если РѕРЅ РЅРµ может даже предположить, что изображено РЅР° СЂРёСЃСѓРЅРєРµ.
Р’ таких ситуациях может помочь атрибут alt. Его значение – текст, который будет показан РїСЂРё наведении указателя мыши РЅР° картинку или если картинка РЅРµ загрузится. Рто даст возможность пользователям, которые РЅРµ РІРёРґСЏС‚ картинок, понять, хотят ли РѕРЅРё увидеть РёС… вообще, Р° тем, кто РІРёРґРёС‚, поможет понять, что именно РѕРЅРё РІРёРґСЏС‚.
В листинге 4.7 приведен пример кода для задания альтернативного текста.
Листинг 4.7. Альтернативный текст
Встраивание изображения
На рис. 4.7 показан результат обработки кода из листинга 4.7 при условии, что изображение загрузилось.
Рис. 4.7. Альтернативный текст при загруженном рисунке
Альтернативный текст всплывает при наведении указателя мыши на картинку.
На рис. 4.8 показан результат обработки кода из того же листинга, но в случае, когда изображение не загрузилось.
Рис. 4.8. Альтернативный текст при незагруженном рисунке
Вместо картинки виден поясняющий текст, и при наведении указателя мыши на рисунок появляется всплывающая подсказка.
Предварительная загрузка
Если изображений на сайте много и их загрузка занимает немало времени, можно не испытывать терпение посетителя, а дать ему примерное представление о том, что он увидит.
Рто делается СЃ помощью атрибута lowsrc, РіРґРµ РІ качестве значения используется адрес изображения худшего качества, РЅРѕ того же содержания, что Рё основная картинка. РџСЂРё первом РїСЂРѕС…РѕРґРµ браузером страницы это изображение будет быстро загружено, Рё Сѓ пользователя появится представление Рѕ том, что РѕРЅ СѓРІРёРґРёС‚ дальше. РџСЂРё последующем РїСЂРѕС…РѕРґРµ страницы браузер загрузит главное изображение хорошего качества.
Совет
Для получения изображения худшего качества нужно использовать специальные программы для работы с изображениями. В них возможно уменьшение размеров изображения за счет уменьшения количества цветов, например.
В листинге 4.8 приведен пример кода, который задает изображение с предварительной загрузкой.
Листинг 4.8. Рзображение СЃ предварительной загрузкой
Встраивание изображения
На рис. 4.9 показан результат предварительной загрузки изображения, на следующем проходе браузер загрузит изображение нормального качества.
Рис. 4.9. Предварительное изображение
Альтернативный текст и предварительная загрузка изображения делают сайт удобнее.
Ссылки изображения
Рспользуя картинки, можно повысить функциональность сайта, создавая изображения-ссылки.
Ссылки – главное РІ Рнтернете, Рё, естественно, существует возможность использовать РІ качестве ссылок изображения.
Для создания ссылки из картинки достаточно поместить элемент IMG внутри тегов <А> и , при этом вокруг картинки появится рамка, которой можно управлять с помощью атрибута border. Синие рамки вокруг рисунков выглядят некрасиво, зато с ними сразу понятно, что можно щелкнуть кнопкой мыши на этой картинке и перейти на другую страницу.
В листинге 4.9 приведены примеры создания ссылок-изображений с различными размерами рамок.
Листинг 4.9. Создание изображений-ссылок
Встраивание изображения
Ссылка без задания атрибута border (рамка ставится по умолчанию)
Ссылка без рамки
Рамка в 10 пикселов
Результат обработки кода из листинга 4.9 можно увидеть на рис. 4.10.
Р РёСЃ.В 4.10. Рзображения-ссылки
Возможность делать из рисунков ссылки позволяет удобнее размещать информацию на сайтах, где необходимо использовать много изображений.
Галереи изображений
При создании галерей используют возможность менять размер картинок и таким образом создают галереи, в которых пользователь сначала видит миниатюрные варианты изображений, а затем может выбрать необходимую ему картинку для загрузки. Посетитель щелкает кнопкой мыши на картинке, и она открывается в полный размер на новой странице.
Примером может служить поиск картинок в поисковых системах. На основе галерей можно делать фотоальбомы и выставки картин, эта технология часто используется при создании каталогов.
Теперь вы можете добавлять любые изображения на сайт и делать это наилучшим образом. Вы знаете, как корректировать внешний вид картинки, ее размеры и расположение на странице, а также как добавлять элементы, позволяющие посетителю просматривать ваши рисунки с комфортом. Теперь вы умеете создавать галереи изображений, а надо сказать, что картинки чаще всего структурируют именно в галереи. В общем, создание сайта с графическим наполнением – больше не проблема для вас.
4.2. Добавление мультимедиа
Что же делать, если, помимо коллекции картинок, у вас есть коллекция аудио или видео и вы хотите поделиться с посетителями сайта? В этом случае вы можете поместить на страницу ссылку на тот мультимедиа-файл, который желаете сделать доступным, или просто встроить его на страницу вместе с проигрывателем.
Ссылки на мультимедийные файлы
Ссылки на файлы мультимедиа ничем не отличаются от ссылок на другие страницы. Как видно из листинга 4.10, при щелчке кнопкой мыши на такой ссылке браузер откроет музыкальный файл в новом окне. Для удобства посетителей советую использовать атрибут title элемента A, он работает так же, как альтернативный текст для картинок. При наведении указателя мыши на ссылку всплывает строка с более подробной информацией о файле (рис. 4.11).
Рис. 4.11. Ссылки на мультимедиа
В листинге 4.10 приведен пример кода для создания ссылок на мультимедиа.
Листинг 4.10. Ссылки на мультимедиа
Ссылки на мультимедиа
Test audio
Указание ссылки на объект – самый простой вариант для реализации доступа к нему. Плюсом этого способа являются маленький объем страницы и простота использования. С помощью ссылки посетитель может сохранить файл у себя на компьютере, а затем проиграть его наиболее подходящим для себя проигрывателем. Для удобства посетителей сайта можно указывать размер мультимедийного файла.
Однако этот способ не помогает, если нужно, чтобы пользователь посмотрел Flash-файл. С их помощью обычно «раскрашивают» сам сайт; яркие и динамичные Flash-объекты могут нести смысловую нагрузку и быть неотъемлемой частью страницы, поэтому их удобнее встраивать сразу в страницу, а не передавать по ссылке. Хотя, если ваш Flash-мультик – самостоятельное произведение, можно использовать способ со ссылками.
Встраивание объектов
Ртак, есть СЃРїРѕСЃРѕР± загрузить наш мультимедиа-файл РЅР° страницу сразу, РїСЂРё этом надо учитывать, СЃ помощью какой программы будет воспроизводиться файл, потому что загружать динамический объект нужно вместе СЃ проигрывателем. Для обращения Рє этой программе необходимо использовать элемент OBJECT. РћРЅ позволит управлять РјРЅРѕРіРёРјРё параметрами проигрывателя. Р’ предыдущих версиях языка для встраивания объектов использовали элементы EMBED Рё APPLET, РЅРѕ сейчас рекомендуют Рє использованию именно OBJECT. Ртому элементу необходим закрывающий тег .
Примечание
В последнем стандарте принято использование элемента OBJECT, но, чтобы избежать проблем у пользователей, которые работают со старыми версиями браузеров, не распознающими этот элемент, рекомендуется внутрь его встраивать элемент EMBED.
Ртот элемент предоставляет большие возможности для управления встраиваемым объектом. Внутри тегов РјРѕРіСѓС‚ находиться элементы PARAM, которые РЅРµ требуют наличия закрывающего тега. РЎ РёС… помощью программам воспроизведения передают параметры, указывающие РІРёРґ проигрывателя, тип воспроизведения Рё множество РґСЂСѓРіРёС… параметров. РЎ точки зрения управления содержимым Рё внешним РІРёРґРѕРј сайта это очень СѓРґРѕР±РЅРѕ. Создатель сайта получает РіРёР±РєРёР№ инструмент для управления воспроизведением мультимедиа РЅР° странице. Р’ результате сайт выглядит Рё работает именно так, как хочется вам.
Начнем рассмотрение встраивания объектов с основного элемента, необходимого для этого, – элемента OBJECT.
Атрибуты элемента OBJECT
Ртот элемент позволяет встроить РЅР° сайт любой мультимедиа-объект вместе СЃ программой обработки данного объекта. Р’ этом разделе РјС‹ рассмотрим РІРѕРїСЂРѕСЃС‹ встраивания музыки, видео Рё Flash-анимации. Однако возможности элемента OBJECT намного шире: РІ принципе, РІС‹ можете встраивать РІ страницу любое активное содержимое, главное, чтобы Сѓ пользователя была программа для обработки этого объекта.
Рлемент OBJECT использует программы, находящиеся РЅР° компьютере посетителя, Рё СЃ РёС… помощью РІРѕСЃРїСЂРѕРёР·РІРѕРґРёС‚ активное содержимое. РћРЅ может использовать программу проигрывания РїРѕ умолчанию для конкретного типа файлов, если этот тип файлов знаком браузеру, или использовать конкретную указанную вами программу, если РѕРЅР° есть РЅР° компьютере пользователя.
У этого элемента много атрибутов. Очевидно, что не все они являются обязательными, точнее, у этого элемента нет строго обязательных атрибутов. Однако среди них можно выделить наиболее важные, которые упростят и ускорят обработку вашего объекта браузером.
Атрибут classid указывает адрес программы, которая будет работать СЃ объектом. Р’ качестве значения этого атрибута можно указывать полный или относительный путь Рє файлу программы. Рто РЅРµ всегда СѓРґРѕР±РЅРѕ, потому что РЅР° разных компьютерах программы располагаются РІ разных местах, Р° РЅР° серверах обычно РЅРµ бывает программ, необходимых для воспроизведения мультимедиа-файлов. Удобнее второй метод: использование идентификатора зарегистрированного ActiveX-приложения. Р’ этом случае перед самим идентификатором должно стоять ключевое слово clsid, как РІ листинге 4.11. Чаще всего применяют именно второй вариант, потому что РѕРЅ универсален. Рдентификаторы для различных приложений Рё активных объектов легко найти РІ Рнтернете.
Атрибут codetype должен принимать значение, содержащее MIME-тип объекта, который указан в атрибуте classid. Браузер использует эту информацию для подготовки ресурсов, необходимых для запуска файла.
Совет
MIME-тип (Multipurpose Internet Mail Extensions) – стандарт, используемый РІ Рнтернете, для указания типа объекта. РўРёРї, соответствующий вашему объекту, можно посмотреть РІ реестре. Для этого РІ папке HKEY_CLASSES_ROOT нужно открыть папку СЃ разрешением, соответствующим вашему объекту, Рё РІ строке Content Type будет указан MIME-тип объекта.
В листинге 4.11 показано применение атрибутов classid и codetype.
Листинг 4.11. Рспользование атрибутов classid Рё codetype
Встраивание объектов
В примере указан идентификатор для Проигрывателя Windows Media, а тип – для проигрывания МР3-файла. При просмотре страницы вы увидите проигрыватель, готовый к запуску (рис. 4.12).
Рис. 4.12. Вставка Проигрывателя Windows Media
Атрибут data в качестве значения принимает адрес файла, который необходимо запустить с помощью проигрывателя. Правда, такой метод определения файла используется не всегда – иногда имя файла для запуска нужно передавать через элемент PARAM. Путь к файлу необходимо указывать относительно папки, заданной атрибутом codebase. Если значение этого атрибута не указано, то путь следует задать относительно текущего документа.
Атрибут type задает тип объекта, который указан РІ параметре data. Здесь нужно указывать MIME-тип объекта. Рто позволит браузеру выбрать программу для воспроизведения файла. Если РІС‹ РЅРµ укажете конкретную программу для воспроизведения, то браузер сам выберет приложение для воспроизведения файлов заданного типа. Значение атрибута type браузер использует, РєРѕРіРґР° РЅРµ указано значение атрибута codetype.
В листинге 4.12 приведен код, который запустит файл test. mp3 на проигрывание.
Листинг 4.12. Рспользование атрибутов data Рё type
Встраивание объектов
Если вам понадобилось встроить на страницу Java-апплет, используйте атрибут code и в качестве его значения укажите имя класса вашего Java-апплета. По сути этот атрибут используется вместо элемента APPLET.
В листинге 4.13 представлен пример встраивания апплета.
Листинг 4.13. Встраивание Java-апплетов
Встраивание объектов
С атрибутом codebase вы встречались уже несколько раз, он указывает путь к папке, в которой хранятся файлы, используемые этим объектом. Пути ко всем файлам определяются в элементе OBJECT относительно папки, указанной в качестве значения этого атрибута.
РџРѕРјРёРјРѕ атрибутов, отвечающих Р·Р° основные функции объекта, нас интересуют атрибуты, позволяющие управлять РІРёРґРѕРј объекта РЅР° странице. Рменно такие атрибуты элемента OBJECT РјС‹ рассмотрим далее.
Для выравнивания объекта на странице служит атрибут align, его значения аналогичны значениям этого атрибута для элемента IMG, но я их повторю на всякий случай.
Горизонтальное выравнивание:
• left – по левому краю;
• right – по правому краю.
Вертикальное выравнивание:
• top – выравнивание верхней границы объекта по самому высокому элементу строки;
• texttop – выравнивание верхней границы объекта по самому высокому элементу текста;
• middle – середина объекта выравнивается по базовой линии строки;
• absmiddle – середина объекта выравнивается по середине строки;
• baseline – выравнивание нижней границы объекта по базовой линии строки;
• bottom – аналогично baseline;
• absbottom – нижняя граница объекта выравнивается по нижней границе текущей строки.
Р—Р° размеры объекта отвечают атрибуты height Рё width, РѕРЅРё устанавливают его высоту Рё ширину соответственно. Рти параметры задают размеры РѕРєРЅР° приложения, которое будет использовано для воспроизведения файла. Рначе РіРѕРІРѕСЂСЏ, если РІС‹ воспроизводите видеофайл, то заданные высота Рё ширина Р±СѓРґСѓС‚ указывать РЅРµ только размер экрана, РІ РЅРёС… будет включен еще Рё размер панели проигрывателя.
Как и для картинок, для объектов можно задавать расстояние до текста с помощью атрибутов hspace и vspace.
Благодаря атрибутам элемента OBJECT вы можете менять общие параметры вашего объекта, но есть еще один очень важный элемент, позволяющий задавать параметры самого приложения, в котором происходит воспроизведение.
Рлемент PARAM
Рто главный элемент, предназначенный для управления проигрывателем. РЎ его помощью можно управлять панелями проигрывателя, регулировать начальную громкость воспроизведения Рё РґСЂСѓРіРёРµ параметры приложения; в общем, этот элемент позволяет РіРёР±РєРѕ управлять программой, которая РІРѕСЃРїСЂРѕРёР·РІРѕРґРёС‚ мультимедийное содержимое. Команды для каждой РёР· программ обработчиков СЃРІРѕРё, Рё РёС… легко можно найти РІ Рнтернете.
Рлементов PARAM внутри элемента OBJECT может быть РјРЅРѕРіРѕ, так как для каждого управляющего параметра нужен СЃРІРѕР№ элемент.
Рспользуют РґРІР° основных атрибута элемента PARAM: name Рё value. Первый задает РёРјСЏ параметра приложения (переменной), Р° value – значение этого параметра.
Рлемент PARAM дает неограниченные возможности для управления воспроизведением мультимедиа РЅР° вашей странице.
В примере из листинга 4.14 указан параметр AutoStart, в котором можно задать автоматическое начало воспроизведения файла, и параметр URL, в котором задается адрес файла.
Листинг 4.14. Рспользование элемента PARAM
Встраивание объектов
Теперь подробно рассмотрим встраивание основных типов файлов.
Встраивание аудио
Для начала возьмем самую распространенную задачу – проигрывание фонового звука. Чтобы разобраться с ней, нужно немного отвлечься от элемента OBJECT, потому что есть способ встроить фоновый звук и без него. Создатели языка HTML предусмотрели для этого специальный элемент BGSOUND. Он должен располагаться в заголовке документа, его основные атрибуты – src (путь к звуковому файлу) и loop (количество повторных воспроизведений файла). Для управления звуком можно задавать параметр volume, который определяет громкость воспроизведения музыки. Пример установки фонового звука с помощью элемента BGSOUND приведен в листинге 4.15.
Листинг 4.15. Задание фонового звука с помощью элемента BGSOUND
Встраивание объектов
В случае примера из листинга 4.15 музыка из файла test.mp3 будет проиграна один раз с пятой громкостью.
Есть Рё РґСЂСѓРіРѕР№ СЃРїРѕСЃРѕР± задать фоновую музыку, например ввести РЅР° сайт проигрыватель Рё задать ему нулевые размеры. Ртот СЃРїРѕСЃРѕР± имеет смысл использовать, РєРѕРіРґР° нужно реализовать нестандартное управление воспроизведением музыки РЅР° сайте. Р’ таком случае это можно будет сделать через управляющие команды проигрывателя.
В листинге 4.16 приведен пример того, как задать фоновую музыку с использованием элемента OBJECT.
Листинг 4.16. Задание фоновой музыки с помощью элемента OBJECT
Встраивание объектов
В листинге 4.16 используются параметры AutoStart и Volume, которые задают автоматическое начало воспроизведения и громкость звука соответственно, а сам файл для воспроизведения указывается с помощью параметра URL. Количество повторов определяет параметр PlayCount. При обработке кода из листинга 4.16 файл test.mp3 будет проигрываться сразу при открытии страницы с десятой громкостью два раза.
Примечание
В последних версиях браузеров, перед тем как запустить активное содержимое, запрашивается разрешение пользователя на запуск. Если использовать вариант с элементом BGSOUNG, то подобного запроса не будет, а сразу же начнется воспроизведение звука. При использовании второго варианта для запуска активного содержимого необходимо будет получить согласие пользователя.
С фоновым звуком все просто, но его явно недостаточно для создания полноценной мультимедийной галереи, чаще приходится встраивать на страницу музыку вместе с проигрывателем. В таком случае без элемента OBJECT не обойтись, и альтернатив здесь нет.
Начнем СЃ того, что приведем проигрыватель Рє СѓРґРѕР±РЅРѕРјСѓ для посетителя РІРёРґСѓ. РџСЂРё воспроизведении музыки пропадает необходимость РІ полном РѕРєРЅРµ проигрывателя Рё поэтому графический дисплей можно «срезать». Рто делается очень просто: нужно изменить высоту объекта, то есть просто опустить атрибут height элемента OBJECT, оставляя проигрыватель без высоты.
Код для такого отображения проигрывателя представлен в листинге 4.17.
Листинг 4.17. Неполное окно проигрывателя
Встраивание объектов
Результат обработки браузером листинга представлен на рис. 4.13.
Рис. 4.13. Аудиопроигрыватель
В примере не заданы ни высота, ни ширина. В случае с проигрыванием музыки в этом нет необходимости.
Ртак, Сѓ нас есть удобный для посетителя сайта проигрыватель. Единственное, что хотелось Р±С‹ добавить РІ него, это возможность видеть название песни Рё РёРјСЏ исполнителя данной мелодии. Рто очень просто сделать: нужно добавить строку параметров: .
Результат добавления такой строки параметров показан на рис. 4.14.
Рис. 4.14. Аудиопроигрыватель с дополнительной информацией
Теперь у нас есть удобный и симпатичный проигрыватель музыкальных файлов.
Примечание
РџСЂРё использовании Проигрывателя Windows Media версии выше 6. 4 параметры РјРѕРіСѓС‚ отличаться. Например, вместо FileName используется параметр URL. Рдентификатор clsid для Проигрывателя Windows Media версий выше 6. 4: 6BF52A52-394A-11D3-B153-00C04F79FAA6.
Ртак, музыка встроена, РЅРѕ нам РЅРµ терпится добавить туда еще немного возможностей, например проигрывание видео.
Встраивание видео
Сейчас встраивать видео РЅР° сайт можно без опасений – нынешних скоростей доступа РІ Рнтернет достаточно, чтобы Сѓ пользователей РЅРµ было проблем СЃ просмотром Рё скачиванием видео. Тем более что сейчас перемещение видеоархивов РІ сеть становится весьма популярным. Однако надо помнить, что файлы для потокового видео должны быть небольшими, Р° если РІС‹ хотите поделиться большим фильмом, то лучше выложить его для скачивания РїРѕ ссылке.
Примечание
Потоковое видео – это видео, для просмотра которого пользователю нет необходимости дожидаться полной загрузки файла. Рными словами, РїРѕРєР° РѕРґРЅР° часть файла скачивается, другая воспроизводится.
Ртак, РІС‹ определили размер вашего файла Рё решили, что РѕРЅ РїРѕРґС…РѕРґРёС‚ для потокового воспроизведения. Теперь нужно выбрать программу для воспроизведения.
В этой части мы будем рассматривать воспроизведение в Проигрывателе Windows Media, однако позже рассмотрим и другие проигрыватели.
Выбор проигрывателя зависит от типа файла, и хотя большинство проигрывателей может воспроизвести любой файл, иногда встречаются исключения. Возьмем для рассмотрения формат AVI как наиболее универсальный. MIME-тип такого файла – video/x-msvideo.
Управление проигрывателем осуществляется с помощью элемента PARAM. Как видно в листинге 4.18, с помощью параметров задаются имя файла для проигрывания, параметры панели проигрывателя. В примере реализован проигрыватель, который после загрузки сразу начинает проигрывание со звуком 20. Вообще не стоит разрешать видеопроигрывателю автоматический старт. Поскольку видео требует много трафика и загружает канал, то лучше решение о старте оставить на усмотрение пользователя.
Листинг 4.18. Встраивание видео
Встраивание объекта
Добавить панель с информацией о видео можно так же, как и с аудио, присоединив строку параметров .
Таких полезных параметров много, вы их увидите, когда будете знакомиться с возможностями различных проигрывателей.
Главное – помните, что на первом месте должно стоять удобство посетителя вашего сайта, и выбирать элементы проигрывателя нужно с этой точки зрения.
Помимо видео и аудио, есть еще один распространенный вид мультимедийного содержимого: Flash. Он используется на многих сайтах и, возможно, понадобится вам.
Встраивание Flash-графики
Необходимость Flash-графики не всегда очевидна, однако красиво нарисованная заставка может оживить вашу страницу. Не стоит ни пренебрегать Flash-графикой, ни переоценивать ее действие. Переизбыток подобного содержимого может замедлить загрузку страницы. Если же вы создаете сайт только на Flash, то советую предусмотреть возможность просмотра содержимого без графики. Некоторые посетители будут вам благодарны.
Рассмотрим особенности встраивания Flash-графики. Для воспроизведения Flash-файла РЅР° компьютере пользователя должна быть установлена специальная программа. Чаще всего это Shockwave, ее можно бесплатно скачать СЃ сайта производителя. Рдентификатор этой программы clsid:d27cdb6e-ae6d-11cf-96b8-44455354 0000, Р° MIME-тип для SWF-файла будет application/ x-shockwave-flash.
Для управления проигрыванием файла, как обычно, используем элементы PARAM.
В листинге 4.19 показано встраивание Flash-объекта. Параметр movie задает имя файла, который надо воспроизвести. Параметр loop отвечает за количество воспроизведений, а play – за автоматическое начало воспроизведения.
Листинг 4.19. Встраивание Flash-графики
Встраивание объекта
При обработке этого кода браузер воспроизведет файл test.swf только после соответствующего указания пользователя и проиграет его один раз.
Теперь, когда вы знаете, как встроить Flash или любой другой активный объект на сайт, рассмотрим подробнее проигрыватели и их параметры.
Проигрыватели
Самыми распространенными являются Проигрыватель Windows Media, RealPlayer, QuickTime Player. Каждый из них имеет свой формат файлов, но воспроизводить может практически любые файлы мультимедиа.
Рассмотрим подробнее эти проигрыватели и их самые полезные параметры.
• Проигрыватель Windows Media – стандартный проигрыватель для Windows, его плюс в универсальности: там, где есть Windows, есть этот проигрыватель.
Рдентификатор: 22D6F312-B0F6-11D0-94AB-0080C74C7E95.
Параметры приведены в табл. 4.1. Если в таблице в графе Значение указано 0/1, то 0 – выключить функцию, 1 – включить.
Таблица 4.1. Параметры WMP
• RealPlayer – этот проигрыватель, помимо простого проигрывания файлов, приспособлен для воспроизведения радио или телевидения в режиме online.
Рдентификатор: CFCDAA03-8BE4-11cf-B8 4B-0 02 0AFBBCCFA.
Параметры приведены в табл. 4.2.
Таблица 4.2. Параметры RealPlayer
Таблица 4.3. Значения параметра controls
• QuickTime Player – РІРѕСЃРїСЂРѕРёР·РІРѕРґРёС‚ большинство современных мультимедийных форматов, включая собственные форматы MOV Рё QT. Если позволяет скорость подключения, СЃ помощью этого проигрывателя можно просматривать потоковое видео РёР· Рнтернета.
Рдентификатор: 02BF2 5D5-8C17-4B2 3-BC80-D3488ABDDC6B. Параметры приведены РІ табл. 4.4.
Таблица 4.4. Параметры QuickTime Player
Мы рассмотрели основные виды проигрывателей и их самые востребованные параметры, теперь видео– и аудиосодержимое сайта полностью в вашей власти.
Однако возможности элемента OBJECT не ограничиваются добавлением только музыки и фильмов, есть много других способов для использования этого элемента.
Дополнительные возможности элемента OBJECT
Посмотрим, что еще можно добавить на сайт с помощью элемента OBJECT.
В качестве объекта на сайт можно добавить картинку:
Можно добавить другой сайт:
По сути подобные возможности элемента позволяют добавлять абсолютно любые объекты и управлять ими как угодно.
Приведу интересный пример: добавление календаря, соответствующий код приведен в листинге 4.20.
Листинг 4.20. Добавление календаря
Встраивание объекта
Получившийся календарь изображен на рис. 4.15.
Рис. 4.15. Встроенный календарь
РР· этих примеров можно понять, что возможности элемента OBJECT очень большие Рё только РѕС‚ создателя сайта зависит, как РѕРЅРё Р±СѓРґСѓС‚ использованы.
Резюме
Р’ этой главе РјС‹ рассмотрели возможности улучшения РІРёРґР° сайта СЃ помощью картинок, Flash, аудио Рё видео. РР· примеров РІРёРґРЅРѕ, что возможности языка HTML РІ этом плане весьма велики.
Однако необходимо проявлять осторожность, чтобы большое количество графики не помешало функциональности сайта, потому что мультимедиа-приложения используют значительные ресурсы для загрузки на компьютер пользователя.
В главе приведены примеры, показывающие универсальность элемента OBJECT и демонстрирующие его дополнительные возможности.
Теперь вы легко можете добавить на сайт картинку, причем разными методами; вставить видео– или аудиофайл вместе с проигрывателем. Вы знаете, в каком направлении двигаться для получения большей функциональности своей страницы.
Глава 5
Фреймы
5.1. Создание фреймов
5.2. Границы фрейма
5.3. Полосы прокрутки
5.4. Ссылки внутри фреймов
5.5. Рзменение размеров фреймов
5.6. Плавающие фреймы
5.7. Управление пространством внутри фрейма
5.8. Достоинства и недостатки фреймов
Фреймы (frames) – это HTML-элементы, позволяющие разделить страницу на несколько независимых окон. В каждое окно можно поместить собственную независимую HTML-страницу, в которой может находиться ссылка из одного окна в другое. Фреймы поддерживаются в браузерах версий 3.0 и более. Они применяются в основном для организации постоянно находящихся на экране меню, в то время как в другом окне располагается непосредственно сама информация.
Фреймы чаще всего используют для создания следующих элементов.
• Оглавление – обычно создают в виде вертикального столбца. Пользователи могут обращаться к нему в любой момент, и им не нужно возвращаться к предыдущей странице, чтобы выбрать другой пункт оглавления.
• Неподвижные элементы интерфейса – использование фреймов позволит вам «закрепить» на экране графику, логотипы и другие неподвижные по замыслу элементы, в то время как остальная часть страницы будет прокручиваться во фрейме.
• Формы и результаты – можно в одном фрейме создать форму, а в другом отобразить результаты запроса.
5.1. Создание фреймов
Чтобы HTML-страница содержала фреймы, а экран был разделен на области, необходимо заменить пару тегов .. в коде HTML-страницы парой тегов …. Необходимо также указать хотя бы один из атрибутов cols или rows. С помощью этих атрибутов задают размеры фреймов и количество строк и столбцов в разбиении страницы. Атрибут cols определяет количество строк, а атрибут rows – количество столбцов. Области, полученные в результате разбиения, и будут являться фреймами. Отсутствие этих атрибутов определяет один фрейм величиной во все окно браузера. В значении атрибутов необходимо указывать не количество строк или столбцов, а значение ширины каждого фрейма через запятую, если рассматривать атрибут cols (например, cols = «13,31,34»). Атрибут rows определяет высоту каждого фрейма соответственно. Размеры фреймов могут задаваться как в абсолютных, так и в относительных величинах.
• Простое числовое значение определяет фиксированную высоту или ширину фрейма РІ пикселах (например, cols = "20, 100, 20" rows = "30, 100"). Рто далеко РЅРµ самый лучший СЃРїРѕСЃРѕР± описания размеров фрейма, поскольку различные браузеры имеют различный размер рабочего поля, РЅРµ РіРѕРІРѕСЂСЏ уже Рѕ различных экранных разрешениях Сѓ пользователя. Если РІС‹ РІСЃРµ же используете данный СЃРїРѕСЃРѕР± описания размера, то настоятельно рекомендуется сочетать его СЃ каким-либо РґСЂСѓРіРёРј, чтобы РІ результате РІС‹ точно получили стопроцентное заполнение РѕРєРЅР° браузера пользователя.
• Значение величины фрейма, заданное в процентах от 1 до 100 (например, cols = "20 %, 50 %, 3 0 %" rows = "30 %, 70 %"). Если общая сумма процентов, описывающих фрейм, превышает 100, то размеры всех фреймов пропорционально уменьшаются до суммы 100 %. Если, соответственно, сумма меньше 100, то размеры пропорционально увеличиваются.
• В значении указывается число со звездочкой (например, 5*). Однако числовое значение в данном описании является необязательным. Символ * указывает на то, что все оставшееся место будет принадлежать данному фрейму. Если указывается два или более фрейма с описанием * (например, cols = "*, *, *"), то оставшееся пространство делится поровну между этими фреймами. Если перед звездочкой стоит цифра, то она указывает пропорцию для данного фрейма (во сколько раз он будет больше аналогично описанного просто звездочкой). Например, описание rows = "2*,*,*" говорит, что будет создано три фрейма с размерами 2/3 свободного пространства для первого фрейма и по 1/3 для двух других.
Чтобы в каждой из областей отображалась информация, необходимо использовать элемент FRAME, обязательный атрибут src которого укажет адрес документа, отображаемого внутри фрейма. Если адрес отсутствует, то будет отображен пустой фрейм. Рассмотрим создание фреймов на примере, описанном в листинге 5.1.
Листинг 5.1. Пример создания фреймов
Рта страница содержит 4 фрейма
На рис. 5.1 изображено, как будет отображаться HTML-документ, описанный в листинге 5.1. Страница содержит четыре области соответствующих пропорций, в каждую из которых первоначально загружаются HTML-документы Frame 1. html, Frame2.html, Frame3.html и Frame4.html.
Рис. 5.1. Пример страницы, содержащей четыре фрейма
Помимо HTML-документов, фрейм может содержать и изображение. Для этого необходимо указать адрес соответствующей картинки в атрибуте src, например src="pic. gif". Обратите внимание, что элемент FRAME используется без закрывающего тега.
5.2. Границы фрейма
Обращаю ваше внимание на то, что в описанном выше примере каждый фрейм имеет границу (см. рис. 5.1). Границей фрейма можно управлять, как и любыми другими элементами фрейма. Для этого существует несколько атрибутов элемента FRAMESET, позволяющих настраивать границы фреймов. Ширина границы определяется атрибутом border. По умолчанию значение ширины границы равно пяти. Чтобы граница фрейма отсутствовала, необходимо либо указать значение ширины границы равным нулю, либо присвоить значение no или 0 атрибуту frameborder. Данный атрибут может принимать только два противоположных значения. Если значение атрибута frameborder равно yes или 1, то граница фреймов будет отображаться, если 0 или no, то нет. Возможны конфликтные ситуации, так как значения атрибута frameborder различаются для разных браузеров. Однако эту проблему можно решить. Просто используйте дважды атрибут frameborder (), чтобы браузер выбрал себе значение по вкусу.
С помощью атрибута bordercolor определяется цвет границы фрейма, необходимо только указать код или соответствующее зарезервированное имя цвета.
В листинге 5.2 приведен пример HTML-страницы, которая содержит описанные выше атрибуты управления границей фрейма.
Листинг 5.2. Пример управления границей фреймов
Рта страница содержит 4 фрейма
На рис. 5.2 показано, как будет отображаться страница, описанная в листинге 5.2, в окне браузера Internet Explorer. Страница разделена на четыре области линиями черного цвета, за что отвечает атрибут bordercolor="#000000".
Рис. 5.2. Пример управления границами фреймов
Стоит отметить, что изменять границу одного из фреймов нельзя. Если же указать атрибуты, управляющие границей фреймов, в элементе FRAME (например, ), то браузер не проигнорирует это сообщение, а границы каждого фрейма непредсказуемо изменятся (рис. 5.3).
Рис. 5.3. Попытка изменить границы отдельного фрейма
5.3. Полосы прокрутки
В некоторых случаях полосы прокрутки нарушают дизайн HTML-страницы. Если содержимое фрейма не помещается в отведенную область, то автоматически появляются полосы прокрутки для просмотра информации. Для управления отображением полос прокрутки используется атрибут scrolling, принимающий три основных значения:
• yes – всегда вызывает появление полос прокрутки, независимо от объема информации;
• no – запрещает появление полос прокрутки;
• auto – полосы прокрутки отображаются при необходимости (по умолчанию).
Рассмотрим пример страницы, в которой использована конструкция, описанная выше (рис. 5.4).
Рис. 5.4. Пример управления полосами прокрутки
Р’ данном примере второй Рё третий фреймы содержат изображение. Рассмотрим каждый фрейм РїРѕ отдельности. Полосы прокрутки первого фрейма всегда, независимо РѕС‚ содержимого, Р±СѓРґСѓС‚ отображаться, РІ данном случае РѕРЅРё неактивны, так как содержимое фрейма меньше отведенного для него места. РЈ второго фрейма полосы прокрутки появились автоматически, так как изображение РЅРµ поместилось РІ отведенную область. Рспользуя полосы прокрутки, РІС‹ РІСЃРµ же можете просмотреть изображение. Рзображение, которое содержит третий фрейм, просмотреть сложно, так как Сѓ него отключены полосы прокрутки. Таким образом, атрибут scrolling="no" следует использовать осторожно. Рнформация, содержащаяся РІ четвертом фрейме, поместилась РІ отведенное для фрейма место, поэтому полосы прокрутки РЅРµ отображаются.
5.4. Ссылки внутри фреймов
В большинстве случаев при переходе по ссылке в окне браузера текущий документ заменяется новым. При использовании фреймов схема загрузки документов отличается от стандартной. Главное отличие – возможность загружать документ в выбранный фрейм из другого. Для этого применяется атрибут target элемента А. В качестве значения используется имя фрейма, в который будет загружаться документ, указанный атрибутом name.
В листинге 5.3 приведен пример HTML-документа, где некоторым фреймам присвоены имена.
Листинг 5.3. Код главной страницы
Рта страница содержит 4 фрейма
На рис. 5.5 изображен HTML-документ (листинг 5.3), в четвертый фрейм которого загружается страница, содержащая ссылку на другой документ: Другая страница.
Рис. 5.5. Четвертый фрейм содержит ссылку на другой документ
Если пользователь щелкнет кнопкой мыши на данной ссылке, то новый документ загрузится во втором фрейме, на что указывает атрибут target = «frame2» (рис. 5.6).
Рис. 5.6. Во второй фрейм загрузился новый документ
Стоит также отметить, что имя фрейма должно начинаться с цифры или латинской буквы. Следующие имена используются в качестве зарезервированных:
• target="_blank" – документ загрузится в новом окне;
• target="_self" – документ загрузится в текущий фрейм;
• target="_parent" – если документ с гиперссылкой находится во вложенном наборе фреймов, то документ загружается в родительское окно или набор фреймов;
• target="_top" – отменяет все фреймы и загружает документ в полное окно браузера.
Рспользуя фреймы, РЅРµ стоит забывать Рё РѕР± особенностях гиперссылок. Если атрибут target РЅРµ указан, то целевой документ загружается РїРѕ умолчанию РІ тот же фрейм. Если указано несуществующее РёРјСЏ фрейма, то открывается РЅРѕРІРѕРµ РѕРєРЅРѕ браузера, получая РїСЂРё этом заданное РёРјСЏ. Для внешних ссылок следует задавать значения атрибута target либо _top, либо _blank, чтобы чужие сайты РЅРµ отображались РІ ваших фреймах, Р° занимали полное РѕРєРЅРѕ.
Совет
Не стоит злоупотреблять именем «_blank», потому что часто пользователи не замечают, что открылось новое окно. Незакрытые окна копятся, и пользователь может запутаться в них.
5.5. Рзменение размеров фреймов
По умолчанию размеры фреймов можно изменять с помощью указателя мыши. Необходимо просто навести указатель на границу между фреймами и, зажав левую кнопку мыши, переместить границу влево или вправо, вверх или вниз (рис. 5.7).
Р РёСЃ.В 5.7. Рзменение размеров фрейма указателем мыши
Для того чтобы заблокировать возможность изменения пользователем размеров фреймов, следует воспользоваться атрибутом noresize элемента FRAME.
Атрибут noresize не требует никаких значений. Для страницы с двумя фреймами этот параметр можно указать лишь в одном месте. Естественно, если у одного фрейма нельзя изменять размеры, то у близлежащего к нему размеры также не будут меняться.
5.6. Плавающие фреймы
Браузеры последних версий позволяют использовать плавающие фреймы, добавляемые с помощью элемента IFRAME. Плавающий фрейм находится внутри обычного
документа, не содержащего тегов . , и позволяет добавлять на страницу любые другие независимые документы. В элементе I FRAME можно указывать те же атрибуты, что и в элементах, описывающих обычные фреймы. Кроме того, можно использовать следующие атрибуты: width, height, hspace, vspace, align, значения которых совпадают со значениями соответствующих атрибутов элемента IMG.
Ваш браузер не поддерживает плавающие фреймы!
На рис. 5.8 изображено окно браузера, содержащее плавающий фрейм.
Рис. 5.8. Пример плавающего фрейма
Если браузер не поддерживает плавающие фреймы, то элемент IFRAME будет проигнорирован. Для таких браузеров можно указать альтернативный текст, расположенный между парой тегов .
5.7. Управление пространством внутри фрейма
По умолчанию браузер отображает фреймы с полосой чистого пространства (полями) между содержимым и границей фрейма, равной 10 пикселов. Управлять этим пространством фрейма можно с помощью атрибутов marginheight и marginwidth. Атрибут marginwidth определяет высоту свободного пространства слева и справа от содержимого фрейма, а marginheight – сверху и снизу соответственно. Задавая величины полей, надо использовать оба атрибута, так как браузер может автоматически сократить размеры тех полей, которые вы не указали, до наименьшего значения. Значения этих атрибутов всегда должны указываться в абсолютных значениях (пикселах), а минимальное значение равняется одному пикселу.
Рассмотрим пример HTML-документа, который содержит всего РґРІР° фрейма (листинг 5.4). Рзменим поля первого фрейма, Р° поля второго оставим РїРѕ умолчанию. Чтобы разница была заметна невооруженным взглядом, РІ каждый фрейм загрузим изображения.
Листинг 5.4. Рзменение полей фрейма
Рта страница содержит 2 фрейма
HTML-страница, описанная выше, изображена на рис. 5.9. В соответствии с кодом страницы поля первого фрейма значительно отличаются от полей второго, которые мы оставили по умолчанию.
Рис. 5.9. Пример управления полями фрейма
Стоит также отметить, что значения полей необходимо указывать для каждого фрейма в отдельности. Если использовать запись frameset marginheight=45 marginwidth =1>, то браузер просто проигнорирует значения атрибутов, а не определит их для всех фреймов.
5.8. Достоинства и недостатки фреймов
Поскольку вокруг фреймов существует много разговоров об их необходимости, рассмотрим их достоинства и недостатки, чтобы можно было самостоятельно решить, стоит ли использовать их на своем сайте.
Достоинства фреймов следующие.
• Простота – с помощью фреймов HTML-страница разграничивается на две области, которые содержат навигацию по сайту и его контент. Механизм фреймов позволяет открывать документ в одном фрейме по ссылке, нажатой в совершенно другом фрейме. Такое разделение HTML-страницы на составляющие интуитивно понятно и логически обусловлено.
• Быстрота – для верстки без фреймов характерно размещение РЅР° РѕРґРЅРѕР№ странице Рё навигации, Рё содержания. Рто увеличивает объем каждой страницы Рё РІ СЃСѓРјРјРµ может существенно повлиять РЅР° объем загружаемой СЃ сайта информации. Поскольку фреймы используют разделение информации РЅР° части, страницы СЃ РЅРёРјРё Р±СѓРґСѓС‚ загружаться быстрее.
• Размещение – фреймы предоставляют уникальную возможность – размещение информации точно в нужном месте окна браузера. Так, можно поместить фрейм внизу браузера, и, независимо от прокручивания содержимого, эта область не изменит своего положения.
• Рзменение размеров областей – можно изменять размеры фреймов «на лету», чего РЅРµ позволяет сделать традиционная верстка HTML.
• Загрузка – загрузка HTML-страницы происходит только в указанное окно, остальные остаются неизменными. С помощью языка JavaScript можно осуществить одновременную загрузку двух и более страниц во фреймы.
Недостатки фреймов такие.
• Навигация – пользователь зачастую оказывается на сайте, совершенно не представляя, куда он попал, потому что всего лишь щелкнул кнопкой мыши на ссылке, полученной в поисковой системе. Чтобы посетителю сайта было проще разобраться, где он находится, на каждую страницу помещают название сайта, заголовок страницы и навигацию. Фреймы, как правило, нарушают данный принцип, отделяя заголовок сайта от содержания, а навигацию от контента. Представьте, что вы нашли подходящую ссылку в поисковой системе, щелкаете на ней кнопкой мыши, а в итоге открывается документ без названия и навигации. Чтобы понять, где вы находитесь, или посмотреть другие материалы, придется редактировать путь в адресной строке, что в любом случае доставляет неудобство.
• Плохая индексация поисковыми системами – поисковые системы плохо работают с фреймовой структурой, поскольку на страницах, которые содержат контент, нет ссылок на другие документы. Если вы хотите получать посетителей с поисковых систем, забудьте о фреймах.
• Внутренние страницы нельзя добавить РІ Рзбранное – фреймы скрывают адрес страницы, РЅР° которой находится посетитель, Рё всегда показывают только адрес сайта. РџРѕ этой причине понравившуюся страницу невозможно поместить РІ раздел Рзбранное браузера.
• Несовместимость с разными браузерами – параметры фреймов обладают свойством совершенно по-разному отображаться в различных браузерах. Причем противоречие между ними настолько явное, что одни и те же параметры интерпретируются браузерами совершенно по-своему.
• Непрестижность – весьма странный недостаток, который РЅРµ имеет никакого отношения Рє техническим особенностям создания сайта, Р° РЅРѕСЃРёС‚ скорее идеологический характер. Сайты СЃ фреймами считаются несолидными, Р° РёС… авторы сразу выпадают РёР· разряда профессионалов, которые РЅРёРєРѕРіРґР° РЅРµ используют фреймы РІ СЃРІРѕРёС… работах. Рсключение составляют чаты, РіРґРµ без фреймов обойтись просто невозможно.
Резюме
В этой главе вы познакомились с фреймами, которые являются одними из основных объектов HTML. Вы научились создавать их и управлять отдельными их элементами. Кроме того, вы узнали, в каких целях эффективно использовать фреймы и какие они имеют достоинства и недостатки в своем использовании.
Однако РІ среде веб-мастеров использование фреймов традиционно считается дурным тоном. РќР° то есть РјРЅРѕРіРѕ серьезных оснований, Рѕ которых говорилось выше. Хотя РІ некоторых случаях использование фреймов дает такие преимущества, что отказываться РѕС‚ РЅРёС… просто неразумно. РЈ фреймов наряду СЃ недостатками есть Рё достоинства, которые РЅРµ позволяют отбросить эту технологию как бесперспективную. Рспользовать или РЅРµ использовать фреймы РЅР° сайте – решать именно вам.
Глава 6
Конструирование форм
6.1. Рлемент FORM
6.2. Создание полей формы
Что главное РІ Рнтернете? Его интерактивность. Можно общаться СЃ посетителями сайта Рё получать РѕС‚ РЅРёС… отзывы Рѕ работе – такое взаимодействие всегда полезно Рё интересно. Создатели сайта узнают, насколько РѕРЅ интересен посетителям, Рё РјРѕРіСѓС‚ изменить его РІ лучшую сторону, Р° посетители получают возможность участвовать РІ жизни сайта, общаться РґСЂСѓРі СЃ РґСЂСѓРіРѕРј Рё СЃ его создателями.
В этой главе мы рассмотрим объект, который помогает организовать взаимодействие пользователя с авторами сайта, – формы. Формы позволяют получать информацию о посетителях – любая информация, введенная в форму, может быть отправлена создателю сайта.
Формы напоминают анкеты, в них есть возможность создавать поля, в которые пользователь сам может ввести любую информацию, и поля-списки, где ему нужно выбрать ответ из вариантов, предложенных автором. Возможности форм по группировке и представлению информации позволяют разместить ее наилучшим образом. В умелых руках это мощный и полезный инструмент.
Главное при создании форм – следить за тем, чтобы предложенные вами поля были удобны для посетителей и приемлемы для ответов на ваши вопросы.
Технически формы передают данные РѕС‚ пользователя удаленному серверу. Рто позволяет создавать системы регистрации пользователей, форумы, гостевые РєРЅРёРіРё. Для получения Рё обработки данных форм используются языки веб-программирования (PHP, Perl), РЅРѕ РјС‹ РЅРµ касаемся РёС… РІ этой РєРЅРёРіРµ. Хотя Рё придется рассмотреть моменты, имеющие отношение Рє программированию, сконцентрируемся РЅР° тех особенностях Рё возможностях форм, которые пригодятся дизайнеру, чтобы грамотно Рё СѓРґРѕР±РЅРѕ расставлять РёС… РЅР° странице.
6.1. Рлемент FORM
Основой любой формы служит элемент FORM, требующий наличия закрывающего тега. Атрибуты этого элемента содержат информацию, общую для всех полей формы. На самом деле в одну форму надо включать поля, объединенные логически, потому что в один момент на сервер можно отправить только одну форму.
Большинство атрибутов этого элемента влияют на обработку формы, а не на ее внешний вид. Однако необходимо знать, для чего они предназначены, чтобы понимать, как связать форму с кодом.
Главным для рассматриваемого элемента является атрибут action, указывающий обработчик данных для формы. Обработчик – это файл, в котором описано, что нужно делать с данными формы. Создать этот файл – дело программиста, однако переменные, которые будут туда передаваться (их имена и возможные значения), зависят от тех, кто описывает форму. Сам обработчик может быть написан на любом языке, например это может быть файл test.php, как в примере из листинга 6.1. Если значение атрибута action не будет указано, то страница перезагрузится, а все элементы формы примут значения, заданные по умолчанию, то есть в этом случае форма окажется абсолютно бесполезной. В качестве значения данного атрибута надо указать URL-путь к файлу-обработчику на сервере.
Рассмотрим пример из листинга 6.1. Файл обработки находится по адресу test. php, именно ему и будут переданы все данные, введенные в форму.
Листинг 6.1. Атрибут action элемента FORM
Конструирование форм
Сам файл test.php может делать с данными что угодно, например занести их в базу или отправить вам по почте. В общем, в том, что касается обработки данных, возможностей много, а реализуются они очень просто: дайте команду вашему программисту. Никаких усилий с вашей стороны.
Что же делать, если программиста нет, а получить данные от пользователя нужно? Можно сделать так, чтобы заполненная посетителем форма приходила вам на почту. Для этого надо в качестве значения атрибута action указать электронный адрес, на который должна приходить форма, начав с ключевого слова mailto. Для корректной обработки данных в этом случае необходимо указать значение атрибута enctype="text/plain".
В листинге 6.2 приведен пример того, как можно отправить данные по электронной почте. При отправке формы откроется почтовый клиент, установленный на компьютере пользователя, и появится предложение отправить данные формы в письме.
Листинг 6.2. Отправка данных формы по почте
Конструирование форм
Р’ РїРёСЃСЊРјРµ будет отправлен текстовый файл, РІ котором названиям полей формы Р±СѓРґСѓС‚ присвоены значения, которые ввел посетитель. Рначе РіРѕРІРѕСЂСЏ, вам придет текст такого РІРёРґР°:
название_поля=значение_введенное_посетителем
Вообще атрибут enctype используют для указания MIME-типа данных, отправляемых вместе СЃ формой. Рспользовать этот атрибут обязательно только РІ случае отправки файла через форму, тогда значение атрибута должно быть multipart/ form-data.
В листинге 6.3 показан вариант задания атрибута enctype, когда через форму будет отправляться файл.
Листинг 6.3. Атрибут enctype элемента FORM
Конструирование форм
Отправка файлов – важная возможность форм, потому что вместо ввода информации вручную пользователь может просто отправить вам файл, в котором будет содержаться необходимая информация.
Еще одним обязательным атрибутом является атрибут method, который задает то, как будет передаваться форма. При выборе метода отправки формы нужно ориентироваться на данные, которые необходимо отправить вместе с ней. Основную роль играет объем данных.
Существуют два основных метода: GET и POST. Рассмотрим применение каждого из них.
• GET – это наиболее распространенный метод, который применяется для получения данных СЃ сервера. Р’ методе GET данные РЅР° сервер передаются через адресную строку браузера. РћРЅ же вызывается, РєРѕРіРґР° РІС‹ вводите адрес сайта РІ адресной строке или щелкаете РєРЅРѕРїРєРѕР№ мыши РЅР° ссылке. Р’ этом методе РїСЂРё формировании запроса Рє серверу РІСЃРµ переменные Рё РёС… значения формируют последовательность РІРёРґР° . Рными словами, имена Рё значения переменных присоединяются Рє адресу сервера после знака? и разделяются знаком &.
Ртот метод нужно использовать, если РІС‹ РЅРµ передаете больших объемов информации. Если же вместе СЃ формой РІС‹ хотите переслать РЅР° сервер файл, этот метод РЅРµ подойдет.
• POST – применяется для отправки данных РЅР° сервер. Данные, отправляемые СЃ помощью этого метода, РЅРµ РІРёРґРЅС‹ РІ заголовке URL, поскольку РѕРЅРё содержатся РІ теле сообщения. Рменно поэтому метод POST РїРѕРґС…РѕРґРёС‚ для отправки больших объемов информации.
В листинге 6.4 для отправки формы выбран метод POST, потому что вместе с формой нужно передать файлы.
Листинг 6.4. Атрибут method элемента FORM
Конструирование форм
Форма готова для передачи файлов и больших объемов информации.
Теперь, чтобы позволить программисту управлять формой, надо задать ее имя. Для этого нужно использовать атрибут name. С его помощью можно указать уникальное имя формы, которое будет использоваться для доступа к элементам формы через сценарии.
В листинге 6.5 показан пример задания имени формы. Теперь открыт доступ к форме через сценарии.
Листинг 6.5. Атрибут name элемента FORM
Конструирование форм
Было задано логичное и понятное имя для формы.
Совет
Старайтесь делать логичными имена форм и всех полей. Учтите, что программисту, который будет писать вам обработчик, придется использовать их многократно. Согласуйте с программистом правила создания имен, что сэкономит и ваше, и его время.
Р’РѕС‚ РјС‹ добрались РґРѕ единственного атрибута, который РЅРµ заинтересует программистов, зато пригодится нам. Рто атрибут target. Рменно РѕРЅ указывает РЅР° то, РІ каком РѕРєРЅРµ выводить результат обработки формы. Над этим стоит задуматься, потому что РЅРµ всегда будет СѓРґРѕР±РЅРѕ выводить результат обработки формы РІ то же РѕРєРЅРѕ, РіРґРµ была сама форма.
Рассмотрим значения параметра target.
• _blank – загружает страницу в новое окно браузера.
• _self – загружает страницу в текущее окно.
• _parent – загружает страницу во фрейм-родитель. Если фреймов нет, то работает как _self.
• _top – отменяет все фреймы и загружает страницу в полном окне браузера. Если фреймов нет, то работает как _self.
В листинге 6.6 представлен пример кода, который после обработки страницы будет загружать результат в новом окне браузера.
Листинг 6.6. Атрибут target элемента FORM
Конструирование форм
Открывать результаты в новом окне удобно, например, когда создается форма для поиска.
С элементом FORM мы разобрались: рассмотрели его основные атрибуты. Большинство атрибутов отвечают за параметры обработки формы и за ее общие настройки.
Кстати, если вы пробовали вывести код любого листинга из представленных выше и посмотреть, как он выглядит в браузере, то наверняка удивились, что увидели только белую страницу. Как говорилось выше, элемент FORM логически объединяет поля таблицы, сами же поля создаются с помощью других элементов, которые мы и рассмотрим дальше.
6.2. Создание полей формы
Теперь приступим к самому интересному – к созданию полей для форм. Полей, из которых можно составить форму, очень много, поэтому надо внимательно следить за выбором поля для представления конкретной информации. Говоря о каждом из видов, мы будем рассматривать, в каких случаях его можно использовать. Ведь есть поля с похожими функциями, разница будет только в удобстве применения конкретного поля в конкретной ситуации.
Общие атрибуты элемента INPUT
Большинство полей для формы создается с помощью элемента INPUT. Атрибуты элемента отличаются в зависимости от поля, для создания которого используется этот элемент. Тем не менее есть атрибуты, которые можно, а некоторые даже нужно применять вне зависимости от типа поля.
Начнем с главного атрибута, который, собственно, и задает поле, – с атрибута type. Он принимает значение, указывающее на тип поля. В табл. 6.1 описано, какое значение может принимать атрибут и какому полю оно соответствует. Дальше мы подробно рассмотрим каждый тип поля и атрибуты, которые могут применяться вместе с ним.
Таблица 6.1. Значения атрибута type
В таблице поля описаны кратко, подробно мы их рассмотрим позже, но теперь у вас есть некоторое представление о возможностях элемента INPUT.
Следующий атрибут, который РјС‹ рассмотрим, является обязательным Рё называется name. Его значение задает уникальное РёРјСЏ поля. Введенная пользователем информация будет передаваться обработчику РІ качестве значения переменной СЃ именем поля. Ртот атрибут имеет значение для программистов, поэтому РёРјСЏ должно быть логичным.
РРЅРѕРіРґР° бывает нужно запретить пользователю изменение данных поля, например, чтобы РѕРЅ РЅРµ СЃРјРѕРі поменять уже введенную информацию. Чтобы запретить изменение данных, РІ любое поле можно добавить атрибут disabled. РџСЂРё этом поле РЅРµ просто нельзя будет поменять, его невозможно даже взять РІ фокус.
Атрибут value задает значение, которое будет передано обработчику. РџРѕ сути, РѕРЅ определяет данные, введенные РІ поле. Для текстовых полей СЃ помощью этого атрибута можно установить значение РїРѕ умолчанию. Введя РІ поле значение РїРѕ умолчанию, можно пояснить пользователю, какие данные Рё РІ каком формате РІС‹ хотите здесь видеть. Рто как образец: гораздо удобнее заполнять форму, РІРёРґСЏ перед СЃРѕР±РѕР№ пример.
Для полей, предоставляющих возможность выбора, атрибут value определяет, какое значение будет передано обработчику при выборе конкретного пункта. В таком случае важно, чтобы значения этого параметра логически соответствовали пунктам, из которых можно выбирать. Помните о том, что с этими данными придется работать другим людям.
Рассмотренные выше атрибуты можно применять в любых полях, они всегда будут действовать. Теперь пора разобраться с самими полями. Начнем с текстового поля.
Текстовые поля
Без ввода текста никак не обойтись, потому что без него потеряется смысл создания формы. Рассмотрим поля для ввода текста в одну строку, для многострочного ввода служат другие элементы, которые мы разберем позже. Однострочное поле удобно для ввода имени, пароля и любой другой короткой информации.
Для создания текстового поля указываем значение атрибута TYPE="text". Вместе СЃ этим атрибутом можно использовать атрибут maxlenght, значение которого определяет максимальное количество символов, которые можно ввести РІ данную строку. Ртот атрибут имеет смысл применять, например, чтобы злоумышленник РЅРµ СЃРјРѕРі засорить базу бессмысленными строками большой длины. Однако выбирать значение этого атрибута надо осторожно, чтобы Сѓ честного пользователя РЅРµ возникло проблем СЃ РІРІРѕРґРѕРј информации.
Можно также задать длину поля ввода, используя атрибут size. Следить за длиной поля важно, потому что при вводе строки большой длины пользователю удобно видеть ее целиком. Рнаоборот, нет необходимости оставлять большое поле, если надо ввести один или два символа, – это будет неудобно. Таким образом, над размерами поля для ввода текста нужно подумать.
Внимание!
РЁРёСЂРёРЅР° текстового поля определяется количеством символов моноширинного шрифта, то есть РѕРЅР° задается количеством стоящих СЂСЏРґРѕРј Р±СѓРєРІ одинаковой ширины. Если размер шрифта изменяется СЃ помощью стилей, то ширина также соответственно меняется. Рто справедливо для всех текстовых полей РІ формах.
В листинге 6.7 приведен пример полей для ввода основной информации о посетителе. Для поля Введите логин мы использовали атрибут maxlenght и ограничили его по количеству знаков, для других полей ограничений нет. Атрибут size нет необходимости использовать, так как все поля имеют размер, адекватный информации, которую в них нужно ввести. Для всех полей заданы значения по умолчанию, которые поясняют, какую информацию требуется ввести.
Листинг 6.7. Создание поля для ввода текста
Конструирование форм
Результат обработки листинга 6.7 показан на рис. 6.1.
Рис. 6.1. Текстовые поля для ввода данных о пользователе
Теперь у вас есть первые четыре поля для ввода данных о посетителе. Пользователю нужно придумать имя для входа и, соответственно, пароль.
Поле для ввода пароля
Чтобы создать поле для ввода пароля, задаем значение атрибута type="password". Особенность этого поля в том, что все введенные буквы закрываются звездочками (или точками, в зависимости от системы) и увидеть вводимый пароль невозможно.
Вместе с этим полем можно использовать те же атрибуты, что и для строки ввода текста, то есть maxlenght и size.
В листинге 6.8 представлен пример создания поля для ввода пароля.
Листинг 6.8. Создание поля для ввода пароля
Конструирование форм
Результат обработки браузером кода из листинга 6.8 представлен на рис. 6.2.
Рис. 6.2. Поле для ввода пароля
На рис. 6.2 видно, что вместо текста в поле ввода видны точки – теперь пароль нельзя узнать.
После ввода личной информации пользователь должен отправить ее на сервер. Для этого служит инструмент, который мы рассмотрим дальше.
РљРЅРѕРїРєРё
При создании формы без кнопок не обойтись: с их помощью можно отправить, очистить или отредактировать форму. В общем, кнопки необходимы. Мы можем создавать разные кнопки, в зависимости от того, что нужно сделать с формой.
Чтобы создать обычную кнопку, присваиваем атрибуту type значение «button». Если надо создать кнопку, которая будет отправлять форму обработчику, устанавливаем type="submit", а если создаем кнопку, очищающую форму, то type="reset".
Думаю, необходимость наличия в любой форме кнопок очевидна, без них элементарно невозможно будет отправить данные обработчику. Чаще всего создаются две кнопки: для отправки данных и для очистки формы. Для большинства форм такого набора достаточно.
Значение атрибута value задает надпись на кнопке, что очень полезно, потому что надписи по умолчанию очень скучные.
В примере из листинга 6.9 описано создание кнопок с разными надписями.
Листинг 6.9. Создание кнопок
Конструирование форм
Результат обработки кода из листинга 6.9 показан на рис. 6.3.
Рис. 6.3. Кнопки с разными надписями
Видно, что надписи по умолчанию могут быть не очень понятны посетителю сайта, причем они могут различаться в зависимости от системы пользователя. Для нашей формы выберем второй вариант кнопок, так как он самый понятный и лаконичный.
У нас есть готовая маленькая форма, но, думаю, можно получить еще немного информации о пользователе. Для этого добавим еще поля.
Переключатели
Если вы задаете посетителю вопрос и уверены, что знаете все возможные варианты ответа на него, а также хотите, чтобы посетитель выбрал только один из предложенных вами вариантов, используйте переключатель. Только убедитесь, что действительно предоставили пользователю все возможные варианты ответов.
Совет
Даже если вам кажется, что вы придумали все возможные ответы, учтите: посетители сайта хитры и могут придумать то, что не пришло в голову вам. Поэтому предусматривайте поле с вариантом ответа Другое. А еще посетитель может не захотеть отвечать на ваш вопрос, для такого случая надо добавить пункт Не хочу отвечать.
Для создания переключателя устанавливаем type="radio" и получаем симпатичный кружочек. Текст пункта вводится рядом с тегом . Особенность переключателя в том, что можно выбрать только одно положение из всех возможных. Для всех переключателей, которые принадлежат к одной группе, должно быть установлено одинаковое значение атрибута name. Атрибут value в этом случае содержит значение, которое будет передано обработчику, если пользователь выберет указанное положение.
Вместе СЃ переключателями можно использовать атрибут checked, который задает положение, выбранное РїРѕ умолчанию. Рто СѓРґРѕР±РЅРѕ, если РІС‹ знаете самый частый вариант ответа РЅР° заданный РІРѕРїСЂРѕСЃ. Р’ таком случае, установив этот вариант РїРѕ СѓРјРѕР» – чанию, РІС‹ упростите процесс заполнения формы для посетителей вашего сайта.
В листинге 6.10 представлен пример создания различных вариантов переключателей.
Листинг 6.10. Создание переключателей
Конструирование форм
Результат обработки кода из листинга 6.10 представлен на рис. 6.4.
Рис. 6.4. Переключатели
Для создания опроса с переключателями мы выбрали вопросы, ответы на которые можно предположить. Один из вариантов ответа мы назначили выбранным по умолчанию, что видно на рис. 6.4.
Следующий элемент поможет вам, когда можно позволить посетителю выбрать несколько вариантов ответов из всех предложенных.
Флажки
Флажки напоминают переключатели тем, что дают пользователю возможность выбирать из предложенных вами вариантов. Главным отличием является то, что посетитель может выбрать сразу несколько пунктов, а сами пункты обозначаются квадратиками, а не кружочками.
В группы эти элементы объединяются также присваиванием одинакового имени всем полям. Получать значения от таких полей труднее, потому что в одной группе может быть много выбранных пунктов.
Примечание
Для получения значений из полей форм, в которых возможен множественный выбор, в качестве имени поля используют массив.
Для флажков можно использовать атрибут checked, который здесь можно установить для нескольких пунктов.
В листинге 6.11 приведен пример создания опроса с флажками. Заданы несколько выбранных по умолчанию вариантов ответа.
Листинг 6.11. Создание флажков
Конструирование форм
Результат обработки браузером кода из листинга 6.11 приведен на рис. 6.5.
Рис. 6.5. Флажки
Теперь у вас достаточно данных о посетителе. Можно дать ему возможность отправить вам свое фото.
Поле для ввода файла
Возможность отправлять файлы РЅР° сервер очень помогает РІ работе. Посетители РјРѕРіСѓС‚ загрузить СЃРІРѕРё фотографии, СЂРёСЃСѓРЅРєРё или видео. Рто помогает создателю сайта взаимодействовать СЃ посетителями, Р° посетителям взаимодействовать РґСЂСѓРі СЃ РґСЂСѓРіРѕРј.
Для создания поля отправки файла надо установить значение атрибута type= «file». Особенность этого поля в том, что справа появляется кнопка, при нажатии которой пользователь сможет выбрать загружаемый файл через Проводник, что гораздо удобнее, чем вводить путь до файла вручную.
Вместе с этим полем можно использовать атрибут size, что весьма актуально. При длинном пути к файлу посетителю удобнее видеть весь адрес целиком, поэтому длину строки можно установить достаточно большой.
В листинге 6.12 показан пример создания поля размером 35 символов для ввода файла.
Листинг 6.12. Создание поля для загрузки файла
Конструирование форм
Результат обработки кода из листинга 6.12 показан на рис. 6.6 – создано поле выбора и отправки файла.
Рис. 6.6. Поле для выбора файла
У вас уже достаточно полная форма, теперь можно подумать о том, как сделать ее красочнее.
Создание картинок
РЎ помощью картинок можно украсить форму. РС… можно использовать РІ качестве РєРЅРѕРїРѕРє. Для задания РєРЅРѕРїРєРё-картинки указываем type="image". РџСЂРё этом необходимо задать атрибут src. Его значение – адрес картинки РЅР° сервере.
Получается очень симпатичный вид формы, но надо следить за размером картинки, чтобы графические кнопки не оказались больше самой формы.
Для полей картинок можно использовать атрибут alt, который задает альтернативный текст, всплывающий при наведении указателя мыши на изображение. Обязательно используйте этот атрибут, потому что, если у посетителя отключена загрузка картинок, это будет единственная возможность сообщить ему, куда надо нажать для отправки формы.
Можно задать положение картинки на странице относительно текста с помощью атрибута align. Множество значений этого атрибута позволит вам выровнять изображение как угодно.
Значения атрибута align:
• left – по левому краю;
• right – по правому краю;
• top – выравнивание верхней границы картинки по самому высокому элементу строки;
• texttop – выравнивание верхней границы картинки по самому высокому элементу текста;
• middle – середина изображения выравнивается по базовой линии строки;
• absmiddle – середина изображения выравнивается по середине строки;
• baseline – выравнивание нижней границы изображения по базовой линии строки;
• bottom – выравнивание нижней границы изображения по окружающему тексту.
В листинге 6.13 представлен пример создания кнопок-картинок, которые предварительно нарисованы в графическом редакторе. Для них задано выравнивание и альтернативный текст.
Листинг 6.13. Создание графических кнопок
Конструирование форм
Результат обработки браузером кода из листинга 6.13 показан на рис. 6.7.
Рис. 6.7. Графические кнопки
Нарисованные кнопки оживят вид вашей формы.
Скрытые поля
Вместе с формой можно передавать дополнительную информацию, которая не должна быть видна пользователю.
Для передачи служебной информации используются скрытые поля. РћРЅРё РЅРµ РІРёРґРЅС‹ пользователю, однако информация РёР· РЅРёС… передается обработчику. Такая информация часто РЅРѕСЃРёС‚ служебный характер Рё РЅРµ связана СЃ данными, вводимыми пользователем. Рто может быть, например, идентификатор посетителя РІ базе данных.
Для создания скрытого поля указывается значение атрибута type="hidden". Для него нужны только атрибуты name и value – имя и значение переменной, передаваемые обработчику.
В листинге 6.14 представлен пример создания скрытого поля, в котором вы можете передавать идентификатор пользователя.
Листинг 6.14. Скрытые поля
Конструирование форм
Мы разобрались со всеми возможностями элемента INPUT. Дальше рассмотрим поля, которые входят в форму, но создаются с помощью других элементов.
РЎРїРёСЃРєРё
Списки дают возможность расположить большое количество пунктов компактно. При создании списков вы сами можете определить количество видимых элементов. Можно настроить возможность выбора одного или нескольких пунктов. По функциям списки напоминают переключатели и флажки, однако их плюс в компактности. С другой стороны, поиск по спискам занимает больше времени, хотя можно задать элементы, выбранные по умолчанию. В общем, советую использовать списки там, где много перечисляемых пунктов, или ориентироваться относительно дизайна и выбирать тот вариант, который лучше впишется в вашу страницу.
Для создания списков используется элемент SELECT, у которого два атрибута, отвечающих за общее отображение списка. Атрибут size устанавливает количество видимых элементов из списка. Если size="1" и при этом количество элементов списка больше одного, то появится раскрывающийся список выбора. Если size больше единицы, то при количестве пунктов списка, превышающем его размер, появится полоса прокрутки, а если пунктов меньше, то в поле останется пустое место. Атрибут multiple дает возможность выбирать несколько элементов из списка, для этого при выборе надо нажать и удерживать нажатой клавишу Ctrl.
Если же добавить на страницу элемент
Области работы (можно выбрать несколько):
Результат обработки листинга 6.15 представлен на рис. 6.8.
Р РёСЃ.В 6.8. РЎРїРёСЃРєРё
Теперь попробуем систематизировать и уточнить наши списки, чтобы посетителю было проще найти нужный пункт. В этом нам поможет элемент OPTGROUP, который создает заголовки в списках. У него есть единственный атрибут label, в котором указывается текст заголовка.
В листинге 6.16 показан пример создания списка с заголовками.
Листинг 6.16. Рспользование элемента OPTGROUP
Конструирование форм
Результат обработки браузером кода из листинга 6.16 представлен на рис. 6.9.
Рис. 6.9. Группы в списках
На рис. 6.9 видно, что списки стали гораздо удобнее, теперь посетителю проще найти нужный пункт.
Подобные элементы, конечно, не являются обязательными, но надо заботиться о тех, кто заполняет форму. Деление списков на группы поможет пользователям сэкономить время и с легкостью найти нужный пункт.
Есть только один недостаток – все эти списки и маленькие поля ограничивают простор фантазии посетителя, но это можно исправить.
Большие текстовые поля
Большие текстовые поля дадут посетителю возможность проявить свое творческое начало. В них можно писать что угодно в любых количествах. Такая конструкция совершенно необходима, размеров обычного текстового поля не хватит для ввода текста большого объема. В больших полях можно вводить комментарии, сообщения и многое другое.
Для создания таких полей применяется элемент TEXTAREA, который обязательно должен иметь закрывающий тег. Текст, вводимый по умолчанию, находится между открывающим и закрывающим тегами этого элемента. Размеры поля устанавливаются с помощью атрибутов cols и rows. Первый задает размеры по горизонтали, второй – по вертикали. Помните, что все размеры в формах считаются исходя из размера одного символа моноширинного шрифта.
Можно запретить пользователю изменять текст в текстовом поле, что пригодится, если поле используется, например, для представления договора. Запрет вводится путем установки атрибута readonly.
Еще РѕРґРёРЅ атрибут элемента TEXTAREA – wrap, указывающий браузеру, как осуществляется перенос текста Рё РІ каком РІРёРґРµ текст отправляется РЅР° сервер. Ртот атрибут может принимать три значения:
• hard – автоматически переносит строку, когда она доходит до границы окна ввода, и передает на сервер с такой расстановкой переносов;
• soft – переносит строку автоматически, но на сервер знак переноса передает только в том месте, где была нажата клавиша Enter;
• off – переносит слова только при нажатии клавиши Enter, и, если строка превышает горизонтальный размер окна, появляется полоса прокрутки.
В листинге 6.17 представлен пример создания больших текстовых полей. Первое поле с горизонтальной полосой прокрутки, второе – только для чтения.
Листинг 6.17. Создание больших текстовых полей
Конструирование форм
Результат обработки кода из листинга 6.17 приведен на рис. 6.10.
Рис. 6.10. Большие текстовые поля
Очевидно, что такие поля – единственная возможность для ввода больших объемов текста, поэтому от их использования в форме никуда не деться.
Все возможные поля для формы готовы, осталось добавить несколько мелочей. Возможности, которые мы рассмотрим дальше, необязательно использовать, но с ними формы становятся намного удобнее.
Дополнительные удобства
Есть элементы, которые не очень сильно влияют на вид формы, но при этом делают работу с ней намного удобнее. Примером может служить элемент LABEL, который применяется при реализации выбора с помощью переключателей и флажков. Он необходим, чтобы вы могли выбрать нужный пункт, просто щелкая кнопкой мыши на тексте, связанном с ним. Без использования этого элемента посетителю приходится щелкать кнопкой мыши на кружочке или квадратике, хотя просто щелкнуть кнопкой мыши на тексте намного удобнее. Тем более становится неважно, где находится текст – при щелчке на нем кнопкой мыши будет выбран связанный с ним пункт меню.
Рспользование этого элемента РїСЂРё работе СЃ переключателями Рё флажками – самый распространенный вариант, однако это РЅРµ ограничение. РЎ таким же успехом можно связать текст СЃ любым элементом формы, Рё РїСЂРё щелчке РєРЅРѕРїРєРѕР№ мыши РЅР° тексте связанный элемент автоматически берется РІ фокус.
Связывание текста с элементом формы осуществляется просто: вы устанавливаете атрибут id элемента INPUT, а затем берете в элемент LABEL нужный текст и присваиваете атрибуту for этого элемента значение, совпадающее со значением id для элемента INPUT того поля, с которым хотите связать текст.
У элемента LABEL есть еще один замечательный атрибут – accesskey. Его значение устанавливает горячую клавишу для соответствующего элемента формы. Надо нажимать эту клавишу вместе с клавишей Alt, и фокус автоматически переместится на нужное поле.
В листинге 6.18 показан пример использования элемента LABEL.
Листинг 6.18. Рспользование элемента LABEL
Конструирование форм
Как видно, использование элемента LABEL может сильно упростить работу посетителей сайта.
Осталось совсем немного: для большей наглядности сгруппируем вопросы из нашей формы по темам и составим наконец общую форму. В этом нам поможет элемент FIELDSET, который объединит поля формы, находящиеся внутри его контейнера, рамкой. У этого элемента есть атрибут title, который задает всплывающую подсказку для группы.
Чтобы добавить заголовок для каждой группы, понадобится элемент LEGENG, который задает встраиваемый в рамку текст заголовка группы. У элемента LEGEND два атрибута: align задает выравнивание заголовка, а title – всплывающую подсказку к тексту заголовка. Возможностей выравнивания немного, но достаточно.
Значения параметра align:
• right – по правому краю;
• left – по левому краю;
• center – по центру.
В листинге 6.19 показан итоговый код формы регистрации. В нем объединены все рассмотренные элементы.
Листинг 6.19. Форма регистрации
Конструирование форм
Фрагмент формы регистрации с объединением полей в группы показан на рис. 6.11.
Рис. 6.11. Фрагмент итоговой формы
На рис. 6.11 видно, что после объединения полей в группы форма стала намного удобнее и логичнее.
Резюме
РњС‹ рассмотрели РІСЃРµ возможности построения форм Рё создали достаточно большую форму регистрации. Возможности, которые предоставляют формы, очень велики. Рто главный инструмент общения пользователей РІ Рнтернете. Рспользование форм РЅР° сайте позволяет иметь обратную СЃРІСЏР·СЊ СЃ посетителями, Р° также расширить функциональность сайта.
Глава 7
Введение в таблицы стилей и язык CSS
7.1. Встраивание CSS в HTML
7.2. Синтаксис CSS
7.3. Селекторы
7.4. Псевдоэлементы и псевдоклассы
7.5. Правило @media
7.6. Правила!important
7.7. Правило @impor
В этой главе вы изучите основы языка CSS. Вы увидите, насколько легко разрабатываются таблицы стилей. Для этого достаточно лишь иметь общие представления о языке HTML, который мы подробно разобрали в предыдущих главах. Язык CSS в настоящее время считается основным средством оформления веб-страниц, пришедшим на смену тегов и атрибутов форматирования. Язык HTML 4 пока еще поддерживает эти средства, но они относятся к числу устаревших и нежелательных. В языке же XHTML оформление веб-страниц допускается только средствами CSS, поэтому если вы хотите, чтобы ваш сайт служил долгие годы, с самого начала создавайте его средствами CSS.
7.1. Встраивание CSS в HTML
Начнем разбирать таблицы стилей с небольшого HTML-документа (листинг 7.1).
Листинг 7.1. Простой HTML-документ
Моя домашняя страница
Моя домашняя страница
На этой странице вы найдете информацию обо мне и моих друзьях.
Чтобы сделать текст из элемента H1 синим, вместо обычного атрибута color элемента FONT нужно использовать следующее CSS-правило:
h1 { color: blue }
Собственно правило в CSS состоит из двух частей: селектора H1 и описания color: blue. Описание, в свою очередь, также имеет две части: свойство color и значение blue. В последующих разделах мы подробно разберем, что такое селектор, и, двигаясь дальше, узнаем, какие бывают свойства CSS и их значения.
В спецификации языка HTML 4 описано два правила описания таблиц стилей для HTML-документов. Первый – это вставка CSS-кода непосредственно внутрь HTML-документа. Второй – это запись таблицы стилей во внешнем файле и установка ссылки на этот файл в HTML-документе.
Чтобы добавить CSS непосредственно внутрь HTML, используется элемент STYLE, который должен располагаться внутри заголовка документа, то есть внутри элемента HEAD. В листинге 7.2 приведен пример простой HTML-страницы с записанной таблицей стилей внутри документа.
Листинг 7.2. CSS внутри HTML-документа
Моя домашняя страница
Моя домашняя страница
На этой странице вы найдете информацию обо мне и моих друзьях.
Для максимальной гибкости имеется возможность создавать внешние таблицы стилей. Если РєРѕРґ таблицы стилей находится РІРѕ внешнем файле, то РІС‹ имеете возможность использовать его РІРѕ всех страницах сайта. Представьте, что ваш сайт насчитывает более 1000 страниц. Если РІС‹ захотите внести какие-то изменения, то вам придется изменять РєРѕРґ РЅР° каждой странице. Рспользуя внешние таблицы стилей, РІС‹ лишь РѕРґРёРЅ раз внесете изменения РІ CSS-файл таблицы стилей.
Для соединения HTML-документа с внешней таблицей стиля используется элемент LINK, который, как и элемент STYLE, рассмотренный выше, должен располагаться в заголовке документа внутри элемента HEAD. Код страницы со ссылкой на внешний файл таблицы стилей представлен в листинге 7.3.
Листинг 7.3. Таблица стилей во внешнем файле
Моя домашняя страница
Моя домашняя страница
На этой странице вы найдете информацию обо мне и моих друзьях.
Как вы заметили, элемент LINK имеет несколько атрибутов. Рассмотрим их названия и подробное описание:
• rel – тип соединения, который для таблиц стилей задается как stylesheet;
• href – местонахождение таблицы стилей, то есть адрес и имя файла. В нашем примере в листинге 7.3 это my_style.css;
• type – тип присоединяемой таблицы стилей. Поскольку элемент LINK может использоваться для присоединения и других файлов в HTML-документ, то желательно указать тип присоединяемого файла. Для таблиц стиля это значение text/css.
Чтобы показать тесную связь между таблицей стилей и структурной разметкой документа, добавим в наш пример больше цветов (листинг 7.4), используя элемент STYLE.
Листинг 7.4. Оформление документа
Моя домашняя страница
Моя домашняя страница
На этой странице вы найдете информацию обо мне и моих друзьях.
Таблица стилей теперь содержит РґРІР° правила: первое предопределяет отображение элементов РѕСЃРЅРѕРІРЅРѕРіРѕ текста красным цветом red, РІ то время как второе – отображение текста, находящегося внутри элемента H1, СЃРёРЅРёРј цветом blue. Поскольку для элемента P значение цвета РЅРµ было задано, то РѕРЅ унаследует цвет РѕС‚ родительского элемента, Р° именно РѕС‚ РѕСЃРЅРѕРІРЅРѕРіРѕ текста: элемента BODY. Рлемент H1 также является дочерним элементом РѕСЃРЅРѕРІРЅРѕРіРѕ текста, РЅРѕ второе правило переопределяет унаследованное РёРј значение.
В CSS существует более 100 различных свойств, одним из которых и является свойство color. Рассмотрим некоторые другие свойства на примере из листинга 7.5.
Листинг 7.5. Различные свойства CSS
Моя домашняя страница
Моя домашняя страница
На этой странице вы найдете информацию обо мне и моих друзьях.
Первой бросается в глаза группа строк, разделенных точкой с запятой и заключенных в фигурные скобки {}. За последней строкой в этой группе можно не ставить точку с запятой, это никак не повлияет на отображение документа.
Разберем каждую строку отдельно.
• Первая строка для элемента BODY устанавливает семейство шрифтов Some Type. Если этот тип шрифтов недоступен, то браузер будет использовать шрифт SansSerif, который является одним из пяти шрифтов, распознаваемых всеми браузерами. Все дочерние элементы наследуют значение font-fami l y элемента BODY. В последующих главах мы подробно разберем работу со шрифтами.
• Вторая строка устанавливает размер шрифта элемента BODY равным 12 пунктам. Далее мы подробно рассмотрим единицы измерения, которые могут использоваться в CSS, и их различия.
• Третья строка задает размер полей вокруг документа, хотя в ней используется уже другая единица измерения: em.
7.2. Синтаксис CSS
Теперь, когда вы имеете представление о том, как можно добавить таблицу стилей в HTML-документ, разберем синтаксис языка CSS.
Ключевые слова
В CSS, как и в других языках программирования, есть ключевые слова. Помните, что в CSS они не должны заключаться в кавычки («…» или …). Так, например, red – это ключевое слово, а «red» – нет. Для большего понимания приведу еще примеры недопустимого написания:
width: В«autoВ»;
background: "green";
border: "none";
Рассмотрим каждую строку отдельно. Ртак, РІ первой строке ширина должна задаваться автоматически. Для автоматической задачи ширины нужно использовать ключевое слово auto без кавычек. Р’Рѕ второй строке используется ключевое слово green, которое означает название цвета «зеленый», Р° РІ третьей – ключевое слово none, означающее, что рамка РЅРµ будет РІРёРґРЅР° вообще. Как Рё РІ предыдущих строках, РѕРЅРѕ РЅРµ должно заключаться РІ кавычки.
Комментарии
Комментарии РІ CSS начинаются СЃ символов /* Рё заканчиваются символами */. РћРЅРё РјРѕРіСѓС‚ находиться РІ любом месте таблицы. Рспользование комментариев очень СѓРґРѕР±РЅРѕ. Впоследствии вам может понадобиться РјРЅРѕРіРѕ времени, чтобы сообразить, Р·Р° какую часть документа отвечает тот или РёРЅРѕР№ CSS-РєРѕРґ. Р’ то же время наличие комментариев поможет быстро РІ этом разобраться.
Приведем пример CSS-кода с комментарием:
/* Цвет основного заголовка – синий */
h1 { color: blue }
РР· записи РІ комментарии понятно, что делает данное CSS-правило.
Правила@
Правила @ начинаются с ключевого слова @, непосредственно за которым следует идентификатор (например, @import, @page). Каждый из этих идентификаторов далее рассмотрим подробнее.
Все же надо отметить, что браузер с поддержкой CSS будет игнорировать все правила @import, которые находятся внутри блока CSS либо не предшествуют ни одному набору правил. Лучше всего это понять из примера. Рассмотрим неверную таблицу стилей:
@import В«subs.cssВ»;
h1 { color: blue }
@import "list.css";
Второе правило @import недопустимо. Браузер полностью проигнорирует второе правило @ целиком. Рными словами, РІ реальности РѕРЅ отобразит HTML-документ, используя такую таблицу стилей:
@import В«subs.cssВ»;
h1 { color: blue }
Приведем еще один пример недопустимого использования правила @:
@import В«subs.cssВ»;
@media print {
@import "print-main.css";
body { font-size: 10pt }
}
h1 {color: blue }
В этом примере второе правило @import недопустимо, так как оно находится в пределах другого блока @media.
В последующих разделах мы подробно разберем каждое правило @.
7.3. Селекторы
Селектором в CSS для простоты понимания будем считать название элемента, для которого задаются свойства. Теперь рассмотрим, как можно задать одни и те же свойства разным элементам документа.
Группировка
Для задания разным элементам документа одних и тех же свойств в CSS существует группировка. Селекторы, то есть элементы, можно сгруппировать в список, разделив запятыми.
Приведу пример, в котором разным элементам задается одно и то же свойство:
h1 { color: red }
h2 { color: red }
h3 { color: red }
Вышеприведенный пример можно значительно упростить, используя правило группировки:
h1, h2, h3 { color: red }
Как отмечалось выше, при группировке селекторы разделяются запятыми.
Селекторы потомков
РРЅРѕРіРґР° необходимо задать свойства элементу, который располагается непосредственно внутри какого-то РґСЂСѓРіРѕРіРѕ элемента, то есть является так называемым потомком. Селектор потомков состоит РёР· РґРІСѓС… Рё более селекторов, разделенных пробелом.
Допустим, внутри HTML-документа есть такой код:
Очень важный заголовок
Теперь предположим, что мы хотим изменить свойства элемента H1 и слова важный внутри строки. Если мы используем CSS-код, описанный ниже, то повлияем на все элементы EM на странице, а этого делать не нужно:
h1 { color: red }
em { color: blue }
Чтобы повлиять на свойства слова важный, которое в нашем примере находится внутри элемента EM, а тот, в свою очередь, внутри элемента H1, надо использовать следующий CSS-код:
h1 em { color: blue }
Обратите внимание, что в отличие от группировки при обращении к потомкам запятые не ставятся. Количество элементов, которые можно записать потомками, не ограничено. Например:
body div p span { color: green }
Если в документе встретится элемент SPAN, находящийся внутри элемента P, который, в свою очередь, находится внутри элемента DIV, то текст в элементе SPAN будет зеленым. В столь длинных описаниях элемент BODY можно опускать, так как все элементы находятся внутри него.
Если при разработке таблицы стилей вы еще точно не знаете, какой элемент будет размещаться внутри какого, можете воспользоваться символом *. Учтите, что с обеих сторон этого символа обязательно должны находиться пробелы.
Пример, представленный выше, можно переписать так:
body * span { color: green }
Нужно помнить, что текст будет зеленым, даже если элемент SPAN будет просто находиться внутри элемента DIV. Рными словами, звездочкой считается любой набор селекторов Рё РёС… потомков.
Сестринские селекторы
Сестринскими называют элементы, которые идут друг за другом. Предположим, есть абзац, который имеет параметр class, заданный как first. Тогда, если за ним следует еще какой-то абзац, размер вертикального пространства между ними можно уменьшить, используя такой код:
p.first + p { margin-top: -5mm }
Создайте простую страницу и поэкспериментируйте с данным свойством, и вы быстро освоите, что такое сестринские селекторы в CSS.
Селекторы атрибутов
CSS позволяет создавать правила, сопоставляемые элементам с атрибутами, определенными в исходном коде HTML-документа. Селекторы атрибутов могут сопоставляться в следующих четырех случаях.
• [att] – если для элемента установлен атрибут att независимо от значения этого атрибута.
• [att=val] – когда значение атрибута att данного элемента в точности равно val.
• [att~=val] – если значением атрибута att данного элемента является список слов, разделенных пробелами, одно из которых в точности равно val.
• [att|=val] – когда значением атрибута att элемента является начинающийся со слова val список разделенных дефисом слов. Сопоставление всегда начинается с начала значения атрибута.
Чтобы хорошо разобраться с данным свойством, рассмотрите ряд примеров и подробных комментариев к ним.
Ртак, следующее правило CSS сопоставляется всем элементам P, для которых описан атрибут align, независимо РѕС‚ его значения:
p[align] { color: blue; }
В следующем примере селектор, то есть правило CSS, сопоставляется всем элементам SPAN, у которых значение атрибута class в точности равно example:
span[class=example] { color: blue; }
Для обращения к нескольким атрибутам элемента или многократного обращения к одному и тому же атрибуту можно использовать несколько селекторов атрибутов. В следующем примере селектор сопоставляется всем элементам TABLE, у которых значение атрибута width в точности равно 90 %, а значение атрибута height в точности равно 50 %:
table[width="90%"][height="50%"] { color: blue; }
Следующие селекторы иллюстрируют различия между знаками = и ~=. Первый селектор будет сопоставляться, например, значению copyright copyleft copyall атрибута rel. Второй селектор будет сопоставляться только в том случае, если значение атрибута href равно :
a[rel~="copyright"]
a[href="http://www.yoursite.com/"]
Следующее правило скрывает все элементы, атрибут lang которых имеет значение fr, то есть элементы с текстом на французском языке:
*[lang=fr] { display : none }
Следующее правило будет сопоставляться тем значениям атрибута lang, которые начинаются с ru, включая ru, ru-RU и ru-UA:
*[lang|="ru"] { color : red }
Селекторы классов
В таблицах стилей, используемых с HTML-документами, при сопоставлении атрибуту class вы можете использовать точку (.) как альтернативу условному обозначению ~=. Таким образом, два выражения HTML DIV. value и DIV [class ~=value] имеют одинаковый смысл. Значение атрибута должно находиться непосредственно после точки (.).
Например, для всех элементов с class~=test информацию о стиле можно определить следующим образом:
*.test { color: red } /* все элементы с class~=test */
или просто
.test { color: red } /* все элементы с class~=test */
Рассмотрим еще один пример. Следующее правило назначает стиль только элементу H1с class~=test:
h1.test { color: green } /* элемент H1 с class~=test */
Благодаря этому правилу в следующем примере при первом появлении элемент H1 не будет отображаться красным цветом, а при втором – будет:
Не зеленый цвет
Настоящий зеленый цвет
Для сопоставления подмножеству значений атрибута class перед каждым из них, записанных в произвольном порядке, следует поставить точку (.).
Например, следующее правило сопоставляется любому элементу P, атрибуту class которого в качестве значения назначен список разделенных пробелами значений, включающий слова test и marine:
p.test.marine { color: green }
Рто правило сопоставляется, если, например, для элемента P задано class = В«Test blue aqua marineВ», Рё РЅРµ сопоставляется, если задано class = В«test blueВ».
ID-селекторы
Атрибут ID языка документа позволяет назначать идентификатор одному экземпляру элемента в дереве HTML-документа. В CSS ID-селекторы сопоставляются экземпляру элемента в зависимости от его идентификатора. В CSS ID-селектор содержит символ #, непосредственно за которым следует значение атрибута ID.
Например, следующий ID-селектор сопоставляется элементу H1, значение атрибута ID которого равно chapter7:
h1#chapter7 { text-align: center }
Р’ листинге 7.6 правило стиля сопоставляется элементу, Сѓ которого значение атрибута ID равно z98y. Рначе РіРѕРІРѕСЂСЏ, это правило будет сопоставляться элементу P.
Листинг 7.6. ID-селекторы
Глава 7
Текст абзаца
Однако в примере из листинга 7.7 это правило стиля будет сопоставляться только элементу H1, значение атрибута ID которого равно z98y. В этом примере данное правило не сопоставляется элементу P.
Листинг 7.7. ID-селекторы
Глава 7
Текст абзаца
Надо отметить, что ID-селекторы имеют более высокий приоритет, чем селекторы атрибутов. Например, в HTML-документе селектор #p123 более специфичен, чем [ID=p123].
7.4. Псевдоэлементы и псевдоклассы
В языке CSS стиль обычно прикрепляется к элементу в зависимости от его местонахождения в дереве HTML-документа. В большинстве случаев эта простая модель оказывается приемлемой, но все же иногда из-за структуры дерева документа она не позволяет реализовать некоторые желаемые результаты. Например, в HTML нет элемента, который бы указывал на первую строку абзаца, и поэтому нет простого селектора CSS, который бы мог указывать на нее.
В CSS вводится представление о псевдоэлементах и псевдоклассах, позволяющих осуществлять форматирование на основании информации, не включенной в дерево HTML-документа.
Сразу отмечу, что имена псевдоклассов и псевдоэлементов учитывают регистр.
Начнем изучение с псевдокласса: first-child.
Псевдокласс :first-child
Псевдокласс: first-child сопоставляется элементу, который является первым дочерним элементом другого элемента.
Со слов это тяжело понять, поэтому рассмотрите примеры, представленные в данном разделе, и вам все станет ясно.
В следующем примере селектор сопоставляется каждому элементу P, который является первым дочерним по отношению к элементу DIV. Проще говоря, это правило запрещает отступ для первого абзаца элемента DIV:
div > p:first-child { text-indent: 0 }
Данный селектор сопоставляется элементу P внутри DIV в следующем фрагменте:
Последний P перед примечанием.
Первый P внутри примечания.
Он не сопоставляется элементу P в следующем фрагменте, так как он второй, а первый дочерний элемент DIV теперь – H2:
Последний P перед примечанием.
Примечание
Первый P внутри примечания.
В следующем примере устанавливается ширина шрифта bold для каждого элемента EM, являющегося одним из потомков первого дочернего элемента P:
p:first-child em { font-weight : bold }
Обратите внимание, что, поскольку безымянные блоки не являются частью дерева документа, они не учитываются во время определения первого дочернего элемента. Например, EM в этом примере является первым дочерним элементом по отношению к P:
Рто полужирный текст.
Чтобы лучше разобраться, создайте простую страницу и поэкспериментируйте с ее стилем, используя псевдоклассы. Например, изменяя размер шрифта следующим правилом:
font-weight : bold
Псевдоклассы ссылок
Обычно браузеры пользователей по-разному отображают просмотренные и непросмотренные ссылки. В CSS предусмотрены псевдоклассы: link и: visited для различения этих типов ссылок и задания им своего стиля:
•:link – применяется, если ссылка не была просмотрена;
•:visited – используется, если ссылка была просмотрена посетителем.
Язык HTML определяет элементы, которые служат точками привязки гиперссылки. В HTML 4 псевдоклассы ссылок применяются к элементам A с атрибутом href. Таким образом, следующие два объявления CSS эквивалентны:
a:link { color: red }
:link { color: red }
Если ссылка перейти была просмотрена, то согласно правилу a.external:visited { color: blue } она будет представляться синим цветом.
Динамические псевдоклассы
РРЅРѕРіРґР° браузеры пользователей изменяют РІРёРґ элементов HTML-документа после выполнения пользователем некоторых действий. Р’ CSS предусмотрены три псевдокласса для наиболее часто встречающихся действий.
•:hover – применяется, когда пользователь с помощью некоторого указывающего устройства (как правило, мыши) выделяет элемент, но не активизирует его. Например, браузер пользователя может применять этот псевдокласс, когда указатель мыши находится поверх поля, генерируемого данным элементом.
•:active – используется, когда элемент активизируется посетителем. Например, между моментами, когда он нажимает кнопку мыши и отпускает ее.
•:focus – применяется, когда элемент находится в центре некоторых событий. Например, обрабатывает события клавиатуры или другие типы ввода текста.
Надо отметить, что эти псевдоклассы РЅРµ являются взаимоисключающими. Рлемент может сопоставляться одновременно нескольким псевдоклассам. Например:
a:link { color: red } /* непросмотренные ссылки */
a:visited { color: blue } /* просмотренные ссылки */
a:hover { color: yellow } /* ссылка, над которой в данный момент находится указатель */
a:active { color: white } /* активные ссылки */
Обратите внимание, что правило a: hover должно располагаться после правил a: link и a: visited, так как в противном случае правила каскадирования скроют свойство color правила a: hover. Аналогичным образом благодаря тому, что a: active находится после a: hover, активная ссылка отображается белым цветом, когда пользователь устанавливает указатель поверх элемента А и одновременно активизирует его.
Рассмотрим пример сочетания динамических псевдоклассов:
a:focus { background: yellow }
a:focus:hover { background: white }
Во второй строке правило CSS сопоставляется элементам A, которые находятся в псевдоклассах focus и: hover.
Псевдокласс :lang
Если в языке HTML-документа определен разговорный язык элемента, то CSS позволяет создавать селекторы, сопоставляемые элементу, использующему данный разговорный язык. Например, в HTML язык определяется сочетанием атрибута lang, элемента META и, возможно, информацией из протокола (такой, как заголовки HTTP).
Псевдокласс: lang (ru) сопоставляется элементу, использующему язык ru. Здесь ru – код языка. Он сопоставляется аналогично оператору |=. Приведу для примера несколько языков и коды:
• ru – русский;
• en – английский;
• fr – французский;
• de – немецкий;
• jp – японский.
Например, следующие правила расставляют кавычки в HTML-документе, написанном на французском либо немецком языке:
html:lang(fr) { quotes: " " }
html:lang(de) { quotes: " " \2039 \203A }
:lang(fr) > Q { quotes: " " }
:lang(de) > Q { quotes: " " \2039 \203A }
Вторая пара правил фактически задает свойство quotes для элементов Q РІ соответствии СЃ языком РёС… родительских элементов. Рто сделано потому, что выбор кавычек обычно зависит РѕС‚ языка элементов РІРѕРєСЂСѓРі кавычек, Р° РЅРµ РѕС‚ самих кавычек, как это имеет место РІРѕ фрагменте французского текста «а limprovisteВ», расположенного РІ английском тексте Рё использующего английские кавычки.
Псевдоэлемент first-line
Псевдоэлемент: first-line используется для применения стилей к первой строке абзаца. Например:
p:first-line { text-transform: uppercase }
Представленное выше правило указывает сделать буквы первой строки каждого абзаца заглавными. Однако селектор p: first-line не соответствует ни одному реальному HTML-элементу. Он сопоставляется псевдоэлементу, который браузеры пользователей будут помещать в начало каждого абзаца.
Обратите внимание, что длина первой строки зависит от множества таких факторов, как ширина страницы, размер шрифта и др.
Типичный абзац HTML-документа, как этот:
Рто довольно длинный абзац
HTML-документа, который будет разбит на несколько строк. Первая строка будет отмечена последовательностью функциональных тегов. Другие строки будут обрабатываться как обычные строки абзаца.
претерпит следующую реорганизацию строк:
!!!
РРўРћ ДОВОЛЬНО ДЛРННЫЙ АБЗАЦ HTML-ДОКУМЕНТА,
который будет разбит на несколько строк.
Первая строка будет отмечена последовательностью
функциональных тегов. Другие строки
будут обрабатываться как обычные строки абзаца.
РћРЅ будет «переписан» браузерами пользователей так, чтобы включить последовательность функциональных тегов для: first-line. Рта фиктивная последовательность помогает показать, как наследуются свойства:
Рто довольно длинный абзац HTML-документа,
который будет разбит на несколько строк.
Первая строка будет отмечена последовательностью функциональных тегов. Другие строки будут обрабатываться как обычные строки абзаца.
Если псевдоэлемент разрывает реальный элемент, то желаемый эффект зачастую может быть достигнут с помощью последовательности функциональных тегов, которая закрывает и повторно открывает этот элемент. Таким образом, если вы используете в предыдущем абзаце элемент SPAN, то получите следующее:
Рто довольно длинный абзац HTML-документа, который будет разбит РЅР° несколько строк. Первая строка будет отмечена
последовательностью функциональных тегов. Другие строки будут обрабатываться как обычные строки абзаца.
Теперь браузер пользователя сможет сгенерировать соответствующие начальные и конечные теги для SPAN во время вставки последовательности функциональных тегов для: first-line. Получится следующее:
Рто
довольно длинный абзац HTML-документа, который будет разбит на несколько строк. Первая строка будет отмечена последовательностью функциональных тегов. Другие строки будут обрабатываться как обычные строки абзаца.
Псевдоэлемент: first-line может прикрепляться только к элементам уровня блока. Он подобен строковому элементу, но с некоторыми ограничениями. К псевдоэлементу: first-line применяются следующие свойства: свойства шрифтов, цветов, фона, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height, text-shadow и clear.
Псевдоэлемент first-letter
Псевдоэлемент: first-letter может использоваться для создания таких простых типографических эффектов, как заглавные буквы и буквицы. Тип начальной буквы аналогичен строковому элементу, если его свойству float присвоено значение none, в противном случае он аналогичен перемещаемому объекту.
К псевдоэлементам: first-letter применяются следующие свойства: свойства шрифтов, цветов, фона, text-decoration, vertical-align (если для свойства float установлено значение none), text-transform, line-height, свойства полей, полей в ячейке таблицы, рамок, float, text-shadow и clear.
В следующем примере из листинга 7.8 высота буквицы устанавливается равной высоте двух строк.
Листинг 7.8. Стиль заглавной буквы
Глава 7. Стиль заглавной буквы
Первые несколько слов из книги
"Самоучитель по HTML и CSS".
Пример из листинга 7.8 может быть отформатирован, как показано на рис. 7.1.
Рис. 7.1. Стиль заглавной буквы
Приведу последовательность функциональных тегов:
Рџ
ервые
несколько слов РёР· статьи РІ журнале "РРєРѕРЅРѕРјРёСЃС‚".
Обратите внимание, что теги псевдоэлементов: first-letter примыкают к содержимому (например, к начальному символу), а открывающий тег псевдоэлемента: first-line вставляется сразу после открывающего тега элемента, к которому он прикрепляется.
Учтите, что в некоторых языках могут существовать специальные правила обращения с определенными сочетаниями букв. Например, в голландском языке, если сочетание букв «ij» находится в начале слова, то они обе находятся в псевдоэлементе: first-letter.
В следующем примере показано, как могут повлиять друг на друга налагающиеся псевдоэлементы. Первая буква каждого элемента P выделяется зеленым цветом, а размер шрифта установлен 24 пункта. Остальные буквы первой форматируемой строки будут представлены синим цветом, а все оставшиеся буквы абзаца – красным. CSS-код примера будет выглядеть следующим образом:
p { color: red; font-size: 12pt }
p:first-letter { color: green; font-size: 200% }
p:first-line { color: blue }
Например, рассмотрим этот CSS код применительно к такому абзацу:
Некоторый текст, разделенный на две строки
Допустим, что разрыв строки произойдет до слова «разделенный», тогда последовательность функциональных тегов для данного фрагмента может быть следующей:
РќРµ
который текст,
разделенный на две строки
Обратите внимание, что элемент: first-letter находится внутри элемента: first-line. Свойства, установленные для элемента: first-line, наследуются: first-letter, но могут быть переназначены, если в элементе: first-letter этому же свойству присваивается значение.
Псевдоэлементы :before и: after
Псевдоэлементы: before и: after можно использовать для вставки генерируемого содержимого до или после содержимого элемента.
h1:before {content: counter(chapno, upper-roman) ". "}
Когда псевдоэлементы: first-letter и: first-line сочетаются с псевдоэлементами: before и: after, они применяются к первой букве или строке элемента, включая вставляемый текст.
p.special:before {content: "Важно! "}
p.special:first-letter {color: gold}
Буква В слова Важно! будет представлена золотистым цветом.
7.5. Правило @media
Правило @media позволяет задавать правила CSS для различных устройств РІ пределах РѕРґРЅРѕР№ таблицы стилей, разделенных запятыми. Рными словами, РІС‹ можете задать для РѕРґРЅРѕРіРѕ Рё того же элемента РѕРґРёРЅ размер шрифта для печати, Р° РґСЂСѓРіРѕР№ для просмотра РЅР° экране.
Например:
@media print {
body { font-size: 10pt }
}
@media screen {
body { font-size: 12pt }
}
В примере при просмотре документа на экране размер шрифта будет 10 пунктов, а при печати 12 пунктов.
Рассмотрим еще один пример:
@media screen, print {
body { font-size: 14pt }
}
В этом примере и при печати, и при просмотре размер шрифта будет одинаковый – 14 пунктов.
Рассмотрим список всех устройств, поддерживаемых CSS. Значение указывает, что документ предназначен:
• all – для всех устройств;
• aural – речевых синтезаторов;
• braille – устройств чтения азбуки Брайля;
• embossed – печати азбуки Брайля;
• handheld – переносимых портативных устройств (небольшие монохромные экраны с ограниченной полосой частот);
• print – страничных непрозрачных материалов и для документов, просматриваемых на экране в режиме предварительного просмотра печати;
• projection – настенных презентаций, например для проекторов или для печати плакатов;
• screen – цветных дисплеев;
• tty – устройств, использующих набор символов с фиксированной шириной, например телетайпов, терминалов или портативных устройств с ограниченными возможностями отображения; для устройств типа tty не следует использовать пикселы;
• tv – устройств типа телевизора, для которых характерны низкое разрешение, цветное изображение, ограниченная прокрутка на экране и возможность передачи звука.
Следует отметить, что названия типов устройств не зависят от регистра.
Как правило, для схожих устройств задаются схожие правила CSS, поэтому все устройства в CSS разбиты по типам. В табл. 7.1 представлены взаимоотношения между группами и типами устройств.
Таблица 7.1. Группы устройств
Значение both в таблице означает, что используются устройства всей группы.
Приведу перевод названий типов устройств:
• без разбивки – continuous;
• с разбивкой – paged;
• визуальные – visual;
• звуковые – aural;
• тактильные – tactile;
• сеточные – grid;
• растровые – bitmap;
• интерактивные – interactive;
• статичные – static.
Попробуйте в качестве эксперимента создать простую страницу с различными свойствами и значениями для устройств screen и print и посмотреть ее на экране и в окне предварительного просмотра.
7.6. Правила !important
В CSS предпринята попытка установить баланс между возможностями таблиц стилей разработчика и пользователя. По умолчанию правила в таблице стилей разработчика имеют приоритет над правилами пользовательской таблицы стилей.
Однако для соблюдения баланса объявление!important наделяется преимуществом перед обычным объявлением. Таблицы стилей как разработчика, так Рё пользователя РјРѕРіСѓС‚ содержать объявления!important, РЅРѕ пользовательские правила!important имеют приоритет над правилами!important разработчика. Рта особенность CSS улучшает возможность доступа Рє документам, предоставляя пользователям СЃРѕ специальными требованиями (большие размеры шрифтов, сочетания цветов Рё С‚.В Рґ.) более РіРёР±РєРёР№ контроль над представлением.
Надо отметить, что объявление свойства стенографического типа (например, background) как !important равнозначно объявлению всех содержащихся в нем свойств как !important.
Р’ следующем примере первое правило пользовательской таблицы стилей содержит объявление!important, которое имеет приоритет над соответствующим объявлением РІ таблице стилей разработчика. Второе объявление также имеет больший приоритет, так как РѕРЅРѕ помечено !important. Однако третье правило РІ пользовательской таблице стилей РЅРµ является правилом!important, Рё поэтому более высокий приоритет будет иметь второе правило РІ таблице стилей разработчика (которое устанавливает стиль РІ свойстве стенографического типа). РљСЂРѕРјРµ того, третье правило разработчика имеет меньший приоритет, чем второе, так как последнее является!important. Рто РіРѕРІРѕСЂРёС‚ Рѕ том, что объявления!important работают Рё РІ таблицах стилей разработчика.
/* РР· пользовательской таблицы стилей */
p { text-indent: 1em ! important }
p { font-style: italic ! important }
p { font-size: 18pt }
/* РР· таблицы стилей разработчика */
p { text-indent: 1.5em !important }
p { font: 12pt sans-serif !important }
p { font-size: 24pt }
7.7. Правило @import
Правило @import позволяет импортировать правила стилей из других таблиц стилей. Массив правил @import должен предшествовать всем другим правилам в таблице стилей. После ключевого слова @import должен следовать URL-адрес таблицы стилей, которую необходимо импортировать. Допускается использование строки. В этом случае подразумевается, что она заключена в url(…).
Следующие строки эквивалентны по значению и представляют два варианта синтаксиса правила @import (один с использованием url(…) и один с открытой строкой):
@import В«mystyle.cssВ»;
@import url("mystyle.css");
Вы также можете задать правила @import, зависящие от устройств. Тогда в этих правилах импортирования после URL задается список типов устройств, разделенных запятыми.
Действие приведенных ниже правил происходит так, как если бы импортируемая таблица стилей при прочих равных условиях присоединялась посредством правила @media, с той лишь разницей, что они позволяют пользовательскому агенту не выполнять бесполезную загрузку.
@import url(В«fineprint.cssВ») print;
@import url("bluish.css") projection, tv;
При отсутствии каких-либо типов устройств импорт не зависит ни от каких условий. Если при этом использовать значение all для импортируемых аппаратных средств, то будет достигнут аналогичный эффект.
Резюме
В данной главе мы разобрали основные понятия языка CSS. В последующих главах мы разберем все остальные свойства CSS. А пока, если вы внимательно читали, с уверенностью можно сказать, что, открыв любую таблицу стилей, вы с легкостью в ней разберетесь.
Глава 8
Форматирование текста средствами CSS
8.1. Выделение текста цветом
8.2. Шрифты
8.3. Форматирование текста
В этой главе мы разберем основные приемы работы с текстом средствами CSS. Форматирование и установка стиля, выбор шрифта и задание цвета – все это с легкостью решается средствами CSS.
Рзначально язык CSS был разработан для управления РІРёРґРѕРј текста, поэтому РѕРЅ предоставляет веб-разработчику впечатляющие средства РїРѕ работе СЃ текстом. Как правило, обычного набора элементов HTML недостаточно, чтобы оформить текст РЅР° странице. Здесь РЅР° помощь Рё РїСЂРёС…РѕРґРёС‚ CSS.
Чтобы понять всю мощь CSS по работе с текстом и в то же время освоить основные приемы создания таблиц стилей, создадим простую HTML-страницу, которая и будет служить примером (листинг 8.1, рис. 8.1).
Листинг 8.1. Тестовая HTML-страница
Глава 8. Форматирование текста средствами CSS
Форматирование текста средствами CSS
Намек: добивается успеха только тот, кто старается.
Предисловие
В CSS нет ничего сложного, к концу данной главы вы научитесь изменять
цвет текста, шрифт, размер. Научитесь управлять его положением на
странице и выучите еще много других приемов форматирования,
которые сделают вас настоящим профессионалом веб-дизайна.
Вам будет под силу отформатировать любой текст. Рвы сделаете это
так же просто, как в обычном текстовом редакторе.
Вы сможете заставить читать посетителя по буквам.
К примеру, задать "жирность" в 600 для данного абзаца
средствами HTML просто невозможно.
Так же, как и выделить данный текст.
Если из примера вам все понятно, то вы можете сразу перепрыгнуть
далее к главе 9.
Рис. 8.1. Тестовая HTML-страница
Страница, которую вы создадите, используя код листинга 8.1, может незначительно отличаться от приведенной в книге. К примеру, у вас может быть другой шрифт. По ходу изучения главы мы отформатируем страницу так, чтобы ваша тестовая страница и страницы из дальнейших примеров выглядели одинаково. Собственно, это и есть одна из самых сложных задач веб-дизайна.
После создания страницы первое, что бросается в глаза, – неудачно отформатированный текст. Точнее, он вообще не отформатирован. Постепенно мы будем совершенствовать наш CSS-код и к концу главы получим отформатированную страницу.
CSS-код можно добавлять в HTML-страницы двумя путями. Первый – вписать код таблицы стилей непосредственно в саму HTML-страницу. Второй, который мы и будем использовать в примере, – вынести содержание CSS во внешний файл таблицы стилей, а в HTML-странице оставить ссылку на него. В нашем примере файл таблицы стилей располагается во внешнем файле с именем my_style.css в той же папке, что и наша страница.
Следует добавить, что каждый раз дописывать новое свойство для одного и того же элемента, указывая его название, нерационально. К примеру, задать цвет текста красным и выровнять его по правому краю для абзацев можно, определив для элемента P такой CSS-код:
p {
color: red;
text-align: right;
}
Данный прием был подробно рассмотрен в подразд. «Группировка» разд. 7.3.
По ходу изучения главы вы будете встречаться с одиночными примерами. Однако в таблицу стилей можете дописывать свойства так же, как показано выше.
Сразу оговорюсь, что при работе со шрифтами надо учитывать, что выбранный вами шрифт должен быть установлен на компьютере клиента, иначе он увидит страницу в шрифте, который задан по умолчанию настройками его браузера. Про это подробно будет рассказано в разд. 8.2, посвященном выбору и заданию шрифтов.
Ртак, приступим Рє изучению форматирования текста Рё начнем СЃ рассмотрения работы СЃ цветами.
8.1. Выделение текста цветом
Выбор цветовой схемы страницы – одна из главных и сложных задач, которые стоят перед веб-дизайнером. Поэтому в последующих двух разделах разберемся со способами задания цвета в CSS, научимся менять цвет текста и выделять его.
Надо отметить, что все свойства CSS по работе с цветами наследуемы. Для понимания, что это такое, приведу следующий пример. Представьте, что мы задали красный цвет текста для элемента BODY. Как это сделать, мы разберем дальше, сейчас сконцентрируйтесь только на «наследовании». Представьте, что весь текст на странице стал красным. Если теперь мы зададим синий цвет для таблиц с именем класса blue_text, то весь текст во всех таблицах с классом blue_text будет синим. Если же мы зададим красный цвет для элементов P, а синий – для BODY, то цвет текста в таблицах останется синим, так как в таблицах мы редко используем элемент абзаца P. Если же внутри какой-то ячейки мы используем элемент P, то цвет текста в этой ячейке, то есть внутри элемента P, будет красным. Если из этого текстового примера вам еще что-то непонятно, не расстраивайтесь, по ходу главы мы разберем все подробнее.
Цвет текста
Для изменения цвета текста используется свойство color, в качестве параметра которого задается значение или название цвета. Сделаем для примера все заголовки первого уровня тестовой страницы красными. Заголовки первого уровня в HTML обозначаются элементом H1, поэтому добавим в файл my_style.css такой код:
h1 {
color: red;
}
Значение цвета можно задать тремя способами.
1. Вы можете использовать название цвета, как в примере выше. Например, если вы захотите изменить цвет заголовков в примере на синий. Тогда вместо указанного названия цвета red используйте blue.
2. Цвет может быть задан и с помощью шестнадцатеричного значения, например #ff0000. Вы можете поменять в нашем примере red на #ff0000, но вид страницы от этого не изменится.
3. Допускается задание цвета с помощью RGB-значения: rgb(255, 0, 0). Оно также задаст тексту красный цвет.
Свойство color тоже полезно использовать для задания цвета ссылкам в документе. Если ваша страница представляет, например, некую статью и вы решили оставить цвет текста черным, то ссылки можно сделать синими или серыми, тогда они не будут сильно бросаться в глаза и в то же время будут выделяться в основном тексте. Задание свойств для ссылок ничем не отличается от задания свойств для основного текста, только надо знать, что в CSS выделяют четыре типа ссылок:
• link – все ссылки на странице, которые пользователь еще не посетил;
• visited – все ссылки на странице, которые пользователь посетил;
• active – все активные ссылки;
• hover – ссылка, над которой находится указатель мыши.
Чтобы задать тип ссылки, к которому вы хотите применить свойства форматирования, укажите без пробелов символ: и название типа ссылки. Например, чтобы цвет ссылки на странице менялся на серый, когда пользователь наводит на нее указатель мыши, используем следующий код:
a:hover {
color: grey;
}
Добавим данный код в нашу таблицу стилей. Результат всех изменений, сделанных в этом разделе, изображен на рис. 8.2.
Рис. 8.2. Задание цвета
Поэкспериментируйте с заданием цвета другими способами и другим элементам документа, и вы быстро освоите данный прием форматирования.
Цвет фона
Цвет фона задается с помощью свойства background-color. Его можно использовать, чтобы сделать в документе текст, похожий на выделенный маркером. Значение цвета задается, как и в предыдущей главе, одним из трех способов: названием цвета, шестнадцатеричным значением или RGB-значением.
Теперь поработаем с тестовой страницей. Для примера выделим заголовки первого уровня, то есть элементы H1, синим цветом. Для этого, как и в предыдущей главе, добавим в файл таблицы стилей такой код:
h1 {
background-color: blue;
}
Следует отметить, что если задать один и тот же цвет фона и текста, то текст просто-напросто сольется с фоном и не будет виден. Результат работы примера можно увидеть на рис. 8.3.
Рис. 8.3. Выделение заголовка фоновым цветом
Наверное, РІС‹ уже обратили внимание, что РЅР° СЂРёСЃ.В 8.3 цветом выделена РІСЃСЏ строка. Рто потому, что браузер отводит место РїРѕРґ элемент H1 РґРѕ конца строки. РўРѕ же самое будет Рё СЃ элементом P. Если РІС‹ хотите, чтобы был выделен только текст без пустого пространства справа, надо внутрь H1 вложить элемент SPAN Рё записать таблицу стилей следующим образом:
h1 span {
background-color: blue;
}
В этом случае стиль будет применяться только к последовательности элементов hi span.
В элемент H1 включаем элемент SPAN:
Форматирование текста средствами CSS
В результате синим цветом будет выделена только строка заголовка.
Теперь, когда вы научились работать с цветами, перейдем к следующему важному разделу, где вы научитесь придавать тексту нужный вид и размер.
8.2. Шрифты
Шрифт – это лицо текста, поэтому для начала научимся задавать нашему тексту нужный шрифт. Двигаясь дальше, РїРѕРґСЂРѕР±РЅРѕ рассмотрим РІСЃРµ возможные варианты работы СЃРѕ шрифтом текста. Ртак, начнем СЃ семейства шрифта.
Семейство шрифта
Свойство font-family указывает браузеру шрифт или список шрифтов, которыми должен отображаться текст. Не надо забывать, что заданный вами шрифт может быть не установлен на машине клиента. Тогда браузер отобразит текст на экране первым шрифтом, который найдет установленным при просмотре списка слева направо. Если не будет найден ни один из перечисленных шрифтов, то браузер клиента отобразит текст шрифтом по умолчанию. Вы также можете задать семейство шрифта.
Семейство – это группа шрифтов, созданных с использованием сходных принципов дизайна и внешнего вида. В CSS есть пять основных групп: serif, sans-serif, monospace, fantasy, cursive.
Примечание
После задания шрифтов последним в списке лучше указывать название семейства, к которому относится шрифт. Тогда, если не будет найден ни один из шрифтов, браузер отобразит текст шрифтом из заданного семейства, что позволит сохранить стиль оформления.
Для примера зададим шрифт текста абзацев Trebuchet MS и группу, к которой относится данный шрифт, sans-serif (рис. 8.4):
p {
font-family: "Trebuchet MS", sans-serif;
}
В примере, изображенном на рис. 8.4, показано окно браузера в системе, где установлен шрифт Trebuchet MS.
Рис. 8.4. Установка шрифта
Внимание!
Необходимо помнить, что если название шрифта содержит пробелы, то его необходимо заключить в кавычки.
Вы можете попробовать работать и с другими шрифтами и группами. Ниже приведены несколько групп и их основные шрифты, которые доступны для большинства пользователей с разными браузерами и операционными системами:
• serif – Times New Roman, Garamond, Georgia;
• sans-serif – Trebuchet, Arial, Verdana;
• monospace – Courier, Courier New, Andale Mono.
Старайтесь не использовать экзотических шрифтов, и тогда вы сможете быть уверенными, что страница у клиента будет отображена так, как вы задумали.
Стиль шрифта
Стиль шрифта задается свойством font-style, которое может принимать РѕРґРЅРѕ РёР· трех значений: normal, oblique или italic. Рти значения имеют следующий смысл.
• normal – определяет шрифт, который классифицируется как Normal. При отображении на экране он выглядит как обычный текст.
• oblique – задает шрифт, который классифицируется как Oblique. К нему, как правило, относятся шрифты со словами Oblique, Slanted или Incline в названиях. Такой текст может в действительности генерироваться электронным наклоном нормального шрифта.
• italic – определяет шрифт, который классифицируется как Italic и, если это недоступно, шрифт, помеченный как Oblique. К Italic, как правило, относятся шрифты со словами Italic, Cursive или Kursiv в названиях.
Для примера изменим стиль элементов P класса namek в нашем примере на курсив:
p.namek {
font-style: italic;
}
На рис. 8.5. видно что текст Намек: добивается успеха только тот, кто старается теперь записан курсивом.
Рис. 8.5. Стиль шрифта
Вы также можете сделать весь текст на странице курсивом, используя такой код:
body {
font-style: oblique;
}
Вид шрифта
Свойство font-variant может принимать одно из двух значений: normal или small-caps. Если задано значение small-caps, то текст будет выведен шрифтом из малых прописных букв. Если задано значение normal, то текст отображается, как обычно.
Лучше всего это понятно на примере. Применим свойство small-caps для наших заголовков второго уровня:
h2 {
font-variant: small-caps;
}
Результат просмотра страницы браузером Internet Explorer 6 показан на рис. 8.6.
Рис. 8.6. Вариант шрифта
Примечание
Следует отметить, что если font-variant имеет значение small-caps, а шрифт недоступен, то браузер будет симулировать такой шрифт, например, замещением букв нижнего регистра обычного шрифта пересчитанными символами верхнего регистра. В крайнем случае весь текст будет воспроизведен буквами верхнего регистра.
Ширина шрифта
Свойство font-weight определяет ширину шрифта. Значение может быть задано числом от 100 до 900 (в сотнях), где каждый номер обозначает шрифт, который темнее своего предшественника. В других случаях значение может быть следующим.
• normal – текст будет отображен обычным шрифтом. В числовом выражении соответствует значению 4 0 0.
• bold – текст будет отображен более широким шрифтом, чем обычно. Численно оно равно значению 7 0 0.
• bolder – определяет более темный вес шрифта, чем наследуемый. Если наследуемое значение равно 9 0 0, то результат будет также 9 0 0.
• lighter – задает вес шрифта, который светлее, чем наследуемый. Если наследуемое значение равно 10 0, то результат будет также 10 0.
Для примера установим значение свойства font-weight для класса w_600 элемента P, равное 600.
p.w_600 {
font-weight: 600;
}
Результат приведен на рис. 8.7.
Рис. 8.7. Вес шрифта
В качестве эксперимента вы можете попробовать задать элементу BODY значение свойства font-weight равным normal, а потом изменить его на 400. Вы увидите, что толщина шрифта основного текста в обоих случаях осталась одинаковой и вид текста на странице не изменился.
Размер шрифта
Теперь изменим размер шрифта основного текста. Для этого существует свойство font-size. Размер шрифта задается с помощью значения и единицы измерения, выбранной в одной из двух разных групп: абсолютной и относительной.
Абсолютные единицы:
• in – дюйм, примерно равен 2,5 см;
• mm – миллиметр;
• cm – сантиметр;
• pt – пункт, примерно равен 1/7 дюйма;
• pc – пика (равна 12 пунктам).
Относительные единицы:
• em – высота шрифта элемента;
• ex – высота буквы x;
• px – пиксел;
• % – процентное соотношение.
Группу относительных единиц удобно использовать, чтобы сохранить первозданный вид документа на любом устройстве (на экране, при печати).
Для нашего примера сделаем размер шрифта текста, равный 14 пунктам:
p {
font-size: 14pt;
}
Результат можно увидеть на рис. 8.8.
Рис. 8.8. Размер шрифта 14 pt
Мы рассмотрели основные возможности CSS по работе со шрифтами. Теперь приступим к изучению форматирования текста.
8.3. Форматирование текста
В этом разделе вы познакомитесь с впечатляющими средствами CSS для отображения текста. Начнем изучение форматирования текста с отступов.
Отступы
Представьте, что вы форматируете несколько HTML-страниц размером с небольшую книгу. Язык HTML не предоставляет специальных средств для задания отступа абзаца, и отступ приходится делать с помощью пробелов. Согласитесь, не очень-то удобно в начале каждого абзаца набирать пробелы, да еще и следить, чтобы их было одинаковое количество в начале всех абзацев. Еще хуже, если, выполнив часть или всю работу, вы обнаружите, что отступы недостаточны или слишком большие. CSS предоставляет замечательное свойство text-indent для решения данной проблемы. Размер отступа может задаваться как абсолютными, так и относительными единицами. В том числе и процентами. В качестве 100 % считается ширина всей страницы.
Зададим в нашем примере отступ 25 пикселов (рис. 8.9):
p {
text-indent: 25px;
}
Рис. 8.9. Задание отступа 25 пикселов
Для данного свойства остается порекомендовать поэкспериментировать с разными значениями и единицами измерений, чтобы лучше разобраться в них.
Выравнивание текста
Выравнивание текста задается с помощью свойства text-align, значения которого такие же, как и значения свойства align у элемента P. Следующие значения указывают, что текст будет выровнен:
• left – по левому краю;
• right – по правому краю;
• center – по центру;
• justify – по формату.
Для примера зададим для заголовков выравнивание по центру, а для вступительного намека – по правой стороне (рис. 8.10):
h1 {
text-align: center;
}
p.namek {
text-align: right;
}
Рис. 8.10. Выравнивание текста
Декоративное оформление
С помощью CSS можно изменять или добавлять декоративное оформление текста. Для этого существует свойство text-decoration. Ниже перечислены все возможные значения данного свойства и их описания:
• none – не производит декоративное оформление;
• underline – каждая строка текста будет подчеркнута;
• overline – над каждой строкой текста будет отображена линия;
• line-through – каждая строка текста будет зачеркнута;
• blink – текст будет мигать.
Примечание
Вы можете указывать значения как по одному, так и по нескольку сразу. Если же вы определяете несколько значений, между ними нужно ставить только пробел. Указание запятой недопустимо, иначе браузер использует только те эффекты, которые записаны после последней запятой.
Свойство none РЅР° первый взгляд может показаться лишним. Ведь если РЅРµ задавать его, то текст Рё так будет без декоративного оформления. Однако его полезно использовать для ссылок. Для РЅРёС… браузер РїРѕ умолчанию считает заданным значение underline этого свойства. Рными словами, РІСЃРµ ссылки РЅР° странице отображаются подчеркнутыми. Если РІС‹ захотите сделать ссылки такими же, как Рё РѕСЃРЅРѕРІРЅРѕР№ текст, то есть без подчеркивания, то вам пригодится значение none.
Применим новые знания на практике. Для примера обычным ссылкам установим значение text-decoration, равное none, а для ссылок типа hover – underline (рис. 8.11).
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
Рис. 8.11. Декоративное оформление
На рис. 8.11 видно, что ссылка главе 9 больше не подчеркнута.
Чтобы лучше освоить данный пример форматирования, попробуйте сделать мигающими ссылки, на которые пользователь наводит указатель мыши.
Расстояние между буквами
Расстояние между буквами можно задать свойством letter-spacing. В качестве значения указываются необходимая величина и абсолютная единица измерения.
Для нашего примера зададим расстояние между буквами в заголовке шириной 6 пикселов:
h1 {
letter-spacing: 6px;
}
Результат можно увидеть на рис. 8.12.
Р РёСЃ.В 8.12. Рнтервал между буквами
Вы можете попробовать применить это свойство к другим элементам страницы.
Далее вы узнаете, как с помощью данного свойства можно выделить необходимый текст на странице.
Расстояние между словами
Можно задать расстояние как между буквами, так и между словами, используя свойство word-spacing. В качестве значения вы можете указать желаемое значение либо normal, чтобы использовать значение браузера по умолчанию.
Рто свойство РЅРµ представляет сложностей, поэтому приведу лишь CSS-РєРѕРґ:
h1 { word-spacing: 1em }
В данном примере расстояние между всеми словами в элементах H1 увеличивается на 1 em.
Трансформация текста
Свойство text-transform управляет регистром символов. Существует три значения для данного свойства:
• capitalize – пишет все слова с большой буквы;
• uppercase – переводит все символы в верхний регистр;
• lowercase – переводит все символы в нижний регистр.
Сделаем заглавие первого уровня как в английском языке: все слова запишем с прописной буквы (рис. 8.13):
h1 {
text-transform: capitalize;
}
Р РёСЃ.В 8.13. Рзменение регистра Р±СѓРєРІ
Вы можете использовать это свойство вместе со свойством letter-spacing, описанным выше. Вместе они дают интересный оформительский эффект. Текст, выделенный этими свойствами, может не отличаться по цвету от основного текста, не нарушая тем самым цветовую схему документа. Рв то же время он будет сильно бросаться в глаза.
Поэкспериментируйте с заданием разных значений данного свойства для нашего примера, попробуйте сделать весь текст заголовка написанным сначала прописными буквами, а потом строчными.
Пустое место
CSS также позволяет задавать способ обработки браузером пустого пространства. Для этого нужно использовать свойство white-space. Рассмотрим значения, которые может принимать это свойство, и их описание:
• normal – браузер будет сжимать последовательно пустое пространство и разбивать строки для вмещения линейных блоков;
• pre – браузер не может изменять последовательность символов пустого пространства, строки разбиваются только в местах начала новой строки, обозначенных в исходном тексте;
• nowrap – работает, как значение normal в смысле сокращения пустого пространства, но запрещает образовывать разрывы строк в тексте, за исключением разрывов, определенных с помощью элемента BR.
Рассмотрим такой пример:
body { white-space: pre }
Браузер отобразит HTML-документ так, как он отображается в исходном виде, например в программе Блокнот.
Направление вывода текста
Направлением вывода текста можно управлять, используя CSS-свойство direction. Оно может принимать следующие значения:
• ltr – направление слева направо;
• rtl – направление справа налево.
Резюме
В данной главе мы разобрали основные методы форматирования текста средствами CSS. Вы познакомились с приемами изменения внешнего вида текста, заданием его шрифта, цвета, размера, научились изменять его внешний вид и располагать на странице.
Теперь вам под силу отформатировать текст любой сложности и любых размеров. Немного практики – и вы станете настоящим профессионалом веб-дизайна.
Глава 9
Оформление HTML-документа средствами CSS
9.1. Фон
9.2. Генерируемое содержимое
9.3. Автоматическая нумерация и списки
9.4. Таблицы
9.5. Рнтерфейс пользователя
9.6. Поля и отступы
9.7. Границы
9.8. Работа с блоками
Р’ этой главе РјС‹ рассмотрим РІСЃРµ возможности CSS РїРѕ оформлению документа. Рзучив этот материал, РІС‹ СЃ легкостью сможете придать вашим страницам эксклюзивный РІРёРґ. Начнем изучение СЃ изменения фона страницы.
9.1. Фон
В качестве фона любого элемента страницы вы можете задать либо цвет, либо изображение. Свойства фона не наследуются, но фон родительского блока всегда будет виден, так как в качестве начального значения свойства background-color выступает значение transparent, то есть прозрачность.
Следует отметить, что некоторые браузеры будут отображать фон HTML-документов, заданный для элемента HTML. Хотя рекомендуется устанавливать фон для элемента BODY, а не для элемента HTML.
Рассмотрим пример, приведенный в листинге 9.1.
Листинг 9.1. Фон страницы
Глава 9. Установка фона области представления
Я использую мраморный фон из файла картинки.
Фон документа, представленного в листинге 9.1, будет задан картинкой, размноженной на все окно браузера и находящейся в файле marble.png.
Список всех возможных свойств фона таков: background-color, background-image, background-repeat, background-attachment, background-position и background.
Теперь рассмотрим каждое из них подробнее.
Ртак, первое свойство – background-color. РћРЅРѕ устанавливает цвет фона элемента, равный либо шестнадцатеричному значению цвета, либо названию цвета, либо RGB-значению цвета, либо ключевому слову transparent. Ключевое свойство transparent просто-напросто делает фон элемента прозрачным.
Пример:
body { background-color: #FF0000 }
Приведенный код устанавливает красный цвет фона страницы.
Второе свойство – background-image. Оно задает графический объект, то есть картинку из файла, в качестве фона элемента. При определении фонового изображения рекомендуется также указывать цвет фона, который будет использоваться, если изображение недоступно. Если изображение доступно, то оно отображается поверх фонового цвета, который все же будет виден сквозь прозрачные фрагменты изображения. В качестве значения этого свойства выступает адрес картинки. Вы также можете задать в качестве значения ключевое слово none, чтобы не использовать фоновое изображение, например, пока не известен адрес файла фоновой картинки. Рассмотрим такой фрагмент таблицы стилей:
body { background-image: url(В«some_bgimage.gifВ») }
p { background-image: none }
В данном примере в качестве фона страницы будет использоваться изображение из файла some_bgimage.gif. Однако содержимое страницы внутри элемента P будет находиться на белом либо на таком фоне, который задан в браузере по умолчанию (как правило, белый).
Если вы задали фоновое изображение, то можете также использовать свойство background-repeat, которое определяет, будет ли изображение дублироваться, и если да, то каким образом. Данное свойство может принимать следующие значения:
• repeat – дублируется как по вертикали, так и по горизонтали;
• repeat-x – дублируется только по горизонтали;
• repeat-y – дублируется только по вертикали;
• no-repeat – не дублируется: выводится только одна копия изображения.
Рассмотрим такой пример:
body {
background: white url("pendant.gif");
background-repeat: repeat-y;
background-position: center;
}
Цвет страницы будет белым. Фоновое изображение будет вертикально продублировано и расположено посередине страницы.
Если вы задали фоновое изображение, то нужно указать свойство background-attachment, которое определяет, будет ли изображение фиксироваться относительно окна просмотра (значение fixed) или перемещаться вместе с документом (значение scroll) в процессе его прокрутки.
Рассмотрим пример:
body {
background: red url("pendant.gif");
background-repeat: repeat-y;
background-attachment: fixed;
}
При использовании приведенного примера для какого-то HTML-документа цвет фона документа станет красным, а на странице сформируется бесконечная вертикальная полоса из файла pendant.gif. Полоса будет оставаться как бы «приклеенной» к окну просмотра во время горизонтальной или вертикальной прокрутки.
Вы также можете задать начальное положение фонового изображения на странице, используя свойство background-position. Есть несколько способов присвоения значения данному свойству.
Например, вы можете задавать местоположение, используя проценты. Причем если вы используете пару значений 0 % 0 %, то верхний левый угол изображения выравнивается относительно верхнего левого угла краевой линии отступов блока. Если зададите пару значений 100 % 100 %, то нижний правый угол изображения помещается в нижний правый угол краевой линии отступов. Если вы зададите пару значений 14 % 8 4 %, то верхний левый угол изображения смещается вдоль изображения на 14 % вправо по горизонтали и на 84 % вниз по вертикали. Тем самым он помещается в точку, смещенную вдоль области, предназначенной для отступов, на 14 % вправо по горизонтали и на 84 % вниз по вертикали.
Вы также можете задать данное значение, используя число и единицу длины. Например, если вы зададите пару 2 cm 2 cm, то верхний левый угол изображения помещается на 2 см правее и 2 см ниже верхнего левого угла области, предназначенной для отступов.
Помимо этого, вы можете использовать в качестве значений ключевые слова. Ниже приведены их список и описания:
• top left и left top – аналогично паре значений 0 % 0 %;
• top, top center и center top – как и пара значений 50 % 0 %;
• right top и top right – аналогично паре значений 100 % 0 %;
• left, left center и center left – как и пара значений 0 % 50 %;
• center и center center – аналогично паре значений 50 % 50 %;
• right, right center и center right – как и пара значений 100 % 50 %;
• bottom left и left bottom – аналогично паре значений 0 % 100 %;
• bottom, bottom center и center bottom – как и пара значений 50 % 100 %;
• bottom right и right bottom – аналогично паре значений 100 % 100 %.
Если вы зададите только одно значение длины или одно процентное соотношение, то оно определит позицию только по горизонтали, а позиция по вертикали будет принята браузером как значение 50 %. Если вы зададите два значения, то первым браузер будет считать позицию по горизонтали. Вы также можете сочетать значение длины и процентное соотношение (например, 5 0 % 2 cm). Можно использовать отрицательные значения. Однако помните, что ключевые слова нельзя применять вместе со значениями длины или процентными соотношениями.
Можно использовать сокращенную запись для всех свойств, приведенных выше, с помощью свойства background. Например:
body { background: url(В«chess.pngВ») gray 50% 20% repeat fixed }
В данной таблице стилей заданы значения для всех свойств фона документа.
9.2. Генерируемое содержимое
В некоторых случаях у вас может возникнуть необходимость в том, чтобы браузер пользователя отображал на экране содержимое, которое не принадлежит так называемому «дереву» HTML-документа. Хорошим примером может служить нумерованный список. Без сомнения, вам не захочется вводить числа нумерации вручную. Ведь если список довольно большой, а вам вдруг необходимо добавить элемент в его начало, то придется менять всю нумерацию. Не правда ли, будет гораздо удобнее, если браузер будет генерировать нумерацию автоматически? Согласитесь, также гораздо удобнее работать с большими страницами, если, к примеру, браузер сам добавляет слово «Рисунок» и номер рисунка перед его названием или, например, вставляет надпись «Глава 9.» перед заголовком девятой главы.
Хотя это может показаться нелепым, но в отличие от HTML CSS предоставляет средства для решения данных проблем.
С помощью CSS можно генерировать содержимое несколькими способами:
• с использованием свойства content в сочетании с псевдоэлементами: before и: after;
• с использованием элементов, свойство display которых принимает значение list-item.
Подробно рассмотрим все возможности CSS по генерации содержимого и начнем с использования свойства content.
Псевдоэлементы :before и: after
РЎ помощью псевдоэлементов: before Рё: after можно задать стиль Рё местоположение генерируемого содержимого. РќРµ требуется особых познаний РІ английском языке, чтобы РёР· названия догадаться, что эти псевдоэлементы определяют местоположение «перед» Рё «после» содержимого элемента, принадлежащего дереву HTML-документа. Рспользуя эти псевдоэлементы РІ сочетании СЃРѕ свойством content, РІС‹ можете определить содержимое Рё место, РєСѓРґР° РѕРЅРѕ должно быть вставлено.
Рассмотрим простой пример. Пусть браузер сам расставит точки в конце абзацев в документе:
p:after { content: "." }
Надо помнить, что псевдоэлементы: before и: after могут быть связаны с элементом HTML-документа. Тогда они будут наследовать его свойства. Чтобы вы лучше разобрались, приведу такой пример:
p:before {
content: open-quote;
color: red
}
Теперь перед каждым элементом P будет добавлена кавычка красного цвета, а шрифт кавычки будет такой же, какой задан всему абзацу.
Свойство content
Рто свойство используется вместе СЃ псевдоэлементами: before Рё: after для генерации содержимого РІ документе. Р’ примерах выше РјС‹ уже использовали это свойство. Теперь разберем его РїРѕРґСЂРѕР±РЅРѕ.
Свойство content может принимать одно из нескольких значений: строку текста, URL-адрес документа, который должен быть вставлен, счетчик, кавычки либо значение атрибута. Вы можете создавать сложную вложенную строку, используя строку текста, счетчики, значения атрибутов элемента одновременно. При этом сложная строка должна быть разделена только пробелами, а не запятыми. Например:
content: "Р РёСЃСѓРЅРѕРє " counter(imagenum) ". "В attr(alt)
В документ может быть вставлена обычная текстовая строка, которая обязательно должна быть заключена в кавычки. Для примера добавим перед всеми абзацами надпись Абзац::
p:before { content "Абзац: " }
Вы также можете вставлять в генерируемое содержимое переходы на новую строку с помощью последовательности \A. Вставка данной последовательности приводит к принудительному разрыву строки, аналогичному тому, который получается при использовании элемента BR.
Скорректируем наш пример:
p:before {
content: "Абзац:\A"
}
Теперь перед каждым абзацем будет добавлена строка Абзац:, а сам абзац будет начинаться со следующей строки.
Рассмотрим вставку строки, которая является значением параметра элемента. На первый взгляд может показаться непонятным, где это можно использовать. Такая функция применяется, например, для вставки значения атрибута alt элемента IMG:
img:before { content: attr(alt) }
Если изображение не будет выведено, то читатель, по крайней мере, увидит текст атрибута alt, то есть название или описание рисунка.
Хорошо разобраться с данным свойством помогут только эксперименты. Не пожалейте на них времени, и при разработке и обслуживании страниц оно вам с лихвой окупится.
Кавычки
Может понадобиться, чтобы в документе или в какой-то его части кавычки отображались не так, как обычно, а в зависимости от стиля и содержимого. С помощью CSS вы можете определять, каким образом браузер будет отображать кавычки. Свойство quotes задает пару «» для каждого уровня вложенности цитат, а свойство content предоставляет доступ к этим кавычкам и вставляет их до и после цитаты.
Рассмотрим определения кавычек с помощью свойства quotes. Лучше всего это можно понять из примера. Попробуйте применить следующую таблицу стиля:
/* Определение пар кавычек для двух уровней в двух языках */
Q:lang(ru) { quotes: вЂ"’ вЂ"’ "’" "’" }
Q:lang(no) { quotes: "В«" "В»" "<" ">" }
/* Вставка кавычек до и после содержимого элемента Q */
Q:before { content: open-quote }
Q:after { content: close-quote }
к HTML-документу, представленному в листинге 9.2.
Листинг 9.2. Кавычки
Глава 9
Ртот текст выделен кавычками.
В результате его обработки браузером вы получите такой текст:
В«Ртот текст выделен кавычками.В»
Если ту же таблицу стилей применить к HTML-документу, приведенному в листинге 9.3, то получим такую строку:
«Trondere graˇter naˇr blir deklamert.»
Листинг 9.3. Кавычки
Глава 9
Trondere graˇter naˇr Vinsjan paˇ kaia blir deklamert.
Как вы, наверное, заметили из примера, кавычки вставляются в соответствующие места документа благодаря значениям open-quote и close-quote, принимаемым свойством content. Каждое вхождение open-quote или close-quote в зависимости от глубины вложения заменяется одной из строк, принадлежащих значению свойства quotes.
Open-quote указывает на первую из двух кавычек, а close-quote – на вторую. Тип используемых кавычек зависит от уровня их вложенности.
Вы также можете задавать кавычки, используя один из шестнадцатеричных кодов, приведенных в табл. 9.1, предварительно поставив знак \.
Таблица 9.1. Кавычки
Например:
quotes: """ """ В«\2039В» В«\203AВ»
9.3. Автоматическая нумерация и списки
В CSS существует два свойства для управления нумерацией: counter-increment и counter-reset. Счетчики, которые определены данными свойствами, используются функциями counter() и counters() свойства content. Рассмотрим подробно свойства для управления нумерацией.
• counter-increment – с помощью этого свойства вы можете задать одно или несколько имен счетчиков, после каждого из которых может быть указано целое число. Оно определяет величину, на которую увеличивается содержимое счетчика при каждом его использовании. По умолчанию значение счетчика увеличивается на единицу. Вы также можете использовать отрицательные целые числа.
• counter-reset – также содержит список из одного или нескольких имен счетчиков, после каждого из которых может быть указано целое число. Оно задает значение, которое сначала присваивается счетчику. По умолчанию значение равно 0.
Для примера рассмотрим таблицу стилей, которая нумерует главы и разделы таким образом:
• Глава 1:
О‡ 1.1;
О‡ 1.2.
• Глава 2:
О‡ 2.1;
О‡ 2.2 Рё С‚.В Рґ.
Код таблицы следующий:
h1:before {
content: "Глава " counter(chapter) ". ";
counter-increment: chapter; /* Добавление 1 к номеру главы */
counter-reset: section; /* Установка значения 0 для раздела */
}
h2:before {
content: counter(chapter) "." counter(section) " ";
counter-increment: section;
}
В примере не указана цифра, с которой начинать нумерацию, так как по умолчанию она начинается с единицы. Однако, как отмечалось выше, это возможно.
Если вы одновременно зададите увеличение или сбрасывание счетчика, а также используете его с помощью свойства content, то сначала счетчик будет увеличен или сброшен, а потом применится в документе.
Важно помнить, что свойство counter-reset поддерживает правила каскада. По этим правилам в следующей таблице стилей сбрасывается только счетчик imagenum:
h1 { counter-reset: section -1 }
h1 { counter-reset: imagenum 99 }
Чтобы выполнить сброс обоих счетчиков, необходимо задать их вместе:
h1 { counter-reset: section -1 imagenum 99 }
Стили счетчиков
По умолчанию браузер отображает значение счетчика как число в десятичном формате, но вы можете использовать и другие стили отображения счетчика, доступные через свойство list-style-type. Тогда описание счетчика будет выглядеть так:
counter(«название счетчика», list-style-type)
Чтобы задать стиль, используемый по умолчанию, можно использовать следующую запись:
counter(«название счетчика»)
Рными словами, просто РЅРµ задавать значение list-style-type.
Вы можете использовать любые стили, в том числе disc (круг), circle (окружность), square (квадрат) и none (ничего). Например:
h1:before { content: counter(chno, upper-latin) ". " }
h2:before { content: counter(section, upper-roman) " – " }
blockquote:after { content: " [" counter(bq, hebrew) "]" }
div.note:before { content: counter(notecntr, disc) " " }
p:before { content: counter(p, none) }
Попробуйте создать простую HTML-страницу, используя элементы, которые записаны в данном CSS-коде, и применить к ней только что созданную таблицу стилей.
Счетчики со свойством display: none
Неотображаемые элементы, то есть элементы, для свойства display которых установлено значение none, не могут увеличивать или уменьшать значение счетчика.
Например, в таблице стилей, представленной ниже, элементы H2 класса do_not_ display не увеличивают значение счетчика count_h2:
H2. do_not_display {counter-increment: count_h2; display: none}
Следует отметить, что элементы, для которых свойство visibility задано как hidden, увеличивают значения счетчиков.
РЎРїРёСЃРєРё
Рассмотрим все возможности задания спискам различного визуального форматирования.
Кстати, если вы с помощью display: marker укажете маркер вместе с элементом списка, созданным с помощью свойств списка, то маркер просто-напросто заменит стандартный элемент списка. Подробно про маркеры будет рассказано дальше.
Для списков также нельзя задать фон. Чтобы использовать в документе список с фоном, нужно задать список как маркер, то есть использовать display: marker, но про это также будет рассказано дальше.
Ртак, начнем СЃРѕ стилизации СЃРїРёСЃРєР° СЃ помощью свойства list-style-type. Рто свойство задает РІРёРґ маркера элемента СЃРїРёСЃРєР°, если для свойства list-style-image указано значение none или изображение, РЅР° которое указывает URL, недоступно. Можно использовать три типа маркеров: глифы, нумерованные Рё алфавитные, либо задать значение none, которое означает, что маркер РЅРµ используется.
Рассмотрим типы маркеров списка подробнее. Первыми разберем глифы. Они определяются с помощью значений disk, circle и square. Обычно они отображаются браузерами клиента как круг, окружность или квадрат. Пример списка с маркером в виде квадрата приведен в листинге 9.4.
Листинг 9.4. Нумерация средствами CSS
Глава 9. Маркеры в виде квадрата
- Рто первый элемент СЃРїРёСЃРєР°.
- Рто второй элемент СЃРїРёСЃРєР°.
- Рто третий элемент СЃРїРёСЃРєР°.
Теперь рассмотрим нумерованные списки. Различают несколько систем нумерации списков. Ниже представлены все системы нумерации, используемые в CSS, и их описание:
• decimal – десятичные числа, начиная с 1;
• decimal-leading-zero – десятичные числа, дополненные нулями (например, 01, 02, 03… 98, 99);
• lower-roman – римские цифры, представленные строчными буквами (i, ii, iii, iv, v и т. д.);
• upper-roman – римские цифры, представленные прописными буквами (I, II, III, IV, V и т. д.);
• hebrew – традиционная еврейская нумерация;
• georgian – традиционная грузинская нумерация (an, ban, gan…, he, tan, in, in-an…);
• armenian – традиционная армянская нумерация;
• cjk-ideographic – простые идеографические числа;
• hiragana – a, i, u, e, o, ka, ki…;
• katakana – A, I, U, E, O, KA, KI…;
• hiragana-iroha – i, ro, ha, ni, ho, he, to…;
• katakana-iroha – I, RO, HA, NI, HO, HE, TO….
Третий вариант задания маркеров списка – с помощью так называемой алфавитной системы, или с помощью букв. Ниже приведены алфавитные системы и их описание:
• lower-latin или lower-alpha – строчные буквы в коде ASCII (a, b, c… z);
• upper-latin или upper-alpha – прописные (заглавные) буквы в коде ASCII (A, B, C… Z);
• lower-greek – классические строчные греческие буквы: альфа (а), бета (Р), гамма (у) и т. д.
Для примера создадим страницу, представленную в листинге 9.5.
Листинг 9.5. Нумерация
Глава 9. Нумерация с использованием римских цифр
- Рто первый элемент СЃРїРёСЃРєР°.
- Рто второй элемент СЃРїРёСЃРєР°.
- Рто третий элемент СЃРїРёСЃРєР°.
В результате обработки браузером кода из листинга 9.5 вы должны увидеть такой список:
I Рто первый элемент.
II Рто второй элемент.
III Рто третий элемент.
Теперь рассмотрим свойство list-style-image. Оно определяет файл с картинкой, используемой в качестве маркера списка. Если картинка доступна, то она заменяет маркер, устанавливаемый свойством list-style-type.
Рассмотрим такой пример:
UL { list-style-image: url(В«http://my_site.com/my_marker.jpgВ») }
Если браузеру удастся загрузить файл картинки my_marker. jpg, то он отобразит ее перед каждым пунктом списка в качестве маркера.
Свойство list-style-position определяет положение блока маркера в главном структурном блоке. Для данного свойства вы можете задавать следующие значения:
• outside – блок маркера находится за пределами главного структурного блока;
• inside – блок маркера находится в первом строковом блоке главного структурного блока, следом за которым выводится содержимое элемента.
Рассмотрим данное свойство на примере (листинг 9.6).
Листинг 9.6. Нумерация в списках
Глава 9. Сравнение внутреннего/внешнего расположения
- первый элемент списка располагается первым
- второй элемент списка располагается вторым
- первый элемент списка располагается первым
- второй элемент списка располагается вторым
HTML-документ, представленный в листинге 9.6, показан на рис. 9.1.
Рис. 9.1. Сравнение внутреннего/внешнего расположения
Следует отметить, что если направление отображения текста справа налево, то маркеры будут располагаться справа от текста.
Свойство list-style является сокращенной формой задания трех свойств list-style-type, list-style-image и list-style-position, как и рассмотренная ранее сокращенная запись для шрифтов font. Например:
UL { list-style: upper-roman inside } /* Любой элемент UL */
UL > UL { list-style: circle outside } /* Любой дочерний элемент UL элемента UL */
Хотя вы можете задать информацию list-style о стиле списка непосредственно в элементах списка (например, в элементе LI языка HTML), тем не менее такой способ нужно применять с определенной осторожностью. Следующие два правила CSS выглядят похожими, хотя первое определяет селектор потомков, а второе (более специфичное) – селектор дочерних элементов:
OL.alpha LI { list-style: lower-alpha } /* Любой потомок LI элемента OL */
OL.alpha > LI { list-style: lower-alpha } /* Любой дочерний элемент LI элемента OL */
В чем же опасность? При использовании только селекторов потомков вы можете не достичь желаемых результатов. Рассмотрим пример, приведенный в листинге 9.7.
Листинг 9.7. Каскад
Глава 9. Результат применения каскада
- первый уровень списка
- второй уровень списка
Отображение элементов списка первого и второго уровней, помеченных маркерами типа lower-alpha и disc соответственно, будет осуществлено надлежащим образом. Однако каскад приведет к тому, что первое правило стиля (включающее специфичную информацию о классе) будет перекрывать второе. Рвы получите одну и ту же маркировку для первого и второго уровней (рис. 9.2).
Рис. 9.2. Каскад
Следующий код позволит решить данную проблему:
OL.alpha > LI { list-style: lower-alpha }
UL LI { list-style: disc }
Есть еще один способ записи, который позволит отобразить ваш список так, как вы задумали. Для этого нужно задать информацию list-style о стиле списка исключительно в элементах списка:
OL.alpha { list-style: lower-alpha }
UL { list-style: disc }
Благодаря наследованию значения свойства list-style элементов OL Рё UL Р±СѓРґСѓС‚ передаваться соответствующим свойствам элементов LI. Рменно этот СЃРїРѕСЃРѕР± рекомендуется использовать для задания стиля СЃРїРёСЃРєР°.
Значение URL вы можете комбинировать с любыми другими значениями, как в этом примере:
UL { list-style: url(В«http://my_site.com/my_image.gifВ») disc }
Если в данном примере браузер не сможет получить доступ к графическому объекту, то вместо него он будет использовать маркер типа disc.
Надо отметить, что если для свойства list-style устанавливается значение none, то свойствам list-style-type и list-style-image также присваивается значение none:
UL { list-style: none }
В результате маркер элемента списка просто не отображается.
Маркеры
В данном разделе мы рассмотрим использование маркеров.
Для понимания маркеров нужно знать, что браузер обрабатывает каждый элемент HTML-документа как прямоугольный блок.
Большинство элементов CSS генерируются внутри одного главного структурного блока HTML-элемента. При использовании в CSS маркеров браузер применяет два способа отображения, то есть генерирует два блока: один главный структурный блок (для содержимого элемента) и один отдельный блок для маркера (используемый для таких элементов оформления, как маркеры позиции, изображения или числа). Блок маркера может находиться внутри или вне главного блока. В отличие от содержимого, добавляемого с помощью свойства content, блок маркера не влияет на расположение главного блока.
Более ограниченный в своих возможностях способ разбиения документа использует свойства списков. Рхотя маркеры более сложны для понимания, в отличие от списков они позволят вам точно управлять их позицией и содержимым. Вы также можете использовать маркеры вместе со счетчиками для создания новых стилей списков, для нумерации заметок на полях и множества других действий.
В примере из листинга 9.8 показано, как могут использоваться маркеры для добавления точек после каждого элемента нумерованного списка.
Листинг 9.8. Создание списка с помощью маркеров
Глава 9. Создание списка с помощью маркеров
- Рто первый элемент СЃРїРёСЃРєР°.
- Рто второй элемент СЃРїРёСЃРєР°.
- Рто третий элемент СЃРїРёСЃРєР°.
В результате выполнения этого HTML-кода и таблицы стилей получим следующий список:
I. Рто первый элемент СЃРїРёСЃРєР°.
II. Рто второй элемент СЃРїРёСЃРєР°.
III. Рто третий элемент СЃРїРёСЃРєР°.
С помощью селекторов потомков и селекторов дочерних элементов вы можете задавать различные типы маркеров в зависимости от глубины вложенности списков.
Чтобы задать маркер, вы должны присвоить свойству display в псевдоэлементе: before или: after значение marker. Если содержимое псевдоэлемента: before или: after, которое относится к типу block или inline, является частью главного блока генерируемого элемента, то содержимое типа marker формируется в отдельный блок маркера, находящийся вне главного блока. Блоки маркеров формируются в виде отдельной строки. Следует также отметить, что блок маркера создается только тогда, когда свойство content псевдоэлемента генерирует какое-то содержимое.
Вы можете задавать для блока маркера границы и отступы.
В официальной документации по CSS говорится, что в псевдоэлементе: before вертикальное выравнивание базовой линии текста, содержащегося в блоке маркера, осуществляется относительно базовой линии текста первой строки содержимого главного блока. Если главный блок не содержит текста, то выравниваются верхние сегменты внешних краевых линий блока маркера и главного блока. В псевдоэлементе: after вертикальное выравнивание базовой линии текста, содержащегося в блоке маркера, осуществляется относительно базовой линии текста последней строки содержимого главного блока. Если главный блок не содержит текста, то выравниваются нижние сегменты внешних краевых линий блока маркера и главного блока.
Высоту блока маркера вы можете задать свойством line-height. Блок маркера, связанный с псевдоэлементом: before или: after, принимается во внимание при вычислении высоты первого или последнего линейного блока, содержащегося в главном блоке. Таким образом, маркеры выравниваются по первой или по последней строке содержимого элемента, даже если блоки маркеров располагаются в отдельных линейных блоках.
Вертикальное выравнивание внутри блока маркера определяется свойством vertical-align.
Вы также можете изменять ширину блока маркера, используя свойство width. Если вы зададите для свойства width значение auto, то ширина содержимого блока маркера будет равна ширине содержимого.
Для маркера также можно изменять величину горизонтального интервала, используя свойство marker-offset. Рто свойство задает расстояние между блоком маркера Рё связанным СЃ РЅРёРј главным блоком. Расстояние измеряется между РёС… ближайшими краями границ.
Если для свойства display элемента задано CSS-правило display: list-item и устанавливается значение marker, то блок маркера, генерируемый для псевдоэлемента: before, заменяет обычный маркер элемента списка.
Создадим такую страницу, в которой содержимое располагается по центру внутри блока маркера фиксированной ширины 6 em (листинг 9.9).
Листинг 9.9. Выравнивание содержимого в блоке маркера
Глава .9 Выравнивание содержимого в блоке маркера
- Рто первый элемент.
- Рто второй элемент.
- Рто третий элемент.
Если вы откроете документ, представленный в листинге 9.9, в браузере, то увидите следующее:
(1) Рто первый элемент.
(2) Рто второй элемент.
(3) Рто третий элемент.
Рассмотрим еще один пример (листинг 9.10). В нем маркеры создаются перед элементами списка и после них.
Листинг 9.10. Маркеры перед элементами списка и после них
Глава 9. Маркеры перед элементами списка и после них
- первый элемент списка располагается первым
- второй элемент списка располагается вторым
В результате обработки браузером документа из листинга 9.10 вы получите следующее:
:-) первый элемент списка располагается первым :-(
:-) второй элемент списка располагается вторым :-(
Рассмотрим еще один пример, где маркеры используются для нумерации абзацев-заметок (листинг 9.11).
Листинг 9.11. Маркеры, используемые для создания нумерованных заметок
глава 9. Маркеры, использующиеся для создания нумерованных заметок
Рто первый абзац РІ данном документе.
Рто очень короткий документ.
Конец.
В результате выполнения документа из листинга 9.11 получим следующее:
Рто первый абзац РІ данном документе.
Примечание 1: Рто очень короткий документ.
Конец.
Вы также можете изменять расстояние между ближайшими краями границ блока маркера и связанного с ним главного блока, используя свойство marker-offset. В качестве значения можно использовать служебное слово auto. Тогда браузер задаст расстояние автоматически.
Разберем это свойство на примере. Создадим страницу, в которой маркеры используются для добавления точек после каждого элемента нумерованного списка, и зададим область для маркеров списка шириной 8 em (листинг 9.12).
Листинг 9.12. Пример маркера
Глава 9. Пример маркера
Рто предыдущий абзац ...
- Рто первый элемент СЃРїРёСЃРєР°.
- Рто второй элемент СЃРїРёСЃРєР°.
- Рто третий элемент СЃРїРёСЃРєР°.
Рто следующий абзац ...
В результате получим следующее:
Рто предыдущий абзац ...
I. Рто первый элемент СЃРїРёСЃРєР°.
II. Рто второй элемент СЃРїРёСЃРєР°.
III. Рто третий элемент СЃРїРёСЃРєР°.
Рто следующий абзац ...
Теперь вы сможете справиться с любым списком и при этом оформить его так, что он не будет выглядеть «серо» на фоне всей страницы.
9.4. Таблицы
Таблицы – одно из главных средств расположения элементов на странице. Они позволяют расположить меню рядом с текстом и могут подстраиваться под монитор компьютера клиента.
Селекторы столбцов
В CSS ячейки таблицы могут принадлежать одному из двух типов групп: строкам или столбцам. В HTML ячейки являются наследующими элементами строк, а не столбцов. Тем не менее на некоторые свойства ячеек оказывают влияние свойства столбцов.
Ниже приведен список свойств, которые могут быть заданы столбцам таблицы и, соответственно, влиять на вид ячеек.
• border – задает различные свойства границы столбцам, но работает, только если для свойства border-collapse в элементе таблицы установлено значение collapse.
• background – определяет фон для ячеек в столбце.
• width – определяет ширину столбца.
• visibility – если свойству столбца visibility присвоено значение collapse, то ни одна ячейка столбца не представляется, а ячейки, охватывающие другие столбцы, урезаются. Кроме того, ширина таблицы уменьшается на ширину этого столбца. Другие значения свойства visibility не имеют влияния на отображение.
Рассмотрим несколько строк CSS-кода, определяющих свойства столбцов:
col.totals { background: blue }
table { table-layout: fixed }
col.totals { width: 5em }
Первое правило выделяет столбец класса totals синим цветом, а последние два правила указывают способ фиксирования размера столбца, используя фиксированное расположение.
Положение и выравнивание заголовка
Первым в данном разделе рассмотрим свойство caption-side. Оно определяет положение поля заголовка относительно поля таблицы. Вот список его значений, указывающих, что поле заголовка располагается:
• top – над полем таблицы;
• bottom – ниже поля таблицы;
• left – слева от поля таблицы;
• right – справа от поля таблицы.
Заголовки, расположенные ниже или выше элемента TABLE, форматируются подобно элементам блока, находящимся ниже или выше таблицы, с тем исключением, что они:
• наследуют наследуемые свойства таблицы;
• не считаются блоками для элементов compact или run-in, которые могут предшествовать таблице.
Заголовок, находящийся ниже или выше поля таблицы, действует как блок для вычисления ширины; она вычисляется относительно ширины содержащего блока таблицы.
Для заголовка, располагающегося в правой или левой части поля таблицы, значение свойства width, отличное от auto, явным образом устанавливает ширину, в то время как значение auto предписывает браузеру выбрать ширину самому. Значение, выбранное браузером автоматически, может колебаться от «самого узкого блока» до «одной строки», поэтому рекомендуется не указывать значение auto для установки ширины левого и правого заголовка.
Для выравнивания содержимого заголовка по горизонтали внутри поля заголовка используйте свойство text-align. Для вертикального выравнивания левого и правого блока заголовка относительно блока таблицы используйте свойство vertical-align. В этом случае смысл имеют только значения top, middle и bottom. Все другие значения данного свойства будут трактоваться браузером как top.
Чтобы лучше разобраться с данным свойством, рассмотрим пример.
caption {
caption-side: bottom;
width: auto;
text-align: left
}
В этом примере свойство caption-side определяет расположение заголовка под таблицей. Заголовок может иметь ширину родительского элемента таблицы, а текст заголовка будет выровнен по левому краю.
Теперь рассмотрим более сложный пример.
body {
margin-left: 8em
}
table {
margin-left: auto;
margin-right: auto
}
caption {
caption-side: left;
margin-left: -8em;
width: 8em;
text-align: right;
vertical-align: bottom
}
В этом примере показан способ помещения заголовка в левое поле. Таблица выровнена по центру за счет задания для левого и правого полей значения auto, а весь блок с таблицей и заголовком сдвинут в левое поле на расстояние, равное ширине заголовка.
Слои и прозрачность таблицы
Чтобы определить фон каждой ячейки таблицы, браузер разбивает различные элементы таблицы на шесть слоев (рис. 9.3). Фон элемента, установленный в одном из слоев, будет видим, только если у расположенных выше слоев фон прозрачный.
Рис. 9.3. Схема слоев таблицы
Рассмотрим каждый слой таблицы подробно снизу вверх.
1. Самый нижний слой представляет собой одну плоскость и сам блок таблицы. Как и все блоки, он может быть прозрачным.
2. Следующий слой содержит группы столбцов. Они по высоте равны самой таблице, но не обязательно занимают всю ее ширину.
3. В верхней части групп столбцов находятся области, представляющие блоки столбцов. Как и группы, столбцы по высоте равны самой таблице, но не всегда занимают всю ее ширину.
4. Далее следует слой, содержащий группы строк. Каждая группа строк имеет ширину, равную ширине таблицы. Вместе взятые, группы полностью занимают таблицу сверху вниз.
5. Предпоследний слой содержит строки. Строки также занимают всю таблицу.
6. Самый верхний слой содержит собственно ячейки. Как показано на рис. 9.3, хотя все строки и содержат одинаковое количество ячеек, не в каждой ячейке имеется содержимое. «Пустые» ячейки считаются прозрачными, поэтому через них будут видны нижние слои.
В качестве примера будем использовать страницу с таблицей стилей, описываемую в листинге 9.13. В этом примере первая строка содержит четыре ячейки, вторая – ни одной, поэтому через нее виден фон таблицы, за исключением тех случаев, когда ячейка первой строки занимает и вторую строку.
Листинг 9.13. Форматирование таблиц средствами CSS
Документ, представленный в листинге 9.13, будет выглядеть, как показано на рис. 9.4.
Рис. 9.4. Таблица с тремя пустыми ячейками в нижней строке
Теперь рассмотрим, как можно изменять ширину таблицы свойствами CSS.
Ширина таблицы
Для управления отображением ширины таблицы при размещении ее ячеек, строк и столбцов используется свойство table-layout. Оно может принимать следующие значения.
• fixed – горизонтальное положение таблицы не зависит от содержимого ячеек; оно зависит только от ширины таблицы, ширины столбцов и расстояния между границами или ячейками. Ширина таблицы может указываться явным образом с помощью свойства width либо может быть равной auto.
• auto – браузер автоматически размещает таблицу. Ширина таблицы задается шириной столбцов и расстоянием между границами.
Высота таблицы
Высоту таблицы можно задать, используя свойство height для элемента TABLE. Как и для ширины, вы можете оставить выбор высоты браузеру, используя значение auto, либо задать значение числом и указать единицу измерения.
Рспользуя свойство height, РІС‹ также можете задавать высоту поля элемента table-row, то есть высоту строк.
Вертикальное выравнивание
Свойство vertical-align каждой ячейки таблицы определяет вертикальное выравнивание ее содержимого. Содержимое каждой ячейки имеет базовую линию, верх, середину и низ. В контексте таблиц свойство vertical-align может принимать следующие значения.
• baseline – базовая линия ячейки располагается на той же высоте, что и базовая линия первой строки, занимаемой ячейкой.
• top – верх блока ячейки совпадает с верхом первой строки, занимаемой ячейкой.
• bottom – низ блока ячейки совпадает с низом последней строки, занимаемой ячейкой.
• middle – середина ячейки совпадает с серединой строк, занимаемых ячейкой.
• sub, super, text-top, text-bottom – эти значения не применяются к ячейкам. В случае их использования ячейка выравнивается по базовой линии.
Горизонтальное выравнивание
Горизонтальное выравнивание содержимого ячейки устанавливается свойством text-align. Если в качестве значения свойства text-align для нескольких ячеек в столбце задана строка текста, то содержимое этих ячеек выравнивается относительно вертикальной оси. Начало строки соприкасается с этой осью. Расположение строки слева или справа относительно оси определяется направлением текста. Если значением свойства text-align для ячейки таблицы является строка, но этой строки нет в содержимом ячейки, то конец содержимого соприкасается с вертикальной осью выравнивания.
Рто станет понятно РёР· примера. Создадим следующую таблицу стиля:
td { text-align: "." }
td:before { content: "$" }
Создадим также HTML-документ, который имеет следующий фрагмент кода:
Плата за междугородние звонки
| 1.30
| 2.50
| 10.80
| 111.01
| 85.
| 90
| .05
| .06
|
Тогда согласно этой таблице стилей цифры, обозначающие доллары, будут выровнены относительно десятичной точки. Здесь также используется псевдоэлемент: before для вставки значка доллара перед каждой цифрой в строке.
Браузер клиента представит на странице эту таблицу следующим образом:
Плата за междугородние звонки
$1.30
$2.50
$10.80
$111.01
$85.
$90
$.05
$.06
Динамические эффекты строк и столбцов
Свойство visibility для элементов строк, РіСЂСѓРїРї строк, столбцов Рё РіСЂСѓРїРї столбцов может принимать значение collapse. Р’ результате РІСЃСЏ строка или весь столбец РЅРµ будет отображаться Рё место, которое Р±С‹ РѕРЅ занимал, будет доступно для размещения содержимого. Рто позволяет динамически удалять строки или столбцы, РЅРµ меняя расположения таблицы.
Данное свойство удобно использовать, если приходится добавлять на страницу некий блок, который должен, во-первых, обтекаться текстом, а во-вторых, быть выделенным фоном и границей.
Границы
Для задания границ вы можете использовать следующие свойства: border, border-collapse и border-spacing.
Свойство border задает стиль границы и размер. Стили границ будут подробно рассмотрены в следующих разделах. Размер границы задается целым числом и с указанием единицы измерения.
Свойство border-collapse позволяет выбрать модель границ таблицы. Значение separate задает модель с отдельными границами. Значение collapse задает модель с пересекающимися границами.
Свойство border-spacing может принимать сразу два значения длины. Заданная длина обозначает расстояние между границами соседних ячеек. Если указана одна длина, то она определяет расстояние по горизонтали и по вертикали. Если указаны оба значения, то первое определяет расстояние по горизонтали, а второе – по вертикали. Естественно, длины не могут быть отрицательными.
Рассмотрим простой пример задания границы для таблиц на странице:
table { border: outset 10pt;
border-collapse: separate;
border-spacing: 15pt }
td { border: inset 5pt }
Ртот CSS-РєРѕРґ создаст РІРѕРєСЂСѓРі таблицы выпуклую границу размером 10 пунктов. Поскольку задано значение separate свойства border-collapse, то для ячеек Р±СѓРґСѓС‚ созданы вдавленные границы размером 5 пунктов. Расстояние между ячейками будет составлять 15 пунктов.
Стили границ
Помимо размера, CSS предоставляет возможность задавать стиль границ таблицы. Для этого используется свойство border-style. Рассмотрим список значений данного свойства и их описания.
• none – граница отсутствует.
• hidden – аналогично значению none, но в модели с пересекающимися границами имеет приоритет над любыми другими границами.
• dotted – граница представляется рядом точек.
• dashed – граница представляется рядом коротких линейных сегментов.
• solid – граница представляется единым сегментом линии.
• double – граница представляется двумя сплошными линиями. Сумма толщины двух линий и расстояния между ними равна значению border-width.
• groove – граница выглядит вдавленной.
• ridge – в противоположность groove, граница выглядит выпуклой.
• inset – в модели с отдельными границами весь блок выглядит вдавленным. В модели с пересекающимися границами это значение дает тот же эффект, что и значение groove.
• outset – в модели с отдельными границами весь блок выглядит выпуклым. В модели с пересекающимися границами это значение дает тот же эффект, что и значение ridge.
Вы можете поэкспериментировать с различными значениями и посмотреть, как их отобразит ваш браузер. Подробнее про границы будет рассказано в разд. 9.7.
Пустые ячейки
CSS позволяет определить, отображать ли границы пустых ячеек. Р’С‹ можете задать отображение пустых ячеек, используя свойство CSS empty-cells. Рто свойство управляет представлением границ РІРѕРєСЂСѓРі ячеек, РЅРµ имеющих РІРёРґРёРјРѕРіРѕ содержимого. Считается, что РІРёРґРёРјРѕРіРѕ содержимого нет РІ пустых ячейках Рё ячейках, для которых свойству visibility присвоено значение hidden.
Чтобы все ячейки таблицы (в том числе и пустые) имели границы, можно использовать следующий CSS-код:
table { empty-cells: show }
9.5. Рнтерфейс пользователя
Таблицы стилей позволяют управлять и интерфейсом пользователя, то есть, например, задавать вид указателя мыши или определять стили шрифта и оформления, установленные по умолчанию на компьютере клиента.
Указатели мыши
Средства CSS позволяют задавать указатель мыши свойством cursor. Данное свойство может принимать следующие значения.
• auto – браузер определяет отображаемый указатель исходя из контекста.
• crosshair – простое перекрестие (напоминающее символ +).
• default – указатель, используемый в данной операционной системе по умолчанию. Зачастую представляется в виде стрелки.
• pointer – указатель, обозначающий ссылку.
• move – указатель, определяющий объект, который можно переместить.
• e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize – указатель, определяющий перемещение некоторого края. Например, при перемещении, начинающемся с правого нижнего угла блока, используется указатель se-resize. Первые буквы в этом значении – это первые буквы частей света South и East.
• text – указатель, используемый при выделении текста. Зачастую представляется в виде вертикальной линии |.
• wait – указатель, показывающий занятость программы, когда пользователю необходимо подождать. Зачастую представляется в виде циферблата или песочных часов.
• help – указатель, означающий, что для объекта, на который он указывает, имеется справочная информация. Зачастую представляется в виде вопросительного знака или воздушного шара.
• hand – указатель представляет собой «руку». Зачастую такой указатель используется для ссылок.
• uri_адрес_файла – при данном значении браузер пользователя загружает файл указателя, задаваемого этим URL-адресом.
Если браузеру не удается обработать указатель мыши, расположенный первым в списке указателей, то он попытается обработать второй, третий и т. д. Если браузеру не удается обработать ни одного указателя, заданного в таблице стилей, он будет использовать общий указатель, расположенный в конце списка. Например:
p { cursor : url(В«mything.curВ»), url(В«second.csrВ»), text; }
В этом примере при наведении на содержимое элемента P указатель мыши станет таким, какой задан в файле mything.cur. Если браузер не сможет загрузить данный файл указателя, он попробует загрузить файл second.csr и отобразить указатель, изображенный в этом файле. Если и этот файл окажется недоступным, браузер отобразит указатель, используемый при выделении текста.
Пользовательские настройки цветов
Чтобы цветовая схема вашей страницы отвечала цветовой схеме операционной системы пользователя, вы можете использовать одно из определенных в CSS значений, задающих цвета следующих элементов.
• ActiveBorder – граница активного окна.
• ActiveCaption – заголовок активного окна.
• AppWorkspace – фон мультидокументного интерфейса.
• Background – фон Рабочего стола.
• ButtonFace – «лицевая» сторона объемных элементов.
• ButtonHighlight – насыщенная тень для объемных элементов (ребер, находящихся в тени).
• ButtonShadow – тень объемных элементов.
• ButtonText – текст на кнопках.
• CaptionText – текст в заголовках, в элементах управления размерами и элементах полосы прокрутки.
• GrayText – отключенный (недоступный) текст. Если текущий драйвер дисплея не поддерживает насыщенно-серый цвет, то для этого цвета устанавливается значение #0 0 0.
• Highlight – объекты, выделяемые в элементах управления.
• HighlightText – текст в объектах, выделенных в элементах управления.
• InactiveBorder – граница неактивного окна.
• InactiveCaption – заголовок неактивного окна.
• InactiveCaptionText – текст в неактивном заголовке.
• InfoBackground – фон всплывающей подсказки.
• InfoText – текст всплывающей подсказки.
• Menu – фон меню.
• MenuText – текст в меню.
• Scrollbar – полоса прокрутки.
• ThreeDDarkShadow – насыщенная тень для объемных элементов.
• ThreeDFace – «лицевая» сторона объемных элементов.
• ThreeDHighlight – выделенные объемные элементы.
• ThreeDLightShadow – объемные элементы (ребра, расположенные «лицом» к источнику света).
• ThreeDShadow – насыщенная тень для объемных элементов.
• Window – фон окна.
• WindowFrame – рамка окна.
• WindowText – текст в окне.
Рассмотрим CSS-код:
body { background: Background; }
При использовании данной таблицы стилей в HTML-документе цвет фона страницы будет такой же, как цвет Рабочего стола пользователя.
Пользовательские настройки шрифтов
Наряду с заданием пользовательских настроек цвета вы можете указывать пользовательские настройки шрифтов. Рассмотрим список доступных значений, относящихся к системным шрифтам, и их описание.
• caption – используется для заголовков элементов управления (кнопок, выпадающих меню и т. д.).
• icon – применяется для обозначения пиктограмм.
• menu – используется в меню (например, в выпадающих меню и списках меню).
• message-box – применяется в диалоговых окнах.
• small-caption – используется для обозначения небольших элементов управления.
• status-bar – применяется в панелях, описывающих статус окон.
Рассмотрим пример:
h1 { font: caption; }
Приведенный выше фрагмент таблицы стилей задаст для элемента H1 шрифт, используемый для заголовков элементов управления операционной системой пользователя.
Контуры
РРЅРѕРіРґР° РїСЂРё создании страницы вам может понадобиться акцентировать внимание пользователя РЅР° некотором визуально отображаемом объекте, например РЅР° РєРЅРѕРїРєРµ, активном поле формы, месте для графического объекта Рё С‚.В Рї. Рспользуя CSS, такие объекты можно окружить контуром, отличие которого РѕС‚ границ состоит РІ следующем:
• контуры вообще не занимают места;
• они могут иметь непрямоугольную форму.
Для задания контура используются свойства outline-width, outline-style и outline-color.
Для более компактной записи можно использовать свойство outline. Рто сокращенное свойство, которое устанавливает значения для всех трех свойств outline-style, outline-width Рё outline-color. Рассмотрим РёС… подробнее.
• outline-style – задает стиль контура и может принимать такие же значения, как и свойство границы border-style, за исключением значения hidden: none, dotted, dashed, solid, double, groove, ridge, inset, outset.
• outline-width – определяет размер контура.
• outline-color – принимает те же значения, что Рё ключевое слово invert, осуществляющее инверсию цветов, используемых для отображения пикселов РЅР° экране. Ртот традиционный прием используется для того, чтобы независимо РѕС‚ цвета фона контур был всегда виден.
Поскольку использование контура не приводит к переформатированию браузером HTML-страницы, вы также можете применять его для выделения активного элемента либо элемента, на котором располагается фокус. Рассмотрим следующий пример:
:focus { outline: thick solid black }
:active { outline: thick solid red }
Если в данной таблице стилей в начале строк задать элемент HTML-страницы, то всякий раз, когда элемент будет находиться в фокусе, вокруг него будет отображаться толстая линия черного цвета, а когда элемент будет активизирован, вокруг него будет отображаться линия красного цвета.
9.6. Поля и отступы
Р’ этом разделе РјС‹ разберем важный момент РїСЂРё создании веб-страниц – задание полей Рё отступов. Ртак, начнем СЃ полей.
Свойства полей
Как отмечалось выше, отображая каждый элемент, браузер как бы создает прямоугольный блок, внутри которого и размещается содержимое элемента. Свойства полей определяют ширину области поля блока. Свойство margin позволяет управлять шириной всех четырех полей. Вы также можете указывать одно из следующих свойств: margin-top, margin-right, margin-bottom, margin-left либо некоторые из них в любой комбинации, чтобы задать значения полей только для отдельных сегментов.
Все свойства margin могут принимать следующие значения.
• «длина» – вы указываете фиксированную ширину поля.
• «проценты» – вы указываете значения поля в процентах. Процентное соотношение вычисляется относительно ширины сгенерированного блока.
• auto – браузер задает значение поля автоматически. Соответственно, разные браузеры будут использовать разные значения.
Рассмотрим пример – небольшое правило CSS, которое устанавливает значение ширины верхнего поля, равное 2 em.
H1 { margin-top: 2em }
Подробнее разберем сокращенную запись этих свойств – margin. Согласитесь, не очень-то удобно каждый раз набирать следующий код:
body {
margin-top: 2em;
margin-right: 2em;
margin-bottom: 2em;
margin-left: 2em;
}
Если свойство margin принимает только РѕРґРЅРѕ значение, то РѕРЅРѕ применяется РєРѕ всем полям. Если свойство принимает РґРІР° значения, то первое применяется Рє верхнему Рё нижнему полям, Р° второе – Рє правому Рё левому. Если же РѕРЅРѕ принимает три значения, то первое значение применяется Рє верхнему, второе – Рє левому Рё правому, Р° третье – Рє нижнему полю. Р, наконец, если РѕРЅРѕ принимает четыре значения, то РѕРЅРё применяются Рє верхнему, правому, нижнему Рё левому сегментам соответственно.
Если РІС‹ зададите для свойства margin только РѕРґРЅРѕ значение, то РѕРЅРѕ будет применяться РєРѕ всем полям. Если РІС‹ зададите РґРІР° значения, то первое будет применяться Рє верхнему Рё нижнему, Р° второе – Рє правому Рё левому полям. Если же РІС‹ зададите три значения, то первое будет применяться Рє верхнему, второе – Рє левому Рё правому, Р° третье – Рє нижнему полю. Р, наконец, если зададите четыре значения, то РѕРЅРё Р±СѓРґСѓС‚ применяться Рє верхнему, правому, нижнему Рё левому полям соответственно.
Напоследок рассмотрим такой пример:
body { margin: 1em 2em 3em }
Применив эту таблицу стилей к HTML-документу, вы установите ширину верхнего, правого, нижнего и левого полей страницы равной 1 em, 2 em, 3 em и 2 em соответственно.
Свойства отступов
Свойства отступов позволяют задать ширину области отступов блока.
Всего существует четыре свойства отступов: padding-top, padding-right, padding-bottom Рё padding-left, которые задают верхний, правый, нижний Рё левый отступы соответственно. Рти свойства можно комбинировать. Свойства padding РјРѕРіСѓС‚ принимать РѕРґРЅРѕ РёР· следующих значений.
• «длина» – вы указываете фиксированную ширину поля.
• «проценты» – вы указываете значения поля в процентах. Процентное соотношение вычисляется относительно ширины сгенерированного блока.
В отличие от свойств поля свойства отступов не могут принимать отрицательные значения, и для них не может быть задано значение auto. Как и для свойств поля, процентные соотношения, задаваемые для свойств отступов, вычисляются относительно ширины сгенерированного блока.
Свойство padding является сокращенной записью всех четырех свойств отступов: padding-top, padding-right, padding-bottom и padding-left. Свойство padding работает, как и сокращенная запись для полей. Если свойство принимает только одно значение, то оно применяется ко всем отступам. Если свойство принимает два значения, то первое применяется к верхнему и нижнему отступам, а второе – к правому и левому отступам. Если оно принимает три значения, то первое значение применяется к верхнему, второе – к левому и правому, а третье – к нижнему отступу. Если свойство принимает четыре значения, то они применяются к верхнему, правому, нижнему и левому отступам соответственно.
Фон отступов будет использовать цвет или изображение, заданные этому элементу с помощью свойства background:
h1 {
background: white;
padding: 1em 2em;
}
В приведенном примере ширина вертикальных (padding-top и padding-bottom) и горизонтальных (padding-right и padding-left) отступов устанавливается равной 1 em и 2 em соответственно. Напомню, что единица измерения em задается относительно размера шрифта элемента: 1 em равен размеру используемого шрифта.
9.7. Границы
Для всех элементов страницы вы можете задать границы, а также установить их ширину, цвет и стиль. Начнем изучение границ со свойства ширины.
Ширина границы
Рассмотрим свойства border-top-width, border-right-width, border-bottom-width, border-left-width, которые определяют значение ширины верхней, правой, нижней и левой границы элемента страницы соответственно. Все свойства, рассматриваемые в данном разделе, могут принимать одно из следующих значений:
• thin – тонкая граница;
• medium – граница средней толщины;
• thick – толстая граница;
• «длина» – толщина границы задается числом. Естественно, что число, заданное в качестве значения ширины границы, не может быть отрицательным.
Надо отметить, что каждый браузер будет по-своему устанавливать числовое значение для ключевых слов thin, medium и thick, соблюдая такое правило: thin <= medium <= thick.
Для границ также существует свойство border-width, позволяющее одновременно установить значения всем четырем свойствам: border-top-width, border-right-width, border-bottom-width и border-left-width. Причем, если задать для border-width только одно значение, оно будет применяться ко всем границам. Если задать два значения, то первое будет применяться к верхней и нижней границам, а второе – к правой и левой. Если указать три значения, то первое значение будет применяться к верхней границе, второе – к левой и правой, а третье – к нижней границе. Если же задать четыре значения, то они будут применяться к верхней, правой, нижней и левой границам соответственно.
Рассмотрим три CSS-правила:
h1 { border-width: thin } /* тонкая */
h1 { border-width: thin thick } /* тонкая толстая */
h1 { border-width: thin medium thick } /* тонкая средняя толстая */
В первой строке записано правило, которое будет создавать четыре тонкие границы для всех элементов H1. Во второй строке записано правило, которое для элементов H1 создаст тонкую верхнюю и нижнюю границы и толстую правую и левую границы. Третье правило в третьей строке для элементов H1 в документе задаст их верхнюю границу тонкой, левую и правую – средней, а нижнюю – толстой ширины.
Теперь рассмотрим, как можно задавать границе цвет.
Цвет границы
Как и для ширины, для задания цвета существует четыре свойства для четырех сторон: border-top-color, border-right-color, border-bottom-color, border-left-color и сокращенная запись – border-color. Они задают цвет верхней, правой, левой и нижней границ соответственно. Для всех этих свойств вы можете либо задать значения цвета, либо использовать ключевое слово transparent, которое сделает границу прозрачной. Если задать значение transparent, то граница будет невидимой, даже если она имеет какую-то ширину.
Рассмотрим такой пример: p {
p {
border-width: 2px
border-color: blue;
}
Для элемента P будет создана граница синего цвета размером два пиксела.
Стиль границы
Для задания стиля границы используются следующие свойства: border-top-style, border-right-style, border-bottom-style, border-left-style и сокращенная запись – border-style. Свойства стиля границы определяют стиль линии (сплошная, двойная, пунктирная и т. д.), выступающей в качестве границы. Все свойства могут принимать одно из следующих значений.
• none – граница отсутствует. В результате значение свойства border-width будет равно нулю.
• hidden – подобно значению none, за исключением сценария разрешения конфликтов между границами, используемого для элементов таблицы.
• dotted – граница отображается пунктирной линией.
• dashed – граница выводится штрихпунктирной линией.
• solid – граница отображается сплошной линией.
• double – граница выводится двумя непрерывными линиями. Сумма значений ширины двух линий и расстояния между ними равна значению свойства border-width.
• groove – граница отображается вдавленной линией.
• ridge – противоположно значению groove: граница отображается выпуклой линией.
• inset – весь блок выглядит вдавленным.
• outset – противоположно значению inset: весь блок выглядит выпуклым.
Все границы выводятся поверх фоновой заставки блока. Цвет границ для значений groove, ridge, inset и outset зависит от значения свойства элемента color.
Свойство border-style определяет стиль всех четырех сегментов границ. Оно может иметь от одного до четырех значений, каждое из которых присваивается различным сегментам подобно тому, как это происходит у свойства border-width.
Рассмотрим такой пример:
#xyz { border-style: solid dotted }
Здесь горизонтальные сегменты границы будут иметь значение solid, а вертикальные – dotted.
Следует отметить, что, поскольку начальное значение стиля границы равно none, она не будет видна до тех пор, пока для нее не будет указан другой стиль.
9.8. Работа с блоками
Р’ этом разделе РјС‹ рассмотрим работу СЃ блоками Рё слоями. Рзучив данный материал, РІС‹ сможете указывать точное место РЅР° странице, РіРґРµ РїРѕ вашему желанию Рё Р±СѓРґСѓС‚ размещаться элементы страницы.
Выбор схемы позиционирования
Свойства position и float определяют алгоритм позиционирования, используемый для определения положения блока.
Рассмотрим значения этого свойства и их интерпретацию браузером.
• static – является обычным блоком, позиционируемым в соответствии с нормальным потоком. Свойства left и top не применяются.
• relative – положение блока рассчитывается в соответствии с нормальным потоком (оно называется нормальным положением). Затем блок смещается относительно своего нормального положения. Когда для расположения блока применяется модель относительного позиционирования, положение следующего блока рассчитывается так, как будто блок не был смещен.
• absolute – положение блока (возможно, Рё размер) указывается свойствами left, right, top Рё bottom. РћРЅРё определяют величину смещения относительно контейнера блока. Абсолютно позиционируемые блоки изымаются РёР· нормального потока. Рто значит, что РѕРЅРё РЅРµ влияют РЅР° размещение последующих сестринских элементов. Следует заметить, что поля абсолютно позиционируемых блоков РЅРµ перекрываются никакими РґСЂСѓРіРёРјРё полями.
• fixed – положение блока рассчитывается в соответствии с моделью абсолютного позиционирования, а затем он фиксируется относительно некоторого объекта. При использовании устройств без разбивки блок фиксируется относительно области просмотра (и не перемещается при прокрутке). При использовании устройств с постраничной разбивкой блок фиксируется относительно страницы, даже если она отображается в области просмотра (например, при предварительном просмотре печати). Вы также имеете возможность сделать определение значения fixed аппаратно-зависимым. Например, вы можете сделать так, чтобы на экране блок всегда отображался в верхней части области просмотра, но на печатной странице этого бы не происходило. Два объявления могут быть отделены друг от друга с помощью правила @media, как это показано на примере ниже:
@media screen {
h1#first { position: fixed }
}
@media print {
h1#first { position: static }
}
Смещение блоков
Говорится, что элементу была присвоена позиция, если для свойства position устанавливается значение, отличное от static. Позиционированные элементы порождают позиционированные блоки, положение которых регулируется с помощью следующих четырех свойств.
• top – задает смещение верхнего сегмента внутренней краевой линии относительно верхнего сегмента краевой линии контейнера блока.
• right – определяет смещение правого сегмента внутренней краевой линии влево относительно правого сегмента краевой линии контейнера блока.
• bottom – задает смещение нижнего сегмента внутренней краевой линии вверх относительно нижнего сегмента краевой линии контейнера блока.
• left – определяет смещение левого сегмента внутренней краевой линии вправо относительно левого сегмента краевой линии контейнера блока.
Значения этих четырех свойств имеют следующий смысл.
• «длина» – смещение задается фиксированным значением расстояния от исходной краевой линии.
• «проценты» – смещение задается процентным соотношением относительно ширины (для свойств left и right) или высоты (для свойств top и bottom) контейнера. Если высота контейнера не указана точно, то есть зависит от высоты содержимого, то процентное соотношение, определяющее значение свойств top и bottom, интерпретируется как значение auto.
• auto – результат данного значения зависит от того, какие из свойств, близких по своему содержанию к рассматриваемым, также имеют значение auto.
Для абсолютно позиционируемых блоков смещение осуществляется относительно контейнера, а для относительно позиционируемых блоков – относительно внешней краевой линии самого блока. Сначала блоку присваивается положение в нормальном потоке, а затем с использованием названных свойств указывается смещение относительно этого положения.
Позиционирование перемещаемого объекта
Перемещаемый объект – это блок, который смещается по строке в левую или правую сторону. Свойство float определяет, будет ли блок перемещен влево, вправо или вообще не будет перемещен. Оно может устанавливаться для элементов, порождающих блоки, не являющиеся абсолютно позиционируемыми. Значения данного свойства имеют следующий смысл.
• left – элемент порождает структурный блок, перемещаемый влево. Содержимое выводится вдоль правой стороны блока, начиная с самого верха (за счет свойства clear). Свойство display игнорируется, если ему не присвоено значение none.
• right – подобно значению left с той лишь разницей, что содержимое выводится вдоль левой стороны блока, начиная с самого верха.
• none – блок не перемещается.
Следующее правило перемещает все блоки, порожденные элементом IMG с атрибутом class="icon", влево и устанавливает значение ширины поля равным нулю:
IMG.icon {
float: left;
margin-left: 0;
}
Рассмотрим исходный HTML-документ и таблицу стилей на примере из листинга 9.14.
Листинг 9.14. Пример перемещаемого объекта
Глава 9. Пример перемещаемого объекта
Пример текста, у которого нет другого...
Блок, порожденный элементом IMG, перемещается влево. Следующее за ним содержимое форматируется справа от него, начиная с той же строки, на которой находится он сам. Присутствие перемещаемого объекта влияет на то, что, пока линейные блоки находятся справа от него, они укорачиваются, но как только они достигают его конца, сразу восстанавливают свою исходную ширину (равную ширине контейнера, назначенного элементом P). Приведенный документ может быть отформатирован следующим образом:
Произвольный текст,
у которого нет другого...
Рто объясняется тем, что содержимое, находящееся слева РѕС‚ перемещаемого объекта, заменяется РёРј, Р° само отображается справа РѕС‚ него.
Фиксированное позиционирование
Фиксированное позиционирование – разновидность абсолютного позиционирования. Единственным его отличием является то, что контейнер определяется областью просмотра. Для устройств без разбивки фиксированные блоки РЅРµ перемещаются РїСЂРё прокрутке документа. Р’ этом отношении РѕРЅРё схожи СЃ фиксированными фоновыми изображениями. Для устройств СЃ постраничной разбивкой блоки СЃ фиксированным положением повторяются РЅР° каждой странице. Рто может оказаться удобным, например, РїСЂРё размещении подписей РІ нижней части каждой страницы.
Вы можете использовать фиксированное позиционирование для создания презентации в виде совокупности кадров. Рассмотрим один из примеров такой презентации, представленный на рис. 9.5.
Рис. 9.5. Фиксированное позиционирование
Подобного эффекта можно достичь с помощью HTML-кода и правил стиля, представленных в листинге 9.15.
Листинг 9.15. Создание кадров в CSS
Глава 9. Создание кадров в CSS
...
Попробуйте нарисовать на листе бумаги свою разметку страницы, а потом создать ее, используя приобретенные навыки.
Определение позиционного уровня
Для размещенного блока РІС‹ можете задать позиционный уровень, РІ текущем контексте используя свойство z-index. Рто свойство может принимать такие значения.
• «целое число» – является значением позиционного уровня сгенерированного блока в текущем контексте. Блок также назначает локальный позиционный контекст с позиционным уровнем 0.
• auto – позиционный уровень блока в текущем контексте совпадает с позиционным уровнем родительского блока.
Рассмотрим пример, приведенный в листинге 9.16. В этом примере позиционные уровни блоков именуются с использованием атрибута id. Причем позиционный уровень text2 наследуется от корневого блока. Другие уровни указываются свойством z-index.
Листинг 9.16. Позиционирование вдоль оси z
Глава 9. Позиционирование вдоль оси z
src="someimg.gif" alt="Картинка"
style="z-index: 1">
style="z-index: 3">
Ртот текст будет находиться поверх изображения.
Ртот текст будет находиться РїРѕРґ всем остальным.
style="z-index: 2">
Ртот текст будет находиться ниже текста text1, РЅРѕ поверх изображения.
Данный пример должен пояснить вам понятие прозрачности. По умолчанию блок ведет себя так, что другие блоки, находящиеся за ним, видны сквозь прозрачную область его содержимого. В данном примере каждый блок, накладывающийся на другие блоки, является прозрачным. Такой тип поведения может быть переназначен посредством использования одного из существующих свойств фона.
Резюме
В данной главе были разобраны основные возможности CSS по оформлению документа. Немного попрактикуйтесь, и с уверенностью можно будет сказать, что вы можете создать и оформить страницу как истинный профессионал.
Глава 10
Введение в динамический HTML
10.1. Браузер и HTML-документ
10.2. Родительские и дочерние объекты
10.3. Объекты браузера
10.4. Объектная модель документа (DOM)
Язык HTML позволяет создавать только статические веб-страницы, не обеспечивающие интерактивное взаимодействие с посетителем сайта. Однако в HTML-документ можно встраивать сценарии, то есть небольшие программы, написанные на специальном языке, придающие веб-странице динамичность. Одним из таких языков создания сценариев является JavaScript.
JavaScript – это объектно-ориентированный язык программирования. Рто означает, что каждый элемент РЅР° веб-странице Рё РІ РѕРєРЅРµ вашего браузера предстает РІ РІРёРґРµ некоего объекта, доступного для управления РёР· программного РєРѕРґР°. РљРЅРѕРїРєРё Рё поля формы, гиперссылки, изображения, цвет фона веб-страницы Рё даже само РѕРєРЅРѕ браузера СЃ точки зрения программирования РЅР° JavaScript являются объектами.
Каждый объект имеет СЃРІРѕРё свойства, Рё СЃ РЅРёРј можно совершать определенные действия. Рто позволяет разработчику легко получать доступ Рє любому элементу веб-страницы. Какие объекты существуют РІ JavaScript, какими свойствами РѕРЅРё обладают Рё как СЃ помощью сценариев управлять любыми элементами HTML-документа, РІС‹ узнаете, прочитав данную главу.
10.1. Браузер и HTML-документ
При программировании сценариев на JavaScript вы всегда будете использовать объекты в качестве основных инструментальных средств. Объекты – это элементы рабочей области браузера и HTML-документа. Окно браузера, веб-страница, ее фоновый цвет, изображения, текст и все, что находится на странице, – это объекты. В языке JavaScript принято различать объекты браузера и объекты HTML-документа. Рассмотрим их подробнее.
Объекты браузера создаются автоматически при загрузке веб-страницы. К ним относятся Window, Navigator, Screen, History, Location. Приведу их краткую характеристику.
• Window – дает доступ к окну браузера.
• History – дает доступ к истории посещенных ссылок.
• Navigator – дает доступ к характеристикам браузера.
• Location – содержит текущий URL страницы.
• Screen – дает доступ к характеристикам экрана монитора.
С точки зрения языка JavaScript окно вашего браузера – это объект Window. Данный объект, в свою очередь, также содержит некоторые объекты – элементы оформления, например строку состояния и полосу прокрутки.
Внутри РѕРєРЅР° браузера размещается веб-страница – HTML-документ. РћРЅ является РЅРё чем иным, как объектом Document. Р’ СЃРІРѕСЋ очередь, объект Document содержит РґСЂСѓРіРёРµ объекты – объекты HTML. Рто ссылки, изображения, формы, цвет фона, то есть РІСЃРµ, что находится РЅР° веб-странице.
Ртак, РІ языке JavaScript есть объекты. РС… можно сравнить СЃ существительными или предметами. РЈ каждого объекта есть СЃРІРѕРё свойства, или характеристики. Свойства описывают объекты, как прилагательные описывают существительные. Р’ синтаксисе языка JavaScript свойство любого объекта описывается так: oбъект. свойство. Например, установить желтый цвет фона веб-страницы СЃ помощью языка JavaScript можно следующим образом: document.bgColor = В«yellowВ». Р’ этой конструкции document – объект (веб-страница, HTML-документ), bgColor – свойство объекта Document (фоновый цвет веб-страницы), yellow – значение свойства bgColor.
РљСЂРѕРјРµ того, над каждым объектом можно совершать определенные действия. Рти действия принято называть методами. Согласно синтаксису языка JavaScript после метода всегда ставятся СЃРєРѕР±РєРё РїРѕ схеме oбъект. РјeС‚oРґ(). Например, чтобы СЃ помощью языка JavaScript отобразить РЅР° веб-странице текст В«Hello world!В», нужно использовать следующую конструкцию: document. write ("Hello world! "). Здесь document – объект, write() – метод, присущий объекту Document, Р° выражение РІ скобках – текст, который должен отобразиться РЅР° странице РІ результате использования метода write(). РќР° языке программирования это называется «метод возвращает результат».
В листинге 10.1 представлен пример сценария, демонстрирующий рассмотренные ранее правила записи свойства и метода объекта Document.
Листинг 10.1. Свойство и метод объекта Document
Hello!
Обратите внимание, что строки внутри сценария отделяются друг от друга точкой с запятой. Данный сценарий меняет фоновый цвет веб-страницы и выводит текст Hello world! (рис. 10.1).
Рис. 10.1. Вывод текста и изменение фонового цвета страницы
Таким образом, каждый элемент браузера и HTML-документа для сценария на JavaScript предстает в виде объекта. Ркаждый такой объект может иметь определенные свойства и методы. Можно сказать, что свойства объектов – это данные, связанные с объектом, методы – функции для обработки данных объекта. При этом у разных объектов разные свойства и методы. Более того, по отношению друг к другу объекты не равноценны. В JavaScript существует строгая иерархия объектов.
10.2. Родительские и дочерние объекты
Согласно правилам языка JavaScript все элементы на веб-странице выстраиваются в иерархическую структуру. Каждый объект является потомком объекта более высокого уровня.
Рерархия объектов JavaScript показана РЅР° схеме, представленной РЅР° СЂРёСЃ.В 10.2.
Р РёСЃ.В 10.2. Рерархия объектов РІ языке JavaScript
Родительским по отношению ко всем остальным объектам является объект Window, расположенный на самом верхнем уровне иерархии. Он представляет окно браузера и создается при его запуске. Свойства объекта Window относятся ко всему окну, в котором отображается документ.
Прямыми потомками объекта Window являются объекты Document, History, Location, Frame. Свойства объекта History представляют адреса ранее загруженных веб-страниц. Свойства объекта Location связаны с URL-адресом документа, отображаемого в окне браузера в данный момент, объекта Frame – со специальным способом представления данных в HTML-документе через фреймы.
Для каждой веб-страницы создается РѕРґРёРЅ объект Document. РћРЅ содержит РґСЂСѓРіРёРµ объекты – объекты HTML. Рто различные элементы веб-страницы: формы, ссылки РЅР° РґСЂСѓРіРёРµ HTML-документы или локальные ссылки внутри РѕРґРЅРѕРіРѕ документа, объекты, определяющие URL-адрес, Рё С‚.В Рґ. Р’СЃРµ эти объекты являются дочерними для объекта Document.
Если в HTML-документе имеются формы, то они также предстают в виде иерархического набора объектов. Сама форма соответствует объекту Form, выступающему дочерним по отношению к объекту Document. Объект Fo rm может включать в себя такие объекты, как кнопки, переключатели, поля для ввода текстовой информации. Все элементы формы являются ее дочерними объектами.
Рерархия объектов внутри веб-страницы задается вложенностью HTML-элементов РґСЂСѓРі РІ РґСЂСѓРіР° Рё текста внутрь элементов. Объекты, имеющие открывающий Рё закрывающий теги (элементы-контейнеры), РјРѕРіСѓС‚ иметь дочерние объекты. Текст, атрибуты Рё элементы типа img, РЅРµ имеющие закрывающего тега, РЅРµ РјРѕРіСѓС‚ иметь дочерних объектов.
Чтобы лучше понять иерархию объектов в HTML-документе, рассмотрим простейший пример (листинг 10.2).
Листинг 10.2. Рерархия объектов РІ HTML-документе
javascript objects
Объекты JavaScript
Все элементы этой страницы являются объектами
Разберем этот документ СЃ точки зрения иерархии объектов РІ языке JavaScript. Самому HTML-документу соответствует объект Document. РћРЅ является родителем для всех элементов, расположенных РЅР° веб-странице. Рти элементы принято называть узлами, Р° РёС… иерархию – деревом HTML-документа.
Узел HTML является родительским по отношению ко всем остальным элементам веб-страницы. Узел HEAD имеет один дочерний узел TITLE. В свою очередь, узел TITLE имеет свой дочерний узел – текст Объекты JavaScript. BODY имеет два дочерних узла: H1 и P. Текст Все элементы этой страницы являются объектами выступает дочерним по отношению к P. Соответственно, текст Объекты JavaScript является дочерним объектом по отношению к H1.
Таким образом, с точки зрения сценария JavaScript браузер и HTML-документ представляются иерархически организованным набором объектов. Обращаясь к свойствам и методам этих объектов, можно выполнять различные операции над окном браузера, загруженным в это окно HTML-документом, а также над отдельными элементами в HTML-документе.
10.3. Объекты браузера
Объекты браузера являются тем интерфейсом, с помощью которого сценарий JavaScript взаимодействует с пользователем и HTML-документом, загруженным в окно браузера, а также с самим браузером. Рассмотрим подробнее каждый из объектов браузера.
Объект Window
Объект Window представляет собой окно браузера и является родительским по отношению ко всем остальным объектам в языке JavaScript. Он имеет свойства, описывающие размеры окна, расположенные в окне фреймы, имя окна и содержимое строки состояния окна браузера.
• defaultStatus – сообщение, отображаемое в строке состояния браузера по умолчанию.
• status – текущее сообщение, отображаемое в строке состояния браузера.
• frames – массив всех фреймов данного окна.
• length – количество фреймов в родительском окне.
• name – имя окна, указанное при его открытии методом open(), а также в атрибуте target элемента A или в атрибуте name элемента FORM.
• parent – синоним имени окна, относится к окну, содержащему набор фреймов.
• self – синоним имени окна, относится к текущему окну.
• top – синоним имени окна, относится к окну верхнего уровня.
• window – синоним имени окна, относится к текущему окну.
• Свойства window и self – синонимы. Вы можете применять любое из них по своему усмотрению, результат будет одинаков.
• Свойства frames, length, parent и top применяются, когда в окно загружен HTML-документ с фреймами. Анализируя свойство length, вы можете определить количество фреймов в окне, а с помощью свойства frames (которое является массивом) получить доступ к окнам этих фреймов. Об использовании фреймов в JavaScript было подробно рассказано в гл. 5.
• Рассмотрим использование свойств объекта Window на примере сценария из листинга 10.3.
Листинг 10.3. Свойство status объекта Window
Свойство status объекта Window
Обратите внимание на текст в строке состояния вашего браузера!
Сценарий позволяет изменить текст в строке состояния браузера (рис. 10.3).
Р РёСЃ.В 10.3. Рзменение текста РІ строке состояния браузера
Ртот механизм СѓРґРѕР±РЅРѕ использовать РїСЂРё работе СЃРѕ ссылками. Вместо того чтобы выводить РЅР° экран URL-ссылку, РІС‹ можете объяснять пользователю краткое содержание загружаемой РїРѕ ней веб-страницы.
Среди методов, определенных для объекта Window, можно отметить методы, предназначенные для открытия новых окон и закрытия существующих, для отображения на экране диалоговых панелей с сообщениями и методы для установки таймера.
• alert() – отображение диалоговой панели Alert (Предупреждение) с сообщением и кнопкой OK.
• close() – закрытие окна.
• confirm() – отображение диалоговой панели Confirm (Подтверждение) с кнопками OK и Отмена.
• prompt() – отображение диалоговой панели Prompt (Запрос) с полем ввода.
• open() – открытие окна.
• setTimeout() – установка таймера.
• clearTimeout() – сброс таймера.
Рассмотрим практические примеры использования каждого из этих методов.
Метод alert() применяется для вывода на экран простейшей диалоговой панели, отображающей какое-либо сообщение. После вызова этого метода выполнение сценария задерживается до тех пор, пока пользователь не нажмет кнопку OK в окне с сообщением.
Пример сценария, в котором используется метод alert(), приведен в листинге 10.4.
Листинг 10.4. Рспользование метода alert
Метод alert
Приведенный в примере сценарий выдает пользователю окно с сообщением Добро пожаловать! (рис. 10.4).
Рис. 10.4. Окно с сообщением
Внимание!
При вызове метода alert() не нужно указывать объект, для которого вызывается метод, – объект Window. Если при вызове метода объект не указан, интерпретатор сценария, встроенный в браузер, предполагает, что метод относится к объекту Window. Тем не менее вы можете явно указывать объект window: window. alert(). Результат будет тем же самым.
С помощью метода confi rm() также можно отобразить на экране диалоговую панель с вашим сообщением, однако эта панель содержит две кнопки – OK и Отмена. В зависимости от того, какая кнопка будет нажата, метод возвратит значение true или false. Поэтому данный метод часто применяется в сценариях с условиями if…else.
Рассмотрим использование метода confirm() на примере сценария из листинга 10.5.
Листинг 10.5. Рспользование метода confirm
Метод confirm()
Помимо метода confirm(), в сценарии использованы методы alert() и close(). В области заголовка документа определена функция okno(). Она содержит условие и обращается к методу confirm(), который выводит на экран диалоговую панель с запросом на закрытие окна (рис. 10.5).
Рис. 10.5. Окно с запросом, выводимое методом confirm()
Если пользователь нажмет кнопку OK, метод возвратит значение true, а если кнопку Отмена – значение false.
В случае положительного ответа функция okno() вызывает методы alert() и close() для текущего объекта Window. В данном случае таким объектом является окно браузера. Метод close() позволяет закрыть текущее окно браузера, а метод alert() выдаст пользователю сообщение До свидания!. Если же пользователь нажмет кнопку Отмена, то получит окно с сообщением Тогда оставайтесь.
Примечание
Вместо объекта Window в сценарии можно указывать объект Self, так как это синоним текущего окна. Например, self.close().
Если вам необходимо получить от пользователя одну текстовую строку, то можете применить другой метод объекта Window – метод prompt(). Он отображает на экране диалоговую панель, в которой есть одно текстовое поле ввода и кнопка OK. Когда пользователь нажимает эту кнопку, метод prompt() возвращает введенную строку.
Рассмотрим пример сценария, вызывающего метод prompt() (листинг 10.6).
Листинг 10.6. Рспользование метода prompt()
Метод prompt()
Сценарий выдает пользователю запрос на ввод его имени (рис. 10.6).
Рис. 10.6. Окно запроса
РРјСЏ, которое ввел пользователь РІ РѕРєРЅРµ запроса, отображается РЅР° веб-странице благодаря команде document.write.
Совет
Метод prompt() позволяет сценарию получить от пользователя только одну текстовую строку. Когда необходимо ввести сразу несколько строк, используйте форму, имеющую произвольное количество полей и кнопку завершения ввода с обработкой события onClick. Когда пользователь нажмет эту кнопку, обработчик события сможет извлечь из полей формы введенные данные.
Ранее мы рассматривали пример закрытия окна браузера с использованием метода close(). С помощью метода open() в сценарии JavaScript можно открыть новое окно браузера и загрузить в него HTML-документ или изображение для просмотра.
Синтаксис команды с использованием метода open() следующий: ореп('адрес URL', 'имя окна', сопйд='параметр 1, параметр 2, параметр 3…., параметр n').
Первый параметр метода open() задает URL-адрес HTML-документа, предназначенный для загрузки РІ РЅРѕРІРѕРµ РѕРєРЅРѕ. Например, data.html. Если загружаемая HTML-страница располагается РЅР° РґСЂСѓРіРѕРј сервере, то добавьте http:// Рё полный адрес страницы РІ Рнтернете. Например, .
Второй параметр в синтаксисе метода open() определяет имя окна для использования в атрибуте target элемента A или FORM. Вы также можете указать его как пустую строку вида "". Если вам нужно, чтобы страница загружалась в маленьком окне, то данный параметр должен иметь значение joe. Необходимо будет указать joe и после атрибута target.
Параметр config показывает, что следующие атрибуты относятся к конфигурации нового окна и определяют его внешний вид.
• width – ширина окна в пикселах.
• height – высота окна в пикселах.
• toolbar – если параметр имеет значение yes или 1, окно снабжается стандартной панелью инструментов. Если же значение этого параметра равно no, то панель инструментов в новом окне не отображается.
• location – параметр определяет, будет ли отображаться поле ввода адреса HTML-документа (адресная строка).
• status – отображение строки состояния.
• menubar – отображение строки меню.
• scrollbars – отображение полос прокрутки.
• resizable – если этот параметр указан как yes или 1, пользователь сможет изменять размер вновь созданного окна.
Все атрибуты параметра config перечисляются через запятую без пробелов и заключаются в одинарные кавычки, поскольку являются подкомандами.
Примечание
Помните, что пробел для браузера означает конец команды.
Теперь рассмотрим примеры сценариев, использующих метод open() (листинги 10.7 и 10.8).
Листинг 10.7. Файл okno.html
Метод open()
Листинг 10.8. Файл okno2.html
Метод open()
Yandex
Щелкните, чтобы закрыть
Сценарий в файле okno.html открывает документ okno2. html в новом маленьком окне браузера (рис. 10.7).
Рис. 10.7. Новое окно браузера
Рто РѕРєРЅРѕ имеет размеры 300 С… 250 пикселов, РІ нем РЅРµ отображаются меню, панель инструментов, адресная строка Рё полоса прокрутки. Р—Р° это отвечают значения атрибутов параметра config, равные no. Р’ РЅРѕРІРѕРј РѕРєРЅРµ отображается только строка состояния, что определяется атрибутом status=yes. РљСЂРѕРјРµ того, пользователь может изменять размеры РЅРѕРІРѕРіРѕ РѕРєРЅР°. Р—Р° это отвечает атрибут resizable=yes.
Обратите внимание на строку window.name="main window". Здесь использовано свойство name объекта Window, а main window – это имя главного (большого) окна. Вместо window.name можно написать self.name. Результат будет тот же самый, поскольку window и self – синонимы.
Р’ РЅРѕРІРѕРµ РѕРєРЅРѕ загружается документ okno2.html, содержащий РґРІРµ ссылки. РћРґРЅР° ссылка загружает главную страницу сайта РїРѕРёСЃРєРѕРІРѕР№ системы «Яндекс» РІ большом РѕРєРЅРµ браузера, РёРјСЏ которому main window. Ртого результата РјС‹ добились благодаря команде target="main window". Если необходимо, чтобы страница загружалась РІ маленьком РѕРєРЅРµ, просто напишите j oe вместо main window. Другая ссылка позволяет закрыть маленькое РѕРєРЅРѕ благодаря обработчику события onCli ck Рё методу close(): onClick="window.close".
Совет
При открытии новых окон ставьте сценарий ближе к концу HTML-документа. Причина проста: сначала загрузится веб-страница, а потом всплывет окошко. Если команда стоит в начале HTML-документа, то окошко всплывет прежде, чем пользователь увидит вашу страницу. Он может закрыть новое окно, не успев им воспользоваться.
Рассмотрим следующий метод объекта Window – setTimeout(). С его помощью вы можете запрограммировать компьютер на выполнение определенных команд по истечении некоторого времени.
При использовании описываемого метода применяется следующий синтаксис: setTimeout ("cmd", timeout). Когда пройдет время, заданное параметром timeout (в миллисекундах), запускается команда JavaScript, определенная параметром cmd.
Пример сценария, содержащего метод setTimeout(), приведен в листинге 10.9.
Листинг 10.9. Рспользование метода setTimeout
Метод setTimeout
Данный HTML-документ содержит сценарий и форму с кнопкой Timer. При нажатии кнопки открывается окно Alert с задержкой в три секунды (рис. 10.8).
Рис. 10.8. Окно Alert с сообщением
Здесь setTimeout() – это метод объекта Window. Он определяет интервал времени в 3000 миллисекунд (3 секунды) и команду, которая должна быть выполнена по истечении этого времени. В данном случае это вызов окна с сообщением с помощью метода alert: «alert(Время истекло!)». Обратите внимание, что код на JavaScript должен быть обязательно заключен в кавычки, а время указывается в миллисекундах и без кавычек.
С помощью метода clearTimeout() можно остановить таймер, запущенный только что рассмотренным методом setTimeout(). В качестве параметра методу clearTimeout() необходимо передать идентификатор таймера, полученный от метода setTimeout():
clearTimeout(idTimer)
Методы setTimeout() и clearTimeout() применяются для периодического вызова функции сдвига сообщения в строке состояния браузера («бегущая» строка) и для ограничения времени ввода пользователем пароля в формах. Еще одно применение данного метода – создание анимационных эффектов с использованием сценариев JavaScript.
Помимо свойств и методов, с объектом Window связаны два обработчика событий – onLoad и onUnload. Первый из них срабатывает, когда браузер заканчивает загрузку окна, а второй – когда пользователь завершает работу с HTML-документом.
В своем сценарии вы можете предусмотреть обработку этих событий, назначив для каждого определенную функцию. Функция, которая вызывается при завершении загрузки документа, может выполнять какие-либо действия, создавать дополнительные окна или выводить сообщения. Обработчик события onUnload может освобождать полученные ресурсы или выводить какие-либо дополнительные сообщения при уходе пользователя с веб-страницы.
Внимание!
Как правило, вызов обработчиков событий onLoad и onUnload располагается в строке элемента BODY.
В качестве примера рассмотрим HTML-документ, который приведен в листинге 10.10.
Листинг 10.10. Рспользование обработчиков событий onLoad Рё onUnload
Обработчики событий onLoad и onUnload
Здесь в элементе BODY определены обработчики событий onLoad и onUnload. При возникновении первого события будет вызываться функция hello, при возникновении второго – функция bye.
Поскольку HTML-документ интерпретируется в направлении сверху вниз, функции hello и bye необходимо определить до появления элемента BODY. Лучшее место для определения этих функций – заголовок HTML-документа.
Ртак, РІС‹ познакомились СЃ методами, свойствами Рё событиями объекта Window, позволяющими выполнять различные действия СЃ РѕРєРЅРѕРј браузера. Теперь рассмотрим РґСЂСѓРіРѕР№ объект JavaScript, СЃ помощью которого РІС‹ можете получить некоторые данные Рѕ самом браузере, – объект Navigator.
Объект Navigator
Объект Navigator автоматически создается при открытии веб-страницы браузером и содержит общую информацию о браузере пользователя.
Примечание
Объект Navigator служит для доступа к самой программе обозревателя. Не путайте его с объектом Window, представляющим текущее окно браузера, и названием программы Netscape Navigator.
Благодаря объекту Navigator можно узнать некоторые данные Рѕ браузере Рё компьютере пользователя. Рта информация может пригодиться РїСЂРё формировании
разного стиля веб-страниц для различных браузеров.
Как Рё РґСЂСѓРіРёРµ объекты JavaScript, Navigator имеет СЃРІРѕРё свойства. Рто конкретные
строковые значения о браузере пользователя.
• appCodeName – определяет кодовое имя (платформу, «движок») браузера.
• appName – указывает имя (название) браузера, например Netscape или Internet Explorer.
• appVersion – определяет версию браузера, включая платформу, выпуск браузера и операционную систему пользователя.
• userAgent – возвращает строку, идентифицирующую браузер пользователя, то есть заголовок протокола, используемого браузером во время работы с сервером. Проще говоря, это название браузера, посылаемое серверу с помощью HTTP-протокола. Оно является комбинацией значений свойств appCodeName и appVersion.
• cookieEnabled – указывает, разрешено или нет использование cookies, позволяющих сохранять небольшие фрагменты информации на компьютере пользователя. Возвращает true, если пользователь разрешил браузеру прием cookies. Поддерживается только Internet Explorer, начиная с версии 4.0.
• browserLanguage – определяет текущий язык браузера. Поддерживается только Internet Explorer, начиная с версии 4.0.
• systemLanguage – указывает язык операционной системы по умолчанию, например ru, если используется русская версия Windows. Поддерживается только Internet Explorer, начиная с версии 4.0.
• userLanguage – определяет пользовательские настройки языка операционной системы. Поддерживается только Internet Explorer, начиная с версии 4.0.
• platform – указывает платформу операционной системы пользователя, например Win32.
• cpuClass – определяет класс (тип) центрального процессора компьютера пользователя. Например, x8 6 или Alpha. Поддерживается только Internet Explorer, начиная с версии 4.0.
Рассмотрим пример сценария, в котором определяются различные характеристики браузера (листинг 10.11).
Листинг 10.11. Определение характеристик браузера
Свойства объекта Navigator
В данном примере каждому свойству объекта Navigator назначена отдельная переменная. Благодаря команде document. write() информация о характеристиках браузера отображается на веб-странице (рис. 10.9).
Рис. 10.9. Характеристики браузера
Если какие-либо свойства объекта Navigator не определяются, значит, ваш браузер их не поддерживает.
Рассмотрим еще один пример использования свойств объекта Navigator (листинг 10.12).
Листинг 10.12. Определение имени браузера
Test of Browser name
Проверка имени браузера
Приведенный в листинге сценарий содержит условие if…else и проверяет имя браузера пользователя (рис. 10.10).
Рис. 10.10. Проверка имени браузера
Если страница открыта в Internet Explorer, то пользователь получит сообщение У вас хороший браузер (рис. 10.11).
Рис. 10.11. Окно с сообщением
Если для открытия страницы используется другой браузер, сообщение будет следующим: А чем вам не понравился Microsoft Internet Explorer?.
Ртот простейший пример показывает, как можно применять свойства объекта Navigator РїСЂРё решении задач программирования типа «Если браузер клиента такой-то, то…, иначе…».
Помимо свойств, для объекта Navigator в языке JavaScript определены свои методы.
• taintEnabled() – проверяет браузер на несовместимость с Netscape Navigator.
• javaEnabled() – проверяет, разрешено ли в браузере выполнение сценариев JavaScript.
РћР±Р° метода возвращают логические значения (true или false). РС… можно использовать для принятия каких-либо решений РІ РґСЂСѓРіРёС… сценариях.
Объект Screen
Объект Screen содержит информацию Рѕ различных параметрах экрана монитора пользователя: разрешающая способность, глубина цвета, частота обновления экрана Рё С‚.В Рї. Рти данные РјРѕРіСѓС‚ помочь разработчику подстроить интерфейс сайта РїРѕРґ конкретные параметры экрана.
Как и другие объекты, Screen имеет свои свойства.
• width – определяет полную ширину экрана монитора в пикселах.
• height – задает полную высоту экрана монитора пользователя в пикселах.
• availHeight – определяет высоту полезной области экрана монитора без Панели задач и подобных ей элементов графического интерфейса операционной системы.
• availWidth – возвращает ширину полезной области экрана монитора без Панели задач и подобных ей элементов графического интерфейса операционной системы.
• colorDepth – возвращает глубину цвета. Для 16 цветов возвращается 2, для 256 – 8, для 16,7 миллионов цветов (режим High Color) – 32.
• updateInterval – возвращает интервал времени (в миллисекундах) между обновлениями экрана. Значение 0 позволяет браузеру выбирать среднее число, что обычно работает лучше всего.
Примечание
На значения свойств объекта Screen также влияют пользовательские настройки параметров видео в Панели управления.
В следующем примере приведен сценарий, который позволит вам определить параметры экрана монитора (листинг 10.13).
Листинг 10.13. Свойства объекта Screen
Свойства объекта Screen
Результат работы сценария показан на рис. 10.12.
Рис. 10.12. Параметры экрана монитора
Размеры экрана монитора пользователя являются очень важными для разработчика. Создавая сайт РїРѕРґ разрешение монитора 1280 С… 720 пикселов, нужно помнить, что его будет очень неудобно просматривать РЅР° экране СЃ разрешением 800 С… 600. Рспользуя свойства объекта Screen, РІ сценарии JavaScript можно изменять размер веб-страниц РІ зависимости РѕС‚ разрешения экрана монитора пользователя. Если вместе СЃ этим приемом использовать сценарий для определения браузера пользователя, то ваш сайт будет прекрасно отображаться РІ РѕРєРЅРµ любого браузера РЅР° экране СЃ любым разрешением.
Объект History
Объект History является частью объекта Window. РћРЅ содержит информацию Рѕ посещенных пользователем веб-страницах Р·Р° текущий сеанс путешествия РїРѕ Сети. Рти URL-адреса можно загружать СЃРЅРѕРІР°, то есть передвигаться РїРѕ истории посещений. РћСЃРЅРѕРІРЅРѕР№ целью объекта History является доступ Рє СЃРїРёСЃРєСѓ введенных РІ браузере адресов URL.
Внимание!
Поскольку объект History является частью объекта Window, доступ к нему осуществляется именно через этот объект: window, history, length.
У объекта History всего одно свойство – length. Оно определяет количество посещенных веб-страниц за текущий сеанс работы в браузере. Сценарий из листинга 10.14 показывает, сколько страниц вы посетили за сеанс.
Листинг 10.14. Определение количества посещенных веб-страниц
Количество посещенных страниц
Данный сценарий содержит функцию hislen(), вызывающую окно Alert при нажатии кнопки формы. В окне отображается количество веб-страниц, посещенных за текущий сеанс работы с браузером. Если вы запускаете сценарий с жесткого диска, не удивляйтесь, если количество посещенных страниц будет равно нулю (рис. 10.13).
Рис. 10.13. Окно с указанием количества посещенных веб-страниц
Передвигаться по истории и загружать ранее посещенные пользователем веб-страницы позволяют следующие методы объекта History:
• go() – загружает веб-страницу с определенным номером относительно страницы, открытой в данный момент в браузере (текущая страница имеет индекс 0, предыдущая– 1, посещенная до этого страница–2 и т. д.);
• back() – загружает предыдущую веб-страницу, посещенную пользователем (эквивалентно go(-1));
• forward() – загружает следующую веб-страницу из списка истории, если таковая имеется (эквивалентно go(1)).
Например, чтобы перейти на две страницы назад, можно использовать сценарий из листинга 10.15.
Листинг 10.15. Перемещение по истории посещений
Перемещение по истории посещений
При нажатии кнопки формы (рис. 10.14) запускается функция goback(), позволяющая перейти на две страницы назад.
Рис. 10.14. Кнопка для запуска функции
Рспользуя методы объекта History, РІС‹ сможете организовать СѓРґРѕР±РЅСѓСЋ систему навигации РїРѕ сайту. Учтите, что для этого пользователь должен просматривать РІСЃРµ страницы вашего сайта РІ РѕРґРЅРѕРј РѕРєРЅРµ браузера. Как только какая-либо РёР· страниц будет открыта РІ РЅРѕРІРѕРј РѕРєРЅРµ, история посещений применительно Рє этому РѕРєРЅСѓ браузера начнется СЃ нуля.
Объект Location
Объект Location является частью объекта Window. Он содержит информацию об URL-адресе текущей страницы и его составляющих.
Рспользование объекта Location РІ сценарии JavaScript позволяет обновить текущую страницу или полностью поменять URL-адрес, то есть перейти РЅР° РґСЂСѓРіСѓСЋ веб-страницу.
Свойства объекта Location содержат различную информацию о подключении пользователя к HTTP-серверу.
• href – полный URL-адрес текущей веб-страницы.
• hash – имя «якоря» в URL-адресе веб-страницы (значение атрибута name), если он есть.
• host – часть URL-адреса страницы, содержащая РёРјСЏ сервера РІ Рнтернете Рё номер порта.
• hostname – имя сервера в Сети, с которого загружена текущая веб-страница.
• pathname – путь к файлу на веб-сервере без имени сервера и порта.
• port – сообщает номер порта HTTP-сервера, через который идет обращение к веб-странице. Если порт не указан, возвращает номер 8 0 – стандартный порт, через который работает протокол HTTP.
• protocol – протокол передачи данных (HTTP, FTP и др.). Если протокол не указан, возвращает значение http:.
• search – строка параметров для серверных сценариев, начинается со знака?.
Команды host, hostname, port, search РЅРµ работают, если просматривать страницу СЃ жесткого РґРёСЃРєР° компьютера. Результат может быть только РІ том случае, если веб-страница размещается РЅР° сервере РІ Рнтернете.
Внимание!
Поскольку объект Location является частью объекта Window, доступ к нему осуществляется именно через этот объект: window.location.property.
Рассмотрим использование свойств объекта Location на примере сценария из листинга 10.16.
Листинг 10.16. Свойство href объекта Location
URL текущего HTML-документа
Данный сценарий определяет полный URL-адрес текущего HTML-документа. При запуске сценария с жесткого диска вашего компьютера команда location. href покажет полный путь к файлу со сценарием (рис. 10.15).
Рис. 10.15. Путь к файлу со сценарием
Методы объекта Location позволяют перезагружать текущую веб-страницу или менять URL-адрес, загружать другую веб-страницу вместо предыдущей. При этом будет невозможен переход к предыдущей странице с помощью кнопки Назад в браузере пользователя. Возникает эффект, что страницы как бы подменяются друг другом.
Рассмотрим подробнее методы объекта Location.
• assign() – загружает другую страницу, меняя URL-адрес текущей веб-страницы на адрес, указанный в параметре метода.
• reload() – обновляет текущую веб-страницу (не всегда срабатывает правильно, поскольку некоторые браузеры все равно берут эту страницу из кэша, не обращаясь к серверу).
• replace() – замена текущей веб-страницы страницей, URL которой указан в параметре метода. При этом в списке истории браузера адрес предыдущего HTML-документа заменяется адресом нового.
В листинге 10.17 приведен пример сценария, содержащего один из методов объекта Location – метод replace().
Листинг 10.17. Рспользование метода replace()
Метод replace()
//РєРЅРѕРїРєР°
Сценарий позволяет изменить текущую страницу в окне браузера на главную страницу сайта . За это отвечает функция replaceDoc(), которая вызывается при нажатии кнопки Replace (рис. 10.16).
Р РёСЃ.В 10.16. РљРЅРѕРїРєР° Replace
Таким образом, объект Location позволяет не только определять адрес загруженного в браузер HTML-документа, но, что более важно, загружать в текущее окно новую вебстраницу.
Ртак, РјС‹ рассмотрели объекты браузера, РёС… свойства Рё методы. Для HTML-документа Рё его содержимого РІ языке JavaScript также определены СЃРІРѕРё объекты.
10.4. Объектная модель документа (DOM)
Стандартный набор объектов в HTML-документе, их свойства и способ доступа к ним определяется объектной моделью документа (Document Object Model, сокращенно DOM). DOM позволяет управлять всеми элементами на веб-странице, изменять их свойства и содержание, создавать новые элементы.
Объект Document
Для работы с документами HTML в языке JavaScript существует отдельный объект – Document. Пользуясь его свойствами и методами, сценарий JavaScript может получить информацию о текущем документе, загруженном в окно браузера, а также управлять отображением содержимого этого документа.
Любая веб-страница, которую вы просматриваете в окне браузера, может быть описана как набор объектов. Она включает собственно HTML-документ «в целом» и более мелкие объекты – элементы веб-страницы. Например, заголовок, абзац_1, абзац_2, абзац_3, рисунок, ссылка, форма и т. п.
HTML-документ «в целом» Рё есть объект Document. Рлементы веб-страницы называются HTML-объектами, поскольку определяются элементами языка HTML. Р’СЃРµ HTML-объекты выступают РІ качестве дочерних РїРѕ отношению Рє объекту Document. Благодаря этому РІС‹ можете обращаться Рє данным объектам РёР· сценариев JavaScript.
Совокупность описывающих веб-страницу объектов со всеми их методами и свойствами в языке JavaScript называется объектной моделью документа. Объект Document является главным в этой модели. Он содержит внутри себя множество подчиненных объектов и коллекций.
Коллекция – это массив объектов, проиндексированный не только по числовым номерам элементов, но и по их именам и имеющий свойства и методы. Коллекция отличается от обычного массива именно наличием свойств и методов. Поэтому каждая коллекция сама по себе объект и в то же время свойство объекта Document.
Рассмотрим, какие же коллекции существуют для объекта Document.
• anchors – коллекция всех локальных меток («якорей»), размещенных РІ HTML-документе. Рти метки содержатся РІ тегах и применяются для организации ссылок внутри РѕРґРЅРѕР№ веб-страницы.
• links – коллекция всех ссылок в HTML-документе, содержащихся в тегах .
• images – массив всех изображений на веб-странице.
• forms – коллекция всех форм в HTML-документе.
Благодаря этим коллекциям сценарию JavaScript доступны все локальные метки, формы, изображения и ссылки в HTML-документе как элементы соответствующих массивов.
Пример сценария, использующего одну из коллекций объекта Document, приведен в листинге 10.18.
Листинг 10.18. Рспользование коллекции anchors
Anchors
1 anchor
2 anchor
3 anchor
Количество "якорей" в этом HTML-документе:
Данный сценарий демонстрирует использование массива anchors для определения количества «якорей» в HTML-документе. Команда document. write отображает количество «якорей» на странице в числовом выражении (рис. 10.17).
Р РёСЃ.В 10.17. Рспользование коллекции anchors
Количество «якорей» подсчитывается с помощью команды document.anchors. length, где document – объект Document, anchor – массив всех «якорей» на веб-странице, а length – длина массива (то есть количество элементов в массиве).
Аналогично можно определить количество всех ссылок, изображений и форм на веб-странице. Для этого вместо коллекции anchors в строку document. anchors. length достаточно подставить названия массивов: links, images или forms.
Помимо коллекции, для объекта Document существуют свои свойства, анализируя которые, сценарий JavaScript может определить значения различных параметров веб-страницы. Рассмотрим эти свойства объекта Document.
• alinkColor – содержимое атрибута alink. Он определяет цвет ссылок, выбранных пользователем.
• linkColor – содержимое атрибута link, определяющего цвет еще не посещенных ссылок, размещенных в HTML-документе.
• vlinkColor – содержимое атрибута vlink. Он задает цвет уже посещенных ранее ссылок, размещенных в HTML-документе.
• bgColor – содержимое атрибута bgcolor. Применяется для создания цветного фона HTML-документа. Цвет задается либо в шестнадцатеричном виде (например, #F0F8FF), либо в виде названий цветов (например, red или white).
• fgColor – содержимое атрибута text, определяющего цвет текста. Задается таким же образом, что и цвет фона веб-страницы bgcolor.
• lastModified – дата последнего изменения HTML-документа.
• location – полный URL-адрес текущей веб-страницы.
• referrer – URL-адрес страницы, с которой была открыта данная веб-страница.
• title – заголовок документа, заданный с помощью элемента TITLE.
• URL – полный URL-адрес HTML-документа.
Многие из перечисленных свойств объекта Document позволяют динамически изменять значения HTML-элементов, расположенных в блоке BODY. Например, фоновый цвет страницы, цвет ссылок, содержание заголовка документа.
Большинство свойств объекта Document доступно сценарию JavaScript как для чтения, так и для записи. Следующий пример демонстрирует, как с помощью сценария JavaScript изменить свойства HTML-документа: цвет фона и текста, а также цвета посещенных, непосещенных и выбранных пользователем ссылок (листинг 10.19).
Листинг 10.19. Свойства объекта Document
Свойства объекта Document
Рзменение цветового оформления страницы
Щелкните по этим ссылкам:
Yandex
Бесплатная электронная почта
Сервер Microsoft
Результат работы сценария показан на рис. 10.18.
Р РёСЃ.В 10.18. Рзменение цвета фона, текста Рё ссылок
Обратите внимание, что данный сценарий переопределяет цвет фона веб-страницы, заданный параметром bgcolor=white в элементе BODY: document. bgColor = «#00FF80».
Рассмотрим еще один пример сценария, в котором используется свойство lastModified объекта Document (листинг 10.20).
Листинг 10.20. Рспользование свойства lastModified
Свойство lastModified
Свойство lastModified позволяет узнать дату внесения последних изменений в содержание HTML-документа. В сценарии это реализовано в команде document.lastModified. Строка document. write() помещает полученную дату на веб-страницу (рис. 10.19).
Р РёСЃ.В 10.19. Рспользование свойства lastModified
Во многих рассмотренных ранее примерах сценариев JavaScript вам не раз встречалась строка document. write(). Write() – это метод объекта Document, позволяющий отображать какую-либо информацию на веб-странице. Кроме этого широко используемого метода, сценарии JavaScript могут вызывать и другие методы, определенные для объекта Document.
• close() – заставляет веб-страницу немедленно обновить свое содержимое после использования метода write(). Метод close() не имеет параметров и не возвращает значения. Поддерживается Internet Explorer, начиная с версии 4.0.
• getElementsByName({имя_элемента}) – возвращает элемент, специфическое имя которого передано в качестве параметра. Данный метод поддерживается браузером Internet Explorer, начиная с версии 5.0.
• getElementByld ({ID}) – возвращает элемент, РёРјСЏ которого передано РІ качестве параметра. РРјСЏ элемента страницы задается атрибутом ID. Метод getElementById() имеет единственный параметр – РёРјСЏ элемента страницы. Поддерживается браузером Internet Explorer, начиная СЃ версии 5.0.
• getElementsByTagName({РРјСЏ тега}) – возвращает тег, РёРјСЏ которого передано РІ качестве параметра. Поддерживается браузером Internet Explorer, начиная СЃ версии 5.0.
• write() – записывает текст или HTML-код в текущее место документа.
В браузере Microsoft Internet Explorer версии 5.0 появилась поддержка таких методов объекта Document, как getElementById(), getElementsByName() и getElementsByTagName(). Последний используется в сценариях JavaScript особенно часто. Рассмотрим пример такого сценария (листинг 10.21).
Листинг 10.21. Рспользование метода getElementsByTagNameO
Метод getElementsByTagName()
Данный сценарий содержит функцию getElements(), которая производит подсчет всех элементов типа INPUT на веб-странице, а затем выводит результат в окне Alert (рис. 10.20).
Рис. 10.20. Окно с количеством элементов
Функция срабатывает при нажатии кнопки в форме. Как видите, в этом HTML-документе содержится четыре элемента, обозначенные элементом INPUT: три поля для ввода и кнопка (рис. 10.21).
Р РёСЃ.В 10.21. Рлементы INPUT
Ртак, РјС‹ рассмотрели РѕРґРёРЅ РёР· главных объектов РІ языке JavaScript – объект Document, представляющий СЃРѕР±РѕР№ веб-страницу, загруженную РІ РѕРєРЅРѕ браузера. Благодаря определенным свойствам Рё методам через объект Document можно получить доступ Рє любым РґСЂСѓРіРёРј объектам, расположенным РЅР° веб-странице.
Доступ к объектам документа
Сценарии JavaScript очень часто применяются для создания динамических вебстраниц, способных получать и обрабатывать произвольную информацию. Для этого необходимо организовать доступ сценария к определенным элементам веб-страницы.
Доступ к различным объектам HTML-документа в языке JavaScript организован в строгом соответствии с иерархией объектов. Каждый объект иерархической структуры имеет свое имя.
Например, РЅР° веб-странице может находиться несколько изображений СЃ именами img1, img2 Рё img3. Если РІС‹ хотите обратиться Рє первому СЂРёСЃСѓРЅРєСѓ, то должны сориентироваться РІ иерархии объектов Рё начать СЃ самой ее вершины. Главный объект РЅР° веб-странице называется Document. Р’СЃРµ изображения РЅР° странице представлены как коллекция images. Причем первый СЂРёСЃСѓРЅРѕРє всегда обозначается как images [0], второй как images [1], третий как images [2] Рё С‚.В Рґ. Рными словами, отсчет объектов РІ коллекции начинается РЅРµ СЃ единицы, Р° СЃ нуля.
Таким образом, вы можете получить доступ к первому изображению img1, записав в сценарии JavaScript document.images[0]. Чтобы получить доступ ко второму изображению img2, запишите в сценарии строку document. images [1]. Соответственно для получения доступа к третьему изображению img3 на веб-странице используйте конструкцию document.images[2].
Примечание
Как видите, номер изображения на веб-странице и номер изображения в коллекции отличаются на единицу.
Тот же принцип действует по отношению к ссылкам и формам. Если вы хотите получить доступ к какому-либо элементу формы, снова необходимо начать с вершины иерархии объектов. Затем прослеживаете путь к объекту и последовательно записываете названия всех объектов, которые минуете.
Например, чтобы узнать, какой текст ввел посетитель вашей веб-страницы в поле формы, необходимо обратиться к значению (value) данного поля. Для этого в сценарии JavaScript можно записать строку name= document. forms [0]. elements [0]. value. Полученная строка заносится в переменную name. Ртеперь вы можете работать с этой переменной, используя ее в других строках сценария JavaScript.
Однако, если вы создаете сложную веб-страницу, процедура адресации к различным объектам по номеру становится весьма затруднительной. Например, довольно неудобно обращаться к объекту через строку document. forms [4]. elements [15]. Можно запутаться в количестве объектов на странице и неправильно указать номер нужного объекта.
Во избежание подобной проблемы в JavaScript можно не только пользоваться существующими коллекциями объекта Document, но и самим присваивать различным объектам уникальные имена. Например, форме на вашей веб-странице можно присвоить имя myform с помощью оператора name:
В данном HTML-документе расположена форма с полями ввода и кнопкой (рис. 10.22). При ее нажатии обработчик событий onClick запускает функцию doit(), обрабатывающую данные, введенные пользователем в поля формы.
Р РёСЃ.В 10.22. Рлементы формы
Доступ к объектам формы в данном сценарии организован путем присвоения каждому объекту формы уникального имени и перечисления всех объектов в соответствии с их иерархией в документе.
Самой форме присвоено имя aform. Каждому полю ввода также присвоены уникальные имена: geometr, color, prichina. Введенные пользователем данные передаются в функцию как значение value. В соответствии с иерархией объектов на первом месте стоит объект Document, далее идет форма, затем поле формы и, наконец, значение поля – текст, введенный пользователем.
В сценарии эта цепочка объектов выглядит следующим образом: document. aform.geometr.value. Таким образом, функция doit() получает данные пользователя из значения value поля geometr формы aform в HTML-документе document. Аналогично происходит передача данных в функцию из других полей формы.
Данные, полученные от формы, отображаются функцией в окне Alert (рис. 10.23).
Рис. 10.23. Результат работы сценария
Рассмотрим еще один пример сценария JavaScript (листинг 10.23).
Листинг 10.23. Смена изображений на веб-странице
Смена картинок через массив
Просмотр фотографий
РџСЂРёСЂРѕРґР°
|
|
Данный сценарий позволяет просматривать различные фотографии природы на веб-странице (рис. 10.24).
Рис. 10.24. Просмотр фотографий на странице
В HTML-документе размещена таблица с двумя столбцами. В первом столбце находятся ссылки на изображения, которые загружаются во второй столбец. Без сценария JavaScript реализация такой задачи практически невозможна.
Сам сценарий находится в заголовке HEAD HTML-документа. Он содержит функцию myimage(pic), которой передаются названия рисунков. В функции определена строка, ответственная за смену изображений: document. images [0]. src=pic. Как видите, в данной строке указаны объект Document, массив изображений на странице (images [0]) и источник изображений (src). В массиве определен индекс [0], поскольку в веб-странице отображается только одна картинка. Как вы помните, нулевой индекс в коллекции соответствует первому изображению в HTML-документе.
Рзначально РЅР° странице отображается картинка d.jpg. Рто определено РІ строке . РџСЂРё щелчке РєРЅРѕРїРєРѕР№ мыши РЅР° ссылке СЃ названием картинки запускается сценарий: . Фотографии сменяют РґСЂСѓРі РґСЂСѓРіР° благодаря тому, что название изображения РёР· СЃРєРѕР±РѕРє передается РІ строку document.images [0].src=pic. Значение pic заменяется названием фотографии РёР· выбранной ссылки, например 'a.jpg'. РџСЂРё выборе следующей ссылки значение pic опять заменяется названием фотографии, Р° точнее именем файла СЃ изображением.
РЎ помощью данного сценария можно организовать удобный просмотр фотографий РІ РѕРґРЅРѕРј РѕРєРЅРµ браузера РЅР° РѕРґРЅРѕР№ веб-странице. Ртот прием довольно часто используется РІ фотогалереях Рё интернет-магазинах.
Ртак, РјС‹ рассмотрели объекты HTML-документа. Рто сама веб-страница Рё расположенные РЅР° ней элементы. Р’СЃРµ РѕРЅРё обладают СЃРІРѕРёРјРё свойствами. Рљ каждому РёР· РЅРёС… можно применить определенные действия, или методы. Рти методы позволяют управлять содержимым веб-страницы Рё динамически его изменять.
Резюме
В этой главе вы познакомились с фундаментальными понятиями языка JavaScript – объектами, свойствами и методами. Теперь вы сможете использовать в сценариях различные элементы окна браузера и веб-страницы, изменять их свойства и управлять ими с помощью JavaScript. Помните, что все эти элементы являются объектами. Правильное применение их свойств и методов позволит вам стать профессиональным веб-разработчиком.
Глава 11
Основы языка JavaScript
11.1. Работа с информацией
11.2. Переменные и типы данных
11.3. Выражения
11.4. Условия и циклы
11.5. Функции и события
11.6. Встроенные объекты JavaScript
Рта глава является незаменимой для новичков, так как РІ ней разъясняются основные элементы языка JavaScript: переменные, типы данных, выражения, различные операторы, функции Рё С‚.В Рґ. Рти знания являются базовыми – без РЅРёС… невозможно понимание остального материала РєРЅРёРіРё.
11.1. Работа с информацией
Любая программа или сценарий работают с информацией, то есть получают некие данные, обрабатывают их согласно своему алгоритму, а затем обычно возвращают результат в виде изображения на экране или бумаге, звука, файла, сигнала другой программе и т. д.
Серверные программы получают данные либо от пользователя, например через формы, либо из баз данных. При этом в качестве обрабатываемой информации могут выступать абсолютно любые данные: опросы, регистрационные данные, фотографии, почта, статистические данные.
Клиентские сценарии часто выступают буфером между пользователем и серверной программой, осуществляя предварительную обработку и верификацию данных. Следовательно, они работают с теми же данными.
Клиентские сценарии могут получать информацию различными способами, которые описаны ниже.
• Рнформация может быть заложена РІ сценарий разработчиком. Обычно это некие начальные значения.
• Рнформация может передаваться РѕС‚ пользователя СЃ помощью форм.
• Передача через URL.
• Получение информации обработкой событий, например после перемещения указателя мыши, щелчка кнопкой мыши, нажатия клавиш.
• Получение данных с других сайтов или передача серверной программой.
Для знакомства с вводом/выводом информации в JavaScript понадобятся три метода: alert(), prompt() и confirm().
Рти методы генерируют различные РѕРєРЅР° сообщений.
Примечание
В действительности методы alert(), prompt() и confirm() являются методами объекта Window в браузере.
Метод alert()
Метод alert() отображает окно предупреждения с соответствующим сообщением. После прочтения сообщения пользователю необходимо нажать кнопку OK, чтобы закрыть окно. Аргументом данного метода является строка.
Примечание
О типах данных в JavaScript, в том числе и о строках, будет рассказано далее в этой главе.
В простейшем случае текст предупреждения, заключенный в кавычки, вводится внутри круглых скобок (листинг 11.1).
Листинг 11.1. Работа с предупреждением
Работа с предупреждением
Окно предупреждения генерируется самим браузером, поэтому внешний вид окна в разных браузерах может различаться. На рис. 11.1, 11.2 и 11.3 представлен вид окна, сгенерированного в трех популярных браузерах с помощью описанного кода.
Рис. 11.1. Окно предупреждений в браузере Internet Explorer
Рис. 11.2. Окно предупреждений в браузере Mozilla Firefox
Рис. 11.3. Окно предупреждений в браузере Opera
Метод prompt()
Метод prompt() имеет противоположное предназначение. Он служит для получения данных от пользователя (листинг 11.2). При его вызове отображается окно приглашения с текстовым полем. Метод может содержать два аргумента. Оба этих аргумента должны быть строками. Первый аргумент – сообщение, которое отображается в окне. Второй аргумент – это текст по умолчанию, который должен появиться в соответствующем поле. Кроме того, этот метод, в свою очередь, возвращает значение, которое также является строкой, – это текст, который ввел пользователь.
Листинг 11.2. Работа с запросом
Работа с запросом
После запуска страницы с вышеприведенным кодом появится запрос (рис. 11.4), вслед за которым отобразится предупреждение.
Рис. 11.4. Работа с запросом
В этом примере для демонстрации работы метода prompt() использована переменная, а в методе alert() в качестве аргумента выступает выражение. Данные понятия будут введены далее в этой главе.
Примечание
В методе prompt() можно опустить второй аргумент, то есть указывать только одну строку. В этом случае различные браузеры по-разному реагируют: строка запроса может быть пустой, а может отображать ключевое слово undefined (не определено).
Метод confirm()
Метод confirm() отображает окно подтверждения, которое сходно с окном предупреждения, генерируемым методом alert(), но содержит две кнопки: OK и Cancel. В листинге 11.3 демонстрируется создание окна подтверждения, но в этом сценарии не делается разницы между кнопками OK и Cancel. Нажатие любой из кнопок просто закроет окно (рис. 11.5).
Рис. 11.5. Работа с подтверждением
Листинг 11.3. Работа с подтверждением
Работа с подтверждением
После прочтения данной главы вы научитесь использовать этот метод, чтобы сценарий по-разному реагировал на нажатие кнопок OK и Cancel.
11.2. Переменные и типы данных
Р’Рѕ время интерпретации сценария браузер разбивает РєРѕРґ РЅР° отдельные слова, фразы или символы, которые умеет распознавать. Рти элементы называются лексемами. Р’ языке JavaScript лексемы делятся РЅР° четыре типа: идентификаторы, ключевые слова, литералы Рё операции.
Рдентификаторы
Рдентификаторами называются имена, которые обозначают переменные, функции Рё объекты. Некоторые имена являются ключевыми или зарезервированными Рё РЅРµ РјРѕРіСѓС‚ использоваться РІ качестве идентификатора, так как имеют особый смысл. Рћ РЅРёС… будет рассказано далее.
Рдентификаторы образуются СЃ помощью комбинации различных символов, однако РїСЂРё этом накладываются некоторые ограничения.
• Все идентификаторы должны начинаться с буквы.
• После первой буквы остальными символами могут быть буквы и цифры.
• Буквами считаются заглавные и строчные буквы латинского алфавита: от A до Z и от a до z.
• Символ подчеркивания (_) выступает в качестве буквы и часто используется вместо пробела, который нельзя применять в идентификаторах.
• Символ доллара ($) выступает в качестве буквы и обычно используется при автоматической генерации кода.
• Можно использовать в качестве букв символы Unicode, однако старые версии браузеров не умеют работать с Unicode.
• Цифрами считаются символы от 0 до 9.
Совет
Не следует использовать в одном сценарии идентификаторы, отличающиеся только символами верхнего и нижнего регистра, например flagld и FlagID, так как это будут различные идентификаторы, которые могут вызвать трудноуловимые ошибки.
В табл. 11.1 приведены примеры допустимых и недопустимых идентификаторов.
Таблица 11.1. Примеры идентификаторов JavaScript
Обратите внимание, что идентификатор new хотя и содержит разрешенные символы, но относится к числу ключевых слов, поэтому не может выступать в качестве пользовательского идентификатора.
Ключевые и зарезервированные слова
Рљ ключевым словам относятся предопределенные идентификаторы, которые образуют СЏРґСЂРѕ языка JavaScript. Рти слова имеют особый смысл Рё выполняют определенные функции. Ключевые слова РЅРµ РјРѕРіСѓС‚ использоваться для пользовательских идентификаторов. Р’ табл. 11.2 представлен СЃРїРёСЃРѕРє ключевых слов JavaScript.
Таблица 11.2. Ключевые слова JavaScript
Зарезервированные слова не рекомендуется использовать в качестве пользовательских идентификаторов, так как в последующем планируется использовать их в качестве ключевых слов. Список зарезервированных слов приведен в табл. 11.3.
Таблица 11.3. Зарезервированные слова JavaScript
Совет
Конечно, вы можете использовать зарезервированные слова для своих идентификаторов, но это не гарантирует работоспособности ваших сценариев в будущем, когда зарезервированные слова могут перейти в состав ключевых.
Литералы
Литералы – это числа или строки, которые применяются для представления значений в JavaScript. Поскольку информация может быть разнообразной, то значения могут быть различных видов. Простейшие типы данных в JavaScript называют основными типами данных: числа, строки и логические значения.
Числа
В языке JavaScript различают два типа чисел: целые числа и числа с плавающей точкой.
Целочисленные величины могут быть положительными, например 1, 2, 3, и отрицательными, например -1, -2, -3. К целочисленным величинам также относится нуль – 0. Кроме того, целочисленные величины могут быть выражены в десятичной, восьмеричной или шестнадцатеричной системах счисления.
Числа в десятичном формате могут включать любую последовательность цифр от 0 до 9, которая не начинается с нуля.
Числа в восьмеричном формате могут включать любую последовательность цифр от 0 до 7, которая обязательно начинается с нуля.
Числа в шестнадцатеричном формате могут включать любую последовательность цифр от 0 до 9 и буквы от a до f, которая обязательно начинается с 0x.
В табл. 11.4 рассмотрены примеры представления целых чисел в различных форматах.
Таблица 11.4. Примеры целых чисел
Совет
Будьте внимательны с использованием восьмеричного формата, так как обычно браузеры интерпретируют числа как десятичные, даже если они начинаются с нуля, если в их составе есть цифры 8 или 9. Например, число 076 – это 62, а 078 – это 78.
Числа СЃ плавающей точкой определяют десятичные числа СЃ РґСЂРѕР±РЅРѕР№ частью. Рти числа РјРѕРіСѓС‚ быть выражены РІ обычном или экспоненциальном РІРёРґРµ. Р’ последнем случае для представления РїРѕСЂСЏРґРєР° используется СЃРёРјРІРѕР» e или E. Рдесятичная мантисса, Рё РїРѕСЂСЏРґРѕРє РјРѕРіСѓС‚ быть положительными или отрицательными. Ниже показаны примеры чисел СЃ плавающей точкой:
1,4142135623730950488016887242097
–35.0
4567.0002
3.4e100
–5.456e–3
0.007
Внимание!
Число, начинающееся с нескольких нулей и содержащее десятичную точку, например 000.45, расценивается некоторыми браузерами как ошибка.
Примечание
Числа с плавающей точкой могут быть очень большими и очень маленькими: от 10 -323 до 10 308 .
Логические величины
В языке JavaScript есть поддержка логических типов данных, которые могут принимать лишь два значения: true (истина) и false (ложь). Логические (булевые) величины необходимы для работы с условиями, с которыми вы познакомитесь дальше в этой главе.
Внимание!
Ключевые слова true и false обязательно должны вводиться буквами нижнего регистра.
Строки
Наверное, наиболее часто используемым типом данных РІ JavaScript является строка. Строка – это набор символов, возможно пустой, заключенный РІ одинарные или двойные кавычки. Рспользование РґРІСѓС… типов кавычек введено потому, что строка может содержать Рё кавычки какого-либо РІРёРґР°. Далее представлены примеры строковых литералов:
«Строка текста»
"Р РѕСЃСЃРёСЏ!"
"4567"
""
'Операционные системы'
'Льюис Кэрролл "Алиса в стране чудес"'
Специальные символы
РРЅРѕРіРґР° может возникнуть необходимость дать компьютеру команду РЅР° использование специальных символов, например табуляции или перевода строки. Чтобы ввести РІ строку любой Unicode-СЃРёРјРІРѕР», нужно указать его РєРѕРґ после \u РІ РІРёРґРµ \uXXXX. Р’ табл. 11.5 представлены наиболее часто используемые управляющие символы.
Таблица 11.5. Управляющие символы
Часто управляющие символы используются для выравнивания данных (листинг 11.4).
Листинг 11.4. Выравнивание с помощью управляющих символов
Выравнивание с помощью управляющих символов
Поскольку окно, создаваемое методом alert(), зависит от браузера, то и выравнивание в различных браузерах происходит по-разному. На рис. 11.6 показан результат выполнения вышеприведенного кода, адаптированного к браузеру Internet Explorer.
Рис. 11.6. Выравнивание с помощью управляющих символов
Специальные типы данных
Помимо чисел, строк и логических величин, существует еще два типа данных: функции и объекты. Функции могут быть встроенными, например alert(), а могут быть созданы разработчиком. Кроме того, функции могут принадлежать объекту, тогда они называются методами. Объекты также могут быть встроенными, например document, а могут быть созданы программистом. Считается, что значение null является объектом.
Если браузер не может определить тип данных, то он присваивает им значение undefined (неопределяемый).
Переменные
Переменная – это имя, присваиваемое ячейке памяти компьютера, которая хранит определенные данные во время работы сценария. Переменные есть в каждом языке программирования, даже в низкоуровневом языке Ассемблер. Они облегчают программисту работу по манипулированию с данными.
РРјСЏ переменной является идентификатором, поэтому подчиняется тем же правилам.
Объявление переменных
Объявление переменной означает, что вы даете команду зарезервировать место для хранения данных, при этом указанный идентификатор будет использоваться в качестве имени переменной. Чтобы объявить переменную, надо после ключевого слова var указать ее идентификатор. Можно сразу объявить несколько переменных, задав их имена через запятую.
Рассмотрим примеры объявлений переменных:
var myData1;
var x,y,z;
var k, msg1, msg2, IM;
В процессе объявления переменную можно проинициализировать, то есть установить для нее начальное значение:
var myStr="Здравствуйте, ";
var k=1000, x=12, y=-5;
var s=1.34e–5, msg11="Error", Flag=false;
Пока переменная не получит значение, она не определена – undefined. Чтобы определить тип переменной, можно использовать операцию typeof, которая возвращает строку с типом переменной (листинг 11.5).
Листинг 11.5. Типы данных
Типы данных
Типы данных
В вышеприведенном коде для вывода информации используется метод document. write(), который позволяет дописывать строку текста прямо в страницу (рис. 11.7).
Рис. 11.7. Типы данных
Для вывода текста, значений переменных и их типа аргументом данного метода выступает довольно сложное выражение. Более подробно выражения будут рассмотрены далее в этой главе.
Совет
Язык JavaScript относится к числу языков, слабо контролирующих типы данных, поэтому одна переменная может в ходе работы сценария принимать значения различных типов. Однако такого следует избегать, так как это может привести к трудноуловимым ошибкам и усложнить понимание кода.
Область действия переменных
Переменные могут быть глобальными и локальными. Понятие области действия переменных тесно связано с функциями, которые являются отдельными блоками кода. Переменная, объявленная внутри функции, является локальной, и только эта функция имеет доступ к ее значению. Локальные переменные создаются и уничтожаются вместе с соответствующей функцией. Глобальные переменные должны объявляться вне функций. Такие переменные позволяют функциям обмениваться данными.
Массивы
Массив – это особая переменная, позволяющая хранить сразу несколько значений. Обычно эти значения связаны между собой, например массив может содержать названия месяцев. Массивы могут существенно упростить код и при использовании циклов снизить трудоемкость разработки сценария.
Рассмотрим пример объявления и задания значений элементов массива (листинг 11.6).
Листинг 11.6. Работа с массивом
Работа с массивом
Обратите внимание, что при объявлении массива количество элементов указывается в круглых скобках, а при обращении к элементу его индекс указывается в квадратных скобках. Кроме того, в языке JavaScript нумерация элементов массива начинается с нуля, поэтому первый элемент массива – stars[0].
Язык JavaScript позволяет не перечислять все элементы по одному, а сразу вывести все элементы массива. Для этого необходимо обратиться к самому массиву, в результате чего получится строка, в которой все элементы массива перечислены через запятую (рис. 11.8).
Рис. 11.8. Вывод всех элементов массива
Значения элементов массива можно задать при его объявлении, тогда не нужно указывать количество элементов в массиве (листинг 11.7).
Листинг 11.7. Рнициализация массива
Рнициализация массива
Размерность массива можно не указывать, так как язык JavaScript этого не требует. Таким образом, можно постепенно расширять массив по мере добавления данных. Более того, можно объявить элемент с индексом n, что увеличит длину массива до n+1. Узнать длину массива можно с помощью свойства length (листинг 11.8).
Листинг 11.8. Размер массива
Размер массива
Несмотря на то что фактически элементов в массиве шесть, длина массива равна 100 (рис. 11.9).
Рис. 11.9. Размер массива
11.3. Выражения
Выражения являются комбинациями операндов с помощью операций. Обычно в качестве операндов выступают значения и переменные, но могут выступать и другие выражения. Например, выражение 4 + 6 складывает два значения, в результате чего получается значение 10. А выражение q=5 присваивает переменной q значение 5. Если манипуляции производятся с одной величиной, то операция называется унарной, а если с двумя, то бинарной. Рассмотрим операции в JavaScript.
Операции присвоения
Одной из часто используемых операций является операция присвоения. В простейшем случае эта операция присваивает значение переменной:
a=7
Она может одновременно использоваться для нескольких переменных:
msg1=msg2="Привет"
Остальные операции присваивания являются комбинацией операции присваивания и арифметической или поразрядной операции (табл. 11.6 и 11.7).
Таблица 11.6. Комбинация с арифметическими операциями
Таблица 11.7. Комбинация с поразрядными операциями
Арифметические операции
Для работы с числами используют арифметические операции.
• Сложение – знак плюс (+). Например, 5 + 7 = 12.
• Вычитание – знак минус (-). Например, 67 – 43 = 24.
• Умножение – звездочка (*). Например, 2 * 2 = 4.
• Деление – косая черта (/). Например, 45 / 5 = 9.
• Остаток от деления – процент (%). Например, 7 % 5 = 2.
В программировании очень часто встречаются операции увеличения или уменьшения переменной на единицу, которые называются операциями инкремента и декремента. Для обозначения инкремента используется последовательность ++, а для обозначения декремента – последовательность —. Например, i++ является альтернативой выражению i=i + 1. Различают префиксную и постфиксную форму этих операций. В случае префиксной операции сначала выполняется инкремент или декремент, а затем вычисляется выражение:
i = 4
++i * 2 = 10
Если же используется постфиксная операция, то сначала вычисляется выражение, а затем производится увеличение или уменьшение переменной:
i = 4
i++ * 2 = 8
Помимо инкремента и декремента, есть еще две унарные арифметические операции: унарный плюс и унарный минус. Унарный минус изменяет знак числа, а унарный плюс преобразует операнд в число.
В листинге 11.9 демонстрируется работа с арифметическими операциями.
Листинг 11.9. Арифметические операции
Арифметические операции
Арифметические операции
Р’ этом примере можно заметить, что арифметические операции подчиняются математическим правилам. Например, умножение совершается РґРѕ сложения (СЂРёСЃ.В 11.10). Рто выполняется Р·Р° счет приоритета операций, который можно изменить, используя СЃРєРѕР±РєРё.
Рис. 11.10. Арифметические операции
Операции сравнения
Операции сравнения используются для сопоставления операндов. В этих операциях операндами могут быть не только числа, но и строки, логические величины и объекты. В табл. 11.8 приведены все операции сравнения.
Таблица 11.8. Операции сравнения
В листинге 11.10 показана работа с операциями сравнения.
Листинг 11.10. Операции сравнения
Операции сравнения
Операции сравнения
В приведенном коде сравниваются переменные i = 5 и m2 = "5". Они считаются равными, но не идентичными (рис. 11.11).
Рис. 11.11. Операции сравнения
Операции над строками
Как уже говорилось, строки можно сравнивать. Кроме того, строки можно объединять с помощью операции конкатенации (+), что мы уже не раз делали. Например:
S1="Здравствуй";
S2=",";
S3="РњРёСЂ!";
S=S1+S2+" "+S3;
В итоге переменная S будет содержать строку «Здравствуй, Мир!».
Благодаря автоматическому приведению типов можно объединять числа и строки:
«год „+1984=“год 1984»
Логические операции
Логические операции позволяют комбинировать выражения, возвращающие логические величины. Язык JavaScript поддерживает три логические операции.
Операция логического Р(&&) возвращает true, если только оба операнда истинны. Например, (1<7)&&(3>2). При этом сначала вычисляется левый операнд. Если он ложен, то второй операнд не вычисляется, что надо учитывать. Так, в строке (3<1)&&(i++<7) операция инкремента переменной i не произойдет.
Операция логического РЛР(||) возвращает true, если хотя Р±С‹ РѕРґРёРЅ операнд истинен. Например, (2<3) || (1>2). РџСЂРё этом сначала вычисляется левый операнд. Если РѕРЅ истинен, то второй операнд РЅРµ вычисляется.
Операция логического НЕ (!) является унарной и изменяет значение логической величины на обратное.
Условные операции
В JavaScript есть одна тернарная операция?:, которая позволяет присвоить значение переменной в зависимости от выполнения условия. Рассмотрим следующий пример:
var sign = (a>=0) ? «Положительное»: «Отрицательное»;
В зависимости от результата выражения до вопросительного знака переменная принимает одно из значений: если значение истинно, то вычисляется выражение до двоеточия, если ложно, то выражение, стоящее после двоеточия. В данном случае, если переменная a больше или равна 0, переменная sign принимает значение «Положительное», иначе переменная sign принимает значение «Отрицательное».
Поразрядные операции
Очень редко в сценариях JavaScript используются поразрядные операции, позволяющие манипулировать числами на уровне битов. Различают поразрядные логические операции и поразрядные операции сдвига. Для хранения целочисленных значений в JavaScript выделяется 32 бита. Для демонстрации работы поразрядных операций лучше использовать двоичную систему (табл. 11.9 и 11.10).
Таблица 11.9. Поразрядные логические операции
Таблица 11.10. Поразрядные операции сдвига
Другие операции
Вы уже встречались с операцией typeof, которая возвращает строку с именем типа данных. В табл. 11.11 приведены результаты, возвращаемые этой операцией.
Таблица 11.11. Результаты работы операции typeof
Кроме того, существуют операции, позволяющие обратиться к элементу какой-то структуры данных. При работе с элементами массива используется операция индексирования массива [], позволяющая обратиться к элементу массива:
myArray[5]=56
Для доступа к элементу объекта используется точка (.):
РмяОбъекта.имяСвойства
11.4. Условия и циклы
Редко какая-либо программа или сценарий имеют линейный алгоритм. Обычно в ходе работы часто проверяются различные условия и в зависимости от результата принимаются какие-то решения. Для автоматизации работы в коде также используются циклы, которые позволяют намного снизить трудоемкость разработки.
Условные операторы
В процессе создания сценариев обычно требуется изменить порядок выполнения кода. В этом разделе рассматриваются механизмы ветвления, позволяющие выбирать одно из альтернативных действий в зависимости от условия.
Оператор if
Оператор if управляет последовательностью выполнения команд. Синтаксис этого оператора:
if (логическое выражение)
{
операторы
}
Сначала вычисляется логическое выражение, затем, если оно равно true, выполняются операторы, если же оно равно false, то операторы пропускаются и продолжается выполнение сценария.
Рассмотрим пример. Допустим, функция f(x) определяется следующим образом:
Для нахождения значения этой функции на определенной точке можно воспользоваться кодом, приведенным в листинге 11.11.
Листинг 11.11. Пример работы оператора if
Пример работы оператора if
С помощью этого кода можно легко найти значение данной функции в любой точке (рис. 11.12).
Рис. 11.12. Определение значения функции с помощью оператора if
Оператор if..else
Часто удобно использовать полную форму условного оператора if..else. С его помощью можно задать действия, которые необходимо выполнить, если логическое выражение равно false:
if (логическое выражение)
{
операторы1
}
else
{
операторы2
}
Более того, можно совместить else с другим оператором if. В этом случае можно рассмотреть несколько альтернативных вариантов и выполнить соответствующие операторы:
if (логическое выражение1)
{
операторы1
}
else if (логическое выражение2)
{
операторы2
}
else
{
операторы3
}
Теперь перепишем предыдущий сценарий для определения функции с помощью оператора if..else (листинг 11.12).
Листинг 11.12. Пример работы оператора if..else
Пример работы оператора if..else
Как видно из данного кода, фигурные скобки необязательны, если выполняется только один оператор. Однако рекомендуется всегда использовать их для облегчения чтения кода. Обратите внимание, что в целях оптимизации второй проверкой проверяется условие x>5.
Оператор switch
Оператор switch позволяет сравнить значение СЃ множеством РґСЂСѓРіРёС…. Ртого же эффекта можно достичь СЃ помощью нескольких операторов if, РЅРѕ оператор switch позволяет создавать наглядный Рё краткий РєРѕРґ. Ртот оператор дает возможность предусмотреть операторы РїРѕ умолчанию, которые выполняются, если РЅРµ найдено РЅРё РѕРґРЅРѕ соответствие:
switch (выражение)
{
case значение1:
операторы
case значение2:
операторы
..
default:
операторы
}
Допустим, необходимо, чтобы сценарий переводил названия животных с английского языка на русский (листинг 11.13).
Листинг 11.13. Пример работы оператора switch
Пример работы оператора switch
Ртот РєРѕРґ позволяет получить перевод названия РѕРґРЅРѕРіРѕ РёР· трех животных (СЂРёСЃ.В 11.13).
Рис. 11.13. Пример работы оператора switch
Обратите внимание на оператор break, который позволяет закончить работу оператора switch, так как иначе будет выполняться оставшийся код в операторе switch.
Операторы цикла
Для многократного выполнения кода используют операторы цикла. Кроме того, циклы предоставляют удобные средства для манипулирования массивами.
Цикл for
Оператор for служит для создания цикла. Он имеет следующий синтаксис:
for (выражение инициализации; выражение условия; выражение цикла)
{
операторы
}
Выражение инициализации обычно служит для задания начального значения счетчика цикла. Выражение условия позволяет прекратить выполнять цикл, когда условие перестанет выполняться, то есть примет значение false. Выражение цикла обычно осуществляет инкремент или декремент счетчика цикла. Любое из этих выражений может быть пропущено, но соответствующая точка с запятой должна стоять.
В листинге 11.14 представлен код, позволяющий найти факториал числа – n!=1*2*3*..*n.
Листинг 11.14. Факториал с помощью оператора for
Факториал с помощью оператора for
В этом коде организуется цикл от 1 до x, при этом для простоты введенное значение не проверяется на допустимость, поэтому можно, например, получить значение Infinity (бесконечность) при большом значении x.
Цикл while
Оператор while сходен с оператором for, но он не производит инициализацию и инкремент счетчика в своем объявлении. Синтаксис этого оператора следующий:
while (выражение условия)
{
операторы
}
Если выражение условия в цикле while сразу ложно, то операторы не выполнятся ни разу.
В листинге 11.15 представлен код, позволяющий найти факториал с помощью цикла while.
Листинг 11.15. Факториал с помощью оператора while
Факториал с помощью оператора while
Цикл do..while
Оператор do..while практически идентичен оператору while, но, поскольку в нем проверка условия осуществляется в конце, он гарантирует выполнение операторов по крайней мере один раз:
do
{
операторы
} while (выражение условия)
В листинге 11.16 представлен код, позволяющий найти факториал с помощью цикла do..while.
Листинг 11.16. Факториал с помощью оператора do..while
Факториал с помощью оператора do..while
Цикл for..in
С помощью конструкции for..in можно выполнить операторы почти для каждого свойства объекта. Синтаксис этого оператора:
for (свойство in объект)
{
операторы
}
Например, с помощью данного оператора можно произвести инкремент всех элементов массива (листинг 11.17).
Листинг 11.17. Пример использования оператора for..in
Пример использования оператора for..in
В ходе выполнения этого кода все элементы массива a увеличат свое значение на единицу (рис. 11.14).
Р РёСЃ.В 11.14. Рнкремент элементов массива
Обратите внимание, что в цикле for..in не определяется свойство массива length.
Операторы break и continue
РРЅРѕРіРґР° РІ С…РѕРґРµ выполнения цикла возникает необходимость прервать весь цикл или РѕРґРЅСѓ его итерацию. Для этой цели служат операторы break Рё continue. Оператор break полностью прекращает выполнение цикла Рё передает управление операторам, следующим Р·Р° циклом. Оператор continue прерывает текущее выполнение цикла Рё переходит Рє выполнению следующего шага цикла. Различие РІ работе этих операторов продемонстрировано РІ листинге 11.18.
Листинг 11.18. Пример использования операторов выхода из цикла
Пример использования операторов выхода из цикла
Данный код позволяет определить частное от введенного пользователем числа и элементов массива a. При этом в числе элементов этого массива могут быть нули, тогда необходимо в элемент массива с результатом b ввести прочерк (—) (рис. 11.15).
Рис. 11.15. Пример использования операторов выхода из цикла
Р’ вышеприведенном РєРѕРґРµ также демонстрируется возможность вложения РѕРґРЅРѕРіРѕ цикла РІ РґСЂСѓРіРѕР№. РР· цикла while возможен выход, только если ввести нуль (значение РїРѕ умолчанию). Цикл for РІРѕ время исполнения РёРЅРѕРіРґР° прерывается, если элемент массива a равен нулю, чтобы избежать деления РЅР° ноль.
11.5. Функции и события
До сих пор сценарии представляли собой простой код, сразу полностью выполняющийся. Однако часто требуется исполнение кода в какой-то момент или многократное исполнение одного и того же кода. В этом помогут функции и события.
Функции
Функция – это набор команд, объединенных под общим именем для выполнения некоторой задачи. Синтаксис функции имеет следующий вид:
function РмяФункции([аргумент1][,..аргументN])
{
операторы
}
Ключевое слово function объявляет функцию СЃ именем РмяФункции. Функции РјРѕРіСѓС‚ передаваться (РЅРѕ РјРѕРіСѓС‚ Рё РЅРµ передаваться) аргументы, которые перечисляются через запятую РІ скобках СЂСЏРґРѕРј СЃ именем функции. Р’ качестве аргументов РјРѕРіСѓС‚ выступать переменные, значения Рё выражения.
Рспользование функций
Функции можно объявлять в любом месте внутри элемента SCRIPT. Можно даже объявить функцию внутри другой функции, однако в этом случае она будет локальной, то есть будет действовать только внутри родительской функции. Тем не менее рекомендуется объявлять функцию в блоке HEAD до начала выполнения основного кода, иначе она может быть недоступной в момент вызова. В листинге 11.19 представлен пример работы с функциями.
Листинг 11.19. Пример использования функций
Пример использования функций
При запуске этого кода отображается запрос, на который необходимо ввести 0 или 1. В зависимости от ответа запускается одна из функций: sum() или product(), которые находят сумму или произведение элементов глобального массива a соответственно.
Функции могут возвращать значение. Для этого необходимо использовать оператор возврата return. Вообще этот оператор может встречаться несколько раз в теле функции. Таким образом, функции можно использовать в выражениях (листинг 11.20).
Листинг 11.20. Рспользование значения функции
Рспользование значения функции
Функция может объявляться в выражении. Обычно в этом случае функция присваивается переменной, которая затем может использоваться в выражении:
var cube=function(x){return x*x*x}
alert(cube(2)+cube(3));
В данном случае объявляется переменная-функция, вычисляющая куб числа.
Переменное количество аргументов
РРЅРѕРіРґР° РІ процессе создания функции неизвестно, сколько ей передадут аргументов. Р’ этом случае необходимо воспользоваться объектом arguments. Р’СЃРµ аргументы, переданные функции, сохраняются РІ этом объекте Рё РјРѕРіСѓС‚ быть извлечены. Например, для доступа Рє первому аргументу можно использовать следующий РєРѕРґ:
var arg1=arguments[0];
Таким образом, аргументы индексируются, начиная с нуля. Для определения общего количества аргументов, переданных функции, можно использовать свойство length объекта arguments.
Листинг 11.21 демонстрирует возможность обработки переменного количества аргументов.
Листинг 11.21. Пример переменного количества аргументов в функции
Пример переменного количества аргументов в функции
Дополнительная информация о функциях
Аргументами функции РјРѕРіСѓС‚ выступать РЅРµ только данные простого типа, РЅРѕ Рё объекты. Однако РїСЂРё передаче функции строки, числа или логической величины РІ функции создается РєРѕРїРёСЏ переданного значения Рё оригинал РЅРµ изменяется, то есть что Р±С‹ РЅРё делали СЃ аргументом внутри функции, после завершения функции эта переменная уничтожается, Р° оригинальная переменная остается прежней. Рначе РїСЂРѕРёСЃС…РѕРґРёС‚ РїСЂРё передаче объекта. Р’ этом случае РєРѕРїРёСЏ объекта РЅРµ создается, Р° передается ссылка РЅР° данный объект. Если Р±С‹ происходило иначе, то терялось Р±С‹ РјРЅРѕРіРѕ времени Рё памяти РЅР° создание дубликатов. Представьте, сколько потребовалось Р±С‹ времени РЅР° передачу массива РёР· 10 000 элементов, РєРѕРіРґР° фактически можно обойтись передачей РѕРґРЅРѕРіРѕ значения – ссылки РЅР° этот массив. Однако программист должен помнить, что работает РІ функции СЃ оригинальным объектом.
Функции могут быть рекурсивными, то есть прямо или косвенно вызывать сами себя. Если в теле функции явно используется вызов этой же функции, то имеет место прямая рекурсия. Если же функция содержит обращение к другой функции, содержащей прямой или косвенный вызов первой функции, то данная функция является косвенно рекурсивной. Классический пример – функция для вычисления факториала неотрицательного целого числа (листинг 11.22).
Листинг 11.22. Пример рекурсивной функции
Пример рекурсивной функции
Для отрицательного числа факториала не существует. В этом случае возвращается null. Для нулевого значения функция возвращает 1, так как 0!=1. В противном случае вызывается та же функция с декрементом параметра и результат умножается на текущее значение параметра. Вызов функции прерывается при вызове fact (0) (рис. 11.16).
Рис. 11.16. Пример рекурсивной функции
11.6. Встроенные объекты JavaScript
Объекты JavaScript объединяют в себе переменные, именуемые свойствами, и функции, управляющие этими свойствами, именуемые методами. Кроме того, они могут реагировать на события. Пользователь может создавать свои объекты, но JavaScript содержит ряд базовых объектов.
• Global – набор высокоуровневых свойств и методов, у которых нет родительского объекта.
• String – позволяет форматировать и изменять текстовые строки.
• Number – дает возможность обрабатывать числа.
• Boolean – позволяет создавать логические величины.
• Array – дает возможность создавать и управлять массивами.
• Function – позволяет создать функцию.
• Date – дает возможность работать с временем и датой.
• Math – предоставляет некоторые математические функции и константы.
• RegExp – позволяет выполнять функции регулярных выражений для заданных строк.
• Object – является прототипом для всех объектов.
Объект Global
Ртот объект содержит несколько методов Рё свойств, которые РЅРµ принадлежат РЅРё РѕРґРЅРѕРјСѓ объекту (табл. 11.12 Рё 11.13). Для удобства РёС… объединили РІ объект Global.
Таблица 11.12. Свойства объекта Global
Таблица 11.13. Методы объекта Global
Для доступа к методам и функциям этого объекта родительский объект не указывается:
flag=isFinite(x/y)
Объект String
Объект String предоставляет средства для форматирования и выделения части строк. Для этой цели он содержит обширный перечень методов (табл. 11.14 и 11.15).
Таблица 11.14. Свойства объекта String
Таблица 11.15. Методы объекта String
Рассмотрим использование методов объекта String:
MyText="Я люблю HTML";
MyText=MyText.substring(0,8)+"JavaScript";
В результате строка MyText примет значение «Я люблю JavaScript».
Объект Number
Объект Number обычно применяется для доступа к некоторым постоянным значениям, например к отрицательной бесконечности. Свойства и методы этого объекта указаны в табл. 11.16 и 11.17.
Таблица 11.16. Свойства объекта Number
Таблица 11.17. Методы объекта Number
Объект Boolean
Объект Boolean обычно используется для преобразования объекта РІ логическое значение. Ртот объект имеет ограниченное количество методов Рё свойств (табл. 11.18).
Таблица 11.18. Методы и свойства объекта Boolean
Объект Array
С массивами вы уже познакомились в данной главе, однако массивы – это объекты, которые имеют свои свойства и методы, облегчающие работу программисту (табл. 11.19 и 11.20).
Таблица 11.19. Свойства объекта Array
Таблица 11.20. Методы объекта Array
Объект Function
РЎ помощью объекта Function можно манипулировать функцией как объектом. Ртот объект содержит СЂСЏРґ специфичных методов Рё свойств (табл. 11.21 Рё 11.22).
Таблица 11.21. Свойства объекта Function
Таблица 11.22. Методы объекта Function
Синтаксис определения объекта Function выглядит следующим образом:
РмяОбъектаФункции = new Function ([аргумент1, аргумент2,.. аргументN],
телоФункции);
Например,
sumFunc = new Function ("a","b","return(a+b)");
alert(sumFunc(5,4));
Объект Date
Объект Date предоставляет значительное количество свойств и методов, связанных с датами и временем (табл. 11.23 и 11.24). В качестве базовой даты в JavaScript принято 1 января 1970 года. Язык JavaScript имеет доступ только к времени и дате на клиентской машине.
Таблица 11.23. Свойства объекта Date
Таблица 11.24. Методы объекта Date
Конструктор этого объекта принимает значение даты в числовом или строковом формате:
РмяОбъектаДаты = new Date();
РмяОбъектаДаты = new Date(миллисекунды);
РмяОбъектаДаты = new Date("месяц РґРґ, РіРіРіРі чч:РјРј:СЃСЃ");
РмяОбъектаДаты = new Date(РіРѕРґ, месяц, день [, час, минуты, секунды, миллисекунды]);
где значение определяется следующим образом:
• миллисекунды – целое число, определяющее количество миллисекунд, прошедших с 0 часов 0 минут 0 секунд 1 января 1970 года по Гринвичу;
• месяц, дд, гггг, чч, мм, сс – месяц, день, год, час, минуты и секунды соответственно;
• год, месяц, день, час, минуты, секунды, миллисекунды – целые числа, определяющие соответствующие величины.
Если параметры не указаны, то объект инициализируется текущей датой и временем.
Например, чтобы узнать текущий день недели, можно воспользоваться следующим кодом:
MyDate=new Date();
alert(MyDate.getDay());
Ртот РєРѕРґ отобразит число РѕС‚ 0 РґРѕ 6, соответствующее РґРЅСЋ недели. Например, 0 соответствует воскресенью.
Объект Math
Для математических вычислений JavaScript поддерживает объект Math, который содержит ряд математических констант и функций (табл. 11.25 и 11.26).
Таблица 11.25. Свойства объекта Math
Таблица 11.26. Методы объекта Math
Объект RegExp
Регулярные выражения – это шаблоны для поиска определенных комбинаций символов в строках. В данной книге мы не будем рассматривать регулярные выражения, но список методов и свойств объекта RegExp, позволяющего создавать регулярные выражения, можно найти в табл. 11.27 и 11.28.
Таблица 11.27. Свойства объекта RegExp
Таблица 11.28. Методы объекта RegExp
Объект Object
Все объекты в JavaScript – и встроенные, и пользовательские – наследуются от объекта Object, то есть его методы и свойства (табл. 11.29 и 11.30) присутствуют в каждом объекте, но, как правило, их переопределяют.
Таблица 11.29. Свойства объекта Object
Таблица 11.30. Методы объекта Object
Резюме
Р’ этой главе дано общее описание фундаментальных составляющих языка JavaScript: переменных, выражений, операций, объектов, функций Рё событий. Рменно эти знания являются основополагающими, без РЅРёС… невозможно владение языком сценариев. РљСЂРѕРјРµ того, РІ настоящей главе приведены данные Рѕ свойствах Рё методах всех встроенных объектов JavaScript. Рту информацию необязательно запоминать, РЅРѕ можно использовать как справочную, так как начинающему программисту РѕРЅР° нужна РІ ограниченном объеме. Данная глава охватывает, возможно, слишком РјРЅРѕРіРѕ понятий Рё может показаться вам сложной. Можете вернуться Рє ней позднее, чтобы закрепить новые знания.
Глава 12
Первый сценарий на JavaScript
12.1. Организация рабочего окружения
12.2. Внедрение сценариев в HTML-документ
12.3. Вводим первый сценарий
12.4. Разбор нашего сценария в среде FrontPage
12.5. Отладка сценария в Microsoft Script Editor
Вы познакомились с синтаксическими конструкциями и операторами языкаJavaScript, теперь перейдем непосредственно к созданию сценариев. В данной главе вы узнаете, что вам понадобится для создания сценариев. Кроме того, будут рассмотрены способы внедрения сценариев в HTML-документы. Потом для примера вы создадите простой сценарий, на котором и рассмотрите процесс создания сценариев JavaScript.
12.1. Организация рабочего окружения
Для успешной работы в какой-либо области важно иметь под рукой необходимые инструменты, и будет лучше, если они будут удобными. В работе по созданию сценариев также необходимо хоть немного, но организовать свое рабочее место. В этом разделе мы как раз и займемся кратким освещением вопросов, связанных с организацией рабочего окружения.
Текстовые редакторы
Для работы над сценариями подойдет практически любой текстовый редактор, позволяющий создавать обычные текстовые файлы и сохранять их в формате HTM или HTML. Например, в операционной системе Windows в числе стандартных есть два подходящих текстовых редактора – это Блокнот и WordPad. Отдельно стоит отметить редактор Microsoft Word из пакета Microsoft Office – он никак не подойдет для создания сценариев. По умолчанию данный редактор сохраняет свои файлы в двоичном виде, которые ничего общего с веб-страницами не имеют. Хотя можно сохранять его файлы и как веб-страницы, он не позволяет напрямую работать с кодом страниц, а значит, вы не сможете создавать в нем сценарии.
Существуют редакторы, специально разработанные для создания веб-страниц, например Microsoft FrontPage или Adobe Dreamweaver (ранее известный как Macromedia Dreamweaver). Такие редакторы позволяют создавать веб-страницы с помощью визуальных инструментов, а затем уже переключаться в режим отображения кода и вносить какие-либо нестандартные изменения, например добавлять сценарии. Если же создавать с их помощью обычные веб-страницы сможет даже пользователь, не владеющий языком разметки HTML, то вносить изменения в режиме работы с кодом сможет только человек, хотя бы немного знакомый с этим языком. По этой причине пользователям, еще только начинающим разбираться с HTML, следует применять данные редакторы лишь в режиме работы с кодом, чтобы полностью контролировать ход создания веб-страниц. По сравнению с обычными текстовыми редакторами в Microsoft FrontPage или Adobe Dreamweaver синтаксис языков HTML и JavaScript подсвечивается. Таким образом, в них будет удобно работать над сценариями.
РљСЂРѕРјРµ того, РІ Рнтернете можно найти большое количество РґСЂСѓРіРёС… текстовых редакторов, которые позволяют создавать веб-страницы Рё РїСЂРё этом РјРѕРіСѓС‚ подсвечивать синтаксис языков HTML Рё JavaScript, Р° также имеют РјРЅРѕРіРѕ иных полезных возможностей, которые существенно упрощают процесс создания веб-страниц Рё разработки сценариев. РњРЅРѕРіРёРµ такие редакторы распространяются бесплатно или условно бесплатно, Рё, возможно, какой-РЅРёР±СѓРґСЊ РёР· РЅРёС… придется вам РїРѕ душе.
Браузеры
Вы собираетесь создавать сценарии, управляющие веб-страницами, поэтому для проверки работоспособности этих документов вам понадобится какой-либо браузер. Как известно, полной совместимости среди браузеров нет, а значит, проверив работоспособность своего творения в одном браузере, нельзя быть уверенным в работоспособности в других. Следовательно, лучше использовать как можно большее количество различных браузеров для проверки своих веб-страниц.
Р’ РѕСЃРЅРѕРІРЅРѕРј веб-разработчикам приходится считаться СЃ особенностями браузера Internet Explorer, который РЅРµ слишком стремится Рє стандартам. Поэтому обязательно тестируйте СЃРІРѕРё веб-страницы РЅР° данном браузере, присутствующем РІ каждой версии операционной системы Windows. Большой популярностью также пользуются браузеры Mozilla Firefox Рё Opera, которые стремятся максимально соответствовать стандартам. Вообще можно встретить Рё РґСЂСѓРіРёРµ браузеры, например Konqueror Сѓ пользователей операционной системы Linux или Safari Сѓ пользователей операционной системы Mac OS. Что касается браузеров РѕС‚ независимых производителей, то РѕРЅРё стараются строго соответствовать стандартам, избегая фирменных возможностей браузеров компаний Microsoft Рё Netscape. Можно прийти Рє выводу, что для проверки работоспособности СЃРІРѕРёС… сценариев будет вполне достаточно трех браузеров: Internet Explorer, Mozilla Firefox Рё Opera. Причем первый РёР· перечисленных браузеров есть Сѓ всех пользователей операционной системы Windows, Р° следующие РґРІР° можно без проблем загрузить РёР· Рнтернета. Браузер Mozilla Firefox можно загрузить СЃ сайта , Р° Opera – СЃ сайта . РљСЂРѕРјРµ того, РЅРµ РІСЃРµ пользователи работают СЃ последними версиями браузеров, поэтому для максимального охвата интернет-аудитории может потребоваться тестирование документов РЅР° младших версиях указанных браузеров.
Отладчики сценариев JavaScript
Отладка представляет собой поиск и устранение ошибок. Часто процесс отладки может занимать большую часть времени разработки всей программы (или сценария). Ведь надежность и безошибочная работа программы зачастую даже важнее ее функциональности. Поэтому для облегчения и ускорения отладки созданы специальные программы, которые называются отладчиками. Типичный отладчик имеет такие возможности, как пошаговое выполнение программы с остановкой в каждой строке кода или в заранее отмеченных для этого точках остановки, а также возможность отслеживания и изменения значений каждой переменной прямо во время выполнения программы.
Стоит отметить, что для программистов на таких языках, как, например, C++ или Java, отладчики стали таким же обычным и привычным инструментом, как, например, текстовый редактор. А вот для разработки сценариев на JavaScript отладчики применялись не всегда ввиду того, что сценарии, как правило, имели небольшой размер и малую сложность и поэтому могли быть проверены и вручную. Однако в настоящее время сценарии на JavaScript, особенно с использованием технологии AJAX, уже не уступают по объему кода и сложности программам, написанным на таких языках, как C++ или Java. Поэтому все чаще и чаще при разработке сценариев на JavaScript применяют отладчики. Кроме того, если вы в дальнейшем при разработке своих сценариев на JavaScript столкнетесь с какой-либо ошибкой или неправильной работой сценария, умение пользоваться отладчиком сэкономит вам немало времени и труда.
Существует немало отладчиков для сценариев на JavaScript. Например, Microsoft Script Debugger, бесплатно распространяющийся отладчик от компании Microsoft, который можно загрузить по адресу , имеет все необходимое для успешной отладки сценариев на JavaScript. При отладке сценариев Microsoft Script Debugger применяется совместно с браузером Internet Explorer. Кроме того, данный отладчик распространяется вместе с редактором Microsoft FrontPage в рамках программы Microsoft Script Editor, которая практически не отличается от Microsoft Script Debugger.
Существуют и другие отладчики (например, для браузера Mozilla Firefox), созданные в виде расширений. В частности, отладчик Firebug можно загрузить с сайта . Причем если перейти на данную страницу в браузере Mozilla Firefox, то отладчик сразу же будет установлен.
12.2. Внедрение сценариев в HTML-документ
В данном разделе будут рассмотрены вопросы, касающиеся встраивания сценариев в веб-страницы, поэтому предполагается, что вы хотя бы немного знакомы с языком разметки HTML. Обычно сценарии внедряются в HTML-документ тремя стандартными способами:
• в виде гиперссылки;
• в виде обработчика события;
• в рамках элемента SCRIPT.
Разберем способы встраивания сценариев в веб-страницы по порядку. Начнем с разбора метода встраивания сценария под видом гиперссылки.
Встраивание сценариев в гиперссылку
Как известно, для создания на веб-страницах гиперссылок применяется элемент A, у которого есть атрибут href для указания адреса страницы или файла, куда приведет гиперссылка. Однако вместо адреса данный атрибут может содержать и JavaScript-сценарий, если перед сценарием поставить слово javascript: (со знаком:). Рассмотрим пример такой гиперссылки:
Нажмите сюда
Когда пользователь щелкает кнопкой мыши на гиперссылке, интерпретатор сценариев JavaScript получает следующий код:
alert('Привет, мир!');
Рнтерпретатор исполняет этот РєРѕРґ, РІ результате чего РЅР° экране появляется РѕРєРЅРѕ (СЂРёСЃ.В 12.1).
Рис. 12.1. После перехода по гиперссылке появляется окно
Здесь сценарий состоит из вызова всего одной функции alert(), которая выводит на экран окно с текстом, полученным в качестве параметра. В принципе, объем кода может быть любой. Следует помнить, что, если браузер не поддерживает JavaScript или поддержка этого языка отключена, гиперссылка будет отображена, но работать не будет, что может вызвать недоумение у пользователей. Поэтому во избежание проблем это следует учесть.
Встраивание сценариев для обработки событий
При работе с такой графической операционной системой, как Windows, вы могли заметить, что она всегда готова отреагировать на ваши действия: щелкнули кнопкой мыши на значке программы – программа запустилась, нажали клавишу в текстовом редакторе – появился соответствующий символ и т. д. Все это некие события, которые приходят от мыши, клавиатуры, таймера и многих других устройств. Аналогично и браузер может реагировать на различные события.
Поведение каждого элемента зависит РѕС‚ событий, которые постоянно возникают РІ браузере. Например, пользователь щелкнул РєРЅРѕРїРєРѕР№ мыши РЅР° тексте, переместил указатель мыши, загрузил HTML-документ. Браузер сам решает, как реагировать РЅР° каждое событие. Однако РІС‹ можете перехватывать отдельные события Рё задавать РЅРѕРІРѕРµ поведение РїСЂРё РёС… наступлении. Р’ языке HTML Сѓ РјРЅРѕРіРёС… элементов есть атрибуты, соответствующие различным событиям. Рти атрибуты РјРѕРіСѓС‚ содержать РєРѕРґ языка JavaScript, выполняемый РІ ответ РЅР° событие. Например:
Рто простой текст
Рлемент P просто объединяет текст РІ параграфы, однако РјС‹ возложили РЅР° него еще РѕРґРЅСѓ функцию. Определив атрибут onclick, наш текст будет реагировать РЅР° щелчок РєРЅРѕРїРєРѕР№ мыши (СЂРёСЃ.В 12.2).
Рис. 12.2. После щелчка кнопкой мыши на тексте появляется сообщение
В языке HTML (начиная с версии 4.0) практически каждый элемент имеет атрибуты для обработки каких-либо событий. Для обработки событий данным атрибутам назначается код на языке JavaScript, который выполняется, когда произойдет событие. Благодаря возможности обработки событий вы можете создавать интерактивные страницы, отвечающие на действия пользователей.
Встраивание сценариев в рамках элемента SCRIPT
Кроме возможности обработки событий, для внедрения сценариев в веб-страницы в языке разметки HTML есть специальный элемент SCRIPT. Браузер, встретив тег , как сценарий на каком-либо языке. Для указания языка сценария используется атрибут type.
Например, для указания языка JavaScript:
При использовании сценариев JavaScript можно этот атрибут не указывать, так как значение «text/javascript» является значением по умолчанию.
Кроме того, иногда для указания типа языка используют атрибут language. Так, для указания языка JavaScript 1.0 значение атрибута language должно быть «JavaScript», для JavaScript 1.1 – "JavaScript1. 1", для JavaScript 1.2 – "JavaScript1.2" и т. д. Однако данный атрибут не входит в стандарт, определяющий язык HTML, хотя и распознается большинством браузеров. По этой причине его не рекомендуется употреблять. Стоит заметить, что если значение атрибута language незнакомо браузеру, то содержимое элемента SCRIPT игнорируется.
Если пользователь работает в старой версии браузера, которая не поддерживает JavaScript, то элемент SCRIPT может оказаться неизвестным программе и код сценария будет выведен на экран как обычный текст. Таким образом, необходимо обеспечить маскировку кода сценариев от старых браузеров. Для этого код сценария внутри элемента SCRIPT окружают комментариями языка HTML ():
Таким образом, браузер ранней версии, встретив элемент SCRIPT, проигнорирует его, а содержащийся внутри этого элемента код пропустит, посчитав комментарием.
Здесь стоит обратить внимание, что перед закрывающим комментарием языка HTML (->) стоит еще и комментарий языка JavaScript (//), поскольку иначе при выполнении JavaScript-кода некоторые браузеры могут попытаться выполнить обработку этой строки, а набор символов – > в JavaScript имеет совсем другое значение. Вообще, язык JavaScript богат на различные комбинации символов, обозначающие комментарии. Комментарии игнорируются интерпретатором JavaScript.
Комментарии // и
Комментарии могут быть и многостроковыми, что облегчает отладку сценария и позволяет закомментировать проблемный участок кода. Для этой цели используются наборы символов /* и */.
Что же делать с браузерами, которые не поддерживают сценарии или такая возможность в них просто отключена? В таких случаях необходимо либо предупредить пользователя, что для просмотра требуется поддержка сценариев, либо заменить код каким-либо вариантом без сценариев. Для этого в языке HTML есть элемент NOSCRIPT, чье содержимое будет использовано при отсутствии поддержки сценариев. Например:
Ваш браузер не поддерживает сценариев JavaScript или их поддержка отключена
Таким образом, можно, например, предупредить пользователя Рѕ том, что для просмотра страницы ему необходим браузер СЃ поддержкой JavaScript. Рли же можно предоставить пользователю ссылку РЅР° версию сайта, адаптированную для старых версий браузеров.
Сценарии РјРѕРіСѓС‚ содержаться РІ самой веб-странице, как описано выше, Р° также РІ отдельном файле. Рлемент SCRIPT имеет атрибут src, который должен иметь значение адреса файла СЃРѕ сценарием. Обычно файлы СЃРѕ сценариями JavaScript имеют расширения JS, например файл lib1.js. Таким образом, чтобы подключить Рє HTML-документу файл lib1.js, необходимо добавить РІ него следующую строку:
Ваш браузер не поддерживает сценарии или их поддержка отключена
...
...
Рлемент страницы, события которого обрабатываются
...
Таким образом, в HTML-документы внедряется код сценариев на JavaScript. Как видите, все довольно просто. Чтобы убедиться в этом, попробуйте создать свой первый сценарий.
12.3. Вводим первый сценарий
Классическим примером в начале изучения любого языка программирования является программа, выводящая сообщение Привет, мир!!!. Вот и мы создадим на JavaScript сценарий, который будет выводить такое сообщение. Чтобы проиллюстрировать возможности отладчика Microsoft Script Debugger, немного усложним пример и выведем не одно сообщение Привет, мир!!! а несколько. Кроме того, в процессе разбора сценария вы увидите, что очень просто изменить количество сообщений, выводимых в документе. Для примера работы в отладчике вмешаемся в ход выполнения сценария, изменив значение переменной-счетчика.
Теперь РїРѕСЂР° перейти Рє практике Рё создать, наконец, первый сценарий. Прежде стоит повторить, что язык JavaScript чувствителен Рє регистру символов. Рто означает, что вам следует внимательно следить Р·Р° тем, какими буквами РІС‹ набираете РєРѕРґ сценария. Ведь, например, слова if Рё If РІ языке JavaScript – это абсолютно разные слова. Более РїРѕРґСЂРѕР±РЅРѕ РѕР± этом РІС‹ узнаете РІ следующих главах, Р° РїРѕРєР° достаточно правильно переписать сценарий РёР· листинга 12.2.
1. Запустите текстовый редактор, в котором вы собираетесь создавать свои вебстраницы.
2. Создайте новый текстовый файл.
3. Введите текст вашего первого сценария из листинга 12.2.
Листинг 12.2. Первый сценарий
Наш первый сценарий
4. Сохраните файл, например, с именем script1.html.
Создав веб-страницу со сценарием, можно посмотреть, как она будет выглядеть в браузере. Чтобы убедиться, что сценарий работает как следует, проверьте его во всех установленных на вашем компьютере браузерах.
Ртак, если РІС‹ ввели РІСЃРµ строки без ошибок, как РІ листинге 12.2, то РЅР° экране вашего браузера появится десять сообщений Привет, РјРёСЂ!!! (СЂРёСЃ.В 12.3).
Рис. 12.3. Первый сценарий, открытый в браузере
При разработке сценариев обычно одновременно открыт и текстовый редактор, в котором создается веб-страница, и несколько браузеров, в которых проверяется работоспособность создаваемой веб-страницы. Таким образом, после внесения и сохранения каких-либо изменений в сценарий достаточно перейти в окно браузера и нажать кнопку Обновить.
Однако удобнее разрабатывать веб-страницы и сценарии в специально созданных для этого редакторах. Поэтому в качестве примера разберем работу первого сценария в среде редактора Microsoft FrontPage.
12.4. Разбор нашего сценария в среде FrontPage
Созданный сценарий состоит всего из четырех строк кода, которые выводят в окне браузера десять сообщений Привет, мир!!!. Все остальное – это код страницы на языке HTML. Далее мы немного поэкспериментируем со сценарием.
Для разработки сценариев в редакторе FrontPage необходимо переключиться в режим Код (рис. 12.4), который позволит не использовать визуальные инструменты, а работать с кодом страницы напрямую.
Рис. 12.4. Разработка сценариев в среде FrontPage
В редакторе FrontPage подсвечивается синтаксис языка, что отчетливо выделяет переменные, цифры и строки, ключевые слова языка. В общем, работать в специализированном редакторе гораздо удобнее, а вероятность сделать опечатку меньше. Кроме того, работая в редакторе FrontPage, нет необходимости постоянно держать запущенными браузеры. Ведь чтобы просмотреть, что получилось, достаточно из режима Код перейти в режим Просмотр.
Возможно, вы уже догадались, что сообщение Привет, мир!!! выводит следующая строка:
document.write(«Привет, мир!!!»);
Как говорилось ранее, язык JavaScript является объектно-ориентированным, а значит, предполагается работа с объектами, в которых и реализованы почти все возможности языка. Поскольку нам необходимо вывести в документе приветствие, мы обратились к объекту document, в котором есть функция write() для вывода строк.
Чтобы приветствие выводилось несколько раз, используется оператор цикла for языка JavaScript, который вызывает функцию write() объекта document до тех пор, пока значение переменной i меньше десяти. Причем с каждым новым повтором значение переменной i увеличивается на единицу.
Таким образом, чтобы вывести, например, приветствие 20 раз, достаточно изменить всего одну цифру в следующей строке:
for (var i = 0; i < 10; i++)
В итоге получится строка:
for (var i = 0; i < 20; i++)
Теперь посмотрим, что получилось, просто перейдя в редакторе FrontPage в режим Просмотр (рис. 12.5).
Рис. 12.5. Просмотр работы сценария в среде FrontPage
12.5. Отладка сценария в Microsoft Script Editor
Отладчик Microsoft Script Editor распространяется СЃ редактором Microsoft FrontPage, хотя может быть СЃРІРѕР±РѕРґРЅРѕ загружен РёР· Рнтернета. Данный отладчик применяется совместно СЃ браузером Internet Explorer, Р° значит РІ браузере необходимо разрешить отладку.
1. Выберите команду меню Сервис → Свойства обозревателя. Появится окно Свойства обозревателя.
2. Выберите вкладку Дополнительно. Вы увидите список Параметры.
3. В этом списке снимите, если установлены, флажки Отключить отладку сценариев (Internet Explorer) и Отключить отладку сценариев (Другие).
4. Нажмите кнопку OK, чтобы сохранить изменения.
5. Перезапустите браузер.
Таким образом, в меню Вид должно появиться подменю Отладчик сценариев с двумя командами: Открыть и Прервать на следующей инструкции. Теперь приступим к отладке сценария.
1. Откройте в браузере страницу с первым сценарием (см. листинг 12.2).
2. Выберите команду меню Вид → Отладчик сценариев → Прервать на следующей инструкции.
3. Нажмите кнопку Обновить. Возможно, при этом откроется окно выбора одного из отладчиков Microsoft Script Editor и Microsoft Script Debugger. В этом случае выберите Microsoft Script Editor. Откроется главное окно отладчика Microsoft Script Editor (рис. 12.6).
Рис. 12.6. Окно отладчика
Обратите внимание, что интерпретирование страницы в браузере приостановилось на первой строке кода сценария, которая отмечена стрелкой. Таким образом, вы можете приступить к пошаговому выполнению сценария. Чтобы знать, на каком вы шаге, нужно контролировать значение переменной i.
1. Выберите команду меню Debug → QuickWatch (Отладка → Быстрый просмотр). Появится окно QuickWatch (Быстрый просмотр) (рис. 12.7).
Рис. 12.7. Окно QuickWatch (Быстрый просмотр)
2. Введите в поле Expression (Выражение) имя необходимой переменной, то есть i.
3. Нажмите кнопку Add Watch (Добавить просмотр). В окне отладчика появится панель Watch (Просмотр) со значениями переменной i (рис. 12.8).
Рис. 12.8. Переменная под контролем
4. Закройте окно QuickWatch (Быстрый просмотр).
Таким образом, вы можете узнать, какое это по счету повторение. Вы также можете изменить значение переменной.
1. Щелкните кнопкой мыши на значении переменной i на панели Watch (Просмотр).
2. Введите необходимое значение (в данном случае не больше 19, например 18).
Вот так просто вы уже на предпоследнем повторе цикла. Сделайте несколько шагов и увидите, что у вас получилось в браузере.
1. Выберите команду меню Debug → Step into (Отладка → Сделать шаг).
2. Повторяйте первый шаг до тех пор, пока не появится окно браузера (рис. 12.9).
Рис. 12.9. Результат после изменения хода выполнения сценария
Как видите, количество приветствий уже другое. Все потому, что вы поменяли значение переменной i. Кроме того, отладчики позволяют выполнить произвольную строку кода сценария или пропустить несколько строк.
Резюме
В данной главе мы рассмотрели, как организовать рабочее окружение. Теперь у вас есть все необходимое, в подтверждение чего вы создали первый сценарий. Кроме того, вы даже вмешались в ход выполнения сценария с помощью отладчика. Конечно, пока еще многое вам непонятно, но уже вскоре вы научитесь создавать свои собственные сценарии.
Стоит сказать, что сейчас РІ большинстве веб-страниц применяются сценарии РЅР° JavaScript. Р’С‹ всегда можете посмотреть исходный РєРѕРґ страниц Рё увидеть, как сценарии внедрены РІ HTML-документ Рё что вообще РѕРЅРё РёР· себя представляют. РљСЂРѕРјРµ того, РІ Рнтернете существует немало сайтов, посвященных созданию сценариев. РќР° РЅРёС… РІС‹ сможете узнать массу полезной информации, Р° также получить уже готовые сценарии, которые сразу же сможете применять РЅР° СЃРІРѕРёС… веб-страницах. РњРЅРѕРіРѕ ссылок РЅР° сайты, посвященные JavaScript, можно найти РІ таких каталогах, как «Яндекс» () или «Апорт» (), РІ разделах, посвященных языкам программирования. Язык JavaScript очень популярен, Рё СЃ РїРѕРёСЃРєРѕРј необходимой информации проблем РЅРµ возникнет.
Глава 13
Язык XHTML
13.1. Структура XHTML-документов
13.2. Отличие XHTML от HTML
13.3. Проблемы использования XHTML
Ртак, РІ предыдущих главах РєРЅРёРіРё РІС‹ изучили возможности HTML 4.01 Рё теперь готовы разрабатывать веб-страницы, основанные РЅР° этом языке гипертекстовой разметки. Язык HTML версии 4.01 РІ РѕСЃРЅРѕРІРЅРѕРј поддерживается популярными браузерами Рнтернета, так что разработанные вами страницы Р±СѓРґСѓС‚ корректно отображаться РЅР° экранах компьютеров большинства пользователей. Рто большое достоинство HTML, появившееся РІ процессе эволюции версий языка Рё взглядов разработчиков браузеров РЅР° важность стандартизованного СЃРїРѕСЃРѕР±Р° представления информации, размещаемой РІ Сети. Однако ничего РЅРµ стоит РЅР° месте, Рё сейчас стали очевидными Рё недостатки HTML. РЎ помощью этого языка РІС‹ РЅРµ сможете адекватно воспроизвести химические или математические формулы, нотную запись, иероглифы. РћРЅ РЅРµ позволит вам корректно отобразить информацию РЅР° таких портативных устройствах, как карманные компьютеры, смартфоны, устройства чтения электронных РєРЅРёРі. Таким образом, развитие средств коммуникации Рё расширение типов информации, которую требуется РїРѕ РЅРёРј передать для анализа, воспроизведения Рё обработки, потребовали развития языка HTML. Рменно эта задача Рё была решена СЃ появлением языка XHTML.
Казалось Р±С‹, что могло быть проще? Нужно было просто создать еще РѕРґРёРЅ язык, который удовлетворял Р±С‹ новым требованиям, включить РІ текущую версию HTML 4.01 новые элементы, новые языковые конструкции, Рё РІСЃРµ встанет РЅР° СЃРІРѕРё места. Однако никто РЅРµ РјРѕРі Р±С‹ гарантировать всеобъемлющей полноты этого языка, что может привести Рє появлению множества нестандартных, плохо согласованных версий HTML. Рными словами, такой путь развития языка РјРѕРі привести Рє повторению первых этапов формирования HTML, РєРѕРіРґР° мало кто заботился Рѕ соответствии СЃРІРѕРёС… версий языка HTML стандартной версии, поддерживаемой W3C. РџСЂРё таком РїРѕРґС…РѕРґРµ браузеры различных производителей могли неадекватно отображать (Рё отображали!) содержимое «чужих» HTML-документов, поскольку просто РЅРµ понимали использованные РІ РЅРёС… языковые конструкции. Р’ те времена разработчикам веб-страниц приходилось нелегко, поскольку РёС… основная задача состояла (Рё состоит) РІ обеспечении максимально широкого доступа Рє СЃРІРѕРёРј сайтам.
Р’ результате специалисты W3C избрали РґСЂСѓРіРѕР№ путь, более продуктивный Рё перспективный. Вместо создания РЅРѕРІРѕР№ версии языка HTML РѕРЅРё предложили средство, СЃ помощью которого разработчики могли Р±С‹ определять Рё описывать собственные языки гипертекстовой разметки. Ртим средством является метаязык XML (eXtensible Markup Language – расширяемый язык разметки), то есть специальный язык, служащий для определения Рё задания РґСЂСѓРіРёС… языков гипертекстовой разметки. Термин «мета» как раз Рё означает его функцию: метаязыки – это языки, служащие для описания Рё определения новых языков.
Рспользование метаязыков РІ определении языков гипертекстовой разметки отнюдь РЅРµ инновация W3C. РЎРІРѕРёРј появлением РЅР° свет язык HTML обязан метаязыку SGML (Standard Generalized Markup Language – стандартный обобщенный язык разметки). Р’ приложении D В«HTML 4.01 DTDВ» РЅР° сайте W3C () РІСЃРµ конструкции языка HTML 4.01 описаны СЃ помощью набора определений типа документа (DTD – Document Type Definition). Рто набор специальных конструкций метаязыка SGML, описывающих язык HTML 4.01. РќР° следующем этапе развития языка гипертекстовой разметки специалисты W3C создали метаязык XML Рё СЃ помощью набора XML DTD – язык XHTML, наследующий возможности HTML 4.01, РЅРѕ СЃ некоторыми уточнениями Рё усовершенствованиями. Язык XHTML обеспечивает поддержку всех средств HTML 4.01, применяя более жесткие правила XML DTD.
Почему же специалисты W3C разработали новый метаязык XML вместо использования SGML? Причина состоит в сложности SGML: насколько он универсален и всемогущ, настолько и сложен в понимании. Поэтому он непригоден для широкого использования разработчиками специализированных версий языков гипертекстовой разметки. Язык XML для определения новых языков использует отдельные (но не все) элементы SGML, кроме того, в нем присутствуют упрощенные элементы SGML, более подходящие для широкого применения.
В настоящий момент имеется три типа DTD, используемых для определения языка XHTML.
1. Первый тип соответствует строгому применению правил XHTML DTD в данном документе. При этом запрещается использование всех тегов и атрибутов HTML, признанных устаревшими по разным причинам, например запрещены все атрибуты форматирования текста по причине их замены таблицами CSS. К числу последних относятся тег и атрибут выравнивания align. Однако такое ограничение для многих просто неприемлемо, поскольку использование элементов этого типа стало для разработчиков привычкой, выработанной годами работы над HTML-документами.
2. Второй тип XHTML DTD называется переходным и включает в себя все нежелательные элементы HTML, чтобы разработчики веб-страниц могли постепенно перейти от старого к новому. Такой подход соответствует тенденциям в развитии браузеров, которые не спешат расставаться со старыми добрыми средствами создания веб-страниц с помощью пусть и устаревших, но привычных и надежных тегов HTML.
3. Третий тип DTD определяет работу с фреймами, в остальном он соответствует переходным XHTML DTD.
В настоящее время актуальна версия 1.0 языка XHTML, но уже на подходе версия 1.1.
В основном создание документа XHTML 1.0 не отличается от создания документа HTML. Однако в синтаксисе и структуре документа имеются определенные отличия, которые обязательно должны быть учтены, если вы хотите добиться соответствия своей веб-страницы требованиям XHTML. Обсудим устройство документов XHTML 1.0 и их отличие от документов, подготовленных на основе языка HTML 4.01.
13.1. Структура XHTML-документов
Чтобы XHTML-документ полностью отвечал требованиям строгих правил XHTML DTD, ему нужно указать, какой набор XML DTD был использован при его создании, версию применяемого языка XML, а также пространство имен документа. Вся эта информация помещается в начало документа в виде объявлений. Рассмотрим эти три компонента по порядку.
Р’ настоящее время существует РґРІРµ версии языка XML: 1.0 Рё 1.1. РС… отличия РІ РѕСЃРЅРѕРІРЅРѕРј сводятся Рє более строгим требованиям Рє используемым РІ документах кодировкам символов, предъявляемым языком XML 1.1, что расширяет сферу применения соответствующих документов, например РЅР° мейнфреймах. Более широко применяется версия XML 1.0, поэтому использовать будем именно ее. Для объявления того, что РІС‹ используете РІ данном XHTML-документе язык XML версии 1.0, следует поместить РІ первой строке документа следующую строку:
В ней браузеру сообщается, что вы используете XML версии 1.0 и представление символов в кодировке Unicode с разрядностью 8.
Теперь объявим набор DTD языка разметки XHTML:
В вышеприведенной конструкции объявлено, что в данном документе корневым элементом является html, а для его разработки использован набор XHTML DTD с публичным именем «//W3C//DTD XHTML 1.0 Strict//EN». Если браузер сумеет найти эти DTD по публичному имени, он будет использовать их, иначе он может применить набор XML DTD, хранимый в файле, который указан в URL вслед за публичным именем. В данном случае это документ по адресу . Слово «strict» в названии файла означает «строгий», так что в данном документе использован строгий тип XHTML DTD. Указанный в адресе файл xhtml1-strict.dtd хранит все правила DTD, написанные на языке XML. Описание языка XML выходит за рамки этой книги, ограничимся только замечанием, что для всех разработчиков, которые хотят работать с XHTML на профессиональном уровне, знание языка XML является обязательным.
Если же вы намерены использовать переходной тип XHTML-документов, добавьте такое объявление:
Для фреймовой версии XHTML DTD объявление таково:
Ртак, РјС‹ объявили версию XML Рё набор XHTML DTD для создаваемого XHTML-документа. Теперь зададимся РІРѕРїСЂРѕСЃРѕРј: Р° что если РјС‹ используем переходные правила XHTML DTD, РЅРѕ нам требуется включить РІ СЃРІРѕР№ документ некий фрагмент, содержащий разметку РїРѕ правилам специально определенного набора DTD, например для воспроизведения нотной записи? Для этих целей РІ документах XHTML используется так называемое пространство имен.
Пространство имен – это список имен всех тегов и атрибутов, которые применяются в XHTML-документе, подчиняющемся определенному набору правил XML DTD. С этой целью в правилах XML DTD всегда задается пространство имен, уникальное для каждого конкретного набора DTD. Соответственно, в XHTML DTD также определено стандартное пространство имен, которое должно быть хотя бы раз явно объявлено в документе XHTML. Обычно это делается с помощью атрибута xmlns тега :
Здесь задано пространство имен, хранимое РІ документе РїРѕ адресу , РіРґРµ находится официальная спецификация языка XHTML. Для использования РІ XHTML-документах нескольких DTD предусмотрена возможность РїСЂСЏРјРѕРіРѕ указания пространства имен, Рє которому принадлежит данный тег или атрибут разметки. Рто делается СЃ помощью атрибута xmlns, который можно поместить РІ открывающий тег любого элемента РІ документе, например, так:
В этом случае XHTML-совместимый браузер, обрабатывая документ, получит указание, что при воспроизведении содержимого данного тега следует воспользоваться набором математических правил DTD, взяв их по указанному адресу http:// . Здесь хранится спецификация языка математической разметки MathML (Mathematical Markup Language). При этом запись y4/z будет воспроизведена браузером как математическое выражение деления двух переменных y4 и z, а не как содержимое тега , определенного в общих XHTML DTD.
Как видите, ссылки на пространства имен достаточно объемны. Чтобы сократить их размер и упростить себе работу по составлению документа, можно использовать так называемые метки, вставляя их в определения пространства имен в начале документа:
После этого можно будет обращаться к данному пространству имен во всех тегах документа так:
y4/z
Здесь приведена сокращенная версия тега из предыдущего примера.
Ртак, сведем РІСЃРµ воедино, запишем весь созданный XHTML-документ целиком (листинг 13.1).
Листинг 13.1. Образец XHTML-документа
"http://www.w3.org/TR/xhtml1/DTD/xhtml1 transitional.dtd">
Рто наш первый XHTML-документ
...Здесь находится содержимое документа...
Все компоненты этого документа должны быть вам знакомы. В начале стоят объявления об использовании в документе языка XML 1.0 и переходных правил XHTML 1.0 DTD. В декларативной части внутри элемента head содержится элемент title заголовка документа, который в языке XHTML обязателен. В элементе html с помощью атрибута xmlns объявлено, что по умолчанию пространством имен документа будет XHTML 1.0. С помощью атрибута lang указано, что в документе XHTML применяется английский язык.
Однако что теперь РјС‹ можем ввести РІ тело XHTML-документа? Поскольку РјС‹ объявили использование для него переходных правил DTD XHTML 1.0, допустимы практически любые элементы, теги Рё атрибуты языка HTML 4.01, однако РїСЂРё РёС… использовании РјС‹ должны учитывать определенные ограничения. Рти ограничения еще более жестки РІ готовящейся версии языка XHTML 1.1, причем настолько, что практически исключают какие-либо вольности РІ составлении XHTML-документов. РњС‹ же ограничимся более либеральной версией 1.0.
13.2. Отличие XHTML от HTML
Основным отличием документа XHTML от HTML 4.01 является жесткое требование к корректности документа с точки зрения стандартов языка XML. На протяжении истории развития языка HTML сложился подход, при котором допускались многочисленные вольности и отступления от стандартов языка, объявленных W3C, а браузеры различных производителей пытались компенсировать эти вольности, угадывая и корректируя HTML-код с целью его адекватного воспроизведения. Все это отменяется в языке XHTML, если следовать строгим наборам XHTML DTD, а переходные наборы XHTML DTD служат лишь на период перехода от старого к новому: от HTML к XHTML.
Значения атрибутов должны быть в кавычках
В языке HTML значения атрибутов должны быть заключены в кавычки, только если в значение входят пробелы или специальные символы. Но в языке XHTML это недопустимо: все значения должны заключаться в кавычки. Например, в теге | , входящем в документ HTML, допустимо написать следующее:
|
Однако в языке XHTML это считается ошибкой. Следует писать так:
|
Хотя это и кажется избыточным, но выполнение такого правила обязательно.
Необходимо наличие закрывающего тега
В стандарте языка HTML 4.01 допускается пропуск закрывающего тега, если программа, которая будет обрабатывать соответствующий документ, сможет «догадаться» о его наличии. Поэтому вполне допустимо опускать закрывающие теги между соседними абзацами или |
|