Сохранить HTML-коды документов на вашем диске

Закрыть все приложения на рабочем столе.

ТЕМА 3: ПРИМЕНЕНИЕ ГРАФИКИ И ФРЕЙМОВ
ДЛЯ ОРГАНИЗАЦИИ WEB-ДОКУМЕНТОВ

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

Задание для самостоятельной работы

Подготовка документа для ввода текста.

1.1.Установить режим записи Web-документа и сохранить новый документ в личной папке под именем 15_1_ФИО в рабочей папке.

1.2.Записать в заголовок HTML-кода: HTML-графика и фреймы: ФИО.

1.3.Установить информацию об авторе и дате обновления документа, используя тэг ADDRESS.

1.4.Записать текст по центру первой строки "Страница <Фамилия Имя Отчество>".

1.5.Вызвать браузер и перейти на поле Web-документа.

Размещение графических элементов.

2.1.Установить горизонтальную линию. Для этого следует использовать:

<HR> - тэг горизонтальной линии (Horizontal Rule), который имеет следующие параметры:

- размер в пк. или в % от размера экрана,

ALIGN=LEFT½RIGHT½CENTER - выравнивание фрагмента линейки,

SIZE=n - толщина линейки (по умолчанию n=1),

COLOR=#RRGGBB½color - задает цвет линейки,

NOSHADE - линия в форме сплошной полосы.

Выполнить следующие упражнения:

a) На поле нового документа установить заголовок темы и провести 4-е линии: линия в 1 пиксел, линия толщиной в 10 пк. в правой половине экрана, линия в 14 пк. в виде сплошной полосы, сплошная линия толщиной в 20 пк. на левой половине экрана размером в 40%; под каждой линией записать ее параметры.

b) Отделить выполненное задание зеленой сплошной полосой в 200 пк., размещенной по середине экрана.

c) Перейти на окно браузера и проверить правильность подготовки нового документа.

2.2.Установить изображение на поле страницы. Для этого следует использовать следующую конструкцию:

<IMG SRC="URL"> где "URL" - адрес изображения с указанием имени файла,

например <IMG SRC=label.gif>, Тэг имеет следующие параметры:

HEIGHT=m - ширина и высота рисунка в пикселях (габариты рисунка). Можно указать только один параметр, тогда другой будет вычислен автоматически,

ALT="текст" - установка текста всплывающей подсказки.

ALIGN=TEXTTOP½ABSMIDDLE½ABSBOTTOM - размещение поля рисунка относительно текста: по верху, по середине, по низу - по умолчанию, как показано на рисунке.

ALIGN=LEFT½RIGHT½ALL - прерывает строчку и очищает левое, правое, оба поля соответственно.

Для очистки поля под рисунок следует использовать тэг <BR CLEAR=LEFT½RIGHT½ALL> -. Если размещение трудно заранее предугадать, то следует использовать значение ALL.

Выполнить следующее задание:

a) Установить товарный знак фирмы, а рядом с ним - имя фирмы и направление ее деятельности: по верхнему, краю, по середине, по нижнему краю (В качестве рисунка можно использовать рисунок, разработанный при изучении курса "Информационные офисные системы" или взятый из любой Web-страницы).

b) Отделить пример горизонтальной цветной линией.

c) Перейти на окно браузера и проверить правильность выполнения задания.

2.3.Установить ссылки в форме рисунков:

a) Запомнить адреса трех Web-страниц (например университета, факультета, кафедры).

b) Установить таблицу размером 2х3 без разделительных линий и разместить в ячейках первой строки краткое наименование Web-страниц.

c) На второй строке в соответствующие ячейки ввести рисунки рисунков соответствующих Web-страниц.

d) Связать изображения с гиперссылкой, используя конструкцию:
<A HREF="URL-адрес"> <IMG SRC="имя картинки"></A>.

2.4.Установить рамку вокруг изображения товарного знака (п.2.2.), используя следующую конструкцию: <IMG SRC=label.gif BORDER=n>.

a) Проверить правильность выполненной разметки.

Применение фреймов на Web-странице.

Для одновременного размещения на поле HTML-документа нескольких Web-страниц можно использовать конструкцию с несколькими окнами, которая определяется как "Фрейм-документ". Реализация этой конструкции требует определения числа и расположения на экране открывающихся окон с помощью парного тэга <FRAMESET>, в области действия которых с помощью непарного тэга <FRAME> определяют адрес устанавливаемой Web-страницы.

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

3.1.Разработать Фрейм-документ:

a) Открыть новый HTML-документ, в котором заменить тэги <BODY> на тэги <FRAMESET>.

<FRAMESET> тело документа </FRAMESET> - контейнер содержательной части фрейм-документа который может иметь следующие параметры:

ROWS=pixels½persent - определяет число строк и их размер в пикселях или в % от размера экрана, что позволяет разделить страницу на полосы,

COLS= pixels½persent - определяет число столбцов и их размер в пикселях или в % от размера экрана, что разделяет строки окна на отдельные окна (фреймы). Если фрейм занимает всю полосу, другая строка разделена на два фрейма, то указывают соотношение - 100%,0%.

<FRAME>-установка содержимого фрейма (окна); тэг может использовать следующие параметры:

MARGINHEOGHT=n - пустое пространство над и под фреймом,

MARGIN- пустое пространство слева и справа от фрейма,

NAME="name" - имя фрейма для ссылки из других документов, имена фреймов должны начинаться с латинской буквы или цифры.

NORESIZE - запрет изменения размеров фрейма,

SCROLLING=YES½NO½AUTO - управление появлением линеек прокрутки, в соответствующих окнах,

SRC="URL" - адрес файла, загружаемого в окно,

FRAMEBORDER - ширина разделительной линии между фреймами.

Выполнить следующие учебные задания:

b) Сформировать 4-х оконную Web-страницу, разместив на ней 4-е различные Web-страницы, используя следующую конструкцию:

</FRAMESET>

<FRAME SRC="Label.gif.htm”> - рисунок товарного знака фирмы

1
2	3

</FRAMESET>

3.2.Подготовить окно для личной страницы:

a) Открыть новый документ и установить на его поле три фрейма: первый во всю ширину листа (1), второй (2) и третий (3) - рядом друг с другом под первым,

b) На поле первого фрейма установить логотип Вашей фирмы,[3] на поле второго ‑ список продуктов фирмы, а н

c) а поле третьего ‑ выбранный графический файл.

d) Перейти на окно браузера и проверить правильность подготовки нового документа.

Ссылка на ресурсы Интернета.

1. Установить на поле третьего окна (пример 3.2) ссылку на электронную почту, используя следующую конструкцию: <A HREF="mailto:адрес почты">Адрес для отзывов</A>.

2. Перейти на окно браузера, нажать на кнопку "Обновить". Послать электронное сообщение.

Дата добавления: 2018-04-05; просмотров: 224; Мы поможем в написании вашей работы!

Поделиться с друзьями:

⇐ Предыдущая 1 2 345 6 7 8 9 10 Следующая ⇒

Мы поможем в написании ваших работ!