Создание сайта при помощи Front Page 2000. Урок шестой. Использование фреймов

Анастасия Кулакова, alex_kulakoff@pisem.net

Что такое фреймы

Фреймы позволяют разделять экран пользователя на две или больше частей, каждая из которых будет содержать отдельную, независимо просматриваемую страницу. Front Page позволяет создавать 10 различных конфигураций фреймов, представленных на вкладке Frames Pages (Страницы с фреймами) в диалоговом окне New (Создание страницы).

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

Настоящая цель фреймов - сделать сайт не более сложным по структуре, а напротив -- более простым для просмотра и работы. Неоправданное использование большого числа фреймов (когда этого не требует содержание сайта) может озадачить посетителей. Хороший тон -- использовать ровно столько фреймов, сколько требуется, и не больше. Наиболее популярна следующая раскладка фреймов: содержание - слава и основной фрейм - справа. Эта раскладка использует всего два фрейма. Другая раскладка представляет собой комбинацию из трёх фреймов и отличается от первой тем, что ещё один фрейм (для заголовка) располагается в верхней части экрана. Front Page  позволяет создавать эти и ещё 8 других вариантов раскладок фреймов.

Основные недостатки сайта, построенного с применением фреймов, следующие:

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

В каких случаях уместно применять фреймы?

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

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

Создайте страницу с фреймами

1. Создайте новую пустую страницу. В столбик друг под другом напишите наши основные страницы: Главная,  Экзамены, Курсы, День открытых дверей, Деканат, Творческие успехи, Практика. Сохраните страницу под названием Soderg.htm.

2. В панели режимов просмотра щёлкните на значке Page (Страница). Откроется диалоговое окно New (Создание страницы).

3. Щёлкните на вкладке Frames Pages (Страницы с фреймами), щёлкните на значке Contents (Содержание) и нажмите ОК. Front Page создаст страницу с фреймами.

4. В левом фрейме щёлкните на кнопке Set Initial Page (Задать  начальную страницу). В открывшемся диалоговом окне Create Hyperlink (Создание гиперссылки) найдите файл content.htm, выделите его и нажмите ОК. Front Page поместит страницу с меню во фрейм содержания, расположенный слева. Если граница фрейма заходит на страницу, из-за чего часть кнопок не видна, то нажмите правой кнопкой мыши на странице, выберите пункт меню Frame Properties (Свойства фрейма) и изменяя числовые значения для Frame Size--Width (Ширина фрейма) добейтесь желаемого результата.

5. В правом фрейме щёлкните на кнопке Set Initial Page (Задать  начальную страницу). В открывшемся диалоговом окне Create Hyperlink (Создание гиперссылки) найдите файл-копию для index.htm, выделите его и нажмите ОК. Front Page поместит страницу в основной фрейм, расположенный справа. 

6. В меню File (Файл) выберите пункт Save As (Сохранить как...), в текстовом поле File Name (Имя файла) наберите index1a.htm, а затем нажмите Save (Сохранить). 

При создании страниц с фреймами Вы можете воспользоваться для заполнения фреймов уже существующими страницами, либо создать новые страницы. Чтобы создать новую страницу для фрейма и вставить её в него щёлкните по кнопке New (Создать).

7. Назначьте гиперссылки во фрейме содержания на файлы-копии. 

Создание варианта без фрейма

По сути говоря мы начали наши уроки с создания именно такого варианта. Но скажем чуть по-другому, варианта без видимых границ фрейма, поскольку при использовании навигационной панели мы часто обращались к Shared Borders (Общий фрейм). Теперь предстоит самое трудное. 

1. Вы должны открыть первую (в списке файлов) страницу. Если это файл-копия, то вы входите в контекстное меню страницы, выбираете пункт Shared Borders (Общий фрейм) и в открывшемся диалоговом окне ставите галочку на Current Page (Текущая страница) и снимаете галочку с Left (Левый фрейм). Нажимаете ОК и сохраняете только эту страницу, нажав на иконку на панели инструментов.

2. Если это файл оригинал, то вы входите в контекстное меню страницы, выбираете пункт Shared Borders (Общий фрейм) и в открывшемся диалоговом окне ставите галочку на Current Page (Текущая страница) и ставите галочку с Left (Левый фрейм). Нажимаете ОК и сохраняете только эту страницу, нажав на иконку на панели инструментов.

Не перепутайте, где у вас копии, а где оригиналы. Таким образом у нас получается 2 сайта - с панелью навигации и без.

Размещение страницы содержания на другой странице

Фрейм -- не единственная возможность разместить содержание слева на странице. Страницы ещё можно включать друг в друга. 

1. Создайте ещё одну копию index.htm, щёлкнув на нём в списке файлов Folder List правой кнопкой мыши и из контекстного меню выбрав команду Copy (Копировать), а затем вставьте, нажав Paste. Откройте вновь созданный файл.

2. Установите свойство Shared Borders (Общий фрейм): поставьте галочку на Current Page (Текущая страница) и снимите галочку с Left (Левый фрейм). Сохраните результаты, не переименовывая файл.

3. Спустите основной текст вниз, нажав несколько раз клавишу Enter. Вставьте таблицу на это место из 1 строки и 2 столбцов. Выделите текст и, удерживая на нём указатель и нажатой левую кнопку мышки, перенесите его в правый столбик.

 4. Щёлкните в левом столбце и оставьте курсор мигать. В меню Insert (вставка) щёлкните на пункте Component (Компонент) и выберите компонент Include Page (Включаемая страница). Появится соответствующее диалоговое окно.

5. Щёлкните на кнопке Browse (Просмотр) и из списка файлов выберите файл content.htm.

6. Дважды щёлкните по кнопке ОК. Сбоку, в левой колонке появится наша страница с кнопками.

7. Сохраните результаты.

8. Проверьте работу страницы в браузере. 

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

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

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

1. Создайте копию файлов index.htm и content.htm. Предположим, для удобства объяснения, что это index4.htm, content3.htm.

2. Установите свойство Shared Borders (Общий фрейм): поставьте галочку на Current Page (Текущая страница) и снимите галочку с Left (Левый фрейм), установите галочку на Richt (Правый фрейм). Нажмите ОК.

3. Щёлкните в любом месте правого фрейма. 

4. В меню Insert (вставка) щёлкните на пункте Component (Компонент) и выберите компонент Include Page (Включаемая страница). Появится соответствующее диалоговое окно.

5. Щёлкните на кнопке Browse (Просмотр) и из списка файлов выберите файл content3.htm

6. Дважды щёлкните по кнопке ОК. Сбоку, в левой колонке появится наша страница с кнопками.

7. Сохраните результаты для этой страницы.

8. Создайте копию файла serv01.htm, например: serv0001.htm. 

9. Проделайте шаг 2. Включённая страница появится автоматически, поскольку это свойство общего фрейма.

10. Откройте страницу content3.htm. Выделите всплывающую кнопку Деканат, и установите ссылку на файл serv0001.htm, аналогично установите ссылку на файл index4.htm.

11. Сохраните результаты.

12. Откройте страницу index4.htm в браузере, нажмите на кнопке Деканат. Откроется данная страница с боковым фреймом и содержанием. Нажмите на кнопку  Главная, вы вернётесь на начальную страницу.

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

Хочется также напомнить, что существуют сервера, позволяющие размещать у себя сайты, не поддерживающие фреймовую структуру, поэтому единственным вариантом может служить использование Shared Borders (Общий фрейм) и включение одной страницы в другую. Поэтому обязательно перед опубликованием сайта на сервере, узнайте его возможности. Более подробно поговорим в следующем уроке.

Продолжение следует...

Интернет-проект "От Анастасии", http://nasta.virtualave.net