От този материал ще научите как да разделяте страницата си на фреймове (рамки). Въпреки, че фреймовете са напълно „законен“ инструмент в HTML, препоръчително е по възможност да избягвате употребата им. Причината за това е, че фреймовите страници създават трудности при индексирането им от търсещите машини, а често затрудняват и потребителите при сърфирането из съответния сайт.

ТАГОВЕ И ОСНОВНИ АТРИБУТИ ПРИ ИЗГРАЖДАНЕ НА РАМКИ

В първите уроци беше споменато, че почти всички HTML-страници имат секция HEAD и секция BODY. Фреймовите страници са едно от изключенията – те не съдържат секция BODY.

Фактически една фреймова страница се състои от няколко – 3, 4 или повече HTML-документа.

Ако често сърфирате из интернет сигурно сте попадали на фреймови страници. Много често използван вариант е страница разделена на горен, ляв и централен сектор. За да се изгради такава страница първо трябва да създадем 3 HTML-документа – по един за горния, левия и централния фрейм и накрая да създадем индекс-фреймовата HTML-страница, която ще обедини трите споменати страници.

Трите страници, които ще се показват съответно горе, вляво и в центъра, се създават като „нормални“ HTML-страници – със секция HEAD, секция BODY и т.н. Разликите с обикновената HTML-станица се проявяват при индексната фреймова страница, която обединява 3-те първоначално създадени „нормални“ HTML-страници. Кода на тази индексна страница може да изглежда например така:

<html>
<head>
<title>Пример за фреймова страница №1</title>
</head>

<frameset rows=“30%,*“>
<frame src=“top.html“ name=“top“ />
<frameset cols=“30%,*“>
<frame src=“left.html“ name=“left“ />
<frame src=“right.html“ name=“right“ />
</frameset>
</frameset>

</html>

Вид на фреймовата страница от пример №1:

Нека да разгледаме таговете, които изграждат тази страница:

1. Както се вижда, страницата не притежава BODY-секция. На мястото на тага BODY е поставен тага frameset. Тага frameset определя „раграфяването“ на индекс-HTML-страницата, а другия таг – frame – „извиква“ съответната HTML-страница, която трябва да се появи на съответното място.

Тага frameset може да притежава 2 основни атрибута: cols и rows.

Чрез атрибута cols се задава разграфяване на страницата на колони, а чрез атрибута rows – на редове.

В случая атрибутите cols и rows имат зададени стойности „30%,*“. Когато такава стойност е зададена на rows, това означава, че за горния ред (горния хоризонтален фрейм) се запазва 30% от височината на браузъра. Звездичката след запетаята указва, че цялото останало пространство (70%) може да се заеме от долния хоризонтален фрейм.
Същата стойност е зададена и на атрибута cols, което означава, че 30% от ширината на прозореца на браузъра са запазени за първата колона (левия вертикален фрейм), а останалото пространство може да се заеме от десния вертикален фрейм.

Стойностите на атрибутите cols и rows могат да се зададат и по друг начин. Ако напишем например „30%,70%“ – това няма да е грешка. Освен относителни стойности тези атрибути могат да приемат и абсолютни – например ако напишем cols=“200,*“, това ще означава, че на левия фрейм се отреждат 200 пиксела пространство, а останалото ще бъде заето от десния фрейм.

Тага <frameset> притежава затварящ таг </frameset>.

2. Тагът frame изпълнява функцията да „извиква“ съответния HTML-документ на нужното място. Това става чрез включването на атрибута src, на който му се задава адреса на нужната HTML-страница. В нашия пример, веднага след frameset rows=“30%,*“ следва тага frame, който чрез атрибута src извиква HTML-страницата top.html.
Внимание! Още веднъж да подчертаем – за да бъде извикана страницата top.html, тя трябва да е предварително създадена. Само така тя ще може да се появи в горния фрейм на нашата фреймова индекс-страница. Същото важи и за останалите две страници – left.html и right.html, които се появяват съответно вляво и вдясно. Тези страници се създават предварително като обикновени HTML-документи – с HEAD и BODY секции.

Тага frame няма затварящ таг, но според изискванията на XHTM в края преди затварящата скоба се изписва затваряща наклонена на дясно черта.

Последния атрибут от нашия пример – name – в случая не е задължителен за употреба, но е препоръчително да го използвате винаги, защото ако решите, чрез него и с помощта на атрибута target може да зареждате HTML-документ, който да се появи във фрейм, където се е съдържал преди това друг HTML-документ. Как става това е обяснено по-долу.

ПРИМЕРИ ЗА ФРЕЙМОВИ СТРАНИЦИ

По-долу следват още няколко примера за най-често използваните фреймове.

Страница с ляв, горен и долен фрейм:

<html>
<head>
<title>Пример за фреймова страница №2</title>
</head>

<frameset cols=“30%,*“>
<frame src=“left.html“ name=“left“ />
<frameset rows=“30%,*“>
<frame src=“top.html“ name=“top“ />
<frame src=“bottom.html“ name=“bottom“ />
</frameset>
</frameset>

</html>

Вид на страницата от пример №2:

Страница с горен и долен фрейм:

<html>
<head>
<title>Пример за фреймова страница №3</title>
</head>

<frameset rows=“30%,*“>
<frame src=“top.html“ name=“top“ />
<frame src=“bottom.html“ name=“bottom“ />
</frameset>

</html>

Вид на страницата от пример №3:

Страница с ляв и десен фрейм:

<html>
<head>
<title>Пример за фреймова страница №4</title>
</head>

<frameset cols=“30%,*“>
<frame src=“left.html“ name=“left“ />
<frame src=“right.html“ name=“right“ />
</frameset>

</html>

Вид на страницата от пример №4:

ДОПЪЛНИТЕЛНИ АТРИБУТИ НА СТРАНИЦИТЕ ЗА ФРЕЙМОВЕ

Освен разгледаните вече атрибути на таговете за изграждане на фреймове, съществуват и още няколко атрибута:

1. Във всички горни примери рамките на фреймовете са видими на екрана и представляват граници, оцветени в сиво. Ако желаете да премахнете тези граници трябва да използвате атрибута frameborder или атрибута border, като им зададете стойност „0“. Атрибута frameborder се използва в тага frame, а атрибута border – в тага frameset. Не е грешка, ако зададете едновременно и двата атрибута – например така:

<html>
<head>
<title>Пример за фреймова страница №5</title>
</head>

<frameset rows=“30%,*“ border=“0″>
<frame src=“top.html“ name=“top“ frameborder=“0″ />
<frameset cols=“30%,*“ border=“0″>
<frame src=“left.html“ name=“left“ frameborder=“0″ />
<frame src=“right.html“ name=“right“ frameborder=“0″ />
</frameset>
</frameset>

</html>

Вид на страницата от пример №5:

2. Ако отворите някоя от примерните фреймови страници, на които границите на фреймовете се виждат, и поставите кърсъра върху някоя от границите, ще забележите, че кърсъра се превръща в двойна стрелка. Ако в този момент натиснете левия клавиш на мишката и започнете да „влачите“ с нея, ще забележите, че границите на фрейма се движат заедно с кърсъра. Т.е. посетителите на вашата страница могат да променят границите на вашите фреймове. Ако желаете да застопорите границите на фреймовете, трябва да използвате атрибута noresize, като го вложите в тага frame:

<frame src=“some-page.html“ name=“some-page“ noresize=“noresize“ />

Тага noresize няма стойност в HTML, но според изисванията на XHTML му се задава като стойност собственото му название.

3. Ако страницата в някой от фреймовете ви е дълга, на екрана ще се появи лента за превъртане, за да могат посетителите ви чрез превъртане да видят цялото съдържание на страницата. HTML дава възможност за контрол върху изобразяването на лентите за превъртане чрез атрибута scrolling на тага frame. Атрибута scrolling може да приема 3 стойности – стойност „auto“ задава автоматичната поява на лента за превъртане, ако това стане необходимо /дори и да не зададете изрично тази стойност, тя се включва по подразбиране/. Стойностите „yes“ и „no“ задават съответно при всички случаи да се изобразява лента за скролиране и никога да не се показва такава лента. Например следния код

<frame src=“some-page.html“ name=“some-page“ scrolling=“yes“ />

дава указание на браузъра винаги да изобразява лента за превъртане.

4. HTML дава възможност за контрол и върху разположението на текста и графиките във фреймовете. Това става чрез атрибутите marginwidth и marginheight, които се разполагат в тага frame. Тага marginwidth задава в пиксели празно поле отляво и отдясно на текста и графиките във фрейма. Тага marginheight задава в пиксели празно поле отгоре и отдолу на текста и графиките във фрейма.

5. По подразбиране цвета на границите на фреймовете е сив. Този цвят може да се промени ако използвате атрибута bordercolor в тага frame и му зададете като стойност някакъв цвят. Например следния код

<frame src=“some-page.html“ name=“some-page“ bordercolor=“#ff0000″ />

ще зададе на границите на фрейма червен цвят. Не забравяйте, че ако използвате този атрибут, не бива да задавате на атрибутите frameborder и border стойност „0“.

6. noframes не е атрибут на тага frame или на тага frameset, а е специален отделен таг, предназначен за браузърите, които не поддържат фреймове.

Не всички браузъри могат да показват фреймове. Това важи особено за по-стари браузъри, тъй като фреймовете са сравнително нов инструмент на езика HTML. Ако потребител с такъв браузър отвори вашата фреймова страница, той няма да види нищо. Специално за такива потребители се оставя съобщение, което обикновено съдържа текст подобен на следния: „Това е фреймова страница, но вашия браузър не поддържа фреймове. Изтеглете си новата версия на браузъра, за да видите страницата“. Може специално за такива потребители да направите вариант на същата страница без фреймове и да оставите съобщение, съдържащо връзка към тази страница.

Всички тези предупредителни съобщения и връзки към безфреймови страници трябва да се разположат между таговете <noframes> и </noframes>. Само в такъв случай потребителите със стари браузъри ще видят вашето предупредително съобщение.

Таговете <noframes> и </noframes> се разполагат между <frameset> таговете, например може да ги сложите между последния таг <frame> и първия затварящ таг </frameset>:

<html>
<head>
<title>
Пример за фреймова страница с предупредително съобщение за браузъри, неподдържащи фреймове
</title>
</head>

<frameset rows=“30%,*“>
<frame src=“top.html“ name=“top“ />
<frameset cols=“30%,*“>
<frame src=“left.html“ name=“left“ />
<frame src=“right.html“ name=“right“ />

<noframes>
Това е фреймова страница, но вашия браузър не поддържа фреймове. Изтеглете си по-нова версия на браузъра, за да видите страницата.
</noframes>

</frameset>
</frameset>

</html>

!ВНИМАНИЕ: Ако искате да валидирате страница с фреймове трябва да зададете !DOCTYPE Frameset DTD. Имайте предвид, че тага noframes не разрешен в XHTML 1.0 Strict DTD.

НАСОЧВАНЕ НА СТРАНИЦА КЪМ ФРЕЙМ ЧРЕЗ АТРИБУТА TARGET

Фреймовете много често се използват в следния вид – вляво или вдясно се показва фрейм, който съдържа връзки. Когато се кликне върху тях, съответната страница се появява в централния фрейм на страницата. Този ефект се постига чрез използване на атрибута target.

Има една важна особеност – за да бъдете в състояние да ползвате target, предварително трябва да сте наименовали съответните страници чрез атрибута name, както това е направено във всички горни примери.

Пример:

Нека направим една фреймова страница с горен, ляв и десен фрейм. Нека в левия фрейм да разположим страницата leftmenu.html

Нека десния фрейм да бъде страницата right.html, като за удобство я наименоваме „right“. /Наименованието на страниците в атрибута name може да бъде всякакво. Тук имената са същите като на HTML-документа само за удобство./

Кода на индексовата фреймова страницата ще изглежда така:

<html>
<head>
<title>Пример за фреймова страница с връзки /ляво меню/</title>
</head>

<frameset rows=“30%,*“>
<frame src=“top.html“ name=“top“ />
<frameset cols=“30%,*“>
<frame src=“leftmenu.html“ name=“leftmenu“ />
<frame src=“right.html“ name=“right“ />
</frameset>
</frameset>

</html>

Вече беше обяснено, че за да се появят страници в горния, левия и десния фрейм, те трябва предварително да са създадени като обикновени HTML-страници.

За гония и десния фрейм създаваме такива страници. Страницата в левия фрейм обаче трябва да съдържа нашето меню, чиито връзки ще водят към десния фрейм. За да се получи този ефект е нужно в тага за връзки (a href=…) да се включи атрибута target и да му се зададе стойност „right“. Зададената стойност трябва да бъде именно right, тъй като това е наименованието, което сме дали на фрейма, в който ще се появяват „извиканите“ HTML-страници.

Нека да направим обикновена страница right.html с 3 връзки, които да водят съответно към началните страници на Yahoo, на Google и на Host.bg

Кода за тези връзки трябва да изглежда така:

<a href=“https://www.yahoo.com“ target=“right“>Yahoo</a>
<a href=“https://www.google.com“ target=“right“>Google</a>
<a href=“https://www.host.bg“ target=“right“>Host.bg</a>

Вид на фреймовата страница с връзки (ляво меню):

ПОКАЗВАНЕ НА HTML СТРАНИЦА В „ПЛАВАЩ“ ФРЕЙМ

HTML има и още една възможност за показване на фреймове, която обаче се поддържа само от браузъра на Microsoft – Internet Explorer. Вероятно по-късните версии на останалите браузъри също ще поддържат този вид фреймове.

Новия вид фрейм се нарича „плаващ“ фрейм и се въвежда в HTML-страницата чрез тага iframe. Този таг построява прозорец вътре в самата HTML-страница, в който може да се покаже друга HTML-страница. Можем да зададем този прозорец да се появи където и да е на страницата и да покаже която и да е друга страница в интернет или от нашия сайт.
Ето примерния HTML-код за страница с плаващ фрейм:

<html>
<head>
<title>Пример за плаващ фрейм</title>
<META http-equiv=Content-Type content=“text/html; charset=windows-1251″ />
</head>
<body bgcolor=“#ffffff“ text=“#000000″>
<div align=“center“>
<font face=“arial“ size=“4″>Пример за плаващ фрейм</font>
</div>

<iframe src=“https://www.host.bg“ name=“index“ width=“400″ heifht=“300″ align=“center“>
</iframe>

</body>
</html>

Вид на страницата с плаващ фрейм:

В горния пример сме задали тага iframe да изгради прозорец, в който да се покаже началната страница на Host.bg – чрез атрибута src, на който е зададен като стойност адреса на страницата.

Чрез атрибутите width и height е зададен в пиксели размера на прозореца /в случая – 400/300 пиксела/, а чрез атрибута align – положението на прозореца в HTML-страницата, като възможните стойности са left, right, center, top, bottom и middle /в примера прозореца е центриран, понеже на align е зададена стойност center/.

На плаващия фрейм е дадено името „index“ – то е зададено като стойност на атрибута name. Ако на същата страница направим някаква хипервръзка, например към страницата на Yahoo, и чрез атрибута target зададем насочване към нашия плаващ фрейм /target=“index“/, то при кликване върху връзката страницата на Yahoo ще се появи в прозореца на плаващия фрейм. Кода за хипервръзката ще изглежда така:

<a href=“https://www.yahoo.com“ target=“index“> Връзка, насочена към плаващия фрейм </a>

Освен посочените атрибути, на тага iframe могат да се зададат още:

– атрибута frameborder, който може да приеме стойности 1 или 0 и при зададена стойност 0 скрива рамките на плаващия фрейм;

– атрибута scrolling, който определя дали плаващия фрейм ще има ленти за превъртане и може да приема стойности auto, yes или no.

– атрибутите marginheight и marginwidth, чрез които в пиксели се задават съответно горната и долната/лявата и дясната граница на iframe.