Создание Web-страницы

Лабораторная работа №2  «Создание Web-страницы»

Цель лабораторной работы – знакомство с базовыми средствами  языка HTML и создание Web-страницы с использованием средств  HTML-редактора MS FrontPage.

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

В процессе выполнения работы следует:

1. Выполнить все перечисленные действия по созданию Web-страницы.
2. Получить вид страницы, идентичный приложенному образцу.
3. Проанализировать HTML-код документа, сопоставить его с внешним видом страницы и понять, какими средствами языка достигается тот или иной внешний эффект.

Общая информация:

- опции меню относятся к MS FrontPage 4.0 (для Windows 2000); FrontPage для Windows XP может иметь небольшие различия;

- в тексте задания используются следующие обозначения: *Текст – нажать кнопку «Текст», #Текст – выбрать ярлык «Текст», CR  - нажать правую кнопку мыши; для отделения различных действий друг от друга используется символ “\”;

- для некоторых пунктов задания указаны тэги, которые будут вставлены в гипертекст после выполнения соответствующего действия;

- свойства любого объекта гипертекста (линия, таблица, рисунок и т.д.) можно узнать, установив курсор на объект и нажав CR;

- после выполнения каждого пункта задания целесообразно посмотреть, как изменился HTML-код страницы в результате соответствующего  действия.

Этапы задания

1. Найти программу MS FrontPage  в Пуск\Все программы, создать ярлык программы и перетащить его на Рабочий стол.
2. Запустить программу, создать новый HTML-файл, выбрав в коллекции предопределенных форматов страниц просто пустую страницу (Файл\Создать\Обычная страница).
3. Ввести текст «Язык HTML» и сохранить файл на диске.
4. Рассмотреть формируемый документ различными способами. Каждый документ (Web-страница) может отображаться тремя способами (ярлыки в нижней части экрана): Обычный – визуальный просмотр и редактирование (основной режим FrontPage), HTML-код – просмотр и редактирование HTML-кода, Просмотр –  только просмотр страницы (почти как в Internet Explorer).
5. Определить тип заголовка страницы как «Заголовок 2» (тэг <H2>, выбрав «Заголовок 2» в списке типов заголовков (стилей) документа в левой верхней части экрана (под опцией  меню Файл).
6. Задать общие свойства формируемой страницы (Файл\Свойства…):

- заголовок  документа в окне обозревателя (…\#Общие\Название);

- цвет фона страницы (…#Фон\Цвета\Фон);

- фоновый рисунок или обои, цвета гиперссылок, поля страницы и т.д. (по желанию).

1. Для перехода на новую строку с пропуском строки (тэг <P>) нажать Enter, просто для перехода к новой строке, когда абзац остается тем же самым   (тэг <BR>) -  нажать Shift+Enter.
2. Вставить на страницу таблицу 2х2 (тэг <TABLE>), для чего выбрать Таблица\Вставить\Таблица\Число строк=2, число столбцов=2. После вставки таблицы границы ячеек можно передвигать мышью.
3. Изменить структуру таблицы, для чего объединить две левые ячейки - выделить мышью эти ячейки и выбрать Таблица\Объединить ячейки; для разделения ячеек следует выбирать Таблица\Разбить ячейки.
4. Поскольку таблица используется как средство организации пространства страницы,  сделать границы ячеек невидимыми (CR в любой ячейке таблицы\Свойства таблицы\Границы\Размер=0).  
5. В левую часть таблицы вставить какой-нибудь рисунок – файл с расширением .gif, .jpg, .wmf и т.д.  (тэг <IMG>, Вставка\Рисунок\Из файла); чтобы не искать рисунки по компьютеру, можно вставить рисунок из ClipArt - галереи рисунков FrontPage, например (Вставка\Рисунок\ClipArt\ «Любой раздел» \Выбрать клип\.*Вставить клип).
6. Чтобы менять характеристики оформления текстов, использовать кнопки  панели инструментов «Форматирование», абсолютно аналогичные  кнопкам MS Word (выделить полужирным, курсивом, подчеркнуть, изменить стиль, размер, и цвет шрифта, определить выравнивание, отступ абзаца, сделать вокруг текста цветную рамку и т.д.).  Например чтобы изменить заголовки столбцов таблицы, следует выделить ячейки мышью и выбрать  кнопки «Полужирный» и «Выравнивание по центру».
7. Изменить параметры текста в правой верхней ячейке таблицы (стиль – полужирный+курсив, цвет  - красный), для чего выбрать Формат\Шрифт (тэг <FONT>).
8. Сформировать в правой нижней ячейке таблицы маркированный список (тэг <UL>), для чего выбрать пиктограмму на панели инструментов форматирования или Формат\Список\Маркированный. Кроме того, могут использоваться нумерованный список (тэг <OL>, выбрать соответствующую пиктограмму или Формат\Список\Нумерованный),  список определений (тэг <DL>, выбрать Определенный термин  в списке стилей в левой верхней части экрана, нажать Enter), многоуровневые списки и т.д.
9. Аналогично пп. 5-6,  вставить таблицу 4х2 «Возможности HTML»,  ввести в таблицу необходимые тексты.
10. Изменить свойства таблицы, нажав CR\Свойства таблицы: выравнивание по ширине экрана (…\Выравнивание=по центру), ширину таблицы в % от ширины экрана (…\Задать ширину=70%), цвет таблицы (…\Фон\Цвет= «по желанию»).
11. Ввести тексты, посвященные формам и таблицам стилей; для двух заголовков «Формы» и «Каскадные таблицы стилей» задать тип заголовков  «Заголовок 4» (тэг <H4>).
12. Для иллюстрации возможностей CSS задать единый стиль заголовков типа H4  в отдельном текстовом  файле MyCss.css; строка  в файле «h4 {color: green; font-style: italic}» означает, что все заголовки типа H4  в документе будут зеленого цвета и набраны курсивом. Следует помнить, что  задание стилей является зависимым от регистра.
13. Вставить таблицу стилей в  разрабатываемую страницу (тэг <LOCATION>, Формат\Связь с таблицей стилей\*Добавить\Выбрать имя файла со стилями = MyCss.css).
14. Использование так называемых классов (атрибут CLASS любого тэга) позволяет задавать стили не для всех строк документа, снабженных некоторым тэгом, а лишь для тэгов заданного класса:

- выбрать ярлык HTML-код в нижней части экрана  и получить на экране документ в формате HTML;

- тэг <H4> для заголовка «Каскадные таблицы стилей (CSS)» заменить на
<H4 CLASS="HeadBlue">, где «HeadBlue» - имя класса;

- внутри контейнера <HEAD> …</HEAD>  в начальной части документа вставить следующий текст: