3 Свойства элементов HTML

Национальный технический университет Украины
"Киевский политехнический институт"
Информационные телекоммуникационные
платформы и стандарты Интернет
Методические указания к лабораторным работам.
Для студентов специальностей 6.0924, 7.092401, 7.092402
Составитель
АЛЕКСЕЕВ Николай Александрович
Киев 2006
5
СОДЕРЖАНИЕ
Введение ................................................................................................................... 7
1
Основы проектирования для WorLd Wide Web ......................................... 14
2
Использование тэгов форматирования текста ............................................ 20
3
Свойства элементов HTML - страниц ......................................................... 23
4
Проектирование таблиц ................................................................................ 28
5
Использование фреймов ............................................................................... 30
6
Применение Закладок и гиперссылок ......................................................... 32
7
Вставка рисунков и элементов мультимедиа .............................................. 34
8
Проектирование форм и элементов управления ........................................ 38
9
Изменение стандартных стилей и применение таблиц стилей ................ 41
10
Использование событий и методов ............................................................. 46
11
Программное изменение страниц ................................................................ 54
12
Использование фильтров .............................................................................. 58
13
Управление содержанием страницы ............................................................ 64
14
Диалоговые окна и формы............................................................................ 69
ВВЕДЕНИЕ
СРЕДА ПРОЕКТИРОВАНИЯ
Для создания и редактирования HTML-страниц может быть использован любой
текстовый редактор, например редактор «Блокнот». Однако более эффективным будет проектирование с помощью специализированных редакторов. В настоящее время на рынке программных продуктов имеется значительное число таких редакторов,
и одним из лучших среди них является редактор сценариев «Microsoft development
environment».
Ниже дается краткое описание среды проектирования и основных правил работы с редакторами «Блокнот» и «Microsoft development environment».
ТЕКСТОВЫЙ РЕДАКТОР «БЛОКНОТ»
Текстовый редактор «Блокнот» - это относительно простой редактор, используемый для создания, просмотра и редактирования текстовых файлов. Кроме того, его
часто используют для проектирования HTML-страниц.
Редактор «Блокнот» входит в состав стандартной поставки всех версий операционной системы Windows и обычно устанавливается при ее инсталляции. Чтобы
запустить редактор на исполнение, используют меню кнопки «Пуск» (команда
«Программы» - «Стандартные» - «Блокнот»).
Среда проектирования редактора имеет текстовую область, предназначенную
для создания текста, и командное меню, через которое можно обратиться к командам
редактора (рисунок 1).
Командное меню
Текстовая
область
проектирования
Рисунок 1- Текстовый редактор «Блокнот»
7
Текст набирается с помощью алфавитно-цифровых клавиш клавиатуры. Для
набора текста, состоящего только из прописных букв, необходимо один раз нажать
клавишу «Caps Look». Чтобы снова вернуться в режим набора строчных букв, клавишу «Caps Look» нажимают повторно. Кратковременный переход между режимами
набора символов осуществляется нажатием клавиши «Shift».
При наборе текста каждый символ вставляется в то место текстовой области,
которое отмечено положением курсора. Этим можно воспользоваться для выполнения простейшего редактирования текста – вставки пропущенных символов. Для
вставки символа в уже набранный текст необходимо переместить курсор в выбранное место и набрать на клавиатуре требуемый символ (курсор перемещается мышкой или клавишами управления курсором - «Home», «End», «Page Up», «Page
Down», стрелками вверх, вниз, влево, вправо. Для ускоренного перемещения курсора следует одновременно нажать одну из этих клавиш и клавишу «Ctrl»).
Другим простейшим способом редактирования текста является удаление символа. Для удаления символа достаточно нажать клавишу «Delete» (удаляется символ
справа от курсора) или «Backspace» (удаляется символ слева от курсора).
Чтобы редактировать сразу несколько символов, их нужно предварительно выделить в блок. Блок выделяют одним из двух способов: 1) удерживая нажатой клавишу «Shift», перемещают курсор от начала блока к концу блока с помощью клавиш
управления курсором или 2) перемещают курсор мышкой (при нажатой левой клавише мышки). Текст, выделенный в блок, можно: а) удалить (командой «Правка» «Удалить»); б) запомнить и удалить (командой «Правка» - «Вырезать»; в) просто запомнить (командой «Правка» - «Копировать»). Если текст запомнен, то его можно
вставить в место, указанное курсором, командой «Правка» - «Вставить». При этом
текст, предназначенный для вставки, может быть предварительно запомнен не только в текущей странице редактора «Блокнот», но и во многих других приложениях,
предназначенных для работы с текстами.
Названные команды, как и большинство других команд редактора, можно выполнить из командного меню или с помощью «горячих клавиш», т.е. клавиш, нажатие которых на клавиатуре приводит к выполнению соответствующей команды (ко-
манда «Удалить» - клавиша «Delete», «Вырезать» - одновременное нажатие клавиш
«Ctrl» и «X», «Копировать» - «Ctrl» и «C», «Вставить» - «Ctrl» и «V»). Назначение
«горячих клавиш» обычно указано в командном меню рядом с именем команды.
Помимо перечисленных команд командное меню содержит следующие основные команды, используемые при создании HTML-страниц:
—
«Правка» - «Отменить». Отменяет последнюю команду редактирования.
—
«Правка» - «Найти». Позволяет найти фрагмент текста по шаблону, задаваемо-
му в диалоговом окне команды.
—
«Правка» - «Заменить». Дает возможность заменить один или несколько одина-
ковых фрагментов текста по всей странице в соответствии с шаблонами для поиска и
замены, которые заданы в диалоговом окне команды.
—
«Файл – «Создать». Создает новую страницу. При этом если в редакторе уже
создана и редактируется страница, то выполнение команды прервет работу над
ней и будет предложено принять решение – продолжить работу с текущей страницей или создать новую, предварительно сохранив редактируемую или отказавшись от сохранения.
—
«Файл» - «Открыть». Открывает существующую страницу для редактирова-
ния. Для открытия HTML-страницы следует в диалоговом окне команды указать
тип файлов – «Все файлы» (если этого не сделать, то в диалоговом окне будут
отображаться имена только текстовых файлов).
—
«Файл» - «Сохранить». Сохраняет результаты редактирования страницы в
файл. При написании имени файла в соответствующем поле диалогового окна команды лучше использовать только цифры и строчные буквы латинского алфавита.
При создании HTML-страницы, кроме собственно имени файла, необходимо указать и его расширение (после имени файла набрать точку и три символа htm).
—
«Файл» - «Сохранить как…». Действие команды аналогично команде «Файл» -
«Сохранить», и, кроме того, имеется возможность сохранить страницу в файле с новым именем.
РЕДАКТОР СЦЕНАРИЕВ «MICROSOFT DEVELOPMENT ENVIRONMENT»
Редактор сценариев «Microsoft development environment» входит в интегриро9
ванный пакет «Microsoft Office» (начиная с версии 2000 года) и обычно устанавливается вместе с ним. Однако в связи с тем, что при инсталляции пакета команда для
запуска редактора сценариев не отображается в меню команд кнопки «Пуск», ее
необходимо внести туда самостоятельно. После этого редактор сценариев запускается обычным способом. Иначе редактор сценариев можно запустить из среды офисных приложений («Word», «Excel» и др.) с помощью команды «Сервис» - «Макрос»
- «Редактор сценариев» из меню команд приложения.
На рисунке 2 показан один из наиболее часто настраиваемых вариантов среды
проектирования редактора сценариев. Из рисунка видно, что с помощью вкладок
режимов среда проектирования редактора сценариев может быть настроена таким
образом, чтобы область проектирования являлась текстовой областью. При такой
настройке возможности для работы с текстами в обоих редакторах почти полностью
совпадают и при необходимости о них можно прочитать в предыдущем разделе.
Командное меню
Панель инструментов
Область
проектирования
(текстовая)
Вкладки
панелей
Вкладки
режимов
Окно
проекта
Окно
свойств
Рисунок 2 – Редактор сценариев
Помимо работы в текстовом режиме (для перехода в него используется вкладка
режимов «Source») редактор сценариев позволяет работать в режиме быстрого просмотра (вкладка режимов «Quick View») и визуального проектирования (вкладка режимов «Design»).
Режим быстрого просмотра удобен для проверки результатов проектирования
HTML-страниц, т.к. позволяет увидеть содержание страницы в том виде, в котором
оно отобразится в браузере. Кроме того, появляется возможность проконтролировать
действия, которые предусмотрены программным кодом страницы.
Проектируют внешний вид HTML-страницы обычно в режиме «Design». Здесь
можно написать и отформатировать тексты, внедрить и изменить размеры элементов
управления, внедрить и отобразить рисунки, помещаемые на страницу, и т.п. При
этом многие действия выполняются значительно быстрее, если использовать соответствующие команды среды проектирования.
Командное меню редактора содержит следующие группы команд:
—
File – группа стандартных команд приложений Microsoft Windows, предназна-
ченных для работы с файлами – создания файла новой страницы, открытия существующего файла, сохранения результатов проектирования и т.д.
—
Edit – команды редактирования, позволяющие удалять, копировать, вставлять,
находить и замещать отдельные разделы страницы, получать информацию об элементах, расположенных на странице, отменять и возвращать выполненные действия.
—
View - команды для управления внешним видом и содержанием окон и панелей
инструментов среды редактора сценариев. Основные из них:
- Project Explorer. Открывает/закрывает окно проводника проекта (окно
отображает названия загруженных в редактор страниц и может быть использовано для перехода между ними).
- Properties Window. Открывает/закрывает окно свойств (окно используется
для отображения и изменения свойств элементов, расположенных на
странице).
- Toolbox. Открывает/закрывает панель инструментов Toolbox (панель используется для вставки в страницу тэгов встроенных элементов управления).
- Toolbars. Открывает/закрывает и позволяет настроить панели инструментов Debug, Design, HTML, Standard, Window UI, каждая из которых содержит пиктограммы наиболее часто используемых команд.
1
1
—
Debug – команды отладки сценариев страницы, предназначенные для пошагово-
го исполнения программного кода, управления точками прерывания вычислительного процесса, просмотра результатов промежуточных вычислений и др.
—
HTML – команды, позволяющие вставлять в страницу стандартные тэги.
—
Table – команды создания и изменения свойств таблиц.
—
Format – команды форматирования текстовых разделов страницы.
—
Tools – группа команд для включения в проект динамических библиотек, эле-
ментов управления и других компонентов внешних приложений, а также для
настройки редактора сценариев.
—
Window – команды управления расположением окон открытых страниц в обла-
сти проектирования редактора сценариев.
—
Help – команды обращения к справочной системе редактора сценариев.
ЛАБОРАТОРНЫЕ РАБОТЫ
Целью выполнения работ является освоение методики применения стандарта
HTML 4.0 для WEB-проектирования.
В основе WEB-проектирования на базе HTML 4.0 лежит понятие о HTMLстранице – текстовом файле с расширениями .htm или .html, имеющем регламентированную структуру и разделенном на заголовок, который включает служебную информацию и содержательную часть, отображаемую на экране монитора в соответствии с помещенными в нее инструкциями и программным кодом. В связи с этим и
изучение методики проектирования начинается с рассмотрения основ создания
HTML-страниц:
—
формирования обязательных структурных элементов и задания их в текстовом
файле (работа 1 – «Основы проектирования для WORLD WIDE WEB»);
—
использования основных тэгов, определяющих формат текстов из содержатель-
ной части страницы (работа 2 – «Использование тэгов форматирования текста»; работа 3 –«Свойства элементов HTML-страниц»);
—
применения тэгов для включения в содержательную часть страницы элементов
оформления и управления (работа 4 – «Проектирование таблиц»; работа 5 – «Исполь-
зование фреймов»; работа 6 – «Применение закладок и гиперссылок»; работа 7 –
«Вставка рисунков и элементов мультимедиа»; работа 8 – «Проектирование форм и
элементов управления»).
Понимание основ HTML является необходимым для дальнейшего изучения Dynamic HTML-проектирования – технологии проектирования, дополняющей стандарт
HTML 4.0 возможностями динамического изменения содержания страницы (работа
9 - «Изменение стандартных стилей и применение таблиц стилей»; работа 10 – «Использование событий и методов»; работа 11 – «Программное изменение страниц»; работа 12 – «Использование фильтров»; работа 13 – «Управление содержанием страницы»)
и средствами создания и ведения диалога (работа 14 – «Диалоговые окна и формы»).
1
3
1
ОСНОВЫ ПРОЕКТИРОВАНИЯ ДЛЯ WORLD WIDE WEB
1.1 Цель работы
Изучение структуры HTML - страницы и основ проектирования для World Wide
Web.
1.2 Содержание работы
Структура HTML - страницы
HTML - страница - это обычный текстовой файл, который содержит набор инструкций для интерпретации внутри специально предназначенных программ - браузеров типа Internet Explorer,
Netscape Navigator и др. (см. п. 3.7 «Работа в сети Интернет»). После прочтения с сервера HTML страницы браузер, установленный на компьютере пользователя, получает содержащиеся в инструкциях указания по форматированию текста, отображению графических элементов, элементов
управления, других элементов, включенных в страницу, и приводит в соответствии с ними страницу к тому виду, который в конечном счете и отображается на экране монитора. Кроме того,
HTML – страница содержит исходные тексты специальных программ, записанных на языках программирования Java или Visual Basic, которые также могут выполняться с помощью браузера.
Тэги
Для того чтобы отличить инструкцию браузера от обычного текста, она заключается в угловые
кавычки. Такая, заключенная в кавычки часть HTML - страницы называется тэгом. Тэги обычно
записываются попарно: первый тэг определяет начало текста, с которого должны действовать содержащиеся в нем инструкции, и затем второй тэг, который указывает на окончание действия соответствующих инструкций. Внутри каждого из парных тэгов записывается имя, по которому он
отождествляется, и чтобы отличить конечный тэг от начального, в нем записывается знак «/»
(слэш), например:
<H1>ЗАНЯТИЕ 1</H1> - отобразить текст «ЗАНЯТИЕ 1», заключенный в парные тэги H1, как
заголовок первого уровня.
Кроме того, начальный тэг может содержать описание дополнительных свойств, уточняющих
действие инструкций. Если свойств несколько, то они отделяются друг от друга пробелом. Чтобы
указать свойство, сначала записывается его полное имя (иногда сокращенное), а затем после знака
равно значение, которое оно должно принять. Тип значения является символьным и поэтому лучше указывать его в одинарных (’) или двойных (”) кавычках (в некоторых случаях требуется записывать две открывающие и две закрывающие кавычки и тогда можно использовать совместно одинарные и двойные кавычки). Но не будет и ошибки, если при записи значения свойства, содержащего только символы английского алфавита, цифры или знак дефиса «-», кавычки будут опущены.
Примеры:
<H1 align=”center”>ЗАНЯТИЕ 1</H1> - расположить заголовок первого уровня по центру стра-
ницы;
<FONT color=red size=5>Тема лекции</FONT> - отобразить слова «Тема лекции» шрифтом крас-
ного цвета и размером 5.
Допускается одну пару тэгов заключать внутри другой пары. В этом случае инструкции внешней пары будут распространяться и на заключенную в нее внутреннюю пару. Например, следующие инструкции, указанные тэгами <U> (подчеркнутый шрифт), <B> (полужирное начертание):
<B><U>Тема лекции</U></B> ,
приведут к тому, что текст отобразится полужирными и подчеркнутыми буквами (Тема лекции).
При написании тэгов строчные и прописные буквы не различаются, перенос строки распознается как пробел, а несколько подряд записанных пробелов воспринимаются как один. В связи с
этим следующие записи являются равноценными:
<H1 align = center>ЗАНЯТИЕ 1</H1>
<H1 Align = CENTER>ЗАНЯТИЕ
1</H1>
<H1
Align
= CeNteR>ЗАНЯТИЕ
1</H1>
Скрипты
Скрипты представляет собой разновидность кода компьютерной программы, используемой для
придания динамики HTML-страницам. Такая программа обычно записывается в виде исходного
текста с использованием соответствующих диалектов языков Visual Basic (VB-скрипты) или Java
(Java-скрипты). Браузер воспринимает текст такой программы, интерпретирует его в команды компьютеру и позволяет таким образом реализовать различные сценарии работы со страницей.
Для включения скриптов в HTML-страницу предназначен специальный тэг <SCRIPT>. В качестве параметров этого скрипта задаются свойства, уточняющие язык, используемый для программирования сценариев. Следует также иметь в виду, что некоторые браузеры не могут реализовать
программный код, записанный с помощью скриптов, и выводят его как обычный текст. Поэтому
1
5
правильным будет записать содержимое тэга <SCRIPT> в виде комментария, который не станет
воспроизводиться в случае, если браузер не воспринимает записанный программный код, и в то же
время позволит реализовать предусмотренный сценарий в соответствующем браузере. Для комментирования программного кода здесь используется сочетание знаков «<!--» - в начале комментария и «-->» - в конце комментария.
В приведенном ниже примере показано, каким образом лучше всего включить в HTMLстраницу программный код сценария, написанного на диалекте языка Visual Basic (сценарий
предусматривает обработку события, происходящего при нажатии кнопки ButtonKI с помощью событийно - ориентированной процедуры ButtonKI_onclick):
<SCRIPT LANGUAGE=vbScript>
<!-Sub ButtonKI_onclick
Msgbox ("Кнопка нажата")
End Sub
-->
</SCRIPT>
Содержание страницы
Минимальная структура HTML - страницы включает следующие обязательные тэги (если они
отсутствуют, то браузер подставляет их автоматически):
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
Содержательная часть
</BODY>
</HTML>
Если с помощью любого текстового редактора создать файл с записью перечисленных
тэгов, вместо слов «Содержательная часть» привести, например, содержание текстовой части конспекта лекции и присвоить файлу расширение .htm, то такой файл начнет распознаваться браузером как страница HTML, его можно разместить на любом сайте и тогда он будет доступен всем
участникам сети Интернет.
Как видно из приведенной схемы, обязательная структура страницы включает две части – заголовок (заключен между тэгами HEAD) и тело (внутри тэгов BODY).
В тэге <TITLE>, записанном внутри заголовка, задается имя страницы. Оно отображается в
названии окна браузера, в котором выводится данная страница, и, кроме того, используется многими поисковыми системами Интернет для определения тематического содержания страницы при
поиске нужной информации.
Кроме тэга <TITLE>, в заголовке могут присутствовать и другие тэги. Это тэги: <BASE> - задает абсолютный адрес ссылок на URL; META – включает специальную информацию о редакторе,
в котором создавалась страница, о сроке ее действия и т.п.; LINK – содержит информацию о связях
страницы с другими страницами, а также и некоторые другие.
Часть документа, заключенная в тэг <BODY>, охватывает содержательную часть страницы.
Здесь размещается та информация, которая должна быть отображена на HTML - странице. Текст,
написанный здесь, будет отображаться в окне браузера с учетом тех инструкций, которые сформированы в тэгах или скриптах. При написании текста следует учитывать, что несколько подряд
написанных пробелов будут отображаться как один пробел. Чтобы задать пробел явно, следует использовать специальные инструкции. Например, записанный в тексте набор символов &nbsp будет
воспроизводиться как пробел, а если записать их несколько, разделив знаками «;», то можно задать
любой отступ (следующий набор символом отобразится как три расположенных последовательно
друг за другом пробела -   &nbsp). Кроме того, признак конца строки, который обычно
формируется в текстовых редакторах при нажатии на клавиатуре клавиши «Enter», также будет
восприниматься как пробел.
Если необходимо использовать тэги скриптов, которые должны реализовать какой - либо сценарий, то их можно включить в любое место страницы. Однако если сценарием предусмотрены
изменения страницы до ее загрузки в браузер, тогда тэги скриптов следует поместить перед открывающим тэгом <BODY>. В этом случае на большинстве браузеров одновременно с загрузкой будет
выполняться программный код, который не включен в процедуры обработки событий, и после
окончания загрузки страница отобразится в соответствии с предусмотренными сценарием изменениями.
1.3 Задания
1
Ознакомиться с содержанием теоретической части работы.
2
Запустить на исполнение текстовый редактор.
3
Создать HTML-страницу, включающую заголовок и тело. Используя тэг <TITLE>, указать в
заголовке страницы название «Концептуальная информатика». В теле страницы набрать текст
1
7
(без учета форматирования и разделения на абзацы), приведенный в приложении 1 .
4
Сохранить страницу командой «Файл – Сохранить как». Указать тип файла «Все файлы» и
название файла «ki_button.htm». Поместить файл в папку, указанную преподавателем.
1.4 Требования к оформлению отчета
Отчет должен содержать:
1
Текстовый файл, включающий тэги, необходимые для создания HTML-страницы и сохраненный под именем «ki_button.htm». В файле должно быть указано название страницы, и он должен иметь необходимую содержательную часть.
2
Отчет оформляется в электронном виде.
1
9
2
ИСПОЛЬЗОВАНИЕ ТЭГОВ ФОРМАТИРОВАНИЯ ТЕКСТА
2.1 Цель работы
Изучение основных тэгов, используемых при проектировании HTML-страниц.
СОДЕРЖАНИЕ РАБОТЫ
Классификация тэгов по назначению

Заголовки. Тэги H1 - H6
Предопределено шесть стилей заголовков от H1 до H6, отличающихся по высоте шрифта (H1 -
самый крупный).
Для дополнительного форматирования текста в этих тэгах обычно используются свойства align
и style.
В соответствии со следующим примером текст «Список групп» будет записан как заголовок
второго уровня, расположенный по центру страницы, и для его написания станет использоваться
шрифт sans-serif красного цвета:
<H2 align=left style="font-family: sans-serif; color: red">Список групп</H1>

Разделение на строки и абзацы. Тэги BR, P, HR
Для выделения из сплошного текста отдельных строк и абзацев используются тэги <BR>, <P>,
<HR>.
<BR> - выделение строки без разделения на абзацы. Это непарный тэг. Для его применения
достаточно в конце строки записать один тэг <BR> и продолжение текста начнется со следующей
строки. При этом будет сохранен действующий в абзаце межстрочный интервал.
<P> - выделение абзаца. Текст внутри тэгов <P></P> группируется в отдельный абзац и отделяется от другой части текста увеличенным межстрочным интервалом.
<HR> - вставляет горизонтальную разделительную линию, проходящую через всю страницу.
Также является непарным тэгом.
Например, если использовать такое сочетание тэгов:
<P><HR><P>Строка 1 <BR>Строка 2<BR></P>Строка 3</P> ,
то текст на странице станет выглядеть следующим образом:
Строка 1
Строка 2
Строка 3

