4.1.10. Фреймовые структуры
Большинство современных броузеров могут показывать в одном окне несколько отдельных страниц. Достигается это разбиением страницы на кадры или фреймы. В каждом кадре может выводиться отдельная страница. Управляя кадрами, можно создать удобный и разнообразный интерфейс. Например, можно слева вывести узкий кадр с оглавлением страницы, справа сверху показать фирменную эмблему и кнопки для перемещения по оглавлению, а внизу все материалы страницы.
Для разбиения страницы на кадры создают главный файл, в котором описывается вся кадровая структура страницы. При просмотре страницы, соответствующей главному файлу, на экран выводятся все заданные кадры. Их размещение описано в кадровой структуре. Для задания структуры кадров используется тег <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". Ссылка, открывающаяся в этом кадре, будет показывать соответствующую страницу в новом окне.
Существуют так называемые плавающие окна. Они выглядят как окно на странице, в котором показывается содержимое другой страницы. Создаются с помощью тега <IFRAMENAME="content_frame"width="x"height="y"SRC="имя.htm"> Комментарий, который будет выводиться вместо окна в броузере, не поддерживащем плавающие окна </IFRAME>. Здесь x - ширина окна в пикселях, y - высота в пикселях, имя - имя страницы, отображаемой в окне. Этот тег применяется только в InternetExplorer3.0 и выше.
В рассмотренном выше примере TARGET="main" (имя main в примере задано в описании второго кадра).
- Современные средства эвм и телекоммуникаций
- Тема 1. Общие сведения об Internet
- 1.1.1. Понятие "информационное общество"
- 1.1.2. 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.3 Компьютерные вирусы
- Тема 2. Работа с браузером
- 2.1. Начало работы в Internet
- 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.9. Таблицы
- 4.1.10. Фреймовые структуры
- 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. Электронные деньги.
- Тема 5. Интернет и общество
- 5.1 Социальные сети
- 5.2 Услуги социальных сетей
- Вопросы для самоконтроля Вопросы по теме 1
- Вопросы по теме 2.
- Вопросы по теме 3.
- Вопросы по теме 4.
- Вопросы по теме 5.
- Список терминов
- Список литературы