Образцы структурных схем страниц (wireframes) от ведущих ux-дизайнеров

Значение и применение

Тег (HTML Inline Frame Element) определяет встроенную в веб-страницу область, которая может отображать содержимое отдельно взятого документа (например, *.pdf), медиа-контента или другого веб-сайта в заданном пространстве. Содержимое внутри области существует независимо от окружающей страницы.

Синтаксис для добавления фрейма:

, где src атрибут, который определяет местоположение документа или веб-сайта.

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

Что такое Фреймы в html

Фрейм (англ. frame) — некоторая подключаемая независимая область на веб-странице.

Не пугайтесь, что это звучит немного непонятно. Давайте сразу приведем самый простой пример и тогда все станет ясно.

Отройте помощь (help) в любой программе (это может быть блокнот, какая-то программа, браузер и т.п.). Практически всегда Вы увидите хелп состоящий из двух частей (слева навигация, справа содержимое). Левая и правая части как раз и являются отдельными фреймами. Ниже представлен скриншот сделанный из хелпа самого обыкновенного блокнота Windows:

Рис 1. Использования фреймы на примере хелпа блокнота

То что Вы видите, является веб-страничкой состоящий из двух отдельных независимых фреймов. Приведем примерный html код такого фрейма из хелпа.

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

ПµÃÂõÃÂþô ÿþ ÃÂÃÂÃÂûúõ ò þñÃÂÃÂýþü HTML-ôþúÃÂüõýÃÂõ þÃÂÃÂÃÂõÃÂÃÂòûÃÂõÃÂÃÂàÃÂûõôÃÂÃÂÃÂøü þñÃÂð÷þü: ýðöøüðõÃÂõ ÃÂÃÂÃÂûúàø ÃÂõúÃÂÃÂøù ôþúÃÂüõýà÷ðüõýÃÂõÃÂÃÂàýþòÃÂü ò ÃÂõúÃÂÃÂõü ûøñþ ò ýþòþü þúýõ ñÃÂðÃÂ÷õÃÂð. ÃÂÃÂø øÃÂÿþûÃÂ÷þòðýøø ÃÂÃÂõùüþò ÃÂÃÂõüð ÷ðóÃÂÃÂ÷úø html-ôþúÃÂüõýÃÂþò þÃÂûøÃÂðõÃÂÃÂàþàþñÃÂÃÂýþù ø óûðòýþõ þÃÂûøÃÂøõ â ÃÂÃÂþ òþ÷üþöýþÃÂÃÂà÷ðóÃÂÃÂöðÃÂàhtml-ôþúÃÂüõýàò þôøý ÃÂÃÂõùü ø÷ ôÃÂÃÂóþóþ ÃÂÃÂõùüð.
ÃÂûà÷ðóÃÂÃÂ÷úø ôþúÃÂüõýÃÂð ò þÿÃÂõôõûõýýÃÂù ÃÂÃÂõùü øÃÂÿþûÃÂ÷ÃÂõÃÂÃÂàðÃÂÃÂøñÃÂàtarget ÃÂõóð . àúðÃÂõÃÂÃÂòõ ÷ýðÃÂõýøàðÃÂÃÂøñÃÂÃÂð target øÃÂÿþûÃÂ÷ÃÂõÃÂÃÂàøüàÃÂÃÂõùüð, ò úþÃÂþÃÂÃÂù ñÃÂôõà÷ðóÃÂÃÂöðÃÂÃÂÃÂàôþúÃÂüõýÃÂ, ÃÂúð÷ðýýÃÂù ðÃÂÃÂøñÃÂÃÂþü name ÃÂõóð . áÃÂþøàÃÂðúöõ þÃÂüõÃÂøÃÂÃÂ, ÃÂÃÂþ øüàÃÂÃÂõùüð ôþûöýþ ýðÃÂøýðÃÂÃÂÃÂàûøñþ àÃÂøÃÂÃÂàûøñþ àûðÃÂøýÃÂúþù ñÃÂúòÃÂ. áûõôÃÂÃÂÃÂøõ øüõýð øÃÂÿþûÃÂ÷ÃÂÃÂÃÂÃÂàò úðÃÂõÃÂÃÂòõ ÷ðÃÂõ÷õÃÂòøÃÂþòðýýÃÂÃÂ:

ÃÂüàÃÂÿøÃÂðýøõ
_self ôþúÃÂüõýà÷ðóÃÂÃÂ÷øÃÂÃÂàò ÃÂõúÃÂÃÂøù ÃÂÃÂõùü, ÃÂ.õ. ò úþÃÂþÃÂþü ýðÃÂþôøÃÂÃÂàÃÂðüð óøÿõÃÂÃÂÃÂÃÂûúð
_blank ôþúÃÂüõýà÷ðóÃÂÃÂ÷øÃÂÃÂàò ýþòþü þúýõ òõñ-ñÃÂðÃÂ÷õÃÂð
_parent ôþúÃÂüõýà÷ðóÃÂÃÂ÷øÃÂÃÂàò þúýõ, ÃÂòûÃÂÃÂÃÂõõÃÂàÃÂþôøÃÂõûÃÂÃÂúøü ÿþ þÃÂýþÃÂõýøàú ÃÂõúÃÂÃÂõüàÃÂÃÂõùüÃÂ
_top ôþúÃÂüõýà÷ðóÃÂÃÂ÷øÃÂÃÂàÿþòõÃÂàòÃÂõàÃÂÃÂõùüþò
targetframe ôþúÃÂüõýà÷ðóÃÂÃÂ÷øÃÂÃÂàò ÃÂÃÂõùü àÃÂúð÷ðýýÃÂü øüõýõü

ÃÂûàòýõÃÂýøàÃÂÃÂÃÂûþú ÃÂûõôÃÂõà÷ðôðòðÃÂàò úðÃÂõÃÂÃÂòõ ÷ýðÃÂõýøàôûàðÃÂÃÂøñÃÂÃÂð target ûøñþ , ûøñþ , ôûàÃÂþóþ, ÃÂÃÂþñàÃÂÃÂþÃÂþýýøõ ÿÃÂþõúÃÂàþÃÂþñÃÂðöðûøÃÂàýõ ò òðÃÂøàÃÂÃÂõùüðÃÂ, ð ÷ðýøüðûø ÿþûýþõ þúýþ ñÃÂðÃÂ÷õÃÂð.

àÃÂûõôÃÂÃÂÃÂõü ÿÃÂøüõÃÂõ ø÷þñÃÂðöõý HTML-ôþúÃÂüõýÃÂ, ò ÿÃÂðòÃÂù ÃÂÃÂõùü úþÃÂþÃÂþóþ ÷ðóÃÂÃÂöðõÃÂÃÂàÃÂÃÂÃÂðýøÃÂð ÿþ ÃÂÃÂÃÂûúõ, ÿþüõÃÂõýýþù ò òõÃÂÃÂýøù ÃÂÃÂõùü. áÃÂÃÂûúð ýð ôþúÃÂüõýÃÂ, úþÃÂþÃÂÃÂù þÃÂúÃÂþõÃÂÃÂàò ÿÃÂðòþü ÃÂÃÂõùüõ:

ÃÂÃÂðòþüàÃÂÃÂõùüàÿÃÂøÃÂòðøòðõÃÂÃÂàøüàframe_right:

çÃÂþñàôþúÃÂüõýà÷ðóÃÂÃÂöðûÃÂàò ÃÂúð÷ðýýÃÂù ÃÂÃÂõùü, øÃÂÿþûÃÂ÷ÃÂõÃÂÃÂàúþýÃÂÃÂÃÂÃÂúÃÂøàtarget=»frame_right», úðú ÿþúð÷ðýþ ò ÿÃÂøüõÃÂõ:

ÃÂÃÂøüõÃÂ: áÃÂÃÂûúð ýð ôÃÂÃÂóþù ÃÂÃÂõùü

  • àõ÷ÃÂûÃÂÃÂðÃÂ
  • HTML-úþô
  • ÃÂþÿÃÂþñÃÂù ÃÂðü û
frame_topic
frame_left frame_right

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

Итак, когда мы говорили про гиперссылки, то упоминали такой атрибут тега «A», как Target=_blank. Помните для чего он нужен? Правильно, чтобы открывать документ, на который проставлена ссылка, в новом окне. По умолчанию же, он должен открываться в том же самом окне, что эквивалентно target=»_self».

Но этим возможности Target не ограничиваются. Оказывается можно добавлять в него значение в виде названия фрейма, которое предварительно указывается в специальном атрибуте Name тега Frame. Тогда документ по этой ссылке будет открываться не в том же окне, занимая все его пространство, а в указанном вами Frame. Понятно? Если не совсем, то сейчас будет понятно при разборе примера.

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

