Создание веб-сайтов средствами MS FrontPage 


Мы поможем в написании ваших работ!



ЗНАЕТЕ ЛИ ВЫ?

Создание веб-сайтов средствами MS FrontPage



 

Работу по созданию веб-сайтов можно автоматизировать, и одним из таких инструментов является MS FrontPage – специализированный редактор веб-страниц.

Начиная работу с программой MS FrontPage, следует помнить, что в результате получается документ HTML, построенный по тем же правилам, что и создаваемый вручную. Приложение FrontPage ориентировано на применение Internet Explorer, и создаваемый им код HTML наиболее адекватно отражается именно в этом браузере.

Создание веб-сайта состоит из трех основных этапов:

- проектирование структуры узла;

- создание страниц, входящих в структуру;

- определение связей между страницами.

MS FrontPage позволяет выполнить проектирование структуры сайта и его отдельных страниц любыми техническими средствами.

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

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

Допустим, что разрабатываемый нами сайт будет состоять из трех страниц. Домашняя страница "Русский хлеб", сохраняемая в файле index.htm, должна содержать краткую информацию об истории фирмы и общую характеристику производимой продукции. Страница "Прайс-лист" (файл price.htm) представляет сведения о товаре, такие как название, цена и характеристика. Страница "Заказ" (файл order.htm) должна обеспечить возможность оформить заказ и внести свои предложения производителю.

Схематично структуру такого сайта и потоки информации между страницами можно представить в виде рисунка 17.

Рисунок 17. Структура сайта

Для создания структуры веб-сайта необходимо осуществить загрузку приложения MS FrontPage и выполнить команду Файл ® Создать, а затем в области задач указать тип сайта Одностраничный веб-узел и место его расположения.

Созданный сайт сохраняется в новой папке (по умолчанию веб), которая помещается на локальный диск или на веб-сервер. Его можно впоследствии открыть с помощью команды Файл ® Открыть узел… или выбрать из списка последних открытых узлов (команда Файл ® Последние узлы).

Окно приложения MS FrontPage состоит из двух частей: панели Список папок, которая отображает дерево файлов и папок, составляющих физическую структуру узла, и окна для работы с представлением (рис. 18).

Рисунок 18. Структура окна MS FrotnPage

Работа с веб-узлом может осуществляться выбором одного из нескольких возможных представлений, доступных в меню команды Вид:

- Страница;

- Папки;

- Представление удаленного веб-узла;

- Переходы;

- Гиперссылки;

- Задачи.

Новые веб-страницы можно создавать несколькими способами. Например, для создания страницы "Прайс-лист" установите курсор в панели Список папок и выполните команду Файл ® Создать ® Пустая страница. Для сохранения станицы веб-сайта, расположенной в активном окне FrontPage, используется команда Файл ® Сохранить (Сохранить как…). Используя контекстное меню и команду Переименовать, можно задать имя файла (price.htm), а название страницы редактируется командой контекстного меню Свойства. Для создания следующей страницы "Заказ", предназначенной для ввода информации от покупателей и поставщиков, воспользуйтесь кнопкой Создание новой обычной страницы на панели инструментов. Определите имя нового файла как order.htm.

Для включения страниц в структуру сайта перейдите в режим работы с представление Переходы и перетащите файлы из панели Список папок в окно представления.

Встроенный редактор FrontPage становится доступным в представлении Страницы и позволяет работать с веб-страницей одним из четырех режимов:

- Конструктор - редактирование страницы в режиме WYSIWYG, т. е. когда страница представлена так, как она будет выглядеть в Internet Explorer;

- Код - редактирование страницы в текстовом представлении;

- Просмотр - просмотр и тестирование страницы;

- С разделением - проверка и редактирование страницы в формате с разделением экрана.

Чтобы представить принципы редактирования веб-страниц, выполним открытие страницы index.htm. Для этого можно использоваться командой Файл ® Открыть или щелкнуть на кнопке Открыть панели инструментов Стандартная. Попробуйте открыть страницу, дважды щелкнув на имени файла страницы в одном из представлений - Переходы, Гиперссылки или Страницы. Веб-страница откроется в режиме Страницы/Конструктор и будет доступна для редактирования. Введите текст, соответствующий содержанию домашней страницы (рис. 19). Обратите внимание, что эффективным средством структуризации документа является применение заголовков для различных абзацев текста.

Рисунок 19. Домашняя страница

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

Для создания логических разделов на веб-странице применяются горизонтальные линии, установка которых производится с помощью команды Вставка ® Горизонтальная линия.

Выполните предварительный просмотр результатов форматирования страницы, щелкнув на ярлыке Просмотр, расположенном в нижней части окна приложения. Этот режим не может воспроизвести все нюансы отредактированной страницы, поэтому окончательный просмотр веб-страницы следует производить веб-браузером. Для запуска браузера используйте команду Файл ® Просмотреть в обозревателе. При выборе данной команды появляется список браузеров, доступных на компьютере, что позволяет осуществить проверку правильности отображения страниц с учетом технических возможностей пользователей.

Существенное преимущество, которое дает FrontPage – это возможность управления сайтом как в процессе его создания, так и при посещении страниц пользователями. Такая возможность обеспечивается общими полями и навигационными панелями. Навигационные панели представляют собой наборы гиперссылок, которые размещаются на общих полях веб-страницы. Общие поля располагаются по выбору разработчика у любого края страницы. Кроме основной – навигационной функции, общие поля и панели навигации придают веб-страницам единство стиля.

Создать навигационные панели можно следующим образом:

1. Выберите команду Вставка ® Панель ссылок в представлении Страницы.

2. Выберите тип панели, основанной на структуре переходов, а затем в окне Свойства панели ссылок укажите страницы, на которых требуется отображать размещение общих полей и кнопок навигации (рис. 20).

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

Рисунок 20. Диалоговое окно Свойство панели ссылок

Для применения темы необходимо выполнить команду Формат ® Тема выбрать тему и настройки ее свойств (рис. 21).

Рисунок 21. Внешний вид домашней страницы с использованием темы

Установка опции Яркие цвета делает цвет некоторых блоков текста или графических объектов более яркими, опции Активные рисунки создает анимацию некоторых элементов веб-страницы, опции Фоновый рисунок добавляет текстуру фона на веб-страницу.

При создании веб-страниц широкое распространение нашли таблицы, поскольку они обеспечивают структурирование информации любого типа: числовой, тестовой и даже графической. В зависимости от типа представляемой информации таблица может иметь традиционный вид, то есть с линиями обрамления вокруг таблицы и составляющих ее ячеек, или без линий обрамления, что часто используется для представления графической информации. Использование таблиц на веб-страницах рассмотрим на примере оформления страницы "Прайс-лист", назначением которой является представление информации о товарах и ценах на них.

Разместим на странице "Прайс-лист" таблицу, содержащую название и изображение внешнего вида товара. Для этого:

- в режиме Страницы выберите файл price.htm и установите курсор в то место веб-страницы, где мы предполагаем разместить левый угол таблицы;

- создайте на странице "Прайс-лист" таблицу, состоящую из четырех строк и трех столбцов, используя команду Таблица ® Вставить ® Таблица. В окне Вставка таблицы укажите число строк и столбцов;

- заполните таблицу информацией в соответствии. Остальную информацию, представленную на странице, введем несколько позже.

После создания таблицы Вы можете изменить ее вид в диалоговом окне Свойства таблицы. Выберите для этого любую ячейку таблицы и выполните команду Таблица ® Свойства ® Таблица и в появившемся диалоговом окне Свойства таблицы измените внешний вид границ таблицы.

Одним из важных элементов веб-страниц являются гиперссылки, посредством которых обеспечивается связь, ведущая с одной веб-страницы на другую страницу, картинку, адрес электронной почты или файл, расположенный за пределами сайта, который Вы создаете или просматриваете. Это позволяет разделить гиперссылки на локальные (или внутренние) гиперссылки, указывающие на ресурс текущего сайта и внешние гиперссылки, указывающие на ресурсы прочих сайтов, находящихся в сети Интернет.

Рисунок 22. Веб-страница "Прайс-лист"

Для создания гиперссылок необходимо понимать, что этот процесс состоит из двух частей. Первый заключается в выборе текста или объекта на странице, который определяется как гиперссылка, а второй – в указании целевого ресурса, то есть файла или страницы (места на странице), куда осуществляется переход при щелчке по гиперссылке. Просмотр всех ссылок, относящихся к выбранной странице, можно осуществить в режиме Гиперссылки.

Рассмотрим некоторые способы создания гиперссылок на примере дальнейшего оформления веб-страницы "Прайс-лист". Сначала введите всю исходную информацию на редактируемую страницу, а затем для создания ссылки на закладку необходимо:

- создать закладки с использованием команды Вставить ® Закладка;

- выделить текст или объект, при указании на который требуется перейти по гиперссылке и выполнить команду Вставка ® Гиперссылка;

- в появившемся диалоговом окне (23) выделить страницу, на которой размещены закладки, и выбрать нужную закладку из списка Закладка.

Рисунок 23. Диалоговое окно Insert Hyperlinks (создание гиперссылки)

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

Для создания гиперссылок, осуществляющих переход к другим целевым ресурсам, внимательно изучите возможности диалогового окна Добавление гиперссылки.

Кроме обыкновенных ссылок в виде текста или рисунков, приложение FrontPage позволяет создавать так называемые карты – графические изображения, которым назначена ссылка. Щелчок по активной зоне позволяет перейти по указанной ссылке. Можно назначить ссылку целому рисунку или отдельному фрагменту. Рассмотрим эту операцию на примере оформления веб-страницы "Заказ".

При этом будем считать, что та часть рисунка, в которой расположен текст "Отдел маркетинга" должна иметь гиперссылку на форму заказа товара, а текст "Администратор" – гиперссылку на адрес электронной почты администратора. Форма заказа может размещаться на этой же странице. Введите заголовок формы с текстом "Произведите заказ продукции" в нижней части страницы и установите перед ним закладку, к которой будет осуществляться переход при нажатии на текст "Отдел маркетинга". Страница order.htm представлен на рисунке 24.

Подготовьте небольшой рисунок, сохранив его в папке Images вашего сайта, и только потом вставьте его на страницу "Заказ". Далее создание карты необходимо производить в следующей последовательности:

- выберите рисунок на странице. На экране отобразится панель инструментов Рисование. Используя инструмент рисования прямоугольника, эллипса, многоугольника, нарисуйте контур на активной зоне изображения, очертив только часть изображения, которая соответствует указателю Отдел маркетинга;

- вставьте гиперссылку, связывающую активную часть изображения с заголовком формы;

- повторите операцию для той части изображения, которая соответствует указателю Администратор.

Рисунке 24. Фрагмент страницы оrder.htm

Кроме гиперссылок на этой странице представлено использование форм – распространенного и эффективного способа установления контактов между пользователем и владельцем веб-сайта. В большинстве случаев разработчики создают формы с помощью панели инструментов Формы. В форму затем помещаются элементы управления, текст и графические объекты.

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

Каждый элемент управления формы имеет набор свойств, включающих название элемента, установки по умолчанию, внешний вид, тип принимаемых данных и другие. В диалоговом окне Свойства поля формы, которое становится доступным при выполнении команды Свойства поля формы из контекстного меню, следует выполнить соответствующие настройки. Например, для выбора наименования товара целесообразно использовать раскрывающийся список. Этот элемент предполагает ввод данных списка с помощью кнопки Добавить (рис. 25).

Рисунок 25. Диалоговое окно Свойства раскрывающегося списка

При самостоятельном создании формы необходимо указать средство для обработки данных, пересылаемых на сервер. С этой целью откройте контекстное меню, щелкнув правой кнопкой мыши в любом месте формы, и выберите строку Свойства формы (рис.26).

Рисунок 26. Диалоговое окно Свойства формы

В этом диалоговом окне предлагаются различные средства обработки формы. Осуществив выбор, например, направление данных в файл, необходимо установить опции в диалоговом окне Сохранение результатов (рис. 27). Доступ к этому окну осуществляется нажатием кнопки Параметры диалогового окна Свойства формы.

Рисунок 27. Диалоговое окно Сохранение результатов

При пересылке данных в файл на вкладке Запись результатов устанавливаются имя файла для сохранения данных формы, формат файла, а также опции, позволяющие пересылать данные в файле формата HTML. После создания формы, откройте веб-сайт в браузере. Перейдя на страницу "Заказы", Вы можете очистить форму или ввести в нее свою информацию. Данные формы сохраняются сервером в формате, который вы определили в окне Сохранение результатов.

 



Поделиться:


Последнее изменение этой страницы: 2017-02-08; просмотров: 687; Нарушение авторского права страницы; Мы поможем в написании вашей работы!

infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 18.232.188.122 (0.105 с.)