Программные средства разработки web-страниц (стр. 1 )

Министерство образования Российской Федерации

Санкт-Петербургский государственный

инженерно-экономический университет

ПРОГРАММНЫЕ СРЕДСТВА

РАЗРАБОТКИ WEB-СТРАНИЦ

Методические указания

по выполнению лабораторных работ

Для студентов всех специальностей

САНКТ-ПЕТЕРБУРГ

2003

Утверждено

редакционно-издательским советом СПбГИЭУ

Составитель:

канд. физ.-мат. наук

Рецензент:

канд. экон. наук, доцент

Подготовлено на кафедре

вычислительных систем и программирования

Отпечатано в авторской редакции

с оригинал-макета, подготовленного на кафедре

© СПбГИЭУ, 2003

Тема1. Язык гипертекстовой разметки HTML

Принципы построения HTML документа

Web-страницы являются гипертекстовыми и гипермедийными документами, которые могут содержать графику, аудио - и видео - информацию и ссылки на другие ресурсы сети Интернет. Web-страницы создаются с помощью языка гипертекстовой разметки HTML (HyperText Markup Language). Просмотр web-страниц осуществляется специальными программами – браузерами, содержащими интерпретатор языка HTML.

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

Возможно создание web-страниц в режиме непосредственного редактирования кода языка HTML (редакторы кодов HTML), либо в режиме визуального редактирования внешнего вида страницы наподобие редактирования документов Word (WYSIWYG-редакторы).

Общие идеи построения и интерпретации HTML документов:

·  HTML документ выглядит как совокупность текстовых фрагментов, каждый из которых окружен тэгами (tags).

Каждый тэг разметки HTML имеет свой идентификатор и, возможно, несколько параметров (атрибутов). Название тэга вместе с его параметрами заключаются в скобки <>. В общем виде тэг выглядит следующим образом:

<тэг параметр1=значение1 параметр2=значение2 ...>Текст1</тэг>

Действие тэга распространяется на фрагмент текста «Текст1». Значения параметров рекомендуется заключать в двойные кавычки.

Первый тэг называется открывающим, а парный ему - закрывающим. Закрывающий тэг имеет тот же идентификатор, но начинается с символа /. Тэги, не предусматривающие наличие вложенного текста, называются пустыми или непарными, они не имеют закрывающей части. Непарные тэги имеют вид:

<тэг параметр1=значение1 параметр2=значение2 ...>

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

В гипермедийном документе могут присутствовать гиперсвязи различных типов. Для WWW актуальны следующие типы связей:

поле связывания - метка назначения;

поле связывания - фрагмент;

поле связывания - фрагмент+метка назначения;

поле связывания - подсеть.

Гиперсвязь первого типа определена внутри одного фрагмента (web-страницы). Метка назначения отмечает конец гиперсвязи, это именованная строка в HTML документе.

Второй тип ссылается на начало указанного фрагмента (web-страницы).

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

Гиперсвязь четвертого типа ссылается на корневой каталог подсети, откуда есть доступ ко всем принадлежащим подсети фрагментам (обычно это ссылка на корневой каталог web-узла).

Любой ресурс WWW может быть указан с помощью универсального идентификатора – URL (Uniform Resource Locator).

В общем виде URL выглядит следующим образом:

метод://сервер:порт/путь/файл#метка

URL определяет:

- протокол доступа к документу,

- имя и адрес сервера, содержащего этот web-документ,

- местоположение документа в общей структуре web-сервера.

Лабораторная работа №1

Создание Web-страницы с помощью языка HTML

Задание к лабораторной работе. C помощью непосредственного редактирования тэгов языка HTML создать web-страни­цу ассоциации поставщиков «МАЯК» (рис.1), связанную с двумя страницами фирм-членов ассоциации.

Задание 1. Создать web-страницу, содержащую форматированный текст и списки.

1.  Создать на диске рабочую папку (например, в папке “Мои документы”).

2.  С помощью команды главного меню Windows Программы|Стандартные|Блокнот запустить приложение «Блокнот», предназначенное для редактирования текста в формате ACSII символов (текста MS Dos). Для того, чтобы текст документа размещался в окне «Блокнота» полностью, включить режим Перенос по словам (меню Формат «Блокнота»).

3.  Создать в блокноте новый файл, содержащий текст пустого документа HTML:

