Программные средства разработки web-страниц (стр. 2 )

21. В списке Службы и приложения раскрыть список Internet Information Services, щелкнуть правой кнопкой мыши по компоненту Веб-узел по умолчанию, открыть его Свойства.

22. На вкладке Документы в окне свойств задать имя файла, с которого будет начинаться просмотр web-узла, то есть имя файла web-страницы «Главная». Для этого щелкнуть на кнопке Добавить, ввести имя файла index.htm, нажать Применить.

23. Выйти из окна свойств Веб-узла по умолчанию, закрыть окно Управление компьютером.

24. Щелкнуть правой кнопкой мыши на папке, содержащей созданный web-узел, в окне команды Свойства перейти на вкладку Доступ через веб и установить переключатель в позицию Предоставить совместный доступ к папке. В появившемся окне Изменение псевдонима просмотреть или ввести псевдоним папки (например ivanov), установить право доступа Чтение и нажать ОК.

25. Просмотреть (и запомнить) имя компьютера в сети на вкладке Сетевая идентификация в окне свойств Моего компьютера.

26. Просмотреть созданный web-узел через локальную Интранет сеть с соседнего (или со своего) компьютера. Для этого на компьютере надо сначала настроить свойства Internet Explorer:

·  В окне Internet Explorer выполнить команду Сервис|Свойства обозревателя, на вкладке Подключения нажать кнопку Настройка LAN;

·  В появившемся окне Настройка локальной сети установить флажок напротив пункта Использовать прокси-сервер для подключений LAN, указать адрес и порт для прокси-сервера по указанию преподавателя (например, Адрес: cache.engec.ru Порт: 8080), установить флажок напротив пункта Не использовать прокси-сервер для локальных адресов, нажать кнопку Дополнительно;

·  В появившемся окне Параметры прокси-сервера в поле Не использовать прокси-сервер для адресов, начинающихся с ввести сетевое имя своего компьютера (см. пункт 7), предваренное звездочкой (например, *P419-1). Если список исключений был не пуст, добавить сетевое имя в конец списка после точки с запятой;

·  Сохранить все сделанные настройки. Затем ввести в адресную строку Internet Explorer адрес (URL) web-сервера, на котором находится созданный узел. URL-aдрес формируется в виде http://сетевое имя вашего компьютера/псевдоним (например, http://P419-1/ivanov). В окне Internet Explorer должна отобразиться страница «Главная» созданного web-узла.

·  Показать web-узел преподавателю. Просмотреть на своем компьютере web-узел, созданный другими студентами.

Лабораторная работа №3

Создание web-узла на основе фреймов. форматирование страниц

Задание к лабораторной работе: создать четырехстраничный web-узел (рис.10) на основе фреймовых структур. Использовать специальные возможности форматирования FrontPage.

Задание 1. Создать страницу-шаблон, задающую оформление страниц узла.

1.  В MS FrontPage создать новый web-узел на основе шаблона Empty Web (пустой web-узел).

2.  Задать фоновый рисунок новой страницы:

·  выполнить команду Format|Background (фон), в окне команды установить флажок Background picture (фоновая картинка) и нажать кнопку Browse (обзор) для выбора картинки.

·  В появившемся окне Select Background Picture нажать кнопку Clip Art и выбрать какой-либо стандартный рисунок. Нажать кнопку вставки рисунка . Подтвердить сделанный выбор.

·  Сохранить страницу под именем template.htm. При сохранении страницы FrontPage выдаст окно Save Embedded Files с запросом, в какую папку сохранять файл рисунка – сохранить его в папке images. Для этого в появившемся окне нажать кнопку Change folder и открыть папку images.

·  Осветлить фон, щелкнув на кнопке Wash Оut (смывание) панели инструментов Picture, расположенной внизу окна FrontPage (при необходимости вызвать панель командой View|Toolbars).

3.  Для позиционирования содержимого страницы вставить таблицу:

·  В окне команды Table|Insert Table (вставить таблицу) задать следующие параметры:

в группе Size (размер таблицы):

Rows (строк) – 3;

Columns (столбцов) – 2;

в группе Layout (свойства таблицы):

Alignment (выравнивание) – Center;

Border Size (ширина рамки) – 0;

Cell Padding (отступы внутри ячеек) – 10;

Cell Spacing (расстояние между ячейками) – 0;

включить флажок Specify width (определить ширину), установить значение – 100, установить переключатель в позицию In percent (в процентах). Нажать ОК.

·  Преобразовать таблицу к следующему виду:

Объединить ячейки первой строки, выделив их и выполнив команду Table|Merge Cells, выполнить то же для второй строки.

Изменить размер ячеек третьей строки, перетащив границу столбца мышью.

4.  В нижнюю правую ячейку таблицы вставить картинку-миниатюру:

·  вставить понравившуюся картинку командой Insert|Picture|Clip Art (или Insert|Picture|From File, если у вас имеется своя картинка на диске).

·  Настроить параметры миниатюры на вкладке Auto Thumbnail (миниатюра) команды Tools|Page Options (рис.4):

высота миниатюры Height – 60;

рамка отсутствует – установить флажок Border Tickness и задать значение Pixels толщины рамки 0;

эффект объемности – установить флажок Beveled edge.

·  Создать на основе картинки миниатюру: выделить картинку, щелкнув по ней мышкой, после чего щелкнуть на кнопке Auto Thumbnail панели инструментов Picture.

