Добавить материал и получить бесплатное свидетельство о публикации в СМИ
Эл. №ФС77-60625 от 20.01.2015
Инфоурок / Информатика / Презентации / Презентация по информатики и ИКТ на тему "Создание фреймов. Организация ссылок" (11 класс)

Презентация по информатики и ИКТ на тему "Создание фреймов. Организация ссылок" (11 класс)

  • Информатика
Создание фреймов. Организация ссылок
Основные тэги. Структура web-страницы.    название страницы     содержание ст...
Фреймы Для быстрой загрузки html-документа иногда его разделяют на части (2,...
Создание фрейма – для описания структуры документа используются теги: Контейн...
Атрибуты: 	cols – количество и ширина колонок при разбиении 	(пиксели, %, *);...
Атрибуты: 	name – имя фрейма; 	src – url документа, который будет загружаться...
Структура документа, разбитого на 4 фрейма:
Организация ссылок: гиперссылки и якоря Отличительная черта гипертекстовых до...
Создание гиперссылок и якорей – Парный тэг  - от англ. anchor – якорь. Атрибу...
Создание гиперссылок и якорей – Парный тэг  - от англ. anchor – якорь. атрибу...
Определение цвета гиперссылки – По умолчанию ссылки выделяются синим цветом и...
Использование карт-изображений для задания гиперссылок Замечание: В качестве...
Использование карт-изображений для задания гиперссылок Замечание: В качестве...
Использование карт-изображений для задания гиперссылок  - Создание карты изоб...
Создание карт изображений (на стороне клиента) Атрибуты 	src - задает url-адр...
Создание карт изображений (на стороне клиента) Атрибуты 	alt - альтернативный...
Структура документа, содержащего карту изображения:
Пример. Карта изображений и фреймы
1 из 18

Описание презентации по отдельным слайдам:

№ слайда 1 Создание фреймов. Организация ссылок
Описание слайда:

Создание фреймов. Организация ссылок

№ слайда 2 Основные тэги. Структура web-страницы.    название страницы     содержание ст
Описание слайда:

Основные тэги. Структура web-страницы. <html> <head> <title> название страницы </title> <meta content=“text/html; charset=windows-1251” http-equiv=“content-type”> </head> <body> содержание страницы </body> </html>

№ слайда 3 Фреймы Для быстрой загрузки html-документа иногда его разделяют на части (2,
Описание слайда:

Фреймы Для быстрой загрузки html-документа иногда его разделяют на части (2, 3 и так далее). Одна такая часть – фрейм (от англ. frame - рамка). В каждом фрейме отображается отдельная web-страница. Страница второго фрейма html-документ

№ слайда 4 Создание фрейма – для описания структуры документа используются теги: Контейн
Описание слайда:

Создание фрейма – для описания структуры документа используются теги: Контейнер <frameset> - Разбивает окно браузера на несколько фреймов; <frame> - Задание фрейма; Замечание: В отличие от обычной web-страницы, код html-страницы, содержащей информацию о разбивке документа на фреймы, не содержит элемента body!

№ слайда 5 Атрибуты: 	cols – количество и ширина колонок при разбиении 	(пиксели, %, *);
Описание слайда:

Атрибуты: 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 документа, который будет загружаться
Описание слайда:

Атрибуты: name – имя фрейма; src – url документа, который будет загружаться во фрейме первоначально (обязателен); marginheight – задает верхнее и нижнее поля для фрейма (пиксели); marginwidth – задает левое и правое поля для фрейма (пиксели). Пример: <frame src=“фон1.html” name=“frame1” marginheight=“10” marginwidth=“10”> Одиночный тэг <frame> - определение фрейма

№ слайда 7 Структура документа, разбитого на 4 фрейма:
Описание слайда:

Структура документа, разбитого на 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 Создание гиперссылок и якорей – Парный тэг  - от англ. anchor – якорь. Атрибу
Описание слайда:

Создание гиперссылок и якорей – Парный тэг <a> - от англ. anchor – якорь. Атрибуты href – url источника, на который указывает ссылка; target –указатель, где открывается документ, на который указывает ссылка: _blank (в новом окне), _self (в том же фрейме) и другие (например, в созданном на странице фрейме – frame1 (имя фрейма)); name – имя якоря, для создания закладок в документе. Пример: <a href=”страница.html” target=”_blank”>новая страница </a>

№ слайда 10 Создание гиперссылок и якорей – Парный тэг  - от англ. anchor – якорь. атрибу
Описание слайда:

Создание гиперссылок и якорей – Парный тэг <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-адр
Описание слайда:

Создание карт изображений (на стороне клиента) Атрибуты 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 - альтернативный
Описание слайда:

Создание карт изображений (на стороне клиента) Атрибуты 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-документах, приведены примеры использования соответствующих элементов.

Автор
Дата добавления 04.05.2015
Раздел Информатика
Подраздел Презентации
Просмотров499
Номер материала 264070
Получить свидетельство о публикации

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