Создание профессионально оформленных документов

<br>

В Office Word 2007 предусмотрены все необходимые инструменты для редактирования и проверки текстов, что дает возможность с небывалой легкостью создавать безупречно подготовленные документы.<br>

11. Заменить текстовые линии (представляющие собой последовательности знаков -) на линии HTML:

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

<hr align=”center” width=”80%” size=”2”>

13. Вставить тэг HR вместо второй текстовой линии. Изменить цвет нижней линии, добавив в тэг HR параметр COLOR с выбранным значением цвета. В качестве значения этого параметра можно использовать английские названия основных цветов (см. Приложение. Фоновые цвета).

14. Выделить строку текста «Предполагаемое действие» курсивом, заключив ее в тэгEM.

<em>Предполагаемое действие:</em>

15. В последующем тексте выделить жирным курсивом текст абзацев, играющих роль подзаголовков (как, например, строка «Создание профессионально оформленных документов» после разделительной линии), используя совместно тэги STRONG и EM. Например:

<hr align=”center” width=”80%” size=”2”>

<strong><em>Создание профессионально оформленных документов</em></strong>

<br>

16. Для абзацев, расположенных ниже второй горизонтальной линии задать отступ от левой границы страницы, заключив блок текста в тэг BLOCKQUOTE (рис.2). Закрывающая часть тэга BLOCKQUOTEдолжна располагаться перед закрывающей частью тэга P, содержащего текст.

17. Перед первой строкой текста добавить новый текст «Состав офиса», выделить его в отдельный абзац (тэг P), задать жирный шрифт (тэг STRONG).

Рис.2. форматирование абзацев на web-странице

18. Ниже текста «Состав офиса» добавить еще две строки текста: «Стандартный комплект поставки», «Дополнительно устанавливаемые приложения», не заключая их в тэг P. Оформить эти строки как нумерованный список. Для этого:

· Заключить блок из двух вставленных строк в тэг нумерованного списка OL.

· Каждую из строк в отдельности заключить в тэг элемента спискаLI.

В результате верх web-страницы должен принять вид как на рис.3.

19. После первого элемента нумерованного списка (Стандартный комплект поставки) добавить в столбик названия приложений «Word», «Excel», «Access», «Outlook», «PowerPoint», «InfoPath», «Publisher». Оформить перечень приложений как маркированный список. Для этого весь перечень заключить в тэг маркированного списка UL, а каждое из названий приложений – в тэг элемента списка LI.

Рис.3. Нумерованный список на web-странице

20. После второго элемента нумерованного списка (Дополнительно устанавливаемые приложения) добавить в столбик названия приложений «FrontPage», «Project». Оформить перечень приложений как маркированный список.

21. Изменить внешний вид маркера первого вложенного списка на закрашенный круг. Для этого для параметра TYPE тэга маркированного списка следует задать значение disc. Параметр и его значение указываются в открывающей части тэга UL:

<ul type = ”disc”>

22. Изменить внешний вид маркера второго вложенного списка на закрашенный квадрат. Для этого для параметра TYPE тэга маркированного списка следует задать значение square (рис.4).

Рис.4. Вложенные списки на web-странице

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

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

Мой офис

Состав и возможности MS Office

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

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

· Установить логическое выделение абзаца с заголовком, добавив в тэг P параметр CLASS со значением zagolovok. Логическое выделение пока никак не отразится на внешнем виде текста заголовка.

<p class=”zagolovok”>Мой офис<br>

Состав и возможности MS Office</p>

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

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

26. Скопировать в папку images графические файлы
из папки C:\Program Files\Microsoft Office\OFFICE12\ BITMAPS\DBWIZ.

ВНИМАНИЕ! В целях дальнейшей корректной работы компьютера проверьте, что файлы не удалены из исходной папки!

ПРИМЕЧАНИЕ: Можно использовать другие графические файлы формата GIF или JPEG (имеющие расширения .GIF, .JPG, .JPEG). Стандартная папка C:\Program Files\Microsoft Office\CLIPART\PUB60COR содержит много различных графических файлов. Для правильного выбора файла и корректного указания его имени в коде HTML следует отобразить в окне Проводника Windows (Мой компьютер) полные имена файлов с расширениями. Для этого выполнить команду Сервис/Свойства папки/Вид и снять флажок Скрывать расширения для зарегистрированных типов файлов. Для облегчения выбора файлов с нужным расширением рекомендуется упорядочить значки по типу в окне Проводника Windows (Мой компьютер).

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

<img src=”images/evtmgmt.gif”>

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

29. Оформить текст, заключенный между двумя горизонтальными линиями в виде списка с графическими маркерами:

· Заключить блок с текстом из четырех строк в тэг маркированного списка UL. Тэги BR из текста не удалять.

· Скопировать в папку images из папки C:\Program Files\Microsoft Office\CLIPART\PUB60COR файл изображения, который будет служить графическим маркером (например, файл с изображением бабочки AG00130_.GIF).

· Добавить в начало первой строки тэг IMG с указанием в параметре SRC адреса графического файла-маркера. Уменьшить размер изображения-маркера, чтобы он не вы по высоте ходил за пределы строки: добавить в тэг IMG параметр HEIGHT со значением 20. Например,

<img src=”images/AG00130_.GIF” height=”20”>

· Скопировать тэг вставки рисунка в начало каждой их строк списка (рис.5)

·

Рис.5. Список с графическим маркером

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

· Перед закрывающей частью тэга BODY добавить код, задающий таблицу из одной строки и четырех столбцов:

<table>

<tr>

<td></td> <td></td> <td></td> <td></td>

</tr>

</table>

TABLE – тэг, описывающий таблицу целиком, TR – тэг строки таблицы, TD – тэг ячейки таблицы.

· Для того, чтобы границы ячеек таблицы были видны на экране, задать для таблицы рамку – добавить в тэг таблицы TABLE параметр BORDER со значением 1.

31. В ячейки второй строки занести соответственно текст «текстовый редактор Word», «табличный процессор Excel», «СУБД Access», «редактор web-страниц FrontPage».

32. Добавить заголовок таблицы, для этого:

· В начало таблицы добавить еще одну строку (тэг TR) с одной ячейкой TH.

· В ячейку TH (после открывающей и перед закрывающей частью соответствующего тэга) добавить текст заголовка таблицы «Подробнее о приложениях MS Office».

· Убедиться, что заголовок таблицы размещается лишь в первом столбце таблицы.

· Распространить заголовок на все четыре столбца таблицы, для чего для тэга TH задать параметр COLSPAN со значением 4 (ячейка охватывает 4 столбца).

· Установить логическое выделение ячейки с заголовком, добавив в тэг TH параметр CLASS со значением zagolovok. Логическое выделение пока никак не отразится на внешнем виде текста заголовка.

33. В каждую ячейку второй строки перед текстом с помощью тэга IMG вставить по одному рисунку из папки images (рисунки должны быть разными, подходящими на ваш взгляд для соответствующего приложения), например:

<td><img src=”images/contacts.gif”> текстовый редактор Word 2003</td>

34. Вставить в каждой ячейке между рисунком и текстом тэг перевода строки BR.

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

36. Просмотреть реальный размер изображений, для этого щелкнуть правой кнопкой мыши на рисунке в окне браузера и выполнить команду Свойства. Уменьшить размер изображений в таблице, указав в тэге IMG значение 103 для параметра WIDTH (ширина изображения) и значение 92 для параметра HEIGHT (высота изображения). Например:

<img src=”images/contacts.gif” width=”103”

height=”92”>

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

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

· Просмотреть результат в браузере (рис.6). Уменьшить ширину окна браузера и пронаблюдать, как изменится расположение текста и изображений в таблице.

37. Отключить отображение границ таблицы, для чего изменить значение параметра BORDER тэга TABLE на ноль (0).

38. Выровнять таблицу по центру страницы, задав для тэга TABLE параметр ALIGN со значением center.

Рис.6. Позиционирование графики с помощью таблицы

Задание 3.С помощью гиперссылок связать страницу «Мой офис» с другими web-страницами, создать переход внутри самой страницы.

39. Создать текстовую ссылку на страницу с подробным описанием MS Office 2003. Страница расположена на диске компьютера в папке C:\Program Files\Microsoft Office\Office11\1049, файл носит название ofreadme.htm. В качестве указателя ссылки будет использован выделенный курсивом текст «Предполагаемое действие», находящийся в верхней части страницы «Мой офис». Создать ссылку:

· Скопировать страницу ofreadme.htm в свою рабочую папку (проверить, что она сохранилась и в исходном местоположении).

· Найти в HTML-коде страницы «Мой офис» фрагмент кода, описывающий строку «Предполагаемое действие». Для того, чтобы визуально отделить строку от остального текста, вставить перед ней еще один тэг BR.

· Заключить текст строки, выделенный тэгом форматирования шрифта EM в тэг гиперссылки A. Для открывающей части тэга A задать параметр HREF, значением которого является адрес страницы, на которую указывает ссылка. Поскольку файл страницы ofreadme.htm расположен в той же папке, что и файл страницы «Мой офис», содержащей ссылку, в качестве адреса гиперссылки указывается только имя ofreadme.htm.

<br><br>

<a href=”ofreadme.htm”>

<em> Предполагаемое действие</em>

</a>

<br>

40. Аналогично предыдущему пункту сделать графический значок в последнем столбце таблицы ссылкой на страницу с описанием приложения FrontPage. Файл страницы с описанием FrontPage находится в папке C:\Program Files\Microsoft Office\Office11\1049 и носит названия fpreadme.htm:

· Скопировать файл fpreadme.htm в свою рабочую папку.

· В коде HTML найти тэг ячейки таблицы с описанием FrontPage.

· Заключить тэг IMG, находящийся в ячейке, в тэг гиперссылки А.

· Проверить работу ссылки.

· При использовании рисунка в качестве указателя гиперссылки он автоматически выделяется рамкой.

41. Создать ссылку на сайт Инжэкона, доступный из Интранет-сети университета (не требующий подключения к Интернет):

· В коде HTML найти фрагмент с описанием рисунка, расположенного в начале страницы.

· Заключить тэг IMG, описывающий рисунок, в тэг гиперссылки А. В качестве значения параметра HREF тэга А задать URL-адрес сайта Инжэкона: http://www.engec.ru

· Указать, что ссылка на внешний сайт открываются в новом окне браузера. Для этого добавить в тэг A параметр TARGET со значением _blank (Внимание! Значение _blank начинается со знака подчеркивания).

· Проверить работу ссылки.

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

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

<a name=”topstr”></a>

· В коде страницы содержатся три строки с текстом «К началу страницы». Найти одну из этик строк. Заключить текст в тэг A, в качестве значения параметра HREF указать имя метки, предваренное знаком #:

<a href=”#topstr”>К началу страницы</a>

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

· Оформить остальные строки с текстом «К началу страницы» в виде ссылок на метку topstr.

Задание 4.Задать стилевое оформление страницы «Мой офис».

43. Задать для абзацев основного текста выравнивания текста «по ширине страницы»:

· Найти в коде HTML тэг BLOCKQUOTE, содержащий основной текст.

· В тэг BLOCKQUOTE добавить параметр STYLE с описанием стиля, содержащим название свойства стиля – выравнивание (text-align) и его значение – по ширине (justify), в описании стиля свойство и значение указываются через двоеточие:

<blockquote style=”text-align:justify”>

44. Задать для абзаца «Microsoft Office Word 2007 с новым интерфейсом …» выравнивание по ширине и красную строку с отступом 30 пикселей (точек):

· Найти в коде HTML тэг P, содержащий текст нужного абзаца.

· Задать для тэга P параметр STYLE с тем же описанием стиля, что и для тэга BLOCKQUOTE (параметр можно скопировать).

· Добавить описание в стиль абзаца описание красной строки (свойство text-indent, значение – размер отступа): в описании стиля перед закрывающей двойной кавычкой поставить точку с запятой, а затем записать новое свойство стиля:

<p style=”text-align:justify;text-indent:30”>

45. Для всех ячеек таблицы задать горизонтальное выравнивание по центру ячейки:

· В раздел страницы HEAD (после открывающего, но перед закрывающим тэгом HEAD) добавить описание внедренной таблицы стилей:

<style type=”text/css”>

<!--

-->

</style>

· Внутри таблицы стилей (после <!--, но перед-->) вставить описание стиля выравнивания для селектора TD (тэг ячейки таблицы). Название свойства выравнивания – text-align, значение – по центру (center):

TD {text-align:center}

46. Задать выравнивание по центру, увеличенный размер шрифта (свойство font-size) и выделением цветом (свойство color) для всех логических элементов страницы «Мой офис», выделенных как заголовки (абзац заголовка страницы и заголовок таблицы). Для таких элементов был задан класс с именем zagolovok. Поэтому в качестве селектора стиля будет указано имя класса в ведущей точкой. Различные свойства стиля разделяются точкой с запятой. Добавить в таблицу стиля описание:

.zagolovok {text-align:center;

font-size:150%;

color:red}

47. Изменить регистр главного заголовка страницы – задать написание текста заглавными буквами (свойство text-transform, значение uppercase). Поскольку это свойство будет относиться только к абзацу заголовка, но не к заголовку таблицы, в качестве селектора стиля следует указать и название тэга и имя класса:

p.zagolovok {text-transform:uppercase}

48. Самостоятельно добавить в описание стиля абзаца заголовка определение жирного написания (свойство font-weight, значение bold).

49. Отключить рамку у рисунков (тэг IMG), служащих гиперссылками (тэг A). Поскольку для задания таких объектов тэги A и IMG используются совместно, в качестве селектора используется их перечисление через пробел в порядке использования в коде HTML. Название свойства – толщина рамки (border-width), значение – ноль (0). Добавить в таблицу стилей описание:

a img {border-width:0}

50. Задать выделение цветом текста всех ссылок на странице. Используется селектор A (тэг гиперссылки), свойство color, значение цвета. В таблицу стилей будет добавлено описание вида:

a {color:red}

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

a:visited {color:green}

Самостоятельное задание:

52. Создать текстовую ссылку на сайт, расположенный в интра-сети Инжэкона (например, ivc.engec.ru, cs.engec.ru либо иной). Ссылка должна открывать в новом окне.

53. Задать для одной из страниц с описанием приложений (которые скопированы в рабочую папку) фоновый рисунок средставами HTML. Для этого отредактировать указанную страницу, задав для тэга BODY параметр BACKGROUND, значением которого служит адрес графического файла (аналогично параметру SRC тэга IMG). Фоновый рисунок можно скопировать в папку images из папки C:\Program Files\Microsoft Office\CLIPART\Publisher\Backgrounds.

54. C помощью таблицы стилей задать курсивное написание всех текстовых ссылок страницы (селектор A, свойство font-style, значение italic).

55. С помощью таблицы стилей или с помощью указания параметра STYLE задать фоновый цвет для тэга TH заголовка таблицы (свойство background-color, значение – название или код цвета).

56. С помощью таблицы стилей или с помощью указания параметра STYLE задать фоновый цвет для второй из страниц с описанием приложений, скопированных в рабочую папку (тэг BODY, свойство background-color, значение – название или код цвета).

57. Продемонстрировать страницу «Мой офис» преподавателю.

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

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

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

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

В Microsoft FrontPage существует несколько способов просмотра содержимого web-узла (представлений), облегчающих разработку, публикацию и управление им.

Переход между различными представлениями может осуществляться с помощью меню Вид, а также с помощью кнопок под окном представления (Рис.7). Кроме того, окно просмотра папок web-узла может быть отображено в левой части окна FrontPage вне зависимости от текущего представления. Для этого следует выполнить команду Вид|Список папок.

Рис.7. Окно приложения MS FrontPage 2003.

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

· Страница. Позволяет редактировать web-страницы в одном из следующих режимов:

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

· Код. Режим для просмотра, записи и редактирования тегов HTML. Используя средства оптимизации кода в Microsoft FrontPage, можно создать чистый код HTML, также упрощается процедура удаления ненужного кода (команда Сервис|Оптимизировать HTML-код).

· С разделением. Режим с разделением экрана, предоставляющий одновременный доступ к странице для просмотра и редактирования в режимах Код и Конструктор.

