- •А. П. Багаева разработка web-страниц
- •Университет имени академика м. Ф. Решетнева, 2012 © Багаева а. П., 2012 оглавление
- •5. Форматирование страницы с использованием
- •6. Использование формы для создания интерактивности
- •Предисловие
- •1. Первые шаги по созданию
- •1.1. Структура документа
- •Правила записи тегов
- •Параметры типа метаопределений name
- •Использование цветовых спецификаций при создании web-страницы
- •Способы задания цвета
- •1.2. Форматирование текста
- •Теги логического форматирования
- •Теги физического форматирования
- •1.3. Структурное форматирование
- •Теги структурного форматирования
- •1.4. Списки
- •Практическое задание создание web-страницы
- •2. Настройка страницы.
- •Контрольные вопросы и задания
- •Задания для самостоятельной работы
- •Исходные данные для создания web-страницы
- •2. Делаем web-страницу интереснее
- •2.1. Гиперссылки
- •2.2. Графика и мультимедиа на web-странице
- •2.2.1. Вставка графики в html-документ
- •2.2.2. Встраивание мультимедийных файлов в html-документ
- •Практическое задание графика и гиперссылки на web-странице
- •1. Включение графики.
- •2. Создание гиперссылок.
- •Контрольные вопросы и задания
- •Задания для самостоятельной работы
- •3. Основы построения таблиц
- •3.1. Создание и форматирование простой таблицы
- •3.2. Создание сложных таблиц
- •3.3. Вложенные таблицы
- •3.4. Разметка web-страницы при помощи таблицы
- •Контрольные вопросы и задания
- •Задания для самостоятельной работы
- •4. Оформление страниц с помощью фреймов
- •4.1. Создание простых фреймов
- •4.2. Создание вложенных фреймов
- •4.3. Взаимодействие фреймов
- •4.4. Плавающие фреймы
- •Контрольные вопросы и задания
- •Задания для самостоятельной работы
- •5. Форматирование страницы с использованием каскадных таблиц стилей
- •5.1. Формирование каскадных таблиц стилей
- •Селектор { Свойство: Значение; }
- •Единицы измерений значений свойств
- •5.2. Варианты использования css
- •5.3. Принцип наследования
- •5.4. Обзор свойств css
- •Свойства форматирования текста в css
- •Свойства структурного форматирования в css
- •5.5. Слои и позиционирование документов
- •Использование css при форматировании
- •1. Задание стиля для одного тега.
- •2. Задание стиля для одной web-страницы.
- •Контрольные вопросы и задания
- •Задания для самостоятельной работы
- •6. Использование формы для создания интерактивности на web-странице
- •6.1. Задание формы
- •6.2. Создание элементов управления
- •Теги и атрибуты для пользовательских форм
- •6.3. Комбинирование форм и таблиц
- •Практическое задание создание формы
- •Контрольные вопросы и задания
- •Задания для самостоятельной работы
- •Послесловие
- •Библиографический список
- •Багаева Анна Прокопьевна разработка web-страниц
- •660014, Г. Красноярск, просп. Им. Газ. «Красноярский рабочий», 31.
4.2. Создание вложенных фреймов
Каждый элемент <FRAMESET> формирует фреймы, относящиеся к одному набору (или уровню). Чтобы задать фреймы с разными свойствами (например, размеры или вид обрамления), применяются вложенные фреймы.
Вы познакомились с формированием на странице вертикальных и горизонтальных фреймов одного уровня, которые формируются с помощью одного тега <FRAMESET>. Более сложную структуру можно создать, если использовать теги <FRAMESET>, вложенные друг в друга.
Попытаемся создать вертикальный и горизонтальный наборы фреймов (рис. 4.3).
Фрейм 1 |
Фрейм 2 |
Фрейм 3 | |
Фрейм 4 |
Рис. 4.3. Фреймовая структура с вертикальными
и горизонтальными фреймами
При создании такой структуры вы стремитесь сразу к двум целям. Во-первых, вам нужны два столбца. Во-вторых, правый столбец вам нужно разделить на три строки. Вот в такой последовательности и следует разместить описание фреймов: внутри описания правого столбца поместите описание трех строк. Это на языке HTML будет выглядеть так, как указано ниже, результат отображения в браузере см. на рис. 4.4.
<HTML>
<HEAD><TITLE> создание вложенных фреймов
</TITLE>.
</HEAD>
<FRAMESET COLS="40%, 60%">
<FRAME SRC="page2fl1.htm">
<FRAMESET ROWS="*, *, *">
<FRAME SRC="page2fl2.htm">
< FRAME SRC="page2fl3.htm">
<FRAME SRC="page2fl4.htm">
</ FRAMESET>
</FRAMESET>
</HTML>
Рис. 4.4. Результат отображения вложенных фреймов
Итак, в данном примере второй <FRAMESET> вложен в первый. На самом деле он заменяет собой второй тег <FRAME>, требующийся первому набору фреймов. В нем и определяются три строки, на которые делится правый столбец.
Рассмотрим еще один пример на вложенные фреймы с использованием тех же самых web-страниц (рис. 4.5, 4.6).
| |
|
|
|
Рис. 4.5. Структура вложенных фреймов второго примера
<HTML>
<HEAD>
<TITLE> создание вложенных фреймов
</TITLE>
</HEAD>
<FRAMESET ROWS="25%, 50%, 25%">
<FRAME SRC="page2fl1.htm">
<FRAMESET COLS="25%, 75%">
<FRAME SRC="page2fl2.htm">
<FRAME SRC="page2fl3.htm">
</FRAMESET>
<FRAME SRC="page2fl4.htm">
</FRAMESET>
</HTML>
В этом документе используется вложение одного кадра в другой. Внешний контейнер <FRAMESET> определяет три горизонтально расположенных кадра, занимающих всю ширину окна браузера по вертикали (25, 50 и 25 %). Верхний и нижний кадры содержат документы page2fl1.htm и page2fl4.htm. Средний кадр имеет вложенный контейнер <FRAMESET>.
<FRAMESET COLS="25%, 75%">
<FRAME SRC="page2fl2.htm">
<FRAME SRC="page2fl3.htm">
</FRAMESET>
Определяющие – два вертикальных кадра, высота которых задается атрибутом внешнего контейнера. Левый кадр занимает 25 %, а правый – 75 % ширины окна браузера, они содержат документы page2fl2.htm и page2fl3.htm.
Однако на странице, как правило, не должно быть более трех или четырех кадров одновременно. Если вам хочется иметь больше 3–4 вертикальных или горизонтальных кадров одновременно, вам следует воспользоваться табличным представлением информации. Кадры в основном нужны для включения в вашу страницу элементов управления областями окна браузера или для организации динамического обновления информации. Размещение статичных данных по строкам и колонкам удобнее всего в обыкновенной таблице.
Рис. 4.6. Вложенные фреймы второго примера
Директива <NOFRAMES></NOFRAMES>, включающая вложенные теги <BODY> </BODY>, позволяет записать произвольное количество HTML-кода, который будет динамически преобразован в самостоятельную web-страницу, в случае если клиентский браузер не поддерживает фреймы.