Главная

Популярная публикация

Научная публикация

Случайная публикация

Обратная связь

ТОР 5 статей:

Методические подходы к анализу финансового состояния предприятия

Проблема периодизации русской литературы ХХ века. Краткая характеристика второй половины ХХ века

Ценовые и неценовые факторы

Характеристика шлифовальных кругов и ее маркировка

Служебные части речи. Предлог. Союз. Частицы

КАТЕГОРИИ:






Переполнение контейнеров




В случае если размер контейнера указан явно, то может возникнуть ситуация, когда размер контента превышает границы размеров контейнера.

Для управления отображением содержимого контейнера в таких случаях используется атрибут стиля overflow, принимающий следующие значения:

· visible – отображается весь контент даже за пределами контейнера;

· hidden – отображается только область внутри контейнера, оставшаяся часть контента скрывается;

· scroll – добавление полос прокрутки контейнеру, полосы будут отображаться даже если в них нет необходимости;

· auto – полосы прокрутки появятся только в случае необходимости.

Существует возможность управления отображением содержания контейнера отдельно по горизонтали и вертикали, соответственно при помощи атрибутов overflow -x и overflow -y, значения которых аналогичны значениям overflow.

Следующий рисунок демонстрирует как будет отображаться в рамках контейнера изображение, размер которого значительно превышает размеры контейнера.


Рис. 8.4. Пример управления отображением содержимого контейнеров

Описание фреймов

Структура документа, содержащего описание фреймов, отличается от общепринятой. Секция <HEAD> по-прежнему присутствует, но в ней отсутствует контейнер <BODY>, вместо которого используется другой контейнер: <FRAMESET>. Он описывает структуру набора кадров; указывает, на сколько кадров и каких пропорций надо разбить окно браузера. Тег <FRAME> для каждого кадра указывает, какой документ и с какими параметрами первоначально загружается в кадр.

Гипертекстовая разметка в этом случае строится следующим образом:

<HTML>
<HEAD>
...
</HEAD>
< FRAMESET rows="Высота_строки" cols="Ширина_колонки">
<FRAME src="имя_файла_1" name="имя_фрейма_1">
<FRAME src="имя_файла_2" name="имя_фрейма_2">
<FRAME src="имя_файла_3" name="имя_фрейма_3">
</FRAMESET >
</HTML>

Контейнер <FRAMESET> содержит описание количества, размеров и взаимного расположения фреймов, каждый из которых описывается отдельным тегом <FRAME>. Параметры cols и rows определяют размеры фреймов и задаются в виде списка значений, разделённых запятой. Например, если в приведённом выше случае мы захотим расположить три фрейма один под другим в виде строк таблицы равной высоты, нужно написать следующее: <FRAMESET rows="33%,33%,33%">, параметр cols в этом случае отсутствует. То же самое для трёх столбцов одинаковой ширины: <FRAMESET cols="33%,33%,33%">, а пропускается уже параметр rows. Если вместо значения ширины или высоты фрейма указать * (звёздочку), этот фрейм займёт всю оставшуюся часть окна. Если вы задаёте размер какого-то фрейма в абсолютных единицах (пикселах), использовать такой способ определения размеров других фреймов просто необходимо. Например: <FRAMESET cols="25%,120,*">. Можно написать так: <FRAMESET rows="2*,*,3*">. В этом случае каждый из трёх фреймов-строк будет занимать соответственно 1/3, 1/6 и 1/2 высоты экрана браузера.

Существуют и другие параметры контейнера <FRAMESET>: frameborder отвечает за наличие у фреймов трёхмерной рамки, если его значение не равно нулю, а framespacing определяет дополнительное расстояние между фреймами в пикселах.

Тег <FRAME> имеет два основных параметра: name -- имя фрейма, использующееся для дальнейших ссылок на него, и src, в котором содержится имя HTML -файла, помещаемого во фрейм.

Есть и другие параметры:

· marginheight определяет размер отступа по вертикали от границ фрейма в пикселах;

· marginwidth задаёт то же самое, но по горизонтали;

· noresize (если он указан) запрещает пользователю изменять размеры фрейма, передвигая его границы мышью.

· Параметр scrolling определяет, нужно ли создавать полосы прокрутки для просмотра содержимого, если оно не помещается в пределы фрейма: при scrolling="NO" полосы прокрутки не будут создаваться ни при каких условиях, значение YES определяет, что они будут присутствовать обязательно, а при scrolling="AUTO" полосы прокрутки будут появляться только при необходимости.

Существует ещё одна разновидность фреймов, которую, к сожалению, понимает только Internet Explorer: фреймы внутренние, записываемые с помощью контейнера <IFRAME>. Иногда бывает очень удобно иметь возможность включить произвольный HTML -файл в любое место страницы.

Пишется этот контейнер так:

<IFRAME name="имя_фрейма" src="имя_файла"
width="ширина_фрейма" height="высота_фрейма">
...
</IFRAME>

Экран с фреймами описывается в НТМL-странице, называемой (frameset), она описывает только кадровую структуру экрана. Содержимое же фрейма - это отдельная HTML-страница, которая может находиться где угодно - в другом каталоге, на локальном сервере или на удаленном узле где-то в сети.

Программно разбиение окна браузера на фреймы реализуется так:

1) создается html-файл в котором задаются размеры и количество фреймов, а также имена файлов соответствующих фреймам и некоторые атрибуты для каждого фрейма;

