Общие сведения об узлах, рабочих областях и страницах. Электронный учебник по курсу "повышение квалификации руководящих работников, специалистов и преподавателей вуза в области икт" Интерактивные веб узлы

Чтобы ускорить выполнение лабораторной работы возможно копирование через буфер обмена данных для создания страницы с фреймами п.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-узла.

Для создания Web-узла с применением одного из предлагаемых шаблонов выполните следующие действия:

1. В меню Файл (File) выберите команду Создать Страница или веб-узел (Новая страница или Web-узел).
2. На появившейся панели выберите команду Шаблоны веб-узлов (Web Site Templates).
3. Открывшееся диалоговое окно Шаблоны веб-узлов содержит шаблоны для создания Web-узлов (табл. 11.2).

Таблица 11.2. Шаблоны, используемые для создания Web-узлов

Выделите курсором значок шаблона, услугами которого хотите воспользоваться. При этом в области Описание (Description) появляется краткое назначение выбранного мастера.

1. В поле (Specify the location of the new web) введите местоположение и имя создаваемого Web-узла.
2. Нажмите кнопку ОК.

В соответствии с выбранным шаблоном программа FrontPage формирует требуемый шаблон Web-узла и открывает его в режиме просмотра и редактирования. Вы можете приступать к редактированию созданного прообраза Web-узла.

Шаблон создания одностраничного Web-узла

Первым в списке предлагаемых шаблонов и мастеров располагается шаблон Одностраничный веб-узел (One Page Web), предназначенный для создания одностраничного Web-узла. При использовании данного шаблона программа FrontPage формирует структуру Web-узла, состоящую из папок, и добавляет в нее одну пустую Web-страницу.

Чтобы просмотреть структуру созданного с помощью шаблона Web-узла, отобразите в окне программы панель Список папок (Folder List), выбрав в меню Вид (View) одноименную команду. Страница, входящая в созданную структуру Web-узла, сохранена в файле с именем index.htm. По умолчанию подразумевается, что эта страница будет использоваться в качестве домашней. Откройте эту страницу, дважды щелкнув на имени файла index.htm. Страница будет открыта в режиме редактирования в рабочей области программы FrontPage (рис. 11.36).

Рис. 11.36.

Замечание

Структуру Web-узла, созданного на основе шаблона Одностраничный веб-узел, в дальнейшем можно изменить: добавить новые папки и любое необходимое количество страниц.

Шаблон создания пустого Web-узла

Для создания пустого Web-узла используется шаблон Пустой веб-узел (Empty Web). При использовании этого шаблона программа FrontPage формирует структуру Web-узла, состоящую из папок _private и images.

После завершения формирования шаблона созданный Web-узел открывается в режиме редактирования. На панели папок вы можете просмотреть структуру Web-узла. Она не содержит ни одной страницы.

Замечание

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

Шаблон создания многостраничного персонального Web-узла

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

Чтобы создать персональный Web-узел с помощью шаблона, выполните следующие действия:

1. В меню Файл (File) выберите команду Создать (New), а затем в открывшемся подменю - опцию Страница или веб-узел (Новая страница или Web -узел).
2. На появившейся панели Создание веб-страницы или узла выберите команду Шаблоны веб-узлов (Web Site Templates).
3. В поле Укажите расположение нового веб-узла (Specify the location of the new web) открывшегося диалогового окна Шаблоны веб-узлов введите местоположение и имя создаваемого Web-узла. Назовем Web-узел, например, My Pers_ Web.
4. Дважды щелкните на значке Личный веб-узел (Personal Web). Начинается процесс создания шаблона. Через некоторое время в главном окне программы FrontPage откроется полученный Web-узел для просмотра и редактирования (рис. 11.37).

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

Рис. 11.37 . Персональный Web-узел, созданный с использованием шаблона

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

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

Что такое рабочая область?

Рабочая область - это уникальный веб-сайт, предоставляющий участникам группы средства и службы для совместной работы с документами и ресурсов, связанных с собраниями. Рабочая область может содержать списки с данными, например о связанных документах, участниках группы и ссылках. Чтобы создать сайт рабочей области, нужно иметь разрешение на создание дочерних сайтов для данного сайта SharePoint. Службы Windows SharePoint Services позволяют создавать следующие сайты рабочих областей:

Шаблоны сайтов

В Windows SharePoint Services есть следующие шаблоны для совместной работы, которые можно использовать при создании сайтов:

Что такое страница?

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

Отфильтровать контент, чтобы просмотреть только нужные данные.

Скрыть сведения, которые вас не интересуют.

Изменить порядок вывода информации.

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

Разработкашаблонов 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

Создание 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, созданный с помощью шаблона "Тестовый пример"

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-узла поможет правильно скомпоновать узел, а вам останется только наполнить страницы содержанием. Чтобы прибегнуть к услугам мастера, выполните следующие шаги.

1. Запустите Frontpage.
2. Выберите команду Файл > Создать ^ Страница или web-узел (File > New > Web). В области задач приложения откроется окно Создание web-страниц (New Page or Web) со списком шаблонов и мастеров, которыми можно воспользоваться для построения web-узла (рис. 3.1).
3. В разделе Создание с помощью шаблона (New from Template) щелкните на значке Шаблоны веб-узлов (Web Site Template) и в появившемся окне диалога Шаблоны веб-узлов (Web Site Templates) щелкните на значке Мастер корпоративного веб-узла (Corporate Presence Wizard).
4. В поле раздела Options (Параметры) введите название папки, в которой будут храниться файлы узла (я буду пользоваться для этих целей папкой С: \Мои документы\Му Webs\Corporate).

Рис. 3.1.

1. Щелкните на кнопке ОК.
2. В первом окне мастера щелкните на кнопке Далее (Next).

Второе окно предлагает список основных web-страниц, которые можно включить в новый web-узел:

• Домашняя страница (Home Page);
• Что нового (What"s New);
• Товары и услуги (Products/Services);
• Оглавление (Table of Contents);
• Обратная связь (FeedBack form);
• Форма поиска (Search form).

1. Оставьте установленными все флажки и щелкните на кнопке Далее. Следующее окно мастера, показанное на рис. 3.2, предлагает определить вид домашней страницы. Устанавливая и сбрасывая флажки этого окна, вы добавляете или убираете соответствующие разделы домашней страницы.
2. Установите все четыре флажка.
3. Щелкните на кнопке Далее.

Рис. 3.2.

1. Десятое окно мастера задает общее оформление всех страниц. Установите флажки этого окна в соответствии с рис. 3.3, затем щелкните два раза на кнопке Далее.

Рис. 3.3.

1. Введите полное название компании, то же самое название, сокращенное до одного слова, и адрес компании. Щелкните на кнопке Далее.
2. В следующем окне введите телефон компании, номер факса, электронный адрес web-мастера и адрес информационной поддержки. Щелкните два раза на кнопке Далее, а затем на кнопке Готово (Finish). Мастер сгенерирует новый web-узел и откроет его в режиме просмотра задач со списком действий, которые необходимо выполнить для получения законченного узла. Пункты этого списка, показанные на рис. 3.4, были добавлены мастером. В них перечислены операции, с помощью которых вы должны наполнить смысловым содержанием сформированные web-страницы. В процессе разработки узла можно вручную добавлять новые задачи, связанные с той или иной web-страницей. Вы научитесь этому в следующем упражнении. Список задач всегда под рукой, он хранится вместе с файлами web-узла и не даст позабыть о незавершенных операциях. Чтобы открыть его, достаточно щелкнуть на кнопке Задачи (Tasks) панели режимов.