4.1.9. Фреймовые структуры.
Большинство современных броузеров могут показывать в одном окне несколько отдельных страниц. Достигается это разбиением страницы на кадры или фреймы. В каждом кадре может выводиться отдельная страница. Управляя кадрами, можно создать удобный и разнообразный интерфейс. Например, можно слева вывести узкий кадр с оглавлением страницы, справа сверху показать фирменную эмблему и кнопки для перемещения по оглавлению, а внизу все материалы страницы.
Для разбиения страницы на кадры создают главный файл, в котором описывается вся кадровая структура страницы. При просмотре страницы, соответствующей главному файлу,на экран выводятся все заданные кадры. Их размещение описано в кадровой структуре. Для задания структуры кадров используется тег <FRAMESET>.
В странице с кадровой структурой нет тега <BODY>. После тега </HEAD>, закрывающего описание "заголовка" этой страницы размещается тег <FRAMESET>. Он содержит информацию о количестве будущих кадров, их размерах и ориентации. У него могут быть только два атрибута: ROWS=, задающий количество и размер кадров, расположенных друг над другом вертикально, и COLS=, задающий число и размер кадров, расположенных друг за другом горизонтально. Рассмотрим в качестве примера тег <FRAMESET COL="20%, 80%">, указывающий на количество кадров, равное двум, и расположение окон в виде вертикальных полос. Их размер может быть указан в пикселях или процентах от размера окна броузера. В данном варианте тега выделяются два кадра: один слева шириной 20% от общего размера окна броузера, другой, правый, занимает оставшиеся 80% окна.
Тег <FRAME> определяет внешний вид кадров и их оформление. Он может иметь следующие атрибуты:
NAME= для задания имени кадра и для использования этой информации в ссылках при открытии ссылок именно в этом кадре;
MARGINWIDTH= для определения размера горизонтального отступа между содержимым кадра и его границами. Наименьшее значение равно 1. По умолчанию отступ равен 6;
MARGINHEIGHT= для определения размера поля в верхней и нижней части кадра;
SCROLLING= для управления прокруткой. Вариант значения этого тега SCROLLING=YES создает полосы прокрутки, даже если они не требуется с учетом размера окна и места, необходимого для вывода информации. Для варианта значения SCROLLING=NO полос прокрутки не будет никогда. Для варианта значения SCROLLING=AUTO вывод полос прокрутки выполняется автоматически, если это нужно для полного отображения информации. Этот вариант ответа задается по умолчанию.
NORESIZE = для устранения возможности изменения размера кадра с использованием мыши.
SRC= для задания страницы, показываемой в этом кадре. Это обязательный атрибут.
Тег <FRAME SRC="имя1"> для рассматриваемого примера задает описание кадра. В данном случае описан первый кадра. Наименование имя1 должно указать имя страницы, которая будет показана в этом кадре. При необходимости помимо имени указывается путь к файлу, содержащему эту страницу. Например, вместо "имя1" можно написать http://www.ltn.lv/~loft5/left.html или просто right.html, если этот файл находится в текущей директории рядом с главным файлом.
Тег <FRAME SRC="имя2" NAME="main"> дает описание второго кадра. В нем, помимо указания на страницу, задается имя кадра, пригодное для использования в дальнейшем. Оно будет использовано для указания, в каком кадре открывать вторую страницу. Тег </FRAMESET> закрывает тег <FRAMESET>, с которого начиналось описание структуры окна. Далее можно разместить теги <NOFRAMES> и закрывающий его тег </NOFRAMES>. Между этими тегами находится информация, которую увидит пользователь компьютера, броузер которого не поддерживает отображение фреймов или кадров. Обычно текст содержит пояснение и предложение обновить броузер. Например, текст может быть таким: "Вы смотрите на страницу, имеющую фреймовую структуру, с помощью броузера, не поддерживающего кадры. Рекомендуем установить обновленную версию броузера для просмотра этого и других подобных сайтов. Вы можете загрузить новые версии броузера по адресам:
http://www.microsoft.com/ie/ - Internet Explorer 3.0 или выше;
http://www.netscape.com - Netscape Navigator. "
Тег </HTML> согласно общим правилам закрывает главный файл.
Файлы, соответствующие выбранным страницам, представляют собой обыкновенные Web-страницы. Единственная особенность этих страниц в том, что им отводится меньше места, чем обычно. Простой пример показывает разбиение страницы на два фрейма.
Пример 6.
<HTML>
<HEAD>
<TITLE>
Создание фреймов
</TITLE>
</HEAD>
<FRAMESET COLS=”40%,*”>
<FRAME SRC=”left.htm” BORDER=10 BORDERCOLOR=”#202020”
NORESIZE SCROLLING=YES NAME=”LEFT” MARGINHEIGHT=20 MARGINWIDTH=30>
<FRAME SRC=”right.htm” NAME=”RIGHT”>
</FRAMESET>
<NOFRAME>
<BODY>
Для просмотра необходим броузер, поддерживающий фреймы
</BODY>
</NOFRAME>
</HTML>
Для более сложного размещения фреймов теги <FRAMESET> могут быть вложенными.
Для создания оглавления в одном окне и перелистываемого изображения в другом окне, необходимо правильно организовать ссылки на файлы, выводимые в окне. Для создания ссылок используются теги <A> и </A>. Ссылка может задаваться всеми известными методами: текст, графика, активное изображение. Для правильной работы ссылки необходимо задать название фрейма и обязательно при задании ссылки указать, в каком фрейме должен быть изображен тот файл, на который задана ссылка
В ссылки страницы с оглавлением добавляется атрибут TARGET="имя" для того, чтобы они открывались не в текущем кадре, а в основном кадре с выбранным именем. Возможны несколько вариантов указания имени фрейма.
TARGET=name. Этот атрибут используется в ссылке для открытия ссылки в кадре с именем name. Этот атрибут следует выбирать очень внимательно, т.к. если в ссылке будет задано несуществующее имя кадра, могут произойти непредсказуемые изменения, в частности, появление новых окон просмотра.
Кроме обыкновенных кадров существуют так называемые "волшебные кадры". Их имена начинаются с символа "_". Никакие другие кадры не могут начинаться с этого символа. К ним относится кадр "_blank". Если атрибут TARGET= ссылается на кадр с таким именем, то ссылка откроется в новом пустом окне. Кадр "_self". Ссылка, открытая в кадре с таким именем, откроется в текущем кадре, даже если до этого был указан атрибут BASE= (например, <BASE TARGET="main">), предписывающий открывать этот документ по умолчанию в кадре main. Кадр "_parent". Ссылка открывается в родительской кадровой структуре. Это очень непредсказуемый вариант открытия кадра. Лучше избегать его. Кадр "_top". Ссылка, открывающаяся в этом кадре, будет показывать соответствующую страницу в новом окне.
Существуют так называемые плавающие окна. Они выглядят как окно на странице, в котором показывается содержимое другой страницы. Создаются с помощью тега <IFRAME NAME=" content_frame " width=" x " height=" y " SRC="имя.htm "> Комментарий, который будет выводиться вместо окна в броузере, не поддерживащем плавающие окна </IFRAME>. Здесь x - ширина окна в пикселях, y - высота в пикселях, имя - имя страницы, отображаемой в окне. Этот тег применяется только в Internet Explorer 3.0 и выше.
В рассмотренном выше примере TARGET="main" (имя main в примере задано в описании второго кадра).
- Московская финансово-юридическая академия
- Учебное пособие
- Современные средства эвм и телекоммуникаций
- Предисловие
- Оглавление
- Тема 1. Общие сведения об Internet
- 1.1. Информационные технологии и общество.
- 1.2. Основные понятия, связанные с передачей данных в Internet.
- Тема 2. Работа с броузером.
- Тема 3. Работа с электронной почтой.
- 3.1.1. Настройка программы для работы с электронной почтой.
- 3.1.2. Работа с программой электронной почты.
- Тема 4. Создание html-документов
- Тема 1. Общие сведения об Internet.
- 1.1.2. Internet как глобальная информационная среда.
- 1.1.3. Internet и информационные технологии.
- 1.1.4. История возникновения сети Internet.
- 1.2. Основные понятия, связанные с передачей данных в Internet.
- 1.2.1. Пакеты данных (информационные пакеты).
- 1.2.2. Протоколы.
- 1.2.3. Информационные уровни. Стеки протоколов.
- 1.2.4. Стандартная модель стека протоколов (модель osi).
- 1. Физический уровень.
- 2. Канальный уровень.
- 3. Сетевой уровень.
- 4. Транспортный уровень.
- 5. Сеансовый уровень.
- 6. Уровень представления.
- 7. Прикладной уровень.
- 1.2.5. Упрощенная (трехуровневая) модель стека протоколов.
- 1.2.6. Клиенты и серверы.
- 1.2.8. Протоколы системного уровня. Протокол tcp/ip.
- 1.2.9. Система доменных имен (dns).
- 1.2.10. Определение сети Internet.
- 1.2.11. Прикладной информационный уровень. Прикладные ресурсы.
- 1.2.12. Электронная почта.
- 1.2.13. Структура адреса электронной почты.
- 1.2.14. Электронная почта через Web.
- 1.2.15. Ресурс www.
- 1.2.16. Структура url - адреса.
- 1.3. Компьютерные сети.
- 1.3.1. Классификация компьютерных сетей.
- 1.3.2. Компьютерные коммуникации. Использование телефонных сетей для передачи данных.
- Тема 2. Работа с броузером.
- 2.1. Начало работы в Internet.
- Окно броузера содержит ряд кнопок, приведённых в Таблице 2.1. Пример окна броузера показан на Рис. 2.2.
- 2.2. Навигация в Internet.
- 2.3. Поиск в Internet.
- 2.4. Сохранение результатов поиска.
- 2.5. Закладки.
- Тема 3. Работа с электронной почтой.
- 3.1. Основы электронной почты.
- 3.1.1. Настройка программы для работы с электронной почтой.
- 3.1.2. Работа с программой электронной почты.
- 3.1.3. Создание электронной Web-почты.
- 3.2. Обмен сообщениями.
- 3.2.1. Получение и отправка электронной почты с применением Outlook- Express.
- 3.2.2. Получение и отправка Web-почты.
- 3.3. Работа с адресной книгой.
- 3.3.1.Внесение адреса в адресную книгу электронной почты.
- 3.3.2. Создание сообщения с использованием адресной книги.
- Тема 4. Создание html-документов
- 4.1. Элементы языка html.
- 4.1.1. Html-документы и Web-страницы.
- 4.1.2. Структура языка html.
- 4.1.3. Форматирование текста.
- 4.1.4 Анимация текста
- 4.1.5. Вставка рисунков.
- 4.1.6. Вставка гиперссылок.
- 4.1.7. Рисунки -гиперссылки.
- 4.1.8. Списки.
- 4.1.8. Таблицы.
- 4.1.9. Фреймовые структуры.
- 4.2. Публикация и использование Web-страниц.
- 4.2.1. Компоновка сайта.
- Персональная
- Ссылки Страница 1
- 4.2.2. Размещение сайта на сервере.
- 4.2.3. Регистрация сайта в поисковых системах и каталогах.
- 4.2.4. Коммерческое использование Web-страниц.
- 4.2.5. Баннеры и баннерная реклама.
- 4.2.6. Электронная коммерция.
- 4.2.7. Электронный документооборот.
- 4.2.8. Электронная подпись.
- 4.2.9. Электронные деньги.
- Вопросы по теме 1.
- Какие модемы называются звуковыми ?
- Вопросы по теме 2.
- Вопросы по теме 3.
- Вопросы по теме 4.
- Основные термины
- Учебная литература.