Курс лекций по "Информатике"

Автор работы: Пользователь скрыл имя, 17 Декабря 2010 в 20:36, курс лекций

Краткое описание

Работа содержит лекции в виде уроков по предмету "Информатика".

Содержимое работы - 1 файл

html.doc

— 252.00 Кб (Скачать файл)

Суть фреймов  в принципе проста: страница делится  на несколько окон, в каждое из которых  загружается своя страничка (или  картинка), со своим собственным  адресом. К примеру, в левом окне - "vasja.html", а в правом - "pupkin.html" (которая физически может находиться где-нибудь на другом сервере). Как и любые страницы в Интернете, они могут ссылаться на другие страницы и друг на друга. Кроме этих двух страниц вы должны написать третью, в которой и будут определяться размеры и свойства этих окон. Для этого используются только два тега - <FRAMESET> и <FRAME>. Чтобы их объяснить, рассмотрим пример: 

Во-первых, создадим два файла - vasja.html и pupkin.html: <html>

<head>

<title>фрейм</title>

</head>

<body>

Меня зовут  Вася!

</body>

</html>

<html>

<head>

<title>фрейм</title>

</head>

<body>

А фамилия моя  Пупкин. Это звучит круто!

</body>

</html>

 

Теперь делаем третий файл, назовем его index.html (назвать  можно и по другому):  

  <html>

  <head>

  <title>Страница с фреймами!</title>

  </head>

  <frameset cols="50%,50%">

  <frame src="vasja.html">

  <frame src="pupkin.html">

  </frameset>

  </html> 

Вот его-то мы и  рассмотрим подробнее. Во-первых, в  нем отсутствуют теги <body> и </body>. Можно сказать, их роль выполняет тег <frameset>, хотя это не совсем верно. Тег <frameset> (переводится как "набор фреймов") с аттрибутом cols="50%,50%" указывает браузеру, что страница должна быть поделена на два окна (фрейма), каждый шириной в 50% от ширины страницы. Тег <frame> определяет содержимое и свойства каждого фрейма (заметьте, что он не имеет закрывающего тега). В данном случае указано, что содержимым первого фрейма является файл vasja.html, второго - файл pupkin.html (фреймы считаются слева направо и сверху вниз. Здесь - этот пример в действии (откроется в новом окне). Все просто! Еще несколько примеров: 20% 30% 50%

 Три фрейма  разной ширины.

  <frameset cols="20%,30%,50%">

  <frame src="page1.html">

  <frame src="page2.html">

  <frame src="page3.html">

  </frameset>

 

25%

75%

 Фреймы можно  расположить рядами так же  легко, как и столбцами. Просто  меняем аттрибут cols на rows:

  <frameset rows="25%,75%">

  <frame src="page1.html">

  <frame src="page2.html">

  </frameset>

 

Значения аттрибутов cols и rows могут выражаться не только в процентах. cols="150,*,100" - страница разделена на три столбца, где ширина левого 150 пикселов, правого - 100 пикселов, а средний столбец - это все оставшееся между ними место (знак *). Если вы будете размеры фреймов устанавливать в пикселах, то желательно ширину (или высоту) одного из них определить значком *. Можно, например, написать cols="150,550,100", и все будет выглядеть отлично на вашем мониторе с разрешением 600*800. Но стоит только изменить разрешение, и картина полностью изменится. Потому-то и рекомендуется использовать "звездочку". 200 * 100

 Пример:

  <frameset cols="200,*,100">

  <frame src="page1.html">

  <frame src="page2.html">

  <frame src="page3.html">

  </frameset>

 

150 * 2*

 Можно устанавливать  пропорции для окон. В этом  примере левый фрейм будет  шириной в 150 пикселов, а остальную  часть страницы поделят между  собой 2-й и 3-й фреймы, причем  третий фрейм будет в 2 раза  шире первого.

  <frameset cols="150,*,2*">

  <frame src="page1.html">

  <frame src="page2.html">

  <frame src="page3.html">

  </frameset>

 

*

15%

3*

 То же, но  для рядов: 2-й фрейм занимает 15% от высоты окна, а 1-й и 3-й  - все остальное в пропорции  1:3.

  <frameset rows="*,15%,3*">

  <frame src="page1.html">

  <frame src="page2.html">

  <frame src="page3.html">

  </frameset>

 

Фреймы могут  быть вложенными друг в друга. Это  позволяет создавать более сложные  конструкции страниц. Рассмотрим несколько  примеров: 40% 60%

*

 

  <frameset rows="25%,*">

    <frameset cols="40%,60%">

    <frame src="page1.html">

    <frame src="page2.html">

    </frameset>

  <frame src="page3.html">

  </frameset>

 

В этом примере  окно разбито на два фрейма: верхний  занимает 25% высоты, нижний - все остальное. В свою очередь верхний фрейм разбит еще на два, где левый фрейм занимает 40% от ширины окна, а правый - 60 процентов. 

Еще один пример. Предположим, мы хотим сделать такую  страницу: окно, состоящее из левого фрейма шириной 200 пикселов, содержащего  меню, и правого с каким-то текстом. Причем в левом фрейме вверху должен быть логотип высотой в 150 пикселов, размещенный в отдельном фрейме, а в правом внизу - баннер, который при скроллинге правого окна все время будет оставаться на месте. Должно получиться следующее: Logo Text

Menu

Banner

   <frameset cols="200,*">

    <frameset rows="150,*">

      <frame src="logo.html">

      <frame src="menu.html">

    </frameset>

    <frameset rows="*,70">

      <frame src="text.html">

      <frame src="banner.html">

    </frameset>

  </frameset>

 

Рассмотрим аттрибуты тегов <frameset> и <frame>. Первый из них, <frameset> - парный тег, т.е. он обязательно должен иметь закрывающий тег. Может включать следующие аттрибуты:  

cols и rows - применение  и возможные значения этих  аттрибутов были рассмотрены выше. Внимание! Не рекомендуется одновременное использование аттрибутов cols и rows, т.е. в некоторых браузерах конструкция <frameset cols="50%,50%" rows="30%,70%"> может привести к непредсказуемым результатам;

border="x" - толщина  рамок фреймов в пикселах;

frameborder="no|yes" или "0|1" - определяет отсутствие (no или 0) или наличие (yes или  1) рамок в определенном фреймсете.  Например, таким образом в предыдущем  примере можно было бы убрать  только рамки между баннером  и текстом и между логотипом  и меню, а между левым и правым фреймами оставить;

bordercolor="#hhhhhh" - цвет рамок. Значением может  быть шестнадцатиричное число  или зарезервированное слово  (red, blue, teal, olive и т.д.); 

Тег <frame> может  включать следующие аттрибуты: 

src="имя" - указывает браузеру, что и откуда надо загружать в данный фрейм;

name="имя" - присваивает  имя фрейму. Позволяет управлять  данным фреймом из других. Например, клик по ссылке в одном фрейме  будет вызывать загрузку страницы  в другом фрейме (подробнее в  следующем абзаце);

marginwidth="x" - величина отступа содержимого  фрейма (текста, графики и т.п.) от  границ по горизонтали. Выражается  в пикселах, минимальное значение 1;

marginheight="y" - величина отступа по вертикали.  Минимальное значение также 1;

scrolling="yes" - определяет наличие полос прокрутки у данного фрейма. Возможные значения аттрибута:

yes - полосы прокрутки  присутствуют обязательно; 

no - полосы прокрутки  отсутствуют всегда - независимо  от того, вмещается ли документ  в фрейм целиком или нет; 

auto - автоматический режим (значение по умолчанию): полосы прокрутки появляются при необходимости, т.е. если документ не вмещается в фрейм;

noresize - наличие  этого аттрибута запрещает изменение  размеров фрейма пользователем  (обычно любую границу фрейма  можно с легкостью переместить мышкой).  

Как указывалось  выше, аттрибут name тега <frame> позволяет  присвоить каждому фрейму свое имя, что позволяет управлять содержимым одного фрейма из другого (т.е. как в  этих уроках - вы кликаете по ссылке в  левом фрейме, а меняется содержимое правого). Как это сделать, рассмотрим на примере: Меню Урок 1

 В левом  фрейме у нас меню, а в правом - урок первый:

  <frameset cols="200,*">

  <frame src="menu.html">

  <frame src="urok1.html" name="content">

  </frameset>

 

Правому фрейму мы присвоили имя "content" (можно любое другое). Теперь создадим файл menu.html, это будет меню для левого фрейма:  

  <html>

  <head>

  <title>menu</title>

  </head>

  <body>

  <a href="urok1.html" target="content">Урок 1</a>

  <br>

  <a href="urok2.html" target="content">Урок 2</a>

  <br>

  <a href="urok3.html" target="content">Урок 3</a>

  <br>

  <a href="urok4.html" target="content">Урок 4</a>

  <br>

  </body>

  </html>

Теперь клик по ссылке "Урок 2" вызовет загрузку страницы "urok2.html" в фрейме с  именем "content" (т.е. в правом фрейме). При отсутствии аттрибута target (перводится с английского как "цель") загрузка произошла бы в левом фрейме, где находится сама ссылка. Этот аттрибут в данном примере можно указать только один раз - как аттрибут тега <base>, т.е. все ссылки по умолчанию будут загружаться в фрейме с именем "content". В таком случае текст будет выглядеть так: 

  <html>

  <head>

  <title>menu</title>

  </head>

  <body>

  <base target="content">

  <a href="urok1.html">Урок 1</a>

  <br>

  <a href="urok2.html">Урок 2</a>

  <br>

  <a href="urok3.html">Урок 3</a>

  <br>

  <a href="urok4.html">Урок 4</a>

  <br>

  </body>

  </html>

Кроме имени  фрейма значением аттрибута target может  быть одно из следующих зарезервированных  слов: 

_blank - браузер должен открыть новое окно и загрузить в него документ (на который была ссылка) - обычно используется для того, чтобы посетитель не уходил по ссылке с вашего сайта;

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

_self - документ  загружается в том же фрейме, где находится сама ссылка. Может  потребоваться в случае, если в тексте есть строка <base target="имя_фрейма">;

_parent - документ  загружается в родительский фреймсет  текущего фрейма.

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

Используя на своем  сайте фреймы, нельзя забывать о  том, что некоторые браузеры могут  не поддерживать фреймы - старые браузеры, речевые и др. Специально для них  существует тег noframes, в котором можно  сделать "нефреймовую" версию сайта, или хотя бы просто перечислить ссылки на страницы сайта. Пример:  

Информация о работе Курс лекций по "Информатике"