Уроки HTML и CSS
Скачать материалы к учебному курсу:
Скачать Notepad++ Portable
Скачать папку CD для изучения курса «Уроки HTML и CSS» (136 Мб)
Урок 4. HTML фреймы и гиперссылки
1. Организация 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
- Создайте папку frames. Скопируйте в нее файлы с изображениями фонов fon3.jpg, fon8.jpg, fon10.jpg из папки html_css_4
- Откройте файл shablon.html
- Измените код как в листинге на рисунке 2. Сохраните документ под именем frames_2.html
- Создайте файл, как на рисунке 3. Сохраните документ под именем doc1.html
- Создайте файл, как на рисунке 4. Сохраните документ под именем doc2.html
- Запустите файл 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
- Откройте файл shablon.html.
- Измените текст, как в листинге на рисунке 5.
- Сохраните документ в папке frames под именем frames_3.html
- В новом документе наберите текст, изображенный в листинге 6. Сохраните документ под именем doc3.html
- Запустите файл frames_3.html двойным щелчком. В окне браузера Internet Explorer Web-страница должна иметь вид, как на рис. 7.
Обращаем Ваше внимание на то, что во фреймовой структуре количество открывающих <frameset> должно быть равно количеству закрывающих </frameset>
Рисунок 5. Фреймовая структура из трех фреймов
Рисунок 6. Документ doc3.html
Рисунок 7. Фреймовая структура из трех фреймов
Контрольное задание
- Создайте файл с фреймовой структурой нашего сайта MyHouse.ru, состоящей из трех HTML фреймов (рис. 8). Сохраните его в папке public_html под именем index.html
- Правому фрейму присвойте имя main.
- В верхнем фрейме расположите бегущую строку (файл shapka.html)
- В левом фрейме расположите список проектов (файл menu.html).
- В правом фрейме – файл main.html.
Рисунок 8. Фреймовая структура сайта MyHouse.ru
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-страницы внутри сайта.
Практическое задание 3
- Откройте раздел «Организация гиперссылок» в файле справочника Sprav_html.doc. Ознакомьтесь с атрибутами тега <a>. Будьте готовы ответить на вопросы по правилам задания значений этих атрибутов.
- В файле menu.html для пункта «Проекты таунхаусов и блокированных домов», сделайте гиперссылку, целевым адресом которой является web-страница townhouse.html таким образом, чтобы web-страница townhouse.html грузилась в правый фрейм. Напомним, для того, чтобы ссылка грузила документ в нужный фрейм в теге <a> необходимо указать атрибут target, который содержит имя фрейма, куда должен быть загружен документ. Например, <a href="townhouse.html" target="main">. Результат на рис. 11.
Рис. 11.
Практическое задание 4
1. В папке public_html создайте папку project, а внутри нее папку img_d_152_1d.
2. Оформите web-страницу о проекте d-152-1d, используя материалы (тексты и фотографии) из папки projects/d-152-1d. Для оформления web-страницы должны быть использованы стили в таблице стилей и форматирование средствами атрибутов тегов.
3. Все материалы должны быть использованы. В результате на web-странице у Вас должны быть следующие блоки: Заголовок, Аннотация, Материалы, Цена за проект, Планы, Фасады
4. Сохраните web-страницу под именем projekt_d-152-1d.html в папке projects. Примерный результат на рис. 12.
Рис. 12. Web-страница projekt_d-152-1d.html.
5. На web-странице townhouse.html оформите изображение проекта D-152-1D и фразу «Проект D-152-1D» как гиперссылки на страницу projekt_d-152-1d.html, на которой содержится более полная информация об этом проекте (рис. 13).
6. Проверьте работоспособность гиперссылок.
Рис. 13. Изображение является гиперссылкой
Внутристраничные гиперссылки
Внутристраничная гиперссылка создается в два этапа.
Например, необходимо создать ссылку из оглавления на первую главу
1. В оглавлении рядом с названием главы 1 следует создать запись:
<a href="#glava1">Перейти к главе 1</a>
2. Внутри web-страницы рядом с заголовком главы 1 создать метку и с помощью атрибута name тега <a> присвоить ей имя. Браузер не выделяет содержимое этого тега как ссылку, так как оно используется в качестве метки. В пределах документа метка должна быть уникальной.
<a name="glava1">Глава 1</a>
Прокомментируем запись <a href="#glava1">Перейти к главе 1</a>.
Атрибуту href тега <a> назначают имя метки и перед именем ставят знак #. Знак # показывает, что ссылка – внутренняя.
Если необходимо организовать гиперссылку на конкретный фрагмент другого HTML-документа (например, на главу 1 в документе "my.htm"), то этот фрагмент предварительно также помечается. Гиперссылка на него организуется следующим образом <a href="my.htm#glava1">. Здесь к имени метки добавляется имя файла.
Практическое задание 5
1. Откройте созданную Вами web-страницу projekt_d-152-1d.html.
2. Под заголовком «Проект дома № D-152-1D» добавьте пункты
- Аннотация
- Материалы
- Цена за проект
- Планы
- Фасады
3. Создайте внутристраничные гиперссылки из каждого только что созданного пункта на соответствующий раздел web-страницы (рис. 14, а)
4. Внизу страницы создайте гиперссылку Наверх, при нажатии на которую пользователь будет возвращаться в начало страницы (рис. 14, б).
Рис. 14. Внутристраничные гиперссылки
Задание цвета гиперссылок
Принятые в Web по умолчанию цвета для гиперссылок: синий – для еще не посещенных гиперссылок, красный – для активизированных гиперссылок (в момент щелчка), фиолетовый – для уже посещенных.
Если используемые по умолчанию значения этих атрибутов явно не согласуются с дизайном Вашей страницы, то значения можно поменять. Для этого у тега <BODY> есть соответствующие атрибуты.
link |
Цвет гиперссылки (по умолчанию светло-голубой) |
vlink |
Цвет использованной гиперссылки (по умолчанию темно-фиолетовый) |
alink |
Цвет активизированной гиперссылки (в момент щелчка) |
Практическое задание 6
- Вверху левого фрейма сделайте логотип графической гиперссылкой таким образом, чтобы при ее активизации в правый фрейм загружалась страница о сайте (файл main.html).
- Убедитесь в работоспособности всех гиперссылок. Ваш сайт должен выглядеть примерно так, как показано на рис. 15, при переходе по ссылке «Проекты таунхаусов и блокированных домов» так, как на рис. 16, при щелчке на изображении проекта D-152-1D как на рис. 17.
Рис. 15. Главная страница сайта MyHouse.ru
Рис. 16. Вид web-сайта при активной ссылке «Проекты таунхаусов и блокированных домов»
Рис. 17. Вид web-сайта при активной ссылке «Проект D-152-1D»
Работа со специальными элементами
Работа со специальными элементами определяется с помощью псевдоклассов.
Псевдокласс – специальный селектор, определяющий, как выглядит HTML-элемент в определенный момент.
Например, CSS определяет псевдокласс, который устанавливает, как выглядят гиперссылки в определенные моменты времени:
a:link {color:#ffffff; text-decoration:none} – не посещенные ссылки;
a:visited {color:red; text-decoration:none} – посещенные ссылки;
a:active {color:black; text-decoration:none} – активные ссылки;
a:hover {text-decoration:underline} – ссылка при наведении на нее фокуса.
Можно определить псевдокласс для первого символа элемента. Например, для абзаца:
p:first-letter {font-size:24pt}. Это удобно для задания спецэффектов выделения заглавных букв.
Практическое задание 7
1. Для верхнего меню страницы проекта включите в файл внешнюю стилевую спецификацию, определяющую вид гиперссылки в определенные моменты. Для этого самостоятельно определите параметры стиля согласно рис. 18.
2. Проверьте работоспособность стиля.
а – не посещенные ссылки |
б – ссылка при наведении на нее курсора |
Рис. 18. Вид гиперссылки в определенный момент времени
Практическое задание 8
1. Для пункта «Проекты таунхаусов и блокированных домов» включите в файл внешнюю стилевую спецификацию, определяющую вид гиперссылки в определенные моменты. Для этого самостоятельно определите параметры стиля согласно рис. 19.
2. Проверьте работоспособность стиля. Обратите внимание на то, чтобы не изменился цвет фона и параметры других элементов меню. Измениться должен только вид гиперссылки.
а – не посещенная и посещенная ссылка |
б – ссылка при наведении на нее курсора |
Рис. 19. Вид гиперссылки «Проекты таунхаусов и блокированных домов»
3. Для пункта с названием проекта на странице proekt_townhouse.html включите в файл внешнюю стилевую спецификацию, определяющую вид гиперссылки в определенные моменты. Для этого самостоятельно определите параметры стиля согласно рис. 20.
4. Проверьте работоспособность стиля.
а – не посещенная ссылка |
б – ссылка при наведении на нее курсора |
Рис. 20. Вид гиперссылки для названия проектов
В результате выполнения этой темы, у Вас должны быть созданы следующие файлы:
- doc1.html
- doc2.html
- doc3.html
- frames_2.html
- frames_3.html
- index.html
- projekt_d-152-1d.html