Первая строка этого HTML-кода задает три фрейма, между которыми оставлено место под рамку толщиной 10 пикселов (рис. 5.13).
Между окнами фреймов "А" и "в" рамка не прорисовывается благодаря значению NO параметра FRAMEBORDER, тем не менее для рамки определен красный цвет (red). Для последнего фрейма "с" значение FRAMEBORDER задано равным Yes и переопределяет значение, установленное в первой строке. Поэтому между фреймами с именами "в" и "С" все-таки будет нарисована рамка красного цвета и толщиной 10 пикселов.
Заметим, что фреймы без рамок используются не так уж и редко. Следует помнить, что отсутствие рамок не запрещает появление полос прокрутки (рис. 5.14).
Браузер Microsoft Internet Explorer разрешает использовать параметр FRAMEBORDER для тех же целей, как было описано выше, но не позволяет задавать цвет и толщину рамок. Однако в качестве значения параметра FRAMEBORDER допустимо использовать только числовое значение "О" для отмены прорисовки рамки или отличное от нуля числовое значение для прорисовки рамки.
Различие в правилах задания значений параметра FRAMEBORDER для разных браузеров весьма неприятно. Попробуйте, например, задать FRAMEBORDER=Yes. Такая запись верна для Netscape, а для Microsoft Internet Explorer приведет к отсутствию рамки. Предыдущий пример (рис. 5.13) при просмотре в Microsoft Internet Explorer будет представлен без рамки.
Браузер Microsoft Internet Explorer разрешает использовать дополнительный параметр FRAMESPACING, записываемый в тэге
, значение которого определяет количество пикселов между фреймами, оставляемое пустыми.
Приведем пример, результат отображения которого приводится на рис. 5.15.
Изменение расстояния между фреймами
Рис. 5.15.
Пустое пространство между фреймами в Microsoft Internet Explorer
Примечание
К сожалению, во многих описаниях языка HTML ошибочно указывается, что параметр FRAMESPACING должен использоваться в тэге . Microsoft Internet Explorer допускает использование этого параметра только в тэге .
Плавающие фреймы
Браузер Microsoft Internet Explorer разрешает использовать уникальный тег
Кроме того, для задания расположения и размеров плавающего фрейма в документе можно использовать следующие дополнительные параметры: WIDTH, HEIGHT, HSPACE, VSPACE, ALIGN. Их назначение и порядок использования совпадает с соответствующими параметрами для встроенных изображений, которые задаются тэгом .
Приведем пример использования плавающих фреймов:
Использование плавающих фреймов
Пример использования концепции плавающих фреймов СЕМТЕК>
Ваш браузер не позволяет отображать плавающие фреймы
Браузер Microsoft Internet Explorer - первый из браузеров (и пока
единственный), который поддерживает так называемые "плавающие" фреймы.
Такие фреймы могут размещаться в любом месте экрана так же, как
графические изображения и таблицы.
Фрейм справа от данного текста размещен на странице с помощью
специального тега . При создании фрейма было указано
выравнивание вправо.
Результат отображения данного примера браузером Microsoft Internet Explorer показан на рис. 5.16. Браузеры, не поддерживающие концепцию плавающих фреймов, для данного примера вместо отображения содержимого документа float.htm выдадут текст "Ваш браузер не позволяет отображать плавающие фреймы".
Рис. 5.16.
Плавающий фрейм в Microsoft Internet Explorer
Отметим, что концепция плавающих фреймов близка по идеологии к встроенным изображениям или таблицам. Здесь в нужное место HTML-документа целиком встраивается другой HTML-документ.
Совет
В настоящий момент применение плавающих фреймов ограничивается единственным браузером - Microsoft Internet Explorer версии 3.0 и выше. Следует помнить, что пользователи других браузеров (в частности, Netscape) не смогут увидеть содержимого плавающих фреймов.
Средства создания документов, содержащих фреймы
HTML-документ, содержащий фреймы, как и любой другой документ, может быть создан или отредактирован вручную при помощи любого доступного текстового редактора. Большинство специализированных HTML-редакторов либо не имеют возможностей визуального создания фреймов, либо обладают весьма ограниченными возможностями. Существует несколько специальных редакторов, которые ориентированы на создание фреймов. Кратко опишем возможности некоторых из них.
Редактор фреймов FrameGang
Одним из таких редакторов является утилита FrameGang, разработанная австралийской фирмой Sausage Software, которая более известна своим популярным HTML-редактором HotDog.
Информацию об этом программном продукте можно получить по адресу
http://www.sausage.com
, а также из сборника программных продуктов для Интернета (по адресу
http://www.tucows.com
или любому другому из нескольких десятков серверов-зеркал, разбросанных по всему миру).
Утилита FrameGang является дополнением к любому HTML-редактору или обычному текстовому редактору, работающему в среде Windows, которая позволяет визуально сконструировать необходимую структуру фреймов и затем сгенерировать соответствующий HTML-код. Получаемый HTML-код через буфер обмена Windows (Clipboard) может быть передан в HTML-редактор. Программа FrameGang позволит быстро построить нужную фреймовую структуру.
Рассмотрим возможности программы. После установки данной
программы в Windows и ее запуска предлагается выбрать одну из двух возможных структур фреймов первого (верхнего) уровня - поколонное расположение фреймов (Columns) или построчное (Rows), а также определить их количество. В дальнейшем каждый из фреймов первого уровня может при необходимости быть разбит на несколько фреймов второго уровня. Большее количество уровней фреймов не предусмотрено, однако это не является существенным ограничением, так как на практике редко используется более двух уровней.
Пусть для примера выбрано четыре фрейма, расположенных по
колонкам. Далее следует создать структуру фреймов второго уровня, что
осуществляется разбиением существующих фреймов в противоположном направлении. Для данного примера фреймы могут разбиваться только по горизонтали. Создание фреймов второго уровня выполняется в пункте меню Add, реализация которого добавляет очередной фрейм к текущему.
Заметим, что смешные картинки во фреймах не несут смысловой нагрузки и служат лишь для заполнения пустого пространства. Их прорисовка может быть отменена в меню Options. Также отметим, что само название фирмы-производителя (sausage - сосиски) и название некоторых ее программных продуктов (HotDog - в переводе не нуждается) определило стиль интерфейса данного пакета - во многих пунктах меню встречается изображение сосисок.
После определения структуры фреймов следует задать их размеры. Это выполняется простым перемещением границ фреймов мышью так же, как это делается для изменения размеров окон системы Windows. Установленные размеры для текущего фрейма отображаются в процентах в окнах с названиями Width и Height. При необходимости задать размеры фреймов не в процентах, а в пикселах или относительных единицах, следует изменить получаемый HTML-код вручную вне программы FrameGang.
Далее для каждого фрейма нужно задать его имя (Name), которое может быть опущено, URL-адрес документа, загружаемого в данный фрейм изначально (Frame URL), а также выбрать значение параметра изменяемости размеров фрейма (Resizeable Frame Border) и параметра прокрутки содержимого фрейма (Frame Scrolling).
В любой момент можно посмотреть создаваемую фреймовую структуры в выбранном внешнем браузере, не выходя из программы FrameGang. Для этого служит кнопка Preview. Задание имени браузера производится в меню Options. После задания всех параметров следует сгенерировать HTML-код, соответствующий выбранной структуре фреймов, который будет записан в буфер обмена Windows (кнопка HTML Compile). Полученный код может быть вставлен из буфера обмена в нужное место HTML-файла при работе в любом редакторе.
Кнопки сохранения (Save) и открытия (Open) файла позволяют сохранять и считывать файл только в специальной кодировке, свойственной программе FrameGang и не предназначенной для иного использования.
Ниже представлен HTML-код, сгенерированный программой FrameGang для описанного примера:
Для получения корректного HTML-документа полученный код достаточно заключить между тэгами и . Можно добавить раздел заголовка документа
, в котором определить нужные данные, например, название документа (напомним, что название документа записывается между тэгами и ). Заметим, что современные браузеры могут правильно работать даже при отсутствии некоторых необходимых тэгов. Если приведенный выше HTML-код сохранить в виде файла с соответствующим расширением даже без добавления каких-либо тэгов, то и Netscape Navigator, и Microsoft Internet Explorer смогут правильно отобразить данный документ.
Программа FrameGang позволяет визуально проектировать фреймы, достаточна удобна и проста в эксплуатации, однако не лишена отдельных недостатков. В частности, нет возможности уточнить размеры фреймов, записывая нужные числа в окнах Width и Height, так как в них лишь отображаются размеры, устанавливаемые при перемещении границ фреймов мышью. Не задаются общепринятые параметры фреймов MARGINWIDTH и MARGINHEIGHT. Нет возможности записи файла в текстовом формате на диск, что не дает возможности воспользоваться данной программой автономно.
Редактор фреймов Frame-It
Еще одним специализированным редактором фреймов является программа Frame-It, информацию о которой можно получить по адресу:
http://www.iinet.net.au/~bwh/frame-it.html
Работа с этой программой во многом аналогична предыдущей. Сначала требуется определить основную структуру фреймов и их количество. Далее каждый фрейм при необходимости разбивается на несколько, образуя структуры второго уровня. Так же, как и предыдущей программе, количество уровней вложенности фреймов ограничивается двумя.
Для каждого фрейма задаются все необходимые параметры путем
заполнения соответствующих полей. В отличие от предыдущей программы здесь предусмотрено задание значений параметров MARGINWIDTH и MARGINHEIGHT. Кроме того, введен флажок Invisible Frame Borders, установка которого обеспечивает генерацию следующего фрагмента кода:
FRAMEBORDER="NO" BORDER="0" FRAMESPACING="0".
После задания необходимых параметров фреймов можно сохранить
сгенерированный HTML-код в файле или записать его в буфер обмена Windows.
Сгенерированный код будет содержать не только описание структуры фреймов, но и
начальный тег , а также пару тегов и , между
которыми записывается информация, предназначенная для браузеров, не отображающих
фреймы.
Для определенного
примера будет сгенерирован следующий код:
FRAMESРАСING="0">
с фреймовой структурой
Если в данном примере сбросить флажок Invisible Frame Borders, то генерируемый код значительно изменится:
scrolling=auto noresize>
scrolling=auto noresize>
scrolling=auto noresize>
scrolling=auto noresize>
scrolling=auto noresize>
Ваш браузер не может показывать документы
с фреймовой структурой
Информация
об использовании фреймов на WWW
Для получения информации о фреймах можно обратиться к следующим адресам на WWW:
http://www.spunwebs.com/sites2c/frmtutor.html
http://union.ncsa.uiuc.edu/HyperNews/get/www/html/guides.html
http://cox.asu.edu/Trial/faq/webfaqs/frame/
http://www.netlingo.com/more/framestarget.html
http://www.aubg.bg/beast/students/raduluc/teach/fr/
http://www.as.net/frame/
http://www.cqi.com/~pmurphey/instruction/
http://www.iwaynet.net/~rtyler/htmltutorial/frames.html
http://edbo.com/frames/
http://bela.fei.tuke.sk/netscape/frames/
http://www.newbie.net/frames/2ed/rnenu.htmtfcontents
http://infoserver.etI.vt.edu/coe/COE_Students/laughon/frame.html
http://www.htmlhelp.com/frames/syntax/
http://www.woodhill.co.uk/html/
http://www.htmlhelp.com/design/frames/
Пример фреймовой структуры
Окно браузера может быть разделено на фреймы, т.е. на области расположенные рядом друг с другом. В каждую из этих областей
можно загружать свои html-страницы. На примере будет понятнее, создайте новый файл с названием index.html со следующим кодом:
Фреймы в html
В окне браузера это будет выглядеть так:Окно браузера разделено на 3 части. Надо сказать, что
это единственный случай, когда в html-документе отсутствуют теги
. Вместо них
используются теги
, которые и указывают браузеру разбить окно
на несколько областей - фреймов.
Сколько будет таких областей и как они будут расположены зависит от двух параметров
тега
:
rows
- указывает разбить окно на горизонтальные области. Причем, сколько значений у этого
параметра, столько и областей. В нашем примере rows="30%, 10%, 60%"
, т.е. три горизонтальные
области: ширина первой - 30% от ширины экрана, ширина второй - 10%, а третьей - 60%. cols
- указывает разбить окно на вертикальные области.
Внутри тегов
располагаются одиночные теги
,
причем их должно быть столько, сколько задано областей. Без параметров эти теги бесполезны.Мы рассмотрим параметры тега
на примерах.
Вот мы и рассмотрели все параметры тега
.
Последний штрих: уберем рамки фреймов. Для этого в тег
добавим два параметра
border="0" frameborder="0"
.
Фреймы в html
Теперь наша страница выглядит так:
Плюсы и минусы фреймов
Теперь, когда вы имеете представление о фреймах, пришло время сказать о достоинствах и
недостатках сайтов с фреймовой структурой.
Безусловным преимуществом является сокращение количества загружаемой на компьютер пользователя информации. Ведь шапка и меню
сайта загружаются только один раз, а далее меняется только контент. Конечно, это сокращает время загрузки.
Но недостатков гораздо больше. Во-первых, в структуре фреймов легко запутаться.
Во-вторых, наше меню лежит в отдельном файле. А это
значит, если пользователь нашел, например, вашу страницу content.html через поисковую систему, то он сможет прочитать только ее,
ведь никаких ссылок и пунктов меню на этой странице нет.
И наконец, фреймовую структуру поддерживают не все
браузеры. Поэтому существуюте теги
, они располагаются внутри тегов
и содержат альтернативную информацию для браузеров не поддерживающих
фреймы. По сути вам придется выполнить двойную работу и создать две версии сайта: с фреймами и без них.
Отсюда вывод - не используйте фреймы без острой необходимости.
Примеры фреймовых структур
Как вы помните за разделение на фреймы отвечают два параметра: rows
и cols
. Комбинируя их,
можно разбить окно на фреймы любым образом. Примеры такого разбиения мы и рассмотрим.
Пример 1:
Фреймы в html
Получим три вертикальных фрейма. Ширина первого - 150 пикселов, второго - 300, а третьего - все остальное пространство окна.Результат:
Пример 2:
Фреймы в html
Получим два вертикальных фрейма. Ширина первого принимается равной за единицу, а второй - в два раза шире первого (т.е. 33% и 67%
от ширины окна).Результат:
Пример 3:
Фреймы в html
Получим два горизонтальных фрейма. Высота первого - 100 пикселов, а второго - все остальное пространство.
Второй горизонтальный фрейм разобьем на два вертикальных: один шириной 200 пикселов, а второй будет занимать все остальное место.
Это достигается с помощью вложенных тегов
.
Наверняка Вы уже не один раз слышали о таком понятие, как фреймы. Прочитать о них можно в любом html-учебнике, а также на ресурсах о создании сайтов . Изучив множество примеров и описаний, я решил рассказать все о фреймах своими словами в очень простой форме. О плюсах, о минусах и о будущем фреймов будет сказано в самом низу этой страницы. Итак, что же такое фреймы в html?
Что такое Фреймы в html
Фрейм
(англ. frame) - некоторая подключаемая независимая область на веб-странице.
Не пугайтесь, что это звучит немного непонятно. Давайте сразу приведем самый простой пример и тогда все станет ясно.
Отройте помощь (help) в любой программе (это может быть блокнот, какая-то программа, браузер и т.п.). Практически всегда Вы увидите хелп состоящий из двух частей (слева навигация, справа содержимое). Левая и правая части как раз и являются отдельными фреймами. Ниже представлен скриншот сделанный из хелпа самого обыкновенного блокнота Windows:
Рис 1. Использования фреймы на примере хелпа блокнота
То что Вы видите, является веб-страничкой состоящий из двух отдельных независимых фреймов. Приведем примерный html код такого фрейма из хелпа.
Пример с фреймами №1 (делаем помощь)
В каркасе выше рассмотренный хелп будет выглядеть следующим образом:
Рис 2. Каркас использования фреймов для примера №1
Разбиение страницы на области с помощью фреймов очень напоминает табличную верстку html (см. HTML тег table). Примерный код такой страницы может выглядеть следующим образом:
Пример №1 html-страницы с фреймами
Пояснение к примеру №1
Как видно из кода выше, страница созданная из фреймов очень похожа на обыкновенную html-страницу: есть открывающий тег html, раздел
, заголовок
, но есть одно большое различие. Наверное, Вы обратили внимание, что тег body, который отвечает за тело страницы - отсутствует. Вместо него вставлен тег
, который отвечает за тело страницы. У этого тега есть два атрибут cols="25%,75%"
, что означает разбить все тело страницы на две области по вертикали в пропорции 1:3. Первая область займет 25% от ширины всего экрана (в ней будет первый фрейм menu.html
), вторая область займет 75% от ширины всего экрана (в ней будет второй фрейм content.html
).
Последний совсем необязательный тег это
. Он нужен для браузеров, которые не поддерживают фреймы. Если браузер не поддерживает фреймы, то рекомендуется вежливо сообщить об этом пользователю через этот тег.
Кстати, обратите внимание, что для тега
не нужен закрывающий тег.
Надеюсь, что теперь у Вас есть представления о фреймах. Чтобы понять более трудные примеры, давайте попробуем создать простую html-страницу состоящую из 4 фреймов. Это будет пример №2.
Пример с 4 фреймами №2
Каркас для примера 2:
Рис 3. Каркас использования фреймов для примера №2
Код исходной html-страницы с фреймом будет следующий:
Пример №2 html-страницы с фреймами
Ваш браузер не поддерживает отображение фреймов
Код файла top.html
Файл top.html - шапка сайта
Пример №2
А здесь могло быть лого и не только:)
Код файла menu.html
Файл menu.html - меню сайта
Код файла content.html
Файл content.html - контент сайта
Главная страница
Содержимое сайта. Сейчас открыт файл content.html
Это исходное состояние нашего фрейма. Назовем этот файл "Главной страницей"
Код файла about-site.html
Файл about-site.html - Страница о сайте
О сайте
Страница о сайте. Сейчас открыт файл about-site.html
Код файла about-autor.html
Файл about-autor.html - об авторе
Об авторе
Страница об авторе. Сейчас открыт файл about-autor.html
Код файла footer.html
Файл footer.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="адрес фрейма"
.
Атрибуты и свойства тега
1. Атрибут COLS="Параметры"
Задает количество разбиений страницы по вертикали.
2. Атрибут ROWS="Параметры"
Задает количество разбиений страницы по горизонтали.
Теперь рассмотрим каким образом можно задать параметры разбиение.
а) С помощью числа
, которому будет соответствовать количество пикселей. Например, cols = "100,100,300"
задает разбиение страницы на три области, каждая из которых будет по ширине: 100 пикселей, 100 пикселей и 300 пикселей соответственно.
б) С помощью процентов
от общей ширины/высоты. В рассмотренных выше примерах мы использовали именно процентное разбиение, поэтому приводить пример мне кажется бессмысленно.
в) С помощью *
(звездочки). Например, cols = "2*,3*,100"
задает первые две области в соотношение 2:3, а третья область будет шириной в 100 пикселей.
Все три способа можно совмещать. Например, cols="2*,100,15%,4*"
.
3. Атрибут frameborder="{yes|no}"
Определяет наличие рамки у фрейма. Если ответ yes, то следующий четвертый атрибут border имеет силу.
4. Атрибут border="параметр"
В пикселях border задает толщину обводки области фрейма. Например, frameborder = "2"
задает область с выделенным контуром в 2 пикселя.
5. Атрибут bordercolor="цвет"
Определяет цвет рамки, если она есть. Цвет можно задать как словами, так и кодом (см. цветовая палитра html).
Примечание: обратите внимание, что тегу
нужен закрывающий тег
.
Атрибуты и свойства тега
1. Атрибут src="адрес элемента"
В качестве параметра здесь должен указываться полный URL к адресу элемента. Этот атрибут обязателен. Он уже знаком Вам, т.к. он присутствовал в примерах 1 и 2.
2. Атрибут marginwidth="число"
Задает отступ внутри фрейма от границ в пикселях по ширине. Например, marginwidth="10"
задаст отступ содержимого слева и справа от границы фрейма.
3. Атрибут marginhight="число"
Аналогичен второму с той лишь разницей, что задает отступ по высоте.
4. Атрибут scrolling="{yes|no|auto}"
Задает возможность прокрутки фрейма, в случае если он не смог уместиться в рамки отведенной ему области. По умолчанию стоит значение auto (означает, что при необходимости создавать скролл).
5. Атрибут noresize
Если установлен этот атрибут, то пользователю запрещается самостоятельно менять границы фрейма. По умолчанию этот атрибут не стоит и пользователь может менять границы как хочет.
5. Атрибут name="название"
С помощью этого атрибута можно давать фрейму имя. Это нужно для того, чтобы к этому фрейму могли обращаться другие фреймы. В примере №2 как раз рассматривается такой случай.
Примечание:
Имя не должно начинаться с нижнего подчеркивания "_".
6. Атрибуты frameborder, border и bordercolor
Эти три атрибута такие же как и у frameset (см. атрибуты frameset выше).
Преимущества и недостатки фреймов
Плюсы фреймов
Возможность отображения в одном окне независимо несколько страниц (пример 1 и 2 выше);
Возможность переключать содержимое страницы не перезагружая страницу (меняется только одна область экрана);
Возможность построить гибко структуру сайта (шапка, меню, футер и т.д. - вся статическая информация хранится отдельно в файлах, а это позволяет быстро отредактировать часть сайта);
Пользователь может сам изменять размер области просмотра, в случае если не установлена опция noresize;
Минусы фреймов
Поисковые системы плохо индексируют сайты на фреймах, поскольку не в состоянии интерпретировать подгружаемые файлы во фреймах. Поисковая машина различает страницы по их адресу (URL), а у фреймов несмотря на разные состояния, адрес страницы не изменяется. Это противоречит правилам поисковой машины, а значит не факт, что поисковик сможет проиндексировать сайт.
Невозможно сохранить в закладки сайт на фреймах, т.к. URL страницы будет одинаковый. Таким образом, можно лишь сохранить исходное состояние фрейма.
Не все браузеры поддерживают фреймы.
Будущее фреймов:
От фреймов уже давно стали отказываться многие вебмастеры. Это связано с трудностями продвижения в поисковиках. Сейчас все переходят на Ajax, как более динамичный и современный способ отображения информации на одной странице сайта.
Уважаемый читатель, мы рассмотрели теги html документа касающиеся фреймов. Несмотря на сомнительное будущее этого направления, знать про фреймы должен каждый вебмастер.