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

Программа FrontPage 2002— специализированный редактор Web-страниц с удобным интерфейсом, который позволяет значительно упростить разработку Web-страниц иWeb-сайтов и использовать при этом все возможности языка HTML. Основным объектом, с которым работаетFrontPage, является Web-сайт, что имеет большое значение при создании сайтов сложной архитектуры. Начиная работу с программойFrontPage, следует помнить, что в результате получается документHTML, построенный по тем же правилам, что и создаваемый вручную. ПриложениеFrontPageориентировано на применениеInternetExplorer, и создаваемый им кодHTMLнаиболее адекватно отражается именно в этом браузере.

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

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

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

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

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

Для создания структуры Web-сайта необходимо осуществить загрузку приложенияMicrosoft FrontPageи выполнить командуFile/New/Web, а затем в появившемся диалоговом окнеNew,указать тип сайта (One Page Web) и место его расположения.

Созданный сайт сохраняется в новой папке (по умолчанию MyWebs), которая помещается на локальный диск или на серверWeb. Его можно впоследствии открыть с помощью командыFile/Open Web…или выбрать из списка последних открытых узлов (командаFile/Reсent Webs).

Окно приложения FrontPageсодержит три части (рис. 9.17):

• панель Views(Представление) содержит ярлыки для отображения различных представлений Web-сайта;

• панель FolderListотображает дерево файлов и папок, составляющих физическую структуру узла;

• окно для работы с выбранным представлением.

Рис. 9.16. Окно приложения FronPage

Панель Viewsпозволяет выполнить просмотр Web-сайта в следующих режимах:

• Page view(просмотр страницы);

• Folders view (просмотр папок);

• Reports view (просмотр отчета);

• Navigator view(просмотр в режиме навигации);

• Hyperlinks view(просмотр гиперссылок);

• Тasks view(просмотр задач).

Для сохранения стhаницыWeb-сайта, расположенной в активном окнеFrontPage, используется командаFile/Save(Файл/Сохранить). Если Web-страница ни разу не сохранялась, появится диалоговое окноSave As(Сохранить как).

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

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

• HTMLредактирование страницы в текстовом представлении;

• Previewпросмотр и тестирование страницы.

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

Для создания навигационных панелей следует воспользоваться командой Format/Shared Borders(Формат/Общие поля) в одном из режимов -Folders,Hyperlinks,NavigatorилиPage, которая приводит к открытию диалогового окнаShared Borders (Общие поля) – рис. 9.18, а затем добавить панель навигации с помощью компндыInsert/Navigation Bar.

Рис. 9.18. Диалоговое Shared Borders

Свойства панели навигации могут быть изменены в режиме Pageвызовом контекстного в области панели навигации выбором пунктаLink Bar Properties(Свойства панели навигации) – рис.9.19.

Рис. 9.19. Диалоговое Shared Borders

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

• Parent level(Родительский уровень) – создание гиперссылок на страницы, находящиеся на одном уровне с родительской страницей;

• Same level(Тот же уровень) – создание гиперссылок на страницы того же уровня, что и открытая страница;

• Back and Next(Назад и далее) – создание гиперссылокBack(Назад) иNext(Далее) на соседние страницы того же уровня, что и открытая страница;

• Child level(Дочерний уровень) – создание гиперссылок на страницы на один уровень ниже открытой страницы;

• Toplevel(Верхний уровень) – создание гиперссылок на страницы того же уровня, что и домашняя страница;

• ChildPageunderHome– создание гиперссылок на дочерние страницы по отношению к домашней странице сайта;

• Homepage(Домашняя страница) – создание гиперссылки на домашнюю страницу;

• Parentpage(Родительская страница) – создание гиперссылки на родительскую страницу.

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

Для применения темы необходимо выполнить команду Format/Themes (Формат/Тема), что открывает диалоговое окноThemesдля выбора темы и настройки ее свойств. Так, установка опцийVivid Colors(Яркие цвета) делает цвет некоторых блоков текста или графических объектов более яркими,ActiveGraphics(Активная графика) создает анимацию некоторых элементовWeb-страницы,BackgroundImage(Фоновый узор) добавляет текстуру фона наWeb-страницу,Apply Using CSS(С использованием таблицы стилей) позволяет использовать каскадные таблицы стилей.

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

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

• локальные (или внутренние) гиперссылки, которые указывают на ресурс текущего сайта;

• внешние гиперссылки, указывающие на ресурсы прочих сайтов, находящихся в сети Интернет;

• ссылки на закладки внутри страницы;

• ссылки на адреса электронной почты.

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

Для создания, например, ссылки на закладку необходимо создать закладки с использованием команды Insert/Bookmark(Вставить/Закладка), выделить текст или объект, при указании на который требуется перейти по гиперссылке и выполнить командуInsert/Hyperlink(Вставка/Гиперссылка). В появившемся диалоговом окне выделить страницу, на которой размещены закладки, и выбрать нужную закладку из спискаBookmark(Закладка).

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

Применение форм на страницах Web-сайтов — достаточно распространенный и эффективный способ установленияWeb-контактов. Формы могут создаваться несколькими способами. Один из них – использование шаблонов, когда разработчикWeb-страницы выбирает подходящую форму из набора имеющихся шаблонов. В случае, когда ни один из предлагаемых шаблонов вас не устраивает, можно воспользоваться мастером формForm Page Wizard. Для этого при создании новой страницы из списка предлагаемых шаблонов выбирается шаблонFormPageWizard. Проектирование формы выполняется в этом случае в диалоговом режиме в соответствии с запросами мастера.

Некоторые разработчики предпочитают разрабатывать формы самостоятельно. Для этого с помощью панели инструментов Form(Форма) создается новая форма, в которую затем помещаются элементы управления, текст и графические объекты/

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

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

Рис. 9.22. Диалоговое окно Form Properties

Указав средства обработки формы Send to File name(Направить в файл),SendtoE-mail (Направить по электронной почте),Sendtodatabase(Сохранить в базе данных) илиSendtoother(Другое), следует указать способ обработки данных, что выполняется в диалоговом окне . Options for Saving Results of Form(Параметры сохранения результатов формы) после нажатия кнопкиOptions…. .

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

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

Отчет All Files(Все файлы): указывается общее число файлов и их суммарный размер, информацию о числе и размере изображений (PicturesИзображения), связанных (Linked FilesСвязанные файлы и несвязанных (Unlinked FilesНесвязанные файлы) файлах, к каким файлам есть доступ по гиперссылкам с начальной страницы, а к каким - отсутствует.

Строка Slowpages(Медленные страницы) дает информацию о медленно загружающихся страницах. Задание ограничения на время загрузки страницы выполняется с использованием командыTools/Options/вкладка Reports View(Сервис/Параметры/ вкладка Отчеты). Страница считается медленной, если время ее загрузки превосходит значение счетчика "Slowpage"takeatleast… ("Медленные страницы загружаются как минимум…"). Расчет времени загрузки производится с учетом предполагаемой скорости соединения, выбрать которое можно из спискаAssumeconnectionspeed(Считать скорость соединения равной).

Для просмотра отчетов, представляющих информацию о корректности гиперссылок на сайте, используется строка Broken hyperlinks("Мертвые" ссылки). Этот режим позволяет выявить наличие ссылок на несуществующий ресурс.

Кроме анализа содержимого сайта, очень важно следить за ходом работ по созданию, модификации и обновлению Web-страниц. Для этого руководитель проекта составляет список задач, с указанием наименования работы и сроках ее выполнения, а также информации об ответственном за результат лице. Во FrontPageпредусмотрена автоматизация ведения такого списка. Для ввода новой задачи и просмотра списка уже созданных задач на панелиViews(представление) используется режимТasksview (просмотр задач). Новая задача в этом режиме включается с помощью командыFile/New/Tasks(Файл/Создать/Задача), выполнение которой приводит к открытию диалогового окнаNew Task(Создание задачи). Доступ к задаче осуществляется двойным щелчком по строке с описанием задачи в окнеTasks.