Использование фреймов при создании Web-страниц
Мощным средством представления информации в Web-узлах являются фреймы, позволяющие разбивать Web-страницы на прямоугольные области, в каждой из которых отображаются отдельные страницы.
Замечание
Иногда фреймы называют рамками. Мы будем придерживаться более распространенного среди пользователей, а соответственно, и более привычного термина фреймы.
Рассмотрим такой пример использования фреймов. Вы создаете фрейм, содержащий две области. В левой области размещаете оглавление со ссылками на страницы вашего Web-узла. В правой области отображаете выбранную по ссылке Web-страницу.
Использование фреймов оправдано в том случае, если вам необходимо, чтобы при изменении части экрана (Web-страницы фрейма), остальная часть экрана оставалась без изменения. Это может быть оглавление Web-узла, встроенный раздел, список рекламируемой продукции и информация о выбранном товаре, повестка дня собрания акционеров, выбирая значения которой, вы просматриваете список докладчиков по тому или иному вопросу и регламент. Все зависит от вашей фантазии.
Фрейм имеет очевидные преимущества. Тем не менее, если в него входит большое количество страниц, загрузка фрейма будет происходить медленно, т. к. для загрузки каждой из страниц, составляющих его, требуется отдельное обращение к серверу. Поэтому при создании фреймов следует проявлять чувство меры и ограничиваться небольшим количеством страниц. Информация о страницах, входящих в состав фрейма, хранится на отдельной странице, называемой фреймсетом. Поэтому, если вы создаете двухстраничный фрейм, то при подсчете обращений к серверу необходимо учитывать и фреймсет.
Шаблоны фреймов
Использование шаблонов фреймов значительно облегчает их создание, особенно, если вы только начинаете знакомиться с фреймами. Для просмотра списка шаблонов фреймов выполните следующие действия:
1. В меню Файл (File) выберите команду Создать (New), а затем в появившемся подменю — опцию Страница или веб-узел (Page or Web).
2. На появившейся панели Создание веб-страницы или узла (New Page or Web) выберите команду Шаблоны страниц (Page Templates).
3. В открывшемся диалоговом окне Шаблоны страниц (рис. 20.21) перейдите на вкладку Страница рамок (Frames Pages).
Рис. 20.21. Диалоговое окно Шаблоны страниц, содержащее шаблоны фреймов
4. В окне вкладки находятся 10 значков шаблонов. Назначение шаблонов фреймов описано в табл. 20.4. Таблица 20.4. Шаблоны фреймов Просмотреть вид выбранного шаблона вы можете в области Образец (Preview). Подобрав устраивающий вас шаблон, дважды щелкните на нем или нажмите кнопку ОК. 5. Открывается страница, имеющая вид, аналогичный представленному на рис. 20.22. В соответствии с типом выбранного шаблона, страница разбита на облас-• ти, каждая из которых содержит по две кнопки: Рис. 20.22. Шаблон фрейма Оглавление Используя эти кнопки, вам необходимо указать страницы, которые будут загружаться по умолчанию в области фрейма при его открытии, а также создать ссылки с указанием того, в какую область фрейма эти страницы должны загружаться. Создание фрейма Рассмотрим пример создания Web-узла, в состав которого входит фрейм, представленный на рис. 20.23, и Web-страницы, просматриваемые с его помощью. Фрейм состоит из трех областей: заголовок, оглавление и основная область, в которой будет размещаться информация из Web-страниц, выбираемых с помощью оглавления. Процесс создания Web-узла будет состоять из следующих этапов: 1. Создание пустого Web-узла. Имя шаблона Содержание фрейма Объявление и оглавление
(Banner and Contents) Область заголовка, оглавление и область отображения основной информации Оглавление (Contents) Область оглавления и область отображения основной информации Нижний колонтитул (Footer) Область отображения основной информации и нижний колонтитул Сноски (Footnotes) Область отображения основной информации и нижняя область с примечаниями Верхний колонтитул (Header) Область отображения основной информации и верхний колонтитул Колонтитулы и оглавление
(Header, Footer and Contents) Область оглавления, область отображения основной информации, верхний и нижний колонтитулы Горизонтальная граница
(Horizontal Split) Две области, разделенные горизонтальной линией Вложенная иерархия
(Nested Hierarchy) Область оглавления, область отображения основной информации и верхний колонтитул Нисходящая иерархия
(Top-Down Hierarchy) Три области, разделенные горизонтальными линиями Вертикальная граница
(Vertical Split) Две области, разделенные вертикальной линией
2. Создание трех страниц (по числу областей фрейма), отображаемых по умолчанию во фрейме при его загрузке.
3. Создание страниц, которые будут размещаться в основной области фрейма при выборе значений списка, размещенного в области оглавления. Их количество определяется оглавлением.
4. Размещение в Web-узле фрейма.
Рис. 20.23. Фрейм в режиме просмотра 5. Связывание областей фрейма с загружаемыми в них по умолчанию страницами. Мы рассмотрели основные этапы работы, которую нам предстоит выполнить. Приступим к созданию Web-узла: 1. Создайте пустой Web-узел. Для этого на панели Создание веб-страницы или узла (New Page or Web) выберите команду Шаблоны веб-узлов (Web Sites Templates). Замечание Чтобы не запутаться в названиях страниц при создании ссылок, им лучше давать имена, которые будут ассоциироваться с областью фрейма, в которой эта страница будет отображаться. Присвоим созданной странице наименование banner_f.htm, т. к. она по умолчанию будет размещаться в области заголовка. 6. Добавьте в Web-узел новую страницу и разместите на ней текст оглавления. Оформите его в виде списка и сохраните на диске в файле content_f.htm.
6. Связывание элементов списка, размещенных в оглавлении, со страницами, загружаемыми для просмотра в основную область фрейма.
2. В поле Укажите расположение нового веб-узла (Specify the location of the new web) открывшегося диалогового окна Шаблоны веб-узлов (Web Sites Templates) введите наименование и расположение создаваемого узла, а затем дважды щелкните мышью на шаблоне Пустой веб-узел (Empty Web). Откроется пустой Web-узел.
3. Для создания страницы, размещаемой в заголовке фрейма, добавьте в Web-узел новую страницу шаблона Обычная страница (Normal Page).
4. В режиме редактирования введите в верхней строке страницы заголовок Книжный мир. Расположите его в центре строки. Для этого установите курсор в заголовок и нажмите кнопку По центру (Center) на панели форматирования.
5. Для сохранения страницы нажмите кнопку Сохранить (Save) на стандартной панели инструментов. В открывшемся диалоговом окне Сохранить как (Save As) задайте наименование файла и нажмите кнопку Сохранить.
7. На третью новую страницу поместите текст, который по умолчанию будет загружаться в основную область фрейма, и сохраните ее в файле main_f.htm.
8. На этом формирование страниц, отображаемых во фрейме при его загрузке, завершено. Теперь необходимо подготовить страницы, которые будут появляться в правой области фрейма при выборе пунктов оглавления. Создайте необходимые страницы. Их число должно быть равно количеству пунктов в области оглавления. Первой строкой нашего оглавления является Готовятся к печати. Web-страница, появляющаяся при выборе этого пункта, должна содержать книги, которые готовятся к печати и в ближайшее время должны появиться на книжном рынке. Подготовим эту страницу и сохраним ее в файле new_books.htm.
9. Создайте и сохраните остальные Web-страницы, необходимые для просмотра информации, представленной в оглавлении.
10. Все страницы подготовлены. Теперь их необходимо разместить во фрейме. Добавим в Web-узел новый фрейм. Для этого на панели Создание веб-страницы или узла (New Page or Web) выберите команду Шаблоны страниц (Page Templates).
11. В открывшемся диалоговом окне Шаблоны страниц перейдите на вкладку Страницы рамок (Frames Pages) (см. рис. 20.21) и дважды щелкните на значке шаблона Объявление и оглавление (Banner and Contents). Фрейм, созданный с использованием этого шаблона, содержит область заголовка, оглавление и область отображения основной информации (рис. 20.24).
12. Для указания страницы, которая должна размешаться в верхней области фрейма при его загрузке, нажмите кнопку Задать начальную страницу (Set Initial Page), расположенную в этой области.
13. В поле Адрес (Address) открывшегося диалогового окна Добавление гиперссылки (Insert Hyperlink) (рис. 20.25) укажите название страницы, содержащей заголовок, щелкнув на файле banner_f.htm. Затем нажмите кнопку ОК для закрытия окна. Указанная нами в гиперссылке страница разместилась в верхней области фрейма.
Рис. 20.24. Выбранный шаблон фрейма Объявление и оглавление Рис. 20.25. Диалоговое окно Добавление гиперссылки позволяет указать страницу, которая будет размещаться во фрейме при его загрузке 14. Используя кнопки Задать начальную страницу (Set Initial Page) остальных областей фрейма, поместите в них созданные страницы content_f.htm и main_f.htm. На этом размещение во фрейме страниц, зафужаемых в него по умолчанию, завершено. Теперь необходимо в области оглавления создать ссылки на страницы, которые с его помощью будут просматриваться, и указать, в какой области фрейма они будут отображаться.
15. В области оглавления выделите первый элемент списка и выберите в его контекстном меню команду Гиперссылка (Hyperlink).
16. В поле Адрес (Address) открывшегося диалогового окна Добавление гиперссылки (Insert Hyperlink) укажите название страницы, содержащей информацию по данному вопросу, щелкнув на файле new_books.htm.
17. Для указания области фрейма, в которую указанная страница должна загружаться, нажмите в окне Добавление гиперссылки кнопку Выбор рамки (Target Frame).
18. Открывается диалоговое окно Конечная рамка (Target Frame), в области Текущая страница рамок (Current frames page) которого отображается структура фрейма (рис. 20.26). Для указания места загрузки страницы можно использовать данную структуру или значения списка Общие объекты (Common targets). Щелкните мышью в требуемой области структуры. Она окрашивается в синий цвет (рис. 20.27).
Рис. 20.26. Диалоговое окно Конечная рамка Рис. 19. Нажмите кнопку ОК для закрытия диалогового окна Конечная рамка (Target Frame). Проверьте действие ссылок, расположенных в области оглавления. При щелчке на любом из разделов оглавления в правой области фрейма отображается страница соответствующего раздела (рис. 20.28). Рис. 20.28. Отображение страницы раздела в правой области фрейма при его выборе из оглавления В рассмотренном примере мы устанавливали в диалоговом окне Конечная рамка (Target Frame) один и тот же конечный фрейм для всех ссылок оглавления. Можно было ускорить процедуру назначения, установив конечный фрейм по умолчанию для всех ссылок страницы. Для этого необходимо было выполнить следующие действия: 1. Открыть диалоговое окно Свойства страницы (Page Properties), щелкнув правой кнопкой мыши в любом месте страницы и выбрав в контекстном меню команду Свойства страницы (Page Properties). Режимы просмотра фрейма В нижней части рабочей области программы FrontPage при размещении в ней фрейма (см. рис. 20.28) вместо трех вкладок, соответствующих режимам просмотра обычных Web-страниц, появляется пять. Их назначение описано в табл. 20.5. Таблица 20.5. Режимы просмотра фрейма Свойства фреймов Для настройки свойств фрейма используется дишюговое окно Свойства рамки (рис. 20.29). Чтобы его открыть, выделите фрейм и выполните одно из следующих действий: Рис. 20.29. Диалоговое окно Свойства рамки В верхней части диалогового окна расположены два поля. Поле Имя (Name) содержит название редактируемого фрейма, а поле Начальная страница (Initial page) — название страницы, отображаемой в данном фрейме при его начальной загрузке. Для изменения начальной страницы необходимо нажать кнопку Обзор (Browse), расположенную справа от поля. При этом открывается диалоговое окно Изменение гиперссылки (Edit Hyperlink), позволяющее указать для загрузки другую страницу. Область Размер рамки (Frame size) содержит поля Ширина столбца (Column Width) и Высота (Height), указывающие размеры фрейма. Обратите внимание, что поле, задающее ширину фрейма, для которого открыто окно свойств, не доступно для модификации. Это связано с тем, что рассматриваемый нами фрейм занимает всю ширину фреймсета, которая и определяет его размер. При изменении размера фрейма изменяются также размеры всех граничащих с ним фреймов. Для указания единиц, в которых задаются размеры, используются расположенные справа от полей раскрывающиеся списки, содержащие следующие значения: При выборе из списка значения точки размер фрейма задается в пикселах. Значение относительная указывает, что размер фрейма задается с учетом размеров фреймов, расположенных рядом с ним по горизонтали. В том случае, если необходимо указать размер фрейма в процентах от размера окна обозревателя, используется значение проценты. С помощью полей Ширина (Width) и Высота (Height) области Поля (Margins) можно задать размеры полей страницы, т. е. интервалы между содержимым страницы и границами фрейма. Для фрейма, содержащего заголовок, конечно, нет смысла использовать значения при необходимости (If Needed) или всегда (Always) — подойдет значение никогда (Never). В том случае, если содержимое фрейма меняется в зависимости от загруженной в него страницы, разумно использовать значение при необходимости (If Needed), т. к. если вся информация в нем помещается, то полоса прокрутки будет отсутствовать. Если информации будет много, полоса прокрутки появится. Кнопка Стиль (Style), расположенная в нижнем левом углу диалогового окна Свойства рамки, позволяет изменить связанную с фреймом таблицу стилей. При нажатии кнопки Страница рамок (Frame Page) области Параметры открывается диалоговое окно Свойства страницы (Page Properties) (рис. 20.30), в котором по умолчанию выбрана вкладка Рамки (Frames). Она содержит параметры, относящиеся к фреймсету. Рис. 20.30. Вкладка Рамки диалогового окна Свойства страницы
20. Вы возвращаетесь в диалоговое окно Добавление гиперссылки (Insert Hyperlink), в котором также нажмите кнопку ОК.
21. Аналогичным образом для всех элементов списка оглавления укажите наименования загружаемых страниц и область фрейма, в которой эти страницы будут отображаться.
22. Для сохранения фрейма нажмите кнопку Сохранить (Save) на стандартной панели инструментов. В открывшемся диалоговом окне Сохранить как (Save As) задайте наименование файла index.htm и нажмите кнопку Сохранить.
23. Просмотрите, как будет выглядеть созданный фрейм в обозревателе. Для этого выберите вкладку Просмотр (Preview) в нижней части рабочей области.
2. На вкладке Общие (General) нажать кнопку Изменить конечную рамку (Change target frame) , расположенную справа от поля Конечная рамка по умолчанию (Default target frame).
3. В области Текущая страница рамок (Current frames page) открывшегося диалогового окна Конечная рамка (Target Frame), отображающего структуру фрейма, выбрать с помощью мыши требуемую область.
4. Нажать кнопку ОК для закрытия диалогового окна Конечная рамка.
5. Закрыть диалоговое окно Свойства страницы, нажав кнопку ОК. Наименование вкладки Описание Обычный (Normal) Обычный режим работы, при котором осуществляется создание фрейма с помощью визуальных средств Без рамок (No Frames) Предварительный просмотр фрейма в виде, в котором он будет представлен на сервере Интернета при просмотре его в обозревателе, не поддерживающем фреймы HTML-код (HTML) Режим просмотра и создания всех фреймов текущего фреймсета в HTML-кодах HTML-код страницы рамок (Frames Page HTML) Режим просмотра и создания страницы фреймов в HTML-кодах Просмотр (Preview) Предварительный просмотр страницы в виде, в котором она будет представлена на сервере Интернета в обозревателе, поддерживающем фреймы
(Pixels)
(If Needed)
Поле Интервал между рамками (Frame Spacing) позволяет указать толщину разделительных линий между фреймами на странице. Флажок Показать границы (Show Borders) определяет, показывать ли разделительные линии между фреймами. Управление фреймами Для изменения размеров фрейма, размещенного на странице, можно использовать не только диалоговое окно Свойства рамки (Frame Properties), но и мышь. Достаточно установить курсор на границу двух фреймов и, когда курсор примет вид двунаправленной стрелки, перемещать в ту или другую сторону. Во фреймсет можно добавлять новые фреймы или удалить фреймы, которые больше не нужны. Для добавления нового фрейма выполните следующие действия: 1. Нажмите и удерживайте клавишу<Ctrl>. Рис. 20.31. Добавление во фреймсет нового фрейма
2. Установите курсор на рамку, перед или выше которой хотите добавить новый фрейм. Под курсором появляется подсказка Для разделения рамки перетаскивайте ее при нажатой клавише Ctrl (Ctrl+Drag to split frame).
3. Нажмите кнопку мыши и, удерживая, перемещайте курсор в нужную сторону до образования области требуемого размера.
4. Отпустите клавишу<Ctrl> и кнопку мыши.
Образовавшийся новый фрейм (рис. 20.31) содержит кнопки Задать начальную страницу (Set Initial Page) и Создать страницу (New Page), позволяющие определить загружаемые в него страницы. Для добавления во фреймсет нового фрейма можно также использовать команду меню: 1. Выделите фрейм, область которого хотите разбить на две части, шелкнув на нем мышью.
2. В меню Рамки (Frame) выберите команду Разделить рамку (Split Frame).
3. В открывшемся диалоговом окне Разделить рамку (Split Frame) (рис. 20.32), содержащем опции Разбить на столбцы (Split into columns) n Разбить на строки (Split into rows), установите требуемую опцию.
4. Нажмите кнопку
Рис. 20.32. Чтобы удалить фрейм из фреймсета, установите на него курсор и в меню Рамки (Frame) выберите команду Удалить рамку (Delete Frame). Освободившееся после удаления фрейма место будет занято оставшимися фреймами.