5.  Оформить миниатюру как гиперссылку на уже существующий сайт, открывающуюся в новом окне. Для этого выделить рисунок, щелкнув на нем мышью, и выполнить команду Insert|Hyperlink. В строку URL ввести адрес сайта (например, http://cs.engec.ru), а затем щелкнуть на кнопке Change Target frame (изменить окно назначения) в строке Target frame, в появившемся окне выбрать New Window и сохранить все параметры гиперссылки. Проверить действие ссылки в режиме Preview.

Рис.4. Настройка параметров миниатюры

6.  В левую ячейку нижней строки таблицы (в соседнюю ячейку с миниатюрой) поместить данные о создателе web-узла:

СПбГИЭУ институт <название своего института>,

<№ курса> курс группа <№ группы> <свои фамилия и имя>

7.  Отформатировать введенный текст с помощью стиля Defined Term, задающего одинарный межстрочный интервал. Отцентрировать текст. Добавить ниже слова «Напишите мне!» и оформить их как гиперссылку на почтовый адрес: выделить текст, в окне команды Insert|Hyperlink в строке URL ввести ключевое слово «mailto:» и без пробела – свой почтовый адрес или адрес, указанный преподавателем (например, mailto:[e-mail]).

8.  В среднюю строку таблицы поместить кнопку для перехода в начало страницы:

·  В качестве графического указателя перехода вставить рисунок ClipArt с изображением стрелки из группы рисунков Ориентирование. Отцентрировать рисунок.

·  Выделить рисунок со стрелкой, повернуть его так, чтобы стрелочка указывала наверх с помощью кнопки Rotate Left (повернуть влево) или Rotate Right (повернуть вправо) на панели инструментов Picture.

·  Осветлить изображение с помощью кнопки More Brightness . Удалить (сделать прозрачным) белый фон рисунка стрелки. Для этого нажать кнопку Set Transparent Color (указатель мышки примет вид палочки) и щелкнуть в любом месте белого фона. Настроить размер рисунка.

·  Пометить начало страницы с помощью закладки. Установить курсор в первую ячейку таблицы и вставить закладку, выполнив команду Insert|Bookmark. В окне команды в строке Bookmark name ввести имя закладки «verh» и нажать OK. Проверить работу закладки: установить курсор в низ страницы, в окне команды выбрать закладку «verh» и нажать кнопки Goto и OK. Курсор должен переместиться на закладку.

·  Оформить рисунок со стрелкой как ссылку на созданную закладку. Выделить рисунок и выполнить команду создания гиперссылки Insert|Hyperlink. В окне команды выбрать имя закладки «verh» из раскрывающегося списка Bookmark и нажать OK.

·  Сохранить страницу и просмотреть ее на вкладке Preview.

·  Отредактировать внешний вид кнопки с помощью редактирования тэгов HTML. Перейти на вкладку HTML, найти фрагмент кода HTML, описывающий ссылку на закладку «verh». Этот фрагмент HTML должен выглядеть примерно следующим образом (имя файла и размер рисунка могут быть другими):

<a href="#verh"><img border="0" src="images/ sy01265_2.gif" width="62" height="30"></a>

Задать текст подсказки для рисунка стрелки, добавив параметр ALT в тэг IMG. Перед закрывающей скобкой тэга IMG вставить фрагмент alt="в начало страницы":

<a href="#verh"><img border="0" src="images/ sy01265_2.gif" width="62" height="30" alt="Переход в начало страницы"></a>

·  Сохранить страницу и просмотреть ее на вкладке Preview. При наведении мышки на стрелку появляется подсказка.

Задание 2. Создать структуру web-узла с помощью фреймов.

9.  На основе созданной страницы-шаблона, сохраняя ее под новым именем (File|Save as) и меняя заголовок (кнопка Change в строке Page title команды сохранения), создать четыре новые страницы узла:

файл main.htm – страница «Главная»,

файл carta.htm – страница «Карта»,

файл form.htm – страница «Формы»,

файл gest.htm – страница «Гостевая книга».

Чтобы различать страницы, введите название каждой из них в верхнюю ячейку таблицы (для страницы «Гостевая книга» – текст «Мнение посетителей узла»), отформатировав шрифт текста как для заголовка страницы.

10. Создать страницу с общим заголовком web-узла:

·  создать новую страницу «Заголовок» в файле zagolovok.htm без использования шаблона.

·  Задать фоновый цвет новой страницы, контрастный по отношению к цвету фона шаблона – команда Format|Background, выпадающий список Background, кнопка More Colors (или Custom Colors).

·  В графическом редакторе Paint создать рисунок с фигурным текстом заголовка узла. Создать надпись с первым словом заголовка (кнопка ), настроив с помощью контекстного меню (команда Панель атрибутов текста) вид шрифта. Создать надпись, содержащую второе слово заголовка, предварительно выбрав «прозрачный» режим расположения верхнего объекта и разместив надпись с наложением на предыдущую. Добавить графические элементы (рис.5).

Рис.5. Пример заголовка web-узла

Внимание! При сохранении рисунка следует установить формат GIF, в противном случае в дальнейшем невозможно установить прозрачный фон.

·  Выделить фрагмент рисунка, содержащий текст, и скопировать его в буфер (Правка|Копировать), а затем вставить его в начало страницы «Заголовок».

·  Сделать фон рисунка прозрачным, расположить его вверху страницы по центру.

·  Установить нулевое значение отступа от верха страницы до ее содержимого. Для этого в окне команды File|Properties (или Format|Background) перейти на вкладку Margins (отступы), установить флажок Spesify top margin (задать верхний отступ) и значение 0.

·  Задать для рисунка анимационный эффект при открытии страницы. Выделить рисунок и выполнить команду Format|Dinamic HTML Effects. На появившейся панели инструментов команды выбрать событие Page load (загрузка страницы) из выпадающего списка <Choose an event> (выберите событие). Далее выберите эффект Fly in (вылет) из выпадающего списка <Choose an effect> и настройку From right (с правой стороны) из выпадающего списка <Choose Settings>.

·  Сохранить страницу и выполнить ее предварительный просмотр.

11. Создать страницу-меню для навигации по web-узлу:

·  Создать новую страницу «Меню» в файле menu.htm без использования шаблона. Задать цвет фона страницы – такой же, как и у страницы «Заголовок».

·  Задать для страницы цвет гиперссылок, контрастный по отношению к цвету фона, для этого в окне команды Format|Background выбрать цвета ссылок из выпадающих списков Hyperlink (Еще не просмотренная ссылка), Visited Hyperlink (Просмотренная ссылка) и Active Hyperlink (Активная ссылка). Установить флажок Enable hyperlink rollover effects (эффекты при выборе ссылки), нажать кнопку Rollover style и задать цвет и эффект шрифта (например, All caps) для выбираемой ссылки.

·  На страницу вставить текст – список основных страниц узла, предварительно задав размер шрифта, равным 5. Текст должен быть выровнен по правому краю:

Главная

Карта

Форма

Гостевая книга

·  Выделить поочередно каждую строку и с помощью команды Insert|Hyperlink связать их со страницами узла: main.htm, carta.htm, form.htm и gest.htm.

·  Сохранить страницу и проверить работу ссылок в режиме Preview.

12. Добавить на страницу «Меню» специальные компоненты – счетчик посещений (активен только после публикации узла) и рекламный баннер:

·  Под текстом, отступив вниз одну строку, вставить счетчик посещений web-узла. Выполнить команду Insert|Insert Component|Hit Counter, в окне команды выбрать внешний вид счетчика.

·  Строкой ниже вставить баннер. Установить курсор в нужное место и выполнить команду Insert|Insert Component|Banner Ad Manager. В окне команды настроить параметры отображения баннера (рис.6):

Width – 90, Height – 50;

частота смены рисунков Show each picture for (seconds) – 2;

эффект при смене рисунка Transition effect – Blinds Vertical;

связать баннер с существующим сайтом, для чего занести адрес сайта в поле Link to (например, http://cs.engec.ru);

определить набор сменяемых картинок (не меньше двух), для чего нажать кнопку Add и выбрать понравившиеся картинки из каталога Clip Art.

При необходимости изменить настройки ранее созданного баннера необходимо щелкнуть на нем правой кнопкой мыши и выбрать из контекстного меню команду Banner Ad Manager Properties.

·  Сохранить страницу и просмотреть ее в режиме Preview.

Рис.6. Настройка параметров баннера

13. Создать страницу, содержащую фреймовую структуру:

·  Выполнить команду File|New|Page, выбрать на вкладке Frames Pages шаблон Nested Hierarchy, нажать ОК.

В результате выполнения команды будет создана страница, состоящая из трех частей – фреймов (рис.7); в каждой части имеются кнопки «Set Initial Page» (задать исходную страницу для фрейма), «New Page» (создать новую страницу в качестве исходной).

·  Сохранить страницу в файле index.htm с заголовком (Title) «Учебный узел».

·  В верхней части фреймовой структуры нажать кнопку «Set Initial Page» и выбрать в качестве исходной страницы «Заголовок» (файл zagolovok.htm). Раздвинуть границу верхнего фрейма таким образом, чтобы полностью был виден текст заголовка.

Рис.7. Фреймовая структура узла

·  В левом фрейме выбрать в качестве исходной страницу «Меню» (файл menu.htm), а в нижнем – страницу «Главная» (файл main.htm). Сохранить страницу с фреймами.

14. Отредактировать гиперссылки на странице «Меню» таким образом, чтобы страницы, на которые указывают ссылки, всегда загружались в нижний фрейм:

·  Щелкнуть на гиперссылке «Главная», расположенной в левом фрейме, правой кнопкой мыши и выбрать из контекстного меню команду Hyperlink Properties (Свойства гиперссылки).

В окне команды нажать кнопку Change Target Frame, в появившемся окне Target Frame выделить нижний фрейм, щелкнув мышкой на схематическом изображении фреймовой структуры (рис.8).

·  Повторить ту же процедуру для остальных ссылок страницы «Меню».

·  Сохранить страницу с фреймами, проверить действие ссылок.

Рис.8. Выбор целевого фрейма для гиперссылки

Задание 3. На странице «Главная» разместить многоуровневый сворачивающийся список.

15. Открыть страницу «Главная» (файл main.htm) для редактирования. Вести текст:

На страницах моего узла вы увидите все, что я научился делать с помощью FrontPage:

Форматирование текста и таблицы

Графическое оформление

Гиперссылки

Формы

Фреймы

Активные элементы

16. Оформить список освоенных тем в виде маркированного списка, для чего выделить соответствующие строки и нажать кнопку маркированного списка на панели инструментов.

17. Добавить в список детализацию освоенных тем, оформив его как многоуровневый список.

·  Добавить новую строку после первой строки списка «Форматирование текста и таблицы», нажав кнопку Enter. Преобразовать новую строку в элемент вложенного списка, для чего дважды щелкнуть на кнопке Increase Indent (увеличить отступ) . Набрать в строке текст элемента вложенного списка (рис.9). Правильно созданный список должен быть сплошным, то есть не содержать пустых строк, разделяющих элементы главного и вложенного списков.

·  Форматирование текста и таблицы o  цвет, размер и написание текста o  использование стилей o  позиционирование текста и графики с помощью таблиц o  многоуровневые и сворачивающиеся списки ·  Графическое оформление o  фоновая картинка o  миниатюра o  поворот изображения ·  Гиперссылки o  графические ссылки o  «горячие» области на карте ·  Формы ·  Фреймы ·  Компоненты FrontPage o  баннер o  счетчик посещений o  гостевая книга o  элемент поиска

Рис.9. Многоуровневый список на странице «Главная»

Примечание. Если необходимо после вложенного создать элемент главного списка, то необходимо создать новую строку, а затем дважды щелкнуть на кнопке Decrease Indent (уменьшить отступ) .

18. Сделать созданный многоуровневый список раскрывающимся, для чего установить курсор на любой из элементов главного списка и выполнить команду Format|Bullets and Numbering и на вкладке Plain Bullets включить флажки Enable Collapsible Outlines (сворачивающиеся списки) и Initially Collapsed.

19. Проверить функционирование сворачивающихся списков в режиме Preview.

Задание 4. На странице «Карта» разместить графическую карту с «горячими» областями.

20. На основе шаблона (файл template.htm) создать четыре вспомогательных страниц, на которые будут ссылаться «горячие области» карты:

·  Создать страницу «Север» файле sever.htm. На странице разместить заголовок «Север» и текст:

Север считается эквивалентом «верха», места, где солнце пребывает в зените. Север символизирует мудрость, приобретаемую от предков.

После текста (внутри первой строки таблицы) вставить таблицу из одной строки и трех столбцов. Ячейки вложенной таблицы закрасить соответственно черным, белым и зеленым цветом. Для этого внутри каждой ячейки щелкнуть правой кнопкой мыши и выбрать из контекстного меню команду Cell Properties (свойства ячейки) и выбрать нужный цвет из выпадающего списка Background Color.

В ячейках вложенной таблицы набрать соответственно слова «Китай», «Америка» и «Тибет».

·  Аналогичным образом создать и оформить остальные страницы. Страница «Юг», файл ug.htm, текст страницы:

Юг символизирует производящую силу. Иногда он ассоциируется с «низом», с плодородной силой, выходящей из земли и заставляющей растения давать побеги и расцветать.

Вставить таблицу с красной и двумя желтыми ячейками.

·  Страница «Восток», файл vostok.htm, текст:

Восток – это направление восхода солнца и весны. Это символ начала и обновления.

Таблица с голубой, красной и белой ячейками.

·  Страница «Запад», файл zapad.htm, текст:

Запад – это сторона заката солнца, владения осени. Запад связан и с закатом жизни, уходом из этого мира, переходом в мир иной и духовной трансформацией.

Таблица с белой, синей и красной ячейками.

21. На странице «Карта» под заголовком разместить отцентрированный текст «Модель мира – символизм сторон света». Ниже текста по центру вставить изображение розы ветров из галереи ClipArt. Настроить (увеличить) размер изображения. Сделать прозрачным белый фон изображения.

22. Подписать рядом с лучами розы ветров буквы – указатели направлений сторон света:

·  Написать поверх изображения текст «С», для чего нажать кнопку Text на панели Picture и набрать текст в появившейся области в центре рисунка. Выделить введенный текст и отформатировать – задать размер шрифта, написание – полужирный, синий цвет. Расположить надпись справа от конца верхнего луча розы ветров, перетащив мышью, увеличить область надписи.

·  Аналогичным образом ввести красную букву «Ю» и расположить ее внизу, буквы «В» и «З» расположить соответственно с правой и левой сторон розы ветров. Сохранить изменения в документе.

23. Выделить на изображении пять «горячих» областей так, чтобы каждая ссылалась на страницы с описанием нужной стороны света:

·  Нажать кнопку выбора «горячих» областей Select на панели Picture, затем нажать кнопку Polygonal Hotspot (многоугольная «горячая» область) – указатель мыши примет вид карандаша. Щелкнуть левой кнопкой мыши в верхней части изображения и контур области вокруг верхнего луча розы ветров, щелкая мышью в точках поворота линии. Замкнуть контур «горячей» области, появится окно создания гиперссылки Create Hyperlink. В этом окне выбрать из списка страниц узла файл sever.htm и нажать ОК.

Примечание. При необходимости выйти из режима выделения области нужно дважды щелкнуть на ней мышкой и отказаться от создания гиперссылки. Для удаления неверно выбранной области нужно нажать кнопку просмотра созданных «горячих» областей Highlight Hotspots , выделить нужную область, щелкнув на ней мышкой, и нажать клавишу Del.

·  Аналогичным образом создать «горячие» области для всех остальных сторон света, связывая их с нужными страницами. Сохранить страницу «Карта». Проверить действие карты в режиме Preview.

·  Показать созданный web-узел преподавателю, открыв страницу с фреймовой структурой index.htm в режиме Preview.

Лабораторная работа №4

Создание форм В FRONTPAGE

Задание к лабораторной работе: Добавив на страницы узла формы для организации интерактивного взаимодействия с посетителями узла и поиска.

Задание 1. Добавить форму, позволяющую посетителю отправить данные о себе на e-mail владельца узла.

1.  На странице «Формы» набрать текст «Введите, пожалуйста, о себе следующую информацию:».

2.  Ниже текста создать форму для ввода следующих данных о посетителе: имя, контактный адрес электронной почты, пол, мнение о страницах узла.

·  Для вставки формы выполните команду Insert|Form|One-Line Text Box (вставка текстового поля). Появится текстовое поле и две кнопки. Внутри области формы, обозначенной пунктирной линией, перед текстовым полем ввести текст «Ваше имя:». Увеличить размер текстового поля. Задать значение «fio» для свойства Name (имя) поля – для вызова окна свойств поля дважды щелкнуть на поле мышью или щелкнуть правой кнопкой мыши и выбрать команду Form Field Properties.

·  После первого поля ввода текста внутри формы добавить новую строку (клавишей Enter). Набрать текст «Ваш e-mail:» и вставить еще одно текстовое поле (Insert|Form|One-Line Text Box). Задать имя поля – «mail», увеличить его размер.

·  Ниже ввести текст «Укажите свой пол», вставить таблицу из одной строки и двух столбцов. Задать нулевое значение для толщины границ таблицы. В первый столбец вставить элемент переключатель командой Insert|Form|Radio Button и через пробел – текст «Мужской», во второй столбец – еще переключатель и текст «Женский». Отрегулировать ширину столбцов таблицы. Настроить параметры переключателей:

свойство Group Name для обоих переключателей – pol,

Value для первого переключателя – м, для второго – ж,

Initial State (начальное состояние) для первого переключателя – Selected (выбран), для второго – Not Selected.

Проверить действие переключателей в режиме Preview –может быть выбран только один вариант ответа.

·  Под таблицей набрать текст вопроса «Что Вам понравилось больше всего на моем web-узле?», а строкой ниже – вставить выпадающий список для выбора страницы узла. Выполнить команду Insert|Form|Drop-Down Menu, настроить параметры списка:

свойство Name – vibor;

нажать кнопку Add для ввода элемента списка, в появившемся окне в строку Choice ввести текст «Главная», установить флажок Specify Value (задать значение), ввести в следующую строку значение 1 и нажать ОК;

аналогичным образом добавить элементы списка «Карта» (значение 2), «Формы» (значение 3), «Фреймы» (значение 4);

Height – 1;

Allow multiple selections (множественный выбор) – No.

·  Кнопку «Submit» расположить после кнопки «Reset». Настроить параметры кнопок. Для свойства Value\Label кнопки «Reset» установить значение «Очистить форму», для кнопки «Submit» – «Отправить данные».

3.  После того, как форма полностью готова, настроить ее для отправки данных на e-mail:

·  Перейти в режим непосредственного редактирования тэгов HTML – вкладка HTML.

·  Найти фрагмент HTML, относящийся ко второй форме (после текста «Оставьте информацию о себе»).

·  Отредактировать открывающий тэг формы <FORM>:

для параметра ACTION указать значение «mailto:<E-mail адрес>?Subject<тема сообщения, отсылаемого формой>».

Электронный адрес выяснить у преподавателя (например, action=”mailto:*****@***ru? Subject=Посетитель учебного узла”);

для параметра METHOD установить значение «post»;

добавить параметр ENCTYPE со значением «text/plain».

В целом открывающий тэг формы должен выглядеть примерно следующим образом:

<FORM ACTION=”mailto:*****@***ru? Subject=Посе­ти­тель учеб­­но­го узла” METHOD=”post” ENCTYPE=”text/plain”>

·  Удалить идущий ниже отредактированного открывающего тэга <FORM> комментарий – выделенный серым цветом текст, заключенный в конструкцию <--! -->. Комментарий, который нужно удалить, содержит описание активного компонента FrontPage и выглядит приблизительно как:

<!--webbot bot="SaveResults" U-File="_private/ form_results. txt" S-Format="TEXT/CSV" S-Label-Fields= "TRUE" -->

·  Сохранить страницу «Формы».

4.  Настроить почтовую программу Outlook Express для отсылки почты, имена серверов входящих и исходящих сообщений – POP3 и SMTP соответственно, пароль – s2401).

5.  Проверить функционирование интерактивной формы. Просмотреть web-узел в Internet Explorer. Заполнить форму данными и отослать их на электронный адрес. Просмотреть полученное письмо.

Задание 2. Создать «гостевую книгу» для того, чтобы посетители web-узла могли оставить свои впечатления и пожелания, и компонент поиска информации внутри учебного узла.

6.  Создать страницу подтверждения отправки данных форм «Подтверждение», файл message.htm, без использования шаблона. Задать фон как на странице «Главная». Вверху страницы набрать текст «Данные из формы успешно отправлены», а ниже – «Вернуться на страницу форм». Последнюю строку оформить как гиперссылку на страницу «Формы». Сохранить страницу «Подтверждение».

7.  На странице «Формы» ниже области первой формы набрать текст «Оставить свои пожелания и впечатления в гостевой книге».

8.  Ниже текста вставить новую форму для отправки данных в гостевую книгу.

·  вставить текстовое поле (Insert|Form|One-Line Text Box), перед ним набрать текст «Ваше имя: ». Настроить размер поля, присвоить ему имя «fio».

·  Строкой ниже набрать текст «Ваши пожелания: » и вставить поле для ввода текстового фрагмента, выполнив команду Insert|Form|Scrolling Text Box. Настроить размер поля для ввода

·  Кнопку «Reset» расположить перед кнопкой «Submit». Изменить свойства кнопки «Reset»: подпись (Value\Label) – «Очистить форму». Изменить свойства кнопки «Submit»: подпись (Value\Label) – «Отправить данные».

9.  Настроить форму для записи данных на гостевую страницу. Щелкнуть правой кнопкой мыши в любом месте второй формы, выполнить команду Form Properties:

·  В окне свойств формы установить переключатель в положение Send to (отослать), в поле File Name с помощью кнопки Browse выбрать страницу «Гостевая книга» (файл gest.htm). Нажать кнопку Options (настройка) – будет открыто диалоговое окно Options for Saving Results of Form (параметры сохранения данных формы):

·  В окне настройки параметров сохранения данных формы выбрать вкладку File Results. Установить следующие значения: