что такое фреймы на сайте
Фреймы
Фреймы разделяют окно браузера на отдельные области, расположенные рядом друг с другом. В каждую из таких областей загружается самостоятельная веб-страница. Поскольку вокруг фреймов существует много разговоров об их необходимости, далее приведем достоинства и недостатки фреймов, чтобы можно было самостоятельно решить стоит ли их использовать на своем сайте.
Достоинства фреймов
Простота
С помощью фреймов веб-страница разграничивается на две области, которые содержат навигацию по сайту и его контент. Механизм фреймов позволяет открывать документ в одном фрейме, по ссылке, нажатой в совершенно другом фрейме. Такое разделение веб-страницы на составляющие интуитивно понятно и логически обусловлено.
Быстрота
Для верстки без фреймов характерно размещение на одной странице и навигации и содержания. Это увеличивает объем каждой страницы и в сумме может существенно повлиять на объем загружаемой с сайта информации. А так как фреймы используют разделение информации на части, страницы с ними будут загружаться быстрее.
Размещение
Фреймы предоставляют уникальную возможность — размещение информации точно в нужном месте окна браузера. Так, можно поместить фрейм внизу браузера и независимо от прокручивания содержимого, эта область не изменит своего положения.
Изменение размеров областей
Можно изменять размеры фреймов «на лету», чего не позволяет сделать традиционная верстка HTML.
Загрузка
Загрузка веб-страницы происходит только в указанное окно, остальные остаются неизменными. С помощью языка JavaScript можно осуществить одновременную загрузку двух и более страниц во фреймы.
Недостатки фреймов
Навигация
Пользователь зачастую оказывается на сайте, совершенно не представляя, куда он попал, потому что всего лишь нажал на ссылку, полученную в поисковой системе. Чтобы посетителю сайта было проще разобраться, где он находится, на каждую страницу помещают название сайта, заголовок страницы и навигацию. Фреймы, как правило, нарушают данный принцип, отделяя заголовок сайта от содержания, а навигацию от контента. Представьте, что вы нашли подходящую ссылку в поисковой системе, нажимаете на нее, а в итоге открывается документ без названия и навигации. Чтобы понять, где мы находимся или посмотреть другие материалы, придется редактировать путь в адресной строке, что в любом случае доставляет неудобство.
Плохая индексация поисковыми системами
Поисковые системы плохо работают с фреймовой структурой, поскольку на страницах, которые содержат контент, нет ссылок на другие документы.
Внутренние страницы нельзя добавить в «Закладки»
Фреймы скрывают адрес страницы, на которой находится посетитель, и всегда показывают только адрес сайта. По этой причине понравившуюся страницу сложно поместить в закладки браузера.
Несовместимость с разными браузерами
Параметры фреймов обладают свойством совершенно по разному отображаться в различных браузерах. Причём противоречие между ними настолько явное, что одни и те же параметры интерпретируются браузерами совершенно по-своему.
Непрестижность
Весьма странный недостаток, который не имеет никакого отношения к техническим особенностям создания сайта, а носит скорее идеологический характер. Сайты с фреймами считаются несолидными, а их авторы сразу выпадают из разряда профессионалов, которые никогда не используют фреймы в своих работах. Исключение составляют чаты, где без фреймов обойтись хотя можно, но достаточно хитрыми методами, а с помощью фреймов создавать чаты достаточно просто.
Надо отметить, что некоторые приведённые недостатки вполне обходятся. Так, с помощью скриптов можно сделать, что открытый в браузере отдельный документ формируется со всей фреймовой структурой. Поисковые системы также уже лучше индексируют фреймовые документы, чем это было несколько лет назад.
Фреймы
Фреймы – это прямоугольные области экрана, каждая из которых содержит свой собственный html-документ. Фреймы использовались для оформления следующих документов:
Тег заменяет тег и используется для разделения экрана. Имеет закрывающий тег.
Атрибуты тега
Пример
Пример
Обратите внимание также на различие в порядке нумерации фреймов.
Атрибуты тега
Пример
Использование тега a для загрузки во фрейм
С помощью тега гиперссылки можно загрузить документ в определенный фрейм.
Атрибуты
В следующем примере экран разбивается на две вертикальные области. В меньшей левой части находится оглавление, а в правую будут загружаться все остальные html-документы. В файле оглавления находятся простые текстовые гиперссылки на соответствующие разделы. Чтобы все работало, необходимо создать html-документы в файлах cosm.htm, eat.htm, perf.htm, massage.htm и manic.htm.
Пример
Использование тега даст возможность уменьшить размер файла оглавления left.htm предыдущего примера.
Пример
Специальные эффекты, получаемые с помощью атрибута target
Как уже упоминалось, имена фреймов не могут начинаться с символа подчеркивания, так как с него начинаются служебные имена, передающие браузеру особую информацию. Ниже перечислены специальные имена, каждое из которых используется для достижения определенного эффекта.
В основном эти служебные имена предназначены для того, чтобы тем или иным способом «вырваться» из текущей фреймовой структуры. Поэкспериментируйте с ними, чтобы понять, как можно загружать документы в различные окна.
С помощью тега можно поместить один фрейм в обычный html-документ. Закрывающий тег обязателен!
Атрибуты тега
Определяет, что будет показано в окне браузера, если он не поддерживает фреймы.
Как загрузить фрейм без дополнительных файлов?
Чтобы загрузить фрейм без использования внешних файлов, необходимо положить в переменную html-код фрейма, а затем в качестве SRC тега указать «javascript:parent.имя переменной«.
Проблема адресной строки при фреймовой структуре сайта
При использовании фреймов на сайте используется одна страница, которая указывает местоположение фреймов.
Приведём пример такой страницы:
После загрузки этой страницы происходит загрузка информации во фреймы. Внутри этих фреймов происходят все переходы пользователя по страницам сайта. В адресной строке всегда отображается только путь к начальной странице, который не изменяется при переходах. Посетитель не знает, где он находится в данный момент.
Если посетитель сразу попадает не на главную страницу сайта (например, из поисковика), то это не приводит к воссозданию общей структуры фреймов. Это является причиной того, что владелец сайта не может указать адрес на внутреннюю страницу сайта.
Есть несколько путей решения этой проблемы
Ранее был рассмотрен пример фреймовой структуры. Будем рассматривать различные способы решения этой проблемы именно на нём.
Возможны три случая:
В первом случае после выполнения проверки никаких действий не требуется. Второй и третий практически идентичны, поэтому далее будем рассматривать только второй случай.
Итак, посетитель попадает «куда не надо». В самое начало страницы вставляем скрипт, который будет создавать фреймовую структуру.
Реализация решения возможна как на стороне клиента, так и на стороне сервера.
JavaScript-решение
Вначале проверяем окружение страницы, а затем, в случае отсутствия требуемой фреймовой структуры, создаём её.
Создадим файл frame.js:
К каждой странице сайта подключаем файл frame.js. Теперь страницы сайта будут иметь такую структуру:
При таком подходе к решению данной задачи исчезает необходимость в файле, содержащем фреймовую структуру.
PHP-решение
При таком подходе сайт станет доступным большему числу посетителей.
Проверять окружение страницы будем по другому (не так, как при использовании JavaScript). Загрузку документа во фрейм будем выполнять с параметром frames=yes. При открытии страницы проверяем этот параметр, и в случае необходимости динамически создаём фреймовую структуру. Ниже приведён код, который за это отвечает.
Помещаем код в файл frames.php. Теперь необходимо подключить его к каждой странице сайта. Ниже приведён пример такой страницы.
В данном случае, как и при реализации на стороне клиента нет необходимости отдельно создавать html документ, описывающий фреймовую структуру.
Фреймы в html
В статье о фреймах в HTML я расскажу о том что это такое, как их правильно использовать и вставлять.
В переводе с английского, фрейм это рамка. И в HTML (что такое HTML?) значение похожее. Фрейм — это совершенно отдельный прямоугольный элемент (область) окна браузера, который содержит и показывает свой HTML-документ. Да, в вместе с другими документами в одном и том же окне браузера. Чудеса!
Фрейм это как отдельная ячейка таблицы, содержание которой подгружается с другой страницы. Фреймы универсальны и независимы друг от друга, каждый из фреймов размещенных на странице может иметь свой адрес и свои подгружаемые стили.
Самое главное, что если вы нажмете на ссылку во фрейме, подгружаться это все дело будет внутри фрейма, не затрагивая остальные элементы вебсайта. Именно поэтому фреймы раньше довольно часто использовались для навигации по сайту. Сейчас используют классический вариант (как вставить правильно ссылку в HTML?)
На сегодняшний день, в 2016 году, использовать фреймы на сайтах не рекомендуется в основном представителями поисковых сервисов. Связано это с тем что ПС приводят пользователя на определенную страницу, определяя ее текстовую релевантность, а вот во фрейме вебмастер может подгружать что угодно, поэтому поисковый робот сталкивается с препятствиями определения релевантности такой страницы.
Но небольшим элементам сайта это не вредит — например когда идет речь о встраивании видео при помощи iframe с видеохостинга Youtube.com.
Правила вставки фреймов
Пример использования трех и двух :
Либо такой вариант, показываю для примера использования вместе с разметкой html страницы:
Последний пример фрейма в HTML:
Как вы видите, frameset в данном случае указывает браузеру, как разбить окно браузера на две-три области — в данном случае тег используется вместо тегов
Фреймы (теги frame, frameset, noframe, iframe)
Наверняка Вы уже не один раз слышали о таком понятие, как фреймы. Прочитать о них можно в любом html-учебнике, а также на ресурсах о создании сайтов. Изучив множество примеров и описаний, я решил рассказать все о фреймах своими словами в очень простой форме. О плюсах, о минусах и о будущем фреймов будет сказано в самом низу этой страницы. Итак, что же такое фреймы в html?
Что такое Фреймы в html
Не пугайтесь, что это звучит немного непонятно. Давайте сразу приведем самый простой пример и тогда все станет ясно.
Отройте помощь (help) в любой программе (это может быть блокнот, какая-то программа, браузер и т.п.). Практически всегда Вы увидите хелп состоящий из двух частей (слева навигация, справа содержимое). Левая и правая части как раз и являются отдельными фреймами. Ниже представлен скриншот сделанный из хелпа самого обыкновенного блокнота Windows:
То что Вы видите, является веб-страничкой состоящий из двух отдельных независимых фреймов. Приведем примерный html код такого фрейма из хелпа.
Пример с фреймами №1 (делаем помощь)
В каркасе выше рассмотренный хелп будет выглядеть следующим образом:
Разбиение страницы на области с помощью фреймов очень напоминает табличную верстку html (см. HTML тег table). Примерный код такой страницы может выглядеть следующим образом:
Пояснение к примеру №1
Кстати, обратите внимание, что для тега не нужен закрывающий тег.
Надеюсь, что теперь у Вас есть представления о фреймах. Чтобы понять более трудные примеры, давайте попробуем создать простую html-страницу состоящую из 4 фреймов. Это будет пример №2.
Пример с 4 фреймами №2
Каркас для примера 2:
Код исходной html-страницы с фреймом будет следующий:
Код файла menu.html
Код файла content.html
Код файла about-site.html
Код файла about-autor.html
Код файла footer.html
Пояснение к примеру №2
Если вы реализуете пример №2, то должны получить такую html-страницу в исходном состоянии:
При переходе на страницу о сайте страница будет выглядеть следующим образом:
При переходе на страницу об авторе вы увидите следующие:
Тег нужен для вставки внешнего фрейма на страницу. Типичным примером может являться код видео из youtube. Формат этого тега выглядит очень просто:
Атрибуты и свойства тега
1. Атрибут COLS=»Параметры»
Задает количество разбиений страницы по вертикали.
2. Атрибут ROWS=»Параметры»
Задает количество разбиений страницы по горизонтали.
Теперь рассмотрим каким образом можно задать параметры разбиение.
б) С помощью процентов от общей ширины/высоты. В рассмотренных выше примерах мы использовали именно процентное разбиение, поэтому приводить пример мне кажется бессмысленно.
в) С помощью * (звездочки). Например, cols = «2*,3*,100» задает первые две области в соотношение 2:3, а третья область будет шириной в 100 пикселей.
3. Атрибут frameborder=»
Определяет наличие рамки у фрейма. Если ответ yes, то следующий четвертый атрибут border имеет силу.
4. Атрибут border=»параметр»
В пикселях border задает толщину обводки области фрейма. Например, frameborder = «2» задает область с выделенным контуром в 2 пикселя.
5. Атрибут bordercolor=»цвет»
Определяет цвет рамки, если она есть. Цвет можно задать как словами, так и кодом (см. цветовая палитра html).
Атрибуты и свойства тега
1. Атрибут src=»https://zarabotat-na-sajte.ru/uroki-html/%D0%B0%D0%B4%D1%80%D0%B5%D1%81%20%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%B0″
В качестве параметра здесь должен указываться полный URL к адресу элемента. Этот атрибут обязателен. Он уже знаком Вам, т.к. он присутствовал в примерах 1 и 2.
2. Атрибут marginwidth=»число»
Задает отступ внутри фрейма от границ в пикселях по ширине. Например, marginwidth=»10″ задаст отступ содержимого слева и справа от границы фрейма.
3. Атрибут marginhight=»число»
Аналогичен второму с той лишь разницей, что задает отступ по высоте.
4. Атрибут scrolling=»
Задает возможность прокрутки фрейма, в случае если он не смог уместиться в рамки отведенной ему области. По умолчанию стоит значение auto (означает, что при необходимости создавать скролл).
5. Атрибут noresize
Если установлен этот атрибут, то пользователю запрещается самостоятельно менять границы фрейма. По умолчанию этот атрибут не стоит и пользователь может менять границы как хочет.
5. Атрибут name=»название»
С помощью этого атрибута можно давать фрейму имя. Это нужно для того, чтобы к этому фрейму могли обращаться другие фреймы. В примере №2 как раз рассматривается такой случай.
Примечание:
Имя не должно начинаться с нижнего подчеркивания «_».
6. Атрибуты frameborder, border и bordercolor
Эти три атрибута такие же как и у frameset (см. атрибуты frameset выше).
Преимущества и недостатки фреймов
Плюсы фреймов
Минусы фреймов
Будущее фреймов:
От фреймов уже давно стали отказываться многие вебмастеры. Это связано с трудностями продвижения в поисковиках. Сейчас все переходят на Ajax, как более динамичный и современный способ отображения информации на одной странице сайта.
Уважаемый читатель, мы рассмотрели теги html документа касающиеся фреймов. Несмотря на сомнительное будущее этого направления, знать про фреймы должен каждый вебмастер.
Ссылка на следующий урок: Урок 12. Свойство CSS position
Фреймы
Фреймы — это HTML-элементы, позволяющие разделить окно веб-браузера на несколько независимых окон, в каждое из которых можно загрузить отдельный HTML-документ. Каждое такое окно (фрейм) может иметь собственные полосы прокрутки и функционировать независимо от других независимых окон либо наоборот управлять их содержанием. Они могут применяться для организации постоянно находящегося в одном окне меню, в то время как в другом окне располагается непосредственно сама информация. Пользователи могут обращаться к меню в любой момент, и им не нужно возвращаться к предыдущей странице, чтобы выбрать другой пункт меню. Применение фреймов позволит вам «закрепить» в окне браузера изображения или другие неподвижные по замыслу элементы интерфейса, в то время как остальная часть страницы будет прокручиваться во фрейме.
Однако, стоит отметить, что в наши дни фреймы считаются устаревшим средством, а сайты с фреймами теперь считаются несолидными, так как профессиональные веб-мастера никогда не используют фреймы в своих проектах. С фреймами связан целый ряд печально известных проблем. Они, например, сбивают с толку поисковые машины, поскольку на страницах, которые содержат контент, нет ссылок на другие документы. Если вы хотите получать посетителей с поисковых систем, забудьте о фреймах. Понравившуюся страницу пользователю невозможно поместить в раздел закладки браузера, так как фреймы скрывают адрес страницы, на которой он находится, и всегда показывают только адрес веб-сайта. По этой причине они создают проблемы для браузеров при отслеживании хронологии и еще они не слишком приспособлены для разных размеров экранов и мобильных устройств.
Несмотря на то, что проекты с фреймами встречаются во всемирной паутине все реже, изучение HTML было бы неполным без рассмотрения темы о фреймах. У фреймов наряду с недостатками есть и некоторые достоинства, которые не позволяют отбросить эту технологию как бесперспективную.
Создание фреймов
Пример: Структура HTML-документа с фреймами
В значении атрибутов rows и cols необходимо указывать не количество строк или столбцов, а значение ширины и высоты фреймов. Все значения в списке разделяются запятыми. Размеры могут быть указаны в абсолютных единицах (в пикселах) или в процентах:
Границы или пространство между фреймами
В следующем примере убираем границу между фреймами: