Помогни ни да направим Uroci.net по - богат! Добави урок

Как да си направите първия сайт

uBaH4y   трудност:    видян: 97415



РАМКИ

Сигурно често сте виждали страници, които са разделени на отделни части. Такива части в езика HTML се наричат рамки(frames) или фреймове, ако предпочитате. Разделянето на рамки позволява да се показва различен html документ във всяка рамка, както и хиперлинкове от една рамка да се показват в друга. За да направите страница с рамки, трябва да създадете отделен html документ, чиято функция е да раздели страницата, да укаже в коя рамка кой друг html документ да се показва, да зададе хиперлинковете от една рамка да се показват в друга. Този html документ е по-различен от другите. Например тялото <BODY> при него е заменено с <FRAMESET>. Вижте един такъв html документ, който разделя страницата на 2 еднакви хоризонтални рамки. В първата рамка се показва страницата 1.html а във втората 2.html.

<HEAD>
<TITLE>рамки</TITLE>
</HEAD>
<FRAMESET ROWS="50%,50%">
<FRAME NAME="first" xsrc="1.html">
<FRAME NAME="second" xsrc=2.html">
</FRAMESET>


Разделянето се задава от елемента <FRAMESET>. Той има 2 атрибута, ROWS и COLS. Първия задава хоризонтално разделяне, втория вертикално. Атрибутите ROWS и COLS имат параметри за височина и ширина на рамката. Параметрите могат да се задават по три начина. Първия е в процент от размера на прозореца, при него след числото задължително се слага знака за процент %. В горния пример се ползва точно такова разделяне. Втория начин е в абсолютни единици - пиксели. Те се задават само с число без никакъв знак отзад. Например ROWS="200,300" разделя прозореца на 2 части, едната с височина 200 пиксела а другата 300. Третия начин е да се зададат относителни стойност. За целта се използва знака звездичка *. Например ROWS="*,3*"означава, че прозореца се разделя на две части, втората от които е три пъти по-голяма от първата. Параметрите се разделят със запетая и са заградени в кавички. Сега ще ви направя една такава страница, ще я разделя вертикално на 3 части, първата ще има ширина 100 пиксела, втората 30 процента от ширината на прозореца на браузъра, а третата ще заема всичкото свободно пространство, независимо колко е то. Понеже няма да задам да се отварят други страници във всяка рамка, те ще бъдат празни:

<HEAD>
<TITLE>рамки</TITLE>
</HEAD>
<FRAMESET COLS="100,30%,*">
<FRAME NAME="first">
<FRAME NAME="second">
<FRAME NAME="third">
</FRAMESET>


Всяка рамка се създава с елемента <FRAME>. Чрез него се задават атрибутите на рамката. Един от тях е името и чрез атрибута NAME. Как се използва името ще обясня след малко. Друг атрибут на <FRAME> е SRC, следван от името на страницата която искате да се показва в тази рамка. Ако посочите с курсора на мишката върху ръба, кликнете върху него и докато държите натиснат бутона влачите мишката перпендикулярно на ръба, то размера на рамката се променя. Можете да забраните това с атрибута NORESIZE на елемента <FRAME>. Също така можете да зададете дебелината на ръба в пиксели с атрибута BORDER и цвета му с BORDERCOLOR на елемента <FRAMESET>. Нека направим предишния пример така, че да забраним промяната на размера на рамката и да направим ръба със син цвят и широк 6 пиксела.

<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>


Ако зададете BORDER="0" ръба на рамката няма да се вижда. Можете да задавате ширината и цвета на ръба на всяка рамка поотделно. Ширината се задава с атрибута FRAMEBORDER на елемента <FRAME>, а цвета с BORDERCOLOR. Рамките могат да се влагат една в друга. Например, можете да разделите страницата на две части хоризонтално, а долната част да разделите на още 2 и т.н.. Вижте как става:

<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>


Така горната рамка е по цялата дължина на прозореца на браузъра и има ширина 100 пиксела, а долната е разделена на две вертикални части, съответно на 20 и 80 процента от ширината на прозореца. Ако искате можете да разделите страницата първо вертикално на две, като втората рамка я разделяте допълнително на две хоризонтални рамки:

<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>


Сега нека направим една наистина работеща страница с рамки. Нека страницата да бъде от две рамки. Първата да се казва "menu" и да съдържа хиперлинкове до известни български сайтове. Втората рамка с име "main" ще бъде празна, като линковете от първата ще се показват във втората. За целта първо трябва да направим html документа който да се показва в първата рамка:

<HEAD>
<TITLE>menu</TITLE>
</HEAD>
<BODY>
<A xhref="http://ViSsY.hit.bg">#ViSsY</A><BR>
<A xhref="http://www.dir.bg">dir.bg</A><BR>
<A xhref="http://www.gyuvetc.bg">гювеч.бг</A>
</BODY>


Запазете този файл като menu.html. Неговата функция е да ни препраща към сайтовете при кликване върху надписите #ViSsY, dir.bg и гювеч.бг. Този html документ ще се визуализира в лявата рамка. Дясната рамка първоначално ще я оставим празна. Нека сега да направим html документа който да раздели страницата на рамки:

<HEAD>
<TITLE>frame</TITLE>
</HEAD>
<FRAMESET COLS="100,*" BORDER="0">
<FRAME NAME="menu" xsrc="menu.html" TARGET="main">
<FRAME NAME="main">
</FRAMESET>


