Методическая разработка по дисциплине «Web-дизайн»
«Фреймы в html-документах».
Тема: Фреймы в html-документах.
Цели занятия:
-
сформулировать основные
принципы использования фреймов в HTML-документе, ознакомить с тегами создания
фреймов в HTML, продемонстрировать их на примерах;
-
развивать умение анализировать,
сравнивать, делать выводы, высказывать свою мысль;
-
воспитывать внимательность,
вежливость и дисциплинированность.
Основные понятия: фреймы, теги, атрибут,
зарезервированные слова
Методическое
обеспечение: лекционный материал
Тип занятия:
лекция.
Методы и
приемы: беседа, устный опрос
План занятия:
Организационный
момент: Здравствуйте, мы продолжаем изучать html и сегодня познакомимся с фреймами.
II. Жаңа материалды оқыту
Изучение нового
материала.
Фреймы в HTML-документах.
Frame - рамка, кадр. Фреймы –
это прямоугольные области экрана, каждая из которых содержит свой собственный
HTML-документ. Фреймы позволяют нам открыть в окне браузера - не один, а сразу
несколько документов (допустим, документ menu.html, который содержит меню,
logo.html - документ, который содержит логотип, шапку страницы, и content.html
- документ с непосредственным содержанием нашего сайта). Это можно использовать
по разному: некоторые дизайнеры при помощи фреймов воплощают свои сумашедшие
задумки и повергают в восхищение публику, некоторые используют фреймы, потому
что их сайту просто не возможно без фреймов обойтись, а некоторые используют
фреймы, потому что им так удобнее - это все хорошо, главное, чтобы оно не
смотрелось ужасно и некрасиво и было удобно для посетителя сайта.
Фреймы используются
для оформления таких документов как:
Оглавление.
Если вы поместите на Web-страницу оглавление в виде вертикального столбца, то
пользователь сможет обратиться к нему в любой момент, и ему не нужно будет
постоянно щелкать на кнопке возврата к предыдущей странице. Поскольку, находясь
во фрейме, оглавление всегда будет под рукой, пользователю нужно будет просто
выбрать другой его пункт и сразу же получить нужную информацию.
Неподвижные
элементы интерфейса. Можно зафиксировать на экране
какое-то графическое изображение, например, логотип фирмы, в то время как
остальная часть страницы будет прокручиваться в другом фрейме.
Формы и
результаты. Можно создать форму в одном фрейме, а в другом отобразить
результаты запроса.
Синтаксис фреймов.
Формат документа с
фреймами напоминает формат обычного документа, только вместо тэга BODY
используется контейнер FRAMESET, содержащий описание внутренних HTML-документов
с информацией.
<HTML>
<HEAD>...</HEAD>
<FRAMESET>...</FRAMESET>
<HTML>
Однако, фрейм-документ
является специфичным видом HTML-документа, поскольку не содержит элемента BODY
и какой-либо информационной нагрузки. Он описывает только фреймы, которые будут
содержать информацию.
Достоинства и недостатки
фреймов:
Достоинства:
- фреймы одновременно
отображают различную информацию в пределах одного окна;
- используя фреймы,
можно постоянно отображать какую-нибудь информацию (например логотип), не
включая ее в каждую страницу сайта;
- можно гибко построить
навигацию по сайту.
Недостатки:
- главное достоинство
фреймов (отображение различной информации в пределах одного окна) является их
же и недостатком, т.к. доступная область Вэб-страницы существенно сужается;
- при создании фрейма
правильно выбрать его размер часто бывает затруднительно. Таким образом,
пользователь должен постоянно пролистывать фрейм при помощи полос прокрутки,
что может очень быстро надоесть;
- при низком разрешении
экрана монитора объем видимой информации значительно уменьшается;
- ну и самый неприятный
недостаток - многие поисковые системы и каталоги отказываются регистрировать
страницы, использующие фреймы.
- факт, что некоторые
браузеры не умеют обрабатывать фреймы. При этом пользователь видит перед собой
пустой экран. Для того, чтобы не вводить пользователя в заблуждение служит тэг <NOFRAMES>. Текст, помещенный
между открывающим и закрывающим тэгом, отображается в случае невозможности
отображения фрейма.
Полосы прокрутки фреймов.
По умолчанию браузер
отображает полосы прокрутки только в том случае, если данные не укладываются в
размеры фрейма. Присвоив атрибуту SCROLLING значение yes/no, можно предписать
браузеру всегда сохранять полосы прокрутки в скрытом состоянии, либо постоянно
отображать их.
Атрибуты:
<FRAMESET>.
COLS.
Делит экран по вертикали. Принимает значения в пикселях, в процентах или просто
*. Значение * говорит о том, что конкретный столбец будет занимать всю
остальную часть экрана
ROWS.
Делит экран по горизонтали. Принимает значения в пикселях, в процентах или
просто *. Значение * говорит о том, что конкретная строка будет занимать всю
остальную часть экрана.
value%
Значение величины
подокна в процентах от 1 до 100.
value*
Символ "*"
указывает на то, что все оставшееся место будет принадлежать данному фрейму.
Если указывается два или более фрейма с описанием "*" (например
"*,*"), то оставшееся пространство делится поровну между этими
фреймами.
FRAMEBORDER.
Определяет наличие рамок, т.е. границ фреймов. Принимает значения
"yes" или "no".
BORDER.
Определяет ширину рамки в пикселях.
BORDERCOLOR.
Определяет цвет рамок. При определении цвета можно выбрать как его название,
так и числовой эквивалент в системе RGB. Например, BLUE или #0000FF.
Пример:
<FRAMESET COLS="25٪,75٪" FRAMEBORDER="YES"
BORDER="2">
<FRAMESET ROWS="50٪,50٪"
FRAMEBORDER="YES" BORDER="2">
</FRAMESET>
<FRAMESET ROWS="10٪,90٪"
FRAMEBORDER="YES" BORDER="2">
</FRAMESET>
</FRAMESET>
Результат:
Пример:
<FRAMESET COLS="25٪,75٪" ROWS="50٪,50٪">
</FRAMESET>
Результат:
Тег <FRAME>
Тег <FRAME>,
помещенный в контейнер <FRAMESET>…</FRAMESET>, определяет, что
именно должно отображаться в конкретном фрейме. Не имеет закрывающего тега.
Атрибуты:
SRC.
Определяет URL, связанный с конкретным фреймом. SRC="url". Описывает
URL документа, который будет отображен внутри данного фрейма. Если он
отсутствует, то будет отображен пустой фрейм.
MARGINWIDTH.
Определяет расстояние между содержимым фрейма и его границами справа и слева.
MARGINWIDTH="value". Это атрибут может быть использован, если автор
документа хочет указать величину разделительных полос между фреймами сбоку.
Значение value указывается в пикселях и не может быть меньше единицы.
MARGINHEIGHT.
Определяет расстояние между содержимым фрейма и его границами сверху и снизу.
MARGINHEIGHT="value". То же самое, что и MARGINWIDTH, но для верхних
и нижних величин разделительных полос.
SCROLLING.
Определяет присутствие в окне фрейма полосы прокрутки. Может принимать значения
"yes", "no" и "auto"(по умолчанию).
NORESIZE.
Определяет границы фрейма как "жестко закрепленные" и не позволяет
пользователю изменить размеры окна фрейма. Причем фиксируются размеры всех
фреймов, имеющих с закрепленным общую границу.
FRAMEBORDER, BORDER, BORDERCOLOR.
Эти атрибуты связаны с рамками и аналогичны таким же в теге <FRAMESET>.
NAME.
Определяет имя окна фрейма. Единственный атрибут, не влияющий на внешний вид
фрейма. Позволяет контролировать процесс загрузки фреймов. Если окно фрейма
имеет уникальное имя, то к нему можно непосредственно обратиться из других
фреймов. Присваивая имена окнам фреймов, надо помнить об одном ограничении: имя
не должно начинаться с символа подчеркивания "_", иначе оно будет
игнорироваться. Так как с этого символа начинаются некоторые служебные имена.
Пример:
<FRAMESET COLS="25٪,75٪" FRAMEBORDER="yes"
BORDER="5" BORDERCOLOR="#008800">
<FRAME src="left.htm" MARGINWIDTH="20"
MARGINHEIGHT="20">
<FRAME src="right.htm" NAME="main_window" MARGINWIDTH="0"
SCROLLING="no" NORESIZE>
</FRAMESET>
Использование тега A для загрузки во фрейм:
С помощью тега
гиперссылки <A> можно загрузить документ в определенный
фрейм.
Атрибуты:
HREF.
Определяет URL или имя нового документа, который вы хотите загрузить в
определенное окно фрейма.
TARGET. С
появлением фреймов сразу возникает вопрос: "А как сделать так, чтобы
нажимая на ссылку в одном фрейме инициировать появление информации в
другом?" Ответом на данный вопрос является планирование взаимодействия фреймов
(далее - планирование).
TARGET="windows_name". Определяет имя фрейма, в который будет загружен новый документ. Это имя
должно быть присвоено фрейму атрибутом NAME в теге <FRAME>.
Зарезервированные имена фреймов:
Зарезервированные имена
фреймов служат для разрешения специальных ситуаций. Все они начинаются со знака
подчеркивания. Любые другие имена фреймов, начинающиеся с подчеркивания, будут
игнорироваться браузером.
TARGET="_blank"
Данное значение
определяет, что документ, полученный по ссылке, будет отображаться в новом окне
браузера.
TARGET="_self".
Данное значение
определяет, что документ, полученный по ссылке, будет отображаться в том же
фрейме, в котором находится ссылка. Это имя удобно для переопределения окна
назначения, указанного ранее в тэге BASE.
TARGET="_parent".
Данное значение
определяет, что документ, полученный по ссылке, будет отображаться в
родительском окне, вне зависимости от параметров FRAMESET. Если родительского
окна нет, то данное имя аналогично "_self".
TARGET="_top".
Данное значение
определяет, что документ, полученный по ссылке, будет отображаться на всей
поверхности окна, вне зависимости от наличия фреймов. Использование данного
параметра удобно в случае вложенных фреймов.
Пример: <A rel="nofollow ugc" target="_blank" href="document.html"
target="_blank"></A>.
III. Тақырыптың негізі ұғымдарын бекіту бойынша жұмыс
Работа по
закреплению основных понятий темы.
Устная работа по
примерам.
IV. Үй тапсырмасын беру
Задание на дом.
Прочитать лекцию, тренировка в создании фреймов.
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.