Фреймовая структура html
Фреймы
Фреймы — это HTML-элементы, позволяющие разделить окно веб-браузера на несколько независимых окон, в каждое из которых можно загрузить отдельный HTML-документ. Каждое такое окно (фрейм) может иметь собственные полосы прокрутки и функционировать независимо от других независимых окон либо наоборот управлять их содержанием. Они могут применяться для организации постоянно находящегося в одном окне меню, в то время как в другом окне располагается непосредственно сама информация. Пользователи могут обращаться к меню в любой момент, и им не нужно возвращаться к предыдущей странице, чтобы выбрать другой пункт меню. Применение фреймов позволит вам «закрепить» в окне браузера изображения или другие неподвижные по замыслу элементы интерфейса, в то время как остальная часть страницы будет прокручиваться во фрейме.
Однако, стоит отметить, что в наши дни фреймы считаются устаревшим средством, а сайты с фреймами теперь считаются несолидными, так как профессиональные веб-мастера никогда не используют фреймы в своих проектах. С фреймами связан целый ряд печально известных проблем. Они, например, сбивают с толку поисковые машины, поскольку на страницах, которые содержат контент, нет ссылок на другие документы. Если вы хотите получать посетителей с поисковых систем, забудьте о фреймах. Понравившуюся страницу пользователю невозможно поместить в раздел закладки браузера, так как фреймы скрывают адрес страницы, на которой он находится, и всегда показывают только адрес веб-сайта. По этой причине они создают проблемы для браузеров при отслеживании хронологии и еще они не слишком приспособлены для разных размеров экранов и мобильных устройств.
Несмотря на то, что проекты с фреймами встречаются во всемирной паутине все реже, изучение HTML было бы неполным без рассмотрения темы о фреймах. У фреймов наряду с недостатками есть и некоторые достоинства, которые не позволяют отбросить эту технологию как бесперспективную.
Создание фреймов
Структура HTML-документа с фреймами внешне очень напоминает формат обычного HTML-документа. Как и в обычном HTML-документе, весь код помещен между парными тегами и , а в контейнере располагаются заголовки. Основное отличие документа с фреймами от обычного HTML-документа — у документа с фреймами вместо тега применяется парный тег (от англ. frame set – набор фреймов).
В следующем примере приведена структура HTML-документа с фреймами:
Пример: Структура HTML-документа с фреймами
frame_left В приведенном примере страница содержит три области, в каждую из которых первоначально загружаются HTML-документы frame_top.html, frame_left.html и frame_right.html. Помимо HTML-документов, фрейм может содержать и графику. Для этого необходимо указать адрес соответствующего изображения в атрибуте src, например src=»http://wm-school.ru/html/image.gif». Обратите внимание, что элемент используется без закрывающего тега.
Области, полученные в результате такого разбиения страницы, и будут являться фреймами. Отсутствие этих атрибутов определяет один фрейм, который займет все окно браузера. В значении атрибутов rows и cols необходимо указывать не количество строк или столбцов, а значение ширины и высоты фреймов. Все значения в списке разделяются запятыми. Размеры могут быть указаны в абсолютных единицах (в пикселах) или в процентах:
Как видно из данного примера, контейнер с атрибутом rows вначале создает два горизонтальных фрейма, а вместо второго фрейма подставляется еще один , который разбивает нижний горизонтальный фрейм на две колонки с помощью атрибута cols, левая колонка занимает занимает 20%, а правая 80% окна браузера. Границы или пространство между фреймамиПо умолчанию, браузер отображает серую и, как правило, в виде трехмерной линии границу между фреймами, с помощью которой посетители могут регулировать размер фрейма. В следующем примере убираем границу между фреймами: Создание фреймовНесмотря на то, что сайты с фреймами встречаются все реже, изучение HTML было бы неполным без рассмотрения темы о фреймах. К тому же фреймы в каком-то смысле заняли свою нишу и применяются для систем администрирования и справки. Там, где недостатки фреймов не имеют особого значения, а преимущества наоборот, активно востребованы. Для создания фрейма используется тег , который заменяет тег в документе и применяется для разделения экрана на области. Внутри данного тега находятся теги , которые указывают на HTML-документ, предназначенный для загрузки в область (рис. 13.1). Рис. 13.1. Пример разделения окна браузера на два фрейма При использовании фреймов необходимо как минимум три HTML-файла: первый определяет фреймовую структуру и делит окно браузера на две части, а оставшиеся два документа загружаются в заданные окна. Количество фреймов не обязательно равно двум, может быть и больше, но никак не меньше двух, иначе вообще теряется смысл применения фреймов. Рассмотрим этапы создания фреймов на основе страницы, продемонстрированной на рис. 13.1. Нам понадобится три файла: index.html — определяет структуру документа, menu.html — загружается в левый фрейм и content.html — загружается в правый фрейм. Из них только index.html отличается по структуре своего кода от других файлов (пример 13.1). Пример 13.1. Файл index.html В случае использования фреймов в первой строке кода пишется следующий тип документа. Данный указывает браузеру, что он имеет дело с фреймами, эта строка кода является обязательной. Контейнер содержит типовую информацию вроде кодировки страницы и заголовка документа. Вот только учтите, что заголовок остается неизменным, пока HTML-файлы открываются внутри фреймов. В данном примере окно браузера разбивается на две колонки с помощью атрибута cols , левая колонка занимает 100 пикселов, а правая — оставшееся пространство, заданное символом звездочки. Ширину или высоту фреймов можно также задавать в процентном отношении, наподобие таблиц. В теге задается имя HTML-файла, загружаемого в указанную область с помощью атрибута src . В левое окно будет загружен файл, названный menu.html (пример 13.2), а в правое — content.html (пример 13.3). Каждому фрейму желательно задать его уникальное имя, чтобы документы можно было загружать в указанное окно с помощью атрибута name . Пример 13.2. Файл menu.html В данном примере серый фон на странице задается с помощью стилей, о которых речь пойдет далее. Пример 13.3. Файл content.html Рассмотрим более сложный пример уже с тремя фреймами (рис. 13.2). Рис. 13.2. Разделение страницы на три фрейма В данном случае опять используется тег , но два раза, причем один тег вкладывается в другой. Горизонтальное разбиение создается через атрибут rows , где для разнообразия применяется процентная запись (пример 13.4). Пример 13.4. Три фрейма Как видно из данного примера, контейнер с атрибутом rows вначале создает два горизонтальных фрейма, но вместо второго фрейма подставляется еще один , который повторяет уже известную вам структуру из примера 13.1. Чтобы не появилась вертикальная полоса прокрутки, и пользователь не мог самостоятельно изменить размер верхнего фрейма, добавлены атрибуты scrolling=»no» и noresize . лабы по информатике, егэлабораторные работы и задачи по программированию и информатике, егэ по информатике
HTML Урок 6. Фреймовая структура htmlФреймовая структура в HTMLС самого начала следует сказать, что прием использования фреймовой структуры хоть и очень удобен в некоторых случаях, тем не менее, использование структуры не желательно для коммерческих проектов. Элемент frameset
где n — ширина фреймов в процентах слева направо Синтаксис деления по горизонтали: где n — высота фреймов в процентах сверху вниз Фреймов в структуре может быть не два, а более. Файл с фреймовой структурой называется файлом-раскладкой и обычно называется index.html Как происходит загрузка файлов во фрейм рассмотрим на примере. Атрибуты тега frameset: Атрибуты элемента frame: Правила создания ссылки во фреймах в htmlЕсли представить структуру, в которой слева находится фрейм с меню сайта, а справа фрейм, предназначенный для вывода содержимого выбранных пунктов меню, то становится очевидна следующая проблема:
Выпуск №14. Фреймы в HTMLДата публикации: 2009-07-30 Всем доброго времени суток! С Вами Бернацкий Андрей. Прежде, чем перейти непосредственно к статье, я Вам хочу дать ссылку на видео-версию данной темы: В этом выпуске мы поговорим о фреймах в HTML. Фреймы по своей сути очень похожи на таблицы, но в отличие от таблиц, каждый фрейм независим и в каждом из них может быть отдельная web страница со своим адресом. Практический курс по верстке адаптивного сайта с нуля! Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3 На рисунке видим достаточно распространенную структуру сайта. Ее можно представить в виде таблицы, а можно все это сделать при помощи фреймов. В верхний фрейм можно загрузить страницу с логотипом и меню, в левый – страницу с навигацией по сайту, в центральном фрейме будет страница с основным содержимым сайта, в правый фрейм загрузим страницу с рекламными баннерами, а в нижний – страницу с контактной информацией. Вот вкратце что такое фреймы. Теперь рассмотрим, как это все можно осуществить. Особенностью документа, содержащего фреймы, является то, что он не содержит контейнера BODY. Вместо него используется контейнер FRAMESET. Общий синтаксис фреймов выглядит следующим образом: В контейнере …. располагаются теги , которые определяют содержимое фреймов. У тега есть два параметра: rows = число – количество строк (горизонтальных подокон). cols = число – количество столбцов (вертикальных подокон). Вообще говоря, значение параметров rows и cols задаются не совсем числами, а перечислением чисел через запятую. Сколько будет идти чисел, столько строк или столбцов и будет, а числа определяют размер фрейма. Главное, чтоб сумма этих чисел составляла всю ширину экрана. Давайте, разберем это на примере, и все будет понятно. Сейчас создадим фреймовый документ следующего вида: Код, который определит нам такую структуру фрейма, будет выглядеть так: В первой строке приведенного кода открывается контейнер frameset, в параметре cols указано, что будет три вложенных фрейма. У первого ширина будет 30% от всей ширины экрана. У третьего ширина будет тоже 30% от всей ширины экрана. А второй фрейм займет все оставшееся место. Да символ «*»(звездочка) означает занять все оставшееся место на экране. Кстати, рассмотрим, каким образом фреймам можно задавать размеры в параметрах cols и rows: Можно задать размер, поставив просто число. Это число, будет определять размер фрейма в пикселях. Можно задать значение ширины в процентах. Причем, если сумма процентов всех колонок будет превышать 100%, то все фреймы пропорционально уменьшаться, что бы общая сумма было равна 100%. Аналогично ситуация будет, если сумма процентов всех колонок будет менее 100%, то все фреймы пропорционально увеличатся, что бы общая сумма было равна 100%. Можно задавать размер фрейма символом “*” (звездочка). Это означает, что фрейм должен занять все оставшееся место. Если будет указано, например , то есть две звездочки, то все оставшееся место будет поровну разделено между этими двумя фреймами (в данном случае по 40%). Можно комбинировать варианты задания размеров фреймов в HTML. Например: Этот код означает, что у первого фрейма размер будет 70 пикселей, у третьего 40% ширины экрана, а второй займет все оставшееся место. С первой строкой кода разобрались полностью. Идем дальше. Далее следуют теги . Поскольку через запятую в параметре cols тега frameset задано три числа (то есть будет три фрейма), то и тегов должно быть тоже три. Значением параметра src является адрес web страницы, которая будет загружаться в данный фрейм. Адрес, как видно из примера, может быть абсолютным и относительным. И в последней строке закрывается контейнер . Если заменить в первой строке кода параметр cols на rows, то мы получим такой же фреймовый документ, состоящий из трех фреймов. Только разбиение на фреймы будет идти по вертикали. Параметры rows и cols одновременно использовать нельзя. Это приводит к ошибкам, и неверному отображению содержимого. У всех сейчас возник вопрос о том, как создать такую структуру, о которой я говорил в самом начале статьи. К этому вернемся чуть позже, а пока обратимся к тому, что у нас сейчас происходит в браузере. В браузере мы видим три страницы, каждая из которых находится в своем фрейме. При этом мы, наведя курсор мыши к границам фреймов, можем изменять размеры фреймов, так же видны полосы прокрутки и границы между фреймами. Это не всегда нужно, даже скорее совсем не нужно. А всем этим можно управлять благодаря параметрам тегов frame и frameset. Параметры тегов frame и frameset: src =»url» – обязательный параметр. Указывает адрес страницы, которая будет отображена внутри фрейма. Используется только для frame. noresize – отменяет возможность изменения размеров. Используется только для frame. scrolling=»yes/no/auto» – определяет наличие полос прокрутки. Значение yes – указывает на присутствие полос прокрутки. Значение no – указывает, что полос прокрутки не будет. При значение auto – браузер сам определяет, будут ли полоски прокрутки. Используется только для frame. name=»frame-name» – имя фрейма. Данный параметр используется для взаимодействия между фреймами. Подробнее о нем поговорим чуть позже. Используется только для frame. border=число – толщина границ между фреймами. Если принимает значение 0, то границы между фреймами не отображаются. Используется только для frameset. framespacing=»число» – расстояние между фреймами. Используется только для frameset. Используя эти параметры, можно получить страницу, у которой не отображаются границы между фреймами, нет возможности изменять размеры фреймов и у двух последних фреймов запретим скроллинг. Код такой страницы выглядит следующим образом: Adblockdetector |