День 13. Убираем тело.
Сегодня я весь день просидел на форумах, прообщался с людьми, которые вроде бы хоть что-то понимают в создании сайтов, и получил от них настоятельную рекомендацию изучить работу со фреймами(на тот момент я довольно слабо представлял себе что это такое). Ну что ж, фреймы значит фреймы.Фреймы - это элементы HTML, позволяющие разделить страницу на несколько независимых окон. В каждый их фреймов можно поместить свою страницу, на которой может находиться ссылка из одного окна в другое. В основном они применяются для организациии постоянно находящихся на экране меню, в то время как в другом окне будет располагаться само содержимое. Ярким примером такой структуры может быть всеми нами любимый ВКонтакте.
Также с помощью фреймов можно фиксировать на страницах логотипы, графику и т.д.
Чтобы страница содержала фрейм необходимо пару тегов <body> </body> заменить на <frameset> </frameset> . Для элемента FRAMESET нужно указать значения для атрибутов cols и rows, иными словами сказать браузеру на сколько частей делить окно. В качестве значений для этих атрибутов нужно указать не количество фреймов, а их размеры. При этом пользоваться можно тремя способами задания этих самых размеров:
- Первый способ. Самый неудобный и ваще забудьте про него. Это простое задание размеров фрейма в пикселях. То есть запись будет иметь вид типа: cols="100, 210, 70" rows="58,140,89". Это очень неудобно, потому что разные браузеры имеют разные размеры окон, раз, разные пользователи имею разные размеры мониторв, два. Так что ну не получится сделать таким образом сайт универсально читабельным.
- Второй способ. Указать размеры в процентах. Это ваще крутой способ. Просто укажите в процентах от окна браузера ширины и высоты каждого фрейма и вуа-ля. Только следите чтобы в сумме по ширине и высоте у вас набралось сто процентов. То есть запись должна быть примерно такая: cols="30%,40%",30%" rows="30%,70%".
- Третий способ. Это если вам нужно, чтобы один или два фрейма были фиксрованных размеров, а остальное да и хрен с ним. Тогда просто укажите запись такую вот: cols="30%,*" rows="*,70%" , где знак * обозначает "Все остальное место". Как будет выглядеть картина в окне, заданная этими двумя строками проверьте сами.
Еще уточнение: вам совсем не обязательно указывать оба атрибута, ведь окно можно делить всего на два фрейма.
Пример:
<html>
<head>
<title>Страница с фреймами</title>
<head>
<title>Страница с фреймами</title>
</head>
<frameset cols="45%,*" rows="30%,*" frameborder=0>
<frame src="Вложенный список.htm">
<frame src=Волейбол.jpg>
<frame src="заголовки со стилями.htm">
<frame src="заголовки без стилей.htm">
</frameset>
</html>
<frameset cols="45%,*" rows="30%,*" frameborder=0>
<frame src="Вложенный список.htm">
<frame src=Волейбол.jpg>
<frame src="заголовки со стилями.htm">
<frame src="заголовки без стилей.htm">
</frameset>
</html>
Как видите в каждый из фреймов с помощью атриба src вписан либо документ, либо изображение, но в общем-то не налагается никаких ограничений на содержание фрейма.
После того, как вы сделаете себе страницу со фреймами, вы увидите, что между ними есть границы, которые вы можете двигать меняя размеры фреймов.
Если же вам границы не нужны совсем, то испoльзуйте атрибут frameborder элемента FRAMESET. В качестве его значений нужно указать либо 1, либо yes, если вам границы нужны,
либо 0, либо no, в обратном случае.
Только тут учтите, что разные браузеры воспринимают разные значения для этого атрибута, поэтому для страховки указывайте оба значения(0 и no, или 1 и yes).
Также при работе с границами можно использовать все атрибуты, применяемые для границ в таблицах.
Пример того же окна, но без границ.
<html>
<head>
<title>Страница с фреймами</title>
<head>
<title>Страница с фреймами</title>
</head>
<frameset cols="45%,*" rows="30%,*" frameborder=0>
<frame src="Вложенный список.htm">
<frame src=Волейбол.jpg>
<frame src="заголовки со стилями.htm">
<frame src="заголовки без стилей.htm">
</frameset>
</html>
<frameset cols="45%,*" rows="30%,*" frameborder=0>
<frame src="Вложенный список.htm">
<frame src=Волейбол.jpg>
<frame src="заголовки со стилями.htm">
<frame src="заголовки без стилей.htm">
</frameset>
</html>
Здесь нет границ, а значит и нет возможности менять размер окон, что в принципе и бывает необходимо.
Обратите внимание, что картинка не помещается в окно фрейма, а соответственно для этого фрейма в обоих примерах появляются полосы прокрутки, наличие или отсутствие которых можно регулировать с помощью атрибута scrolling.
Yes - всегда вызывает полосы прокрутки, независимо от того, нужны они или нет.
No -
никогда не вызывает полосы прокрутки, независимо от того, нужны они или нет.
Auto - полосы отображаются при необходимости(это значение стоит по умолчанию)
<html>
<head>
<title>Страница с фреймами</title>
<head>
<title>Страница с фреймами</title>
</head>
<frameset cols="45%,*" rows="30%,*" frameborder=0 >
<frame src="Вложенный список.htm">
<frame src=Волейбол.jpg scrolling="no">
<frame src="заголовки со стилями.htm">
<frame src="заголовки без стилей.htm">
</frameset>
</html>
<frameset cols="45%,*" rows="30%,*" frameborder=0 >
<frame src="Вложенный список.htm">
<frame src=Волейбол.jpg scrolling="no">
<frame src="заголовки со стилями.htm">
<frame src="заголовки без стилей.htm">
</frameset>
</html>
Это пример использования scrolling'а, где намерено убраны полосы прокрутки для фрейма с изображением, которое не поместилось во фрейм.
Усе.
Сегодня я узнал про фреймы, основы их создания, работы с ними.И знаете, пора делать сайты. Простые, одноклеточные сайты.
На сегодня вроде бы все, завтра поговорим про другие возможности работы со фреймами.
До завтра, друзья)
Только VK не позволяет помещать себя во фрейм и блокирует передачу страницы :)
ОтветитьУдалитьНу и, в том числе по причине выше, контакт не пользуется фреймами, а генерирует страницу из темплейтов на сервере. Помимо контакта этим способом из покон веков пользуются более 90% веб ресурсов. Мотай на ус :)
Мотаю на ус. А что такое темплейт?
ОтветитьУдалитьWiki: a pre-developed page layout in electronic or paper media used to make new pages with a similar design, pattern, or style.
ОтветитьУдалитьЕсли просто, то это страницы или части интерфейса, в которые или которые сами встраиваются в другие элементы интерфейса. Давай разберем твой блог. У тебя от поста к посту не изменен фон, основной заголовок, а меняется только пост. Так вот не изменяемая часть и есть темплейт и если изменить его файл, то последуют изменения во всех страницах, его использующие. Если посмотреть еще, то можно найти еще один - архив блога (правда его можно причислить лишь с большой натяжкой, а относится он к другого рода элементам). Он так же один для всех постов, но не зависит от основного темплейта.