Использование фреймов в HTML. Создание фреймов Атрибуты тега Frame для настройки внешнего вида окон
Что такое фреймы?
Чтобы сделать сайт более функциональным, разместить большое количество информации и ссылок в наиболее удобной для посетителя форме, вовсе необязательно использовать flash-технологии. Все это возможно силами языка html, на котором можно создать фреймы.
Говоря обывательским языком, фреймы – это дополнительные полосы прокрутки в одном окне. Попадая на сайт, посетитель видит на одной и той же странице как бы сразу два окна – один, как правило, с пунктами меню или иной важной информацией, а другой – с контентом (текстом, ценами и т.д.). В этом случае посетитель может с большим удобством просматривать достаточно объемные страницы и иметь перед глазами самую важную информацию одновременно.
Если углубиться в детали, то страница с фреймами состоит, как минимум, сразу из трех html-страниц – двух видимых пользователю и одной служебной (координирующей показ фреймов). Видимые страницы и являются фреймами, на которые можно попасть и по отдельности, и одновременно.
Несомненно, важным преимуществом использования фреймов является высокое качество юзабилити. Интерфейс страницы становится в разы удобнее, чем при использовании стандартных способов разметки.
В свое время, 5-6 лет назад, фреймы завоевали популярность среди многих вебмастеров. Сегодня они используются только на тех сайтах, где без них обойтись просто невозможно, так как, к сожалению, фреймы имеют существенные недостатки в плане продвижения.
Фреймы - хорошо или плохо?
Рассматривать полезность фреймов можно с трех позиций – с позиции пользователя, с позиции seo-специалиста и вебмастера.
В первом случае отношение к фреймам неоднозначное. С одной стороны, без них иногда просто не обойтись, и они с успехом заменяют открывающиеся в других окнах служебные страницы. Да и юзабилити больших по размеру страниц фреймы делают только лучше, ведь пользователь может в любой момент воспользоваться меню в другом окне.
С другой стороны, они не очень-то и улучшают дизайн страницы. Довольно сложно добиться хорошего внешнего вида, если используются фреймы. И, конечно, далеко не все браузеры поддерживают фреймы, что может оттолкнуть целую армию потенциальных покупателей, клиентов или просто посетителей.
С позиции вебмастера использование фреймов облегчает составление страниц и доведение до ума интерфейса. Ведь куда проще создать одну страницу со всем меню и другой важной информацией, чем вмещать этот контент на каждую страницу сайта. Впрочем, на этом упрощения заканчиваются и начинаются сложности, о которых неспециалисту знать необязательно. Тем более, что сейчас уже почти никто с чистым html не работает – CMS позволяют делать все автоматически.
Позиция seo-специалиста куда более жесткая. Фреймы просто не пропускают поисковых роботов дальше главной страницы. Конечно, существуют некоторые хитрости, которые позволяют индексировать и внутренние страницы сайта, однако все же это именно «хитрости», которые не одобряет ни одна поисковая система .
Влияние фреймов на раскрутку сайта.
Каким бы опытным ни был специалист по раскрутке сайтов , он не сможет дать никаких гарантий в продвижении, если на ресурсе используются фреймы. К сожалению, данная технология входит в «черный список» элементов, усложняющих поисковое продвижение, наряду с flash и ворованным контентом. Но последний еще может быть не замечен, а вот о фреймах такого не скажешь.
Итак, как и чем влияет использование фреймов на раскрутку?
Влияние это серьезное. Дело в том, что именно на фреймах расположены все важные ссылки на внутренние страницы сайта. И для того, чтобы их прописать, верстальщику не нужно использовать теги …. А именно по этому тегу поисковой робот и определяет, что перед ним – ссылка, по которой можно зайти на другую страницу и проиндексировать ее (либо добавить к ее ссылочному весу еще пару «хлебных крошек»).
Поисковыми роботами индексируется только первая – главная – страница, на которую они попадают с посторонних ресурсов. Другие страницы остаются закрытыми для Яндекса и Гугла – ведь даже с других сайтов на них невозможно поставить ссылку из-за того, что фреймы скрывают истинные адреса страниц.
Продвигать эффективно одну главную страницу сегодня уже невозможно – на ней невозможно указать все запросы , да и ПС будет куда подозрительнее относиться к такому «одностраничнику».
Конечно, «народные умельцы» уже придумали способ проиндексировать внутренние страницы, поставив ссылки на них в установочный документ фреймов, да и адреса все-таки можно узнать, открыв страницу фрейма отдельно. Но нужны ли все эти сложности, если, отказавшись от таких технологий, можно добиться большего?
Здравствуйте, уважаемые читатели блога сайт. Сегодня речь пойдет о фреймах в языке Html. Понятное дело, что начнем мы сначала, а именно с того, что это такое за зверь. Так же поговорим о настоящем (Frame) и будущем (Iframe) этих элементов в языке гипертекстовой разметки текущей версии и в новом стандарте Html 5 при .
В конце статьи, после детального описания процесса создания встроенных фреймов и их классической структуры в Html коде (уже редко используется), мы затронем вопрос актуальности построения сайта на них, а так же обсудим возможные способы их применения в текущий период времени на примере моего блога.
Что это такое и чем отличается Iframe от Frame
Что же это такое? Оказывается, что они могут использоваться не только на сайтах, но и в каких-либо приложениях к программам, но отличаются тем, что окно web страницы или же приложения будет разделено на несколько областей, в каждую из которых загружен какой-то отдельный документ. Причем, эти области фреймов ведут себя не зависимо друг от друга.
Наверное, самый наглядный пример их использования, с которым сталкивались практически все из вас, это так называемые файлы помощи (хелпы), которые имеются у многих программ установленных на вашем компьютере.
В левое окно загружен файл с меню хелпа, а в правом выводится соответствующий выбранному пункту меню документ. Примечательно, что такая структура позволяет не подгружать в левое окно повторно файл с меню при открытии нового документа в правом. Именно в этом и состоит основное преимущество использования фреймов в Html.
Собственно, само название этих элементов следует трактовать именно как самостоятельное окно. С помощью фреймов у нас появляется возможность разбить одно большое окно на несколько фрагментов, которые в свою очередь могут служить приемниками для отдельных независимых друг от друга документов (страниц, текстов, изображений, видео и т.п.).
Как создается фреймовая структура в языке гипертекстовой разметки? Если говорить про стандарт Html 4.01 (по классификации ), который является основным на текущий момент времени, то для этого используются три элемента — Frame, Frameset и Noframes.
Iframe — встроенный фрейм в стандарте Html 5
Если же говорить про стандарт Html 5 (наше будущее, некоторые элементы которого уже поддерживаются многими браузерами), то там тегов Frame, Frameset и Noframes, а равно и классической фреймовой структуры уже не будет, вместо них предусмотрен один единственный тэг Iframe (встроенный фрейм), о котором мы и поговорим в начале, а потом уже все внимание обратим на классическую схему из версии 4.01, которая сейчас, собственно, и используется.
Iframe в отличии от классики, которая рассмотрена ниже, не требует замены тега Body на теги Frameset. Т.е. этот тег можно будет вставлять на обычные страницы, например, внутри параграфа или в любом другом месте. По своей сути этот элемент очень похож уже на рассмотренный нами тег Img.
Он является строчным с замещаемым контентом, потому что ведет себя в точности как строчный элемент, но вот внутри него отображается посторонний внешний контент . Таких элементов в языке Html всего четыре — Img, Iframe, Object и Embed. Поэтому наш герой подразумевает наличие внешнего файла, который будет подгружаться в область, размер которой задается с помощью атрибутов этого тега.
Т.о. Iframe является сточным элементом, в который загружается внешний объект (например, видеоролик). А для указания пути до этого файла, который должен подгружаться на странице, служит специальный атрибут Src. Но в отличии от Img элемент Iframe парный, т.е. имеется еще и закрывающий тег :
В данном примере показан вывод на странице видеоролика с Youtube с помощью Iframe. Для того, чтобы ограничить область фрейма (окна), куда будет подгружаться внешний файл, предусмотрены атрибуты Width и Height , значения которых задаются в пикселах:
Т.е. этот тег создает область, в которую загружается какой-то внешний объект (не важно, с вашего ли сайта или же с другого ресурса). Ширина и высота области задаются с помощью Width и Height, а в атрибуте Src указывается путь до этого объекта.
Все эти атрибуты элемент Iframe унаследовал от подобных ему строчных тегов с замещаемым контентом (типа уже упомянутого выше Img). Ну, и еще у картинок он взял и атрибуты Hspace и Vspace , которые позволяют задать отступы от границ фрейма до обтекающего его текста.
Так же показательно, что выравнивание встроенного фрейма осуществляется абсолютно так же, как мы это могли видеть при изучении картинок в Html — . Все тот же Align , но уже для тега Iframe с возможными значениями Bottom, Top, Middle, Left и Right.
Но этот элемент взял так же и несколько атрибутов от тэга Frame из классической фреймовой структуры, о которой мы очень и очень подробно поговорим ниже по тексту. К таким атрибутам относится Name, значение которого можно использовать в качестве значения для того, чтобы нужный вам документ при переходе по ссылке открывался именно в окне этого фрейма (подробности читайте ниже).
Так же в Iframe из тега Frame перекочевал атрибут Frameborder, который имеет только два значения — либо 0 (рамка вокруг фрейма не отображается), либо 1 (рамка видна). По умолчанию используется значение Frameborder=1, поэтому для ее удаления вам потребуется прописать Frameborder="0":
Из Frame в этот элемент перешел еще и атрибут Scrolling, имеющий по умолчанию значение Auto — полосы прокрутки во фрейме будут появляться по мере необходимости, когда контент будет больше по размеру окна, предназначенного для его отображения.
Ну, и атрибуты Marginwidth и Marginheight тоже перешли из элемента Frame. Они будут подробно рассмотрены ниже по тексту, но в двух словах — они позволяют задать отступ по ширине и высоте от краев фрейма до контента, который в него помещается.
Как я уже упоминал, наглядным примером использования Iframe является :
Вставив Iframe напрямую в web страницу, вы получите вывод ролика с ютуба. Делаем вывод, что этот элемент является помесью строчных элементов с замещаемым контентом и, собственно, классических фреймов, о которых сейчас и пойдет речь.
Фреймы на основе тегов Frame и Frameset — их структура
Итак, создание классической фреймовой структуры начинается с того, что вы прописываете в Html коде вместо открывающего и закрывающего тега Body, который обычно должен присутствовать в любом документе, заменяющий его контейнер на основе элементов Frameset .
Принципиальным моментом является как раз то, что элемент Body в этом случае использовать нельзя — либо Body (для обычного документа), либо Frameset (при создании фреймовой структуры документа):
Каждый фрейм, который мы с вами формируем внутри главного, создается с помощью отдельного элемента Frame . Этот тег является одиночным и в нем мы задаем путь до того документа, который должен будет подгружаться в это окно.
Третий элемент, который мы еще с вами не затронули — это Noframes . Он парный и позволяет написать внутри себя какой-то текст, который будет обработан браузером и отображен на web странице только в том случае, если этот самый браузер (или другое устройство отображения) не поддерживает фреймы. Это может произойти, например, в случае использования какого-нибудь обозревателя для мобильных устройств.
Обычно в Noframes добавляют не только информацию о сложившейся ситуации с невозможностью обработки фреймовой структуры, но и добавляют так же возможность перейти на другие страницы, где можно будет продолжить работу без их использования. Сказать о нем что-то еще трудно, поэтому продолжим.
Получается так, что элемент Frameset, используемый заместо тега Body, занимает все место, которое отведено для области просмотра, а уже внутри этой области будут создаваться фреймы с помощью отдельных элементов Frame. В связи с этим возникает вопрос — как делить область просмотра между отдельными окнами или, другими словами, как задать размер каждого из них.
Делается это с помощью добавления соответствующих атрибутов к элементу Frameset. Их имеется целых два — Cols и Rows . Cols задает разделение большого окна на вертикальные фреймы или же колонки, а Rows позволяет разделить его на горизонтальные окна или же строки.
Создание структуры на основе Frameset и его атрибутов Cols и Rows
В качестве значений для Cols и Rows Html тега Frameset выступают числа, проставленные через запятую (без пробелов). Эти числа задают пропорции тех окон, которые мы с вами хотим получить в результате. Следовательно, сколько будет написано чисел через запятую в Cols или в Rows, столько у нас фреймов и должно будет получиться в результате.
Например, с помощью такой записи мы получим три вертикальных колонки, которые по ширине будут соответствовать пропорциям 2:5:3.