2) создаются отдельные html-странички для каждого фрейма.

 

Напомним преимущества и недостатки таблиц:

· правильное отображение во всех браузерах;

· корректная индексация поисковыми машинами;

· пока таблица не загрузится полностью, посетитель ничего не увидит;

· увеличение размеров файлов за счет прописки одинаковых элементов (меню) в каждом файле.

 

С использованием фреймов возникают следующие особенности:

· меню и логотип сделаны в виде отдельных страничек, и их не нужно прописывать в каждом файле; они загрузятся только один раз и не будут каждый раз перезагружаться;

· меню всегда будет видно пользователю;

· поисковые системы могут не распознать фреймы;

· отсутствие поддержки в старых браузерах;

· фреймы затрудняют индексацию сайта поисковыми машинами,

· достаточно трудно поставить ссылку на конкретный документ, спрятанный во фреймсете, т. к. его URL нигде не показан явно, а при принудительном использовании прямой ссылки после перехода на страницу практически невозможно будет воспользоваться оригинальной навигацией по сайту.

Ход работы

1) Создадим страницу, реализующую разбиение экрана на два фрейма, т.е. окна. Для этого создадим два обычных html-файла с именами first.htm и control.htm, с каким-нибудь текстом, и главный файл- main.htm. Вот, что в нем необходимо записать:


<HTML>
<HEAD>
<TITLE>НАЗВАНИЕ СТРАНИЧКИ</TITLE>
</HEAD>
<FRAMESET rows="*,40%">
<FRAME SRC="control.htm" NAME="control">
<FRAME SRC="first.htm" NAME="main"> </FRAMESET>
</HTML>

После запуска файла main.htm откроется браузер, окно которого будет разбито на две части. В верхней части отобразится информация, которую вы поместили в файл first.htm, а в нижнем фрейме должен отобразиться файл control.htm.

Итак, в теге <FRAME> задаются атрибуты для каждого фрейма персонально. Команда scr задает имя файла который загрузится в этом фрейме, в нашем случае имя файла first.htm (<FRAME SRC="first.htm">).
Команда NAME задает имя данного фрейма, в нашем случае имя "main". Имя необходимо для того, чтобы впоследствии указать, к какому фрейму использовать ссылку.

2) К примеру, мы хотим чтобы, щелкая по ссылке в фрейме, содержащем файл control.htm, содержимое файла ссылки показывалось в фрейме, содержащем файл first.htm. Вот как это сделать.

Создайте файл index.htm:

<HTML>
<HEAD>
<TITLE>НАЗВАНИЕ СТРАНИЧКИ</TITLE>
</HEAD>
<FRAMESET cols="30%,*">
<FRAME SRC="control.htm" NAME="control">
<FRAME SRC="first.htm" NAME="main"> </FRAMESET>
</HTML>

Создайте файл first.htm, например

<HTML>
<HEAD>
<TITLE>НАЗВАНИЕ СТРАНИЧКИ</TITLE>
</HEAD>
<BODY>
<P>Это первая страничка!</P>
</BODY>
</HTML>

Затем создайте файл control.htm

<HTML>
<HEAD>
<TITLE>НАЗВАНИЕ СТРАНИЧКИ</TITLE>
</HEAD>
<BODY>
<A HREF="second.htm">file</A>
</BODY>
</HTML>

И, наконец, четвертый файл second.htm

<HTML>
<HEAD>
<TITLE>НАЗВАНИЕ СТРАНИЧКИ</TITLE>
</HEAD>
<BODY>
<P>Это вторая страничка!</P>
</BODY>
</HTML>

Сохраните все файлы и запустите index.htm. Откроется браузер: в правой части будет надпись "Это первая страничка!", а в левом фрейме ссылка на second.htm, если вы щелкните по ней, то откроется файл second.htm в левом фрейме и появится надпись "Это вторая страничка!".

3) Как сделать, чтобы при щелчке, файл открывался в правом фрейме, как на нашей страничке? Замените в файле control.htm <A HREF="second.htm">file</A> на <A HREF="second.htm" TARGET="main">file</A>. Здесь вы задаете цель (TARGET), в котором из фреймов должен открыться файл.

4) Если же у вас все ссылки должны будут открывать в одном и том же фрейме, то незачем прописывать для каждой ссылки, где она должна открываться, просто вставьте между тегами <HEAD></HEAD> тег <base target="?">, где? - название фрейма, в котором должны открываться ссылки, в нашем случае?-"main". Только учтите, что все ссылки будут открываться именно в названном фрейме.

5) Если вы хотите чтобы файл загрузился в главном окне браузера, напишите в ссылке TARGET="_top", а если в новом окне, то TARGET="_blank".

6) Также в теге <FRAMESET> можно задать величину границ фрейма, за которую ничего кроме бэкграунда не может заходить. Это делается командами MARGINWIDTH="x" и MARGINHEIGHT="y", где x и y величина в пикселях. В этом же теге можно задать толщину разграничительной линии и окаймляющей рамки командами FRAMEBORDER="X" и BORDER="Y" где x и y толщина в пикселях.






Не нашли, что искали? Воспользуйтесь поиском:

vikidalka.ru - 2015-2024 год. Все права принадлежат их авторам! Нарушение авторских прав | Нарушение персональных данных