Презентация по информатики и ИКТ на тему Создание фреймов. Организация ссылок (11 класс)
Создание фреймов. Организация ссылок
Основные тэги. Структура web-страницы.<html><head><title> название страницы </title><meta content=“text/html; charset=windows-1251”http-equiv=“content-type”></head><body>содержание страницы</body></html>
ФреймыДля быстрой загрузки html-документа иногда его разделяют на части (2, 3 и так далее).Одна такая часть – фрейм (от англ. frame - рамка). В каждом фрейме отображается отдельная web-страница.html-документфайл структурыСтраница первого фреймаСтраница второго фрейма
Создание фрейма – для описания структуры документа используются теги:Контейнер <frameset> - Разбивает окно браузера на несколько фреймов;<frame> - Задание фрейма;Замечание:В отличие от обычной web-страницы, код html-страницы, содержащей информацию о разбивке документа на фреймы, не содержит элемента body!
Атрибуты: cols – количество и ширина колонок при разбиении (пиксели, %, *); rows – количество и ширина горизонтальных блоков при разбиении (пиксели, %, *); frameborder – устанавливает или убирает разделительную линию между фреймами (0 или 1); border – задает толщину разделительной полосы; bordercolor – задает цвет разделительной полосы.Пример:<frameset rows=«20%,80%" cols=«20%,*" frameborder="1" border=«3" bordercolor=”blue”>…</frameset>Парный тэг <frameset> - разбивка на фреймы
Атрибуты: name – имя фрейма; src – url документа, который будет загружаться во фрейме первоначально (обязателен); marginheight – задает верхнее и нижнее поля для фрейма (пиксели); marginwidth – задает левое и правое поля для фрейма (пиксели).Пример:<frame src=“фон1.html” name=“frame1” marginheight=“10” marginwidth=“10”>Одиночный тэг <frame> - определение фрейма
Структура документа, разбитого на 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>
Организация ссылок: гиперссылки и якоряОтличительная черта гипертекстовых документов – использование активных ссылок на другие документы (гиперссылки).гиперссылкиСсылкой может быть как текст, так и рисунок. При наведении мыши на ссылку курсор принимает форму руки, щелкнув мышью можно открыть в окне браузера документ, связанной с этой ссылкой.
Создание гиперссылок и якорей – Парный тэг <a> - от англ. anchor – якорь.Атрибуты href – url источника, на который указывает ссылка; target –указатель, где открывается документ, на который указывает ссылка: _blank (в новом окне), _self (в том же фрейме) и другие (например, в созданном на странице фрейме – frame1 (имя фрейма)); name – имя якоря, для создания закладок в документе.Пример:<a href=”страница.html” target=”_blank”>новая страница </a>
Создание гиперссылок и якорей – Парный тэг <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>…
Определение цвета гиперссылки – По умолчанию ссылки выделяются синим цветом и подчеркиваются. Посещенные ссылки выделяются фиолетовым цветом. Однако цвет ссылок можно самостоятельно менять в атрибутах тэга <body>: link – цвет обычной ссылки; alink – цвет активной ссылки; vlink – посещенной ссылки.Например:<body bgcolor="aqua" text="blue" vlink="brown" alink="magenta">
Использование карт-изображений для задания гиперссылок Замечание:В качестве основы для создания карты-изображения можно использовать любой графический объект. Для создания гиперссылок можно использовать карты-изображения, на которых выделены области – указатели гиперссылок. С каждой такой «областью» связывают переход на определенный объект (например, новую web-страницу, отображаемую в соседнем фрейме).
Использование карт-изображений для задания гиперссылок Замечание:В качестве основы для создания карты-изображения можно использовать любой графический объект. Для создания гиперссылок можно использовать карты-изображения, на которых выделены области – указатели гиперссылок. С каждой такой «областью» связывают переход на определенный объект (например, новую web-страницу, отображаемую в соседнем фрейме).
Использование карт-изображений для задания гиперссылок <map> - Создание карты изображений;<area> - Задание области на карте, которая будет являться ссылкой;Замечание:Элемент <area> содержится внутри элемента <map>. <image> - Вставка изображения (которое будет основой для карты изображений);для работы с картами-изображениями используются основные парные тэги:
Создание карт изображений (на стороне клиента)Атрибуты src - задает url-адрес графического файла ; usemap – определяет изображение как клиентскую карту изображений, обращается к имени карты (атрибут name элемента map).Пример:<img src="image1.jpg" align="right” alt=“ТПТТ” border =“1” usemap="#карта"> <map name=“карта”>… </map>Одиночный тэг <img> - Вставка изображения (формат gif, jpg, png) Парный тэг <map> - Создание карты изображенийАтрибут name - имя карты изображения.
Создание карт изображений (на стороне клиента)Атрибуты 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> - Задание области на карте для ссылки
Структура документа, содержащего карту изображения:<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>
Пример. Карта изображений и фреймы