Сделали и назвали его «ktona». Теперь можно смело открывать тот файл, что подгружается в качестве меню в левое окно и добавлять ко всем тегам A в нем атрибут Target=»ktona»:

Конечно же, с помощью инструмента поиска и замены в Html редакторе Notepad проставить его для всех гиперссылок будет не трудно, но зачем же излишне загружать код, когда у нас есть прекрасная возможность использовать специальный тег Base, о котором мы уже упоминали все в той же статье про гиперссылки, когда говорили про использование Target blank.

Достаточно лишь поставить между открывающим и закрывающим тегами Head элемент base target=»ktona» и все ссылки в Html коде этого документа будут открывать новые страницы в указанном фрейме под названием «ktona»:

Кстати, если рассматривать мой когда-то существовавший инструмент в качестве примера, то нужно еще сделать так, чтобы все ссылки из верхнего горизонтального окна открывали бы свои страницы именно в левом вертикальном фрейме, которое служит у меня левым меню. Что нужно для этого сделать?

Ну, во-первых, нужно дать имя левому вертикальному фрейму:

А в файле, который загружается в верхнее окно (gor.html), нужно добавить элемент base target=»gor»:

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

Атрибуты тега Frame для настройки внешнего вида окон

Давайте теперь посмотрим, какие атрибуты кроме Src и Name можно использовать в теге Frame для настройки внешнего вида фреймов. Начнем с Scrolling. С помощью него мы можем настроить отображение полос прокрутки для каждого окна вашей фреймовой структуры в отдельности.

Scrolling имеет значение по умолчанию Auto — браузер будет автоматически решать, на основе размера подгружаемого во фрейм документа, отображать полосу прокрутки или нет. Если документ не будет полностью помещаться в окно, то появится полоса прокрутки, позволяющая просмотреть его весь до конца.

Так же в качестве значений для Scrolling можно использовать значения Yes (полосы прокрутки в окне будут отображаться всегда, даже если документ полностью влезает в него) и No (полосы прокрутки вообще никогда появляться не будут, даже если часть документа не влезет).

Я в своем, когда-то существовавшем инструменте, использовал значение по умолчанию Auto и полосы прокрутки во фреймах появлялись по мере необходимости:

Следующий атрибут тега Frame — Noresize — является одиночным (у него нет значений). Прописав его, вы тем самым запретите изменение его размеров, которое по умолчанию осуществляется простым перетаскиванием границы фреймов мышью.

При подведении курсора мыши к границе вы увидите, что курсор превратится в двунаправленную стрелку и теперь, нажав на левую кнопку мыши, можно передвигать границу по вашему желанию. Noresize накладывает на это своеволие запрет (при подведении курсора мыши к границе окон, двунаправленную стрелочку вы уже не увидите).

Еще один визуальный атрибут — Frameborder. C помощью него вы можете указать — рисовать рамку (границу) между фреймами или же не рисовать. Frameborder может иметь только два возможных значения — либо 0 (рамку не рисовать), либо 1 (границу отображать). По умолчанию, естественно, используется значение 1.

Есть одна тонкость. Если вы хотите убрать видимую рамку, то вам придется добавить Frameborder=0 во все теги Frame тех фреймов, видимые границы между которыми вы хотите убрать.

Ну, и еще нам осталось рассмотреть пару атрибутов тега Frame — Marginwidth и Marginheight, которые задают отступы по ширине (справа и слева) и высоте (сверху и снизу) от границ окна до контента загруженного в него (число означает количество пикселов отступа):

Почему нельзя делать сайт на фреймах?

Давайте посмотрим в чем заключается принципиальный недостаток классических структур, который по сути ставит крест на их использовании при создании сайта. Он состоит в том, что по Url адресу этой фреймовой структуры невозможно отследить ее состояние.

У сложных структур могут быть тысячи различных состояний (варианты документов открытых в различных окнах фреймов), но при этом Url адрес этой самой структуры не меняется. Из-за этого будет невозможно пользоваться закладками браузера или же отправлять ссылки на понравившиеся страницы другим пользователям. Почему?

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

Хотя, конечно же, эта проблема решаема, но уже не средствами Html, а с помощью серверных (например, Php) или клиентских языков (ДжаваСкрипт) программирования, и решения эти будут работоспособными не на все сто процентов. Такие решения, по сути, позволяют дописывать к Url адресу фреймовой структуры дополнительные данные о ее текущем состоянии, но сделать это не просто, а надежность будет не абсолютной.

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

Когда пользователь переходит из поисковой выдачи Яндекса или Google на ваш сайт, построенный на базе фреймовой структуры, то откроется только тот документ, который загружался в один из фреймов, а не вся структура. Понимаете, о чем я говорю?

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

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

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

Например, я создал фреймовую структуру, которую обозвал «Навигатор» (сейчас ее временно убрал) и которая стала своеобразным развернутым внешним меню для моего блога, которое, как мне кажется, должно упростить работу с ресурсом и повысить его юзабилити, а следовательно и улучшить поведенческие факторы, которые сейчас «без балды» очень и очень сильно влияют на продвижение сайта.

Но, правда, во избежании каких-либо проблем с поисковыми системами, я закрыл от индексации через robots.txt всю эту фреймовую структуру, а так же добавил на всякий случай во все ее Html файлы мета тег Rodots с запретом их индексации:

JOOMLA

Но все эти ограничения касаются только структур на тегах Frame и Frameset, а встроенные фреймы на тегах Iframe не имеют никаких видимых недостатков, и их вполне можно и даже нужно использовать на своих проектах, хотя бы для вставки видеороликов с Ютуба.

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

* Нажимая на кнопку «Подписаться» Вы соглашаетесь с политикой конфиденциальности.

Подборки по теме

  • Самоучитель по основам Html
  • Краткий справочник CSS-дизайнера
  • Азбука верстки на Bootstrap
  • Полезные онлайн-сервисы
  • Описание полезных программ

Использую для заработка

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

  • Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива в любую папку на вашем жестком диске:
  • Используя полученные знания составьте HTML страницу (practice_19.html в архиве), которая содержит фрейм и четыре ссылки:
  1. Первая ссылка загружает сайт «Википедии», или любой другой.
  2. Вторая ссылка загружает во фрейм изображение из папки (practice_19_1.jpg).
  3. Третяя ссылка загружает во фрейм изображение из папки (practice_19_2.jpg).
  4. Четвертая ссылка загружает во фрейм изображение из папки (practice_19_3.jpg).

Для фрейма задайте размер таким образом, чтобы он был по ширине и высоте изображений. В качестве адреса, который будет загружаться во фрейм можете выбрать сайт «Википедии», или любой другой.

Результат примера вы можете скачать после выполнения задачи для самопроверки:

Элементы цитирования
и направление текста

Компьютерный код

Пример использования

В

этом примере мы возьмем в качестве загрузки во фрейм отличный сайт — TinyPng.com, который предоставляет возможность сжимать изображения, предназначенные к загрузке на Ваш сайт. Как правило, удаётся уменьшить размер изображений на 50%, а то и больше, что значительно уменьшает их объем, экономит дисковое пространство и увеличивает скорость загрузки страниц.

Пример использования элемента 

В этом примере мы:

  • Элементом создали фрейм, которому атрибутом name задали имя — «myframe», атрибутом width установили ширину фрейма «665px», а атрибутом height высоту фрейма «265px» . В обязательном атрибуте src указали абсолютный адрес сайта, который хотим открыть во фрейме «https://tinypng.com».
  • Разместили четыре ссылки, при клике на которые ссылка открывается непосредственно во фрейме (в значении атрибута target указано имя нашего фрейма — «myframe»). Первая ссылка открывает сайт, загруженный изначально, а остальные три загружают различные изображения, находящиеся в той же папке, что и файл с примером.

Результат нашего примера:


Пример использования фреймов в HTML.

Рассмотрим пример добавления видео с YouTube во фрейм:

Размещение видео с YouTube
	
	
		

Размещение видео с YouTube

В этом примере элементом мы разместили фрейм на странице и задали для него ширину 320 пикселей (атрибут width) и высоту 240 пикселей (height).
В атрибуте src мы указали путь к странице с видео, указали ID видео (выделен курсивом) и добавили дополнительные параметры плеера YouTube (подробное описание доступно в официальной документации):

  • autoplay = «1» (видео автоматически запускается).
  • loop = «1» (проигрыватель будет воспроизводить видео по кругу, в бесконечном цикле).
  • start = «28» (определяет с какой секунды начнется воспроизведение видео, значение длжно быть положительным целым числом).
  • color = «white» (бегунок просмотренного отмеряет белым цветом, по умолчанию — красным).

Результат нашего примера:


Добавление видео с YouTube во фрейм.