Форматирование текста. Тэги FONT, B, I, U, S, SUB, SUP, BIG, SMOL, CENTER,
BLOCKQUOTE, OL, UL, LI
Тэг <FONT> наиболее часто используется для комплексного форматирования текста на HTML-
странице благодаря тому, что обладает набором свойств, с помощью которых можно изменять вид
(свойство face), размер (size) и цвет (color) шрифта, которым отображается текст.
Например, задание следующих свойств приведет к тому, что текст отобразится в соответствии
с типом «fantasy» размером 12 и желтым цветом:
<FONT size=12 face=fantasy color=Yellow>Текст</FONT>
Кроме тэга <FONT>, для форматирования текста обычно используются тэги, которые устанавливают следующие варианты отображения текста:
<B> – полужирное написание;
<I> – курсивное написание;
<U> – текст подчеркнутый;
<S> – текст зачеркнутый;
<SUB> – нижний индекс;
<SUP> – верхний индекс;
<BIG> – увеличение шрифта текста на один размер;
<SMOL> – уменьшение шрифта текста на один размер;
<CENTER> – центрирование HTML -элементов относительно страницы;
<BLOCKQUOTE> – добавление отступа в тексте;
<OL>, <UL> – преобразует строки текста, помеченные тэгами <LI> - соответственно нумерованный и маркированный списки.
Пример комплексного использования тэгов форматирования текста:
<CENTER>
<B>Текст1 </B><I>Текст2 </I><U>Текст3 </U><S>Текст4 </S>
<SUB>Текст5 </SUB><SUP>Текст6 </SUP>
<BIG>Текст7 </BIG><SMALL>Текст8 </SMALL>
2
1
<B><I><U>Текст9</B></I></U>
<BLOCKQUOTE>Текст10</BLOCKQUOTE>
<OL><LI>Текст 11 <LI> Текст 12 <LI> Текст 13</OL>
</CENTER>
Результаты их применения, отображаемые на странице:
Текст1 Текст2 Текст3 Текст4 Текст5 Текст6 Текст7 Текст8 Текст9
Текст10
1. Текст 11
2. Текст 12
3. Текст 13
ЗАДАНИЯ
Ознакомиться с содержанием теоретической части работы.
Запустить на исполнение текстовый редактор.
Открыть HTML-страницу командой «Файл – Открыть». Указать тип файла «Все файлы» и
название файла «ki_button.htm».
4 Используя тэги, выполнить форматирование текста в соответствии с приложением 1.
5 Сохранить файл под тем же именем командой «Файл – Сохранить как». Указать тип файла
«Все файлы» и название файла «ki_button,htm».
1
2
3
ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ ОТЧЕТА
Отчет должен содержать:
1 Текстовый файл, содержащий тэги, необходимые для форматирования текста
HTML – страницы, и сохраненный под именем «ki_button.htm».
2 Отчет оформляется в электронном виде.
3
СВОЙСТВА ЭЛЕМЕНТОВ HTML - СТРАНИЦ
3.1 Цель работы
Изучение свойств элементов и особенностей их применения при проектировании HTML –
страниц.
СОДЕРЖАНИЕ РАБОТЫ
Общие свойства элементов
Использование тэгов можно существенно разнообразить и настроить наилучшим образом на
работу в браузере, если правильно задать значения их свойствам. В настоящее время свойства
тэгов весьма разнообразны, и с каждым новым стандартом HTML число их увеличивается. При
этом есть специфические, редко используемые свойства, и общие, часто используемые во многих
тэгах. Обычно разработчик программ дистанционного обучения использует в качестве инструментария ограниченный набор свойств, с помощью которых настраивает страницы электронных учебных средств для наилучшего усвоения изучаемого материала. К применению ограниченного набора свойств тэгов направлено и требование единообразия в оформлении страниц, что также способствует повышению качества усвоения материала и улучшает внешний вид создаваемых программ.
Ниже дается характеристика некоторых свойств тэгов. При этом не уточняется, какому же конкретно тэгу принадлежит свойство. Это легко установить опытным путем, и, кроме того, принадлежащие конкретным тэгам свойства, как правило, отображаются практически в любой среде проектирования, предназначенной для Web – дизайна. В некоторых случаях сложносочиненные свойства потребуется записывать через дефис (font-Family, font-Weight и т.д.).
Напротив каждого свойства даются цифровые ссылки, конкретизирующие, для какого же свойства можно задать соответствующее значение. Сами значения, которые допустимы для перечисленных свойств, приведены в таблице 1:
accessKey – «Горячая» клавиша*1;
action – возвращаемый адрес формы*2;
align – способ выравнивания*3;
alinkColor – цвет активных ссылок*4;
alt – альтернативный текст, замещающий неотображаемые графические элементы*5;
altKey (CtrlKey, ShiftKey) – состояние клавиш при происхождении события*6;
2
3
background – фоновая картинка*2;
backgroundAttachment – прокручивается фоновая картинка или нет*7;
backgroundColor – цвет фона элемента*4;
backgroundPosition – начальная позиция фоновой картинки*3;
backgroundRepeat – способ повторения фоновой картинки*8;
behavior – способ пролистывания текста*9;
bgColor – цвет фона страницы или элемента*4;
border – вид рамки вокруг элементов и между фреймами*10;
borderBottom (Left/Right/Top) – атрибуты края рамки *см.ниже;
borderBottomColor (Left/Right/Top) – цвет края рамки*4;
borderBottomStyle (Left/Right/Top) – стиль края рамки*11;
borderBottomWidth (Left/Right/Top) – ширина края рамки*12;
borderColorDark (Light) – цвет линий обрамления*4;
borderWidth – ширина линий обрамления*12;
bottomMargin – нижний отступ для страницы*10;
button – кнопка мышки, вызывающая событие*13;
cellPadding – отступ содержимого ячейки от ее рамки*10;
cellSpacing – расстояние между ячейками таблицы*10;
checked – выделен флажок или переключатель*6;
clear – последующий элемент или текст будет ниже картинки, выровненной по краю страницы*14;
clientHeight (Width/X/Y) – размер/координата элемента (без обрамления)**;
closed – окно закрыто**;
color – цвет текста или переднего плана элемента*4;
cols – число колонок в таблице, наборе фреймов или число символов в элементе ввода*10;
colSpan (rowSpan)– обязательное число колонок/строк в таблице*10;
cursor – вид курсора при прохождении мышки над элементом*15;
data – URL для ссылки на данные, используемые объектом*2;
dataFld – колонка или название поля для данных, связанных с элементом*5;
dataFormatAs – формат данных*16;
dataSrc – источник данных*17;
defaultValue – начальный текст, находящийся в элементе управления*5;
dialogHeight (Left/Top/Width) – размер/положение диалогового окна*10;
direction – направление движения*18;
disabled – доступность элемента*6;
display – видимость элемента на странице*10;
duration – длительность переходного состояния для фильтров*10;
dynsrc – адрес видеоизображения*10;
encoding – тип кодировки страницы*10;
face – тип шрифта*10;
fgColor –цвет текста переднего плана*10;
font – атрибуты шрифта*10;
fontFamily (Size/Style/Variant/Weight) – тип/размер/стиль/малые прописные/«жирность» для шрифта*10;
frame – вид обрамления таблицы*10;
frameBorder (Spacing) – вид обрамления/расстояние между фреймами*10;
height – высота элемента или экрана*10;
hidden – видимость элемента*19;
hspace (vspace) – горизонтальный/вертикальный просвет между элементами*10;
id – идентификатор элементов*5;
index – порядковый номер в списке*5;
lastModified – дата последнего изменения страницы**;
left – координата Х верхнего левого угла элемента*10;
linkColor – цвет еще не посещенных гиперссылок*4;
location – полный URL*2;
loop – число повторений*10;
marginBottom (Height/Left/Right/Top/Width) – отступ страницы или текста*10;
maxLength – максимальное число вводимых символов*10;
method – способ пересылки данных*20;
multiple – разрешение на выбор нескольких элементов из списка*6;
name – название элемента*5;
noResize – запрещается изменять размер фрейма*6;
noShade – отображение горизонтальной линейки без тени*6;
noWrap – запрещается автоматическое обтекание текстом*6;
offsetHeight (Left/Top/Width) – полные размеры/положение элемента*10;
offsetX (Y) – координаты мыши относительно элемента в момент события*10;
paddingBottom (Left/Right/Top) – расстояние от содержимого элемента до линии обрамления*5;
pageBreakAfter (Before) – разрыв раздела страницы перед/после элементами*21;
returnValue – возвращаемое значение для события*6;
rows – число строк в текстовой области или высота фрейма*10;
rules – вид разделительных линий в таблице*22;
screenX (Y) – координата мыши относительно экрана в момент события*10;
scrollAmount – плавность прокрутки одного цикла*10;
scrollDelay –время в миллисекундах между циклами*10;
scrollHeight (Left/Top/Width) – полные размеры элементов в пикселах*10;
scrolling – разрешение на прокручивание фрейма*23;
selected – выделение по умолчанию элемента в списке*6;
selectedIndex – номер выделенного элемента в списке*10;
size – размер элемента*10;
src – внешний файл, содержащий исходные данные для элемента*2;
start – начальный номер в списке или место начала проигрывания клипа*24;
status – текст в строке состояния или значение переменной для кнопки, или текущее состояние
фильтра*5;
tabIndex – номер элемента в порядке табуляции*10;
target – место новой страницы для окна или фрейма*5 или 25;
text – текст внутри некоторых тэгов*5;
textDecoration – элементы оформления шрифта*6 или 26;
textIndex – величина отступа для первой строки текста*10;
textTransform – регистр шрифта для текста*27;
title – текст выпадающей подсказки*5;
toElement – определение элемента, на который «наезжает» мышка**;
top – координата Y верхнего левого угла элемента*10;
2
5
trueSpeed – способ вычисления скорости прокрутки*6;
type – тип элемента или название события*5;
vAlign – выравнивание компонентов по верхней или нижней границе*3;
value – значение, определенное по умолчанию*5;
visibility – видимость элемента*6;
vlinkColor – цвет посещенных гиперссылок*4;
width – ширина элемента или экрана*10;
wrap – параметры обтекания текстом в текстовой области*28;
X (Y) – координата положения курсора относительно окна*10;
zIndex – порядок перекрывания элементов*10 или 29.
Таблица 1 – Допустимые значения свойств
** только для чтения
1 – символ c клавиатуры
2 – URL
3 - absbottom, absmiddle,
baseline,
bottom, left, middle,
center, right, texttop, top
4 - #000000… #ffffff
5 – строка
6 – без параметров
7 – scroll, fixed
(в таблице свойств true,
false)
8 – repeat, no-repeat,
9 – alternate, scroll, slide
repeat-x, repeat-y
10 – число
11 – none, solid, double,
groove, ridge, inset, outset
12 – thin, medium,
13 – 0,1,2,4
14 –all, left, right,
15 – auto, crosshair, default,
thick
none, both
hand, help, move, -resize, text,
wait
16 – text, html, no
17 - #строка
18 – down, left, right,
19 – none, block, inline, list-
up
item
20 – post, get
21 – auto, always, left, right
22 - all, cols, groups,
23 – auto, yes, no
none, rows
24 – число, fileopen,
mouseover
25 – _blank, _parent, _self,
_top
–
26
none,
through, underline,
line-
27 – none, lowercase, up-
over- percase,
line, blink
capitalize
28 – off, physical, vir-
29 – auto
tual
ЗАДАНИЯ
1
2
3
4
5
Ознакомиться с содержанием теоретической части работы.
Запустить на исполнение текстовый редактор.
Открыть HTML - страницу командой «Файл – Открыть». Указать тип файла «Все файлы» и
название файла «KI_button.htm».
Изменить свойства тэгов:
 фон страницы установить #0000FF(blue) и цвет текста (свойство text) #00FF35;
 для всех тэгов <H1> установить выравнивание по правому краю страницы и всплывающую подсказку, содержащую сокращенное содержание тэга (2-4 слова);
 для всех тэгов <HR> установить цвет #FF0000 (red) и ширину 6 пикселов;
Сохранить файл под тем же именем командой «Файл – Сохранить как». Указать тип файла
«Все файлы» и название файла «ki_button.htm».
ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ ОТЧЕТА
Отчет должен содержать:
1
Текстовый файл, содержащий тэги, необходимые для форматирования текста HTML - страницы и сохраненный под именем. «ki_button.htm».
2
Отчет оформляется в электронном виде.
2
7
4
ПРОЕКТИРОВАНИЕ ТАБЛИЦ
4.1 Цель работы
Изучение способов создания таблиц при проектировании HTML – страниц.
СОДЕРЖАНИЕ РАБОТЫ
Следующие тэги определяют возможности построения таблицы:
<TABLE> – выделяет часть страницы под построение таблицы;
<CAPTION> – задает текст заголовка;
<TR> – определяет строку таблицы;
<TD> – определяет ячейку таблицы;
<TH> – определяет строку заголовка (выровненную по центру и написанную полужирным шрифтом).
Помимо общих свойств тэгов при формировании таблиц дополнительно могут быть использованы свойства, которые изменяют размеры ячеек, задавая их высоту или ширину кратной
соответственно числу строк или столбцов.
Пример записи тэгов (свойства width и border тэга TABLE задают ширину таблицы и границы
ячеек, свойство colSpan и rowSpan – размеры ячеек):
<TABLE width=50% border=4>
<CAPTION>Заголовок</CAPTION>
<TR>
<TH colSpan=3>Текст 1</TH><TH>Текст 2</TH></TR>
<TR>
<TD rowSpan=2>Текст3</TD><TD>Текст4</TD><TD>Текст5 </TD><TD>Текст 6</TD>
</TR>
<TR>
<TD>Текст 7</TD><TD>Текст 8</TD><TD>Текст 9</TD>
</TR>
</TABLE>
и отображаемая в результате таблица:
Заголовок
Тек
Текст 1
Те
Текст кст 4
Тек
ст 5
Те
3
кст 7
ст 2
Тек
ст 6
Тек
ст 8
Тек
ст 9
ЗАДАНИЯ
Ознакомиться с содержанием теоретической части работы.
Запустить на исполнение текстовый редактор.
Открыть HTML - страницу командой «Файл – Открыть». Указать тип файла «Все файлы» и
название файла «ki_button.htm».
4 Создать таблицу в соответствии с приложением 2, поместив ее в конце страницы.
5 Сохранить файл под тем же именем командой «Файл – Сохранить как». Указать тип файла «Все
файлы» и название файла «ki_button.htm».
1
2
3
ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ ОТЧЕТА
Отчет должен содержать:
1
Текстовый файл, содержащий тэги, необходимые для форматирования текста HTML – страницы, и сохраненный под именем. «ki_button.htm».
2
Отчет оформляется в электронном виде.
2
9
5
ИСПОЛЬЗОВАНИЕ ФРЕЙМОВ
5.1 Цель работы
Изучение способов создания многостраничных документов с использованием фреймов.
СОДЕРЖАНИЕ РАБОТЫ
Фреймы. Тэги FRAMESET, FRAME, NOFRAMES
Для создания фреймов (нескольких самостоятельных HTML-страниц, внедренных на общую
страницу) используются тэги <FRAMESET> и <FRAME>. Тэг <FRAMESET> выделяет в общей
странице разделы (размеры разделов задаются свойствами cols - колонки или rows - строки), а тэг
<FRAME> уточняет содержание выделенных разделов (свойством src, которым указывается адрес
внедряемой страницы). Остальные свойства этих тэгов уточняют внешний вид создаваемых фреймов и их поведение.
Тэг <NOFRAMES> служит для альтернативного отображения страницы с фреймами в браузерах, которые их не поддерживают.
В приведенном ниже примере формируется страница согласно схеме, приведенной на рисунке
2. При этом двумя тэгами <FRAMESET> страница разбивается сначала на два вертикальных раздела I и II, а затем раздел II делится горизонтально на дополнительные разделы 2 и 3, образуя, таким образом, в общей сложности три раздела I, 2 и 3. В эти разделы тэгами <FRAME> подставляются соответствующие страницы, сохраненные в файлах page1, page2, page3 (свойства в этих тэгах
задают: border="1" - ширину разделительного бордюра между фреймами, scrolling="no" - запрещает появление скроллинга).
2
I
I
I
3
Рисунок 2 - Схема разбиения
Кроме того, в примере предусматривается возможность отображения (в случае необходимости)
страницы с предупреждающей надписью о невозможности отображения фреймов. Для этого используется тэг <NOFRAMES>:
<FRAMESET framespacing="1" border="1" cols="60,*">
<FRAME name="FrmKILeft" src="ki_page2.htm" noresize >
<FRAMESET rows="15%,*">
<FRAME name="FrmKITop" src="ki_page3.htm" scrolling="no">
<FRAME name="FrmKIBottom" src="ki_page4.htm">
</FRAMESET>
<NOFRAMES>
<body>
<p>This page uses frames, but your browser doesn't support them</p>
</body>
</NOFRAMES>
</FRAMESET>
ЗАДАНИЯ
1 Ознакомиться с содержанием теоретической части работы.
2 Используя текстовый редактор, создать две HTML - страницы («ki_top.htm» и «ki_left.htm»).
Включить в состав тела страниц текст, приведенный в приложении 3.
3 Используя текстовый редактор, создать HTML - страницу «main_ki.htm». Создать в нем три
фрейма frmkitop, frmkileft, frmkibutton и разместит в них страницы «ki_top.htm», «ki_left.htm»
и «ki_button.htm» в соответствии со схемой приложения 3. Установить расстояние между
фреймами, равным нулю.
4 Запретить появление полосы скроллинга при изменении размеров окна для фрейма frmkitop.
5 Сохранить изменения в соответствующих файлах.
ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ ОТЧЕТА
1
2
Отчет должен содержать:
Страницы «main_ki.htm», «ki_top.htm» и «ki_left.htm», созданные в соответствии с пп. 3, 4 задания.
Отчет оформляется в электронном виде.
3
1
6
ПРИМЕНЕНИЕ ЗАКЛАДОК И ГИПЕРССЫЛОК
6.1 Цель работы
Изучение способов создания гипертекстовой организации HTML - страниц с использованием
закладок и гиперссылок.
СОДЕРЖАНИЕ РАБОТЫ
Ссылки. Тэг А
Тэг А определяет гиперссылку на элемент, расположенный на данной или другой странице.
Возможна одна из двух следующих конструкций:
<A NAME = “name”> - для указания закладки на текущей странице;
<A HREF=”URL”> - для ссылки на страницу с адресом URL.
При этом для адресации на закладку следует отделять адрес от имени закладки с помощью
разделительного знака «#».
Например:
<A NAME = “Info”>
...
<A HREF = "kipage.htm#Info">Текст</A>
или, если устанавливается гиперссылка на страницу,
<A HREF="http://www.qwerty.com/ki/index.htm">Текст</A>
Слово «текст» в обоих случаях отобразится на странице в соответствии с принятыми
правилами форматирования гиперссылок (по умолчанию используется синий подчер кнутый
шрифт). Если щелкнуть мышкой на это слово, то в первом случае страница kipage.htm будет
прокручена до места, где находится закладка «Info», во втором случае - загрузится новая
страница, расположенная по адресу http://www.qwerty.com/ki/index.htm.
При использовании гиперссылок для адресации к ссылкам на страницы одного сайта рекомендуется выполнять относительную адресацию. В этом случае указывается не полный путь к странице, на которую делается гиперссылка, а относительный путь, в котором задается только расположение страницы – адресата относительно исходной страницы, например, запись
<A HREF="main.htm">Текст</A>
означает, что страница main.htm расположена в том же каталоге, что и страница, из которой
делается гиперссылка. Аналогичная запись
<A HREF="..\pages\main.htm">Текст</A>
предусматривает гиперссылку на страницу, которая находится в папке pages, а эта папка
находится в той же папке, что и исходный файл, содержащий тэг <A>.
При наличии на странице нескольких фреймов, каждый из которых, в свою очередь, содержит
аналогичные страницы, организовать гиперссылки между ними позволяет свойство target, которому придается значение имени адресуемого фрейма, например:
<A target="frmright" href="right.htm#label1">Текст</A>
Вставить в гиперссылку комментарий (поясняющую надпись, которая воспроизводится, если к
тексту гиперссылки подвести указатель мышки) позволяет свойство title. Пример использования
свойства title:
<A title="Текст комментария" href="main.htm">Текст</A>
ЗАДАНИЯ
1
2
3
4
5
6
Ознакомиться с содержанием теоретической части работы.
Вставить в странице «ki_button.htm» закладки перед заголовками, выделенными полужирным
шрифтом. Обозначить закладки Label1, Label2,…и т.д.
Продублировать в начале страницы «ki_button.htm» текст выделенных заголовков. Сделать из
них соответствующие гиперссылки на закладки Label. Установить для гиперссылок комментарии согласно приложению 4.
Вставить гиперссылки со страницы «ki_left.htm» на соответствующие закладки Label на странице
«ki_button.htm».
Сохранить изменения в соответствующих файлах.
Открыть страницу «main_ki.htm» и проверить работоспособность всех гиперссылок.
ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ ОТЧЕТА
1
Отчет должен содержать страницы ki_button.htm и ki_left.htm, созданные в соответствии с пп.
2 - 4 задания.
2 Отчет оформляется в электронном виде.
3
3
7
ВСТАВКА РИСУНКОВ И ЭЛЕМЕНТОВ МУЛЬТИМЕДИА
7.1 Цель работы
Изучение методов включения в HTML - страницы рисунков и элементов мультимедиа.
СОДЕРЖАНИЕ РАБОТЫ
Элементы мультимедиа. Тэги MARQUEE, BGSOUND, EMBED
Простейшим способом, с помощью которого можно «оживить» текст HTML-страницы, является вставка движущихся строк с помощью тэга <MARQUEE>. Как и большинство других тэгов, он
может включать внутри своей пары тэги, вставляемых в страницу элементов, например картинок,
заставляя их двигаться. При этом набор свойств тэга позволяет разнообразить характер перемещения вставленных элементов, изменяя направление движения, его периодичность и траекторию.
В приведенном ниже примере в бегущую строку вставляются две строки текста «Строка 1» и
«Строка 2», которые будут перемещаться относительно границ страницы. Значения свойств задают
возвратно-поступательный характер движения (behavior="alternate"), скорость движения
(scrollamount="12") и направление движения сверху вниз (direction=up):
<MARQUEE behavior=alternate scrollamount=8 direction=down> Строка 1<BR><U>Строка
2</U>></MARQUEE>
Тэг <BGSOUND> используется для вставки фонового звука, который будет звучать при открытии страницы, непрерывно повторяясь, или установленное число раз, что задается числом в свойстве loop (если значение свойства равно –1, то звуковое сопровождение звучит непрерывно). При
этом можно использовать не только традиционные аудиофайлы (.wav, .asf), но и большинство других, содержащих аудиозвучание (видеофайлы, HTML-страницы, графические файлы). Однако достигнутый в последнем случае эффект может быть несколько искажен, т.к. помимо звуковой дорожки часто воспроизводится и весь файл целиком, причем ему предваряет заставка приложения,
воспроизводящего файл.
Пример использования тэга <BGSOUND> для вставки звукового файла voiceki.wav в качестве
фонового звукового сопровождения, которое прозвучит дважды:
<BGSOUND src="..\temp\voiceki.wav" loop=2>
Аналогичные причины в какой-то мере сдерживают и возможности применения тэга
<EMBED>. Он позволяет внедрить документы любого типа для просмотра соответствующим приложением. Однако, как и для тэга <BGSOUND>, перед собственно просмотром элемента мультимедиа могут отображаться заставки приложений, которые его воспроизводят. Чтобы этого не произошло, нужно предпринимать дополнительные меры, которые такие заставки отключили бы.
Кроме того, возможен вариант, когда необходимого приложения не будет на компьютере пользователя, и тогда соответствующий файл не воспроизведется совсем.
Пример вставки в страницу видеофайла kifilm.avi:
<EMBED src="..\kifilm.avi">
Рисунки. Тэг IMG
Чтобы поместить на страницу графическое изображение, используется тэг <IMG>. Большинство браузеров распознают и вставляют рисунки, созданные в форматах .gif и.jpg. Поэтому хотя
имеется возможность вставлять рисунки не только этих, но и некоторых других форматов, для
вставки обычно пользуются только ими. Тем самым повышается вероятность правильного отображения страницы со всеми включенными в нее картинками. По этой же причине крайне редко используется тэг <IMG> и для вставки видеоизображений.
Пример использования тэга <IMG> (вставляется рисунок из файла pictureki.jpg, который находится в папке image):
<IMG SRC="..\image\pictureki.jpg">
Создание рисунков
Рисунки создаются с помощью специализированных графических редакторов, которые дают
возможность проектировать от простейших плоских изображений до сложных трехмерных фотореалистических моделей. Применение таких редакторов, как правило, не предъявляет повышенных требований к уровню компьютерных знаний проектировщика HTML - страниц, однако требует определенных художественных способностей.
Кроме собственно создания рисунков художником –профессионалом, эффективные решения
могут быть получены путем формирования компьютерных аналогов коллажей, мозаик, аппликаций
или других комбинированных рисунков с их последующим редактированием.
Поместить в такой комбинированный рисунок можно любое графическое изображение, имеющее цифровой формат или переведенное в цифровое представление с помощью специальных аппаратных средств (цифровые видеокамеры, фотоаппараты, тюнеры, сканеры и т.п.). Для создания и
редактирования комбинированного рисунка также следует воспользоваться графическим редактором. Если предполагается работать только с пикселной графикой, то одним из лучших решений
будет использование графического пакета Photoshop корпорации Adobe Systems Incorporated.
Изображение, которое можно увидеть на экране монитора, проще всего поместить в рисунок
Adobe Photoshop при помощи графического буфера обмена. Для этого нужно сначала скопировать
требуемое изображение в буфер обмена, а затем перейти в среду проектирования пакета Photoshop,
вставить копию изображения в соответствующее место комбинируемого рисунка и отредактировать рисунок. Это можно сделать, действуя в следующей последовательности:
- скопировать все или часть изображения на экране монитора. Для копирования всего изображения, видимого на экране, достаточно нажать клавишу «Print Screen» на клавиатуре. Если копируется изображение только одного из видимых объектов приложения, поддерживающего технологию OLE (Object Linking and Embedding), необходимо, находясь в среде такого приложения, выделить объект (щелкнуть его мышкой) и дать команду «Копировать» из меню команды «Правка».
Например, таким образом можно в среде пакета Microsoft Word создать объект Equation (формулу),
затем выделить его и скопировать в буфер обмена командой «Правка» - «Вставить»;
- перейти в среду графического редактора Photoshop и создать файл нового рисунка командой
«Файл» - «Новый». Если файл создается после того как копируемый рисунок помещен в буфер обмена, то размеры нового файла будут установлены равными размеру объекта, помещенного в буфер (они могут быть изменены в диалоговом окне команды «Файл» - «Новый»);
- вставить графическое изображение скопированного объекта в рисунок командой «Редактирование» - «Вставить»;
3
5
- если рисунок комбинируется из нескольких изображений, то необходимо повторить копирование графических объектов и их вставку в уже созданный рисунок Adobe Photoshop. При этом
каждое из вставляемых изображений будет помещено в отдельный слой рисунка, что в дальнейшем позволит выполнять независимое редактирование и перемещать изображения друг относительно друга;
- выделить часть рисунка, подлежащую редактированию. Для этого, используя диалоговое окно «слои», выбрать слой, в котором находится редактируемая часть рисунка (если окно «слои»
скрыто, то его можно визуализировать командой «Окно» - «Показать Слои»). При необходимости
редактирования не всего изображения из выбранного слоя, а только его части следует указать зону
редактирования (кнопками панели инструментов
– для выделения прямоугольной зоны или
– для выделения зоны произвольной формы);
- отредактировать рисунок. Для редактирования можно использовать кнопки панели инструментов (
- заливка,
- затенение и др.), команды редактирования («Редактирование» «Трансформ.») и команды изменения атрибутов рисунка («Изображение» - «Настройки», «Размер
изображения», «Размер холста», «Обрезать», «Вырезать» и т.д.). Кроме того, иногда полезно применение фильтров (например, с их помощью можно значительно увеличить резкость изображения
командой «Фильтр» - «Резк.»). Если выполненное редактирование не соответствует ожидаемым
результатам, то результат последнего редактирования можно отменить командой «Редактирование»
- «Отменить» (одновременное нажатие клавиш «Ctrl» и «z»). Отменить несколько выполненных
команд можно в окне «История» (визуализируется командой «Окно» - «Показать Историю»).
ЗАДАНИЯ
1
2
Ознакомиться с содержанием теоретической части работы.
Запустить на исполнение пакет Microsoft Word. Командой «Вставить» - «Объект» - «Microsoft
Equation» создать в документе Microsoft Word формулу для вычисления среднеквадратического
отклонения:
n
 Xi  X cp 2
