close

Вход

Забыли?

вход по аккаунту

?

2928.Основы Microsoft FrontPage

код для вставкиСкачать
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РОССИЙСКОЙ
ФЕДЕРАЦИИ
ФЕДЕРАЛЬНОЕ АГЕНТСТВО ПО ОБРАЗОВАНИЮ
Государственное образовательное учреждение
высшего профессионального образования
“Оренбургский государственный университет”
Л.Ф. НАСЕЙКИНА
ОСНОВЫ MICROSOFT FRONTPAGE
Рекомендовано Ученым советом государственного образовательного
учреждения высшего профессионального образования “Оренбургский
государственный университет” в качестве учебно-методического пособия для
студентов, обучающихся по программам высшего профессионального
образования по специальности “Программное обеспечение вычислительной
техники и автоматизированных систем”
Оренбург 2006
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
УДК 004.738.5(07)
ББК 32.937.202я7
Н 31
Рецензент
доктор технических наук, профессор Тарасов В.Н.
Н – 31
Насейкина Л.Ф.
Основы Microsoft FrontPage: учебно-методическое пособие / Л.Ф.
Насейкина. - Оренбург: ГОУ ОГУ, 2006. – 145 с.
ISBN….
Учебно-методическое пособие
посвящено
изучению
работы
приложения Microsoft FrontPage – автоматизированного средства создания
Web-страниц.
В рамках учебно-методического пособия рассматриваются вопросы,
касающиеся создания Web-страниц в редакторе Microsoft FrontPage, как
простых, так и самых сложных. Изучается возможность внедрения в
созданные Web-страницы различных элементов Web-дизайна, таких как
фреймы, формы, карты изображений, каскадные таблицы стилей (CSS).
Также представлены возможные варианты создания динамических Webсайтов, с использованием динамического HTML (на основе JavaScript). И,
наконец, рассматриваются правила загрузки готовой Web-страницы на
Web-сервер.
Теоретический материал в пособии дополнен контрольными
вопросами для закрепления материала, а также списком рекомендуемой
литературы.
Учебно-методическое пособие предназначено для студентов,
обучающихся по программам высшего образования по специальности
230105.65, при изучении дисциплины “Сетевые информационные
технологии”.
Н
2404070000
6Л9-06
ББК 32.973.202я7
ISBN…..
© Насейкина Л.Ф., 2006
© ГОУ ОГУ, 2006
2
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
3
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Содержание
Введение................................................................................................................... 6
1 Планирование Web-сайта.................................................................................... 7
2 Создание простых Web-страниц в редакторе Microsoft FrontPage................13
2.1 Главное окно программы Microsoft FrontPage..............................................13
2.2 Главное меню программы Microsoft FrontPage............................................ 14
2.3 Создание, открытие, сохранение и закрытие Web-страницы..................... 16
2.4 Форматирование текста Web-страницы........................................................ 19
2.5 Гиперссылки.................................................................................................... 24
2.6 Таблицы............................................................................................................30
2.6.1 Автоматическая вставка таблицы ......................................................31
2.6.2 Вычерчивание таблицы ...................................................................... 33
2.7 Графика ............................................................................................................33
2.8 Мультимедиа....................................................................................................40
2.9 Web-компоненты............................................................................................. 41
3 Создание сложных Web-страниц в редакторе Microsoft FrontPage ..............47
3.1 Фреймы.............................................................................................................47
3.1.1 Создание фреймовой страницы.......................................................... 48
3.1.2 Свойства фрейма ................................................................................. 53
3.1.3 Гиперссылки во фреймах ....................................................................56
3.2 Карты изображения......................................................................................... 61
3.3 Формы...............................................................................................................63
3.3.1 Создание формы с нуля ...................................................................... 64
3.3.2 Форма обратной связи..........................................................................65
3.3.3 Проверка полей форм ..........................................................................78
3.3.4 Создание страницы подтверждения .................................................. 80
3.3.5 Параметры диалогового окна “Form Properties”............................... 84
3.3.6 Конфигурирование дискуссионного компонента ............................ 91
3.3.7 Конфигурирование регистрационного компонента..........................94
3.3.8 Конфигурирование пользовательских обработчиков Custom ISAPI,
NSAPI, CGI or ASP Script ............................................................................ 96
3.3.9 Сохранение результатов формы ........................................................ 97
4 Создание динамических Web-страниц в редакторе Microsoft FrontPage ...105
4.1 Каскадные таблицы стилей - CSS ............................................................... 105
4.1.1 Активизация каскадных таблиц стилей и DHTML......................... 105
4.1.2 Создание и редактирование внедренных таблиц стилей................106
4.1.3 Создание внешних таблиц стилей.................................................... 109
4.1.4 Настройка внешней таблицы стилей................................................ 111
4.1.5 Определение дублирующих шрифтов во внешних таблицах стилей
....................................................................................................................... 112
4.1.6 Работа с внешними таблицами стилей............................................. 114
4.2 Использование эффектов динамического HTML.......................................116
4.2.1 Использование переходов страниц...................................................119
4
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
5 Загрузка страницы на Web-сервер.................................................................. 122
6 Контрольные вопросы для закрепления материала...................................... 126
Заключение...........................................................................................................128
Список использованных источников.................................................................129
Приложение А......................................................................................................131
Приложение Б...................................................................................................... 132
Приложение В......................................................................................................133
Приложение Г...................................................................................................... 134
Приложение д...................................................................................................... 135
Приложение Е...................................................................................................... 136
Приложение Ж..................................................................................................... 137
5
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Введение
Internet на сегодняшний день в деловой жизни и в обиходе становится
столь же привычным, как раньше был компьютер. Бесчисленное множество
новых информационных технологий прочно входит в наш быт, изменяя наш
образ мысли и деятельности. К одному из новейших направлений
современных информационных технологий относится разработка и дизайн
Wed-страниц. И, как следствие, на рынке появились десятки замечательных
продуктов для работы с Web-страницами, одним из которых является
Microsoft FrontPage.
Microsoft FrontPage призван облегчить создание Web-сайта для сети
Internet. Microsoft FrontPage, органично вписывающийся в пакет приложений
Microsoft Office, стал первым продуктом широкого использования для
Internet, сочетающим в себе клиентскую и серверную части и
обеспечивающим возможность разработки сайта в целом и установки его на
большинство популярных серверов. При этом если пользователю
необходимо создать свой Web-сайт, но с программированием он не знаком,
Microsoft FrontPage способен взять на себя всю необходимую работу по
программированию. Так же необходимо отметить, что Microsoft FrontPage
может стать достаточно серьезным помощником и для профессиональных
разработчиков, владеющих языком разметки гипертекста HTML.
Цель данного учебно-методического пособия - дать представление об
основах Web-технологий и научить студентов создавать с помощью
приложения Microsoft FrontPage и опубликовывать в сети Internet свои
собственные статические и динамические Web-сайты.
Так первая глава пособия содержит описание правильного
планирования и наполнения Web-сайта. Вторая глава посвящена созданию
простых Web-страниц, с использованием форматирования текста, абзацев,
списков, заголовков, рисунков, таблиц, мультимедиа. В третьей главе
рассматриваются особенности создания сложных Web-страниц, с
использованием таких элементов дизайна как фреймы, формы, карты
изображений. Четвертая глава посвящена изучению динамических Webстраниц с использованием таких элементов разметки, как каскадные таблицы
стилей - CSS и динамический HTML (на основе JavaScript). В пятой главе
рассматриваются правила загрузки готовых Web-сайтов на сервер. В шестой
главе представлены контрольные вопросы для закрепления теоретического
материала. В приложениях представлены задания на лабораторные работы по
созданию Web-страниц в редакторе Microsoft FrontPage, правила присвоения
классификационного кода, пример оформления содержания, структура
отчета, а также пример оформления отчета по лабораторной работе.
После окончания изучения представленного учебно-методического
пособия студенты будут уметь разрабатывать общую структуру сайтов,
добавлять интерактивные средства и эффекты мультимедиа и, наконец,
размещать готовые Web-сайты в Internet путем загрузки их на Web-сервер.
6
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
1 Планирование Web-сайта
Правильная организация информации на Web-узле часто не менее
важна, чем сама информация. Если посетители на Web-узле не смогут
найти то, что им нужно, они просто уйдут с него. Под организацией
информации понимается размещение сведений на одну и ту же тему в
одном и том же месте. Разработчики часто применяют на узле древовидную
структуру, схема которой представлена на рисунке 1.1.
Начальная страница
Big Company
О компании
Продукция
Персонал
Как с нами
связаться
Рисунок 1.1 -Типичная древовидная схема Web-узла
Подобная древовидная структура может оказаться наиболее
приемлемой для Web-узлов. Тем не менее, с ее использованием возникает
несколько вопросов: например, сколько можно сделать ответвлений на
первом уровне дерева, насколько широким и насколько глубоким должно
быть это дерево. Если на верхнем уровне будет слишком много вариантов,
дерево будет плоским и в нем можно будет запутаться. Если же дерево
будет слишком глубоким, посетителю придется перебираться с уровня на
уровень, чтобы добраться до нужной информации. Сравнение глубины с
шириной проиллюстрировано на рисунке 1.2.
Глубина
против
ширины
Рисунок 1.2 - Соотношение ширины с глубиной
7
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Узлы с плоской структурой могут ввести пользователя в
замешательство количеством возможных вариантов перемещения.
Желательно, чтобы ответвлений было от шести до восьми, в таком случае
пользователь довольно легко может удержать их в памяти. Слишком
большой выбор вариантов будет уже не оптимальным. В этом случае пользователь не просматривает все варианты, а скользит по краям, например,
первый пункт, последний пункт или где-нибудь в середине. Слишком
малый выбор вариантов может свидетельствовать о том, что создан лишний
уровень; длинная последовательность страниц, на которых присутствует
только по две ссылки, может замедлить всю работу. Может быть, в данном
случае лучше было бы скомпоновать все ссылки на меньшем количестве
страниц. Правильный выбор структуры узла может облегчить
взаимодействие пользователя с информацией. К сожалению, чаще всего
для Web-узлов выбирают древовидную структуру /1/.
Информацию на Web-сервере вовсе не обязательно организовывать в
виде дерева. Иногда имеет смысл связать одну страницу с другой в простую
цепочку. В форме линейной последовательности можно демонстрировать
слайды, вести показ или презентацию чего-либо. Благодаря кнопке
броузера “Назад”, любое движение по линейному Web-узлу превращается в
двустороннее. Идея линейной структуры представлена на рисунке 1.3.
Следующий
вариант
–
линейная
последовательность
с
альтернативами: серия вопросов, отвечая на которые “да” или “нет”,
пользователь переходит к следующему вопросу. Таким образом, создается
обманчивое ощущение взаимодействия с узлом, что привлекает посетителя
гораздо больше, чем чисто линейная структура. Схема линейной
структуры с альтернативами представлена на рисунке 1.4.
Рисунок 1.3 - Пример линейной организации узла
Рисунок 1.4 - Пример линейной структуры с альтернативами
Еще один вариант организации информации — это линейная
последовательность с переходами. Данная структура, представленная на
рисунке 1.5, подходит для представления побочной информации. Например,
во многих анкетах отвечающего просят в зависимости от ответа на
поставленный вопрос ответить на группу следующих вопросов или
пропустить ее и перейти к следующей группе. Web-форма подобной анкеты
8
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
замечательно подходит для представления в виде линейной структуры с
переходами. При работе с ней, отвечающий может пропустить ненужные
вопросы и при этом не потерять общее направление.
Рисунок 1.5 - Пример линейной структуры с переходами
Следующий
вариант
—
линейная
последовательность
с
ответвлениями — прекрасно подходит для представления какой-либо
информации, у которой есть полезные дополнения. Например, электронная
презентация цветов в Web имеет ответвление на информацию о
пчеловодстве. Пользователь может просмотреть ее, а затем вновь
вернуться к главному направлению. Схема структуры представлена на
рисунке 1.6. Данная форма позволяет отклоняться от темы, но при этом
сохранять общее направление. Линейная структура с ответвлениями схожа с
древовидной структурой, положенной на бок.
Рисунок 1.6 - Пример линейной структуры с ответвлениями
Одной из необычных форм организации информации, по крайней
мере в Web, является табличная структура. В табличной структуре активно
используется пространственная организация материала. Это характерно
для многих линейных структур. В таблице существуют понятия “вниз”,
“вверх”, “вправо”, “влево”. Табличная структура, благодаря своей
системности, прекрасно подходит для представления связанных тем, как это
делается, например, в каталогах (столбцы таблицы — это определенный
ассортимент продукции, а каждая ячейка таблицы — это конкретное
изделие того или иного ассортимента). Передвижение от столбца к столбцу
аналогично переходу от одного изделия к его аналогу из другого
ассортимента. Схема табличной структуры представлена на рисунке 1.7.
Древовидная, или иерархическая, структура менее системная, чем
табличная. Узкое древо сужает выбор пользователя, но для того чтобы
добраться до нужной информации, нужно сделать множество щелчков
мышью. С другой стороны, в широком древе выбор шире, так что для
9
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
попадания в нужную точку потребуется меньше щелчков мыши, если
только посетитель точно знает, куда ему нужно идти. Чем шире древо, тем
более размытой становится структурность.
Рисунок 1.7 - Пример табличной структуры
Для решения этой дилеммы можно обратиться к смешанной форме.
Особая ссылка от самого корня дерева может перевести посетителя сразу
же к какой-либо важной информации. Этот прием очень часто используют
на Web-узлах, например, на главной странице помещают ссылку на архив
бесплатных файлов или на какую-либо другую важную страницу. Где-нибудь в глубине узла можно представить посетителю каталог, так что может
пригодиться и табличная структура. А в другой части узла для презентации
можно использовать линейную структуру. Сложные Web-узлы пользуются
именно смешанной иерархической структурой. Ее схема представлена па
рисунке 1.8.
Рисунок 1.8 - Пример смешанной иерархической структуры
Проблема структуры смешанного дерева состоит в том, что она очень
легко может превратиться в сплетение ссылок без ясной организации (Webструктуру). Всякое понятие о пространственности в Web-структуре
отсутствует. Разобраться в этом лабиринте можно только с помощью
“указателей” или таких ориентиров, как, например, главная страница узла.
Преимущества чистой Web-структуры очевидны лишь в том случае, если
пользователь уже знаком с данными. Переход между страницами
осуществляется без проблем, потому что они все связаны друг с другом.
Однако подобная организация информации может оказаться настолько
10
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
запутанной, что отпугнет пользователя от узла. Пример чистой Webструктуры представлен на рисунке 1.9.
При планировании Web-сайта необходимо найти равновесие между
предсказуемостью и выразительностью. Web-форма в некоторых случаях
может оказаться очень выразительной, но вот со стороны пользователя абсолютно непредсказуемой.
Рисунок 1.9 - Пример Web-структуры
С другой стороны линейная форма предсказуема, но совсем
невыразительна. Соотношение этих форм изображено на рисунке 1.10.
Выразительность
Web
табличная
иерархическая
линейная
Предсказуемость
Запутанность
Рисунок 1.10 - Сравнение линейной и Web-структурной форм
Внедрение предложенных форм проходит несколько этапов:
- Испытание. Проверка на разных системах, в разных броузерах.
Проверка пользователями.
- Обслуживание. Обслуживание и обновление узла. Переопределение
целей и возврат на стадию планирования.
Эти этапы имеют свои подэтапы, каждый из которых имеет свои
детали.
Теперь
необходимо
спроектированный
Web-сайт
заполнить
соответствующей информацией. При наполнении Web-узла всегда нужно
помнить два принципа: уникальность и достоверность публикуемых
материалов /2/.
11
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Уникальность является первоочередным требованием к содержанию. В
WWW уже может существовать немало страниц с похожими материалами.
Web-узел должен чем-то отличаться от серверов с аналогичной тематикой,
хотя бы для того, чтобы привлечь к себе внимание. Наличие уникальных
материалов на Web-странице увеличит ее посещаемость. Для того, чтобы
создать уникальный информационный ресурс не обязательно изобретать чтото принципиально новое, можно по-другому оформить уже существующие
ресурсы, но при этом не заставлять клиента тратить много времени на их
поиск. Проверить же ресурсы на уникальность можно с помощью поисковых
серверов. Что касается авторитетности, то все зависит от того, насколько
тщательно подобрана и своевременно обновлена информация.
При создании Web-узла необходимо помнить, что составляющие его
отдельные документы должны быть объединены общим стилем оформления
и средствами навигации. Единый стиль оформления — один из показателей,
отличающих любительский Web-узел от профессионального. Благодаря
единообразно сделанным документам пользователи будут отличать данный
Web-узел от других и запомнят его. Это не означает, что документы должны
быть похожи друг на друга как две капли воды, но общая идея, единый стиль
должны присутствовать непременно /2/.
То же относится и к средствам навигации по страницам. Не стоит
рассчитывать, что посетитель хорошо знает структуру нового Web-узла. Он
должен без труда понимать, где он находится сейчас и как можно попасть в
любое другое место. Необходимо предусмотреть возможность перехода к
первому документу, программе поиска или к схеме Web-узла.
Кроме того, единство стиля позволяет использовать шаблоны —
страницы, содержащие только общие элементы оформления. При
использовании шаблона для получения готовой страницы достаточно лишь
внести в него необходимую информацию. Последовательность, логичность,
постоянство — вот необходимые качества хорошего Web-узла
Теперь, когда определена структура и содержание будущего Webсайта, необходимо остановится на выборе средств его разработки. В данном
пособии мы остановимся на рассмотрении редактора Microsoft FrontPage.
12
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
2 Создание простых
Microsoft FrontPage
Web-страниц
в
редакторе
Программа Microsoft FrontPage предназначена для быстрого создания
Web-сайтов. Ее приобретение избавляет от сложностей построения сайтов с
использованием языка HTML (HyperText Markup Language), основного языка
разметки среды Web. При ее использовании пользователь будет работать
только с несложным меню и набором команд, которые схожи с другими
командами из программ Microsoft, таких как Word, Excel, PowerPoint.
Используя Microsoft FrontPage, можно создавать общую структуру
Web-сайтов, формировать страницы, добавлять интерактивные средства и
эффекты мультимедиа и, наконец, размещать готовые сайты в Internet,
загружая файлы на Web-сервер. Программы Office распознают язык HTML
так же легко, как и свои собственные форматы, поэтому с помощью
FrontPage можно добавлять документы Office напрямую в новые Webстраницы. При этом файлы имеют расширение htm, либо html.
Инструменты и функции программы FrontPage позволяют достаточно
просто и быстро построить Web-сайт, и разместить его в сети Internet или в
локальных корпоративных сетях intranet.
2.1 Главное окно программы Microsoft FrontPage
Главное окно программы представлено на рисунке 2.1. Оно отличается
от аналогичного окна в MS Office тем, что содержит панель видов и кнопки
режимов просмотра.
Панель видов. По умолчанию Microsoft FrontPage открывается в
режиме просмотра страницы “Page” (Страница). Чтобы переключиться в
другой режим необходимо нажать на одну из оставшихся пяти кнопок.
Режим просмотра папок “Folders” (Папки) - используется для работы с
файлами и папками, режим просмотра сообщений “Reports” (Отчеты) - для
доступа к файлам, ссылкам и рисункам открытого Web-сайта, режим
навигации “Navigation” (Переходы) - для просмотра и редактирования
структуры
сайтов,
режим
просмотра
гиперссылок
“Hyperlinks”
(Гиперссылки) – для просмотра ссылок на любые Web-страницы, режим
просмотра задач “Tasks” (Задачи) - для просмотра, создания и редактирования списка задач для сайта.
Режимы просмотра страниц. По умолчанию FrontPage открывается в
обычном режиме – “Normal” (Обычный), в котором можно редактировать
открытую Web-страницу. Для просмотра или редактирования кодировки
страницы необходимо нажать на закладку “HTML” (Просмотр HTMLкодировки). Чтобы увидеть, как страница будет выглядеть в Web-броузере,
необходимо нажать на закладку “Preview” (Предварительный просмотр). Не
обязательно, при этом, запускать Internet Explorer или какой либо другой
13
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
броузер. Если на компьютере не установлена эта программа, то закладка
“Preview” будет скрытой /3/.
Рисунок 2.1 - Главное окно программы Microsoft FrontPage
2.2 Главное меню программы Microsoft FrontPage
Главное меню программы представлено на рисунке 2.2. Меню, которые
расположены в верхней части главного окна Microsoft FrontPage, остаются
неизменными независимо от любых действий. Однако, некоторые меню,
например, “Рамки” (Frames), могут использоваться только при условии, что
происходит работа с Web-страницами, на которых есть фреймы. Основные
пункты меню следующие: “File”, “Edit”, “View”, “Insert”, “Format”, “Tools”,
“Table”, “Frame”, “Window”, “Help”.
Рисунок 2.2 – Главное меню программы Microsoft FrontPage
Меню “File” (Файл) - при помощи команд в меню “File” (Файл) можно
выполнять различные действия: создавать, открывать, закрывать, сохранять,
размещать и импортировать Web-страницы или сайты. Меню “File” также
позволяет задавать настройки печати, изменять общие установки программы
FrontPage и выходить из программы. Меню “File” содержит подпункты
“New”, “Open”, “Close”, “Open Web”, “Close Web”, “Save”, “Save As”,
“Publish Web”, “Import”, “Preview in Browser”, “Page Setup”, “Print Preview”,
14
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
“Print”, “Send”, “Properties”, “Recent Files”, “Recent Webs”, “Exit” (рисунок
2.3).
Рисунок 2.3 – Пункт меню “File” редактора Microsoft FrontPage
Меню “Edit” (Правка) - большинство команд в меню “Edit” работают
так же, как в других программах, за исключением пятого раздела меню. В
нем можно задавать параметры проверки “Check In/Check Out” (Проверка
включена/Проверка выключена), которые позволят избежать конфликтов
версий файлов в том случае, если с Web-сайтом работает несколько
пользователей.
Меню “View” (Вид) - большинство команд в меню “ View” повторяют
те команды, которые выполняются при помощи кнопок на панели видов.
Пункт меню “Toolbars” (Панели инструментов) позволяет включить или
выключить любую из 12 панелей инструментов FrontPage.
Меню “Insert” (Вставка) - меню предназначено для вставки в Webстраницы любой информации от разрывов строк, дат и гиперссылок до
программ на JavaScript и VBScript или компонентов Office XP или Office
2000, например диаграмм и таблиц.
Меню “Format” (Формат) - при помощи команд в меню “Format” можно
изменять внешний вид текста, адреса HTML, а также так называемые темы
FrontPage, определяющие общий дизайн Web-сайта.
15
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Меню “Tools” (Сервис) – меню “Tools” позволяет изменять многие из
настроек программы FrontPage. Оно также предоставляет доступ к словарю
программы FrontPage.
Меню “Table” (Таблица) - в меню “Table” находятся команды,
необходимые для добавления таблиц в страницу или изменения
расположения строк или столбцов.
Меню “Frames” (Рамки) – позволяет работать только в том случае, если
открыта Web-страница, в состав которой входят HTML-фреймы. Страницы с
фреймами создаются при помощи команды “New Page” (Создать страницу)
или клавиш Ctrl+N.
Меню “Window” (Окно) - программа FrontPage позволяет одновременно открывать несколько Web-страниц и сайтов. Меню “Window” служит
для быстрого переключения от одного окна к другому. Также можно это
делать при помощи вкладок страниц в главном окне FrontPage.
Меню “Help” (Справка) - это меню имеется в любой программе
Windows. Оно предоставляет доступ к системе справочной информации
программы FrontPage.
2.3 Создание, открытие, сохранение и закрытие Webстраницы
Для построения Web-страницы, можно воспользоваться одним из трех
способов: создать черновик новой страницы и сохранить его, создать новую
страницу на основе шаблона или открыть существующую, изменить ее и
сохранить под новым именем.
Создание новой Web-страницы. Для создания новой Web-страницы
необходимо перейти в режим редактирования страницы, затем выбрать
команду из меню File => New => Page (Файл => Создать => Страница) либо
щелкнуть мышью по кнопке “New Page” (Создать страницу) (рисунок 2.4). В
появившемся диалоговом окне “New” (Создать) на вкладке “General”
(Общие) необходимо выбрать шаблон новой страницы и нажать OK (рисунок
2.5).
16
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Рисунок 2.4 – Создание новой Web-страницы
Рисунок 2.5 – Выбор шаблона новой Web-страницы в диалогом окне “New”
Также можно создать Web-страницу по одной из существующих схем.
Для этого необходимо выбрать команду из меню Format => Theme (Формат
=> Схема) (рисунок 2.6).
17
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Рисунок 2.6 – Открытие окна “ Themes”
В появившемся диалоговом окне “Themes” (Схемы) необходимо
выбрать схему документа и нажать OK (рисунок 2.7). При этом любую из
схем можно форматировать по своему вкусу (изменить цвет фона,
начертание текста, добавить графику и т.д.).
Рисунок 2.7 - Выбор схемы документа
Открытие существующей Web-страницы. Выбрать команду из меню
File => Open (Файл => Открыть) или щелкнуть мышью по кнопке “Open”.
После появления диалогового окна “Open File” (Открыть файл) необходимо
перейти к тому файлу, который нужно открыть и выполнить двойной щелчок
мышью, либо ввести его имя в поле “File Name” (Имя файла) и нажать на
кнопку “Open” (Открыть). В главном окне программы FrontPage будет
открыта выбранная страница /3/.
18
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Сохранение Web-страницы. Выбрать команду из меню File => Save
As (Файл => Сохранить как). В диалоговом окне “Save As” (Сохранить как),
щелкнуть по кнопке перехода, чтобы найти ту директорию, в которой
следует сохранить страницу. Свойства созданной Web-страницы можно
просмотреть, выбрав пункт меню File => Properties (Файл => Свойства)
(рисунок 2.8).
Рисунок 2.8 – Просмотр свойств Web-страницы
Закрытие Web-страницы. После сохранения страницы выбрать команду из меню File => Close (Файл => Закрыть) или щелкнуть по кнопке с
крестиком в верхнем правом углу страницы. Закроется только Web-страница,
а программа FrontPage будет работать по-прежнему, и можно будет открыть
другую страницу.
2.4 Форматирование текста Web-страницы
Задание фона страницы. Прежде чем перейти к работе над новой
Web-страницей, необходимо задать фон страницы. Это можно сделать,
выбрав пункт меню Format => Background (Формат => Фон) (рисунок 2.9).
19
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Рисунок 2.9 – Выбор закладки “Background”
В появившемся окне “Page Properties” (Свойства страницы)
необходимо выбрать закладку ”Background” (Фон). В редакторе Microsoft
FrontPage имеется возможность задать фоном либо существующий файл,
либо задать цветной фон документа. В первом случае необходимо в закладке
”Background” (Фон) выбрать пункт ”Formatting” (Форматирование) и указать
URL файла, который будет служить фоном нового документа.
Во втором случае необходимо в закладке “Background” выбрать пункт
“Colors” (Цвета). В этом пункте необходимо выбрать подпункт “Background”
из предложенной палитры цветов выбрать необходимый (рисунок 2.10).
Если же в списке предложенных цветов нет необходимого, можно
задать свой цвет, выбрав пункт “More Colors” (Другие цвета). Помимо цвета
фона в этом пункте меню можно задать и цвет текста Web-документа. Для
этого в закладке “Background” необходимо выбрать пункт “Colors”, а далее
выбрать подпункт “Text” (Текст). Здесь можно выбрать цвет из
представленных образцов, либо задать свой, с помощью пункта “More
Colors” (Другие цвета).
20
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Рисунок 2.10 – Выбор фона Web-страницы
Текст. Ввод и форматирование текста во FrontPage аналогично работе
в любом текстовом редакторе: печатать текст, а заданное форматирование
выполняется автоматически. Большинство стандартных способов работы с
текстом в любом текстовом редакторе, таких как выделение, перемещение,
вырезание и копирование, применимо и для программы FrontPage.
В HTML-кодировке изменить шрифт слова с обычного на полужирный
довольно непросто. Программа FrontPage позволяет менять стиль
отображения текста так же легко, как в текстовых редакторах. Для того,
чтобы отформатировать текст, необходимо выбрать пункт меню Format =>
Font (Формат => Шрифт) (рисунок 2.11).
Рисунок 2.11 – Вызов меню форматирования текста
21
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
В появившемся диалоговом окне “Font” (Шрифт), на закладке “Font”,
можно в пункте “Font” изменить тип шрифта, в пункте “Font style” (Стиль
шрифта) - его начертание, а в пункте “Size” (Размер) - размер. Помимо этого,
есть возможность установить цвет текста в пункте “Color” (Цвет). Для этого
необходимо выбрать цвет из палитры в ниспадающем меню справа от кнопки
“Color”. По умолчанию установлен цвет “Automatic” (черный).
В окне “Font” также есть возможность использовать различные
эффекты форматирования текста – пункт “Effect“ (Эффект), а также
предварительно просмотреть отформатированный текст – пункт “Preview“
(рисунок 2.12).
Рисунок 2.12 – Окно форматирования текста
Абзацы. В программе FrontPage можно менять внешний вид абзацев
при помощи настроек выравнивания, отступа, интервала до и после абзаца и
межстрочного интервала. Для этого необходимо перейти в режим
редактирования страницы, затем выбрать пункт меню Format => Paragraph
(Формат => Абзац). После появления диалогового окна “Paragraph” (Абзац)
необходимо воспользоваться списками “Indentation” (Отступ), чтобы задать
отступы слева и справа от текста в пунктах “Before text” (Перед текстом) или
“After text” (После текста). Для задания первой строки абзаца используется
пункт “Indent first line” (Отступить первую строку).
Также можно в окне “Paragraph” (Абзац) задать интервалы между
абзацами. Для этого в пункте “Spacing” (Интервал) необходимо указать
значение “Before” (Перед) и “After” (После). Для задания межстрочного
интервала необходимо
воспользоваться
пунктом “Line spacing”
(Межстрочный). Для предварительного просмотра отформатированного
абзаца предназначено поле “Preview“ (Просмотр). Для подтверждения всех
изменений необходимо нажать OK (рисунок 2.13).
22
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Рисунок 2.13 - Окно форматирования абзацев
Списки. Программа FrontPage позволяет создавать два основных типа
списков: ненумерованные (маркированные) и нумерованные. Для того, чтобы
добавить новый список необходимо перейти в режим редактирования
страницы, затем выбрать пункт меню Format => Bullets and Numbering
(Формат => Списки). Чтобы задать нумерованный список необходимо в
появившемся диалоговом окне “Bullets and Numbering” (Списки) выбрать
закладку “Numbering” (Нумерованный) и указать один из вариантов задания
списка. Для задания маркированного списка необходимо в том же окне
выбрать закладку “Plain Bullet” (Маркированный) и указать один из
вариантов задания списка (рисунок 2.14).
Рисунок 2.14 – Окно работы со списками
23
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Заголовки. Заголовки помогают посетителям сориентироваться на
Web-сайте. Как и газетные заголовки, они позволяют читателю быстро
находить нужную информацию. Следует использовать крупные заголовки
для более важной информации, а маленькие - для менее существенной. Это
имеет очень большое значение, так как при помощи заголовков приводят
страницы Web-сайта в порядок. Также можно менять шрифт, цвет и стиль
заголовков.
2.5 Гиперссылки
Одним из основных преимуществ работы с Web-страницами является
то, что все они являются гипертекстовыми документами. При работе с
гипертекстом переход от одной Web-страницы к другой реализуется посредством гиперссылок или гипертекстовых связей. Гиперссылки связывают
различные Web-документы в единый гипертекстовый документ, который,
имеет название index.html.
Гиперссылки (или просто ссылки) могут быть разными:
- ссылки на другие файлы по всей сети,
- ссылки на файлы из одной папки, либо диска,
- ссылки на разные части внутри одного документа, либо ссылки на
части других документов (метки),
- ссылки, служащие для отправки электронной почты,
- ссылки на внешние ресурсы.
При этом ссылкой может являться слово, либо рисунок. Также если
файл, на который ссылаются, является графическим, то получается ссылка на
рисунок. Программа FrontPage позволяет создавать любые типы ссылок.
Чтобы успешно работать со ссылками, необходимо различать
абсолютные и относительные ссылки.
В
абсолютной
ссылке
показан
полный
адрес
(http://www.books.ru/history.html), а в относительной - только путь к файлу
(/My Web/index.html).
При этом под URL (Universal Resource Locator - универсальный способ
адресации ресурсов в сети) понимается путь до выбранного файла (ресурса).
При создании связи с Web-страницей или файлом, которые находятся
не на одном диске, нужно использовать абсолютную ссылку. Относительная
же ссылка служит для связи файлов с другими сайтами на одном диске.
Преимущество использования относительных ссылок заключается в том, что
можно модифицировать структуру Web-сайта без изменения ссылок.
Для того, чтобы связать существующую Web-страницу с другой с
помощью гиперссылки необходимо перейти в режим редактирования, затем в
исходном документе выделить слово (либо рисунок), которой будет являться
гиперссылкой, затем выбрать команду Insert => Hyperlink (Вставка =>
Гиперссылка) (рисунок 2.15). В появившемся диалоговом окне “Create
Hyperlink” (Создать гиперссылку) необходимо выбрать файл, с которым
будет установлена гиперсвязь (рисунок 2.16).
24
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Рисунок 2.15 – Вставка гиперссылки
Рисунок 2.16 – Окно добавления гиперссылки
Для этого в пункте URL необходимо указать этот файл. Чтобы указать
ссылку на внешний ресурс необходимо выбрать значок
, чтобы указать на
файл с диска необходимо выбрать этот значок
, для ссылки на
электронную почту необходимо выбрать этот значок
. Если же
необходимо связаться с новой страницей, то необходимо выбрать значок
.
25
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Ссылка на внешний ресурс. При создании ссылки на внешний ресурс
необходимо выбрать пункт меню Insert => Hyperlink (Вставка =>
Гиперссылка). В появившемся диалоговом окне “Edit Hyperlink”
(Редактирование гиперссылки) выбрать значок
и в качестве URL указать
полный адрес ресурса в сети Internet, начиная с протокола, по которому к
нему обращаются, например http://www.rambler.ru (рисунок 2.17).
Рисунок 2.17 – Вставка ссылки на внешний ресурс
Рисунок 2.18 – Окно добавления ссылки на электронную почту
26
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Ссылка на электронную почту. При создании ссылки на электронную
почту необходимо, как и при вставке обычных гиперссылок, выбрать пункт
меню Insert => Hyperlink (Вставка => Гиперссылка). В появившемся
диалоговом окне “Edit Hyperlink” выбрать значок
и в качестве URL
необходимо указать электронный адрес почтового ящика. Электронный
почтовый адрес состоит из двух частей, разделенных значком @, где в левой
части указывается имя пользователя, в правой – имя почтового сервера. При
этом обязательно перед электронным адресом указать mailto: (например
mailto: LG-77@mail.ru) (рисунок 2.18).
При просмотре в броузере гиперссылки будут выглядеть следующим
образом (рисунок 2.19).
Рисунок 2.19 – Внешний вид гиперссылок в броузере
Закладки. Также можно создать гиперссылку на часть документа, так
называемую закладку. Закладки позволяют посетителям сайта быстро
переходить в нужные разделы на больших Web-страницах, например, к
заголовкам. Создание закладок состоит из двух шагов: сначала нужно
создать саму закладку, затем гиперссылки, которые на нее указывают.
Закладка может располагаться на текущей или любой другой странице.
При помощи закладок читатели сайта смогут перемещаться по
странице без необходимости просматривать весь документ. Закладки
необязательно должны относиться к заголовкам. Можно создавать ссылку на
фразу, слово, рисунок и даже на один символ.
Для того чтобы создать закладку, необходимо сначала пометить текст
закладкой, то есть, тот текст, к которому при помощи закладки смогут
27
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
переходить посетители Web-сайта, затем выбрать пункты меню Insert =>
Bookmark (Вставка => Закладка) (рисунок 2.20). В открывшемся диалоговом
окне “Bookmark” (Закладка) выделенный текст по умолчанию используется в
качестве названия для закладки (рисунок 2.21). После ввода названия
закладки нажать на кнопку ОК. Созданная закладка будет выделена
подчеркнута пунктирной линией.
Рисунок 2.20 – Создание закладки
Рисунок 2.21 – Окно работы с закладкой
Затем необходимо поставить курсор в то место документа, с которого
будет осуществляться ссылка на закладку, и выбрать команду Insert =>
Hyperlink (Вставка => Гиперссылка). В диалоговом окне вставки
гиперссылки “Edit Hyperlink” (Редактирование гиперссылки) в качестве URL
необходимо выбрать имя закладки, причем перед ним необходимо поставить
знак решетки (#). Примером закладки может являться следующее имя:
#Рекламный сайт (рисунок 2.22). Итак, мы рассмотрели пример, когда
необходимо делать закладки в пределах одного документа. Однако чаще
всего на практике встречаются случаи, когда необходимо сделать закладку на
место в другом документе /4/.
28
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Рисунок 2.22 – Вставка закладки
В этом случае, также необходимо пометить текст, который будет
являться закладкой (в другом документе) и вызвать пункт меню Insert =>
Bookmark (Вставка => Закладка), затем также поставить курсор в том месте
документа, откуда будет осуществляться ссылка на закладку (в исходном
документе) и вызвать пункт меню Insert => Hyperlink (Вставка =>
Гиперссылка). В появившемся диалоговом окне “Edit Hyperlink” необходимо
указать в качестве URL имя файла, в котором находится закладка, затем знак
решетки (#) и имя закладки, например, Глава2.html#История развития сети
Internet (рисунок 2.23).
Рисунок 2.23 – Вставка закладки на другой документ
29
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Настройка цвета гиперссылки. По умолчанию программа FrontPage
выделяет те ссылки, которые не посещались, голубым цветом, а посещенные
ссылки - темно-синим. При желании можно задать для ссылок любые цвета.
FrontPage позволяет задавать цвета для активных ссылок (которые
срабатывают при нажатии на них мышью) и неактивных (которые меняют
цвет при наведении на них указателя мыши).
Чтобы изменить цвета гиперссылок, необходимо выбрать пункт File =>
Properties (Файл => Свойства). После появления диалогового окна “Page
Properties” (Свойства страницы) перейти на вкладку “Background” (Фон).
Затем в разделе “Colors” (Цвета) необходимо выбрать новый цвет в
ниспадающем меню: для активных ссылок – “Active hyperlink” (Активная
гиперссылка), для посещенных – “Visited hyperlink” (Посещенная
гиперссылка), для не посещенных – “Hyperlink”. Если необходимо задать
другой цвет, то нужно выбрать в ниспадающем меню пункт “More Colors”
(Другие цвета). В появившемся диалоговом окне “More Colors” нажать на
кнопку “Select” (Выбрать), выбрать цвет и нажать на кнопку ОК. Цвета
ссылок будут изменены только для текущей страницы (рисунок 2.24).
Рисунок 2.24 - Редактирование фона и цвета гиперссылок
2.6 Таблицы
Благодаря форме, удобной для быстрого просмотра, таблицы
значительно облегчают восприятие текста или изображений. Кроме того,
таблицы можно очень красиво оформить, используя различные рамки и
яркие цвета. Главное преимущество использования таблиц состоит в том, что
30
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
независимо от типа и версии своего броузера посетители увидят все
примененные при их создании эффекты. Именно поэтому так много
коммерческих Web-сайтов разрабатываются на основе таблиц страничного
размера, подобных компоновочным сеткам, используемых при традиционной
верстке.
В редакторе Microsoft FrontPage можно строить таблицы от простых до
самых сложных c помощью пункта меню “Table” (Таблица). При этом
таблицу можно добавить либо автоматическим путем, либо таблицу можно
вычертить.
2.6.1 Автоматическая вставка таблицы
Для того, чтобы вставить таблицу, необходимо перейти в режим
редактирования страницы, затем выбрать пункт меню Table => Insert =>
Table (Таблица => Вставка => Таблица) (рисунок 2.25).
Рисунок 2.25 – Добавление таблицы
В появившемся диалоговом окне “Insert Tablе” (Вставка таблицы)
воспользоваться разделом “Size” (Размер), для установки нужного числа
строк и столбцов таблицы (“Rows”- строки и “Columns” - столбцы).
В поле “Layout” (Разметка) установить следующие параметры таблицы:
“Alignment” (Выравнивание) - по левому краю, по центру или по правому
краю, “Border size ” (Ширина границы) - толщина внешней границы, “Cell
padding” (Отступ) и “Cell spacing ” (Поля ячеек).
Установить флажок “Specify width” (Ширина), чтобы задать ширину
всей таблицы и используя группу переключателей указать, должна ли эта
ширина быть абсолютной (в пикселах) или относительной к ширине Webстраницы посетителя (в процентах) (рисунок 2.26).
Закончив, необходимо нажать кнопку ОК, и таблица будет помещена
на Web-страницу.
31
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Рисунок 2.26 – Окно добавление таблицы
Добавление строк и столбцов таблицы. Для того, чтобы в
построенную таблицу вставить дополнительные строки или столбцы
необходимо выбрать пункт меню Table => Insert => Rows or Columns
(Таблица => Вставка => Строки или Столбцы) (рисунок 2.27).
Рисунок 2.27 – Добавление дополнительных строк и столбцов в таблицу
В появившемся диалогом окне “Insert Rows or Columns” (Вставка Строк
или Столбцов) нужно указать, что необходимо добавить, поставить галочку,
либо “Rows” (Строки), либо “Columns” (Столбцы). В поле “Location”
(Указание) выбрать, как будут располагаться новые строки и столбцы
относительно выбранной (ого), слева или справа, и нажать ОК (рисунок
2.28).
32
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Рисунок 2.28 – Окно добавление строк и столбцов
Разбиение и объединение ячеек. Для того чтобы из простой таблицы
сделать сложную, необходимо воспользоваться возможностью разбиения и
объединения ячеек. Чтобы разбить одну ячейку на несколько необходимо
выбрать пункт меню Table => Split Cells (Таблица => Разбить ячейки). В
появившемся диалоговом окне “Split Cells” (Разбить ячейки) необходимо
выбрать, что необходимо разбить в ячейке: “Split into columns” (Разбить на
столбцы) столбцы либо “Split into rows” (Разбить на строки) строки. Также
указать на какое число разбить ячейку в пункте “Number of columns/ rows”
(Число столбцов/ столбцов) (рисунок 2.29).
Рисунок 2.29 – Окно разбиения ячеек таблицы
Чтобы объединить несколько ячеек таблицы, необходимо выделить эти
ячейки, затем выбрать пункт меню Table => Merge Cells (Таблица =>
Объединить ячейки), после чего выбранные ячейки объединятся в одну.
2.6.2 Вычерчивание таблицы
Рассмотрим второй способ построения таблиц в редакторе FrontPage.
Для того, чтобы вычертить таблицу необходимо выбрать команду Table =>
Draw Table (Таблица => Начертить таблицу). На странице появится указатель
мыши в виде карандаша. Удерживая нажатой левую клавишу мыши,
перемещать карандаш, пока выделенный штриховой линией прямоугольник
не превратится в таблицу нужного размера. Затем отпустить клавишу мыши,
и на странице появится простая таблица.
Разбить таблицу на столбцы и строки, “рисуя” указателем мыши
внутренние границы. Сделать двойной щелчок мышью, чтобы переключить
карандаш обратно в вертикальный курсор. Для изменения размера столбца
или строки таблицы необходимо поместить указатель на границу ячейки, при
этом он примет вид двунаправленной стрелки. Удерживая нажатой левую
клавишу мыши, переместить эту границу в нужном направлении. Отпустить
клавишу мыши, и таблица будет изменена.
2.7 Графика
33
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Форматы Web-изображений. Существует огромное количество
форматов рисунков, но при работе в Internet используются в основном
форматы - GIF, JPEG, PNG. В формате GIF следует сохранять маленькие
рисунки, в формате JPEG - средние и большие, PNG - позволяет хорошо
сжать рисунки без потери информации, как JPEG.
Рисунки не должны занимать много места. Перед тем как добавлять к
Web-странице рисунки, необходимо максимально уменьшить размер их
файлов. Огромные рисунки могут замедлить загрузку страниц до такой
степени, что посетители просто уйдут с сайта, не дожидаясь ее завершения.
Рисунки могут служить для украшения Web-сайта, могут выступать в
роли фонового рисунка (пункт меню “Background”), могут быть частью
таблицы и даже могут выступать в качестве гиперссылки. При этом рисунки
можно добавить как из графического файла, так из картинки.
Для того, чтобы добавить в Web-документ рисунок из файла,
необходимо перейти в режим редактирования страницы, затем выбрать пункт
меню Insert => Picture => From File (Вставка => Рисунок => Из файла). С
помощью проводника выбрать требуемый файл и нажать ОК (рисунок 2.30).
Рисунок 2.30 – Добавление рисунка в Web-документ
Для того чтобы вставить рисунок из картинки, необходимо перейти в
режим редактирования страницы, затем выбрать пункт меню Insert => Picture
=> Clip Art (Вставка => Рисунок => Картинки). Появится диалоговое окно
“Clip Art Gallery” (Галерея Картинок) (рисунок 2.31). FrontPage располагает
целой коллекцией иллюстраций (Clip Art). Для того чтобы вставить любой
рисунок его необходимо сначала выделить в Галерее, затем нажать правую
34
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
кнопку мыши и в контекстном меню выбрать пункт “Копировать”. Затем
поставить курсор в том месте документа, куда необходимо поместить
рисунок, вызвать контекстное меню и нажать “Вставить”,
рисунок
вставиться в Web-документ.
Рисунок 2.31 – Вставка элемента “Clip Art”
Свойства рисунка. Для просмотра свойства рисунка, необходимо
выделить его и выбрать пункт меню Format => Properties (Формат =>
Свойства). В появившемся диалоговом окне “Picture Properties” (Свойства
рисунка) можно просмотреть или изменить свойства рисунка (рисунок 2.32).
35
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Рисунок 2.32 – Диалоговое окно “Picture Properties”
Также это диалоговое окно можно вызвать с помощью контекстного
меню. Это окно состоит из трех вкладок: “General” (Общие), “Video” (Видео)
и “Appearance” (Оформление).
Рассмотрим подробнее каждое из них. На вкладке “General” (Общие)
можно найти следующие пункты:
“Picture source” (Источник изображения). В этом текстовом поле
стоит либо относительный URL изображения, либо абсолютный
URL, если изображение берется из Internet;
“Type” (Тип). В этом разделе задается формат текущего
изображения (GIF или JPEG) и специфические для выбранного
формата параметры. Положение переключателя “Type”
соответствует текущему формату. При выборе опции GIF можно
задать следующие свойства изображения: “Transparent”
(Прозрачный) - автоматически устанавливается в том случае, если
в изображении присутствует прозрачный цвет и “Interlaced”
(Чересстрочный) - изображение при просмотре в броузере будет
проявляться постепенно, сначала грубо, становясь по мере
загрузки более четким. Оба параметра можно задать
одновременно. При выборе опции JPEG становится доступным
поле “Quality” (Качество). По умолчанию значение “Quality”
равно 75;
- “Alternative representations” (Альтернативные представления)
содержит два пункта “Low-Res” (Низкое разрешение) и “Text” (Текст). “LowRes” (Низкое разрешение) - здесь задается изображение с грубым
разрешением, которое во время загрузки изображения с высоким
36
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
разрешением будет отображаться вместо него. “Text” (Текст) - в этом поле
задается альтернативный текст, который появится вместо изображения, если
отображение графики в броузере пользователя отключено или отсутствует
вовсе;
- “Default hyperlink” (Ссылка по умолчанию). Можно использовать
часть изображения или все его целиком в качестве активной области,
служащей гиперссылкой. Если изображение содержит несколько активных
областей, то в этой секции можно задать гиперссылку для тех его частей,
которые не попадают ни в одну активную область.
Вкладка “Video” (Видео) диалогового окна “Picture Properties”,
показанная на рисунке 2.33, позволяет помещать на страницу файлы типа
AVI (аудио- и видеофайлы). Вкладка “Video” содержит следующие пункты:
- “Video source” (Источник видеоданных). В этом поле можно ввести
путь и имя видеофайла или указать файл, используя кнопку “Browse”
(Обзор);
- “Show controls in browser” (Показывать в броузере элементы
управления). При установленном флажке вместе с видеороликом в броузере
будут отображаться следующие элементы управления: “Play” (Пуск), “Stop”
(Стоп) и ползунок перемотки ролика;
- “Repeat” (Повтор). В этом разделе устанавливается частота и момент
начала воспроизведения видеофайла. “Loop” (Цикл) - число повторений
видеофрагмента,
“Loop delay” (Задержка) - временной интервал в
миллисекундах между последовательными повторениями. “Forever” (Всегда)установить этот флажок в том случае, если необходимо, чтобы видеоролик
повторялся все время показа страницы;
- “Start” (Запуск). В этом разделе можно указать момент времени
начала проигрывания видеофайла. “On File Open” (При открытии файла) при установке этого флажка видеоролик будет запущен сразу после загрузки
в броузер. “On Mouse Over” (По курсору мыши) - при установке этого
флажка воспроизведение видеофайла начнется в тот момент, когда
пользователь наведет на его заставку курсор мыши.
37
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Рисунок 2.33 - Вкладка “Video” диалогового окна “Picture Properties”
Третья вкладка диалогового окна “Picture Properties” называется
“Appearance” (Показываться) (рисунок 2.34), с ее помощью можно управлять
некоторыми параметрами оформления изображения.
Вкладка “Appearance” содержит следующие поля:
- “Layout” (Размещение). В этом разделе определяется положение
изображения на странице.
- “Alignment” (Выравнивание). Задает характер выравнивания
изображения по отношению к окружающему тексту.
“Bottom”: выравнивание текста по нижней границе изображения таким
образом, что текст начинается внизу изображения.
“Middle”: выравнивание текста по середине изображения.
“Тор”: выравнивание текста по верхней границе изображения.
“Absbottom”: выравнивание изображения по нижней границе текущей
строки.
“Absmiddle”: выравнивание изображения по середине текущей строки.
“Texttop”: выравнивание верхней границы изображения по верху
самого высокого текста в строке.
“Baseline”: выравнивание изображения по опорной линии текущей
строки.
“Left”: изображение размещается по левому краю страницы,
последующий текст обтекает его по правой стороне.
“Right”: изображение размещается по правому краю страницы,
последующий текст обтекает его по левой стороне.
38
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Рисунок 2.34 - Вкладка “Appearance” диалогового окна “Picture Properties”
- “Border thickness” (Толщина рамки). Задает ширину (в пикселях)
черной рамки вокруг изображения.
“Horizontal
spacing”
(Горизонтальный
интервал).
Задает
горизонтальный интервал в пикселях до ближайшего изображения или текста
с обеих сторон изображения.
- “Vertical spacing” (Вертикальный интервал). Задает вертикальный
интервал до ближайшего сверху и/или снизу изображения или текста.
- “Size” (Размер). В этом разделе инициируется высота “Height” и
ширина “Width” изображения в пикселях. Чтобы вручную изменить размеры
изображения, либо для того, чтобы в код HTML были включены теги
ширины и высоты, необходимо установить флажок “Specify size” (Особый
размер). Размеры исчисляются либо в пикселях, либо в процентах от
размеров окна броузера.
- “Keep aspect ratio” (Сохранить пропорции). Манипулируя размерами
изображения, установить этот флажок, чтобы сохранить пропорции
изображения при изменении одного из размеров.
Использование рисунков в качестве гиперссылок. Как уже
говорилось выше, гиперссылки связывают различные документы в один
единый Web-сайт. При этом в качестве индикатора ссылки может выступать,
не только текст (слово или предложение), но и любой графический рисунок.
Чтобы рисунок сделать гиперссылкой, то есть при нажатии на него
индикатором мышь текущая Web-страница свяжется с другой Webстраницей, необходимо выделить этот рисунок. Затем вызвать пункт меню
Insert => Hyperlink (Вставка => Гиперссылка) и в появившемся диалоговом
39
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
окне указать URL документа, с которым необходимо установить связь, и
нажать ОК. Теперь, при наведении курсора мыши на этот рисунок будет
появляться “рука”, которая указывает на гипертекстовую связь, при нажатии
на этот рисунок осуществится гиперсвязь с другой Web-страницей.
2.8 Мультимедиа
Добавление видео и анимации. Для добавления видео и анимации
необходимо перейти в режим редактирования страницы, затем выбрать пункт
меню Insert => Picture => Video (Вставка => Рисунок => Видео) (рисунок
2.35).
Рисунок 2.35 – Добавление видео на Web-страницу
В появившемся диалоговом окне “Video” (Видео) показываются все
файлы с расширением avi, находящиеся на Web-сайте. Если нужные видеозаписи или анимации там не отображены, то необходимо воспользоваться
ниспадающими меню, значками папок или кнопками, чтобы добраться до
соответствующего файла. После обнаружения файла необходимо возвратиться в диалоговое окно “Video” (Видео), нажать “Open” (Открыть), чтобы
поместить видео или анимацию на Web-страницу.
Чтобы сохранить страницу с добавленными объектами, необходимо
нажать Ctrl+S. Если этот объект находится не на разрабатываемом Webсайте, то появится диалоговое окно “Save Embedded Files” (Сохранить
внедренные файлы), здесь можно нажать “Rename” (Переименовать), чтобы
40
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
изменить имя файла, и “Change Folder” (Сменить папку), чтобы сохранить
этот файл в другом месте.
Закончив, нажать ОК, и видео или анимация будут сохранены. Как
только объект будет вставлен и сохранен, можно настроить для него частоту
повторений и другие параметры.
Добавление на Web-страницу фонового звука. Для того, чтобы
вставить на Web-сайт фоновый звук, необходимо переключиться в режим
редактирования страницы, щелкнуть правой клавишей мыши на ее
свободной части и выбрать пункт “Page Properties” (Свойства страницы) в
контекстном меню. В появившемся диалоговом окне “Page Properties”
(Свойства страницы) выбрать вкладку “General” (Общие) (рисунок 2.36).
Рисунок 2.36 – Добавление фонового звука на Web-страницу
В разделе “Background sound” (Фоновый звук) нажать на кнопку
“Browse” (Обзор), чтобы найти нужный звуковой файл. По умолчанию в
пункте “Loop” (Цикл) установлен флажок “Forever” (Непрерывное
воспроизведение). Если необходимо, чтобы звуковой файл воспроизводился
недолгое время можно снять этот флажок и установить число повторений в
текстовом поле или с помощью списков. Нажать кнопку ОК, и звук станет
элементом Web-страницы. Выбрать закладку “Preview” (Предварительный
просмотр) в нижней части главного окна FrontPage, чтобы воспроизвести
звуковой файл или проверить звучание при помощи Web-броузера.
2.9 Web-компоненты
41
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
FrontPage включает более двух десятков разных мультимедийных
компонентов, которые могут сделать страницы более интерактивными.
Динамические кнопки. Динамические кнопки позволяют применить
ряд интересных эффектов, которые будут активизироваться при наведении на
них указателя мыши посетителями сайта. Для вставки динамической кнопки
необходимо перейти в режим редактирования страницы, затем щелкнуть
мышью в том месте, куда требуется добавить динамическую кнопку, и
выбрать пункт меню Insert => Component => Hover Button (Вставка =>
Компонент => Динамическая кнопка) (рисунок 2.37).
В появившемся диалоговом окне “Hover Button Properties” (Свойства
динамической кнопки) указать текст, шрифт, ссылку, цвет, тип эффекта и
размер будущей кнопки, после этого нажать кнопку ОК (рисунок 2.38).
Чтобы посмотреть, как будет действовать эффект при перемещении
указателя мыши нужно нажать на закладку “Preview” (Просмотр) в нижней
части окна. Пример реализации динамической кнопки представлен на
рисунке 2.39.
Рисунок 2.37 – Окно добавления динамической кнопки
42
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Рисунок 2.38 – Диалоговое окно добавления динамической кнопки
Рисунок 2.39 - Пример реализации динамической кнопки
Вставка бегущей строки. Для того, чтобы осуществить вставку
бегущей строки, необходимо перейти в режим редактирования страницы,
затем выбрать пункт меню Insert => Component => Marquee (Вставка =>
Компонент => Бегущая строка). В открывшемся диалоговом окне “Marquee
Properties” (Свойства бегущей строки) необходимо ввести текст, который
необходимо видеть в виде бегущей строки, настроить направление движения
текста, скорость, специальные эффекты и выравнивание, размер, частоту повторений и цвет фона. Выполнив необходимые настройки, нажать на кнопку
ОК и сохранить страницу (рисунок 2.40).
Бегущая строка будет помещена на Web-страницу. Чтобы посмотреть,
как выглядит бегущая строка, необходимо выбрать вкладку “Preview”.
Пример реализации бегущей строки показан на рисунке 2.41.
43
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Рисунок 2.40 – Вставка бегущей строки
Рисунок 2.41 – Пример реализации бегущей строки
Вставка рекламного баннера. Чтобы осуществить вставку
рекламного баннера, необходимо перейти в режим редактирования страницы,
затем щелкнуть в том месте, где требуется поместить рекламный баннер, и
выбрать пункт Insert => Component => Banner Ad Manager (Вставка =>
Компонент => Менеджер рекламных баннеров). В диалоговом окне “Banner
Ad Manager Properties” (Свойства менеджера рекламных баннеров) установить следующие параметры баннера.
44
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Высота и ширина изображения баннера задается в пунктах “Height”
(Высота) “Width” (Ширина) соответственно. Используя ниспадающее меню
пункта “Transition effect” (Эффект перехода) можно выбрать эффект для
перехода от одного изображения к другому. Затем можно определить
продолжительность показа (в секундах) в текстовом поле “Show each picture
for (seconds)” (Показывать каждый рисунок в течение). При помощи кнопки
“Browse” (Обзор) можно выбрать Web-страницы, на которые попадут
посетители, если щелкнут по этому рекламному баннеру (рисунок 2.42).
Рисунок 2.42 – Диалоговое окно вставки рекламного баннера
Используя кнопку “Add” (Добавить), найти все изображения, которые
необходимо поместить в рекламный баннер. При помощи кнопок “Move Up”
(Переместить вверх) и “Move Down ” (Переместить вниз) уточнить порядок
показа изображений. Сделав выбор, нажать ОК, затем сохранить страницу.
FrontPage может показывать только первый кадр баннерной рекламы,
поэтому необходимо запустить Web-броузер, чтобы просмотреть
воспроизведение всего баннера.
Добавление счетчика посещений страницы. Для того, чтобы
добавить счетчик посещений страницы, необходимо перейти в режим
редактирования страницы, затем выбрать пункт Insert => Component => Hit
Counter (Вставка => Компонент => Счетчик посещений). В появившемся
диалоговом окне “Hit Counter Properties” (Свойства счетчика посещений)
необходимо выбрать в поле “Counter Style” (Стиль счетчика) один из
предложенных стилей для нумерации посещений либо предложить свой
стиль, указав в поле “Custom Picture” (Заказная картинка) свою картинку.
После этого установить флажок “Reset counter to” (Установить счетчик
на) и ввести в текстовое поле число, чтобы счетчик запускался с этим
45
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
конкретным числом. Затем установить флажок “Fixed number of digits”
(Ограниченный размер счетчика), чтобы счетчик обнулялся при достижении
10, 100, 1000 и т.п. Сделав необходимые настройки, нажать на кнопку ОК.
Условный значок счетчика появится на странице, но сам счетчик будет
отображаться только после опубликования сайта в Internet (рисунок 2.43).
Рисунок 2.43 – Добавление счетчика посещений страницы
46
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Создание сложных
Microsoft FrontPage
3
Web-страниц
в
редакторе
3.1 Фреймы
Фреймы (frames) позволяют разбивать страницы на прямоугольные
области, в каждой из которых отображается своя собственная страница.
Можно разместить один или несколько фреймов на странице (такая страница
называется страницей фреймов или фреймсет (frameset)). Это означает, что
можно создать страницу, различные области которой отображают различное
содержание. Изменение содержания в одном из фреймов необязательно
влечет за собой изменение содержания в другом, но если необходимо, то
можно сделать так, чтобы страница, получаемая по ссылке, находящейся в
одном фрейме, отображалась в области другого фрейма.
Фреймсет (frameset) в действительности является отдельной страницей,
содержащей информацию о составляющих страницы фреймов. Редактор
Microsoft FrontPage выводит все части фреймсета вместе, на одной странице
так, как они будут отображаться в броузере. Таким образом, в Microsoft
FrontPage можно создавать, редактировать и просматривать страницы
фреймов в режиме “Normal”, что весьма облегчает их разработку — ведь
раньше над каждой страницей приходилось работать отдельно и результат
своей деятельности можно было увидеть только в брoузере /5/.
Приведем классический пример использования фреймов: страница
поделена на две вертикальные области, каждая из которых представляет
собой отдельный фрейм. Левый фрейм занимает оглавление, содержащее в
себе полный список ссылок на все страницы сайта. Содержимое правой части
страницы меняется в зависимости от того, по какой ссылке в оглавлении
щелкнет пользователь на левой стороне страницы. Если щелкнуть по ссылке,
ведущей на страницу под названием “Записки”, то страница “Записки”
возникнет на правой стороне экрана; если щелкнуть по ссылке “Результаты”,
то отобразится страница “Результаты”, и т. д. (рисунок 3.1).
Рисунок 3.1 – Пример фреймовой страницы
47
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
3.1.1 Создание фреймовой страницы
Для создания фреймовой страницы необходимо перейти в режим
редактирования страницы, затем выбрать в меню пункты File => New => Page
(Файл => Создать => Страница) (рисунок 3.2).
Рисунок 3.2 – Добавление фреймовой страницы
В открывшемся диалоговом окне “New” (Создать) представлены
различные шаблоны Web-страниц. Здесь необходимо выбрать вкладку
“Frames Pages” (Фреймовые страницы). Использовать область “Preview”
(Предварительный просмотр) диалогового окна, чтобы выбрать шаблон
фреймовой страницы, затем нажать на кнопку ОК (рисунок 3.3).
Рисунок 3.3 – Выбор шаблона фреймовой страницы
48
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
После этого появится основанная на этом шаблоне пустая фреймовая
страница, которая в каждом из своих фреймов предлагает два варианта: “Set
Initial Page” (Установить исходную страницу) и “New Page” (Новая страница)
(рисунок 3.4).
Рисунок 3.4 – Пустая фреймовая страница
Рисунок 3.5 - Страница фреймов, готовая для наполнения
49
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Рассмотрим оба эти варианта более подробно.
- “Set Initial Page” (Установить начальную страницу). Начальная
страница (Initial page) — это уже существующая, созданная ранее страница,
которая будет видна при открытии фрейма. Нажав кнопку “Set Initial Page” с
помощью диалогового окна “Create Hyperlink” (Создать гиперссылку) можно
найти и вставить начальную страницу.
- “New Page” (Новая страница). Если нажать эту кнопку, то во фрейм
будет загружена новая чистая страница. Это обычная страница, созданная по
шаблону “Normal” (Обычный).
Как только задали страницы фреймсета, можно приступать к их
заполнению и форматированию. Если щелкнуть кнопкой мыши в любом
месте фрейма, загруженная в нем страница станет активной. Активная
страница отличается от прочих синей рамкой, как это показано на рисунке
3.5. Если щелкнуть на внешней рамке фреймсета, то весь фреймсет целиком
будет выделен цветной рамкой.
Сохранение фрейма. После того, как фреймсет будет заполнен
необходимой информацией, его требуется сохранить. Первое сохранение
страниц фреймов и самой страницы фреймсета происходит в основном так
же, как и в случае первого сохранения обычных страниц, но с одним весьма
существенным отличием. Когда в первый раз сохраняется фрейм, в
диалоговом окне “Save As” (Сохранить как) появляется миниатюрное
схематическое изображение фреймсета, в котором цветом выделена текущая
сохраняемая страница (рисунок 3.6.). При этом главная страница,
объединяющая все фреймы, будет сохранена отдельно, как правило, под
именем Index.html.
При сохранении можно увидеть, какая страница в данный момент
будет сохранена, а также ее имя (рисунки 3.7, 3.8, 3.9).
Рисунок 3.6 – Сохранение основной управляющей страницы фрейма
50
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Всем страницам, кроме основной, можно давать любые имена. Полезно
давать им запоминающиеся имена, особенно это касается фреймов и
управляющего ими фреймсета. Это поможет не запутаться, когда необходимо
будет создавать гтперссылки из одного фрейма на другой фрейм. Например,
можно дать имена по названию фреймов – “Левый фрейм”, “Правый фрейм”,
“Верхний фрейм” и т.д.
Рисунок 3.7 – Сохранение левого фрейма
Рисунок 3.8 – Сохранение верхнего фрейма
51
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Рисунок 3.9 – Сохранение правого фрейма
Разбиение страницы во фреймсете. Уже создав фреймсет по одному
из шаблонов фреймов, можно, к примеру, сообразить, что в нем явно не
хватает еще одного фрейма. Например, при создании гиперссылочного
пособия пользователь решил вынести содержание в отдельный фрейм,
разделив основной. Исправить дело можно двумя различными способами:
через меню “Frame” (Фрейм) или с помощью клавиатуры.
В первом случае необходимо перейти в режим редактирования
страницы, щелчком кнопки мыши выбрать фрейм, который необходимо
разделить. При этом страница этого фрейма будет выделена цветным
контуром. Затем нужно выбрать пункт меню Frames => Split Frame (Фреймы
=> Разбить фрейм) (рисунок 3.10). На экране появится диалоговое окно “Split
Frame” (Разбить фрейм), показанное на рисунке 3.11, в котором можно
указать необходимое число строк и столбцов, на которые можно будет
разбить этот фрейм.
Рисунок 3.10 - Выбор меню разбивки фрейма
52
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Рисунок 3.11 - Диалоговое окно “Split Frame”
В диалоговом окне “Split Frame” (Разбить фрейм) необходимо
установить переключатель в положение “Split into columns” (Разбить на
столбцы) или “Split into rows” (Разбить на строки) и нажать кнопку ОК.
Результат разбиения фреймовой страницы представлен на рисунке 3.12.
Рисунок 3.12 – Результат разбиения фреймовой страницы
3.1.2 Свойства фрейма
Для того, чтобы просмотреть свойства одной из страниц фрейма,
необходимо перейти в режим редактирования, затем активизировать эту
страницу и выбрать в меню “Frames” (Фреймы) опцию “Frame Properties”
(рисунок 3.13). Появится диалоговое окно “Frame Properties” (Свойства
фрейма), показанное на рисунке 3.14, в котором можно изменить все текущие
установки фрейма.
53
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Рисунок 3.13 – Открытие окна “Frame Properties”
Рисунок 3.14 – Диалоговое окно “Frame Properties”
Все изменения, которые будут производиться далее, будут касаться
только отдельно взятой страницы. В текстовом поле “Name” (Имя) можно
поменять имя фрейма. Можно также задать другую начальную страницу,
введя ее имя в текстовом поле “Initial page” (Установить начальную
страницу) или нажав кнопку “Browse” (Обзор). В этом окне есть еще три
секции, предназначенные для более тонкой настройки параметров фрейма:
- “Frame size” (Размер фрейма). В этой секции можно изменить ширину
“Width” (Ширина) и высоту “Row Height” (Высота строки) фрейма.
Опции установки ширины разрешены, если фрейм занимает не всю
ширину окна, а имеет соседей справа или слева. Значение “Relative”
(Относительно) указывает размер фрейма с учетом размеров соседних по
горизонтали фреймов. Значение “Percent” (Проценты) означает ширину
фрейма в процентах от полной ширины окна. Точная ширина фрейма
указывается в пикселях в поле “Pixels” (Пиксели).
54
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
- “Margins” (Края).Здесь задается расстояние от текста до верхнего и
левого краев фрейма. “Width” (Ширина) задает расстояние по ширине
фрейма, “Height” (Высота) задает расстояние от верхнего края фрейма.
- “Options” (Опции). Здесь можно указать, следует ли позволить
пользователю броузера по своему усмотрению изменять размеры фрейма. По
умолчанию флажок “Resizable in Browser” установлен. Здесь же в поле “Show
scrollbars” (Показать полосу прокрутки) можно установить, в каких случаях
броузер будет показывать полосы прокрутки: “If Needed” (По
необходимости), “Never” (Никогда) или “Always” (Всегда). По умолчанию
установлено значение “If Needed”.
Вкладки просмотра фреймов. В редакторе FrontPage при работе с
фреймовыми страницами существует возможность работы с различными
вкладками:
- “Normal” (Обычный). Эта вкладка открывается по умолчанию, это
основной рабочий режим во FrontPage.
- “No Frames” (Без фреймов). Здесь отображается экран в том виде, как
его увидит пользователь, пытающийся просмотреть страницу фреймов в
броузере, не поддерживающем фреймы.
- “HTML” (Код HTML). Здесь можно увидеть код HTML всех фреймов
текущего фреймсета.
- “Frames Page HTML” (Код HTML страницы фреймов). В этом окне
можно просматривать и редактировать код HTML фреймсета.
- “Preview” (Предварительный просмотр). На этой вкладке можно
просмотреть страницу, как она будет выглядеть в броузере.
Приведем пример использования различных вкладок редактора
FrontPage. На рисунке 3.15 представлена Web-страница в режиме
редактирования – “Normal”.
Рисунок 3.15 – Пример фреймовой страницы в режиме редактирования
55
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
А на рисунке 3.16 представлена та же страница, но в режиме просмотра
– “Preview”, то есть так, как она будет выглядеть в броузере.
Рисунок 3.16 - Пример страницы в режиме просмотра
3.1.3 Гиперссылки во фреймах
Остановимся подробнее на рассмотренной выше Web-странице. Она
состоит из трех фреймов, каждый из которых несет свою информационную и
функциональную нагрузку.
Так, верхний фрейм используется в качестве заголовка, в нем
содержится название всей страницы – “Учебное пособие по курсу “Сетевые
информационные технологии”. Левый фрейм содержит оглавление пособия.
Здесь отражен перечень основных глав данного учебного пособия –
“Глобальные вычислительные сети”, “Глобальная компьютерная сеть
Internet” и т.д. Правый фрейм изначально содержит краткую информацию по
изучаемой дисциплине (рисунок 3.16), но если мы нажмем ссылку
“Глобальные вычислительные сети”, то в правом фрейме появится
отображение содержимого файла о глобальных вычислительных сетях
(рисунок 3.20). Другими словами, мы ссылаемся из левого фрейма на правый
фрейм. То есть, используем гиперссылки /5/.
Для того, чтобы использовать гиперссылки во фреймовых страницах
для связи одних фреймов с другими, необходимо перейти в режим
редактирования страниц, затем сделать активной тот фрейм, с которого
необходимо осуществить ссылку (в нашем случае это левый фрейм). После
нужно выбрать пункт меню Insert => Hyperlink (Вставка => Гиперссылка). В
56
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
появившемся диалоговом окне “Edit Hyperlink” (Редактирование
гиперссылки) указать тот файл, содержимое которого отобразится во фрейме.
Имя файла требуется указать в поле URL, в нашем случае это “Глава2.htm”.
Затем в поле “Target frame” (Целевой фрейм) указать тот фрейм, в котором
необходимо открыть файл из URL (рисунок 3.17).
Рисунок 3.17 – Осуществление ссылки из левого фрейма на правый фрейм
В появившемся диалоговом окне “Target Frame” (Целевой фрейм) в
поле “Current frames page” (Текущая фреймовая страница) выбрать тот
фрейм, в котором должен открыться файл, в нашем случае это правый фрейм
(рисунок 3.18).
Рисунок 3.18 – Диалоговое окно “Target Frame”
57
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Также можно указать и другие ссылки. Их можно выбрать в поле
“Common targets” (Общие цели):
- “Page Default” – файл откроется во фрейме, установленном для
текущей страницы по умолчанию,
- “Same Frame” - файл откроется в том же фрейме,
- “Whole Page” - файл откроется в целом окне, т.е. нефреймовом,
“Parent Frame” - файл откроется в “родительском” окне,
“New Window” – файл откроется в новом окне (рисунок 3.19).
Рисунок 3.19 – Работа с полем “Common targets” диалогового окна
“Target Frame”
58
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Рисунок 3.20 – Использование ссылок из одного фрейма в другой
Закладки во фреймах. Помимо обычных гиперссылок, во фреймах
также используются и закладки. Причем, можно делать как закладки в
пределах одного документа, так и закладки в других документах.
Особенностью применения закладок во фреймах является то, что
можно сделать закладку на место в документе, причем ссылка на него будет в
одном фрейме, а открываться файл будет в другом фрейме. Для того, чтобы
вставить закладку из одного фрейма в другой необходимо в файле, на
который нужно сослаться (например, “Глава2.htm”), выделить слово или
фразу, которая будет идентификатором ссылки.
После этого выбрать пункт меню Insert => Bookmark (Вставка =>
Закладка), и в появившемся диалоговом окне “Bookmark” (Закладка) указать
имя закладки, (например “История развития сети Internet”) и нажать ОК. При
этом слово-идентификатор закладки станет подчеркнуто пунктиром (рисунок
3.21).
Рисунок 3.21 – Выделение закладки
Затем во втором фрейме указать гиперссылку на эту закладку. Для
этого нужно перейти в режим редактирования страницы, выбрать пункт
Insert => Hyperlink (Вставка => Гиперссылка). В появившемся диалоговом
окне “Edit Hyperlink” (Редактирование гиперссылки) необходимо указать в
поле URL путь до закладки. Причем, сначала имя файла, затем знак решетки
(#) и после имя закладки (например, “Глава2.html#История развития сети
Internet”).
Далее необходимо указать фрейм, в котором откроется эта закладка.
Для этого выбрать пункт “Target frame” (Целевой фрейм) (рисунок 3.22). В
появившемся диалоговом окне “Target Frame” необходимо выбрать целевой
59
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
фрейм, как при обычной ссылке во фреймах (рисунок 3.19). Получим
фреймовую страницу, в которой, ссылаясь в одном фрейме, можно открыть
часть документа в другом. Пример реализации закладок во фреймсете
представлен на рисунке 3.23.
Рисунок 3.22 – Указание ссылки на место в документе
Рисунок 3.23 - Пример реализации закладок во фрейме
60
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
3.2 Карты изображения
Как известно в качестве гиперссылки при создании Web-страниц может
использоваться не только слово или предложение, но и рисунок. При этом,
при щелчке по этому рисунку будет загружаться Web-страница, связанная с
ним.
Карты изображений отличаются от обычных рисунков-ссылок тем, что
карты изображений разделены на области, каждая из которых загружает
отдельный файл. Карты изображений могут отображать различные фигуры:
круг, квадрат, многоугольник.
Для создания карт изображений используются следующие кнопки
панели инструментов “Pictures” (Картинки) (на рисунке 3.24 они
представлены в правом углу): “Select” (Выбрать), “Rectangle”
(Прямоугольник), “Circle” (Круг), “Polygon” (Многоугольник) и “Highlight
Hotspot” (Выделить активную область).
Рисунок 3.24 - Кнопки панели инструментов “Pictures”
Чтобы создать активную область карты изображений необходимо
выбрать рисунок, выделив его щелчком мыши. При этом панель
инструментов “Picture” активизируется и кнопка “Select” на ней находится в
нажатом положении.
Затем необходимо на панели “Pictures” нажать кнопку,
соответствующую форме задаваемой области: “Rectangle” и “Circle” создают,
соответственно, прямоугольные и круглые активные области, а “Polygon”
позволяет создать активную область практически любой формы. Когда одна
из этих кнопок нажата, курсор, попадая на рисунок, принимает вид
карандаша, символизируя тем самым готовность к очерчиванию активной
области /5/.
Чтобы создать карту изображений, необходимо установить курсор
мыши в то место, где требуется создать активную область, затем нажать
левую кнопку мыши и тащить курсор до тех пор, пока, область не достигнет
нужной формы и размера (рисунок 3.25).
После того, как активная область обрисована, появится диалоговое
окно “Create Hyperlink” (Создать гиперссылку), в котором можно связать
гиперссылкой одну из активных областей с файлом на диске. В окне “Create
Hyperlink” необходимо указать адрес файла, с которым нужно связаться,
точно также как и при создании обычной гиперссылки. Как только одна
область связана с файлом гиперссылкой, можно точно также связать все
остальные области карты изображений.
Иногда бывает сложно запомнить все активные области рисунка.
Чтобы их увидеть, необходимо нажать кнопку “Highlight Hotspot” (Яркое
61
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
пятно) на панели инструментов “Pictures” (Картинки). Изображение при этом
будет удалено и заменено белым фоном, на котором контурами будут
очерчены активные области (рисунок 3.26). После повторного нажатия этой
кнопки восстанавливается нормальный вид изображения.
Рисунок 3.25 – Выделение активной области в картах изображений
62
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Рисунок 3.26 – Пример активизации кнопки “Highlight Hotspot”
3.3 Формы
Формы предназначены для интерактивного общения с посетителями
сайта. К примеру, если необходимо сделать гостевую книгу или страницу,
где посетители бы высказывали свое мнение или указывали на ошибки в
сайте, либо, чтобы посетители дополняли сайт.
Когда посетитель странички заполняет форму и делает щелчок по
предлагаемой кнопке, данные отправляются в программу на сервере.
Программа сервера должна существовать, без нее информация просто не
будет сохранена. При поступлении данных, программа сервера их
обрабатывает. Обработка может быть простой (например, сохранение данных
в файле) или сложной (такой как, сортировка, расчеты по предоставленным
данным или передача подтверждения об отправке информации).
Стандарт, который определяет, как посетители взаимодействуют с
Web-узлом, назван CGI-Common Gateway Interface (Общий Интерфейс
Шлюзов). Программы сервера, имеющие дело с входной информацией типа
форм, называются скриптами CGI и написаны в соответствии со
спецификациями CGI. Когда посетитель делает щелчок по кнопке
представления на рассмотрение, отправляемые им данные поступают в
скрипт, который обеспечивает их обработку в соответствии с тем, что в нем
записано /6/.
С помощью форм можно получить почти любую информацию, которая
нужна от посетителей. В каждой форме имеется как минимум два элемента
или так называемые поля формы - поле для ввода текста или выбора варианта
и кнопка “Отправить”, инициирующая запись результатов из формы в файл
или в программу обработки на сервере. Каждая форма состоит из элементов,
данные из которых при нажатии на кнопку, завершающую форму, совершают
однородное действие - или все вместе отправляются на сервер или все разом
очищаются. FrontPage предлагает следующие поля форм:
однострочное текстовое поле “One-line text box” ;
флажок “Check box” ;
прокручивающееся текстовое окно “Scrolling text box”;
;
переключатель “Radio button” ;
раскрывающийся список или ниспадающее меню “Drop-down
menu” ;
-
нажимающуюся кнопку “Push button”
графическую кнопку “Image”.
;
Каждое из этих полей может быть одним из составляющих элементов
формы, а может в сочетании с кнопкой завершения быть отдельной формой.
При этом каждый элемент формы имеет свое обозначение. По умолчанию
Microsoft FrontPage ставит следующие имена:
- “T1” - для однострочного текстового поля (“One-line text box”);
63
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
-
“S1” - для прокручивающегося текстового окна (“Scrolling text box”);
“C1” - для флажка (“Check box”);
“R1” - для переключателя (“Radio button”);
“D1” - для раскрывающегося списка (“Drop-down menu”);
“В1” - для нажимающейся кнопки (“Push button”);
“I1”- для графической кнопки (“Image”).
3.3.1 Создание формы с нуля
Для того, чтобы создать форму с нуля, необходимо сначала открыть
существующую или создать новую Web-страницу, затем щелкнуть в том
месте страницы, где необходимо вставить форму, и выбрать пункт меню
Insert => Form => Form (Вставка => Форма => Форма) (рисунок 3.27).
Рисунок 3.27 – Создание элемента дизайна формы
Форма, ограниченная штриховым контуром, будет вставлена в
страницу вместе с кнопками “Submit” (Отправить) и “Reset” (Очистить).
Чтобы обеспечить достаточное пространство для работы внутри формы
необходимо нажать несколько раз “Enter” (рисунок 3.28). После этого можно
приступать к добавлению и редактированию полей формы.
Поля формы можно добавить с помощью того же пункта меню Insert
=> Form => One-Line Text Box (Текстовое поле), либо Scrolling Text Box
(Прокручивающееся текстовое окно), либо Check Box (Флажок), либо Radio
Button (Переключатель), либо Drop-Down Menu (Раскрывающийся список
или Ниспадающее меню), либо Push Button (Кнопка).
64
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Помимо создания с нуля, форму можно создать и на основе
существующего шаблона. При этом шаблон можно настроить по своему
вкусу. В шаблонах FrontPage есть и форма подтверждения, и форма обратной
связи, и даже Мастер Форм. Проиллюстрируем добавление новых полей на
примере формы обратной связи.
Рисунок 3.28 – Форма, созданная с нуля
3.3.2 Форма обратной связи
Для того, чтобы создать форму обратной связи необходимо выбрать
пункт меню File => New (Файл => Создать), на вкладке “General” (Общие)
диалогового окна “New” (Создать) выбрать тип страницы “Feedback Form”
(Форма обратной связи) и нажать кнопку ОК (рисунок 3.29).
65
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Рисунок 3.29 - Диалоговое окно “New”, вкладка “General”
Когда страница будет сгенерирована и загружена в редактор, ее
необходимо сохранить на текущем сайте. Форма обратной связи будет иметь
вид, представленный на рисунке 3.30. Теперь можно приступать к
добавлению новых полей формы.
Рисунок 3.30 - Форма обратной связи
Создание переключателя (“Radio button”). Для того, чтобы
организовать переключатель, необходимо установить курсор, в том месте,
где необходимо вставить переключатель. В данном примере под строкой
“What kind of comment would you like to send?”. Затем необходимо выбрать
пункт меню Insert => Form => Radio Button (Вставка => Форма =>
Переключатель), и на экране появится новая кнопка. Нужно щелкнуть по ней
правой кнопкой мыши и выбрать в контекстном меню пункт “Form Field
Properties” (Свойства поля формы). Откроется диалоговое окно “Radio Button
Properties” (Свойства переключателя), показанное на рисунке 3.31.
66
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Рисунок 3.31 - Диалоговое окно “Radio Button Properties”
В появившемся диалоговом окне “Radio Button Properties” (Свойства
переключателя) необходимо ввести: “Group Name” (Групповое имя), к
примеру, слово “CommentType” — так будет называться группа кнопок,
образующая новый переключатель. Это имя, впоследствии, будет
использоваться на странице подтверждения. Если дать одно и то же
групповое имя нескольким кнопкам, то тем самым можно создать из них
переключатель.
Из этих кнопок пользователь сможет выбрать только одну. “Value”
(Значение), можно ввести, к примеру, слово “Compliment”. Это слово
появится на странице подтверждения, если пользователь выберет в
переключателе именно эту кнопку.
“Initial State” (Начальное состояние). Здесь необходимо выбрать опцию
“Selected” (Выбрана) либо “Not selected” (Не выбрана). В переключателе
только одна из кнопок может быть выбрана по умолчанию, поскольку в
переключателе, вообще, только одна из кнопок может быть выбрана. Для
данного переключателя установим опцию “Selected”.
После работы с окном “Radio Button Properties” необходимо нажать
кнопку ОК.
После этого нужно установить курсор следом за
переключателем и ввести слово “Compliment” (рисунок 3.32).
67
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Рисунок 3.32 – Добавление новой кнопки
Точно таким же образом можно создать еще одну кнопку справа от
переключателя “Compliment”. Для этого необходимо точно также выбрать
пункт меню Insert => Form => Radio Button. Затем, вызвав диалоговое окно
“Radio Button Properties”, дать новой кнопке то же самое групповое имя
“CommentType”, но присвоить ей другое значение, например “Criticism”. В
качестве начального состояния установить “Not selected”. После этого
закрыть диалоговое окно “Radio Button Properties”, нажав кнопку ОК. В
строке следом за новым переключателем ввести слово “Criticism”. Создание
переключателя завершено. На рисунке 3.33 можно увидеть, как будет
выглядеть часть Web-страницы, посвященной переключателям.
68
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Рисунок 3.33 - Новый переключатель
Создание раскрывающегося списка (“Drop-Down Menu”). Для того,
чтобы создать раскрывающийся список необходимо установить курсор в
требуемом месте документа, в нашем примере после текстового поля под
предложением “What about us do you want to comment on?”, и нажать <Enter>
- курсор переместится на новую строку /6/.
После этого необходимо выбрать пункт меню Insert => Form => DropDown Menu (Вставка => Форма => Раскрывающийся список) - появится
новый раскрывающийся список. Затем щелкнуть правой кнопкой мыши на
новом списке и выбрать в контекстном меню “Form Field Properties”
(Свойства поля формы). Откроется диалоговое окно “Drop-Down Menu
Properties” (Свойства раскрывающегося списка), показанное на рисунке 3.34.
В появившемся диалоговом окне “Drop-Down Menu Properties” в поле
“Name” (Имя) необходимо ввести имя списка, например “Topic” (это имя
можно использовать позднее, при формировании страницы подтверждения).
Затем нажать кнопку “Add” (Добавить), чтобы ввести новый элемент списка,
при этом откроется диалоговое окно “Add Choice” (Добавить Элемент)
(рисунок 3.35).
В текстовом поле “Choice” (Элемент) необходимо набрать слово,
например “Site”. По умолчанию элементу формы будет присвоено то же
самое значение, что и его имя; если необходимо дать ему значение, отличное
от имени, необходимо установить флажок “Specify Value” (Особое значение)
и ввести нужное значение.
В секции “Initial State” (Начальное состояние) необходимо установить
флажок “Selected” (Выбран), тем самым элемент “Site” будет установлен как
выбранный по умолчанию и именно его пользователь увидит в поле списка, в
первый раз открыв форму обратной связи в броузере. Указав в диалоговом
69
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
окне “Add Choice” (Добавить Элемент) все необходимые сведения, нажать
кнопку ОК.
Рисунок 3.34 - Диалоговое окно “Drop-Down Menu Properties”
Рисунок 3.35 - Диалоговое окно “Add Choice”
Затем, тем же путем можно добавить еще три элемента, например
“Technical”, “Support”, “Prices” и “Other”. Для каждого из них необходимо
установить в секции “Initial state” (Начальное состояние) диалогового окна
“Add Choice” (Добавить Элемент) опцию “Not Selected” (Не выбран).
Ширина раскрывающегося списка будет автоматически подстроена под
самый широкий из элементов списка. На рисунке 3.36 приведен вид
диалогового окна “Drop-Down Menu Properties” после добавления всех
перечисленных элементов.
При этом, хотелось бы отметить, что в диалоговом окне “Drop-Down
Menu Properties” присутствуют еще несколько дополнительных кнопок:
- “Modify” (Изменить) - используется для редактирования какоголибо из элементов списка. Чтобы изменить один из элементов
списка, необходимо выделить его, нажать кнопку “Modify”. В
70
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
-
-
-
появившемся диалоговом окне “Modify Choice” (Изменить Элемент)
необходимо производить различные изменения элемента, а затем
нажать ОК.
“Remove” (Удалить) - используется для удаления элемента списка.
Чтобы удалить элемент списка необходимо выделить его и нажать
кнопку “Remove” (Удалить). Нажать ОК и элемент будет удален.
“Move Up” (Переместить вверх) - используется для того, чтобы
переместить элемент вверх по списку. Чтобы переместить вверх
элемент списка необходимо выбрать этот элемент, нажать “Move
Up” и он будет перемещен вверх. В списке элементы располагаются
в том же порядке, в котором они перечислены в диалоговом окне
“Drop-Down Menu Properties”.
“Move Down” (Переместить вниз) - используется для того, чтобы
переместить элемент вниз по списку. Чтобы переместить вниз
элемент списка необходимо выбрать этот элемент, кнопку “Move
Down” и он будет перемещен вниз.
Рисунок 3.36 - Диалоговое окно “Drop-Down Menu Properties” после
добавления всех элементов
В этом диалоговом окне также имеется поле “Height” (Высота), в
котором можно задать высоту списка. Этот параметр определяет вид списка в
броузере. Если высота равна 1, то в большинстве броузеров в
раскрывающемся списке отображается только один элемент, а просмотр
остальных элементов осуществляется при помощи стрелки вниз. Если задана
высота, большая единицы, то список будет выглядеть как прокручиваемое
текстовое окно, число одновременно видимых элементов, в котором равно
значению “Height”.
Наконец, переключатель “Allow multiple selections” (Разрешить
множественный выбор). Положение “No” (Нет) запрещает выбор нескольких
элементов одновременно. Положение “Yes” (Да) этого переключателя дает
пользователю возможность выбрать из списка более одного элемента. Это
71
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
может быть полезным во многих ситуациях, например, когда пользователю
предлагается выбрать из списка те продукты, информацию о которых он
хотел бы получить.
После завершения ввода всех данных необходимо нажать кнопку ОК. В
результате появится форма, приведенная на рисунке 3.37. На этом рисунке
добавлен раскрывающий список из четырех элементов. Точно таким же
образом создаются списки со сколь угодно большим количеством элементов.
Рисунок 3.37 - Построенный раскрывающийся список
Создание однострочного текстового поля (“One-Line Text Box”). В
однострочном текстовом поле пользователи могут вводить свой вариант
ответа на вопрос, к примеру, в пункте “Other” (Другое).
Для того, чтобы создать однострочное текстовое поле, необходимо
выбрать пункт меню Insert => Form => One-Line Text Box (Вставка => Форма
=> Однострочное текстовое поле), на месте курсора появится текстовое поле.
В нашем случае, под строкой “Other”. Затем необходимо выбрать пункт
меню Format => Properties (Формат => Свойства), либо вызвать контекстное
меню и выбрать “Form Field Properties” (Свойства поля формы). Появится
диалоговое окно “Text Box Properties” (Свойства текстового поля) (рисунок
3.38).
В появившемся диалоговом окне “Text Box Properties”, в поле “Name”
(Имя) необходимо указать имя, например “ifOther”. Это имя будет
впоследствии
использоваться
при
конфигурировании
страницы
подтверждения. Затем в поле “Initial Value” (Начальное значение) не надо
вводить ничего. В приведенном примере пользователь сам будет вводить в
текстовом поле дополнительные элементы, так что необходимости в
установке начального значения нет. Если же задать начальное значение, оно
появится в текстовом поле при первом открытии формы в броузере.
72
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
После в поле “Width in characters” (Ширина в символах) установить
начальную ширину текстового поля. Если, впоследствии, изменить его
размер, можно зацепить маркер изменения размера и потянуть его в нужную
сторону.
Рисунок 3.38 - Диалоговое окно “Text Box Properties”
Затем в секции “Password field” (Поле пароля) выбрать опцию “No”
(Нет), тем самым, указав, что в данном случае текстовое поле не будет
использоваться для ввода пароля. Если необходимо установить некоторые
ограничения на те данные, которые пользователь может вводить в этом поле,
нужно нажать кнопку “Validate” (Проверка). Например, можно установить
максимальное количество символов в строке ввода или ограничить
допустимый набор вводимых символов (только текст или, наоборот, только
цифры). Завершив ввод всей необходимой информации, нажать кнопку ОК.
На рисунке 3.39 показано текстовое поле и созданный ранее
раскрывающийся список.
Рисунок 3.39 - Раскрывающийся список и текстовое поле
Создание прокручивающего текстового окна (“Scrolling Text Box”).
Для создания прокручивающего тестового окна, необходимо установить
курсор в том месте документа, где должно появиться текстовое окно, в
73
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
нашем случае, справа от текстового окна под строкой “Enter your comments in
the space provided below:” и нажать клавишу <Enter>. Затем выбрать пункт
меню Insert => Form => Scrolling Text Box (Вставка => Форма =>
Прокручивающееся текстовое поле), на странице появится новое
прокручивающееся текстовое окно.
Далее нужно выбрать пункт меню Format => Properties (Формат =>
Свойства), либо вызвать контекстное меню и выбрать “Form Field Properties”
(Свойства поля формы). Появится диалоговое окно “Scrolling Text Box
Properties” (Свойства прокручивающегося текстового окна), показанное на
рисунке 3.40.
Рисунок 3.40 - Диалоговое окно “Scrolling Text Box Properties”
Затем, в поле “Name” (Имя) ввести имя, например “UserComments”, это
имя пригодится при настройке страницы подтверждения. Поле “Initial value”
(Начальное значение) необходимо оставить пустым, поскольку, в данном
случае, пользователь сам введет информацию, которую сочтет нужной.
После этого, в поле “Width in characters” (Ширина) нужно установить
ширину текстового окна, например, равной 40 символам. Чтобы
впоследствии изменить размеры окна, достаточно просто зацепить маркер
рамки окна и перетащить его в нужном направлении.
Далее, в поле “Number of lines” (Количество строк) установить высоту
текстового окна в строках, к примеру, 5. Поскольку это окно является
прокручиваемым, пользователь сможет ввести столько строк текста, сколько
сочтет нужным, и устанавливать высоту окна больше 5 строк редко бывает
целесообразно.
Чтобы установить определенные ограничения на вводимый в этом окне
текст, необходимо нажать кнопку “Validate” (Проверка). Например, можно
ограничить количество вводимых пользователем символов или набор
допустимых символов.
После того, как ввод информации закончен, необходимо нажать кнопку
ОК. В результате появится новое прокручивающееся текстовое окно, которое
показано на рисунке 3.41.
74
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Рисунок 3.41 - Пример создания текстового окна
Создание флажка (“Check Box”). Для того, чтобы вставить флажок,
необходимо установить курсор в требуемом месте документа, в нашем
примере в конце строки “Please contact me as soon as possible regarding this
matter” и нажать <Enter> . Затем выбрать пункт меню Insert => Form => Check
Box (Вставка => Форма => Флажок), на странице появится новый флажок.
После выбрать пункт меню Format => Properties, либо вызвать контекстное
меню и выбрать “Form Field Properties” (Свойства поля формы). Появится
диалоговое окно “Check Box Properties” (Свойства флажка), показанное на
рисунке 3.42.
Рисунок 3.42 - Диалоговое окно “Check Box Properties”
В появившемся диалоговом окне “Check Box Properties” в текстовом
поле “Name” (Имя) необходимо ввести имя, например, “RequestInfo”, чтобы
использовать его при конфигурировании страницы подтверждения. В
текстовом поле “Value“ (Значение) необходимо ввести то же самое слово
“RequestInfo”.
75
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Присутствие этого значения в массиве информации, присланной
формой обратной связи, означает, что флажок установлен, т. е. пользователь
просит предоставить ему более подробную информацию.
В секции “Initial State” (Начальное состояние) нужно выбрать опцию
“Not checked” (Не выбран): при первом открытии формы обратной связи этот
флажок не будет установлен. Вообще, флажки подобного назначения
целесообразно изначально сбрасывать, чтобы быть уверенным в том, что
пользователь действительно нуждается в информации, а не просто забыл
сбросить флажок. Введя в диалоговом окне “Check Box Properties” все
необходимые данные, нажать кнопку ОК.
После этого вставить текст, который будет сопровождать данный
флажок. Для этого, нужно поместить курсор справа от вставленного только
что флажка, нажать пробел, чтобы между ним и сопроводительным текстом
был небольшой интервал, и набрать текст, например: “Please send me more
information in e-mail”. (Пришлите мне, пожалуйста, по электронной почте
дополнительную информацию). Полученная страница после добавления в
нее нового флажка представлена на рисунке 3.43.
Рисунок 3.43 - Новый флажок на форме обратной связи
Создание кнопки (“Push Button”). Для того, чтобы создать кнопку,
которую пользователи после заполнения формы будут нажимать для того,
чтобы отослать свою информацию на сервер, необходимо сначала установить
курсор в месте, где должна появиться эта кнопка. В нашем примере, вставим
новую кнопку после кнопки “Clear Form” (Очистить форму) в самом низу
экрана. Затем выбрать пункт меню Insert => Form => Push Button (Вставка =>
Форма => Кнопка), на странице появится новая кнопка. После необходимо
выбрать пункт меню Format => Properties (Формат => Свойства), либо
вызвать контекстное меню и выбрать “Form Field Properties”. Появится
76
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
диалоговое окно “Push Button Properties” (Свойства кнопки), показанное на
рисунке 3.44.
Рисунок 3.44 - Диалоговое окно “Push Button Properties”
В появившемся диалоговом окне “Push Button Properties” в текстовом
поле “Name” (Имя) нужно указать имя, на которое обработчик будет
ссылаться при обработке формы, но можно оставить то имя, которое есть,
например “B2”. В текстовом поле “Value/Label” (Значение/Ярлык) ввести тот
текст, который будет написан на кнопке, например, “Submit Now”
(Отправить).
Рисунок 3.45 - Кнопка “Submit Now”
Затем установить переключатель “Button Type” (Тип кнопки) в
положение “Submit” (Отправить). В этом случае кнопка будет служить для
отправки введенной пользователем информации обработчику на Webсервере. Если же выбрать опцию “Reset“ (Сброс), то при нажатии такой
кнопки форма будет возвращаться в исходное состояние. Опцию “Normal”
77
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
(Обычный) следует устанавливать в том случае, когда требуется назначить
для обработки кнопки свой собственный скрипт. После завершения ввода
всех параметров, нажать кнопку ОК. Новая кнопка будет выглядеть так, как
показано на рисунке 3.45.
3.3.3 Проверка полей форм
Microsoft FrontPage предоставляет возможность проверки информации,
введенной пользователем в форме на соответствие определенным условиям.
Например, можно задать минимальное или максимальное количество
символов, которое должно содержать текстовое поле, указать, что в
раскрывающемся списке обязательно должен быть выбран пункт и т. п.
При этом, если посетитель введет символы, не отвечающие условиям,
ему будет выдана страница подтверждения правильности заполнения полей и
форма будет возвращена для корректного заполнения полей с учетом
ограничений. Процесс контроля соответствия содержимого поля формы
определенным критериям носит название “Form Field validation” (Проверка
поля формы) /6/.
Чтобы задать для поля формы правила проверки, необходимо
активизировать элемент формы и выбрать в контекстном меню пункт “Form
Field Validation” (Проверка поля формы). После этого появится диалоговое
окно “Validation” (Проверка), соответствующее проверяемому полю,
например, текстовому полю соответствует диалоговое окно “Text Box
Validation” (Проверка текстового поля), показанное на рисунке 3.46.
Рисунок 3.46 - Диалоговое окно “Text Box Validation”
78
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Так, например поле “Display Name” (Имя поля) необходимо
использовать, чтобы определить текст, который укажет посетителю на то
поле, которое нужно заполнить правильно. В поле “Data Type” (Тип данных)
можно выбрать тип данных для поля: “No constraints” (Никаких
ограничений), по умолчанию ставится именно эта опция, “Text” (Текст) поле может содержать только текст.
В поле “Text Format” (Формат текста) галочками можно выбрать
следующие поля: “Letters” (Символы) - для того, чтобы разрешить ввод
текстовых символов; “Digits” (Числа) - для того, чтобы разрешить числовые
символы; “Whitespace” (Пробел) - разрешить интервалы (пробелы,
табуляцию, возврат курсора, перевод строки); “Other” (Другие) - другие
допустимые символы, например, запятые или дефисы.
В поле “Numeric Format” (Формат номеров) используются две строки
“Grouping” (Группировнка) и “Decimal” (Десятичный формат).
В строке “Grouping” (Группировка) указывается допустимый формат
для группировки числа по разрядам: “None” (Нет) показывает, что не
допустима никакая пунктуация, число может быть только в таком формате:
123456789; “Comma” (Запятая) допускает символ запятой: 123,456,789;
“Period” (Период) указывает на разрешение символа периода: 123.456.789.
В строке “Decimal” (Десятичный формат) указывается какой символ
использовать в качестве знака десятичной дроби. “Comma” (Запятая)
указывает, что для знака десятичной дроби допустим символ запятой:
123.456,789; “Period” (Период) указывает, что для знака десятичной дроби
допустим символ периода: 123,456.789.
В пункте “Data Length” (Длина данных) можно ограничить длину
данных для любого типа данных: переключатель “Required” (Требуется)
указывает, что в поле требуется данные; в поле “Min length” (Минимальная
длина) определяется минимальная длина данных; в поле “Max length”
(Максимальная длина) определяется максимальная длина данных.
В поле “Data Value” (Величина данных) можно ограничить величину
данных для любого типа данных.
Переключатель “Field Must Be” (Поле должно быть) необходимо
выбрать, чтобы указать на необходимость ограничения величины данных.
Затем выбрать один из следующих параметров: “Less Than” (Меньше, чем);
“Greater Than” (Больше, чем); “Less Than Or Equal To” (Меньше или равно);
“Greater Than Or Equal To” (Больше или равно); “Equal To” (Равно); “Not
Equal To” (Не равно). Затем в поле “Value” (Величина) необходимо ввести
величину - цифру или букву /6/.
Необходимо выбрать флажок “And Must Be” (И должно быть) для
дополнительного ограничения величины данных. Закончив задание правил
для поля формы, необходимо нажать кнопку ОК.
“Validation” одно из сложных диалоговых окон проверки. В нем можно
задать правила проверки для типа вводимых пользователем данных, формат
текста (буквенный, цифровой и другие), минимальную и максимальную
длину строки и диапазон допустимых значении.
79
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
3.3.4 Создание страницы подтверждения
Страницы подтверждения предоставляют пользователям возможность
проверить и подтвердить введенную ими информацию. Просто берется
информация, которую посетители ввели в поля формы, и снова
предъявляется им, чтобы они могли подтвердить ее правильность.
Страницы подтверждения можно создавать самим, а можно
воспользоваться шаблоном Microsoft FrontPаge. Страницы подтверждения
используют имена полей формы, чтобы возвратить пользователю значения,
которые он ввел в эти поля. Если введено имя поля неверно, то страница
подтверждения не будет работать.
В страницах подтверждения представление информации обратно
пользователю на рассмотрение осуществляется при помощи особых
компонентов, называющихся полями подтверждения – “Confirmation Field
components” (Поля подтверждения).
Для создания страницы подтверждения можно пользоваться
соответствующим шаблоном. Для этого необходимо выбрать пункт меню File
= > New => Page (Файл => Создать => Страница). В появившемся
диалоговом окне “New” (Создать) на вкладке “General” (Общие) в списке
шаблонов и мастеров выбрать “Confirmation Form” (Форма подтверждения),
при этом в окне “Preview” будет отображена структура данной Webстраницы. После этого нужно нажать кнопку ОК (рисунок 3.47).
Рисунок 3.47 – Создание формы подтверждения
Когда появится новая страница необходимо сохранить ее на текущем
сайте, например, под именем confirmation.htm. Теперь, когда страница
подтверждения создана, можно изменять текст и существующие поля
80
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
страницы, выделенные квадратными скобками. Указатель мыши при
наведении на скобки превращается в руку, указывающую на страницу
(рисунок 3.48).
Рисунок 3.48 - Страница “Confirmation Form”
Форма подтверждения — это шаблон, готовый к настройке. Он
разработан в расчете на использование совместно с шаблоном формы
обратной связи и включает в себя многие из используемых в ней имен полей
форм. Эти имена выводятся в квадратных скобках, в действительности, они
являются отдельными полями подтверждения.
Если провести курсор над одним из этих компонентов, например, над
компонентом, помеченным [UserName], то курсор примет вид маленького
листочка с рукой. Когда форма подтверждения предстанет в броузере перед
пользователем, строка [UserName] будет заменена значением поля
“UserName”, то есть, на этом месте появится строка, введенная
пользователем в качестве своего имени. Все поля подтверждения в этой
форме работают аналогичным образом.
Для того, чтобы изменить имя поля, используемого в существующем
поле подтверждения, необходимо щелкнуть по нему правой клавишей мыши
и выбрать из контекстного меню “Confirmation Field Properties” (Свойства
поля подтверждения) (рисунок 3.49).
В появившемся диалоговом окне “Confirmation Field Properties” в
текстовом поле “Name of form field to confirm” (Поле формы для
подтверждения) необходимо указать имя, которое присвоено этому полю при
создании формы, и нажать ОК (рисунок 3.50). В результате появится форма
подтверждения после добавления компонента (рисунок 3.51).
81
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Рисунок 3.49 - Вызов окна в контекстном меню “Confirmation Field
Properties”
Рисунок 3.50 - Диалоговое окно “Confirmation Field Properties”
Рисунок 3.51 - Форма подтверждения после изменения компонента
82
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Чтобы добавить новое поле подтверждения, необходимо выбрать пункт
меню Insert => Component => Confirmation Field (Вставка => Компонент =>
Поле подтверждения), затем нажать кнопку ОК (рисунок 3.52). В
появившемся диалоговом окне “Confirmation Field Properties” (Свойства поля
подтверждения) в текстовое поле “Name of form field to confirm” (Поле
формы для подтверждения) нужно ввести имя, например, “Options” и нажать
ОК (рисунок 3.53). После этого поле будет добавлено на страницу
подтверждения (рисунок 3.54). Как и существующие поля, новое поле в
странице подтверждения будет также выделено квадратными скобками.
Рисунок 3.52 – Вызов окна “Confirmation Field Properties”
Рисунок 3.53 – Добавление нового поля подтверждения
Совершенно аналогичным образом можно создать поля подтверждения
для остальных полей формы обратной связи, заменив существующие
компоненты шаблона или специально написав для них сопутствующий текст
(раскрывающийся список с именем “Topic”, текстовое поле “IfOther”,
прокручивающееся текстовое окно “UserComments” и флажок “RequestInfo”).
В конце формы подтверждения целесообразно разместить ссылку, по
которой пользователь сможет вновь вернуться в форму обратной связи, если
вдруг ему потребуется внести в свою информацию исправления. Чтобы эта
страница не производила впечатления тупика, полезно включить в нее и
83
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
другие навигационные элементы, такие как ссылка на заглавную страницу
сайта, оглавление или основные разделы.
Рисунок 3.54 – Форма с добавленным новым полем подтверждения
3.3.5 Параметры диалогового окна “Form Properties”
Для того, чтобы открыть диалоговое окно “Form Properties” (Свойства
формы), необходимо выбрать пункт меню Insert => Form => Properties
(Вставка => Форма => Свойства), либо щелкнуть правой кнопкой мыши по
форме и выбрать в контекстном меню “Form Properties”. Появится
диалоговое окно “Form Properties” (Свойства формы) (рисунок 3.55).
Рисунок 3.55 - Диалоговое окно свойств формы
84
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Основные поля формы. Секция “Where to store results?” (Где сохранить
результаты?) диалогового окна “Form Properties” содержит альтернативные
опции:
1) “Send to” (Послать). Здесь задается обработчик формы по
умолчанию, для этого предусмотрены два поля:
- “File name:” (Имя файла). Данные из формы могут быть сохранены в
текстовом файле на сервере. По умолчанию его имя и путь установлены на
закрытую папку, такую как private/feedback.txt. Чтобы задать для сохранения
другой файл, можно ввести его относительный URL или нажать кнопку
“Browse” (Обзор) и выбрать любую другую страницу в текущем сайте.
- “E-mail address:” (Адрес электронной почты). Здесь обработчик
формы предоставляет возможность послать файл результатов по электронной
почте. Параметры сообщения выбираются в описанном ниже диалоговом
окне “Options for Saving Results of a Form” (Опции сохранения данных
формы).
2) “Send to other” (Послать другому). Здесь в качестве “другого”
варианта предоставляется на выбор один из трех обработчиков формы, а
именно “Custom handler” (Пользовательский обработчик) и два обработчика
Microsoft FrontPage. Необходимо поставить переключатель в положение
“Send to other” и выбрать опцию из раскрывающегося списка:
- “Custom ISAPI, NSAPI, or CGI Script” (Пользовательский скрипт
ISAPI, NSAPI или CGI). Эти скрипты являются программными
компонентами на Web-сервере, обрабатывающими предоставленную формой
информацию. Смысл создания собственных скриптов состоит в расширении
функциональных возможностей Web-сайта сверх того, чего можно достичь с
применением компонентов Microsoft FrontPage.
- “Discussion Form Handler” (Обработчик дискуссионной формы). Этот
обработчик предоставляет пользователям возможность участия в Webдискуссиях. Microsoft FrontPage располагает основными инструментами
администрирования дискуссионных групп. Дискуссионный компонент
“Discussion Component” собирает информацию из формы, формирует из нее
HTML-страницу, запоминает страницу на Web-сервере и добавляет ее в
оглавление и указатель статей. Разумеется, с его помощью можно собирать и
записывать на Web-сервер и любую другую информацию из других форм.
- “Registration Form Handler” (Обработчик регистрационной формы).
Это компонент, позволяющий пользователям регистрироваться на
предлагаемые на сайте услуги. Он добавляет в базу данных подписчиков
услуги, сведения о новом пользователе, а затем выбирает из формы
остальную информацию и сохраняет ее на Web-сервере.
3) “Send to database” (Сохранение результатов в базе данных).
Помимо этого, в диалоговом окне “Form Properties” в секции “Form
properties” присутствуют еще два поля и кнопка:
- “Form name” (Имя формы). Если установлен для формы
пользовательский обработчик, то в этом поле можно при необходимости
указать ее имя, на которое обработчик будет ссылаться.
85
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
- “Target frame” (Целевой фрейм). Здесь можно выбрать фрейм для
отображения результатов формы. Можно непосредственно ввести имя
фрейма или использовать для его поиска кнопку “Target Frame” (Справа от
этого поля).
- “Options” (Опции). Последний элемент диалогового окна ”Form
Properties”
кнопка
“Options”
(Опции),
предназначенная
для
конфигурирования различных параметров сохранения результатов формы.
После нажатия этой кнопки появится диалоговое окно “Options for Saving
Results of Form” (Опции сохранения результатов формы), имеющее четыре
вкладки: “File Results” (Файл данных) (она показана на рисунке 3.56), “E-mail
Results”(Результаты
по
почте),
“Confirmation
Page”
(Страница
подтверждения) и “Saved Fields” (Сохраняемые поля).
- “Advanced” (Дополнительно). Эта кнопка позволяет установить
скрытые поля. Они необходимы только в том случае, если используются
CGI-сценарии для обработки результатов формы.
Рисунок 3.56 - Диалоговое окно “Options for Saving Results of Form”, вкладка
“File Results”
Рассмотрим подробнее различные вкладки диалогового окна “Options
for Saving Results of Form”.
Вкладка “File Results” (Файл данных). Если результаты формы будут
записываться в файл, то на вкладке “File Results” можно настроить способ их
представления и некоторые параметры файла.
- “File name” (Имя файла). Здесь необходимо ввести имя и путь к
файлу, в котором будут храниться результаты. Файл может находиться как на
текущем сайте, так и вне его. Если этот файл будет расположен на текущем
86
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
сайте, его можно назвать private/form_results.txt, при этом результаты будут
сохранены на сайте в файле под именем form_results.txt в папке _private.
Если файл на момент первого сохранения данных не будет существовать, то
FrontPage создаст его. Когда файл результатов уже существует, информация
дописывается в его конец.
- “File format” (Формат файла). Необходимо выбрать формат файла
результатов из раскрывающегося списка в секции “File Format”. Здесь
предоставляются на выбор следующие варианты:
1) “HTML”. Генерирует файл в формате HTML в виде нормального
текста.
2) “HTML definition list” (Список определений HTML). Генерирует
файл в формате HTML, оформляя пары имя-значение в виде списка
определений.
3) “HTML bulleted list” (Маркированный список HTML). Генерирует
файл в формате HTML, оформляя пары имя-значение в виде маркированного
списка.
4) “Formatted text within HTML” (Форматированный текст внутри
HTML). Генерирует файл в формате HTML в виде форматированного текста.
5) “Formatted text” (Форматированный текст). Генерирует файл
простого удобного текстового формата.
6) “Text database using comma as separator” (Текстовая база данных с
запятой в качестве разделителя). Генерирует файл в виде горизонтального
списка с элементами, взятыми в кавычки и разделенными запятой. Если
флажок “Include field names” (Включать имена полей) установлен, то в
первой строке перечисляются имена полей, а их значения — во второй. Этот
формат удобен для манипулирования информацией в базе данных или
аналогичном приложении.
7) “Text database using tab as separator” (Текстовая база данных с
табуляцией в качестве разделителя). Форматирует файл аналогично
предыдущему варианту, но вместо запятой в качестве разделителя элементов
используется символ табуляции.
8) “Text database using space as separator” (Текстовая база данных с
пробелом в качестве разделителя). Форматирует файл аналогично
вышеописанному, но в качестве разделителей используются пробелы.
- “Include field names” (Включать имена полей). Необходимо
установить этот флажок в том случае, если в файле результатов наряду со
значениями полей требуется сохранять их имена. Если не установить этот
флажок, то будут сохранены только значения полей.
- “Latest results at end” (Последние результаты в конце). Эта опция
доступна только в том случае, если в качестве формата файла установлен
один из вариантов HTML. В этом случае самая свежая информация будет
сохраняться в конце файла. Для всех остальных форматов файла этот режим
является безусловным и изменению не поддается.
- “Optional second file” (Необязательный второй файл). Если
необходимо использовать информацию формы для различных целей,
87
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
например, в электронных таблицах, базах данных, то здесь есть возможность
сохранять данные параллельно во втором файле другого формата. То есть, в
сущности, на выходе будут одни и те же результаты, представленные в двух
различных форматах.
Вкладка “E-mail Results” (Результаты по почте). Для того чтобы
отослать результаты формы кому-либо по электронной почте необходимо
настроить некоторые параметры на этой вкладке. Вид ее приведен на рисунке
3.57. Настраиваемые параметры:
- “E-mail address to receive results” (Адрес электронной почты для
приема результатов). В этом поле требуется ввести полный почтовый адрес,
по которому необходимо отправить данные из формы, например, LG77@mail.ru.
- “E-mail format” (Формат сообщения). FrontPage определяет 8
форматов сообщений. Если необходимо, чтобы результаты формы могли
быть прочитаны большинством почтовых программ, необходимо в этом поле
оставить формат “Formatted text” (Форматированный текст), установленный
по умолчанию.
- “Include field names”. Чтобы, наряду со значениями полей формы, в
сообщение были включены также их имена, необходимо установить данный
флажок.
Рисунок 3.57 - Диалоговое окно “Options for Saving Results of Form”,
вкладка “E-mail Results”
- “E-mail message header” (Заголовок письма). В поле “EMail message
header” в строке “Subject line” (Тема) необходимо ввести какое-нибудь
ключевое слово или поставить галочку “Form field name” (Имя поля формы).
Это делается для того, чтобы поступающие сообщения можно было
88
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
сортировать при поступлении почты. По умолчанию темой сообщения будет
строка “Form Results” (Результаты формы). В поле “Reply-to line” (Ответить)
необходимо поставить какую-нибудь приветственную или подходящую по
смыслу фразу или поставить галочку “Form field name” (Имя поля формы),
чтобы при ответе на поступившее письмо с результатами отправки данных из
форм не вводить вручную текст в поле “Subject line” (Тема). В строке “Replyto line” (Ответить) лучше всего поместить имя поля формы, содержащего
адрес “E-mail” пользователя. Таким образом, всегда легко можно увидеть
адрес отправителя формы.
Вкладка “Confirmation Page” (Страница подтверждения). Если
необходимо, чтобы результаты формы были представлены на странице
подтверждения, требуется произвести соответствующие установки на этой
вкладке, которая представлена на рисунке 3.58.
Рисунок 3.58 - Диалоговое окно “Options for Saving Results of Form”, вкладка
“Confirmation Page”
Возможные установки:
- “URL of confirmation page” (URL страницы подтверждения). Если
создана страница для подтверждения введенной пользователями
информации, то в данном поле необходимо ввести ее URL. Эта страница
будет отображаться в броузере после успешной отправки формы на Webсервер. Если не задать здесь страницу подтверждения, то обработчик формы
создаст ее и будет поддерживать автоматически.
- “URL of validation failure page” (URL страницы неудачи проверки). В
этом поле задается страница неудачи проверки. Эта страница выводится в тех
случаях, когда отправленная форма содержит данные, не удовлетворяющие
89
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
какому-либо из установленных правил проверки поля формы. Если не задать
здесь страницу неудачи проверки поля, то обработчик формы создаст ее и
будет поддерживать автоматически.
При этом если поле “URL of validation failure page” недоступно, значит,
ни для одного поля формы не установлено никаких правил проверки.
Вкладка “Saved Fields” (Сохраняемые поля). Здесь, как видно из
рисунка 3.59, можно указать поля формы, подлежащие сохранению:
- “Form fields to save” (Поля формы для сохранения). Здесь
перечисляются имена полей формы, которые необходимо сохранить, по
одному полю в строке. Поля будут сохранены в том порядке, в котором они
перечислены в этом списке. Если же оставить список пустым, все поля
формы будут записаны в файл результатов в порядке их появления в форме.
- “Date and time” (Дата и время). Для добавления формата даты и
времени в форму используют поля: ”Date Format” (Формат даты) - дата
заполнения формы и “Time Format” (Формат времени) - время заполнения
формы.
“Additional information to save” (Дополнительная информация для
сохранения). Чтобы включить в файл результатов дополнительные сведения,
необходимо установить следующие опции. Флажок “Remote computer name”
(Имя удаленного компьютера) позволяет включить имя удаленного
компьютера, с которого происходило обращение к форме. Флажок
“Username” (Имя пользователя) включает в файл имя пользователя,
заполнившего форму. Флажок “Browser type” (Тип броузера) включает в
файл результатов имя броузера удаленного компьютера.
Рисунок 3.59 - Диалоговое окно “Options for Saving Results of Form”, вкладка
“Saved Fields”
90
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Закончив конфигурирование опций сохранения результатов формы,
необходимо нажать кнопку ОК и вернуться обратно в диалоговое окно “Form
Properties” (Свойства формы). При этом некоторые поля после установки
опций в диалоговом окне “Options for Saving Results of Form” (Опции
сохранения результатов формы) могли измениться вслед новым настройкам.
3.3.6 Конфигурирование дискуссионного компонента
Для конфигурирования параметров дискуссионного компонента
служит диалоговое окно “Options for Discussion Form Handler” (Опции
обработчика дискуссионной формы). Для вызова диалогового окна “Options
for Discussion Form Handler” нужно в окне “Form Properties” (Свойства
формы) в поле “Send to Other” (Послать другому) выбрать элемент списка
“Discussion Form Handler” и нажать OK (рисунок 3.60).
Рисунок 3.60 – Вызов диалогового окна “Options for Discussion Form Handler”
В появившемся диалоговом окне “Options for Discussion Form Handler”
можно выбрать одну из трех вкладок “Discussion” (Дискуссия), “Article”
(Разметка), “Confirmation Page” (Страница подтверждения) (рисунок 3.61).
На вкладке “Discussion” (Дискуссия) можно ввести имя дискуссионной
группы в поле “Title” (Титульное имя). Это имя будет фигурировать на
страницах статей. В поле “Directory” (Директория) необходимо ввести имя
папки дискуссии. Если для создания сайта используется Мастер сайта
дискуссионных групп, то в этом поле по умолчанию будет указана папка,
выбранная при работе в мастере. Имя папки должно состоять не более чем из
восьми символов и начинаться с символа подчеркивания ( _ ).
В поле “Form fields” (Поля формы) секции “Table of contents layout”
(Планировка оглавления) нужно ввести имена полей, которые будут в
оглавлении дискуссионной группы. Если требуется ввести несколько имен,
то они должны быть отделены друг от друга пробелами.
91
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Рисунок 3.61 – Диалоговое окно “Options for Discussion Form Handler”,
вкладка “Discussion”
Рисунок 3.62 - Диалоговое окно “Option for Discussion Form Handler”, вкладка
“Article”
Если нужно фиксировать в оглавлении время, дату прихода статьи, имя
удаленного компьютера, с которого она была прислана и имя автора статьи,
92
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
то нужно установить в секции “Table of contents layout” (Планировка
оглавления) соответствующие флажки. Чтобы наиболее свежие статьи
располагались в оглавлении первыми, можно установить флажок “Order
newest to oldest” (Порядок от новых к старым). Если требуется использовать
фон и цвета с другой страницы сайта, нужно задать ее местоположение в
поле “Get background and colors from page” (Взять фон и цвета со страницы).
На вкладке “Article” (Разметка), показанной на рисунке 3.62
определяется разметка статей в дискуссионной группе. В каждую страницу
можно вставить в качестве колонтитулов две включаемые HTML-страницы.
Для этого необходимо задать их адреса в полях “URL of Header to
Include” (URL верхнего колонтитула) и “URL of Footer to Include” (URL
нижнего колонтитула) /6/.
Если требуется, чтобы на страницах статей фигурировали время и/или
дата прихода статьи, имя удаленного компьютера, с которого статья была
прислана и имя автора статьи, то необходимо воспользоваться секцией “Date
and format” и секцией “Additional information to include” (Дополнительная
информация для включения) соответственно.
На вкладке “Confirmation Page” (Страница подтверждения), показанной
на рисунке 3.63, можно задать необязательную страницу подтверждения и
необязательную же страницу неудачи проверки.
Рисунок 3.63 - Диалоговое окно “Options for Discussion Form Handler”,
вкладка “Confirmation Page”
Если создана страница подтверждения для проверки пользователями
введенной ими информации, необходимо указать ее адрес в поле “URL of
confirmation page” (URL страницы подтверждения). Эта страница будет
93
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
отображаться в броузере каждый раз при отправке формы на Web-сервер.
Если же не задать здесь страницу подтверждения, обработчик дискуссионной
формы создаст, и будет поддерживать ее автоматически.
В поле “URL of validation failure page” (URL страницы неудачи
проверки) можно при необходимости задать страницу неудачи проверки. На
этой странице отображаются сведения о полях формы, содержащих
некорректную информацию. Если же не задать здесь страницу неудачи
проверки поля, обработчик дискуссионной формы создаст, и будет
обслуживать ее автоматически.
Закончив ввод информации, необходимой для конфигурирования
обработчика дискуссионной формы, нажать кнопку ОК, чтобы выйти из
диалогового окна “Options for Discussion Form Handler” (Опции обработчика
дискуссионной формы).
3.3.7 Конфигурирование регистрационного компонента
Конфигурирование регистрационного компонента - “Registration
Component” осуществляется в диалоговом окне “Options for Registration Form
Handler” (Опции обработчика регистрационной формы), которое открывается
из диалогового окна свойств формы регистрации “Form Properties” (Свойства
формы). Также в качестве регистрационной формы можно использовать
готовый шаблон “User Registration” (Регистрация пользователя) (рисунок
3.64).
Рисунок 3.64 – Создание регистрационной формы
В раскрывающемся списке “Send to other” (Послать другому)
диалогового окна “Form Properties” (Свойства формы) необходимо выбрать
“Registration Form Handler” (Обработчик регистрационной формы) и нажать
кнопку “Options” (Опции) (рисунок 3.65).
94
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
После этого на экране появится диалоговое окно “Options for
Registration Form Handler” (рисунок 3.66),
в котором на закладке
“Registration” (Регистрация) необходимо в поле “Web name” (Имя сайта)
ввести имя Web-сайта, для которого предназначена форма регистрации
пользователя. В поле “User name fields” (Поле имени пользователя) ввеcти
имена полей формы, одно или несколько, разделенные запятыми или
пробелами, в которых пользователь будет вводить свое имя. Имя
пользователя конструируется из содержимого этих полей.
Рисунок 3.65 – Выбор регистрационного компонента в диалоговом
окне “Form Properties”
95
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Рисунок 3.66 - Диалоговое окно “Options for Registration Form Handler”
Затем в поле “Password field” (Поле пароля) задать имя поля,
предназначенного для пароля пользователя. В поле “Password confirmation
field” (Поле подтверждения пароля) задать имя поля, предназначенного для
подтверждения пароля пользователя.
Если необходимо обязать пользователя предоставить защищенный
пароль (он должен состоять не менее чем из 6 символов и не должен даже
частично совпадать с именем пользователя), то флажок “Require secure
password” (Требовать защищенный пароль) должен быть установлен.
Чтобы поставить пользователя в известность, что попытка регистрации
завершилась неудачей, необходимо поместить в текстовом поле адрес
страницы неудачи регистрации – “URL of registration failure page” (URL
страницы неудачи регистрации).
3.3.8 Конфигурирование пользовательских обработчиков
Custom ISAPI, NSAPI, CGI or ASP Script
Для конфигурирования пользовательских обработчиков предназначено
диалоговое окно “Options for Custom Form Handler” (Опции
пользовательского обработчика формы). Для вызова этого диалогового окна
необходимо в окне “Form Properties” (Свойства формы) в поле “Send to
Other” (Послать другому) выбрать элемент списка “Custom ISAPI, NSAPI,
CGI or ASP Script” (Пользовательский обработчик ISAPI, NSAPI, CGI or ASP
Script) и нажать OK (рисунок 3.67).
96
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Рисунок 3.67 – Добавление диалогового окна
В появившемся диалоговом окне “Options for Custom Form Handler”,
представленном на рисунке 3.68, необходимо сделать следующее. В поле
“Action” (Действия) ввести абсолютный URL обработчика формы. Из
раскрывающегося списка “Method” (Метод) необходимо выбрать метод
передачи информации обработчику - POST (Послать) или GET (Получить).
При использовании метода POST пары имя-значение поля формы
передаются непосредственно на вход обработчика формы, а при
использовании метода GET пары имя-значение кодируются и присваиваются
серверной переменной QUERY_STRING.
Рисунок 3.68 - Диалоговое окно “Options for Custom Form Handler”
В поле “Encoding type” (Тип кодирования) необходимо указать
стандарт, используемый для кодирования передаваемых обработчику данных
формы. По умолчанию принят метод кодирования application/x-www-formurlencocled. Если нет необходимости изменять данный метод кодирования, то
можно оставить это поле пустым.
3.3.9 Сохранение результатов формы
Сохранять результаты, собранные в форме, можно различными
способами - в виде файла, сообщения электронной почты, записи базы
97
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
данных или информации, обрабатываемой настраиваемыми сценариями.
Microsoft FrontPage предоставляет восемь различных форматов для хранения
данных в виде файла.
По умолчанию FrontPage использует компонент сохранения
результатов - “Save Results Components”, чтобы обработать результаты
формы. Помимо этого FrontPage использует обработчик формы
дискуссионной группы - “Discussion Form Handler” и обработчик форм
регистраций - “Registration Form Handler”. FrontPage также позволяет
работать с разнообразными пользовательскими сценариями.
Обработчик (handler) - это приложение на Web-сервере,
обеспечивающее взаимодействие между сервером и пользователем по всем
аспектам работы с формой. Обработчики могут посылать пользователю
сообщения и обрабатывать переданные на Web-сервер данные формы.
Обработчики форм назначаются и конфигурируются в диалоговом окне
“Form Properties” (Свойства формы).
3.3.9.1 Сохранение результатов формы в файле
Для сохранения результатов формы в виде сообщения электронной
почты необходимо перейти в режим редактирования страницы, щелкнуть
правой клавишей мыши по форме и выбрать из контекстного меню пункт
“Form Properties”. В появившемся диалоговом окне “Form Properties”
(Свойства формы) поставить переключатель “Where to store results” (Где
сохранить результаты?) в положение “Send to File name” (Послать в файл)
(рисунок 3.69).
Рисунок 3.69 – Сохранение результатов формы в файле
98
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Рисунок 3.70 – Заполнение формы сохранения результатов в файл
По умолчанию Microsoft FrontPage, присвоив имя файлу, помещает его
в закрытую (private) папку Web-сайта. Если требуется изменить имя или
местоположение папки, нужно ввести новый путь и имя в текстовом поле
или нажать “Browse” (Обзор) для сохранения результатов в существующий
файл.
Затем нажать кнопку “Options” (Опции), после чего появится
диалоговое окно “Options for Saving Results of Form” (Опции сохранения
результатов формы). Здесь необходимо воспользоваться вкладкой “File
Results” (Результаты в файл) с уже введенным именем файла (рисунок 3.70).
Можно воспользоваться ниспадающим меню “File Format” (Формат
файла), чтобы выбрать один из восьми вариантов формата файла (рисунок
3.71).
Рисунок 3.71 – Выбор варианта форматирования данных
Далее нужно поставить флажок “Include field name” (Включить имена
полей), если требуется соединить значения из каждого поля формы с именем
этого поля. Если не выбран HTML, то должен быть поставлен флажок “Latest
99
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
results at end” (Следующие результаты в конец), благодаря чему новые
результаты будут располагаться в конец файла.
Если нужно хранить те же результаты в другом файле или в другом из
восьми форматов, необходимо использовать раздел “Optional second file”
(Необязательный второй файл), чтобы ввести новое имя, или нажав кнопку
“Browse” (Обзор), выбрать существующий файл.
Затем нажать ОК, чтобы вернуться в диалоговое окно “Form
Properties”. Снова нажать ОК и параметры настройки будут применены в
форме. Чтобы проверить форму, можно нажать вкладку “Preview”.
3.3.9.2 Сохранение
электронной почты
результатов
формы
в
виде
сообщения
Для сохранения результатов формы в виде сообщения электронной
почты необходимо перейти в режим редактирования страницы, щелкнуть
правой клавишей мыши по форме и выбрать в контекстном меню пункт
“Form Properties” (Свойства формы). В появившемся диалоговом окне “Form
Properties” необходимо поставить переключатель “Where to store results?”
(Где сохранить результаты?) в положение “Send to E-mail address” (Адрес
электронной почты).
В текстовом поле “E-mail address” (Адрес электронной почты) нужно
указать адрес, куда будут посланы результаты. По умолчанию FrontPage
заполняет текстовое поле “File Name” (Имя файла). Если требуется, чтобы
результаты сохранились лишь в виде электронной почты, нужно удалить имя
файла из текстового поля. Также если требуется, чтобы результаты
сохранились как в виде сообщений электронной почты, так и в файле, можно
оставить поле “File Name” заполненным. Можно использовать раздел “Form
Properties” (Свойства формы), если нужно дать форме другое имя или
установить целевой фрейм этой формы.
После чего нужно нажать кнопку “Options” (Опции) и в появившемся
диалогом окне “Options for Saving Results of Form” (Опции сохранения
результатов формы) выбрать вкладку “E-mail address” (Адрес электронной
почты). Адрес, введенный уже ранее, находится в текстовом поле “E-mail
address to receive results” (Адрес электронной почты для приема результатов)
(рисунок 3.72).
100
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Рисунок 3.72 – Сохранение результатов формы в виде сообщения
электронной почты
В ниспадающем меню “E-mail format” (Формат электронного
сообщения) выбрать один из восьми вариантов форматов. После этого нужно
установить флажок “Include field names”, если необходимо соединить
значения из каждого поля формы с именем этого поля.
По умолчанию в строке заголовка сообщения электронной почты
задано название “Form results”. Если нужен более содержательный заголовок,
нужно ввести его в текстовое поле или поставить флажок “Form Field Name”
(Имя поля формы), чтобы имя поля формы появилось в строке заголовка.
Затем ввести в текстовое поле “Reply-to line” (Ответить) адрес, который
необходимо использовать в качестве адреса получателя электронной почты.
Однако если форма включает поле, которое сохраняет адрес электронной
почты пользователя, установить флажок “Form field name” (Имя поля формы)
и ввести имя этого поля в тестовое поле. Таким образом, ответ в первую
очередь будет направлен тому пользователю, который заполняет форму.
Затем нажать OK, чтобы возвратиться в диалоговое окно “Form
Properties”. Снова нажать ОК, чтобы применить выбранные параметры
настройки. Можно также проверить полученные результаты, выбрав
закладку “Preview”.
3.3.9.3 Сохранение результатов формы в базе данных
Для сохранения результатов формы в базе данных нужно перейти в
режим редактирования страницы, щелкнуть правой клавишей мыши по
форме и выбрать в контекстном меню пункт “Form Properties” (Свойства
101
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
формы). В появившемся диалоговом окне “Form Properties” необходимо
поставить переключатель “Where to store results?” (Где сохранить
результаты?) в положение “Send to database” (Послать в базу данных). Если
требуется дать форме другое имя или установить для нее целевой фрейм,
можно использовать раздел “Form properties” (рисунок 3.73).
Рисунок 3.73 – Выбор поля “Send to database” в окне “Form Properties”
После нажатия кнопки “Options” (Опции) появится диалоговое окно
“Options for Saving Results of Form” (Опции сохранения результатов формы).
На вкладке “Database Results” (Результаты в базу данных) (рисунок 3.74)
нажать кнопку “Add Connection” (Добавить связь), чтобы связаться с базой
данных Web-сайта с помощью окна “New Database Connection” (Связь с
новой базой данных). В этом диалоговом окне в поле “Name” (Имя)
требуется указать имя базы данных и внести необходимые параметры в
пункте “Type of connection” (Тип связи) (рисунок 3.75).
После этого нажать ОК, и выбранные параметры настройки будут
применены к форме. Чтобы проверить ее, необходимо выбрать вкладку
“Preview” (Предварительный просмотр).
102
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Рисунок 3.74 – Вкладка “Database Results” окна “Options for Saving Results of
Form”
Рисунок 3.75 – Окно “New Database Connection”
3.3.9.4
Cохранение
пользовательского сценария
результатов
формы
при
помощи
Для того, чтобы сохранить результаты формы, при помощи
пользовательского сценария, необходимо, находясь на вкладке “Folder list”
(Список папок) щелкнуть правой клавишей мыши по папке, содержащей
пользовательский сценарий. Затем выбрать из контекстного меню пункт
“Properties” (Свойства). В появившемся диалоговом окне свойств папки
поставить флажок “Allow script or programs to be run” (Разрешить выполнение
сценариев или программ). Затем нажать кнопку ОК, чтобы закрыть
диалоговое окно.
103
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
После этого требуется переключиться в окно просмотра страницы,
щелкнуть правой клавишей мыши по форме и выбрать из контекстного меню
пункт “Form Properties” (Свойства формы). В появившемся диалоговом окне
“Form Properties” необходимо поставить переключатель “Where to store
results” (Куда сохранить результаты?) в положение “Send to other” (Послать
другому) и воспользоваться ниспадающим меню “Custom ISAPI, NSAPI, CGI
or ASP Script” (Пользовательский сценарий ISAPI, NSAPI, CGI или ASP)
(рисунок 3.76).
Рисунок 3.76 - Выбор поля “Send to other”
Затем нужно нажать кнопку “Options” (Опции), после чего появится
диалоговое окно “Options for Custom Form Handler” (Свойства
пользовательского обработчика формы) (рисунок 3.77).
Рисунок 3.77 - Окно “Options for Custom Form Handler”
После ввести URL для сценария в текстовое поле “Actions” (Действие)
и использовать ниспадающее меню “Method” (Метод), чтобы выбрать, каким
способом информация будет передаваться сценарию POST или GET. В поле
“Encoding type” (Тип кодирования) указать тип кодирования. Затем нажать
ОК и возвратиться в диалоговое окно “Form Properties” (Свойства формы).
Снова нажать OK и параметры будут применены к форме.
104
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
4 Создание динамических Web-страниц в редакторе
Microsoft FrontPage
4.1 Каскадные таблицы стилей - CSS
Использование в Web-дизайне каскадных таблиц стилей (Cascading
Style Sheets), известных как CSS, является огромным скачком вперед.
Благодаря CSS разработчики получили новые возможности управления
видом и размещением текста на Web-страницах. CSS позволяют оформить
весь Web-сайт при помощи одного набора стилей, благодаря чему страницы
выглядят более согласовано и цельно.
Существует три разновидности таблиц стилей: внешние, внедренные и
встроенные стили. Внешние таблицы стилей управляют стилями нескольких
страниц или целого Web-сайта. Внедренные таблицы стилей контролируют
стили отдельных страниц. Встроенные стили управляют отдельными
элементами страницы.
Используя CSS можно лишь один раз указать, как будут выглядеть, к
примеру, заголовки на каждой странице, вплоть до их размера и цвета. В то
же самое время можно создать специальный стиль заголовка для конкретной
страницы, не затрагивая стилей, общих для всего сайта. Это относится и к
каскадной
части
CSS,
которая
содержит набор
определений,
предписывающих, какой из стилей обладает первенством. Например, если
страница содержит встроенные стили, внедренные стили и ссылку к
внешней таблице стилей, встроенный стиль учитывается первым, а внешняя
таблица стилей – последней.
Встроенные стили обладают наименьшими возможностями, так как
эффект ограничен единственным элементом HTML на одной странице.
Для установки внешних таблиц стилей требуется немного больше
работы, чем для установки внедренных таблиц, но они могут быть
применены ко всему сайту. При этом внешние таблицы имеют еще одно
преимущество – они ускоряют загрузку, так как необязательно помещать все
данные форматирования HTML на каждой странице /7/.
Используя динамический HTML – DHTML (Dynamic HTML) можно
украсить страницы движущимися текстом и графикой. В разумных дозах
этот эффект может придать странице некоторую театральность в хорошем
смысле слова. При этом DHTML не является просто текстовой анимацией.
4.1.1 Активизация каскадных таблиц стилей и DHTML
Для активизации CSS (Сascading Style Sheets) и DHTML (Dynamic
HTML) необходимо выбрать пункт меню Tools => Page Options (Сервис =>
Опции страницы). В появившемся диалоговом окне “Page Options” (Опции
страницы) нужно выбрать вкладку “Compatibility” (Совместимость) (рисунок
4.1).
105
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Рисунок 4.1 - Активизация каскадных таблиц стилей и DHTML
На вкладке “Compatibility” (Совместимость) в раскрывающихся меню
“Browsers” (Броузеры) и “Servers” (Серверы) необходимо указать “Custom”
(Общий). В меню “Browser versions” (Версии броузеров) нужно выбрать
пункт “4.0 browsers and later” (Броузеры 4.0 и выше).
В разделе “Technologies” (Технологии) требуется установить флажки
“CSS 1.0 (formatting)” (CSS 1.0.(форматирование)), “CSS 2.0 (positioning)”
(CSS 2.0 (позиционирование)) и “Dynamic HTML” (Динамический HTML).
После этого нажать OK.
4.1.2 Создание и редактирование внедренных таблиц стилей
Внедренная таблица стилей может использоваться только для
страницы, в которой она была создана. Внедренные таблицы стилей также
называют внутренними таблицами стилей.
Для создания внедренной таблицы стилей необходимо перейти в
режим редактирования страницы и выбрать пункт Format => Style (Формат
=> Стиль). В появившемся диалоговом окне “Style” (Стиль) в пункте “List”
(Список) необходимо выбрать пункт “User-defined styles” (Стили
пользователя) и нажать кнопку “New” (Создать) (рисунок 4.2).
В появившемся диалоговом окне “New Style” (Создание стиля) в
текстовом поле “Name (selector)” (Имя (селектор)) ввести имя и нажать
кнопку “Format” (Формат) (рисунок 4.3).
В раскрывающемся меню пункта “Format” (Формат) необходимо
выбрать один из элементов для редактирования: “Format” => “Font” (Формат
106
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
=> Шрифт), “Paragraph” (Абзац), “Border” (Граница), “Numbering”
(Нумерация) или “Position” (Положение). После чего нажать ОК.
Рисунок 4.2 – Задание нового стиля в окне “Style”
Рисунок 4.3 – Выбор элементов для создания стилей
107
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
В появившемся диалоговом окне “Style” (Стиль) требуется определить
параметры нового стиля. Выбрав параметры, например, для шрифта, можно
использовать ниспадающее меню “Format” (Шрифт), чтобы добавить
параметры из пункта “Border” (Рамка). Закончив, нужно проверить
результаты в окне “Preview” (Предварительный просмотр) и нажать кнопку
ОК. Новый стиль будет занесен в список “User-defined styles” (Стили
пользователя) в диалоговом окне “Style” (рисунок 4.4).
Рисунок 4.4 – Новые стили в диалоговом окне “Style”
Если требуется создать еще один стиль, снова нажать кнопку “New”
(Создать) и повторить все действия с начала.
Если нужно просмотреть код CSS созданного стиля, необходимо в
режиме просмотра “Normal” (Обычный) выделить элемент страницы, к
которому применялся стиль и щелкнуть по вкладке “HTML”. При этом новые
стили автоматически записываются в тег <Style> заголовка <Head> (рисунок
4.5).
Помимо добавления новых стилей в окне “Style” (Стиль) можно
редактировать существующие стили, либо стандартные теги HTML, либо
созданные стили “User-defined styles” (Стили пользователя). Для этого
необходимо в диалоговом окне “Style” в раскрывающемся меню “List”
(Список) выбрать пункт “All HTML tags” (Все теги HTML), либо “Userdefined styles” (Стили пользователя). После этого нажать кнопку “Modify”
(Изменить). В открывшемся диалоговом окне “Modify Style” (Изменение
стиля) выделенный стиль будет занесен в текстовое поле “Name (selector)”
(Имя (селектор)). После этого требуется нажать кнопку “Format” (Формат) и
выбрать из ниспадающего меню тот параметр, который нужно изменить.
Когда появится диалоговое окно, связанное с этим параметром, внести
изменения и нажать OK, при этом все изменения сохранятся. Другими
108
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
словами порядок работы с диалоговым окном “Modify Style” аналогичен
работе с диалоговым окном “New Style”.
Рисунок 4.5 – HTML-код добавленных стилей
4.1.3 Создание внешних таблиц стилей
Работа с внешними таблицами стилей состоит из трех этапов: сначала
создать таблицу, затем настроить или отредактировать таблицу, уточняя ее
стили, и, наконец, соединить с ней существующий Web-сайт или отдельные
Web-страницы. Для того, чтобы создать внешнюю таблицу стилей
необходимо выбрать пункт меню File => New => Page. В появившемся
диалогом окне “New” (Создать) выбрать закладку “Style Sheets” (Таблицы
стилей). Здесь можно создать таблицу с нуля, либо использовать один из
представленных в списке шаблонов стилей (рисунок 4.6).
После этого нажать OK, и FrontPage создаст страницу, присвоит ей
расширение .css и отобразит в главном окне /10/. Новая таблица стилей будет
пустой. Если таблица основана на шаблоне, она будет включать определения
различных элементов HTML (рисунок 4.7).
Нужно сохранить эту страницу, при этом в появившемся диалоговом
окне “Save As” необходимо присвоить ей имя, сохранив при этом
расширение .css.
Нужно отметить, что в диалоговом “Themes” (Схемы) можно
просмотреть и выбрать некоторые таблицы стилей, основанные на шаблонах.
Для этого необходимо вызвать пункт меню Format => Theme (Формат =>
Схема) и появится диалоговое окно “Themes” (рисунок 4.8).
109
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
В окне “Themes” (Схемы) необходимо выбрать из списка
существующие шаблоны и с помощью кнопки “Modify” (Изменить) можно
внести различные изменения в них. Можно использовать кнопки “Colors”
(Цвета), “Graphics” (Графика), “Text” (Текст) для форматирования шаблона.
Рисунок 4.6 – Создание внешней таблицы стилей
Рисунок 4.7 – Основанная на шаблоне внешняя таблица стилей
110
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Рисунок 4.8 – Просмотр таблиц стилей в окне “Themes”
4.1.4 Настройка внешней таблицы стилей
Для настройки таблицы стилей нужно начала открыть эту таблицу,
которая будет совершенно пустой. Затем выбрать пункт Format => Style
(Формат => Стиль) или щелкнуть по панели инструментов “Style” (Стиль). В
появившемся диалоговом окне “Style” (рисунок 4.9) необходимо выделить в
списке “Styles” (Стили) тег HTML, для которого необходимо создать стиль и
нажать кнопку “Modify” (Изменить).
Рисунок 4.9 – Выбор тега для внесения изменений в нем
В открывшемся диалоговом окне “Modify Style” (Изменения стиля)
выделенный тег HTML будет занесен в текстовом поле “Name (selector)”
(Имя (селектор)). Здесь необходимо нажать кнопку “Format” и выбрать из
меню соответствующие пункты “Font” (Шрифт), “Paragraph” (Параграф),
111
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
“Border” (Рамка), “Numbering” (Нумерация), “Position” (Положение) и
изменить этот тег HTML. Внесенные изменения стиля будут отображены в
областях “Preview” (Просмотр) и “Description” (Подробно) диалогового окна
“Modify Style” (Изменение стиля) (рисунок 4.10).
Рисунок 4.10 – Измененный стиль в окне “Style”
Если необходимо изменить другие параметры тега, можно
использовать диалоговое окно “Format” (Формат). После внесения всех
изменений исправленный стиль будет включен в список “User-defined Styles”
(Стили пользователя) диалогового окна “Style” (Стиль).
4.1.5 Определение дублирующих шрифтов во внешних
таблицах стилей
Возможность определения в стилях дублирующих шрифтов – одно из
главных преимуществ использования внешних таблиц стилей. Фактически
предлагается броузеру пользователя использовать шрифт “А”, а если такого
шрифта на компьютере посетителя нет, применить шрифт “Б” и при
отсутствии шрифта “Б”, подставить шрифт “В” и.т.д.
В качестве резервного варианта для посетителей сайта, на компьютерах
которых установлено очень мало шрифтов, можно включить универсальные
определения шрифтовых семейств, чтобы Web-броузеры таких посетителей
хотя бы могли воспользоваться гарнитурами с засечками.
Список наиболее распространенных шрифтовых семейств показан в
таблице 1. В таблице 2 содержится список универсальных шрифтовых
определений CSS.
112
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Таблица 1 - Наиболее распространенные шрифтовые семейства
Определение шрифта
Windows
Macintosh
C засечками (Serif)
Times
Times
Times New Roman
Palatino
Без засечек (Sans Serif) Arial
Geneva, Helvetica
Таблица 2 –Значения универсальных шрифтов CSS
Значения в CSS
Шрифты
Serif
Times, Garamond, Bodony,
Sans serif
Arial, Helvetica, Geneva, Futura
Monospace
Courier, Monaco, Letter Gothic
Cursive (script)
Mistal, Park Avenue
Fantasy (decorative)
Copperplate Gothic, VAG Round
Теперь необходимо пояснить, как устроены CSS-стили. Каждый
элемент HTML (известный в синтаксисе как селектор) имеет, по крайней
мере, одно свойство и значение этого свойства.
Body { font-family: Verdana; color: #66ff33}
Здесь, “Body” – HTML-селектор, “font-family” – первое свойство тега,
“Verdana” – значение первого свойства, “color” – второе свойство тега,
“#66ff33” – значение второго тега.
Селектор может иметь несколько свойств, а каждое свойство –
несколько значений, таких как дублирующие шрифты.
Для определения дублирующих шрифтов необходимо создать
внешнюю таблицу стилей. Найти и выделить в этой таблице определение
шрифта, которому требуется назначить дублирующие шрифты (рисунок
4.11).
Рисунок 4.11 – Выделение шрифта для назначения дублирующего
113
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
После этого установить курсор после шрифтового семейства,
перечисленного первым, непосредственно перед точкой с запятой. Ввести
запятую, пробел и имя второго шрифтового семейства. При этом можно
добавлять несколько шрифтовых семейств, но обязательно нужно указать
универсальное шрифтового определение. Затем необходимо сохранить
таблицу и можно использовать ее на страницах Web-сайта.
4.1.6 Работа с внешними таблицами стилей
Если у разработчика уже создана внешняя таблица, нужно связать с
ней страницы Web-сайта, чтобы задействовать все определенные стили /5/.
Для этого требуется перейти в режим редактирования той Webстраницы, которую необходимо связать с внешней таблицей стилей. Затем
выбрать пункт меню Format => Style Sheet Links (Формат => Связи таблицы
стилей) (рисунок 4.12).
Рисунок 4.12 – Вызов диалогового окна “Link Style Sheet”
В появившемся диалоговом окне “Link Style Sheet” (Связывание
таблицы стилей) выбрать параметр “Selected page(s)” (Выделенная
страница(ы)), если нужно использовать таблицу стилей лишь на текущей
странице и “All pages” (Все страницы), если нужно применить внешнюю
таблицу стилей ко всему Web-сайту. После этого нажать “Add” (Добавить)
(рисунок 4.13).
В появившемся диалоговом окне “Select Hyperlink” (Выбрать
гиперссылку) необходимо выбрать таблицу стилей, которую требуется
использовать, указать ее адрес в форме URL. Затем нажать ОК (рисунок
4.14).
114
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Рисунок 4.13 –Добавление внешней таблицы стилей
Рисунок 4.14 – Выбор файла .css для добавления к основному Web-сайту
Внешняя таблица стилей будет занесена в список в диалоговом окне
“Link Style Sheet” (Связывание таблицы стилей) (рисунок 4.15). Необходимо
нажать OK и эта таблица стилей будет применена к выделенной странице
(либо ко всем страницам Web-сайта).
Если необходимо удалить связи с внешними таблицами стилей нужно
открыть страницу, которая связана с внешней таблицей стилей. Затем
выбрать из меню пункты Format => Style Sheet Links (Формат => Связи
таблицы стилей). В диалоговом окне “Link Style Sheet” (Связывание таблицы
стилей) выбрать параметр “Selected page(s)” (Выбранная страница(ы)), если
требуется удалить связь только для текущей страницы, либо “All pages” (Все
115
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
страницы), если требуется удалить связь для всего Web-сайта. Затем
выделить таблицу стилей в поле URL и нажать кнопку “Remove” (Удалить).
После этого необходимо нажать кнопку OK и выбранные страницы
приобретут исходный вид, который они имели до связывания с внешней
таблицей стилей.
Рисунок 4.15 – Диалоговое окно “Link Style Sheet”
4.2 Использование эффектов динамического HTML
DHTML позволяет применить эффект обтекания к тексту, “закрутить
спиралью” графические объекты и связать движение указателя посетителей
по Web-сайту с возникновением каких-либо событий /13/.
Перечень параметров DHTML изменяется в зависимости от того, какой
элемент выделен на странице. Теги DHTML работают с 4-ой и поздними
версиями броузерами Microsoft Internet Explorer или Netscape Navigator.
Броузеры более ранних версий просто покажут статические версии страниц.
Динамические эффекты. Для того, чтобы активизировать панель
инструментов
“DHTML Effects” (Эффекты динамического HTML)
необходимо выбрать в меню пункты Format => Dynamic HTML Effects
(Формат => Динамические эффекты HTML) (рисунок 4.16). Появится панель
инструментов “DHTML Effects” (Эффекты DHTML), которую можно
переместить в любое удобное место.
Чтобы вставить эффект на панели инструментов “DHTML Effects”
необходимо выделить элемент страницы, к которому необходимо применить
эффект DHTML (рисунок 4.17). После этого в раскрывающемся меню
“Apply” (Применить) панели “DHTML Effects” необходимо выбрать
применяемый эффект (рисунок 4.18). В зависимости от выбора в меню
“Apply” необходимо выбрать дальнейшие установки эффекта в меню “Choose
Setting” (Выбрать установки) (рисунок 4.19). После этого можно выделить
другой элемент страницы и применить к нему эффекты DHTML.
116
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Для удаления одного из динамических эффектов необходимо выбрать
этот элемент, затем щелкнуть по панели инструментов “DHTML Effects”,
затем по кнопке “Remove Effects” (Удалить эффект) (рисунок 4.20) и эффект
будет удален.
Рисунок 4.16 – Добавление эффектов динамического HTML
Рисунок 4.17 – Выбор события, с которым будет связан эффект
Рисунок 4.18 – Выбор применяемого эффекта в раскрывающемся меню
“Apply”
Рисунок 4.19 – Выбор установок в меню “Choose Setting”
117
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Рисунок 4.20 – Удаление динамического эффекта
Закончив настройки необходимо щелкнуть по закладке “Preview” в
главном окне Microsoft FrontPage, чтобы увидеть, как выглядит страница с
примененными к ней эффектами динамического HTML. При этом на одной
странице может быть использовано несколько динамических эффектов.
Пример страницы с примененными динамическими эффектами представлен
на рисунке 4.21.
Рисунок 4.21 – Страница, с примененными к ней динамическими эффектами
Как известно, особенностью Microsoft FrontPage является то, что этот
редактор содержит три окна просмотра “Normal” (Обычный), в котором
можно редактировать открытую Web-страницу, “Preview” - предварительный
просмотр и окно просмотра или редактирования HTML-кода - “HTML”.
Таким образом, если вносятся какие-то изменения в Web-страницу, Microsoft
FrontPage автоматически прописывает HTML-код, который можно
посмотреть на закладке HTML.
Рассмотрим пример страницы, в которую добавили элементы
динамического HTML (рисунок 4.22). При наведении курсора мыши на текст,
появляется динамический эффект - цветная рамка. На закладке “HTML”
видно, как добавились элементы языка JavaScript в основной HTML-код
Web-страницы (рисунок 4.23).
118
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Рисунок 4.22 – Web-страница с добавленными эффектами
Рисунок 4.23 - НТML-код страницы с добавленными эффектам
4.2.1 Использование переходов страниц
Эта особенность DHTML позволяет создавать видеоэффекты
переходов изображения в момент открытия или закрытия посетителем
страницы. FrontPage включает более 20 эффектов перехода. Переход страниц
часто применяется при создании корпоративной сети Intranet, когда
119
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
разработчик точно знает, какое программное обеспечение используют
посетители Web-сайта.
Для добавления эффекта перехода страниц необходимо перейти в
режим редактирования страницы и убедиться, что кнопка “Normal”
активизирована. Затем необходимо щелкнуть в любом месте страницы и
выбрать в меню пункты Format => Page Transition (Формат => Страница
перехода) (рисунок 4.24).
Рисунок 4.24 – Добавление переходов страниц
В открывшемся диалоговом окне “Page Transitions” (Страница
переходов) необходимо воспользоваться раскрывающимся меню “Event”
(Событие), чтобы выбрать то событие, с которым будет связан эффект
(открытие, закрытие страницы и т.д.) (рисунок 4.25).
Затем необходимо воспользоваться прокручивающимся текстовым
полем “Transition effect” (Эффект перехода), чтобы выбрать тип эффекта
(вылет, жалюзи, ромб, вспышка, растворение и т.д.). Необходимо ввести в
текстовое поле “Duration (seconds)” (Длительность (секунд)) время, которое
потребуется на выполнение перехода (рисунок 4.26).
Выбрав необходимые параметры, нажать кнопку ОК. После этого
щелкнуть по закладке “Preview” в главном окне Microsoft FrontPage, чтобы
увидеть, как выглядит страница с эффектом перехода.
Для отмены перехода страниц, необходимо сначала убедиться, что в
окне просмотра страниц активизирована закладка “Normal”. Затем
необходимо щелкнуть в любом месте страницы и выбрать пункт меню
Format => Page Transition (Формат => Страница перехода). В появившемся
диалоговом окне “Page Transitions” (Страница переходов) необходимо
120
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
воспользоваться прокручивающимся текстовым полем “Transition effect”
(Эффект перехода), чтобы выбрать первый пункт списка “No Effect” (Без
эффекта). После этого нажать кнопку ОК, и переход будет отменен.
Рисунок 4.25 – Выбор события в окне “Page Transitions”
Рисунок 4.26 – Выбор эффекта перехода и его продолжительность
121
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
5 Загрузка страницы на Web-сервер
Для того чтобы зарегистрировать и выложить свой Web-сайт в Internet
необходимо проделать следующие шаги. В строке адрес броузера,
необходимо набрать www.narod.ru. Здесь необходимо занять имя для сайта.
Для этого необходимо в строке набрать любое слово (окончание narod.ru
добавится автоматически) и для регистрации имени нажать “Занять”
(рисунок 5.1).
Рисунок 5.1 – Ввод имени Web-сайта для регистрации
После этого появится диалоговое окно регистрации, (шаг 1 из 2), в
котором необходимо ввести информацию о владельце Web-сайта (рисунок
5.2).
Рисунок 5.2 – Заполнение полей регистрации (шаг 1 из 2)
Здесь необходимо пройти все пункты регистрации, которые
предлагаются автоматически. При этом, в строку “Логин” ничего не надо
122
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
вводить, потому что в предыдущей форме уже введено имя будущего сайта, а
в форме 2 в строке “Логин” он уже будет введён. После этого необходимо
ввести Имя, Фамилию и нажать кнопку “Далее”. Появится диалоговое окно
регистрации, шаг 2 из 2 (рисунок 5.3).
Рисунок 5.3 – Заполнение полей регистрации (шаг 2 из 2)
В этом окне необходимо ввести пароль, под которым будет храниться
доступ к сайту, подтвердить пароль, т.е. ввести его ещё раз.
Бывают случаи, когда пользователи забывают пароль, под которым
зарегистрирован сайт. Поэтому используется контрольный вопрос, который
необходимо ввести и ответ на него, например дата дня рождения, или имя
любимого домашнего питомца.
Затем в строке “Электронная почта” необходимо ввести адрес
электронного почтового ящика, на этот адрес будет выслано письмо с
просьбой подтвердить регистрацию.
Затем появятся цифры, которые указаны на рисунке 5.3, они постоянно
меняются. Их необходимо ввести и нажать ОК.
Последний этап регистрации имени под сайт. В последнем окне
регистрации необходимо ввести дополнительную информацию о себе.
Нужно указать обращение, псевдоним, пол, дату рождения, страну, округ,
город, сферу занятий.
После этого необходимо указать кодировку и формат писем, которые
будут направляться службой поддержки. После этого необходимо нажать
“Сохранить” (рисунок 5.4).
123
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Рисунок 5.4 – Последний этап регистрации
Затем на сайте narod.ru выбрать пункт “Загрузка файлов на сайт”
(рисунок 5.5). Здесь необходимо указать путь к файлам с помощью кнопки
“Обзор” и нажать кнопку “Загрузить файлы” (рисунок 5.6).
Рисунок 5.5 – Загрузка файлов на сервер
Для просмотра всех файлов, которые уже загружены, нужно выбрать
“Управление файлами и НТML-редактор” (рисунок 5.7). Здесь отображены
все файлы и папки, которые были выложены в Internet. Здесь можно как
создавать папки, так и перемещая файлы из папки в папку. Не стоит забывать
124
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
о том, что если меняются расположение хотя бы одного файла, необходимо
изменить в html-коде сайта путь к перемещаемому файлу (рисунок 5.8).
Рисунок 5.6 – Выбор файлов для загрузки
Рисунок 5.7 – Выбор просмотра выложенных на Web-сайт страниц
Рисунок 5.8 – Просмотр выложенных на Web-сайт страниц
125
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
6 Контрольные вопросы для закрепления материала
1) Особенности планирования Web-сайта.
2) Применение древовидной структуры при создании Web-сайтов.
3) Использование линейной организации узла (с альтернативами, с
переходами, с ответвлениями).
4) Преимущество использования табличной структуры организации
Web-узла.
5) Применение
смешанной иерархической структуры и Webструктуры при создании Web-сайта.
6) Особенности и назначение редактора Microsoft FrontPage
7) Главное окно и главное меню редактора.
8) Создание, сохранение и удаление страниц в редакторе.
9) Форматирование текста, списков, абзацев в редакторе.
10)Работа с цветом (фона, текста и т.д.) в редакторе.
11)Использование гиперссылок в редакторе, закладки.
12)Работа с таблицами в редакторе. Автоматическая вставка таблицы.
13)Добавление строк и столбцов таблицы. Разбиение и объединение
ячеек. Вычерчивание таблицы.
14)Графика в редакторе. Использование рисунков в качестве
гиперссылок.
15)Добавление видео и анимации.
16) Добавление на Web-страницу фонового звука.
17) Особенности использования Web-компонентов в редакторе
(динамическая кнопка, бегущая строка, счетчик посещений
страницы, рекламный баннер и др.).
18)Фреймы. Создание фреймовой страницы. Сохранение фрейма.
19)Фреймы. Организация фреймовых страниц.
20)Разбиение страницы во фреймсете. Свойства фрейма.
21)Гиперссылки во фреймах. Закладки во фреймах.
22)Карты изображений. Особенности применения в редакторе.
23) Формы в редакторе FrontPage. Создание формы с нуля.
24) Формы во FrontPage. Форма обратной связи.
25) Формы во FrontPage. Создание основных типов форм. Создание
переключателя (Radio button).
26) Формы во FrontPage. Создание раскрывающегося списка (DropDown Menu).
27) Формы во FrontPage. Создание однострочного текстового поля (OneLine Text Box).
28) Формы во FrontPage. Создание прокручивающего текстового окна
(Scrolling Text Box).
29) Формы во FrontPage. Создание флажка (Check Box).
30) Формы во FrontPage. Создание кнопки (Push Button).
31) Особенности окна Form Properties.
126
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
32)Создание формы обратной связи.
33)Создание страницы подтверждения. Проверка полей форм.
34)Конфигурирование дискуссионного компонента.
35)Конфигурирование регистрационного компонента.
36) Конфигурирование пользовательских обработчиков Custom ISAPI,
NSAPI, CGI or ASP Script.
37)Сохранение результатов формы в файле.
38)Сохранение результатов формы в виде сообщения электронной
почты.
39)Сохранение результатов формы в базе данных.
40) Cохранение результатов формы при помощи пользовательского
сценария.
41) Каскадные таблицы стилей – CSS.
42) Активизация каскадных таблиц стилей и DHTML.
43)Создание и редактирование внедренных таблиц стилей.
44)Создание внешних таблиц стилей.
45)Работа с внешними таблицами стилей.
46) Использование эффектов динамического HTML.
47)Использование переходов страниц.
48) Регистрация пользователя при загрузке страницы на Web-сервер.
49) Выбор файлов для загрузки на Web-сервер.
50) Просмотр всех загруженных на Web-сервер файлов.
127
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Заключение
В данном учебно-методическом пособии рассматриваются основы
создания Web-страниц в одном из современных редакторов – Microsoft
FrontPage. Материал изложен с нарастанием сложности. Сначала студенты
изучают особенности правильной организации информации при
планировании Web-сайта. Затем знакомятся со средствами форматирования
текста в редакторе Microsoft FrontPage, списками, таблицами, со способами
организации ссылок, с тем, как осуществляется вставка в страницу рисунков,
как организуются ссылки из частей рисунка с помощью карт изображений,
как добавляются интерактивные средства и эффекты мультимедиа. Затем в
пособии описаны способы создания фреймов, организации форм,
применение каскадных таблиц стилей, использование элементов языка
JavaScript в Microsoft FrontPage. Заканчивается изложение материала в
пособии описанием загрузки готового Web-сайта на сервер.
Таким образом, данное учебно-методическое пособие поможет
студентам научиться разрабатывать общую структуру сайтов в редакторе
Microsoft FrontPage, добавлять в них различные элементы дизайна (от
простых до самых сложных) и размещать готовые сайты в Internet путем
загрузки их на Web-сервер.
В заключение, автор выражает признательность рецензенту и научному
редактору за внимательное прочтение рукописи и замечания,
способствовавшие
улучшению
качества
предлагаемого
учебнометодического пособия.
128
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Список использованных источников
1 Майкл, А. Создание Web-страниц с помощью MS Office 97 /А.
Майкл. — М.: БИНОМ, 1998. — 480 с.
2 Рэндел, Н. Microsoft FrontPage в подлиннике / Н. Рэндел, Д. Джонс
— СПб.: BHV- Санкт-Петербург, 1997. — 432 с.
3 Хестер, Н. FrontPage 2002 для Windows / Хестер Нолан – М.: ДМК
Пресс, 2002. – 448 с. – ISBN 5-94074-117-7.
4 Основы Web-технологий / П.Б. Храмцов, С.А. Брик, А.М. Русак,
А.И. Сурин; под редакцией П.Б. Храмцова. – М.: ИНТУИТ.РУ
”Интернет-Университет Информационных Технологий”, 2003. – 512
с. – ISBN 5-9556-0001-9.
5 Форгаагд, Р. FrontPage98. Русское руководство FrontPage
[Электронный ресурс]: руководство по созданию Web-сайтов/
Рэнди Форгаагд, 2004. - Режим доступа: WWW.URL:
http://webmaster.yartop.ru/desing/webe/webe5/webe5-01.html.
6 Редактор FrontPage [Электронный ресурс]: руководство
по
созданию Web-сайтов, 2004. - Режим доступа: WWW.URL:
http://crimegen.boom.ru/FP1.htm.
7 Введение в HTML [Электронный ресурс]: учебник для вузов / П.Б.
Храмцов, С.А. Брик, А.М. Русак, А.И. Сурин; под редакцией П.Б.
Храмцова, 2003. - Режим доступа: WWW.URL: http://www.intuit.ru.
8 Пауэлл, Т.А. Полное руководство по HTML / Пер. с англ. А.В.
Качанов. – Мн.: ООО “Попурри”, 2002. – 912 с. – ISBN 5-9556-00019.
9 Матросов, А.В. HTML 4.0. Новый уровень создания HTMLдокументов: наиболее полное руководство в подлиннике / А.В.
Матросов, А.О. Сергеев, М.П. Чаунин. – СПб.: БХВ - Петербург,
2001. – 672 с.:ил. – ISBN 5-8206-0072-Х.
10 Применение каскадных таблиц стилей (CSS) [Электронный
ресурс]: учебник для вузов / П.Б. Храмцов, С.А. Брик, А.М. Русак,
А.И. Сурин; под редакцией П.Б. Храмцова, 2003. - Режим доступа:
WWW.URL: http://www.intuit.ru.
11 Штайнер, Г. HTML/XML/CSS: справочник/ Г. Штайнер. – М.:
Лаборатория Базовых знаний, 2001. – 512 с.: ил. – ISBN5-93208-0914.
12 Ливенгстон, Д. Браун, М. CSS и DHTML: Web-профессионалам / Д.
Ливенгстон, М. Браун. - BHV-Kиeв, 2002.
13 Коржинский, С.Н. Настольная книга Web-мастера: эффективное
применение HTML, CSS и JavaScript. – М.: КноРус, 2000.
14 Пэтчетт, К. CGI/Perl: создание программ для Web / К.Пэтчетт, М.
Райт,BHV. - Kиeв, 2000 .
15 Бранденбау, Дж. JavaScript: сборник рецептов для профессионалов
/ Дж. Бранденбау. – СПб.: Питер, 2001. – 416 с.: ил. ISBN 5-27200110-9.
129
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
16 Дарнел, Р. JavaScript = JavaScript: Quick Reference: справочник / Р.
Дарнелл. – СПб.: Питер, 2001. ISBN 5-88782-419-0.
130
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Приложение А
(справочное)
Индивидуальные задания для лабораторной работы №1
Тема: “Создание простых Web-страниц в редакторе Microsoft
FrontPage”.
Цель работы:
Освоить технологию создания Web-страницы с использованием
редактора Microsoft FrontPage. Создать при помощи данной программы
простую Web-страницу и записать ее на Web-сервер.
Постановка задачи:
Создать Web-страницу в редакторе Microsoft FrontPage “Рекламный
сайт фирмы” по заданным вариантам:
1) Фаренгейт.
2) Галактика.
3) Интерьер.
4) Ариадна.
5) Пирамида.
6) Фора.
7) Офелия.
8) Уральский торжок.
9) Самсунг-центр.
10)Эльдорадо.
11)Эль де Буте.
12)Оренж рич.
13)Сателлит.
14)Камелия.
15)Орбита.
16)Гелиос.
17)Столплит.
18)Евростиль.
19)Коника-центр.
20)Жемчуг.
21)Дайна.
22)Ликос.
23)Оренпластик.
24)Оренбурггазпром.
25)Оренбургнефть.
Данная Web-страница должна содержать шесть основных пунктов:
“История фирмы”, “О нас”, “Контакты”, “Прайс”, “Сотрудники”,
“Объявления”.
В работе с основным файлом Index.html должны быть связаны
гипертекстовыми связями не менее 10-15 страниц. При этом необходимо
использовать пять видов гиперссылок, в том числе ссылку на электронную
почту и на внешний ресурс. Настроить цвета гиперссылок (посещенные,
непосещенные, активные).
При разработке Web-сайта использовать различное форматирование
текста (цвет, начертание), абзацев (полуторный, одинарный), списков
(нумерованные, маркированные), таблиц (простые, составные), рисунков
(рамки, размер). Добавить на страницу Web-компоненты, такие как
динамические кнопки и бегущая строка.
131
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Приложение Б
(справочное)
Индивидуальные задания для лабораторной работы №2
Тема: “Создание сложных Web-страниц в редакторе Microsoft
FrontPage”.
Цель работы:
Освоить
технологию
создания
сложных
Web-страниц,
с
использованием таких элементов дизайна как фреймы, формы, карты
изображений, CGI.
Постановка задачи:
Создать Web-страницу в редакторе Microsoft FrontPage “Электронный
гипертекстовый учебник” по заданным вариантам:
1) Алгоритмические языки.
2) Информатика.
3) Дискретная математика.
4) Высшая математика.
5) Структуры и алгоритмы обработки данных.
6) Основы теории управления.
7) Теория вероятностей.
8) Вычислительная математика.
9) Статистические методы обработки информации.
10)Функциональное и логическое программирование.
11)Начертательная геометрия.
12)Объектно-ориентированное программирование.
13)Сети ЭВМ и телекоммуникации.
14)Теория языков программирования.
15)Базы данных.
16)Теория вычислительных процессов.
17)Электротехника.
18)Человеко-машинное взаимодействие.
19)Архитектура вычислительных систем.
20)Операционные системы.
21)Системы искусственного интеллекта.
22)Экспертные системы.
23)Культурология.
24)Сетевые информационные технологии.
25)Технология разработки программного обеспечения.
При разработке использовать такие элементы дизайна как фреймы и
карты изображений. Во фреймах реализовать использование гиперссылок с
одного на другой фрейм, а также использование закладок.
При создании Web-сайта использовать формы для организации
интерфейса гостевой книги. Для обработки информации из формы
использовать CGI - Common Gateway Interface (Общий интерфейс шлюзов).
132
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Приложение В
(справочное)
Индивидуальные задания для лабораторной работы №3
Тема: “Создание динамических Web-страниц в редакторе Microsoft
FrontPage“.
Цель работы:
Освоить технологию создания динамических Web-страниц с
использованием таких элементов разметки как каскадные таблицы стилей
CSS и динамического HTML (на основе JavaScript).
Постановка задачи:
Создать Web-сайт в редакторе Microsoft FrontPage “Интернет магазин”
по заданным вариантам:
1) Научная литература.
2) Канцелярские товары.
3) Учебники.
4) Парфюмерия.
5) Художественная литература.
6) Косметика.
7) Видео фильмы.
8) Украшения.
9) Стильная одежда.
10)Женская обувь.
11)Музыкальные компакт-диски.
12)Мужская обувь.
13)Мягкие игрушки.
14)Сувениры.
15)Открытки.
16)Развлекательные журналы.
17)Детская одежда.
18)Все для рыбалки.
19)Кожгалантерея (сумки, перчатки, портмоне).
20)Головные уборы.
21)Посуда.
22)Все для охоты.
23)Елочные украшения.
24)Изделия из меха и кожи.
25) Программы и игры для ПК на CD.
При
разработке
Web-страницы
необходимо
использовать
динамические эффекты, такие как каскадные таблицы стилей CSS – внешние,
встроенные и внедренные, а также динамический HTML (на основе языка
управления сценариями – JavaScript).
133
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Приложение Г
(справочное)
Правила присвоения классификационного кода
(ГОУ ОГУ)
134
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Приложение Д
(справочное)
Пример оформления содержания
135
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Приложение Е
(справочное)
Структура отчета
1
2
3
4
5
6
7
8
9
Титульный лист.
Постановка задачи.
Содержание.
Введение.
Теоретические предпосылки.
Краткие ответы на контрольные вопросы.
Заключение.
Список использованных источников.
Описание
хода
выполнения
работы
(последовательность
выполняемых действий, команд) или HTML-код Web-страницы.
10 Выводы.
136
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Приложение Ж
(справочное)
Пример оформления отчета по лабораторной работе
Министерство образования и науки Российской Федерации
Федеральное агентство по образованию
ГОСУДАРСТВЕННОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ
ВЫСШЕГО ПРОФЕССИОНАЛЬНОГО ОБРАЗОВАНИЯ
“ОРЕНБУРГСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ”
Факультет информационных технологий
Кафедра программного обеспечения вычислительной техники
и автоматизированных систем
Лабораторная работа
по дисциплине “Сетевые информационные технологии ”
“Создание сложных Web-страниц в редакторе Microsoft FrontPage”
ГОУ ОГУ 230105.65.9006.13 П
Руководитель работы
______________Насейкина Л.Ф.
"____”______________2006г.
Исполнитель
студент гр. 01ПО1
________________Королев Е.А.
"____"______________2006г.
Оренбург 2006
137
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Постановка задачи
Цель работы:
Освоить технологию создания сложных Web-страниц, с
использованием таких элементов как фреймы, формы, карты
изображений, CGI.
Постановка задачи:
Создать Web-страницу в редакторе Microsoft FrontPage
“Электронный гипертекстовый учебник” по дисциплине “Сети ЭВМ и
телекоммуникации”.
138
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Содержание
1 Теоретические предпосылки.......................................
4
1.1 Фреймы………………………………………………..
4
1.2 Карты изображения………………………………….
5
1.3 Формы………………………………………………… 6
Список использованных источников ............................... 8
Приложение А HTML-код Web-сайта……......................
9
Приложение Б Контрольный пример...........................… 13
Лист
3
139
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
1 Теоретические предпосылки
Программа Microsoft FrontPage предназначена для быстрого
создания Web-сайтов. Ее приобретение избавляет от сложностей
построения сайтов с использованием языка HTML (Hyper-Text Markup
Language), основного языка разметки среды Web. При
ее
использовании пользователь будет работать только с несложным меню
и набором команд, которые схожи с другими командами из программ
Microsoft, таких как Word, Excel, PowerPoint.
1.1 Фреймы
Одно из больших преимуществ создания страниц на основе
фреймов состоит в том, что можно формировать навигационные
гиперссылки ко всем частям сайта. При этом содержание одного из
фреймов может оставаться неизменным даже тогда, когда посетитель
прокручивает содержимое основного фрейма. Благодаря этому
посетители легко ориентируются на сайте, без труда переходя к разным
его частям.
Тем не менее, у фреймов есть несколько недостатков. Заголовок
страницы остается одним и тем же, даже когда посетители
перемещаются от фрейма к фрейму, что приводит к разного рода
недоразумениям. Посетители не могут сделать закладку на конкретном
фрейме в своих Web-броузерах, получая вместо этого ссылку на
домашнюю страницу сайта. Один из методов решения этих проблем
состоит в использовании навигационных панелей, сохраняющих
свободу передвижения по сайту.
Для создания фреймовой страницы необходимо:
1)
Перейти в окно просмотра страницы, затем выбрать в меню
пункты “Файл” => “Создать” => “Страница или Web” (File =>
New => Page or Web) (Ctrl+N).
2)
В появившейся области задач щелкнуть по ссылке “Шаблоны
страниц” (Page Templates).
3)
В открывшемся диалоговом окне “Шаблоны страниц” (Page
Templates) выбрать вкладку “Фреймовые страницы” (Frames
Pages). Использовать область “Предварительный просмотр”
(Preview) диалогового окна, чтобы выбрать шаблон фреймовой
страницы, затем нажать на кнопку ОК. Появится основанная на
этом шаблоне пустая фреймовая страница, которая в каждом из
своих фреймов предлагает два варианта: “Установить исходную
страницу” (Set Initial Page) и “Создать страницу” (New Page).
Лист
4
140
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Чтобы связать фрейм с существующей на Web-сайте страницей,
необходимо щелкнуть по кнопке “Установить исходную
страницу” (Set Initial Page). В появившемся диалоговом окне
“Добавление гиперссылки” (Insert Hyperlink) - перейти к той
странице, с которой работать, и нажать кнопку ОК. Страница
появится во фрейме. Чтобы создать для фрейма новую пустую
страницу необходимо нажать “Новая страница” (New Page).
Внутри фрейма появится пустая страница, основанная на
шаблоне “Обычный” (Normal). Теперь можно разместить в этом
фрейме любую информацию.
5)
Нажать клавиши Ctrl+S, чтобы сохранить новый фрейм и
фреймовую страницу. Если создана новая страница для какоголибо из фреймов, то фрейм этой страницы будет выделен в
области предварительного просмотра диалогового окна “Сохранить как” (Save As).
6)
Дать новой странице имя и заголовок, отличные от уже
существующих на сайте, и затем нажать кнопку “Сохранить”
(Save). Новая страница будет сохранена, после чего появится
диалоговое окно “Сохранить как” (Save As) для сохранения фреймовой страницы целиком (в окне предварительного просмотра
эту страницу будет окружать широкая синяя рамка).
7)
Дать фреймовой странице имя и заголовок, отличные от уже
существующих на сайте и нажать кнопку “Сохранить” (Save).
Фреймовая страница будет сохранена.
Уже создав фреймсет по одному из шаблонов фреймов, можно, к
примеру, сообразить, что в нем явно не хватает еще одного фрейма.
Исправить дело можно двумя различными способами: через меню
Frame или с помощью клавиатуры.
В первом случае необходимо перейти в режим редактирования
страницы, щелчком кнопки мыши выбрать фрейм, который
необходимо разделить. При этом страница этого фрейма будет
выделена цветным контуром. Затем выбрать в команду “Frames” =>
“Split Frame” (Фреймы => Разбить фрейм). На экране появится
диалоговое окно “Split Frame” (Разбить фрейм).
В диалоговом окне “Split Frame” (Разбить фрейм) необходимо
установить переключатель в положение “Split into Columns” (Разбить
на столбцы) или “Split into Rows” (Разбить на строки) и нажать кнопку
ОК.
1.2 Карты изображения
4)
Как известно в качестве гиперссылки при создании
Web-страниц может использоваться слово, предложение, рисунок.
Лист
5
141
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
При этом, по щелчку по этому рисунку будет загружаться Webстраница, связанная с ним.
Карты изображений отличаются от обычных рисунков-ссылок
тем что, карты изображений разделены на области, каждая из которых
загружает отдельный файл. Карты изображений могут быть
различными: круг, квадрат, многоугольник.
Для создания карт изображений используются следующие
кнопки панели инструментов “Pictures” (Рисунки): “Select” (Выбрать),
“Rectangle”
(Прямоугольник),
“Circle”
(Круг),
“Polygon”
(Многоугольник) и “Highlight Hotspot” (Выделить активную область).
1.3 Формы
Формы предназначены для интерактивного общения с
посетителями сайта. К примеру, если необходимо сделать гостевую
книгу или страницу, где посетители бы высказывали свое мнение или
указывали на ошибки в сайте, либо, чтобы посетители дополняли сайт.
Стандарт, который определяет, как посетители взаимодействуют
с web-узлом, назван CGI-Common Gateway Interface (Общий интерфейс
шлюзов). Программы сервера, имеющие дело с входной информацией
типа форм, называются скриптами CGI и написаны в соответствии со
спецификациями CGI. С помощью форм можно получить почти любую
информацию от посетителей. В каждой форме имеется как минимум
два элемента или так называемые поля формы - поле для ввода текста
или выбора варианта и кнопка “Отправить”, инициирующая запись
результатов из формы в файл или в программу обработки на сервере.
Каждая форма состоит из элементов, данные из которых при нажатии
на кнопку, завершающую форму, совершают однородное действие или все вместе отправляются на сервер или все разом очищаются.
FrontPage предлагает следующие поля форм:
однострочное текстовое поле (One-line text box) ;
прокручивающееся текстовое окно (Scrolling text box);
;
флажок (Check box) ;
переключатель (Radio button) ;
раскрывающийся список (Drop-down menu) ;
нажимающуюся кнопку (Push button)
;
графическую кнопку (Image).
Каждое из этих полей может быть одним из составляющих
6
элементом формы, а может в сочетании с кнопкой завершения быть
отдельной формой.
Лист
142
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Для того чтобы создать форму с нуля в необходимо сначала
открыть существующую или создать новую Web-страницу, затем
щелкнуть в том месте страницы, где необходимо вставить форму и
выбрать пункт меню Insert => Form => Form.
Поля формы добавляются с помощью того же пункта меню Insert
=> Form => “One-Line Text Box” (текстовое поле), либо “Scrolling Text
Box” (текстовое окно), либо “Check Box” (флажок), либо “Radio Button”
(переключатель), либо “Drop-Down Menu” (раскрывающийся список),
либо “Push Button” (кнопка).
Для того чтобы открыть диалоговое окно “Form Properties”
(Свойства формы) необходимо выбрать пункт меню Insert => Form =>
Properties (Вставка => Форма => Свойства), либо щелкнуть правой
кнопкой мыши по форме и выбрать в контекстном меню “Form
Properties”. Появится диалоговое окно “Form Properties” (Свойства
формы).
Основные поля формы. Секция “Where to store results?” (Где
сохранить результаты ?) диалогового окна “Form Properties” содержит
альтернативные опции:
1) “Send to” (Послать). Здесь задается обработчик формы по
умолчанию, для этого предусмотрены два поля:
- “File name:” (Имя файла). Данные из формы могут быть
сохранены в текстовом файле на сервере. По умолчанию его имя и путь
установлены на закрытую папку, такую как private/feedback.txt. Чтобы
задать для сохранения другой файл, можно ввести его относительный
URL или нажать кнопку “Browse” (Обзор) и выбрать любую другую
страницу в текущем сайте.
- “E-mail address:” (Адрес электронной почты). Здесь обработчик
формы предоставляет возможность послать файл результатов по
электронной почте. Параметры сообщения выбираются в описанном
ниже диалоговом окне “Options for Saving Results of a Form” (Опции
сохранения данных формы).
2) “Send to other” (Послать другому). Здесь в качестве “другого”
варианта предоставляется на выбор один из трех обработчиков формы,
а именно “Custom handler” (Пользовательский обработчик) и два
обработчика
Microsoft
FrontPage.
Необходимо
поставить
переключатель в положение “Send to other” и выбрать опцию из
раскрывающегося списка:
“Custom ISAPI, NSAPI, or CGI Script” (Пользовательский
скрипт ISAPI, NSAPI или CGI). Эти скрипты являются
программными
компонентами
на
Web-сервере,
обрабатывающими предоставленную формой информацию.
Смысл создания собственных скриптов состоит в расширении
7
Лист
функциональных возможностей Web-сайта сверх того, чего можно
достичь с применением компонентов Microsoft FrontPage.
143
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
- “Discussion Form Handler” (Обработчик дискуссионной формы).
Этот обработчик предоставляет пользователям возможность участия в
Web-дискуссиях. Microsoft FrontPage располагает основными
инструментами
администрирования
дискуссионных
групп.
Дискуссионный компонент “Discussion Component” собирает
информацию из формы, формирует из нее HTML-страницу, запоминает
страницу на Web-сервере и добавляет ее в оглавление и указатель
статей. Разумеется, с его помощью можно собирать и записывать на
Web-сервер и любую другую информацию из других форм.
- “Registration Form Handler” (Обработчик регистрационной
формы).
Это
компонент,
позволяющий
пользователям
регистрироваться на предлагаемые на сайте услуги. Он добавляет в
базу данных подписчиков услуги, сведения о новом пользователе, а
затем выбирает из формы остальную информацию и сохраняет ее на
Web-сервере.
3) “Send to database” (Сохранение результатов в базе данных).
Помимо этого, в диалоговом окне “Form Properties” в секции
“Form properties” присутствуют еще два поля и кнопка:
- “Form name” (Имя формы). Если установлен для формы
пользовательский обработчик, то в этом поле можно при
необходимости указать ее имя, на которое обработчик будет ссылаться.
- “Target frame” (Целевой фрейм). Здесь можно выбрать фрейм
для отображения результатов формы. Можно непосредственно ввести
имя фрейма или использовать для его поиска кнопку “Target Frame”
(Справа от этого поля).
- “Options” (Опции). Последний элемент диалогового окна ”Form
Properties” - кнопка “Options” (Опции), предназначенная для
конфигурирования различных параметров сохранения результатов
формы. При нажатии этой кнопки появится диалоговое окно “Options
for Saving Results of a Form” (Опции сохранения результатов формы),
имеющее четыре вкладки: “File Results” (Файл данных), “E-mail
Results”(Результаты по почте), “Confirmation Page” (Страница
подтверждения) и “Saved Fields” (Сохраняемые поля).
- “Advanced” (Дополнительно). Эта кнопка позволяет установить
скрытые поля. Они необходимы только в том случае, если
используются CGI-сценарии для обработки результатов формы.
8
Лист
144
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Список использованных источников
1 Майкл, А. Создание Web-страниц с помощью MS Office 97
/А. Майкл. — М.: БИНОМ, 1998. — 480 с.
2 Рэндел, Н. Microsoft FrontPage в подлиннике / Н. Рэндел, Д.
Джонс — СПб.: BHV- Санкт-Петербург, 1997. — 432 с.
3 Хестер, Н. Front Page 2002 для Windows / Хестер Нолан –
М.: ДМК Пресс, 2002. – 448 с. – ISBN 5-94074-117-7.
4 Основы Web-технологий / П.Б. Храмцов, С.А. Брик, А.М.
Русак, А.И. Сурин; под редакцией П.Б. Храмцова. – М.:
ИНТУИТ.РУ ”Интернет-Университет Информационных
Технологий”, 2003. – 512 с. – ISBN 5-9556-0001-9.
5 Форгаагд, Р. FrontPage98. Русское руководство FrontPage
[Электронный ресурс]: руководство по созданию Webсайтов/ Рэнди Форгаагд, 2004. - Режим доступа:
WWW.URL:
http://webmaster.yartop.ru/desing/webe/webe5/webe5-01.html.
6 Редактор FrontPage [Электронный ресурс]: руководство
по созданию Web-сайтов, 2004. - Режим доступа:
WWW.URL: http://crimegen.boom.ru/FP1.htm.
Лист
9
145
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Приложение А
(справочное)
HTML-код Web-сайта
HTML-код файла index.html
<html>
<head>
<title>index</title>
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
</head>
<frameset rows="85,*">
<frame name="banner" scrolling="no" noresize target="contents"
src="электронный_гипертестовый_учебни.htm">
<frameset cols="210,*">
<frame name="contents" target="main" src="содержание.htm">
<frame name="main" src="пр.htm" target="_self">
</frameset>
<noframes>
<body>
<p>This page uses frames, but your browser doesn't support them.</p>
</body>
</noframes>
</frameset>
</html>
HTML-код фреймовой Web-страницы Сети1.html
<html>
<head>
<meta http-equiv="Content-Language" content="ru">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>Содержание</title>
<base target="main">
</head>
<body bgcolor="#66FFCC">
<p align="center" style="line-height: 100%; margin-top: 0; margin-bottom: 0"><font size="4"
face="Times New Roman">Содержание</font></p>
<p align="center" style="line-height: 100%; margin-top: 0; margin-bottom: 0">&nbsp;</p>
<p align="justify" style="line-height: 100%; margin-top: 0; margin-bottom: 0"><font size="4"
face="Times New Roman"><a href="Глава%201.htm" target="main">1&nbsp;
</a></font><font size="3"><a href="содер2.htm" target="contents"><span style="mso-bidi-font-size:
12.0pt; mso-fareast-font-family: Times New Roman; mso-ansi-language: RU; mso-fareast-language:
RU; mso-bidi-language: AR-SA">Общие
сведения о вычислительных сетях</span></a></font></p>
<p align="justify" style="line-height: 100%; margin-top: 0; margin-bottom: 0">&nbsp;</p>
<p align="justify" style="line-height: 100%; margin-top: 0; margin-bottom: 0"><a
href="Глава%202.htm"><font size="3">2&nbsp;
<span style="mso-bidi-font-size: 12.0pt; mso-fareast-font-family: Times New Roman; mso-ansilanguage: RU; mso-fareast-language: RU; mso-bidi-language: AR-SA">Взаимодействие
открытых систем</span></font></a></p>
<p align="justify" style="line-height: 100%; margin-top: 0; margin-bottom: 0">&nbsp;</p>
Лист
10
146
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
<p align="justify" style="line-height: 100%; margin-top: 0; margin-bottom: 0"><span style="msobidi-font-size: 12.0pt; mso-fareast-font-family: Times New Roman; mso-ansi-language: RU; msofareast-language: RU; mso-bidi-language: AR-SA"><font size="3"><a
href="file:///C:/Лилькины%20Документы/РАБОТА/АППАРАТНЫЙ/Сети/Сетевые%20информац
ионные%20технологии/проба/111/Глава%203.htm">3&nbsp;
Объединение сетей с помощью мостов, <span style="letter-spacing: -.3pt; mso-bidi-font-size:
12.0pt; mso-fareast-font-family: Times New Roman; mso-ansi-language: RU; mso-fareast-language:
RU; mso-bidi-language: AR-SA">коммутаторов
и маршрутизаторов</span></a></font></span></p>
<p align="justify" style="line-height: 100%; margin-top: 0; margin-bottom: 0">&nbsp;</p>
<p align="justify" style="line-height: 100%; margin-top: 0; margin-bottom: 0"><span style="msobidi-font-size: 12.0pt; mso-fareast-font-family: Times New Roman; mso-ansi-language: RU; msofareast-language: RU; mso-bidi-language: AR-SA"><font size="3"><a
href="file:///C:/Лилькины%20Документы/РАБОТА/АППАРАТНЫЙ/Сети/Сетевые%20информац
ионные%20технологии/проба/111/Глава%204.htm">4
Базовые
технологии локаль</a></font></span><font size="3"><a
href="file:///C:/Лилькины%20Документы/РАБОТА/АППАРАТНЫЙ/Сети/Сетевые%20информац
ионные%20технологии/проба/111/Глава%204.htm"><span style="mso-bidi-font-size: 12.0pt; msofareast-font-family: Times New Roman; mso-ansi-language: RU; mso-fareast-language: RU; mso-bidilanguage: AR-SA">ных сетей</span></a></font></p>
<p align="justify" style="line-height: 100%; margin-top: 0; margin-bottom: 0">&nbsp;</p>
<p align="justify" style="line-height: 100%; margin-top: 0; margin-bottom: 0"><span style="msobidi-font-size: 12.0pt; mso-fareast-font-family: Times New Roman; color: black; mso-ansi-language:
RU; mso-fareast-language: RU; mso-bidi-language: AR-SA"><font size="3"><a
href="file:///C:/Лилькины%20Документы/РАБОТА/АППАРАТНЫЙ/Сети/Сетевые%20информац
ионные%20технологии/проба/111/Глава%205.htm">5
Основы </a></font> </span><font size="3"><a
href="file:///C:/Лилькины%20Документы/РАБОТА/АППАРАТНЫЙ/Сети/Сетевые%20информац
ионные%20технологии/проба/111/Глава%205.htm"><span style="mso-bidi-font-size: 12.0pt; msofareast-font-family: Times New Roman; color: black; mso-fareast-language: RU; mso-bidi-language:
AR-SA">TCP/IP</span></a></font></p>
<p align="justify" style="line-height: 100%; margin-top: 0; margin-bottom: 0">&nbsp;</p>
<p align="justify" style="line-height: 100%; margin-top: 0; margin-bottom: 0"><font size="3"><span
style="mso-bidi-font-size: 12.0pt; mso-fareast-font-family: Times New Roman; mso-ansi-language:
RU; mso-fareast-language: RU; mso-bidi-language: AR-SA"><a
href="file:///C:/Лилькины%20Документы/РАБОТА/АППАРАТНЫЙ/Сети/Сетевые%20информац
ионные%20технологии/проба/111/Глава%206.htm">6
Информационные
сервисы </a> </span><a
href="file:///C:/Лилькины%20Документы/РАБОТА/АППАРАТНЫЙ/Сети/Сетевые%20информац
ионные%20технологии/проба/111/Глава%206.htm"><span lang="EN-US" style="mso-bidi-fontsize: 12.0pt; mso-fareast-font-family: Times New Roman; mso-ansi-language: EN-US; mso-fareastlanguage: RU; mso-bidi-language: AR-SA">Internet</span></a></font></p>
<p align="justify" style="line-height: 100%; margin-top: 0; margin-bottom: 0"><font
size="3">&nbsp;</font></p>
<p align="justify" style="line-height: 100%; margin-top: 0; margin-bottom: 0"><font size="3"><a
href="форма.htm" target="_blank">Анкета
студента</a></font></p>
</body>
</html>
Лист
11
147
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
HTML-код фреймовой Web-страницы Сети2.html
html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>New Page 4</title>
<base target="_self">
</head>
<body bgcolor="#FFCCCC">
<p style="word-spacing: 0; margin: 0" align="justify"><font size="4"><span style="mso-bidi-fontsize: 12.0pt; color: black; letter-spacing: -.2pt">Учебное
пособие посвящено изучению вычислительных
се</span><span style="mso-bidi-font-size: 12.0pt; color: black; letter-spacing: -.15pt">тей:
рассматривается классификация
вычислительных сетей, сетевые тополо</span><span style="mso-bidi-font-size: 12.0pt; color:
black; letter-spacing: -.25pt">гии
и методы доступа к среде передачи данных,
эталонная модель взаимодействия открытых
систем.&nbsp; </span></font></p>
<p style="word-spacing: 0; margin: 0" align="justify">&nbsp;</p>
<p style="word-spacing: 0; margin: 0" align="justify">&nbsp;</p>
<p style="word-spacing: 0; margin: 0" align="justify"><font size="4"><span style="mso-bidi-fontsize: 12.0pt; color: black; letter-spacing: -.25pt"> Приведены сведения об устройствах
объединения сетей: </span><span style="mso-bidi-font-size: 12.0pt; color: black; letter-spacing:
-.2pt">концентраторах,
мостах, коммутаторах и маршрутизаторах.
Приводится классификация стандартных
протоколов, о</span><span style="mso-bidi-font-size: 12.0pt; color: black; letter-spacing:
-.1pt">собое
внимание уделяется протоколам </span><span lang="EN-US" style="mso-bidi-font-size: 12.0pt;
color: black; letter-spacing: -.1pt; mso-ansi-language: EN-US">Internet</span><span style="mso-bidifont-size: 12.0pt; color: black; letter-spacing: -.1pt">
сетевого и транспортного </span><span style="mso-bidi-font-size: 12.0pt; color: black; letterspacing: -.25pt">уровней.
</span><span style="mso-bidi-font-size: 12.0pt; color: black">Рассмотрены
различные информационные сервисы </span><span lang="EN-US" style="mso-bidi-font-size:
12.0pt; color: black; mso-ansi-language: EN-US">Internet</span><span style="mso-bidi-font-size:
12.0pt; color: black">:
служба </span><span lang="EN-US" style="mso-bidi-font-size: 12.0pt; color: black; mso-ansilanguage: EN-US">WWW</span><span style="mso-bidi-font-size: 12.0pt; color: black">,
система доменной адресации, электронная
почта, универсальный идентификатор
ресурсов </span><span lang="EN-US" style="mso-bidi-font-size: 12.0pt; color: black; mso-ansilanguage: EN-US">URI</span><span style="mso-bidi-font-size: 12.0pt; color: black">
и т.д. Раскрыты основы языка гипертекстовой
разметки </span><span lang="EN-US" style="mso-bidi-font-size: 12.0pt; color: black; mso-ansilanguage: EN-US">HTML</span><span style="mso-bidi-font-size: 12.0pt; color:
black">.</span></font><font size="4"><span style="mso-bidi-font-size: 12.0pt"><o:p>
<map name="FPMap0">
<area href="форма.htm" shape="circle" coords="27, 28, 22"></map><img border="0"
Лист
12
148
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
src="BD06790_.WMF" width="152" height="128" align="right"
usemap="#FPMap0"></span></font></p>
<p style="word-spacing: 0; margin: 0" align="justify">&nbsp;</p>
<p style="word-spacing: 0; margin: 0" align="justify"><font size="4"><span style="mso-bidi-fontsize: 12.0pt"></o:p>
</span></font></p>
<p align="justify" style="word-spacing: 0; margin: 0"><span style="mso-bidi-font-size: 10.0pt"><font
size="4">Учебное
пособие предназначено для студентов</font></span><span style="mso-bidi-font-size:
10.0pt"><font size="4">,
обучающихся по программам высшего
образования по специальности 220400, при
изучении дисци</font></span><span style="mso-bidi-font-size: 10.0pt"><font size="4">плины
&quot;Сети ЭВМ и
телекоммуникации&quot;.</font></span></p>
<p><span style="font-size:14.0pt;mso-bidi-font-size:10.0pt"><o:p>
</span><span style="font-size:14.0pt;mso-bidi-font-size:10.0pt"></o:p>
</span></p>
</body>
</html>
HTML-код фреймовой Web-страницы Сети3.html
<html>
<head>
<meta http-equiv="Content-Language" content="ru">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>Электронный гипертестовый учебник по
дисциплине</title>
<base target="contents">
</head>
<body bgcolor="#CCCCFF">
<p align="center"><font size="5">Электронный
гипертестовый учебник по дисциплине &quot;Сети
ЭВМ и телекоммуникации&quot;</font></p>
</body>
</html>
Лист
13
149
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Приложение Б
(справочное)
Контрольный пример
Рисунок Б.1 – Главная страница Web-сайта
Рисунок Б.2 – Организация закладок внутри фреймсета
Лист
14
Copyright ОАО «ЦКБ «БИБКОМ» & ООО «Aгентство Kнига-Cервис»
Рисунок Б.3 – Работа с содержанием гипертекстового учебника
Рисунок Б.4 – Гостевая страница Web-сайта
Лист
15
151
Документ
Категория
Информатика
Просмотров
159
Размер файла
6 493 Кб
Теги
frontpage, основы, microsoft, 2928
1/--страниц
Пожаловаться на содержимое документа