Гипертекстовые технологии: Создание Web-сайтов учебного назначения

2.1. Текстовый редактор Word (создание сайта)

Цель работы: показать возможность создания веб-документов средствами MS Microsoft Word.

Порядок выполнения работы

Используя файл «исходный текст» и предлагающиеся к нему рисунки оформить «сайт МаГУ» (см. рисунок) в текстовом редакторе Word.

Для этого включить режим «Веб-документ».

Для разделения зон текстов использовать таблицу (без границ) размером 3х6 (столбец с баннерами не использовать!). Количество строк в каждом столбце свое: в первом – одна ячейка; во втором – 5-6 ячеек; в третьем столбце – 4 ячейки.

Результат работы сохранить в своей папке под именем «мой МаГУ»

Контрольные вопросы

Используемые ресурсы

1. Магнитогорский государственный университет www.masu.ru

2.2. Текстовый редактор Word (создание нелинейных документов)

Цель работы: показать возможности нелинейных переходов по документу

Порядок выполнения работы

1. Возьмите файл «исходный текст».

2. Скопируйте в начало документа все названия салатов из этого документа.

3. Оформите тексты салатов с использованием различных шрифтов, их цветов и размеров.

4. Каждый рецепт салата отформатируйте на две колонки (см рисунок).

5. Заголовок каждого рецепта оформите как закладка, присвоив ей имя (Вставка-Закладка-имя)

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

7. Оглавление так же пометьте закладкой.

8. Создать гиперссылки для перехода по документу из оглавления к рецепту и обратно (Вставка-Гиперссылка).

9. Сохраните файл и покажите преподавателю.

Контрольные вопросы

Используемые ресурсы

2.3. FrontPage (сайт с фреймами)

Цель работы: познакомить с программным средством Microsoft FrontPage.

Знакомство с интерфейсом

При запуске Microsoft FrontPage открывается окно Редактора.

1– Строка Меню

2, 3 – Панели инструментов Стандартная и Форматирование

4 – Панель Вид

* – при запуске панели Вид по умолчанию открывается редактор страниц

5 – Рабочее поле

6 – Режимы:

• обычный,

• HTML,

• просмотр

7 – Строка состояния

8 – Панель Область задач

Порядок выполнения работы

1. Скопируйте себе в папку папку «Урок географии_реки). Познакомьтесь с содержимым этих папок.

Мы будем создавать сайт темы «Урок географии. Реки», используя фреймы. У нас получиться одна главная страница, содержащая ссылки на все остальные (обычные страницы – 7 шт).

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

• Горные реки.

• Пороги.

• Речная система.

• Равнинные реки.

• Режим питания реки.

• Хозяйственное использование.

• Словарь.

При сохранении файла его имя (желательно) должно быть названо латинскими буквами: например, gornie.htm или porogi.htm

Примечание:Расширение (.htm)файла писать не надо, т.к. оно будет установлено автоматически.

3. Работу со страницей начинаем с установки ПАРАМЕТРОВ СТРАНИЦЫ. Для этого щелкните правой кнопкой мыши по полю страницы и выберите – «Свойства страницы». Заполним закладки: Язык и Форматирование. На закладке Язык установите: Пометить текущий документ, указав: русский; Сохранить документ, используя: кириллица; и Повторить загрузку текущего документа, используя: автоматический выбор. (Без этой операции в уже созданных страницах русский текст может отображаться неправильно!)

Перейдите на закладку Форматирование. Поставьте галочку напротив «Фоновый рисунок» и через кнопку «Обзор» выберите фоновый рисунок для Вашей страницы.

Важно!! Все используемы вами рисунки должны лежать в папке Урок георграфии_реки – Фоновые рисунки.

4. Напишите заголовок страницы, например ПОРОГИ. На странице будет размещаться текст и фотографии. Для простоты оформления удобнее использовать для структуризации данных таблицу. Таблица – вставить таблицу. Задайте количество столбцов и строк, а также в части Границы отметься галочкой «Свернуть границу таблицы».

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

