|
Читайте также: |
1 Запишите HTML-коды следующих таблиц:
| 1 | 2 |
| 3 | 4 |
| 1 | |
| 2 | 3 |
| 4 |
2 Используя теги форматирования таблицы, создайте календарь на два любых месяца текущего года.
Фреймы
Окно просмотра браузера можно разбить на несколько прямоугольных областей, каждая из которых функционирует подобно окну браузера. Эти области называются фреймами. Фреймы бывают обыкновенными и плавающими. С помощью тегов <frameset> и <frame> создаются обыкновенные фреймы, а с помощью тега <iframe> - плавающие.
При использовании фреймов потребуется несколько HTML-файлов. Один из них называется установочным. В нем описывается расположение фреймов в окне браузера и назначаются исходные HTML-файлы для каждого из фреймов. Исходные HTML-файлы выводятся во фреймы и могут содержать тексты, графику, ссылки и пр.
<frameset> - тег предназначен для разделения окна браузера на несколько фреймов.
Тег <frameset> обладает следующими атрибутами:
border – толщина границ (рамок) между фреймами в пикселах, задаваемая числом;
bordercolor – цвет границ;
frameborder – указывает, следует ли показывать границы между фреймами:
yes или 1 – показывать границы;
no или 0 – не показывать границы;
framespacing – расстояние в пикселах между фреймами;
cols – строка, содержащая сведения о количестве и ширине фреймов при их горизонтальной раскладки;
rows - строка, содержащая сведения о количестве и ширине фреймов при их вертикальной раскладки.
Задав раскладку фреймов, следует указать для каждого из них исходный HTML-файл, который выводится в данный фрейм. Для этой цели служит тег <frame>, имеющий следующие атрибуты:
src – в качестве значения принимает URL-адрес загружаемого во фрейм ресурса;
name – имя фрейма;
scrolling – определяет, будут ли присутствовать в окне фрейма полосы прокрутки:
auto - полоса прокрутки появляется только при необходимости;
yes – показывает полосы прокрутки;
no – не показывает полосы прокрутки;
noresize – определяет возможность изменять размеры фреймов пользователем:
noresize – запрещено;
resize – разрешено;
border – ширина полосы прокрутки в пикселах;
bordercolor – цвет границы между фреймами;
marginheight – вертикальный отступ в пикселах;
marginwidth - горизонтальный отступ в пикселах;
datafld – имя колонки внешнего источника данных;
datasrc – принимает в качестве значения строку вида
“# идентификатор_источника_данных”.
Пример создания фреймов (рис.1.14):
Установочный файл:
| Текст HTML-программы | Комментарий |
| <html> | |
| <head> <title> Установочный файл </title> </head> | |
| <frameset | Разделение окна браузера на несколько фреймов |
| cols="20%,*"> | Задание деления окна на два вертикальных фрейма (левый и правый), первый из которых занимает 20%, а второй оставшееся место от окна браузера |
| <frame | Задание исходного HTML-файла для первого фрейма |
| src="one.html" | Задание URL-адреса загружаемого ресурса |
| name="Левый" | Определение имени фрейма |
| scrolling=auto | Определение наличия полос прокрутки (в данном случае по необходимости) |
| border=10> | Ширина полосы прокрутки равная 10 пикселам |
| <frame | Задание исходного HTML-файла для второго фрейма |
| src="two.html" | Задание URL-адреса загружаемого ресурса |
| name="Правый" | Определение имени фрейма |
| scrolling=auto> | Определение наличия полос прокрутки (в данном случае по необходимости) |
| </frameset> | |
| <noframe> | Начало создания сообщения, которое будет появляться, если браузер не поддерживает фреймы |
| Для просмотра необходим браузер, поддерживающий фреймы | Текст сообщения |
| </noframe> | Конец создания сообщения |
| </html> |
Файлы, загружаемые во фреймы:
HTML-код файла, загружаемого в левый фрейм:
| Текст HTML-программы | Комментарий |
| <html> | |
| <head> <title> Первый </title> </head> | |
| <h2> <font color=teal> Лекции: </h2> | |
| <a href=lec1.html target="Правый"> 1. Структура HTML-документа. Основные понятия </a> <br> | Создание ссылки, для загрузки ресурса в правый фрейм |
| <a href=lec2.html target="Правый"> 2. Форматирование текстов. Списки </a> <br> | |
| <a href=lec3.html target="Правый"> 3. Графика. Ссылки. Графические карты ссылок </a> <br> | |
| <a href=lec4.html target="Правый"> 4. Таблицы </a> <br> | |
| <a href=lec5.html target="Правый"> 5. Фреймы </a> <br> | |
| <a href=lec6.html target="Правый"> 6. Элементы интерфейса и формы </a> <br> | |
| <a href=lec7.html target="Правый"> 7. Встраиваемые компоненты </a> <br> | |
| </html> |
HTML-код файла, загружаемого в правый фрейм:
| Текст HTML-программы | Комментарий |
| <html> | Создание файла, загружаемого в правый фрейм |
| <head> <title> Второй </title> </head> | |
| <center> | |
| <h1> | |
| <font color=blue> | |
| <i> ДИНАМИЧЕСКИЙ HTML <br> | |
| И <br> | |
| КАСКАДНЫЕ ТАБЛИЦЫ СТИЛЕЙ CSS </i> | |
| </font> | |
| </h1> | |
| </html> |
Рис.1.14. Окно браузера, разделенное на два фрейма
<iframe> - тег применяется для создания плавающих фреймов, в которые можно загрузить HTML-документы. Для создания плавающих фреймов не требуется отдельный установочный HTML-файл. В простейшем случае тег <iframe> используется следующим образом:
<iframe src=”URL_адрес”> </iframe>
Задание для самостоятельного выполнения
1. Создайте Web-страницу разделенную на два фрейма.
Используя ссылки, создайте в одном из них навигационную панель.
2. Создайте плавающий фрейм для загрузки документа MS Word.
Дата добавления: 2015-10-02; просмотров: 50 | Нарушение авторских прав
| <== предыдущая страница | | | следующая страница ==> |
| Правила создания структуры сложных таблиц | | | Элементы интерфейса и формы |