<HTML>

<HEAD>

<TITLE></TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

Сохранить файл в рабочей папке с именем mayak.htm. При сохранении из блокнота выбрать в качестве типа файла Все файлы. В рабочей папке должен появиться файл со значком . Просмотреть пустую web-страницу mayak.htm в браузере MS Internet Explorer. Проанализировать содержимое заголовка браузера (в заголовке отображается имя файла с указанием пути к нему).

Рис.1. Страница «МАЯК»

4.  Перейти в режим редактирования web-страницы, выполнив в браузере команду Вид|Просмотр HTML-кода. Команда осуществляет вызов приложения «Блокнот» с текстом активной web-страницы. Отредактировать страницу. В качестве заголовка страницы (содержимое тэга TITLE) ввести текст «Ассоциация поставщиков МАЯК».

<TITLE>Ассоциация поставщиков МАЯК</TITLE>

Сохранить произведенные изменения.

5.  Перейти в окно браузера и просмотреть в нем отредактированную web-страницу, нажав кнопку Обновить на панели инструментов браузера. Проанализировать изменения, произошедшие в строке заголовка окна браузера (в заголовке отображается содержимое тэга TITLE).

6.  Поместить в тело страницы текст:

·  Загрузить в Word документ, хранящийся в файле products.doc из папки C:\Program Files\Microsoft Office\Office\Samples.

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

·  Сохранить изменения и просмотреть результат в окне браузера.

7.  Выделить строку «Товары месяца: Напитки» в отдельный абзац, для чего заключить ее в тэг P.

<P>Товары месяца: Напитки</P>

Аналогичным образом выделить в один абзац строку «При заказе на любой из следующих товаров устанавлива­ет­ся 5% скидка:», а во второй абзац – весь оставшийся блок текста. Просмотреть изменения в браузере.

8.  Выделить строку «Товары месяца: Напитки» жирным шрифтом, заключив ее в тэг B.

<P><B>Товары месяца: Напитки</B></P>

ВНИМАНИЕ! Следует строго соблюдать вложенность тэгов. И открывающий, и закрывающий тэги форматирования символов текста (B, I, FONT и др.) должны помещаться внутри тэга абзаца (P, DIV, CENTER). Закрывающая часть вложенного тэга должна обязательно размещаться в теле тэга-контейнера.

9.  Выделить строку «При заказе на любой из следующих товаров устанавлива­ет­ся 5% скидка:» курсивом, заключив ее в тэг I. Фрагмент текста «5% скидка» выделить жирным курсивом, заключив в тэг B.

10.  Названия товаров оформить в виде списка, каждое название должно располагаться на новой строке. В пункте 7 фрагмент текста, содержащий названия товаров, был выделен в один абзац тэгом P. Заменить этот тэг на тэг маркированного списка UL. Элементы списка (отдельные названия товаров) заключить в тэг LI. В результате web-страница должна принять вид:

Товары месяца: Напитки При заказе на любой из следующих товаров устанавливается 5% скидка: ·  Chai ·  Chang ·  Guarana Fantastica . . . ·  Lakkalikoori

11.  Реорганизовать список названий товаров в двухуровневый список следующего вида:

1.  Напитки ·  Chai ·  Chang ·  Guarana Fantastica ·  Sasquatch Ale ·  Steeleye Stout ·  Cote de Blaye ·  Chartreuse verte ·  Ipoh Coffee 2.  Закуски §  Laughing Lumberjack Lager §  Outback Lager §  Rhonbrau Klosterbier §  Lakkalikoori

Для этого выполнить следующие действия:

·  Разделить список на две части: с «Chai» по «Ipoh Coffee» и с «Laughing Lumberjack Lager» по «Lakkalikoori». Каждую часть заключить в тэг маркированного списка UL.

·  Изменить вид маркера второй части списка товаров, задав значение SQUARE для параметра TYPE тэга списка. Параметр и его значение указываются в открывающей части тэга UL:

<UL TYPE = ”square”>

·  Перед первой частью списка добавить строку «Напитки», перед второй – «Закуски». Заключить эти строки в тэги элементов списка LI, а весь фрагмент текста, относящийся к спискам (начиная со строки «Напитки») – в тэг нумерованного списка OL.

·  В случае, если маркеры первой части списка автоматически изменились, указать для этой части тип маркера disс.

12. С помощью параметра BGCOLOR тэга BODY задать произвольный цвет фона страницы. В качестве значения этого параметра можно использовать английские названия основных цветов (см. приложение «фоновые цвета»)

13. Наверху web-страницы разместить отцентрированный заголовок, выделенный горизонтальными линиями:

«МАЯК»

Ассоциация поставщиков

Выполнить следующие действия:

·  В начало тела web-страницы (сразу после открывающей части тэга BODY) добавить нужный текст, заключить его в тэг CENTER.

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

·  Перед текстом, заключенным в тэг CENTER вставить непарный тэг горизонтальной линии HR, задать следующие свойства линии: выравнивание по центру (параметр ALIGN), длина 80% от ширины окна браузера (параметр WIDTH) и толщина в 2 пикселя (параметр SIZE):

<HR ALIGN=”center” WIDTH=”80%” SIZE=”2”>

·  Вставить тэг горизонтальной линии и после заголовка. Изменить цвет нижней линии, добавив в тэг HR параметр COLOR с выбранным значением.

·  Текст строк заголовка выделить крупным шрифтом, отличающимся от используемого по умолчанию на две позиции. Для этого заключить каждый фрагмент текста в тэг FONT, указав параметр размера шрифта SIZE:

<FONT SIZE=”+2”>«МАЯК»</FONT>

По умолчанию используется шрифт размером 3.

·  Изменить цвет текста заголовка, добавив в тэг FONT параметр COLOR с выбранным значением.

·  Выделить текст заголовка жирным шрифтом, заключив его в тэг B внутри тэга FONT.

14. Выделить текст строки «Товары месяца: Напитки» крупным шрифтом, превышающий заданный по умолчанию шрифт на 1 позицию. Обратить внимание на правильное соблюдение вложенности тэгов!

15. Добавить после нижней разделительной линии текст с описанием деятельности ассоциации:

·  Скопировать через буфер в нужное место web-страницы «МАЯК» рекламный текст со страницы formaggi.htm из папки C:\Program Files\Microsoft Office\Office\Samples:

«Компания Formaggi Fortini постоянно пополняет список поставок новыми вкусными товарами. В дополнение к великолепным сырам мы рады предложить ряд кондитерских, макаронных и мясных изделий. Попробуйте! Вам очень понравится».

·  Вслед за ним скопировать текст со страницы cajun.htm из той же папки:

«Добро пожаловать в компанию Cajun Delights! Вот уже более 50 лет мы поставляем лучшие индейские и креольские продукты для магазинов по всему свету. Наши продукты готовятся на основе подлинных рецептов из самых свежих компонентов, поэтому они понравятся не только уроженцам Луизианы, вспоминающим о доме, но и всем гурманам, интересующимся креольской кухней».

·  Заключить оба абзаца совместно в тэг DIV. Обратить внимание, что в отличие от тэга P, тэг DIV не добавляет пустой строки между абзацами. Задать выравнивание абзацев по ширине, указав значение justify для параметра ALIGN тэга DIV.

·  Для разделения абзацев между собой в конец первого абзаца добавить тэг перевода строки BR.

·  В начале каждого абзаца задать отступ – «красную строку», добавив подряд по пять символов неразрывного пробела, каждый из которых задается последовательностью символов &nbsp; .

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

17. Выделить названия компаний «Formaggi Fortini» и «Cajun Delights» жирным курсивом.

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

18. Создать в рабочей папке новую папку с именем images.

19. Скопировать в папку Images графические файлы
cajlogo.gif, forlogo.gif и nwlogo.gif из папки C:\Program Files\Microsoft Office\Office\Samples.

20. В заголовок страницы «МАЯК» добавить эмблему, хранящуюся в графическом файле nwlogo.gif. Для этого после верхней линии, отделяющей заголовок, вставить непарный тэг IMG с указанием имени графического файла и пути к нему:

<IMG SRC=”images/nwlogo. gif”>

·  В целях ускорения загрузки страницы с графикой браузером при ее открытии, указать в тэге IMG величину графического изображения 84´84 точки (пикселя) с помощью параметров WIDTH (ширина изображения) и HEIGHT (высота изображения):

<IMG SRC=”Images/Nwlogo. gif” WIDTH=”84”

HEIGHT=”84”>

·  Изменить размеры изображения на 100´100, просмотреть изменения в браузере.

·  Расположить текст заголовка рядом с эмблемой, для чего задать обтекание изображения текстом с помощью параметра ALIGN тэга IMG. Задать для параметра ALIGN значение left, чтобы изображение находилось слева от текста. Просмотреть результат.

·  Задать горизонтальные отступы вокруг изображения по 50 точек с помощью параметра HSPACE тэга IMG.

·  Просмотреть результат в браузере. Изменить размер окна браузера и наблюдать, как изменится расположение текста и изображения.

21. В конец страницы «МАЯК» добавить логотипы фирм Formaggi Fortini и Cajun Delights с описанием выполняемых этими фирмами поставок. Позиционировать изображения и текст с помощью таблицы:

·  В конец страницы (перед закрывающей частью тэга BODY) вставить таблицу из трех строк, каждая из которых состоит из двух ячеек. Для этого добавить тэг таблицы TABLE. В тело тэга TABLE добавить три тэга строки таблицы TR. В тело каждого тэга добавить по два тэга ячейки TD.

<TABLE>

<TR>

<TD></TD> <TD></TD>

</TR>

<TR>

<TD></TD> <TD></TD>

</TR>

<TR>

<TD></TD> <TD></TD>

</TR>

</TABLE>

·  В первую ячейку второй строки (в тело соответствующего тэга TD) поместить изображение из файла forlogo.gif из папки images с размерами 189´34 точки.

·  Во вторую ячейку второй строки поместить текст со страницы formaggi.htm из папки C:\Program Files\Microsoft Office\Office\ Samples: «Поставки итальянских продуктов по всему миру».

·  В первую ячейку третьей строки поместить изображение из файла cajlogo.gif из папки images с размерами 195´72 точки.

·  Во вторую ячейку третьей строки поместить текст со страницы cajun.htm из папки C:\Program Files\Microsoft Office\Office\ Samples: «Лучшие индейские и креольские продукты для магазинов по всему свету».

22. Для таблицы задать отступы по 10 точек от границ ячеек до текста с помощью параметра CELLPADDING тэга TABLE.

23. В первую ячейку первой строки поместить текст «Члены нашей ассоциации». Выделить его шрифтом размера 4, сделать жирным.

Рис.2. Таблица с логотипами фирм на странице «МАЯК»

24. Сделать текст «Члены нашей ассоциации» заголовком таблицы. Для этого следует объединить ячейки первой строки:

·  Из первой строки таблицы удалить второй (пустой) тэг ячейки TD.

·  Первую ячейку первой строки распространить на две ячейки. Для этого в открывающей части тэга TD, содержащего заголовок таблицы, указать параметр COLSPAN со значением 2:

<TD COLSPAN=”2”> … </TD>

·  Расположить заголовок по центру объединенной ячейки. Для этого задать значение center параметра ALIGN в соответствующем тэге TD.

25. Просмотреть страницу «МАЯК» в браузере. Исследовать изменения отображения таблицы с логотипами фирм, происходящие при изменении размера окна браузера.

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

Задать для логотипов фирм вертикальное выравнивание «по верхнему краю». Для этого в тэгах TD соответствующих ячеек указать параметр вертикального выравнивания VALIGN со значением top.

Просмотреть изменения в браузере.

Задание 3. С помощью гиперссылок создать навигацию внутри страницы «МАЯК». Связать страницу «МАЯК» со страницами фирм Formaggi Fortini и Cajun Delights.

26. Внутри ячейки таблицы заключить тэг IMG, содержащий ссылку на файл логотипа фирмы Formaggi Fortini, в тело тэга гиперссылки А. Для тэга A указать адрес страницы, на которую указывает ссылка, с помощью параметра HREF. В данном случае ссылка указывает на страницу formaggi.htm, расположенную в папке C:\Program Files\Microsoft Office\Office\Samples:

<A HREF=”c:\program files\…\formaggi. htm”><IMG …></A>

27. Аналогичным образом оформить изображение с логотипом фирмы Cajun Delights как гиперссылку на страницу cajun.htm из той же папки. Проверить работу гиперссылок в окне браузера.

28. В окне браузера изображение помечается как гиперссылка с помощью рамки. Отменить рамки вокруг логотипов фирм, сделав их размер нулевым. Для этого в соответствующие тэги IMG добавить параметр BORDER со значением 0.

