МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РЕСПУБЛИКИ КАЗАХСТАН ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ имени ШАКАРИМА ГОРОДА СЕМЕЙ

МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ
РЕСПУБЛИКИ КАЗАХСТАН
ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ
имени ШАКАРИМА ГОРОДА СЕМЕЙ
Документ СМК 3 уровня
УМКД
УМКД
УМКД 042-39.1.28/03-2013
Учебно-методические
Редакция №1 от
материалы дисциплины
18.09.2013
«Web программирование в
PHP»
УЧЕБНО-МЕТОДИЧЕСКИЙ КОМПЛЕКС
ДИСЦИПЛИНЫ
«Web программирование в PHP»
для специальности: 6M060200 – «Информатика»
УЧЕБНО-МЕТОДИЧЕСКИЕ МАТЕРИАЛЫ
Семей
2013
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
СОДЕРЖАНИЕ
1. Глоссарий
2. Лекции
3. Практические занятия
4. Самостоятельная работа студента
Страница 2 из 109
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 3 из 109
1. ГЛОССАРИЙ
В настоящем УММ использованы следующие термины с соответствующими определениями:
1.1. Аренда сервера (англ. dedicated) - услуги по аренде физического сервера (компьютера),
сконфигурированного под задачи вашего проекта.
1.2. Администратор домена - лицо, на имя которого зарегистрирован домен.
1.3. Веб-сайт (веб-сервер, Web-сайт, Сайт; англ. Web site; Site) - совокупность веб-страниц с
повторяющимся дизайном, объединенных по смыслу, соединенных ссылками и, обычнго, находящихся на
одном веб-сервере.
1.4. Веб-страница (web-page) - страница с информацией, которая размещена в сети Интернет на Веб-сайте.
1.5. Домен (Domain) – это структурная единица сети Internet.
1.6. Интернет (сеть интернет, internet) - глобальная информационная сеть, части которой логически
взаимосвязаны друг с другом посредством единого адресного пространства, основанного на протоколе
TCP/IP.
1.7. Протокол - стандарт, определяющий поведение функциональных блоков при передаче данных.
1.8. Протокол Интернет - набор протоколов (стандартов), разработанный для Интернета:
HTTP - Когда вы смотрите веб-сайт с помощью броузера своего компьютера, кликаете по ссылкам или
делаете поиск - вы используете этот протокол.
SMTP, POP, IMAP - Это основные протоколы, которые позволяют отправлять, получать и просматривать
электронную почту.
FTP - Протокол передачи данных (File Transfer Protocol), предназначен для обмена файлами в интернете.
1.9. Размещение сервера (колокейшн; англ. colocation) - услуга по размещению Вашего серверного
оборудования на телекоммуникационном узле, имеющем высокоскростное подключение к сети Интернет,
обеспечению технических условий функционирования оборудования, таких как стабильное
электропитание, оптимальная температура и влажность, круглосуточный мониторинг состояния.
1.10. Сервер Интернет (Интернет-сервер; англ. Internet Server) - мощный надежный компьютер (сервер),
подключенный к сети, или выполняющаяся на нем программа, предоставляющие клиентам доступ к общим
ресурсам и управляющие этими ресурсами.
1.11. Хостинг (веб-хостинг: англ. hosting, web-hosting) - сдача в аренду пользователю части серверного
пространства и предоставление в аренду программного обеспечения, обеспечивающего функциональность,
безопасность, защиту от хакеров с целью создания пользователем своего веб-сайта, доступного в сети, поддержание бесперебойной работоспособности пользовательского сайта и сервисов (почта, ftp, wap, базы
данных и т.д.) на своих серверах, подключенных высокоскоростным каналом в Интернет
1.12. BBS - электронная доска объявлений (Bulletin board system)
1.13. Bit – бит. Минимальная передаваемая единица информации. Сочетания битов могут указывать букву,
число, передавать сигнал, выполнять переключение или другие функции.
1.14. BPS - бит/с. Бит в секунду или «бод». Мера скорости передачи данных. Например, модем обычно
имеет скорость передачи 56000 BPS
1.15. Browser (броузер, браузер) - программное обеспечение, предоставляющее графический интерфейс для
интерактивного поиска, обнаружения, просмотра и обработки данных в сети. Примером являются такие
программы как Netscape Navigator, Mozilla, Opera, MS Internet Explorer и другие.
1.16. Cern – ЦЕРН. Европейская лаборатория по физике частиц, на узле которой была проведена первая
конференция World Wide Web. Считается местом рождения технологии WWW. Работа над технологией и
стандартами WWW была передана организации World Wide Web (W3O, узел www.w3.org).
http://www.cern.ch/
1.17. Chat – чат. Этот термин описывает множество систем предназначенных для интерактивных
конференций. Примеры таких систем: IRC, ICQ, WebChat, prodigy.
1.18. CGI - Common Gateway Interface является стандартом связи внешней прикладных программ с вебсервером.
1.19. Communication Link - канал связи. Оборудование и программное обеспечение, предназначенное для
связи двух конечных пользователей.
1.20. Compression/Decompression - упаковка/распаковка. Метод кодирования/декодирования сигналов,
который позволяет сжимать данные для передачи или хранения.
1.21. Connection – соединение. Связь между узлами выделенной или коммутируемой цепи.
1.22. Cyberspace – киберпространство. Термин, который был впервые использован в романе "Neuromancer"
Вильяма Гибсона (William Gibson) о прямой сетевой организации искусственного интеллекта и относится к
коллективной сфере компьютерных коммуникаций.
1.23. Download – загрузка. Передача программ или данных с одного устройства на другое. Обычно,
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 4 из 109
подразумевается загрузка с сервера на персональный компьютер.
1.24. FAQ - Frequently Asked Question. Наиболее часто задаваемые вопросы и ответы на них. По-русски
иногда используется термин ЧаВо.
1.25. File Server - файловый сервер. Компьютер, обеспечивающий доступ к файлам для удаленных
пользователей (клиентов).
1.26. Finger - протокол, позволяющий выполнять поиск нужных сведений о пользователях сети данного
узла. Некоторые сети не поддерживают эту операцию.
1.27. Flame – флейм. Жаркие или эмоциональные споры с нарушением правил в форуме или чате.
1.28. Gateway – шлюз. Узел, соединяющий сети. При настройке подключения к Интернет необходимо
правильно указать адрес шлюза.
1.29. GIF - графический формат (Graphics Interchange Format). Это стандартный формат для файлов
изображений в Интернете, в частности на веб-серверах. Формат файлов GIF довольно популярен,
поскольку он использует метод упаковки, позволяющий уменьшить размеры файлов.
1.30. GUI - графический интерфейс (Graphical User Interface). Графический пользовательский интерфейс.
1.31. Home - домашняя страничка. Начальная страница сайта, обычно содержащая сведения описательного
характера.
1.32. HTML (Hyper Text Markup Language). "Основной" язык, на котором написаны страницы для вебсайтов.
1.33. HTTP (hypertext transfer protocol). Протокол, с помощью которого документы передаются с главного
компьютера или сервера на средства просмотра и к отдельным пользователям.
1.34. Hyperlink – ссылка. Связь между различными страничками на веб-сайте.
1.35. Hypermedia – гиперсреда. Метод дискретного представления информации на узлах, соединяемых при
помощи ссылок. Данные могут быть представлены в виде текста, графики, звукозаписей, видеозаписей,
мультипликации, фотографий или исполняемой документации.
1.36. Hypertext – гипертекст. Текст, содержащий ссылки на другие странички, серверы или ресурсы с
возможностями выполнения переходов.
1.37. JPEG, JPG - графический формат (Joint Photographic Experts Group) - популярный метод,
используемый для очень сильной упаковки изображений с потерей качества. Используется
преимущественно для фотографий, поскольку для них потеря качества менее критична..
1.38. Modem - модем (MODulator-DEModulator). Устройство, позволяющее выполнять передачу цифровых
данных с помощью аналоговых систем, например, по телефонной линии.
1.39. Multimedia – мультимедиа. Компьютерные системы с поддержкой звукозаписей и видеозаписей.
1.40. Page – страница. Документ опубликованный на веб-сайте
1.41. PHP является широко используемым языком сценариев общего назначения с открытым исходным
кодом. PHP создавался специально для ведения Web-разработок и может использоваться непосредственно в
HTML-коде.
1.42. PPP (Point to Point Protocol). Протокол для подключения к сети (в том числе к Интернет) удаленных
пользователей, обычно, с использованием модема.
1.43. Site - сайт, узел. Виртуальный или реальный сервер Интернет, открытый для публичного просмотра с
помощью протокола HTTP.
1.44. SSL (Secure Socket Layer) - протокол, используемый для шифрования информации при передаче
между сервером Интернет и компьютером пользователя.
1.45. URL – адрес Интернет (Uniform Resource Locator) - форма записи адреса странички Интернет, в
которой указывается протокол, имя сервера, путь к каталогу файла и собственно имя файла. Например:
http://www.plusweb.ru/index.shtml
1.46. VRML - язык (Virtual Reality Modeling Language). Язык моделирования виртуальной реальности,
предназначенный для форматирования страниц Web для поддержки трехмерной графики и интерактивных
пространственных переходов.
1.47. Webmaster - Web-мастер. Системный администратор веб-сервера. Иногда, веб-мастером называют
дизайнера или программиста, обслуживающего веб-сайт.
1.48. WWW (World Wide Web)- Служба Internet, предназначенная для просмотра текстовой, графической и
мультимедиа информации, обладающая системой ссылок для быстрого перехода от одного документа к
другому.
2. ЛЕКЦИИ
Лекция 1. Принципы гипертекстовой разметки.
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 5 из 109
Содержание лекционного занятия:
 Структура документов.
 Группы тегов НТМL.
Принципы гипертекстовой разметки. Структура документов
За основу модели разметки документов в HTML принята теговая модель. Теговая модель описывает
документ как совокупность контейнеров, каждый из которых начинается и заканчивается тегами. Т.е.
документ НТМL представляет собой не что иное, как обычный АSСII-файл, с добавленными в него
управляющими НТМL-кодами (тегами).
Теги НТМL-документов в большинстве своем просты для понимания и использования, ибо они
образованы с помощью общеупотребительных слов английского языка, понятных сокращений и
обозначений. НТМL-тег состоит из имени, за которым может следовать необязательный список атрибутов
тега. Текст тега заключается в угловые скобки (< и >). Простейший вариант тега - имя, заключенное в
угловые скобки, например <HEAD> или <i>. Для более сложных тегов характерно различие атрибутов,
которые могут иметь конкретные значения, определенные автором для видоизменения функции тега.
Атрибуты тега следуют за именем и отделяются друг от друга одним или несколькими знаками
табуляции, пробелами или символами возврата к началу строки. Порядок записи атрибутов в теге значения
не имеет. Значение атрибута, если таковое имеется, следует за знаком равенства, стоящим после имени
атрибута. Если значение атрибута - одно слово или число, то его можно просто указать после знака
равенства, не выделяя дополнительно. Все остальные значения необходимо заключать в одинарные или
двойные кавычки, особенно если они содержат несколько разделенных пробелами слов. Длина значения
атрибута ограничена 1024 символами. Регистр символов в именах тегов и атрибутов не учитывается, чего
нельзя сказать о значениях атрибутов. Например, особенно важно использовать нужный регистр при вводе
URL других документов в качестве значения атрибута HREF.
Чаще всего НТМL-теги состоят из начального и конечного компонентов, между которыми размещаются
текст и другие элементы документа. Имя конечного тега идентично имени начального, но перед именем
конечного тега ставится косая черта (/) (например, для тега стиля шрифта - курсив <i> закрывающая пара
представляет собой </i>, для тега заголовка <ТIТLЕ> закрывающей парой будет </ТIТLЕ>). Конечные теги
никогда не содержат атрибутов. По своему значению теги близки к понятию скобок "begin/end" в
универсальных языках программирования, которые задают области действия имен локальных переменных
и т. п. Теги определяют область действия правил интерпретации текстовых тегов документа.
При использовании вложенных тегов в документе следует соблюдать особую аккуратность. Вложенные
теги нужно закрывать, начиная с самого последнего и двигаясь к первому. Некоторые НТМL-теги не имеют
конечного компонента, поскольку они являются автономными элементами. Например, тег изображения
<IMG>, который служит для вставки в документ графического изображения, конечного компонента не
требует. К автономным тегам также относятся разрыв строки (<BR>), горизонтальная линейка (<HR>) и
теги, содержащие такую информацию о документе, которая не влияет на его отображаемое содержимое,
например теги <META> и <BASE>.
В некоторых случаях конечные теги в документе можно опускать. Большинство браузеров реализованы
так, что при обработке текста документа начальный тег воспринимается как конечный тег предыдущего.
Самый распространенный тег такого типа - тег абзаца <Р>. Поскольку он используется в документе очень
часто, то его обычно ставят только в начале каждого абзаца. Когда один абзац заканчивается, следуюший
тег <Р> сигнализирует браузеру о том, что нужно завершить данный абзац и начать следующий.
Большинство авторов тегом конца абзаца вообще не пользуются.
Есть и другие конечные теги, без которых браузеры отлично работают, например конечный тег
</HTML>. Тем не менее, рекомендуется включать по возможности больше конечных тегов, чтобы избежать
путаницы и ошибок при воспроизведении документа.
Общая схема построения контейнера в формате HTML может быть записана в следующем виде:
"контейнер" := <"имя тега" "список атрибутов">
содержание контейнера
</"имя тега">
Группы тегов НТМL
Все теги НТМL по их назначению и области действия можно разделить на следующие основные группы
 определяющие структуру документа;
 оформление блоков гипертекста (параграфы, списки, таблицы, картинки);
 гипертекстовые ссылки и закладки;
 формы для организации диалога;
 вызов программ.
Структура гипертекстовой сети задается гипертекстовыми ссылками. Гипертекстовая ссылка - это адрес
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 6 из 109
другого HTML документа или информационного ресурса Internet, который тематически, логически или
каким-либо другим способом связан с документом, в котором ссылка определена.
Для записи гипертекстовых ссылок в системе WWW была разработана специальная форма, которая
называется Universe Resource Locator. Типичным примером использования этой записи можно считать
следующий пример:
Этот текст содержит
<A HREF="http://polyn.net.kiae.su/altai/index.html">
гипертекстовую ссылку</A>
В приведенном выше примере тег "A", который в HTML называют якорем (anchor), использует атрибут
"HREF", который обозначает гипертекстовую ссылку (Hypertext Reference), для записи этой ссылки в
форме URL. Данная ссылка указывает на документ с именем "index.html" в директории "altai" на сервере
"polyn.net.kiae.su", доступ к которому осуществляется по протоколу "http".
Гипертекстовые ссылки в HTML делятся на два класса: контекстные гипертекстовые ссылки и общие.
Контекстные ссылки вмонтированы в тело документа, как это было продемонстрировано в предыдущем
примере, в то время как общие ссылки связаны со всем документом в целом и могут быть использованы
при просмотре любого фрагмента документа. Оба класса ссылок присутствуют в стандарте языка с самого
его рождения, однако, первоначально наибольшей популярностью пользовались контекстные ссылки. Эта
популярность привела к тому, что механизм использования общих ссылок практически полностью
"атрофировался". Однако по мере стандартизации интерфейса пользователя и стилей представления
информации разработчики языка снова вернулись к общим ссылкам и стремятся приспособить их к задачам
управления этим интерфейсом. Справедливости ради, следует отметить, что общие гипертекстовые ссылки
в большинстве браузеров не используются и не отображаются.
Структура HTML-документа позволяет использовать вложенные друг в друга контейнеры. Собственно,
сам документ - это один большой контейнер который начинается с тега <HTML> и заканчивается тегом
</HTML>:
<HTML> Содержание документа </HTML>
Контейнер HTML или гипертекстовый документ состоит из двух других вложенных контейнеров:
заголовка документа (HEAD) и тела документа (BODY):
Рассмотрим простейший пример классического документа:
Компания Netscape Communication расширила классическую форму документа возможностью
организации фреймов (кадров), позволяющих разделить рабочее окно программы просмотра на несколько
независимых фреймов. В каждый фрейм может быть загружена своя страница HTML.
Вопросы для самоконтроля:
1. Адресация в Интернет: ip-адреса и URL.
2. Язык HTML. Символы, теги, элементы, атрибуты.
Рекомендуемая литература:
1. Веб-дизайн/Дмитрий Кирсанов - СПб: Символ-Плюс, 2004-376 стр.
2. HTML 4.0 в подлиннике/Матросов, Сергеев, Чаунин – СПб: BHV, 2000 – 672 стр.
Лекция 2. Контейнеры HTML-документа
Содержание лекционного занятия:
 Теги тела документа
 Теги управления разметкой
 Теги управления отображением символов
 Теги, управляющие формой отображения
 Табуляция
 Списки
 Гипертекстовые ссылки
Контейнеры HTML-документа
Каждая из составных частей документа имеет свой набор контейнеров, которые можно внутри нее
использовать. Контейнеры тела документа не используются в заголовке или в контейнере FRAMSET.
Рассмотрим каждую группу контейнеров более подробно.
Контейнеры заголовка документа НТМL - HEAD
Заголовок документа не имеет атрибутов. Основное назначение тегов заголовка - это описание общих
для всего документа параметров отображения. К таким параметрам можно отнести стиль отображения
документа, общий базовый адрес гипертекстовых ссылок, общие гипертекстовые ссылки, идентификатор и
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 7 из 109
имя документа и т.п. Мы рассмотрим только наиболее часто встречающиеся контейнеры.
ТIТLЕ
Наиболее часто используемым тегом заголовка является имя документа.
ТIТLЕ имеет следующий синтаксис
<ТIТLЕ> Название документа </ТIТLЕ>
Содержание тега ТIТLЕ отображается в поле названия документа.
ВАSE
Тег ВАSЕ связан с формой представления гипертекстовой ссылки в форме URL. Дело в том, что
спецификация URL определяет две формы адресации документов: полную и неполную. НТМL разрешает
использовать как полную форму адреса URL, так и неполную. Но для того, чтобы использовать вторую
форму спецификации, ее надо на чем-то базировать, т.е. задавать базовый адрес, который можно было бы
использовать для формирования полной формы URL из неполной. Тег ВАSЕ позволяет определить эту
базу.
ISINDEX
Возможность поиска НТМL-документа по ключевым словам определяется тегом ISINDEX заголовка
документа. В первоначальной версии языка данный тег не имел дополнительных атрибутов. Если сервер
мог выполнить запрос по ключевым словам, то он автоматически вставлял в заголовок тег ISINDEX.
Список ключевых слов приписывался клиентом к адресу документа после символа "?". Понятно, что
выполнить запрос мог сервер, который при наличии символа "?" превращался в поисковую машину.
НТМL-документ мог быть сгенерирован "на лету" программой, тогда ключевые слова после "?"
приписываются к адресу этой программы. В новой версии языка появилась возможность указать программу
обработки запроса и задать фразу вместо стандартной "SЕАRСН ISINDEX":
<ISINDEX HREF=
"http://polyn.net.kiae.su/cgi-bin/search"
PROMPT="Enter Keywords:">
В приведенном примере атрибут НREF определяет адрес программы обработки запроса, а атрибут
РRОМРТ - содержание приглашения.
МЕТА
Тег МЕТА предназначен для определения в заголовке документа конструкций, отсутствующих в
спецификации НТМL. Имеет три атрибута: NAME, CONTENT, HTTP-EQUIV. Применение данного тега
затруднено тем, что для интерпретации конструкций, которые вводятся через этот тег, необходимо, чтобы
сервер или интерфейс пользователя могли эти конструкции расшифровать и применить. Для такого сорта
работы программа должна иметь интерпретировать конструкции SGML, что практически не реализовано
ни в одной интерфейсной программе. Единственным способом применения данного тега на практике
является включение в заголовок отклика по протоколу НТТР информации, определенной через атрибут
НТТР-ЕQUIV:
<META HTTP-EQUIV="Keywords"
CONTENT="Plsma, Nuclear Physics">
При таком использовании в заголовок НТТР-пакета будет включена строка: Keywords: Plasma, Nuclear
Physics, что удобно при отправке почты.
Теги тела документа
Теги тела документа предназначены для управления отображением информации в программе
интерфейса пользователя. Они описывают гипертекстовую структуру базы данных при помощи
встроенных в текст контекстных гипертекстовых ссылок. Тело документа состоит из:
иерархических контейнеров и заставок;
заголовков (от Н1 до Н6);
блоков (параграфы, списки, формы, таблицы, картинки и т.п.);
горизонтальных отчеркиваний и адресов;
текста, разбитого на области действия стилей (подчеркивание, выделение, курсив),
математических описаний, графики и гипертекстовых ссылок.
ВОDY
Описание тегов тела документа следует начать с тега ВОDY. В отличии от тега НEАD, тег ВОDY имеет
атрибуты:
ID - идентификатор тега. Используется для именования тегов, а также в качестве точки перехода по
гипертекстовой ссылке. Данный атрибут имеется практически во всех тегах тела документа. С точки зрения
практического использования идентификатора ВОDY в качестве точки перехода по гипертекстовым
ссылкам, использование этого атрибута сомнительно, т.к. отображаемая часть документа собственно и
начинается с этого тега.
LANG - определяет язык документа в виде двухсимвольного кода ISO-639, за которым следует через
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 8 из 109
точку необязательный код страны в формате ISO-3166. По замыслу разработчиков стандарта языка данный
атрибут должен распознаваться программами интерпретации и управлять отображением многоязычных
текстов. Однако даже Аrеnа, специально предназначенная для иллюстрации НТМL 3.0, не реализует этой
возможности.
СLASS - иерархически организованное имя типа "ADDITION.FIRST". Предназначено для связывания
тега текста с определенным стилем отображения. Реально пока не используется.
Все три вышеперечисленных атрибута являются общими для тегов тела и в даль нейшем мы их
обсуждать не будем. Если атрибут не будет разрешен для тега тела текста документа, то это будет указано
специально.
ВАСКGROUND - определяет фон, на котором отображается текст документа. В примере НТМLдокумента в качестве фона был использован небольшой графический образ "bgr.gif.
<ВОDY ВАСКGROUND="bgr.gif">
Как видно из этого примера, в качестве значения данного атрибута используется адрес в сокращенной
форме URL. В данном случае это адрес локального файла.
Следует заметить, что разные интерфейсы пользователя поддерживают различные дополнительные
атрибуты для тега ВОDY.
Теги управления разметкой
Заголовки
Заголовки обозначают начала разделов документа. В стандарте определено 6 уровней заголовков: от Н1
до Н6. Текст, окруженный тегами <Н1></Н1>, получается большим - это основной заголовок. Если текст
окружен тегами <Н2></Н2>, то он выглядит несколько меньше (подзаголовок); текст внутри <НЗ></НЗ>
еще меньше и так далее до <Н6></ Нб>. Некоторые программы, позволяют использовать большее число
заголовков, однако реально более трех уровней встречается редко, а более 5 - крайне редко.
Стандарт языка насчитывает 11 атрибутов у тега заглавие. Рассмотрим только АLIGN, т.к. остальные в
большинстве программ интерпретаторов не реализованы.
Для разбиения текста на параграфы используется тег <Р> в нем используются те же атрибуты что и
заголовках.
Атрибут АLIGN. Атрибут АLIGN позволяет выровнять текст по левому или правому краю, по центру
или ширине. По умолчанию текст выравнивается по левому краю. Данный атрибут применим также к
графике и таблицам.
Следующая таблица определяет возможные значения атрибута АLIGN:
Значение Описание применения
Left
Выравнивание по левому краю
Right
Выравнивание по правому краю
Justify
Выравнивание по левому и правому краям
Сеnter
Центрирование
Значение Justify реализовано не во всех программах интерпретации.
Оборачивание
С помощью атрибута ALIGN= вы можете <обернуть> текст вокруг графического объекта. Для этого
поместите тег <IMG SRC="/путь/файл.gif"> в том месте, где должен быть графический объект, и добавьте
атрибут ALIGN=LEFT, ALIGN=RIGHT или АLIGN=CENTER. Кроме того, с помощью атрибутов
НSPAСЕ= и VSPАСЕ= (они описываются ниже ) задается ширина горизонтальных и вертикальных полей,
отделяющих изображение от текста. Можно также создать рамку вокруг картинки или обрамление таблицы
текстом.
Вообще говоря, СLEAR является общим для всех блочных тегов (заглавия, параграфы и т.п.), однако
реализован далеко не для всех из них.. СLEAR может принимать следующие значения:
Значение Назначение
left Пропустить картинку, расположенную у левого края листа
right
Пропустить картинку или таблицу, расположенную у правого края листа
аll Прервать отображение текста перед картинкой или таблицей и продолжить ниже
В атрибуте СLEAR можно указать и численные значения:
<Р СLEAR="100 рiх">
Данная запись означает пустое горизонтальное поле высотой в 100 пиксельных строк.
Тег <ВR>
Принудительный перевод строки используется для того, чтобы нарушить стандартный порядок
отображения текста. При обычном режиме интерпретации программа интерфейса пользователя отображает
текст в рабочем окне, автоматически разбивая его на строки. В этом режиме существующие в тексте концы
строк игнорируются. Иногда для большей выразительности требуется начать печать с новой строки. Для
этой цели и используется тег ВR. Атрибут СLЕАR= в теге <ВR> используется для того, чтобы остановить в
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 9 из 109
указанной вами точке обтекание текстом объекта и затем продолжить текст в пустой области за объектом.
Продолжающийся за объектом текст выравнивается в соответствии со значениями LEFT, RIGHT или АLL
атрибута СLЕАR=:
<BR СLЕАR =LЕFТ>
Текст будет продолжен, начиная с ближайшего пустого левого поля
<BR СLЕАR =RIGHT>
Текст будет продолжен, начиная с ближайшего пустого правого поля
<BR СLЕАR=АLL>
Текст будет продолжен, как только и левое, и правое поля окажутся пустыми
Тег <NOВR>
Тег <NОВR> (Nо Вrеаk, без обрыва) дает команду браузеру отображать весь текст в одной строке, не
обрывая ее. Если текст, заключенный в теги <NОВR>, не поместится на экране, браузер добавит в нижней
части окна документа горизонтальную полосу прокрутки. Если вы хотите оборвать строку в определенном
месте, поставьте там тег <ВR>.
Теги управления отображением символов
Все эти теги можно разбить на два класса: теги, управляющие формой отображения (font style), и теги,
характеризующие тип информации (information type). Часто внешне разные теги при отображении дают
одинаковый результат. Это зависит главным образом от настроек интерпретирующей программы и вкусов
пользователя.
Теги, управляющие формой отображения
Курсив, усиление, подчеркивание, верхний индекс, нижний индекс, шрифт большой, маленький,
красный, синий, различные комбинации - все это делает страницы интереснее и функциональнее. Microsoft
Internet Explorer и Netscape Navigator позволяют определить шрифт с помощью атрибута FАСЕ=. Теперь
можно объединять на одной странице несколько видов шрифтов, вне зависимости от того, какой из них
задан по умолчанию в браузере пользователя.
Верхние и нижние индексы [НТМL 3.0]
С помощью тегов <SUР> и <SUВ> можно задавать верхние и нижние индексы, необходимые для записи
торговых знаков, символов копирайта, ссылок и сносок. Рассматриваемые теги позволяют создать внутри
текстовой области верхние или нижние индексы любого размера. Чтобы они казались меньше
окружающего текста, можно использовать теги <SUР> и <SUВ> с атрибутом FONT SIZE=.
Атрибут SIZE=
Атрибут SIZЕ= тега <FОNТ> позволяет задавать размер текста в данной области. Если вы не
пользуетесь тегом <ВАSЕFОNТ SIZЕ=n> для задания определенного размера шрифта на всей странице, то
по умолчанию принимается 3.
Теги <ВIG> и <SMALL>
Текст, расположенный между тегами <ВIG></ВIG> или <SMALL></SMALL>, будет соответственно
больше
Атрибут СОLОR=хх
Если вы хотите сделать свою страницу более красочной, то можете воспользоваться атрибутом СОLОR=
в теге FONТ, и тогда единственным ограничением будет цветовая палитра на компьютере пользователя.
Пока только самые популярные браузеры отображают цвет шрифта.
Пользоваться тегом <FONТ СОLОR=> для смены цвета шрифта, так же как и большинством тегов
НТМL, очень просто. Заключите текст в теги <FONТ СОLОR= RED></FONТ>.
Теги, управляющие формой отображения
Тег Значение
<I>.....</I> Курсив (Italic)
<B>...</B> Усиление ВОLD)
<ТТ>... </TТ>
Телетайп
<U>. </U> Подчеркивание
<S>...</S> Перечеркнутый текст
< BIG >... </ BIG > Увеличенный фонт
< SMALL >...</ SMALL > Уменьшенный фонт
< SUB >...</ SUB > Подстрочные символы
< SUЗ >... </ SUР > Надстрочные символы
Теги, характеризующие тип информации
Тег Значение
<ЕМ>... </ЕМ>
Типографское усиление
<СIТЕ>...</СIТЕ> Цитирование
< STRONG >.</ STRONG >
Усиление
<СODE>... </СОDE>
Отображает примеры кода (например, коды программ)
<SАМР>... </SАМР>
Последовательность литералов
<КВD>... </КВD> Пример ввода символов с клавиатуры -
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 10 из 109
<VAR>...</VAR> Переменная
<DFN>... </DFN> Определение
<Q>- </Q> Текст, заключенный в скобки
Все эти теги допускают вложенность и пересечение друг другом, поэтому все они имеют тег начала и
конца. При использовании этих тегов следует помнить, что их отображение зависит от настроек
программы-интерфейса пользователя, которые могут и не совпадать с настройками программыразработчика гипертекста. Использование стилей, которые подменяют настройки интерфейса, в настоящий
момент проблематично.
Тег <DL>
Использование тега списка (Definition List: <DL>) напоминает применение отступов в обычных
текстовых редакторах. Тег <DL> был создан для форматирования текста, определяющего какой-то термин.
Определяемый термин записывается на одной строке, а его определение на следующей, с небольшим
отступом вправо. Тег <DL> позволяет создавать отдельные абзацы с отступом без нумерации или
маркеров. Отступ делается от левого края. Если у вас на странице несколько тегов <DL>, то текст
постепенно сдвигается все больше вправо. В конце определения поместите закрывающий тег </DL>.
Помните, что тег <DL> сдвигает только левую границу абзаца.
Тег <ВLОСKQUOTE>
Тег добавляет поля слева и справа от текста. Это полезный тег, поскольку он позволяет расположить
текст компактно в центре страницы. При использовании < ВLОСKQUOTE > несколько раз текст все
больше сжимается к центру.
Microsoft Internet Explorer и Netscape Navigator допускают применение атрибутов LEFTMARGIN=n и
ТОРМАRGIN =n в теге <ВОDY>. Атрибут LEFTMARGIN = задает левое поле для всей страницы.
ТОРМАRGIN= определяет верхнее поле. Число n показывает ширину поля в пикселях. Например, тег <
ВОDY LEFTMARGIN ="40"> создаст на всей странице левое поле шириной 40 пикселей. При n, равном 0,
левое поле отсутствует.
Табуляция
Потребность в этом средстве существовала уже очень давно, но лишь недавно оно было, наконец,
предложено разработчикам. Табуляцию можно задать несколькими способами.
Самый простой - записать тег <ТАВ IDENT=n>, где n определяет число еn-пробелов перед новым
абзацем. Еn-пробел - это типографская единица измерения, приблизительно равная ширине буквы n в том
шрифте, который вы используете. Таким образом, тег <ТАВ IDENT=4> задает символ табуляции шириной
в четыре еn-пробела.
Если вы хотите в нескольких местах применить символ табуляции заданной величины, то в том месте,
где вы задаете его размер, поместите тег <ТАВ> с атрибутом ID=, например, таким образом:
<ТАВ ID="tabone" >
Теперь в любом месте страницы достаточно написать <ТАВ ТО="ТАВОNЕ">, и символы табуляции
станут равными ТАВОNЕ. Соответственно можно аналогичным образом создать ТАВТWО, ТАВТНRЕЕ,
ТАВFОUR и т. д.
Тег <ТАВ> можно применять для размещения и текста, и графики.
Списки
Списки являются важным средством структурирования текста и применяются во всех языках разметки.
В НТМL имеются следующие виды списков: ненумерованный список (неупорядоченный), нумерованный
список (упорядоченный) и список определений. Теги для ненумерованных (Unordered Lists <UL>) и
нумерованных списков (Ordered Lists <OL>) - это основа HTML. HTML 3.0 добавляет несколько атрибутов
к тегам списков для выбора разных типов маркеров в ненумерованных списках и разных схем нумерации в
нумерованных. Можно включать такие атрибуты в сами теги <LI> (List Item), чтобы сменить тип маркера в
середине списка. После появления нового атрибута все последующие маркеры в списке будут иметь такой
же вид.
Тег <UL>
Ненумерованный список. Ненумерованный список предназначен для создания текста типа:
первый элемент списка
второй элемент списка
третий элемент списка
Записывается данный список в виде следующей последовательности:
<UL>
<LI> первый элемент списка
<LI> второй элемент списка
<LI> третий элемент списка
</UL>
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 11 из 109
Теги <UL> и </UL> - это теги начала и конца ненумерованного списка, тег <LI> (List Item) задает тег
элемента списка. В дополнение к этим тегам существует тег, позволяющий именовать списки - LН (List
Header). Приведем пример отображения ненумерованного списка следующего вида:
Тег <НR>
Горизонтальное отчеркивание (horizontal rule) применяется для разделения документа на части. С
помощью одного лишь тега <НR> можно придать странице совершенно необычный вид. Попробуйте
поэкспериментировать с тегом <НR>и вы получите линии, совсем не похожие на те, которыми вы обычно
пользуетесь.
Тег <РRЕ>
Отображение текста без форматирования.
Тег <BLINK>
Тег <BLINK> вызывает мерцание текста заключенного в него.
Гипертекстовые ссылки
Все рассмотренные выше средства управления отображением текста являются безусловно важными, но
только дополнительными к основному тегу документа - гипертекстовой ссылке. Для записи гипертекстовой
ссылки используется контейнер <А...>......</А>, который называют "якорь" (аnchor). Якорь имеет несколько
атрибутов, главным из которых является НREF (НуреrТехt Reference). Простую ссылку можно записать в
виде:
<А НREF="http://роlyn.net.kiae.su/index.shtml">
Индекс базы данных "Полынь" </А>
где значением атрибута HREF является адрес документа " index.shtml " на машине " роlyn.net.kiae.su ",
доступ к которой осуществляется по протоколу НТТР. Форма записи этого адреса называется
универсальным локатором ресурсов (Universe Resource Locator) и является составной частью технологии
WWW.
Содержание контейнера А, заключенное между тегом начала и тегом конца, выделяется в тексте цветом,
определенным для контекстных гипертекстовых ссылок.
Одной из особенностей создания Web-сервера является то, что представленную на нем информацию
желательно разбить на отдельные части, которые могут быть выведены на экран без необходимости его
прокрутки. Организация связей между отдельными частями и осуществляется с помощью гипертекстовых
ссылок.
Вопросы для самоконтроля:
1. Структура html-документа. Структурные элементы страницы. Типы элементов.
2. Порядок работы WWW-сервиса. Обмен данными между сервером и клиентом. Формы.
Рекомендуемая литература:
1. Веб-дизайн/Дмитрий Кирсанов - СПб: Символ-Плюс, 2004-376 стр.
2. HTML 4.0 в подлиннике/Матросов, Сергеев, Чаунин – СПб: BHV, 2000 – 672 стр.
Лекция 3. Графика в Web
Содержание лекционного занятия:
 Как задать размеры графики
 Активные изображения
 Как сделать активное изображение
 Активные изображения на сервере
 Активные изображения у клиента
 Активные изображения, работающие и на сервере, и у клиента
Графика
Самыми распространенными графическими форматами в Web являются GIFи JPEG форматы. Для того,
чтобы вставить изображение в Web-страницу необходимо либо нарисовать его, либо взять уже готовое. В
любой программе рисования несложно нарисовать простое изображение и сохранить его в требуемом
формате . Если программа не поддерживает этот формат, то необходимо преобразовать файл. Для этого
существует множество программ, предназначенных для преобразования одного графического формата в
другой. Позаимствовать же картинки можно из различных программных пакетов, или с других Webстраниц в Internet, содержащих библиотеки художественных изображений свободного доступа. Когда
браузер выводит страницу Web с изображением, соответствующий графический файл временно хранится в
памяти компьютера. В большинстве браузеров есть команда, позволяющая сохранить файл постоянно на
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 12 из 109
локальном диске. Существует множество других вариантов получения графических файлов.
Изображения могут быть полезны своей информативностью и придают Web-странице привлекательный
вид. Приведем наиболее распространенные случаи применения изображений:
 логотип компании на деловой странице;
 графика для рекламного объявления;
 различные рисунки;
 диаграммы и графики;
 художественные шрифты;
 подпись автора страницы;
 применение графической строки в качестве горизонтальной разделительной линии;
 применение графических маркеров для создания красивых маркированных списков.
Теперь рассмотрим как вставить изображение в страницу Web. Тегом НТМL, который заставляет
браузер выводить изображение, является <IMG> со следующим общим форматом:
<IMG SRC="picture.gif">
Замыкающего тега не требуется. Здесь SRC означает источник (SouRCe), а имя файла представляет
собой имя выводимого графического файла.
Изображения на странице Web могут быть использованы и в качестве гипертекстовых ссылок, как и
обычный текст. Читатель страницы щелкает на изображении и отправляется на другую страницу или
изображение. Для обозначения изображения как гипертекстовой метки используется тот же тег <А>, что и
для текста, но между <А> и </А> вставляется тег изображения <IMG>:
<А НREF="адрес файла или изображения">
<IMG SRC="picture.gif"></А>
При этом изображение используемое в качестве гипертекстовой ссылки обводится дополнительной
рамкой.
Ограничивающие прямоугольники и атрибуты АLТ=
Для уменьшения времени загрузки страницы с графикой полезно определять в HTML-коде размер
изображений. Если он известен еще до загрузки страницы, то браузер может в самом начале отвести рамку
для картинки, а затем загружать текст на страницу. Если размер графического изображения определен, то
браузер резервирует для него место в виде ограничивающего прямоугольника. Пока загружается графика,
посетитель страницы может начать читать текст. Такая методика работы - жест вежливости по отношению
к своим читателям.
Как задать размеры графики
Если у вас есть какая-нибудь программа для работы с графикой, то определить размер изображения
нетрудно. Для начала откройте файл в графическом редакторе и определите размер картинки в пикселях. В
теге изображения задайте ширину и высоту вашей картинки таким образом:
<IMG SRC="picture.gif" WIDTH=413 НЕIGНТ=356>
Если вы не укажите размеры графических изображений, то браузер будет загружать каждую картинку
целиком и только после этого переходить к загрузке текста. Это занимает время. Если размеры заданы,
многие ведущие браузеры смогут начертить ограничивающий прямоугольник нужного размера и начнет
заливать eго изображением. Если на странице есть другие графические объекты браузер продолжит работу
с другими частями страницы, продолжая заполнять ограничивающий прямоугольник.
Атрибут АLТ=
Атрибут АLТ= тега IMG позволяет пользователям, браузеры которых смотрят только текст (или если в
браузере отключен режим графики), получить представление о том, что за графика расположена на
странице или каковы ее цели. Micrisoft Internet Explorer показывает текст из атрибута АLТ= в
ограничивающем прямоугольнике, пока изображение загружается. Netscape Navigator выводит этот текст в
том случае, если режим Auto Load Image выключен.
Тег <IMG> с атрибутом АLТ= будет выглядеть следующим образом:
<IMG SRC="pic.gif" НЕIGHТ=50 WIDTH=100 АLТ="Picture">
Активные изображения
Активные изображения (image maps), или изображения, чувствующие щелчки мыши, позволят вам
создать на своем узле графические меню произвольной формы. Пользуясь таким меню, читатели смогут
путешествовать по всем закоулкам и проспектам вашего Web-узла. Активное изображение - это просто
картинка с так называемыми активными областями (hot spots), которые ссылаются на URL других страниц
или узлов. Работает такое изображение следующим образом: когда пользователь щелкает мышкой на
картинке, определенной как активное изображение с помощью атрибута ISМАР в теге IMG, координаты
щелчка передаются на Web-сервер. Сервер ищет в карте (mapfile) активную область, содержащую
переданные координаты. Если такая область находится, заданный в карте URL активируется, и браузер
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 13 из 109
пользователя переходит на новую страницу.
С помощью активных изображений вы можете решить сразу две задачи: создать меню своего Web-узла
и разместить на нем графику.
Где помещать активное изображение: на сервере или у клиента?
Есть два типа активных изображений: на сервере и, новая разновидность, у клиента. Изображения
первого типа используют сервер для того, чтобы найти соответствующий данной активной области URL и
передать на браузер нужную страницу. Активные изображения, работающие на клиентской машине, задают
информацию об активной области на НТМL-странице, так что браузер сам выясняет, какие области
являются активными, и запрашивает с сервера требуемую страницу.
Как сделать активное изображение
Процесс создания активного изображения состоит из двух этапов. Сначала вы должны определить
области на картинке, которые вы хотите сделать активными, а потом соотнести их со ссылками на другие
URL. Активные области задаются перечислением их координат (в пикселях). Все это можно сделать
вручную, определив координаты углов активных областей, но гораздо проще воспользоваться какойнибудь программой, например МарЕdit.
Определить карту легко. Нужно открыть в МарEdit файл, содержащий изо6ражение, на котором вы
хотите создать активные области, после чего щелкнуть и потянуть мышкой, обозначив границу области.
Программа автоматически генерирует файл, описывающий границы активной области. Затем этой области
нужно приписать URL. В любых местах изображения можно нарисовать активные области в форме
прямоугольника, многоугольника или круга и определить для каждой из них URL. Активные области могут
даже пересекаться, но в этом случае возникают проблемы. Важно оставлять между областями немного
места, чтобы читатель был уверен, что он активирует правильную ссылку. Большинство браузеров при
попадании на пересечение нескольких активных областей считают активной ту из них, которая первой
встречается в карте.
Границы активных областей задаются координатами углов прямоугольника и многоугольника или
центра и радиуса круга. Эти параметры записываются в карту (МАР-файл)
Закончив создание активного изображения, вы можете сохранить полученный файл в формате NCSA
или СЕRN, если оно будет работать на сервере, или в формате СSIМ, если оно функционирует на
клиентской машине. Всю остальную работу выполняет программа МарEdit. Она создает карту на сервере
или встраивает карту на стороне клиента в указанный вами файл HTML. Если вы решили делать активное
изображение у клиента, Мар Edit поставляет данные только для тегов <МАР>. Вам придется самому задать
тег изображения с атрибутом USЕМАР и поместить его после тега </МАР>. Не забудьте перед именем
карты в атрибуте USЕМАР записать символ # следующим образом:
<IMG SRC="mymap.gif" USЕМАР="glava1~2.shtml#sitemap">
Активные изображения на сервере
Старый испытанный способ создания активных изображений (для HTML 2.0) требует использования
атрибута ISМАР в теге IMG. Тег IMG относится к изображению, и его надо поместить между начальным и
конечным тегами ссылки на файл-карту. Вам нужно занести в HTML-файл приблизительно такую строку:
<А НREF="path/somemap.map">
<IMG SRC="path/somemap.map" ISМАР></А>
Атрибут ISМАР показывает браузеру, что данное изображение является активным. Когда в какой-либо
его области происходит щелчок мыши, то благодаря атрибуту ISМАР серверу посылается сообщение,
содержащее координаты щелчка.
Активные изображения у клиента
В отличие от изображений, описанных в предыдущем разделе, активные изображения у клиента
работают независимо от программного обеспечения сервера и не перестанут функционировать, даже если
вы перенесете свои файлы на другой сервер. Таким изображениям требуются только две вещи: браузер,
поддерживающий HTML 3.0, и информация о карте, записанная в HTML-файле. Приведем пример ссылки
в НТМL-файле для этого вида активных изображений:
Активные изображения, работающие и на сервере, и у клиента
Возможно, вы захотите проявить осторожность и сделать изображения, работающими и на сервере, и на
машине-клиенте.
После того, как вы создадите активные изображения на сервере и у клиента, соединить их в один HTMLфайл нетрудно. Для этого нужно внести в документ HTML ту же запись, которую вы сделали бы для
активного изображения на сервере. Не забудьте только добавить в тег IMG атрибут USЕМАР=. Атрибут
USЕМАР= имеет более высокий приоритет, чем тег ISМАР, и если браузер поддерживает активные
изображения, работающие у клиента, он распознает этот атрибут. Браузер, не знающий о таких
изображениях, проигнорирует атрибут USЕМАР=.
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 14 из 109
Вопросы для самоконтроля:
1. XML и HTML. Синтаксис XML. Отличие XML от HTML. DTD.
2. Способы визуализации XML-документа.
Рекомендуемая литература:
1. Веб-дизайн/Дмитрий Кирсанов - СПб: Символ-Плюс, 2004-376 стр.
2. HTML 4.0 в подлиннике/Матросов, Сергеев, Чаунин – СПб: BHV, 2000 – 672 стр.
Лекция 4. Средства описания таблиц в HTML
Содержание лекционного занятия:
 Теги <ТАВLЕ>, <ТR> , <ТD> , <ТН> , <САРТIОN> .
 Атрибуты NOWRAP , СОLSPAN= , ROWSPAN= , WIDТН= , UNIТ=, СОLSРЕС= , DР=,
ЕLLРАDDING= , АLIGN= и VALIGN= , ВОRDER= , СЕLLSPACING=
Средства описания таблиц в HTML
По мере роста системы WWW стало ясно, что средств, которые заложены в НТМL, не достаточно для
качественного отображения различного типа документов. Недостатком НТМL было отсутствие в его
составе средств отображения таблиц. Для этой цели обычно использовался предформатированный текст
(тег <PRE>), в котором таблица обрисовывалась символами АSСII. Но такая форма представления таблиц
была недостаточно высокого качества и выделялась из общего стиля документа.
Тег <ТАВLЕ>.
Для описания таблиц служит тег <ТАВLЕ>. Тег <ТАВLЕ>, как и многие другие, автоматически
переводит строку до и после таблицы.
Тег <ТR>
Тег <ТR> (сокращение от Таble Row - строка таблицы) создает строку таблицы. Если в таблице
содержится два набора тегов <ТR></ТR>, в ней будут две строки. Весь текст, другие теги и атрибуты,
которые вы хотите поместить в одну строку, должны быть помещены между тегами <ТR></ТR>.
Тег <ТD>
Внутри строки таблицы обычно размещаются ячейки с данными, Каждая ячейка, содержащая текст или
изображение, должна быть окружена тегами <ТD></ТD>. Число тегов <ТD></ТD> в строке определяет
число ячеек. Строка с пятью парами тегов <ТD></ТD> будет состоять из пяти ячеек.
Тег <ТН>
При задании заголовков для столбцов и строк таблицы используются тег заголовка <ТН></ТН> (Таblе
Неаder, заголовок таблицы). Эти теги аналогичны <ТD></ТD>. Отличие состоит в том, что текст,
заключенный между тегами <ТН></ТН>, автоматически записывается жирным шрифтом и по умолчанию
располагается посередине ячейки. Центрирование можно отменить и выровнять текст по левому или
правому краю. Если воспользоваться <ТD></ТD> с тегом <В> и атрибутом <АLIGN=CENTER>, текст тоже
будет выглядеть как заголовок. Однако, следует иметь в виду, что не все браузеры поддерживают жирный
шрифт в таблицах, поэтому лучше задавать заголовки таблиц с помощью <ТН>.
Тег <САРТIОN>
<CAPTION> позволяет создавать заголовки таблицы. По умолчанию заголовки центрируются и
размещаются либо над (<САРТION АLIGN=ТОР>), либо под таблицей (<САРТION ALIGN=ВОТТОМ>).
Заголовок может состоять из любого текста и изображений. Текст будет разбит на строки,
соответствующие ширине таблицы. Иногда тег <САРТION> используется для подписи под рисунком. Для
этого достаточно описать таблицу без границ.
Заголовок может состоять из любого текста и изображений. Текст будет разбит на строки,
соответствующие ширине таблицы. Иногда тег <САРТION> используется для подписи под рисунком. Для
этого достаточно описать таблицу без границ.
Атрибут NOWRAP
Обычно любой текст в таблице, не помещающийся в одну строку ячейки, переходит на следующую
строку. Однако, при использовании атрибута NOWARP с тегами <ТН> или <ТD> длина ячейки
расширяется на столько, чтобы, заключенный в ней текст поместился в одну строку.
Атрибут СОLSPAN=
Теги <ТD> и <ТН> модифицируются с помощью атрибута СОLSPAN= (Column Span, соединение
столбцов). Если вы хотите сделать какую-нибудь ячейку шире, чем верхняя или нижняя, можно
воспользоваться атрибутом СОLSPAN=, чтобы растянуть ее над любым количеством обычных ячеек.
Атрибут ROWSPAN=
Атрибут ROWSPAN=, используемый в тегах <ТD> и <ТН>, аналогичен атрибуту СОLSPAN=, только он
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 15 из 109
задает число строк, на которые растягивается ячейка. Если вы указали в атрибуте ROWSPAN= число,
большее единицы, то соответствующее количество строк должно находиться под растягиваемой ячейкой.
Нельзя поместить ее внизу таблицы.
Атрибут WIDТН=
Атрибут WIDТН= применяется в двух случаях. Можно поместить его в тег <ТАВLЕ> для задания
ширины всей таблицы, а можно использовать в тегах <ТR> или <ТН> для задания ширины ячейки или
группы ячеек. Ширину можно указывать в пикселях или в процентах. Например, если вы задали в теге
<ТАВLЕ> WIDTH=250, вы получите таблицу шириной 250 пикселей независимо от размера страницы на
мониторе. При задании WIDТН=50% в теге <ТАВLЕ> таблица будет занимать половину ширины страницы
при любом размере изображения на экране. Так что, указывая ширину таблицы в пикселях имейте в виду,
что если у вашего читателя узкая область просмотра, ваша страница может выглядеть несколько странно.
Если вы пользуетесь пикселями и таблица оказывается шире области просмотра, внизу появится полоса
прокрутки для перемещения вправо и влево по странице. В зависимости от поставленных задач и тот, и
другой способ задания ширины таблицы могут оказаться полезными.
Атрибут UNIТ=
Атрибут UNIT= тега <ТАВLЕ> определяет единицы измерения, используемые при указании размеров
как всей таблицы, так и ее отдельных столбцов. Атрибут UNIТ= может принимать три значения:
UNIТ=ЕN - это значение присваивается по умолчанию и задает единицу измерения, равную еn-пробелу.
Еn-пробел - это типографская единица измерения, равная ширине буквы <n>. Реальный размер пробела
зависит от выбранного шрифта: для крупного шрифта еn-пробел больше, чем для мелкого. Обычно еnпробел равен половине размера шрифта. Например, при использовании 12-пунктового шрифта ширина еnпробела будет 6 пунктов. Для 8-пунктового шрифта еn-пробел занимает 4 пункта.
UNIТ=RELATIVE используется для задания относительной ширины столбцов в процентах от общей
ширины таблицы. Этот способ следует по возможности применять вместо указания ширины в процентах
UNIТ=RELATIVE выполняет ту же функцию, но поддерживается большим количеством браузеров.) При
задании относительных (RELATIVE) единиц вводимые числа воспринимаются как ширина столбцов в
процентах.
UNIТ=РIXELS - это значение применяется, когда вам нужно точно знать ширину столбца на экране. В
этом случае лучше всего задать ее в пикселях. Например, тег <ТАВLЕ UNIТ=РIXELS WIDTH=340>
сформирует таблицу шириной 340 пикселей.
Атрибут СОLSРЕС=
Атрибут СОLSРЕС=, используемый с атрибутом UNIТ=, определяет, сколько места занимает каждый
столбец таблицы и как в нем выравниваются данные. Применяется только в теге<ТАВLЕ>.
СОLSРЕС= перечисляет все столбцы и для каждого из них задает выравнивание и размер. Для столбца
(или ячейки) существует пять способов выравнивания: L - по левому краю, С - по центру, R - по правому
краю, J - по правому и левому краю и D - по десятичной запятой. Если у вас пять столбцов, вы можете
определить ширину и выравнивание каждого из них следующим образом:
<ТАВLЕ UNIТ=РIХЕLS СОLSРЕС="L10 С15 J25 D30">
Вы описали таблицу, в которой первый столбец имеет ширину 10 пикселей и его содержимое
выравнивается по левому краю, второй столбец, шириной 15 пикселей, с выравниванием по центру, третий,
шириной 20 пикселей, выровнен по правому краю, четвертый, шириной 25 пикселей, выровнен с двух
сторон, а пятый, шириной 30 пикселей, выравнивается по десятичным запятым.
Атрибут DР=
Атрибут DР= (Decimal Point, десятичный знак) определяет символ, используемый для отделения целой
части десятичной дроби. DР="." (по умолчанию) указывает на точку в качестве десятичного символа.
DР="," задает запятую.
Пустые ячейки
Если ячейка не содержит данных, она не будет иметь границ. Если вы хотите, чтобы у ячейки были
границы, но не было содержимого, вы должны поместить в нее что-то, что не будет видно при просмотре.
Можно воспользоваться пустой строкой <ВR>. Можно даже задать пустые столбцы, определив их ширину
в пикселях или относительных единицах и не введя в полученные ячейки никаких данных. Это средство
может оказаться полезным при размещении текста и графики на странице.
Атрибут СЕLLРАDDING=
Атрибут СЕLLPADDING= определяет ширину пустого пространства между содержимым ячейки и ее
границами, то есть задает поля внутри ячейки.
Атрибуты АLIGN= и VALIGN=
Теги <ТR>, <ТD> и <ТН> можно модифицировать с помощью атрибутов ALIGN= и VALIGN=. Атрибут
АLIGN определяет выравнивание текста и графики по горизонтали, то есть по левому или правому краю,
либо по центру, как видно из рис. . Горизонтальное выравнивание может быть задано несколькими
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 16 из 109
способами:
ALIGN=ВLЕЕDLEFT Прижимает содержимое ячейки вплотную к левому краю.
ALIGN=LEFT Выравнивает содержимое ячейки по левому краю с учетом отступа, заданного атрибутом
СЕLLPADDING=.
АLIGN=СЕNTER Располагает содержимое ячейки по центру.
АLIGN=RIGHT Выравнивает содержимое ячейки по правому краю с учетом отступа, заданного
атрибутом СЕLLPADDING=.
Атрибут VALIGN= осуществляет выравнивание текста и графики внутри ячейки по вертикали.
Вертикальное выравнивание может быть задано несколькими способами:
VALIGN=ТОР Выравнивает содержимое ячейки по ее верхней границе.
VALIMG=МIDDLE Центрирует содержимое ячейки по вертикали.
VALIGN=ВОТТОМ Выравнивает содержимое ячейки по ее нижней границе.
Атрибут ВОRDER=
В теге <ТАВLЕ> часто определяют, как будут выглядеть рамки, то есть линии, окружающие ячейки
таблицы и саму таблицу. Если вы не зададите рамку, то получите таблицу без линий, но пустое
пространство для них будет отведено. Того же результата можно добиться, задав <ТАВLЕ ВОRDER=0>.
Иногда хочется сделать границу потолще, чтобы она лучше выделялась. Можно для привлечения внимания
к рисунку или тексту задать исключительно жирные границы. При создании вложенных таблиц приходится
делать границы различной толщины для разных таблиц, чтобы их легче было различать.
Атрибут СЕLLSPACING=
Атрибут СЕLLSPACING= определяет в пикселях ширину промежутков между ячейками. Если этот
атрибут не задан, по умолчанию задается величина, равная двум пикселям. Атрибут СЕLLSPASING=
можно использовать, чтобы поместить текст и графику непосредственно там, где вам нужно. Если вы
хотите оставить пустое место, можно вписать в ячейку пробел.
Вопросы для самоконтроля:
1. Различия в обработке статических и динамических документов
2. Общие принципы языков разметки
Рекомендуемая литература:
1. HTML и CSS на примерах/Мержевич – СПб: BHV, 2005-448 стр.
2. HTML и CSS. Совместное использование/ДеБольт – СПб: НТ-Пресс, 2006-504 стр.
Лекция 5. Использование таблиц в дизайне страницы
Содержание лекционного занятия:
 Создание разноцветных таблиц
 Цветные границы в Netscape Navigator
Использование таблиц в дизайне страницы
Приятное свойство таблиц состоит в том, что если вы захотите, то можете сделать их границы
невидимыми. Это позволяет с помощью тега <ТАВLЕ> красиво размещать на странице текст и графику. До
сих пор тег <ТАВLЕ> остается единственным мощным средством форматирования в HTML. Дизайнеры
Web-страниц сейчас обладают практически такой же свободой использования <пустого пространства>, что
и создатели печатных страниц. Таблицы в большей мере, чем что-либо другое, помогают отойти от
иерархического размещения текста на Web-страницах.
Если браузер вообще поддерживает таблицы, он обычно правильно отображает наиболее интересные
эффекты, полученные с помощью таблиц.
Создание разноцветных таблиц
Ведущие браузеры, позволяют отображать некоторые цвета. Есть несколько способов раскрасить
таблицу, в основном они зависят от используемого браузера.
Цветные границы в Netscape Navigator
Вы не только можете окружить таблицу красивой рамкой, но еще и задать для нее цвет, отличный от
цветов текста и фона. Создайте простой серый GIF (или любой GIF, который вы хотели бы иметь в качестве
фона) и определите его в теге <ВODY> как фон страницы. Затем задайте цвет фона страницы. В результате
ваш тег <ВОDY> будет выглядеть примерно так:
<BODY ВАСКGROUND="сооlbg.gif" ВGCOLOR=" # FF0000">
Вы создали двойной фон - GIF и заданный цвет. В результате фоновый цвет будет виден на всех
границах таблиц и горизонтальных линиях (<НR>). Вне зависимости от того, является ли ваш фоновый GIF
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 17 из 109
серым или нет, цветные линии и границы таблиц будут заметно выделяться. Если фоновый GIF не слишком
сложно устроен, время загрузки страницы лишь немного возрастет. На приведенном ниже примере
показано какие, широкие возможности дает использование цвета в HTML и в частности в таблицах.
Вопросы для самоконтроля:
1. Принцип ортогональности формы и содержания
2. Особенности HTML
3. Особенности XML
Рекомендуемая литература:
1. HTML и CSS на примерах/Мержевич – СПб: BHV, 2005-448 стр.
2. HTML и CSS. Совместное использование/ДеБольт – СПб: НТ-Пресс, 2006-504 стр.
Лекция 6. Фреймы
Содержание лекционного занятия:
 Что такое фрейм?
 Для чего можно использовать фреймы
 Как работают фреймы
 Задание фреймовой структуры
 Подготовка содержимого фрейма
Фреймы
Что такое фрейм?
В каком-то смысле фрейм - это именно то, что означает данное слово: рамка вокруг картинки, окошко
или страница. Вводя тег <FRAME>, дизайнер НТМL-страницы разделяет экран браузера на части. В
результате человек, просматривающий страницу, может изучать одну часть страницы независимо от
остальной части. Фактически браузер, распознающий фреймы, загружает разные страницы в разные
секции, или фреймы, экрана. Например, вы можете построить страницу таким образом, что фирменный
знак будет зафиксирован в верхней части экрана, в то время как остальную часть страницы пользователь
пролистывает обычным способом. Можно расположить сбоку кнопки навигации, которые не
перемещаются, когда читатель щелкает их мышкой, так что изменяется только часть экрана, а сама полоска
навигации остается неподвижной.
Для чего можно использовать фреймы
Хотя фиксация фирменного знака или средств навигации - наиболее очевидные способы использования
фреймов, это не значит, что их возможности тем и исчерпываются. Просто перечисленные решения первое, что приходит в голову дизайнерам, когда они думают о том, как использовать фреймы. Но каждый
раз, когда в экран браузера вставляется фрейм, вы урезаете территорию, на которой можно было бы
разместить данные. Чем больше вы вводите фреймов, тем меньше остается полезного пространства и тем
скорее вы запутаете своих читателей, незнакомых с навигацией на Web-странице с фреймами.
Например, разумно хранить в фрейме логотип компании только на первых нескольких уровнях самых
важных страниц, а основные данные показывать без фреймов.
Как работают фреймы
На первый взгляд, фреймы - это нечто сложное, но их легче понять, если провести аналогию с ячейками
таблицы. Расположение фреймов на экране задается почти так же, как ячеек в таблице: теги и атрибуты
работают так же, как их табличные родственники. Однако, хотя аналогия между единичным фреймом на
странице и ячейкой таблицы полезна, нужно помнить, что есть и отличия. Содержимое ячейки задано в
коде HTML-страницы с таблицей. Текст или графика, составляющие содержимое таблицы, фактически
вводятся на той же самой странице HTML, что и тег или атрибут, описывающие таблицу. Напротив, экран с
фреймами описывается в НТМL-странице, называемой (frameset ). Содержимое же фрейма - это отдельная
HTML-страница, которая может находиться где угодно - в другом каталоге, на локальном сервере или на
удаленном узле где-то в сети. Фреймовая структура определяет только способ организации экрана с
фреймами и указывает, где находится начальное содержимое каждого фрейма. Для всех фреймов задаются
URL, описывающие местонахождение их данных. Как правило, на странице с фреймовой структурой нет
содержимого фреймов. Такая страница обычно невелика - она описывает только кадровую структуру
экрана. Когда документ загружается в фрейм, вы можете щелкать мышкой на ссылке в этом документе, что
вызовет появление связанных документов в других кадрах, заданных в фреймовой структуре.
Создание простой страницы с фреймами
Создадим, для лучшего понимания, пару простых страничек с фреймами, чтобы стало понятно, каково
строение НТМL страницы с фреймами и для чего нужны основные теги и атрибуты.
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 18 из 109
Построим страницу с двумя фреймами. Зададим слева фрейм оглавления с заголовками статей, а справа
поместим страницу с самими статьями. Сделаем так, что когда пользователь щелкает мышкой на ссылке в
той части экрана, где находится оглавление, сама статья появляется в правом фрейме. Это основной,
наиболее распространенный способ использования фреймов.
Задание фреймовой структуры
Для начала мы должны представить себе общий вид страницы - где и какого размера будут фреймы.
Затем можно подумать об их содержании. Ниже приводится код простой фреймовой структуры с
использованием тега <FRAMESET>. Обратите внимание: страница с фреймовой структурой не содержит
тега <ВОDY>.
Подготовка содержимого фрейма
Теперь давайте загрузим фреймы с содержимым. Зададим страницу menu.html в левом фрейме, где мы
собираемся щелкать мышью, переключаясь между двумя страницами в правом фрейме. Файл menu.html это обычная НТМL-страница, построенная как оглавление. На самом деле мы можем взять готовую
страницу с оглавлением и использовать ее. Имейте в виду, что этот фрейм узкий и высокий, так что
страница, которая будет в него загружаться, должна быть соответствующим образом спроектирована.
Теперь мы должны определить, где будут появляться другие страницы при щелчке мышкой на ссылке.
Поскольку мы хотим, чтобы они отображались в правом фрейме, добавим атрибут ТАRGET=
(TARGЕТ="main") в тег ссылки. Это означает, что когда пользователь щелкает на ссылке, вызываемая
страница появляется в фрейме main. Мы отображаем все страницы в фрейме main, поэтому давайте
добавим атрибут ТАRGЕТ="main" во все теги ссылок в оглавлении. Если мы не определим атрибут
ТАRGЕТ, то страница появится там, где мы щелкнули мышкой, - в левом фрейме, что нас не устраивает,
хотя в какой-нибудь другой ситуации подобное поведение было бы очень кстати. Например, вы можете
добавить ссылку <Другие пункты оглавления>, которая будет просто выводить следующие ссылки. Имеет
смысл сделать оглавление подлиннее, чтобы читатели видели как можно больше ссылок. Подготовка
фрейма main
Правый фрейм main будет содержать сами HTML-страницы. Ваша задача так их спроектировать, чтобы
они хорошо смотрелись в меньшем, чем обычно, окне, потому что часть экрана будет занята левым кадром
оглавления. Но больше эти страницы ничем не примечательны.
Использование тега <NOFRAMES>
У многих ваших посетителей еще остались браузеры, не умеющие обращаться с фреймами. По этим
причинам разумно предоставить доступ к версии ваших основных страниц без фреймов. Если читатель с
устаревшим браузером окажется на вашей странице с фреймовой структурой, все, что находится на ней
между тегами < NOFRAMES > и </ NOFRAMES >, будет выглядеть отлично - браузер просто
проигнорирует фреймы. Вот почему обязательно нужно использовать теги <ВODY></ВОDY>. Возможно,
вам придется иначе организовать экран без фреймов.
Можно поместить на страницу с фреймами кнопку No Frames (Без фреймов). Ее назначение очевидно.
Такой вариант достаточно разумен и легко осуществим.
Вопросы для самоконтроля:
1. Целесообразность получения обратной информации от пользователя.
2. Создание гостевой книги/форума.
Рекомендуемая литература:
1. HTML и CSS на примерах/Мержевич – СПб: BHV, 2005-448 стр.
2. HTML и CSS. Совместное использование/ДеБольт – СПб: НТ-Пресс, 2006-504 стр.
Лекция 7. Формы
Содержание лекционного занятия:
 Как сделать так, чтобы ваша форма хорошо смотрелась
 Как заставить формы работать
Формы
Интерактивные формы позволяют читателям Web-страниц легко общаться с их владельцами. Благодаря
простоте использования тега <mailto:> и форм стал возможен двусторонний диалог между владельцами
Web-узлов и их читателями. Это открывает для Web-навигаторов увлекательные перспективы и
коммерческие возможности. К сожалению, многие старые браузеры не поддерживают тег <mailto:>.
Как сделать так, чтобы ваша форма хорошо смотрелась
Один из способов свести все трудности к минимуму состоит в том, чтобы разместить области ввода и
выпадающие меню в левой части страницы, а весь сопроводительный текст - справа. Поскольку ширину
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 19 из 109
областей ввода можно задать с помощыо атрибута SIZЕ=, вы по крайней мере выровняете строки слева, а
текст справа будет невыровненным - как в большинстве документов. Такая форма выглядит несколько
аккуратнее. Не забудьте оставить промежуток между текстом и областью ввода формы. Другой несколько
более сложный способ - разместить элементы формы в ячейки таблицы. Это позволяет разместить
сопроводительный текст слева, а области ввода справа.
Как заставить формы работать
Возможно, это именно тот раздел, которого вы ждете - как сделать так, чтобы формы отсылали на
сервер введенные данные. На самом деле заставить форму пересылать данные довольно просто. Главная
проблема - понять, куда их пересылать. Формально вы просто пишете в теге <FORM> атрибут АСТION= и
задаете ссылку на URL программы, которая может обработать входные данные и сделать с ними чтонибудь полезное.
Вопросы для самоконтроля:
1. Ввод и изменение информации пользователем.
2. Форма, как основной элемент взаимодействия с пользователем.
Рекомендуемая литература:
1. HTML, CSS, Скрипты: практика создания сайтов/Ломов – СПб: BHV, 2005-416 стр.
2. HTML/XML/CSS/Штайнер – СПб: Лаборатория Базовых Знаний, 2001, 512 стр.
Лекция 8. Апплеты
Содержание лекционного занятия:
 Понятие АРРLЕТ а.
 Вид контейнера АРРLЕТ
 Использование контейнера РАRАМ
Апплеты
Собственно и не стоило бы говорить о Java, если бы не возможность использования небольших
мобильных программ, которые можно передавать по сети и исполнять на компьютере пользователя. Эти
программы в терминологии Java называются апплетами (яблочками). Для встраивания вызовов апплетов в
текст НТМL-документа и отведения места для отображаемой апплетом информации в НТМL был введен
контейнер АРРLЕТ, который начинается тегом <аррlet> и кончается тегом </аррlet>. В общем виде
документ, содержащий ссылки на апплеты будет выглядеть так, как это представлено в примере.
В данном примере после заглавия документа (тег H1) и горизонтальной черты начинается поле апплета
шириной 200 пикселей и высотой 100 пикселей. В данное поле загружается аррlet с именем hello (файл
hello.class). Текст между тегами начала и конца контейнера аррlet используется для размещения
встраиваемых контейнеров и текста, который отображается браузерами, не позволяющими использовать
Java.
<HTML>
<HEAD>
<TITLE>Документ со встроенной ссылкой на applet.
</TITLE>
</HEAD>
<BODY bgcolor=#FFFFFF>
<CENTER>
<H1>Документ со встроенным апплетом hello Java</H1>
<HR>
<APPLET CODE=hello width=200 height=100>
Аррlet будет отображаться в этом месте, если
Ваш браузер интерпретирует Java
</APPLET>
<HR>
</BODY)
</HTML>
В результате ссылки на такой документ сначала будет загружен текст документа. За тем будет
обнаружен контейнер аррlet, и произойдет загрузка кода апплета. Файл hello.class должен в этом случае
находиться там же, где и НТМL-файл, в котором есть на него ссылка. После приема апплета браузер
отведет под него место в своей рабочей области и только после этого начнет его исполнение.
В общем случае контейнер АРРLЕТ имеет следующий вид:
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 20 из 109
<applet
[codebase = codebase url]
code = applet.class
[alt = text]
[name= applet name]
width = number of pixels
height = number of pixels
[align = alignment]
[vspace=number of picsels]
[hspace=number of pixels]
[<param name=param name value=param value>]
[HTML text]
</applet>
Параметр соdebase задает базу для поиска кода апплета, соdе - это имя файла апплета, которое должно
иметь расширение сlass, аlt - альтернативный текст - отображается в том случае когда выполнение апплета
запрещено, name - имя контейнера аррlet, используется для ссылки на контейнер, widthт - ширина области
отображения апплета, height - высота области отображения апплета, аlign - управляет выравниванием
области отображения апплета внутри рабочей области браузера, vspase и hspase - указывают на отступ от
текста НТМL-документа (вертикальный и горизонтальный, соответственно).
Использование контейнера РАRАМ позволяет передавать параметры внутрь апплета и НТМLдокумента. Это аналогично вызову команды с различными аргументами командной строки. Для того,
чтобы получить эти параметры внутри апплета, следует использовать метод getParametr ().
Из атрибутов контейнера АРРLЕТ обязательными являются только соdе, width и height Все остальные
атрибуты (они заключены в квадратные скобки "[ ]") можно опускать. Большинство систем разработки
Java-программ сами генерируют НТМL-документ, точнее его макет, для тестирования Java-апплетов. Так
поступают, например, в АDК (Аррlet Development Kit) компании IВМ.
Для получения URL документа, из которого вызван аррlet можно использовать метод getDocumentBase и
getCodeBase. Первый определяет базу адреса для документа, в то время как второй определяет базу самого
апплета. Применение этих методов необходимо для обращения за данными (текст или графика), которые
могут храниться там жe, где и документ аррlet.
Вопросы для самоконтроля:
1. Управление видимостью и позиционированием элементов на www-страницах.
2. Апплеты и другие объекты на html-страницах.
Рекомендуемая литература:
1. HTML, CSS, Скрипты: практика создания сайтов/Ломов – СПб: BHV, 2005-416 стр.
2. HTML/XML/CSS/Штайнер – СПб: Лаборатория Базовых Знаний, 2001, 512 стр.
Лекция 9. Каскадные таблицы стилей (CSS)
Содержание лекционного занятия:
 Новые HTML-контейнеры
 Новые свойства контейнеров HTML
 Свойства контейнеров, управляемые описателями стилей
Каскадные таблицы стилей (Cascad Style Sheets)
Каскадные таблицы стилей были предложены w3c(WWW Consorcium) в рамках разработки
спецификации HTML 3.0. Однако, реализованы в реально действующих навигаторах они были только в
1997 году. Фактически, в качестве применяемой HTML-разметки они стали доступны только с версий
Netscape Navigator 4.0 и Internet Explorer 4.0.
Идея положенная в основу таблиц достаточно проста. К версии 4.0 HTML превращается в язык
разметки, опирающийся на контейнерное представление документа, т.е. документ - это множество
вложенных в друг друга контейнеров, каждый из которых имеет свои свойства по представлению
информации. Многие контейнеры можно сгруппировать в классы однотипных контейнеров, например,
заголовки или параграфы. Свойства контейнера, перечисляются в качестве атрибутов тага начала
контейнера. При этом у большинства контейнеров, начиная с версии HTML 3.0 набор этих атрибутов
типизирован.
Контейнеры во многом походят на блоки в универсальный языках программирования. При этом
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 21 из 109
свойства контейнеров можно интерпретировать как переменные, которые принимают определенные
значения в пределах каждого из контейнеров. Как и в языках программирования, например в Паскаль,
описание свойств можно вынести в специальную секцию данных в начале документа. Такой секцией и
является секция описания каскадных стилей. Обычно стиль описывается внутри контейнера STYLE:
<style type="text/css"> <!-- Описание стилей -->
</style>
Вообще говоря, в Netscape поддерживают еще одну нотацию описание таблиц стилей - нотация
JavaScript:
<style type="text/javascript"> <!-- Описание стилей -->
</style>
При описании таблиц стилей мы будем опираться на документацию Netscape, т.к. - это наиболее
популярный браузер Internet. Internet Explorer поддерживает только спецификацию w3c.
Начнем с простого примера. Нужно описать стили отображения текста в параграфе и заглавии
документа:
<html>
<head>
style type="text/css">
p {color:blue; font-family: times; font-size:10pt;}
h1 {color:black; font-size:12pt; font-style:Arial; text-align: center;}
</style> </head>
<body>
<h1>Test Style Shits in Communicator</h1>
<p> This is a first part of the document
</body>
</html>
То же самое но в JavaScript-нотации будет выглядеть следующим образом:
<html>
<head>
<style type="text/javascript">
tags.p.color="blue";
tags.p.fontFamily="times";
tags.p.fontSize="10pt";
tags.h1.color="black";
tags.h1.fontSize="12pt"; tags.h1.fontStyle="Arial"; tags.h1.textAlign-"center";
</style> </head>
<body>
<h1>Test Style Shits in Communicator</h1>
<p> This is a first part of the document
</body>
</html>
Разберем теперь описатели стилей более подробно. Определим область их применения и способы
встраивания в документ.
Новые HTML-контейнеры
С появлением таблиц стилей в языке появилось три новых контейнера: STYLE, LINK, SPAN. Вообще
говоря LINK - это не новый таг, а новое применение старого тага.
Контейнер STYLE(<style type="...">......</style>) служит для определения таблицы описания стилей.
Хотя в спецификации CSS прямо не говорится, в каком контейнере документа следует применять STYLE,
тем не менее, в примерах чаще всего приводится этот контейнер внутри контейнера HEAD.
Контейнер LINK в контексте описателей стилей применяется для определения внешнего файла с
описаниями стилей для данного документа. Например, внешний файл может содержать следующее
описание стилей:
/* CONTENTS OF THE EXTERNAL STYLE SHEETS FILE CSS.HTM*/
p {color:blue; font-family: times; font-size:10pt;}
h1 {color:black; font-size:12pt; font-style:Arial; text-align: center;}
/* the end of style sheets definition */
Для применения этого описателя стилей в заголовок документа необходимо включить следующий таг:
<html>
<head>
<link REL=STYLESHEET TYPE="text/css" HREF=HTTP://LOCALHOST/CSS.HTM>
</head>
<body>
The body of the document should be here.
</body>
</html>
Из данного примера видно, что писание стилей в фале CSS.HTM полностью совпадает с описанием в
контейнере STYLE. В тексте файла описания стилей не нужно указывать таги контейнера STYLE.
Контейнер SPAN применяется для переопределения стиля отображения текущего фрагмента текста и в
некотором смысле аналогичен контейнеру FONT. Часто SPAN применяют для достижения типографских
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 22 из 109
эффектов, таких например, как выделение заглавной буквы абзаца:
<HTML> <!-Author: Paul Khramtsov
Date: September 19, 1997
URL:
HTTP://POLYN.KIAE.SU/INTERNET/INTRO.HTMl -->
<HEAD> <style TYPE="text/css">
FS.all { color:red; font-size: 24pt; font-family: times;}
H1 {color:navy; text-transform: uppercase;font-size: 18pt;
font-weight: bold; font-family: times;} H2
{color:navy; font-size: 14pt; font-weight: bold; font-style: italic; font-family: times;}
H3 {color:navy; font-size: 10pt; font-weight: bold; font-family: times;}
P {color:navy; font-size: 12pt; font-family: times; text-align: justify}
P.HELP {color:darkgreen; font-size: 10pt; font-family: times;
text-align: justify;}
P.LEFT {color:navy; font-size: 12pt; font-family: times; text-align: right;} </style>
</HEAD>
<BODY bgcolor=lightyellow>
<center>
<h3>Центр информационных технологий</h3>
<h1>Информационные Ресурсы Internet</h1>
<h3>(Учебное пособие для компьютерных непрофессионалов)</h3>
<h3>Храмцов П.Б.</h2> <h3>Москва, 1997</h2>
<hr>
</center>
<p><span class=FS>C</span>обществу глобальных компьютерных сетей
Internet в 1995 году
исполнилось 25 лет. На настоящий момент - это самый
большое информационный ресурс мира.
Одновременно Internet - это самая
популярная и массовая компьютерная сеть планеты. По оценкам
международного
центра координации сетевой деятельности в рамках Internet(Internic-Internet
Information Center) на 1997 год в сети насчитывалось несколько десятков миллионов
постоянно
зарегистрированных компьютеров-серверов, которые откликаются на запросы пользователей 365 дней в
году и 24 часа в сутки. Этот огромный информационный ресурс полностью децентрализован и не
подчиняется ни
одному правительству или крупной финансовой компании мира. </BODY>
</HTML>
В данном примере, контейнер SPAN применен сразу после тега начала параграфа <p>, что позволяет
выделить первую букву в отображаемом абзаце.
Кроме новых контейнеров таблицы описания стилей привнесли еще и новые атрибуты в известные
теги.
Новые свойства контейнеров HTML
Перечень новых атрибутов у тегов HTML следует начать с атрибута STYLE. Этот атрибут используется
для определения стиля отображаемого контейнера непосредственно внутри тага начала контейнера:
<h3 style="line-hieght:24pt; font-weight:bold; color: blue">The blue text
<h3 style="lineHeight='24pt'; fontWeght='bold'; color='blue'">The blue text
Можно также определить класс стилей и использовать его при помощи атрибута CLASS:
<style type="text/css">
h3.class1 {font-size:12pt;color=blue}
</style>
.....
<h3 class="class1">This is a blue text
В данном случае мы определили класс заголовков третьего уровня, но можно определить класс,
который можно будет применять к любым контейнерам, а не только к заголовкам:
<style type="text/css"> all.class1 {font-size:12pt;color=blue} </style>
Kроме определения классов существует еще возможность создания поименованных стилей.
Поименованный стиль создается как уточнение какого-либо класса:
<style type="text/css"> all.class1 {font-size:12pt;color=blue} #C1 { font-size: 20;} </style>
....
<h3 class="class1">This is a blue text <h3 class="class1" id="C1">This is a blue text
Таким образом, атрибуты контейнеров позволяют связать описатели стилей с содержанием
контейнеров и управлять формой отображаемой информации.
Свойства контейнеров, управляемые описателями стилей
Первую группу свойств составляют свойства шрифтов:
font-size, font-family, font-weight, font-style.
Вторую группу свойств составляют свойства текста:
line-height, text-decoration, text-transform, text-align, text-indent.
Третью группу свойств составляют свойства блоков текста:
margin-left, margin-right, margin-top, margin-bottom, margin, padding-top, padding-right, padding-bottom,
padding-left, paddings, border-top-width, border-bottom-width, border-left-width, border-right-width, borderwidth, border-style, border-color
Четвертую группу составляют описатели цвета фона и цвета текста:
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 23 из 109
color, background-image, background-color.
Кроме того, существуют свойства определяющие тип пульки у элементов списка и ряд других свойств
элементов HTML-разметки.
Вопросы для самоконтроля:
1. Технологии разделения содержания и представления www-страниц. CSS.
2. Каскадные таблицы стилей. Селекторы, свойства, значения свойств. Псевдоклассы.
Рекомендуемая литература:
1. HTML, CSS, Скрипты: практика создания сайтов/Ломов – СПб: BHV, 2005-416 стр.
2. HTML/XML/CSS/Штайнер – СПб: Лаборатория Базовых Знаний, 2001, 512 стр.
Лекция 10. Управление просмотром страниц Web-узла. JavaScript
Содержание лекционного занятия:
 Модель объектов JavaScript - объекты Navigator'а
 Описание иерархии классов
Управление просмотром страниц Web-узла. JavaScript
Современные гипертекстовые информационные системы условно можно представить в виде
совокупности нескольких компонентов: системы хранения гипертекстовых объектов, системы отображения
гипертекстовых объектов, системы подготовки гипертекстовых объектов и системы программирования
просмотра совокупности гипертекстовых объектов. С этой точки зрения технология World Wide Web
только к 1996 году получила законченный, функционально полный вид. Первыми были разработаны
системы хранения и просмотра (1989-1991 г.г.), которые продолжают развиваться и в настоящее время.
После 1990 года стали появляться первые системы подготовки документов. Наконец, в 1995 году были
предложены первые языки управления сценариями просмотра.
Программирование процедуры просмотра гипертекстовой базы данных не является изобретением
Netscape, Microsoft или Sun. Практически все локальные гипертекстовые системы в той или иной степени
имеют программные средства манипулирования гипертекстовыми объектами. В ряде случаев вся
гипертекстовая база данных может быть представлена как одна большая программа, в которой
гипертекстовые узлы - это программные модули, а связи между ними - это передача управления от одного
модуля другому.
Преимущества такого подхода перед традиционной статической разметкой очевидны: гибкость
построения гипертекстовой сети, возможность создания программ прокрутки фрагментов базы дынных,
генерация составных гипертекстовых объектов из существующих элементарных компонентов.
Динамические объекты могут быть легко получены из статических, т.к. в случае существования программы
просмотра система может быть переведена из интерактивного режима просмотра гипертекстовой базы
данных в пакетный, когда действия оператора будут заменяться командами программы.
Программы просмотра гипертекстовых страниц традиционно называют скриптами (scripts) по аналогии
с исполняемыми файлами, написанными для командных интерпретаторов типа sh. Собственно как это было
и раньше в локальных системах, в программировании просмотра гипертекстовых документов World Wide
Web существуют два подхода: создание интерпретируемых программой просмотра скриптов или
компиляция байт-кода. Первый подход следует традиции World Wide Web, согласно которой для
разработки гипертекстовой страницы нужен только обычный текстовый редактор и сам гипертекстовый
документ должен легко читаться человеком-оператором. Второй подход позволяет повысить
эффективность исполнения программы и защищенность кода от несанкционированных модификаций. Как
первый, так и второй способ опираются на объектно-ориентированный подход к программированию. По
поводу байт-кодов или мобильных кодов, как их еще называют, написано в контексте технологии
программирования Java достаточно много, поэтому сосредоточим свое внимание на скриптах, а точнее на
скриптах, написанных на языке JavaScript.
Модель объектов JavaScript - объекты Navigator'а
Идея JavaScript очень проста. Все операции, которые можно исполнять в программе на JavaScript,
описывают действия над хорошо известными и понятными объектами, которыми являются элементы
рабочей области программы Netscape Navigator и контейнеры языка HTML. Собственно объектная
ориентированность JavaScript на этом и кончается. Есть только объекты с набором свойств и набор
функций над объектами. Последние называются методами. Кроме методов существуют и другие функции,
которые больше похожи на функции из традиционных языков программирования и позволяют работать со
стандартными математическими типами или управлять процессом выполнения программы. Еще в
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 24 из 109
JavaScript есть события - аналог программных прерываний. Эти события также ориентированы на работу в
World Wide Web, например, загрузка страницы в рабочую область Navigator'a или выбор гипертекстовой
ссылки. Используя события, автор гипертекстовой страницы и программы ее отображающей может
организовать просмотр динамических объектов, например, бегущая строка, или управление многооконным
интерфейсом.
Описание иерархии классов
Все встроенные объекты JavaScript берут свое начало от рабочей области Netscape, и их можно
представить в виде следующей иерархии:
Кроме этих классов объектов пользователь может создавать и свои собственные. Но обычно
большинство программ используют эту систему классов и не создают новых.
Вопросы для самоконтроля:
1. Язык JavaScript. Синтаксис. Функции, объекты.
2. Язык JavaScript. Объектная модель документа
Рекомендуемая литература:
1. Бранденбау Дж. JavaScript: сборник рецептов. СПб.: Питер, 2000. — 416 с.
2. Вейнер П. Языки программирования Java и JavaScript. М.: Лори, 1998. — 242
Лекция 11. Методы объектов и свойства объектов. Управление потоком вычислений
Содержание лекционного занятия:
 Методы объектов и свойства объектов.
 События
 Массивы
 Графика
Каждый из этих классов имеет функции управления объектами класса - методы. Самыми главными их
этих методов являются те, которые позволяют переназначать значения объектов. Делается это обычно по
операции присваивания. Вообще, все типы операторов, которые поддерживаются обычными языками
программирования, реализованы JavaScript (+,-,*, /, %, >>,<<, +=, -=, ...). При этом оператор сложения "+"
при работе со строками означает конкатенацию последних, т.е. добавление в конец строки новую строку:
s = "string1"+"string2"
Кроме операций с числами и описаний стандартных классов в JavaScript есть команды управления
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 25 из 109
потоком вычислений:
break - принудительный выход из цикла;
while(i &lt 6)
{
if(i==3) break; }
continue - переход в конец цикла;
while(i &lt 6)
{
if(i==3) continue;
}
for - цикл;
for(i=0;i<9;i++)
{
...
}
for - цикл свойств объекта (переменных определенных в классе);
for(i in obj)
{
str = obj[i]
}
if..else - условный оператор;
if(i>0)
{
...
}
else
{
...
}
wile - условный цикл;
wile(j==k)
{
j++;
k--;
}
var - оператор объявления переменной.
var kuku = "kuku"
Тип переменной определяется по присвоенному ей значению.
Перечисленные здесь операторы не представляют полного перечня операторов JavaScript, но их вполне
достаточно для выполнения практических занятий.
События
Важным элементом языка являются события. Программист использует события для выполнения
определенных частей программного кода скрипта. Один из наиболее часто используемых приемов исполнение определенных действий в момент загрузки страницы в Navigator.
Не будем перечислять все события, но упомянем о наиболее часто используемых:
onLoad - выполнение скрипта или функции при загрузке;
onChange - порождается при изменении значения элемента формы;
onClick - порождается при выборе объекта (button, checkbox и т.п.);
onSelect - порождается при выборе текстового объекта (text, textarea);
onSubmit - при нажатии на кнопку Submit;
onUnload - при переходе к другой странице.
Появление Netscape Navigator 3.0 и новой версии JavaScript 1.1 заставляет продолжить обзор
возможностей управления сценариями просмотра Website, который был опубликован в предыдущем
выпуске "Открытых Систем Сегодня" (CW N 46, 1996). В новой версии языка были введены: возможность
взаимодействия JavaScript и Java, определение установленных plug-ins, определены новые типы объектов
(Area, Function, Image) и ряд других особенностей, которые по мнению разработчиков должны повысить
мощь программирования на JavaScript.
Массивы
Первый тип новых объектов, которые мы рассмотрим, являются массивы. Тип "Array" введен в
JavaScript 1.1 для возможности манипулирования самыми разными объектами, которые отображаются
Navigator'ом. Это - список всех гипертекстовых ссылок данной страницы Website, список всех картинок на
данной странице, список всех applet'ов данной страницы, список всех элементов формы и т.п. Пользователь
может создать и свой собственный массив, используя конструктор Array(). Делается это следующим
образом:
new_array = new Array()
new_array5 = new Array(5)
colors = new Array ("red","white","blue")
Размерность массива может динамически изменяться. Можно сначала определить массив, а потом
присвоить одному из его элементов значение. Как только это значение будет присвоено, изменится и
размерность массива:
colors = new Array()
colors[5] = "red"
В данном случае массив будет состоять из 6 элементов, т.к. первым элементом массива считается
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 26 из 109
элемент с индексом 0. Для массивов определены три метода: join, reverse, sort. Join объединяет элементы
массива в строку символов, в качестве аргумента в этом методе задается разделитель:
colors = new Array("red","white","blue")
string = acolors.join("+")
В результате выполнения присваивания значения строке символов string мы получим следующую
строку:
string = "red + white + blue"
Другой метод, reverse, изменяет порядок элементов массива на обратный, а метод sort отсортировывает
их в порядке возрастания. У массивов есть два свойства: length и prototype. Length определяет число
элементов массива. Если нужно выполнить некоторую рутинную операцию над всеми элементами массива,
то можно воспользоваться циклом типа:
color = new Array("red","white","blue")
n=0
while(n != colors.length)
{.... операторы тела цикла ...}
Свойство prototype позволяет добавить свойства к объектам массива. Однако наиболее часто, в
программе на JavaScript используются встроенные массивы, главным образом графические образы (Images)
и гипертекстовые ссылки (Links).
Графика
До Navigator 3.0 в JavaScript использовались только встроенные объекты типа Image. В новой версии
языка появился конструктор для этого типа объектов:
new_image = new Image()
new_image = new Image (width,height)
Часто для целей создания мультипликации создают массивы графических объектов, которые потом
прокручивают один за другим:
img_array = new Array()
img_array[0] = new Image(50,100)
img_array[1] = new Image(50,100)
....
img_array[99] = new Image(50,100)
У объекта Image существует 10 свойств, из которых, пожалуй, самым важным является src. Так, для
присваивания конкретных картинок элементам массива img_array следует воспользоваться следующей
последовательностью команд:
img_array[0].src = "image1.gif"
img_array[1].src = "image2.gif"
...
img_array[99].src = "image100.gif"
В данном случае можно было воспользоваться и циклом для присвоения имен, так как они могут быть
составлены из констант и значения индексной переменной. В новой версии языка объект типа Image можно
поименовать в HTML-теге IMG. После этого можно обращаться к нему по имени. При этом следует
учитывать, что если Image используется внутри формы, то он является свойством этой формы. Это значит,
что для следующего графического объекта должны быть использованы разные составные имена:
<img name=car src=car.gif>
<--- Встроенный в документ объект
document.car.src = "car1.gif"
<form name=kuku>
<img name=car src=car.gif>
<-- Встроенный в форму документ.
</form>
document.kuku.car.src = "car1.gif"
Однако, наиболее часто в примерах использования скриптов можно встретить обращение к Image по
индексу в массиве всех графических объектов данной страницы. Если наш объект, например, является
вторым Image на странице, то будь он внутри формы или за ее пределами, к нему всегда можно обратиться
по индексу:
document.images[1].src = "car1.gif"
Расширяя наш пример с массивом Image построим теперь документ, в котором будет встроена
мультипликация, определенная нашим массивом:
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 27 из 109
<HTML>
<HEAD>
<SCRIPT>
function multi_pulti()
{
img_array = new Array()
img_array[0] = new Image(50,100)
....
img_array[99] = new Image(50,100)
img_array[0].src = "image1.gif"
...
img_array[99].src = "image100.gif"
n=0
while(n==0)
{
document.images[0].src = img_array[0].src
...
}
}
</SCRIPT>
</head>
<body onLoad="multi_pulti()">
<img src=image1.gif>
</body>
</html>
Довольно часто используют не мультипликацию, а выбор картинки через OPTION, другой новый объект
JavaScript. При этом можно через поле формы SELECT менять не только саму картинку, но и
гипертекстовую ссылку, которая может быть связана с этой картинкой. На гипертекстовую ссылку также
можно ссылаться по индексу:
document.links[index].href = kuku.html
Данный прием оправдан и с точки зрения интерфейса навигатора. При использовании такого сорта
массивов ссылок не требуется их длительное перечисление и листание страницы в рабочей области
навигатора - можно просто выбрать ссылку из "выпадающего" меню. Другой способ для сокращения числа
нажатий на клавиши - использование событий. В том же объекте OPTION можно использовать событие
onChange, что делает необязательным нажатие кнопок типа submit. В этом случае достаточно будет просто
выбрать альтернативу и перейти к новой странице сразу после выбора.
Вопросы для самоконтроля:
1. Принципы взаимодействия web-сервера и браузера.
2. Основы клиент-серверного взаимодействия.
3. Протоколы высокого уровня.
Рекомендуемая литература:
1. Бранденбау Дж. JavaScript: сборник рецептов. СПб.: Питер, 2000. — 416 с.
2. Вейнер П. Языки программирования Java и JavaScript. М.: Лори, 1998. — 242
Лекция 12. Элементы языка JavaScript
Содержание лекционного занятия:
 Стеки гипертекстовых ссылок
 Фреймы и окна
 Наследование кода скриптов различными страницами
 Java, JavaScript и Plug-ins
Стеки гипертекстовых ссылок
Не обошли своим внимание авторы JavaScript и стеки гипертекстовых ссылок. В язык теперь введен
новый тип объектов типа Area. Area - это элемент контейнера MAP, который определяет client-site
imagemap. Собственно, главное достоинство такого объекта состоит в том, что гипертекстовые ссылки,
которые определены в AREA, стали доступны для переопределения. Они появляются в массиве обычных
ссылок страницы, и можно как получить значение URL, так и переопределить его. К объекту AREA нельзя
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 28 из 109
обратиться по имени. Можно использовать только индекс массива гипертекстовых ссылок документа.
В контексте стека гипертекстовых ссылок интересно рассмотреть еще одну возможность JavaScript,
связанную с переходом по гипертекстовой ссылке вообще. В обычном случае параметр HREF контейнера A
должен иметь какое-нибудь значение. Если, например, по событию onClick необходимо открыть новое
окно и в старом сохранить отображенный документ, то его URL следует указывать в качестве значения
HREF. В противном случае, в старое окно будет загружена пустая страница, если HREF=" ". В новой
версии JavaScript введена функция void. Точнее тип void, который означает отсутствие какого-либо
значения. Если нам необходимо выполнить некоторые действия при выборе гипертекстовой ссылки, но при
этом не перегружать текущие страницы, то в параметре HREF можно указать конструкцию:
<A HREF="javascript:void(0)">kuku</A>
Таким приемом часто пользуются при программировании событий, связанных с проходом манипулятора
мыши через поле гипертекстовой ссылки.
Фреймы и окна
При работе с фреймами и окнами в предыдущих версиях JavaScript постоянно приходилось отслеживать
последовательность открытия окон и фреймов, для того, чтобы аккуратно их потом закрывать. На
некоторых неточностях работы с окнами были основаны так называемые mail-bombs. Суть этих "подарков"
заключалась в том, что если пользователь по почте принимает документ, который состоит только из одной
команды:
window.close()
то система не спрашивая пользователя закрывала текущее окно, а в этот момент таким окном является
окно электронной почты. Теперь, перед тем как что-либо закрыть, система будет спрашивать разрешения.
Правда, опять не всегда. Если в момент получения команды на закрытие окна на экране только одно окно
Navgator, то система его закроет без каких-либо комментариев.
Однако, работа с окнами и фреймами на этом не исчерпывается. Во-первых, в систему введено новое
свойство opener, которое определено для текущего окна или фрейма, и методы blur и focus распространены
на работу с окнами. Свойство opener определяет окно документа, который вызвал открытие окна текущего
документа. Свойство определено для любого окна и фрейма. Необходимо выполнить некоторые функции
по отношению к окну, открывшему данное окно, и можно использовать выражение типа:
window.opener.[method]
Например, если требуется закрыть окно-предшественник, то можно просто выполнить метод close:
window.opener.close()
Точно таким же способом можно изменить содержание этого окна при помощи методов write или
writeln. Можно менять и другие свойства объектов в окне предшественнике. Следующий пример взят из
дополнений к спецификации JavaScript:
window.opener.document.bgColor='cyan'
В данном случае для окна предшественника определен светло голубой цвет в качестве цвета фона. Но
самым замечательным является то, что предшественника можно менять. Это значит, что автор получает
возможность открывать и закрывать окна не строго иерархической последовательности, а в произвольном
порядке. Управление многооконным интерфейсом в этом случае становится более гибким:
window.opener= new_window
window.opener = null
Первый пример переназначает для текущего окна окно-предшественник, в то время как второй вообще
защищает предшественника от каких-либо действий. Все, что было сказано об окнах, распространяется и на
фреймы, которые являются просто частным случаем окна. При работе с фреймами часто фрейм может быть
порожден путем разбиения другого фрейма на части. Если при этом потребуется обратиться к окнупредшественнику фрейма-предшественника, то свойство opener в этом случае незаменимо. Разработчики
языка следуют за пожеланиями авторов Websit'ов и практикой применения JavaScrip, которая на начальной
стадии разработки языка не была столь очевидной. Кроме обращения к различным свойствам окон и
фреймов разработчики расширили действие методов blur и focus с фреймов до окон. Теперь не только
фрейм, но и окно может быть сделано текущем с использованием метода focus или, наоборот, переведено в
фон при помощи метода blur. В ряде случаев, при порождении нескольких страниц, например, обращение к
этим функциям бывает довольно полезным.
Наследование кода скриптов различными страницами
Отсутствие какого-либо наследования между различными страницами Website заставляло разработчиков
перетаскивать из одной страницы в другую довольно большое количество часто используемых функций и
переменных. Разговоры о том, что было бы неплохо получить возможность доступа к глобальным ресурсам
или возможность определять такие глобальные ресурсы, ведутся с самого момента появления JavaScript. К
сожалению, стройного логичного механизма передачи параметров, функций и переменных от одного окна
или фрейма другому нет и в JavaScript 1.1. Однако, продвижение в этом направлении есть.
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 29 из 109
У контейнера SCRIPT появился атрибут SRC. Это дает возможность авторам строить своеобразную
библиотеку функций, к которым можно обращаться из любой страницы, в которой будет ссылка на такую
библиотеку. При этом вовсе необязательно размещать саму библиотеку на том же сервере, где размещены и
гипертекстовые страницы Website. Можно использовать и чужие функции, написанные кем-либо из
ветеранов программирования на JavaScript на другом конце Земли. В атрибуте SRC используется обычный
URL. Внутри файла скриптов не используются теги SCRIPT. Это обычный файл с использованием
определений функций и переменных. Естественно, что использование чужих скриптов может обернуться
не только полезными приобретениями, но и непредсказуемыми проблемами. Для обычных пользователей
страниц Website подкачка большого количества скриптов может стать просто дополнительным источником
затрат. Наиболее вероятным случаем может стать использование одной-двух функций из библиотеки на
одной странице, а качать придется всю библиотеку. Другой новой возможностью работы с функциями
стало введение нового объекта Function. Объект Function порождается конструктором Function:
new_Function = new Function(arg1,arg2,...,argn,
function_body)
Главное отличие от обычного декларирования функции заключается в том, что в данном случае
порождена переменная new_Function, с которой можно работать, как с любым другим объектом. При
обычном переделении функции такой переменной не порождается. Как любой объект Function имеет свои
свойства, но не имеет методов. В качестве свойств функции выступают аргументы и возможность
назначения новых свойств через prototype. В заключении разговора о функциях и наследовании хочется
еще раз обратить внимание на свойство opener окон и фреймов. Это свойство можно использовать при
обращении к объектам страницы-родителя, что позволяет компенсировать отсутствие наследования и
глобальных переменных в JavaScript.
Java, JavaScript и Plug-ins
В новой версии языка есть возможность организовать взаимодействие между Java-applet'ами и JavaScripскриптами. Достигается это за счет использования атрибута MAYSCRIPT в контейнере APPLET.
Собственно в JavaScript определен объект типа APPLET, к которому можно обращаться либо по имени,
либо по индексу в массиве applet'ов. У этого объекта есть только одно свойство - имя. Ни какие-либо
другие свойства или методы для данного типа объектов не определены. Сами детали взаимодействия
applet'ов и скриптов лучше всего обсуждать в рамках программирования Java applet'ов, поэтому здесь мы
эти особенности опустим.
Кроме applet'ов JavaScript позволяет работать и с Plug-ins. Последние представляют из себя массив
соответствующего типа, для которого определен ряд свойств. Используя эти свойства можно определить
установленные plig-ins и их соответствия MIME-типам. Назначить plug-ins или манипулировать ими
нельзя.
Вопросы для самоконтроля:
1. JavaScript — как объектно-ориентированный язык программирования
2. Сценарий (программа) на JavaScript — как набор взаимодействующих объектов
Рекомендуемая литература:
1. Бранденбау Дж. JavaScript: сборник рецептов. СПб.: Питер, 2000. — 416 с.
2. Вейнер П. Языки программирования Java и JavaScript. М.: Лори, 1998. — 242
Лекция 13. Встраивание в HTML-документ
Содержание лекционного занятия:
 Контейнер SCRIPT
 Атрибут LANGUAGE
 Единство в многообразии
Встраивание в HTML-документ
Для встраивания скриптов в тело HTML-документа используется контейнер SCRIPT. Не все программы
просмотра способны распознавать и исполнять скрипты, поэтому само тело скрипта помещается в
контейнер комментария. Для определенности рассмотрим небольшой пример:
<HTML>
<!-Author: Pavel Khramtsov
Date: March 5, 1996
-->
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 30 из 109
<HEAD>
<TITLE>Registration</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- The JavaScript Functions Definition
function help_win()
{
Help = window.open("reg_help.htm","Help",
"scrollbars=yes,resizable=yes")
}
function main_menu()
{
Main_menu = window.open
("main_m.htm","Main_menu")
}
// The end of JavaScript Functions Definition -->
</SCRIPT>
</HEAD>
<BODY>
<CENTER>
<TABLE>
<TR><TH><IMG
SRC="radleg3.gif"></TH><TH><H2>ISTC.
Project RADLEG(#245)</H2>
RRC "Kurchatov Institute"<BR>
<I>Dec, 25, 1995</I>
</TH></TR>
</TABLE>
</CENTER>
<HR>
<CENTER>
<h2>Registration Form</h2>
<hr>
......
Текст страницы.
.....
<hr>
<FORM NAME=help_call>
<TABLE BORDER=0>
<TR>
<TD><INPUT NAME=next TYPE=button VALUE=Next
onClick="main_menu()"></TD>
<TD><INPUT NAME=help TYPE=button VALUE=Help
onClick="help_win()"></TD>
</TR>
</TABLE>
</FORM>
<hr>
</CENTER>
</BODY>
</HTML>
В данном примере в заголовок документа (контейнер HEAD) включен контейнер SCRIPT. До недавнего
времени атрибут LANGUAGE в этом контейнере не являлся обязательным. Но с момента появления
VBSCRIPT смысл в указании типа языка появился - Navigator не понимает скриптов на других языках.
Отсутствие атрибута может привести к ошибкам при отображении гипертекстовых страниц.
Далее в тексте страницы определен комментарий, в который включен текст скрипта. Начинается
комментарий со строки:
<!-- The JavaScript Functions Definition
и кончается строкой:
// The end of JavaScript Functions Definition -->
Внутри контейнера скрипта определены две функции пользователя: help_win() и main_menu(). Смысл
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 31 из 109
этих функций достаточно прозрачен. Help_win() предназначена для организации контекстно зависимого
help, а main_menu() осуществляет допуск пользователя к главному меню Website. Обе функции используют
один и тот же метод open (встроенную в JavaScript функцию, которая определена над объектом window) для
того, чтобы открыть новое окно Netscape Navigator и загрузить в него гипертекстовые документы. При этом
функция main_menu порождает стандартное окно (с кнопочками, иконками и т.п.), а функция help_win()
окно без стандартных атрибутов. У этого окна имеются только линейки прокрутки (scroll bars).
Вызов функций осуществляется после нажатия на соответствующую кнопку, которые определены в
HTML-форме help_call. Таким образом выполнение функций будет осуществлено только в том случае, если
произойдет событие, описанное атрибутом onClick в контейнере INPUT соответствующего поля формы.
Если быть более точным, то приведенный пример - это фрагмент, реализующий регистрацию
пользователя. К моменту его выполнения окно главного меню уже открыто, поэтому создание этого окна
при выборе кнопки "NEXT" не происходит, а текст загружается в уже открытое окно.
Единство в многообразии
В заключении следует отметить, что JavaScript - это не единственный язык управления сценариями
просмотра документов. Microsoft подготовила свою версию аналогичного языка - VBScript на основе Visual
Basic. Кроме того, управлять сценарием просмотра можно и из Java-applet'ов, что конечно сложнее, но зато
более надежно и безопасно. При этом программист получает все преимущества наследования и прочие
атрибуты объектно-ориентированного программирования. В конце концов для создания фреймов и окон
можно использовать атрибуты соответствующих контейнеров HTML, которые позволяют делить рабочую
область экрана на фрагменты, перекрывать объекты и восстанавливать первоначальный вид страницы.
Таким образом, к настоящему времени существует по меньшей мере три способа управления сценариями
просмотра гипертекстовых баз данных Web, каждый из которых по своему хорош. Какой из них выбрать это дело автора Website.
Следуя логике авторов JavaScript и направлениям развития World Wide Web следует ожидать появления
новых типов объектов и изменения свойств существующих. Кроме этого, видимо, появятся глобальные
переменные и функции. Порождение абстрактных типов тоже не за горами, хотя от такой новации не очень
понятно, кто выиграет. Постепенно совершенствуется и поддержка встроенных функций на разных
платформах, так, например, функция random() реализована в настоящее время везде, что не исключает
использование и своих собственных датчиков случайных чисел. И еще, скорее всего, следует ожидать
компилятора JavaScript для клиента. Будет ли эта возможность встроена в Navigator или это будет
отдельный модуль - пока не ясно, но появление библиотек функций - движение в этом направлении,
хорошо согласующееся с принципами кэширования гипертекстовых страниц.
Вопросы для самоконтроля:
1. Дайте определение: типа, набора значений данных, примитивного значения
2. Дайте определение: объекта, конструктора, прототипа
Рекомендуемая литература:
1. Дарнелл Р. JavaScript: справочник. СПб.: Питер, 1999. — 192 с.
2. Фролов А. В., Фролов Г. В. Сценарии JavaScript в активных страницах Web. М.: Диалог-Мифи,
1998. — 284 с.
Лекция 14. Методы
Содержание лекционного занятия:
 Примеры манипулирования окнами
 Методы
Примеры манипулирования окнами
Как это не покажется странным, но в наших простых примерах мы уже начали манипулировать окнами.
Открытие окна-пердупреждения - это операция над объектом "окно". Определим свойства объекта "окно",
методы изменения этих свойств и события, которые могут быть связаны с объектом типа "окно". При этом
мы не ставим перед собой задачи описания всех известных в JavaScript свойств, методов и событий,
связанных с объектами этого класса. Определим только те, которые понадобятся в наших примерах.
Методы
Методы позволяют нам создать на экране видимое окно, закрыть окно и проделать с ним другие
операции. С методом window.alert мы уже знакомы. Методы window.confirm и window.prompt
используются для получения ответов от пользователя.
Использование методов Alert, Prompt, Confirm
<HTML>
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 32 из 109
<HEAD>
<title>Window simple example</title>
</HEAD>
<BODY>
<center>
<h1>Simple window methods</h1>
<hr>
</center>
<ul>
<li><a href="javascript:window.alert
('Attention!!! press the button to continue.')
">Метод Alert.</a>
<li><a href="javascript:window.status
=window.confirm('Answer yes or no.');void(0);
">Метод Confirm.</a>
<li><a href="javascript:window.status
=window.prompt('Type string here:','');void(0);
">Метод Prompt.</a>
</ul>
</BODY>
</HTML>
В данном примере при вызове метода confirm появляется окно с просьбой подтверждения некоторого
действия, при использовании метода prompt - окно с приглашением ввести информацию в поле ввода. В
двух последних случаях если не указать функции void(0), произойдет замещение текста HTML-документа
на значение, которое возвращают эти два метода. Если внимательно смотреть за полем окна навигатора, в
котором отображается информация о загрузке документов, то там можно будет увидеть возвращаемые
значения, т.к. они присваиваются свойству status текущего окна, которое связано именно с этим полем, и
которому можно присваивать значения, и, следовательно, эти значения будут отображаться в этом поле.
Однако, следует признать, что рассмотренные выше методы используются крайне редко. А тем более в
приведенном здесь контексте, поэтому поспешим рассмотреть методы открытия и закрытия окна.
Открыть окно можно используя метод open:
Метод window.open
<HTML>
<HEAD>
<title>Window simple example</title>
</HEAD>
<BODY>
<center>
<h1>Open window methods</h1>
<hr>
</center>
Если выбрать гипертекстовую ссылку
<a href="javascript:window.open('simple8.htm',
'example','scrollbars,
resizable,width=300,height=200');void(0);
">Открыть окно</a>, то
будет открыто новое окно. Чаще всего этот
прием используют
при создании контекстно зависимых меню.
</BODY>
</HTML>
В данном случае при выборе гипертекстовой ссылки будет открыто окно шириной 300 пикселей и
высотой 200 пикселей, в окне не будет никаких стандартных меню навигатора, и в окно будет загружен
документ simple8.html. Метод open позволяет также определить области прокрутки, наличие или
отсутствие стандартных меню навигатора и возможность изменения размеров окна. Последняя
возможность зависит от платформы на которой исполняется скрипт.
Рассмотрим еще один метод, связанный с окном - метод scroll. Данный метод позволяет организовать
прокрутку текста в окне.
Прокрутка текста в окне навигатора
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 33 из 109
<HTML>
<HEAD>
<title>Scroll text</title>
</HEAD>
<BODY>
<center>
<h1>Прокрутка текста в окне
навигатора</h1>
<hr>
[<a href="javascript:for(i=0;i<80;i++)
{window.scroll(0,i*10)};void(0);">
Прокрутить текст</a>]
<hr>
</center>
Вообще говоря, проверить тип программы
просмотра можно на сервере
протокола HTTP и передать программе
просмотра уже готовую страницу
без условной генерации ее
...
<hr>
<center>[<a href=#top>Вернуться в начало</a>]</center>
</BODY>
</HTML>
От метода прокрутки мы перейдем теперь к методу, который позволит нам прокручивать документ
более равномерно - это метод setTimeout. Большинству пользователей Web он знаком по бегущим строкам
в поле статуса программы-навигатора. Метод setTimeout позволяет отложить выполнение функции, которая
указывается в качестве аргумента на определенное количество миллисекунд. Системы прокрутки в этом
случае рекурсивно вызывают свое выполнение через этот метод и тем самым порождают бесконечный цикл
прокрутки.
Следует подробно остановиться на особенностях исполнения метода setTimeout. Особенно в части
запуска и останова процедуры прокрутки. Рассматривать алгоритм ее исполнения лучше всего в контексте
многопоточных или многозадачных систем. Функция my_scroll - это отдельный процесс (поток), который
исполняется программой-навигатором. В момент, когда интерпретатор навигатора встречает метод
setTimeout, он создает новый процесс (поток), эквивалентный функции my_scroll, и откладывает его
исполнение на 500 миллисекунд. После этого он продолжает выполнять текущий процесс (поток). В нашем
случае вызов метода setTimeout - это последняя команда функции my_scroll, поэтому после нее ничего не
выполняется, а сам процесс или поток, связанный с текущей функцией my_scroll после обработки
setTimeout уничтожается. Однако, новый процесс (поток) уже создан в памяти и ждет начала своего
исполнения.
В нашем примере новый процесс поток порождается всякий раз, как интерпретатор достигает метода
setTimeout, а уничтожается, когда интерпретатор доходит до последнего оператора этого потока. Такой
алгоритм выполнения заставляет расположить вызов setTimeout за пределами блока проверки условий
скроллинга. Если мы расположим его внутри, то при останове скроллинга новый процесс не будет
порожден, а это значит, что и кода, который будет реагировать на флаг скроллинга после останова, не будет
существовать, т.е. запустить скроллинг не будет никакой возможности. Именно по этой причине функция
my_scroll начинает исполняться сразу после загрузки документа по событию onLoad, но т.к. флаг
скроллинга 0, то прокрутки текста не происходит. Процесс порождается все время, пока страница
загружена в текущее окно навигатора.
Во второй версии навигатора данная функция была реализована не очень аккуратно, что приводило к
переполнению программного стека и краху программы-навигатора.
Вопросы для самоконтроля:
1.Объекты языка
2. Встроенный объект
3. Объект среды
Рекомендуемая литература:
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 34 из 109
1. Дарнелл Р. JavaScript: справочник. СПб.: Питер, 1999. — 192 с.
2. Фролов А. В., Фролов Г. В. Сценарии JavaScript в активных страницах Web. М.: Диалог-Мифи,
1998. — 284 с.
Лекция 15. Гипертекстовые ссылки и картинки
Содержание лекционного занятия:
 Определение алгоритма.
Просмотр фотографий образцов через список гипертекстовых ссылок
Гипертекстовые ссылки и картинки
Гипертекстовые ссылки и картинки - это свойства объекта "документ", который в свою очередь является
частью объекта "окно". И гипертекстовые ссылки, и картинки составляют встроенные массивы, к которым
можно обращаться по индексу. Рассмотрим несколько примеров программирования массивов
гипертекстовых ссылок и картинок.
Просмотр фотографий образцов через список гипертекстовых ссылок
Вся страница размечается как таблица, состоящая из одной строки в две ячейки. В первой ячейке
размещается список выбора альтернатив, во второй ячейке размещаются картинки, выбранные при помощи
списка альтернатив. Все элементы списка помечены как гипертекстовые ссылки. У каждой ссылки
определено событие onSelect. Для того, чтобы не происходил переход к другой странице, а выполнялась
только обработка события, в поле href необходимо определить вызов JavaScript.
Изменение картинки путем выбора предмета из списка.
Вся страница размечается как таблица, состоящая из одного столбца в две ячейки. В первой ячейке
размещается выпадающее меню выбора альтернатив, во второй ячейке размещаются картинки, выбранные
при помощи списка альтернатив. При выборе альтернативы из меню происходит событие onChange,
которое вызывает функцию l_image.
Листание картинок и их автоматический просмотр
Вся страница размечается как таблица, состоящая из одного столбца в две ячейки. В первой ячейке
размещаются три кнопки управления просмотром картинок "Вперед", "Старт/Стоп", "Назад". Во второй
ячейке размещаются картинки, выбранные путем листания. Листание осуществляется кнопками "Вперед" и
"Назад". Возможен и другой вариант выбора картинки, когда система сама через некоторый промежуток
времени периодически меняет картинки. Для этого следует сначала запустить автоматическую смену
картинок, нажав на кнопку "Старт/Стоп", а потом, когда будет показана нужная картинка, остановить
автоматическое листание, снова нажав на кнопку "Старт/Стоп".
Вопросы для самоконтроля:
1. Языки программирования VBScript и JScript. Особенности и возможности.
2. Примеры создания страницы с использованием технологии ASP на языках VBScript и JScript.
Рекомендуемая литература:
1. Дарнелл Р. JavaScript: справочник. СПб.: Питер, 1999. — 192 с.
2. Фролов А. В., Фролов Г. В. Сценарии JavaScript в активных страницах Web. М.: Диалог-Мифи,
1998. — 284 с.
3. ЛАБОРАТОРНЫЕ ЗАНЯТИЯ
Язык JavaScript
Цель лабораторных занятий
Целью занятий является обучение умению использовать уже написанные скрипты и умению писать
JavaScript’ы.
Лабораторное занятие 1. Знакомство с JavaScript
Содержание занятия
Что такое JavaScript. JavaScript - новый язык для составления скриптов, разработанный фирмой
Netscape. С помощью JavaScript Вы можете легко создавать интерактивные Web-страницы. В данном
руководстве Вы увидите, что можно сделать с помощью JavaScript, и даже более того - увидите, как это
сделано.
JavaScript - это не Java! Многие люди считают, что JavaScript - это то же самое, что и Java, лишь
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 35 из 109
потому, что эти языки имеют схожие названия. На самом деле это не так. Я считаю, что сейчас будет
излишне показывать Вам все различия между этими языками - так что запомните лишь то, что JavaScript это не Java.
Запуск JavaScript. Что необходимо сделать, чтобы запускать скрипты, написанные на языке JavaScript?
Вам понадобится браузер, способный работать с JavaScript - например Netscape Navigator (начиная с версии
2.0) или Microsoft Internet Explorer (MSIE - начиная с версии 3.0). С тех пор, как оба этих браузера стали
широко распространеными, множество людей получили возможность работать со скриптами, написанными
на языке JavaScript. Несомненно, это важный аргумент в пользу выбора языка JavaScript, как средства
улучшения ваших Web-страниц.
Конечно же, перед чтением данного руководства Вы должны познакомиться с основами другого языка HTML. При этом, возможно, Вы обнаружите, что много хороших средств диалога можно создать,
пользуясь лишь командами HTML. Чтобы получить дополнительную информацию о языке HTML, лучше
всего инициировать поиск по ключевому слову 'html' на поисковом сервере Yahoo.
Размещение JavaScript на HTML-странице. Код скрипта JavaScript размещется непосредственно на
HTML-странице. Чтобы увидеть, как делается, давайте рассмотрим следующий простой пример:
<html>
<body>
<br>
Это обычный HTML документ.
<br>
<script language="JavaScript">
document.write("А это JavaScript!")
</script>
<br>
Вновь документ HTML.
</body>
</html>
С первого взгляда пример напоминает обычный файл HTML. Единственное новшество здесь конструкция:
<script language="JavaScript">
document.write("А это JavaScript!")
</script>
Это действительно код JavaScript. Чтобы видеть, как этот скрипт работает, запишите данный пример как
обычный файл HTML и загрузите его в браузер. В результате Вы получите 3 строки текста:
Это обычный HTML документ.
А это JavaScript!
Вновь документ HTML.
Я должен признать, что данный скрипт не столь полезен - то же самое и более просто можно было бы
написать на "чистом" языке HTML. Я всего лишь хотел продемонстрировать Вам тэг признака <script>.
Все, что стоит между тэгами <script> и </script>, интерпретируется как код на языке JavaScript. Здесь Вы
также видите пример использования инструкции document.write() - одной из наиболее важных команд,
используемых при программировании на языке JavaScript. Команда document.write() используется, когда
необходимо что-либо написать в текущем документе (в данном случае таком является наш HTMLдокумент). Так наша небольшая программа на JavaScript в HTML-документе пишет фразу "А это
JavaScript!".
Браузеры без поддержки JavaScript. А как будет выглядеть наша страница, если браузер не
воспринимает JavaScript? Браузеры, не имеющие поддержки JavaScript, "не знают" и тэга <script>. Они
игнорируют его и печатают все стоящие вслед за ним коды как обычный текст. Иными словами, читатель
увидит, как код JavaScript, приведенный в нашей программе, окажется вписан открытым текстом прямо
посреди HTML-документа. Разумеется, это не входило в наши намерения. На этот случай имеется
специальный способ скрыть исходный код скрипта от старых версий браузеров - мы будем использовать
для этого тэг комментария из HTML - <! - - >. В результате новый вариант нашего исходного кода будет
выглядеть как:
<html>
<body>
<br>
Это обычный HTML документ.
<br>
<script language="JavaScript">
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 36 из 109
<!-- скрывает код от старых браузеров
document.write("А это JavaScript!")
// -->
</script>
<br>
Вновь документ HTML.
</body>
</html>
В этом случае браузер без поддержки JavaScript будет печатать:
Это обычный HTML документ.
Вновь документ HTML.
А без HTML-тэга комментария браузер без поддержки JavaScript напечатал бы:
Это обычный HTML документ.
document.write("А это JavaScript!")
Вновь документ HTML.
Пожалуйста обратите внимание, что Вы не можете полностью скрыть исходный код JavaScript. То, что
мы здесь делаете, имеет целью предотвратить распечатку кода скрипта на старых браузерах - однако тем не
менее читатель сможет увидеть этом код посредством пункта меню 'View document source'. Не существует
также способа скрыть что-либо от просмотра в вашем исходном коде (и увидеть, как выполнен тот или
иной трюк).
События. События и обработчики событий являются очень важной частью для программирования на
языке JavaScript. События, главным образом, инициируются теми или иными действиями пользователя.
Если он щелкает по некоторой кнопке, происходит событие "Click". Если указатель мыши пересекает
какую-либо ссылку гипертекста - происходит событие MouseOver. Существует несколько различных типов
событий. Мы можем заставить нашу JavaScript-программу реагировать на некоторые из них. И это может
быть выполнено с помощью специальных программ обработки событий. Так, в результате щелчка по
кнопке может создаваться выпадающее окно. Это означает, что создание окна должно быть реакцией на
событие щелка - Click. Программа - обработчик событий, которую мы должны использовать в данном
случае, называется onClick. И она сообщает компьютеру, что нужно делать, если произойдет данное
событие. Приведенный ниже код представляет простой пример программы обработки события onClick:
<form>
<input type="button" value="Click me" onClick="alert('Yo')">
</form>
Данный пример имеет несколько новых особенностей - рассмотрим их по порядку. Вы можете здесь
видеть, что мы создаем некую форму с кнопкой (как это делать - проблема языка HTML, так что
рассматривать это здесь я не буду). Первая новая особенность - onClick="alert('Yo')" в тэге <input>. Как мы
уже говорили, этот атрибут определяет, что происходит, когда нажимают на кнопку. Таким образом, если
имеет место событие Click, компьютере должен выполнить вызов alert('Yo'). Это и есть пример кода на
языке JavaScript (Обратите внимание, что в этом случае мы даже не пользуемся тэгом <script>). Функция
alert() позволяет Вам создавать выпадающие окна. При ее вызове Вы должны в скобках задать некую
строку. В нашем случае это 'Yo'. И это как раз будет тот текст, что появится в выпадающем окне. Таким
образом, когда читатель когда щелкает на кнопке, наш скрипт создает окно, содержащее текст 'Yo'.
Некоторое замешательство может вызвать еще одна особенность данного примера: в команде
document.write () мы использовали двойные кавычки ("), а в конструкции alert() - только одинарные.
Почему? В большинстве случаев Вы можете использовать оба типа кавычек. Однако в последнем примере
мы написали onClick="alert('Yo')" - то есть мы использовали и двойные, и одинарные кавычки. Если бы мы
написали onClick="alert("Yo")", то компьютер не смог бы разобраться в нашем скрипте, поскольку
становится неясно, к которой из частей конструкции имеет отношение функция обработки событий
onClick, а к которой - нет. Поэтому Вы и вынуждены в данном случае перемежать оба типа кавычек. Не
имеет значения, в каком порядке Вы использовали кавычки - сперва двойные, а затем одинарные или
наоборот. То есть Вы можете точно так же написать и onClick='alert("Yo")'.
Вы можете использовать в скрипте множество различных типов функций обработки событий. Сведения
о некоторых из них мы получим в данном описании, однако не о всех. Поэтому обращайтесь пожалуйста к
соответствующему справочнику, если Вы хотите узнать, какие обработчики событий еще существуют.
Итак, если Вы используете браузер Netscape Navigator, то выпадающее окно содержит текст, что был
передан функции JavaScript alert. Такое ограничение накладывается по соображениям безопасности. Такое
же выпадающее окно Вы можете создать и с помощью метода prompt(). Однако в этом случае окно будет
воспроизводить текст, введенный читателем. А потому, скрипт, написанный злоумышленником, может
принять вид системного сообщения и попросить читателя ввести некий пароль. А если текст помещается в
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 37 из 109
выпадающее окно, то тем самым читателю дается понять, что данное окно было создано web-браузером, а
не вашей операционной системой. И поскольку данное ограничение наложено по соображениям
безопасности, Вы не можете взять и просто так удалить появившееся сообщение.
Функции. В большинстве наших программ на языке JavaScript мы будем пользоваться функциями.
Поэтому уже теперь мне необходимо рассказать об этом важном элементе языка. В большинстве случаев
функции представляют собой лишь способ связать вместе нескольких команд. Давайте, к примеру,
напишем скрипт, печатающий некий текст три раза подряд. Для начала рассмотрим простой подход:
<html>
<script language="JavaScript">
<!-- hide
document.write("Добро пожаловать на мою страницу!<br>");
document.write("Это JavaScript!<br>");
document.write("Добро пожаловать на мою страницу!<br>");
document.write(Это JavaScript!<br>");
document.write("Добро пожаловать на мою страницу!<br>");
document.write("Это JavaScript!<br>");
// -->
</script>
</html>
И такой скрипт напишет следующий текст
Добро пожаловать на мою страницу!
Это JavaScript!
три раза. Если посмотреть на исходный код скрипта, то видно, что для получения необходимого
результата определенная часть его кода была повторена три раза. Разве это эффективно? Нет, мы можем
решить ту же задачу еще лучше. Как насчет такого скрипта для решения той же самой задачи?:
<html>
<script language="JavaScript">
<!-- hide
function myFunction() {
document.write("Добро пожаловать на мою страницу!<br>");
document.write("Это JavaScript!<br>");
}
myFunction();
myFunction();
myFunction();
// -->
</script>
</html>
В этом скрипте мы определили некую функцию, состоящую из следующих строк:
function myFunction() {
document.write("Добро пожаловать на мою страницу!<br>");
document.write("Это JavaScript!<br>");
}
Все команды скрипта, что находятся внутри фигурных скобок - {} - принадлежат функции myFunction
(). Это означает, что обе команды document.write() теперь связаны воедино и могут быть выполнены при
вызове указанной функции. И действительно, нашем примере есть три вызова этой функции - Можно
увидеть, что мы написали строку myFunction() три раза сразу после того, как дали определение самой
функции. То естькак раз и сделали три вызова. В свою очередь, это означает, что содержимое этой функции
(команды, указанные в фигурных скобках) было выполнено трижды. Поскольку это довольно простой
пример использования функции, то у Вас мог возникнуть вопрос, а почему собственно эти функции столь
важны в JavaScript. По прочтении данного описания Вы конечно же поймете их пользу. Именно
возможность передачи переменных при вызове функции придает нашим скриптам подлинную гибкость что это такое, мы увидим позже.
Функции могут также использоваться в совместно с процедурами обработки событий. Рассмотрим
следующий пример:
<html>
<head>
<script language="JavaScript">
<!-- hide
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 38 из 109
function calculation() {
var x= 12;
var y= 5;
var result= x + y;
alert(result);
}
// -->
</script>
</head>
<body>
<form>
<input type="button" value="Calculate" onClick="calculation()">
</form>
</body>
</html>
Здесь при нажатии на кнопку осуществляется вызов функции calculation(). Как можно заметить, эта
функция выполняет некие вычисления, пользуясь переменными x, y и result. Переменную мы можем
определить с помощью ключевого слова var. Переменные могут использоваться для хранения различных
величин - чисел, строк текста и т.д. Так строка скрипта var result= x + y; сообщает браузеру о том, что
необходимо создать переменную result и поместить туда результат выполнения арифметической операции
x + y (т.е. 5 + 12). После этого в переменный result будет размещено число 17. В данном случае команда
alert(result) выполняет то же самое, что и alert(17). Иными словами, мы получаем выпадающее окно, в
котором написано число 17.
Лабораторное занятие 2. Иерархия объектов в JavaScript.
Содержание занятия
Иерархия объектов в JavaScript. В языке JavaScript все элементы на web-странице выстраиваются в
иерархическую структуру. Каждый элемент предстает в виде объекта. И каждый такой объект может иметь
определенные свойства и методы. В свою очередь, язык JavaScript позволит Вам легко управлять
объектами web-страницы, хотя для этого очень важно понимать иерархию объектов, на которые опирается
разметка HTML. Как это все действует, Вы сможете быстро понять на следующем примере. Рассмотрим
простую HTML-страницу:
<html>
<head>
</head>
<body bgcolor=#ffffff>
<center>
<img src="home.gif" name="pic1" width=200 height=100>
</center>
<p>
<form name="myForm">
Name:
<input type="text" name="name" value=""><br>
e-Mail:
<input type="text" name="email" value=""><br><br>
<input type="button" value="Push me" name="myButton" onClick="alert('Yo')">
</form>
<p>
<center>
<img src="ruler.gif" name="pic4" width=300 height=15>
<p>
<a href="http://rummelplatz.uni-mannheim.de/~skoch/">My homepage</a>
</center>
</body>
</html>
А вот как выглядит эта страница на экране:
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 39 из 109
Итак, мы имеем два рисунка, одну ссылку и некую форму с двумя полями для ввода текста и одной
кнопкой. С точки зрения языка JavaScript окно браузера - это некий объект window. Этот объект также
содержит в свою очередь некоторые элементы оформления, такие как строка состояния. Внутри окна мы
можем разместить документ HTML (или файл какого-либо другого типа - однако пока мы все же
ограничимся файлами HTML). Такая страница является ни чем иным, как объектом document. Это означает,
что объект document представляет в языке JavaScript загруженный на настоящий момент документ HTML.
Объект document является очень важным объектом в языке JavaScript и Вы будете пользоваться им
многократно. К свойствам объекта document относятся, например, цвет фона для web-страницы. Однако
для нас гораздо важнее то, что все без исключения объекты HTML являются свойствами объекта document.
Примерами объекта HTML являются, к примеру, ссылка или заполняемая форма. На следующем рисунке
иллюстрируется иерархия объектов, создаваемая HTML-страницей из нашего примера:
Разумеется, мы должны иметь возможность получать информацию о различных объектах в этой
иерархии и управлять ею. Для этого мы должны знать, как в языке JavaScript организован доступ к
различным объектам. Как видно, каждый объект иерархической структуры имеет свое имя. Следовательно,
если Вы хотите узнать, как можно обратиться к первому рисунку на нашей HTML-странице, то обязаны
сориентироваться в иерархии объектов. И начать нужно с самой вершины. Первый объект такой структуры
называется document. Первый рисунок на странице представлен как объект images[0]. Это означает, что
отныне мы можем получать доступ к этому объекту, записав в JavaScript document.images[0]. Если же,
например, Вы хотите знать, какой текст ввел читатель в первый элемент формы, то сперва должны
выяснить, как получить доступ к этому объекту. И снова начинаем мы с вершины нашей иерархии
объектов. Затем прослеживаем путь к объекту с именем elements[0] и последовательно записываем
названия всех объектов, которые минуем. В итоге выясняется, что доступ к первому полю для ввода текста
можно получить, записав:
document.forms[0].elements[0]
А теперь как узнать текст, введенный читателем? Чтобы выяснять, которое из свойств и методов объекта
позволят получить доступ к этой информации, необходимо обратиться к какому-либо справочнику по
JavaScript (например, это может быть документация, предоставляемая фирмой Netscape, либо моя книга).
Там Вы найдете, что элемент, соответствующий полю для ввода текста, имеет свойство value, которое как
раз и соответствует введенному тексту. Итак, теперь мы имеем все необходимое, чтобы прочитать искомое
значение. Для этого нужно написать на языке JavaScript строку:
name= document.forms[0].elements[0].value;
Полученная строка заносится в переменную name. Следовательно, теперь мы можем работать с этой
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 40 из 109
переменной, как нам необходимо. Например, мы можем создать выпадающее окно, воспользовавшись
командой alert("Hi " + name). В результате, если читатель введет в это поле слово 'Stefan', то по команде
alert("Hi " + name) будет открыто выпадающее окно с приветствием ' Hi Stefan '.
Если Вы имеете дело с большими страницами, то процедура адресации к различным объектам по
номеру может стать весьма запутынной. Например, придется решать, как следует обратиться к объекту
document.forms[3].elements[17] document.forms[2].elements[18]? Во избежание подобной проблемы, Вы
можете сами присваивать различным объектам уникальные имена. Как это делается, Вы можете увидеть
опять же в нашем примере:
<form name="myForm">
Name:
<input type="text" name="name" value=""><br>
...
Эта запись означает, что объект forms[0] получает теперь еще и второе имя - myForm. Точно так же
вместо elements[0] Вы можете писать name (последнее было указано в атрибуте name тэга <input>). Таким
образом, вместо
name= document.forms[0].elements[0].value;
Вы можете записать
name= document.myForm.name.value;
Это значительно упрощает программирование на JavaScript, особенно в случае с большими webстраницами, содержащими множество объектов. (Обратите внимание, что при написании имен Вы должны
еще следить и за положением регистра - то есть Вы не имеете права написать myform вместо myForm). В
JavaScript многие свойства объектов достпуны не только для чтения. Вы также имеете возможность
записывать в них новые значения. Например, посредством JavaScript Вы можете записать в упоминавшееся
поле новую строку.
Пример кода на JavaScript, иллюстрирующего такую возможность - интересующий нас
фрагмент записан как свойство onClick второго тэга <input>:
<form name="myForm">
<input type="text" name="input" value="bla bla bla">
<input type="button" value="Write"
onClick="document.myForm.input.value= 'Yo!'; ">
Сейчас я не имею возможности описывать каждую деталь данного примера. Намного лучше будет, если
Вы попробуете сами понять иерархию объектов в JavaScript, обратившись к справочнику по JavaScript. В
заключение я написал небольшой пример. В нем Вы увидите, как используются различные объекты.
Исходный код скрипта:
<html>
<head>
<title>Objects</title>
<script language="JavaScript">
<!-- hide
function first() {
// создает выпадающее окно, где размещается
// текст, введенный в поле формы
alert("The value of the textelement is: " +
document.myForm.myText.value);
}
function second() {
// данна\я функци\я провер\яет состо\яние переключателей
var myString= "The checkbox is ";
// переключатель включен, или нет?
if (document.myForm.myCheckbox.checked) myString+= "checked"
else myString+= "not checked";
// вывод строки на экран
alert(myString);
}
// -->
</script>
</head>
<body bgcolor=lightblue>
<form name="myForm">
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 41 из 109
<input type="text" name="myText" value="bla bla bla">
<input type="button" name="button1" value="Button 1"
onClick="first()">
<br>
<input type="checkbox" name="myCheckbox" CHECKED>
<input type="button" name="button2" value="Button 2"
onClick="second()">
</form>
<p><br><br>
<script language="JavaScript">
<!-- hide
document.write("The background color is: ");
document.write(document.bgColor + "<br>");
document.write("The text on the second button is: ");
document.write(document.myForm.button2.value);
// -->
</script>
</body>
</html>
Объект location . Кроме объектов window и document в JavaScript имеется еще один важный объект location. В этом объекте представлен адрес загруженного HTML-документа. Например, если Вы загрузили
страницу http://www.xyz.com/page.html, то значение location.href как раз и будет соответствовать этому
адресу. Впрочем, для нас гораздо более важно, что Вы имеете возможность записывать в location.href свои
новые значения. Например, в данном примере кнопка загружает в текущее окно новую страницу:
<form>
<input type=button value="Yandex"
onClick="location.href='http://www.yandex.ru'; ">
</form>
Лабораторное занятие 3. Создание и размещение скриптов
Содержание занятия
Это занятие предназначено для того, чтобы ознакомить Вас с основами создания и размещения скриптов
(на языке JavaScript) на Ваших страницах. В течение разбора Вам будут даны несколько советов что
следует и что не следует делать при написании скриптов на языке JavaScript.
Скрипт. Цель нижеследующего скрипта поместить текст красного цвета на Web страницу. Вот текст
первого скрипта:
<SCRIPT LANGUAGE=JavaScript”>
document.write(“<FONT COLOR=’RED’>”Это текст красного цвета</FONT>”)
</SCRIPT>
Эффект отработки скрипта. На Web странице появляется предложение
Это текст красного цвета
Разбор скрипта. Так как это наш первый скрипт, то он очень простой, что позволяет нам потратить
некоторое время на обсуждение языка JavaScript в общем.
Что такое JavaScript? Во-первых, это не Java. Легко запутаться и считать, что Java и JavaScript одно и
то же. Это не так. Java это язык программирования, разработанный фирмой Sun Microsystems. а язык
JavaScript был создан хорошими людьми из фирмы Netscape.
Оба языка одинаковы в том, что они языки объектно-ориентированного програм­мирования (ООП). Это
означает, что Вы строите меньшие объекты, которые составляют целое. Это предложение станет более
понятным по мере нашего продвижения по курсу. Основное отличие между двумя языками заключено в
том, что на языке Java можно создать самостоятельные программы. Java-"апплет" (называемый так, потому
что является небольшим приложением) может выполняться на Web-странице, но, в действительности,
является полностью самостоятельной маленькой программой. В дополнение, Java-программа не может
выполняться как текст (в противоположность JavaScript-программе). Ее нужно откомпилировать в то, что
называется программой на машинном языке до того, как отправить на выполнение.
Язык JavaScript близок к языку Java, потому что Netscape отобрал из упрощенной Явы простой набор
команд. Программа на языке JavaScript не может исполняться сама по себе. Она должна выполняться на
Web странице, a Web страница должна представляться в браузере, который понимает язык JavaScript, как,
например, Netscape браузер версии 2.0 и выше.
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 42 из 109
Написание скрипта JavaScript. Во-первых, запомните, что JavaScript это не HTML! Часто спрашивают,
не является ли одно одной из версий другого. Нет, не является. Тем не менее, при написании скрипта на
языке JavaScript, Вы следуете многим правилам, которые похожи на правила написания HTML.
Программа на языке JavaScript должна содержатся в документе HTML. Мы остановимся на конкретном
расположении программ позднее. Программы на языке JavaScript сохраняются как текст в HTML
документах.
Основное различие в том, что язык HTML очень терпим к формальным ошибкам. Пробелы ничего не
значат для языка HTML. Не имеет значения, сколько пустого места Вы оставляете между словами или
абзацами. Документ HTML можно записать в виде одной длинной строки. Это не имеет значения.
Прямо противоположное положение в языке JavaScript. В нем есть ограничения по форме
представления. В некоторых случаях изменение формы ведет к неприятным последствиям. Например,
вторая строчка скрипта этого урока выглядит следующим образом:
document.write("<FONT COLOR='RED'> Это текст красного цвета </FONT>")
Если Вы измените эту строку на:
document.write("<FONT COLOR='RED'> Это текст красного цвета </FONT> ")
то получите сообщение об ошибке (мы рассмотрим ошибки и их исправления в следующем уроке).
Редактирование JavaScript. Когда Вы редактируете или пишете скрипт не допускайте появления
ограничителей по краям текста скрипта. Всегда редактируйте и пишите скрипты в редакторе, который не
добавляет на края ограничители по ширине. Вы должны быть в состоянии продолжать строку справа как
угодно далеко. Если это не так, то у Вас могут появиться непростые проблемы.
Учитывает ли JavaScript регистр букв? Да.
Назад к разбору скрипта. Давайте начнем сверху. Первая строка текста выглядит следующим образом:
<SCRIPT LANGUAGE="JavaScript">
Эта строка является кодом HTML, который предупреждает броузер, что нижеследующее представляет
собой скрипт на языке JavaScript. Это кажется достаточно простым. Все скрипты на языке JavaScripts
начинаются только с этой команды.
А как насчет LANGUAGE="JavaScript"? Действительно ли нужно это определение? Да. Существуют
другие типы скриптов, VBS и LiveScript, например. Используя подкоманду LANGUAGE можно передать
информацию о языке скрипта прямо броузеру.
Так как здесь у нас только три строки кода, разрешите прыгнуть в самый конец: </SCRIPT>
этот тэг завершает любой JavaScript. Без исключений. Запомните, скрипт начинается тэгом <SCRIPT
LANGUAGE="JavaScript"> и заканчивается тэгом </SCRIPT>.
Теперь займемся содержательной частью скрипта:
document.write("<FONT COLOR='RED'> Это текст красного цвета </FONT>")
Этот скрипт настолько прост, что Вы сами можете угадать, что делает каждая его часть. Давайте все же
рассмотрим эту строку, чтобы использовать одни и те же термины.
Сначала объявляется DOCUMENT (документ HTML). Документ будет изменен с помощью команды
WRITE, с помощью этой команды что-то будет дописано к документу.
Теперь некоторые термины. Документ (DOCUMENT) определяется как «объект». Команда WRITE,
которая следует после точки, определяется как метод объекта. Поэтому в самом общем виде скрипт
говорит взять объект (нечто, что уже существует) и записать что-то в него.
Текст в скобках это реализация метода или то, что будет сделано, после того как метод подействует на
объект. Заметьте, что то, что находится внутри скобок, заключено в кавычки. В язхыке HTML кавычки не
нужны, а в JavaScript нужны, поэтому используйте их.
Текст внутри кавычек это простой код HTML. Вам следует распознать текст как команду FONT, которая
придаст тексту красный цвет. Заметьте, что кавычки HTML кода одиночные. Таковыми они и должны
быть. Если Вы используете двойные кавычки, то JavaScript подумает, что встретил конец строки, и Вы в
действительности напишете только кусок строки в объект. В результате появится сообщение об ошибке.
Запомните: Внутри двойных кавычек … используйте одиночные кавычки.
Итак, действительно ли JavaScript окрашивает текст в красный цвет? Нет. Это делает за него HTML. Все,
что сделал JavaScript, это дописал код на страницу.
Задание
Измените скрипт так, чтобы он написал две строки, одну красную и одну голубую:
Это текст красного цвета
Это текст голубого цвета
Ответ:
<SCRIPT LANGUAGE="JavaScript">
document.write("<FONT COLOR='RED'> Это текст красного цвета </FONT><BR>")
document.write("<FONT COLOR='BLUE'> Это текст голубого цвета </FONT>")
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 43 из 109
</SCRIPT>
Лабораторное занятие 4. Сообщения об ошибках
Содержание занятия
Знаете ли Вы, какая тема совершенно отсутствует во многих книгах по языку JavaScript? Тема
сообщений об ошибках. Предполагается, что Вы с самого начала и далее не увидите ни одного сообщения
об ошибках. Добро пожаловать назад к реальности.
Если Вы когда либо пытались написать и поместить скрипты на Ваши Web страницы, то Вы знаете
маленькие «радости», которые являются частью подобного «развлечения». Как только Вы думаете, что все
в порядке, бум! Появляется нечто вроде:
Этот урок предназначен для того, чтобы Вы знали что делать, когда появляется сообщение об ошибках.
Человек регулярно пишущий скрипты встречает тысячи сообщений об ошибках. Если Вы начнете писать
скрипты, то Вы обязательно встретите сообщения об ошибках.
Замечание! В более поздних версиях MSIE (Internet Explorer) и Netscape Navigator, Вы можете не
получить окно приведенное выше, появились более удобные способы сообщения об ошибках.
Если Вы используете MSIE, сообщение об ошибках появится в треугольнике в нижнем левом углу. В
треугольнике будет восклицательный знак. Там будет также некоторый текст, утверждающий, что на
странице имеются ошибки. Щелкните мышкой в том треугольнике, чтобы получить сообщение об
ошибках, которые мы обсуждаем в этом уроке. Если Вы хотите получать сообщение об ошибках без того,
чтобы щелкать в треугольнике, войдите в пункт основного меню Tools, выберите подпункт Internet Options.
В этом подпункте щелкните закладку Advanced и выделите отметку напротив строки: "Display a notification
about every script error".
В зависимости от того, как сконфигурирована Ваша система, Вы можете получать сообщения об
ошибках сразу. Заметьте, что для того, чтобы получить описание ошибки, следует щелкнуть на кнопке
"Details".
Если Вы используете последние версии Netscape Navigator, то Вы получите инструкции в статусной
строке. Если есть ошибка, то Вас попросят напечатать JavaScript: в адресной строке (location bar). После
этого Вы получите ошибку и текст сопровождающий ее.
Сообщение об ошибке. В основном ошибки бывают двух типов: синтаксические ошибки и ошибки
времени выполнения (семантические). Синтаксическая ошибка означает, что Вы что-то неправильно
написали, или что JavaScript неправильно отконфигурирован. Ошибка времени выполнения означает, что
Ваша программа порождает неправильную команду. В любом случае причина одна и та же. Что-то где-то
перепутано.
В настоящее время существуют программы, которые помогут исправить ошибки. Процесс исправления
называется отладкой ("debugging"), но можно все делать и своими руками, это на самом деле легче, чем
могло бы показаться на первый взгляд.
Исправление ошибок. Говорят, что наилучший способ исправления ошибок заключается в том, чтобы
не делать их. В действительности, это легче сказать, чем сделать. Вы можете значительно уменьшить число
сообщений об ошибках, если будете использовать редактор, который не ставит ограничителей по ширине
строки. Еще одно правило, каждая команда JavaScript должна оставаться на своей собственной строке. Нет
необходимости разбивать строку на две. В действительности, разбивание увеличивает вероятность
появления ошибок. Наверняка Вы будете ошибаться при изучении нового языка, поэтому давайте
рассмотрим, как избавиться от ошибок.
Чудесным свойством сообщения об ошибке в языке JavaScript является то, что в нем говорится, где и
какая проблема вызвала ошибку. Посмотрите еще раз сообщение об ошибке, приведенное выше. Это
синтаксическая ошибка, что означает, что скрипт написан неправильно и ошибка располагается в 29
строке. К тому же сообщение об ошибке указывает на проблемную область. Было бы хорошо, если бы в
HTML положение было бы таким же.
Строка ошибки. Когда в сообщении об ошибке указывается номер строки, то этот номер вычисляется
от вершины HTML документа, а не вершины скрипта. Например, документ внизу содержит ошибку в 9-ой
строке. Это синтаксическая ошибка, потому что команда не закончилась в той строке, в которой началась.
<HTML>
<HEAD>
<TITLE>Урок №2 языка JavaScript</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
document.write("Текст для страницы"
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 44 из 109
)
</SCRIPT>
</BODY>
</HTML>
Но почему ошибка на строке 9? Это потому, что Вы считаете с вершины HTML документа вниз, считая
каждую строку, ниже приводится еще раз документ, на этот раз со строками перенумерованными для Вас.
(line 1)<HTML>
(line 2)<HEAD>
(line 3)<TITLE> Урок №2 языка JavaScript </TITLE>
(line 4)</HEAD>
(line 5)
(line 6)<BODY>
(line 7)
(line 8)<SCRIPT LANGUAGE="JavaScript">
(line 9)document.write("Текст для страницы "
(line 10))
(line 11)
(line 12)</SCRIPT>
(line 13)
(line 14)</BODY>
(line 15)</HTML>
Заметьте, что когда Вы считаете строки, то Вы считаете все строки, включая и пустые.
Что теперь? Когда Вы находитесь на строке с ошибкой, то Вы должны решить, что делать. В
большинстве случаев это будет синтаксическая ошибка, строка разбита раньше, чем нужно, что-то
неправильно записано или Вы использовали двойные кавычки вместо одиночных кавычек.
Если ошибка времени выполнения, то сообщение об ошибке указывает на команду, которая не может
быть выполнена. Например, Вы вызываете кнопку, командой, которая вызывает на самом деле текстовое
окно.
Многочисленные ошибки. Ничто не заставляет сердце биться быстрее, чем получение
многочисленных ошибок при отработке скрипта. Все, что Вы можете сделать, это сидеть пока на экране
громоздятся сообщения об ошибках. Несколько сообщений об ошибках не обязательно означает наличие
нескольких ошибок.
Язык JavaScript в высшей степени логичный язык, который любит, чтобы вещи следовали в линейном
порядке. Допустим, что у Вас имеется 10 ошибок на длинный скрипт. Когда громоздятся сообщения об
ошибках, то самое верхнее сообщение будет самым последним. Не начинайте с последних ошибок. Может
так оказаться, что их попросту нет. Может так случиться, что первая ошибка порождает и все остальные
ошибки. Поэтому исправляйте ошибки, начиная с самой первой от вершины HTML документа, и
двигайтесь вниз.
Исправляйте ошибки по одной за раз, и каждый раз после исправления прогоняйте скрипт снова. У Вас
может быть сначала 20 или более ошибок, а исправить достаточно 1 или 2.
Что-то не определено. Это также очень распространено. Это ошибка времени выполнения, которая
означает, что что-то в скрипте не работает как следует. Во-первых, следует проверить текст скрипта, что
команды не перескакивают на другую строку ранее, чем следует. Если дело не в этом, попробуйте убирать
текст программы частями. Убранные части всегда можно вернуть. Появляются опечатки. Посмотрите, не
заключается ли проблема в опечатках. Опечатки встречаются значительно чаще, чем можно было бы
ожидать.
Пока об ошибках можно сказать не так уж и много. Тем не менее замечаний, изложенных выше, хватает
для исправления 99% всех ошибок, которые появляются. Запомните, что получение сообщения об ошибке
это плюс. При наличии ошибок и отсутствии сообщений об ошибках, Вы получите пустую страницу без
какого-то предположения о том, в чем заключается проблема. Сообщения об ошибках очень полезны, если
Вы их правильно понимаете.
Задание
Ниже приведен текст скрипта, прогонка которого выдает сообщение о двух ошибках. Ваша задача
исправить ошибки, чтобы скрипт работал без ошибок. Возможно, Вы не знаете все команды, но это в
данной ситуации не важно.
Если скрипт отрабатывает правильно, то Вы должны получить текущую дату на странице.
Указание: Вы можете получить сообщение только об одной ошибке, когда прогоните скрипт. Второе
сообщение появится в этом случае, когда Вы исправите первую ошибку.
<SCRIPT LANGUAGE="JavaScript">
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 45 из 109
...x
dothis = new Date()
month = dothis.getMonth()
month = (month * 1) + 1
day = dothis.getDate()
year = dothis.getFullYear()
document.wrte(" ",month,"/",day,"/",year," ")
</SCRIPT>
Скрипт выводит текущую дату. Если Вы получили дату, то Вы исправили две ошибки. Первая
утверждает, что выражение "...x" не определено. Самый быстрый способ исправить эту ошибку – просто
стереть приведенный текст.
Когда Вы снова запустите скрипт, то получите сообщение, что выражение "document.wrte" не является
функцией. Причиной является неправильное написание слова "write".
Лабораторное занятие 5. Даты и время
Содержание занятия
Приятной чертой написания скриптов на языке JavaScript является наличие многочисленных
предварительных наработок, которые существуют в этом языке и которые можно взять и сразу поместить
на страницу. Так мы уже можем использовать скрипты из первых двух уроков.
В этом уроке мы поговорим о семи новых методах: getDay(), getDate(), getMonth(), getFullYear(),
getHours(), getMinutes(), and getSeconds(). Каждая из этих функций уже существует и может быть вставлена
в Вашу Web страницу. Проблема в том, что это только функции. Им нужен объект, на который они могут
действовать, объект-документ не подходит, поэтому нужно самим что-то создать.
Скрипт
<SCRIPT LANGUAGE="JavaScript">
//Скрипт пишет дату и время того, когда Вы попали на сайт
RightNow = new Date();
document.write("Текущая дата: " + (RightNow.getMonth()+1)+
"-" + RightNow.getDate() + "-" + RightNow.getFullYear() +
". Вы попали на эту Web страницу точно в: "
+ RightNow.getHours() +
":" + RightNow.getMinutes() + " и " + RightNow.getSeconds() +
" секунд")
</SCRIPT>
Между прочим, команда document.write должна быть вся на одной строке. Она написана частями, чтобы
всю команду можно было видеть на одном экране.
Эффект отработки скрипта. Выводится текущая дата и время попадания на сайт.
Разбор скрипта. Не пугайтесь размера скрипта. Все образуется в ближайшем будущем. Позвольте
снова вернуться к существу. Видите форму скрипта, одна строка уходит за экран. Эта форма должна быть
сохранена. Разбивка строки может повлечь за собой ошибки.
Что означают символы «//»? По мере нашего продвижения по курсу языка все время появляются
новые команды. Это одна из них. Две наклонных обозначают комментарий в скрипте. Это означает, что
текст, который следует за наклонными, не будет использован при работе скрипта, а будет воспроизведен
так, как он написан в программе. Вы можете добавить сколь угодно много строк комментариев, следует
только помнить, что строка комментария начинается с двойной наклонной.
Методы даты и времени. Если Вы посмотрите еще раз на вышеприведенный скрипт, то увидите, что
его функциональность создается с помощью записи даты и времени на странице. Дополнительные слова
делают понятным куда смотреть.
Каждая позиция создается методом "getSomething()". Запомните, что регистр букв при написании
названия метода важен. Буква "g" строчная, а первая буква названия числа, которое Вы получаете,
прописная.
Во-первых, запомните, что все эти позиции численные. Они возвращают числа. Даже метод getDay(),
имеющий дело с днями недели, возвращает число, от 1 до 7.
Давайте начнем с первого метода, вызываемого в скрипте, с месяца. Как упоминалось выше
"getMonth()" это метод. Сказав это, мы должны подумать методом какого объекта является "getMonth()".
(Вспомните первый урок. Метод действует на объектах.)
Из скрипта кажется, что функция "getSomething()" это метод объекта "document". Это не так. Методом
объекта "document" является "write". Функция "getMonth()" в действительности есть метод объекта Date.
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 46 из 109
Снова посмотрим на скрипт. Объект типа "Date" создан командой:
RightNow = new Date();
Объект можно было бы назвать Zork или Fred. Единственное, что в данном случае имеет значение это
то, чтобы имя было оригинальным в том смысле, что не существовало второго такого же имени в наборе
ключевых слов языка JavaScript и в программе. Используйте этот формат всегда, когда Вы используете
даты или время.
Возможно, Вам это кажется сложным, возможно new Date = RightNow, было бы лучше, но это не так.
Есть однозначно определенные правила, которым нужно следовать, не задумываясь.
Команда говорит, что переменная RightNow обозначает объект типа Date() или со структурой Date().
Дата должна быть новой. Таким образом, Вы получаете новую дату всякий раз, когда страница загружается
или посещается. Без новой команды, дата оставалась бы статической.
Запомните также точку с запятой в конце команды. Она действует как знак конца команды, то есть целая
команда JavaScript завершена. Без знака конца броузер будет полагать, что команда продолжается на
следующей строке. Ошибка.
Ура! У нас есть объект, на котором может действовать метод "getMonth()". Мы хотим, чтобы месяц был
выведен на странице, поэтому нам нужна где-то команда document.write(). Мы также знаем, что то, что
заключено в скобках печатается на странице, поэтому соберем все вместе::
 Сначала нужно поместить строку <SCRIPT LANGUAGE="JavaScript"> .
 Затем помещаем комментарий с описанием того, что делает скрипт.
 Мы должны создать объект до того, как воспользуемся функцией getMonth(), вставляем
соответствующую команду и не забываем о точке с запятой.
 Теперь пишем команду document.write.
 В команде document.write мы следуем формату из первого урока
 Текст, который следует печатать на странице должен быть в двойных кавычках. Одиночные кавычки
используются в тэгах HTML.
 Новое правило: Совмещение команды и текста требует в промежутке поместить знак плюс (+).
 Объект и метод пишутся через разделительную точку, то есть следующим образом:
RightNow.getMonth().
 Новое правило: RightNow.getMonth() это не текст, который будет напечатан, это команда, которая
выдаст месяц, поэтому кавычек при ее написании не нужно.
 Заметьте, что к результату работы функции getMonth добавлена 1: (RightNow.getMonth()+1). Причина
в том, что первый месяц имеет нулевой номер, поэтому для получения правильного порядкового номера
следует добавить 1. Скобки добавлены, чтобы знак плюс в данном случае не спутать со знаком плюс,
соединяющим разнородные вещи.
 Закончите тэгом </SCRIPT>
Вот что мы получим:
<SCRIPT LANGUAGE="JavaScript">
//Этот скрипт покажет порядковое число текущего месяца
RightNow = new Date();
document.write("Это месяц: " + (RightNow.getMonth()+1))
</SCRIPT>
Посмотрите на полный текст скрипта еще раз. Длинная строка текста не выглядит теперь такой трудной
для понимания. Это просто объект "RightNow", за которым следуют методы "getSomething()". В большом
скрипте они разделены знаками переноса, которые взяты в кавычки. Запомните, так как знак переноса
нужно печатать, то его следует заключить в кавычки. Затем все части соединены знаками плюс (+).
Добавляя пробелы. Это небольшой трюк, который Вам следует знать. Независимо от того, сколько
пробелов до или после знака плюс, пробелы не печатаются на странице. Поэтому, если Вам нужны
пробелы, то их следует добавить вместе с текстом. Пример: "Это дата "
Посмотрите на пробелы перед заключительными кавычками, столько же пробелов будет напечатано на
странице. Запомните, это не HTML. Там свои законы о пробелах и о том, как их добавлять.
Построение длинной строки. Мы не будем делать все до конца, потому что Вы возможно сами
сможете восполнить детали. Мы сделаем только полную дату. Она выглядит следующим образом:
document.write("Текущая дата: " + (RightNow.getMonth()+1)+
"-" + RightNow.getDate() + "-" + RightNow.getFullYear() + ".
Вы зашли на страницу в: " + RightNow.getHours() +
":" + RightNow.getMinutes() + " and " + RightNow.getSeconds() +
" секунд")
1. Мы начинаем с " Текущая дата: " добавляя в конце пробел для непрерывности.
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 47 из 109
2. Знак плюс следующий.
3. Функция (RightNow.getMonth()+1) добавляется без кавычек, потому что мы не хотим печатать
названия функций, мы хотим числа, возвращаемые функциями.
4. Еще один знак плюс.
5. Теперь тире в кавычках, чтобы отделить одно число от другого. Пробелов нет, так как числа должны
быть прижаты друг к другу.
6. Знак плюс.
7. Теперь добавляем функцию RightNow.getDate() чтобы получить номер дня, без кавычек.
8. Знак плюс.
9. Еще одно тире для правильной печати на странице.
10. Знак плюс.
11. Еще одна функция RightNow.getFullYear() возвратит порядковый номер года.
Известное затруднение: Еще раз подчеркнем, что функция getMonth() возвращает номер месяца на
единицу меньший, так как отсчет месяцев начинается с нуля. Странно, но это так.
Что делать в этом случае? Конечно, добавить 1! Вот как все выглядит:
<SCRIPT LANGUAGE="JavaScript">
RightNow = new Date();
var mpo = RightNow.getMonth();
var mpo1 = mpo + 1;
document.write("Номер текущего месяца " +mpo1+ "");
</SCRIPT>
И вот, что Вы получаете:
Номер текущего месяца X,
Где Х – номер текущего месяца.
Задание
Напишите скрипт, который пишет текущую дату, с разделителями наклонными линиями. Напишите
приветственный текст зеленым цветом. Прокомментируйте свой скрипт.
Ответ
Вот скрипт, который выполняет задачу упражнения:
<SCRIPT LANGUAGE="JavaScript">
//Этот скрипт написан Joe Burns’ом Ph.D.
RightNow = new Date();
document.write("<FONT COLOR='green'>Добро пожаловать на мою страницу! Вы попали сюда
в:</FONT> " + (RightNow.getMonth()+1)+ "/" + RightNow.getDate() + "/" + RightNow.getFullYear() )
</SCRIPT>
Заметьте, что добавлен тэг FONT, использующий одиночные кавычки и содержащий текст, который
нужно выкрасить в зеленый цвет. Часть скрипта, пишущая дату, была просто скопирована и вклеена в
текст, после чего черточки были заменены на слэши.
Лабораторное занятие 6. Обработчики событий: onMouseOver
Содержание занятия
Мы обсудили объекты и методы. Теперь давайте займемся событиями. Ключевым моментом здесь
является то, что хотя события и обработчики событий формально являются частью языка JavaScript, но они
скорее встроены в HTML код, чем представляют отдельные сущности. События должны быть вложены,
поэтому они не требуют тэгов <SCRIPT> и </SCRIPT>. Сами по себе они не скрипты, а скорее небольшие
интерфейсы, которые позволяют осуществить взаимодействие между Вашей страницей и читателем
страницы.
Представляйте события как сущности, которые случаются. Они добавляют жизнь и интерес к Вашей
странице. Они являются сущностями, которые выполняют стандартную, но достаточно сложную
функциональность без того, чтобы Вы писали длинные скрипты на JavaScripts.
Существуют многочисленные события, мы их рассмотрим, но начнем с самого популярного,
onMouseOver.
Скрипт
<A HREF="http://www.htmlgoodies.com"
onMouseOver="window.status='Идите на домашнюю страницу Goodies ';
return true">Щелкните здесь</A>
Вышеприведенный текст должен быть на одной строке. Выше строка разбита, чтобы видеть ее всю
сразу.
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 48 из 109
Эффект отработки скрипта. Проведите мышью над ссылкой и посмотрите на статусную строку внизу
окна броузера.
В статусной строке появляется надпись «Идите на домашнюю страницу Goodies». При щелчке на
«Щелкните здесь» пользователь попадает на страницу с адресом http://www.htmlgoodies.com.
Разбор скрипта. Скрипт настолько прост, что объясняет сам себя. Поэтому рассмотрим его достаточно
быстро.
Во-первых, "onMouseOver" (запомните шаблон строчных/прописных букв) является обработчиком
событий гипертекстовой ссылки. Формат гипертекстовой ссылки остается без изменений. Вы используете
те же команды и опции и те же двойные кавычки. Обработчик событий располагается справа от URL
(Uniform Resource Locator) адреса.
Событие вызывается с помощью обозначения «window.status». Образец должен быть знакомым. Две
позиции разделенные точкой. До сих пор это означало, что первая позиция обозначает объект, а вторая –
метод. Здесь это не так. В данном случае, "window" это объект, он существует; "status" это то, что известно
как свойство объекта (то есть окна). Это меньшая часть окна, обозначающая место, где должен быть
напечатан текст. Если быть кратким, то метод должен представляться глаголом вида "write" или "get".
Свойство это существительное, которое представляет предмет, являющийся частью того, что стоит перед
точкой.
Если у окна есть свойство статус, то это должно означать, что другие свойства окна можно изменить.
Это действительно так, но пока мы займемся только окном и статусом.
За свойством "window.status" также следует знак равенства (=), обозначающий, что то, что следует
должно случиться. В этом случае следует текст в одиночных кавычках. Этот текст появляется в статусной
строке, когда Вы проводите мышью по гипертекстовой связи.
return true Эти два слова влияют на то, что случится, когда мышь будет над ссылкой. Если эти два
слова присутствуют, то скрипт проверяет, есть ли у окна статусная строка. Если есть, то событие
происходит. Заметьте, что текст в строке не изменяется, если Вы будете проводить указателем мыши над
ссылкой снова и снова. Текст в статусной строке заблокирован, он не изменяется, если Вы проводите
указателем мыши по ссылке снова и снова. (Если Вы обновите страницу, то Вы это увидите).
Но что произойдет, если мы потеряем эти два слова? Если нет проверки наличия статусной строки, то
произойдет то, что должно произойти по умолчанию. Если вспомнить HTML, то по умолчанию должен
отображаться URL адрес, на который указывает указатель мыши. Затем, когда указатель мыши будет вне
ссылки, то произойдет наше событие. И так как проверка отсутствует, то событие будет происходить
всякий раз, когда Вы проводите указателем мыши по ссылке. Представляется, что в этом случае
зрительный эффект события более заметен.
Другие свойства, другие применения. Давайте вернемся к свойствам объектов, о которых мы говорили
ранее. Если у окна есть свойства, то у других объектов тоже должны быть свойства. Например, цвет фона
страницы. Это тоже свойство. В HTML цвет фона страницы изменяется командой BGCOLOR. Точно так же
и здесь, небольшая разница с прописными/строчными буквами. В языке JavaScript, команда записывается в
виде "bgColor". Поэтому, давайте подумаем о создании ссылки, которая будет менять цвет фона окна с
помощью события onMouseOver.
1. Во-первых, это ссылка, поэтому, как и выше, формат ссылки остается без изменений.
2. Мы изменяем окно, или мы изменяем документ? К чему относится команда "bgColor" когда мы
пишем Web страницу? К документу. Документ должен быть нашим объектом. Давайте изменим окно с
документом.
3. Мы хотим изменить фон объекта документа, поэтому давайте изменим статус командой "bgColor."
4. Мы больше не хотим, чтобы появлялся текст, давайте заменим цвет цветом. Мы выбираем ярко
красный. ("pink.")
5. Когда мы двигаем указателем по ссылке, то мы хотим, чтобы цвет сохранялся, поэтому нам нужно
снова ввести слова "return true" после точки с запятой.
Вот текст HTML
<A HREF="http://www.htmlgoodies.com"
onMouseOver="document.bgColor='pink'; return true">Щелкните здесь</A>
Проверьте его.
Но я хочу оба эффекта. Хорошо, но как Вы думаете добиться этого? Давайте обдумаем:
Здравый смысл предложил бы написать две команды onMouseOver. Давайте попробуем это сделать. Две
команды не отделены друг от друга. Мы хотим, чтобы они случались одновременно, поэтому не можем
разделять их точкой с запятой. В самом деле, точка с запятой это признак конца команды.
Новое правило: Используйте запятую для разделения нескольких событий в языке JavaScript. А как
насчет кавычек? Запомните, кавычки заключают отдельную позицию такую как текст. Мы хотим, чтобы
две такие позиции в onMouseOver командах случались одновременно, поэтому кавычки нужно открыть в
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 49 из 109
начале первой команды и закрыть кавычки в конце второй команды onMouseOver. В этом случае кавычки
заключают в себе все, что нужно и представляют это все броузеру как если бы это было одно событие.
Нам, пожалуй, понадобятся одиночные кавычки…
Вот, что мы получаем...
<A HREF="http://www.htmlgoodies.com"
onMouseOver="document.bgColor='pink',
onMouseOver=window.status='Идите на домашнюю страницу Goodies ';
return true">Щелкните здесь</A>
...проверьте результат в броузере
В следующем уроке мы рассмотрим еще несколько обработчиков событий и как комбинировать
несколько событий вместе.
Задание
Рассмотрим новый метод alert(). Он выводит окно с текстом и с кнопкой OK. Подумайте, можно ли
вызвать это окно, когда указатель мыши проходит над ссылкой. Вот формат метода:
alert('Текст, который появляется в окне извещений')
Подумайте, что должно произойти сначала, затем и далее. В действительности все очень просто.
Ответ:
<A HREF="http://www.htmlgoodies.com"
onMouseOver="alert('Щелкните OK, чтобы окно пропало')";
return true>Щелкните здесь</A>
Заметьте, что формат остался преимущественно тем же. Задание заключалось в том, чтобы заставить
метод onMouseOver произвести оповещение, поэтому мы знаем, что должны использовать команду
onMouseOver. Если команда onMouseOver должна произвести оповещение, то оповещение это то, чему
равна команда. Проверьте формат оповещения и измените текст, который появляется в окне извещения.
Лабораторное занятие 7. Еще об обработчиках событий
Содержание занятия
Давайте посмотрим еще несколько обработчиков событий в действии. Все они работают примерно
одинаково. Как только Вы будете знать формат события и логику действия обработчика события, то Вы
будете в состоянии вставить обработчик событий в любую Вашу Web страницу.
Скрипты и их эффект
Команда onClick. Вы уже знаете, что onMouseOver обрабатывает событие, которое происходит, когда
указатель мыши проходит поверх ссылки. Щелчок мыши порождает событие, обрабатываемое
обработчиком onClick. Воспользуемся методом alert и упражнением предыдущего урока для демонстрации.
Формат метода alert следующий:
alert('Текст, который появляется в окне.')
Поэтому, следуя образцу onMouseOver, получим:
<A HREF="http://www.htmlgoodies.com" onClick="alert('Вы начинаете!');">
Щелкните здесь</A>
Постарайтесь не употреблять в тексте сообщения кавычки, броузер воспримет кавычку как конец
сообщения и выдаст сообщение об ошибке.
Команда onFocus. Это важный обработчик событий, который позволяет Вам создавать события, когда
читатель фиксирует свое внимание на каком-нибудь объекте на странице. Например, в форме на окошках
выбора, строках текста и областях текста
Пример:
<FORM>
<INPUT TYPE="text" SIZE="30"
onFocus="window.status='Текст в статусной строке';">
</FORM>
Команда onBlur. Вы можете сфокусироваться на предмете, затем Вы можете потерять фокус ("blur").
Обработчик событий onBlur позволяет, в частности, сообщить пользователю, что он изменил свой ответ.
Его использование не очень велико, но вот один пример. У нас есть текстовое окно с текстом. Пусть мы
хотим, чтобы при переходе в новое текстовое окно программа запрашивала подтверждение правильности
ввода. Вот код:
<FORM>
<INPUT TYPE="text" SIZE="40"
VALUE="Напишите свое имя здесь – затем щелкните вне текстового окна"
onBlur="alert('Вы изменили ответ – Он все еще верен?');">
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 50 из 109
</FORM>
Команда onChange. Эта команда во многом похожа на onBlur. Ее основной функцией является работа в
качестве проверочного механизма. Проверочный механизм важен в формах. Важно убедиться, что
пользователь заполняет форму тем, о чем его прямо просили. Пример во многом похож на пример с onBlur,
но его функции другие.
<FORM>
<INPUT TYPE="text" SIZE="40"
VALUE="Измените этот текст, затем щелкните вне текстового окна и посмотрите на статусную строку"
onChange="window.status='Окно изменено'">
</FORM>
Команда onSelect. Команда работает так же как и три предыдущие выше, показывая, что что-то было
сделано с текстовой строкой или областью в форме. Исключая то, что этот обработчик реагирует на
выделение чего-то в окне.
Команда onSubmit. Эта команда позволяет Вам сделать что-то после щелчка на кнопке «ввести»
(submit). Стандартным действием после нажатия кнопки «ввести» является появление окна типа «Спасибо
за то, что нашли время ответить».
Формат:
<FORM>
<INPUT TYPE="submit"
onSubmit="parent.location='thanksalot.html'";>
</FORM>
Осталось еще несколько подобных команд, их формат выглядит аналогично, но немного замысловатее.
parent.location это основной формат для установки связи с другой таблицей. Кажется, что parent это
объект, а location это метод. Это не так. В данном случае parent это свойство окна броузера, а location это
объект, который появится в окне. URL является представителем метода. Можно просто запомнить, что
формат "parent.location=" означает просто ссылку.
Команды onLoad и onUnLoad Здесь мы только упомянем эти команды, каждой из них посвящен свой
собственный урок позже. Обе команды появляются в теле HTML документа (после тэга <BODY>). Они
действуют как стартеры некоторых действий при загрузке и выгрузке страницы. Эти обработчики станут
очень важны, когда мы заговорим о функциях.
Задание
Создайте форму, которая взаимодействует с пользователем. Вы должны знать команду FORM для этого.
В форме должно быть три элемента. Текстовая строка для ввода имени пользователя, два проверочных
окна, в которых спрашивается предпочитает лицо шоколад или ваниль, а также submit кнопка. Вот что
должен делать каждый элемент:
· Текстовая строка должна заполнять статусную строку текстом «Введите свое имя здесь», когда
пользователь заполняет текстовую строку.
· Два проверочных окна должны посылать в статусную строку текст «Вы выбрали …» показывая выбор
пользователя.
· Кнопка ввода должна выводить окно с благодарностью за заполнение формы.
Ответ
Вот как можно сделать все это
<FORM> Name: <INPUT TYPE="text" SIZE="30"
onFocus="window.status=' Введите Ваше имя здесь';">
Что Вы предпочитаете:
<INPUT TYPE="checkbox" onClick="window.status='Вы выбрали шоколад'";> Шоколад
<INPUT TYPE="checkbox" onClick="window.status='Вы выбрали ваниль'";> Ваниль
<INPUT TYPE="submit" onClick="alert('Спасибо за заполнение формы')";>
</FORM>
Лабораторное занятие 8. Запросы и переменные
Содержание занятия
В этом уроке две темы. Одну вы будете использовать, когда захотите узнать у пользователя какую-то
информацию. Вторую, создание переменных, Вы будете использовать все время, пока будете писать
скрипты на языке JavaScript.
Мы возвращаемся к созданию полных скриптов на языке JavaScripts, от простого добавления событий к
языку HTML, поэтому мы снова должны будем использовать тэги <SCRIPT LANGUAGE="JavaScript"> и
</SCRIPT>. В скрипте настоящего урока мы попросим пользователя сообщить свое имя и присвоим это
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 51 из 109
имя переменной. Как только имя присвоено переменной, то мы можем ввести его в строку из команды
"document.write" и тем самым напечатать имя на странице.
Этот урок длиннее предыдущих уроков. В нем мы сделаем обзор всего, что было сделано до сих пор.
Скрипт
<SCRIPT LANGUAGE="JavaScript">
/* Это скрипт для получения информации
от пользователя и помещения ее на страницу */
var user_name = prompt ("Напишите Ваше имя в окне ниже",
"Пишите его здесь");
document.write("Привет, " + user_name + ". Добро пожаловать на мою страницу!");
</SCRIPT>
Напоминаем, что в действительности все должно писаться в одну строку
Эффект скрипта. Появляется окно для ввода имени и указание куда следует вводить имя. После ввода
появляется приветствие Привет, <имя>. Добро пожаловать на мою страницу!
Разбор скрипта
Стоп! Что означают сочетания символов /* и */? Эти сочетания символов заключают между собой
комментарии. Три урока назад мы использовали две наклонные (//) для обозначения строки комментария.
Две наклонные нужно писать в начале каждой строке комментария. Вышеприведенные сочетания символов
достаточно поставить в начале и конце (только) комментария.
Создание переменной. то понятие имеет высшую важность в языке JavaScript, поэтому его нужно
хорошо знать. Приведем характерный пример. Когда нам нужно было напечатать дату, то мы использовали
функцию getDate(). В предложении из document.write мы писали название функции getDate() полностью.
Мы написали это имя только раз, поэтому это было нетрудно. Но что было бы, если бы нам нужно было
печатать дату на странице 10 или более раз? Написание 9 символов снова и снова быстро наскучивает.
Выход из положения заключается в присваивании результата работы функции переменной, скажем
переменной "d". В этом случае мы должны будем написать getdate() только раз, там, где мы делаем
присваивание переменной "d", а затем там, где нужно писать дату мы пишем "d" вместо названия функции.
Давайте вернемся к примеру:
Вот строка из примера, которая определяет переменную:
var user_name = prompt ("Напишите Ваше имя в окне ниже","Напишите его здесь")
Объяснения:
· var объявляет, что слово, которое сразу следует за ним является именем переменной.
· user_name имя переменной. Оно не должно быть таким длинным. В действительности можно было бы
просто написать "N". Просто рекомендуется давать переменным такие имена, чтобы можно было
вспомнить что они представляют.
· Запомните, что язык JavaScript чувствителен к регистру, поэтому если у Вас есть переменная "Dog", то
then the должно быть прописным всякий раз, когда Вы вызываете переменную, строчная "d" в имени этой
переменной будет воспринято как имя другой переменной.
· Заметьте, что в этом отрезке текста нет кавычек. Пишите просто одно слово за другим, как показано
выше.
· Знак равенства (=) означает, что переменная приравнивается результату работы функции, которая
следует после знака равенства.
· В этом случае переменной присваивается ввод пользователя в текстовое окно.
Команда запроса. В примере была использована новая команда, запрос. Вот формат запроса:
var variable_name = prompt("Текст в сером окне","Текст в белом окне")
Вы заметили, что в команду включены слово var и имя переменной. Если их не будет, то ввод
пользователя не будет сохранен.
Если Вы хотите...
· Получить пустое белое окно, то не пишите ничего во втором наборе кавычек.
· Если Вы не включите второй набор кавычек, то ввод в окно не определен."
· Если Вы написали что-то в белом окне и пользователь нажмет OK без ввода чего-то нового, то то, что
Вы написали в окне, будет вводом пользователя.
· Если в белом окне ничего нет и пользователь нажмет OK без того, чтобы что-то напечатать, то вводом
будет слово "null".
Назад к разбору скрипта... Теперь, когда Вы знаете все составные части, мы снова возвращаемся к
существу скрипта:
var user_name = prompt ("Напишите Ваше имя в окне ниже","Напишите его здесь");
document.write("Привет, " + user_name + ". Добро пожаловать на мою страницу!");
Приведем описание работы:
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 52 из 109
· Переменной с именем "user_name" присвоен результат запроса.
· Запрос просит пользователя ввести свое имя..
· В белом окне написано "Напишите его здесь."
· Точка с запятой завершает строку.
· Функция "document.write" пишет текст "Привет"
· Знак плюс (+) означает, что все части будут собраны вместе.
· Переменная "user_name" содержит ввод пользователя. Кавычек не надо. Мы не хотим печатать имя
переменной.
· Еще один плюс.
· ". Добро пожаловать на мою страницу!" с точкой и пробелом завершает печатаемый текст.
· Точка с запятой.
Убедитесь, что Вы поняли, что такое переменная. Они широко используются в языке потому что очень
полезны.
Задание
Целью задания является показ того, что Вы уже владеете средствами для создания потрясающих
эффектов с помощью команд языка JavaScript. Ваше задание на этот раз заключается в том, чтобы
посмотреть на предлагаемый ниже скрипт, разобраться с каждой отдельной его частью и объяснить, как
работает скрипт. Запишите объяснение, как это было сделано выше. Вы удивитесь тому, как быстро эти
монстры разбиваются на легко понятные части, как только Вы поняли, что происходит.
<SCRIPT LANGUAGE="JavaScript">
var name = prompt("Впишите Ваше имя","")
var d = new Date();
var y = d.getFullYear();
var m = d.getMonth() + 1;
var d = d.getDate();
var t = m + '/' + d + '/' + y + ' ';
document.write("<TITLE>")
document.write("Hi "+name+ " Сегодня " +t+ "Спасибо за то, что пришли");
document.write("</TITLE>")
</SCRIPT>
Разбор скрипта · Начинаем со стандартной строки <SCRIPT LANGUAGE="JavaScript">.
· Создается переменная "name". Присваивается имя пользователя
· Создается переменная "d" для даты.
· Создаются переменные для составляющих даты, "y", "m", and "d".
· Для получения правильного номера месяца следует к получаемому номеру добавить 1, так как отсчет
начинается с нулевого месяца.
· Полностью записанная дата присваивается переменной "t".
· Создается часть HTML документа TITLE с помощью команд "document.write". Это простейший способ
отделить HTML команды от кода JavaScript.
· Первый "document.write" пишет тэг.
· Второй – создает строку текста.
· Третий "document.write" завершает тэг заголовка
· Тэг </SCRIPT> завершает скрипт.
· Одна очень важная деталь, скрипт должен располагаться выше тэга BODY в HTML документе, потому
что тэг TITLE расположен выше тэга BODY.
Лабораторное занятие 9. Понятие свойств
Содержание занятия
Мы начинаем изучать упорядоченность объектов в языке JavaScript. Упорядоченность настолько важна
в этом языке, что ей будет посвящен целый урок.
Мы знаем, что существуют объекты, такие как "document", методы, такие как "write", которые
действуют на эти объекты. В уроке №6 мы немного занимались созданием объектов, чтобы
воспользоваться их методами. Теперь мы хотим перейти к понятию свойств. Свойства немного
затрагивались ранее. Вы можете вспомнить, что они часть или качество объекта. В уроке №3 мы работали
со свойством bgColor документа.
Было бы трудно, а возможно и совершенно бесполезно, рассматривать все имеющиеся свойства сразу,
так как свойства весьма многочисленны. Поэтому мы рассмотрим только самые распространенные
свойства и что хорошее они могут для нас сделать.
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 53 из 109
Скрипт. В действительности их в этом уроке несколько и все имеют один и тот же формат. Имена
переменных созданы для каждого объявления "object.property", затем каждое помещается в команду
document.write() для вывода на экран монитора. Жирные заголовки ниже обозначают новые скрипты, текст
заголовка не является частью скриптов.
Свойства объекта "navigator"
<SCRIPT LANGUAGE="JavaScript">
var an = navigator.appName;
var av = navigator.appVersion;
var acn = navigator.appCodeName;
var ua = navigator.userAgent;
document.write("Вы используете <B>" +an+
"</B>, версия " +av+ ".<BR>Его сокращенное наименование "
+acn+ ", и посылает заголовок " +ua+ "." );
</SCRIPT>
Текст, приведенный выше в скобках должен располагаться в одной строке.
Свойства объекта "document"
<SCRIPT LANGUAGE="JavaScript">
var bgc = document.bgColor;
var fgc = document.fgColor;
var lc = document.linkColor;
var al = document.alinkColor;
var vlc = document.vlinkColor;
var url = document.location;
var ref = document.referrer;
var t = document.title;
var lm = document.lastModified;
document.write("Цвет фона на этой странице <B>" +bgc+ "</B>.")
document.write("<BR>Цвет текста на этой странице <B>" +fgc+ "</B>.")
document.write("<BR>Цвет ссылок на этой странице <B>" +lc+ "</B>.")
document.write("<BR>Цвет активных ссылок на этой странице <B>" +al+ "</B>.")
document.write("<BR>Цвет посещенных ссылок на этой странице <B>" +vlc+ "</B>.")
document.write("<BR> URL адрес этой страницы <B>" +url+ "</B>.")
document.write("<BR>Страница, на которой Вы были до этой страницы была <B>" +ref+ "</B>.")
document.write("<BR>Вот что написано в названии этой страницы <B>" +t+ "</B>.")
document.write("<BR>Документ последний раз изменялся: <B>" +lm+ "</B>.")
</SCRIPT>
Свойства объекта "history"
<SCRIPT LANGUAGE="JavaScript">
var h = history.length;
document.write("Вы посетили " +h+ " страниц до этой.")
</SCRIPT>
Это два свойства объекта "location"
<SCRIPT LANGUAGE="JavaScript">
var hst = location.host
document.write("Наименование этого адреса <B>" + hst + "</B>." )
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
var hstn = location.hostname
document.write("Наименование этого адреса <B>" + hstn + "</B>." )
</SCRIPT>
Скрипты и их эффект. Вот возможные подробности о Вашем компьютере:
Вы используете Microsoft Internet Explorer, версия 4.0 (совместимый; MSIE 6.0; Windows 98; Win 9x
4.90; Q312461).
Цвет фона этой страницы #ffffff.
Цвет ссылок на этой странице #800517.
Цвет активных ссылок на этой странице #cc6600.
Цвет посещенных ссылок на этой странице #cc6600.
URL адрес этой страницы http://www.htmlgoodies.com/primers/jsp/hgjsp_7.html.
Страница,
на
которой
Вы
были
до
попадания
на
эту
страницу
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 54 из 109
http://www.htmlgoodies.com/primers/jsp/hgjsp_6.html.
В заголовке этой страницы написано JavaScript Primers.
Документ изменялся последний раз: 02/01/2002 15:33:05.
Вы посетили 5 страниц до этой.
Разбор скрипта. Давайте возьмем по отдельности каждую группу и обсудим ее индивидуально....
Текст жирный в некоторых местах! Это еще одна небольшая уловка, добавленная для развлечения.
Чтобы получить жирный текст, нужно заключить его в теги <B> и </B> -- в двойных кавычках. Так как эта
команда вида "document.write", теги выделения жирным шрифтом пишутся на страницу как текст, а затем
интерпретируются как HTML теги. Та же схема работает и с другими тегами, которые, которые изменяют
текст на HTML странице. Убедитесь, что теги в двойных кавычках, что они часть текста, а не команды
скрипта. Если это не так, то последует сообщение об ошибке.
Свойства объекта "navigator"
<SCRIPT LANGUAGE="JavaScript">
var an = navigator.appName;
var av = navigator.appVersion;
var acn = navigator.appCodeName;
var ua = navigator.userAgent;
document.write("Вы используете <B>" +an+ "</B>,
версию " +av+ ".<BR>Его сокращенное наименование" +acn+ ",
и посылает заголовок " +ua+ "." );
</SCRIPT>
Снова текст в скобках должен быть на одной строке.
Людям нравятся свойства. Очень многие спрашивают как высветить характеристики броузера. Объект
называется "navigator" и обладает четырьмя свойствами. Не забывайте о заглавных буквах!
· appName возвращает имя броузера, например, Netscape или Explorer.
· appVersion возвращает номер версии броузера и платформу, для которой создан.
· appCodeName возвращает кодовое имя, данное броузеру, например, Netscape называет свой броузер
Mozilla.
· userAgent возвращает заголовок протокола передачи данных, используемый броузером при работе с
серверами, чтобы серверы знали с чем имеют дело.
Знание версии броузера очень важно. Знание броузера пользователя и номер версии позволяет Вам
сказать "Если броузер такой, то делай это".
Свойства объекта "document"
<SCRIPT LANGUAGE="JavaScript">
var bgc = document.bgColor;
var fgc = document.fgColor;
var lc = document.linkColor;
var al = document.alinkColor;
var vlc = document.vlinkColor;
var url = document.location;
var ref = document.referrer;
var t = document.title;
var lm = document.lastModified;
document.write("Цвет фона этой страницы <B>" +bgc+ "</B>.")
document.write("<BR>Цвет текста на этой странице <B>" +fgc+ "</B>.")
document.write("<BR>Цвет ссылки на этой странице <B>" +lc+ "</B>.")
document.write("<BR>Цвет активной ссылки на этой странице <B>" +al+ "</B>.")
document.write("<BR>Цвет посещенной ссылки на этой странице <B>" +vlc+ "</B>.")
document.write("<BR>Адрес URL этой страницы <B>" +url+ "</B>.")
document.write("<BR>Страница, на которой Вы были до этой страницы была <B>" +ref+ "</B>.")
document.write("<BR>Вот, что написано в заголовке этой страницы <B>" +t+ "</B>.")
document.write("<BR>Документ изменялся последний раз <B>" +lm+ "</B>.")
</SCRIPT>
Снова текст в скобках должен быть на одной строке.
Свойства документа HTML очень популярны в языке in JavaScript. Здесь перечисляются 9 из них. В
действительности имеется 13, но остающиеся 4 слишком замысловаты для нас на настоящий момент. Они
будут описаны сразу после первых 9.
· bgColor возвращает цвет фона в 16-ричном коде.
· fgColor возвращает цвет foreground в 16-ричном коде.
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 55 из 109
· linkColor возвращает цвет ссылки в 16-ричном коде.
· alinkColor возвращает цвет активной ссылки в 16-ричном коде.
· vlinkColor возвращает цвет посещенной ссылки в 16-ричном коде.
· location возвращает URL адрес страницы.
· referrer возвращает адрес страницы с которой пользователь попал на текущую . Если таковой нет, то
возвращает пробел.
· title возвращает текст, заключенный в теги TITLE документа HTML.
· lastModified возвращает дату, когда страница последний раз модифицировалась (в действительности,
когда страница последний раз загружалась на сервер или сохранялась на жестком диске).
· cookie (not shown) возвращает текстовый файл cookie пользователя.
· anchors (not shown) возвращает число HREF якорей на странице.
· forms (not shown) возвращает список элементов формы на странице
· links (not shown) возвращает число для каждой отдельной ссылки.
Снова, если Вы используете команду If, то Вы можете сказать "Если сейчас больше, чем 18-00, то сделай
текст белым, а фон черным, чтобы представить ночь. Если меньше 18-00, то сделай текст зеленым, а фон
голубым, чтобы представить день". Существует множество стандартных способов использовать свойства
документа.
Свойство объекта "history"
<SCRIPT LANGUAGE="JavaScript">
var h = history.length;
document.write("Вы посетили " +h+ " страниц перед этой.")
</SCRIPT>
Это популярное свойство. Многие хотят делать ссылки, которые переводили бы людей вперед и назад
на одну и более страниц. Они пытаются снова создать кнопки «Назад» и «Вперед» (Back и Forward) вверху
окна броузера. Это свойство помогает это сделать.
Объект называется "history." Это список страниц, которые посетил пользователь. «Исторический»
список позволяет Вам с помощью кнопки «Назад» прокрутить все, что Вы видели.
Свойство называется "length." Оно тоже популярно. Вы увидите его применение позже. Задавая длину
списка (history) Вы просто попросите скрипт вернуть Вас назад на данное число страниц.
Позже мы поговорим о работе с методом "go()" и как он позволяет Вам двигаться по history.length с
заданными приращениями.
Это два свойства объекта "location"
<SCRIPT LANGUAGE="JavaScript">
var hst = location.host
document.write("Наименование этого адреса <B>" + hst + "</B>." )
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
var hstn = location.hostname
document.write("Наименование этого адреса <B>" + hstn + "</B>." )
</SCRIPT>
Объект называется "location." В языке JavaScript он задает URL адрес страницы. Далее у location есть два
свойства "host", и "hostname." Команды одинаковы в том, что они обе делают одно и то же, возвращают
адрес URL либо в виде IP числа, либо в текстовом формате, в зависимости от того, что использует сервер.
· location.host возвращает адрес URL плюс порт, к которому прикреплен пользователь.
· location.hostname возвращает только адрес.
Если Вы получаете одинаковый результат в обоих случаях, то это значит, что сервер не направил Вас к
определенному порту. В технических терминах, свойство порта есть null.
Между прочим, эти две команды не будут работать, если Вы смотрите страницу со своего жесткого
диска. Вам нужно смотреть страницу с сервера, чтобы был адрес URL, который скрипт мог бы взять.
Существуют многочисленные другие свойства, с которыми Вы познакомитесь в этих уроках. Здесь мы
рассмотрели только самые важные из них, и получили представление, что такое свойства и как ими
пользоваться.
Задание
Используя одно из объявлений "object.property" данное выше, напишите JavaScript, который создает
ссылку на страницу, хранящуюся на Вашем сервере. Например, если Вы на www.you.com, то JavaScript
создаст ссылку на страницу www.you.com/joe.html.
Какое бы свойство Вы ни использовали присвойте ему имя переменной.
Возможный ответ. Это можно сделать многими способами вот один из них:
<SCRIPT LANGUAGE="JavaScript">
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 56 из 109
var dr = location.host;
document.write("<A HREF=http://" +dr+ "/primers/jsp>Щелкните здесь, чтобы перейти в учебник
JavaScript для начинающих</A>")
</SCRIPT>
Помните, что эта страница должна быть на сервере, чтобы скрипт работал. Если страница на жестком
диске, то нет "location.host".
Лабораторное занятие 10. Иерархия объектов
Содержание занятия
Давайте остановимся и осмотримся. Мы знаем, что в языке JavaScript есть объекты, которые похожи на
существительные и вещи. Мы знаем, что у объектов есть свойства, которые описывают, как объекты
выглядят, примерно так же, как прилагательные описывают существительные. Мы переходим к свойствам
так: object.property.
Мы также знаем, что у объектов есть методы или действия, которые могут быть применены к объекту. У
всех методов есть скобки (), обращение к методам выглядит следующим образом object.method().
Различные объекты имеют доступ к различным свойствам и методам.
Теперь мы узнаем секрет понимания языка JavaScript, иерархию объектов.
Действие иерархии объектов. Все ссылки начинаются с верхнего объекта, Window (экран браузера), и
идут вниз. Окна и фреймы принадлежат объекту Window. Вам не нужно указывать этот объект, если он
один! Top, self, parent, и frames имена для окон. Не следует особо беспокоиться об этих названиях, следует
просто знать, что они существуют.
Вот некоторые примеры.
document.mypic.src = "pic1.gif"
"Окно" не нужно в самом начале. Предполагается, что все это находится в окне. Это ссылка на
графическтий объект, названный "mypic", который физически является файлом "pic1.gif." Document это
страница, на которой находится графический объект, а SRC обозначение для источника объекта.
document.write(location.href)
write() это метод объекта document. Location.href выводит полный URL адрес окна window. Заметьте,
что Location и Document находятся на одном и том же уровне (оба зеленые). Это означает, что Вы
получаете адрес документа того же уровня.
Разбор иерархии объектов
· Больше всего запутывает в этом месте то, что некоторые объекты одновременно являются и
свойствами.
· Windows это объект, как и другие объекты.
· Document это свойство объекта Window, но и сам является объектом.
· Form это свойство объекта Document, но одновременно и объект со своими собственными свойствами!
· Заметьте, что Value и SRC это просто свойства!
· Не все объекты и свойства приведены здесь. Того, что приведено должно хватить, чтобы освоить
понятие о том, что ссылки начинаются сверху и идут вниз. Поэтому нельзя писать
document.mytext.myform или mypic.src.document. Это неправильный порядок..
· Очень важное понятие: чтобы вывести содержание поля формы следует воспользоваться свойством
Value, то есть, document.myform.mytext.value! Простое написание document.myform.mytext даст
информацию о поле формы, но не о его содержании.
Думайте о "value" как о чтении того, что есть или нет в данное конкретное время. Checkbox может иметь
значение "on" или "off" в зависимости от того, был он отмечен или нет. Текстовое поле может иметь
признак "hidden", если Вы не хотите, чтобы пользователь не видел то, что в нем написано. Как отмечалось
выше, текстовое поле может содержать в себе ввод пользователя. Это значение текстового поля.
Задание
Впишите полную ссылку, начиная с Window, хотя это и не является необходимым Заметьте, что
название картинки mypic, а формы -- myform.
Лабораторное занятие 11. Команды последействия: onUnload и onMouseOut
Содержание занятия
Существует два обработчика ошибок, которые должны быть в Вашем арсенале: onMouseOut и onUnload
(снова обратите внимание на заглавные и прописные буквы). Эти два обработчика объединяет то, что они
действуют после факта.
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 57 из 109
Вы уже знаете, что команда onMouseOver вызывает действия, когда указатель мыши проходит поверх
чего-то, такого как ссылка. Команда onMouseOut действует после того, как указатель мыши покинул
ссылку. Вы также знаете, что команда onLoad позволяет чему-то случиться во время загрузки страницы.
Команда onUnload запускает какие-то действия, когда пользователь выгружается или покидает страницу.
Скрипт. Это действие команды mouseOver:
<A HREF="Unloadpage.html" onMouseOver="window.status='Эй! Покидаете меня!';
return true
"onMouseOut="window.status='Намного лучше – Спасибо'; return true">
Поместите мышь над и вне этой надписи</A>
Этот код действует, когда Вы покидаете страницу:
<BODY onUnload="alert('Покидаете так быстро?')">
Скрипты и их эффект. Сначала один, затем другой. Проведите указателем мыши поверх ссылки пару
раз, наблюдая за статусной строкой. После того, как увидите эффект, щелкните на ссылке, чтобы увидеть
действие команды onUnload.
Разбор скрипта. По-видимому, не так много можно сказать из того, что Вы не додумали к настоящему
моменту. Действие mouseOver создается командами onMouseOver и onMouseOut.
Заметьте, что эти две команды значительно отличаются друг от друга. Вы не захотите, чтобы они
выполнялись одновременно. Несколько уроков назад мы разделяли обработчиков событий запятыми, чтобы
они выполнялись одновременно. Здесь не тот случай. Мы не хотим, чтобы эти два действия происходили
одновременно. Мы хотим, чтобы одно действие происходило, когда указатель мыши проходит поверх
(ссылки), а второе – когда указатель мыши уходит прочь. Поэтому мы записываем их как совершенно
различные команды, каждая из которых содержит свои собственные слова "return true" поэтому текст
остается после факта.
Действие, когда мы покидаем страницу, было создано добавлением команды onUnload="alert('Уходите
так быстро?')" в часть BODY документа HTML. Запомните употребление одиночных и двойных кавычек.
Вы не можете заключать текст в двойные кавычки, потому что тогда двойные кавычки будут в двойных
кавычках. Броузер воспримет это как конец строки и не будет рассматривать остающуюся часть, что
повлечет возникновение ошибки.
Задание
Мы собираемся использовать функцию и команды onUnload, onMouseOver, onMouseOut в этом
упражнении. Вот, что должно произойти:
· Создать страницу со ссылкой
· Когда указатель мыши поверх ссылки, то в статусной строке должен появиться текст "Hello
пользователь броузера <имя броузера> Щелкни здесь!".
· Текст "Вы должны покинуть страницу с адресом <адрес страницы> появляется в статусной строке,
когда указатель мыши покидает ссылку.
· Когда на ссылке действительно щелкнули, то должно появиться окно с текстом: "Покидаете так
быстро? Сейчас только <текущее время>."
· Время следует определить с помощью функции.
· Не используйте команду onClick для создания окна с текстом. Воспользуйтесь командой onUnload.
Вот скрипт, который делает все это:
<HEAD>
<SCRIPT LANGAUGE="JavaScript">
<!—Прячем от броузеров, которые не поддерживают JavaScript
function goodbyedate()
{
var d = new Date();
var h = d.getHours();
var m = d.getMinutes();
var t = h + ':' + m + ' ';
alert("Покидаете так быстро? Сейчас только " + t + ".");
}
// кончаем прятать -->
</SCRIPT>
</HEAD>
<body bgcolor="FFFFCC" onUnload="goodbyedate()">
<A HREF="assign_10.html" onMouseOver="window.status='Hey ' +navigator.appName+ ' – Щелкни
здесь!'; return true" onMouseOut="window.status='Вы покидаете меня' +document.location+ ' прямо сейчас.';
return true">Проведите указателем мыши поверх этой ссылки </A>
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 58 из 109
</BODY>
Функция в заголовке тега определяет время, вызывая функцию часов и минут. Эта функция вызывается
в части BODY документа HTML. Переменная времени вставляется в команду alert.
Команды onMouseOver и onMouseOut в основном одинаковы, отличие в том, что в onMouseOver
вызывается "navigator.appName", а в onMouseOut вызывается "document.location". Сложность в длинной
строке заключается в том, чтобы определить где ставить одиночные и где двойные кавычки. Обратите
внимание на приведенный образец, каждая команда "window.status" окружена двойными кавычками.
Текстовые куски внутри заключены в одиночные кавычки. Будьте внимательны, не забывайте ставить
завершающие одиночные и двойные кавычки и у Вас не будет много проблем.
Лабораторное занятие 12. Открытие новых окон
Содержание занятия
Это первый из двух уроков, посвященный открытию нового окна. Первый урок покажет команды из
языка JavaScript, которые используются при открытии нового окна. Новое окно выведет второй HTML
документ.
Второй урок покажет то же открытие окна, но на этот раз как функцию, так что одна и та же страница
содержит оба окна. Вам не нужны две HTML страницы. Одна HTML страница и язык JavaScript сделают
все что нужно.
Начнем с начала.
Скрипт
<SCRIPT LANGUAGE="JavaScript">
window.open('opened.html', 'joe', config='height=300,width=300')
</SCRIPT>
Эффект скрипта. Вы увидите эффект скрипта, когда страница с таким скриптом загрузится в первый
раз. Второе окно, которое появляется со ссылкой на сайт HTML Goodies и ссылкой, которая его закрывает
это то, что Вы получаете.
Замечание: Скрипт, приведенный здесь только лишь откроет окно. Ссылки, которые должны появиться
в окне должны быть записаны в HTML странице, которая заполняет новое окно. Связи управление окном и
его закрытие будут рассмотрены позднее.
Разбор скрипта. Размещение. Начнем с размещения скрипта. До сих пор говорилось, что скрипт
следует располагать высоко в документе, чтобы его можно было сразу запустить. Когда имеете дело с
функциями, то скрипты помещают в теги HEAD. Здесь следует сделать отличное предложение.
Если Вы собираетесь открыть второе окно, то команду, которая это делает, следует размещать внизу
HTML документа. В действительности, помещайте ее в самый низ. Причина проста: страница загружается
и появляется новое окно. Если команда будет сначала, то новое окно появится до того, как зритель сможет
увидеть что в нем. Большая вероятность того, что окно закроют до того, как его смогут использовать.
Это просто точка зрения. Вы можете помещать команды где угодно. Возможно все же, что если окно
появляется позже, то это лучше для пользователя.
window.open Нет ничего очевиднее, чем это: "window" это объект и "open" метод, который действует на
объекте. Это простая часть. Теперь мы переходим к конфигурированию окна.
Конфигурирование окна. Это начинка команды (то, что в скобках). Вот формат, которому нужно
следовать:
('URL адрес документа в окне', 'Новое имя окна', config='Новые параметры окна')
Теперь образец правильно написанной команды по вышеприведенному формату:
('opened.html', 'joe', config='height=300,width=300')
· opened.html это URL адрес страницы, которая появится в новом окне, если страница не на Вашем
сервере, то нужно добавить http://.
· joe это имя нового окна. Скоро это будет важно.
· config= обозначает, что то, что следует конфигурирует окно.
Опции конфигурации. Опции конфигурации, приведенные выше, откроют окно размерами в 300
пикселов в ширину и 300 пикселов в высоту.
Всегда делайте окно немного больше, чем нужно. У многих разрешение на экране меньше, чем у Вас, и
то, что отлично умещается на Вашем экране, не поместится у других.
Заметьте, что опции "height" и "width" разделены запятой без пробелов между ними. Дело в том, что
одна пара одиночных кавычек содержит обе опции height и width. Получается, что фактически это одна
опция. Пробел внутри означал бы конец опции, следовательно, пробел был бы ошибкой.
У команды config есть многочисленные опции. "Height" и "width" уже известны нам. Они определяют
ширину и высоту окна в пикселах. Остальные опции принимают значение "yes" или "no" в зависимости от
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 59 из 109
того, хотите Вы их применять или нет. (Вы можете также использовать "1" для yes и "0" для no, если
желаете писать в правильной форме языка JavaScript form, но это не обязательно.)
Ниже приведены опции и описано, что они делают. Запомните, даже если Вы будете использовать их
все, то не делайте между ними пробелов, как и выше. Пробел повлечет за собой ошибку.
· toolbar= решает, будет ли в новом окне строка инструментов. (Строка инструментов это набор кнопок
в полоске в верхней части окна броузера, содержащий такие кнопки, как BACK, FORWARD, STOP,
RELOAD, etc.)
· menubar= решает, будет ли строка меню. (Строка меню это строка команд или наборов команд с
заголовками типа FILE, EDIT, VIEW, GO, etc.)
· scrollbars= решает будут ли полосы прокрутки или нет. Следует стараться избегать делать
выпадающие окна с полосами прокрутки.
· resizable= решает, будет ли пользователь иметь возможность изменить размер окна.
· location= решает, будет ли в новом окне строка адреса. (Строка адреса это строка вверху окна, где
размещается URL адрес выводимой в окне страницы)
· directories= решает будет ли строка директорий в новом окне. (Это полоска вверху окна броузера,
которая содержит закладки и аналогичные вещи.)
· status= решает будет ли в окне статусная строка.
Если Вас интересует, можете ли Вы избавиться от строки заголовка, то ответ – «нет». Это данное извне,
нравится оно или нет.
Вас может интересовать, являются ли эти опции свойствами. Нет, не являются. Если понимание их как
свойств поможет их запомнить, то думайте, что это свойства. Но в действительности эти маленькие
сущности опции, которые являются параметрами событий языка JavaScript. Их имя не важно, важно уметь
ими пользоваться.
Теги в новом окне. Новое окно, которое появляется, это несколько больше, чем фрейм из HTML
документа, помещенный внутрь документа. Как Вы можете видеть из нового окна на этой странице, цвет
фона зеленовато-голубой. Затем еще есть две ссылки.
Первая открывает HTML страницу фирмы Goodies в главном окне. Это делается с помощью следующего
кода:
<A HREF="http://www.htmlgoodies.com" TARGET="main"></A>
Знаете Вы или нет, но большое окно называется "main". Вот почему main вызывается во всех уроках
этого курса. У Вас нет необходимости тоже называть его main, это сделано за Вас и это имя по умолчанию.
Все что здесь сделано это добавлена опция TARGET="--" в теге HREF и добавлено имя "main" для
имени страницы, которую следует загрузить.
Но что если нужно, чтобы страница загружалась в малом окне? Каково имя маленького окна? В этих
уроках оно называется "joe." Следует просто написать ссылку в HREF на "joe."
В действительности у Вас могут быть открыты многие окна с помощью многократного применения
команды "window.open". Позаботьтесь дать каждому окну свое отличное от других имя. У Вас могут быть
связаны какие угодно окна между собой, следует лишь следить за правильностью ссылок.
Закрытие окна. Вторая ссылка нового окна закрывает его. Вот формат, который делает это:
<A HREF="" onClick="self.close">Щелкните, чтобы закрыть</A>
Это основная ссылка HREF, которая указывает в никуда. Видите пустые кавычки выше? Такой формат
препятствует загрузке другой страницы в окно. Команда, которая фактически закрывает окно, это
onClick="self.close."
"self" это свойство чего угодно, внутри чего сидит "self". В данном случае это новое окно. Команда
"close" это метод, который выполняет грязную работу.
Еще одно. Допустим, что Вы хотите открыть окно по команде, а не тогда, когда заходит пользователь.
Вы можете это сделать следующим образом:
<A HREF="jsp_11.html" onClick="window.open('opened.html', 'joe',
config='height=300,width=300')">Щелкните, чтобы открыть 'joe'</A>
И вот, что Вы получите (если Вы еще не закрыли второе окно, потому что ссылка попробует его
открыть):
Щелкните, чтобы открыть 'joe'
Формат это ссылка HREF, показывающая на себя. Вы видите, что основное окно осталось открытым.
Ему нужна страница для загрузки. Поэтому, заставьте его загрузить себя самого. (Когда мы будем говорить
о кнопках, будет показан способ сделать все это проще)
Команда onClick выполняет действия, а ее запись содержит параметры.
В следующем уроке мы изложим эффективный способ сделать из одной страницы две.
Задание
Написать скрипт, который открывает окно и использует все возможные опции. Сделайте высоту окна
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 60 из 109
300 пиксел и ширину 500.
Должно быть две ссылки:
· Одна открывает новую страницу в основном окне
· Вторая открывает новую страницу в том же окне.
· Страница, которая открывает в том же самом маленьком окне, должна иметь ссылки для закрытия
окна.
Фон должен быть желтым, (ffff00).
Вот код, который это делает:
<SCRIPT LANGUAGE="JavaScript">
window.open ('opened2.html', 'newwin', config='height=100,width=400,toolbar=no,menubar=yes,scrollbars=no,
resizable=no,location=no,directories=yes,status=no')
</SCRIPT>
Лабораторное занятие 13. Открытие окна с помощью функции
Содержание занятия
Здесь мы собираемся создать новую функцию открытия окна, в котором новое окно и все его
содержание будет внесено из того же HTML документа. Это буквально эквивалентно двум страницам в
одной.
Скрипт
<SCRIPT LANGUAGE="JavaScript">
function openindex()
{
var OpenWindow=window.open("", "newwin",
"height=300,width=300");
OpenWindow.document.write("<HTML>")
OpenWindow.document.write("<TITLE>Новое окно</TITLE>")
OpenWindow.document.write("<BODY BGCOLOR='00ffff'>")
OpenWindow.document.write("<CENTER>")
OpenWindow.document.write("<font size=+1>
New Window</font><P>")
OpenWindow.document.write("<a href=
'http://www.htmlgoodies.com' target='main'>
Это откроет<BR> в главном окне</a><p>")
OpenWindow.document.write("<P><HR WIDTH='60%'><P>")
OpenWindow.document.write("<a href=''
onClick='self.close()'>
Это закроет окно</a><p>")
OpenWindow.document.write("</CENTER>")
OpenWindow.document.write("</HTML>")
}
</SCRIPT>
и команда в части BODY документа:
onLoad="openindex()"
Эффект скрипта. Эффект тот же, что и в 10-м уроке. Открывается окно того же размера и оно содержит
те же две ссылки. Различие в том, что это было сделано в одной странице.
Разбор скрипта. Основная часть скрипта, которая содержит функцию помещена между тегами <HEAD>
и </HEAD>, как и большинство функций.
Функция названа "openindex()" как это делается обычно. Скобки окружают следующие команды.
Теперь мы подходим к существу дела. Создается переменная "OpenWindow", которая действует, как
команда window.open("instance"). Это выглядит следующим образом:
var OpenWindow=window.open("", "newwin", "height=300,width=300');
Формат знакомый. Единственное заметное отличие заключается в том, что нет URL адреса. Видите
пустые двойные кавычки? Они говорят броузеру обратиться к скрипту, чтобы найти недостающую
информацию по новому окну. Это очень похоже на то, как мы не помещали URL адрес в команду,
закрывающую окно. Оно не закроется, если есть что загружать. Аналогично и здесь. Броузер не обратится к
скрипту, если есть что загружать.
Теперь мы начнем строить страницу HTML, которая будет в новом окне. Вот первая строка текста:
OpenWindow.document.write("<HTML>")
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 61 из 109
Этот формат тоже должен быть известным. Команда говорит, что по переменной "OpenWindow" (новое
окно) эта связка текста должна быть вписана в документ.
Посмотрите на полный скрипт. Формат повторяется снова и снова, записывая строки текста. Не
существует препятствий к тому, чтобы результатом были сотни строк текста, создающие полностью
функциональный HTML документ. Пример мал, потому что это пример.
Запомните: Когда Вы пишите код HTML внутри команды "document.write", то Вы не можете
использовать двойные кавычки для подкоманд. Используйте одиночные, иначе будет ошибка.
В заключение, в части BODY вызывается функция с помощью обработчика ошибок "onLoad".
Задание
Создать окно, которое открывается с помощью функции. Придайте окну зеленый фон. Вдобавок,
сделайте так, чтобы заглавие читалось "Hello <имя пользователя> - Вот Ваше окно!" Вы можете получить
имя пользователя с помощью запроса. И, конечно, сделайте ссылку, которая закрывает окно.
Упражнение 12 – Возможный ответ Скрипт, который дает ответ, взят из только что прочитанного Вами
урока. Были сделаны три изменения:
· Добавлена команда "запроса" в начало функции.
· Тег TITLE разбит на три части, так что можно добавить переменную "name"
· Цвет фона изменен на зеленый.
Вот текст скрипта:
<SCRIPT LANGUAGE="JavaScript">
function openindex()
{
var name=prompt("Как Ваше имя?","Запишите его здесь")
var OpenWindow=window.open("", "newwin", "height=300,width=300,status=yes");
OpenWindow.document.write("<HTML>")
OpenWindow.document.write("<TITLE>")
OpenWindow.document.write("Hello " +name+ " Вот Ваше окно!")
OpenWindow.document.write("</TITLE>")
OpenWindow.document.write("<BODY BGCOLOR=green>")
OpenWindow.document.write("<CENTER>")
OpenWindow.document.write("<font size=+1>New Window</font><P>")
OpenWindow.document.write("<a href='' onClick='self.close()'>Щелчок на кнопке закроет окно</a><p>")
OpenWindow.document.write("</CENTER>")
OpenWindow.document.write("</BODY>")
OpenWindow.document.write("</HTML>")
}
</SCRIPT>
<body bgcolor="FFFFCC" onLoad="openindex()">
Лабораторное занятие 14. Метод "Confirm" (Введение в IF и ELSE)
Содержание занятия
Команда "confirm" действует во многом как команда alert за исключением того, что добавляет кнопку
cancel в диалоговое окно. Они обе являются методами.
Теперь, если Вы воспользуетесь командой самой по себе, то это не даст намного больше того, что
поместит кнопки OK в Cancel диалоговое окно. Но добавьте команды IF и ELSE и Вы можете начать
получать очень тонкие эффекты.
Скрипт
Чтобы начать, мы рассмотрим базовый формат.
<SCRIPT LANGAUAGE="JavaScript">
confirm("Вы уверены, что хотите войти?")
</SCRIPT>
Должно выглядеть знакомо. Это то же, что и alert, исключая то обстоятельство, что используется слово
"confirm". Вот основной пример того, что делает этот маленький скрипт.
Как Вы видели, он не делает много. Приведем ту же команду с небольшими добавлениями:
<SCRIPT LANGAUAGE="JavaScript">
if (confirm("Вы уверены, что хотите войти в HTML Goodies?") )
{
parent.location='http://www.htmlgoodies.com';
alert("Хороший выбор");
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 62 из 109
}
else
{
alert("Тогда Вы останетесь здесь");
}
</SCRIPT>
Эффект скрипта
Теперь мы куда-то направляемся. Ссылка “Здесь ссылка” спросит Вас хотите ли Вы войти. На этот раз,
если Вы щелкнете кнопку OK, то Вы войдете, если кнопку Cancel, то нет.
Давайте посмотрим, как это работает.
Разбор скрипта. Процесс работы скрипта логичен как и все в языке JavaScript. Скрипт начинается
предложением:
if (confirm("Вы уверены, что хотите войти в HTML Goodies?") )
Это означает, что, "If (Здесь у Вас возможность сделать выбор)
Так как это выбор, то возможны варианты. Мы используем команду confirm, которая предлагает два
варианта: "OK" и "Cancel". Можно думать об этих вариантах, как о Yes и No. Обратите внимание на
использование скобок. Что бы ни следовало за командой IF должно быть в скобках, но Вы также знаете и
то, что текст, который выводится с помощью confirm также требует скобки. Поэтому Вы используете оба
множества, одни скобки содержат другие.
Сразу за предложением следуют команды, которые должны быть выполнены для каждого из случаев.
Заметьте, что команды заключены в фигурные скобки. В действительности это блоки одновременно
выполняемых команд, рассматриваемых как одна команда. Первый блок это то, что будет выполнено, если
пользователь нажмет кнопку "OK", то есть выберет Yes.
{
parent.location='http://www.htmlgoodies.com';
alert("Хороший выбор");
}
Если Вы помните, то "parent.location" это команда, которая создает ссылку. Тогда появляется окно,
утверждающее "Хороший выбор. " Запомните точку с запятой.
А если выбрать Cancel? Мы уже знаем, что блок, который следует за IF это то, что выполняется после
нажатия кнопки OK. "Cancel", это второй выбор. Заметьте, что сразу после первого блока идет слово ELSE.
Думайте о команде ELSE как о значащей "если нет". Отсюда следующий текст...
else
{
alert("Тогда оставайтесь там, где Вы есть");
}
...означает, если нет, тогда выведи alert-сообщение и не изменяй страницу.
Соберите все вместе и Вы получите эффект предоставления пользователю права выбора: заходить или
не заходить. И у Вас есть блоки, которые происходят в каждом из вариантов.
Это только введение к использованию IF и ELSE. Далее у нас будет целый урок, посвященный
исключительно команде IF. И эта команда заслуживает этого!
Задание
Ваше задание превратить вышеприведенные команды в функцию. Сделайте так, чтобы когда
пользователь выбирает не идти, то в статусной строке появлялась бы надпись "Цыпленок!"
Если Вы действительно хотите быть изобретательным, то если пользователь выбирает OK, то страница
переходит в новое окно.
Возможный ответ Вы в действительности должны нажать Cancel, чтобы прочитать это. Вот как это
сделано.
В часть HEAD помещено следующее:
<SCRIPT LANGAUAGE="JavaScript">
function wannago()
{
if (confirm("Вы уверены, что хотите войти в HTML Goodies?") )
{
parent.location='http://www.htmlgoodies.com';
alert("Хороший выбор");
}
else
{
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 63 из 109
alert("Тогда Вы останетесь прямо здесь");
defaultStatus='Цыпленок!';
}
}
</SCRIPT>
...и в части BODY команда выглядит следующим образом:
<BODY BGCOLOR="ffffcc" onLoad="wannago()">
Процесс действительно очень прост:
· Функция была создана копированием и вклеиванием скрипта в часть HEAD документа, добавлением
слова function, и затем заключения кода в фигурные скобки.
· Команда "defaultStatus='Chicken!';" добавлена в блок else для добавления текста в статусную строку.
· Функция запускается обработчиком событий onLoad в части BODY документа.
· Если Вы хотите быть изобретательным и открыть страницу в новом окне, то нужно всего лишь
заменить два слова. Замените "parent.location" на "window.open" и все сделано.
Лабораторное занятие 15. Предопределенные объекты. Массивы. Фреймы
Содержание занятия
Объект Array. Массив может быть полезен там, где имеется много взаимосвязанных переменных. При
этом к каждой из них Вы можете получить доступ, воспользовавшись общим названием и неким номером.
Допустим, есть массив в именем names. В этом случае мы можем получить доступ к первой переменной с
именем name, написав names[0]. Вторая переменная носит name[1] и так далее.
Начиная с версии 1.1 языка JavaScript (Netscape Навигатор 3.0), Вы можете использовать объект Array.
Вы можете создать новый массив, записав myArray= new Array(). После этого можно начать заносить в
массив значения:
myArray[0]= 17;
myArray[1]= "Stefan";
myArray[2]= "Koch";
Массивы JavaScript обладают большой гибкостью. Например, Вам нет нужды беспокоиться о размере
массива - он устанавливается динамически. Если Вы напишете myArray[99]= "xyz", размер массива будет
установлен 100 элементов. (В языке JavaScript размер массива может только увеличиваться - массив не
может “сжиматься”. Поэтому старайтесь делать Ваши массивы как можно копактнее.) Не имеет значения,
заносите ли Вы в массив числа, строки, либо другие объекты. Я не останавливаюсь на каждой такой
подробности структуры массивов, но надеюсь, Вы поймете, что массивы - очень важный элемент языка.
Конечно же многое станет понятнее, если рассматривать примеры. Следующий скрипт печатает
следующий текст:
first element
second element
third element
Исходный код:
<script language="JavaScript">
myArray= new Array();
myArray[0]= "first element";
myArray[1]= "second element";
myArray[2]= "third element";
for (var i= 0; i< 3; i++) {
document.write(myArray[i] + "<br>");
}
</script>
Первым делом мы создаем здесь новый массив с именем myArray. Затем мы заносим в него три
различных значения. После этого мы запускаем цикл, который трижды выполняет команду
document.write(myArray[i] + "<br>");. В переменной i ведется отсчет циклов от 0 до 2. Заметим, что в цикле
мы пользуемся конструкцией myArray[i]. И поскольку i меняет значения от 0 до 2, то в итоге мы получаем
три различных вызова document.write(). Иными словами, мы могли бы расписать этот цикл как:
document.write(myArray[0] + "<br>");
document.write(myArray[1] + "<br>");
document.write(myArray[2] + "<br>");
Массивы в JavaScript 1.0. Поскольку в JavaScript 1.0 (Netscape Navigator 2.x, и Microsoft Internet
Explorer 3.x) объекта Array еще не существовало, то мы должны думать и об его альтернативе. Следующий
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 64 из 109
фрагмент кода можно найти в документации фирмы Netscape:
function initArray() {
this.length = initArray.arguments.length
for (var i = 0; i < this.length; i++)
this[i+1] = initArray.arguments[i]
}
После этого Вы можете создавать массив одной строкой:
myArray= new initArray(17, 3, 5);
Числа в скобках - значения, которыми инициализируется массив (это можно также делать и с объектом
Array из JavaScript 1.1). Обратите внимание, что данный тип массива не может включать все элементы,
которые являются частью в объекта Array от JavaScript 1.1 (например, там имеется метод sort(), который
позволяет сортировать все элементы в определенном порядке).
Объект Math. Если Вам необходимо в скрипте выполнять математические расcчеты, то некоторые
полезные методы для этого Вы найдете в объекте Math. Например, имеется метод синуса sin(). Полную
информацию об этом объекте Вы найдете в документации фирмы Netscape. Я бы хотел
продемонстрировать работу метода random(). Если Вы в свое время читали первый выпуск этого
материала, то знаете, что у нас были некоторые проблемы с методом random(). Тогда мы написали
функцию, позволяющую генерировать случайные числа. Теперь, чтобы работать на всех без исключения
платформах, нам не нужно ничего, кроме метода random().
Если Вы вызовете функцию Math.random(), то получите случайное число, лежащее в диапазоне между 0
и 1. Один из возможных результатов вызова document.write(Math.random()):
.0.7184317731538611
Фреймы. Создание фреймов. Один из часто задаваемых вопросов - как фреймы и JavaScript могут
работать вместе. Сначала я хотел бы объяснить, что такое фреймы и для чего они могут использоваться.
Затем мы рассмотрим, как можно использовать JavaScript совместно с фреймами. В общем случае окно
браузера может быть разбито в несколько отдельных фреймов. Это означает, что фрейм определяется как
некое выделенное в окне браузера поле в форме прямоугольника. Каждый из фреймов выдает на экран
содержимое собственного документа (в большинстве случаев это документы HTML). Таким образом, Вы
можете, к примеру, создать два фрейма. В первый такой фрейм Вы можете загрузить “домашнюю
страницу" фирмы Netscape, а во второй - фирмы Microsoft. Хотя создание фреймов является задачей языка
HTML, я бы хотел все же описать здесь основные моменты этого процесса. Для создания фреймов Вам
необходимо два тэга: <frameset> и <frame>. HTML-страница, создающая два фрейма, в общем случае
может выглядеть следующим образом:
<html>
<frameset rows="50%,50%">
<frame src="page1.htm" name="frame1">
<frame src="page2.htm" name="frame2">
</frameset>
</html>
В результате будут созданы два фрейма. Вы можете заметить, что во фрейме <frameset> мы используем
свойство rows. Это означает, два наших фрейма будут расположены друг над другом. В верхний фрейм
будет загружена HTML-страница page1.htm, а в нижнем фрейме разместится документ page2.htm.
Окончательно созданная структура фреймов будет выглядеть следующим образом:
Если Вы хотите, чтобы документы располагались не друг над другом, а рядом то, Вам следует в тэге
<frameset> писать rows, а cols. Фрагмент "50%,50%" сообщает, насколько велики должны быть оба
получившихся окна. Вы имеете также возможность записать "50%,*", если не хотите утруждать себя
расчетами, насколько велик должен быть второй фрейм, чтобы в сумме получалась все те же 100%. Вы
можете также задать размер фрейма в пикселах, для чего достаточно после числа не ставить символ %.
Любому фрейму можно присвоить уникальное имя, воспользовавшись в тэге <frame> атрибутом name.
Такая возможность пригодится нам в языке JavaScript для доступа к фреймам.
При создании web-страниц Вы можете использовать несколько вложенных тэгов <frameset>.
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 65 из 109
Следующий пример я нашел в документации, предоставляемой фирмой Netscape, (и слегка изменил его):
<frameset cols="50%,50%">
<frameset rows="50%,50%">
<frame src="cell.htm">
<frame src="cell.htm">
</frameset>
<frameset rows="33%,33%,33%">
<frame src="cell.htm">
<frame src="cell.htm">
<frame src="cell.htm">
</frameset>
</frameset>
В результате созданная структура фреймов будет выглядеть следующим образом:
Вы можете задать толщину границы между фреймами, воспользовавшись в тэге <frameset> параметром
border. Запись border=0 означает, что Вы не хотите, чтобы между тэгами имелась какая-либо граница (в
Netscape 2. x такой механизм не работает).
Фреймы и JavaScript. А теперь давайте посмотрим, как JavaScript “видит” фреймы, присутствующие в
окне браузера. Для этой цели мы создадим два фрейма, как было показано в первом примере этой части
описания. Как мы уже видели, JavaScript организует все элементы, представленные на web-странице, в виде
некой иерархической структуры. То же самое относится и к фреймам. На следующем рисунке показана
иерархия объектов, представленных в первом примере:
В вершине иерархии находится окно браузера (browser window). В данном случае он разбито на два
фрейма. Таким образом, окно, как объект, является родоначальником, родителем данной иерархии (parent),
а два фрейма - соответственно, его потомки (children). Мы присвоили этим двум фреймам уникальные
имена - frame1 и frame2. И с помощью этих имен мы можем обмениваться информацией с двумя
указанными фреймами.
С помощью скрипта можно решить следующую задачу: допустим посетитель активирует некую ссылку
в первом фрейме, однако соответствующая страница должна загружаться не в этот же фрейм, а в другой.
Примером такой задачи может служить составление меню (или навигационных панелей), где один фрейм
всегда остается неизменным, но предлагает посетителю несколько различных ссылок для дальнейшего
изучения данного сайта. Чтобы решить эту задачу, мы должны рассмотреть на три случая:
главное окно/фрейм получает доступ к фрейму-потомку
фрейм-потомок получает доступ к родительскому окну/фрейму
фрейм-потомок получает доступ к другому фрейму-потомку
С точки зрения объекта “окно” (window) два указанных фрейма называются frame1 и frame2. Как можно
видеть на предыдущем рисунке, существует прямая взаимосвязь между родительским окном и каждым
фреймом. Так образом, если Вы пишете скрипт для родительского окна - то есть для страницы, создающей
эти фреймы - то можете обращаться к этим фреймам, просто называя их по имени. Например, можно
написать:
frame2.document.write("Это сообщение передано от родительского окна.");
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 66 из 109
В некоторых случаях Вам понадобится, находясь во фрейме, получать доступу к родительскому окну.
Например, это бывает необходимо, если Вы хотите при следующем переходе избавиться от фреймов. В
таком случае удаление фреймов означает лишь загрузку новой страницы вместо содержавшей фреймы. В
нашем случае это загрузка страницы в родительское окно. Сделать это нам поможет доступ к
родительскому окну (или родительскому фрейму) из фреймов, являющихся его потомками. Чтобы
загрузить новый документ, мы должны внести в location.href новый адрес URL. Поскольку мы хотим
избавиться от фреймов, следует использовать объект location из родительского окна. (Напомним, что в
каждый фрейм можно загрузить собственную страницу, то мы имеем для каждого фрейма собственный
объект location). Итак, мы можем загрузить новую страницу в родительское окно с помощью команды:
parent.location.href= "http://...";
И наконец, очень часто Вам придется решать задачу обеспечения доступа с одного фрейма-потомка к
другому такому же фрейму-потомку. Итак, как можно, находясь в первом фрейме, записать что-либо во
второй - то есть, которой командой следует воспользоваться на HTML-странице page1.htm? Как можно
увидеть на нашем рисунке, между двумя этими фреймами нет никакой прямой связи. И потому мы не
можем просто так вызвать frame2, находясь в фрейме frame1, который просто ничего не знает о
существовании второго фрейма. С точки же зрения родительского окна второй фрейм действительно
существует и называется frame2, а к самому родительскому окну можно обратиться из первого фрейма по
имени parent. Таким образом, чтобы получить доступ к объекту document, разместившемуся во втором
фрейме, мы должны написать следующее,:
parent.frame2.document.write("Привет, это вызов из первого фрейма.");
Навигационные панели. Давайте рассмотрим, как создаются навигационные панели. В одном фрейме
мы создаем несколько ссылок. Однако, если посетитель активирует какую-либо из них, соответствующая
страница будет помещена не в тот же самый фрейм, а в соседний. Сперва нам необходимо написать скрипт,
создающий указанные фреймы. Такой документ выглядит точно так же, как и тот, что мы рассматривали
ранее в этой части описания:
frames3.htm
<html>
<frameset rows="80%,20%">
<frame src="start.htm" name="main">
<frame src="menu.htm" name="menu">
</frameset>
</html>
Здесь start.htm - это та страница, которая первоначально будет показана в главном фрейме (main). У нас
нет никаких специальных требований к содержимому этой страницы. Следующая web-страница будет
загружена во фрейм "menu":
menu.htm
<html>
<head>
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 67 из 109
<script language="JavaScript">
<!-- hide
function load(url) {
parent.main.location.href= url;
}
// -->
</script>
</head>
<body>
<a href="javascript:load('first.htm')">first</a>
<a href="second.htm" target="main">second</a>
<a href="third.htm" target="_top">third</a>
</body>
</html>
Здесь Вы можете увидеть несколько способов загрузки новой страницы во фрейм main. В первой ссылке
для этой цели используется функция load(). Давайте посмотрим, как это делается:
<a href="javascript:load('first.htm')">first</a>
Как Вы можете видеть, вместо явной загрузки новой страницы мы предлагаем браузеру выполнить
некую команду на языка JavaScript - для этого мы всего лишь должны воспользоваться параметром
javascript вместо обычного href. Далее, внутри скобок можно увидеть 'first.htm'. Эту строка передается в
качестве аргумента функции load(). Сама же функция load() определяется следующим образом:
function load(url) {
parent.main.location.href= url;
}
Здесь Вы можете увидеть, что внутри скобок написано url. Это означает, что в нашем примере строка
'first1.htm' при вызове функции заносится в переменную url. И эту новую переменную теперь можно
использовать при работе внутри функций load(). Позже мы познакомимся с другими примерами
использования важной концепции переменных.
Во второй ссылке присутствует параметр target. На самом деле это уже не относится к JavaScript. Это
одна из конструкций языка HTML. Как видно, мы всего лишь указываем имя необходимого фрейма.
Заметим, что в этом случае мы не обязаны ставить перед именем указанного фрейма слово parent, что,
честно говоря, несколько смущает. Причина такого отступления от правил кроется в том, что параметр
target - это функция языка HTML, а не JavaScript. И на примере третьей ссылки Вы можете видеть, как с
помощью target можно избавиться от фреймов.
А если Вы хотите избавиться от фреймов с помощью функции load(), то Вам необходимо написать в ней
лишь parent.location.href= url.
Итак, который способ Вам следует выбрать? Это зависит от вашего скрипта и от того, что собственно
Вы хотите сделать. Параметр target использовать очень просто. Вы можете воспользоваться им, если
хотите всего лишь загрузить новую страницу в другой фрейм. Решение на основе языка JavaScript
(примером этого служит первая ссылка) обычно используется, если Вы хотите, чтобы при активизации
ссылки произошло несколько вещей. Одна из наиболее часто возникающих проблем такого рода состоит в
том, чтобы разом загрузить две страницы в два различных фрейма. И хотя Вы могли бы решить эту задачи
с помощью параметра target, использование функции JavaScript в этом случае более предпочтительно.
Предположим, мы имеем три фрейма с именами frame1, frame2 и frame3. Допустим посетитель активирует
ссылку в frame1. И мы хотим, чтобы при этом в два других фрейма загружались две различные webстраницы. В качестве решения этой задачи Вы можете, например, воспользоваться функцией:
function loadtwo() {
parent.frame1.location.href= "first.htm";
parent.frame2.location.href= "second.htm";
}
Если же Вы хотите сделать функцию более гибкой, то можете воспользоваться возможностью передачи
переменной в качестве аргумента. Результат будет выглядеть как:
function loadtwo(url1, url2) {
parent.frame1.location.href= url1;
parent.frame2.location.href= url2;
}
После этого можно организовать вызов функции: loadtwo("first.htm", "second.htm")
или
loadtwo("third.htm", "forth.htm"). Очевидно, передача аргументов делает вашу функцию более гибкой. В
результате Вы можете использовать ее многократно и в различных контекстах.
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 68 из 109
Задание
1. Написать скрипт, который создает в основном окне 3 фрейма, ориентированных горизонтально. В
верхнем фрейме производится ввод угла в градусах. По нажатию на кнопку «SIN» или «COS» в среднем
фрейме производится вывод значения выбранной тригонометрической функции, а в нижнем фрейме
формируется массив из 20 чисел, в котором хранится значения выбранной тригонометрической функции
начиная от 0 градусов с шагом, кратным 5 (т.е. 0, 5, 15, …). Массив вывести на экран в нижнем фрейме.
2. Аналогично 1, только фреймы ориентированы вертикально. Весь вывод осуществлять «столбиком».
3. Написать скрипт, который создает 2 фрейма (верхний фрейм - узкий 15%, нижний - 85%). В верхнем
фрейме одно поле ввода и одна кнопка. Нажатие на кнопку считывает значение из поля ввода в
переменную s и перемещает либо небольшую картинку, либо символ в нижнем фрейме по графику
функции y(x)=s*cos(s*x).
4. Аналогично 3, только фреймы ориентированы вертикально. Весь вывод осуществлять «столбиком» (в
том числе и перемещение).
4. САМОСТОЯТЕЛЬНАЯ РАБОТА СТУДЕНТА
4.1. Методические рекомендации по организацию самостоятельной работы студента
Планы занятий в рамках самостоятельной работы студентов под руководством преподавателя
СРСП №1.Введение в HTML
Как вы знаете, web-страницы описываются на специальном языке, называемом HTML (HyperText Markup
Language, язык разметки гипертекстовой информации). HTML был предложен Тимом Бернесом-Ли в 1989
г. Он является стандартным языком, предназначенным для создания гипертекстовых документов в среде
Web. HTML-документы могут просматриваться различными типами web-браузеров и создаваться при
помощи любого текстового редактора или специализированных НТМ L-редакторов.
Теги HTML
Обычный текст превращается в документ HTML путем добавления конструкций языка, называемых
тегами (tag — маркер). Тег — элемент HTML, представляющий собой текст, заключенный в угловые
скобки (< >). Тег является активным элементом, изменяющим представление следующей за ним информации.
Тег может иметь атрибуты. Теги, как и скобки, бывают парными — в этом случае открывающему тегу <А>
должен соответствовать закрывающий тег </А>. HTML-теги могут быть условно разделены на две категории:
 теги, определяющие, как будет отображаться web-браузером тело документа в целом;
 теги, описывающие общие свойства документа, такие как заголовок или автор документа.
Тег HTML состоит из следующих друг за другом в определенном порядке элементов:
 левой угловой скобки (<);
 необязательной косой черты (/), которая означает, что тег является конечным тегом, закрывающим
некоторую структуру;
 имени тега, например TITLE или PRE;
 необязательных атрибутов;
 правой угловой скобки (>).
Тег может быть без атрибутов или сопровождаться одним или несколькими атрибутами, например:
ALIGN=CENTER.
Между открывающим и закрывающим тегами может содержаться текст или другие теги. В таких случаях
два тега и часть документа, заключенная между ними, образуют блок, называемый элементом HTML.
Спецификация атрибута включает в себя:
 имя атрибута, например WIDTH;
 знак равенства (-);
 значение атрибута, которое задается строкой символов, например "80".
Всегда полезно заключить значение атрибута в кавычки, используя либо одинарные (' 80'), либо двойные
кавычки ("80"). Строка в кавычках не должна содержать такие же кавычки внутри себя.
Структура HTML-документа
Документы HTML имеют следующую структуру:
 объявление HTML-документа;
 заголовок;
 тело документа;
 комментарии.
Например:
<!-- Объявление HTML-документа -->
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 69 из 109
<HTML>
<!-- Начало заголовка -->
<HEAD>
<МЕТА HTTP-EQUIV=«Content-Type» CONTENT=«text / html; charset=windows-1251»>
<МЕТА NAME=«Попов» CONTENT=«HTML web Обучение»
<META NAME=«GENERATOR» CONTENT=«Notepad»>
<ТIТLЕ>Пример Web-страницы</TITLE>
</HEAD>
<!-- Начало тела HTML-документа -->
<BODY
TEXT=«#000000»
BGC0L0R=«#94F9FA»
BACKGROUND=««
LINK=«#3333FF»
VLINK=«#3333FF» LINK=«#3333FF» onLoad=«window.defaultStatus-'Tris HTML is Create by
Notepad'«>
<CENTER>Пример отцентрированного текста</CENTER>
</BODY>
</HTML> <!-- Конец HTML-документа -->
Объявление HTML-документа
Пара тегов <HTML> и </HTML> сообщает web-обозревателю (браузеру), что между ними заключен
документ в формате HTML, причем первым тегом в документе должен быть тег <HTML> (в самом начале
документа), а последним — </HTML> (в самом конце документа). Web-браузер интерпретирует полученный
документ как HTML-документ по наличию в его начале тега <HTML>.
Заголовочная часть документа
Теги <HEAD> и </HEAD> представляют собой общее описание документа. Как правило, между ними
рекомендуется указывать информацию о документе (название, ключевые слова для поиска, описание и т. д.).
Специальные программы- спайдеры поисковых систем используют название документа для построения своих баз
данных. Чтобы дать название HTML-документу, текст помещается между тегами <TITLE> и </TITLE>.
Например:
<HEAD>
<МЕТА HTTP-EQUIV=«Content-Type» CONTENT=«text/html; charset=windows-1251»>
<META NAME-«Попов» CONTENT-«HTML web Обучение»>
<META NAME=«GENERATOR» CONTENT-«Notepad»>
<ТIТLЕ>Пример Web-страницы</TITLE>
</HEAD>
СОВЕТ. Технически, стартовые и завершающие теги типа <HTML>, <HEAD> и <BODY> необязательны. Но настоятельно
рекомендуется их использовать, поскольку это позволяет web-браузеру уверенно отделить заголовочную часть документа от непосредственно
смысловой части — тела документа.
Тело HTML-документа
Третьей главной частью документа является его тело. Оно следует сразу за заголовком и находится между
тегами <BODY> и </BODY>. Первый из них должен стоять сразу после тега </HEAD>, а второй — перед
тегом </HTML>. Тело HTML-документа — это собственно информация документа, отформатированная
средствами HTML, например:
<BODY>
TEXT=«#000000»
BGCOLOR=«#94F9FA»
BACKGROUND=««
LINK=«#3333FF»
VLINK=«#3333FF» ALINK=«#3333FF» onLoad=«window.defaultStatus='This HTML is Create by
Notepad'«>
<CENTER>пример отцентрированного текста</CENTER>
</BODY>
Комментарии
Как любой язык, HTML позволяет вставлять в тело документа комментарии, которые сохраняются при
передаче документа по сети, но не отображаются браузером. Синтаксис комментариям!-- Это комментарий -->,
например: <!-- Начало HTML-документа -->. Комментарии могут встречаться в документе где угодно и в
любом количестве.
Теги тела документа
Теги тела документа идентифицируют отображаемые в окне компоненты HTML-документа. Тело
документа может содержать ссылки на другие документы, текст и другую форматированную информацию.
Таблица 1. Краткий справочник по тегам HTML
Теги
Назначение
<HTML>
Начало документа HTML
<HEAD>
Начало
заголовка
(заголовок
содержит
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
<МЕТА
HTTP-EQUIV="Content-Type"
CONTENT= "text/html: charset=windows-1251">
<МЕТА NAME="Попов" CONTENT="HTML
06учение">
<МЕТА
NAME="GENERATOR"
CONTENT="Notepad">
<ТITLЕ>Пример Web -страницы</ТIТLЕ>
</HEAD>
<BODY
BGCOLOR="#FFFFFF"
ТЕХТ="#000000"> …
</BODY>
</HTML>
Страница 70 из 109
описательную и служебную информацию)
Метатеги определяют служебную информацию.
Здесь первый метатег определяет кодировку текста,
второй сообщает автора и ключевые слова, третий
сообщает, в каком редакторе написан HTMLдокумент
Заголовок для окна браузера
Конец заголовка
Начало тела HTML-документа
Конец тела документа
Конец документа HTML
Таблица 2. Основные теги, предназначенные для оформления страницы
Элементы
оформления Коды HTML
страницы
Параграф, еще один параграф
<Р>
Параграф
</Р>
<Р>
Еще один параграф
</Р>
Жирный текст
<STRONG>Жирный текст</STRONG>
Наклонный текст
<ЕМ>Наклонный текст</ЕМ>
Подчеркнутый текст
<U>Подчеркнутый текст</U>
Текст увеличенного размера
<BIG>Teкст увеличенного размера</BIG>
Текст уменьшенного размера
<SMALL>Teкст уменьшенного paзмеpa</SMALL>
Текст другого цвета
<FONT COLOR="#FF0000">
Текст другого цвета
</FONT> (#FF0000 - Это шестнадцатеричный код цвета)
Текст с другим шрифтом
<FONT FACE="COURIER">
Текст с другим шрифтом
</FONT> (COURIER - Имя шрифта)
Выравнивание
текстового <Р ALIGN="LEFT">
параграфа
Левое выравнивание текстового параграфа </Р> (Параметр
ALIGN задает выравнивание параграфа. LEFT – влево, RIGHT –
вправо, CENTER - по центру)
Увеличенный отступ текста у <BLOCKQUOTE>
определенного
... <Р>Увеличенный отступ</Р>
параграфа
</BLOCKQUOTE>
Список
из
нумерованных <OL>
строк
... .<li>Список из</li>
... .<li>Нумерованных</li>
... .<li>Строк</li>
</ol>
Список строк, начинающихся с <ul>
точек
....<LI>Список</LI>
…<LI>Строк</LI>
…<LI>Начинающихся
c</LI>
…<LI>Точек</LI>
</UL>
Гиперссылка
на <А
HREF-"http://vrn.fio.гu">Гиперссылка
на
ВРЦИО</а>
ВРЦИО
(Между тегами <а> и </а> может быть любой текст и рисунки,
все это будет гиперссылкой)
Перенос на следующую строку Перенос
Ha<BR>
без начала нового параграфа следующую строку< BR>
без начала< BR > нового параграфа
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 71 из 109
Горизонтальная
линия
разделения текста
для <Р>Горизонтальная
линия
</Р>
<HR>
<Р>для разделения </Р>
Много пробелов подряд (больше, Mhoгo&NBSP:&NB5P:
пробелов
чем
один (Так кодируются символы в HTML если символы с таким кодом
пробел)
нельзя вставить напрямую. Много идущих пробелов и переводы
строки в HTML игнорируются)
<IMG SRC="PICTURE.GIF" WIQTH="262" HEIGHT="100"
ALT='' Это подпись к картинке">
Параметр SRC задает файл с рисунком. Параметры WIDTH и
HEIGHT задают ширину и высоту рисунка. Рисунок, имеющий
другой реальный размер, будет выведен масштабированным.
Если WIDTH и HEIGHT не задавать, браузер сам определит
размер. ALT содержит текст, который будет выведен, пока
рисунок не загрузился
<TABLE BORDER="1" WIDTH="100%">
<TR>
<TD WIDTH="50%">Ячейка 1</TD>
<TD WIDTH="50%">Ячейка 2</TD>
</TR>
<TR>
<TD WIDTH="50%">Ячейка 3</TD>
<TD WIDTH="50%">Ячейка 4</TD>
</TR>
</TABLE>
100% — размер таблицы в процентах, 50% — ширина ячеек
относительно таблицы
<table border="l" width="100%>
<tr>
<td width="66%" соlsраn="2">Ячейка l</td>
<td width="34%"> Ячейка 2</td>
</tr>
<tr>
<td width="33%"> Ячейка 3</td>
<td width="33%"> Ячейка 4</td>
<td width="34%"rowspan-"2"> Ячейка 5</td>
</tr>
<tr>
<td width="33%">Ячейка 6</td>
<td width="33%"> Ячейка 7</td>
</tr>
</table> (colspan и rowspan — указывают на то, что ячейка
занимает несколько смежных строк или столбцов таблицы)
<table border="4" width="70%" cellpadding="3">
<tr>
<td width="50%" bgcolor="#FFFF80">fl4eiiKa l</td>
<td width="50%" > Ячейка 2</td>
</tr>
<tr>
<td width="50%" >Ячейка 3</td>
<td width="50%" >Ячейка 4</td>
</tr>
</table> Здесь задано еще несколько параметров для ячеек и всей
таблицы в целом (цвет первой ячейки, толщина бордюра)
ПРИМЕЧАНИЕ. Размеры могут быть указаны либо в абсолютных величинах (в пикселах), либо в относительных (в процентах).
Запись «50»указывает размер в 50 пикселов, а запись «50%» — 50% от максимально возможного размера в данных условиях.
Цвета обычно кодируются в формате RGB (красный, зеленый, синий). Записывается это как
«#RRGGBB», где RR — шестнадцатеричное значение красной составляющей, GG — зеленой, а ВВ —
синей. 00 — обозначает отсутствие яркости, a FF — максимальную яркость.
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 72 из 109
Шестнадцатеричной называется система счисления, в которой для записи чисел используются 16
символов: 0, 1, 2, 3,4, 5, 6, 7,8, 9, А, В, С, D, E, F. Таким образом, число FF соответствует десятичному
числу 256. Вот примеры цветов, закодированных таким образом:
#000000 #FFFFFF #FFOOOO #FFFFOO
#408080
Черный Белый
Красный
Желтый
Бирюзовый
СРСП №2. Создание web-страниц
Основным элементом WWW является web-страница — текст, размеченный специальными маркерамитегами, которые обеспечивают определенный внешний вид материала и его связи с другими страницами. Все webстраницы записываются на специальном языке HTML. Сегодня технология WWW позволяет пользователям
создавать web-страницы, которые посредством гиперссылок связаны с другими страницами и прочими
размещенными в Интернете ресурсами.
ПРИМЕЧАНИЕ. HTML — язык разметки гипертекста (Hypertext Markup Language), используемый при создании web-страниц.
Гиперссылка — выделенный фрагмент документа (текст, иллюстрация), с которым ассоциирован адрес другого web-документа.
В дополнение к тексту web-страницы могут содержать графику, звуки, анимацию и другие специальные
эффекты. Отдельные страницы могут быть связаны с другими страницами, обеспечивая доступ к
дополнительной информации. Вся эта информация передается по физическим носителям Интернета при
помощи протоколов Интернета.
Совокупность web-страниц, связанных между собой взаимными гиперссылками, называется web-узлом,
или web-сайтом. Web-сайт располагается на web-сервере в определенной папке этого сервера. Наиболее
распространены два типа web-серверов: на платформе Unix (или Linux) — обычно сервер Apache, на
платформе Windows NT или Windows 2000 — сервер US (Internet Information Server). Размещение на
сервере гипертекстовых материалов называется web-публикацией (изданием).
Web-сайт имеет стартовую страницу — страницу, которая открывается web-браузером при
обращении к сайту, например, при обращении по адресу: http://vrn.fio.ru загружается страница index.html
(Unix) или default.html (Windows).
Для просмотра web-страниц используются специализированные средства, называемые web-браузерами (в
некоторой литературе — броузеры).
Важной особенностью WWW является его рост огромными темпами. Свои собственные web-сайты есть
уже у тысяч людей и сотен тысяч компаний (для обозначения web-сайта часто используется термин home page
(домашняя страница), в действительности домашняя страница — это открывающая страница web-сайта,
содержащая в основном ссылки на другие страницы). За последние несколько лет Интернет и WWW самым
радикальным образом изменили деловые привычки людей. Теперь стало нормой указывать на визитных
карточках свои адреса электронной почты (e-mail и www).
ПРИМЕЧАНИЕ. Первым заметным web-браузером был Mosaic, разработанный в NCSA (National Centeror Super-computing
Applications, Национальный центр суперкомпьютерных приложений в Иллинойском университете, Урбана-Шампань). Сейчас на
рынке насчитывается свыше двух десятков браузеров, и их число продолжает расти. Львиную долю рынка web-браузеров на
текущий момент делят Netscape Navigator и Microsoft Internet Explorer. Web-браузер отображает в своем окне web-страницы и, как
правило, включает панели инструментов и команды меню, позволяющие пользователям просматривать страницы и сайты и
настраивать установки браузера. Поскольку браузеров много, а вариантов индивидуальной настройки еще больше, нередки ситуации,
когда одна и та же web-страница в разных браузерах выглядит по-разному.
Процесс разработки web-сайта
Сегодня, путешествуя по Интернету, можно найти много очень хорошо выполненных сайтов, которые
быстро загружаются, привлекательны на вид, имеют четко разграниченную по разделам информацию и удобные
функции навигации.
Если вы задерживаетесь на каком-либо сайте на длительное время и даже не осознаете этого, то, по всей
видимости, такой сайт очень хорошо продуман. Вернитесь обратно и попробуйте осмыслить полную картину.
Можете ли вы увидеть структуру, организацию? Легко ли воспринимается информация? Понимание движения
информационных потоков — это первый шаг в создании функционального, удобного в работе сайта.
Планирование информационного потока
Многие web-мастера не тратят время на то, чтобы продумать информационный поток, а ограничиваются
только размещением текста и изображений на странице. Хотя на многих сайтах вы можете встретить хвастливые
уверения, что у них гораздо больше посетителей, чем у конкурентов, однако это не самый лучший индикатор
качества исполнения. Лучшим показателем является время: если пользователи остаются на вашем сайте
достаточно долго, чтобы пройти по разным его уровням и разделам, можете быть вполне уверенными в хорошо
выполненной работе. Это означает, что они могут найти то, что им нужно, осмотреть остальное и без особого труда
вернуться обратно.
Чтобы сделать свой сайт эффективным, вы должны визуализировать поток информации и выбираемые
пользователем пути. Другими словами, вы должны видеть свой сайт с точки зрения пользователя.
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 73 из 109
Как построить хороший сайт
Самые лучшие web-сайты — те, которые привлекательно выглядят, емко выражают основную идею и
не заставляют пользователей ждать получения информации на их экранах слишком долго. Вот несколько советов
по созданию успешного сайта.
1. Четко сформулируйте назначение вашего сайта. Старайтесь сформулировать цели создания сайта
настолько четко, насколько это возможно. Предположим, вы хотите, чтобы сайт представлял продукцию вашей
компании. Это хорошо, но вы должны задуматься о том, как вы собираетесь представлять эти продукты. Глубокое
выяснение этих вопросов поможет четко сформулировать цель. Без этого ваше детище будет обречено на
забвение где-то на задворках Всемирной паутины.
2. Обязательно думайте о своей аудитории. Кто будет основными (и вторичными) посетителями вашего
сайта? Какого они возраста? Чем занимаются? Сколько времени проводят на вашем сайте? В отношении каждой
порции информации, каждой картинки и каждой детали спросите себя, как отреагирует на это ваша аудитория.
3. Используйте быстро загружаемые элементы. Основная причина, по которой люди быстро уходят с
сайта (или не посещают его вторично), — слишком долгая загрузка информации. Большой объем
графических файлов вызывает желание как-то повлиять на ход событий, и самое простое — нажать кнопку
Stop, остановив загрузку.
4. Сделайте ваш сайт визуально привлекательным. Вы, несомненно, видели в Интернете немало скучных
сайтов. Что же делает их неинтересными? Возможно, недостаток цвета и разнообразия текста, заголовков. Вы,
вероятно, видели так же беспорядочные и эклектичные сайты, в которых используется слишком много шрифтов
разных размеров или слишком много цветов. Создавая собственный сайт, помните, что продуманное
форматирование страниц приблизит вас еще на один шаг к заветной цели.
5. Не пытайтесь разместить все на одной странице. Будьте внимательны, не перегружайте свои страницы
слишком большим количеством информации. Думай те о тех, кто будет читать ваши страницы, о том, как трудно
воспринимается большое количество текста на экране компьютера, и наполняйте страницы содержимым в
соответствии с этим. Попробуйте добавить пустое пространство, увеличивая поля страницы, или используйте
табличное размещение текста.
Размещая на страницах графику, имейте в виду ее реальное значение: служит ли она основной цели или работает
только как украшение? Но при этом не забывайте, что иногда красивая графика сама по себе может быть целью. В
идеале каждый web-сайт должен хорошо выглядеть, содержать полезную информацию и быть удобным для
просмотра.
6. Разумно организуйте содержимое. Сколько раз при посещении очередного сайта вы говорили себе: «Здесь
нет ничего интересного»? Возможно, где-то глубоко внутри и захоронено что-то ценное, но откопать это можно,
лишь случайно на него натолкнувшись. Если у вас есть информация, которую, как вы считаете, ваши посетители
должны увидеть, не прячьте ее в глубь сайта. Сделайте важную информацию настолько легкодоступной,
насколько это возможно. Не забывайте, что ваш сайт будет иметь, по всей видимости, не один уровень вложенности. Вторичный материал упорядочивайте по группам взаимосвязанной информации.
СОВЕТ. Мы часто склонны думать, что наш сайт обязательно будет замечен той аудиторией, которой он адресован;
однако здесь очень легко промахнуться. Чтобы избежать этого, постарайтесь заранее обсудить план и содержание вашего сайта с как
можно большим количеством людей, особенно потенциальных членов вашей аудитории.
7. Предусмотрите на сайте кнопки навигации. Большинство разработчиков используют кнопки,
адресующие к различным разделам сайта. Эти кнопки, как правило, присутствуют на всех страницах сайта и
обычно расположены плотной группой в одном месте страницы. Единообразие и компактность их расположения
существенно упрощают просмотр вашего сайта. Пользователю достаточно просто нажать кнопку, чтобы перейти в
другой раздел сайта.
СОВЕТ. При планировании кнопок навигации старайтесь соблюсти нижеследующие рекомендации. Обязательно должна
быть кнопка, с помощью которой пользователи могли бы вернуться обратно к начальной странице. Если ваш пользователь забрался на
пять уровней вглубь, надо предоставить ему возможность одним нажатием кнопки вернуться на первую страницу. А если он увязнет,
нажимая кнопку Назад в своем браузере, то, скорее всего, он очень быстро уйдет с вашего сайта и больше никогда не вернется.
Будьте готовы к тому, что у некоторых посетителей вашего сайта отключен просмотр графики в браузере. Очень полезно наряду с
графическими кнопками навигации иметь и их текстовую версию. Тем самым для просмотра вашего сайта пользователь сможет
выбрать удобный для него вариант.
8. Воспользуйтесь картой навигации Проводника FrontPage. Карта навигации может оказаться
особенно полезной, когда у вас возникнут трудности с представлением информации. Начните работу с главной
страницы и идите вглубь. Это визуальное представление поможет вам «увидеть» содержимое вашего сайта, более
ясно организовать его и избежать глобальных изменений при модификации сайта. Вы сможете четче представить
себе структуру вашего сайта, и, возможно, у вас появятся новые идеи по его улучшению.
9. Тщательно протестируйте свой сайт. Проверьте работу вашего сайта, используя как можно больше
различных браузеров, притом на различных платформах (как минимум Windows 95,98, NT, 2000, UNIX и
Macintosh) и при различных скоростях модема. Нередко кнопка навигации, помещенная вами в угол страницы,
в каком-нибудь браузере оказывается посреди окна. Опытные web-дизайнеры проверяют в своих сайтах каждую
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 74 из 109
страницу и каждую ссылку в нескольких различных браузерах. Все связи внутри вашего сайта легко проверить
в Microsoft FrontPage с помощью команды Проверить гиперссылки или протокола состояния гиперссылок
Проводника FrontPage.
Самый простой способ проверки вашего сайта — это операция Предварительный просмотр в
браузере в редакторе FrontPage. Она позволит визуально исследовать вашу страницу в любом браузере,
установленном на вашем компьютере и при различных размерах окна. Например, если вы обычно работаете при
разрешении 1024x768, то сможете воочию посмотреть, как ваша страница будет выглядеть при разрешении
800x600.
10. Предоставьте посетителям возможность легко находить информацию на вашем сайте. Оснастить
сайт полным механизмом поиска удобно с помощью Поискового компонента FrontPage.
При создании гипертекстового документа рекомендуется придерживаться следующего порядка действий:
• создается или берется из ранее подготовленного файла документ;
• текст размечается на параграфы, списки, заголовки и т. д.;
• вставляются ссылки на рисунки;
• вводятся текстовые связи;
• странице придается определенный внешний вид путем выделения отдельных фрагментов страницы
различными шрифтами, размерами шрифтов, использования цвета и разных способов начертания символов,
проведения линий, полос и т. п.;
• документ сохраняется в папке на жестком диске.
ВНИМАНИЕ. Необходимо, чтобы, начиная со стадии разработки, все элементы сайта размещались в одной папке или во вложенных в
нее. Недопустимо располагать элементы сайта в не связанных вложенностью папках.
Для создания web-страниц используются следующие типы программных средств:
• деловые приложения Microsoft Office: Word, Excel, Acsess, PowerPoint, Front Page Express;
• специализированные программные средства Netscape Composer, Microsoft FrontPage, Macromedia
DreamWeaver и др.;
• нередки случаи, когда web-страницы пишутся в стандартном приложении Windows Блокнот и т. п.;
• широко известная в Интернете студия Лебедева (http://www.design. ru/) предлагает Парсер —
средство для автоматизации процессов создания и обновления сайтов, страницы которых схожи по
оформлению, содержанию или структуре.
Большинство продуктов, входящих в MS Office, например MS Word, позволяют создавать и
редактировать web-страницы, а также преобразовывать существующие документы в web-страницы, что значительно
ускоряет разработку web-документов, делает ее возможной без знания языка HTML. Рассмотрим пример
создания web-страницы в Microsoft Word 2002 — последней версии популярного текстового процессора.
Microsoft FrontPage: запуск и элементы интерфейса
Для запуска редактора FrontPage выберите в Главном меню Windows команду Программы ►
Microsoft FrontPage.
Рис. 1. Окно Microsoft FrontPage 2002 с заготовкой web-узла
Раскроется окно приложения Microsoft Front Page (рис.1), в котором, помимо меню, панели
стандартных инструментов и панели инструментов форматирования, знакомым нам по Microsoft Word, имеются:
 панель Виды (Views), расположенная в левой части окна, содержит значки для отображения
различных представлений web-узла;
 панель Список папок (Folder List), расположенная в центре, отображает дерево файлов и папок
составляющих физическую структуру web-узла;
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 75 из 109

окно для работы с выбранным представлением, расположенное справа.
На панели Виды (Views) находятся значки следующих видов:
 Страница (Page) — встроенный редактор web-страниц;
 Лапки (Folders) — иерархическая структура каталогов и файлов;
 Отчеты (Reports), —отчеты для анализа web-узла;
 Навигация (Navigation) — навигатор по страницам web-узла;
 Гиперссылки (Hypelinks) — отображение ссылок, имеющихся на других страницах;
 Задачи (Tasks) — список текущих задач.
Встроенный редактор FrontPage позволяет работать с web-страницей в трех режимах:
 Нормальный (Normal), предназначенный для редактирования страницы в режиме WYSIWYG, то
есть когда страница представлена так, как она будет выглядеть в Internet Explorer;
 HTML, позволяющий редактировать страницу в текстовом представлении;
 Просмотр (Preview), разрешающий просмотреть и протестировать страницу в том виде, в котором
она будет представлена в web-обозревателе Microsoft Internet Explorer.
Для переключения режимов редактора служат вкладки Нормальный, HTML, Просмотр (Normal,
HTML, Preview) в нижней строке окна редактирования (строка видна при открытой в окне редактора webстранице).
Для получения-подсказки об использовании FrontPage вызовите справку, нажав клавишу F1 или
выбрав нужный вариант справки в меню Помощь (Help). Использование справочной системы FrontPage
аналогично Windows и другим приложениям Microsoft Office.
Для завершения работы программы FrontPage выберите в меню Файл (File) команду Выход (Exit) или
щелкните на кнопке Закрыть окно в правом верхнем углу окна.
СРСП №3. Использование Microsoft FrontPage для создания web-узла с использованием шаблона.
Редактирование структуры web-узла. Редактирование web-страницы
1. Запустите Microsoft FrontPage, для чего в Главном меню Windows выберите команду Программы
► Microsoft FrontPage.
2. Для создания структуры web-узла выберите команду Файл ► Новый ► Страница или Web, в
диалоговом окне Новая страница или Web выберите Пустой Web-узел (Empty Web). В окне Шаблоны Webсайтов (Web Site Templates) выберите шаблон, например Персональная страница (Personal Web), в поле
Указать место нового сайта (Specify the location of the new web) введите имя диска и папки, в которой будут
размещены папки и файлы создаваемого web-узла, например D:\home\mywebs. Щелкните на кнопке ОК.
В результате в левой половине окна откроется список содержимого web-узла Список папок (Folder List),
в котором автоматически создаются папки _private и images и несколько страниц HTML с базовым
содержанием по выбранному шаблону (см. рис. 9).
Созданный узел сохраняется в новой папке, которая помещается на локальный диск или на сервер Web.
Этот узел можно впоследствии открыть с помощью команды Файл ►Открыть (File ► Open Web...) или
выбрав его из списка последних открытых узлов Файл ► Недавно использованные файлы (File ► Recent
Files).
3. Рассмотрите предложенную шаблоном персональной страницы базовую структуру web-узла. Для
отображения структуры web-узла щелкните на значке Навигация (Navigation) на панели Вид. В правой части
окна появилась структура web-узла (рис. 2). Здесь можно контролировать правильность ссылок, автоматически изменять их при переименовании файла и многое другое.
Рис. 2. Изменение структуры web-узла
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 76 из 109
4. Удалите страницу myfav3.htm из web-узла, для чего укажите на структуре web- узла данный элемент и,
щелкнув на нем правой кнопкой мыши, раскройте контекстное меню и выберите команду Удаление (Delete)
(см. рис. 10). В раскрывшемся окне удаления установите флажок Удалить эту страницу из сайта (Delete this
page from the Web) и щелкните на кнопке Да (OK).
СОВЕТ. Если в окне структуры отсутствует панель инструментов Навигация, ее можно отобразить, выбрав в меню Просмотр
(View) команду Панели Инструментов ► Навигация (Тoolbars ► Navigation)).
Если при альбомной ориентации не все элементы структуры видны без использования линейки прокрутки, щелкните на кнопке
Портрет/Ландшафт (Portrait/Landscape) на панели инструментов Навигация.
5. Для изменения взаимного расположения и связей элементов структуры web- узла перетащите
элемент в режиме Навигация на желаемое место, как показано на рис. 3.
Рис.3. Изменение взаимного расположения и связей элементов структуры web-узла
6. Наполните содержанием web-страницы web-узла с измененной структурой. Для редактирования webстраницы можно дважды щелкнуть левой кнопкой мышки на ее имени на панели Список папок или ее
изображении на панели навигации. Чтобы увеличить обзор в окне редактирования, отмените отображение
списка файлов, щелкнув на кнопке Список папок (Folder List) на панели стандартных инструментов.
В Н И М А Н И Е. Редактор FrontPage позволяет отменить ошибочную операцию стандартными для Micro soft Office способами —
щелчком на кнопке Отменить (Undo) на стандартной панели инструментов или нажатием сочетания клавиш CtrL+Z.
7. Откройте для редактирования стартовую web-страницу index.htm. Внимательно рассмотрите
страницу index.htm в режиме Нормальный. Она состоит из заголовка страницы, панели навигации в виде
кнопки под заголовком, панели навигации в виде гиперссылок в левой части страницы (Interests, Favorites) и
текста в правой части страницы Welcome to my...
8. Установите основные свойства страницы. Для этого в меню Файл (File) выберите команду
Свойства (Properties). В окне Страница свойств (Page Properties) перейдите на вкладку Главное (General).
Введите в поле Название (Title) название документа на русском языке, например Персональная страница. Для
правильно го отображения символов русского языка на вкладке Язык (Language) (рис. 4) в списке поля
Отметить текущий документ (Mark current document as) выберите Русский (Russian), а в области Кодировка
HTML (HTML encoding) в списке поля Сохранить документ (Save the document as) выберите Кириллица
(Cyrillic), в списке поля Перезагрузить текущий (Reload the current document) выберите Кириллица (Cyrillic)
и щелкните на кнопке ОК.
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 77 из 109
Рис. 4. Определение свойств web-страницы
9. Для изменения элементов web-страницы укажите элемент шаблона и отредактируйте его по вашему
усмотрению. Для редактирования баннера (графического заголовка) страницы, указав баннер, вызовите
контекстное меню и выберите в нем команду Изменение свойств баннера Web-страницы (Page Banner
Properties), как показано на рис.5.
В диалоговом окне Свойства баннера страницы (Page Banner Properties) установите флажок
Изображение (Picture), а в поле Текст баннера страницы (Page banner text) введите новый текст, например Моя
персональная страница, и щелкните на кнопке Да (О К). Текст в баннере изменился.
Рис.5. Изменение свойств баннера web-страницы
Выделив строку навигации на данной странице, нажмите клавишу Delete или выберите в контекстном
меню команду Cut (Вырезать) для удаления строки навигации.
Отредактируйте текст в правой части страницы (Welcome to my...), например, следующим образом:
Данный сайт изготовлен в качестве примера редактирования web-узла, созданного по шаблону персональной
страницы. Последние изменения были внесены.
СОВЕТ. Наиболее эффективным инструментом редактирования является контекстное меню, которое вызывается нажатием правой
кнопки мыши на редактируемом объекте и содержит команды для операций с объектом, на который указывает мышь.
Для изменения формата даты обновления страницы укажите объект даты и выберите в контекстном меню
команду Свойства даты и времени (Date and Time Properties). В окне Дата и время измените формат даты,
как показано на рис. 6, и щелкните на кнопке ОК.
Рис. 6. Изменение свойств объекта типа Дата
Для изменения свойств панели навигации в виде гиперссылок в левой части web-страницы (Interests,
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 78 из 109
Favorites) выделите элементы на панели и выберите в контекстном меню команду Свойства Панели
Навигации (Link Bar Properties). В окне Свойства Панели Навигации на вкладке Общие (General)
установите переключатель
Детский уровень (Child Level), на вкладке Стиль (Style) выберите подходящий стиль в списке
Выберите стиль (Choose a style), в разделе Ориентация и внешний вид (Orientation And Appearance)
установите переключатель Вертикальный (Vertical), установите флажок Использовать активную графику
(Use Active Graphics) и щелкните на кнопке Да (ОК). После этого тексты с гиперссылками в левой части webстраницы будут отображаться в виде вертикально расположенных кнопок.
10.Перейдите в режим Навигация и переименуйте web-страницы Interests в Интересы, a Favorites в
Избранное. Для перехода в режим Навигация щелкните на значке Навигация на панели Виды. Для
переименования web-страницы, указав страницу, выберите в контекстном меню команду Переименовать
(Rename) и введите новое название страницы.
ПРИМЕЧАНИЕ. При переименовании web-страницы не изменяется имя файла, в котором она сохранена.
Перейдите к редактированию стартовой страницы web-узла и убедитесь, что надписи на кнопках
навигации в левой части страницы изменились, как показано на рис.7.
Рис. 7. Вид заглавной web-страницы в окне редактора FrontPage 2002
11. Для проверки действия гиперссылки на кнопке щелкните на ней мышью при нажатой клавише Ctrl.
В окне редактора FrontPage раскроется web-страница, на которую передает управление ссылка с данной
кнопки.
12. Для просмотра вида web-страницы в web-обозревателе щелкните на значке Просмотр (Preview).
Щелкнув на значке HTML, вы можете посмотреть, как записан текст данной web-страницы на языке
HTML. Обратите внимание, что текст этой страницы в формате HTML значительно лаконичнее, чем текст
аналогичной страницы, сгенерированный в среде Microsoft Word.
13. Для оценки вида созданной вами web-страницы в других web-обозревателях выберите в меню Файл
(File) команду Просмотр в Браузере (Preview In Browser). В появившемся диалоговом окне Просмотр в
Браузере (Preview In Browser) выберите браузер, как показано на рис.8, укажите разрешение экрана и щелкните на кнопке Просмотр (Preview).
Рис. 8. Выбор web-обозревателя для просмотра web-страницы
14. В окне обозревателя проверьте действие гиперссылок, правильность отображения текста и графических
элементов страницы. По окончании просмотра закройте окно браузера стандартным способом.
15. Завершив формирование web-страницы, сохраните ее. Для сохранения web- страницы выберите в
меню Файл (File) команду Сохранить (Save) или Сохранить как (Save as), если хотите изменить имя файла.
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 79 из 109
В окне Сохранить как введите имя папки, файла (по умолчанию страница сохраняется в папке и с именем,
которые были определены при создании web-узла), выберите в поле Тип файла (Save as type) тип Страницы
Web (Web Pages) и щелкните на кнопке Сохранить (Save).
16. Закройте окно Microsoft FrontPage с сохранением изменений в созданном web-узле.
ВНИМАНИЕ. Так как большинство серверов в Интернете, на которых может быть размещена web- страница, работает под
управлением операционной системы UNIX, чувствительной к регистру имен файлов, используйте в именах файлов только
латиницу и строчные буквы.
СРСП № 4. Использование Microsoft FrontPage для редактирования созданного ранее web-узла.
Редактирование web-страниц с вставкой рисунков, таблиц, гиперссылок
1. Запустите Microsoft FrontPage и откройте созданный ранее web-узел, для чего выберите команду
Файл ► Открыть (File ► Open), затем в окне Открыть файл (Open File) выберите папку Mywebs, в которой
были сохранены папки и файлы web-узла, укажите файл index.htm и щелкните на кнопке Открыть (Open)
или выберите команду Файл ► Недавно использованные файлы (File ► Recent Files) и выберите в списке
последних файлов стартовую страницу web-узла — index.htm.
2. В окне FrontPage щелкните на значке Папки (Folders) на панели Виды (Views). Выберите на панели
Папки следующую страницу, с которой вы собираетесь работать, например interest.htm, и откройте ее для
редактирования, для чего дважды щелкните левой кнопкой мыши на ее названии.
Отредактируйте текст на данной странице, например, удалите текст Here is a good place to describe a
list of your hobbies, projects or interests. Вместо текста Interest 1 Provide a description, picture, or perhaps a
hyperlink here впишите текст описания одного из ваших увлечений, например: Мне нравится ездить на автомобиле,
ухаживать за ним. мыть его. Много интересного об автомобилях я узнал на сайте «Автомобили в России».
Вместо слов Interest 1 вставьте рисунок автомобиля, для чего, указав место вставки рисунка,
выберите в меню Вставка (Insert) команду Изображение ►Из файла (Picture ► From File). Выбрав в поле
Посмотреть в (Look in) папку и файл рисунка, щелкните на кнопке Вставить (Insert).
3. Для установки и изменения свойств изображения, щелкнув правой клавишей мыши на вставленном
рисунке и выбрав в контекстном меню Свойства изображения (Picture Properties), перейдите в открывшемся
окне на вкладку Основные (General). В области Альтернативные представления (Alternative representations)
в поле Текст введите Автомобили. Откройте вкладку Внешний вид (Appearance), установите в поле
Толщина границ (Border thickness) значение 1, в полях Горизонтальное Расстояние (Horizontal spacing) и
Вертикальное Расстояние (Vertical spacing) установите значение 2. Для применения внесенных изменений
щелкните на кнопке ОК.
4. Создайте абсолютную гиперссылку на слова Автомобили в России, для чего, выделив их, щелкните на
кнопке Гиперссылка на стандартной панели инструментов. В окне Вставка гиперссылки введите в поле
Address.: (Адрес) адрес web-страницы или, щелкнув на кнопке ссылки на интернет-ресурс (со значком webобозревателя), найдите эту страницу в Интернете, выделите и запомните в буфере обмена ее адрес. Закрыв окно
web-обозревателя, вставьте адрес найденной в Интернете страницы в поле Address: http://www.auto.ru, как
показано на рис.9. Завершите создание гиперссылки, щелкнув на кнопке ОК.
ПРИМЕЧАНИЕ. При созданий гиперссылки вы можете определить целевой файл одним из двух возможных способов: в виде
абсолютной или относительной ссылки. Абсолютная ссылка использует полный URL и указывает точное местонахождение файла.
Относительная ссылка указывает местонахождение файла по отношению к адресу web-страницы, содержащей данную
гиперссылку.
Рис. 9. Окно редактирования гиперссылки
5. Аналогично замените текст Interest 2 Provide a description, picture, or perhaps a hyperlink here на
странице interest.htm на текст об увлечении рыбалкой, вставив соответствующий рисунок из файла и создав
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 80 из 109
гиперссылку на ваш почтовый адрес.
6. Щелкнув на значке Гиперссылки (Hyperlinks) на панели Виды (Views), просмотрите все ссылки,
относящиеся к выбранной странице и созданные автоматически при использовании шаблона Персональная
страница (Personal Web).
Просмотрите свойства ссылки на файл photo.htm, для чего, указав мышью файл photo.htm, вызовите
контекстное меню и выберите в нем команду Свойства изображения (Picture Properties). В окне Свойства
изображения откройте вкладку Главное (General) и в поле Название (Title) измените название документа, на
который выполнена ссылка, например, на Фотоальбом. Для завершения просмотра и применения измененного
названия документа-ссылки щелкните на кнопке Применить (Apply) и закройте окно Свойства изображения,
щелкнув на кнопке ОК.
7.Перейдите к отображению навигационной структуры web-узла и измените на звание ссылки на файл
photo.htm на Фотоальбом, для чего, указав данную ссылку, выберите в контекстном меню команду
Переименовать (Rename), а затем отредактируйте название.
Отредактируйте на всех страницах гиперссылки возврата на родительскую страницу.
СОВЕТ. Чтобы панель навигации отображалась только на конкретной странице, следует разместить ее в центральной области
страницы, так как включение панели навигации в общие области отразится на всех страницах. Чтобы страница не включалась в
панель навигации, укажите страницу и в контекстном меню снимите флажок Включать в Навигационную Панель (Included in
Navigation Bars).
8. Одним из наиболее удобных и гибких средств организации материала на странице являются таблицы. Они
помогают во многих случаях упростить форматирование текста и размещение графических изображений. Кроме
того, используя таблицы, бывает легче достичь единообразия на страницах. Построить таблицу в редакторе
FrontPage можно, либо непосредственно нарисовав ее на странице, либо вставив с помощью меню Таблица
(Table).
Откройте для редактирования страницу photo.htm, удалите из нее текст шаблона, фотографии,
вставленные из шаблона, а затем создайте на странице таблицу из двух строк и трех колонок, в которой
разместите фотографии автомобилей. Для примера можно использовать фотографии, скопированные с сайта,
посвященного автомобилям, например с http://www.cars.com, в папку images.
Для вставки таблицы укажите место вставки таблицы и выберите команду Таблица ► Вставка ► Таблица
(Table ► Insert ►Table). В окне Вставить таблицу (Insert Table) укажите в области Размер (Size) количество
строк (Rows) 2, количество колонок (Columns) 3, в области Размещение (Layout) в поле Размер (Border Size
— ширина рамки таблицы) задайте 0 (рамка не будет отображаться) и щелкните на кнопке Да (ОК) для
создания таблицы.
Для вставки фотографии укажите ячейку таблицы, а затем выберите Вставка ► Изображение ► Из
файла (Insert ► Picture ► From File), в окне Изображение (Picture) выберите папку и файл рисунка.
Щелкните на кнопке Вставить.
Для изменения свойств рисунка, указав рисунок, выберите в контекстном меню команду Свойства
картинки (Picture Properties), на вкладке Главное (General) в разделе Альтернативные представления
(Alternative representations) введите в поле Текст (Text) Джип, на вкладке Внешний вид (Appearance) в поле
Толщина границ (Border thickness) установите значение 0, в полях Горизонт. расстояния (Horizontal spacing)
и Вертикал. расстояния (Vertical spacing) установите значения 1. Для применения внесенных изменений
щелкните на кнопке ОК.
9.Установите на странице photo.htm панель навигации с кнопкой Вверх (Up) для возврата на
родительскую страницу interest.htm. Чтобы эта кнопка отображалась только на странице photo.htm,
установите курсор в середине этой страницы и выберите в меню Вставка (Insert) команду Web компонент
(Web Component).
В диалоговом окне Вставка Web-компонента (Insert Web Component) выберите Панели ссылок (Link
Bars), в списке поля Выбрать панель типов (Choose a bar Type) выберите Панель с пользовательскими
ссылками (Bar with custom links). Щелкните на кнопке Далее (Next). В следующем окне выберите
подходящий стиль оформления кнопок панели навигации, затем выберите ориентацию, например горизонтальную, и щелкните на кнопке Готово (Finish). После этого в окне Создание новой панели навигации
(Create New Link Bar) введите название создаваемой панели (можно оставить имя, предлагаемое по
умолчанию) и щелкните на кнопке ОК.
В окне Свойства панели навигации (Link Bar Properties), щелкнув на кнопке Добавить (Add link),
укажите имя web-страницы, на которую должен осуществляться переход при нажатии на создаваемую
кнопку, в нашем примере interest.htm, установите флажок Родительская страница (Parent Page) и щелкните
на кнопке ОК.
10. Действуя аналогично, установите в область навигации в левой части страницы кнопку Домой
(Ноmе) для передачи управления со всех страниц данного web-узла на стартовую (домашнюю) страницу
index.htm.
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 81 из 109
Рис. 10. Вид страницы photo.htm с таблицей
11. Сохраните страницу photo.htm, щелкнув на кнопке Сохранить (Save) на стандартной панели
инструментов FrontPage. Для проверки вида страницы перейдите в режим Просмотр (Preview). Примерный
вид страницы показан на рис.10.
Обратите внимание: при указании на графический объект, которому было задано альтернативное
представление в виде текста Джип, на экран выводится всплывающая надпись Джип. Эта надпись будет выводиться
в окне web-обозревателя вместо графического объекта, если в web-обозревателе будет отключено отображение
графики.
СОВЕТ. Чтобы эта кнопка оказалась на всех страницах web-узла, установите указатель в общую область навигации страниц в левой
части окна редактирования.
12. Оформите на web-странице Избранное перечень ссылок на ресурсы в Интернете в виде списка. Для
перехода к редактированию web-страницы Избранное, щелкнув на значке Папки (Folders), выведите
содержимое web-узла и щелкните на файле favorite.htm. После этого данная страница будет раскрыта для
редактирования в окне редактора FrontPage. На этой странице удалите лишний текст, введите свой текст,
например: На данной странице я собираю наиболее интересные, на мой взгляд, ссылки в Интернете. Федерация Интернет
Образования, Московский учебный центр ФИО, Воронежский региональный центр ФИО, Поколение.ru.
Оформите текст Федерация Интернет Образования, Московский учебный центр ФИО, Воронежский региональный
центр ФИО, Поколение.ru в виде списка, для чего, выделив данный текст в отдельный абзац, щелкните на кнопке
Список (Bullets) на панели инструментов форматирования. При желании изменить свойства списка выделите
его, в контекстном меню выберите команду Свойства списка (List Properties), измените свойства списка,
например, на вкладке Маркеры изображения (Picture Bullets) установите флажок Указать рисунок (Specify
picture). Щелкнув на кнопке Просмотр (Browse), найдите файл рисунка, который будет служить
изображением маркера в списке. Щелкнув в окне Выберите рисунок (Select Picture) на кнопке ссылки на
ресурс файловой системы компьютера, выберите папку и файл рисунка в открывшемся окне Выберите
файл (Select File) и щелкните на кнопке Да.
Создайте гиперссылки на элементы созданного списка: Федерация И нтернет Образования — http://www.fio.ru,
Московский учебный центр ФИО — http://center.fio.ru, Воронежский региональный центр ФИО—
http://vrn.fio.ru, Поколение.ru — http:// www.pokoleniye.ru.
Для создания гиперссылки, выделив текст элемента списка, например Федерация Интернет Образования,
выберите в контекстном меню команду Гиперссылка (Hyperlink), затем в окне Вставить гиперссылку (Create
Hyperlink) в поле Address: введите http://www.fiо.ru и щелкните на кнопке Да. Аналогично создайте гиперссылки на остальные элементы списка ссылок.
13. Сохраните внесенные изменения, выбрав Файл ► Сохранить (File ► Save). Для просмотра вида
web-страницы щелкните на значке Просмотр (Preview) в окне редактора FrontPage и просмотрите, как она
будет выглядеть в web-обозревателё. Проверьте правильность отображения текста и графических элементов
страницы, действие гиперссылок на другие страницы web-узла, на web-страницы в Интернете. Щелкнув на
значке HTML, посмотрите, как записан текст данной web-страницы на языке HTML.
14. По окончании просмотра закройте окно FrontPage стандартным способом.
СРСП № 5. Использование дополнительных возможностей FrontPage воформлении web-страниц
Запустите Microsoft FrontPage и откройте созданный при выполнении Практического занятия 2 webузел, для чего выберите команду Файл ► Открыть (File ► Open), в окне Открыть файл (Open File)
выберите папку Mywebs, в которой были сохранены папки и файлы web-узла, укажите файл index.htm и
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 82 из 109
щелкните на кнопке Открыть (Open) или выберите команду Файл ► Недавно использованные файлы (File
► Recent Files). Выберите в списке последних файлов файл стартовой страницы web-узла index.htm,
СОВЕТ. В редакторе FrontPage 2002 можно найти документ, с которым вы работали последнее время, щелкнув в окне Открыть
(Open File) на кнопке История, после чего будет выведен список последних документов. После этого остается указать документ и
щелкнуть на кнопке Открыть.
В окне FrontPage щелкните на значке Папки (Folders) на панели Виды (Views). Выберите в окне
Папки (Folders) страницу photo.htm и откройте ее для редактирования.
Шаг 1. Создать подвижную кнопку с гиперссылкой на другую страницу.
Подвижная кнопка — это кнопка, реагирующая на движение мыши и, при необходимости, снабженная
гиперссылкой. Для выполнения задания следует в меню Вставка (Insert) выбрать команду Компонент ► Парящая
кнопка (Component ► Hover Button). В окне Hover Button находится ряд параметров, обеспечивающих
дополнительные возможности кнопки.
1. Удалите кнопку Вверх (Up), созданную на данной странице ранее. Для создания подвижной
кнопки установите курсор в конец текста на web-странице photo.htm и выберите команду Вставка ► Webкомпонент. В окне Вставка Web-компонент выберите в списке компонентов Динамические эффекты
(Dinamic effects), а затем в списке эффектов выберите Hover Button и щелкните на кнопке Готово (Finish).
2. В окне Реквизиты парящей кнопки (Hover Button Properties) в поле Текст кнопки (Button text)
введите Назад. Чтобы в поле Связь с (Link to) указать название web- страницы, на которую следует перейти по
нажатию создаваемой кнопки, щелкните на кнопке Обзор (Browse), в окне Выбор гиперссылки парящей
кнопки (Select Hover Button Hyperlink) выберите папку и файл web-страницы, в данном случае interest.htm,
и щелкните на кнопке Да. Выберите в списке поля Эффект (Effect) вариант Инверсия освещения (Reverse
glow) и щелкните на кнопке Да для завершения создания кнопки.
3. Сохраните страницу и просмотрите полученную кнопку, переключившись в режим Просмотр (Preview).
Для проверки действия подведите указатель мыши на созданную кнопку, обратите внимание на изменение
освещения. Щелкнув на кнопке левой кнопкой мыши, убедитесь в выполнении перехода по ссылке.
4. Для изменения свойств созданной кнопки перейдите в режим Нормальный (Normal), укажите
кнопку и в контекстном меню выберите команду Свойства парящей кнопки (Hover Button Properties). В
окне Свойства парящей кнопки (Hover Button Properties) в поле Эффект (Effect) выберите Заполнение
цветом (Color fill). Щелкнув на кнопке Настроить (Custom), откройте окно Настройка (Custom). Щелкнув на
кнопке Обзор (Browse), раскройте окно Выберите рисунок (Select Picture), выберите в поле Кнопка (Button)
файл рисунка кнопки. Аналогично, используя кнопку Обзор, в поле Парение (On hover) выберите
альтернативный рисунок кнопки. Щелкнув на кнопке Да, завершите изменение кнопки. Сохраните страницу и
просмотрите измененную кнопку, переключившись в режим Просмотр (Preview).
Шаг 2. Создать бегущую строку.
Бегущая строка — перемещающийся по заданным вами правилам фрагмент текста.
1. Для создания бегущей строки укажите место расположения бегущей строки на web-странице и
выберите команду Вставка ► Web-компонент (Insert ► Web Component). В окне Вставка Web-компонент
выберите в списке компонентов динамические эффекты, а затем в списке эффектов выберите Бегущая
строка (Marquee) и щелкните на кнопке Готово (Finish). В диалоговом окне Реквизиты бегущей строки
(Marquee Properties) введите в поле Текст (Text) содержание текста, например: Если вы знаете интересные
ссылки, пишите мне, выберите направление, например Влево (Left), установите задержка (Delay) 90, количество
(Amount) 10, Прокрутка (Scroll), Ширина (Width) 500 пикселов, Повтор (Repeat) Бесконечно, Цвет фона
(Background) Avtomatic и щелкните на кнопке Да для завершения создания бегущей строки.
2. Просмотрите действие полученной бегущей строки текста, переключившись в режим Просмотр
(Preview). Для изменения бегущей строки переключитесь в режим Нормальный и, указав на строку, выберите в
контекстном меню команду Свойства Заставки (Marquee Properties), затем в окне Свойства Заставки измените
параметры и щелкните на кнопке Да для завершения редактирования свойств бегущей строки. Просмотрите
действие полученной бегущей строки текста, переключившись в режим Просмотр (Preview).
Шаг 3. Создать последовательность сменяющихся баннеров.
Как было описано ранее, баннер (от англ. banner — рекламный заголовок) — графический элемент,
который по договоренности или за плату располагается на определенных web-серверах, причем нажатие мышью
на вышеупомянутый элемент автоматически приводит пользователя на сайт рекламодателя. Изготовить баннер
вы можете с помощью графического редактора Photoshop. Для организации показа последовательности
чередующихся баннеров на web-сайте используется команда Вставка ► Web-компонент ► Динамические
эффекты ► Диспетчер заголовка (Insert ► Web Component ► Dinamic Effects ► Banner Ad Manager).
Создайте на первой странице сайта последовательность сменяющихся баннеров, на которых находится
гиперссылка на web-сайт Воронежского регионального центра Федерации Интернет Образования
http://vrn.fio.ru.
1. Изготовьте с помощью графического редактора несколько баннеров размером 468x60 пикселов и
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 83 из 109
сохраните их в папке images вашего web-узла.
2. Для создания на первой странице сайта последовательности сменяющихся баннеров откройте страницу
index.htm в окне редактора FrontPage, укажите место размещения баннера в верхней части страницы и выберите в
меню Вставка команду Web-компонент ► Динамические эффекты ► Диспетчер заголовка.
В окне Свойства Диспетчера заголовков (Banner Ad Manager Properties) задайте размер баннера (в
пикселах), в поле Эффект (Transition effect) выберите Шторы горизонтально (Blinds Horizontal), в поле
Показать каждое (Show each picture for) задайте время показа каждой картинки в последовательности 5 с, в
поле Связь с (Link to) задайте адрес перехода http://vrn.fio.ru, как показано на рис.11.
Чтобы добавить для показа заранее заготовленную картинку, щелкните на кнопке Добавить (Add), в окне
Добавить рисунок для баннера (Add Picture for Banner Ad) откройте нужную папку, выберите файл рисунка
и щелкните на кнопке Да. Используя кнопки Добавить (Add), Убрать (Remove), Вверх (Move Up), Вниз
(Move Down), определите порядок смены баннеров и щелкните на кнопке ОК для завершения создания
последовательности сменяющихся баннеров.
3. Сохраните страницу index.htm и просмотрите полученный динамический баннер, переключившись
в режим Просмотр (Preview). Щелкнув на баннере, проверьте действие гиперссылки.
Рис. 11. Создание последовательности сменяющихся баннеров
Шаг 4. Анимация элементов web-страницы.
FrontPage позволяет использовать различные визуальные и звуковые динамические эффекты при
построении страниц, то есть делать страницы активными. Для этого используется команда Формат ►
Переход Страницы (Format ► Page Transition). Динамические эффекты можно применять и к отдельным
фрагментам страниц (объектам), определяя их поведение в зависимости от наступления заданных событий. Для
анимации текста или другого элемента web-страницы этот элемент необходимо сначала выделить, а затем
использовать команду Формат ► Эффекты Динамического HTML (Format ► Dynamic HTML Effects).
Действие эффекта распространяется либо на текущий объект в случае отсутствия выделения (например, на
строку текста, на которой стоит курсор), либо на выделенный объект (например, на несколько выделенных
абзацев). После определения объекта или нескольких объектов, на которые будут распространяться эффекты,
нужно выбрать событие, при наступлении которого эффект будет реализован. Это делается на панели инструментов Эффекты DHTML.
Действие динамического эффекта наступает в случае одного из четырех событий: О одинарный щелчок
мышью (Click); О двойной щелчок мышью (Double click); О наведение указателя мыши (Mouse over); О
загрузка страницы (Page load).
На панели Эффекты DHTML в списке поля Включено (Choose an effect) можно выбрать эффект, а в
списке поля Применение (Choose Settings) выбрать его параметры. Например, при загрузке страницы Page
load можно выбрать для текста эффект Приближение (Zoom) и параметры Внутрь (In) или Наружу (Out).
Для текста при наведении указателя мыши (Mouse over) можно выбрать эффект Форматирование
(Formatting) и параметры Изменять Шрифт (Choose Font...) и Изменять рамку (Choose Border...).
Для рисунка при наведении указателя мыши (Mouse over) можно выбрать эффект Смена картинки
(Swap Picture) и с помощью Выбор рисунка (Choose Picture...) выбрать картинку для замены.
1. Откройте в окне редактора FrontPage файл photo.htm и задайте динамический эффект тексту.
Вставьте в таблицу над рисунками еще одну строку, для чего, указав первую строку таблицы, выберите в
меню Таблица (Table) команду Вставка ► Строки или столбцы (Insert ► Rows or Columns), затем в
диалоговом окне Вставить строки или столбцы (Insert Rows or Columns) установите флажок Строки (Rows),
в поле Число строк (Numbers of rows) укажите 1, в области окна Место (Location) установите флажок
Сверху выделенных строк (Above selection) и щелкните на кнопке Да (ОК).
Выделите ячейки в первой строке и объедините их, выбрав команду Таблица ► Объединение ячеек
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 84 из 109
(Table ► Merge cells).
Рис. 12. Определение динамического эффекта для текста
Введите в полученную ячейку текст, например: Посмотрите фотографии автомобилей, и задайте ему
динамический эффект, выбрав команду Формат ► Эффекты Динамического HTML (Format ► Dinamic
HTML effects), затем в появившейся панели Эффекты DHTML (рис. 12), в списке поля Включено (On)
выберите событие Загрузка страницы (Page load), в списке поля Применение (Apply) выберите Падать по
слову (Drop in by word).
Завершив создание динамического эффекта, закройте панель Эффекты DHTML, щелкнув на кнопке
закрытия в правом верхнем углу панели.
2. Задайте динамический эффект одному из рисунков на странице photo.htm. Выделив рисунок,
выберите команду Формат ► Эффекты Динамического HTML, затем на панели Эффекты DHTML (рис. 13)
в списке поля Включено выберите событие Щелчок (Click), в списке поля Применение выберите Выбор
рисунка (Choose picture). Щелкнув на эффекте Выбор изображения, в раскрывшемся окне Изображение (Picture)
выберите файл другого рисунка и щелкните на кнопке Да. Закройте окно Изображение, щелкнув на кнопке
Да. Закройте панель Эффекты DHTML, щелкнув на кнопке закрытия в правом верхнем углу панели.
Рис. 13. Определение динамического эффекта для рисунка
3. Сохраните страницу photo.htm и, переключившись в режим Просмотр, просмотри те действие
динамического эффекта для текста при загрузке web-страницы. Щелкая мышью на рисунке с динамическим
эффектом, проверьте действие эффекта смены рисунка при щелчке на нем.
4. Откройте в окне редактора FrontPage web-страницу favorite.htm и задайте ей эффект появления
Blend при загрузке. Для этого выберите в меню Формат команду Переход Страницы (Format ► Page
Transitions), в окне Переход страницы (Page Transitions) в списке поля Событие (Event) выберите Page Enter
(Загрузка страницы), в поле Продолжительность (Duration) задайте время появления страницы, например 3
с, в списке Эффект перемещения (Transition effect) выберите Blend и щелкните на кнопке Да для применения
заданного эффекта. Сохраните страницу favorite.htm.
5. Откройте созданный web-узел для просмотра в web-обозревателе, для чего за грузите webобозреватель, например Microsoft Internet Explorer, выберите в его меню команду Файл ► Открыть,
щелкните на кнопке Обзор и найдите в окне Проводника Windows папку данного web-узла и файл
index.htm. Откройте данный файл, щелкнув на кнопке Открыть. Щелкните на кнопке ОК.
Щелкнув на стартовой странице web-узла на кнопке Избранное, проверьте действие эффекта появления
страницы favorite.htm.
6. По окончании просмотра закройте окно web-обозревателя стандартным способом.
СРСП № 6. Использование FrontPage 2002 для создания карт ссылок
Карта ссылок (также называемая «активизируемой мышью картой») — это графический элемент webстраницы, представляющий собой две или более гипертекстовые ссылки, каждая из которых активизируется при
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 85 из 109
щелчке мышью на определенной области изображения. Связывание областей графического изображения с
URL выполняется с помощью файла карты — текстового файла, содержащего список всех активизируемых
мышью областей графического изображения и соответствующих им URL. Границы областей определяются
через координаты мыши на изображении. Когда посетитель вашего узла обнаружит активизируемую мышью
графику (активную область изображения) и щелкнет на некоторой ее части, браузер определит положение мыши
и передаст эту информацию программе-сценарию, обрабатывающей карты ссылок. Используя файл карты как
справочную таблицу, сценарий определяет, какой URL отправить браузеру.
Шаг 1. Создать web-страницу с рисунком, на котором создать карту ссылок с возможностью перехода
на другие страницы при щелчке мышью на определенной области изображения.
1. Запустите FrontPage и создайте новую web-страницу, для чего щелкните на кнопке Новый на панели
инструментов.
2. Вставьте на страницу рисунок из файла, например рисунок автомобиля, для чего выберите в меню
Вставка команду Изображение ► Из файла, затем в окне Изображение выберите папку и файл рисунка и
щелкните на кнопке Вставить (Insert). Рисунок будет вставлен в web-страницу с названием new_l.htm, а в
окне редактора FrontPage раскроется панель инструментов Рисунки (Image), показанная на рис. 14.
Рис. 14. Панель инструментов Рисунки Microsoft FrontPage
3. Создайте на рисунке автомобиля гиперссылки на изображение колеса, переднего стекла, передней двери.
Ссылки должны открывать web-страницы, на которых описаны эти элементы автомобиля. Используя инструмент
рисования Прямоугольник (Rectangle) или Эллипс (Circle), нарисуйте контур на рисунке, например на
изображении колеса. В открывшемся окне Вставить Гиперссылку щелкните на кнопке Создать новый документ.
Введите в поле Имя нового документа имя новой web-страницы, установите флажок Редактировать новый
документ сейчас и щелкните на кнопке ОК. В новой странице введите текст На этой странице рассказано про
колеса, диски и резину. Аналогично создайте гиперссылки на изображение переднего стекла, передней двери.
Каждый раз при создании гиперссылки на изображение будет создаваться новая страница.
ПРИМЕЧАНИЕ. Можно создать гиперссылку и на другие документы, в том числе и в Интернете.
4. В меню Окно выберите окно страницы с рисунком new_l.htm. Как видно на рис. 15, на
изображении автомобиля выделены части, на которых созданы гиперссылки.
Рис. 15. Изображение с выделенными активными областями, на которых созданы гиперссылки
5. Сохраните созданную web-страницу под именем new_l.htm и сохраните страницы, на которые
созданы ссылки с карты ссылок под именами l.htm, 2.htm, 3.htm.
6. Для проверки действия созданной карты ссылок переключите FrontPage в режим Просмотр. Щелкая
мышью на активных областях изображения с гиперссылками, проверьте действие карты ссылок.
Шаг 2. Отредактировать карту ссылок так, чтобы при щелчке на изображении переднего стекла
осуществлялся переход на web-сайт http://www.bmw.com.
1. Переключите редактор FrontPage в режим Нормальный и в меню Окно выберите окно страницы с
рисунком new_l.htm. Выбрав на панели инструментов Рисунки инструмент Прямоугольник, выделите на
рисунке изображение переднего стекла. В открывшемся окне Вставить Гиперссылку щелкните на кнопке Существующий
файл или страница WWW, в поле Адрес: (Address) введите адрес: http://www.bmw.com и завершите создание
гиперссылки, щелкнув на кнопке Да (ОК).
2. Отредактируйте гиперссылку с изображения двери, чтобы при щелчке на этой части рисунка
создавалось почтовое сообщение на адрес Petrov@mail.ru. Для этого переключите редактор FrontPage в
режим Нормальный, укажите на изображение двери и в контекстном меню выберите команду Гиперссылка. В
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 86 из 109
окне редактирования гиперссылки щелкните на кнопке Адрес электронной почты и в поле E-mail address: введите
адрес: Petrov@mail.ru. Завершите ввод адреса нажатием кнопки Да (ОК).
3. Сохраните отредактированную web-страницу. Для проверки действия созданной карты ссылок
переключите FrontPage в режим Просмотр. Щелкая мышью на активных областях изображения переднего
стекла, двери, проверьте действие созданных гиперссылок.
4. Переключите отображение web-страницы new_l.htm с картой ссылок в режим HTML и
просмотрите текст в формате HTML. Прочтите и попробуйте объяснить запись гиперссылок с активных
областей изображения:
<агеа href=«1.htm» shape=«rect» coords=«203, 185, 294, 315»>
<area href=«mailto:Petrov@mail.ru» shape=«polygon» coords=«337, 51, 315, 122, 314, 226, 392, 214, 394,
122, 369, 43, 340, 49>»
<area href=«http://www.bmw.com» coords=«139, 110, 195, 54, 329, 50, 311, 111» shape=«polygon»>
</map><img border=«0» src=«images/jplb20.jpg» usemap=.«#FPMap0» width=«500» height=«338»>
4. Закройте окно редактирования web-страницы new_l.htm, выбрав в меню Файл команду Закрыть.
Завершите работу FrontPage.
СРСП № 7. Использование форм в web-страницах
Для интерактивного общения с посетителями вашего сайта служат формы. Если вы хотите, чтобы
посетители web-сайта высказывали свое мнение или указывали на ошибки в сайте, дополняли сайт (например,
вносили свои ссылки прямо из браузера), если хотите узнать больше о своих посетителях, предоставляя им на
рассмотрение и заполнение анкету, или же преследуете другие специфические цели, — сделайте
интерактивные формы и попросите посетителей их заполнить.
С помощью форм можно получить почти любую информацию, которая вам нужна от посетителей (в
предположении, что они желают ее предоставить). Кроме того, можно указать программе сохранять данные в
HTML, текстовом или расширенном текстовом формате RTF, можно просматривать их и изменять с
помощью различных внешних программ и макросов.
ВНИМАНИЕ. Когда посетитель web-страницы заполняет форму и щелкает на предлагаемой кнопке, данные отправляются в
программу на сервере. Программа сервера должна существовать, без нее информация просто не будет сохранена. При поступлении
данных программа сервера их обрабатывает. Обработка может быть простой, например сохранение данных в файле, или сложной,
такой как сортировка, расчеты по предоставленным данным или передача подтверждения об отправке информации.
Взаимодействие посетителей с web-узлом осуществляется в соответствии со стандартом CGI — Common
Gateway Interface (общий интерфейс шлюзов). Программы сервера, имеющие дело с входной информацией
типа форм, называются сценариями CGI. При щелчке посетителя на кнопке представления на рассмотрение
отправляемые им данные поступают в сценарий, который обеспечивает их обработку.
Если у вас нет пакета FrontPage, придется написать сценарий CGI для управления формами и
установить его на сервере Web. Составление таких сценариев требует соответствующей программистской
подготовки. Более того, плохо написанный сценарий может вызвать серьезное нарушение в работе сервера,
поэтому многие провайдеры Интернета не разрешают устанавливать пользовательские сценарии на своих
серверах. К счастью, FrontPage может создать такой сценарий за вас. Однако, если вы хотите создавать на
своей странице интерактивные формы с помощью FrontPage, сначала поинтересуйтесь, есть ли расширения
FrontPage на сервере, на котором вы собираетесь размещать свою страницу. Позвоните своему провайдеру,
почитайте информацию о сервере на web-сайте или напишите письмо администратору сервера,
предоставляющего бесплатные страницы. Если же вы сделаете формы в FrontPage, а сервер не будет
поддерживать расширения FrontPage, ваши формы просто не будут работать.
ВНИМАНИЕ. Формы можно создавать в редакторе FrontPage только в том случае, если у вас установлен Personal Web Server!
Из чего состоит форма
Любая форма FrontPage имеет одинаковую базовую структуру: не менее одного вопроса, одно или
больше текстовых поля для ввода информации посетителем, кнопку, предлагающую отправить данные на
сервер, и кнопку очистки для удаления введенной или выбранной в полях информации.
В каждой форме имеется как минимум два элемента, или поля, формы — поле для ввода текста или
выбора варианта и кнопка Отправить, инициирующая запись результатов из формы в файл или в программу
обработки на сервере.
В формах используются следующие поля:
 однострочное текстовое поле (One-line text box);
 прокручивающееся текстовое окно (Scrolling text box);
 флажок (Check box);
 переключатель (Radio button);
 раскрывающееся меню (Drop-down menu);
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 87 из 109


нажимающаяся кнопка (Push button);
графическая кнопка (Image).
При обработке полей формы сценарий использует свойства полей формы. Одним из важнейших свойств
является имя поля. Имена полей — это обозначения каждого из полей формы. Эти обозначения указывают
программе обработки результатов (сценарию CGI) на то или иное поле формы, и, чтобы форма была
правильно понята, у каждого из полей формы (кроме флажков, объединенных в группу) должны быть разные
имена. Имена полей можно посмотреть и изменить, дважды щелкнув на поле. Общим для всех полей является
поле Name (Имя). Такое имя является частью пары имя-значение, связанной с данным полем. В этом поле
указывается обозначение данного элемента формы.
Свойства любого поля формы можно просмотреть и изменить, указав поле и выбрав в контекстном меню
команду Свойства поля формы.
Формы FrontPage можно создать с помощью Мастера форм, путем разработки собственной
пользовательской формы и с помощью шаблона.
СРСП № 8. Создание формы с помощью Мастера форм
1. Запустите FrontPage. Для создания web-страницы с формой выберите команду Файл ► Новый ►
Страница или Web, в диалоговом окне Новая страница или Web выберите Шаблоны страницы. В окне Шаблоны
страниц выберите шаблон Мастер форм (Form Page Wizard) и щелкните на кнопке ОК. Далее следуйте указаниям
Мастера форм. Для перехода к следующему шагу Мастера щелкните на кнопке Далее (Next). Если нужно
вернуться назад, щелкните на кнопке Назад (Back).
2. На втором шаге Мастера, щелкнув на кнопке Add, выберите в списке тип создаваемой формы,
например Контактная информация (Contact information). В поле Отредактируйте текст приглашения для
этих вопросов (Edit the prompt for this question) введите текст, например Пожалуйста. введите вашу
контактную информацию.
Щелкнув на кнопке Далее (Next), перейдите к следующему окну диалога с Мастером, в котором
выберите поля, включаемые в создаваемую форму, как показано на рис. 16.
Рис.16. Выбор полей формы
В следующем диалоговом окне Параметры представления формы (PREZENTA-TION OPTIONS)
установите переключатель as a bulleted list, установите флажок Использовать таблицу для выравнивания
полей формы? (Use tables to align form fields?) и щелкните на кнопке Далее (Next) для перехода к
следующему окну. В окне Параметры вывода результатов (OUTPUT OPTIONS) установите переключатель
Сохранять результаты в текстовом файле (Save results to a text file) в поле Введите имя файла результата
(Enter the base name of the results file) и щелкните на кнопке Далее (Next) для перехода к следующему
диалоговому окну. Завершите работу Мастера, щелкнув на кнопке Finish.
После этого FrontPage сгенерирует форму, параметры которой были определены в процессе ваших
диалогов с Мастером форм.
3. Отредактируйте надписи на странице, например, отредактируйте заголовок, замените текст This is
an explanation of the purpose of the form объяснением назначения формы, отредактируйте надписи на бланке
формы, как показано на рис. 17.
Для изменения размеров поля формы выделите поле и перетащите маркер границы поля в нужном
направлении (см. рис. 17).
Для просмотра или изменения свойств кнопки Submit Form, выделив кнопку, в контекстном меню
выберите команду Свойства поля формы.
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 88 из 109
В диалоговом окне Параметры нажатой кнопки в поле Name (Имя) введите имя кнопки, например
button1, в поле Value/Label (Значение/Метка) введите текст Отправить, переключатель Тип кнопки
установите Submit (Подпись) — кнопка для отправки данных из формы.
Закройте окно Параметры нажатой кнопки, щелкнув на кнопке ОК.
Рис. 17. Редактирование формы
Аналогично отредактируйте свойства кнопки Сброс формы (Reset Form), задав ей имя Clear,
Value/Label (Значение/Метка) — Очистить и установив переключатель Тип кнопки — Reset (Сброс), как
показано на рис. 18.
Рис. 18. Изменение свойств кнопки
Рис.19. Просмотр Web-страницы с формой
Установив указатель мыши в рамке формы, выберите в контекстном меню команду Свойства Формы
(Form Properties), затем в окне Свойства Формы просмотрите, и отредактируйте имя файла, в котором будут
сохраняться данные, введенные посетителями вашего сайта. Щелкнув на кнопке Опции, в диалоговом окне Параметры сохранения результатов из формы (Options for Saving Results of Form) ознакомьтесь с параметрами
сохранения результатов на различных вкладках. Нажав клавишу Esc, закройте окно Параметры сохранения
результатов из формы (Options for Saving Results of Form). Щелкнув на кнопке OK, завершите просмотр и
редактирование свойств формы ( рис. 19).
4. Задайте фон созданной странице, для чего, выбрав в меню Формат команду Фон, в диалоговом окне
Свойства страницы (Page Properties) установите флажок Фоновый рисунок. Щелкните на кнопке Обзор, в окне
Выберите фоновый рисунок найдите файл рисунка и щелкните на кнопке Открыть. Щелкнув на кнопке ОК, примените
выбранный фон.
5. Сохраните созданную web-страницу с формой, выбрав команду Файл ► Сохранить как и
присвоив имя, например page_forml.htm. Для проверки действия созданной формы переключите FrontPage в
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 89 из 109
режим Просмотр. Введя данные в форму, щелкните на кнопке Отправить.
6. Закройте окно FrontPage.
СРСП № 9. Использование фреймов
Фреймы (frames) — это прямоугольные области на web-странице, в которых демонстрируются другие
страницы или изображения.
Фреймы можно использовать там, где часть содержимого web-сайта должна оставаться постоянной, а часть
содержимого должна меняться. Один из наиболее распространенных случаев использования фреймов — webсайт, в верхней части которого располагается логотип компании, а на остальном пространстве находится панель
навигации и информационная часть текущей области сайта. Другим часто встречающимся вариантом применения
фреймов являются списки продукции: сам список располагается в левом фрейме страницы, а фрейм с правой
стороны содержит описание каждого вида продукции. Содержимое страницы в левом фрейме остается
неизменным, поскольку список продукции должен постоянно присутствовать на экране, а страницы в правом
фрейме меняются в соответствии с тем, какой продукт выбран в левом.
Вы можете связать каждую ссылку из левой части страницы с целевым фреймом (target frame). В данном
случае им является правый фрейм. Когда пользователь щелкнет на ссылке в левом фрейме, в целевом фрейме с
правой стороны страницы появится соответствующая страница.
Используя фреймы, позволяющие разбивать web-страницы на множественные прокручиваемые подокна,
вы можете значительно улучшить внешний вид и функциональность информационных систем и web-приложений.
Каждое подокно, или фрейм, имеет следующие свойства:
 каждый фрейм имеет свой URL, что позволяет загружать его независимо от других фреймов;
 каждый фрейм имеет собственное имя (параметр NAME), позволяющее переходить к нему из
другого фрейма;
 размер фрейма может быть изменен пользователем прямо на экране при помощи мыши (если это не
запрещено указанием специального параметра).
Данные свойства фреймов позволяют создавать продвинутые интерфейсные решения, такие как:
 размещение статической информации, которую автор считает необходимым постоянно показывать
пользователю, в одном статическом фрейме; это может быть графический логотип фирмы, набор
управляющих кнопок;
 размещение в статическом фрейме оглавления всех или части web-документов, содержащихся на webсервере, что позволяет пользователю быстро находить интересующую его информацию;
 создание окон результатов запросов, когда в одном фрейме находится собственно запрос, а в другом
результаты запроса;
 создание форм типа «мастер-деталь» для web-приложений, обслуживающих базы данных.
Информация о фреймах, составляющих web-страницы, хранится в отдельной странице, называемой
фреймсет (frameset). Эта информация отправляется серверу для загрузки в браузер соответствующих
файлов. Редактор FrontPage выводит все части фреймсета на одной странице так, как фреймы будут
отображаться в браузере. Таким образом, в редакторе можно создавать, редактировать и просматривать страницы
фреймов в режиме WYSIWYG, что весьма облегчает их разработку — ведь раньше над каждой страницей
приходилось работать отдельно, и результат своей деятельности можно было увидеть только в браузере.
Используя Front Page, создать web-узел газеты «Школьное время» с применением фреймов.
1. Запустите FrontPage. Выбрав в меню Файл команду Новый ► Страница или Web ► Шаблон
Страницы (File ► New ► Page ► Page Templates), в окне Шаблон Страницы (Page Templates) на вкладке
Страницы Фреймов (Frame Pages) выберите Banner and Contents (Шаблон web-узла из трех фреймов с
баннером и панелью навигации). Просмотрите в правой части окна пример структуры страницы и щелкните на
кнопке ОК.
В окне редактора FrontPage будет отображена структура из трех фреймов. Обратите внимание на
изменение значков режимов работы редактора с фреймовой структурой: добавились значки Нет фреймов (No
Frames) - для просмотра страниц без поддержки фреймовой структуры и Страница фреймов HTML (Frames
Page HTML) - для редактирования страницы фреймсет, которой по умолчанию уже присвоено имя
new_l.htm, как показано на рис. 20.
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 90 из 109
Рис.20. Структура из трех фреймов в окне редактора FrontPage
В каждой заготовке фрейма в окне редактора отображаются две кнопки: Set Initial Раде (Указать
страницу для отображения в данном фрейме) и New Page (Новая страница). При наличии заготовленной
страницы для отображения в данном фрейме достаточно щелкнуть на кнопке Set Initial Page, а затем в окне
Выберите файл выбрать нужную папку и файл web-страницы для размещения во фрейме.
2. Так как у нас нет подготовленных заранее страниц, создайте новую страницу в каждом фрейме,
щелкнув на кнопке Новая страница (New Page). При этом каждой странице присваивается имя по
умолчанию: new_2.htm, new_3.htm, new_4.htm.
ПРИМЕЧАНИЕ. В локализованной версии Microsoft FrontPage 2002 фреймы при переводе на русский язык названы кадрами.
3. Выберите для редактирования фрейм баннера в верхней части страницы с именем new_2.htm, для чего
щелкните мышью в области этого фрейма.
Вставьте в этот фрейм таблицу из двух строк и столбцов, выбрав команду Таблица ► Вставить ► Таблица
(Table ► Insert ► Table). В окне Вставка таблицы (Insert Table) задайте следующие параметры: Строк
(Rows) — 2, Столбцов (Columns) — 2, Толщина рамки (Border size) — 0 — и щелкните на кнопке ОК.
Введите в правую ячейку в верхней строке таблицы текст Школьное время и выберите на панели Форматирование в
поле Стиль вариант Заголовок 1.
4. Вставьте в левую верхнюю ячейку таблицы рисунок, выбрав Вставка ► Изображение ► Из файла
(Insert ► Picture> From File). В окне Изображение выберите папку и файл изображения и щелкните на
кнопке Вставить (Insert). Объедините ячейки в левом столбце, выделив эти ячейки и выбрав команду
Таблица ► Объединение ячеек (Table ► Merge Cells).
Введите в правую нижнюю клетку информацию о контактах — адрес, телефон, адрес электронной
почты, например: г. Воронеж, ул. Березовая роща. 54, тел. 52-90-47, cie@vrn.fio.ru.
Задайте тексту заголовка Школьное время динамический эффект, выбрав команду Формат ►Эффекты
динамического HTML (Format ► Dinamic HTML Effect), выберите событие — Загрузка страницы (Page
load), эффект — Волна (Wave). Закройте панель инструментов Эффекты DHTML.
5. Измените оформление страницы с помощью темы, для чего выберите команду Формат ► Тема (Format
► Theme). Чтобы изменение оформления касалось только данной страницы, в диалоговом окне Тема установите
флажок Выбранная страница (Selected page), затем в списке тем выберите подходящую тему, например
Рисовая бумага (Rice Paper).
а) При желании модифицировать выбранную тему щелкните на кнопке Изменить (Modify). Щелкнув на
кнопке Цвет (Colors), откройте окно Изменение темы (Modify Theme), выбрав вкладку Цветовая схема
(Color Schemes), измените схему. Выбирая другие вкладки, поэкспериментируйте с цветами темы и завершите
выбор, щелкнув на кнопке ОК.
б) Щелкнув на кнопке Графика (Graphics), откройте вкладку Изображение (Picture). Выбирая нужный
элемент темы, просматривайте образец оформления web-страницы в поле Образец Темы (Sample of Theme).
Завершите выбор щелчком на кнопке ОК.
в) Щелкнув на кнопке Текст (Text), откройте окно модификации текста в данной теме. Выбирая
элемент текста в списке Пу н кт (Item), измените его шрифт в списке Шрифт (Font) и просмотрите
изменения в поле Образец Темы (Sample of Theme). Завершите модификацию текстовых элементов темы,
щелкнув на кнопке ОК. Щелкнув на кнопке Изменить (Modify), завершите изменения темы.
Если изменения, внесенные вами в тему оформления, оказались неудачными, отмените их, нажав
комбинацию клавиш Ctrl+Z, и повторите изменения темы.
6. Выберите для редактирования фрейм в левой части страницы. Введите текст заголовков-ссылок на
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 91 из 109
разделы газеты, например:
Новости
Администрация
Учительская
Переменка
Авторам
Редколлегия
7. Для создания гиперссылки на web-страницу выделите текст ссылки, например Новости, и щелкните на
кнопке Гиперссылка (Hyperlink). В окне определения параметров гиперссылки щелкните на кнопке Создать новый
документ, в поле Имя нового документа (Name of new document) введите имя новой страницы. Щелкнув на
кнопке Target Frame (Целевой фрейм), в окне Выходной кадр укажите мышью фрейм, в котором следует
отображать данную web-страницу, как показано на рис. 21, и щелкните на кнопке Да (ОК).
Рис. 21. Выбор фрейма для отображения страницы
Введите в новую страницу в окне редактора текст, например:
«Новости.
Выпущен первый номер газеты, приглашаем к сотрудничеству авторов.
Редколлегия.»
Сохраните web-страницу, выбрав команду Файл ► Сохранить как. В окне Сохранить как введите имя
страницы, например news .htm, и щелкните на кнопке Сохранить (Save).
Аналогично создайте ссылки с новыми страницами на остальные заголовки разделов газеты. Затем
отформатируйте текст, вставьте рисунки, задайте фон. После этого web-страница в окне редактора FrontPage
будет выглядеть, как показано на рис. 22.
Рис. 22. Вид web-страницы с фреймами в окне FrontPage
9. Сохраните созданную web-страницу, выбрав команду Файл ► Сохранить. Для проверки действия
созданной web-страницы с фреймами переключите FrontPage в режим Просмотр.
10. Просмотрите HTML-код страницы фреймсет, для чего переключите FrontPage в режим Страница
фреймов HTML. Изучите текст, попробуйте объяснить строки:
<frameset rows=«85.*»>
<frame name=«banner» scrolling=«no» noresize target=«contents» src=«School.htm>»
<frameset cols=«155,*»>
<frame name=«contents» target=«main» src=«menu.htm»>
<frame name=«main» src=«news.htm» scrolling=«auto» target=«_self» noresize>
</frameset>
11. Переключите FrontPage в режим Нормальный. Для редактирования свойств укажите страницу и в
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 92 из 109
контекстном меню выберите команду Свойства страницы (Page Properties).
а) В диалоговом окне Свойства страницы (Page Properties) на вкладке Общие (General) в поле
Заголовок (Title) введите название страницы, выберите в списке поля Целевой Фрейм по умолчанию
(Default target frame) фрейм, в котором открывается данная страница.
б) При желании задать музыкальный фон щелкните на кнопке Обзор (Browse) в разделе
Музыкальный фон (Background sound) и выберите музыкальный файл, воспроизводящийся при отображении
данной страницы.
в) На вкладке Язык (Language) выберите язык и т. п. Щелкнув на кнопке ОК, закройте окно
изменения свойств страницы.
12. Для редактирования свойств фрейма укажите фрейм и выберите в контекстном меню команду
Свойства кадра (Frame Properties). Например, щелкнув на кнопке Browse, в списке поля Initial page
выберите страницу для отображения в данном фрейме. Сняв флажок Resizable in Browser (Изменяемый
размер в Окне просмотра), вы можете запретить прокрутку в данном фрейме и т. п.
13. Сохраните изменения и, переключив FrontPage в режим Просмотра, просмотрите изменения в
отображении web-страницы.
14. Закройте окно FrontPage.
СРСП № 10. Публикация web-сайта в сети Интернет
Итак, применяя знания и практические навыки, полученные при изучении предыдущих глав, вы создали
web-сайт. Но пока он существует на жестком диске вашего компьютера и недоступен для просмотра из
Интернета. Назрела необходимость разместить ваш сайт на каком-нибудь web-сервере.
1. Откройте себе почтовый ящик, так как при регистрации на web-сервере вы должны будете указать свой
адрес электронной почты. В Приложении 4 приведен список серверов, предоставляющих бесплатный
почтовый ящик. Найдите место для вашего сайта. В Глобальной сети существует большое количество webсерверов, предоставляющих услуги по размещению web-сайтов. Причем многие это делают бесплатно. Бесплатно
в данном случае означает, что на вашем сайте будет постоянно присутствовать реклама. Список таких серверов
приведен в Приложении.
2. Для переноса файлов с вашего компьютера нa web-сервер понадобится какой-нибудь FTP-клиент.
ПРИМЕЧАНИЕ. На некоторых серверах можно обойтись и без FTP-клиента, так как для операций с файлами они имеют
встроенные средства для управления файлами. Например, популярный сервер www.narod.ru имеет специальный файл-менеджер
для загрузки сайта на web-сервер.
3. Для повышения посещаемости сайта зарегистрируйте его в поисковых системах.
СОВЕТ. При создании сайта нужно подготовить свои страницы для их успешного индексирования поисковыми машинами, чтобы
на соответствующий запрос поисковой машины ссылка на вашу страницу находилась как можно ближе к началу списка ссылок.
Для этого на ваших web-страницах необходимо указать содержательный заголовок (title), ключевые слова (keywords) и описание
(description).
СРСП № 11. Регистрация web-сайта, его публикация в сети Интернет, регистрация в поисковых системах
Шаг 1. Найти сервер, позволяющий бесплатно разместить сайт, и зарегистрироваться на нем.
1. Для поиска серверов, позволяющих бесплатно разместить ваш сайт, запустите web-обозреватель,
например Microsoft Internet Explorer, перейдите на web-сайт поисковой системы, например www.aport.ru, и
задайте образ поиска Бесплатный хостинг. По результатам поиска вы увидите, что таких серверов сотни.
Какой из них выбрать? При выборе хостинга (то есть места размещения вашего сайта) надо учесть
несколько важных параметров:
• скорость и надежность работы сервера;
• способ загрузки на сервер: по протоколу HTTP, FTP или по адресу электронной почты;
• возможность размещения CGI, SSI и других сценариев, выполняемых на сервере;
• физическое расположение сервера — удаленность сервера оказывает сильное влияние на скорость;
• многие серверы очень любят вставлять свою рекламу в сайты.
Рассмотрим пример с регистрацией и размещением вашего сайта на сервере http://www.narod.ru/ — одном
из популярных серверов, бесплатно предоставляющем всем желающим неограниченное дисковое
пространство для размещения сайтов, ftp-доступ и доменное имя вида name.narod.ru. Кроме этого, есть
возможность завести себе электронный ящик с адресом name@narod.ru. Можно построить сайт по
шаблонам, которых более 100, предоставляются шаблонные гостевые книги, форумы, чаты, дизайн которых
можно полностью изменять. К ограничениям этого сервера относится запрет на использование CGI и SSI.
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 93 из 109
Рис. 1. Заполнение регистрационной анкеты
ВНИМАНИЕ. Особое внимание обратите на раздел соглашения, в котором требуется ваше согласие не использовать
предоставляемые вам возможности для перечисленных в соглашении целей.
2. Загрузите сайт http://www.narod.ru/ и, щелкнув на ссылке Что здесь дают, познакомьтесь с
бесплатными услугами на данном сервере. Чтобы воспользоваться этими услугами, необходимо
зарегистрироваться, то есть заполнить анкету, поэтому после просмотра информации щелкните на кнопке
Зарегистрироваться.
3. Для ознакомления с условиями использования бесплатной услуги щелкните на кнопке Пользовательское
соглашение. Внимательно изучите текст соглашения, описание услуг, ваши обязательства.
4. После изучения соглашения закройте окно web-обозревателя с текстом соглашения и заполните бланк
регистрационной анкеты (рис. 1). После заполнения бланка щелкните на кнопке Зарегистрироваться. Если введенное вами имя на сервере уже занято, на экран выводится сообщение Логин уже занят: Введенный вами логин уже
занят на Яндексе. Попробуйте ввести другой.
ВНИМАНИЕ. Все поля, отмеченные *, обязательны для заполнения
Щелкнув на ссылке Вернуться к редактированию, введите новое имя (логин), введите пароль, отредактируйте
записи во всех полях и щелкните на кнопке Зарегистрироваться.
5. На следующем шаге регистрации введите имя вашего сайта и щелкните на кнопке Сохранить, как
показано на рис. 2. После успешной регистрации в окне web-обозревателя выводится подтверждение.
Рис. 2. Выбор имени бесплатного почтового ящика
6. Для входа на сервер в качестве зарегистрированного пользователя и выбора имени вашего сайта
на www.narod.ru введите в поле Логин в окне Вход зарегистрированное имя, а в поле Пароль укажите пароль и
щелкните на кнопке Войти, как показано на рис. 3. На следующем шаге введите имя вашего сайта (можно
оставить по умолчанию ваше зарегистрированное имя), установите флажок Подписаться на общие новости сайта
или Подписаться на анонсы "Народной газеты" и щелкните на кнопке Сохранить.
Рис. 3. Вход пользователя на сервер
7. После окончания регистрации сайта в окне web-обозревателя выводится подтверждение. Если нужно
изменить настройки доступа, щелкните на ссылке Изменить настройки доступа, ознакомьтесь с различными
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 94 из 109
вариантами настроек доступа, выберите подходящий, подтвердите изменения вводом пароля и щелкните на
кнопке Сохранить.
8. Для изменения настроек почты щелкните на ссылке Настройки Почты, измените настройки и щелкните на
кнопке Сохранить изменения. Итак, регистрация завершена. Теперь для входа на сервер www.narod.ru в качестве
зарегистрированного пользователя вы можете выбирать в окне Вход варианты: Мой сайт, Моя мастерская, Моя
почта, Мои сообщества и т. п. Как показано на рис. 4, в разделе Моя мастерская для пользователей
предоставляется ряд дополнительных возможностей по управлению своим сайтом на данном web-сервере.
Рис. 4. Инструменты мастерской для зарегистрированных пользователей
Шаг 2. Разместить на сервере www.narod.ru ваш сайт.
1. Вы можете создать сайт, используя возможности раздела Моя мастерская на сервере www.narod.ru,
для чего в разделе Редактирование и управление щелкните на ссылке Управление файлами. Откроется окно
файл-менеджера, показанное на рис. 5.
Рис. 5. Инструменты файл-менеджера на сервере www.narod.r
Кнопки-инструменты в окне файл-менеджера предназначены для операций с файлами web-страницы:
создания, редактирования, копирования, переименования и перемещения, удаления и т. п.
2. Для загрузки файлов вашего сайта с использованием файл-менеджера сервера www.narod.ru перейдите
в раздел Загрузка файлов. Щелкнув на кнопке Обзор, в окне Выбор файла выберите папку, файл и щелкните
на кнопке Открыть. Имя выбранного для загрузки файла отобразится в поле слева от кнопки Обзор, как показано
на рис. 5. Действуя аналогично, выберите имена загружаемых файлов (всего за один сеанс загрузки файлменеджер позволяет загрузить до 10 файлов). После того как список загружаемых файлов сформирован,
щелкните на кнопке Загрузить файлы. Начнет выполняться процедура загрузки, а по ее окончании будет выведено
сообщение о том, что файлы загружены.
3. Теперь над файлами в вашем каталоге на сервере вы можете выполнять операции с использованием
файл-менеджера. Для этого установите флажки слева от имени выбранных файлов, а затем щелкните на кнопкекоманде, например Удалить. На экран будет выведено окно с сообщением файл-менджера, требующее
подтверждения операции удаления. Щелкнув на кнопке Да, подтвердите удаление, после чего помеченные вами
файлы будут удалены.
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 95 из 109
4. Щелкнув на ссылке Проверка свободного места, проверьте, сколько места занято файлами вашего webсайта и сколько свободно. С помощью кнопки Назад возвратитесь в окно операций с файлами файл-менеджера
ww.narod.ru.
5. Для загрузки файлов на FTP-сервер ftp.narod.ru удобно использовать FTP-клиент Windows
Commander.
Для настройки FTP-клиента Windows Commander для операций с файлами зарегистрированного на
www.narod.ru web-сайта с именем www.Internet-edul.narod.ru запустите Windows Commander и в меню
Команды выберите команду FTP-Соединение. В окне Соединение с FTP-Сервером щелкните на кнопке Новое
соединение и в окне FTP: Свойства соединения введите параметры соединения, как показано на рис. 6.
Рис. 6. Настройка FTP-соединения
6. Для перехода в нужный каталог щелкните на нем мышью. Все операции с файлами и папками на FTPсервере (копирование, переименование, удаление и т. д.) производятся так же, как обычные операции с файлами
и папками в Windows Commander.
7. Для соединения с FTP-сервером выберите в окне Соединение с FTP-Сервером строку Соединение
Internet-edu1 с сервером и щелкните на кнопке Соединиться. После этого выполняется соединение с сервером
с проверкой доступа, а на экране отображается процедура аутентификации, как показано на рис. 7.
Рис. 7. Сообщение о процессе FTP-соединения
ВНИМАНИЕ. Особенно внимательно вводите данные о сервере ftp.narod.ru, имя web-ресурса Internet-edul, точное значение
пароля. В поле Локальный каталог вы можете задать расположение папок и файлов web-сайта на вашем компьютере, в поле
Наименование можете записать название данного соединения, например Соединение Internet-edul с сервером. Завершите
настройку, щелкнув на кнопке ОК. После этого в окне Соединение с FTP-Сервером появится запись о новом, только что
созданном вами соединении.
После соединения с FTP-сервером в окне Windows Commander будут представлены ресурсы FTPсервера в виде дерева каталогов и файлов.
8. Для копирования файлов на FTP-сервер откройте на соседней панели диск и папку-приемник
файлов. Выделив файлы для копирования, нажмите клавишу F5. После этого начнется процесс копирования
папок и файлов с компьютера на FTP-сервер. По окончании копирования на FTP-сервере будут размещены
папки и файлы вашего web-сайта. Для завершения сеанса связи с FTP-сервером щелкните на кнопке Отключиться
на панели инструментов Windows Commander.
10. Закройте окно Windows Commander.
11. Проверьте работу вашего сайта, введя в строке Адрес web-обозревателя адрес вашего сайта, в нашем
примере http://www.internet-edu1.narod.ru.
Шаг 3. Зарегистрировать ваш сайт в поисковых системах.
1. Для поиска серверов, позволяющих бесплатно разместить информацию о вашем сайте на поисковых
серверах, запустите web-обозреватель, например Microsoft Internet Explorer, перейдите на web-сайт
поисковой системы, например www.rambler.ru, и задайте образ поиска Бесплатный хостинг. По результатам
поиска вы увидите, что таких серверов сотни. Выберем из списка ссылок одну из страниц, например
http://submit.max.ru/ — автоматическая регистрация сайтов в русских каталогах и поисковых системах.
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 96 из 109
2. После загрузки главной страницы http://submit.max.ru/, щелкнув на ссылке Регистрируетесь,
перейдите к заполнению регистрационной формы. Щелкнув на ссылке Правила, познакомьтесь с правилами
участия в системе. Если вы согласны с правилами, щелкните на ссылке Регистрация. Далее в окне регистрации заполните все поля и щелкните на кнопке Регистрация. Если появилось сообщение, что пользователь с таким именем
для входа в систему уже зарегистрирован, попробуйте изменить имя, для чего, щелкнув на кнопке Назад на панели
инструментов web-обозревателя, отредактируйте регистрационные данные и опять щелкните на кнопке
Регистрация.
3. После успешной регистрации щелкните на ссылке Выбрать/Добавить/Удалить), введите псевдоним сайта
для данной системы, например Internet-edu1, и щелкните на кнопке Добавить.
4. Для добавления или изменения информации о сайте заполните поля регистрационной формы
информацией о вашем web-документе, как показано на рис. 8 (фактически в этой форме дублируется
информация, которая в вашем web-документе содержится в метатегах-описаниях).
Рис. 8. Пример заполнения формы для регистрации в поисковых системах
Для отправки данных в систему автоматической регистрации щелкните на кнопке Запомнить.
5. После отправки этих данных в бесплатную регистрационную систему откроются еще несколько диалоговых
окон, в которых вы должны сначала выбрать категории для вашего web-сайта в поисковых системах, затем
выполнить регистрацию в выбранных поисковых системах. При необходимости для отдельных поисковых систем
введите дополнительную информацию, например, выберите варианты предлагаемых счетчиков посещений и т. п.
По окончании регистрации будет выведено окно о завершении регистрации.
Через некоторое время на адрес электронной почты, который вы указали при регистрации, в нашем
примере Internet-edu1@yandex.ru, придет извещение из бесплатной регистрационной системы о результатах
регистрации и просьбой добавить в вашу web-страницу ссылку на эту систему примерно следующего
содержания:
«Здравствуйте, Петров Василий, Вы только что добавили новый сайт в систему free-submit.
Название сайта: Internet-edu1.
Мы будем Вам благодарны, если Вы разместите на просторах своего сайта маленькую кнопочку в любом
удобном для Вас месте, если это не противоречит концепции Вашего сайта:
<а href=http://1ps.ru/
target=_top><img src=http://l ps.ru/bann/bn8101.gif
border=0 width=88 height=31 alt=«Раскрути свою страничку Бесплатно:: 1ps.ru"></a>
или поставите текстовую ссылку: <а href="http://1ps.ru/" target="_top">
Качественная регистрация в 100+ РУССКИХ каталогах</а>
или выберете любую другую кнопочку по адресу: http://1ps.ru/bann/
Мы будем благодарны за любые предложения, высказанные по поводу того, какой Вы хотите видеть
систему free-submit, какие функциональные возможности Вам нужны для работы с нашей системой и для
более эффективной раскрутки.
Спасибо за внимание и за то, что вы пользуетесь нашей системой. Удачной вам рекламы!»
6.Через некоторое время можете проверить регистрацию, задав поиск вашего web- документа в
различных поисковых системах. Если в них ваш web-документ зарегистрирован, он будет найден.
Литература
1. Айзекс С. Dynamic HTML. Секреты создания интерактивных Web-страниц. — Киев: BHV, 2001.496 с.
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 97 из 109
Книга посвящена технологии Dynamic HTML, предназначенной для создания интерактивных webстраниц. Рассматривается значение объектной модели и каскадных таблиц стилей (CSS) для увеличения
скорости и удобства работы с web-страницами, использование языков программирования JavaScript, JScript,
VBScript, C++, Java для доступа к объектной модели документа. Отдельный раздел посвящен изложению
основ программирования сценариев. Большое внимание уделено новым элементам, предоставляемым в
распоряжение разработчиков технологией Dynamic HTML: HTML 4.0, и расширенной поддержке CSS,
динамическому изменению стиля и содержания документа, модели событий, web-страницам клиент-сервер,
внедрению в документ эффектов мультимедиа и анимации.
2. Браун М. Использование HTML 4. Специальное издание. Компетентно. Исчерпывающе.
Убедительно. — Киев: Диалектика, 1999. — 784 с.
В книге отражены последние достижения в области дизайна web-страниц. Здесь также рассмотрены такие
средства, как ХМL, JavaScript, VBScript, VRML и другие инструментарии и языки создания web-страниц.
3. Матросов А., Сергеев А., Чаунин М. HTML 4.0. Наиболее полное руководство.- СПб.: BHV, 1999. 672 с.
Представлен весь спектр технологий создания web-документов (начиная от простейших — статических
— до документов на основе динамического HTML), включая форматирование текста, создание списков,
таблиц, форм, применение графики, каскадных таблиц стилей, встраивание различных объектов, использование
средств интерактивного общения с пользователем, баз данных, мультимедиа-объектов и пр. Рассматриваются
объектно-ориентированные технологии и программирование на языке Perl, а также создание CGI-программ и
написание сценариев на языках JavaScript и VBScript. Приводятся сведения о браузерах Netscape
Communicator и Microsoft Internet Explorer и таблице HTML-тегов.
4. Паттерсон Луиза. Использование HTML 4. — М.: Вильяме, 1999. — 400 с.
Прочитав несколько первых глав этой книги, вы сможете сами создавать простые, но пригодные для
использования web-страницы. Из последующих глав вы узнаете, как добавлять графику в интерактивные элементы,
а также как планировать композицию. Кроме того, здесь рассматриваются современные технологии,
применяемые в Web, XML, динамический HTML, ActiveX, JavaScript и др. Книга рассчитана на широкий
круг читателей.
5. Вайскопф.Дж. Microsoft FrontPage 2000. Учебный курс. — СПб.: Питер, 2000. -352 с.
Microsoft FrontPage 2000 — это новый мощный и удобный интегрированный инструмент,
позволяющий создавать профессионально оформленные web-узлы и не требующий от вас знания HTML или
Java. Прочитав эту книгу, вы научитесь проектировать web-страницы, форматировать текст, создавать и
проверять гиперссылки, использовать фреймы, вставлять иллюстрации, работать с формами, мастерами и
шаблонами и многому другому.
6. Джеймс Ф. Эффективная работа с Netscape Communicator 4 (компакт-диск). — СПб.: Питер, 1998. 784с.
Официальное руководство фирмы Netscape по новой версии популярного коммуникационного пакета
Netscape Communicator 4, в котором вы познакомитесь с особенностями браузера Navigator 4, научитесь
настраивать систему электронной почты и посылать письма, содержащие графику, анимацию и даже звук. Вы
узнаете, как подписаться на информационные каналы с помощью Netcaster; сможете обмениваться идеями и
информацией с коллегами в режиме реального времени, используя средства Conference, а также создавать
собственные web-страницы в Composer.
7. Шафран Энди. Создание Web-страниц. Самоучитель (компакт-диск). — СПб.: Питер, 2000. - 320 с.
Книга рассказывает о том, как «с нуля» создать собственную web-страницу, украсить ее графикой и
элементами мультимедиа, связать с другими ресурсами Интернета. Автор дает множество полезных советов по
дизайну страницы, от создания проекта до придания ему окончательного блеска, дает рекомендации по
привлечению посетителей, описывает приемы работы с различными программными инструментами.
Рассматриваются особенности языка HTML для двух популярных браузеров — Netscape Communicator и
Internet Explorer. Книга насыщена иллюстрациями и примерами. На прилагаемом компакт-диске вы найдете
обширную коллекцию изображений, примеры web-страниц, несколько популярных HTML-редакторов и
графических редакторов.
8. Белунцов В. Новейший самоучитель по созданию Web-страниц. — М.: ДЕССКОМ, 2000. - 448 с.
Эта книга поможет вам узнать все, что необходимо для самостоятельной разработки web-страниц, научиться
работать с необходимыми программами, создавать интерактивные и динамические web-страницы любой степени
сложности, размещать свои работы в Интернете. Вы сможете научиться «читать» код web-страниц, принятых
из Интернета, освоить современные приемы и методы работы, применить полученные знания на практике,
почувствовать уверенность в завтрашнем дне. Рекомендуется для школьников, учащихся колледжей, техникумов,
вузов и самообразования.
9. Кирсанов Дмитрий. Веб-дизайн: книга Дмитрия Кирсанова. — М.: Символ-Плюс, 1999. - 376 с.
Книга Дмитрия Кирсанова — первый полный курс web-дизайна на русском языке, написанный
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 98 из 109
профессиональным дизайнером. От теоретических основ визуального дизайна до интернетовских технологий и
приемов практической работы над сайтом — все это есть в книге, написанной понятно, подробно и увлекательно. Издание будет полезно не только начинающим создателям сайтов, но и дизайнерам, работающим в более
традиционных областях, специалистам по рекламе и маркетингу, художникам, программистам.
10. Миронов Д. Создание Web-страниц в MS Office 2000. - СПб.: BHV, 2000. - 312 с.
Книга представляет собой учебное пособие по работе с программными инструментами, интегрированными
в офисный пакет MS Office 2000, общее назначение которых — подготовка документов для публикации в
информационных сетях, обслуживаемых серверами Web (Интернет и интранет). Обсуждаются вопросы
организации документов Web, страниц Web и более крупных информационных ресурсов — узлов Web.
Отдельные главы книги посвящены инструментам и приемам подготовки документов и страниц Web с
помощью основных приложений, входящих в состав MS Office 2000: MS Word, MS Excel, MS PowerPoint,
MS Access, MS FrontPage. Рассматриваются подробные практические примеры и предлагаются вопросы для
самопроверки. Книга рекомендована в качестве пособия по учебному курсу подготовки публикаций в Web
студентам вузов различного профиля, а также как руководство для самостоятельного изучения.
11. Мэтьюз и др. FrontPage 2000: для пользователя. — Киев: BHV, 1999. — 336 с.
Книга представляет собой пособие для самостоятельного освоения приемов работы с популярным
средством создания web-узлов Microsoft FrontPage 2000. Она содержит описания всех средств, необходимых
для быстрого и грамотного построения web-узлов: мастеров, шаблонов, таблиц, кадров, форм, FrontPageкомпонентов, средств импортирования, тем, каскадных таблиц стилей и т. д.
12. Дейв Браун, Винсент Фримен, Блейк Бенет Холл. Adobe. Web-дизайн и публикация. – М.:
ДиаСофт, 1998. – 656 с.
В книге описаны возможности публикации web-документов с помощью программ фирмы Adobe. Эта
книга предназначена для пользователей, желающих создать несколько страниц или спланировать весь узел.
Команда талантливых авторов книги, являющихся специалистами в области инструментальных средств фирмы
Adobe, делится знаниями и умениями, основанными на опыте создания как традиционных, так и Web
публикаций, сосредоточившись при этом на специфических проблемах и противоречиях, с которыми
сталкиваются сегодня web-дизайнеры.
Планы занятий в рамках самостоятельной работы студентов
СРС № 1. Создание простейших файлов HTML.
Цель:
1. Научиться работать с тегами.
2. Научиться управлять расположением текста в документе.
Задание 1. Создание простейших файлов HTML
1. Создайте в своем каталоге папку KURS, в которой мы будем сохранять сконструированные Webстраницы.
2. Запустите программу Блокнот (Notepad).
3. Наберите в окне редактора простейший текст файла HTML:
4. Сохраните файл под именем RASP.HTM.
5. Для просмотра созданной Web-страницы загрузите браузер Microsoft Internet Explorer.
6. Выполните команду Файл (File), Открыть (Open), Просмотр (Обзор, Browse), найдите в папке KURS
файл RASP.HTM и загрузите его. Убедитесь, что название Web-страницы (“Учебный файл HTML”)
отразилось в верхней, статусной, строке браузера.
На экране вы увидите результат своей работы, изображённый на рис.1.
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 99 из 109
Рис.1.
Задание 2. Управление расположением текста на экране.
1. При необходимости выполните пункты 5 — 6 задания 1.
2. Откройте первоисточник созданной вами Web-страницы, выполнив команду Вид (View), Источник (В
виде HTML). Откроется окно программы Блокнот, в котором ваша Web-страница будет представлена в
командах HTML.
3. Внесите изменения в текст файла HTML, расположив слова “Расписание”, “занятий”, “на вторник” на
разных строках:
4.Сохраните текст со внесенными изменениями в файле РRASP.HTM с помощью команды Файл (File),
Сохранить(Save). Закройте программу Блокнот.
5. Просмотрите с помощью браузера Microsoft Internet Explorer полученную Web-страницу, используя
клавишу F5 или команду Вид (View), Обновить (Refresh). Изменилось ли изображение текста на экране?
Примечание. В дальнейшем после внесения изменений в Web-страницу всегда выполняйте пункты 4 — 5
задания 2.
СРС № 2. Специальные команды форматирования
Ц е л ь : научиться управлять командами форматирования.
Задание. Некоторые специальные команды форматирования
Существуют специальные команды, выполняющие перевод строки и задающие начало нового
абзаца. Кроме того, имеется команда, которая запрещает программе браузера каким-либо образом изменять
форматирование текста и позволяет точно воспроизвести на экране заданный фрагмент текстового файла.
Тэг перевода строки <BR> отделяет строку от последующего текста или графики. Тэг абзаца <Р>
тоже отделяет строку, но еще добавляет пустую строку, которая зрительно выделяет абзац. Оба тэга
являются одноэлементными.
Использование тэгов перевода строки и абзаца.
1. Внесите изменения в текст файла HTML:
2. Сохраните текст со внесенными изменениями в файле RASP.HTM.
3. Просмотрите с помощью браузера Microsoft Internet Explorer полученную Web-страницу. Как изменилось
изображение текста на экране? Новая страница будет выглядеть так, как показано на рис.2.
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 100 из 109
Рис. 2
СРС № 3. Использование стилей заголовка.
Ц е л ь : научиться использовать стили заголовка.
Задание. Использование стилей заголовка.
Используется шесть тэгов заголовков (от <Н1> до <Н6>). Каждому тэгу соответствует конкретный
стиль, заданный параметрами настройки браузера.
1. Внесите изменения в файл RASP.HTM:
2. Просмотрите полученную Web-страницу.
На экране вы увидите то, что показано на рис. 3.
Рис.3.
СРС № 4. Установка размера текущего шрифта.
Ц е л ь : научиться устанавливаться размер текущего шрифта.
Задание1. Установка размера текущего шрифта.
Тэг шрифта <FONT> позволяет задавать размер текущего шрифта в отдельных местах текста в
диапазоне от 1 до 7.
1.Внесите изменения в файл RASP.HTM:
2. Самостоятельно измените размер шрифта для текста “занятий на вторник”, используя тэг <FONT>.
3. Измените оформление текста HTML-документа, используя тэг выделения фрагментов текста и тэг
перевода строки и абзаца.
СРС № 5. Установка гарнитуры и цвета шрифта.
Ц е л ь : научиться устанавливать гарнитуры и цвета шрифта.
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 101 из 109
Задание. Установка гарнитуры и цвета шрифта.
Гарнитура и цвет шрифта.
Тэг <FONT> предоставляет возможности управления размером, гарнитурой и цветом текста.
Изменение гарнитуры шрифта выполняется простым добавлением к тэгу <FONT> атрибута FACE.
Например, для изображения текста шрифтом Arial необходимо записать: <FONT FACE="ARIAL">.
Для изменения цвета шрифта можно использовать в тэге <FONT> атрибут COLOR="X".
Вместо Х надо подставить либо название цвета (в кавычках), либо его шестнадцатеричное
значение. При задании цвета шестнадцатеричным числом можно представить этот цвет разложенным на
три составляющие: красную (R — Red), зеленую (G — Green), синюю (В — Blue), каждая из которых имеет
значение от 0 до FF. В этом случае мы имеем дело с так называемым форматом RGB. Примеры записи
цвета в формате RGB приведены в Tаблице 1.
Таблица 1.
Запись цвета в формате RGB
RRGG
Цвет
RRGG
Цвет
BB
BB
Black
черный
000000
Purple
фиолетовый
FF00FF
While
белый
FFFFFF
Yellow
желтый
FFFF00
Red
красный
FF0000
Brown
коричневый
996633
Green
зеленый
00FF00
Orange
оранжевый
FF8000
Azure
бирюзовый
00FFFF
Violet
лиловый
8000FF
Blue
синий
0000FF
Gray
серый
А0А0А
0
1. Внесите изменения в файл RASP.HTM:
2. Самостоятельно измените размер, цвет, гарнитуру, стиль текста документа
СРС № 6. Выравнивание текста по горизонтали.
Ц е л ь : научиться выравнивать текст по горизонтали.
Задание. Выравнивание текста по горизонтали.
Внесите изменения в файл RASP.HTM:
На экране вы увидите то, что показано на рис. 4.
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 102 из 109
Рис. 4
СРС № 7. Задание цвета фона и текста
Ц е л ь : научиться задавать цвета фона и текста
Задание. Задание цвета фона и текста
При изображении фона и текста браузеры используют цвета, установленные по умолчанию, — они
заданы параметрами настройки браузера. Если вы хотите задать другие цвета, то это надо сделать в начале
файла HTML в тэге <BODY>. Атрибут BGCOLOR= определяет цвет фона страницы, ТЕХТ= задает цвет
текста для всей страницы, LINK= и VLINK= определяют цвета соответственно не просмотренных и
просмотренных ссылок (последние два параметра будут рассмотрены позже).
Внесите изменения в файл RASP.HTM:
СРС № 8. Размещение графики на Web-странице.
Ц е л ь : научиться размещать графики на Web-странице.
Задание. Размещение графики на Web-странице.
Тэг <IMG> позволяет вставить в документ изображение. Оно появится в том месте документа, где
находится этот тэг. Данный тэг является одиночным. Графика в Web, как правило, распространяется в трех
форматах: GIF, JPG, PNG. При выполнении следующего задания будем считать, что графический файл
CLOCK.GIF хранится в рабочем каталоге KURS, где находится и наша Web-страница.
Внесите изменения в файл RASP.HTM:
На экране вы увидите то, что показано на рис.5.
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 103 из 109
Рис.5
Тэг <IMG> имеет немало атрибутов, описанных в таблице.2, которые можно задавать
дополнительно. Они могут располагаться в любом месте тэга после кода IMG.
Таблица 2
Атрибуты изображения
Атрибут Формат
Описание
ALT
<IMG
SRC="CLOCK.GIF" Задает текст, заменяющий изображение в том случае,если броузер не
ALT="картинка">
воспринимает это изображение
BORDER
<IMG
SRC="CLOCK.GIF"
Задает толщину рамки вокруг изображения. Измеряется в пикселях
BORDER="3">
ALIGN
Задает выравнивание изображения относительно текста:относительно
<IMG
SRC="CLOCK.GIF"
текста выровнена верхняя часть изображения - ТОР, нижняя - BOTTOM.
ALIGN=TOP>
средняя - MIDDLE
HEIGHT
<IMG
SRC="CLOCK.GIF"
Задает вертикальный размер изображения внутри окна броузера
HEIGHT=111>
WIDTH
<IMG
SRC="CLOCK.GIF"
Задает горизонтальный размер изображения внутри окна броузера
WIDTH=220 >
VSPACE
<IMG
SRC="CLOCK.GIF"
Задает добавление верхнего и нижнего пустых полей
VSPACE="8">
HSPACE
<IMG
SRC="CLOCK.GIF"
Задает добавление левого и правого пустых полей
HSPACE="8">
СРС № 9. Установка атрибутов изображения.
Ц е л ь : научиться устанавливать атрибуты изображения.
Задание 1. Установка атрибутов изображения.
Самостоятельно внесите изменения в файл RASP.HTM: опробуйте использование таких атрибутов
графики, как ALT, BORDER, HEIGHT, WIDTH.
Примечание. Всегда обращайте внимание на размер (объем в байтах) графического файла, так как
это влияет на время загрузки Web-страницы.
СРС № 10. Установка фонового изображения на Web-странице.
Ц е л ь : научиться установке фонового изображения на Web-странице.
Задание. Установка фонового изображения на Web-странице.
Фоновое изображение — это графический файл с изображением небольшой прямоугольной
плашки. При просмотре в браузере эта плашка многократно повторяется, заполняя все окно, независимо от
его размеров.
Графика, используемая в качестве фоновой, задается в тэге <BODY>.
Внесите изменения в файл RASP.HTM:
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 104 из 109
На экране вы увидите то, что показано на рис. 6.
Рис.6.
Графический файл fon1.GIF выглядит так, как показано на рис. 7.
Рис. 7
СРС № 11. Создание таблицы.
Ц е л ь : научиться создавать таблицы.
Задание. Создание таблицы.
Таблица является особой частью HTML-документа. Она представляет собой прямоугольную сетку,
состоящую из вертикальных столбцов и горизонтальных строк. Пересечение строки и столбца называется
ячейкой. Ячейка может содержать в себе текст, графику или другую таблицу.
Таблица состоит из трех основных частей:
• названия таблицы;
• заголовков столбцов;
• ячеек.
Таблица заполняется по строкам (слева направо — по строке, затем переход на следующую строку).
Каждая ячейка должна быть заполнена. Для создания пустых ячеек используются пробелы.
1. Запустите программу Блокнот.
2. Наберите следующий текст в окне редактора:
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 105 из 109
3. Сохраните файл под именем 5.НТМ.
4. Для просмотра созданной Web-страницы загрузите браузер Microsoft Internet Explorer.
На экране вы увидите то, что показано на рис. 8.
Рис.8
СРС № 12. Построение гипертекстовых связей
Ц е л ь : научиться построению гипертекстовых связей
Задание. Построение гипертекстовых связей
Важнейшим свойством языка HTML является возможность включения в документ ссылок на другие
документы.
Возможны ссылки:
— на удаленный HTML-файл,
— на некоторую точку в текущем HTML-документе,
— на любой файл, не являющийся HTML-документом.;
В качестве ссылки можно использовать текст или графику.
Ссылки в пределах одного документа
Такие ссылки требуют наличия двух частей: метки и самой ссылки. Метка определяет точку, на
которую происходит переход по ссылке. Ссылка использует имя метки. Ссылки выделяются цветом или
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 106 из 109
подчеркиванием, в зависимости от того, как настроен браузер. Для изменения цвета ссылки используется
атрибуты LINK= и VLINK= тэга <BODY>.
Опишем ссылку:
<A HREF="#ПН">Понедельник</А>
Перед именем метки (ПН), указывающей, куда надо переходить по ссылке, ставится символ #.
Между символами “>” и “<” располагается текст (“Понедельник”), на котором должен быть произведен
щелчок для перехода по ссылке.
Определим метку:
<A NAME="ПН">Понедельник</А>
1. Дополните файл 5.НТМ описанием таблицы, содержащей названия дней недели, поместив его в начало
Web-страницы:
2. Вставьте в файл 5.НТМ метку, указывающую на понедельник:
3. Вставьте в таблицу с названиями дней недели ссылку для выбранной метки:
4. Создайте таблицы расписаний для остальных дней недели.
5. Сохраните файл.
6. Просмотрите полученную Web-страницу.
На экране вы увидите то, что изображено на рис.9.
Рис. 9
СРС № 13. Создание ссылки на другой HTML-документ.
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 107 из 109
Ц е л ь : научиться создавать ссылки на другой HTML-документ.
Задание. Создание ссылки на другой HTML-документ.
Ссылки позволяют щелчком на выделенном слове или фразе перейти к другому файлу.
Опишем ссылку:
<А HREF="5.HTM">5 класс</А>
После имени файла (5.НТМ), между символами “>” и “<” располагается текст (“5 класс”), на
котором должен быть произведен щелчок для перехода к этому файлу.
1. Загрузите в браузер файл RASP.HTM.
2. Внесите изменения в файл:
3. Сохраните файл.
4. Просмотрите полученную Web-страницу.
На экране вы увидите то, что изображено на рис.10.
Рис.10
СРС № 14. Создание ссылки на другой HTML-документ
Ц е л ь : научиться создавать ссылки на другой HTML-документ
Задание. Создание ссылки на другой HTML-документ
1. Внесите изменения в файл 5.НТМ так, чтобы в конце страницы была ссылка на головную страницу
Расписание занятий 5 классов (файл RASP.HTM). В качестве ссылки используйте графический файл
следующим образом:
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 108 из 109
2. Просмотрите полученную Web-страницу.
На экране вы увидите то, что показано на рис.11.
Рис. 11
В качестве ссылки выступает рисунок (стрелка, направленная вправо и вверх), находящийся в
файле HOME.GIF.
СРС № 15. Выделение фрагментов текста.
Ц е л ь : научиться выделять фрагменты текста.
Задание. Выделение фрагментов текста.
1. Внесите изменения в файл RASP.HTM:
2. Просмотрите полученную Web-страницу.
Возможно использование комбинированных выделений:
Но при этом необходимо помнить следующее правило записи комбинированных тэгов:
<Тэг-1> <Тэг-2> ... </Тэг-2> </Тэг-1> — правильная запись;
<Тэг-1> <Тэг-2> ... </Тэг-1> </Тэг-2> — ошибочная запись.
Задание размера символов
Существуют два способа управления размером текста, изображаемого браузером:
— использование стилей заголовка;
— задание размера шрифта основного документа или размера текущего шрифта.
Использование стилей заголовка
Используется шесть тэгов заголовков (от <Н1> до <Н6>). Каждому тэгу соответствует конкретный
стиль, заданный параметрами настройки браузера.
УМКД 042-39.1.28/03-2013
Ред. № 1 от 18.09.2013г.
Страница 109 из 109
4.2. перечень тем рефератов для текущего и входного контроля знаний студентов (тесты,
вопросы коллоквиумов и т.д.) и др.
1. История гипертекста. Возникновение и развитие службы WWW. История браузеров.
2. Классическая архитектура службы WWW и ее составляющие.
3. Теговая модель. Группы элементов HTML.
4. Каскадные таблицы стилей CSS: стили и селекторы.
5. Методы позиционирования компонентов HTML-страниц: таблицы, фреймы, CSS.
6. Язык программирования Javascript: объектная модель.
7. Регулярные выражения.
8. Динамический HTML: программирование окон и фреймов, свойства документа, работа с формами.
9. Динамический HTML: доступ к элементам страницы, модификация элементов и их атрибутов, работа со
стилями.
10.Динамический HTML: обработка событий.
11.Применение XML и его преимущества. Эволюция XML.
12.Синтаксис и составные части XML-документов. Приложения XML.
13.Пространства имен XML. Описание типа документа DTD.
14.XML-схемы W3C.
15.XSLT: модель данных, процесс преобразования, шаблоны соответствия узлов.
16.Язык XPath.
17.Методики реализации XSLT-преобразований: инстанцирование шаблонов, циклы и условия.
18.XPath 2.0 и XSLT 2.0
19.Генерация HTML-страниц с помощью XSLT. Форматирующие объекты XSL.
20.Модели обработки XML-документов. Программный интерфейс SAX2.
21.Объектная модель документа. Потоковая модель документа.
22.Валидация, трансформация и серализация XML-документов в библиотеке JAXP.
23.XInfoset. XInclude. XQuery.
24.Связи в XML-документах: XLink, XPointer.
25.Безопасность XML-документов: цифровые подписи и шифрование.
26.Протокол HTTP. Механизм cookies.
27.Спецификация CGI. Конфигурирование веб-сервера Apache. Включения на стороне сервера SSI.
28.Сервлеты Java.
29.Серверные страницы Java. Фильтры.
30.Совместное использование сервлетов и серверных страниц. Библиотека JSTL.
31.Архитектура серверной части веб-приложения.
32.Технология Ajax: основные идеи и примеры реализации.
33.Безопасность веб-приложений: основные понятия и общие методы защиты, проблемы приведения к
каноническому виду.
34.Безопасность веб-приложений: кросс-сайтовые сценарии, протокол HTTPS.
35.Особенности организации процесса разработки веб-приложений.
36.Тестирование веб-приложений.
37.Виды веб-приложений. Приложения электронной коммерции.
38.Системы управления содержимым CMS. Основные задачи CMS.
39.Архитектуры, ориентированные на предоставление и использование услуг (SOA). Веб-сервисы как
реализация SOA
40.Протокол SOAP и язык WSDL.
41.Архитектурный стиль REST и веб-сервисы на его основе.
42.Основные концепции и технологии Semantic Web.