Более подробную информацию о добавлении видео с видео хостинга YouTube вы можете найти на сайте в статье учебника HTML 5 «Размещение видео с видео хостинга YouTube».

Теги HTML

c http-equiv=»Content-Type» content=»text/html;charset=UTF-8″>lass=»block_content scroll»>

  • Все теги
  • Валидация тегов
    • accesskey
    • charset
    • coords
    • download
    • href
    • hreflang
    • name
    • rel
    • rev
    • shape
    • tabindex
    • target
    • title
    • type
  • title

    • align
    • alt
    • archive
    • code
    • codebase
    • height
    • hspace
    • vspace
    • width
    • accesskey
    • alt
    • coords
    • href
    • hreflang
    • nohref
    • shape
    • tabindex
    • target
    • type
    • autoplay
    • controls
    • loop
    • muted
    • preload
    • src
    • href
    • target
    • color
    • face
    • size
  • dir

    • balance
    • loop
    • src
    • volume
    • alink
    • background
    • bgcolor
    • bgproperties
    • bottommargin
    • leftmargin
    • link
    • rightmargin
    • scroll
    • text
    • topmargin
    • vlink
  • clear

    • accesskey
    • autofocus
    • disabled
    • form
    • formaction
    • formenctype
    • formmethod
    • formnovalidate
    • formtarget
    • name
    • type
    • value
    • align
    • valign
    • align
    • char
    • charoff
    • span
    • valign
    • width
    • align
    • char
    • charoff
    • span
    • valign
    • width
    • cite
    • datetime
    • align
    • title
    • align
    • height
    • hidden
    • hspace
    • pluginspage
    • src
    • type
    • vspace
    • width
    • disabled
    • form
    • title
    • color
    • face
    • size
    • accept-charset
    • action
    • autocomplete
    • enctype
    • method
    • name
    • novalidate
    • target
    • bordercolor
    • frameborder
    • name
    • noresize
    • scrolling
    • src
    • border
    • bordercolor
    • cols
    • frameborder
    • framespacing
    • rows
  • align

  • align

  • align

  • align

  • align

  • align

  • profile

    • align
    • color
    • noshade
    • size
    • width
    • manifest
    • title
    • xmlns
    • align
    • allowtransparency
    • frameborder
    • height
    • hspace
    • marginheight
    • marginwidth
    • name
    • sandbox
    • scrolling
    • seamless
    • src
    • srcdoc
    • vspace
    • width
    • align
    • alt
    • border
    • height
    • hspace
    • ismap
    • longdesc
    • lowsrc
    • src
    • usemap
    • vspace
    • width
    • accept
    • accesskey
    • align
    • alt
    • autocomplete
    • autofocus
    • border
    • checked
    • disabled
    • form
    • formaction
    • formenctype
    • formmethod
    • formnovalidate
    • formtarget
    • list
    • max
    • maxlength
    • min
    • multiple
    • name
    • pattern
    • placeholder
    • readonly
    • required
    • size
    • src
    • step
    • tabindex
    • type
    • value
    • cite
    • datetime
    • accesskey
    • for
    • accesskey
    • align
    • title
    • type
    • value
    • charset
    • href
    • media
    • rel
    • sizes
    • type
  • name

    • behavior
    • bgcolor
    • direction
    • height
    • hspace
    • loop
    • scrollamount
    • scrolldelay
    • truespeed
    • vspace
    • width
    • label
    • type
    • charset
    • content
    • http-equiv
    • name
    • high
    • low
    • max
    • min
    • optimum
    • value
    • align
    • archive
    • classid
    • code
    • codebase
    • codetype
    • data
    • height
    • hspace
    • tabindex
    • type
    • vspace
    • width
    • reversed
    • start
    • type
    • disabled
    • label
    • disabled
    • label
    • selected
    • value
  • align

    • name
    • type
    • value
    • valuetype

Типы тегов

HTML5

Блочные элементы

Строчные элементы

Универсальные элементы

Нестандартные теги

Осуждаемые теги

Видео

Документ

Звук

Изображения

Объекты

Скрипты

Списки

Ссылки

Таблицы

Текст

Форматирование

Формы

Фреймы

Создание фреймов

СÃÂÃÂúÃÂÃÂÃÂð HTML-ôþúÃÂüõýÃÂð àÃÂÃÂõùüðüø òýõÃÂýõ þÃÂõýàýðÿþüøýðõàÃÂþÃÂüðàþñÃÂÃÂýþóþ HTML-ôþúÃÂüõýÃÂð. ÃÂðú ø ò þñÃÂÃÂýþü HTML-ôþúÃÂüõýÃÂõ, òõÃÂàúþô ÿþüõÃÂõý üõöôàÿðÃÂýÃÂüø ÃÂõóðüø ø , ð ò úþýÃÂõùýõÃÂõ ÃÂðÃÂÿþûðóðÃÂÃÂÃÂà÷ðóþûþòúø. ÃÂÃÂýþòýþõ þÃÂûøÃÂøõ ôþúÃÂüõýÃÂð àÃÂÃÂõùüðüø þàþñÃÂÃÂýþóþ HTML-ôþúÃÂüõýÃÂð â àôþúÃÂüõýÃÂð àÃÂÃÂõùüðüø òüõÃÂÃÂþ ÃÂõóð ÿÃÂøüõýÃÂõÃÂÃÂàÿðÃÂýÃÂù ÃÂõó (þàðýóû. frame set â ýðñþàÃÂÃÂõùüþò).
àÃÂûõôÃÂÃÂÃÂõü ÿÃÂøüõÃÂõ ÿÃÂøòõôõýð ÃÂÃÂÃÂÃÂúÃÂÃÂÃÂð HTML-ôþúÃÂüõýÃÂð àÃÂÃÂõùüðüø:

Границы или пространство между фреймами

П¾ ÃÂüþûÃÂðýøÃÂ, ñÃÂðÃÂ÷õàþÃÂþñÃÂðöðõàÃÂõÃÂÃÂàø, úðú ÿÃÂðòøûþ, ò òøôõ ÃÂÃÂõÃÂüõÃÂýþù ûøýøø óÃÂðýøÃÂàüõöôàÃÂÃÂõùüðüø, àÿþüþÃÂÃÂàúþÃÂþÃÂþù ÿþÃÂõÃÂøÃÂõûø üþóÃÂàÃÂõóÃÂûøÃÂþòðÃÂàÃÂð÷üõàÃÂÃÂõùüð.
ÃÂÃÂðýøÃÂõù ÃÂÃÂõùüð üþöýþ ÃÂÿÃÂðòûÃÂÃÂÃÂ, úðú ø ûÃÂñÃÂüø ôÃÂÃÂóøüø ÃÂûõüõýÃÂðüø ÃÂÃÂõùüð. ÃÂûàÃÂÃÂþóþ ÃÂÃÂÃÂõÃÂÃÂòÃÂõàýõÃÂúþûÃÂúþ ðÃÂÃÂøñÃÂÃÂþò ÃÂûõüõýÃÂð , ÿþ÷òþûÃÂÃÂÃÂøàýðÃÂÃÂÃÂðøòðÃÂàóÃÂðýøÃÂàÃÂÃÂõùüþò. âþûÃÂøýð ûøýøø óÃÂðýøÃÂàþÿÃÂõôõûÃÂõÃÂÃÂàðÃÂÃÂøñÃÂÃÂþü border. ÃÂþ ÃÂüþûÃÂðýøà÷ýðÃÂõýøõ ÃÂþûÃÂøýàóÃÂðýøÃÂàÃÂðòýþ ÿÃÂÃÂø.
çÃÂþñàÃÂúÃÂÃÂÃÂàóÃÂðýøÃÂàÃÂÃÂõùüð, ýõþñÃÂþôøüþ ûøñþ ÃÂúð÷ðÃÂà÷ýðÃÂõýøõ ÃÂøÃÂøýàóÃÂðýøÃÂàÃÂðòýÃÂü ýÃÂûÃÂ, ûøñþ ÿÃÂøÃÂòþøÃÂà÷ýðÃÂõýøõ ënoû øûø ë0û ðÃÂÃÂøñÃÂÃÂàframeborder. ÃÂÃÂÃÂøñÃÂàframeborder üþöõàÿÃÂøýøüðÃÂàÃÂþûÃÂúþ ôòð ÿÃÂþÃÂøòþÿþûþöýÃÂà÷ýðÃÂõýøÃÂ. ÃÂÃÂûø ÷ýðÃÂõýøõ ðÃÂÃÂøñÃÂÃÂð frameborder ÃÂðòýþ ëyesû øûø ë1û, ÃÂþ óÃÂðýøÃÂð ÃÂÃÂõùüþò ñÃÂôõàþÃÂþñÃÂðöðÃÂÃÂÃÂÃÂ, ð õÃÂûø ë0û øûø ënoû, ÃÂþ ýõÃÂ. ãÃÂÃÂøÃÂõ, ÃÂÃÂþ ÷ýðÃÂõýøàðÃÂÃÂøñÃÂÃÂð frameborder ÃÂð÷ûøÃÂðÃÂÃÂÃÂàôûàÃÂð÷ýÃÂàñÃÂðÃÂ÷õÃÂþò. çÃÂþñàÃÂõÃÂøÃÂàÃÂÃÂàÿÃÂþñûõüàøÃÂÿþûÃÂ÷ÃÂùÃÂõ ôòðöôàðÃÂÃÂøñÃÂàframeborder, ð ôûàýõúþÃÂþÃÂÃÂàñÃÂðÃÂ÷õÃÂþò ÃÂÃÂõñÃÂõÃÂÃÂàõÃÂõ ôþñðòøÃÂàðÃÂÃÂøñÃÂàframespacing ÃÂþ ÷ýðÃÂõýøõü ë0û:

