Элементы привязки (якорь – anchor)
Веб-дизайн
А класс 16.11.2020
Тема: Понятие о структуре веб-сайта. Фреймы, теги и атрибуты фреймов. Использование ссылок в фреймах. Практическая работа №5. Разработка веб-сайтов на базе фреймов.
Задание. Изучите материал урока (текстовый файл и презентацию). Запишите краткий конспект урока. Выполните практические задания №1-2. Полученные файлы вышлите на почту учителю указав в теме Веб-дизайн_Дата урока за который выполняется задание_Пр№5_Ваша фамилия и имя_класс.
Адрес почты: distancia101@gmail.com
Видеоматериал к уроку:
Web-страницы и Web-сайты. Структура Web-страницы
https://youtu.be/vcrE0UAnwLI
! Техника безопасности при работе с ПК:
ü Будьте внимательны, осторожны.
ü Не трогайте провода.
ü Не касайтесь мониторов руками.
ü Не пытайтесь самостоятельно устранить неполадки в компьютере.
ü Монитор должен быть на расстоянии не менее 60 см от глаз.
ü Каждые 5 минут старайтесь отрывать взгляд от экрана.
ü Делайте перерывы в работе, физкультминутки.
Новый материал.
Организация HTML фреймов
HTML фреймы используются для разбивки окна браузера на несколько областей, каждая из которых представляет собой отдельный HTML-документ (фрейм или кадр).
Технология использования фреймов является устаревшей и не используется при создании современных сайтов, тем не менее мы знакомимся с этой технологией, так как ее актуальность сохранилась для создания локальных продуктов, которые не будут размещены в Интернет, например, для локальных учебных пособий, которые будут использоваться на десктопных компьютерах с достаточно большой шириной экрана.
|
|
|
HTML5 окончательно удалил инструмент фреймов, но, при этом элемент <iframe>, который позволяет вставлять одну страницу в другую, остался в новом стандарте. Это ему удалось по той причине, что он используется на веб-страницах для выполнения ряда интеграционных задач, таких как вставка в страницы окон YouTube, рекламных блоков и поисковых полей Google.
Можно предположить, что тег <iframe> вряд ли исчезнет из языка HTML, как уже было сказано, он используется для вставки окон YouTube, а на сегодня YouTube является одним из способов заработка и бизнеса, который требует также привлечения пользователей для просмотра видеороликов. Для привлечения пользователей и увеличения просмотров видеороликов развиты специальные сервисы, благодаря которым можно получить 1000 просмотров YouTube и создать значительный трафик на свой видеоканал.
Назначение HTML фреймов – это навигация (а не средство для разметки страницы). Идея фрейма заключается в том, чтобы разделить экран на несколько областей или окон. Это позволяет одновременно видеть больше одного документа и дает возможность на все время закрепить навигацию на экране.
|
|
|
При использовании простого дизайна с двумя HTML фреймами (рис.1) задействовано три документа:
· документ, описывающий фреймовую структуру,
· документ для левого фрейма,
· документ для правого фрейма.
Рис. 1. Простая фреймовая структура из двух фреймов
Фреймы содержатся в структуре <frameset> и </frameset>, замещающей в странице с фреймами структуру <body> и </body>, т.е. документ, описывающий фреймовую структур не имеет тегов <body> и </body>.
Допускается вложение фреймовых областей.
Атрибуты тега <FRAMESET>
| cols | Этот атрибут определяет количество и ширину столбцов фрейма. Ширину столбцов можно задать в пикселях или в процентах. cols=n – определяет столбец шириной в n пикселей. cols=n% – выделяет данному столбцу фрейма n%-долю ширины окна броузера. |
| rows | Этот атрибут определяет количество и высоту строк фрейма. Высоту строк можно задать в пикселях или в процентах. rows=n – определяет строку высотой в n пикселей. rows=n% – выделяет данной строке фрейма n%-долю высоты окна броузера. |
| frameborder | Этот атрибут определяет отображение рамок фреймовой структуры. frameborder=yes – отображается трехмерная рамка (значение по умолчанию). frameborder=no – рамка невидима |
Лучше определять строки и столбцы не в пикселах, а используя относительные значения. Символ звездочка (*) используется для указания того, что экран делится на пропорциональные части: COLS="*,*,*" – соответствует COLS="33%,33%,33%".
|
|
|
В значениях COLS (столбец), ROWS (строка) перечень должен быть заключен в кавычки. Если кавычки не используются, между значениями не должно быть пробелов.
Рассмотрим пример кода простой фреймовой структуры, изображенной на рис. 1.
Практическое задание 1
1. Создайте папку frames. Скопируйте в нее файлы с изображениями фонов fon3.jpg, fon8.jpg, fon10.jpg из папки html_css_4
2. Создайте файл frames_2.html написав код как в листинге на рисунке 2.
3. Создайте файл, как на рисунке 3. Сохраните документ под именем doc1.html
4. Создайте файл, как на рисунке 4. Сохраните документ под именем doc2.html
5. Запустите файл frames_2.html двойным щелчком. В окне браузера Internet Explorer web-страница должна иметь вид, как на рис. 1
Рисунок 2. Фреймовая структура из двух столбцов
Рисунок 3. Документ doc1.html
Рисунок 4.Документ doc2.html
На рис. 1 представлен вид этой HTML-страницы в браузере. Экран по вертикали разбивается на 2 фрейма. Левый HTML фрейм занимает 25% экрана и содержит страницу с названием doc1.html. Правый HTML фрейм займет 75% экрана и содержит страницу doc2.html.
|
|
|
Тег <FRAME>
Тег <frame> определяет отдельный фрейм. Это непарный тег. Тегов <frame> должно быть ровно столько, на сколько областей делится экран. У тега <frame> имеются следующие атрибуты:
| src | Этот атрибут указывает URL-адрес содержимого фрейма. |
| name | С помощью этого атрибута фрейму присваивается имя, которое можно использовать для ссылки на фрейм, обычно из других фреймов той же структуры. В гипертекстовой ссылке при этом используется атрибут target, который ссылается на имя фрейма. Имена фреймов могут состоять из букв и цифр. В качестве первого символа имени нельзя использовать символ подчеркивания (). |
| scrolling | Этот атрибут используется для управления полосами прокрутки фрейма, когда это важно для определения внешнего вида страницы. Его значения: scrolling=yes (установка полосы прокрутки) scrolling=no (отсутствие полосы прокрутки) scrolling=auto (значение по умолчанию) |
| noresize | Этот атрибут запрещает пользователю изменение размеров фреймов, чтобы предотвратить искажение дизайна страницы. |
Практическое задание 2
1. Откройте файл shablon.html.
2. Измените текст, как в листинге на рисунке 5.
3. Сохраните документ в папке frames под именем frames_3.html
4. В новом документе наберите текст, изображенный в листинге 6. Сохраните документ под именем doc3.html
5. Запустите файл frames_3.html двойным щелчком. В окне браузера Internet Explorer Web-страница должна иметь вид, как на рис. 7.
Обращаем Ваше внимание на то, что во фреймовой структуре количество открывающих <frameset> должно быть равно количеству закрывающих </frameset>
Рисунок 5. Фреймовая структура из трех фреймов
Рисунок 6. Документ doc3.html
Рисунок 7. Фреймовая структура из трех фреймов
2. Организация гиперссылок
Для организации гиперссылок используется тег <а>, у которого есть обязательные атрибуты, иначе гиперссылка работать не будет.
Рассмотрим пока только обязательный атрибут href.
Структура гиперссылки
Исходный якорь – это текст или изображение, по которому щелкает пользователь мышью, чтобы перейти к другому web-сайту или web-странице.
Конечный якорь – это адрес того сайта или страницы, который должен загрузиться после щелчка мышью по исходному якорю.
Гиперссылки можно встроить в любое место HTML – документа.
На рис. 9 приведен пример HTML-кода создания гиперссылки и вид в браузере страницы с этим кодом:
| Подробную информацию об услугах нашего агентства Вы можете получить <br /> <a href="inform.htm">здесь</a> | 
Рис. 9. Пример создания текстовой гиперссылки
|
В этом примере слово “здесь” является элементом привязки (или якорем – anchor), а часть href=”inform.htm” представляет ссылку на URL и означает, что при щелчке на элементе привязки должен быть загружен файл “inform.htm”, находящийся в том же адресе сети.
Элементы привязки (якорь – anchor)
Элемент привязки в ссылке может быть словом, группой слов или изображением. Существуют только два типа элементов привязки: текстовый и графический.
Текстовые ссылки браузер обычно выделяет цветом, отличным от цвета основного текста, подчеркиванием. Кроме того, курсор мыши на ссылке меняет свое изображение на указатель в виде руки.
Графические элементы привязки не подчеркиваются и не выделяются цветом, но могут быть обведены рамкой.
Рассмотрим пример организации графической гиперссылки (рис. 10):
| У нас в агентстве приветливые и компетентные диспетчеры <br /> <a href=”inform.htm”><img src=”ris.jpg”></a> | 
Рис. 10. Пример создания графической гиперссылки
|
В этом примере рисунок "ris.jpg" является графическим элементом привязки. Браузер выделяет его синей рамкой.
Виды адресов
Абсолютный адрес – это полный адрес в Internet.
- <а href="http://www.rambler.ru"> – удаленный переход;
- <а href="c:\temp\myfile.html"> – использование в ссылке абсолютного адреса на своем сервере (не используется).
Относительный адрес. Правила относительной адресации мы рассмотрели в теме 1. При написании адресов гиперссылок используются те же правила. Рекомендуется применение относительных адресов, поскольку при каждом перемещении каталога не приходится менять все ссылки.
- <а href="../folder/my.htm"> – переход на другой документ на своем сайте
Гиперссылки можно разделить на 3 категории:
1. Внешняя – ссылка на web-страницу, которая находится по другому адресу Internet (за пределами сайта). Для ее организации используется абсолютный адрес.
Пример: <а href="http://www.rambler.ru">
2. Внутренняя – ссылка на другую web-страницу внутри сайта. Для ее организации необходимо использовать относительный адрес.
Пример: <a href="../../folder_1/folder_2/mysite.htm">Текст гиперссылки</a>
3. Внутристраничная – ссылка на другую позицию внутри той же web-страницы. Например, в верхней части web-страницы можно поместить оглавление, а затем связать его пункты с последующими разделами этой же web-страницы или с конкретными разделами другой web-страницы внутри сайта.
Задание цвета гиперссылок
Принятые в Web по умолчанию цвета для гиперссылок: синий – для еще не посещенных гиперссылок, красный – для активизированных гиперссылок (в момент щелчка), фиолетовый – для уже посещенных.
Если используемые по умолчанию значения этих атрибутов явно не согласуются с дизайном Вашей страницы, то значения можно поменять. Для этого у тега <BODY> есть соответствующие атрибуты.
| link | Цвет гиперссылки (по умолчанию светло-голубой) |
| vlink | Цвет использованной гиперссылки (по умолчанию темно-фиолетовый) |
| alink | Цвет активизированной гиперссылки (в момент щелчка) |
Дата добавления: 2020-12-22; просмотров: 131; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!