6. Сохраните созданную страницу в корневой папке Урок георгафии_реки под именем porogi.html.

7. Аналогично создайте остальные 6 страниц.

8. Создание страницы с фреймовой структурой. Для этого выполните по порядку следующие действия:

• В меню Файл–Создать –Страница или веб-узел….

• В появившейся панели Область задач «Создание веб-страницы или узла» найдите рубрику Создание с помощью шаблона и в ней выберите пункт Шаблоны страниц.

• В открывшемся окне Шаблоны страниц выберите закладку Страница рамок и выберите подходящую в данном случае форму Объявления и оглавление.

• В двух остальных разделах принимаем данные, стоящие по умолчанию: Общие – Обычная страница; Таблицы стилей – Обычная таблица стилей.

• Щелкните Ok.

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

Во всех трех фреймах выбираем создать страницу. Установить свойства страницы (ее параметры и фоновый рисунок – см п.3).

В верхнем фрейме напишем заголовок: Урок географии. Реки. Выбрав соответствующие размер и цвет шрифта.

В левом фрейме будет оглавление:

Главная страница

Горные реки

Пороги

Речная система

Равнинные реки

Режим питания реки

Хозяйственное использование

Словарь

Кроме описанного способа перечислить пункты в будущем оглавлении можно с помощью меняющихся активных кнопок:

Создание активной кнопки

Вставьте 8 активных кнопок с названием тем разделов.

1. Установите форматирование по центру (кнопка на панели инструментов).

2. В меню Вставка выберите Веб-компонент…, а затем — Меняющаяся кнопка.

3. Нажмите кнопку Готово.

4. В открывшемся окне Свойства Меняющейся кнопки в поле Текст кнопки введите текст «Главная страница».

5. Щелкните OK в окне Свойства Меняющейся кнопки.

6. Выделив готовую кнопку, отрегулируйте ее величину (чтобы уместился текст на кнопке), протягивая мышкой за края рамки кнопки.

В главном фрейме разместите материалы (тексты и фотографии) из папки Главная.

P.S. Если содержание фрейма базируется на основе уже ранее созданной страницы, то речь идет уже не о создании, а о вставке ранее созданной страницы в структуру фрейма.

9. Для сохранения полученных фреймов в единый файл выполните следующие действия:

1. Сохраните работу: меню Файл - Сохранить как …

2. В открывшемся окне Сохранить как…

• в раскрывающемся списке Папка укажите путь к вашей папке,

• в поле Имя файла введите index.

3. Щелкните Сохранить.

Примечание: Обратите внимание на то, что справа будет выделено окно, объединяющее все три фрейма, т. е. вы сохраняете под именем index.htm именно структуру страницы, а не содержание отдельных фреймов.

4. Откроется еще одно окносохранения, в котором будет выделен верхний фрейм. Введите имя верхнего фрейма — up.html.

5. Щелкните Сохранить.

6. Аналогично сохраните левый фрейм под именем left.html, а главный – под именем main.html.

10. После того как создана фреймовая страница необходимо прикрепить к меняющимся кнопкам или просто словам гиперссылки на соответствующие страницы.

1. Щелкните кнопку Обзор… и в открывшемся окне Выбор гиперссылки для меняющейся кнопки выберите файл main.html (для главной страницы).

2. Щелкните кнопку Выбор рамки… и в открывшемся окне Конечная рамка щелкните в поле главного фрейма.

3. Щелкните OK в окне Конечная рамка.

4. Щелкните OK в окне Выбор гиперссылки для меняющейся кнопки.

11. Просмотр результатов работы

Просмотрите работу через режим Просмотра. Некоторые эффекты в просмотре редактора FrontPageне просматриваются, поэтому окончательно работу следует просмотреть в браузере InternetExplorer (меню Файл – Открыть…- Обзор…).

Контрольные вопросы

Используемые ресурсы