· Просмотр. Позволяет просматривать внешний вид страницы в браузере (например, в MS Inernet Explorer), не сохраняя ее. Этот режим рекомендуется использовать для проверки страницы перед сохранением после внесения небольших изменений.

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

· Папки. Используется для непосредственной работы с файлами и папками, входящими в состав web-узла. В этом представлении папки можно создавать, удалять, копировать и перемещать, как и в проводнике MS Windows. При этом, если в левой части окна включено отображение иерархической структуры папок web-узла командой Вид|Сисок папок, то в правой части окна отображается содержимое активной (выбранной) папки.

· Удаленный веб-узел. Это представление можно использовать для публикации всего web-узла или выборочной публикации отдельных файлов. Также можно синхронизировать файлы в двух или нескольких расположениях, чтобы обеспечить своевременное обновление узлов с одинаковым содержимым. При просмотре содержимого папки в представлении Удаленный веб-узел файлы помечаются значками и сопровождаются описаниями, содержащими состояние публикации, например, Не публиковать, Изменено, Не изменено, Создать или Конфликт. Можно выполнить отбор для отображения всего содержимого папки, файлов для публикации, файлов не для публикации или конфликтующих файлов.

· Отчеты. Режим предназначен для формирования отчетов и просмотра статистики о web-узле Позволяет анализировать содержимое web-узла после выполнения запроса отчета. Можно рассчитать полный объем памяти, занимаемой файлами на узле, отображать файлы, не связанные с другими файлами, обнаруживать медленные или устаревшие страницы, группировать файлы по задаче или по лицу, которому они предназначены, выполнять другие задачи.

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

· Гиперссылки. Отображает состояние гипрессылок web-узла в виде списка (ссылки обозначены синими стрелками). Этот список включает внутренние и внешние гиперссылки и использует значки для обозначения проверенных или неработающих гиперссылок.

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

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

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

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

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

1. Запустить FrontPage 2003. С помощью меню Вид перейти в представление Папки, включить отображение иерархической структуры папок узла командой Вид|Список папок (см. рис.6 выше). Выполнить команду Файл|Создать:

· На появившейся в правой части окна приложения FrontPage вкладке Создание в группе Создать веб-узел выбрать ссылку Другие шаблоны веб-узлов.

· В появившемся окне Шаблоны веб-узлов выделить мышью шаблон Личный веб-узел, в строке ввода Укажите расположение нового веб-узла набрать с клавиатуры полный путь к папке на диске для размещения web-узла (например, d:\ivanov2) – указанная папка будет создана автоматически. Нажать ОК.

Примечание. В дальнейшем при необходимости редактирования страниц ранее созданного web-узла, узел следует открыть в FrontPage, использовав команду Файл|Открыть узел.

2. Проанализировать содержимое созданного узла в режиме Папки: имена файлов страниц указаны в поле Имя, а заголовки страниц (title) –в поле Название).

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

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

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

5. Отредактировать текст домашней страницы на нижней вкладке редактора Конструктор, внеся свои фамилии. Работа с текстом осуществляется так же, как в редакторе MS Word. Сохранить изменения.

6. Просмотреть страницы web-узла с помощью встроенного браузера, для чего выбрать вкладку редактора Просмотр. Просмотреть имеющиеся гиперссылки «О себе», «Увлечения», «Избранное», «Фотографии», «Обратная связь» и проверить, что они отвечают организационной структуре узла. Вернуться на начальную страницу с помощью гиперссылки «Домашняя».

7. Отредактировать текст страниц «О себе», «Увлечения», внеся личную информацию.

8. Вернуться в режим Переходы, щелкнув мышью на верхней вкладке веб-узел.Переименовать заголовки страниц, входящие в web-узел: заголовок «Избранное» заменить на «Ссылки», «Фотографии» – на «Фото альбом», «Обратная связь» – на «Написать». Для изменения заголовка в режиме Переходы щелкнуть на нем правой кнопкой мыши и выбрать команду Переименовать.

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

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

10. Открыть любую из страниц в режиме редактирования и просмотреть изменения панелей навигации (меню) страниц узла, щелкнув на нижней вкладке Просмотр. Панель отражает изменения, произведенные в названиях страниц и структуре web-узла. Перейти на страницу «О себе». Как видно, она не содержит ссылок на страницы нижнего уровня «Увлечения», «Фото альбом».

11. Отредактировать панели навигации страницы «О себе»:

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

· Добавить строку после заголовка (Объявления) и перед датой создания страницы, для чего щелкнуть мышью на баннере, а затем нажать клавишу со стрелкой вправо ®, курсор мыши будет установлен в указанное место, нажать клавишу Enter.

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

· Проверить, что вставлены ссылки на страницы «Увлечения», «Фото альбом».

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

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

12. Аналогично предыдущему пункту добавить на страницы «Увлечения» и «Фото альбом» верхние горизонтальные панели навигации со ссылками на страницы верхнего уровня (Родительский уровень) и домашнюю страницу.

13. На страницах «Увлечения» и «Фото альбом» отредактировать левую и нижнюю панели навигации, исключив из них ссылку на домашнюю страницу:

· Щелкнуть правой кнопкой мыши на соответствующей панели ссылок и выбрать из контекстного меню команду Свойства Панель ссылок.

· В окне команды снять флажок домашняя страница.

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

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

· В списке папок web-узла, отображаемом в левой части окна FrontPage выделить папку верхнего уровня (рабочую папку, например d:\ivanov2), щелкнув по ней мышью. Выполнить команду Файл|Импорт.

· В окне команды Импорт нажать кнопку Добавить файл и выбрать файл office.htm, предварительно перейдя в ту папку, где он был сохранен. Нажать кнопку Открыть.

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

15. Аналогичным образом импортировать в папку images узла FrontPage графические файлы, использованные в оформлении страницы «Мой офис». Для этого щелкнуть мышью на папке images и выполнить один раз команду Файл|Импорт: после нажатия кнопки Добавить файл выделить группу нужных графических файлов мышью, удерживая нажатой клавишу CtrlилиShift – будут открыты все выбранные файлы.

16. Добавить страницу «Мой офис» в структуру узла, для чего перейти в режим Переходы и перетащить мышью значок файла office.htm из списка файлов (в левой части окна) в окно структуры узла (правая часть окна) на один уровень со страницами «О себе», «Ссылки» и «Написать».

17. Добавить на страницу «Мой офис» заголовок и панели навигации по узлу:

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

· Добавить в начало страницы «Мой офис» три пустые строки.

· Установить курсор в верхнюю строку и выполнить команду Вставка|Объявление на странице, в окне команду установить переключатель в позицию Рисунок, текст объявления – Мой офис. Нажать ОК. Отцентрировать вставленное объявление.

· Установить курсор на вторую строку и выполнить команду Вставка|Панель ссылок – добавить горизонтальную панель ссылок на страницы того же уровня и домашнюю страницу. Отцентрировать панель.

· В третьей строке вставить дату последнего автоматического обновления страницы, выполнив команду Вставка|Дата и время. Выровнять дату по правому краю.

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

18. Задать для панелей навигации узла отображение названия домашней страницы как «Добро пожаловать». Для этого в окне команды Сервис|Параметры узла выбрать вкладку Переходы и в строке Домашняя страница ввести вместо Домашняя текст Добро пожаловать. Нажать кнопку Применить. Проанализировать изменение панелей ссылок на страницах.

19. Задать общее оформление для всех страниц узла. Выполнить команду Формат|Тема. В самой правой части окна FrontPage отобразятся доступные шаблоны оформления страниц (темы). Просмотреть темы и щелкнуть правой кнопкой мыши на понравившейся. Выбрать команду Применить как тему по умолчанию и нажать Да в окне предупреждения.

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

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

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

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

23. Настроить web-сервер Windows на компьютере:

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

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

· В списке Службы и приложения раскрыть список Internet Information Services, щелкнуть правой кнопкой мыши по компоненту Веб-узел по умолчанию, открыть его Свойства.

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

· Выйти из окна свойств Веб-узла по умолчанию, закрыть окно Управление компьютером.

24. Щелкнуть правой кнопкой мыши на папке, содержащей созданный web-узел, в окне команды Свойства перейти на вкладку Досту