Как сделать ссылку в фрейме

Ссылки во фрейме

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

Связи

Разделы сайта

Популярное

• Уроки по HTML и CSS
• Руководство по флексбоксам
• HTML5 и CSS3 на примерах
• Руководство по JSON
• Как верстать на HTML5 и CSS3
• Продвинутые уроки по HTML и CSS
• Визуальное руководство по свойствам flexbox
• Создание первого приложения на Node

Помощь по сайту

Сайт WebReference.ru использует VPS от компании Beget.

Ссылка во фрейм

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

Связи

Разделы сайта

Популярное

• Уроки по HTML и CSS
• Руководство по флексбоксам
• HTML5 и CSS3 на примерах
• Руководство по JSON
• Как верстать на HTML5 и CSS3
• Продвинутые уроки по HTML и CSS
• Визуальное руководство по свойствам flexbox
• Создание первого приложения на Node

Помощь по сайту

Сайт WebReference.ru использует VPS от компании Beget.

Ссылки в HTML фреймах.

Можно сказать фреймы мы изучили, осталось дело за малым, научиться использовать ссылки. Если вы не только смотрели или двигали фреймы из предыдущих примеров, а нажимали на ссылки и если ваш браузер Опера, Хром или FireFox то у вас ничего не происходило, а в Интернет Ехсплорере открывался индексный файл в место наших ссылок, но теперь это уже не важно, т.к. мы и здесь наведем порядок.

Начнем редактировать наш файл navigatcia.html:

  навигация: 
ссылка 
ссылка 
ссылка 
ссылка 
webuchebnik.ru  

Я просто подставил имена файлов которые мы создали ранее, они все должны быть у вас в вашей учебной папке, а самую нижнюю ссылку я подставил на свою главную страницу. Теперь запустим наш файл frame.html и посмотрим что у нас получилось, покликаем по ссылкам.
А получилось у нас следующее, не зависимо какой у вас браузер все ссылки открываются в место навигации.

Как заставить ссылку открываться в нужном фрейме?.
target — атрибут знакомый нам из простых ссылок, но в фреймах его роль немного необычна. Добавим этот атрибут в файл navigatcia.html:

  навигация: 
target="okno1">ссылка 
target="okno1">ссылка 
target="okno1">ссылка 
target="okno1">ссылка 
target="okno1">webuchebnik.ru  

Значение атрибута target произвольное, вы можете написать другое слово на ваше усмотрение состоящее из букв и цифр.

Теперь осталось нам определить где будут открываться наши ссылки, для этого отредактируем наш файл frame.html

       name="okno1">  

Для того чтобы определить фрейм нужно атрибуту name присвоить значение из атрибута target, как я и сделал в примере выше. По умолчанию будет загружаться файл kontent.html, а далее при нажатии любой нашей ссылки в место этого файла будет загружена нужная нам страница. А теперь просмотрим что получилось.
Нижнюю ссылку я поставил на свой сайт не просто так, в том случае если вы не просто просматриваете, а вдобавок учитесь по этому самоучителю хтмл и все коды минимум копируете и создаете файлы какие я указываю, то можно вообразить что у вас не просто папка на вашем компе, а настоящий сайт и в этом случае ссылка на мой сайт является внешней для вашего сайта, и я думаю нет смысла запускать внешние сайты в вашем фрейме. Для того чтобы ссылка на внешний сайт открылась на все окно, а не в фрейме нужно атрибут target использовать с значением «_top», кстати, это значение для обычных(не фреймовых) ссылок по умолчанию. Ну а если вы не хотите терять посетителя и чтобы внешний сайт открывался в новой вкладке(окне) используем уже знакомый нам target=»_blank».

К большому сожалению не все браузеры поддерживают фреймы, они просто не знают тег frameset и не умеют вставлять объекты, а знают только body, в этом случае они просто проигнорируют теги которые не поддерживают и загрузят пустой экран, потому что самого текста в файле frame.html нет. Для таких случаев существует тег контейнер . Этот тег вставляется как нижний фрейм:

        Ваш браузер не поддерживает фрыймы или вы их отключили.   

1)браузер поддерживает фреймы и они включены, в этом случае текст в теге NOFRAMES на дисплее не отобразится.
2)браузер поддерживает фреймы но они отключены пользователем, в этом случае выведется только текст в теге NOFRAMES.
3)браузер не поддерживает фреймы, в этом случае как и в предыдущем выведется только текст в теге NOFRAMES.

Фреймы это плохо. потому что:
1)Не все браузеры их поддерживают и их можно отключить.
2)Поисковые системы часто(почти всегда) не правильно индексируют фреймы, они индексируют только «рамки» в отдельности, а сам файл в нашем случае frame.html просто опустить или выкинуть из поиска, т.к. он не содержит контента(текста) и с точки зрения поисковых систем не представляет особой важности для посетителей.
3)Поисковые системы могут выдать в результатах поиска только страницы с контентом и если в такую рамку попадет пользователь то он не сможет дальше двигаться по вашему сайту. Выход в данном случае только один, ставить в каждом фрейме ссылку на главную страницу.
4)Первые сайты выкладываются на бесплатные хостинги, но платой за хостинг является реклама которую хостинг-провайдер размещает на таких сайтах. И эта реклама загружается не в одной рамке, а сразу в каждой.
5)Таких причин отказаться от использования фреймов десятки.

Но все-же есть случаи когда без фреймов не обойтись, например фреймы нашли свое глубокое применение в системах активной рекламы. Или например создание книг для локального просмотра лучше ничего не придумаешь.

Возможно вы ни когда не найдете применения для фреймов, но знать о них нужно. По фреймам у меня все.

Смотрите также:

Где тут мышку подключить?

Урок 4. HTML фреймы и гиперссылки

HTML фреймы используются для разбивки окна браузера на несколько областей, каждая из которых представляет собой отдельный HTML-документ (фрейм или кадр).

Технология использования фреймов является устаревшей и не используется при создании современных сайтов, тем не менее мы знакомимся с этой технологией, так как ее актуальность сохранилась для создания локальных продуктов, которые не будут размещены в Интернет, например, для локальных учебных пособий, которые будут использоваться на десктопных компьютерах с достаточно большой шириной экрана.

HTML5 окончательно удалил инструмент фреймов, но, при этом элемент , который позволяет вставлять одну страницу в другую, остался в новом стандарте. Это ему удалось по той причине, что он используется на веб-страницах для выполнения ряда интеграционных задач, таких как вставка в страницы окон YouTube, рекламных блоков и поисковых полей Google.

Можно предположить, что тег вряд ли исчезнет из языка HTML, как уже было сказано, он используется для вставки окон YouTube, а на сегодня YouTube является одним из способов заработка и бизнеса, который требует также привлечения пользователей для просмотра видеороликов. Для привлечения пользователей и увеличения просмотров видеороликов развиты специальные сервисы, благодаря которым можно получить 1000 просмотров YouTube и создать значительный трафик на свой видеоканал.

Вернемя к нашим фреймам. Назначение HTML фреймов – это навигация (а не средство для разметки страницы). Идея фрейма заключается в том, чтобы разделить экран на несколько областей или окон. Это позволяет одновременно видеть больше одного документа и дает возможность на все время закрепить навигацию на экране.

При использовании простого дизайна с двумя HTML фреймами (рис.1) задействовано три документа:

• документ, описывающий фреймовую структуру,
• документ для левого фрейма,
• документ для правого фрейма.

Рис. 1. Простая фреймовая структура из двух фреймов

Фреймы содержатся в структуре и , замещающей в странице с фреймами структуру и , т.е. документ, описывающий фреймовую структур не имеет тегов и .

Допускается вложение фреймовых областей.

Атрибуты тега

Этот атрибут определяет количество и ширину столбцов фрейма. Ширину столбцов можно задать в пикселях или в процентах.

cols=n – определяет столбец шириной в n пикселей.

cols=n% – выделяет данному столбцу фрейма n%-долю ширины окна броузера.

Этот атрибут определяет количество и высоту строк фрейма. Высоту строк можно задать в пикселях или в процентах.

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. Откройте файл shablon.html
3. Измените код как в листинге на рисунке 2. Сохраните документ под именем frames_2.html
4. Создайте файл, как на рисунке 3. Сохраните документ под именем doc1.html
5. Создайте файл, как на рисунке 4. Сохраните документ под именем doc2.html
6. Запустите файл 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.

Тег определяет отдельный фрейм. Это непарный тег. Тегов должно быть ровно столько, на сколько областей делится экран. У тега имеются следующие атрибуты:

Этот атрибут указывает URL-адрес содержимого фрейма.

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

Этот атрибут используется для управления полосами прокрутки фрейма, когда это важно для определения внешнего вида страницы. Его значения:

scrolling=yes (установка полосы прокрутки)

scrolling=no (отсутствие полосы прокрутки)

scrolling=auto (значение по умолчанию)

Этот атрибут запрещает пользователю изменение размеров фреймов, чтобы предотвратить искажение дизайна страницы.

Практическое задание 2

1. Откройте файл shablon.html.
2. Измените текст, как в листинге на рисунке 5.
3. Сохраните документ в папке frames под именем frames_3.html
4. В новом документе наберите текст, изображенный в листинге 6. Сохраните документ под именем doc3.html
5. Запустите файл frames_3.html двойным щелчком. В окне браузера Internet Explorer Web-страница должна иметь вид, как на рис. 7.

Обращаем Ваше внимание на то, что во фреймовой структуре количество открывающих должно быть равно количеству закрывающих

Рисунок 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-кода создания гиперссылки и вид в браузере страницы с этим кодом:

Подробную информацию об услугах нашего агентства Вы можете получить

Рис. 9. Пример создания текстовой гиперссылки

В этом примере слово “здесь” является элементом привязки (или якорем – anchor), а часть href=”inform.htm” представляет ссылку на URL и означает, что при щелчке на элементе привязки должен быть загружен файл “inform.htm”, находящийся в том же адресе сети.

Элементы привязки (якорь – anchor)

Элемент привязки в ссылке может быть словом, группой слов или изображением. Существуют только два типа элементов привязки: текстовый и графический.

Текстовые ссылки браузер обычно выделяет цветом, отличным от цвета основного текста, подчеркиванием. Кроме того, курсор мыши на ссылке меняет свое изображение на указатель в виде руки.

Графические элементы привязки не подчеркиваются и не выделяются цветом, но могут быть обведены рамкой.

Рассмотрим пример организации графической гиперссылки (рис. 10):

У нас в агентстве приветливые и компетентные диспетчеры

Рис. 10. Пример создания графической гиперссылки

В этом примере рисунок «ris.jpg» является графическим элементом привязки. Браузер выделяет его синей рамкой.

Виды адресов

Абсолютный адрес – это полный адрес в Internet.

• – удаленный переход;
• – использование в ссылке абсолютного адреса на своем сервере ( не используется ).

Относительный адрес. Правила относительной адресации мы рассмотрели в теме 1. При написании адресов гиперссылок используются те же правила. Рекомендуется применение относительных адресов, поскольку при каждом перемещении каталога не приходится менять все ссылки.

• – переход на другой документ на своем сайте

Гиперссылки можно разделить на 3 категории:

1. Внешняя – ссылка на web-страницу, которая находится по другому адресу Internet (за пределами сайта). Для ее организации используется абсолютный адрес.

2. Внутренняя – ссылка на другую web-страницу внутри сайта. Для ее организации необходимо использовать относительный адрес.

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

Практическое задание 3

1. Откройте раздел «Организация гиперссылок» в файле справочника Sprav_html.doc. Ознакомьтесь с атрибутами тега . Будьте готовы ответить на вопросы по правилам задания значений этих атрибутов.
2. В файле menu.html для пункта «Проекты таунхаусов и блокированных домов», сделайте гиперссылку, целевым адресом которой является web-страница townhouse.html таким образом, чтобы web-страница townhouse.html грузилась в правый фрейм. Напомним, для того, чтобы ссылка грузила документ в нужный фрейм в теге необходимо указать атрибут target, который содержит имя фрейма, куда должен быть загружен документ. Например, . Результат на рис. 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 следует создать запись:

Если необходимо организовать гиперссылку на конкретный фрагмент другого HTML-документа (например, на главу 1 в документе «my.htm»), то этот фрагмент предварительно также помечается. Гиперссылка на него организуется следующим образом . Здесь к имени метки добавляется имя файла.

Практическое задание 5

1. Откройте созданную Вами web-страницу projekt_d-152-1d.html.

2. Под заголовком «Проект дома № D-152-1D» добавьте пункты

• Аннотация
• Материалы
• Цена за проект
• Планы
• Фасады

3. Создайте внутристраничные гиперссылки из каждого только что созданного пункта на соответствующий раздел web-страницы (рис. 14, а)

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

Рис. 14. Внутристраничные гиперссылки

Задание цвета гиперссылок

Принятые в Web по умолчанию цвета для гиперссылок: синий – для еще не посещенных гиперссылок, красный – для активизированных гиперссылок (в момент щелчка), фиолетовый – для уже посещенных.

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

Цвет гиперссылки (по умолчанию светло-голубой)

Цвет использованной гиперссылки (по умолчанию темно-фиолетовый)

Цвет активизированной гиперссылки (в момент щелчка)

Практическое задание 6

1. Вверху левого фрейма сделайте логотип графической гиперссылкой таким образом, чтобы при ее активизации в правый фрейм загружалась страница о сайте (файл main.html).
2. Убедитесь в работоспособности всех гиперссылок. Ваш сайт должен выглядеть примерно так, как показано на рис. 15, при переходе по ссылке «Проекты таунхаусов и блокированных домов» так, как на рис. 16, при щелчке на изображении проекта D-152-1D как на рис. 17.

Рис. 15. Главная страница сайта MyHouse.ru

Рис. 16. Вид web-сайта при активной ссылке «Проекты таунхаусов и блокированных домов»

Рис. 17. Вид web-сайта при активной ссылке «Проект D-152-1D»

Работа со специальными элементами

Работа со специальными элементами определяется с помощью псевдоклассов.

Псевдокласс – специальный селектор, определяющий, как выглядит HTML-элемент в определенный момент.

Например, CSS определяет псевдокласс, который устанавливает, как выглядят гиперссылки в определенные моменты времени:

a:link – не посещенные ссылки;

a:visited – посещенные ссылки;

a:active – активные ссылки;

a:hover – ссылка при наведении на нее фокуса.

Можно определить псевдокласс для первого символа элемента. Например, для абзаца:

p:first-letter . Это удобно для задания спецэффектов выделения заглавных букв.

Практическое задание 7

1. Для верхнего меню страницы проекта включите в файл внешнюю стилевую спецификацию, определяющую вид гиперссылки в определенные моменты. Для этого самостоятельно определите параметры стиля согласно рис. 18.

2. Проверьте работоспособность стиля.

а – не посещенные ссылки

б – ссылка при наведении на нее курсора

Рис. 18. Вид гиперссылки в определенный момент времени

Практическое задание 8

1. Для пункта «Проекты таунхаусов и блокированных домов» включите в файл внешнюю стилевую спецификацию, определяющую вид гиперссылки в определенные моменты. Для этого самостоятельно определите параметры стиля согласно рис. 19.

2. Проверьте работоспособность стиля. Обратите внимание на то, чтобы не изменился цвет фона и параметры других элементов меню. Измениться должен только вид гиперссылки.

а – не посещенная и посещенная ссылка

б – ссылка при наведении на нее курсора

Рис. 19. Вид гиперссылки «Проекты таунхаусов и блокированных домов»

3. Для пункта с названием проекта на странице proekt_townhouse.html включите в файл внешнюю стилевую спецификацию, определяющую вид гиперссылки в определенные моменты. Для этого самостоятельно определите параметры стиля согласно рис. 20.

4. Проверьте работоспособность стиля.

а – не посещенная ссылка

б – ссылка при наведении на нее курсора

Рис. 20. Вид гиперссылки для названия проектов

В результате выполнения этой темы, у Вас должны быть созданы следующие файлы:

Уроки HTML и CSS

• Урок 1. Как создать HTML страницу
• Урок 2. Внешние таблицы стилей CSS. Уроки CSS
• Урок 3. Структура HTML-элемента
• Урок 4. HTML фреймы и гиперссылки
• Урок 5. Веб формы (web-формы)
• Урок 6. Табличный макет сайта
• Урок 7. Блочная верстка web-сайта. Часть 1
• Урок 8. Блочная верстка web-сайта. Часть 2
• Урок 9. Фотогалерея для сайта Lightbox 2.04
• Контрольное задание по блочной верстке
• Контрольное задание «Создание HTML-шаблона на основе PSD-файла»
• Контрольное задание «Верстка таблиц»