Рабочие листы
к вашим урокам
Скачать
1 слайд
Создание фреймов. Организация ссылок
2 слайд
Основные тэги. Структура web-страницы.
<html>
<head>
<title> название страницы </title>
<meta content=“text/html; charset=windows-1251”
http-equiv=“content-type”>
</head>
<body>
содержание страницы
</body>
</html>
3 слайд
Фреймы
Для быстрой загрузки html-документа иногда его разделяют на части (2, 3 и так далее).
Одна такая часть – фрейм (от англ. frame - рамка). В каждом фрейме отображается отдельная web-страница.
html-документ
файл структуры
Страница первого фрейма
Страница второго фрейма
4 слайд
Создание фрейма –
для описания структуры документа используются теги:
Контейнер <frameset>
- Разбивает окно браузера на несколько фреймов;
<frame>
- Задание фрейма;
Замечание:
В отличие от обычной web-страницы, код html-страницы, содержащей информацию о разбивке документа на фреймы, не содержит элемента body!
5 слайд
Атрибуты:
cols – количество и ширина колонок при разбиении (пиксели, %, *);
rows – количество и ширина горизонтальных блоков при разбиении (пиксели, %, *);
frameborder – устанавливает или убирает разделительную линию между фреймами (0 или 1);
border – задает толщину разделительной полосы;
bordercolor – задает цвет разделительной полосы.
Пример:
<frameset rows=«20%,80%" cols=«20%,*" frameborder="1" border=«3" bordercolor=”blue”>…</frameset>
Парный тэг <frameset> - разбивка на фреймы
6 слайд
Атрибуты:
name – имя фрейма;
src – url документа, который будет загружаться во фрейме первоначально (обязателен);
marginheight – задает верхнее и нижнее поля для фрейма (пиксели);
marginwidth – задает левое и правое поля для фрейма (пиксели).
Пример:
<frame src=“фон1.html” name=“frame1” marginheight=“10” marginwidth=“10”>
Одиночный тэг <frame> - определение фрейма
7 слайд
Структура документа, разбитого на 4 фрейма:
<frameset rows="30%,*" cols="60%,40%" frameborder="1" border="5" bordercolor=”blue”>
<frame src="фон1.html" name="frame1" >
<frame src="фон2.html" name="frame2" marginheight="10" marginwidth="30">
<frame src="фон3.html" name="frame3" marginheight="10" marginwidth="20">
<frame src="фон4.html" name="frame4 “ marginheight="20"
marginwidth="20">
</frameset>
8 слайд
Организация ссылок: гиперссылки и якоря
Отличительная черта гипертекстовых документов – использование активных ссылок на другие документы (гиперссылки).
гиперссылки
Ссылкой может быть как текст, так и рисунок.
При наведении мыши на ссылку курсор принимает форму руки, щелкнув мышью можно открыть в окне браузера документ, связанной с этой ссылкой.
9 слайд
Создание гиперссылок и якорей –
Парный тэг <a>
- от англ. anchor – якорь.
Атрибуты href – url источника, на который указывает ссылка;
target –указатель, где открывается документ, на который указывает ссылка: _blank (в новом окне), _self (в том же фрейме) и другие (например, в созданном на странице фрейме – frame1 (имя фрейма));
name – имя якоря, для создания закладок в документе.
Пример:
<a href=”страница.html” target=”_blank”>новая страница </a>
10 слайд
Создание гиперссылок и якорей –
Парный тэг <a>
- от англ. anchor – якорь.
атрибут href
<a href=“…”> текст ссылки </a>
Гиперссылка
(переход на другую страницу)
Закладка
(работа с одной страницей)
атрибут target
атрибут name
<a href=”папка/страница1.html” target=”frame1 ”><img src=“рисунок.png”> </a>
<a href=”#пример1”>смотрите пример1</a> …
<a name=”пример1”> пример1</a>…
11 слайд
Определение цвета гиперссылки –
По умолчанию ссылки выделяются синим цветом и подчеркиваются. Посещенные ссылки выделяются фиолетовым цветом. Однако цвет ссылок можно самостоятельно менять в атрибутах тэга <body>:
link – цвет обычной ссылки;
alink – цвет активной ссылки;
vlink – посещенной ссылки.
Например:
<body bgcolor="aqua" text="blue" vlink="brown" alink="magenta">
12 слайд
Использование карт-изображений для задания гиперссылок
Замечание:
В качестве основы для создания карты-изображения можно использовать любой графический объект.
Для создания гиперссылок можно использовать карты-изображения, на которых выделены области – указатели гиперссылок. С каждой такой «областью» связывают переход на определенный объект (например, новую web-страницу, отображаемую в соседнем фрейме).
13 слайд
Использование карт-изображений для задания гиперссылок
Замечание:
В качестве основы для создания карты-изображения можно использовать любой графический объект.
Для создания гиперссылок можно использовать карты-изображения, на которых выделены области – указатели гиперссылок. С каждой такой «областью» связывают переход на определенный объект (например, новую web-страницу, отображаемую в соседнем фрейме).
14 слайд
Использование карт-изображений для задания гиперссылок
<map>
- Создание карты изображений;
<area>
- Задание области на карте, которая будет являться ссылкой;
Замечание:
Элемент <area> содержится внутри элемента <map>.
<image>
- Вставка изображения (которое будет основой для карты изображений);
для работы с картами-изображениями используются основные парные тэги:
15 слайд
Создание карт изображений (на стороне клиента)
Атрибуты
src - задает url-адрес графического файла ;
usemap – определяет изображение как клиентскую карту изображений, обращается к имени карты (атрибут name элемента map).
Пример:
<img src="image1.jpg" align="right” alt=“ТПТТ” border =“1” usemap="#карта"> <map name=“карта”>… </map>
Одиночный тэг <img>
- Вставка изображения (формат gif, jpg, png)
Парный тэг <map>
- Создание карты изображений
Атрибут
name - имя карты изображения.
16 слайд
Создание карт изображений (на стороне клиента)
Атрибуты
alt - альтернативный текст для области;
shape – задает форму области: rect (прямоугольник), circ (окружность), poly (многоугольник);
coords – задает координаты области (пиксели):
для shape=”rect” cords=”left,top,right,bottom”;
для shape=”circ” cords=”centerX, centerY, radius”;
для shape=”poly” cords=”x1,y1,x2,y2,…,xn,yn”;
href – задает гиперссылку для данной области;
target – указатель, где открывается документ.
Парный тэг <area>
- Задание области на карте для ссылки
17 слайд
Структура документа, содержащего карту изображения:
<img src="изображение.png" usemap="#карта">
<map name="карта">
<area alt="о Москве" shape="poly" coords=“400,450,500,450,400,350,350,350" href="Москва.html"
target="frame2">
<area alt="о Питере" shape="circ" coords="100,100,40" href=“Питер.html" target="frame3">
</map>
18 слайд
Пример. Карта изображений и фреймы
Рабочие листы
к вашим урокам
Скачать
Данная презентация предназначена для сопровождения лекционной теоретической части по теме «Фреймы. Организация ссылок» раздела «Язык разметки гипертекста HTML» (так же может быть использована для обобщения уже имеющихся знаний по указанной теме).
В презентации представлен базовый материал, необходимый для понимания ключевых понятий темы: фрейм, ссылка, якорь, карта-изображение. Здесь же описаны основные тэги и их атрибуты для создания фреймов и организации гиперссылок в HTML-документах, приведены примеры использования соответствующих элементов.
6 656 205 материалов в базе
Настоящий материал опубликован пользователем Смирнова Лилия Ивановна. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт
Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.
Удалить материал
Ваша скидка на курсы
40%
Курс профессиональной переподготовки
300/600 ч.
Курс профессиональной переподготовки
500/1000 ч.
Курс профессиональной переподготовки
300 ч. — 1200 ч.
Мини-курс
6 ч.
Мини-курс
6 ч.
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.