àÃÂûõôÃÂÃÂÃÂõü ÿÃÂøüõÃÂõ ÃÂñøÃÂðõü óÃÂðýøÃÂàüõöôàÃÂÃÂõùüðüø:

  • àõ÷ÃÂûÃÂÃÂðÃÂ
  • HTML-úþô
  • ÃÂþÿÃÂþñÃÂù ÃÂðü û
frame_left frame_right

ÃÂÃÂûø òàÃÂôðûøÃÂõ óÃÂðýøÃÂàüõöôàÃÂÃÂõùüðüø, ÿþÃÂõÃÂøÃÂõûø ýõ ÃÂüþóÃÂàø÷üõýÃÂÃÂàÃÂð÷üõàÃÂÃÂõùüð ò ñÃÂðÃÂ÷õÃÂõ. ÃÂàüþöõÃÂõ ÃÂðúöõ ýõ ôþÿÃÂÃÂÃÂøÃÂàø÷üõýõýøàÃÂð÷üõÃÂð ÃÂÃÂõùüð, ÃÂþÃÂÃÂðýøò óÃÂðýøÃÂÃÂ, øÃÂÿþûÃÂ÷ÃÂàðÃÂÃÂøñÃÂànoresize:

á ÿþüþÃÂÃÂàðÃÂÃÂøñÃÂÃÂð bordercolor üþöýþ ø÷üõýøÃÂàÃÂòõàóÃÂðýøÃÂàÃÂÃÂõùüð, ýõþñÃÂþôøüþ ÃÂþûÃÂúþ ÃÂúð÷ðÃÂàúþô øûø ÃÂþþÃÂòõÃÂÃÂÃÂòÃÂÃÂÃÂõõ ÷ðÃÂõ÷õÃÂòøÃÂþòðýýþõ øüàÃÂòõÃÂð.
ÃÂøöõ ÿÃÂøòõôõý ÿÃÂøüõàhtml-ÃÂÃÂÃÂðýøÃÂÃÂ, úþÃÂþÃÂðàÃÂþôõÃÂöøàþÿøÃÂðýýÃÂõ òÃÂÃÂõ ðÃÂÃÂøñÃÂÃÂàÃÂÿÃÂðòûõýøàóÃÂðýøÃÂõù ÃÂÃÂõùüð: ÃÂòõàóÃÂðýøÃÂàâ úÃÂðÃÂýÃÂù, ø÷üõýÃÂÃÂàÃÂð÷üõàòõÃÂÃÂýõóþ ÃÂÃÂõùüð ýõûÃÂ÷ÃÂ:

HTML аббревиатура и контактная информация

HT
ML тег (HTML Abbreviation Element) определяет аббревиатуру или акроним. Маркировка сокращений является полезной информацией для браузеров, систем перевода и поисковых машин, для пользователя применение этого элемента не видимо.

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

HTML тег

определяет контактную информацию (автор / владелец) документа или статьи.
Если элемент

находится внутри тега , то представляет контактную информацию для документа, а если находится внутри элемента (статья), то он представляет контактную информацию для этой статьи.

Текст внутри элемента

, как правило, отображается курсивом. Элемент не должен использоваться просто для описания почтового адреса, если он не является частью контактной информации.
Элемент, чаще всего, используют с другой информацией в элементе (нижний колонтитул или «подвал» сайта).

