0. .Разработка Web-сайта с помощью ms Front Page

Лабораторная работа 9. Основы работы в редакторе MS Front Page

Цель работы: изучение основ работы с редакторомMS Front Page.

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

Ниже на рис . 18 приведена структура Web-сайта

Рис. 18 - Макет личного веб_сайта

Шаг 1 - Создание нового сайта.

1. Запустить Front Pageи выбрать пункт менюФайл –Создать – Веб-узел, а затем шаблон сайта –Одностраничный сайт.В полеУкажите расположение нового сайтауказать папку, в которой будет располагаться сайт, напримерD:\students\545\web. Затем следует нажать кнопку «Ok». КрайняялеваяпанельПапкипоказывает входящие в сайт папки и файлы:htlm-страницы, рисунки и т.п. В настоящий момент, сайт содержит лишь одну страницу –index.htm. Если в этой панели выбрать «мышью» одну из страниц, то она будет открыта для редактирования.

2. Работа со страницей возможна в одном из четырех режимов:

- конструктор- производится редактирование страницы;

- с разделением – окно делится на две части: в одной – отображается кодHTML, который можно редактировать, в другой можно работать в режиме конструктора;

- код- (HTML) - можно проконтролировать создаваемый код страницы и внести изменения;

- просмотр - страница показана так, как она будет отражена браузером.

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

Шаг 2 – Ввести текст основной страницы (структура страницы приведена на рис. 12. Текст страницы разрабатываются самостоятельно).

1. Для ввода данных создайте таблицу, выбрав пункт меню Таблица > Вставка,или используя соответствующую пиктограмму на панели инструментов. Наберите текст страницы. Для заголовка страницы в полеСтильв левой верхней части экранаFront Pageвыберите стильЗаголовок 1. На рис 19 представлен вид Главной станицы веб-сайта.

Рис. 19 - Макет Главной страницы веб-сайта

2. После того, как в таблицу введен текст, определите свойства таблицы. Установите курсор «мыши» внутри таблицы, нажмите правую кнопку и в пункте Свойства таблицыопределите для поляВыравниваниезначениеЦентр. Установитефлажокв полеЗадать ширинуипереключательна параметр -В процентах,и задайте значение - «80». Это значит, что таблица будет располагаться по центру окна браузера и занимать 80% ширины окна.

3. В группе Границыможно определить размер и цвет рамки. Если необходимо, чтобы у таблицы не было видимой рамки, установить в поле значение - 0. ГруппаФонпозволяет задать фон для таблицы.

4. Для определения свойств страницы выберите из контекстного меню пункт Свойствастраницыи на вкладкеОбщиеизмените полеНазвание – на текст «Главная страница». Теперь это значение будет отражаться в заголовке окна браузера при просмотре страницы. Обязательно необходимо исправить язык страницы, это делается с помощью вкладкиЯзык. Установите кодировку (Набор знаков) - Кириллица и язык Русский.

5. Перейдите на вкладку Форматирование. Если установить флажокФоновый рисунок, то нажав на кнопкуОбзор, можно выбрать рисунок для фона страницы.

6. Группа Цветапозволяет задать цвет шрифта по умолчанию, цвет фона по умолчанию, цвета ссылки, посещенной и активной. Измените эти параметры.

7. Для оформления заголовка в виде Бегущей строки выберите в менюВидпредставлениеСтраницаи нажмите в нижней части окна документа кнопкуКонструктор.Щелкните место, куда следует вставить бегущую строку, а потом введите и выделите текст, который следует представить в виде бегущей строки. В менюВставкавыберите командуВеб-компонент. В группеТип компонентанажмите кнопкуДинамические эффекты. В группеВыбор эффектадважды щелкните значокБегущая строка. Задайте параметры бегущей строки.

8. Сохраните страницы. Если программа задаст вопрос о месте сохранения рисунков: сохраните рисунки в папке Images. Для выбора папки используется кнопкаИзменить папку.

Шаг 3 - Определить ссылки на главной странице

1. Чтобы сделать ссылку на существующую страницу нужно выбрать ее из списка. Можно также определить место внутри страницы (закладку) на которое будет указывать ссылка. Если это место внутри текущей страницы, то заполнять поле URLне нужно, следует выбрать закладку в полеЗакладка (закладка должна быть предварительно создана). Если следует создать ссылку на закладку на другой странице, то сначала нужно выбрать эту страницу, а затем – закладку.

2. Создайте ссылки на другие страницы сайта. Для этого выделите раздел в содержании и создайте ссылку, нажав на панели инструментов кнопку создания гиперссылки, либо выбрав пункт меню Вставка > Гиперссылка.

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

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

Шаг 4 - Ввести тексты остальных страниц сайта

Структура остальных страниц аналогична главной. Выбрав пункт Свойствастраницыконтекстного меню, определите язык страницы, фон, цвета для ссылок и заголовок - все по аналогии с шагом 2. На рис. 20 приведен пример страницы «О себе».

Рис. 20 - Макет страницы веб-сайта

1. Для ввода текста в остальные страницы используйте также таблицы с невидимыми границами. Через пункт меню Таблицы > Вставкавведите таблицу с тремя строками и двумя столбцами.

2. В свойствах таблицы - пункт Свойства таблицыконтекстного меню задайте выравнивание таблицы по центру (ПолеВыравнивание– значениеЦентр). ПолеРазмерв группеГраницыоставьте нулевым, т.к. нам нужна таблица без видимых границ. Размеры таблицы определите при помощи «мыши».

3. В ячейку таблицы введите текст. Свойства ячейки пункт Свойства ячейкиопределите, задав два свойства:Выровнять по горизонтали- значение Центр,Выровнять по вертикали– значениеСередина. В результате текст будет выведен по центру ячейки.

Шаг 5 - Ввести рисунки.

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

Шаг 6 - Организовать ссылки на персональной странице

1. Прежде всего, введем ссылки внутри сайта. Выделим слова «О себе» и создадим из них гиперссылку. В окне создания гиперссылки выберем из списка эту страницу. Поле URLавтоматически заполнится значением «aboutme.htm». Далее нажмем кнопкуOk. Аналогичным образом создадим ссылку на остальные страницы.

2. Ссылки на внешние сайты скорее всего создадутся автоматически при вводе адресов с клавиатуры. Если адрес не распознается, то его необходимо проверить: возможно, введен пробел или адрес не отделен от других слов. После ввода адреса необходимо нажать пробел.

3. Вызовем свойства гиперссылки, для чего подведем курсор мыши к ссылке и нажав правую кнопку выберем пункт Свойства гиперссылкиконтекстного меню. В окне редактирования гиперссылки на панели «Связать с» нажмем на пиктограмму «Новым документом» и введем имя документа.

4. Повторим эти действия для всех внешних ссылок.

5. Теперь превратим рисунок на странице в ссылку. Активируем рисунок (нажмем на нем один раз левой кнопкой мыши, в результате по углам рисунка появятся точки) и превратим его в ссылку (пиктограмма на панели инструментов или пункт Вставка гиперссылкииз меню).

Шаг 7 - Создание ссылок на элементы внутри страниц

1. Если страницы занимает несколько экранов, ее следует разделить на секции и определить закладки. Например, на странице «Друзья» создайте оглавление в виде списка друзей. В тексте страницы отведите секцию для каждого друга. Выделите имя друга (в тексте, а не в пункте содержания) и выберите пункт меню Вставка > Закладка.

2. В поле Имя закладкивведите слово «fio» и нажмите кнопкуOk. Имя будет подчеркнуто пунктирной линией, в знак того, что теперь оно является закладкой. Аналогичным образом превратите остальные заголовки секций страниц в закладки.

3. Теперь создадим ссылки из содержания страницы. Выделите пункт содержания и превратите его в ссылку. В окне редактировании ссылки нажмите на стрелку возле поля Закладкаи выберите в появившемся меню закладкуfio. ПолеURLпосле этого автоматически заполнится значением «#fio». Аналогичным образом организуем ссылки на остальные секции внутри страницы.

4. Создайте ссылки для возврата на начало страницы. Выделите слово «<<наверх» и превратите его в ссылку. В поле Закладкавместо выбора существующей закладки введите слово«top» - это служебная закладка, указывающая на начало текущей страницы.