Создать сайт с реквизитами и рекламой для предлагаемого варианта. Сайт должен быть многостраничным. Различные страницы сайта создавать разными способами:
с помощью языка гипертекстовой разметки HTML (две страницы);
с помощью Web-редактора – FrontPage или любого другого (две страницы);
средствами текстового процессора Word (две страницы – для одной из них использовать мастер создания Web-страниц, вторую создать как обычный текстовый документ).
Установить связи между страницами с помощью гиперссылок; на одной странице реализовать возможность перехода на закладки.
Страницы должны содержать рисунки, таблицы и другие объекты. Вставить гиперссылку на внешние ресурсы (документы или сайты сети Интернет).
Методические рекомендации по выполнению заданий
Технология создания Web-страниц
с помощью языка гипертекстовой разметки HTML
Сайт располагается в определенной папке Web-сервера. Необходимо, чтобы, начиная со стадии разработки, все элементы сайта размещались в одной папке или во вложенных в нее папках.
Web-страница является, по своей сути, специально размеченным текстовым документом определенной структуры.
Для ее создания и редактирования лучше использовать простейший текстовый редактор (например, Блокнот – стандартную программу Windows), который создает документ, не содержащий собственных управляющих символов форматирования текста.
Созданный документ сохранить с расширением .htm (или .html). Открытие этого файла осуществляется в браузере Microsoft Internet Explorer. Для просмотра и редактирования кода Web-страницы выполнить команду Вид/Просмотр HTML-кода (код будет открыт в окне программы Блокнот).
Для редактирования Web-страницы нужно внести изменения в код в программе Блокнот сохранить файл с кодом с помощью команды Файл/Сохранить перейти в окно браузера с открытой Web-страницей выполнить команду Вид/Обновить (кнопка <Обновить> на панели инструментов) для отображения внесенных изменений.
Структура документа HTML:
<HTML>
<HEAD>
<TITLE>
3aголовок
</TITLE>
</HEAD>
<BODY>
форматированный текст документа и все дополнительные элементы –картинки, ссылки и др.
</BODY>
</HTML>
Пример документа HTML:
<HTML>
<HEAD>
<TITLE>
Моя страничка
</TITLE>
</HEAD>
<BODY>
<CENTER>
<IMG SRC=logoBf.jpg Width=140 Height=100 >
<H1> Бобруйский филиал</Н1>
<BR>
<H2> Белорусского государственного экономического университета </Н2>
<HR>
<BR>
<IMG SRC=f:\Галерея\DsC00001.jpg Width=250 Height=400 >
</CENTER>
</BODY>
</HTML>
Документ HTML, приведенный в примере, при просмотре его в браузере Microsoft Internet Explorer будет иметь вид, изображенный на рис. 2.9.
Рис. 2.9. Вид Web-страницы в браузере Microsoft Internet Explorer
Самым важным элементом HTML-программы (HTML-документа) является ссылка. Ссылка позволяет передавать управление из одного HTML-документа в другой по контексту, т.е. в той точке документа, где есть необходимость по смыслу. Таким образом, HTML-документы читают не как беллетристику, а как справочники, от одной нужной темы к другой.
Технология создания Web-страниц
с помощью Web-редактора Microsoft FrontPage 2003
Для того, чтобы создать сайт на основе разработанных ранее Web-страниц, надо на панели Область задач выбрать команду Из имеющейся страницы. В появившемся диалоговом окне выбрать файлы нужных Web-страниц (рис. 2.10)
Оформить первую Web-страницу следует как стартовую: создать панель навигации (например, рис. 2.11). Для создания кнопок можно воспользоваться командой Вставка/Меняющаяся кнопка.
Для вставки других объектов на Web-страницу сайта рекомендуется предварительно подготовить их. Например, большие текстовые вставки надо оформить в виде файлов формата .txt или .doc. Фотографии и рисунки надо предварительно отсканировать, т.е. представить их в виде файлов формата .gif или .jpg. Для вставки объектов необходимо установить курсор в нужной позиции и выполнить команду Вставка/Рисунок (Файл).
Рис. 2.10. Создание сайта на основе имеющихся Web-страниц
в Web-редакторе FrontPage
Рис. 2.11. Пример стартовой страницы
Замечание: не все объекты в области просмотра редактора выглядят так, как в реальных Web-страницах, просматриваемых с помощью браузера. Динамические объекты не проявляют себя в динамике, например, бегущая надпись выглядит как статическая. Поэтому после вставок и вообще после редактирования Web-страницы ее нужно обязательно проверить с помощью браузера в автономном режиме его работы.
Страницу можно просматривать в следующих режимах:
конструктор – позволяет редактировать содержимое страницы;
с разделением – выводится 2 окна: в верхнем – содержимое страницы в HTML-коде, в нижнем – содержимое страницы в режиме конструктора;
код – позволяет редактировать содержимое страницы в HTML-коде;
просмотр – позволяет просматривать содержимое Web-страницы, как в браузере.
Вставка закладок и гиперссылок
Закладка – это специальная метка, на которую может ссылаться гиперссылка внутри одной Web-страницы. Для установки текстовой закладки надо создать ее текст, выделить его начало (собственно закладку) и исполнить команду Вставка/Закладка (рис. 2.12). Текстовые закладки подчеркиваются пунктирной синей линией.
Переход по гиперссылке на соответствующую закладку удобен для больших единых страниц, когда желательно по гиперссылке перейти к определенной, помеченной закладкой, части документа.
Рис. 2.12. Пример установки закладки
Переход по гиперссылке к любому файлу, к любой внешней Web-странице можно организовать, указав ее URL-адрес.
Для вставки гиперссылки надо выделить фразу и выполнить команду Вставка/Гиперссылка. Окно установки гиперссылки (рис. 2.13) позволяет указать адрес ссылки в Интернет или местоположение и название файла, на который идет ссылка. После этого выделенная фраза будет связана с соответствующим объектом и выделена подчеркнутой сплошной синей линией.
Помимо гипертекстовых ссылок возможна установка гипермедиа-ссылок. В этом случае, с файлом или страницей, на которую осуществляется ссылка, ассоциируется какой-либо графический объект, например, рисунок или объект ActiveX. Организация ссылки аналогична описанной – объект, служащий ссылкой, выделяется, и исполняется команда вставки гиперссылки. В появившемся окне нужно задать путь (адрес) для соответствующей ссылки.
При подготовке многостраничных сайтов рекомендуется вначале создать весь нужный набор текстовых HTML-файлов, графических и иных файлов, а затем организовать связь между ними с помощью гиперссылок.
Рис. 2.13. Пример установки гипертекстовой ссылки
После того, как страница создана, отредактирована, ее надо сохранить в виде HTML-файла на диске с использованием команды Файл/Сохранить или Файл/Сохранить как.
Технология создания Web-страниц
с помощью текстового процессора Word
При создании Web-страниц с помощью текстового процессора Word необходимо оформить страницу как обычный документ и сохранить его как гипертекст, т.е. выполнить команду Файл/Сохранить в формате HTML.
Создать страницу можно также с помощью Мастера Web-страниц, для этого необходимо выполнить команду Файл/Создать на панели Область задач выбрать команду Общие шаблоны/Web-страницы (рис. 2.14) Мастер Web-страниц ответить на вопросы Мастера.
Рис. 2.14. Шаблоны Web-страниц
В результате можно получить сайт (рис. 2.15). Далее следует заменить предлагаемые заголовки и содержание страницы; заменить гиперссылки «Вставьте гиперссылку» на необходимый по смыслу текст названия гиперссылки и указать, к какой странице установить переход при использовании данной гиперссылки командой Гиперссылка из контекстного меню.
Лишние гиперссылки следует удалить (выделить и нажать клавишу Delete).
Рис. 2.15. Сайт, построенный с помощью Мастера Web-страниц
Рекомендации по защите лабораторной работы
При защите лабораторной работы необходимо продемонстрировать сайт, созданный в процессе выполнения лабораторной работы; уметь ответить на следующие вопросы:
1. Что называется “Web-страницей”, “сайтом”?
2. Как можно просматривать Web-страницы?
3. Какие категории сайтов бывают?
4. Какие требования предъявляются к сайтам?
5. Назовите способы создания сайтов.
6. Какие Web-редакторы Вы знаете?
7. Что такое “гипертекст”?
8. Назовите основные понятия языка гипертекстовой разметки HTML.
9. Какую структуру имеет документ в формате HTML?
10. Как создать закладку в документе с помощью языка HTML и Web-редактора?
11. Как организовать гиперссылку с помощью языка HTML, Web-редактора и текстового редактора Word?