D
3
4
5
6
i 1
.
n 1
Скопировать формулу в графический буфер обмена.
Запустить на исполнение пакет Photoshop. Командой «Файл» - «Новый» создать новый файл
рисунка (размеры и другие атрибуты рисунка, установленные по умолчанию, не изменять).
Вставить изображение формулы из буфера обмена в новый рисунок Adobe Photoshop.
Закрасить белый фон в изображении формулы цветом #0000FF. Для установки цвета палитры
использовать кнопку установки цвета -
- на панели инструментов, для закрашивания -
кнопку
- «Залить». (Кнопка «Залить» может находиться под кнопкой
- «Градиент», и
чтобы ее увидеть, в этом случае потребуется при нажатой левой клавише мышки удерживать в
течение нескольких секунд указатель курсора на кнопке «Градиент»).
7 Сохранить созданный рисунок в файле формата «jpeg» с именем «ki_image». Для сохранения
выполнить команду «Файл» - «Сохранить как», установить в поле «Формат» диалогового окна
команды атрибут «jpeg» и выбрать для сохранения ту же папку, в которой находятся htmlстраницы, созданные при выполнении предыдущих практических работ. При необходимости
можно изменить размер и качество сохраняемого рисунка в окне «JPEG Options», которое появится после нажатия кнопки «Сохранить».
8 Запустить на исполнение текстовый редактор. Создать страницу «ki_page1.htm» и вставить в
тело страницы рисунок из файла «ki_image.jpg» с изображением рисунка формулы.
Поместить изображение формулы в тэг <MARQUEE> и установить для него направление движения слева – направо.
10 Сохранить изменения в файле «ki_page1.htm».
9
ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ ОТЧЕТА
1
Отчет должен содержать страницу «ki_page1.htm», созданную в соответствии с пп. 8 - 9 задания.
2
Отчет оформляется в электронном виде.
3
7
8
ПРОЕКТИРОВАНИЕ ФОРМ И ЭЛЕМЕНТОВ УПРАВЛЕНИЯ
8.1 Цель работы
Изучение методов создания и включения в HTML - страницы форм и элементов управления.
СОДЕРЖАНИЕ РАБОТЫ
Формы и элементы управления. Тэги INPUT, BUTTON, LABEL, SELECT, OPTION,
FIELDSET, LEGEND, TEXTAREA, FORM
Тэги, предназначенные для внедрения в HTML-страницу форм и элементов управления, создают объекты по своему внешнему виду и назначению, во многом напоминающие аналогичные
стандартные элементы, применяемые при создании приложений средствами визуального программирования.
При этом наибольшей универсальностью обладает тэг <INPUT>, который, благодаря возможности конкретизировать вид внедряемого элемента изменением значений свойства «type», позволяет внедрять объекты типа кнопка (type="button"), переключатель (type="radio"), флажок
(type="checkbox"), изображение (type="image"), текстовое поле (type="text"), а также специализированные поля для ввода пароля (type="password"), поиска и ввода имени файла type="file", отправки (type="submit") или очистки (type="reset") формы и некоторые другие.
Примеры:
<INPUT type="text" size=25 > - текстовое поле длиной 25;
<INPUT type="button" value=" OK "> - кнопка с надписью «OK».
Остальные тэги этого типа обладают меньшей универсальностью, и каждый из них создает
только по одному объекту.
Тэг <BUTTON> внедряет на страницу элемент «кнопка». Он дублирует возможности тэга <INPUT> и, кроме того, позволяет вводить в тэг не только текст с названием кнопки, но и другие элементы. Например, следующая запись в теле страницы создаст на кнопке двухстрочную запись с
картинкой из файла imageki.jpg в верхней строке и названием кнопки «ButtonKIOK» в нижней
строке. Этой же записью кнопке будет поставлена в соответствие «горячая» клавиша «Х»:
<BUTTON name=ButtonKI accesskey="X">
<IMG SRC="\imageki.jpg"><BR>ButtonKIOK
</BUTTON>
Тэг <LABEL> создает надпись.
Тэг <SELECT> внедряет поле со списком или выпадающий список.
Тэг <OPTION> обозначает одну из альтернатив в элементе SELECT.
Тэг <FIELDSET> объединяет рамкой несколько элементов.
Тэг <LEGEND> создает надпись для рамки.
Тэг <TEXTAREA> задает поле ввода, состоящее из нескольких строк.
Тэг <FORM> описывает форму, которая может содержать другие элементы управления.
Ниже приведен комплексный пример использования тэгов для создания элементов управления,
а на рисунке 3 показан внешний вид формы, которая отобразится в окне браузера:
<FORM>
<FIELDSET>
<LEGEND>Текст легенды</LEGEND>
<TEXTAREA rows=3> </TEXTAREA>
<SELECT size=3>
<OPTION>Строка 1</OPTION>
<OPTION selected>Строка 2 </OPTION>
<OPTION>Строка 3</OPTION>
<OPTION>Строка 4
</OPTION>
</SELECT><BR>
</FIELDSET>
надписи </LABEL>
<LABEL>Текст
кнопки</BUTTON>
<BUTTON>Название
Рисунок 3- Форма с
элементами управления
</FORM>
ЗАДАНИЯ
Ознакомиться с содержанием теоретической части работы.
Запустить на исполнение текстовый редактор. Прочитать страницу «ki_page1.htm» и вставить в
конце тела страницы все тэги элементов управления, упомянутые в теоретической части работы. Для создания элементов управления выбрать произвольные размеры, названия и тексты.
3 Сохранить изменения в файле «ki_page1.htm».
1
2
ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ ОТЧЕТА
3
9
1
Отчет должен содержать страницу «ki_page1.htm», измененную в соответствии с п. 2 задания.
2
Отчет оформляется в электронном виде.
9
ИЗМЕНЕНИЕ СТАНДАРТНЫХ СТИЛЕЙ И ПРИМЕНЕНИЕ ТАБЛИЦ
СТИЛЕЙ
9.1 Цель работы
Изучение стилей, используемых при проектировании HTML - страниц.
СОДЕРЖАНИЕ РАБОТЫ
Определение стилей элементов
Стили обычно используются для придания единообразия всем страницам одного сайта. Их
можно переопределить в случае, когда стандартные значения стилей не могут обеспечить нужного
внешнего вида страницы или требуется усилить выразительность какого-либо ее участка.
Каждый элемент HTML имеет свой набор свойств, задающих его внешний вид и поведение.
Все они объединены в подмножестве Style. Доступ к этим свойствам можно получить двумя путями: через общепринятый набор описаний для элемента или через таблицу стилей (возможно также
программированием на VBScript или Jscript).
Изменение стандартного стиля тэга
Для изменения стиля, установленного по умолчанию, достаточно в открывающий тэг добавить
свойство Style и присвоить ему необходимые значения.
Задаваемые значения записываются как одна символьная переменная и поэтому должны быть
заключены в кавычки. При этом фактические значения новым атрибутам стиля указываются через
знак «:» (двоеточие), а если атрибутов несколько, то они перечисляются через точку с запятой.
Например, свойствам тэга <P> присваиваются значения color = red; font-family = serif:
<P style="color: red; font-family: serif">Строка 4</P>
Если таким образом изменить свойства тэга, включающего в себя несколько разнородных элементов, то сделанные установки будут распространяться на каждый из входящих в него элементов,
кроме тех тэгов, где явно задаются другие значения этому же свойству. Например,
4
1
<BODY style="font-size: 24px">
Для тэга <BODY>, который заключает в себя все содержание тела страницы, устанавливается
размер шрифта 24px, и шрифт такого размера будет использован для написания текста внутри всех
тэгов, расположенных на странице и не имеющих дополнительного форматирования размера
шрифта.
Чтобы изменить стандартно предопределенный стиль тэга, а затем использовать новые значения стиля как значения по умолчанию, следует записать специальный тэг <STYLE> и в нем определить новые значения свойств. Синтаксически такая запись должна начинаться с указания тэга,
для которого переопределяются свойства. Затем следует открыть фасонные скобки и в них задать
свойства, перечисляя их через точку с запятой. Например,
<STYLE>
H1 {font-size = 12px; text-decoration=underline}
</STYLE>
Здесь переопределены свойства тэга <H1> (установлено, что текст в тэге должен отображаться
подчеркнутым и иметь размер 12 пикселов). Как следствие, весь текст, заключенный на странице в
тэги <H1>, будет записываться шрифтом, отличным от стандартного.
Ниже приведен комплексный пример, иллюстрирующий различные варианты изменения стилей тэгов:
<STYLE>
H1 {font-size = 12pt; text-decoration=underline}
</STYLE>
<BODY style="font-size: 24px">
<P><FONT face=Arial>Строка 1</FONT></P>
<H1 >Строка 2</H1>
<P style="text-transform: uppercase">Строка 3</P>
<P style="color: red; font-family: serif">Строка 4</P>
</BODY>
Когда требуется для одного и того же тэга использовать альтернативные значения свойств,
необходимо задать их в соответствующих классах свойств, а затем использовать по мере необходимости. В следующем примере таким образом определены альтернативные свойства тэга H1. Об-
ращение к нужному классу свойств осуществляется через имя класса (в примерах KI1 и KI2).
Например:
<STYLE>
H1.KI1 {font-size = 24}
H1.KI2 {font-size = 12}
</STYLE>
<BODY>
<H1 class = "KI1">Строка 1</H1>
<H1 class = "KI2">Строка 2</H1>
</BODY>
Использование таблицы стилей
В приведенном ранее примере тэг <STYLE> был применен для переопределения свойств тэга
<H1>. Аналогичным образом можно придать новые значения не одному, а сразу нескольким тэгам.
Такой набор переопределений, заключенный в тэге <STYLE>, образует таблицу стилей
Например, запись
<STYLE>
H1 {color: red}
H2 {color: red; font-style: italic}
</STYLE>
придает новые значения свойствам сразу двум стандартным тэгам <H1> и <H2>. Сделанные
здесь установки будут действительны для всех случаев использования этих тэгов на данной странице.
Таблицу стилей можно разместить в любом месте HTML-страницы, но лучше, если ее записать
вне тела страницы и дополнительно заключить внутри знаков комментариев, тогда она не отобразится в браузере, который не поддерживает такие таблицы.
В примере таблица стилей записана в заголовке страницы и закомментирована. В ней установлено, что весь текст в теле страницы нужно писать курсивом (значение italic для свойства тэга
<BODY>), кроме специально оговоренного тэга <P>:
<HEAD>
<STYLE><!-BODY {font-style: italic}
4
3
P {font-style: normal}
--></STYLE>
<BODY>
Строка 1
<P>Строка 2</P>
</BODY>
</HEAD>
Часто бывает полезным таблицу стилей выделить в отдельный файл и использовать ее во
всех страницах сайта. Для этого следует создать обычный текстовый файл (с любым расшир ением, но предпочтительнее задать расширение .css , т.е. определить, что это Иерархические
Стилевые Таблицы - Cascade Style Sheets). Внутри файла записать необходимые значения
свойств тэгов, указывая, как обычно, название тэга и в фигурных скобках – характеристику его
свойств. Остальные элементы таблицы стилей следует опустить, т.е. файл должен содержать
только инструкции для описания свойств тэгов. Например,
BODY {font-style: italic}
P {color: red; font-style: normal}
...
Для подключения файла с таблицами стилей необходимо в проектируемой странице сделать
соответствующую ссылку, например, указав в ее заголовке
<HEAD>
<LINK REL="stylesheet" TYPE="text/css" HREF="styleki.css">
</HEAD> ,
где LINK означает, что к текущей странице подключается элемент, REL и TYPE описывают
элемент как стилевую таблицу, а HREF содержит адрес, по которому находится файл styleki.css с
таблицей стилей.
Далее можно использовать новые определения, заданные в файле с таблицами ссылок как в текущей, так и любой другой вновь проектируемой странице программы.
ЗАДАНИЯ
1
2
3
4
5
6
Ознакомиться с содержанием теоретической части работы.
Запустить на исполнение текстовый редактор. Создать новый текстовый файл «ki_style.css»,
поместить в него таблицу стилей, установив следующие свойства тэгов:
 <p>: атрибуты шрифта - 26;
 <h1> - размер шрифта - 55 пикселов.
Сохранить изменения в файле «ki_style.css».
Прочитать в блокноте страницу «ki_button.htm» и подключить к ней таблицу стилей из файла
«ki_style.css».
Сохранить изменения в странице «ki_button.htm» и проконтролировать правильность выполнения пп. 2-4.
Создать непосредственно в странице «ki_button.htm» таблицу стилей, установив следующие
свойства тэгов:
 тэг <TH>: размер шрифта - 25 пикселов, цвет текста - «red», ширину линий обрамления рамки - 3 пиксела, вид курсора – рука с вытянутым указательным пальцем;
 тэг <TD> - вид курсора: стрелка с расположенным рядом знаком вопроса.
7 Сохранить изменения в странице «ki_button.htm» и проконтролировать правильность выполнения п. 6.
ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ ОТЧЕТА
3
Отчет должен содержать страницу «ki_button.htm» и файл «ki_style.css», созданные и отредактированные в соответствии с пп. 2-7 задания.
4
Отчет оформляется в электронном виде.
4
5
10 ИСПОЛЬЗОВАНИЕ СОБЫТИЙ И МЕТОДОВ
10.1 Цель работы
Изучение основных событий и методов, используемых при проектировании HTML – страниц.
СОДЕРЖАНИЕ РАБОТЫ
Основные правила применения
Использование событий и методов позволяет организовать обратную связь, благодаря которой
появляется возможность правильно реагировать на те или иные действия пользователя. Примерами действий, опознаваемых как события, являются открытие страницы, нажатие клавиши на клавиатуре, одинарный, двойной щелчки мышки или просто ее перемещение и т.д. Большой набор событий, как правило, порождается и элементами управления, внедренными на странице.
Для программирования действий, которые компьютеру необходимо выполнить в ответ на происшедшее событие, создается программный код. Этот программный код фиксируется на HTMLстранице в виде специальных событийно-ориентированных процедур, записанных на языках программирования Visual Basic или Java. Событийно-ориентированные процедуры, в свою очередь,
размещаются внутри парных тэгов <SCRIPT>. Программный код из таких процедур начинает выполняться в ответ на соответствующее событие, которое произошло как результат действия пользователя или компьютера. Чтобы упростить программирование в языке программирования Visual
Basic, предусмотрены встроенные процедуры, включающие заранее спроектированный программный код. Такие встроенные процедуры называются методами.
Благодаря новым качествам, обеспеченным современными стандартами для HTML - страниц,
имеется возможность осуществить доступ не только к обычным элементам управления и их свойствам, но и практически к любым элементам, расположенным на странице. Это достигается с помощью идентификаторов, которые задаются для тэга. Они обеспечивают распознание элементов и
используются для их отождествления с одноименными событиями. Далее события обрабатываются традиционным способом с помощью программного кода, записанного в соответствующие событийно-ориентированные процедуры.
Для задания идентификатора достаточно в открывающем тэге элемента задать значение свойству «ID», которое в дальнейшем и служит для отождествления данного элемента. Затем следует
написать процедуру обработки события, поместив ее в разделе страницы, который ограничен
тэгом <SCRIPT>.
Например, приведенный ниже фрагмент страницы позволит обратиться к тексту тэга <P> по
его идентификатору ID=”KI” и вызвать с помощью процедуры KI_onclick диалоговое окно «OK» в
случае, если щелкнуть мышкой на любом участке строки «Фрагмент текста»:
<P ID = KI >Фрагмент текста</P>
...
<SCRIPT LANGUAGE=vbscript><!-Sub KI_onclick
MsgBox "OK"
End Sub
--></SCRIPT>
Далее идет описание событий и методов, обычно применяемых для трансформации алгоритмов средствами Web – проектирования. Их использование основано на диалекте языка VBScript и в
этой части мало в чем отличается от традиционных версий языка, ориентированных на проектирование стандартных приложений. Приведенное описание дает представление о назначении перечисленных событий и методов и в какой-то мере о способе их использования.
События
Ниже приведен список основных событий, которые порождаются элементами HTMLстраницы. Они могут быть использованы для организации диалога, если отслеживать действия
пользователя на компьютере по возникающим событиям - щелчку мышкой, нажатию клавиши, открытию окна и т.д.
Синтаксис событийно-ориентированной процедуры (используется только в тэге <SCRIPT>):
Sub ИмяОбъекта_ИмяСобытия
[Инструкции]
End Sub
Вызвать событийно-ориентированную процедуру можно двумя способами.
Первый способ заключается в том, что название процедуры указывается явным образом. Для
этого в тэге в качестве свойства задается одноименное событие и ему присваивается значение, которое совпадает с именем вызываемой процедуры.
Например, чтобы вызвать выполнение процедуры KIStr при щелчке мышки на текст «Строка
текста» в тэге <P>, следует сделать запись в соответствии со следующим фрагментом страницы:
<BODY>
4
7
<P id=KI onclick=KIStr()>Строка текста</P>
</BODY>
<SCRIPT LANGUAGE=vbscript><!-Sub KIStr()
Msgbox ("Событие произошло")
End Sub
--></SCRIPT>
Второй способ использует предопределенные имена процедур, которые установлены для тех
или иных событий. В этом случае для создания процедуры используется имя, сформированное из
двух частей – идентификатора тэга и названия события. Они объединяются в имя процедуры с
помощью знака подчеркивания («_») .
Например, действия, предусмотренные в приведенном выше примере, по этому способу можно
реализовать следующим образом:
<BODY>
<P id=KI>Строка текста</P>
</BODY>
<SCRIPT LANGUAGE=vbscript><!-Sub KI_onclick()
Msgbox ("Событие произошло")
End Sub
--></SCRIPT>
В стандартах HTML предусмотрены следующие события, которые можно обрабатывать любым
из двух приведенных способов:
onabort - пользователь прервал загрузку картинки;
onafterupdate – передача данных закончилась;
onbeforeunload – перед началом выгрузки страницы;
onbeforeupdate - перед выгрузкой страницы;
onblur - окно потеряло фокус;
onbounce -- cтрока <MARQUEE> дошла до конца (если behavior = alternate);
onchange -изменилось содержимое элемента;
onclick - щелкнута кнопка мышки;
ondataavailable - данные приходят из асинхронного источника;
ondatasetchanged - изменился порядок расположения данных;
ondatasetcomplete - все данные стали доступными;
ondblclick – дважды щелкнута кнопка мышки;
ondragstart - пользователь начинает перетаскивание элемента мышкой;
оnerrоr – произошла ошибка при передаче;
onerrorupdate - событие onbeforeupdate отменило изменение данных;
onfilterchange – завершился переходный процесс для фильтра;
onfilterevent - завершен текущий переход для фильтра;
onfinish – закончен цикл для строки <MARQUEE>;
onfocus – элемент получил фокус и стал активным;
onhelp - нажата клавиша F1 или Help;
onkeydown – нажата любая клавиша;
onkeypress – клавиша нажата и удерживается в нажатом состоянии;
onkeyup – клавиша отпущена;
onload – завершилась загрузка элемента;
onmousedown – нажата кнопка мышки;
onmousemove - пользователь двигает мышь;
onmouseout – курсор мышки отодвинут от элемента;
onmouseover – курсор мышки подведен к элементу;
onmouseup – кнопка мышки отпущена;
onreadystatechange – изменилось свойство readystate;
onreset – завершилась очистка формы;
onresize – пользователем изменены размеры окна;
onrowenter - изменены данные в текущей строке;
onrowexit - происходит перед изменением данных в текущей строке;
onscrol1 – выполняется прокрутка окна;
onselect - изменено текущее выделение;
onselectstart - запускается выделенная часть страницы;
onstart – началась прокрутка строки <MARQUEE>;
onsubmit – нажата кнопка <SUBMIT> или форма отправлена на сервер;
onunload – происходит перед выгрузкой страницы.
Краткое описание методов
Использование методов облегчает проектирование событийно-ориентированных процедур, т.к.
они дают возможность выполнить комплексные программные действия написанием минимального
числа строк кода. Для обращения к методам необходимо указать имя объекта, через точку - назва4
9
ние метода, а затем если есть, то перечислить параметры.
Современные версии диалекта VBScript включают большое количество методов, предназначенных для реализации самых разнообразных программных действий. Здесь приводятся только
некоторые из них, которые достаточно просты в применении и с успехом могут быть использованы
для создания динамических HTML – страниц.:
add – добавляет элемент в коллекцию;
AddImport - добавляет таблицу стилей из указанного адреса;
alert – показывает окно предупреждения;
apply – применяет динамический фильтр;
assign – загружает новую страницу;
back – загружает предыдущую просмотренную страницу;
blur – делает элемент не активным;
clear – удаляет выделенную часть страницы;
clearInterval, clearTimeout – обнуляет параметры таймера;
click – имитирует щелчок мышкой;
close – закрывает текущее окно;
compareEndPoints – сравнивает две текстовые области;
confirm – показывает окно с вопросом;
contains – проверяет наличие в элементе другого элемента;
createRange – копирует выделенную область;
createTextRange – создает объект как текстовую область TextRange;
deleteRow, insertRow – удаляет/вставляет строку таблицы;
duplicate – копирует область TextRange;
elementFromPoint – определяет элемент по координатам;
empty – убирает выделение;
execCommand – выполняет команду для выделения или области TextRange;
findText – по маске находит часть текста в области TextRange;
focus – делает элемент активным;
forward – загружает последующую из прочитанных страниц;
getAttribute – определяет значение указанного атрибута элемента;
getBookmark – определяет имя и положение «закладки»;
go – загружает по выбору любую из прочитанных страниц;
inRange – определяет положение области TextRange относительно текущей;
isEqual – сравнивает заданную и текущую области TextRange;
item – определяет объект коллекции по заданному номеру;
move – устанавливает начало и конец области TextRange (для вставки) ;
moveEnd, moveStart – изменяет положение конца/начала области TextRange;
open - открывает страницу после перезаписи методом write;
pasterHTML – вставляет текст или HTML-код в область Text-Range;
play – запускает динамический фильтр;
prompt – показывает окно приглашения;
refresh – обновляет содержимое таблицы;
reload – перерисовывает страницу;
remove – удаляет элемент из списка;
reset – имитирует щелчок мышкой на кнопку «reset»;
scroll – разворачивает окна на заданные ширину и высоту;
select – делает активной выделенную часть страницы;
setInterval, setTimeout - устанавливает параметры таймера;
showModalDialog – открывает новую страницу в диалоговом окне;
start – начинает прокрутку строки <MARQUEE>;
stop – останавливает строку <MARQUEE> или динамический фильтр;
submit – имитирует щелчок мышки на кнопку «submit»;
tags – определяет коллекцию всех элементов с заданным тэгом;
write, writeln – записывает текст в HTML – код;
zOrder – устанавливает порядок расположения перекрывающихся элементов.
В следующем примере создаются две страницы ki_page2.htm и ki_page3.htm, которые поочередно вызывают друг друга в одном и том же окне браузера.
На странице ki_page2.htm созданы две кнопки. Кнопка ButtonKI1 загружает в окно страницу
ki_page3.htm, а кнопка ButtonKI2 выгружает текущее окно.
На странице ki_page3.htm с помощью тэга <H1> записан текст «ЗАГОЛОВОК», созданы кнопка ButtonKI и таблица с четырьмя ячейками, в каждой из которых вставлено слово «Текст» с порядковым номером ячейки. Если выделить слово «ЗАГОЛОВОК» двойным щелчком мышки (такую инструкцию содержит диалоговое окно, которое открывается методом alert) , то произойдет
событие
ondblclick,
которое
станет
обрабатываться
соответствующей
процедурой
IDH1KI_ondblclick. В результате методом clear выделение будет удалено и методом click программно нажмется кнопка ButtonKI. После автоматического (программного) нажатия кнопки произойдет событие onclick. Как результат выполнения его событийно-ориентированной процедуры
ButtonKI_onclick, в таблицу вставится ячейка (метод insertCell) и удалится строка (метод
deleteRow). В завершение процедуры кнопка потеряет фокус (метод blur) и затем повторно загрузится страница ki_page2.htm (метод back).
Во всех перечисленных случаях обращение к элементу осуществляется или через его имя (для
кнопки), или через идентификатор (для заголовка, ячейки и строки).
<HTML><HEAD><TITLE>ki_page2.htm</TITLE></HEAD>
<BODY>
5
1
<INPUT type="button" value="Нажми первой" name=ButtonKI1>
<INPUT type="button" value="Нажми второй" name=ButtonKI2>
</BODY>
<SCRIPT LANGUAGE=vbscript><!-Sub ButtonKI1_onclick
Msgbox ("Будет открыта страница ki_page3.htm")
Location.assign ("ki_page3.htm")
End Sub
Sub ButtonKI2_onclick
Msgbox ("Страница будет закрыта")
window.close()
End Sub
--></SCRIPT></HTML>
<HTML><TITLE>ki_page3.htm</TITLE><HEAD>
<BODY>
<H1 id="IDH1KI">ЗАГОЛОВОК</H1>
<INPUT type="button" value="KI_OK" name=ButtonKI>
<TABLE id = "IDtablKI" WIDTH="50%" BORDER=1>
<TR id="IDTRKI"><TD>Текст 1</TD><TD>Текст 2</TD></TR>
<TR><TD>Текст 3</TD><TD>Текст 4</TD></TR></TABLE>
</BODY>
<SCRIPT LANGUAGE=vbscript><!-Sub window_onload
window.alert("Выделите ЗАГОЛОВОК двойным щелчком мышки")
End Sub
Sub IDH1KI_ondblclick
Msgbox ("ЗАГОЛОВОК будет удален")
document.selection.clear()
Msgbox ("Программно будет нажата кнопка")
ButtonKI.click()
End Sub
Sub ButtonKI_onclick
Msgbox ("Вставляется ячейка и удаляется строка таблицы")
IDTRKI.insertCell(1)
IDtablKI.deleteRow(1)
Msgbox ("Кнопка потеряет фокус")
ButtonKI.blur
Msgbox ("Возврат на предыдущую страницу")
history.back()
End Sub
--></SCRIPT></HTML>
ЗАДАНИЯ
Ознакомиться с содержанием теоретической части работы.
С помощью текстового редактора создать страницы ki_page2.htm и ki_page3.htm, включить в
них содержание и программный код в соответствии с примерами из теоретической части работы.
3 Протестировать страницы ki_page2.htm и ki_page3.htm.
1
2
ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ ОТЧЕТА
1
Отчет должен содержать страницы ki_page2.htm и ki_page3.htm, созданные и отредактированные в соответствии с п. 2 задания.
2
Отчет оформляется в электронном виде.
5
3
11 ПРОГРАММНОЕ ИЗМЕНЕНИЕ СТРАНИЦ
11.1 Цель работы
Изучение способов программного изменения страниц при WEB – проектировании.
СОДЕРЖАНИЕ РАБОТЫ
Динамическое изменение стилей
Страница, у которой отдельные участки текста выделены разным шрифтом (и тем самым визуально подчеркнуто их смысловое содержание), как правило, более информативна, и усвоение материала, изложенного на такой странице, происходит быстрее. Еще лучшего результата можно достигнуть, если изменять оформление наиболее важных частей текста динамически, тем самым заставляя пользователя фиксировать свое внимание на особо важных частях текста. Например, таким
образом можно выделить основную мысль темы, определить вариант задания, подчеркнуть особые требования к оформлению работы и т.д.
Чтобы изменить стиль динамически, в зависимости от назначения, выделения или конкретной ситуации, потребовавшей по-новому представить написанный текст, следует предусмотреть соответствующие инструкции в событийно-ориентированных процедурах, обрабатывающих определенные события.
В приведенных ниже примерах показано, каким образом программно изменить шрифт текста,
взаимное расположение отдельных участков текста и переместить текст в новую позицию.
Пример динамического изменения размера и цвета шрифта
В данном примере страница содержит строку текста «Пункт меню». Если к ней приблизить
указатель мышки, то размер шрифта увеличится и отобразится красным цветом. При удалении
указателя от строки параметры ее шрифта вернуться в исходное состояние.
Для достижения требуемого эффекта в тэге <SCRIPT> записаны две процедуры onmousemove
(обрабатывает событие – мышка подведена к элементу) и onmouseout (обрабатывает событие –
мышка отведена от элемента). В каждой из процедур записаны инструкции, по-разному форматирующие шрифт текста. Чтобы сопоставить процедуру с элементом, использован идентификатор
IDPKI, которым отождествляется тэг <P>.
<HTML><HEAD><TITLE>Динамические стили</TITLE></HEAD>
<BODY>
<P id="IDPKI" style="FONT-SIZE: medium; COLOR: black">Пункт меню</P>
</BODY>
<SCRIPT LANGUAGE=vbscript><!-Sub IDPKI_onmousemove
IDPKI.style.fontSize="large"
IDPKI.style.Color="red"
End Sub
Sub IDPKI_onmouseout
IDPKI.style.fontSize="medium"
IDPKI.style.Color="black"
End Sub
--></SCRIPT>
</HTML>
Пример изменения взаимного расположения текстов
Пример показывает оформление страницы, в которой две строки взаимно перекрывают друг
друга, и если щелкнуть мышкой в любом месте страницы, то их взаимное расположение изменится
(рисунок 4).
Первоначальное положение каждой из строк и их взаимное перекрытие задаются на участках
страницы, которые выделены с помощью тэгов <DIV>. Для изменения положения строк в объеме
(в терминах ближе – дальше) динамически изменяется значение свойства zIndex, для чего предусмотрены соответствующие инструкции в процедуре document_onclick.
Рисунок 4 – Изменение перекрытия строк
<HTML><HEAD><TITLE>Наложение текста</TITLE></HEAD>
<BODY>
<DIV id="IDDIVKI1" STYLE="BACKGROUND-COLOR: lime; LEFT: 70px; POSITION: absolute;
TOP: 15px; Z-INDEX: 0">
<FONT SIZE = 7 COLOR = red>Строка 1</FONT>
</DIV>
<DIV id="IDDIVKI2" STYLE="BACKGROUND-COLOR: red; LEFT: 100px; POSITION: absolute;
TOP: 0px; Z-INDEX: 1">
<FONT SIZE = 7 COLOR = green>Строка 2</FONT>
</DIV>
</BODY>
5
5
<SCRIPT LANGUAGE=vbscript><!-Sub document_onclick
IDDIVKI1.style.zIndex = "1"
IDDIVKI2.style.zIndex = "0"
End Sub
--></SCRIPT>
</HTML>
Пример динамического позиционирования текста
В данном примере страница содержит текст заголовка «Строка 1» (в тэге <H1>) и кнопку ButtonKI. При нажатии на кнопку текст заголовка смещается вниз и при достижении определенного
нижнего уровня возвращается в исходную позицию:
<HTML><HEAD><TITLE>Позиционирование</TITLE></HEAD>
<BODY>
<INPUT type="button" name=ButtonKI>
<div ID="DivKI" STYLE="position: relative">
<H1>Строка 1</H1>
</div>
</BODY>
<SCRIPT LANGUAGE="VBScript"><!-Dim i
Sub ButtonKI_onclick()
i=i+50
i>300 then i=0
divKI.style.posTop=i
End Sub
--></SCRIPT>
</HTML>
ЗАДАНИЯ
Ознакомиться с содержанием теоретической части работы.
С помощью текстового редактора создать страницы ki_page4.htm, ki_page5.htm и
ki_page6.htm, включить в них содержание и программный код в соответствии с примерами
из теоретической части работы (ki_page4.htm – пример динамического изменения размера и
цвета шрифта; ki_page5.htm – пример изменения взаимного расположения текстов;
ki_page6.htm – пример динамического позиционирования текста).
3 Протестировать страницы ki_page4.htm, ki_page5.htm и ki_page6.htm.
4 Отредактировать страницу ki_left.htm, изменив стиль содержащихся в ней гиперссылок в соответствии с примером динамического изменения размера и цвета шрифта.
5 Протестировать страницу ki_left.htm.
1
2
ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ ОТЧЕТА
1
Отчет должен содержать страницы:
 ki_page4.htm, ki_page5.htm и ki_page6.htm, созданные и отредактированные в соответствии
с п. 2 задания;
 ki_left.htm, отредактированную в соответствии с п. 4 задания.