Този html документ го запазете като frame.html. Чрез него разделяме страницата на две рамки вертикално. Едната е широка 100 пиксела, а втората заема останалата част от прозореца на браузъра. В първата рамка сме задали да се покаже файлът menu.html който направихме за тази цел по-горе. На тази рамка сме дали името "menu". Новото тук е атрибута <TARGET> на елемента <FRAME>. този атрибут показва на браузъра в коя точно рамка да се отварят хиперлинковете, които съдържа страницата в тази рамка. В този случай на втората рамка сме дали име "main" и атрибута <TARGET> от първата рамка сочи именно към втората.

Понеже сме забранили да се показва ръба на рамките (BORDER="0"), тази страница ще изглежда сякаш няма рамки. Когато кликнете върху някой от хиперлинковете обаче, в дясната част на страницата (т.е. във втората рамка) ще се отваря съответния сайт. Ако страницата която се отваря в рамката е по-голяма от размера на самата рамка, браузъра по подразбиране показва хоризонтален или вертикален плъзгач (scrollbar) с помощта на който можете да разглеждате цялата страница. Този плъзгач излиза в дясната или долната част от рамката, или и в двете в зависимост от големината на страницата. Вие можете да определите дали този плъзгач да се показва или не с атрибута SCROLLING на елемента <FRAME>. Този атрибут от своя страна има три параметъра. SCROLLING="yes" задължава рамката винаги да показва плъзгачите, независимо дали са нужни или не. SCROLLING="no" забранява показването им във всички случаи. Тази забрана обаче би била много неудобна ако страницата е по голяма от рамката, защото няма да можете да я видите цялата. SCROLLING="auto" е стойността по подразбиране. С параметър "auto" плъзгачите се показват само когато има нужда от тях.



Страници: «2 3 4 5

Сподели урока:



Коментари (20)

DarkManX на 01.12 2006 в 13:33ч.
Тва е полезно.
tishomircho на 14.12 2006 в 11:58ч.
полезна информацийка.
uBaH4y на 06.01 2007 в 18:46ч.
Мдам Много полезно добро е за конкурса
azerot на 06.01 2007 в 21:27ч.
това е остаряла информация и плюс това е преписана
petarstoev на 10.01 2007 в 21:15ч.
ае Вие няма ли да спрете с тва е ти ли си автора на оригинала за някой нее стара ...
charmed на 30.01 2007 в 21:27ч.
А, как се прави така, че да се оразмерава сайта в зависимост от резолюцията на екрана на потребителя? В смисъл ако е с по голяма да се овеличават снимките, кекстовете, ... или обратно ако е с по ниска. Май е с таблците, но не разбрах как. Мерси предварително
palq4o на 25.02 2007 в 01:01ч.
Мерси за урока!
VeNuM® на 12.05 2007 в 16:40ч.
Защо не ми стават песните и линковете?
Моля ви помгнете!
jorkata_95 на 12.06 2007 в 22:56ч.
А като няправя този сайт как мога да го публикувам в интернет или той сам се публикува?
jorkata_95 на 13.06 2007 в 17:02ч.
как?
kikolo1 на 09.04 2008 в 13:17ч.
за да се публикува сайта е нужна FTP програма.
linkolin на 17.04 2008 в 18:13ч.
ами аз имам малък проблем:губи ми се нещо в началото!тва за цветовете каде да го напиша в нов нотепад или в промяната на първия ми сайт??? плс пишете! ;)
krasimircho на 19.07 2008 в 16:11ч.
А БЕ АЗ НИЩО НЕ РАЗБРАХ! АЗ СЪМ НАПРАВИЛ САЙТА, НО НА ПАРЧЕТА КАК ДА ГО СЪЕДИНЯ?
rufi на 26.07 2008 в 09:27ч.
В моя Ноутпад българския език излиза,,като точици ,,,
pafel4y на 17.08 2008 в 17:19ч.
rufi ми смени си стилът на шрифтът :) напрмиер на Arial или пък на Comic Sans MS аз поне и на двата съм бил и си става всичко :)
krimunal на 24.10 2008 в 11:44ч.
плс кажете ми как да се суедини саита и да стане едно и как да се качи пишете моля ви !!!
zarov2 на 10.12 2008 в 22:46ч.
много е зле....
с 2 думи нямам думи :Д
езикът не става хипер линковете също .. както и снимките (и снимки с хиперлинкове)
вече горе долу се научих как става но не от тук!
това което научих от тук е че трябва да има / и това е сичко...
wowmanqk96 на 08.07 2009 в 13:56ч.
ако може и да направим един сайт с рег система с сичко ъплоад до 1 гб ше е супер аз ако знаех ше хвана напиша една тема :) ама нз аре плс направете една тема
charmed на 16.08 2009 в 17:16ч.
Значи в този урок има 2 основни грешки, а именно: Пропуснати са мета таговете без който надписи на кирилица ще стават нечетливи и това тук не е HTML, а XHTML който не се чете от всички браузъри за това и на доста хора не им работят работите. От хипер линка махнете x от xsrc и ще ми работи както и на други места има излишно x което прави таговете безполезни в доста от случайте.
pufi на 02.10 2009 в 11:11ч.
добре де...нищо не става....как да го разширя на това което пише...егати скапания урок

Регистрирайте се, за да добавите коментар


Калдейта Ком ЕООД - © 2003-. Всички права запазени.
Препоръчваме: IT Новини