Фреймы и ссылки.
Настало время оживить наш сайт ссылками, да вот беда, знакомая нам обыкновенная ссылка <a href="text1.html">Бобы в горшочке по-итальянски</a>откроет данный документ в том же фрейме где она и находится, в нашем случае непосредственно в фрейме с содержанием, а само содержание в момент перехода по этой ссылки уйдёт в небытие..
..
Что бы впредь такого не происходило, необходимо указывать браузеру, в каком фрейме следует открывать необходимый нам документ.
Помнится мы уже знакомились, в главе посвящённой ссылкам, с атрибутами name- имя иtarget- цель. Применяются они также и при работе с фреймами, механизм немного изменён, а так почти тоже самое. Первым делом фрейму, в котором мы хотели бы открывать какие либо документы, необходимо присвоить индивидуальное имя.
пишется так:
<frame src="text.html" name="osnovnoe"> имя можно придумать любое..
А теперь в документе с ссылками (в нашем случае это файл menu.html)необходимо указать цель то есть собственно определить в каком окне стоит открывать тот или иной документ
Пишется так:
<a href="text1.html" target="osnovnoe">Бобы в горшочке по-итальянски</a>
прежде чем ссылаться на какие либо документы, их необходимо создать.. в моём случае файлы (рецепты) имеют имена text.html, text1.html, text2.html…
Посмотрите пример:
Файл index.html <html> <head> <title>фреймы</title> </head> <frameset cols="*,800,*" border="0"> <frame src="dekor.html" scrolling="no" noresize> <frameset rows="120,*" border="0"> <frame src="logotype.html" scrolling="no" marginwidth="0" marginheight="0" noresize> <frameset cols="200,600" border="0"> <frame src="menu.html" noresize> <frame src="text.html" name="osnovnoe" marginwidth="10" marginheight="10" noresize> </frameset> </frameset> <frame src="dekor.html" scrolling="no" noresize> </frameset> </html>
Файл menu.html <html> <head> <title>фреймы</title> </head> <body bgcolor="#e8e8e8" background="fon1.jpg" link="#b40000" alink="#900000" vlink="#900000"> <font face="Monotype Corsiva" size="6"color="#ff0000">Меню:</font><hr> <font face="Comic Sans MS" size="3"> <a href="text.html" target="osnovnoe">Суп из шампиньонов</a><hr> <a href="text1.html" target="osnovnoe">Бобы в горшочке по-итальянски</a><hr> <a href="text2.html" target="osnovnoe">Австралийский летний салат</a><hr> ... ... ... </font> </body> </html>
смотреть пример
Так же как и раньше документ можно открыть в отдельном окне. Напомню, пишется так:
<a href="text1.html" target="_blank">Бобы в горшочке по-итальянски</a>
Или же присвоив атрибуту targetзначение_topоткрыть его в этом же окне браузера, но на весь экран.. "обнулив" при этом всё что бы там не находилось.. пишется так:
<a href="text1.html" target="_top">Бобы в горшочке по-итальянски</a>
Такой вот сайтик получился.. конечно над ним ещё работать и работать.. к тому же по моёй задумке он будет иметь несколько иную структуру в плане навигации по сайту, в нем будет ёщё целая куча страниц, красивое меню, но что касается фреймовой структуры, думаю она останется прежней..
Плавающий фрейм
Иногда в страницу содержащую в себе не фреймовую структуру необходимо в отдельном окне вставить другой HTML документ или даже ряд таковых документов. Для выполнения этой цели существует тег <iframe>- так называемый плавающий фрейм.
Данный тег имеет ряд атрибутов:
src - обязательный атрибут, указывающий путь к открываемой странице width - ширина плавающего фрейма в пикселях или процентах height - высота плавающего фрейма scrolling - показ полосы прокрутки
no - никогда не показывать полосу прокрутки,
yes - всегда показывать,
auto - показывать в том случае если она необходима.
align - выравнивание пваюшего фрейма
left - слева
right - справа
top - выше
bottom - ниже
frameborder - наличие рамки вокруг плавающего фрейма
1 - включить рамку
0- выключить рамку
Всё вместе пишется так:
<iframe src="primer.html" width="300" height="250" align ="left" scrolling="auto" frameborder="1" ></iframe>
Пример документа с плавающим фреймом:
|
<html> <head> <title>Плавающий фрейм</title> </head> <body> <center><h2>Плавающий фрейм</h2></center> В эту страницу введён так называемый "плавающий фрейм". В отдельном окне он открывает для показа другой документ html. <br> <iframe src="primer.html" width="250" height="250" align ="left" scrolling="auto" frameborder="1"></iframe> <br> … … … <br> </body> </html> |
|