Об элементах, добавленных в HTML 5 — и мы поговорим в статье «Теги разметки страницы в HTML».

Пример использования:

В данном примере мы:

  • Поместили аббревиатуру института в тег и применили глобальный атрибут title, для того, чтобы при наведении на нее мышкой было понятно, что это высшее учебное заведение, а не то, что вы подумали.
  • Кроме того загрузили во фрейм сайт данного учебного заведения (в обязательном атрибуте src указали абсолютный адрес сайта).
  • Внизу страницы (внутри тега ) добавили адрес и контактные данные института, указанные на официальном сайте. Текст, помещенный внутрь этого тега, по умолчанию отображается курсивом. Кроме того для элемента добавили глобальный атрибут style, которым задали встроенный CSS стиль (цвет заднего фона).


Рис 28 Аббревиатура и контактная информация в HTML.

Преимущества и недостатки фреймов

Плюсы фреймов

  • Возможность отображения в одном окне независимо несколько страниц (пример 1 и 2 выше);
  • Возможность переключать содержимое страницы не перезагружая страницу (меняется только одна область экрана);
  • Возможность построить гибко структуру сайта (шапка, меню, футер и т.д. — вся статическая информация хранится отдельно в файлах, а это позволяет быстро отредактировать часть сайта);
  • Пользователь может сам изменять размер области просмотра, в случае если не установлена опция noresize;

Минусы фреймов

  • Поисковые системы плохо индексируют сайты на фреймах, поскольку не в состоянии интерпретировать подгружаемые файлы во фреймах. Поисковая машина различает страницы по их адресу (URL), а у фреймов несмотря на разные состояния, адрес страницы не изменяется. Это противоречит правилам поисковой машины, а значит не факт, что поисковик сможет проиндексировать сайт.
  • Невозможно сохранить в закладки сайт на фреймах, т.к. URL страницы будет одинаковый. Таким образом, можно лишь сохранить исходное состояние фрейма.
  • Не все браузеры поддерживают фреймы.

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

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

Ссылка на следующий урок: Урок 12. Свойство CSS position

  • Главная
  • Партнерские программы
  • Рейтинг партнерских программ
  • Статьи про SEO
  • Термины SEO
  • Описание бирж
  • HTML-уроки и советы
  • CSS-уроки
  • Биткоины
  • PHP-уроки
  • Бинарные опционы
  • Социальные сети
  • Обзоры систем
  • Все про CMS
  • Реклама в интернете

Важно

  • Продвижение сайта
  • Аудит внутренней оптимизации
  • Куплю Ваш сайт
  • Куплю Вашу подпись на форуме
  • Подписаться на рассылку
  • Реклама на сайте
  • Карта сайта
  • Обратная связь

2010-2020 — Zarabotat-Na-Sajte.ru

Пример с 4 фреймами №2

Каркас для примера 2:

Рис 3. Каркас использования фреймов для примера №2

Код исходной html-страницы с фреймом будет следующий:

Код файла top.html

Код файла menu.html

Код файла content.html

Код файла about-site.html

Код файла about-autor.html

Код файла footer.html

Пояснение к примеру №2

Первоначально вся страница разбивается на три области по горизонтали в пропорции 3:14:3. За это отвечает атрибут rows=»15%,70%,15%». Первый фрейм в нашем примере — шапка (мы её обозвали top.html), на нее отводится 15% места по высоте. Далее идет большой фрейм занимающий 70% по высоте. Мы его разбиваем на две части с помощью cols=»25%,75%» в пропорции 1:3. Слева будет фрейм menu.html, справа content.html. Мы специально дали имя второму фрейму name=»main» с целью возможности переключения страниц

Обратите внимание, что в файле menu.html к каждой ссылки приписан атрибут target=»main», что позволяет при нажатии на эту ссылку загружать элементы в область с именем main. Внизу сайта расположился последний фрейм footer.html

Если вы реализуете пример №2, то должны получить такую html-страницу в исходном состоянии:

Рис 4. Пример №2 — исходное состояние

При переходе на страницу о сайте страница будет выглядеть следующим образом:

Рис 5. Пример №2 — второе состояние

При переходе на страницу об авторе вы увидите следующие:

Рис 6. Пример №2 — третье состояние

Тег

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

Необязательные атрибуты этого тега являются width=»ширина» и height=»высота», а обязательный атрибут src=»адрес фрейма».

Ссылка на основную публикацию