Как создать страницу с фреймами

Напомним, что страничка с фреймами - это HTML страничка особенного вида, которая разделяет окно браузера на несколько прямоугольных областей, именуемых фреймами (frame). Каждый фрейм при всем этом может показывать отдельную страничку. Страничка с фреймами не имеет собственного содержимого, а является только контейнером и определяет, какие странички будут отображаться во фреймах. Обычно странички во фреймах логически связаны. Это означает, что, к примеру, один фрейм содержит перечень, каталог либо навигационное меню в виде ссылок. А выбор одной из ссылок приводит к загрузке в другой фрейм соответственной странички.

Фреймы (frame)

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

Более подробно о том, как создавать сайты без фреймов читайте далее.

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

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

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

Для описания фреймов употребляется особый HTML файл.

Создание фреймов (frame) в редакторе текста

В любом редакторе текста сделайте новый текстовой файл.

Введите главные теги, не считая тегов <body></body>, которые в файле, описывающем фреймы, не употребляются. В тегах <title></title> заголовка укажите - Компания SD:

Заместо тегов <body></body> в файле, описывающем фреймы, употребляется пара тегов <frameset></frameset> с атрибутами rows либо cols, определяющими, как делится экран - по горизонтали либо по вертикали. В качестве значений этих атрибутов можно использовать числовое значение высоты либо ширины фрейма в пикселах либо в процентах от 1% до 100%. К примеру, если вы желаете поделить окно браузера по горизонтали на два равных по размеру фрейма, то код HTML должен быть таким:

Направьте внимание: значения атрибутов отделяются один от другого запятой.

Вертикальное разделение фреймов (frame)

Чтоб поделить окно браузера по вертикали на два фрейма шириной 200 и 600 пикселов, следует написать:

Но фактическая ширина и высота окна фрейма находится в зависимости от текущего разрешения монитора. Потому, если у пользователя установлено разрешение, к примеру, 1024 x 768 пикселов, другими словами ширина экрана - 1024 пиксела, то часть экрана может остаться незаполненной. Потому рекомендуется задавать размеры фреймов в процентах так, чтоб их сумма была равна 100%. Если все таки нужно для 1-го из окон указать фиксированный размер в пикселах, то размер другого окна можно не указывать, заменив его значение эмблемой *. В данном случае браузер сам подберет подходящий размер для второго окна.

Сделаем для отображения нашего WEB сайта два вертикальных фрейма. Для первого фрейма, в каком будет выводиться меню, установим фиксированную ширину - 160 пикселов, а размер второго предоставим найти браузеру, заменив его звездочкой *.

В редакторе текста, воткните пустую строчку после закрывающего тега </head> и введите последующий код:

Таким способом, мы указали, что окно браузера должно быть разбито по вертикали на два фрейма. Для описания каждого фрейма в отдельности употребляются одиночные теги <frame>, которые обязаны находиться внутри элемента <frameset>…</frameset>. Неотклонимым атрибутом тега <frame> является src, значение его - адресок документа, который должен находиться в данном фрейме. Потому что в первом фрейме будет находиться файл menu.html, то данный тег следует записать так:

Воткните пустую строчку после открывающего тега <frameset> и введите обозначенный тег.

Во второй фрейм должен загружаться файл other.html, потому второй тег <frame> будет таким:

Как сделать меню с помощью фреймов (frame)

Чтоб во второй фрейм могли загружаться также и все другие странички WEB сайта - list.html и другие, которые, может быть, будут сделаны, - нужно при помощи атрибута name присвоить данному фрейму имя, которое, будучи обозначено в ссылках хоть какого документа в качестве значения атрибута target, обусловит, в какой конкретно фрейм следует загрузить документ. Напомним, что в общем случае, при переходе по ссылке новый документ раскрывается в том же окне. Конкретно для того, чтоб при переходе по ссылкам нашего меню странички раскрывались не в первом фрейме, в каком размещено меню, а во втором, мы использовали в прошлом опыте в ссылках меню атрибут target со значением "frame": target="frame", где "frame" - это имя второго фрейма. И сейчас имя "frame" следует присвоить второму фрейму, в каком должен раскрываться файл other.html. Потому второй тег <frame> в окончательном виде должен быть записан так:

Введите этот код, вставив пустую строчку перед закрывающим тегом </frameset>.

Собираем основной фрейм (frame)

Сохраните файл в папке WEB под именованием index.html.

Имя index.html должно непременно присваиваться файлу с главной страничкой каждого WEB сайта. Конкретно этот файл раскрывается по умолчанию при воззвании к WEB узлу, если не обозначено другое название файла. На неких WEB сайтах имя главной странички может быть index.htm, a index.html отображается не как страничка, как папка с названиями файлов. Это нужно уточнять у админа узла.

Сейчас можно просмотреть, как смотрятся сделанные фреймы.

Откройте в браузере файл index.html из папки WEB. Вы увидите, что окно программки просмотра разбито по вертикали на два фрейма. В левом фрейме отображается меню, а в правом - файл other.html.

