Microsoft Frontpage XP - современная интегрированная оболочка для построения отдельных web-страниц и целых web-узлов. Даже неопытный пользователь, незнакомый с языками программирования, сможет с помощью Frontpage самостоятельно создать свой собственный web-узел и опубликовать его в Интернете. Web-редактор Frontpage станет прекрасным дополнением и для арсенала опытного Web-дизайнера.
Построение web-узла
На этом занятии вы познакомитесь с новым приложением Microsoft Office - редактором web-узлов программой Frontpage. Вы научитесь создавать и модифицировать структуру узла. Ниже перечислены некоторые компоненты и операции, рассматриваемые в упражнениях занятия:
- мастер web-узла;
- список задач;
- просмотр папок узла;
- навигация;
- проверка гиперссылок;
- отчеты;
- цветовая схема узла;
- общие поля страницы.
Web-узел - это набор файлов в формате HTML, расположенных в определенной папке и связанных друг с другом гиперссылками. Один из файлов web-узла назначается главным, он представляет собой домашнюю страницу и открывается в браузере пользователя при подключении к web-узлу. Остальные web-страницы выводятся в окно браузера по мере перехода к ним по гиперссылкам. Кроме файлов HTML в состав узла входит набор графических объектов формата GIF или JPG, предназначенных для оформления страниц. С развитием браузеров, предлагающих самые разнообразные расширения стандарта HTML, в web-узлах все чаще стали появляться файлы других форматов.
Создание web-узла
Frontpage ХР - это интегрированная среда, содержащая редактор web-страниц, модули управления структурой узла и инструменты публикации узла на сервере. С помощью Frontpage даже совершенно не знакомый с языком HTML новичок может сконструировать вполне работоспособный web-узел. В руках опытного пользователя Frontpage становится мощным инструментом, позволяющим строить web-узлы любой сложности.
Примечание
Во Frontpage ХР три отдельных модуля - редактор страниц, компоновщик узла и средств поддержки web-сервера объединены в одну интегрированную оболочку, обеспечивающую удобный доступ ко всем инструментам.
Мастер web-узла
Чтобы создать законченный web-узел, недостаточно просто разместить в одной папке несколько HTML-файлов. Грамотно построенный узел имеет хорошо продуманную структуру. Это облегчает пользователю поиск необходимой информации. Если у вас нет большого опыта работы с web-страницами, мастер web-узла поможет правильно скомпоновать узел, а вам останется только наполнить страницы содержанием. Чтобы прибегнуть к услугам мастера, выполните следующие шаги.
- Запустите Frontpage.
- Выберите команду Файл > Создать ^ Страница или web-узел (File > New > Web). В области задач приложения откроется окно Создание web-страниц (New Page or Web) со списком шаблонов и мастеров, которыми можно воспользоваться для построения web-узла (рис. 3.1).
- В разделе Создание с помощью шаблона (New from Template) щелкните на значке Шаблоны веб-узлов (Web Site Template) и в появившемся окне диалога Шаблоны веб-узлов (Web Site Templates) щелкните на значке Мастер корпоративного веб-узла (Corporate Presence Wizard).
- В поле раздела Options (Параметры) введите название папки, в которой будут храниться файлы узла (я буду пользоваться для этих целей папкой С: \Мои документы\Му Webs\Corporate).
Рис. 3.1.
- Щелкните на кнопке ОК.
- В первом окне мастера щелкните на кнопке Далее (Next).
Второе окно предлагает список основных web-страниц, которые можно включить в новый web-узел:
- Домашняя страница (Home Page);
- Что нового (What"s New);
- Товары и услуги (Products/Services);
- Оглавление (Table of Contents);
- Обратная связь (FeedBack form);
- Форма поиска (Search form).
- Оставьте установленными все флажки и щелкните на кнопке Далее. Следующее окно мастера, показанное на рис. 3.2, предлагает определить вид домашней страницы. Устанавливая и сбрасывая флажки этого окна, вы добавляете или убираете соответствующие разделы домашней страницы.
- Установите все четыре флажка.
- Щелкните на кнопке Далее.
Рис. 3.2.
- Десятое окно мастера задает общее оформление всех страниц. Установите флажки этого окна в соответствии с рис. 3.3, затем щелкните два раза на кнопке Далее.
Рис. 3.3.
- Введите полное название компании, то же самое название, сокращенное до одного слова, и адрес компании. Щелкните на кнопке Далее.
- В следующем окне введите телефон компании, номер факса, электронный адрес web-мастера и адрес информационной поддержки. Щелкните два раза на кнопке Далее, а затем на кнопке Готово (Finish). Мастер сгенерирует новый web-узел и откроет его в режиме просмотра задач со списком действий, которые необходимо выполнить для получения законченного узла. Пункты этого списка, показанные на рис. 3.4, были добавлены мастером. В них перечислены операции, с помощью которых вы должны наполнить смысловым содержанием сформированные web-страницы. В процессе разработки узла можно вручную добавлять новые задачи, связанные с той или иной web-страницей. Вы научитесь этому в следующем упражнении. Список задач всегда под рукой, он хранится вместе с файлами web-узла и не даст позабыть о незавершенных операциях. Чтобы открыть его, достаточно щелкнуть на кнопке Задачи (Tasks) панели режимов.
Мы познакомились с главным окном программы, командами меню, стандартной панелью инструментов, рассмотрели имеющиеся шаблоны и мастера для создания Web-страниц и Web-узлов. Теперь можно приступить к созданию собственного Web-узла.
В этой главе вы познакомитесь с размещением на Web-странице текстовой информации, заголовков, узнаете о средствах по форматированию символов, абзацев, использовании для оформления информации списков.
Для создания Web-узла воспользуемся шаблоном Одностраничный веб-узел (One Page Web). Этот шаблон удобен для изучения возможностей, которые предоставляет программа FrontPage разработчику. Данный шаблон формирует структуру Web-узла и добавляет в нее одну пустую страницу, на которой в дальнейшем будет размещаться информация. При этом к странице не предъявляется каких-либо специальных требований по оформлению или форматированию. Все, что нам потребуется, мы разместим на этой странице самостоятельно.
Для создания одностраничного Web-узла выполните следующие действия:
- В меню Файл (File) выберите команду Создать (New), а затем в открывшемся подменю - опцию Страница или веб-узел (Page or Web). В результате в главном окне программы FrontPage появляется панель Создание веб-страницы или узла (New Page or Web).
- Выберите на панели значение Шаблоны веб-узлов (Web Site Templates). Открывается диалоговое окно Шаблоны веб-узлов.
- В поле Укажите расположение нового веб-узла (Specify the location of the new web) диалогового окна Шаблоны веб-узлов введите местоположение и имя создаваемого Web-узла. Например, присвоим ему имя My Test_Web.
- Дважды щелкните на значке Одностраничный веб-узел (One Page Web). Начинается процесс создания шаблона. Через некоторое время в главном окне программы FrontPage открывается созданный Web-узел (рис. 12.1), который вы можете модифицировать. Панель Список папок (Folder List) отображает его структуру, состоящую из двух папок _private и images и страницы index.htm.
Рис. 12.1.
Замечание
По умолчанию программа FrontPage подразумевает, что первая размещенная в Web-узле страница будет являться домашней. В структуре папок она сохранена под именем index.htm.
Дважды щелкните мышью на панели Список папок (Folder List) на имени файла index.htm. Данная пустая Web-страница откроется в рабочей области программы FrontPage. Можно приступать к размещению в ней объектов.
Размещение текста на странице
Основное назначение Web-страницы - это познакомить посетителя Web-узла с интересующей его информацией. Чтобы информация легко воспринималась, ее следует представить надлежащим образом: оформление не должно удручать своим однообразием, а радовать глаз. Для этого FrontPage предоставляет в распоряжение разработчика средства форматирования символов, абзацев, включающие установку различных параметров шрифта, интервалов между символами, смещений, отступов, отображение символов малыми прописными буквами, в виде верхних и нижних индексов и т.д. С помощью этих средств вы сможете выделить на странице наиболее важные места, сделать информацию легко читаемой.
Веб-узел - это связанные между собой страницы, которые располагаются на одном домене.
Любой сайт в интернете - это веб-узел.
Главная страница узла называется домашней. Она связывает все остальные.
Веб-узел - это книга-энциклопедия. Каждая статья - это отдельная страница
Структура веб-узла
Сайт состоит из структурированных файлов, имеющих иерархический вид, с главной страницей на вершине. Чаще всего им соответствуют HTML-файлы, которым присваиваются имя Default.htm или Index.htm.
Страницы деляется по степени удаленности от текущей:
- равноправные - располагаются на одном уровне;
- родительские - находятся на уровень выше;
- дочерние - располагаются на уровень ниже.
Любой документ структурирован. Есть название, заголовок, тело и т. д.
Где располагаются веб-узлы
Узлы находятся на серверах. Это машины, которые подключены к интернету. Для каждого сайта выделяется дисковое пространство.
Адрес узла
Каждый документ узла имеет свой адрес. По нему осуществляется доступ к этому файлу на сервере.
Адрес делится на несколько частей:
- Приставка http:// - вид протокола передачи данных.
- WWW – аббревиатура адреса.
- Имя сайта – уникальное наименование, покупаемое у фирм-регистраторов. Формируется из двух частей – самого имени и обозначения доменной зоны.
Что такое сертификат безопасности веб-узла
Определяет, насколько надежен обмен данными с узлом.
Действуют две разновидности сертификатов: с проверкой домена DV и развернутой проверкой EV. Сертификат DV обеспечивает соответствие минимальным условиям надежности. Браузер пользователя отмечает такие ресурсы специальным значком. Сертификат EV обеспечивает более развернутые требования безопасности.
Этапы формирования веб-узла
- Формирование структуры сайта и определение, какой контент будет размещаться на домашней и других ключевых страницах.
- Создание веб-страниц.
- Просмотр HTML-файлов в браузере: проверка работы ссылок, актуальность контента и т.д.
- Публикация веб-узла со всеми его файлами на сервере.
- Просмотр веб страниц, хранящихся на сервисе с помощью всех востребованных браузеров, поскольку они форматируют страницы неодинаково.
- Запуск для индексации страниц.
Принципы формирования разделов
Логотип
Практически каждый веб-узел имеет не только название, но и свой уникальный логотип, выделяющий ресурс на фоне остальных.
Панель навигации
Должна отображаться в любом документе, быть удобной, содержать ссылки, указывающие на другие страницы и крупные разделы.
Должно отвечать следующим условиям: грамотность, точность и достоверность размещаемого контента. Дополнительно существует ряд второстепенных условий, которым должен соответствовать документ.
Графика
Желательно взвешенное соотношение графического контента, по отношению к текстовому, исходя из его специфики в целом.
Пропускная степень каналов
Поддержка сервером SSI
Его применение позволяет Web-серверу использовать статистические объемы динамического контента в перенаправляемый HTML-документ.
Поддержка сервером провайдера CGI-сценариев
Функция, обеспечивающая возможность Web-серверу осуществлять произвольные программы для формирования HTML-документов.
Метод обновления страниц
Чаще всего происходит по протоколу FTP.
Установка веб-узла на ПК
Это может потребоваться на начальном этапе разработки сайта. Например, вы сделали несколько небольших страниц и хотите проверить, можно ли в таком виде их публиковать.
Есть специальные программы - например, - которые эмулируют работу удаленного сервера на вашем компьютере.
Чтобы ускорить выполнение лабораторной работы возможно копирование через буфер обмена данных для создания страницы с фреймами п.2.3.1, 2.1.4 и 2.1.5 из файла с методическими указаниями.
2.1.1 Создать и оформить web-узла, содержащий web-страницы. Для этого необходимо выполнить команду Файл 4 Создать 4 Одностраничный Web-узел, в окне диалога выбрать вариантОдностраничный Web-узел . Затем переключиться в режим Переходы (вкладка внизу окна Front Page) , далее дважды щелкнуть по названию файла index.htm в центре экрана. Затем следует расположить на листе данные, указанные на рисунке 1: ввести текст по образцу, расположить картинки.Для создания логотипа названия магазина можно воспользоваться средством WordArt.
Для оформления внешнего вида домашней страницы необходимо воспользоваться командой Формат4Шрифт , в которой нужно выбрать цвет шрифта и гарнитуру написания. Далее необходимо сохранить страницу.
Для создания страницы с фреймами, указанной на рисунке 2 в области переходов выделить файл index.htm и выполнить командуФайл 4 Создать 4 Другие шаблоны страниц, в появившемся диалоговом окне Шаблоны страниц выбрать вкладку Страница рамок , затем выбрать шаблон Объявление и оглавление , и щелкнуть на кнопке ОК. После этого перейти в режим редактирования страницы, затем нужно щелкнуть на кнопке Создать страницу в каждом фрейме.
Рисунок 1 Пример домашней страницы
Для оформления страницы верхнего фрейма (рисунок 2) вставить таблицу из одной строки и трех столбцов. Затем в столбцы таблицы поместить рисунки, далее переместить границы столбцов по размеру каждого из рисунков и выровнять их по центру. Затем щелкнуть правой кнопкой мыши на таблице и в появившемся контекстном меню выбрать команду Свойства таблицы… . В группе элементов Границы задать нулевой размер границы таблицы для того, чтобы граница стала невидимой.
Для написания пунктов меню в левой части страницы с фреймами также следует использовать таблицу, состоящую из одного столбца и четырех строк. Каждый пункт меню записывается в строку таблицы.
В правой части страницы с фреймами следует ввести текст, оформив его соответствующим образом.
После этого необходимо выполнить команду Файл4Сохранить ,для сохранения всех новых страниц. Каждая страница будет сохранена под своим именем. Сохраняемая страница будет выделена рамкой синего цвета. Например, для страницы верхнего фрейма следует задать имя baner.htm, для левого - mnu.htm, для правого - text.htm, а для самой страницы с фреймами - имя start.htm. В результате должна получится страница с фреймами, представленная на рисунке 2.
Рисунок 2 Пример создания страницы с фреймами
После создания страницы с фреймами start.htm следует приступить к созданию других страниц, которые будут содержать информацию по каждому из пунктов меню, находящегося в левом фрейме.
Примечание. Данные, содержащиеся на создаваемых web-страницах можно перенести воспользовавшись командами по работе с буфером обмена из электронного варианта методических указаний по FrontPage, установленного на компьютерах.
Создать новую страницу, на которой в режиме Конструктор расположить следующую информацию.
Разработкашаблонов Web-узла
Создаем Web-узел для шаблона
В главе 4 вы создавали шаблоны Web-страниц. В настоящем приложениивы самостоятельно создадите шаблон Web-узла. Хотя шаблон Web-узлазначительно сложнее, чем одностраничный шаблон, разработка его не
вызывает особых трудностей. Вы создаете и сохраняете Web-узел обычнымобразом, а затем копируете новый Web-узел в папку шаблонов.
Следующий пример демонстрирует, как создать шаблон Web-узла и какиепредпринять шаги, чтобы его можно было использовать для создания
узлов.
1. В Frontpage создайте новый Web-узел па основе шаблона Empty Web.Присвойте узлу имя WebTemplate.
2. Перейдите в режим просмотра Navigation. Щелкните на кнопке New Pageпанели инструментов Standard, чтобы создать домашнюю страницу.
3. Щелкните правой кнопкой на пиктограмме домашней страницы направой панели и активизируйте команду Rename контекстного меню.Введите новый заголовок "Домашняя страница" и нажмите клавишу .
4. Если панель Folder List не отображена, активизируйте команду Folderменю View. Щелкните на домашней странице на правой панели.
Выполните щелчок на кнопке New Page, чтобы добавить еще одну страницу в
Web-узел. В Frontpage сразу после создания страницы предлагается
переименовать имя файла страницы, присваиваемого по умолчанию. Присвойте
новой странице имя Pagel и нажмите клавишу .
5. Создайте еще три страницы, присвоив им имена Page2, Page3, Page4.
6. Перетяните последовательно страницы Pagel.htm, Page2.htm, Page3. htm,Page4.1-i.tm с панели Folder List на правую панель, расположив их
на одномуровне под домашней страницей (по
умолчанию в качестве заголовковбудут
использоваться имена файлов страниц). Таким образом, эти четырестраницы станут дочерними по отношению к домашней странице.
7. В режиме просмотра Navigation выполните два щелчка на пиктограммекаждой страницы на правой панели (интервал между щелчками должен
быть достаточно большим, чюбы программа
не восприняла и какдвойные щелчки) и введите
новые заголовки страниц Страница1
, Сn
раница2,
СтраницаЗ и Странипа4 Структура Web-узла WebTemplate показана на рис Б.1
!
Теперь вы можете отредактировать содержимое страниц в режиме просмотра
Page.
Рис Б.1 Структура Wehfemplate ч режиме просмотра Ncnafufion
Копирование файлов для создания шаблона Web узла Создав Web-узел
необходимой струкгуры, следует преобразовать его в шаблон Для этого
нужно создать папку с расширением ТЕМ (ее имя может быть произвольным),
коюрая должна находюся по следующему пути, считая от корневой папки
Windows \Application Data\Microsoft\FrontPage\Webs\. Затем нужно
скопировать все файлы Web узла в э1у папку и добавить файлы. необходимые
для того, чтобы FrontPdge воспринимал Web-узет как шаблон Копирование и
создание файлов будет осуществляться в Windows Expioier
1. В Windows Explorer переидиге к папке Web-узла WebTemplate (путь по
умолчанию С \Inetpub\Wwn\root\Webteinp!atc\) В папке должны находиться
пять HTML-файлов, созданных в предыдущем разделе, а также другие папки с
дополнительными файлами, используемыми Web-узлами Frontpage (рис Б 2) Э
ги папки Frontpage описаны в табл Б1 Щелкните на папке правой кнопкой
мыши (на левой панели Windows Explorer) и активизируйте команду Copy
контекстного меню
2. Откройте папку, в которую помещаются фанта создаваемых шаблонов
Web-узла FiontPage 2000 (путь по умолчанию С \Windows\Application Data \Microsoft\FrontPage\Webs\)
3 Щелкните правой кнопкой мыши на данной папке (правая панель Windows
Explorer) и выбериге команду Paste контекстного меню Папка Webtem plate
будет скопирована в папку Webs В результате вы получите большинство
файлов для создания полноценного шаблона
Примечание
Чтобы созданный Web-узел мог использоваться в качестве шаблона, вч
можете также разместить папку с его файлами в папке, в которой хранятся
стандартные шаблоны Frontpage (путь по умолчанию С \Program Files \Mic
rosoft Office \ Templates \1033\ Webs \)
4. Щелкните правой кнопкой мыши на имени новой подпапки Webtemplate,
которая была скопирована в папку Webs, выберите в контекстном меню
команду Rename и присвоите указанной подпапке имя Webtemplate tern
(добавьте расширение ТЕМ)
Примечание
В папке Webtemplate tern вы можете удалить все папки, перечисленные в
таб Б.1 (не удалите только папку Images) Это не отразится на
работоспособности шаблона
Рис Б. 2 Структура шаблона Web-узла WehTemplate
Таблица Б. 1. Структура папок Web-узла, в Frontpage
| Папка | Содержимое |
| borders | Включает до четырех HTML-файлов, которые вставляются на каждую страницу вместе с верхней, нижней, правой или левой общими областями |
| private | Страницы, которые вы хотели бы сделать недоступными для просмотра в броузере или для поиска (например, включенные страницы) |
| sharedtemplates | Шаблоны, использующиеся на Web-узле |
| vtibin | Созданные Frontpage CGI-программы для управления просмотром, а также для выполнения действий на сервере администратором и автором |
| vticnf | Конфигурационные файлы для каждой страницы Web-узла, содержащие такие данные, как имя страницы, даты создания и модификации, имя разработчика и т.д. |
| vtipvt | Несколько подпапок как с текущими, так и с историческими файлами То Do List (сделать список), а также с метаинформациея для Web-узла и зависимой базы данных |
| vtiscript | Сценарии на языках JavaSript и VBScript |
| vtitxt | Индексы текста для использования формами поиска |
| Images | Все изображения, связанные с Web-узлом |
Создание INF- и МАР-файлов
Помимо уже скопированных файлов, вам понадобятся два дополнительных (с расширениями INF и MAP) файла для того, чтобы в Frontpage 2000 можно было воспользоваться шаблоном Web-узла. INF-файлы содержат информацию, используемую для включения вашего шаблона в список, находящийся в диалоговом окне New. В МАР-файлах хранятся созданные вами навигационные ссылки. Мы скопируем эти два файла из папки стандартного шаблона Web-узла, изменим их содержимое и сохраним под соответствующими именами.
1. В Windows Explorer откройте папку стандартного шаблона Personal Web (путь по умолчанию: C:\Program Files\Microsoft Off)ce\Templates\1033\Webs\Personal.tem).
2. Удерживая нажатой клавишу [
Ctrl], отметьте
файлы Personal.inf и Personal.map. Нажмите комбинацию клавиш ,
чтобы скопировать файлы.
3. Вернитесь в папку Webtemplate.tem создаваемого шаблона (путь к ней по
умолчанию C:\Wmdows\Application Data \Microsoft\FrontPage\Webs\Web-tempiate.-em).
Щелкните правой кнопкой мыши на правой панели и активизируйте команду
Paste, чтобы включить в эту папку два файла, скопированные на этапе 2.
4. Щелкните правой кнопкой на имени файла Personal.inf и переименуйте
его, задав имя Webtemplate inf. Файлу Personal.map присвойте имя Web-
template.map.
5. Выполните двойной щелчок на имени файла Webtemplate.mf и
отредактируйте его содержимое, используя Notepad В секции Title введите
название шаблона "Тестовый пример", а в секции Description - описание
шаблона. После обработки содержимое файла должно быть таким-
6. Сохраните и закройте файл Webteinplate.inf.
7. Откройте файл Webt.ernpiate.map в редакторе Notepad.
8. Отредактируйте файл Webtemplate.map так, как показано на следующем
рисунке.
9. Сохраните и закройте файл Webtemplate.map. Теперь, когда в вашей
папке созданы файлы INF и MAP, Frontpage будет поддерживать ваш шаблон.
10. Перейдите в режим просмотра Page. Активизируйте команду Web подменю
New меню File. В загрузившемся диалоговом окне New, в списке
предлагаемых шаблонов будет и созданный вами шаблон - "Тестовый пример"
(в области Description выводится его описание).
11. Выберите в списке шаблон "Тестовый пример" По умолчанию предлагается
присвоить создаваемому \УеЬ-узлу имя Webtenrplale2 (не изменяйте это
имя) Шелкниге на кнопке ОК, чтобы создать новый Web-узел на основе
шаблона Откроется созданный вами Web-узел (рис Б.3)
12 Удалите только что созданный Web-узел и закройте Frontpage Если
новый Web-узел функционирует не так, как вы ожидали, просмотрите файлы в
шаблоне Убедитесь, что все файлы находятся там, где им положено быть, и
что содержимое INF- и МАР-файлов соответствует нашим рекомендациям и не
содержит ошибок (которые могли появиться, поскольку вы редактировали эти
файлы вручную)
Рис. Б.3 Web-узел Webtemplate2, созданный с помощью шаблона "Тестовый пример"
Загрузка...