29. Оформить как гиперссылки на страницы formaggi.htm и cajun.htm названия фирм, выделенные в тексте страницы «МАЯК» жирным курсивом (пункт 17):

·  Текст заключается в тэг A вместе с тэгами форматирования символов B и I.

·  Потребовать, чтобы страницы фирм открывались в новом окне. Для этого добавить в тэг A параметр TARGET со значением _blank (Внимание! Значение «_blank» начинается со знака подчеркивания). Проверить работу ссылок.

30. В конце страницы создать ссылку на ее начало:

·  В начале страницы непосредственно после открывающей части тэга BODY создать метку. Для этого вставить тэг A с параметром NAME и именем метки. Назвать метку topstr. Тело тэга A оставить пустым:

<A NAME=”topstr”></A>

·  В конце страницы непосредственно перед закрывающей частью тэга BODY вставить текст «Вернуться в начало страницы». Заключить текст в тэг абзаца P с выравниванием по центру (параметр ALIGN, значение center). Выделить текст курсивом.

·  Выделить текст «Вернуться в начало страницы» как гиперссылку, в качестве значения параметра HREF указать имя метки, предваренное знаком #:

<A HREF=”#topstr”> … </A>

Проверить действие гиперссылки в браузере.

31. Продемонстрировать страницу «МАЯК» преподавателю.

ТЕМА2. СОЗДАНИЕ WEB-УЗЛА В MS FRONTPAGE 2000

MS FrontPage 2000 является частью MS Office 2000 и предназначен для профессионального создания как отдельных web-страниц, так и целых web-узлов в режиме визуального редактирования. Форматирование web-страниц производится при этом аналогично форматированию документов Word и не требует знания языка HTML. Вместе с тем имеется возможность использовать новейшие web-технологии – динамические эффекты, стили. Просмотр и изменение используемых технологий осуществляется на Compatibility команды Tools|Page Options. Настройка используемой на страницах web-узла кодировки (например, кириллица Windows) производится на вкладке Language команды Tools|Web Settings.

Созданные с помощью FrontPage узлы могут работать и под управлением web-сервера MS Internet Information Services, входящего в состав Windows NT/2000/XP, или MS Personal Web Server. Если предполагается, что web-узел, создаваемый с помощью FrontPage, будет функционировать под управлением какого-то другого сервера, то при создании узла следует избегать использования серверных компонент (например, счетчик посещений, автоматизированные формы FrontPage «Гостевая книга», компонент поиска, компонент создания оглавления узла и др.). Серверные компоненты будут функционировать только после публикации web-узла на одном из вышеперечисленных серверов.

FrontPage 2000 позволяет не только редактировать содержимое страниц, но и управлять файлами и папками web-узла. Папкам и файлам web-узла рекомендуется давать имена, содержащие латинские буквы и цифры. Не рекомендуется использовать в именах русские буквы и знаки пробела.

Окно FrontPage содержит кнопки, позволяющие выбирать режим просмотра web-узла:

·  Folders (Просмотр папок). Используется для просмотра файлов и папок, входящих в состав web-узла, наподобие окна Проводника Windows. Левое окно Folder List содержит иерархическое дерево папок web-узла, в правом окне Contents выводится содержимое активной папки.

·  Reports (Просмотр отчеты). Режим предназначен для формирования отчетов и просмотра статистики о web-узле.

·  Navigation (Просмотр в режиме навигации). Режим служит для определения структуры web-узла путем представления входящих в него страниц в виде карты. При этом окно навигации содержит иерархическую схему узла, исходной точкой которой служит домашняя страница Home, хранящаяся в файле index. htm. Режим позволяет изменять связи между страницами путем перетаскивания значков страниц мышью. Сделанные изменения в схеме узла автоматически используются FrontPage для создания графической панели навигации по узлу.

·  Hyperlinks (Гиперссылки). Выводит совокупность гиперссылок, обозначенных синими стрелками, для текущей страницы.

·  Tasks (Задачи). Режим предназначен для отслеживания выполнения задач, сопровождающих создание и поддержку web-узла. Позволяет создать и просматривать список задач, ассоци­иро­ван­ных со страницами узла.

·  Page отображает текущую страницу для редактирования. Если создан пустой узел, то отображается новая чистая страница. Имеется возможность форматирования страницы в режиме визуального редактирования (вкладка Normal), внося изменения непосредственно в код HTML (вкладка HTML), а также производить предварительный просмотр страницы в браузере (вкладка Preview).

Кроме того окно FrontPage содержит англоязычные меню и панели инструментов, сходные с Word.

Важно помнить, что для корректной работы ссылок и автоматических панелей навигации web-узла, следует задавать только англоязычные имена (содержащие только цифры и буквы латинского алфавита) файлам страниц узла. При этом страницы могут иметь русcкоязычные заголовки (TITLE).

Лабораторная работа №2

созДАНИЕ WEB-УЗЛА НА ОСНОВЕ ШАБЛОНОВ. УПРАВЛЕНИЕ WEB-СЕРВЕРОМ

Задание к лабораторной работе: создать web-узел с единым оформлением на основе шаблонов FrontPage и заранее подготовленных страниц, сделать доступным просмотр узла в рамках локальной Интранет-сети.

Задание 1. Создать персональный web-узел с использованием шаблона.

1.  Запустить FrontPage 2000. В окне команды File|New|Web выбрать шаблон Personal Web, в строке Specify the location of the new web указать полный путь к папке на диске, в которой будет создан web-узел (например, d:\ivanov). Нажать ОК. FrontPage создаст новый узел, содержащий пять стандартных страниц. дальнейшем при необходимости открыть созданный web-узел в FrontPage использовать команду File|Open Web.

2.  Просмотреть содержимое узла в режиме Folders: имена файлов страниц указаны в поле Name, а заголовки страниц – в поле Title).

3.  Просмотреть организационную структуру (карту, состоящую из индикаторов страниц) созданного web-узла в режиме Navigation. Домашняя страница «Home Page» находится на самом верхнем уровне, остальные – на нижних. Карта узла содержит не имена файлов, а заголовки страниц.

Свернуть нижний уровень структуры узла, щелкнув мышью по значку минуса на странице «Home Page». Развернуть структуру узла, щелкнув мышью по значку плюса на странице.

4.  Просмотреть содержимое домашней страницы «Home Page» в режиме редактирования, дважды щелкнув на ней мышью.

5.  Отредактировать домашнюю страницу на вкладке Normal. Вместо текста «Welcome to my Web site!» вставить текст «Добро пожаловать на мой web-узел!». Строкой ниже набрать свои фамилии. Работа с текстом осуществляется так же, как в обычном текстовом редакторе.

Просмотреть страницы web-узла с помощью встроенного браузера, для чего выбрать вкладку Preview. Просмотреть имеющиеся гиперссылки «Interests», «Foto Album», «Favorites» и проверить, что они отвечают организационной структуре узла. Вернуться на начальную страницу с помощью гиперссылки «Home».

6.  В режиме Navigation переименовать заголовки страниц, входящие в web-узел. Заголовок «Home Page» заменить на «Главная», «Interests» – на «Мои увлечения», «Photo Album» – на «Фото альбом», «Favorites» – на «Ссылки». Щелкнуть правой кнопкой мыши по заголовку страницы, выбрать команду Rename из контекстного меню, в окне команды ввести новый заголовок.

7.  Добавить в узел новую страницу. В режиме Navigation щелкнуть правой кнопкой мыши на странице «Главная» и выбрать команду New Page из контекстного меню. Изменить заголовок новой страницы на «Мой город». Обновить содержимое правой части окна Folder List со списком файлов web-узла, щелкнув на кнопке Refresh . В списке файлов узла найти файл страницы «Мой город», заменить его имя на англоязычное (например, gorod.htm). Менять заголовок страницы на карте узла не надо!

Рис.3. Организационная структура узла после изменения

8.  Изменить структуру web-узла, как показано на рис.3. Для этого в режиме Navigation перетащить мышью нужные страницы на более низкий уровень организационной структуры узла.

9.  В режиме предварительного просмотра Preview просмотреть изменения панелей навигации (меню) страниц узла.

Задание 2. Добавить в web-узел ранее созданную страницу mayak.htm, задать единое оформление для всех страниц узла.

10. Добавить в узел ранее созданную страницу mayak. htm:

·  В списке Folder List выделить папку верхнего уровня (рабочую папку, например d:\ivanov), щелкнув по ней мышью. Выполнить команду File|Import.

·  В окне команды Import нажать кнопку Add File (добавить файл) и выбрать файл mayak. htm, предварительно перейдя в ту папку, где он был сохранен. Нажать кнопку Открыть.

·  Имя файла с указанием пути добавится в окно команды Import. После этого нажать ОК.

11. Импортировать в папку images созданного web-узла графические файлы forlogo.gif, cajlogo.gif и nwlogo.gif, использованные в оформлении страницы «МАЯК». Для этого щелкнуть мышью на папке images и выполнить один раз команду File|Import – с помощью кнопки Add File добавить все три файла по очереди в окно команды импорта и лишь затем выйти из него, нажав ОК.

12. Добавить страницу «МАЯК» в структуру узла, для чего в режиме Navigation перетащить мышью значок файла mayak.htm из списка Folder List в окно организационной структуры узла на один уровень со страницами «Мои увлечения» и «Мой город».

13. Добавить на страницу «МАЯК» панели навигации по узлу:

·  Открыть страницу «МАЯК» для редактирования в режиме Normal.

·  Выполнить команду Format|Shared Borders (общие поля). В окне команды установить переключатель в позицию All pages (такие же, как и на всех страницах узла). В окне команды визуально выделены верхнее и левое поле страницы. Нажать ОК.

14. Отредактировать верхнюю панель навигации страниц узла, удалив из нее ссылку «Up» на страницу верхнего уровня. Для этого на любой странице узла (можно на странице «МАЯК») щелкнуть правой кнопкой мыши по верхней панели навигации и выбрать в контекстном меню команду Navigation Bar Properties (свойства панели навигации). В окне команды снять флажок напротив пункта Parent page.

15. Отредактировать панель навигации для страниц «Фото альбом» и «Ссылки» таким образом, чтобы внизу страниц имелись текстовые ссылки на страницы верхнего уровня:

·  Открыть в одну из страниц для редактирования, в окне команды Format|Shared Borders установить переключатель в позицию Current page (для текущей страницы) и добавить флажок напро­тив слова Bottom – на схеме появится нижнее поле. Нажать ОК.

·  На странице удалить любое содержимое нижнего общего поля.

·  Установить курсор в область нижнего поля, вставить в поле панель навигации командой Insert|Navigation Bar. В окне команды установить переключатель в позицию Parent level, снять флажок для отображения домашней страницы Home page. Задать настройки отображения панели Horisontal и Text.

·  Отцентрировать вставленные ссылки как обычный текст.

·  Сохранить изменения в странице.

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

·  Закрыть окна отредактированных страниц, не выходя из MS FrontPage.

16. Задать общее оформление для всех страниц узла. В окне команды Format|Theme установить переключатель в позицию All pages, выбрать из списка понравившуюся схему форматирования, установить флажок Vivid colors и нажать ОК.

17. Просмотреть страницы узла в режиме предварительного просмотра.

18. Закрыть окно MS FrontPage. Просмотреть страницы узла как локальные файлы в браузере Internet Explorer. Показать узел преподавателю.

Задание 3. Сделать созданный узел доступным для просмотра через Интранет сеть с помощью web-сервера Internet Information Services.

19. Зайти в Windows 2000 с правами администратора (по указанию преподавателя)

20. Выполнить команду Пуск|Настройка|Панель управления, открыть компонент Администрирование, а в нем – Управление компьютером. Проверить, что на компьютере установлен Internet Information Services, являющийся стандартным компонентом Windows 2000: для этого раскрыть список Службы и приложения и проверить наличие в нем Internet Information Services.

Примечание. Если Internet Information Services не установлен на вашем компьютере, установить его, выполнив следующие действия:

·  Выберите пункт Установка и удаление программ на панели управления, щелкните на кнопке Добавление и удаление компонентов Windows;

·  В появившемся окне Мастер компонентов Windows установите флажок напротив Internet Information Services, нажмите кнопку Состав и в появившемся списке снять флажки напротив пунктов FTP-сервер и Документация, нажать ОК;

·  В окне мастера установки компонентов нажать кнопку Далее, если мастер потребует указать источник обновления Windows – с помощью кнопки Обзор выберите папку по указанию преподавателя. Дождитесь завершения установки Internet Information Services.