2
Отчет оформляется в электронном виде.
5
7
12 ИСПОЛЬЗОВАНИЕ ФИЛЬТРОВ
12.1 Цель работы
Изучение способов применения статических и динамических фильтров при WEBпроектировании.
СОДЕРЖАНИЕ РАБОТЫ
Использование фильтров
Фильтры преобразовывают расположенные на странице строки текста или графические элементы, накладывая на них различного рода визуальные эффекты. Их применение в основном связано с улучшением зрелищного восприятия страницы. С их помощью можно создать эффект движения, изменить уровень прозрачности, зеркально отобразить страницу или ее часть и т.д.
Обоснованное применение фильтров может не только улучшить зрелищность страницы (что
само по себе немаловажно), но и придать ей большую выразительность и информационность.
Например, плавно «растворяя» текст, содержащий название темы, и заменяя его постепенно проявляющимся текстом с перечнем вопросов, включенных в тему, можно сконцентрировать внимание на этой части страницы, и одновременно украсить страницу красивым визуальным эффектом.
Фильтры, предназначенные для создания визуальных эффектов, делятся на статические и динамические. Статические фильтры, как следует из их названия, не имеют протяженности во времени. Они определенным, предусмотренным данным фильтром способом сразу заменяют одно
изображение элемента страницы на такое же, но искаженное. Динамические фильтры управляют
изменением элемента во времени. Они задают определенный способ появления или исчезновения
элемента на странице, а также предопределяют различные варианты перехода одного элемента в
другой.
Статические фильтры
В настоящее время предусмотрено 14 статических фильтров, которые по-разному преобразуют
элементы страницы. Название фильтров и их краткая характеристика приведены в таблице 2. Там
же указаны параметры, которые могут быть использованы в фильтре.
Таблица 2 – Статические фильтры
Название
Параметр
Alpha
Opacity,
Назначение
Устанавливает уровень прозрачности
FinishOpacity,
Style, StartX, StartY, FinishX,
FinishY
Blur
Создает размытый силуэт (эффект дви-
Add, Direction, Strength
жения)
Chroma
Делает определенный цвет прозрачным
Color
DropShadow
Создает смещенный силуэт
Color, OffX,
OffY, Positive
Зеркально
FlipH
отображает
относительно
вертикальной оси
Зеркально отображает относительно го-
FlipV
ризонтальной оси
Glow
Создает «сияющий» силуэт вокруг эле-
Color, Strength
мента
Grayscale
Преобразовывает цвета в оттенки серого
Invert
Инвертирует цвета
Продолжение табл.2
Название
Параметр
Назначение
Проецирует источники освещения (сов-
Light
местно с дополнительно вызываемым методом)
Mask
Shadow
Wave
Сolor
Color, Direction
Add, Freq, LightStrength,
Создает фоновую прозрачную маску
Создает смещение в виде цветной тени
Создает волнистое искажение
Phase, Strength
XRay
Показывает только силуэт
Синтаксис:
filter = “фильтр1(параметр1 = значение, параметр2 = значение . . .) фильтр2(параметр1 =
значение, параметр2 = значение. . . ). . .“ ,
где фильтр – название фильтра (см. таблицу 2);
параметр – название параметра;
значение – значение параметра (обычно числовое значение, задающее уровень от 0 до 10 или
5
9
100 и реже строковое или логическое).
В случае если необходимо включить в одну инструкцию сразу несколько статических фильтров, то они отделяются друг от друга пробелом, а параметры по каждому фильтру записываются в
скобках и перечисляются через запятую.
На рисунке 5 показан фрагмент страницы, иллюстрирующий применение фильтров fliph и alpha. С помощью фильтра fliph рисунок отображается зеркально относительно вертикальной оси.
Фильтр alpha изменяет прозрачность рисунка.
Для достижения подобного эффекта в приведенном ниже тексте страницы предусмотрены инструкции в процедурах ButtonKI1_onclick и ButtonKI2_onclick. Они задают использование соответствующих фильтров. Кроме того, для отмены действия фильтров предусмотрена процедура
ButtonKI3_onclick.
Рисунок 5 - Статические фильтры
<HTML><HEAD><TITLE>Статический фильтр</TITLE></HEAD>
<BODY>
<INPUT type="button" value="Фильтр 1" name=ButtonKI1>
<INPUT type="button" value="Фильтр 2" name=ButtonKI2>
<INPUT type="button" value="Отмена" name=ButtonKI3>
<HR>
<IMG id="ImageKI" alt="" src="ki_image.jpg">
</BODY>
<SCRIPT LANGUAGE=vbscript><!-Sub ButtonKI1_onclick
ImageKI.style.filter="fliph"
End Sub
Sub ButtonKI2_onclick
ImageKI.style.filter="alpha(opacity=50)"
End Sub
Sub ButtonKI3_onclick
ImageKI.style.filter="enabled=0"
End Sub
--></SCRIPT>
</HTML>
Динамические фильтры
Динамические фильтры управляют различными способами появления, исчезновения или взаимозамещения элементов на странице. Всего таких способов двадцать три.
В следующем примере приводится текст страницы, которая позволит исследовать различные
эффекты плавного замещения одного варианта текста другим с помощью каждого из двадцати трех
динамических фильтров.
Номер применяемого фильтра задается значением переменной i. Для изменения фильтра используется счетчик, который увеличивает значение переменной i от 0 до 23. Чтобы вызвать чередование видимых участков текста, процедурой ButtonKI_onclick предусмотрены проверка и изменение свойств visibility соответствующих участков, помеченных идентификаторами FilterKI1 и FilterKI2. В случае если один из них виден, то другой делается невидимым и наоборот. Кроме того, в
процедуре Window_onload, инструкции которой выполняются при открытии страницы, предусмотрено «гашение» одного из текстов с тем, чтобы и в начале работы со страницей не визуализировались бы одновременно оба участка текста. Скорость замены одного текста другим (время действия
фильтра) является постоянной и задается методом play в процедуре ButtonKI_onclick.
<HTML><HEAD><TITLE>Динамический фильтр</TITLE></HEAD>
<BODY>
<input value="ФильтрKI" type=button name=ButtonKI>
<DIV ID="Div1" STYLE="POSITION:ABSOLUTE; WIDTH:250; HEIGHT:200; Left:200; Top:100;
FILTER:revealTrans()">
<DIV ID="FilterKI1" YLE="POSITION:ABSOLUTE;TOP:0;LEFT:0">
<H1>В разделе:</H1>
<H2>Методические указания</H2>
<H2>Конспекты лекций</H2>
<H2>Контрольные вопросы </H2>
</DIV>
<DIV ID="FilterKI2" STYLE="POSITION:ABSOLUTE;TOP:0;LEFT:0">
<H1>Изучение</H1>
<H1>лекционного</H1>
<H1>материала</H1>
</DIV>
</DIV>
6
1
</BODY>
<SCRIPT LANGUAGE="VBScript"><!-dim i
i=0
Sub Window_onLoad()
FilterKI1.style.visibility = "hidden"
End Sub
Sub ButtonKI_onclick
call Div1.filters(0).Apply()
Div1.filters(0).Transition = i
if FilterKI1.style.visibility = "" then
FilterKI1.style.visibility = "hidden"
FilterKI2.style.visibility = ""
else
FilterKI1.style.visibility = ""
FilterKI2.style.visibility = "hidden"
end if
Div1.filters(0).play(2.0)
i=i+1
if 1>23 then i=0
End Sub
--></SCRIPT>
</HTML>
ЗАДАНИЯ
1 Ознакомиться с содержанием теоретической части работы.
2 С помощью текстового редактора создать страницы ki_page7.htm и ki_page8.htm, включить в
них содержание и программный код в соответствии с примерами из теоретической части работы
(ki_page7.htm – пример статического фильтра; ki_page8.htm – пример динамического фильтра).
3 Протестировать страницы ki_page7.htm и ki_page8.htm.
4 Отредактировать страницу ki_top.htm, включив в нее один из динамических фильтров (по выбору студента) таким образом, чтобы содержащиеся на странице строки текста «Концептуальная
информатика» и «Стандартизация и качество» изменялись, плавно переходя одна в другую.
5 Протестировать страницу ki_top.htm.
ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ ОТЧЕТА
1 Отчет должен содержать страницы:
 ki_page7.htm и ki_page8.htm, созданные и отредактированные в соответствии с п. 2 задания;
 ki_top.htm, отредактированную в соответствии с п. 4 задания.
2 Отчет оформляется в электронном виде.
6
3
13 УПРАВЛЕНИЕ СОДЕРЖАНИЕМ СТРАНИЦЫ
13.1 Цель работы
Изучение способов управления содержанием HTML - страницы при WEB-проектировании.
СОДЕРЖАНИЕ РАБОТЫ
При разработке HTML-страницы часто возникает необходимость составить ее таким образом,
чтобы иметь возможность динамически отреагировать на те или иные действия пользователя и в
соответствии с ними изменить содержание страницы в целом или ее части. Стандартами HTML
предусмотрено несколько специальных методов динамического изменения содержания страницы.
Часть из них приводится в данной работе.
Переписывание содержания страницы с помощью метода write
Метод write объекта document дает возможность полностью заменить одно содержание HTMLстраницы другим содержанием. Его использование предполагает, что все составляющие страницы,
входящие как в ее тело, так и в заголовок, будут переписаны. При этом перезапись идет построчно, и
каждая строка, определяющая новое содержание страницы, указывается в отдельной инструкции, которая содержит обращение к методу write и строковую переменную с новым содержанием страницы.
Такая переменная указывается как параметр метода и поэтому записывается в скобках, а поскольку
является строковой, то заключается в кавычки.
Наряду с тем, что метод write обладает мощными средствами обновления содержания страницы, его использование не вызывает затруднений и становится очевидным из приведенного ниже
примера. В нем при нажатии кнопки ButtonKI происходит полная замена содержания страницы
(включая саму кнопку). Для такой замены в состав событийно-ориентированной процедуры ButtonKI_onclick введены инструкции, использующие метод write для построчной записи нового содержания. Переписанная страница будет включать текст «Строка1», поле ввода «TextKI» и иметь
новый заголовок «Страница переписана», который отобразится в окне браузера.
<HTML>
<HEAD>
<TITLE>Переписывание страниц</TITLE>
</HEAD>
<BODY>
<INPUT TYPE=BUTTON Value="Переписать" name = "ButtonKI">
</BODY>
<SCRIPT LANGUAGE = VBScript><!-Sub ButtonKI_onclick
document.write("<HTML>")
document.write("<HEAD>")
document.write("<TITLE>Страница переписана</TITLE>")
document.write("</HEAD>")
document.write("<BODY>")
document.write("<H1>Строка 1</H1>")
document.write("<BR>")
document.write("<INPUT type=""text"" name=TextKI>")
document.write("</BODY>")
document.write("</HTML>")
End Sub
--></SCRIPT></HTML>
Изменение отдельных элементов страницы. Свойства innerText, outerText, innerHTML,
outerHTML
Свойства innerText, outerText, innerHTML, outerHTML позволяют изменить отдельные элементы страницы. Причем эти изменения могут включать как текст элемента (свойства innerText и outerText), так и любой текст или код, входящие в соответствующий тэг (свойства innerHTML и
outerHTML). Кроме того, учитывая, что существует специальный тэг <DIV>, который ограничивает целые области страницы (вместе со всеми находящимися там элементами), имеется возможность в одной инструкции изменить не один, а сразу несколько элементов страницы. Таким образом, практически любую часть страницы можно заключить в тэг <DIV> и переписать заново. При
этом если используются свойства innerText или innerHTML, то редактируется часть страницы
между двумя одноименными крайними тэгами, а если свойства outerText и outerHTML, то в редактируемую область включаются в том числе и тэги, ограничивающие выделяемую область.
В примере, иллюстрирующем рассматриваемую здесь возможность редактирования части
страницы, показано, каким образом с помощью тэга <DIV> (идентификатор id=DIVKI) сначала
нужно ограничить часть страницы с элементами TextKI и RadioKI, а затем переписать, вставляя
вместо них элементы CheckboxKI и ButtonKI:
<HTML><HEAD><TITLE>DIV 1</TITLE></HEAD>
<BODY>
6
5
<INPUT type="button" name=ButtonKI>
<HR>
<DIV ID = DIVKI>
<INPUT type="text" name=TextKI>
<INPUT type="radio" name=RadioKI>
</DIV>
</BODY>
<SCRIPT LANGUAGE=vbscript>
Sub ButtonKI_OnClick
DIVKI.outerHTML = "<DIV ID = DIVKI>" &_
"<INPUT type=""checkbox"" name=CheckboxKI>" &_
"<INPUT type=""button"" name=ButtonKI>" &_
"</DIV>"
End Sub
</SCRIPT>
</HTML>
Редактирование страницы внутри текстовой области TextRange
Текстовая область TextRange представляет собой объект, содержащий ссылки как на текст, так
и на любые другие элементы, присутствующие на странице. Соответственно, используя текстовую
область TextRange, можно изменять любое содержание страницы, а не только ее текстовую часть.
Чтобы работать с областью TextRange, ее следует первоначально создать. Это можно сделать
одним из следующих двух способов:
1 Открыть текстовую область методом CreateTextRange с помощью инструкции
set Объект = body.CreateTextRange() ,
или
set Объект = document.all(Элемент).CreateTextRange() ,
где Объект – имя создаваемого объекта TextRange;
Элемент – имя или идентификатор любого из элементов типа TextBox, Button, TextArea, расположенных на странице.
Например,
set ObjectKI = BodyKI.CreateTextRange() – создать текстовую область ObjectKI, полностью
включающую тело страницы (помечено идентификатором BodyKI)
или
set ObjectKI = document.all("TextareaKI").CreateTextRange() – создать текстовую область Ob-
jectKI, включающую текст в элементе TextareaKI.
2 Создать копию уже существующего объекта с помощью метода duplicate
set ОбъектНовый = ОбъектСтарый.duplicate
После того как объект создан, при необходимости можно изменить его границы. Если область
включает все тело страницы, то обычно для установления новых границ используется маска
Объект.findText(“Маска") ,
где Объект – имя объекта TextRange;
Маска – шаблон для поиска на странице текста, включаемого в область TextRange.
Например, создать текстовую область TextRange, включающую все содержание тела страницы
BodyKI, затем в этой области найти текст «Национальный технический университет Украины» и
создать на его основе новую текстовую область, которая состоит только из найденных слов:
set ObjectKI = BodyKI.CreateTextRange()
ObjectKI.findText("Национальный технический университет Украины")
Другой способ, обычно применяемый для изменения границ текстовой области, заключается в
использовании специальных методов move, moveStart и moveEnd, сдвигающих границы области
TextRange. Эти методы могут использовать в качестве аргументов уточнения: character (символ),
word (слово), sentence (предложение), textedit (текст). Первые три уточнения требуют дополнительно указать числовой параметр, определяющий величину сдвига (по умолчанию равен 1). Если
этот параметр отрицательный, то движение границы области происходит к началу страницы, а если положительный, - то к концу страницы.
В следующем примере в процедуре ButtonKI_onclick формируется текстовая область
ObjektKI1, содержащая все элементы тела страницы BodyKI. Затем копированием создается идентичная ей область ObjektKI2. Далее из области ObjektKI1 выделяется часть, включающая только
слово «университет», и ее левая (начальная) граница сдвигается назад на 15 символов (соответственно переменная NblocKI = -15). Окончательно в область TextRange добавляются пятнадцать
новых символов, ее границы раздвигаются и заключают слова «государственный университет».
Последними двумя инструкциями процедуры этот текст выделяется и отображается в текстовом
поле TextKI:
<HTML><HEAD><TITLE>TextRange 1</TITLE></HEAD>
<BODY ID = BodyKI>
<INPUT TYPE = button name = ButtonKI></INPUT>
<INPUT name=TextKI style="HEIGHT: 22px; WIDTH: 330px">
<HR>
<P> Национальный технический университет Украины </P>
</BODY>
<SCRIPT LANGUAGE=vbscript><!-Dim ObjectKI1, ObjectKI2
set ObjectKI1 = BodyKI.CreateTextRange()
set ObjectKI2 = ObjectKI1
Sub ButtonKI_onclick()
ObjectKI1.findText("университет")
6
7
NblocKI = ObjectKI1.moveStart("character", -15)
ObjectKI1.select()
TextKI.Value = ObjectKI1.text
End Sub
--></SCRIPT>
</HTML>
Чтобы изменить сформированную и уточненную любым из способов текстовую область TextRange, достаточно воспользоваться методом pasteHTML. В примере ниже создана текстовая область ObjectKI (включает все элементы страницы: кнопку ButtonKI, горизонтальную разделительную линию и текст «Национальный технический университет Украины»). При нажатии на кнопку
ButtonKI заменяется текстом «KI» и полем ввода TextKI:
<HTML><HEAD><TITLE>TextRange 2</TITLE></HEAD>
<BODY ID = BodyKI>
<INPUT TYPE = BUTTON name=ButtonKI>
<HR> Национальный технический университет Украины
</BODY>
<SCRIPT LANGUAGE=vbscript><!-Sub ButtonKI_onclick()
Dim ObjectKI
set ObjectKI = document.body.createTextRange()
ObjectKI.pasteHTML("KI<INPUT type=""text"" name=textKI>")
End Sub
--></SCRIPT>
</HTML>
ЗАДАНИЯ
1
2
3
Ознакомиться с содержанием теоретической части работы.
С помощью текстового редактора создать страницы ki_page9.htm, ki_page10.htm,
ki_page11.htm и ki_page12.htm, включить в них содержание и программный код в соответствии
с примерами из теоретической части работы (ki_page9.htm – пример переписывания страницы
с помощью метода write; ki_page10.htm – пример изменения элементов страницы с помощью
свойства outerHTML, ki_page11.htm и ki_page12.htm – комплексные примеры редактирования
страницы внутри текстовой области TextRange).
Протестировать страницы ki_page9.htm, ki_page10.htm, ki_page11.htm и ki_page12.htm.
ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ ОТЧЕТА
1 Отчет должен содержать страницы ki_page9.htm, ki_page10.htm, ki_page11.htm и ki_page12.htm
2 Отчет оформляется в электронном виде.
14 ДИАЛОГОВЫЕ ОКНА И ФОРМЫ
14.1 Цель работы
Изучение основных диалоговых окон и форм, используемых при WEB-проектировании.
СОДЕРЖАНИЕ РАБОТЫ
Стандартные диалоговые окна
Помимо функций Msgbox и Inputbox, которые могут применяться не только в стандартных приложениях , но и в Web-сценариях, при разработке динамических HTML - страниц широко применяются
стандартные диалоговые окна объекта window. Всего предопределено 3 стандартных диалоговых окна:
alert - окно предупреждения (знак «!»), confirm - окно подтверждения (знак «?»), prompt - окно приглашения (содержит поле ввода).
Использование стандартных диалоговых окон однотипно. В приведенном ниже примере вслед
за нажатием кнопки ButtonKI последовательно вызывается каждое из окон. При этом окно alert не
возвращает никаких значений. Окно confirm возвращает значения true или false в зависимости от
того, какая из кнопок этого окна нажата («OK» или «Cancel»). Окно prompt возвращает текст, введенный в его поле ввода.
<HTML><HEAD><TITLE>Диалог1</TITLE></HEAD>
<BODY>
<INPUT TYPE = Button name=ButtonKI>
<INPUT TYPE = Text NAME = TextKI>
</BODY>
<SCRIPT LANGUAGE=VBScript><!-Sub ButtonKI_OnClick
window.alert("Это окно предупреждения")
TextKI.value = window.confirm("Это окно подтверждения")
TextKI.value = window.prompt("Введите текст в поле ввода",
"Шаблон")
End Sub
--></SCRIPT>
</HTML>
6
9
Модальные диалоговые окна
В отличие от стандартного диалогового окна внешний вид и содержание модального окна полностью определяются проектировщиком. Такое окно представляет собой отдельную HTML- страницу и в нее можно включить любые элементы, которые допускается включать в обычные страницы. Модальное диалоговое окно раскрывается на фоне основного окна, его вызвавшего, и до тех
пор пока оно не закрыто, нельзя продолжить какие-либо действия в основном окне.
Синтаксис вызова диалогового окна:
Возврат=window.showModalDialog(URL, Передача, Настройки) ,
где Возврат – значение, возвращаемое из модального диалогового окна;
URL – адрес страницы, вызываемой как модальное диалоговое окно;
Передача – значение, передаваемое в модальное диалоговое окно;
Настройки – параметры, определяющие вид и положение модального диалогового окна. Значения параметров задаются через знак двоеточия, если параметров несколько, то они перечисляются через точку с запятой. Возможные параметры и их допустимые значения приведены в
таблице 3.
В приведенном ниже примере показано содержание основной страницы и страницы, отображаемой как модальное диалоговое окно (ki_model.htm). Основное окно включает два текстовых
поля: TextKI1, в котором записывается текст, предназначенный для передачи в модальное окно, и
TextKI2 – в нем отображается значение строковой переменной, содержащей ответ из модального
окна в основное. Дополнительно в основное окно помещена кнопка ButtonKI, нажатие на которую
приводит к вызову модального диалогового окна (посредством соответствующей событийноориентированной процедуры с инструкцией вызова диалогового окна – страницы из этого же каталога с адресом ki_model.htm).
Рисунок 6 – Основное (слева) и модальное (справа) окна
Таблица 3 – Параметры настройки модального окна
Значение
Тип
Параметр
Значение
Center
yes/no/1/0
help
yes/no/1/0
Dialog-
Число и
maximize
yes/no/1/0
Height
размер
DialogLeft
Число и
minimize
yes/no/1/0
размер
DialogTop
Число и
размер
Dialog-
Число и
Width
размер
Отображаемые кнопки
Размер и положение
Тип Параметр
В странице диалогового модального окна также добавлено два текстовых поля. Первое из них
(TextKI1) при открытии окна (процедура window_onload) автоматически получает значение диалоговой переменной DialogArguments, которая предопределена для передачи данных. Второе поле
(TextKI2) предназначено для трансляции возвращаемых значений из модального окна в основное
(выполняется при нажатии на кнопку ButtonKI). Для этого в сопоставленной кнопке событийноориентированной процедуры ButtonKI_onclick предусмотрена инструкция присвоения. В инструкции для обмена данными используется свойство returnValue объекта window, которому присваивается значение поля TextKI2. Кроме того, в процедуре записан метод close, закрывающий модальное
окно после обмена данными.
<HTML><HEAD><TITLE>ki_page14</TITLE></HEAD>
<BODY>
Введите текст и нажмите кнопку
<INPUT NAME = TextKI1>
<INPUT TYPE = button NAME = "ButtonKI">
<HR><INPUT NAME = TextKI2>
</BODY>
<SCRIPT LANGUAGE = VBScript><!-Sub ButtonKI_OnClick
TextKI2.Value = window.showModalDialog ("ki_model.htm", _
TextKI1.value, "center:yes; dialogHeight=200px")
End Sub
--></SCRIPT>
</HTML>
<HTML><HEAD><TITLE>ki_model</TITLE></HEAD>
<BODY>
Прочтите сообщение
<INPUT TYPE = Text name=TextKI1>
<HR>Напишите ответ и нажмите кнопку
<INPUT TYPE = text NAME = TextKI2 SIZE = 20>
<INPUT TYPE = button NAME = "ButtonKI">
</BODY>
<SCRIPT LANGUAGE = VBScript><!-Sub window_onload
TextKI1.Value = DialogArguments
7
1
End Sub
Sub ButtonKI_OnClick
window.returnValue = TextKI2.Value
close
End Sub
--></SCRIPT>
</HTML>
Использование ссылок
Основным преимуществом использования ссылок для организации диалога является простота
инструкций, построенных на их основе. В приведенном ниже небольшом примере показаны три
варианта записи таких инструкций. В первом случае тэг <A> включает ссылку на страницу
ki_window.htm, которая будет открыта, если щелкнуть мышкой на соответствующий текст этого
тэга. Во втором случае в ссылке задано использование протокола mailto, благодаря чему обращение к ней вызовет редактор почтовой службы с шаблоном письма, в котором в поле «To:» уже будет подставлен заданный ссылкой адрес ([email protected]). В третьем случае содержание тэга
<A> позволит считать файл kibook.zip, расположенный на сервере по указанному в ссылке адресу.
<HTML><HEAD><TITLE>Использование ссылок</TITLE></HEAD>
<BODY>
<A href="ki_window.htm">Щелкните строку для открытия окна</A>
<HR>Щелкните адрес для написания письма
<A href="mailto:[email protected]">[email protected]</A>
<HR>Щелкните адрес, чтобы загрузить файл
<A href="http://dl.sumdu.edu.ua/kup/kibook.zip">FpkBook.zip</A>
</BODY>
</HTML>
Формы
Использование форм - это один из наиболее эффективных на сегодняшний день способов организации диалога, основанных на технологии «клиент - сервер». Форма – это выделенная с помощью тэгов <FORM> часть страницы с определенным набором элементов, объединенных по какому-либо принципу и способных передать свои значения на другую страницу или в другую форму. На одной странице разрешается создавать несколько не вложенных друг в друга форм, каждая
из которых может содержать свой набор элементов и перенаправлять полученные в ней данные на
разные страницы сервера.
Помимо элементов, традиционно используемых на HTML-страницах, в состав формы обычно
включают две специализированные кнопки: Submit (пересылает содержимое интерфейсных элементов формы на сервер) и Reset (очищает все заполненные поля формы). Согласно спецификации
для задания интерфейсных элементов внутри тэга <FORM> применяются тэги <INPUT>, <SELECT> и <TEXTAREA>
Описание тэга <FORM> обычно содержит как минимум два свойства, конкретизирующих
направление и способ передачи данных с клиентской страницы на страницу сервера. Это свойство
action, указывающее на адрес страницы получателя, и свойство method, определяющее метод передачи.
Свойству method по умолчанию присвоено значение get. В соответствии с ним при нажатии
кнопки submit содержимое формы будет добавлено к URL в следующем виде:
action?name=value&name=value&name=value ,
где action - URL (заданное свойством action в тэге <FORM> или URL текущего документа, если
атрибут action не был задан).
При использовании метода post вместо добавлений к URL содержимое формы посылается блоком данных как часть операции post. Если присутствует атрибут action, то значение URL, которое
там находится, определяет, куда направить соответствующий блок данных. Этот метод в настоящее
время считается более предпочтительным, особенно для пересылки больших блоков данных.
Пример формы показан на рисунке 7. Ей соответствует следующий фрагмент страницы, записанный в тэге <FORM>:
Рисунок 7 – Образец формы
<FORM action="http://myserver.edu/kipage.asp" method="post">
<H3>Для получения задания укажите</H3>
Фамилию и инициалы <INPUT name=TextKI1 ><BR>
Номер группы <INPUT name=TextKI3 ><BR>
Номер телефона, почтовый и электронный адрес<BR>
<TEXTAREA name=AreaKI style="HEIGHT: 70px; WIDTH: 329px">
</TEXTAREA><BR>
Удобный способ контакта<BR>
<INPUT type=radio name=RadioKI1> почта
<INPUT type=radio name=RadioKI2> телефон
<INPUT type=radio name=RadioKI3> E-mail<BR>
<INPUT type=submit value="Отправить" name=SubmitKI>
<INPUT type=reset value="Очистить" name=ResetKI>
</FORM>
В примере предписано переслать данные по адресу http://myserver.edu/kipage.asp, используя
метод post. Данные, полученные сервером, могут быть обработаны с помощью какого – либо
специализированного языка. Для asp-файла это могут быть инструкции, построенные на обработке свойств объекта request.
Дополнительно синтаксисом тэга <FORM>, допускается задавать и другие свойства, уточняющие его действия, например, enctype – применяемый тип кодировки, language – язык сценариев, используемый по умолчанию.
ЗАДАНИЯ
1 Ознакомиться с содержанием теоретической части работы.
7
3
2 С помощью текстового редактора создать страницы ki_page3.htm, ki_page14.htm и ki_model.htm
, включить в них содержание и программный код в соответствии с примерами из теоретической
части работы (ki_page13.htm – пример использования стандартных диалоговых окон;
ki_page14.htm и ki_model.htm – пример использования модальных диалоговых окон,
ki_page11.htm ).
3 Протестировать страницы ki_page13.htm, ki_page14.htm и ki_model.htm.
ТРЕБОВАНИЯ К ОФОРМЛЕНИЮ ОТЧЕТА
1 Отчет должен содержать страницы ki_page13.htm, ki_page14.htm и ki_model.htm.
2 Отчет оформляется в электронном виде.
КУРСОВОЕ ПРОЕКТИРОВАНИЕ
СПИСОК ЛИТЕРАТУРЫ
1. Алексеев А.Н., Волков Н.И. Компьютер в учебном процессе высшей школы: Учебное пособие. –
Сумы: Изд-во «Довкiлля», 2001. – 380с.
2. Баранова Ю.Ю, Перевалова Е.А., Тюрина Е.А., Чадин А.А. Методика использования электронных
учебников в образовательном процессе //Информатика и образование. – 2000. - №8. – С. 43 – 47.
3. Стив Холзнер. Dynamic HTML Руководство разработчика. – К.: Издательская Группа BHV, 1998. –
230с.
4. Ben Jacob V, Levin D, Ben Jacob T. The learning environment of the 21’ cen-tury, p.201-211 –
International journal of educational communications №6. - 2000.
7
5
ПРИЛОЖЕНИЕ 2
(справочное)
ПРИЛОЖЕНИЕ 3
(справочное)
Содержание страницы ki_left.htm
Стартовая страница
Об авторе
Фотоальбом
Полезные ссылки
Контактная информация
Содержание страницы ki_top.htm
Домашняя страничка (Ваше Имя, Отчество, Фамилия в родительном падеже)
Размещение фреймов на странице main_ki.htm
frmkitop
frmkibutton
(ki_button.htm)
50 пикселей
(ki_left.htm)
frmkileft
(ki_top.htm)
25%
7
7