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

Зачем это нужно? Поскольку документы загружены в свои отдельные области, то ведут они себя независимо. Т.е в одном документе можно что-то делать, при этом другие документы неизменны.

Где можо встретить такие фреймовые структуры? Это файлы помощи, справки (с расширением.chm).

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

Элемент frameset . Его задача - охватить область просмотра и разделить ее на отдельные области. Т.е. дать указание браузеру, в каком соотношении и как (горизонтально или вертикально) мы делим эти области.

Элемент frame – описывает каждую такую отдельную область. Тег одиночный. Он занимает те размеры, которые указаны во frameset.

Элемент noframes - отображается, если браузер не поддерживает фреймы.

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

Атрибуты элемента frameset

• cols - вертикальное деление страницы на области просмотра.
• rows - горизонтальное деление страницы на области просмотра.

Элемент frame

Этот элемент описывает отдельную оконную область. В нее можно загрузить любой документ - с помощью атрибута src. Примеры:

Атрибут scrolling - прокрутка (по умолчанию auto). Если документ превышает размеры области просмотра этого фрейма, значит появляется прокрутка. Если документ помещается полностью во врейм, значит прокрутки нет. Прокрутку можно запрещать, но лучше оставить значение auto.

Одиночный атрибут noresize - запрещает изменять размер фрейма в браузере. По умолчанию это разрешено.

Атрибут frameborder – рамка у фрейма. Значение ‘1’ - рисовать, значение ‘0’ - не рисовать. Допустимы только эти два значения. По умолчанию рамка рисуется.

Атрибут marginwidth – указывает расстояние, которое контент в данной фрейме будет отступать по горизонтали от рамок этого фрейма.

Атрибут marginheight – отступ по вертикали от контента до границ фрейма.

Встроенный фрейм iframe

Элемент iframe (‘строчное окно’). Этот элемент парный (есть отрывающий и закрывающий тег). Этот элемент служит для того же - чтобы в документе организовать оконный элемент.

В чем его отличие от старых фреймов? Он самодостаточен, ему не надо никаких дополнительных контейнеров. И он может стоять в любых документах, так где есть элемент body.

Элемент iframe - это строчный элемент с замещаемым контентом. Т.е. формируется область строчного типа с любыми абстрактными размерами, и в эту область загружается содержание какого-то внешнего документа (файл html).

Iframe обладает такими же атрибутами, что и картинки (т.к. они одного типа): name, width, height, src, frameborder, scrolling, hspace, vspace, marginwidth, marginheight.

Здравствуйте, уважаемые читатели блога сайт. Сегодня речь пойдет о фреймах в языке 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.

Раз мы задали пропорции для трех фреймов, то мы должны будем обязательно прописать между открывающим и закрывающим тегом Frameset три элемента Frame, хотя бы и без указания дополнительных атрибутов:

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

В данном примере размеры окон (Frame) мы задавали с помощью процентов, которые берутся от ширины области просмотра (это в случае использования Cols) или от ее высоты (Rows). При изменении области просмотра процентное соотношение между размерами фреймов будет сохраняться. Но вместо процентов можно использовать и просто числа, которые будут означать . Тут, думаю, тоже никаких трудностей в понимании возникнуть не должно.

Но есть в обозначениях размеров и довольно необычный вариант, который выглядит как звездочка «*» . Причем, может стоять как просто «*», так и звездочка с цифрой впереди, например, так «3*». Хитрая штуковина, очень похожая на проценты и означающая, что мы делим пространство для Frame пропорционально.

Давайте посмотрим на примере. Теперь выберем деление области просмотра на горизонтальные строки с помощью Rows:

Что означает эта запись? Вся область просмотра, доступная нам по вертикали, будет разделена на три строки. Высота первой будет взята в 200 пикселей, второй — в 500, а вот третья строка будет занимать все оставшееся пространство по высоте, т.к. в качестве ее размера использовалась «*».

Что примечательно, значение «*» и «1*» означают одно и то же — все оставшееся пространство мы делим на один и эту одну часть отдаем данному фрейму (ну, то есть все оставшееся пространство).

А вот посмотрите что получится, если использовать значение «*» с цифрой для деления в пропорции:

Как вы думаете, каковы должны будут получиться размеры Frame в этом случае? Понятно, что вторая строка будет однозначно иметь высоту в 100 пикселей. Но как поделится оставшееся пространство по высоте между третьей и первой строкой?

Это довольно просто сосчитать — достаточно прибавить к двум (2*) четыре (4*) и разделить на этот знаменатель (помните дроби из школьной программы) двойку и четверку. Т.е. мы получим, что первая колонка с фреймом займет одну треть от оставшегося пространства по высоте, а третья колонка — две трети. Или же, другими словами, третья будет в два раза выше первой:

Можно использовать все три способа задания размеров окон фреймов в одном атрибуте, например:

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

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

Т.е. сначала мы разбиваем с помощью «frameset cols=»20%,80%"« все доступное пространство на две колонки по вертикали и задаем тегом „frame“ содержимое правой колонки, а вот вместо того, что добавить элемент „frame“ для левой колонки, мы открываем новый „frameset rows=“10%,*»".

И уже с помощью него разбиваем правую колонку на две строки с фреймами, содержимое которых задаем с помощью двух тегов «frame», после чего закрываем оба контейнера «frameset». Все просто и логично.

Указываем путь в атрибуте Src элемента Frame

Но это мы все говорили про элемент Frameset и его атрибуты Cols и Rows, с помощью которых формируем структуру и задаем их размеры. Теперь давайте разберемся с тем, как выводить в нужных фреймах нужные документы и как настроить взаимодействие между их окнами.

Итак, как же мы управляем внешним видом создаваемых окон? Все это заложено в атрибутах тега Frame. Первый из них, о котором стоит упомянуть — это Src . Мы уже встречали его в теге Img, когда рассматривали вставку изображений в Html код. Суть его не изменилась и он по-прежнему позволяет указать путь до того документа, который должен быть загружен во фрейм.

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

Если не будет прописан атрибут Src с указанием пути до нужного документа, то в окно будет загружен пустой документ. Лично я когда-то делал подобную вещь для своего блога (как дополнительный элемент навигации) и при этом создавал на сервере хостинга отдельную папку для него и помещал туда не только Html файлик с фреймовой структурой (который назвал index.html), но и все подгружаемые в различные окна документы, а так же файлы изображений, которые использовались в качестве фона.

Поэтому мне было проще всего использовать именно относительные ссылки в атрибуте Src тега Frame:

Что примечательно, если вы замените все приведенные в этом коде ссылки с относительных на абсолютные (типа https://сайт/navigator/joomla.html) и откроете этот файл в браузере, то указанные во Frame документы будут подгружены с моего сервера и вы увидите аналогичную картинку в своем браузере. Причем не важно, где будет лежать ваш файл с фреймовой структурой (index.html) — на вашем компьютере или же на хостинге.

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

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

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

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

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

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

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

История появления Joomla и компонента VirtueMart

Конечно же, с помощью инструмента поиска и замены в проставить его для всех гиперссылок будет не трудно, но зачем же излишне загружать код, когда у нас есть прекрасная возможность использовать специальный тег 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 адрес этой самой структуры не меняется. Из-за этого будет невозможно пользоваться закладками браузера или же отправлять ссылки на понравившиеся страницы другим пользователям. Почему?

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

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

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

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

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

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

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

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

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

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

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

посмотреть еще ролики можно перейдя на

Вам может быть интересно

Директивы комментариев и Doctype в Html коде, а так же понятие блочных и строчных элементов (тэгов)
Embed и object - Html теги для отображения медиа контента (видео, флеш, аудио) на веб страницах
Img - Html тег для вставки картинки (Src), выравнивания и обтекание ее текстом (align), а так же задания фона (background)

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

Разница между Frames и Iframes

При использовании frameset вы разделяете видимую часть окна браузера на несколько фреймов. Каждый фрейм имеет собственное содержимое, которое не затрагивает содержимое следующего. Frames и Iframes выполняют аналогичную функцию — встраивают ресурс в веб-страницу, но они принципиально отличаются друг от друга:

• Frames — это элементы, определяющие макет;
• Iframes — элементы, добавляющие контент.

История и будущее фреймов

W3C признала фреймы устаревшими в HTML5 . Данное решение было аргументировано тем, что фреймы HTML отрицательно сказываются на юзабилити и доступности. Давайте разберемся, обоснованы ли эти претензии.

Проблемы с фреймами

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

В данный момент в веб-разработке прослеживается глобальная тенденция разделения содержимого веб-страницы от ее представления:

• Содержимое должно добавляться и определяться разметкой, например, через HTML ;
• Представление определяется языками, такими как CSS и JavaScript .

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

Будущее фреймов

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

Как сделать фреймы в HTML

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

Основная концепция фреймов

Основная концепция фреймов довольно проста:

• Используйте элемент frameset в определенном месте элемента body в HTML-документе ;
• Используйте элемент frame , чтобы создать фреймы для содержимого веб-страницы;
• Используйте атрибут src для идентификации ресурса, который должен загружаться внутри фрейма;
• Создайте для каждого фрейма HTML отдельный файл с содержимым.

Рассмотрим несколько примеров того, как это работает. Сначала нужно создать несколько HTML-документов , с которыми мы будем работать. Давайте создадим четыре различных HTML-документа . Вот, что будет содержать первый из них:

Frame 1

Contents of Frame 1

Первый документ мы сохраним, как frame_1.html . Остальные три документа будет иметь подобное содержимое, и называться соответственно.

Создание вертикальных столбцов

Чтобы создать набор из четырех вертикальных столбцов, нужно использовать элемент frameset с атрибутом cols . Атрибут cols используется для определения количества и размера столбцов, которые будет содержать frameset . В нашем случае у нас есть четыре файла для отображения. Следовательно, нам нужно четыре фрейма.

Чтобы их создать, нам нужно задать в атрибуте cols четыре значения, разделенные запятой. Для простоты мы присвоим каждому из фреймов значение * , это задаст для них размер, при котором они автоматически будут заполнять все свободное пространство. Вот, как будет выглядеть наша HTML-разметка :

А вот как эта разметка будет отображаться:

Создание горизонтальных строк

Строки фреймов HTML можно создать с помощью атрибута rows , а не атрибута cols , как в предыдущем примере:

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

Объединение столбцов и строк

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

frameset cols="*,*,*">

Фрейм в HTML пример:

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

Вот, как теперь будут отображаться фреймы:

Можно создать другие вложенные фреймы:

Этот код создает набор из двух одинаковых по размеру столбцов. Затем мы разделили второй столбец на две строки. И, наконец, мы разделили вторую строку на две колонки. Вот, как это будет выглядеть:

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

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

Как задавать стили для фреймов

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

• Определение стилей внутри каждого frame ;
• Определение стилей для frameset .

Представление каждого frame должно определяться внутри исходного документа. Представление frameset должно определяться внутри родительского документа, содержащего frameset . Другими словами, стили для frame_1.html должны задаваться правилами CSS , содержащимися в файле frame_1.html , или в таблице стилей, связанной с файлом frame_1.html .

Определение стилей фреймов в исходном документе

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

Применив стили CSS к веб-странице, которая содержит frameset , мы не сможем применить стили к каждому фрейму отдельно. Если мы хотим задать стили для frame_1.html , нам нужно добавить эти стили непосредственно в сам документ. Вот пример того, как это можно сделать:

Frame 1

Contents of Frame 1

Если мы вернемся к нашему предыдущему примеру создания фреймов в HTML с четырьмя столбцами одинакового размера и загрузим frameset после внесения этих изменений в файл frame_1.html , мы получим следующее:

Определение стилей и форматирование frameset

Как повлиять на представление frameset помимо определения стилей самих документов:

• Может быть определен или зафиксирован размер каждого фрейма;
• Может быть изменен отступ между фреймами;
• Может быть задан формат рамки вокруг каждого фрейма.

Эти изменения вносятся не через CSS . Они осуществляются путем добавления атрибутов и их значений для элемента frame .

Определение размеров фреймов

Размеры фреймов могут задаваться в пикселях, процентах, либо фреймы могут автоматически занимать все свободное пространство. Чтобы указать размер фрейма, вставьте нужное значение в атрибут cols или rows . По умолчанию, если для фрейма не указан атрибут noresize , посетители сайта могут с помощью мыши перетащить границу между двумя фреймами, изменяя их размер. Если это нежелательно, то к элементу фрейма может быть применен атрибут noresize , и изменение его размеров будет невозможно. Объединим обе эти концепции на практике.

Мы создадим следующий макет:

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

Мы можем создать фрейм HTML с помощью следующего кода:

Этот код создает frameset из двух рядов:

• Первый ряд высотой 150 пикселей. Атрибут noresize , указанный для первого frame означает, что его размеры не могут быть изменены;
• Стили, которые мы применяли ранее к frame_1.html сохраняются, но они влияют только на содержимое этого фрейма;
• Второй ряд расширяется, чтобы заполнить оставшееся пространство;
• Второй frameset вложен во второй ряд и содержит три столбца;
• Первый и третий столбцы заполняют по 20% доступного пространства окна браузера;
• Второй столбец расширяется таким образом, чтобы заполнить пространство, остающееся между первым и третьим столбцом;
• Так как мы не указали для столбцов атрибут noresize , изначально они будут отображаться, исходя из размеров, заданных в коде.

Но посетитель сайта сможет вручную изменить их размеры.

Этот код создает веб-страницу, отображаемую следующим образом:

Форматирование рамки и отступов вокруг фрейма

Теперь, когда мы определили макет, если нам нужно, мы можем увеличить или уменьшить отступы между фреймами, а также удалить рамку между ними. Используя макет, который мы создали в предыдущем пункте, давайте удалим рамки между тремя столбцами, но оставим рамку между верхними и нижними рядами. Давайте также добавим отступ вокруг содержимого первого фрейма HTML :

Атрибут marginheight , примененный к первому фрейму, добавляет отступ в 15 пикселей выше и ниже содержимого, загружаемого в первом фрейме. Значение frameborder , равное 0, удаляет рамки для всех трех нижних фреймов. Вот как это будет выглядеть:

Указание фреймов с помощью ссылок

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

Можно отформатировать анкоры для указания конкретных фреймов через присвоение нужному элементу frame атрибута name и использование атрибута target внутри элемента a для загрузки href в указанном фрейме. Если все это немного сбивает вас с толку, давайте разберем процесс создания фреймов в HTML шаг за шагом.

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

Теперь, когда мы задали для центрального столбца name=»mid_col» , можно создать в исходном документе нашего левого столбца frame_2.html несколько ссылок:

Frame 2

Contents of Frame 2

• Load frame_1.html
• Load frame_2.html
• Load frame_3.html
• Load frame_4.html

Теперь, когда мы загрузим веб-страницу, в левой боковой панели будут размещаться четыре ссылки навигации. При нажатии на ссылку содержимое файла загружается во фрейме среднего столбца с атрибутом name=»mid_col» . Вот, что мы увидим при загрузке страницы:

При нажатии ссылок Load frame_3.html и Load frame_4.html в центральном столбце будет загружаться содержимое этих файлов. Если бы мы забыли добавить для одной из ссылок атрибут target=»mid_col» , то при клике по ней файл будет загружаться в том фрейме, который содержит ссылку. Если мы хотим перезагрузить всю страницу, например, при переходе по ссылке на внешний сайт, нам нужно добавить атрибут target=»_blank» или target=»_top» .

Предоставление резервного варианта noframes

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

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

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

Использование строк, а не столбцов

Если это возможно, организуйте фреймы в ряды, а не столбцы. На маленьком экране гораздо легче перемещаться по контенту по вертикали, чем по горизонтали. Фреймы в HTML , которые расположены в ряд, намного проще просматривать на небольшом экране. Если мы уменьшим ширину макетов, содержащих строки и столбцы, имитируя экран Apple IPhone 6 , то увидим, что строки намного удобнее просматривать, чем столбцы:

Используйте проценты для ширины столбцов

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

Как перейти с фреймов на другие технологии

И элемент frameset , и элемент frame были удалены из последней спецификации HTML5 . Владельцы сайтов, созданных с использованием фреймов, должны выполнить перестройку своих ресурсов, чтобы исключить их из макета. В какой-то момент браузеры откажутся от поддержки фреймов. Таким образом отказаться от фреймов — это не просто желательно, это необходимо сделать.

Оценка контента, содержащегося во фреймах

Первым шагом к реорганизации сайта, использующего плавающие фреймы HTML , должно стать определение причин, по которым используются именно фреймы:

• Были ли фреймы использованы для создания конкретного макета? Если это так, для создания подобного макета может быть использован CSS ;
• Были ли фреймы использованы для создания контейнера с рекламой определенных размеров? Есть много способов воссоздать данный эффект с помощью CSS или виджетов, предназначенных для работы с CMS ;
• Были ли фреймы использованы для создания «прилипающих » меню навигации? Опять же, с помощью CSS может быть воссоздан тот же эффект;
• Были ли фреймы использованы для загрузки контента с внешнего сайта? Если да, то элемент iframe, который является частью HTML5 , может быть использован для встраивания контента с внешнего сайта.

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

Вертикальное расположение фреймов
Как сделать колонку фреймов из трех различных документов.

Горизонтальное расположение фреймов
Как сделать строку фреймов из трех различных документов.

(Вы найдете больше примеров внизу этой страницы).

HTML Фреймы

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

Недостатки в использовании фреймов:

• Фреймы могут перестать поддерживаться в будущих версиях HTML
• Фреймы сложно использовать. (Печать старницы целиком затруднительна).
• Веб разработчик должен следить за большим количеством HTML документов.

HTML Элемент frameset

Элемент frameset содержит один или более элементов frame. Каждый элемент frame может содержать отдельный документ.

Элемент frameset указывает СКОЛЬКО столбцов или строк будет в наборе фреймов, и СКОЛЬКО процентов/пикселей пространства будет занимать каждый фрейм.

HTML Элемент frame

Тег определяет одно отдельное окно (фрейм) внутри набора фреймов (frameset).

В пример ниже мы имеем набор фреймов с двумя столбцами.

Первый столбец занимает 25% ширины окна браузера. Второй столбец занимает 75% ширины окна браузера. Документ "frame_a.htm" помещен в первый столбце, и документ "frame_b.htm" помещен во второй столбец:

Замечание: Размер столбца в наборе фреймов может также быть указан в пикселях (cols="200,500"), и один из столбцов может использовать оставшееся пространство, для чего надо указать вместо ширины звездочку (cols="25%,*").

Совет: Если фрейм имеет видимые границы, пользователь может изменить его размер перетаскиванием границы. Чтобы запретить изменение размера фрейма таким способом, вы можете добавить noresize="noresize" в тег .

Замечание: Добавьте тег для браузеров, которые не поддерживают фреймы.</p> <p><b>Важно: </b> Вы не можете использовать теги <body></body> вместе с тегами <frameset></frameset>! Однако, если вы добавите тег <noframes> содержащий некоторый текст для браузеров, которые не поддерживают фреймы, вы заключаете этот текст в теги <body></body>! Смотрите как это делается в первом примере ниже.</p> <table width="100%" border="0" cellpadding="0" cellspacing="0"><tr><td align="left" width="48"> </td> <td align="left" valign="middle"><h3>Еще примеры</h3> </td> </tr></table><p>Использование тега <noframes> <br> Как использовать тег <noframes> (для браузеров, которые не поддерживают фреймы).</p> <p>Вложенные наборы фреймов <br> Как создать вложенные наборы фреймов.</p> <p>Набор фреймов с атрибутом noresize="noresize" <br> Как использовать атрибут noresize. Переместите мышь на границу между фреймами и убедитесь, что не можете ее перетащить.</p> <p>Фрейм навигации <br> Как сделать фрейм навигации. Этот фрейм содержит список ссылок со вторым фреймом в качестве назначения, где будут открываться эти ссылки. Файл "tryhtml_contents.htm" содержит три ссылки. <a href="/prosmotr-skrytyh-vkontakte-kak-posmotret-skrytye-foto-v-kontakte-cherez/">Исходный код</a> ссылок:<br> <a href ="frame_a.htm" target ="showframe">Frame a</a><br><br> <a href ="frame_b.htm" target ="showframe">Frame b</a><br><br> <a href ="frame_c.htm" target ="showframe">Frame c</a><br> Второй фрейм показывает залинкованный документ.</p> <p>Переход к определенному разделу внутри фрейма <br> Два фрейма. Один из фреймов имеет ссылку на определенный раздел в файле. Этот раздел помечается как <a name="C10"> в файле "link.htm".</p> <p>В этом выпуске мы поговорим о <b>фреймах </b>. <b>Фреймы </b> по своей сути очень похожи на таблицы, но в отличие от таблиц, каждый фрейм независим и в каждом из них может быть отдельная web страница со своим адресом.</p><p>На рисунке видим достаточно распространенную структуру сайта. Ее можно представить в виде таблицы, а можно все это сделать при помощи фреймов. В верхний фрейм можно загрузить страницу с логотипом и меню, в левый – страницу с навигацией по сайту, в центральном фрейме будет страница с основным содержимым сайта, в правый фрейм загрузим страницу с рекламными баннерами, а в нижний – страницу с конта</p><p>ктной информацией. Вот вкратце что такое фреймы.</p><p>Теперь рассмотрим, как это все можно осуществить.</p><p>Особенностью документа, содержащего фреймы, является то, что он не содержит контейнера <b>BODY </b>. Вместо него используется контейнер <b>FRAMESET </b>. Общий синтаксис фреймов выглядит следующим образом:</p><p><html> <head>…</head> <frameset>….</frameset> </html></p><p>В контейнере <b><frameset>….</frameset> </b> располагаются теги <b><frame /> </b>, которые определяют содержимое фреймов.</p><p>У тега <b><frameset> </b> есть два параметра:</p><p><b>rows = число </b> – количество строк (горизонтальных подокон).</p><p><b>cols = число </b> – количество столбцов (вертикальных подокон).</p><p>Вообще говоря, значение параметров rows и cols задаются не совсем числами, а перечислением чисел через запятую. Сколько будет идти чисел, столько строк или столбцов и будет, а числа определяют размер фрейма. Главное, чтоб сумма этих чисел составляла всю ширину экрана.</p><p>Давайте, разберем это на примере, и все будет понятно. Сейчас создадим фреймовый документ следующего вида:</p><p><img src='https://i2.wp.com/vavik96.com/wp-content/uploads/2015/01/frame2.jpg' width="100%" loading=lazy></p><p>Код, который определит нам такую структуру фрейма, будет выглядеть так:</p><p><frameset cols="30%,*,30%"> <frame src="../Урок 13/index.html" /> <frame src="https://www.mail.ru" /> <frame src="../Урок11/index.html" /> </frameset></p><p>В первой строке приведенного кода открывается контейнер frameset, в параметре cols указано, что будет три вложенных фрейма. У первого ширина будет 30% от всей ширины экрана. У третьего ширина будет тоже 30% от всей ширины экрана. А второй фрейм займет все оставшееся место. Да символ <b>“*” </b>(звездочка) означает занять все оставшееся место на экране.</p><p>Кстати, рассмотрим, каким образом фреймам можно задавать размеры в параметрах cols и rows:</p><p>Можно задать размер, поставив просто число. Это число, будет определять размер фрейма в пикселях.</p><p>Можно задать значение ширины в процентах. Причем, если сумма процентов всех колонок будет превышать 100%, то все фреймы пропорционально уменьшаться, что бы общая сумма было равна 100%. Аналогично ситуация будет, если сумма процентов всех колонок будет менее 100%, то все фреймы пропорционально увеличатся, что бы общая сумма было равна 100%.</p><p>Можно задавать размер фрейма символом<b> “<i>” </i> </b> (звездочка). Это означает, что фрейм должен занять все оставшееся место. Если будет указано, например <b><frameset cols=”20%,*”> </b>, то есть две звездочки, то все оставшееся место будет поровну разделено между этими двумя фреймами (в данном случае по 40%).</p><p>Можно комбинировать варианты задания размеров фреймов. Например:</p><p> <frameset cols="70,*,40%"> </p><p>Этот код означает, что у первого фрейма размер будет 70 пикселей, у третьего 40% ширины экрана, а второй займет все оставшееся место.</p><p>С первой строкой кода разобрались полностью. Идем дальше.</p><p>Далее следуют теги <b><frame src=”url” /> </b>. Поскольку через запятую в параметре <b>cols </b>тега <b>frameset </b> задано три числа (то есть будет три фрейма), то и тегов <b><frame /> </b> должно быть тоже три. Значением параметра src является адрес web страницы, которая будет загружаться в данный фрейм. Адрес, как видно из примера, может быть абсолютным и относительным.</p><p>И в последней строке закрывается контейнер <b></frameset> </b>.</p><p>Если заменить в первой строке кода параметр cols на rows, то мы получим такой же фреймовый документ, состоящий из трех фреймов. Только разбиение на фреймы будет идти по вертикали.</p><p><frameset rows="30%,*,30%"> <frame src="../Урок 13/index.html" /> <frame src="../Урок 12/index.html" /> <frame src="../Урок 11/index.html" /> </frameset></p><p>Параметры <b>rows </b> и <b>cols </b>одновременно использовать нельзя. Это приводит к ошибкам, и неверному отображению содержимого.</p><p>У всех сейчас возник вопрос о том, как создать такую структуру, о которой я говорил в самом начале статьи. К этому вернемся чуть позже, а пока обратимся к тому, что у нас сейчас происходит в браузере.</p><p>В браузере мы видим три страницы, каждая из которых находится в своем фрейме.</p><p>При этом мы, наведя курсор мыши к границам фреймов, можем изменять размеры фреймов, так же видны полосы прокрутки и границы между фреймами. Это не всегда нужно, даже скорее совсем не нужно. А всем этим можно управлять благодаря параметрам тегов <b>frame </b> и <b>frameset </b>.</p><p>Параметры тегов <b>frame </b> и <b>frameset </b>:</p><p><b>src =”url” </b> – обязательный параметр. Указывает адрес страницы, которая будет отображена внутри фрейма. Используется только для frame.</p><p><b>noresize </b> – отменяет возможность изменения размеров. Используется только для <b>frame </b>.</p><p><b>scrolling=”yes/no/auto” </b> – определяет наличие полос прокрутки. Значение yes – указывает на присутствие полос прокрутки. Значение no – указывает, что полос прокрутки не будет. При значение auto – браузер сам определяет, будут ли полоски прокрутки. Используется только для <b>frame </b>.</p><p><b>name=”frame-name” </b> – имя фрейма. Данный параметр используется для взаимодействия между фреймами. Подробнее о нем поговорим чуть позже. Используется только для <b>frame </b>.</p><p><b>border=число </b> – толщина границ между фреймами. Если принимает значение 0, то границы между фреймами не отображаются. Используется только для frameset.</p><p><b>framespacing=”число” </b> – расстояние между фреймами. Используется только для frameset.</p><p>Используя эти параметры, можно получить страницу, у которой не отображаются границы между фреймами, нет возможности изменять размеры фреймов и у двух последних фреймов запретим скроллинг. Код такой страницы выглядит следующим образом:</p><p><frameset cols="30%,*,30%" border="0"> <frame src="../Урок 13/index.html" noresize="noresize” /> <frame src="../Урок 12/index.html" noresize="noresize" scrolling="no" /> <frame src="../Урок11/index.html" noresize="noresize" scrolling="no" /> </frameset></p><p>Есть еще несколько параметров, но они не однозначно работают, поэтому я считаю целесообразным их даже не упоминать в выпуске.</p><p>Пожалуй, с параметрами все. Рассмотрели на примере как их применять.</p><p>Теперь создадим фреймовую структуру, о которой я говорил в самом начале выпуска.</p><p>Для этого, создаем структуру из трех фреймов с разбиением по вертикали.</p><p><frameset rows="100,*,70" border="0"></p><p>То есть, там где логотип и меню сайта высота будет 100 пикселей. Где контактная информация высота будет 70 пикселей. Все остальное место займет строка с навигацией сайта, основным содержимым сайта и рекламными баннерами.</p><p>Соответственно, вместо тега <b><frame /> </b>, мы должны вставить еще один контейнер <b><frameset> </b>..<b></frameset> </b> с тремя столбцами, и в каждый записать свой адрес страницы. Видите, ничего сложного, мы просто вместо тега <b><frame /> </b> вставляем новый, нужный нам, контейнер <b><frameset> </b>..<b></frameset> </b>.</p><p><frameset cols="20%,*,20%"> <frame src="../урок 7/lesson7.html" /> <frame src="../урок3/Untitled-1.html" /> <frame src="../урок1/lesson1.html" /> </frameset></p><p>После этого вставляем наш третий фрейм с контактной информацией и закрываем главный контейнер <b></frameset> </b></p><p><frame src="../Урок11/index.html" noresize="noresize" scrolling="no" /> </frameset></p><p>Полный код данной страницы приведен ниже:</p><p><frameset rows="100,*,70" border="0"> <frame src="../Урок 13/index.html" noresize="noresize" /> <frameset cols="20%,*,20%"> <frame src="../урок 7/lesson7.html" /> <frame src="../урок3/Untitled-1.html" /> <frame src="../урок1/lesson1.html" /> </frameset> <frame src="../Урок11/index.html" noresize="noresize" scrolling="no" /> </frameset></p><p>Конечно, адреса для фреймов я взял из предыдущих выпусков рассылки, и никакого меню, логотипа, навигации и так далее мы тут не увидели. Но структуру такую как нужно мы получили. Но если создать реальные нужные страницы, то можно получить красивую структуру.</p><p>Что мы получили в итоге. Чем это удобно или неудобно (решать вам), но при фреймовой структуре, всегда все наши фреймы остаются на странице. Независимо от величины содержимого у нас всегда будет виден логотип и меню сайта, нижняя часть сайта контактной информацией, блок навигации и баннеры. Вот, в общем-то, суть и смысл фреймов.</p><p>Существует возможность взаимодействия между фреймами. Можно сделать так, чтобы нажав на ссылку в одном фрейме, информация появилась в другом. Сейчас мы посмотрим, как это делается.</p><p>Создадим фрейм следующего вида:</p><p><img src='https://i2.wp.com/vavik96.com/wp-content/uploads/2015/01/frame3.jpg' width="100%" loading=lazy></p><p>В левом фрейме, будут располагаться наши ссылки. А в правом – страницы на которые ведут эти ссылки.</p><p>Создаем такой фрейм:</p><p><frameset cols="100,*" border="0"> <frame src="ind2.html" noresize="noresize" /> <frame src="ind3.html" name="fram1" /> </frameset></p><p>Здесь, надеюсь все понятно. Единственный момент – это у второго фрейма параметр <b>name=”fram1″ </b>. Именно значение параметра name мы и будем использовать в дальнейшем. Запомним его.</p><p>Теперь создаем документ <b>ind2.html </b>. в нем будет располагаться наш набор ссылок. В общем - это обычный html документ, только у ссылок, мы укажем параметр <b>target </b> и в качестве значение этому параметру укажем имя нашего фрейма - <b>“fram1” </b>. То есть:</p><p> on webformyself.com <br /> on mail.ru <br /> on google.ru</p><p>Создадим документ ind3.html. Можно его оставить пустым, а можно в нем расположить то, что вы хотите видеть на начальной странице.</p><p>Сейчас у нас создан фрейм из двух колонок. В левом располагается перечень ссылок, а в правом будет отображаться та страница, на которую ведет ссылка из левого фрейма.</p><p>Расскажу еще про один тег касающейся фреймов и буду заканчивать данный выпуск.</p><p>Тег <b><iframe> </b>…<b></iframe> </b>. В контейнер <b><iframe> </b>…<b></iframe> </b> обычно пишется информация о том, что браузер фреймы не поддерживает. Если браузер поддерживает фреймы, то данная информация игнорируется. Контейнер <b><iframe> </b>…<b></iframe> </b> ставится внутри html документа, в любое место, куда захочется или это требуется. В параметре src указывается адрес страницы, которая будет загружаться во фрейм. Например, поставим во второй выпуск рассылки сайт <b>webformyself.com </b>. Для этого в любом месте html документа второго выпуска напишем:</p><p><iframe src="https://www.webformyself.com" width="800" height="500" align="left">Вашим браузером фреймы не поддерживаются!</iframe></p><p>У тега <b><iframe> </b> есть ряд параметров. Некоторые из них вы видите в данном коде. Почти все они такие же, как и у тега <b><img src='/sozdanie-freimov-sozdanie-vertikalnyh-stolbcov-atributy-i-svoistva/' loading=lazy> </b>.</p><p>Итак параметры тега <b><iframe> </b>:</p><p><b>align </b> - определяет, как фрейм будет выравниваться по краю, а также способ обтекания его текстом. Значения те же, что и для тега img.</p><p><b>frameborder </b> - устанавливает, отображать границу вокруг фрейма или нет.</p><p><b>height </b> - высота фрейма.</p><p><b>hspace </b> - горизонтальный отступ от фрейма до окружающего контента.</p><p><b>name </b> - имя фрейма.</p><p><b>scrolling </b> - способ отображения полосы прокрутки во фрейме.</p><p><b>src </b> - путь к файлу, содержимое которого будет загружаться во фрейм.</p><p><b>vspace </b> - вертикальный отступ от фрейма до окружающего контента.</p><p><b>width </b> - ширина фрейма.</p><p>На этом я завершаю данный выпуск. До скорых встреч. Пока – пока!</p> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy>");</script> </article> </div> <div class="full-place" data-place="article_before_social" data-priority="0" style="width: 100%;"></div> <div class="single-share"> <div class="single-share__top"> <div class="single-share__title">Понравилась статья? <span>Поделитесь с друзьями!</span> </div> <a href="#" onClick="window.open('http://www.facebook.com/sharer.php?url=https%3A%2F%2Fmttx.ru%2Fsozdanie-freimov-sozdanie-vertikalnyh-stolbcov-atributy-i-svoistva%2F', 'sharer', 'toolbar=0,status=0, width=700, height=400'); return false" class="single-share__facebook"> <i class="fa fa-facebook-official"></i> <span>Поделиться в <b>Facebook</b> </span> </a> </div> <div class="single-share__bottom"> <div class="single-share__group"> <a href="#" onClick="window.open('http://vk.com/share.php?url=https%3A%2F%2Fmttx.ru%2Fsozdanie-freimov-sozdanie-vertikalnyh-stolbcov-atributy-i-svoistva%2F', 'sharer', 'toolbar=0,status=0, width=700, height=400'); return false" class="single-share-links-item single-share-links-item--vk"> <i class="fa fa-vk single-share-links-item__icon"></i> <span class="single-share-links-item__text"></span> </a> <a href="#" onClick="window.open('http://twitter.com/share?url=https%3A%2F%2Fmttx.ru%2Fsozdanie-freimov-sozdanie-vertikalnyh-stolbcov-atributy-i-svoistva%2F', 'sharer', 'toolbar=0,status=0, width=700, height=400'); return false" class="single-share-links-item single-share-links-item--tw"> <i class="fa fa-twitter single-share-links-item__icon"></i> <span class="single-share-links-item__text">Twitter</span> </a> </div> <div class="single-share__group"> <a href="#" onclick="window.print();" class="single-share-item single-share-item--print"><i class="fa fa-print single single-share-item__icon"></i><span>распечатать</span> </a> </div> </div> </div> <div class="article-user"> <div class="article-user-item article-user-question"> <div class="article-user-item__title">Была ли эта статья полезной?</div> <div class="article-user-item__bottom"> <div id="js-send-positive-rating" class="article-user-item__button _yes">Да</div> <div class="article-user-item__button _no">Нет</div> </div> </div> <div id="js-success-send-form" class="article-user-item article-user-question _yes _hidden"> <div class="article-user-item__title">Спасибо, за Ваш отзыв!</div> <div class="article-user-item__text"></div> </div> <div id="js-fail-send-form" class="article-user-item _no _hidden"> <div class="article-user-item__title">Что-то пошло не так и Ваш голос не был учтен.</div> </div> <div id="js-negative-rating-form" class="article-user-item article-user-question _no _hidden"> <div class="article-user-item__title">Спасибо. Ваше сообщение отправлено</div> </div> <div class="article-user-item article-user-error"> <div class="article-user-item__title">Нашли в тексте ошибку?</div> <div class="article-user-item__text">Выделите её, нажмите <strong>Ctrl + Enter</strong> и мы всё исправим!</div> </div> </div> <div class="full-place" data-place="article_before_related_articles" data-priority="0" style="width: 100%;"></div> <div class="similar-articles"> <div class="similar-articles__title"> <i class="fa fa-angle-double-left"></i>Похожие советы<i class="fa fa-angle-double-right"></i> </div> <div class="block-row"> <div class="block-column _triple"> <div class="similar-articles-block"> <div class="similar-articles-block__image"> <img src="/uploads/1dc63577943143c4879b909d64c0645d.jpg" alt="Что означают буквы«мм»: все возможные значения В контакте русская версия" loading=lazy> </div> <a href="/v-kontakte-chto-oznachayut-bukvy-mm-vse-vozmozhnye-znacheniya-v-kontakte/" title="Что означают буквы«мм»: все возможные значения В контакте русская версия" class="similar-articles-block__title"> Что означают буквы«мм»: все возможные значения В контакте русская версия </a> </div> </div> <div class="block-column _triple"> <div class="similar-articles-block"> <div class="similar-articles-block__image"> <img src="/uploads/370cb7ff1f7e9bde457c05f9d12bee36.jpg" alt="Электронные самоделки для радиолюбителей и начинающих электриков" loading=lazy> </div> <a href="/kakie-pribory-mozhno-sdelat-svoimi-rukami-elektronnye-samodelki-dlya/" title="Электронные самоделки для радиолюбителей и начинающих электриков" class="similar-articles-block__title"> Электронные самоделки для радиолюбителей и начинающих электриков </a> </div> </div> <div class="block-column _triple"> <div class="similar-articles-block"> <div class="similar-articles-block__image"> <img src="/uploads/63f9d484568216eb8915ccb8181a9050.jpg" alt="Samsung GT-I9003 сброс до заводских настроек Что такое Hard reset Samsung GT-I9003" loading=lazy> </div> <a href="/sbros-do-zavodskih-nastroek-hard-reset-dlya-telefona-samsung-galaxy-s-sclcd-gt-i9003-samsung/" title="Samsung GT-I9003 сброс до заводских настроек Что такое Hard reset Samsung GT-I9003" class="similar-articles-block__title"> Samsung GT-I9003 сброс до заводских настроек Что такое Hard reset Samsung GT-I9003 </a> </div> </div> </div> <div class="block-row"> <div class="block-column _triple"> <div class="similar-articles-block"> <div class="similar-articles-block__image"> <img src="/uploads/54e09bf1f0920d9e135a9e50c00092f5.jpg" alt="Samsung GT-I9003 сброс до заводских настроек Как сделать полный сброс данных на телефоне Samsung Galaxy S scLCD GT-I9003 из меню настроек" loading=lazy> </div> <a href="/sbros-do-zavodskih-nastroek-hard-reset-dlya-telefona-samsung-galaxy-s-sclcd-gt-i9003-samsung/" title="Samsung GT-I9003 сброс до заводских настроек Как сделать полный сброс данных на телефоне Samsung Galaxy S scLCD GT-I9003 из меню настроек" class="similar-articles-block__title"> Samsung GT-I9003 сброс до заводских настроек Как сделать полный сброс данных на телефоне Samsung Galaxy S scLCD GT-I9003 из меню настроек </a> </div> </div> <div class="block-column _triple"> <div class="similar-articles-block"> <div class="similar-articles-block__image"> <img src="/uploads/ece27e98c2e58fb06b6f1d2acc2b790f.jpg" alt="Что делать, если телефон сам перезагружается" loading=lazy> </div> <a href="/smartfon-perezagruzhaetsya-pri-zaryadke-chto-delat-esli-telefon-sam/" title="Что делать, если телефон сам перезагружается" class="similar-articles-block__title"> Что делать, если телефон сам перезагружается </a> </div> </div> <div class="block-column _triple"> <div class="similar-articles-block"> <div class="similar-articles-block__image"> <img src="/uploads/c277df224897c5ce57d42d69afbaab78.jpg" alt="Телефон Android не включается дальше логотипа (не хочет загружаться)" loading=lazy> </div> <a href="/pochemu-planshet-ne-vklyuchaetsya-android-telefon-android-ne-vklyuchaetsya/" title="Телефон Android не включается дальше логотипа (не хочет загружаться)" class="similar-articles-block__title"> Телефон Android не включается дальше логотипа (не хочет загружаться) </a> </div> </div> </div> </div> <div class="full-place" data-place="article_after_related_articles" data-priority="0" style="width: 100%;"></div> <div class="comments"> <div id="mc-container"></div> </div> </article> <aside class="sidebar hide-on-mobile"> <div class="day-sovet"> <h3 class="day-sovet__hd">Тема дня</h3> <div class="day-sovet__box"> <img src="/uploads/323a0b2e05c870f6aa64024a67f37b43.jpg" alt="Процедура отключения обновления в Mozilla Как убрать обновление фаерфокс" class="day-sovet__image" loading=lazy> <a href="/category/mts/" class="day-sovet__category"> <span>Мтс</span> </a> </div> <a href="/kak-otkatit-firefox-na-predydushchuyu-versiyu-procedura-otklyucheniya/" class="day-sovet__link"> <span>Процедура отключения обновления в Mozilla Как убрать обновление фаерфокс</span> </a> </div> <!-- /next_post --> <div class="vk-widget"> <h3 class="vk-widget__hd">Реклама</h3> <div id="pypase1" style="height:400px;width:298px;" align="center"></div> </div> <div class="popular-articles"> <h3 class="black-hd popular-articles__title">Популярные материалы</h3> <div class="popular-articles__item"> <div class="row-gui"> <div class="row-gui__image"> <a href="/gadzhety-dlya-windows-10-regulirovka-gromkosti-programmy-dlya/" class=""> <img src="/uploads/8aebb6ca9def8f3e8e5300bcc335bff6.jpg" alt="Программы для настройки звука" loading=lazy> </a> </div> <div class="row-gui__content"> <a href="/gadzhety-dlya-windows-10-regulirovka-gromkosti-programmy-dlya/" class="row-gui__link"> <span>Программы для настройки звука</span> </a> </div> </div> </div> <div class="popular-articles__item"> <div class="row-gui"> <div class="row-gui__image"> <a href="/televizor-samsung-v-kachestve-monitora-plyusy-i-minusy-ispolzovaniya-televizora-vmesto-monitora-podk/" class=""> <img src="/uploads/a57cdf20117bde438f194dd215a0f75e.jpg" alt="Плюсы и минусы использования телевизора вместо монитора" loading=lazy> </a> </div> <div class="row-gui__content"> <a href="/televizor-samsung-v-kachestve-monitora-plyusy-i-minusy-ispolzovaniya-televizora-vmesto-monitora-podk/" class="row-gui__link"> <span>Плюсы и минусы использования телевизора вместо монитора</span> </a> </div> </div> </div> <div class="popular-articles__item"> <div class="row-gui"> <div class="row-gui__image"> <a href="/programma-dlya-vyyavleniya-neispravnostei-operativnoi-pamyati-kak-vypolnit/" class=""> <img src="/uploads/1d22d20477bc0866a7ea7e57b6e0554e.jpg" alt="Как выполнить тест оперативной памяти?" loading=lazy> </a> </div> <div class="row-gui__content"> <a href="/programma-dlya-vyyavleniya-neispravnostei-operativnoi-pamyati-kak-vypolnit/" class="row-gui__link"> <span>Как выполнить тест оперативной памяти?</span> </a> </div> </div> </div> <div class="popular-articles__item"> <div class="row-gui"> <div class="row-gui__image"> <a href="/pervyi-kanal-hd-smotret-onlain-kommentarii-pervyi-kanal-8023/" class=""> <img src="/uploads/159d0d478179616fa22cf8b3fe1760dc.jpg" alt="Комментарии Первый канал (8023) Идет орт" loading=lazy> </a> </div> <div class="row-gui__content"> <a href="/pervyi-kanal-hd-smotret-onlain-kommentarii-pervyi-kanal-8023/" class="row-gui__link"> <span>Комментарии Первый канал (8023) Идет орт</span> </a> </div> </div> </div> <div class="popular-articles__item"> <div class="row-gui"> <div class="row-gui__image"> <a href="/ustanovka-trikolor-tv-v-shchekino-ustanovka-trikolor-tv-v-shchekino/" class=""> <img src="/uploads/81e27754520e0fa020cee275ba63d5d5.jpg" alt="Установка триколор тв в щекино Установка и подключение" loading=lazy> </a> </div> <div class="row-gui__content"> <a href="/ustanovka-trikolor-tv-v-shchekino-ustanovka-trikolor-tv-v-shchekino/" class="row-gui__link"> <span>Установка триколор тв в щекино Установка и подключение</span> </a> </div> </div> </div> <div class="popular-articles__item"> <div class="row-gui"> <div class="row-gui__image"> <a href="/interferenciya-solnechnaya-solnechnaya-zasvetka-sputnikovaya-svyaz/" class=""> <img src="/uploads/3764d8ca53a703cf2cf539e95647e3a6.jpg" alt="Интерференция солнечная. Солнечная засветка. Спутниковая связь. Как определить время солнечной интерференции Особенности работы с калькулятором" loading=lazy> </a> </div> <div class="row-gui__content"> <a href="/interferenciya-solnechnaya-solnechnaya-zasvetka-sputnikovaya-svyaz/" class="row-gui__link"> <span>Интерференция солнечная. Солнечная засветка. Спутниковая связь. Как определить время солнечной интерференции Особенности работы с калькулятором</span> </a> </div> </div> </div> <div class="popular-articles__item"> <div class="row-gui"> <div class="row-gui__image"> <a href="/moya-strana-tele2-opisanie-opisanie-uslugi-moya-strana-ot-tele2-stoimost/" class=""> <img src="/uploads/c54d263909c2977eccda3b3f33e85719.jpg" alt="Описание услуги «Моя страна» от Теле2" loading=lazy> </a> </div> <div class="row-gui__content"> <a href="/moya-strana-tele2-opisanie-opisanie-uslugi-moya-strana-ot-tele2-stoimost/" class="row-gui__link"> <span>Описание услуги «Моя страна» от Теле2</span> </a> </div> </div> </div> </div> </aside> </div> <div class="full-place" data-place="article_desktop_fixed" data-priority="0" style="width: 100%;"></div> <footer class="footer"> <div class="footer__wrapper"> <div class="footer__box"> <a href="/" class="footer__logo1"><img src="/logo/logo.png" loading=lazy></a><br> <div class="social-buttons"> <div class="social-buttons-list"> <a href="https://vk.com/share.php?url=https://mttx.ru/sozdanie-freimov-sozdanie-vertikalnyh-stolbcov-atributy-i-svoistva/" class="social-buttons-list__item _vk">Vkontakte</a> <a href="https://www.facebook.com/sharer/sharer.php?u=https://mttx.ru/sozdanie-freimov-sozdanie-vertikalnyh-stolbcov-atributy-i-svoistva/" class="social-buttons-list__item _fb">Facebook</a> </div> </div> <p class="footer__copyright">© 2024. Энциклопедия мобильной связи</p> </div> <nav class="footer-menu"> <a class="footer-menu__item" href="/category/beeline/">Билайн</a> <a class="footer-menu__item" href="/category/yota/">Йота</a> <a class="footer-menu__item" href="/category/tele2/">Теле2</a> <a class="footer-menu__item" href="/category/mts/">Мтс</a> <a class="footer-menu__item" href="/category/megaphone/">Мегафон</a> </nav> <div class="footer__counters"> </div> </div> </footer> <div class="scroll-up"> <div id="toTop"><span class="up_b"></span>Наверх</div> </div> <div class="full-place" data-place="article_modal" data-priority="0" style="width: 100%;"></div> <div class="full-place" data-place="article_modal" data-priority="0" style="width: 100%;"></div> <script data-rocketsrc="/assets/sovets24-2017/js/app-20171130102046.js" type="text/rocketscript"></script> <script type="text/rocketscript"> if(window.location.hostname.indexOf('hghltd.yandex.net')!=-1){ // hghltd.yandex.net var i; var x = document.getElementsByClassName("direct"); for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } } (function(H){ H.className=H.className.replace(/\bno-js\b/,'js')} )(document.documentElement); </script> <script type="text/rocketscript"> APP.pages.articleView(); APP.modules.ratingBlock.init(); Engine.article.errorInTextReport(); document.oncopy = Engine.addLinkOnCopy; </script> <script type="text/rocketscript"> var BANNERS = { types: { code: 1, consultant: 6, modal: 9, offer: 7 } } </script> </body> </html>