Проверим, как работают ссылки меню.

Щелкните мышью на ссылке меню Чем мы увлечены? В правом фрейме будет открыт файл list.html.

Щелкните мышью на ссылке меню Основная страничка. В правом фрейме опять появится файл other.html.

Направьте внимание, что каждый фрейм имеет свои полосы прокрутки. По мере надобности их отображение можно отменить. Для этого довольно в теге <frame> указать атрибут scrolling=no.

Добавьте в тег, описывающий первый фрейм, атрибут scrolling=no:

Видите ли, фреймы - комфортное средство для размещения инфы на WEB страничках. Но, используя его, не следует терять чувства меры. Очень огромное количество окон на дисплее не улучшает восприятие информации. Не располагайте на дисплее более трех фреймов и пытайтесь не использовать их без необходимости.

Главные минусы фреймов (frame)

Основной минус использования фреймов состоит в том, что такая страничка фактически никак не могут быть найдена поисковыми машинами и как следует вы не получите на такую страничку гостей. В этом и заключается основной минус. Также фреймы вызывают нагрузку на вычислительные мощности компьютера. Естественно, это в наше время не очень актуально, но актуально для мобильных устройств, где скорость прорисовки WEB страничек еще мучается. Напомню, что на конец 2010 года, WEB пользуются через мобильные устройства около 10% и эта цифра с каждым годом вырастает.

Результат

Итак, первый шаг нашей работы закончен - мы сделали WEB сайт из двух WEB страничек. Сейчас, чтоб он стал доступен всем, его нужно поместить в Интернет на один из серверов World Wide WEB.

Как сделать страничку с фреймами

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

Изберите команду меню Файл - Сделать (File - New). В правой части рабочего окна программки появится Область задач (Task Pane) с активной задачей Создание (New).

В разделе Сделать страничку (New page) Области задач (Task Pane) щелкните мышью на ссылке Другие шаблоны страничек (More page templates). На дисплее появится диалог Шаблоны страничек (Page Templates).

Изберите вкладку Страничка рамок (Frames Pages).

На этой вкладке имеется набор шаблонов для сотворения страничек с фреймами. При выборе шаблона, начальный вид странички отображается справа в поле Эталон (Preview), а в поле Описание (Description) выводится описание шаблона.

Изберите один из шаблонов, к примеру Оглавление (Contents), и нажмите кнопку ОК. Будет сотворена новенькая страничка с фреймами по избранному шаблону.

В нижней части вновь сделанной вкладки нов_стр_1.htm (new_page_1.htm) появится дополнительная кнопка Без рамок (No Frame), нажав на которую, мы увидим, как будет смотреться страничка в браузере, не поддерживающем работу с фреймами. По умолчанию туда помещается текст сообщения о невозможности отображения фреймов.

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

В режиме редактирования Конструктор (Design) представления Страничка (Page) в пустых фреймах показываются кнопки.

Нажмите кнопку Сделать страничку (New Page) в каждом фрейме. Внутри фреймов будут сделаны новые странички.

При помощи другой кнопки Задать исходную страничку (Set Initial Page) можно избрать для фрейма одну из ранее сделанных страничек в качестве исходной.

Дальше вы сможете работать с каждым фреймом как с отдельной страничкой, помещая на нее нужные элементы. Текущий фрейм выделяется в режиме редактирования темной рамкой.

Изберите в меню команду Файл - Сохранить (File - Save), чтобы сохранить новые странички. На дисплее поочередно появятся обычные диалоги сохранения файлов Сохранить как (Save As) для каждой странички, в каких необходимо указать названия файлов. Укажите, к примеру, для исходной странички левого фрейма имя LeftFrame, для исходной странички правого фрейма - имя RightFrame, а для самой странички с фреймами - имя FrameContainer.

Если вы избрали шаблон Оглавление (Contents) при разработке странички с фреймами, то в нем уже имеется установленная связь между фреймами: активизация ссылки, помещенной в левый фрейм, будет вызывать загрузку страничек, на которую показывает ссылка, в правый фрейм. В данном случае правый фрейм именуется мотивированным фреймом (target frame).

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

Установите текстовый курсор в начало странички в левом фрейме и наберите фразу Ссылка на главную страничку.

Выделите набранную фразу при помощи мыши либо клавиатуры и изберите команду меню Вставка - Ссылка (Insert - Hyperlink). На дисплее появится диалог Добавление гиперссылки (Create Hyperlink).

В перечне файлов WEB сайта изберите файл домашней странички index и нажмите кнопку ОК. Набранная фраза будет преобразована в ссылку.

Отступите пару строк от первой ссылки и введите фразу Ссылка на страничку правого фрейма.

Выделите набранную фразу при помощи мыши либо клавиатуры и щелкните на кнопке добавление гиперссылки на панели инструментов Стандартная (Standard). На дисплее появится диалог Добавление гиперссылки (Create Hyperlink).

В перечне файлов WEB сайта изберите RightFrame и нажмите кнопку ОК. Набранная фраза будет преобразована в ссылку.

Переключитесь в режим подготовительного просмотра, щелкнув на кнопке Просмотр (Preview) в нижней части вкладки FrameContainer.htm.

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

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

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

В режиме редактирования Конструктор (Design) представления Страничка (Page) щелкните правой кнопкой мыши на одной из ссылок в левом фрейме и в показавшемся контекстном меню изберите команду Характеристики гиперссылки (Hyperlink Properties). На дисплее появится диалог Изменение гиперссылки (Edit Hyperlink).

В диалоге Изменение гиперссылки (Edit Hyperlink) нажмите кнопку Выбор рамки

(Target Frame). На дисплее появится диалог Конечная рамка (Target Frame).

В поле Настройка объекта (Target setting) можно указать мотивированной фрейм либо избрать один из вариантов в перечне Общие объекты (Common targets). Флаг Установить для странички по умолчанию (Set as page default) позволяет использовать избранный мотивированной фрейм для всех ссылок странички, где очевидно не указан какой-нибудь другой.

Нажмите кнопку ОК, чтобы закрыть диалог Конечная рамка (Target Frame), и потом кнопку ОК в диалоге Изменение гиперссылки (Edit Hyperlink).

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

Щелкните правой кнопкой мыши в любом месте на одном из фреймов и в показавшемся контекстном меню изберите команду Характеристики рамки (Frame Properties). На дисплее появится диалог Характеристики рамки (Frame Properties).

В поле Имя (Name) обозначено внутреннее имя фрейма, оно употребляется также при выборе мотивированного фрейма для ссылки. В поле Исходная страничка (Initial page) указана страничка, отображаемая во фрейме при его загрузке. В группе частей управления Размер рамки (Frame size) можно указать ширину (Width) и высоту (Height) фрейма относительно примыкающих фреймов (Relative), относительно размеров окна браузера в процентах (Percent) либо фиксированный размер в пикселах (Pixels). В группе частей управления Поля (Margins) определяются значения отступа от вертикальных (Width) и горизонтальных (Height) границ фрейма до содержимого внутри фрейма. Если установлен флаг Изменять размер в обозревателе (Resizable in browser), то гость WEB сайта может поменять размер фрейма, передвигая мышью разделитель между примыкающими фреймами. В открывающемся перечне Полосы прокрутки (Show scrollbars) задается режим отображения полос прокрутки: по мере надобности (If needed), другими словами когда страничка полностью не помещается во фрейме, никогда (Never) либо всегда (Always).

Нажмите кнопку Страничка рамок (Frames Page). На дисплее появится диалог Характеристики странички (Page Properties) с открытой вкладкой Рамки (Frames).

Флаг Показать границы (Show borders) определяет, будут ли отображаться границы фрейма. Если флаг сброшен, то в браузере не будут видны разделительные полосы между фреймами. В поле Интервал между рамками (Frame Spacing) задается ширина границ, разделяющих примыкающие фреймы.

Нажмите кнопку ОК, чтобы закрыть диалог Характеристики странички (Page Properties) и потом кнопку ОК в диалоге Характеристики рамки (Frame Properties).

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

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

Изберите команду меню Рамки - Поделить рамку

(Frames - Split Frame). На дисплее появится диалог Поделить рамку (Split Frame).

При помощи одного из переключателей изберите вариант разделения: на столбцы (Split into columns) либо на строчки (Split into rows).

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

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

Чтобы удалить фрейм, выделите его, щелкнув на нем мышью, и в меню программки изберите команду Рамки - Удалить рамку (Frames - Delete Frame). Фрейм будет удален.

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

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

Чтобы сохранить свой шаблон странички с фреймами, изберите команду меню Файл - Сохранить как (File - Save As). На дисплее появится стандартный диалог сохранения файлов Сохранить как (Save As).

В открывающемся перечне Тип файла (Save as type) изберите Шаблоны FrontPage (FrontPage Template).

В поле ввода Название файла (File Name) укажите название файла шаблона и нажмите кнопку Сохранить (Save). На дисплее появится диалог Сохранить как шаблон (Save As Template).

В поле ввода Заглавие (Title) укажите заглавие шаблона, которое будет отображаться в перечне шаблонов при разработке новейшей странички. В поле ввода Описание (Description) можно коротко обрисовать предназначение и вид шаблона.

Флаг Сохранить шаблон на текущем WEB узле (Save Template in Current WEB site) определяет, будет ли шаблон доступен в любом WEB сайте либо исключительно в текущем.

Нажмите кнопку ОК. Шаблон будет сохранен.

Сейчас вы сможете использовать свой шаблон при разработке новейшей странички с фреймами, выбирая его в перечне шаблонов диалога Шаблоны страничек (Page Templates). Если при сохранении шаблона были установлены исходные странички во фреймах, то они будут употребляться по умолчанию для всех фреймов, сделанных на базе шаблона.

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

Дополнительная информация по теме

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

Организационный период предшествует собранию и включает в себя его планирование и подготовку

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

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

📎📎📎📎📎📎📎📎📎📎