This content was uploaded by our users and we assume good faith they have the permission to share this book. If you own the copyright to this book and it is wrongfully on our website, we offer a simple DMCA procedure to remove your content from our site. Start by pressing the button below!
ФЕДЕРАЛЬНОЕ АГЕНТСТВО ПО ОБРАЗОВАНИЮ ГОСУДАРСТВЕННОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО ПРОФЕССИОНАЛЬНОГО ОБРАЗОВАНИЯ «ВОРОНЕЖСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ»
WEB-ДИЗАЙН. ЗНАКОМСТВО С HTML Практикум для вузов
Составители: В.В. Васильев, Л.В. Хливненко
Издательско-полиграфический центр Воронежского государственного университета 2007
Утверждено научно-методическим советом математического факультета 31 января 2007 г., протокол № 5
Рецензент С.А. Ткачева
Практикум подготовлен на кафедре математического моделирования математического факультета Воронежского государственного университета. Рекомендуется для студентов всех форм обучения.
Для направления: 010101 (010100) – Математика
2
1. Элементы web-дизайна При создании собственного сайта, сами того не замечая, мы будем наступать на грабли, через которые прошли многие начинающие дизайнеры. Поступим мудрее. Учиться на чужих ошибках менее болезненно, поэтому в этой главе мы познакомимся с приемами создания собственного стиля, с правилами хорошего тона в web-дизайне и рекламой созданного сайта. При создании сайта, так же как при программировании, работа начинается с проектирования с помощью карандаша и бумаги. Первые вопросы, на которые четко нужно знать ответы: Какова цель создания сайта? На какую аудиторию он рассчитан? Что интересного для посетителей будет содержать сайт? Именно содержание сайта привлекает посетителей, поэтому начинать разработку сайта нужно с содержания, а не с оформления. Впоследствии под конкретное содержание можно подобрать подходящий дизайн, который дополняет текст и помогает хорошо в нем ориентироваться. Можно подсмотреть идеи на сайтах аналогичной тематики. Структура сайта должна быть тщательно продумана. Человек хорошо воспринимает на одной странице меню, состоящее не более чем из семи пунктов. Если семи заголовков недостаточно, составляйте подменю на других страницах или используйте иерархические выпадающие меню (не более трех уровней). Проектировать карту сайта желательно так, чтобы каждая страница имела свою тему и была бы доступна максимум за три клика. Чем яснее будет логика навигации по сайту, тем лучше. Сложные навигационные системы не вызывают у посетителя желания в них разобраться, а скорее отталкивают от сайта. В хорошем сайте пользователь с любой страницы может попасть на главную. Ведь многие люди попадают на сайт с поисковых систем и, возможно, решат посмотреть первую страницу. Еще лучше, если навигационная система дублируется на все страницы. Моветоном является сайт, содержащий тупиковые страницы, возврат с которых возможен только через кнопку Назад браузера. Еще хуже, если стоят ссылки на недоделанные или отсутствующие страницы. Если навигационная система состоит из графических элементов, то ее желательно поддержать аналогичной текстовой версией. Текст грузится быстрее графики, и пользователь сразу получает возможность ориентироваться, не дожидаясь конца загрузки. Время – деньги! К тому же некоторые пользователи работают с отключенной графикой. Часто бывает, что пользователь не видит всю страницу на своем экране целиком. Чтобы поменьше заставлять посетителя пользоваться вертикальной линейкой прокрутки, создавайте внутренние гиперссылки, по которым осуществляется переход на нужный участок страницы. Помните, что пользователь не любит длинных страниц. Когда Вы размещаете длин3
ный текст, удобнее вначале составить план из гиперссылок на соответствующие части текста. Пусть пользователь сам решает, что он будет читать подробнее. Много усилий часто тратится на разработку фасада. Первая страница сайта должна содержать заголовки основных разделов и лучшие материалы. Цель: привлечь внимание пользователя и вовлечь его в информационный водоворот Вашего сайта. Смотря в Internet «крутые» сайты, например, Лувра или Эрмитажа, можно заметить, что их первые страницы содержат только большую картинку и красивую графическую вывеску. Плохо, если так же будет построена первая страница личного web-сайта. Большая, долго загружаемая фотография, помпезная вывеска о том, что это сайт дяди Васи, и предложение отправиться дальше только отпугнет посетителей. Дизайн сайта тоже рождается на бумаге. Хороший дизайн – это оптимальное соотношение между качеством (красотой) и скоростью загрузки страниц. Любая страница вместе с графикой должна весить не более 150 Кб и загружаться менее, чем за минуту. Включение каждого элемента, в том числе анимационных роликов, Java-апплетов, скриптов должно быть оправдано необходимостью пользователю. «Скромность и ясность» – вот девиз начинающего дизайнера. Человек не любит бегущие строки, особенно те, на которых текст бежит слишком быстро. Каскад окон, открывающихся вместе с сайтом. Музыкальное сопровождение загрузки страницы. Контрастные цвета и мерцающий текст, утомляющие глаза. Перечисленные методы грубо привлекают внимание и не вызывают желания побыть на сайте подольше или вернуться еще раз. Для того чтобы сайт воспринимался целостно, каждая его страница должна быть оформлена в одном стиле. Смысл использования цветов, способов оформления фраз и абзацев не должен меняться на разных страницах. Цветовая схема сайта отнимает много сил и времени у начинающего дизайнера. Известны несколько приемов подбора хорошо сочетающихся цветов. Весь спектр цветов в палитре можно представить в виде цветового колеса, которое помогает понять основные принципы гармонии и контраста. В цветовом круге рассматривается только один параметр цвета – его тон, определяющий название цвета. Другой параметр цвета – яркость. Яркость определяет светлый цвет или темный. Чем больше белой составляющей в цвете, тем выше его яркость; увеличение черной ведет к ее понижению.
4
Рассмотрим несколько методов подбора цветов. 1. Насыщенные дополнительные цвета контрастируют друг с другом и создают сочетания, которые сразу бросаются в глаза. 2. Приятнее смотрятся оттенки двух контрастных цветов (при низкой яркости). 3. Хорошо сочетать один цвет с двумя другими, смежными с дополнительными цветами к нему. 4. Для выделения деталей можно использовать белый или черный цвет. 5. Красивые палитры получаются при вписывании в цветовое колесо правильных многоугольников. Например, хорошо выглядят триады – тройка цветов, делящих цветовое колесо на три равные угловые части. 6. Смежные цвета применяют в четких цветовых схемах. Использование 25 % оттенков смежных цветов создают приятную пастельную цветовую гамму. 7. Сочетание ярких цветов с черным производит сильное впечатление. Обычно ярким цветом выделяют детали, а остальные цвета приглушают. Цветовая схема сайта должна дополнять содержание, создавая приятную и понятную среду для работы с ним. Можно использовать естественные цветовые ассоциации. Например, для фона сайта общества охраны природы можно использовать оттенки зеленого. Цвета обычно подбираются в зависимости от аудитории, на которую рассчитан сайт. Например, для молодежи более подходят яркие цвета, чем для старшей части населения. Мужчины предпочитают синий цвет красному, а женщины – наоборот. Темный текст на светлом фоне воспринимается намного лучше, чем светлый текст на темном фоне. Элементы web-страницы должны восприниматься целостно и складываться в гармоническую картинку. Понятно, что посетители, попав на Ваш сайт, не будут осознанно размышлять о гармонии элементов сайта, но подсознательно в первые секунды загрузки сайта пользователь принимает решение: останется он здесь или отправится дальше. Композиция в web-дизайне – это сочетание элементов изображения. Например, соотношение их размеров, сочетание цветов. Рассмотрим несколько правил для создания хорошей композиции. Целостность – все элементы связаны друг с другом (стилем, выравниванием, цветами), и каждый элемент гармонически вписывается в общую
5
картину. В целостной композиции дизайн страницы сочетается с логотипом (уникальный значок вашего сайта). Выразительность заключается в том, что дизайн захватывает внимание посетителя. Это оценка качества идеи дизайнера и найденной формы ее реализации. Выразительно могут выглядеть, например, хорошо подобранные контрасты по цветам, светлоте и размерам. Заголовок может быть ярче и больше по высоте, чем текст. Выявление центра – акцент на элементах, выражающих главную идею. Обычно центр находится чуть выше середины экрана. Некоторые дизайнеры смещают центр в сторону ярким контрастным элементом. Иногда элементы композиции вписывают в простую геометрическую фигуру: правильный многоугольник, ромб, круг, овал. Центр этой фигуры считают центром композиции. Неоднородность восприятия элементов в зависимости от их положения на экране. Экспериментально установлено, что: • наклонные отрезки воспринимаются уходящими вдаль – в сторону конца отрезка, дальнего от края экрана. Если конец отрезка примыкает к краю экрана, то подобный эффект пропадает; • предмет, близкий к краю экрана, воспринимается лежащим на поверхности, иначе – в глубине; • верх композиции должен быть более легким (менее насыщенным большими красочными элементами), чем низ. Например, большие буквы вверху страницы с текстом создают напряженность – подсознательное ощущение падения. Плохо сочетаются на одной странице рисованные и фотореалистические изображения. Нужно стараться включать в web-страницу только значимую, нужную для пользователя графику, связанную по смыслу с содержанием. При включении в web-страницы графических файлов обычно используют форматы gif и jpg, сжимающие изображения. GIF поддерживает 256 цветов, сжимает изображения без потери качества. JPG кодирует 16,7 млн цветов, может приводить к потерям качества (смазывать четкие линии). Размер одного и того же файла в формате jpg меньше, чем в gif. Форматы gif и jpg в очередной раз вынуждают делать выбор в пользу качества или скорости. Форматы типа bmp не подходят для представления в Internet, поскольку не предусматривают компрессии и, следовательно, картинка будет долго считываться. Фотографии часто размещают в формате jpg при соотношении качества к весу в 60–70 %. Как правило, на странице фотографии делают маленькими и не очень качественными с предоставлением пользователю возможности посмотреть увеличенный и улучшенный вариант фотографии. Тем самым создатели сайта не навязывают большие по весу фотографии, а пре6
доставляют пользователю решить самостоятельно – нужно ему это или нет? Дизайнеру приходится постоянно думать о том, что вид разработанного им сайта, возможно, будет изменен на ПК пользователя из-за разницы в аппаратуре и программах. Программы-браузеры, в том числе Netscape Navigator и Microsoft Internet Explorer, при выводе графики могут изменять палитру цветов из-за фиксированных возможностей монитора или системы. При этом идеально гладкие цвета могут стать шероховатыми, что не очень хорошо для концепции дизайна. Существует безопасная таблица цветов, в которую входят 216 цветов (дана их раскладка в шестнадцатеричной системе по палитре RGB), неизменяемых ни в Internet Explorer, ни в Netscape Navigator, ни в Windows, ни на Macintosh. Если на большей части страницы будет использован цвет из безопасной таблицы, то сама страница будет выглядеть более привлекательно. На момент написания этих строк безопасную таблицу цветов можно было найти по адресу www.artlebedev.ru/tools/colors и др. Еще одно обстоятельство, способное исказить вид web-страницы, состоит в разных размерах мониторов и разрешающих способностей видеоадаптеров ПК пользователей. Считается, что в мире на сегодняшний день большинство 15 дюймовых мониторов. Самая распространенная разрешающая способность 800 × 600 пикселей. Многие дизайнеры предпочитают создавать «резиновый» дизайн, в котором ширина элементов задается в % от ширины окна браузера. Имейте в виду, что моветоном является вынуждать пользователя прибегать к горизонтальной полосе прокрутки. Аккуратно оформленные страницы получаются при использовании таблиц с невидимыми границами. Однако следует помнить, что таблица отображается на экране, только когда она загрузится целиком, поэтому лучше не паковать все на странице в одну большую таблицу. Внешний вид web-сайта иногда можно улучшить при разбивке страницы на фреймы. Фрейм, или кадр, – это подокно, расположенное на web-странице. В кадрах отображаются другие web-страницы, поэтому каждый кадр загружается отдельно. Каждый кадр может иметь свои полосы прокрутки. Кадр называется статическим, если его содержание постоянно и динамическим в противном случае. Статические кадры часто используют для предоставления пользователю удобных навигационных средств, которые не нужно каждый раз подгружать заново. В динамический кадр подгружаются разные страницы в зависимости от выбора пользователя. Моветоном считается оформлять у себя ссылки на чужие сайты так, чтобы
7
чужие сайты открывались в вашем динамическом фрейме. Плохо выглядят много мелких фреймов на странице. Гиперссылка может находиться в одном из трех состояний: еще не просмотренная, активная (выбранная в данный момент), уже просмотренная. Стандартными цветами для отображения состояний текстовых гиперссылок являются соответственно синий, красный, фиолетовый. Часто стандартные цвета изменяют, подстраивая под дизайн. Цвета для всех трех состояний должны быть разными: для просмотренных гиперссылок темнее, чем для непосещенных. Желательно помнить, что подчеркнутое начертание в web часто обозначает ссылку. Поэтому лучше не использовать подчеркивание для выделения фрагментов текста. В браузерах пользователей может быть установлена разная кодировка текста. Не все посетители при этом загорятся желанием найти ту единственную, для которой написан сайт. Сайты с дружественным интерфейсом дают возможность выбрать кодировку для отображения сайта. Если в предполагаемую аудиторию посетителей сайта входят иностранцы, то нужно иметь несколько версий сайта на разных языках. Минимум – две версии: русскую и английскую. Признаком хорошего тона в web-дизайне является предоставление пользователю возможности написать письмо создателям сайта. Часто в сайт включают специальную страницу – гостевую книгу, в которой публикуются присланные отзывы и корректные ответы на них. Особое внимание нужно обращать на грамотность. Грамматические ошибки отталкивают от сайта даже больше, чем плохой дизайн. Когда шаблоны содержания и дизайна сайта готовы, приступают к написанию кода. В следующих частях этой лабораторной работы мы познакомимся с распространенным языком написания web-страниц – html. Лучше не хранить файлы, имеющие отношение к сайту, в навалку, а сразу завести несколько каталогов – для кодов web-страниц, рисунков, фотографий, архивов и т. п. Все имена файлов, связанных с сайтом, нужно именовать под DOS. Полные имена файлов нужно писать маленькими буквами. Помните о том, что большая часть пользователей и серверов Internet базируется на Unix. Unix в отличие от Windows вкладывает разный смысл в трактовку больших и маленьких букв в полных именах файлов. Ясно, что при некорректно распознанных ссылках вместо логотипа, например, посетитель увидит пустой квадратик. Если посетитель решит сделать закладку в своем браузере на Ваш сайт, то закладкой будет служить название web-страницы в строке заголовка, а не файла с текстом страницы. Непродуманные или стандартные названия (index, например) портят общее впечатление.
8
Из готовых к публикации страниц желательно убрать все комментарии. Уменьшится объем страницы, и пользователь будет лишен необходимости знакомиться со словесными характеристиками Ваших творческих усилий. Все картинки нужно снабжать альтернативным текстовым описанием для пользователей, работающих с отключенной графикой. Чтобы картинки занимали положенное место на странице, их масштабируют, задавая фиксированную ширину и высоту. При написании кода web-сайта следует включать в код METAинформацию. Поисковые серверы при регистрации web-сайта или страницы используют информацию элемента META, где описывается самое главное, связанное со страницей. Поисковые системы индексируют, как правило, из раздела описания 200 символов, из ключевых слов – 1000 символов. В раздел описания включают все наиболее часто встречающиеся на странице термины и их синонимы. В список ключевых слов можно включать фразы. Если ваша фраза совпадет с запросом пользователя на поисковой системе, то сайт может оказаться в начале списка найденных ссылок. Полезно знать, что поисковые системы при формировании поискового списка считают, сколько раз встречается запрашиваемое слово на странице. Поэтому для увеличения рейтинга сайта можно писать ключевое слово в разделе описания несколько раз. После написания кода важно провести всестороннее тестирование созданного сайта. Удобна ли навигация? Корректно ли работают все ссылки? Все ли в порядке с орфографией? Красиво ли выглядит сайт на мониторах с разными размерами и разрешением? И т. д. Лучше, если тестировать сайт будет посторонний человек. Вы будете смотреть на сайт с близкого расстояния глазами создателя. Значимость одних элементов Вы можете преувеличивать, а других недооценивать. Для публикации сайта в Internet можно воспользоваться бесплатными серверами, предоставляющими такую услугу всем желающим. Например, www.narod.ru, www.boom.ru. Часто сотрудникам выделяется часть пространства на web-сервере организации, где они работают. Так, например, студенты и сотрудники ВГУ могут опубликовать свои страницы на сайте ВГУ в разделе Сообщество|Домашние странички (подробнее см. Краткое руководство по размещению домашних страниц). Поддержка web-сайта включает в себя обновление информации (необходимое условие для увеличения посещаемости), работу с письмами читателей, анализ рейтинга сайта, поиск пратнеров и т. п. Рекламная кампания созданного сайта должна проводиться аккуратно, чтобы не иметь обратный результат. Спам (письма всем подряд с предложением заглянуть к вам) надо сразу исключить. Ответной реакцией на спам являются mailbombs (пачка писем размером в мегабайт каждое). 9
Дайте знать о своем сайте поисковым системам и on-line каталогам ссылок. Можно также оставить информацию о вашем сайте (зарегистрироваться в каталогах) на известных российских и зарубежных поисковых системах. Можно попробовать поставить на своем сайте счетчик «Rambler's Top 100», заполнив форму на сайте counter.rambler.ru/top100/. Этот шаг приведет к тому, что ссылка на сайт будет занесена в таблицы рейтинга «Rambler's Top 100» и вам будет сообщаться статистика посещения Вашего сайта. Можно найти популярные сайты со сходной тематикой и написать письмо web-мастеру с просьбой поставить на dас ссылку. Существуют бесплатные баннерные службы. Например, linkexchange.ru, bannerpoint.ru. Смысл баннерной рекламы заключается в вывешивании на чужих сайтах логотипа вашего сайта, являющегося гиперссылкой. Естественно, что чужие баннеры будут показываться на вашем сайте. Подробнее о баннерной рекламе можно почитать на сайте bannermaker.ru. Часто текстовые ссылки действуют на посетителей более убедительно. Баннеры многими воспринимаются как реклама. Хорошо подобранная коллекция ссылок будет привлекательна для гостей сайта. Перед тем как поставить ссылку на другой сайт, спросите разрешение у хозяина сайта. Скорее всего вам отплатят тем же. Лучше не ставить ссылки на конкурентов, а ссылаться на сайты со сходной, но дополнительной к вашей тематике. Web-мастера таких сайтов охотнее поставят ссылку на ваш. С помощью поисковых систем можно найти своих партнеров и конкурентов, а также тех, кто сам решил поставить на вас ссылку. Ключом для поиска может служить адрес вашего сайта. В WWW многие сайты объединяются по концепции web-кольца. Участники кольца ставят ссылки друг на друга по очереди 1→2, 2→3, …, n→1. Кольца часто являются незакрытыми, и можно попробовать стать участником сайта. За рубежом существует сайт http://www.webring.com, поддерживающий более 40 тыс. колец. Рекламная компания будет эффективна только тогда, когда будет создан содержательный и интересный для ваших читателей сайт! Посетители сами расскажут о нем своим знакомым. 2. Общие сведения об HTML Язык HTML в настоящее время является основным языком создания web-страниц? который формирует их внешний вид. Его нельзя ставить в один ряд с языками программирования. HTML обычно просто указывает другим программам (web-браузеру, например), как нужно отображать текст, рисунки и т. п., создает ссылки к другим web-документам. HTML по10
зволяет включать в текст и поддерживать работу объектов, созданных средствами JAVA, ActiveX и др. Web-страницы, написанные с помощью «классической» части HTML, статичны и не поддерживают интерактивный режим работы пользователя. Код HTML – это аналог программы на HTML. Он состоит из тегов. Тег – это стартовый или конечный маркер (метка, признак, указатель) элемента. Теги определяют границы действия элементов и отделяют друг от друга. Стартовый (открывающий) тег – это текст, заключенный в угловые скобки. Он объявляет начало включения элемента в страницу. Например, тег обозначает начало кода страницы. Стартовый тег часто включает значения атрибутов (свойств, параметров, характеристик) элемента. Конечный (закрывающий) тег снабжается косой чертой и обозначает конец действия элемента. Например, тег служит признаком конца кода страницы. Существуют элементы, не имеющие конечного тега. Например, горизонтальная линия включается в страницу только с помощью стартового тега . Если элемент языка HTML является контейнером для других элементов, то он имеет открывающий и закрывающий тег. Значения его свойств оказывают влияние (распространяются, наследуются) на вложенные элементы. Между тегами и расположены два обязательных блока: заглавие и тело страницы. Заглавие располагается между тегами и , а тело – между и . Название страницы включается в заглавие и помещается между тегами <TITLE> и . Тело web-страницы состоит, как правило, из трех основных элементов: текста, образов и гиперссылок. Текст может содержать заголовки (текст со статусом заголовка), абзацы, списки, таблицы. Образы – это графические изображения. Гиперссылки – это текст или образ, клик по которому приводит к переходу на новую страницу или на новый фрагмент текущей страницы. Кроме основных элементов, на странице могут располагаться формы, кадры и др. Любая web-страница имеет следующую структуру (шаблон): <TITLE> Заголовок страницы Тело страницы 11
В служебных словах HTML большие и маленькие буквы несут одинаковую смысловую нагрузку. «Динамическая» часть HTML оживляет web-страницы, позволяя включать объекты, созданные в других приложениях; осуществлять движение и позиционирование объектов, а также встраивать в код страниц собственные обработчики событий – скрипты. Например, при левом клике (событие!) на кнопке «Дальше>>» (объект!) запускается скрипт (обработчик события!), дописывающий в html-код теги с дополнительной информацией. Скрипты выполняются на компьютере-клиенте и создаются на специальных языках написания скриптов – JavaScript и VBScript. Возможности поддержки элементов интерактивности в этих языках практически одинаковы. Netscape Navigator работает с JavaScript и не распознаёт VBScript. Microsoft Internet Explorer работает со скриптами на обоих языках. JavaScript основан на языке программирования Java, который разрабатывался как платформо-независимый язык. Программы, написанные на языке Java, называются апплетами. Текст апплета в отличие от текста скрипта не включается в HTML-код страницы. Апплеты компилируются, а в HTML-коде описываются только параметры ссылки на готовый файл. Апплеты встраиваются в HTML-документ с помощью тега <APPLET>. VBScript представляет собой упрощенную версию языка Visual Basic. JavaScript и VBScript называют еще сценарными языками. Сценарии – это скрипты, состоящие из процедур – обработчиков событий, совершаемых над объектами. Сценарии включаются в HTML-код web-страниц. Общий вид сценария (скрипта) на языке VBScript: на языке JavaScript: <SCRIPT LAN<SCRIPT LANGUAGE=VBScript> GUAGE=JavaScript> Sub ProcedureName() Function ProcedureName() … текст процедуры {… текст процедуры } End Sub … … После добавления сценариев текст на HTML превращается в смесь размеченного текста и кодов-скриптов. Скрипты могут размещаться в любом месте HTML-кода страницы, но, как правило, все скрипты помещают перед тегом . Объектами, для которых пишутся обработчики событий, могут быть элементы «классического» HTML (абзац, список, таблица, рисунок и т. д.). Например, для объекта (элемента) реакцией на событие Onmouse-
12
move (указатель перемещается по объекту) может быть изменение фона или падающий по рисунку снег. Обработчики событий можно писать не только для стандартных элементов, но и для элементов управления Active X, которые внедряются в web-документ с помощью тега . Примерами таких объектов являются Timer (запускающий скрипты в определенные моменты времени), ActiveMovie (проигрывающий аудио - и видеофайлы, в том числе и в режиме on-line), Marquee (прокручивающий файлы HTML в вертикальном и горизонтальном направлениях) и множество других. Каждый объект имеет свои свойства (характеристики). Часто встречающимися характеристиками объектов являются, например, Caption (Заглавие), Color (Цвет), Size (Размер). Объекты обладают специфическими свойствами. Например, объект Document (Документ) обладает свойством LastModified (Дата последнего изменения). Доступ к месяцу последнего изменения документа осуществляется так: Document.LastModified.Month. Программист может описывать и создавать собственные свойства объектов. Для того чтобы добраться до свойства любого объекта, нужно указать через точку все объекты, в которые вложен данный объект, потом название самого объекта и название свойства! Объекты имеют свои методы (способы работы с объектами). Примером метода может служить метод Submit(), отправляющий данные объекта Form (Форма) на сервер. К методам, часто встречающимся у разных объектов, можно отнести Select() (Выбор объекта), Click() (Имитация щелчка). Новые методы может создавать сам программист, описывая процедуры и функции в скриптах или апплетах. Объекты со сходными свойствами и методами объединяют в классы. Например, класс Math включает математические константы (E, PI,LN2,…) и математические функции (Abs(),Exp(),Sqrt(), Max(),…). Доступ к объекту из класса осуществляется, например, так: Math.E.
Рис. 4.1. Фрагмент объектной модели в Dynamic HTML
13
Объекты в Dynamic HTML собраны в иерархическую структуру (см. рис. 4.1). Однотипные элементы (кадры, формы, скрипты) собраны в коллекции (массивы). Первый элемент коллекции имеет номер 0. Организация доступа, например, к 3-й форме 1-го кадра осуществляется так: Frames[0].Forms[2] Объекты верхнего уровня иерархии связаны с вложенными в них элементами (объектами) отношениями «родительскийдочерний». Поэтому все свойства «родительских» объектов наследуются «потомками». Например, атрибут Type (вид маркера списка) стартового тега маркированного списка наследуется каждым тегом
(пунктом списка). На самом верхнем уровне иерархии находится объект Window (окно системы Windows), который обладает рядом свойств – Frames, Document, History, Navigator, Location, Event,… и методов – Open (Открыть), Close (Закрыть) и др. Рассмотрим назначение, некоторые свойства и методы объектов второго уровня иерархии. Полный перечень свойств и методов объектов можно найти в справочниках или в Internet. Объект History состоит из списка адресов web-страниц (гиперссылок), уже просмотренных в данном окне. Методы работы с ним – Forward (Вперед), Back (Назад), Go(n) (Переход в истории на n позиций вправо при n > 0 или влево при n < 0). Объект Navigator хранит информацию об используемом web-браузере. Например, свойство appName возвращает название браузера, а метод java-Enabled сообщает поддерживает ли используемый браузер скрипты на JavaScript. Объект Location содержит информацию о URL-адресе загруженный web-страницы. Свойство Href предоставляет сам адрес, например, http://www.vsu. ru, а свойство Hostname сообщает только имя хоста – www.vsu.ru. Метод ReLoad обновляет текущую страницу. Объект Event сообщает дополнительную информацию о происходящем событии. Свойствами этого объекта являются, например, ScreenX (горизонтальная координата курсора мыши в момент возникновения события), ScreenY (аналогичная вертикальная координата), KeyCode (код ASCII нажатой клавиши). Метод ReturnValue определяет возвращаемое значение для события. Объект Document содержит элементы загруженной web-страницы. Коллекциями этого объекта являются All (все теги и элементы основной части документа), Applets (все элементы управления, рисунки, апплеты, внедренные объекты), Filters (все фильтры – преобразователи вида или появления элементов), Links (все ссылки), Scripts (все скрипты), Images (все рисунки), Forms (все формы). 14
Примеры методов объекта Document – Write (запись текста и HTML-кода в документ), Clear (очистка выделенного участка), QueryCommandEnabled (сообщение о доступности указанной команды). Некоторые события объекта Document – OnClick (левый клик по документу), OnKeyPress (удержание клавиши в нажатом состоянии), OnMouseMove (передвижение курсора мыши), OnMouseOut (курсор мыши выходит за пределы элемента), OnMouseOver (курсор мыши впервые входит в пределы элемента). Пора, наконец, от слов переходить к делу! Следующие части лабораторной работы посвящены исключительно web-программированию. 3. Форматирование текста. Списки. Таблицы. Образы. Гиперссылки Как известно, начинать любое дело лучше всего с того, что вы хорошо знаете. Мы поступим именно так и начнем практическую часть – с вас! С создания вашего личного сайта. Ясно, что сайт, посвященный только себе, любимому, вряд ли будет пользоваться большой популярностью. Подумайте, что вы можете интересного предложить сетевому населению планеты или отдельной его части. Наш проект будет состоять в создании сайта личной библиотеки с текстами песен, открытками и музыкой. Одна из страниц сайта будет содержать информацию о вас – отрывки из вашей CV (Curriculum Vitae), а другая – список ссылок на дружественные сайты. Постановка задачи: написать на языке HTML сайт личной библиотеки, в который входят: 1) главная страница «Библиотека »; 2) вложенная страница «Песни от »; 3) вложенная страница «Открытки от »; 4) вложенная страница «Музыка от »; 5) вложенная страница «CV (избранное)»; 6) вложенная страница «Коллекция личных библиотек». Создайте в своей папке еще одну папку с именем SAIT, в которой вы будете хранить созданные файлы. Заведите в созданной папке каталоги Images, Pictures, Songs. Текст HTML кода можно набирать в простом текстовом редакторе. Например, в приложении Блокнот или во встроенном в NC редакторе текстов (Shift+F4 – создание нового файла). Существуют специальные редакторы тегов HTML, такие как HotDog Web Editor, HotMetal и HomeSite. Специальные редакторы снабжены меню, панелями инструментов, коллекциями скриптов, программами-мастерами и другими деталями, облегчающими процесс создания web-страниц. Существует специальная визуальная среда разработки web-страниц, называю15
щаяся Microsoft Front Page. Редакторы тегов и визуальные среды создания сайтов имеют свои преимущества и недостатки. Для того чтобы успешно использовать специальные редакторы тегов, желательно иметь представление о самом HTML. Целью этой лабораторной работы является знакомство с тегами HTML, поэтому мы будем создавать страницы в простом текстовом редакторе, а не в специальном редакторе тегов. Будем догонять одного зайца! Пример работы 1 посвящен созданию страницы с информацией о вас – «CV (избранное)». Выполнив пример работы 1, мы познакомимся с оформлением заголовка страницы, фона и ссылок, форматированием текста и созданием списков. Вид страницы после выполнения примера работы 1 показан на рисунке 4.2.
Рис 4.2. Web-страница – «CV (избранное)» после выполнения примера работы 1 План примера 1 1–2. Создание файла my_cv.html в папке SAIT. 3–5. Создание макета (пустого шаблона) web-страницы. 6–9. Сохранение web-страницы и ее просмотр с помощью браузера. 10–15. Задание цвета фона, текста и гиперссылок, размера полей. 16–18. Использование готовых стилей форматирования символов. 19. Оформление цитаты в виде абзаца. 20–21. Вставка горизонтальной линии. 22–29. Работа с нумерованным и маркированным списком. Пример работы 1 1. Откройте приложение Блокнот 2. Сохраните файл в папку SAIT под именем my_cv.html
Подсказка Файл⏐Сохранить как… 16
3. Наберите стандартный шаблон web- См. шаблон на стр. 11 страницы Наберите новый заголовок 4. Фразу «Заголовок страницы» страницы между тегами измените на «CV и Фамилия> (избранное)» 5. Удалите фразу «Тело страницы» и вставьте несколько Del, пустых строк между тегами и Enter 6. Сохраните изменения в файле Файл⏐Сохранить Двойной клик 7. Откройте файл my_cv.html 8. Посмотрите на резуль- Строка заголовка браузера содержит название страницы, а рабочее поле – пусто тат своих стараний 9. Закройте браузер. Alt+F4 Познакомимся с некоторыми атрибутами элемента BODY, влияющими на всю страницу и ее элементы. цвет активной ссылки. • ALINK цвет еще непросмотренной ссылки. • LINK цвет уже просмотренной ссылки. • VLINK указание адреса файла, служащего «образцом» фона. • BACKGROUND • BGCOLOR цвет фона документа. цвет основного текста. • TEXT • LEFTMARGIN граница левого поля в пикселах. граница верхнего поля в пикселах. • TOPMARGIN В HTML имеется набор констант цвета (значений атрибутов установки цвета): Indigo (темно-фиолетовый), Purple (пурпурный), Fuchsia (фуксиновый), Maroon (каштановый), Red (красный), Violet (розовый), Orange (оранжевый), Yellow (желтый), Lime (светло-зеленый), Green (зеленый), Teal (сизый), Olive (оливковый), Aqua (аквамарин), Blue (синий), Navy (ультрамарин), Black (черный), Gray (серый), Silver (серебристый), White (белый) и др. Для создания разнообразных оттенков цветов можно указывать интенсивность каналов RGB в нужном цвете. Значение атрибута будет выглядеть так: #RRGGBB, каждая пара цифр – это число в шестнадцатеричной системе счисления, характеризующее интенсивность соответствующего канала. Для фона нашей страницы возьмем цвет из безопасной таблицы цветов, например, светлый оттенок желтого FFFFCC.
17
10. Добавьте в тег Активизируйте Блокнот. Поставьте курсор пе атрибут цве- ред знаком > элемента BODY. Наберите атрибут: bgcolor=#FFFFCC та фона Определим цвета основного текста страницы и трех состояний текстовых гиперссылок. Атрибуты одного элемента в стартовом теге отделяются друг от друга пробелами! 11. Укажите цвет основ- Наберите перед знаком > элемента BODY атного текста страницы рибут text="Navy" 12. Укажите цвета для Наберите перед знаком > элемента BODY аттрех состояний тексто- рибуты link="Blue” vlink="Navy" вой гиперссылки alink="Red" 13. Установите отсутствие Наберите перед знаком > элемента BODY атполей страницы рибуты leftmargin=0 topmargin=0 14. Сохраните изменения в Файл⏐Сохранить файле my_cv.html 15. Посмотрите результат Пример работы 1, пп. 7, 9 Приступим к наполнению нашей страницы содержательной информацией. Вверху страницы оставим немного пространства для логотипа и навигационной таблицы, которые будут созданы позднее. Чтобы информация выглядела красиво на странице, желательно продумать заранее: где будут располагаться названия самых больших разделов (заголовков 1-го уровня), где названия подразделов (заголовков 2-го, 3-го,… уровней), где обычный текст (не имеющий статуса заголовка)? В HTML существует 6 стандартных стилей для выделения уровней заголовков – H1, H2, H3, H4, H5, H6. Заголовок в HTML оформляется, например, так: Текст-заголовок 1-го уровня . Атрибут Align тегов заголовков позволяет выравнивать текст по горизонтали. Значениями этого атрибута являются константы left, center, right. Напишем Ваше имя и оформим его как заголовок 2-го уровня. 16. Присвойте своей фамилии, имени Ваши Фамилия и отчеству статус заголовка 2-го уровня. Используйте шрифт Arial Отчество и 6-й размер шрифта
18
Имя
Элемент FONT позволяет управлять видом фрагмента текста на странице. Этот элемент представляет собой контейнер, поэтому он содержит открывающий и закрывающий теги и ряд атрибутов: указание вида шрифта, которым браузер выводит текст на • FACE экран (при наличии его у пользователя). Параметр – это название шрифта в кавычках; размер шрифта в условных единицах от 1 до 7. «Нормаль• SIZE ным» считается размер, равный числу 3; • COLOR цвет символов. 17. Напишите Cur riculum Vitae Curriculum Vitae (избранное) в статусе заголовка (избранное) 3-го уровня. Используйте раз- ные цвета, шрифт – Arial 18. Посмотрите Пример работы 1, пп. 7, 9 результат Абзац оформляется внутри тегов
и
. При этом программа просмотра отделяет один абзац от другого пустой строкой. Абзац, так же как и заголовки, имеет атрибут Align (выравнивание по горизонтали). Для принудительного перехода на другую строку внутри абзаца используется тег разрыва строки . Этот тег не является контейнером. Расположение строк текста в редакторе при форматировании абзацев браузер игнорирует. Если Вы хотите на экране получить расположение текста на странице такое же, как в редакторе, используйте контейнер .. Форматирование символов позволяет влиять на стиль вывода текста и включает следующие элементы: • TT – вывод текста шрифтом с фиксированной шириной; • B, I, U – полужирное, курсивное, подчеркнутое начертание; • STRIKE – перечеркивание текста; • SUB, SUP – нижний и верхний индекс; • BIG, SMALL – увеличение или уменьшение размера текста. Элементы форматирования являются контейнерами и требуют закрывающего тега!
19
Разместим на web-странице цитату из песни В.С. Высоцкого «Мы все живем как будто»: Средь суеты и кутерьмы. Ах, как давно мы не прямы! То гнемся бить поклоны впрок, а то завязывать шнурок.
19. Оформите Средь суеты и кутерьмы цитату как аб- ах, как давно мы не прямы! зац. Исполь зуйте разные То гнемся бить поклоны впрок, стили формаа то <SMALL> завязывать тирования шнурок. символов
Познакомимся еще с одним элементом, не требующим закрывающего тега. – горизонтальная линия. Приведем ряд атрибутов тега . • •
ALIGN WIDTH
• •
SIZE COLOR
Выравнивание по горизонтали. Длина линии в пикселях или в % от ширины окна браузера. Толщина линии в пикселях. Цвет линии.
20. Подведите под цитатой красную черту толщиной в 2 и длиной в 500 пикселей 21. Посмотрите результат Пример работы 1, пп. 7, 9 Контейнер позволяет делать отступы для текста от левого края страницы. Группа вложенных элементов Blockquote формирует группу отступов. Познакомимся с двумя видами списков: нумерованным и маркированным. Перед каждым пунктом списка располагается стандартный тег
. Заголовок списка предваряется тегом . Нумерованный список располагается в контейнере и имеет ряд атрибутов: • START установка начального маркера в списке; вид маркера списка. Значения: A(a) – прописные (строч• TYPE ные) буквы, I(i) – большие (маленькие) римские цифры, 1 – арабские цифры.
20
Маркированный список содержится в контейнере
. Вид маркера меняется атрибутом TYPE, имеющим значения Disk,Square,Circle. Оформим избранные сведения из автобиографии в виде списка. 22. После тега красной линии начните нумерованный список 23. Установите 2 отступа для тела спи ска 24. Наберите пункты
Возраст: 22 года 5 мес. списка. Каждый
Адрес: город N. пункт списка состо-
Образование: высшее (почти) . ит из стандартного заголовка, выде-
Ученая степень: очень ленного полужир- хочу! ным стилем, и ин-
Должность: Webдизайнер. формации про вас 25. Закройте контей- неры отступа 26. Закройте тег списка 27. Посмотрите результат Пример работы 1, пп. 7, 9 28. Посмотрите разПример работы 1, п. 21. ные маркеры нуме- TYPE=I или TYPE=A или TYPE=a или TYPE=1 рованного списка 29. Переделайте нуИзмените элемент OL на UL (Пример работы 1, мерованный список пп. 21, 25). Установите вид маркера: TYPE=Disk в маркированный или TYPE=Square или TYPE=Circle Списки одного и разного типов могут включаться друг в друга и образовывать многоуровневые списки. Попробуйте! Панель навигации по сайту оформим в виде таблицы, залитой светлозеленым цветом и растягивающейся на весь экран в зависимости от разрешающей способности монитора.
Рис. 4.3. Верхняя навигационная таблица с логотипом сайта
21
Контейнером таблицы является
. Рассмотрим ряд атрибутов этого элемента: Толщина рамки таблицы в пикселях. • BORDER Цвет границы таблицы. • BORDERCOLOR • WIDTH (HEIGHT) Ширина (высота) всей таблицы либо в пикселях, либо в %. Размер пустого пространства вокруг данных в • CELLPADDING ячейках. Отступ в пикселях от границы до ячеек. • CELLSPACING Горизонтальное выравнивание таблицы в окне • ALIGN браузера. Цвет заполнения (заливки) фона таблицы. • BGCOLOR Новую строку таблицы предваряет тег
. Ячейки с заголовками столбцов или строк таблицы оформляются с помощью тега
. Новая ячейка с обычным текстом объявляется тегом
. Все три элемента не требуют закрывающего тега. Изменить выравнивание в отдельной строке и ячейке можно с помощью атрибутов Align и Valign (выравнивание по вертикали). Атрибут Valign может принимать значения top (по верхнему краю), bottom (по нижнему краю), middle (посередине). Элемент задает название таблицы. Для тега атрибут Valign может принимать значения top и bottom. Чтобы объединить ячейки в одной строке, используется атрибут Colspan=n тегов
или
. Для объединения ячеек в одном столбце применяется атрибут Rowspan тех же тегов. В примере работы 2 мы закончим создание страницы «CV (избранное)». Здесь мы познакомимся с оформлением таблиц, создадим рисунок – логотип сайта и включим его в таблицу, добавим гиперссылки. Вид страницы после выполнения примера работы 2 показан на рис. 4.4.
22
Рис. 4.4. Web-страница – «CV (избранное)» после выполнения примера работы 2 План примера 2 1–6. Создание макета навигационной таблицы. 7–8. Добавление в ячейку таблицы логотипа сайта. 9. Создание текстовых гиперссылок на другие страницы сайта. 10–14. Оформление внутренней гиперссылки. 15–17. Предоставление возможности написать электронное письмо. 15–17. Предоставление возможности написать электронное письмо. Пример работы 2 Подсказка 1. После тега онную таблицу
2. Задайте одну строку таблицы
3. Оставьте первую ячейку для логотипа.
Поэзия 4. Остальные ячейки в строке оформите в
Музыка стиле заголовков. В ячейки добавьте
Открытки
Об текст для перехода на другие страницы авторе
Cсылки сайта 5. Закройте контейнер таблицы 6. Посмотрите результат Пример работы 1, пп. 7, 9 В первую ячейку таблицы включим рисунок – логотип сайта, клик по которому будет открывать главную страницу сайта. Логотип может быть использован и в баннерной рекламе. В нашем проекте мы будем создавать простые рисунки и пользоваться готовыми коллекциями рисунков, поскольку преследуем учебные цели. 23
При подготовке сайтов, которые будут опубликованы в Internet, лучше надеяться на собственные силы и быть изобретательнее. Помните, что закона об авторских правах никто не отменял! До выполнения следующих пунктов примера работы 2 нарисуйте логотип сайта. Рисунок сохраните в папке Images под именем logo.gif. Логотип на рис. 4.3 создан в Paint с помощью инструментов Надпись и Заливка. Значок является символом шрифта Wingdigs. Желательно не масштабировать рисунок на странице с помощью атрибутов WIDTH и HEIGHT. Слишком большой немасштабированный рисунок не украсит таблицы навигации, а при масштабировании возможно искажение изображения. В нашем примере размеры логотипа – 102 × 37 пикселей. В Paint можно посмотреть размеры файла в пикселях через Рисунок⏐ Атрибуты… Работать с образом (графикой, картинкой, изображением) в HTML позволяет тег , имеющий ряд атрибутов. Указание имени графического файла. Значение – путь в • SRC кавычках. Если путь к файлу не указан, то образ ищется браузером в каталоге, содержащем web-страницу. • HEIGHT, Высота и ширина образа в пикселях. Если атрибуты не совпадают с настоящими размерами образа, то происхоWIDTH дит автоматическое масштабирование картинки. Ширина рамки вокруг образа в пикселях. • BORDER • VSPACE, Отступы в пикселях (по вертикали и горизонтали) от края образа до кромки текста. HSPACE Вид расположения текста рядом с образом. • ALIGN Атрибут Align элемента Img может иметь одно из пяти значений. Top – текст расположен по верхнему правому краю образа. Middle – текст расположен по середине образа. Bottom – текст расположен по нижнему правому краю образа. Left – текст обтекает образ справа (образ прижат к левому краю окна). Right – текст обтекает образ слева (образ прижат к правому краю). 7. В первую ячейку таблицы вставьте рисунок logo.gif. Укажите высоту и ширину образа. Установите нулевые отступы. Задайте выравнивание текста. Сделайте альтернативный текст
Наберите код после первого тега
24
8. Посмотрите результат
Пример работы 1, пп. 7, 9. Обратите внимание на всплывающую подсказку, появляющуюся при удержании курсора мыши на логотипе
Для того чтобы созданная нами таблица действительно стала бы таблицей навигации, необходимо добавить в нее гиперссылки. Гиперссылка состоит из двух частей: указателя и адреса. Указатель – это область web-страницы, использующаяся в качестве ссылки. Существует два вида указателей: текстовые и графические. Текстовые указатели обычно представляют собой слова, подчеркнутые прямой линией. Графические указатели могут быть оформлены как картинки, фотореалистические изображения, анимационные ролики и т. п. Вторая часть ссылки – адрес – является адресом web-страницы, которая должна быть загружена при выборе указателя ссылки. Можно ссылаться на файл, расположенный на Вашем компьютере (относительное указание адреса), или на файл, расположенный на другом сервере (абсолютное указание адреса). Ссылка заключается в контейнер , который имеет ряд атрибутов. • HREF Указание адреса web-страницы. Значение – адрес в кавычках. • TITLE Хинт (всплывающая подсказка). Значение – текст в кавычках. • NAME Название места назначения (закладки) внутренней ссылки. Ссылка называется внутренней, если переход осуществляется в пределах той же страницы, где находится указатель ссылки. Признаком того, что ссылка внутренняя, служит знак # в адресе. Чтобы создать графический указатель ссылки, нужно включить тег образа в тег ссылки : Атрибут Href позволяет не только указывать URL-адрес страницы, но и задавать протокол доступа к нужному файлу: Href=“Протокол://адрес” • • • • •
file ftp gopher http mailto
Примеры поддерживаемых протоколов Доступ к файлу на локальном диске. Доступ к файлу по протоколу FTP. Доступ к системе Gopher. Доступ к странице в WWW. Доступ к программе, работающей с электронной 25
• telnet
почтой. Подключение к файлу по протоколу TelNet.
Сделаем в навигационной таблице ссылку на уже созданную страницу my_cv.html. 9. Оформите текст Об авторе Наберите после предпоследнего тега
гиперссылки на эту же Об авторе страницу Для завершения навигационной таблицы создайте пустые web-страницы: library.html (главная страница), texts.html (страница с текстами песен), songs.html (страница с музыкальными файлами), pictures.html (галерея картинок), links.html (коллекция ссылок). Свяжите созданные шаблоны страниц с таблицей навигации! Проверьте, участок кода с созданной таблицей навигации может выглядеть так:
Поэзия
Музыка
Открытки
Об авторе
Cсылки
10. Посмотрите результат
Пример работы 1, пп. 7, 9. Протестируйте все гиперссылки. Возвращайтесь из тупиковых страниц с помощью кнопки Назад браузера
Внизу страницы my_cv.html в таблице оформим внутреннюю ссылку Вверх и ссылку Контактный E-mail автора на установленную программу, работающую с почтой. 26
11. Создайте вверху После тега вставьте тег , обозначающий закладку с именем Top Top – место назначения внутренней гиперссылки 12. Внизу страницы
таблицу
13. Задайте одну строку таблицы
Вверх строки поместите внутреннюю ссылку
Контактный 15. Во вторую E-mail на E-mail автора
16. Закройте контейнер таблицы 17. Посмотрите Пример работы 1, пп. 7, 9. Протестируйте ссылки! результат Рис. 4.5. Нижняя навигационная таблица На следующих страницах сайта нам встретятся элементы, указанные в заголовке части 4.4. 4. Каскадные таблицы стилей (CSS). Глоссарий. Кадры. Изображения-карты Как Вы уже успели заметить, работать с текстом с помощью элемента FONT грустновато. Каскадные таблицы стилей позволяют описать в отдельном файле все стили форматирования разных элементов (абзацев, списков, рисунков, таблиц и т. д.), а затем использовать готовые стили в HTML-коде. Тем самым процесс форматирования отделяется от содержания документа. Каскадная таблица стилей – это отдельный файл, либо контейнер <STYLE>, внутри которого содержится описание стилей оформления разных элементов. Чтобы не увеличивать размеры страниц, обычно таблицы стилей пишут в отдельном файле и используют его для всего сайта. Описания в таблице стилей называются селекторами и выглядят так: ТЕГ {Свойство:Значение} Например, красный цвет для всех заголовков H1 можно задать с помощью селектора H1 {Color:Red}. 27
Можно группировать несколько элементов с одинаковыми свойствами. Указать красный цвет заголовков 1-го, 2-го, 3-го уровней можно так: H1,H2,H3 {Color:Red}. При задании значений нескольких свойств одного элемента, описания внутри фигурных скобок разделяются точкой с запятой! При размещении таблиц стилей внутри документа в разделе заголовка страницы пишется контейнер <STYLE>, в который помещаются селекторы. Имейте в виду, что старые браузеры не поддерживают таблиц стилей и все содержимое контейнера <STYLE> отображают как текст на странице. Чтобы избавиться от описанного эффекта, все селекторы помещают в теги комментария. Например, так: <STYLE TYPE=”text/css”> В примере работы 3 мы создадим страницу links.html. Здесь мы познакомимся с применением таблиц стилей к оформлению цвета, фона и списков. Мы скопируем на страницу links.html навигационные таблицы. Поверх одноцветного фона страницы слева мы положим вертикальную полосу размноженных рисунков (см. рис. 4.6). Список ссылок оформим с элементами списка определений (глоссария). Научимся ставить фрагмент страницы в нужное место экрана. Помните, что лучше не менять дизайн страниц сайта! Мы делаем это исключительно в учебных целях. Перед выполнением примера работы найдите или нарисуйте рисунок frends.gif, служащий образцом фона. На рис. 4.6 образцом фона служит рисунок, сделанный из символов шрифта Webdigs. Поместите образец фона в папку Images.
Рис. 4.6. Web-страница – «Коллекция личных библиотек» после выполнения примера работы 3 28
План примера 3 1–3. Копирование навигационных таблиц. Определение атрибутов BODY. 4. Оформление заголовка. 5–6. Включение в маркированный список элементов глоссария. 7–10. Создание таблицы стилей во внешнем файле style.css. 11–12. Подключение таблицы стилей к web-странице и ее тестирование. 13–14. Позиционирование фрагмента страницы. Пример работы 3 Подсказка 1. Откройте страницу links.html Двойной клик. Вид⏐В виде HTML Используйте Бу2. Скопируйте в файл навигационные таблицы и зафер Обмена кладку Top из файла my_cv.html BODY 4. Между таб лицами наИнтересные ссылки на личные библиотеки вигации вставьте за- on-line головок Глоссарий, или список определений, имеет следующий формат (шаблон): Термин Определение термина Маркированные списки допускают использование в них тегов глоссария. Оформим список ссылок как маркированный список, внутри которого есть описания пунктов списка. 5. Сделайте список ссылок на библиотеки
Библиотека Максима Мошкова Одна из самых лучших полнотекстовых библиотек в Рунете
в WWW. Литературный сервер Дмитрия Трибиса Добавьте Библиотека содержит более 10 тыс. описаэлектронных текстов ния
Библиотека Мужика Большая подборка открытых текстов по разной тематике
6. Посмотрите реПример работы 1, пп. 7, 9. Протестируйте зультат ссылки! Обратите внимание на то, что фоновый рисунок автоматически размножается по всей странице. Зададим в файле style.css описания стилей оформления фона и списка. Примеры свойств фона таблиц стилей • background- Цвет фона. Значение – константа цвета или его номер по шкале RGB. Возможно смешение двух цветов: color Цвет1/Цвет2. • background- Разрешение, либо запрет прокрутки фоновой картинattachment ки вместе со страницей. Значения – fixed (запрет), scroll (разрешение). • background- Указание начального положения фоновой картинки. Значения top, center, bottom, left, right. positionX(Y) Управляет повтором фоновой картинки. Значения – repeat • background- (повтор на всей странице), repeat-x(-y) (повтор вдоль одного repeat направления), no-repeat (нет повтора). • liststyleimage • liststyleposition
Примеры свойств списков таблиц стилей Вид маркера списка. Возможно указание адреса картинки, используемой в виде маркера списка. Определение позиции маркера относительно тела списка. Значения inside (внутри), outside (снаружи).
7. Создайте файл style.css 8. Опишите селектор BODY со свойствами фона.
Пуск⏐Программы⏐Стандартные⏐Блокнот BODY {background-color:#FFFFCC; background-positionY:top; background-positionX:left; 30
background-repeat:repeat-y} Свойства будут распространены на всю страницу при ее загрузке UL {list-style-image: disk; 9. Опишите селекlist-style-position:outside} тор UL со свойствами списка 10. Сохраните файл в папку SAIT Файл⏐Сохранить как… 11. Подключите файл Наберите в файле links.html перед тег: с таблицей стилей к 12. Посмотрите ре- Пример работы 1, пп. 7, 9. Сравните с рис. 4.6 зультат Не очень красиво выглядит наложение текста на вертикальную полосу фоновых картинок. Избавиться от такого эффекта можно, научившись ставить текст в нужное место на странице. Примеры свойств таблиц стилей, связанных с положением элемента. Установка вертикальной координаты элемента. • top Установка горизонтальной координаты элемента. • Left • position Вид соотношения элемента и плоскости экрана. Свойство position может принимать одно из трех значений: absolute (элемент движется вместе с фоном), static (элемент неподвижен), relative (положение элемента на странице соответствует положению в исходном коде). Начало координат находится в левом верхнем углу экрана! Контейнером для части элементов страницы служит компонент DIV. Этот тег помечает часть документа как отдельный фрагмент. Атрибуты контейнера распространяются только на вложенные в него элементы. Часто фрагменты используются для определения параметров вывода: положения на странице, отступов, рамок, выравнивания, цвета фона и символов. Тег <STYLE> можно применять к отдельным элементам прямо в HTML коде. Для этого код STYLE=“селектор” записывается как атрибут элемента. В нашем примере поместим заголовок, список и нижнюю навигационную таблицу в контейнер DIV. Сдвинем все элементы контейнера так, чтобы они не накладывались на вертикальную полосу фоновых рисунков.
31
фрагмент стра . . .участок кода ницы с верхним левым углом в точке (80,70) 14. Посмотрите ре- Пример работы 1, пп. 7, 9. Сравните с рис. 4.6 зультат В примере работы 4 мы создадим страницу с открытками. В страницу включим три маленьких фрагмента открыток с подписями слева от них. Маленькие фрагменты расположим в горизонтальный ряд (см. рис. 4.7). Каждый фрагмент будет гиперссылкой на страницу с большим полным качественным вариантом открытки (см. рис. 4.8). В примере работы 4 мы познакомимся с созданием классов в таблицах стилей, со свойствами шрифта и текста, рамки и размера. Перед выполнением примера работы найдите или сделайте три рисунка, которые будут служить открытками. Сделайте также три менее качественных и более «легких» фрагмента этих рисунков. На рис. 4.7, 4.8 вы видите открытки, взятые с сайта postcard.ru из раздела Животные⏐ Кошки.
Рис. 4.7. Web-страница – «Открытки от » после выполнения примера работы 4 План примера 4 1–2. Копирование навигационных таблиц. Определение атрибутов BODY. 3–5. Создание макета таблицы с фрагментами открыток и пословицами. 6–12. Создание стилей Var1, Var2, Var3 и оформление ими текста в таблице. 13. Создания стиля View1 для элемента IMG. 14–17. Включение в таблицу фрагментов открыток в стиле View1. 32
18–19. Связывание фрагментов открыток со страницами с полными вариантами открыток.
Рис. 4.8. Фрагменты Web-страниц с полным вариантом открыток – Cat1.html, Cat2.html, Cat3.html Пример работы 4 Подсказка 1. Откройте страницу pictures.html Двойной клик. Вид⏐В виде HTML Используйте Бу2. Скопируйте в файл атрибуты тега BODY, навигацифер Обмена онные таблицы, закладку Top и ссылку на таблицу стилей из файла links.html Горизонтальный ряд картинок оформим в виде таблицы без обрамления и заполнения. 3. Сделайте отступы
и откройте таблицу
4. Оформите заглавие таблицы как заголоЛучшие открытки сайта postвок 2-го уровня card.ru
5. Создайте строку Чтобы использовать разные стили оформления элементов одного вида (например, текста в ячейках таблицы или рисунков) используют классы. Познакомимся со свойствами шрифта и текста таблиц стилей. • • • •
Примеры свойств шрифта таблиц стилей font-family Вид шрифта. Значение – название шрифта. Размер шрифта в пикселях. font-size Стиль шрифта. Значения – normal, italic, oblique. font-style font-weight «Жирность» текста. Значение параметра должно быть кратным 100. 33
• • • •
Примеры свойств текста таблиц стилей Расстояние между буквами в пикселях. letter-spacing Высота строки текста. Значение – множитель line-height для размера шрифта. Горизонтальное выравнивание текста. text-align Величина отступа от родительского элемента. text-indent
6. В файле style.css TD.Var1 {font-family:Sans Serif;fontsize:19; создайте класс font-style:oblique;font-weight:600; Var1 для элемента color:firebrick} TD 7. Оформите ячейку
Дальние колокола звонкие, приблитаблицы файла picзишься ture.html в стиле к ним – глуше станут Var1 TD.Var2 {font-family:Courier; font8. В файле style.css создайте класс Var2 size:20; font-style:normal; fontдля элемента TD weight:500; color:firebrick} 9. Оформите ячейку табли-
цы файла picture.html в сти- Удачливый в гору ползет, а неудачливый и под гору не катится ле Var2 TD.Var3 {font-family:Fantasy; font10. В файле style.css создай- size:18; те класс Var3 для font-style:italic; font-weight:100; color:firebrick;text-align:center;textэлемента TD indent:5} 11. Оформите ячейку табли-
Маленькие дети – руки болят, цы файла picture.html в большие дети – сердце стиле Var3
12. Закройте таблицу В ячейки созданной таблицы поместим справа от текста фрагменты открыток. В нашем примере это файлы – cat1.jpg, cat2.jpg, cat3.jpg. В таблице стилей сделаем класс IMG.View1, в котором опишем свойства рамки и отступов вокруг рисунков. Примеры свойств рамок элементов и отступов в таблицах стилей • border-color Цвет рамки вокруг элемента. • border-style Стиль рамки. Значения: None, Solid, Double, Groove, Inset, Outset. • border-width Ширина рамки в пикселях. 34
Размер отступа вокруг рамки элемента в пикселях. • margin Расстояние от элемента до рамки в пикселях. • padding Все перечисленные выше свойства можно устанавливать отдельно для четырех сторон рамки. Например, border-top-width, border-right-width, border-left-width, borderbottom-width. 13. Откройте файл style.css и определите стиль класса View1 элемента IMG (стиль рамки и отступов вокруг рисунков на странице picture.html). Сохраните файл 14. В код страницы picture.html после тега
вставьте фрагмент 1-й открытки cat1.jpg 15. В код страницы picture.html после тега
вставьте фрагмент 2-й открытки cat2.jpg 16. В код страницы picture.html после тега
вставьте фрагмент 3-й открытки cat3.jpg 17. Посмотрите зультат
ре-
IMG.View1 {border-top-color:Gold; borderleftcolor:Yellow; border-bottomcolor: firebrick; border-rightcolor:Orange; border-style:outset;borderwidth:5; margin:2; padding:5} Пример работы 1, пп. 7, 9. Сравните с рис.4.7
Предоставим возможность посетителям просмотреть более качественные и полные варианты открыток. Сделайте три новые страницы – Cat1.html, Cat2.html, Cat3.html (см. рис. 4.8). Скопируйте на страницы навигационные таблицы. Под заголовком «Лучшая открытка сайта postcard.ru» 35
расположите большую открытку, оформленную в стиле View1. Для выравнивания открытки по центру страницы используйте элемент DIV. 18. В коде страницы picture.html свяжите фрагменты открыток с созданными страницами Cat1.html, Cat2.html, Cat3.html 19. Посмотрите результат
Заключите теги в контейнер гиперссылки. Пример работы 1, пп. 7, 9. Протестируйте ссылки!
В примере работы 5 мы создадим свою страницу songs.html со ссылками на звуковые файлы. Найдите в Internet три звуковых файла с песнями. В нашем примере – это файлы dolsky_p.mp3 (А. Дольский «Посещение маленького принца»), dolsky_s.mp3 (А. Дольский «Там, где сердце»), vys_m.mp3 (В. Высоцкий «Мы все живем как-будто»). Если подходящих музыкальных файлов у вас не окажется, то для пробы можно взять звуковые файлы Windows в формате *.wav. В примере работы 5 мы создадим многоуровневый список с фамилиями авторов и названиями песен. На страницу положим рисунок с изображением гитары (см. рис. 4.9). План примера 5 1–2. Копирование навигационных таблиц. Определение атрибутов BODY. 3–4. Добавление рисунка и заголовка. 5–6. Создание многоуровневого списка со ссылками на звуковые файлы.
Рис. 9. Web-страница – «Музыка от » после выполнения примера работы 5 Пример работы 5 Подсказка 1. Откройте страницу songs.html Двойной клик. Вид⏐В виде HTML 2. Скопируйте в файл атрибуты тега BODY, навигаци- Используйте Буфер Обмена онные таблицы, закладку Top и ссылку на таблицу стилей из файла links.html 3. На страницу songs.html 4. Положите слева от ри Лучшие песни сунка заголовок 2-го XX века уровня 5. Создайте много-
уровневый нумеро-
Александр Дольский ванный список.
Первый уровень –
фамилии авторов. Второй уровень – Посещение маленького принца mp3 800 Kb названия песен, которые являются ги-
перссылками на звуковые файлы из Там, где сердце mp3 800 Kb каталога Songs. При переходе по
гиперссылке файл
Владимир Высоцна винчестер. После чего его можно бу- кий
дет открыть и
Мы прослушать, если все живем как-будто есть необходимое mp3 800 Kb программное и аппаратное
обеспечение 6. Посмотрите Пример работы 1, пп. 7, 9. Протестируйте ссылки! результат положите рисунок, прижатый к правому краю
В примере работы 6 мы научимся делать страницы с кадрами (отдельными окнами на экране). После выполнения примера работы 6 страница texts.html будет выглядеть, как на рис. 4.10. Страница разбита на четыре кадра. В верхнем и нижнем кадрах расположены таблицы навигации. В кадре слева дана возможность выбора песни для просмотра текста в кадре справа. Верхний, нижний и левый кадр – статичны, их содержимое не меняется. Правый кадр – динамический. Его содержимое пусто при загрузке страницы, а дальше зависит от выбора пользователем названия песни в левом кадре.
37
Для каждого кадра пишется как отдельная web-страница. Страница с кадрами содержит ссылки на созданные заранее файлы.
Рис. 10. Web-страница – «Песни от » после выполнения примера работы 6 План примера 6 1–3. Создание файлов с содержанием статичных кадров. 4–5. Создание четырех файлов – вариантов содержания динамического кадра. 6–18. Разработка и тестирование страницы с кадрами texts.html. Пример работы 6 Подсказка 1. Создайте верх- <TITLE> Песни от ний кадр frame1.html. Для Блокноте страни цу frame1.html, в исправленную верхнюю таблицу
открываться в
Поэзия
Музыка
Открытки
Об авторе
Cсылки
Атрибут Target гипертекстовой ссылки содержит имя кадра, в который будет загружена страница. Имя кадра задается атрибутом Name тега FRAME. Существует 4 стандартных имени кадров (целей назначения гиперссылки), имеющих в HTML определенных смысл. _blank Указанный в ссылке файл загружается в новое окно без названия. _self Файл загружается в кадр, откуда делается вызов. _parent Файл загружается в старший (родительский) кадр. _top Файл загружается в полное окно. При этом разрушается вся структура кадров. 2. Создайте нижний кадр frame4.ht ml. Создайте в Блокноте страницу frame4.ht ml, в тело которой включите нижнюю таблицу
<TITLE> Песни от список с ав
торами и пес Александр нями. НазваДольский ния песен яв
ссылками на Посещение маленького принца соответст
лы с текстаТам, где сердце ми. Атрибут Владимир Target (цель Высоцкий назначения) ссылается на
Dynamic. Мы все живем как-будто Именно такое
имя мы при своим право- му динамическому кадру навигации по сайту
Создадим четыре варианта правого кадра. frame3.html – пустая страница, загружаемая при открытии страницы. frame3_1.html – текст песни «Посещение маленького принца». frame3_2.html – текст песни «Там, где сердце». frame3_3.html – текст песни «Мы все живем как-будто». 40
4. Создайте <TITLE> Песни от файл frame3.ht тую стра ницу со лый.
Посещение маленького принца Но ты качаешь головой, Ты недоволен, мальчик мой,
Что неделимое хочу делить на часАлександр Доль41
ский
Был поздний вечер. Дождь. И вдруг Я слышу в двери легкий стук. В такое время уж пусты дороги, И путники уже не те. Я отворил, и в темноте Стоял мальчишка светлый на пороге.
"Мне нужен друг, - сказал он мне. Ты видел звезды в вышине? Они огромные для тех, кто с ними рядом.
ти. Зачем придумывать другой, Когда под радугой-дугой Прекрасный мир дождей и слез, и счастья.
И лучше пусть измена вновь, Чем вечная полулюбовь. И лучше уж ползком, чем без движенья. Пусть я весь мир не облечу, Взлетать и падать я хочу, И вновь взлетать сквозь силы притяженья.
Припев.
Создайте файлы frame3_2.html и frame3_3.html с текстами песен. HTMLкод почти полностью совпадет с кодом в файле frame3_1.html. Тексты кода песни «Там, где сердце» Александра Дольского и отрывка из песни «Мы все живем как-будто» Владимира Высоцкого даны ниже. Загляделся я в глубь голубейшего полога, И навеки упали в глаза небеса, Мне однажды луна зацепилась за голову И оставила свет свой в моих волосах.
Я ходил по дорогам России изъезженным И твердил я великих поэтов стихи, И шептали в ответ мне поля что-то нежное, Ветер в храмах лесов отпускал мне грехи.
Припев:
Мы все живем как будто, но Не будоражат нас давно Ни паровозные свистки, Ни пароходные гудки.
Иные, те, кому дано, Стремятся вниз и видят дно, Но как навозные жуки И мелководные мальки.
Припев: А рядом случаи летают, словно пули, Шальные, запоздалые, слепые, на излете. Одни под них подставиться рискнули, 42
Там, где сердце всегда носил я, Где песни слагались в груди, Бролит у меня, Россия, И лекаря мне не найти.
Я в рублевские лики смотрелся, как в зеркало, Печенегов лукавых кроил до седла, В Нове-городе меду отведывал терпкого, В кандалах на Урале лил колокола.
От открытий ума стал я идолом каменным, От открытий души стал я мягче травы, Я историю выучил не по алфавитам, Но историки лгут, а поэты правы.
Припев.
Я смотрел только ввысь и вперед, а не под ноги, Был листвою листвы и землею земли. Все ошибки твои, и сомненья, и подвиги Через сердце моё вечной болью прошли.
Если кланяюсь я, то без страха и корысти, И любовь и презренье дарю не спеша, И о Родине вечной, прекрасной и горестной Буду петь я всегда, даже и не дыша.
Припев.
И сразу, кто в могиле, кто в почете.
А мы, так не заметили И просто увернулись, Нарочно поприметили, На правую споткнулись.
Средь суеты и кутерьмы Ах, как давно мы не прямы. То гнемся бить поклоны впрок, А то завязывать шнурок.
Стремимся вдаль проникнуть мы, Но даже светлые умы Все размещают между строк, У них расчет на долгий срок.
Припев.
Стремимся мы подняться ввысь, Ведь наши души поднялись И там парят они легки, Свободны, вечны, высоки.
И нам так захотелось ввысь, Что мы вчера перепились И горьким думам вопреки, Мы ели сладкие куски.
Припев:
43
Страница с кадрами не должна содержать контейнера BODY. Вместо него используется контейнер FRAMESET, задающий структуру кадров на странице. Примеры атрибутов контейнера FRAMESET. Ширина рамки в пикселях. • Border • BorderColor Цвет рамки. Определение числа и размера столбцов. • Cols Определение числа и размера строк. • Rows • FrameBorder Наличие трехмерной рамки. Значения – yes/no. Отдельный кадр определяется тегом . Приведем примеры его атрибутов • Src • Name
Ссылка на файл с содержимым кадра. Имя кадра в HTML-коде. Может использоваться как значение атрибута ссылки Target. • Margin- Отступ по горизонтали от границ кадра до его содержимого (горизонтальные поля). Width • Margin- Отступ по вертикали от границ кадра до его содержимоHeight го (вертикальные поля). • Scroll- Установка полос прокрутки. Значения: yes/no/auto. ing Запрещение пользователю изменять границы кадров. • Noresize Создадим страницу texts.html, показанную на рис. 10. 6. Откройте страницу texts.html 7. Удалите контейнер BODY 8. После тега откройте контейнер FRAMESET
Двойной клик. Вид⏐В виде HTML Delete
В контейнере FRAMESET определены три строки размерами в 10 %, 82 %, 8 % от ширины окна браузера. Зададим значения атрибутам верхнего кадра. 9. Добавьте в контейнер FRAMESET верхний кадр
44
Во вложенном контейнере FRAMESET определим 2 столбца с левым и правым кадрами. параметры столбцов кадра 13. Закройте контейнер кадров-столбцов Обратите внимание на присвоение динамическому правому кадра имени Dynamic. Для завершения работы над страницей осталось определить нижний кадр. кадр-строку 15. Закройте контейнер кадров-строк Для посетителей, браузеры которых не поддерживают страницы с кадрами, желательно делать альтернативную страницу без кадров в контейнере NOFRAMES. 16. Оставьте соК сожалению, Ваш браузер не поддержиобщение для вает пользователей, Кадры :-( браузеры кото рых не поддерживают кадры 17. Закройте контейнер HTML 18. Посмотрите результат Пример работы 1, пп. 7, 9. Сравните с рис. 10 Первую страницу сайта мы создадим в примере работы 7, в которой мы познакомимся с изображениями-картами. Изображение-карта – это образ с активными зонами, являющимися графическими указателями гиперссылки. На рис. 4.11 показан результат выполнения примера работы 7. Картинка, выполняющая роль карты навигации по сайту, сделана средствами Word и графического редактора. В HTML коде файл с изображением-картой называется map.jpg. 45
Рис. 4.11. Web-страница – «Библиотека » после выполнения примера работы 7 План примера 7 1–2. Копирование навигационных таблиц. Определение атрибутов BODY. 3–5. Создание изображения навигационной карты. 6–9. Оформление текста справа от изображения-карты. Пример работы 7 Подсказка 1. Откройте страницу library.html Двойной клик. Вид⏐В виде HTML Используйте 2. Скопируйте в файл атрибуты тега BODY, навигациБуфер Обмена онные таблицы, закладку Top и ссылку на таблицу стилей из файла links.html Контейнером изображения-карты служит элемент MAP. Атрибут Name тега <MAP> определяет название карты для ссылок в HTML-коде. Внутри контейнера MAP каждую активную область карты определяет элемент AREA. Примеры атрибутов тега AREA Определение ссылки для активной зоны изображения• Href карты. Альтернативное описание активной зоны, всплывающая • Alt подсказка. • Coords Координаты, задающие активную зону изображениякарты. • Shape Задание фигуры, являющейся активной зоной. Атрибут Shape может принимать одно из четырех значений. Shape=Circle (активная область – круг). Атрибут Coords=x,y,r содержит координаты центра и радиуса.
46
Shape=Rect (активная область – прямоугольник). Атрибут Coords= x1,y1,x2,y2 содержит координаты левого верхнего и правого нижнего углов. Shape=Poly (активная область – многоугольник). Атрибут Coords= x1,y1,…,xn,yn содержит координаты вершин многоугольника. Shape=Point (активная область – точка). Атрибут Coords=x,y содержит координаты точки. Для определения координат активных зон откройте рисунок с изображением-картой в Paint. Подведите указатель мыши к нужной точке и посмотрите координаты этой точки в правом нижнем углу окна (на строке состояния). 3. Положите на <MAP Name="Karta"> карты (на внутри круга) Контейнер MAP используется совместно с элементом IMG, в котором задается путь к файлу с изображением-картой. Если реакцию на щелчок по карте обрабатывает браузер пользователя, то в тег включается атрибут Usemap = “#Имя_карты”. Если карта обрабатывается программой, расположенной на сервере, то используется атрибут Ismap. 4. Свяжите кон- ке 5. Посмотрите ре- Пример работы 1, пп. 7, 9. Протестируйте ссылки зультат 47
Справа от навигационной карты положим цитату дня и ссылку на тест «Ты – счастливчик?», который полностью мы сделаем в следующей части лабораторной работы. В классах Kl1, Kl2, Kl3 зададим стили оформления текста в абзаце (элемент P). 6. Откройте файл style.css. Для элемента P опишите три стиля текста Kl1, Kl2, Kl3 7. Оформите цитату дня справа от навигационной карты
"Счастлив медведь, что не попался стрелку; Счастлив стрелок, что не попался медведю."
Пословица
Сделайте файл happy.html в который скопируйте атрибуты тега BODY, навигационные таблицы, закладку Top и ссылку на таблицу стилей из файла links.html.
Супер-тест: 8. Оформите ссылку на супер-
"Ты - счастливчик?"
тест 9. Посмотрите ре- Пример работы 1, пп. 7, 9. Сравните с рис. 4.11 зультат 5. Слои, позиционирование и движение объектов. Фильтры Чтобы заставить элемент двигаться, нужно уметь ставить его в любое место на экране независимо от расположения других объектов на странице, т. е. проводить позиционирование элементов. Пример работы 8 будет посвящен началу работы над страницей happy.txt.
Рис. 4.12. Результат выполнения примера работы 8 48
В примере работы 8 мы создадим заголовок теста «Ты счастливчик?» с объемным словом «ТЕСТ», наложением текста «ТЫ» на картинку you.jpg и с пробегающим между фрагментами текста образом «Ловца счастья». Познакомимся со свойством z-index таблиц стилей, позволяющим накладывать элементы на странице друг на друга. Значением этого свойства является номер слоя – порядка наложения элементов друг на друга. Чем больше координата z-index, тем выше приоритет появления слоя на экране. Свойство visibility таблиц стилей отвечает за видимость элемента на Web-странице. Значениями этого свойства являются visible (виден) и hidden (скрыт). План примера 8 1–2. Описание стиля оформления абзаца и его потомков. 3–6. Создание объемного слова «ТЕСТ». 7–8. Наложение текста на картинку. 9–10. Добавление цветного фрагмента и образа «Ловца счастья». 11–22. Прямолинейное движение образа между другими элементами страницы. Пример работы 8 Подсказка 1. Откройте файл happy.html Двойной клик. Вид⏐В виде HTML 2. В контейнере Наберите после тега участок кода: <STYLE> STYLE опишите P {font-family:"Arial Narrow"; стиль оформления font-size:60; color:Violet} текста в абзаце и P.Type1 {color:Fuchsia} двух его потомков другого цвета Type1 P.Type2 {color:Purple} и Type2 3. Оформите в отдель- После кода верхней навигационной таблицы наном фрагменте сти- берите код: лем Type2 (пурпур- ный цвет) слово
ТЕСТ
«ТЕСТ» 4. Наложите сверху си- реневое слово «ТЕСТ».
ТЕСТ
Обратите внимание на приращение координат! дительным наложением слоев
ТЕСТ
мы получили объемный текст! 49
6. Посмотрите результат
Пример работы 1, пп. 7, 9. Сравните с рис. 12
Положим справа от объемного слова «ТЕСТ» картинку (у нас это уменьшенная копия файла из ClipArts), а сверху большое слово «ТЫ». Когда Вы подберете подходящую картинку, ее размеры будут иными, чем в примере работы, поэтому Вам придется подправить местоположение текста и картинки на экране. 7. В атрибуте STYLE тега DIV укажите местоположение и размеры фрагмента, внутри которого располагается текст поверх картинки. Обратите внимание на отрицательные координаты!
ТЫ -
8. Посмотрите резульНажмите кнопку тат
(Обновить) в окне браузера
Атрибут ID служит для идентификации элемента на странице. Значением атрибута ID является придуманное Вами имя элемента. Заставим теперь образ (картинку, лучше анимационную в формате gif) двигаться по экрану. Наш «Ловец счастья» пробежит по экрану, нырнув за фрагмент «счастливчик?». Добежав до края экрана, он развернется и побежит в обратную сторону. «Ловец счастья» будет бегать по экрану, пока посетитель не покинет страницу. Для начала мы включим в страницу два элемента: фрагмент «счастливчик?» с бледно-розовым цветом фона и картинку man.gif. 9. Поместите на странице цветной фрагмент с красным словом «счастливчик?». Свойство zindex этого элемента
счастливчик?
Атрибут Title служит для добавления всплывающей подсказки к элементу. торая будет двигаться по ки, чтобы было красиво! Фильтры – это эффекты, накладываемые на текст и картинки. Статические фильтры видоизменяют объект на web-странице. Примерами статических фильтров без параметров являются fliphH (отражение объекта по горизонтали), flipV (отражение объекта по вертикали), invert (инвертирование цветов и яркости), xray (черно-белое изображение). Ниже приведены примеры статических фильтров с параметрами. Фильтр Blur Wave
Параметры Действие Эффект движущегося объекта (размазывание Add, Direction, четких контуров объекта) Strength Add, Freg, Lightstrength, «Волнистая» деформация объекта Phase, Strength
Фильтры вызываются с помощью свойства filter таблиц стилей. В нашем примере «Ловец счастья» начнет свое движение справа налево. Для того чтобы развернуть картинку при движении в обратном направлении, мы воспользуемся статическим фильтром flipH. Эффект движения достигается традиционным способом: перерисовыванием картинки с новыми координатами. Напишем на языке VBScript простой скрипт из двух процедур HappyLeft и HappyRight, которые вызывают сами себя через 10 миллисекунд и сдвигают в каждый момент времени картинку на 1 пиксель влево или вправо. Когда картинка достигает края, то одна из процедур вызывает другую. 51
Метод SetTimeout «название_процедуры», время в миллисекундах, «язык процедуры» запускает указанную процедуру через заданное количество миллисекунд. Свойства posLeft, posTop, posWidth, posHeight таблиц стилей содержат значения величин Left, Top, Width, Height в числовом формате (без добавки – px). <SCRIPT LANGUAGE=VBScript> 11. Откройте скрипт на языке VBScript setTimeout "Hap12. Запустите процедуру HappyLeft",10,"VBScript" pyLeft Sub HappyLeft 13. Откройте описание процедуры HappyLeft 14. Сдвиньте контейнер Happy на Happy.style.posLeft=Happy.st yle.posLeft-1 1 пиксель влево 15. Если координата Left кон- If (Happy.style.posLeft10) тейнера Happy не равна 10, то Then SetTimeout "Hapповторно вызывается процеpyLeft",10,"VBScript" дура HappyLeft. В противном случае к картинке Man приме- Else man.style.filter="flipH" няется фильтр flipH и вызываsetTimeout "Happyется процедура HappyRight Right",10,"VBScript" End If End Sub 16. Закройте описание процедуры HappyLeft Sub HappyRight 17. Откройте описание процедуры HappyLeft Happy.style.posLeft=Happy.styl 18. Сдвиньте контейнер e.posLeft+1 Happy на 1 пиксель вправо 19. Если координата Left контей- If Happy.style.posLeft650 Then нера Happy не равна 650, то поsetTimeout "Happyвторно вызывается процедура HappyRight. В противном случае Right",10,"VBScript" c картинки Man снимается дейст- Else man.style.filter="" вие фильтра и вызывается проsetTimeout "Hapцедура HappyLeft pyLeft",10,"VBScript" End If End Sub 20. Закройте описание процедуры HappyRight 21. Закройте скрипт 22. Посмотрите Нажмите кнопку (Обновить) в окне браузера результат 52
«Оживляя» внешний вид web-страниц, желательно помнить о чувстве меры. Вряд ли кому-нибудь из нас придёт в голову надеть на себя сразу все украшения из ювелирного магазина и выйти в таком виде на всеобщее обозрение. Страница happy.html уже после примера работы 9 содержит украшений больше, чем достаточно для одной страницы. Кроме статических фильтров существуют динамические фильтры, которые накладывают эффекты на появление или исчезновение элементов на странице. Существует два вида динамических фильтров. Фильтры вида blendtrans проявляют (убирают) объект на экране за указанный Вами интервал времени. Фильтры вида revealtrans позволяет также выводить объект за заданное время, но при этом объект появляется (исчезает) одним из 23 возможных способов. Приведем список всех таких способов: Способ появления 0. 1. 2. 3. 4.
Стягивающийся прямоугольник Расширяющийся прямоугольник Стягивающийся круг
Расширяющийся круг Полоса, растущая снизу вверх 5. Полоса, растущая сверху вниз 6. Полоса, растущая слева направо 7. Полоса, растущая справа налево 8. Вертикальные жалюзи 9. Горизонтальные жалюзи 10. Шахматная доска, клетки которой растут по горизонтали 11. Шахматная доска, клетки которой растут по вертикали
Способ появления 12. Множащиеся случайные точки 13. Шторки, сужающиеся по горизонтали 14. Шторки, раскрывающиеся по горизонтали 15. Шторки, сужающиеся по вертикали 16. Шторки, раскрывающиеся по вертикали 17. Лестница, выходящая из левого верхнего угла 18. Лестница, движущаяся из левого нижнего угла 19. Лестница, движущаяся из правого верхнего угла 20. Лестница, движущаяся из правого нижнего угла 21. Множащиеся случайные горизонтальные линии 22. Множащиеся случайные вертикальные линии 23. Случайный выбор способа появления (0–22)
53
Рис. 4.13. Результат выполнения примера работы 9 В примере работы 9 мы будем работать со статическим фильтром и двумя динамическими фильтрами разного вида. Статический фильтр Wave выведет нам искаженное изображение автомобиля (приз нашего теста!) – файл car.jpg. Клик по фрагменту You (картинке с надписью ТЫ-) приведет к медленному появлению под ним второго автомобиля. Клик по фрагменту Transp (цветной транспарант «счастливчик?») выдаст нам третий автомобиль, появляющейся в виде шахматной доски, клетки которой растут по горизонтали (см. рис. 4.13). План примера 9 1. Наложение на фрагмент статического фильтра с параметром. 2–3. Применение динамического фильтра revealtrans, проявляющего фрагмент заданным способом, при возникновении описанного в скрипте события. 4–7. Применение динамического фильтра blendtrans, проявляющего фрагмент заданным способом, при возникновении описанного в скрипте события. Пример работы 9 Подсказка ров статического 54
2. Задайте фрагмент с тем же рисунком, появлением которого будет управлять динамический фильтр revealtrans. До возникновения события, описанного в скрипте (п. 3), картинка не видна на Web-странице
Свойство Visibility тега STYLE служит для управления видимостью элемента на странице. Значение visible этого свойства делает элемент видимым, значение hidden скрытым. 3. Напишем скрипт, который по событию onClick на фрагменте You, запускает динамический фильтр, проявляющий картинку Car2 из фрагмента Prize2 за 20 секунд
<SCRIPT LANGUAGE=VBScript> Sub You_onclick()call Prize2.filters.item(0). Apply() Car2.style.visibility="visible" Prize2.filters.item(0).Transition=1 0 Prize2.filters(0).play(15) End Sub
Процедура You_OnClick вызывается при возникновении события OnClick на фрагменте с картинкой You. Команда call вызывает нужное нам свойство элемента Prize2. Команды filters.item(0) и filters(0) выполняют одинаковое действие: обращаются к нулевому элементу из коллекции filters. Методы applay и play применяют динамический фильтр в течение заданного в скобках количества миллисекунд. Свойство Transition задает номер способа появления элемента на экране. 4. В следующий фрагмент включим ту же картинку, которая будет проявляться динамическим фильтром blendtrans. До возникновения события, описанного в скрипте п. 5, фрагмент скрыт
55
5. Напишем скрипт, ко- <SCRIPT LANGUAGE=VBScript> торый при щелчке мы- Sub Transp_onClick() call шью по фрагменту Transp активизирует Prize3.filters.item(0).Apply() Car3.style.visibility="visible" динамический фильтр, проявляющий картинку Prize3.filters(0).play(15) End Sub Car3 из фрагмента Prize3 за 15 миллисе- кунд 6. Сохраните изменения Файл⏐Сохранить 7. Посмотрите реНажмите кнопку (Обновить) в окне браузера зультат Мы рассмотрели лишь небольшую часть использования Dynamic HTML для «оживления» внешнего вида web-страниц. Dynamic HTML позволяет модифицировать в процессе работы таблицы стилей, создавать псевдособытия и отменять реальные события, осуществлять динамическое позиционирование объектов. С помощью Dynamic HTML можно управлять изменением содержания страницы, конструировать пользовательские диалоговые формы, создавать динамические таблицы, формы и многое другое.
6. Формы. Элементы Active X Возьмемся теперь за сам тест (см. рис. 4.14). Создадим тест в виде формы. Для иллюстрации работы с разными компонентами формы мы оформили варианты ответов на вопросы теста по-разному. Если следовать советам дизайнеров, то оформлять вопросы теста и ответы на них следовало бы по правилу: «Пусть безобразно, но единообразно».
Рис. 4.14. Результат выполнения примера работы 10 56
Все элементы формы помещаются между тегами и . Тег может иметь атрибуты: Name (имя формы), Action (адрес скрипта, принимающего и обрабатывающего данные формы на сервере), Method (указывает способ отправки данных). Значениями последнего атрибута являются Post (информация посылается целиком) и Get (данные пересылаются в системной переменной – не более 255 символов). Какими же элементами можно наполнять контейнер формы? позволяет вставлять визуальные средства сбора информации и стандартные командные кнопки. Установка средства осуществляется атрибутом TYPE, значениями которого являются Text (однострочный текстовый редактор), Password (поле ввода пароля), Radio (радиокнопка – зависимый переключатель), Checkbox (флажок – независимый переключатель), Reset (кнопка очистки формы), Submit (кнопка отправки данных). Кроме атрибута TYPE тег имеет еще ряд атрибутов. Name – имя элемента. Value (значение) для текстовых полей определяет текст, выводимый по умолчанию; для флажков и радиокнопок – значение, возвращаемое скрипту; для командных кнопок – надпись. Size – размер поля ввода в символах. Maxlenght – максимальное число вводимых символов. Checked – активизация радиокнопки или флажка. Контейнер SELEC> предназначен для создания списка опций с полосой прокрутки. Его атрибуты – Name, Size, Multiple (разрешение множественного выбора). Опции списка включаются в список с помощью тега . Атрибуты элемента OPTION – Value, Selected (выделение опции по умолчанию). Контейнер TEXTAREA создает многострочный текстовый редактор. Атрибуты – Name, Rows (число строк в поле), Cols (число символов в строке). Контейнер FIELDSET позволяет объединить группу элементов формы в один блок, обведенный рамкой. Контейнер LEGEND может содержать текст, выводимый в левом верхнем углу рамки. Контейнер BUTTON позволяет делать пользовательские кнопки. служит для размещения надписи рядом с элементом управления. План примера 10 1–3. Вставка однострочного текстового редактора и поля для ввода пароля. 4–9. Оформление группы вопросов и вариантов ответов теста. 10. Предоставление возможности написать комментарий к тесту. 11–16. Вставка стандартных и пользовательских кнопок в форму. 17–19. Добавление элемента Active X. Работа с его свойствами. 57
Пример работы 10 1. Откроем форму 2. Оформим в отдельном блоке однострочный текстовый редактор для ввода имени пользователя. Надпись сделаем шрифтом Courier New, пурпурного цвета. Обратите внимание на то, что атрибуту Name текстового поля установлено значение Im
Подсказка
Наберите Ваше имя блоке. Надпись сделаем шрифтом Наберите пароль атрибуту Name поля ввода 4. В отдельный блок соберем 5. Откроем контейнер блока САМ тест генду 6. Оформим первый во представлять собой 1. Как назвать человека, группу радиокнопок с именем Que1. Изменим знающего цену всему и не знающего ценности ничего? цвет символов в отве тах. молодцом го ответа переменная 58
подлецом 7. Второй вопрос – это оформим как группу 2. Гремит лишь то, что ... флажков с именем изнутри Que2. Переменная Que2 может принимать пусто хо использовать для теста? густо 8. Под третьим во расположим список За счастьем бежит, а оно Que3 из трех оппод ций, первая из коногами ... торых пустая (она и <SELECT NAME=Que3 SIZE=1> отображается в ви димой области спи лежит ска). Пустую оп жужжит цию мы используем для того, чтобы не подсказывать читателю варианта ответа на третий вопрос 9. Закроем блок с рамкой и без нее 10. После теста предос- тавим пользователям возможность оценить строчном текстовом Оцените, пожалуйста, тест редакторе с именем Que1 примет значение V1, при выборе второго ответа – V2
59
Comm (высота – 4 строки, ширина – 60 Мне кажется, что тест ... символов). Текст, ука занный в контейнере выво- дится в поле по умолчанию кнопку But1, позволяющую читателю очистить форму еще одну стан дартную кноп ку отправки данных формы на сервер теперь пользо вательскую просмотра пользователем Результат? результатов теста. Обработчик напишем позже! На кнопку «положите» подходящую картинку 14. Закроем форму 15. Сохраните Файл⏐Сохранить изменения 16. Посмотрите реНажмите кнопку (Обновить) в окне браузера зультат Познакомимся с элементами управления ActiveX, которые представляют собой дополнительную коллекцию объектов, встраиваемых в HTMLдокумент. Элементы управления ActiveX базируются на технологии 60
COM (Составная объектная модель), выросшей из технологии OLE (Связывание и внедрение объектов), примененной в Internet. Поэтому элементы управления ActiveX позволяют включать в web-страницы элементы, созданные в других приложениях. Примерами элементов управления ActiveX являются Chart (рисует диаграммы), Menu (добавляет кнопку, клик по которой открывает меню с опциями, запускающими определенные события), Label (выводит надпись указанного цвета и под заданным углом). В примере работы 10 мы познакомимся с элементом Calendar Control, который добавляет в web-документ электронный календарь (см. рис. 14). Работа с любым объектом управления Active X делится на два этапа: 1. Включение элемента в web-документ. Определение его свойств. 2. Написание программ (скриптов) обработки событий, «понимаемых» объектом. Для встраивания элементов управления ActiveX в HTML-код используется контейнер . Его атрибут ClassID указывает уникальное имя элемента управления. Например, для элемента Label атрибут ClassID = "clsid:978C9E23-D4B0-11CEBF2D-00AA003F40D0". Значения атрибута ClassID элементов можно найти в справочниках. Можно отыскать их в Internet. Можно подсмотреть и во Front Page, выбрав Insert│Advanced│ActiveX Control…, затем вставив выбранный элемент на web-страницу и посмотрев ее HTML-код. Другими атрибутами тега являются, уже знакомые нам, ID, WIDTH, HEIGHT, ALIGHN и другие. Внутри контейнера можно задавать свойства элементов и их значения. Для этого служит тег , определяющий одно свойство. Примеры его атрибутов – NAME (имя свойства), VALUE (значение свойства). Посмотрим на примере, как добавить элемент управления ActiveX в свой web-документ. 17. Поместим элемент в отдельный блок. Укажем уникальный код и размеры элемента Calendar Control. Зададим три свойст-
год, месяц и число, на котором будет открыт наш календарь 18. Сохраните изменения Файл⏐Сохранить 19. Посмотрите Нажмите кнопку (Обновить) в окне браузера результат Объект dt (Date) позволяет работать с текущей календарной датой и временем. Методы getDate(), getMonth(), getYear() выделяют из объекта dt число, месяц и год. А методы getHours(), getMinutes(), getSeconds() – часы, минуты и секунды. Существует визуальная среда ActiveX Control Pad, позволяющая встраивать в удобным графическом интерфейсе элементы управления ActiveX в HTML-файл и располагающая мастером скриптов. 7. Язык написания скриптов VBScript Добавленные на страницу объекты без скриптов – это пустые украшения. Нам пора познакомиться с основами языка VBScript, который очень прост в изучении. В примере работы 11 мы напишем скрипт, который при щелчке на многострочном текстовом поле с именем Comm добавляет в отзыв дату, взятую с электронного календаря, и введенное имя пользователя (см. рис. 4.15). Второй, рассмотренный нами скрипт будет проверять пароль и выводить результаты теста. Скрипт на языке VBScript обычно состоит из процедур. Процедуры обработки событий задаются так: Sub Object_Event Операторы End Sub где Object – идентификатор объекта (значение атрибута NAME или ID), а Event – название события, происходящего с этим объектом.
62
Рис. 4.15. Результат работы скрипта Comm_OnClick Переменные в скрипте могут быть заданы явно и неявно. Если переменная просто появляется в скрипте, то это неявный способ задания. Чтобы определить переменную явно, нужно описать ее с помощью служебного слова: Dim , , …, Если переменная описана в процедуре, то она считается локальной, если перед всеми процедурами скрипта, то глобальной. В VBScript один тип данных – вариант. Вариант может хранить данные разных подтипов, например, Boolean (логический), Integer (целое), Date (дата и время), Null (нулевой), String (строковый) и других. VBScript поддерживает создание многомерных массивов (максимальное число измерений – 60). Описать массив можно, например, так: Dim City(50,3), а добраться до отдельного элемента: City(1,1) = “Воронеж” Математические операции языка VBScript включают в себя арифметические действия +, - , *, /; ^ (возведение в степень), \ (целочисленное деление), Mod (остаток от деления), & (объединение строк). План примера 11 1–5. Вставка скрипта, дописывающего имя пользователя и дату с календаря в поле для комментария. 6–15. Проверка заполнения пользователем полей для ввода имени и пароля. 16–18. Повторный ввод пароля и его проверка. 19–22. Накопление итогового балла в процессе ответов на вопросы теста. 23–25. Вывод результатов теста. 63
Пример работы 11 Подсказка 1. Откроем скрипт перед те- <SCRIPT LANGUAGE=VBScript> гом 2. Скрипт запускается по Sub Comm_onClick Mess=" Мне кажется, что тест ..." клику на объекте Comm &Chr(10)&Chr(13) (текстовое поле для отзыва). Mess – это неявно Mess=Mess&Chr(10)&Chr(13)&Chr(10)&C hr(13) заданная переменная, в Mess=Mess&Document.calendar.day&". которой формируется текст для вывода в поле " Mess=Mess&Document.calendar.month&" Comm. . " Функция Chr() восстанавливает символ по его Mess=Mess&Document.calendar.year Mess=Mess&" " коду. Chr(10) и Chr(13) Mess=Mess&Document.F1.Im.Value возвращают возврат корDocument.F1.Comm.Value=Mess ретки и переход на новую End Sub строку 3. Закроем скрипт 4. Сохраните изменения Файл⏐Сохранить 5. Посмотрите Нажмите кнопку (Обновить) в окне браузера результат В созданном нами скрипте показано, как представить на странице результаты вычислений путем изменения свойства Value элемента. Для некоторых элементов изменять надо свойство Caption. В языке VBScript для общения с пользователем имеются две стандартные функции – MsgBox (“Текст”) и InputBox (“Текст”). • MsgBox (“Текст”) выдает диалоговое окно с сообщением «Текст» и одной кнопкой ОК. • InputBox (“Текст”) выдает диалоговое окно с сообщением «Текст», однострочным текстовым полем для ввода информации и двумя кнопкой ОК и Отмена. Вернемся к нашему примеру работы. Второй, написанный в этом разделе скрипт будет связан с интерпретацией результатов теста. Скрипт запускается по нажатию на кнопку Результат? с ID=Res и представляет собой четыре логические части: 1) проверка заполнения пользователем полей для ввода имени и пароля. Если поля пусты, то выводятся окна с сообщениями о необходимости заполнить поля; 2) предложение ввести пароль повторно в новом диалоговом окне, сравнение его с паролем, введенным в поле Pw формы; 64
3) По мере ответов на вопросы теста в переменной S накапливается по 1 баллу за каждый правильный ответ. Каждый неправильный ответ приводит к потере 1 балла; 4) в случае совпадения паролей (см. п. 2) в новом окне появятся результаты теста. Для проверки заполнения полей формы нам потребуется знакомство с условиями и условными операторами VBScript. Условия можно строить с помощью операций сравнения – =, , , =, is (эквивалентность объектов). В условия можно включать переменные логического подтипа и логические операции – Not (отрицание), And (конъюнкция), Or (дизъюнкция), Xor (исключение), Eqv (эквивалентность), Imp (импликация). В VBScript есть условный оператор и оператор выбора: If Условие Then Select Case Переменная или Свойство Операторы 1 Else Case Значение1 Операторы 2 Операторы ... End If Case Else Операторы End Select Оператор If … Then … Else … проверяет истинность Условия и выполняет одну из двух последовательностей команд: Операторы 1 либо Операторы 2. Оператор Select Case … используется для сравнения значения переменной или свойства с набором возможных значений. Если значения не совпали, то выполняется последовательность операторов, следующая за Case Else. Функция Len() возвращает длину поля. Эту функцию часто используют при проверке заполнения пользователем полей формы. Вернемся к нашему примеру работы. Проверим, заполнил ли пользователь поля для ввода имени и пароля? Если окажется, что поле Im или Pw имеет нулевую длину, то на экран мы выведем окна с предупреждением (см. на рисунке выше справа) и организуем выход из процедуры по команде Exit Sub. 6. Откроем скрипт перед те- <SCRIPT LANGUAGE=VBScript> гом 65
Dim S 7. Зададим явно переменные: S – для Dim Strpass накопления баллов и Strpass – для запоминания повторно введенного пароля S=0 8. Обнулим значение переменной S 9. Откроем процедуру, вызываемую по Sub Res_OnClick клику на кнопке Res If (Len(Document.F1.Im.Value)=0) 10. Проверим заполнение Then MsgBox ("Наберите, пожалуйпользователем поля со ста, свое имя!") свойством NAME=Im для Exit Sub End If ввода имени If (Len(Document.F1.Pw.Value)=0) 11. Проверим заполнение Then MsgBox ("Наберите, пожапользователем поля со свойством NAME=Pw для луйста, пароль!") Exit Sub End If ввода пароля End Sub 12. Закроем процедуру 13. Закроем скрипт 14. Сохраните изменения Файл⏐Сохранить 15. Посмотрите реНажмите кнопку (Обновить) в окне браузера зультат Циклы в VBScript можно разделить на четыре вида. • For … Next используется для повтора последовательности операторов определенное число раз. Структура этого цикла такова: For Счетчик = Начало To Конец Step Шаг Операторы Next Счетчик • For Each… Next похож на предыдущий цикл, но вместо заданного числа повторений этот цикл обрабатывает каждый элемент массива или коллекции. • Do … Loop повторяет последовательность операций пока или до, выполнения или не выполнения заданного условия. Этот цикл имеет два подтипа, в каждом из которых по две разновидности. Do … While Do While Условие Операторы Loop Do Операторы Loop While Условие
Do … Until Do Until Условие Операторы Loop Do Операторы Loop Until Условие
66
Цикл Do … While выполняется, пока условие истинно, а цикл Do … Until – пока условие ложно. • While … Wend повторяет последовательность операторов, пока условие верно. While Условие Операторы Wend Вернемся к нашему примеру работы и организуем повторный ввод и проверку пароля. В текст сообщения включим имя, введенное пользователем в поле формы Im. Наш читатель (Иван Иванович – см. окно VBScript) в качестве пароля взял первые буквы известной фразы (его пароль – первые буквы фразы «Я люблю тебя, Жизнь»). Mess="Введите пароль, " 16. Допишем операMess=Mess&Document.F1.Im.Value торы перед последstrpass=InputBox(Mess) ним тегом If strpassDocument.F1.Pw.Value . СоThen общение, выводиMsgBox("Неверный пароль! Попромое в окне InputBox, формируется буйте еще раз!") Exit Sub в переменной End If Mess. Если пароли не совпадают, то выдается окно с сообщением об этом и процедура Res_OnClick прерывается 17. Сохраните изменения Файл⏐Сохранить (Обновить) в окне браузера 18. Посмотрите ре- Нажмите кнопку зультат Составим скрипты, накапливающие значение переменной S, в зависимости от выбора варианта ответа пользователем. События, меняющие итоговый балл теста, – это активизация радиокнопки из группы Que1, установка флажка в группе Que2, выбор пункта из списка Que3. Все эти действия 67
происходят в результате события OnClick. Ниже в примере работы будет показано, как для радиокнопок и флажков обработчик добавляется прямо в соответствующий тег . Для списка мы напишем отдельную процедуру Que3_OnClick. Чтобы при очистке формы не происходило наложения результатов предыдущих и последующих вариантов выполнения теста, предусмотрим процедуру But1_OnClick, которая будет обнулять переменную S при клике на кнопке «Очистить». молодцом кнопок обработчики подлецом тать правильным, решайте сами! пусто ные обработчики со густо Que2 21. Перед процедурой Sub Que3_onClick Select Case DocuSub Res_OnClick ment.F1.Que3.Value допишем процедуру Case "V0" Que3_onClick, изS=S меняющую итоговый Case "V1" балл теста в зависимоS=S+1 сти от выбранного Case else S=S-1 значения элемента End Select Que3. Для иллюстраEnd Sub ции мы использовали оператор выбора Select … Case Sub But1_onClick 22. После процедуры S=0 Que3_onClick добавим процедуру, обнуляющую End Sub переменную S при очистке формы
68
Итак, мы с Вами подходим к финалу этой работы, выводу результатов теста. В зависимости от значения переменной S, пользователь может получить одно из трех, представленных ниже, окон.
23. Наивысший балл равен 3. Сообщение в окно «Результаты теста» собирается в переменной Mess. Обратите внимание на то, каким образом указывается заголовок окна MsgBox. Если пользователь набрал 1 или 2 балла, то выдается второй вариант сообщения о том, что ему скоро повезет. Во всех остальных случаях появляется известная поговорка о потере счастья. Поскольку мы использовали два вложенных условных оператора, то оба они должны быть закрыты 24. Сохраните изменения 25. Посмотрите результат
If S=3 Then Mess="Молодец, " Mess=Mess&Document.F1.Im.Value& ", Вы – счастливчик!" MsgBox Mess,,"Результаты теста" Else If S>0 Then Mess="Хорошо, " Mess=Mess&Document.F1.Im.Value& ", скоро повезет!" MsgBox Mess,,"Результаты теста" Else MsgBox "Счастье было, да меж пальцев сплыло!" End If End If
Файл⏐Сохранить Нажмите кнопку ра
(Обновить) в окне браузе-
«Миг вожделенный настал» – окончена наша работа, а дальше читаем в стихотворении «Труд» А.С. Пушкина: Что ж непонятная грусть тайно тревожит меня? Или, свой подвиг свершив, я стою, как поденщик ненужный, Плату принявший свою, чуждый работе другой?.. 69
Учебное издание
WEB-ДИЗАЙН. ЗНАКОМСТВО С HTML Практикум для вузов
Составители: Васильев Валерий Викторович, Хливненко Любовь Владимировна
Редактор Ю.О. Сальникова
Подписано в печать 05.06.07. Формат 60×84/16. Усл. печ. л. 4. Тираж 50 экз. Заказ 1085. Издательско-полиграфический центр Воронежского государственного университета. 394000, г. Воронеж, пл. им. Ленина, 10. Тел. 208-298, 598-026 (факс) http://www.ppc.vsu.ru; e-mail: [email protected] Отпечатано в типографии Издательско-полиграфического центра Воронежского государственного университета. 394000, г. Воронеж, ул. Пушкинская, 3. Тел. 204-133. 70