Главная (стр. 9 из 10)

Рис.12. Окно свойств списка и ввод нового элемента

· Ниже списка ввести текст «Тип площади: павильон главный корпус», рядом с каждым вариантом (рис.11) вставить элемент переключатель командой Вставка/Форма/Переключатель. Настроить параметры переключателей:

свойство Имя группы для обоих переключателей – type,

Значение для первого переключателя – павильон, для второго – здание,

Начальное состояние для первого переключателя – Выбран, для второго – Не выбран.

Сохранить изменения и проверить действие переключателей в окне браузера – может быть выбран только один вариант ответа.

· Ниже переключателей набрать текст «Ваша фирма представляет: информацию услуги товары». Рядом с каждым и вариантов (рис.11) вставить элемент флажок (Вставка/Форма/Флажок), для каждого из флажков задать свойства:

Имя – reklama,

Значение – соответствующий вид деятельности (например, информация),

Начальное состояние – Установлен.

· Поменять расположение кнопок «Отправить» и «Сброс» (рис.11). Настроить параметры кнопок. Для свойства Значение или подпись кнопки «Сброс» установить значение «Очистить», для кнопки «Отправить» – «Подать заявку». Введенный текст отобразится на кнопках.

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

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

· Найти фрагмент HTML, относящийся к форме и отредактировать параметры открывающей части тэга формы FORM:

для параметра ACTION указать схему mailto (Приложение 1), например:

action=”mailto:expo@mail.ru?Subject=заявка”

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

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

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

<form

action=”mailto:expo@mail.ru?Subject=заявка”

method=”post” enctype=”text/plain”>

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

· Сохранить страницу «Формы» из режима Код, закрыть ее.

· Проверить действие формы в окне браузера, предварительно настроив почтовый клиент MS Outlook Express.

Приложение 3

ТЕХНОЛОГИЯ СОЗДАНИЯ WEB-УЗЛА В MS WORD 2003

Технология создания трехстраничного web-узла с вертикальной структурой на основе таблиц.

1. Создать на диске папку для размещения файлов web-узла. Создать в Word новую страницу Файл|Создать, вкладка Общие, Web-страница.

2. Сохранить страницу в свою под именем index.htm в формате Веб-страница с фильтром, при сохранении задать заголовок страницы («главная») – в окне сохранения файла кнопка Изменить в строке Заголовок.

3. Задать структуру страницы с помощью таблицы. Вставить таблицу, объединить ячейки (рис.13), настроить ее высоту (растянуть строки, начиная с верхней), настроить ширину области меню (левого столбца таблицы).

меню	заголовок
	содержимое
	подвал

Рис.13. Таблица, задающая вертикальную структуру web-узла

4. Настроить ширину таблицы 100% в окне команды Таблица/ Свойства таблицы. Убрать выделение границ ячеек.

5. При необходимости настроить выравнивание текста внутри ячеек – выполнить команду Таблица/Свойства таблицы, вкладка Ячейка.

6. Задать фон страницы – команда Формат/Фон, фон таблицы и/или отдельных ячеек таблицы – команда Формат/Границы и заливка, вкладка Заливка.

7. В ячейку заголовка вставить текстовый или графический заголовок web-узла.

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

9. Создать две пустых страницы, сохранив их под разными именами (например, zayavka.htm и referat.htm для страниц «заявка» и «реферат») в папке web-узла. Закрыть новые страницы.

10. В ячейке меню в столбик набрать текст с названиями всех трех страниц («главная», «заявка», «реферат»). Оформить текст как ссылки на страницы, для этого выделить мышью фрагмент текста и выполнить команду Вставка/Гиперссылка. В окне команды выбрать файл страницы из текущей папки (папки web-узла). Следует следить, чтобы при ссылке на файл страницы был записан относительный адрес (только имя файла). Вставить ссылку «написать» на почтовый адрес – в окне команды Вставка/Гиперссылка выбрать группу Связать с: электронной почтой, задать адрес и тему сообщения.

11. Разместить в ячейке подвал ссылку на начало страницы. Для этого в верхний правый угол страницы вставить закладку - выполнить команду Вставка/Закладка, задать имя закладки (без пробелов, желательно латиницей), нажать кнопку Добавить. В подвал вставить текст «наверх» и оформить его как ссылку на созданную закладку – в окне команды Вставка/Гиперссылка нажать кнопку Закладка и выбрать имя закладки. Сохранить страницу.

12. С помощью команды Файл/Сохранить как Сохранить страницу «главная» (файл index.htm) под именами других страниц (zayavka.htm и referat.htm), переопределяя имена файлов и заголовки страниц.

13. Проверить действие гиперссылок в окне браузера.

14. На каждой странице по отдельности наполнить ячейку содержимое.

Технология создания трехстраничного web-узла с вертикальной структурой фреймов (рамок).

1. Создать папку для размещения файлов web-узла. В папке web-узла создать и оформить три основные страницы: «главная», «заявка», «реферат» и две вспомогательные: «заголовок» с графическим или текстовым заголовком web-узла и «меню». Имена файлов страниц рекомендуется задавать латиницей, все страницы сохранять в формате web -страница с фильтром.

2. Создать страницу с фреймовой структурой (страницу рамок):

· Создать новую web-страницу, а затем выполнить команду Формат|Рамки|Новая страница рамок. Используя панель инструментов Рамки добавить новую рамку слева (для меню), перейти в правую рамку и создать новую рамку сверху (для заголовка) – рис.14.

Рис.14. Страница рамок и панель инструментов Рамки

3. Настроить размер рамок, перетаскивая их границы.

4. Сохранить страницу рамок в папке web-узла под именем index.htm.

5. Определить свойства рамок, вызвав окно настройки свойств с помощью кнопки Свойства рамки

или щелкнув правой кнопкой мыши в области выбранной рамки и выбрав команду Свойства рамки:

· задать страницы, которые будут отображаться в рамках: щелкнуть на кнопке Обзор рядом со строкой Начальная страница, следует следить, чтобы ссылки на страницы были относительными (указывались только имена файлов): в левой рамке располагается страница «меню», в правой верхней – страница «заголовок», в правой нижней – страница «главная».

· задать имена рамок (лучше англоязычные); настроить границы рамок (вкладка Границы) – запретить изменение пользователем размеров меню и заголовка (снять флажок разрешить изменение размеров), отменить для заголовка полосы прокрутки (выбрать Никогда).

6. На странице меню в столбик набрать текст с названиями основных страниц: «главная», «заявка», «реферат». Вставить на страницу меню, отображаемую внутри рамки, гиперссылки на основные страницы:

· Выделить мышью фрагмент текста и выполнить команду Вставка/Гиперссылка. В окне команды выбрать файл соответствующей страницы,

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

Рис.15. Выбор рамки назначения в окне вставки гиперссылки

7. Сохранить сделанные изменения. Открыть страницу index.htm в окне браузера и проверить действие ссылок.

Технология создания web-формы, отправляющей данные на адрес электронной почты (рис.11)

1. На одной из созданных ранее страниц узла («заявка») разместить текст «Заявка на участие в выставке».

2. Ниже текста создать форму для ввода следующих данных: ФИО контактного лица, название организации и контактный телефон (с кодом города), требуемая выставочная площадь (тип выставочного модуля), Размещение выставочной площади (тип) и представленный на выставке тип деятельности фирмы (информация, товары, услуги):

· Вызвать панель инструментов Веб-компоненты (команда Вид/Панели инструментов). Ниже текста «Заявка на участие в выставке» ввести текст «Контактное лицо», затем вставить текстовое поле: установить курсор после текста щелкнуть на кнопке поле

панели инструментов Веб-компоненты. Появится текстовое поле и две линии, область web-формы. Все остальные элементы формы должны вставляться внутри области формы, обозначенной этими линиями (рис.16).