который предназначен для организации ссылок на документы содержания. Тег <Frame> имеет собственные атрибуты:
src = "имя файла.htm" − для вызова документа содержания; scrolling ="yes" − обеспечивает прокрутку внутри области; scrolling = "по" − запрещает прокрутку внутри области; scrolling = "Auto" − разрешает построение полос прокрутки при
необходимости.
Тег < Noframes > < /noframes > применяется для предусмотрения ситуации, когда браузер не поддерживает фреймы.
13.1 Типовое задание
Пример 1. Разместите на Web-странице пять областей (фреймов), сопроводив центральный фрейм горизонтальной и вертикальной полосами прокрутки, как показано на рис. 13.1.
Рис. 13.1. Области (фреймы), размещенные наWeb-странице
Для выполнения данного задания сначала необходимо описать пять отдельных документов содержания для каждой из областей (фреймов).
Документ содержания верхнего фрейма:
<Html>
<Head>
< Title >Верхний фрейм </ Title >
146
<Meta http-equiv="Content-Type" content-"text/html; charset—windows- 1251">
</head>
<Body bgcolor="pink">
<Center><Font size=5 color="blue">Верхняя часть страницы</font> </center>
</body>
</html>
Документ содержания нижнего фрейма (bottomfr.htm):
<Html>
<Head>
< Title >Нижний фрейм </ Title >
<Meta http-equiv="Content-Type" content-"text/html; charset—windows- 1251">
</head>
<Body bgcolor=" yellow ">
<Center><Font size=5 color=" indigo">Верхняя часть страницы</font> </center>
</body>
</html>
Документ содержания левого фрейма (left.htm):
<Html>
<Head>
< Title >Левый фрейм </ Title >
<Meta http-equiv="Content-Type" content-"text/html; charset—windows- 1251">
</head>
<Body bgcolor=" white ">
<Center><Font size=5 color=" blue ">Верхняя часть страницы</font> </center>
</body>
</html>
Документ содержания центрального фрейма (centerfr.htm):
<Html>
<Head>
< Title > Фрейм </ Title >
<Meta http-equiv="Content-Type" content-"text/html; charset—windows- 1251">
</head>
<Body bgcolor=" lime ">
<Center><Font size=4 color=" blue ">Центральный фрейм </font>
147
</center>
</body>
</html>
Документ содержания правого фрейма (rightfr.htm):
<Html>
<Head>
< Title > Правый фрейм </ Title >
<Meta http-equiv="Content-Type" content-"text/html; charset—windows- 1251">
</head>
<Body bgcolor=" white ">
<Center><Font size=4 color=" blue ">Правый фрейм </font> </center>
</body>
</html>
После построения документов содержания строится документ – раскладка:
<Html>
<Head>
< Title > Организация фреймов </ Title >
<Meta http-equiv="Content-Type" content-"text/html; charset—windows- 1251">
</head>
<! горизонтальное деление экрана> <Frameset rows= "40%,20%, *">
<! вставка документа "topfr.htm"в верхний фрейм> <Frame src="toptfr. htm "noresize scrolling= "no ">
<! вертикальное деление центральной области экрана> <Frameset cols = "40%, 20%, 40% ">
<! вставка документа "leftfr.htm" в левый фрейм> <Frame src="leftfr. htm " scrolling= "no ">
<! вставка документа "centerfr.htm" в центральный фрейм> <Frame src= "centerfr.htm" scrolling="yes" marginwidth="50" margin-
height="15">
<! вставка документа "rightfr.htm" в правый фрейм> < Frame src="rightfr. htm " scrolling="no " > </frameset>
<!вставка документа "bottomfr.hlm" в нижний фрейм> <Frame src= "bottomfr. htm ">
</frameset>
<Noframes>
<Center<Hr color="blue">r><Font size=6">Фреймы </font></center>
148
<Hr color="blue">
Этот браузер не может воспроизводить фреймы
</noframes>
</frameset>
</html>
13.2.Контрольные вопросы
1.Охарактеризуйте технологию создания фреймов.
2.С помощью каких тегов осуществляется разделение Web-страницы на
области.
3.Назначение атрибутов тега Frameset.
4.Как организовать ссылки на документы содержания.
13.3.Контрольные задания
Разместите на Web-странице фреймы следующих видов. |
Вариант 1 |
Вариант 2 |
149
Вариант 3 |
Вариант 4 |
Вариант 5 |
150
Вариант 6 |
151
Лабораторная работа № 1 4
СОЗДАНИЕ МАКЕТА САЙТА С ФРЕЙМОФОЙ СТРУКТУРОЙ В РЕДАКТОРЕ MICROSOFT FRONTPAGE
Цель работы: освоить основные приемы создания и информационного наполнения веб-страницы средствами HTML-редактора, создание макета сайта с фреймовой структурой главной страницы, вставки, настройки динамической кнопки для удобной навигации по сайту, изучить принципы макетирования сайта в среде Microsoft FrontPage.
Методические указания
1. Основные элементы интерфейса FrontPage
Редактор Microsoft FrontPage относится к программным средствам визуального веб-конструирования. При работе с веб-редактором FrontPage можно обойтись без знания языка разметки гипертекстовых документов HTML. Веб-страница просто конструируется на экране и сохраняется в формате .html. Выполняемые при этом действия напоминают работу в текстовом редакторе
Word.
Программа FrontPage включена в комплекс приложений Microsoft Office XP. Запуск редактора FrontPage осуществляется с помощью команды Пуск,
Программы, Microsoft FrontPage.
Интерфейс программы представлен меню, основным окном документа (окно редактора), строкой состояния, основными панелями (Стандартная, Форматирование) и вспомогательными панелями инструментов
(Представления, Создание веб-страницы или узла, Список папок и т. д.).
Панели инструментов настраиваются так же, как и в других программах пакета
MS Office .
После запуска FrontPage открывается окно, основные элементы которого представлены на рис. 14.1.
152
Рис. 14.1. Окно программы FrontPage
Панели Стандартная, Форматирование и Рисование по своим возможностям напоминают аналогичные панели текстового редактора Word.
Вид Рабочей области зависит от выбранного режима работы. В режиме Конструктор веб-страница конструируется из текстовых блоков и графических объектов. При этом автоматически генерируется ее HTML-код, который можно просматривать и редактировать в режиме Код. Режим С разделением является комбинацией этих двух режимов. Режим Просмотр позволяет просматривать созданные страницы.С помощью меню Вид можно выбрать и другие полезные при конструировании сайта режимы.
Режим Страница предназначен для создания и редактирования веб-страниц
(рис. 14.2).
153
Рис. 14.2. Вид окна FrontPage в режиме редактирования страниц сайта
В режиме Папки просматривается структура папок сайта, выполняются файловые операции. Любые изменения файлов и папок сайта необходимо производить из среды разработки, так как это позволяет отследить изменения в структуре взаимосвязанных веб-страниц сайта (рис. 14.3).
Рис. 14.3. Режим просмотра файлов и папок сайта
154
Режим Переходы отображает структуру связей между страницами и позволяет ее изменять (рис. 14.4).
Рис.14.4. Режим отображения навигационной структуры сайта
Режим Гиперссылки наглядно отображает систему ссылок, обеспечивает их проверку и редактирование (рис. 14.5).
Рис. 14.5. Отображение взаимосвязей страниц сайта в режиме Гипперссылки
155
Отчеты — режим просмотра отчетов (рис. 4) с подробной информацией по каждому из них (рис. 14.6).
Рис. 14.6. Режим Отчеты
Задачи — режим отображения задач сайта. Фактически это записная книжка, особенно полезная при коллективной работе над сайтом. В этом режиме можно ввести описание задачи, которую в последующем необходимо
Просмотр — режим предварительного просмотра веб-страницы. Окончательный просмотр веб-страницы следует производить браузером
(рис. 14.7).
156