Способ отображения нескольких html документов в одном окне браузера
Фреймы позволяют разбить окно просмотра браузера на несколько прямоугольных подобластей, располагающихся рядом друг с другом. В каждую из подобластей можно загрузить отдельный HTML-документ, просмотр которого осуществляется независимо от других. Между фреймами, также как и между отдельными окнами браузера, при необходимости можно организовать взаимодействие, которое заключается в том, что выбор ссылки в одном из фреймов может привести к загрузке нужного документа в другой фрейм или окно браузера.
Возможность работы с фреймами впервые была реализована в браузере Netscape 2.O. Следующая версия браузера Netscape 3.0 обогатила возможности фреймов, добавив несколько дополнительных параметров к основным тэгам описания структуры фреймов. Браузер Microsoft Internet Explorer поддерживает фреймы, начиная с версии 3.0, а также предоставляет уникальную возможность создания плавающих фреймов.
В данной главе приводятся основные правила и примеры построения фреймов, даются рекомендации по их использованию.
Сферы применения фреймов
Разработчикам HTML-документов предоставляется довольно богатый выбор форм отображения информации на страницах. Текстовая и графическая информация может быть упорядочена и организована при помощи списков, таблиц или просто с помощью параметров выравнивания, задания горизонтальных линий, разделения на абзацы. Иногда этих возможностей оказывается недостаточно и тогда приходится разбивать окно просмотра браузера на отдельные области или фреймы (frames). В ряде русскоязычных описаний языка HTML вместо термина фреймы используется термин кадры. Частота использования обоих терминов примерно одинакова.
Выбор фреймовой структуры отображения информации на WWW оправдан в следующих случаях:
-
при необходимости организовать управление загрузкой документов в одну из подобластей окна просмотра браузера при работе в другой подобласти;
Приведенный список не исчерпывает все возможные случаи, где можно применить фреймы, а носит рекомендательный характер.
Рассмотрим сначала типичные варианты использования фреймов на примерах реально существующих HTML-документов, а затем обратимся к правилам разработки документов, содержащих фреймы.
На рис. 5.1 показана одна из HTML-страниц агентства "Финмаркет", специализирующегося на предоставлении информации с финансовых и фондовых рынков России.
Рис. 5.1. Типичный Web-документ с фреймовой структурой
На этой странице окно браузера разбивается на три фрейма. Нижняя часть окна занимает 20% высоты всего окна и содержит постоянную информацию, которая в данном случае представляет собой графическое меню, позволяющее в любой момент обратиться к наиболее важным разделам. Этот фрейм не может изменять своих размеров по командам пользователя и не имеет полос прокрутки. Верхняя часть окна (составляющая 80% высоты) разделена по горизонтали на два фрейма. Левый фрейм содержит оглавление документов, которые могут быть просмотрены пользователем. Правый фрейм, занимающий большую часть окна просмотра, предназначен для отображения самих документов. При первоначальной загрузке эти два фрейма делят окно браузера по горизонтали в соотношении 15% на 85%. Это соотношение может изменяться пользователем при просмотре, что позволяет выбрать оптимальные размеры фреймов с учетом содержимого загруженных документов. Каждый из этих фреймов имеет свою полосу прокрутки, обеспечивающую возможность просмотра всего содержимого фрейма вне зависимости от размера самого фрейма, всего окна браузера и используемых шрифтов. При выборе любой ссылки в левом фрейме соответствующий документ будет загружен в правый фрейм. Такая структура позволяет одновременно видеть на экране и оглавление документов, и содержимое выбранного документа.
Приведем без пояснений фрагмент HTML-кода, по которому построен документ с данной структурой:
Данный пример показывает наиболее типичное использование фреймовых структур, когда один фрейм служит оглавлением документов, а другой используется для загрузки их содержимого. Решение такой задачи без применения фреймов обычно выполняется следующим образом. На одной из страниц располагают оглавление, состоящее из ссылок на другие документы или их отдельные фрагменты. При переходе по такой ссылке оглавление исчезает, а на его место загружается нужный документ, после прочтения которого обычно необходимо вновь вернуться к оглавлению. При использовании фреймов такой возврат становится ненужным, так как оглавление постоянно располагается на части экрана.
В интернете можно найти сайт электронного издания популярного в Санкт-Петербурге адресно-телефонного справочника "Весь Петербург".
Электронная версия справочника доступна по адресу http://www.allpetersburg.ru и позволяет находить нужные сведения по запросам пользователя. Данная страница документа также имеет фреймовую структуру и состоит из двух фреймов, причем первый из них имеет ширину 100 пикселов, а второй занимает всю оставшуюся ширину окна просмотра. Фрейм, расположенный с левой стороны, используется для графического меню, постоянно присутствующего на экране, а также содержит логотип компании "Nevalink". Второй фрейм содержит документ, который в данном случае представляет собой форму для запроса пользователя. Структура этой страницы определена следующим HTML-кодом:
Фреймы очень похожи на таблицы — и те и другие осуществляют разбиение окна просмотра браузера на прямоугольные области, в которых располагается некоторая информация. Однако при помощи фреймов можно решить не только задачу форматирования страниц документа, но организовать взаимодействие между ними. Принципиальная разница между фреймами и таблицами состоит в том, что каждому фрейму должен соответствовать отдельный HTML-документ, а содержимое всех ячеек таблицы всегда является частью одного документа. Кроме того, отображаемая во фрейме страница может прокручиваться при просмотре независимо от других. Каждый фрейм по существу является отдельным "мини-браузером". В отличие от фреймов, вся структура которых всегда представлена на экране, таблицы могут полностью не помещаться в окне и быть просмотрены только по частям. Отсюда следует вывод, что если в HTML-таблицах общее число ячеек практически не ограничено и может достигать нескольких сотен, то число фреймов в документе обычно не превосходит нескольких единиц.
Совет
Если требуется только отформатировать документ, то для этого достаточно ограничиться применением таблиц. Если же необходимо решить более сложные задачи, например, организовать взаимодействие между подобластями окна или создать подобласти, постоянно расположенные на экране, то здесь удобно применить фреймы.
В конечном итоге, выбор структуры документа — табличной или фреймовой — зависит от многих факторов и не может быть однозначно предопределен.
Существуют также страницы, которые с виду построена аналогично предыдущим. Для примера можно взять страниц у очень популярного во всем мире сборника программных продуктов, предназначенных в основном для работы с Интернетом. Адрес сервера http://www.tucows.com. Заметим, что имя сервера определила аббревиатура, полученная от сокращения полного названия сборника — The Ultimate Collection of Winsock Software. Поскольку сокращение tucows оказалось созвучным словосочетанию two cows (две коровы), то на страницах сервера сплошь и рядом встречается изображение коров, а рейтинг программных продуктов оценивается в количестве мычаний ("Моо") и графически изображается в виде ряда из соответствующего числа коров. Большинство страниц сервера построено однотипно — в левой части окна приводится список доступных разделов, а в правой части — перечень программных продуктов выбранного раздела. На первый взгляд структура документа должна иметь примерно такой же вид, как и в предыдущих примерах. Однако в этом документе фреймы не используются! Данная страница построена при помощи таблицы, которая состоит всего лишь из одной строки с двумя ячейками. Таблица не имеет обрамления и лишь преследует цель форматирования страницы. Впечатление разделения экрана на две части по вертикали создано путем использования фонового графического изображения, содержащего вертикальную линию, а вовсе не сеткой таблицы. В этом можно убедиться, если выполнять просмотр страницы без загрузки изображений. Использование таблицы здесь, видимо, обусловлено соображениями большей доступности документов, поскольку фреймы позволяют отображать не все браузеры.
Недостатком такого подхода в данном случае является необходимость повторения в каждом документе всего списка разделов (левая часть страницы), что незначительно увеличивает размер файлов.
Сравнение приведенных примеров показывает, что использование таблиц и фреймов может иногда быть взаимозаменяемым и определяется пожеланиями разработчиков. Заметим, что часто при взгляде на страницу с отображенным на ней документом невозможно определить, как она построена. Конечному пользователю знание внутренней структуры документа не требуется, однако при разработке собственных Web-страниц ознакомление с исходным кодом существующих документов было бы крайне полезно. В первом примере (см. рис. 5.1) фреймовая структура документа сразу же видна — наличие двух вертикальных полос прокрутки уже определяет присутствие отдельных фреймов. Последующие два примера внешне очень схожи, причем невозможно определить, что первый из них построен с помощью фреймов, а второй — с помощью таблиц. Отличия будут проявляться только при работе с ними. В примере адресно-телефонного справочника при прокрутке документа левая часть окна будет оставаться на месте, что возможно только при наличии фреймовой структуры. В следующем примере ( сборника программных продуктов ) при прокрутке будет смещаться все содержимое окна.
Посмотреть структуру документа при работе с браузером Netscape можно воспользовавшись пунктом Page Info (в версиях 3.x браузера Netscape этот пункт меню назывался Document Info) меню View (рис. 5. 2 ).
Рис. 5. 2 . Меню View браузера Netscape
Кроме того, всегда можно ознакомиться с исходным HTML-кодом всего документа, воспользовавшись пунктом Page Source меню View (или пунктом View Frame Source контекстного меню, вызываемого правой кнопкой мыши, для просмотра HTML-кода документа, загруженного в выбранный фрейм).
Совет
Не следует без необходимости злоупотреблять использованием фреймов, причем их количество не должно превосходить трех-четырех.
Нередко на реальных страницах в интернете можно увидеть и такие случаи использования фреймов: два смежных фрейма использованы для загрузки документов, которые удобно просматривать одновременно и сопоставлять друг с другом. В каждом из двух документов, загружаемых во фреймы, использована табличная форма представления информации. В результате такой организации данных каждая из двух таблиц может быть просмотрена (или распечатана) отдельно, а может изучаться в сравнении с другой.
Все приведенные примеры данного раздела взяты со страниц популярных WWW-серверов и, пожалуй, могут служить образцами применения фреймов в HTML-документах.
Последующие разделы данной главы посвящены правилам записи документов, содержащих фреймы.
Правила описания фреймов
Перейдем теперь к рассмотрению правил записи тэгов, используемых для документов с фреймовыми структурами.
Давайте для начала рассмотрим полный HTML-код, создающий документ с фреймами средней сложности:
Язык HTML позволяет разбить окно программы браузера на несколько частей и в каждой из них отобразить отдельный документ. Такие области называются фреймами.
1.Для создания фреймов используют особый документ HTML, структура которого отличается от обычной. Такой документ не содержит раздела «тела» документа и, на самом деле, не содержит какого-либо текста вообще. Вместо этого он содержит описание фреймов, заключенное между тегамии .В этом описании указывают размеры и порядок размещения областей в окне браузера, а также задают документы, которые должны загружаться в каждую из этих областей.
2.Тег должен содержать обязательный атрибут COLS=или ROWS=,определяющий способ разбиения окна. При использовании атрибута COLS=окно делится на области вертикальными линиями, а при использовании атрибута ROWS=— горизонтальными. Если заданы оба эти атрибута, в окне создается сетка из подобластей.
Значения этих атрибутов определяют высоту (или ширину) областей окна. Параметры для каждого столбца (строки) задают через запятую в пикселях или в процентах (символ «%»). В качестве последнего параметра можно использовать символ «звездочка» (*). Под такой фрейм выделяется все остающееся свободное пространство.
3.Между тегами и располагают дополнительные теги, указывающие назначение созданных областей. Для этой цели можно использовать вложенные теги ,задающие дополнительное разбиение окна, или одиночные теги ,определяющие документы, загружаемые в отдельные области. Число элементов, вложенных между тегами и ,должно соответствовать числу созданных областей.
4.Тег должен содержать обязательный атрибут SRC=,определяющий документ, который будет загружен в данную область. Дополнительные атрибуты позволяют управлять рамками между отдельными фреймами и некоторыми другими свойствами.
Качество документов HTML
Творческий характер создания документов HTML сродни программированию, так что при этом возможны ошибки, которые могут привести к трудностям или даже полной невозможности прочитать созданный документ в Интернете. Кроме того, огромное разнообразие компьютеров, подключенных к Интернету, приводит к тому, что заранее невозможно предсказать, как именно будет выглядеть документ на экране конкретного пользователя.
Web-страницы предназначаются для широкой аудитории, так что при подготовке документов HTML следует иметь в виду эти особенности. Чтобы создать хороший документ HTML, следует придерживаться ряда достаточно простых правил.
3.Для того чтобы документ HTML был доступен самой широкой аудитории, следует «отставать на один шаг» от последних достижений в развитии языка HTML. Последние нововведения не всегда сразу реализуются в браузерах, а новым версиям требуется время на то, чтобы достичь большинства пользователей. Документы с использованием самых свежих новшеств доступны лишь ограниченной аудитории.
4.Ошибка, которую часто делают новички, состоит в злоупотреблении элементами оформления, особенно разнообразными цветами и шрифтами. Такая страница в лучшем случае будет выглядеть кричащей. В худшем случае, текст вообще нельзя будет прочесть на компьютерах с нестандартной цветовой схемой или при отсутствии необходимых шрифтов.
5.Не следует злоупотреблять графическими изображениями и мультимедийными файлами. При изобилии таких объектов загрузка страницы может затянуться и читатель может утратить к ней интерес еще до того, как получит возможность что-то прочесть.
6.Так как создание документов HTML сродни программированию, процесс поиска и исправления ошибок, известный в программировании как отладка, необходим и при создании Web-страницы. Большинство, если не все сделанные ошибки можно обнаружить еще до того, как страница станет доступна посторонним читателям. В число ошибок, которые надо исправлять, входят также грамматические ошибки и опечатки.
7.Если собственной фантазии недостаточно, чтобы придумать способ оформления Web-страницы, можно воспользоваться службой World Wide Web как справочником. Интернет содержит миллионы Web-страниц, способных предложить идеи оформления, которыми можно пользоваться. Достоинство этого подхода состоит еще и в том, что таким способом можно увидеть, не только что сделано, но и как сделано, если обратиться к исходному тексту Web-страницы.
8.Фреймы — очень мощное, но и очень опасное средство оформления Web-страниц. С помощью фреймов создано гораздо больше неудачных Web-страниц, чем удачных. Единственный критерий грамотности применения фреймов — удобство пользователя. Если благодаря фреймам страница становится во много раз красивее, но чуть-чуть менее удобной, от фреймов надо отказываться не задумываясь. Ничего, кроме раздражения, у читателей она не вызовет.
9.Люди ценят заботу и внимание. Размещение самой важной информации в верхней части страницы позволяет им с пользой проводить время, в течение которого происходит загрузка документа. Сопровождение иллюстраций альтернативным текстом не стоит больших трудов, но высоко ценится. Наличие большого количества полезных гиперссылок на странице не только помогает людям плодотворно путешествовать по просторам Интернета, но и побуждает их раз за разом возвращаться на страницу, предоставившую им такую возможность.
Фреймы — это HTML-элементы, позволяющие разделить окно веб-браузера на несколько независимых окон, в каждое из которых можно загрузить отдельный HTML-документ. Каждое такое окно (фрейм) может иметь собственные полосы прокрутки и функционировать независимо от других независимых окон либо наоборот управлять их содержанием. Они могут применяться для организации постоянно находящегося в одном окне меню, в то время как в другом окне располагается непосредственно сама информация. Пользователи могут обращаться к меню в любой момент, и им не нужно возвращаться к предыдущей странице, чтобы выбрать другой пункт меню. Применение фреймов позволит вам «закрепить» в окне браузера изображения или другие неподвижные по замыслу элементы интерфейса, в то время как остальная часть страницы будет прокручиваться во фрейме.
Однако, стоит отметить, что в наши дни фреймы считаются устаревшим средством, а сайты с фреймами теперь считаются несолидными, так как профессиональные веб-мастера никогда не используют фреймы в своих проектах. С фреймами связан целый ряд печально известных проблем. Они, например, сбивают с толку поисковые машины, поскольку на страницах, которые содержат контент, нет ссылок на другие документы. Если вы хотите получать посетителей с поисковых систем, забудьте о фреймах. Понравившуюся страницу пользователю невозможно поместить в раздел закладки браузера, так как фреймы скрывают адрес страницы, на которой он находится, и всегда показывают только адрес веб-сайта. По этой причине они создают проблемы для браузеров при отслеживании хронологии и еще они не слишком приспособлены для разных размеров экранов и мобильных устройств.
Несмотря на то, что проекты с фреймами встречаются во всемирной паутине все реже, изучение HTML было бы неполным без рассмотрения темы о фреймах. У фреймов наряду с недостатками есть и некоторые достоинства, которые не позволяют отбросить эту технологию как бесперспективную.
Создание фреймов
Структура HTML-документа с фреймами внешне очень напоминает формат обычного HTML-документа. Как и в обычном HTML-документе, весь код помещен между парными тегами и , а в контейнере располагаются заголовки. Основное отличие документа с фреймами от обычного HTML-документа — у документа с фреймами вместо тега применяется парный тег (от англ. frame set – набор фреймов).
В следующем примере приведена структура HTML-документа с фреймами:
Пример: Структура HTML-документа с фреймами
- rows — описывает разбиение страницы на строки:
- cols — описывает разбиение страницы на столбцы:
В значении атрибутов rows и cols необходимо указывать не количество строк или столбцов, а значение ширины и высоты фреймов. Все значения в списке разделяются запятыми. Размеры могут быть указаны в абсолютных единицах (в пикселах) или в процентах:
- cols="20%, 80%" — окно браузера разбивается на две колонки с помощью атрибута cols, левая колонка занимает 20%, а правая 80% окна браузера.
- rows="100, *" окно браузера разбивается на два горизонтальных окна с помощью атрибута rows, верхнее окно занимает 100 пикселов, а нижнее — оставшееся пространство, заданное символом звездочки.
Как видно из данного примера, контейнер с атрибутом rows вначале создает два горизонтальных фрейма, а вместо второго фрейма подставляется еще один , который разбивает нижний горизонтальный фрейм на две колонки с помощью атрибута cols, левая колонка занимает занимает 20%, а правая 80% окна браузера.
Если браузер не поддерживает фреймы, то в окне будет отображен текст, расположенный между тегами и . Все, что находится между тегами и , игнорируется браузерами, поддерживающими фреймы. Таким образом разработчику нужно написать код, дублирующий содержимое фреймов другими средствами, и поместить этот код в контейнер , тогда все пользователи смогут увидеть его веб-страницу.
Как уже отмечалось, для вставки в документ отдельного фрейма служит непарный тег . Атрибут src задает документ, который должен отображаться внутри данного фрейма, например: . Если атрибут src отсутствует, отображается пустой фрейм.
Границы или пространство между фреймами
По умолчанию, браузер отображает серую и, как правило, в виде трехмерной линии границу между фреймами, с помощью которой посетители могут регулировать размер фрейма.
Границей фрейма можно управлять, как и любыми другими элементами фрейма. Для этого существует несколько атрибутов элемента , позволяющих настраивать границы фреймов. Толщина линии границы определяется атрибутом border. По умолчанию значение толщины границы равно пяти.
Чтобы скрыть границу фрейма, необходимо либо указать значение ширины границы равным нулю, либо присвоить значение «no» или «0» атрибуту frameborder. Атрибут frameborder может принимать только два противоположных значения. Если значение атрибута frameborder равно «yes» или «1», то граница фреймов будет отображаться, а если «0» или «no», то нет. Учтите, что значения атрибута frameborder различаются для разных браузеров. Чтобы решить эту проблему используйте дважды атрибут frameborder, а для некоторых браузеров требуется еще добавить атрибут framespacing со значением «0»:
В следующем примере показано создание ссылки на веб-сайт «wm-school»:
Пример HTML:
В большинстве браузеров текст ссылки отображается синим цветом с подчеркиванием. Когда вы наведете указатель мыши на гиперссылку, указатель превратится в кисть руки. Посещенные ссылки, как правило, становятся фиолетовыми.
Абсолютные и относительные ссылки
Браузеру необходимо сообщить, на какой документ осуществлять переход по ссылке. Атрибут href (гипертекстовая ссылка) содержит в себе адрес страницы (URL-адрес) и передавая его браузеру, сообщает, на какой документ осуществлять переход по ссылке. В большинстве случаев ссылки ведут на другие HTML-документы, однако ссылки могут вести и на другие объекты, например изображения, архивы, видео-файлы и т.п. Адрес ссылки может быть как абсолютным, так и относительным.
Абсолютный URL-адрес
Как правило, ссылки с префиксом www и без него ведут на одну и ту же страницу. Но могут также встречаться ситуации, когда ссылка без префикса www открывается, а эту же страницу с www браузер вообще не находит. Встречается и обратная ситуация. Причиной может быть намеренная или неправильная настройка веб-сервера.
В следующем примере показано создание абсолютной ссылки на сторонний вебресурс:
Пример HTML:
Относительный URL-адрес
Относительные ссылки могут быть использованы только для того, чтобы создать ссылку на страницу с этого же сайта, в то время как абсолютные ссылки, как правило, применяются для создания ссылки на другие сайты. Относительные URL-aдpeca представляют собой сокращенную версию абсолютных, при создании ссылок на другие страницы внутри одного и того же сайта нет необходимости указывать в URLaдpece доменное имя. Относительная ссылка описывает путь к указанному документу относительно местоположения веб-страницы, на которой находится ссылка. Возможны следующие варианты:
Создание ссылок в пределах одного каталога
Создание ссылки на документ, находящийся одним каталогом ниже
Создание ссылки на вышестоящий каталог
СОЗДАНИЕ ССЫЛКИ НА ФАЙЛ, РАСПОЛОЖЕННЫЙ ДВУМЯ УРОВНЯМИ ВЫШЕ
Совет: Глядя на рис.1 вы легко поймете, что двигаясь от «родителя» к «дочке» нужно ставить точки, соответственного двигаясь к «внучатой» эти точки нужно ставить дважды и т.д.
Ссылка на адрес электронной почты
В следующем примере показано создание ссылки на адрес электронной почты:
Пример HTML:
Для того, чтобы почтовая программа запустилась, в браузере должны быть выставлены соответствующие настройки. Отсюда следует, что не у всех пользователей почтовая ссылка сработает как нужно. Но, если вы в качестве текста ссылки введете сам адрес электронной почты, тогда им смогут воспользоваться даже те посетители, у кого функция mailto на компьютере не выполняется.
Правила написания URL
При создании ссылок важно придерживаться следующих правил во избежание распространенных ошибок:
Открытие ссылок в новом окне
Чтобы создать ссылку, открывающую страницу в новом окне браузера, вы можете воспользоваться атрибутом target открывающего тега элемента . Значение этого атрибута должно быть установлено _blank. Чаще всего ссылки данного вида ставятся, если они перебрасывают посетителя на сторонний сайт. В этом случае создатели сайтов надеются, что посетитель вернется на их сайт по завершении просмотра открывшейся страницы, так как в этом случае ваш сайт остается открытым в исходном окне посетителя и не дает ему забыть о вас. Одни пользователи любят средство отображения в отдельном окне, а у других новые окна могут вызывать скорее чувство раздражения, чем комфорта. Поэтому пользуйтесь этим приемом экономно, лишь к некоторым ссылкам и, при этом, будет не лишним заранее предупредить посетителя, что страница откроется в новом окне.
В следующем примере показано как создать ссылку, открывающую страницу в новом окне браузера:
Пример HTML:
Если установить значение _blank для всех ссылок на веб-странице, то каждая из этих ссылок будет открываться у посетителя в новом окне, в результате перед пользователем может оказаться великое множество открытых окон. Для избегания подобной ситуации можно присвоить целевому окну индивидуальное имя, которое можно будет указывать в ссылках вместо значения _blank. Следующая ссылка откроется в новом окне с именем _window:
Пример HTML:
Укажите в каждой ссылке, на своей веб-странице, значение _window вместо _blank и все документы, к которым будет осуществляться переход по ссылкам, будут открываться в том же самом втором окне, а ваш сайт остается открытым в исходном окне.
Атрибут target может принимать следующие значения:
Значение | Описание |
---|---|
_blank | Открыть страницу в новом окне или вкладке. |
_self | Открыть страницу в том же окне (это значение задается по умолчанию). |
_parent | Используется при работе с фреймами и позволяет открыть страницу в родительском фрейме; если на текущей странице нет фреймов, то это значение работает как _self. |
_top | Применяется при работе с фреймами и позволяет открыть страницу в полном окне браузера, заменяя собой все фреймы, которые были на странице; если на текущей странице нет фреймов, то это значение работает как _self. |
framename | Открыть страницу в новом окне с именем framename. |
Всплывающая подсказка для ссылки
Еще одним полезным вспомогательным атрибутом для ссылок является title, он позволяет создать всплывающую подсказку для вашей ссылки. Такая подсказка дает пользователю дополнительную информацию о том, что его ждет под ссылкой. Подсказка отображается, когда курсор мыши задерживается на ссылке, после чего подсказка через некоторое время исчезает.
Пример HTML:
Создание ссылки на определенную позицию страницы
Внутренние ссылки особенно полезны при организации быстрого доступа к конкретному тек-стовому фрагменту, который находится в нижней части длинной страницы с прокруткой, или для возврата к началу страницы одним щелчком мыши. Вы можете создавать ссылки на разные разделы текущей веб-страницы или на определенное место на другой веб-странице. Место на веб-странице, куда вы отправляете своего посетителя, называется фрагментом. Создание ссылки, ведущей на определенную область страницы, состоит из двух этапов. Прежде чем создавать ссылку на определенный фрагмент страницы, нужно отметить этот участок страницы (создать закладку) с помощью атрибута id, который присваивает уникальное имя любому HTML-элементу на странице.
Шаг 1: Создание закладки на странице
Наша закладка будет выглядеть следующим образом:
По сути вы создали закладку, зафиксированную на заголовке «Абсолютный URL-адрес».
Шаг 2: Создание ссылки на закладку
Теперь, если щелкнуть мышью по ссылке: Перейти к «Абсолютный URL-адрес», браузер отправит вас к разделу, начинающемуся с заголовка «Абсолютный URL-адрес».
Создание ссылки на фрагмент другого документа
Можно также создать ссылку на определенный фрагмент на странице другого сайта, для чего необходимо указать в конце абсолютного URL-адреса идентификатор фрагмента с знаком решетки, как здесь:
Вы не можете устанавливать идентификаторы на чужих страницах сайтов, они могут быть созданы самим автором. Чтобы узнать, есть ли закладки на чужой странице и где они находятся можно, конечно, посмотреть исходный код и отыскать соответствующую разметку. В случае, когда обозначенные фрагменты во внешнем документе будут удалены, страница по ссылке все равно загрузится но, как и в случае с обычными ссылками, браузер отобразит страницу с самого начала.
Пример создания ссылки на закладку из другой веб-страницы:
Пример HTML:
Изображения-ссылки
Графические изображения могут использоваться не только в качестве иллюстраций, но и выполнять роль ссылок. Другими словами, новая страница будет открываться при щелчке кнопкой мыши на картинке. Для обеспечения работы изображения в качестве ссылки на другие веб-ресурсы достаточно поместить изображение внутрь элемента следующим образом:
Пример HTML:
При наведении указателя мыши на картинку в ссылке указатель превращается в кисть руки.
Фреймы позволяют разбить окно просмотра браузера на несколько прямоугольных подобластей, располагающихся рядом друг с другом. В каждую из подобластей можно загрузить отдельный HTML-документ, просмотр которого осуществляется независимо от других. Между фреймами, также как и между отдельными окнами браузера, при необходимости можно организовать взаимодействие, которое заключается в том, что выбор ссылки в одном из фреймов может привести к загрузке нужного документа в другой фрейм или окно браузера.
озможность работы с фреймами впервые была реализована в браузере Netscape 2.O. Следующая версия браузера Netscape 3.0 обогатила возможности фреймов, добавив несколько дополнительных параметров к основным тэгам описания структуры фреймов. Браузер Microsoft Internet Explorer поддерживает фреймы, начиная с версии 3.0, а также предоставляет уникальную возможность создания плавающих фреймов.
Сферы применения фреймов
Разработчикам HTML-документов предоставляется довольно богатый выбор форм отображения информации на страницах. Текстовая и графическая информация может быть упорядочена и организована при помощи списков, таблиц или просто с помощью параметров выравнивания, задания горизонтальных линий, разделения на абзацы. Иногда этих возможностей оказывается недостаточно и тогда приходится разбивать окно просмотра браузера на отдельные области или фреймы (frames). В ряде русскоязычных описаний языка HTML вместо термина фреймы используется термин кадры. Частота использования обоих терминов примерно одинакова.
одновременно видеть на экране и оглавление документов, и содержимое выбранного документа.
Приведем без пояснений фрагмент HTML-кода, по которому построен документ с данной структурой:
Данный пример показывает наиболее типичное использование фреймовых структур, когда один фрейм служит оглавлением документов, а другой используется для загрузки их содержимого. Решение такой задачи без применения фреймов обычно выполняется следующим образом. На одной из страниц располагают оглавление, состоящее из ссылок на другие документы или их отдельные фрагменты. При переходе по такой ссылке оглавление исчезает, а на его место загружается нужный документ, после прочтения которого обычно необходимо вновь вернуться к оглавлению. При использовании фреймов такой возврат становится ненужным, так как оглавление постоянно располагается на части экрана.
В интернете можно найти сайт электронного издания популярного в Санкт-Петербурге адресно-телефонного справочника "Весь Петербург".
Электронная версия справочника доступна по адресу http://www.allpetersburg.ru и позволяет находить нужные сведения по запросам пользователя. Данная страница документа также имеет фреймовую структуру и состоит из двух фреймов, причем первый из них имеет ширину 100 пикселов, а второй занимает всю оставшуюся ширину окна просмотра. Фрейм, расположенный с левой стороны, используется для графического меню, постоянно присутствующего на экране, а также содержит логотип компании "Nevalink". Второй фрейм содержит документ, который в данном случае представляет собой форму для запроса пользователя. Структура этой страницы определена следующим HTML-кодом:
Фреймы очень похожи на таблицы — и те и другие осуществляют разбиение окна просмотра браузера на прямоугольные области, в которых располагается некоторая информация. Однако при помощи фреймов можно решить не только задачу форматирования страниц документа, но организовать взаимодействие между ними. Принципиальная разница между фреймами и таблицами состоит в том, что каждому фрейму должен соответствовать отдельный HTML-документ, а содержимое всех ячеек таблицы всегда является частью одного документа. Кроме того, отображаемая во фрейме страница может прокручиваться при просмотре независимо от других. Совет
Если требуется только отформатировать документ, то для этого достаточно ограничиться применением таблиц. Если же необходимо решить более сложные задачи, например, организовать взаимодействие между подобластями окна или создать подобласти, постоянно расположенные на экране, то здесь удобно применить фреймы.
Правила описания фреймов
Перейдем теперь к рассмотрению правил записи тэгов, используемых для документов с фреймовыми структурами.
Фреймы определяются в структуре, называемой FRAMESET, которая используется для страниц, содержащих фреймы, вместо раздела BODY обычного документа. Web-страницы, составленные из фреймов, не могут содержать раздел BODY в своем HTML-коде. В свою очередь, страницы с разделом BODY не могут использовать фреймы.
Так как для страниц с фреймами не применяется раздел BODY, то нет возможности задать фоновое изображение и цвет фона для всей страницы в целом. Напомним, что эти установки определяются параметрами BACKGROUND и BGCOLOR, записываемыми в тэге BODY. Однако это не мешает в каждый фрейм загружать документы, имеющие свои параметры фона.
Контейнер из тегов
обрамляет каждый блок определений фрейма. Внутри контейнера