Фреймы в html
Окно браузера может быть разделено на фреймы, т.е. на области расположенные рядом друг с другом. В каждую из этих областей можно загружать свои html-страницы. На примере будет понятнее, создайте новый файл с названием index.html со следующим кодом:
Фреймы в html
В окне браузера это будет выглядеть так:
Окно браузера разделено на 3 части. Надо сказать, что это единственный случай, когда в html-документе отсутствуют теги . Вместо них используются теги , которые и указывают браузеру разбить окно на несколько областей — фреймов.
Сколько будет таких областей и как они будут расположены зависит от двух параметров тега :
-
rows — указывает разбить окно на горизонтальные области. Причем, сколько значений у этого параметра, столько и областей. В нашем примере rows=»30%, 10%, 60%» , т.е. три горизонтальные области: ширина первой — 30% от ширины экрана, ширина второй — 10%, а третьей — 60%.
Внутри тегов располагаются одиночные теги , причем их должно быть столько, сколько задано областей. Без параметров эти теги бесполезны.
Мы рассмотрим параметры тега на примерах.
-
src — самый главный параметр, он определяет адрес той html-страницы или картинки, которая будет загружаться во фрейм.
Давайте определим этот параметр для наших фреймов в примере. Для этого создайте три обычные html-страницы:
top.html со следующим кодом:
Как сделать фреймы в html
Фреймы (frames) в HTML позволяют разбить окно браузера на несколько областей, каждая из которых может загружать свой документ. Для создания фреймов используется тег , а каждый фрейм задается тегом .
Пример создания фреймов:
Моя страница cols="25%,75%"> src="menu.html" name="menu"> src="content.html" name="content"> Это основное содержимое страницы.
В данном примере cols=»25%,75%» задает два столбца фреймов, где первый занимает 25% ширины окна браузера, а второй — 75%.
Каждый фрейм задается тегом с атрибутом src , который указывает на адрес загружаемого документа, и атрибутом name , который задает имя фрейма для возможности ссылаться на него из других фреймов или страниц.
Внутри тега можно использовать другие теги, например, , которые будут отображаться в случае, если браузер не поддерживает фреймы.
Фреймы в HTML
Фрейм — это область страницы, в которой отображается отдельный, зачастую сторонний HTML-документ. То есть страница с фреймами — это страница, разделённая на области, каждая из которых, в свою очередь, отображает отдельную HTML-страницу, которая может быть не связана с соседними ни оформлением, ни контентом.
Раньше для создания фреймов обязательно нужно было делать отдельную фрейм-страницу и подключать к ней страницы содержания. Для этого использовались теги и .
Однако язык HTML эволюционировал, и в последней, пятой редакции все теги, кроме одного, были упразднены.
Современные фреймы создаются исключительно с помощью тега , для оформления которого используются CSS-стили.
Практическое использование изображено на рисунке ниже. На странице index.html расположен фрейм, в котором отображается содержимое документа gallery.html.
Добавить фрейм на страницу очень легко. Например, фрейм на рисунке был вставлен с помощью следующего кода:
iframe> — тег фрейма. Он парный, закрывать обязательно. Текст внутри отобразится в том случае, если браузер не поддерживает фреймы.
src — атрибут, значением которого является ссылка на отображающийся во фрейме документ.
width — ширина (указывается в пикселях или процентах).
height — длина (задаётся аналогично).
Также кроме перечисленных и общих свойств тегу доступны следующие атрибуты.
sandbox. Позволяет установить ограничения на загружаемый во фрейм контент, а именно блокировать скрипты, формы и всплывающие окна, повышая тем самым безопасность элемента.
seamless. Атрибут без значения, указывающий, что содержимое фрейма не должно выделяться, оно будет отображаться, как часть основного документа.
srcdoc. В этом атрибуте хранится содержимое фрейма, при его наличии свойство src игнорируется.
scrolling. Задаёт отображение полос прокрутки. По умолчанию они появляются только когда нужны, но если это нарушает ваш дизайн, можно либо запретить их появление, либо установить принудительное создание даже когда необходимости в прокрутке нет.
Чтобы редактировать HTML online воспользуйтесь визуальным редактором по ссылке.
Полезные ссылки:
- Основы HTML — бесплатный 2-х часовой видеокурс по основам HTML;
- Бесплатный курс по верстке сайта — пример блочной вёрстки с чистого листа;
- Вёрстка сайта с нуля 2.0 — полноценный платный курс;
- Создание приложений для Android — для тех, кто давно хотел попробовать себя в мобильной разработке (не для новичков).
Фреймы
Фреймы — это HTML-элементы, позволяющие разделить окно веб-браузера на несколько независимых окон, в каждое из которых можно загрузить отдельный HTML-документ. Каждое такое окно (фрейм) может иметь собственные полосы прокрутки и функционировать независимо от других независимых окон либо наоборот управлять их содержанием. Они могут применяться для организации постоянно находящегося в одном окне меню, в то время как в другом окне располагается непосредственно сама информация. Пользователи могут обращаться к меню в любой момент, и им не нужно возвращаться к предыдущей странице, чтобы выбрать другой пункт меню. Применение фреймов позволит вам «закрепить» в окне браузера изображения или другие неподвижные по замыслу элементы интерфейса, в то время как остальная часть страницы будет прокручиваться во фрейме.
Однако, стоит отметить, что в наши дни фреймы считаются устаревшим средством, а сайты с фреймами теперь считаются несолидными, так как профессиональные веб-мастера никогда не используют фреймы в своих проектах. С фреймами связан целый ряд печально известных проблем. Они, например, сбивают с толку поисковые машины, поскольку на страницах, которые содержат контент, нет ссылок на другие документы. Если вы хотите получать посетителей с поисковых систем, забудьте о фреймах. Понравившуюся страницу пользователю невозможно поместить в раздел закладки браузера, так как фреймы скрывают адрес страницы, на которой он находится, и всегда показывают только адрес веб-сайта. По этой причине они создают проблемы для браузеров при отслеживании хронологии и еще они не слишком приспособлены для разных размеров экранов и мобильных устройств.
Несмотря на то, что проекты с фреймами встречаются во всемирной паутине все реже, изучение HTML было бы неполным без рассмотрения темы о фреймах. У фреймов наряду с недостатками есть и некоторые достоинства, которые не позволяют отбросить эту технологию как бесперспективную.
Создание фреймов
Структура HTML-документа с фреймами внешне очень напоминает формат обычного HTML-документа. Как и в обычном HTML-документе, весь код помещен между парными тегами и , а в контейнере располагаются заголовки. Основное отличие документа с фреймами от обычного HTML-документа — у документа с фреймами вместо тега применяется парный тег (от англ. frame set – набор фреймов).
В следующем примере приведена структура HTML-документа с фреймами:
Пример: Структура HTML-документа с фреймами
Документ с фреймами - rows — описывает разбиение страницы на строки:
- cols — описывает разбиение страницы на столбцы:
В значении атрибутов rows и cols необходимо указывать не количество строк или столбцов, а значение ширины и высоты фреймов. Все значения в списке разделяются запятыми. Размеры могут быть указаны в абсолютных единицах (в пикселах) или в процентах:
- cols=»20%, 80%» — окно браузера разбивается на две колонки с помощью атрибута cols, левая колонка занимает 20%, а правая 80% окна браузера.
- rows=»100, *» окно браузера разбивается на два горизонтальных окна с помощью атрибута rows, верхнее окно занимает 100 пикселов, а нижнее — оставшееся пространство, заданное символом звездочки.
Как видно из данного примера, контейнер с атрибутом rows вначале создает два горизонтальных фрейма, а вместо второго фрейма подставляется еще один , который разбивает нижний горизонтальный фрейм на две колонки с помощью атрибута cols, левая колонка занимает занимает 20%, а правая 80% окна браузера.
Если браузер не поддерживает фреймы, то в окне будет отображен текст, расположенный между тегами и . Все, что находится между тегами и , игнорируется браузерами, поддерживающими фреймы. Таким образом разработчику нужно написать код, дублирующий содержимое фреймов другими средствами, и поместить этот код в контейнер , тогда все пользователи смогут увидеть его веб-страницу.
Как уже отмечалось, для вставки в документ отдельного фрейма служит непарный тег . Атрибут src задает документ, который должен отображаться внутри данного фрейма, например: . Если атрибут src отсутствует, отображается пустой фрейм.
Границы или пространство между фреймами
По умолчанию, браузер отображает серую и, как правило, в виде трехмерной линии границу между фреймами, с помощью которой посетители могут регулировать размер фрейма.
Границей фрейма можно управлять, как и любыми другими элементами фрейма. Для этого существует несколько атрибутов элемента , позволяющих настраивать границы фреймов. Толщина линии границы определяется атрибутом border. По умолчанию значение толщины границы равно пяти.
Чтобы скрыть границу фрейма, необходимо либо указать значение ширины границы равным нулю, либо присвоить значение «no» или «0» атрибуту frameborder. Атрибут frameborder может принимать только два противоположных значения. Если значение атрибута frameborder равно «yes» или «1», то граница фреймов будет отображаться, а если «0» или «no», то нет. Учтите, что значения атрибута frameborder различаются для разных браузеров. Чтобы решить эту проблему используйте дважды атрибут frameborder, а для некоторых браузеров требуется еще добавить атрибут framespacing со значением «0»:
В следующем примере убираем границу между фреймами: