3. Язык гипертекстовой разметки страниц html. Фреймы
Фреймы используются для разделения экрана браузера на независимые части. Содержимое фрейма – это отдельная HTML-страница, которая может находиться как, на локальном сервере так и на удаленном узле. Фреймовая структура определяет только способ организации экрана и задаёт, где находится начальное содержимое каждого фрейма. Описание фреймовой структуры строится в отдельном файле. Поэтому для создания, например, документа, который отображается в двух фреймах, необходимо три файла. Наиболее частое применение фреймов – это отделение меню от основного информационного наполнения. Хотя фреймы достаточно удобная вещь, использование их не рекомендуется.
Файл, который содержит описание структуры фреймов, не может содержать элемент body>. Такой файл имеет основной элемент html>, в который включаются разделы head> и frameset>.
Фреймы задаются с помощью тегов FRAMESET> и FRAME>. Тег frameset> содержит описание распределения окон с указанием размера каждого фрейма, а frame> задает адреса страниц.
Тег frameset> допускает вложение. Закрывающий тег обязателен. Основные атрибуты:
- cols– задает число вертикальных панелей.
- rows– задает число горизонтальных панелей.
Значение указываются либо в пикселях, либо в относительных единицах процентах по отношению к доступной части окна. Отдельные браузеры поддерживает также атрибуты:
- border– указывает толщину рамки в пикселях.
- bordercolor– указывает цвет рамки.
- frameborder– указывает вид рамки (плоский или объемный): «1» – рисуется объемная рамка, «0» – рисуется плоская рамка.
- framespacing– создает пустое поле заданной толщины между фреймами,frameborderпри этом должен принимать значение «0».
Пример.Задать фрейм состоящий из трех строк: высота верхней – 20 пикселов, средней – 80 пикселов, нижней – 20 пикселов: FRAMESETROWS=»20, 80, 20″> Следующая запись формирует экран, на котором верхняя строка занимает 10% высоты экрана, средняя – 60%, а нижняя – оставшиеся 30%: FRAMESETROWS=»10%, 60%, 30%»> Можно использовать комбинации значений. Следующая запись формирует экран, на котором верхняя строка имеет высоту 20%, средняя – 80 пикселов, а нижняя занимает все оставшееся место: FRAMESETROWS=»20%, 80, *»> Тег FRАМЕ> определяет внешний вид и поведение фрейма. Не имеет закрывающего тега. Вся суть тега FRАМЕ> в его атрибутах. Синтаксис: одиночный тег: frameattribute1=»значение1″attribute2=» значение2″>
- NАМЕ– задает имя фрейма, которое нужно для организации переходов между фреймами и использования в: программах при организации ссылки. При этом атрибут ТАRGЕТ тега гиперссылки должен иметь тоже значение. Удобно использовать для задания ссылок в одном фрейме, и открытия их в другом фрейме с заданным именем, при этом первое остается неизменным.
- МАRGINWIDTH– задает горизонтальный отступ между содержимым кадра и его границами. Наименьшее значение этого атрибута равно 1. Нельзя указать 0. По умолчанию атрибут равен 6.
- МАRGINHEIGHT– задает поля в верхней и нижней частях фрейма.
- CROLLING = yes | nо | аutозадает возможность пользоваться полосами прокрутки во фрейме. По умолчанию SCROLLING=аutо.
- NORESIZE= NORESIZE| RESIZE– определят возможность управления размерами фрейма мышью.
- SRС– задает адрес загружаемого во фрейм ресурса.
Тег NOFRAMES> задает контейнер для браузеров не поддерживающих фреймы. Содержимое контейнера выводится, только если фреймы не поддерживаются. Рассмотрим примеры задания фреймов. Пример. Страница с фреймовой структурой – набор вертикальных фреймов.
 |
Пример. Страница с фреймовой структурой – два вертикальных фрейма, с поддержкой браузеров не обрабатывающих фреймы. 
Пример. Использование фреймов для создания навигации по сайту. Ссылки с левого фрейма (меню), открываются в правом фрейме(главное) без изменения левого. Страница с фреймовой структурой: ПримерфреймовВы просматриваете эту страницу с помощью браузера, не поддерживающего фреймы. Страница с меню menu.html:НАЗВАНИЕМенюФайл1Файл2Файл3 Страница с заголовком head.html:Заголовок документа
Фреймы
Фреймы — это HTML-элементы, позволяющие разделить окно веб-браузера на несколько независимых окон, в каждое из которых можно загрузить отдельный HTML-документ. Каждое такое окно (фрейм) может иметь собственные полосы прокрутки и функционировать независимо от других независимых окон либо наоборот управлять их содержанием. Они могут применяться для организации постоянно находящегося в одном окне меню, в то время как в другом окне располагается непосредственно сама информация. Пользователи могут обращаться к меню в любой момент, и им не нужно возвращаться к предыдущей странице, чтобы выбрать другой пункт меню. Применение фреймов позволит вам «закрепить» в окне браузера изображения или другие неподвижные по замыслу элементы интерфейса, в то время как остальная часть страницы будет прокручиваться во фрейме.
Однако, стоит отметить, что в наши дни фреймы считаются устаревшим средством, а сайты с фреймами теперь считаются несолидными, так как профессиональные веб-мастера никогда не используют фреймы в своих проектах. С фреймами связан целый ряд печально известных проблем. Они, например, сбивают с толку поисковые машины, поскольку на страницах, которые содержат контент, нет ссылок на другие документы. Если вы хотите получать посетителей с поисковых систем, забудьте о фреймах. Понравившуюся страницу пользователю невозможно поместить в раздел закладки браузера, так как фреймы скрывают адрес страницы, на которой он находится, и всегда показывают только адрес веб-сайта. По этой причине они создают проблемы для браузеров при отслеживании хронологии и еще они не слишком приспособлены для разных размеров экранов и мобильных устройств.
Несмотря на то, что проекты с фреймами встречаются во всемирной паутине все реже, изучение HTML было бы неполным без рассмотрения темы о фреймах. У фреймов наряду с недостатками есть и некоторые достоинства, которые не позволяют отбросить эту технологию как бесперспективную.
Создание фреймов
Структура HTML-документа с фреймами внешне очень напоминает формат обычного HTML-документа. Как и в обычном HTML-документе, весь код помещен между парными тегами и , а в контейнере располагаются заголовки. Основное отличие документа с фреймами от обычного HTML-документа — у документа с фреймами вместо тега применяется парный тег (от англ. frame set – набор фреймов).
В следующем примере приведена структура HTML-документа с фреймами:
Пример: Структура HTML-документа с фреймами
- rows — описывает разбиение страницы на строки:
- cols — описывает разбиение страницы на столбцы:
В значении атрибутов rows и cols необходимо указывать не количество строк или столбцов, а значение ширины и высоты фреймов. Все значения в списке разделяются запятыми. Размеры могут быть указаны в абсолютных единицах (в пикселах) или в процентах:
- cols=»20%, 80%» — окно браузера разбивается на две колонки с помощью атрибута cols, левая колонка занимает 20%, а правая 80% окна браузера.
- rows=»100, *» окно браузера разбивается на два горизонтальных окна с помощью атрибута rows, верхнее окно занимает 100 пикселов, а нижнее — оставшееся пространство, заданное символом звездочки.
Как видно из данного примера, контейнер с атрибутом rows вначале создает два горизонтальных фрейма, а вместо второго фрейма подставляется еще один , который разбивает нижний горизонтальный фрейм на две колонки с помощью атрибута cols, левая колонка занимает занимает 20%, а правая 80% окна браузера.
Если браузер не поддерживает фреймы, то в окне будет отображен текст, расположенный между тегами и . Все, что находится между тегами и , игнорируется браузерами, поддерживающими фреймы. Таким образом разработчику нужно написать код, дублирующий содержимое фреймов другими средствами, и поместить этот код в контейнер , тогда все пользователи смогут увидеть его веб-страницу.
Как уже отмечалось, для вставки в документ отдельного фрейма служит непарный тег . Атрибут src задает документ, который должен отображаться внутри данного фрейма, например: . Если атрибут src отсутствует, отображается пустой фрейм.
Границы или пространство между фреймами
По умолчанию, браузер отображает серую и, как правило, в виде трехмерной линии границу между фреймами, с помощью которой посетители могут регулировать размер фрейма.
Границей фрейма можно управлять, как и любыми другими элементами фрейма. Для этого существует несколько атрибутов элемента , позволяющих настраивать границы фреймов. Толщина линии границы определяется атрибутом border. По умолчанию значение толщины границы равно пяти.
Чтобы скрыть границу фрейма, необходимо либо указать значение ширины границы равным нулю, либо присвоить значение «no» или «0» атрибуту frameborder. Атрибут frameborder может принимать только два противоположных значения. Если значение атрибута frameborder равно «yes» или «1», то граница фреймов будет отображаться, а если «0» или «no», то нет. Учтите, что значения атрибута frameborder различаются для разных браузеров. Чтобы решить эту проблему используйте дважды атрибут frameborder, а для некоторых браузеров требуется еще добавить атрибут framespacing со значением «0»:
В следующем примере убираем границу между фреймами: