Сигурно често сте виждали страници, които са разделени на отделни части. В езика HTML те се наричат рамки (frames) или фреймове. Разделянето на фреймове позволява да се показва различен html документ във всяка рамка, както и хиперлинкове от една рамка да се показват в друга. За да направите страница с рамки, трябва да създадете отделен html документ, чиято функция е да раздели страницата, да укаже в коя рамка кой друг html документ да се показва, да зададе хиперлинковете от една рамка да се показват в друга. Този html документ е по-различен от другите. Например тялото <BODY> при него е заменено с <FRAMESET>. Вижте един такъв html документ, който разделя страницата на 2 еднакви хоризонтални рамки. В първата рамка се показва страницата 1.html а във втората 2.html. Направете си две HTML страници (1.html и 2.html) с произволно съдържание и в трета копирайте долния код.
<HTML>
<HEAD>
<TITLE>рамки</TITLE>
</HEAD>
<FRAMESET ROWS=“50%,50%“>
<FRAME NAME=“first“ SRC=“1.html“>
<FRAME NAME=“second“ SRC=2.html“>
</FRAMESET>
</HTML>
- Разделянето се задава от елемента <FRAMESET>. Той има 2 атрибута, ROWS и COLS. Първият задава хоризонтално разделяне, а вторият вертикално. Атрибутите ROWS и COLS имат параметри за височина и ширина на рамката, които могат да се задават по три начина – в процент от размера на прозореца (при него след числото задължително се слага знака за процент %); в абсолютни единици – пиксели, които се задават само с число без никакъв знак отзад (например ROWS=“200,300″ разделя прозореца на 2 части, едната с височина 200 пиксела а другата 300) и задаване на относителна стойност със знака звездичка * (например ROWS=“*,3*“означава, че прозореца се разделя на две части, втората от които е три пъти по-голяма от първата). Параметрите се разделят със запетая и са заградени в кавички.
- По-долу е представена една такава страница. Тя е разделена вертикално на 3 части, (първата има ширина 100 пиксела, втората 30 процента от ширината на прозореца на браузъра, а третата заема всичкото свободно пространство, независимо колко е то). Понеже няма никакво съдържание в тях – страниците ще са празни:
<HTML>
<HEAD>
<TITLE>рамки</TITLE>
</HEAD>
<FRAMESET COLS=“100,30%,*“>
<FRAME NAME=“first“ >
<FRAME NAME=“second“>
<FRAME NAME=“third“>
</FRAMESET>
</HTML>
- Всяка рамка се създава с елемента <FRAME>. Чрез него се задават атрибутите на рамката. Един от тях е името й чрез атрибута NAME.
- Друг атрибут на <FRAME> е SRC, следван от името на страницата, която искате да се показва в тази рамка. Ако обърнахте внимание, след като страртирахте страницата в горния пример, всяка рамка си има ръб (border). Посочете с курсора на мишката върху ръба, кликнете върху него и докато държите натиснат бутона влачете мишката перпендикулярно на ръба, ще наблюдавате как размера на рамката се променя. Можете да забраните това с атрибура NORESIZE на елемента <FRAME>. Също така можете да зададете дебелината на ръба в пиксели с атрибута BORDER и цвета му с BORDERCOLOR на елемента <FRAMESET>.
- Нека направим предишния пример така, че да забраним промяната на размера на рамката и да направим ръба със син цвят и широк 6 пиксела.
<HTML>
<HEAD>
<TITLE>рамки</TITLE>
</HEAD>
<FRAMESET COLS=“100,30%,*“ BORDER=“6″ BORDERCOLOR=“0000FF“>
<FRAME NAME=“first“ NORESIZE>
<FRAME NAME=“second“ NORESIZE>
<FRAME NAME=“third“ NORESIZE>
</FRAMESET>
</HTML>
- Ако зададете BORDER=“0″ ръба на рамката няма да се вижда. Можете да задавате ширината и цвета на ръба на всяка рамка поотделно. Ширината се задава с атрибута FRAMEBORDER на елемента <FRAME>, а цвета с BORDERCOLOR.
- Рамките могат да се влагат една в друга. Например, можете да разделите страницата на две части хоризонтално, а долната част да разделите на още 2 и т.н.. Вижте как става:
<HTML>
<HEAD>
<TITLE>рамки</TITLE>
</HEAD>
<FRAMESET ROWS=“100,*“ >
<FRAME NAME=“first“ NORESIZE>
<FRAMESET COLS=“20%,80%“>
<FRAME NAME=“second“ NORESIZE>
<FRAME NAME=“third“ NORESIZE>
</FRAMESET>
</FRAMESET>
</HTML>
- Така горната рамка е по цялата дължина на прозореца на браузъра и има ширина 100 пиксела, а долната е разделена на две вертикални части, съответно на 20 и 80 процента от ширината на прозореца. Ако искате можете да разделите страницата първо вертикално на две, като втората рамка я разделяте допълнително на две хоризонтални рамки:
<HTML>
<HEAD>
<TITLE>рамки</TITLE>
</HEAD>
<FRAMESET COLS=“100,*“ >
<FRAME NAME=“first“ NORESIZE>
<FRAMESET ROWS=“20%,80%“>
<FRAME NAME=“second“ NORESIZE>
<FRAME NAME=“third“ NORESIZE>
</FRAMESET>
</FRAMESET>
</HTML>
- Сега нека направим една наистина работеща страница с рамки. Нека страницата да бъде от две рамки. Първата да се казва „menu“ и да съдържа хиперлинкове до известни български сайтове. Втората рамка с име „main“ ще бъде празна, като линковете от първата ще се показват във втората. За целта първо трябва да направим html документа който да се показва в първата рамка :
<HTML>
<HEAD>
<TITLE>menu</TITLE>
</HEAD>
<BODY>
<A HREF=“http://www.search.bg“>search.bg</A><BR>
<A HREF=“http://www.dir.bg“>dir.bg</A><BR>
<A HREF=“http://www.gyuvetc.bg“>гювеч.бг</A>
</BODY>
</HTML>
- Запазете този файл като menu.html. Неговата функция е да ни препраща към сайтовете при кликване върху надписите search.bg , dir.bg и гювеч.бг . Този html документ ще се визуализира в лявата рамка. Дясната рамка първоначално ще я оставим празна. Нека сега да направим html документа който да раздели страницата на рамки :
<HTML>
<HEAD>
<TITLE>frame</TITLE>
</HEAD>
<FRAMESET COLS=“100,*“ BORDER=“0″>
<FRAME NAME=“menu“ SRC=“menu.html“ TARGET=“main“>
<FRAME NAME=“main“>
</FRAMESET>
</HTML>
- Този html документ го запазете като frame.html. Чрез него разделяме страницата на две рамки вертикално. Едната е широка 100 пиксела, а втората заема останалата част от прозореца на браузъра. В първата рамка сме задали да се покаже файлът menu.html, който направихме за тази цел по-горе. На тази рамка сме дали името „menu“. Новото тук е атрибута <TARGET> на елемента <FRAME>. който показва на браузъра в коя точно рамка да се отварят хиперлинковете, които съдържа страницата в тази рамка. На втората рамка сме дали име „main“ и атрибута <TARGET> от първата рамка, който сочи именно към втората.
- Понеже сме забранили да се показва ръба на рамките (BORDER=“0″), тази страница ще изглежда сякаш няма рамки. Когато кликнете върху някой от хиперлинковете обаче, в дясната част на страницата (т.е. във втората рамка) ще се отваря съответния сайт.
- Ако страницата която се отваря в рамката е по-голяма от размера на самата рамка, браузъра по подразбиране показва хоризонтален или вертикален плъзгач (scrollbar) с помощта на който можете да разглеждате цялата страница. Този плъзгач излиза в дясната или долната част от рамката, или и в двете в зависимост от големината на страницата. Вие можете да определите дали този плъзгач да се показва или не с атрибута SCROLLING на елемента <FRAME>.
- Този атрибут от своя страна има три параметъра. SCROLLING=“yes“ задължава рамката винаги да показва плъзгачите, независимо дали са нужни или не. SCROLLING=“no“ забранява показването им във всички случаи. Тази забрана обаче би била много неудобна ако страницата е по голяма от рамката, защото няма да можете да я видите цялата. SCROLLING=“auto“ е стойността по подразбиране. С параметър „auto“ плъзгачите се показват само когато има нужда от тях. Сега нека направим една страница с две рамки. И в двете да се показва сайта на search.bg, само че в първата плъзгачите да са забранени, а във втората да се показват задължително.
<HTML>
<HEAD>
<TITLE>frame</TITLE>
</HEAD>
<FRAMESET COLS=“50%,50%“>
<FRAME NAME=“search1″ SRC=“http://www.search.bg“ SCROLLING=“no“>
<FRAME NAME=“search2″ SRC=“http://www.search.bg“ SCROLLING=“yes“>
</FRAMESET>
</HTML>
HTML, CSS, JS 