Tutorial HTML - Frame-uri



Frame-urile sunt folosite pentru a afisa mai multe documente .html intro fereastra. Aceata inseamna ca vei avea o pagina fara continut, care va avea rolut de a indica browser-ului ce pagini trebuie sa afiseze. Odata cu introducerea PHP si CSS aceasta tehnica a fost inlaturata putin cate putin, ajungand sa se foloseasca foarte putin.


HTML - Frames, Pagina Generica

In general frame-urile se folosesc pentru a afisa un meniu pe de o parte iar continutul pe de o alta parte. Atunci cand cineva da un clik pe un link din meniu se va deschide o alta pagina in partea de continut. Vom exempifica toate acestea cu ajutorul codului urmator:

<html> <head></head>

<frameset cols="30%,*">

<frame src="menu.html">

<frame src="content.html">

</frameset>

</html>

Vizualizare

Vizualizeaza acest exemplu intr-o fereastra noua.

- frameset - Este tagul care stabileste caracteristicile frame-ului. Frame-urile individuale vor fi definite i nauntrul lui.
- frameset cols="#%, *"- "Cols" stabileste inaltime pe care fiecareframe o va avea. In exemplul anterion am stabilit ca primul frame (meniul) va ocupa 30% din suprafata afisata, si am folosit semnul " * " pentru a indica browser-ului ca in restul paginii ramase se va afisa continutul paginii.
- frame src="" - adresa fisierelor care vor fi afisate ca meniu si respectiv continut.


HTML - Frame- Adaugarea unui banner sau Titlu

Folositi codul urmator:

<html><head></head>

<frameset rows="20%,*">

<frame src="title.html">

<frameset cols="30%,*">

<frame src="menu.html">

<frame src="content.html">

</frameset> </html>

frameset rows="#%, *"- "rows" stabileste inaltimea fiecarui frame care va fi afisat. In exemplul anterior am ales ca primul frame va fi 20% iar restul de spatiu ramas va fi impartit intre menu.html si content.html.


HTML - Frame - Margine si Spatiere

Probabil ai observat ca intera frame-uri raman niste linii gri care de multe ori nu sunt dorite. Inlaturarea lor este posibila cu ajutorul frameborder si framespaciing. Aceste atribute vor fi introduse innauntru tag-ului frameset.

**Nota: In realitate frameset si frameborder este acelasi atribut. Exista insa browsere care nu recunosc decat unul dintre cele doua. Deaceia, sfatul nostru, este sa le folositi pe amandoua pentru mai multa siguranta.

frameborder="#" - Valoarea 0 nu reproduce margine.
- border="#"- modifica grosimea marginii. (folosit de netscape)
- framespacing="#" - modifica grosimea marginii (folosit de Internet Explorer)

Iata si un exemplu practic:

<html><head></head>

<frameset border="0" frameborder="0" framespacing="0" rows="20%,*">

<frame src="title.html">

<frameset border="0" frameborder="0" framespacing="0" cols="30%,*">

<frame src="menu.html">

<frame src="content.html"> </frameset> </html>


HTML - "frame name" si "frame target"

Pentru a menitine meniul in pozitia actuala iar cand executam clic pe pagina de contact de exemplu sa se deschida in locul pagini de continut, vom da un nume fiecarui frame si vom precisa locul unde se va deschide cu ajutorul base target.

Iata si codul pentru pagina noastra

<html><head>

<base target="content">

</head>

<frameset rows="20%,*">

<frame name="title" src="title.html">

<frameset cols="30%,*">

<frame name="menu" src="menu.html">

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

</frameset>

</html>

Noresize si scrolling

Frame-ul se mai poate personaliza inca putin folosind atributele neresize si scrolling.

<html><head></head>

<frameset border="2" frameborder="1" framespacing="2" rows="20%,*">

<frame src="title.html" noresize scrolling="no">

<frameset border="4" frameborder="1" framespacing="4" cols="30%,*">

<frame src="menu.html" scrolling="auto" noresize>

<frame src="content.html" scrolling="yes" noresize>

</frameset> </html>

- no resize - nu lasa ca framul sa se redimensioneze in functie de monutorul vizitatorului
- scrolling="(yes/no)"- permite sau nu sroll-ul intr-un frame


Tutorialul HTML anterior
Tutorialul HTML urmator



Comentarii


   hagen

foarte bun tutorialul despre frame-uri.. dar as avea nevoie de unul despre iframe..cum se foloseste, atribute si toate cele...merci
05-Jun-2009 - 19:19


   catalin

cat de curand voi publica si un tutorial despre iframe...il am deja facut dar nu am avut timp sa il public... voi incerca sa public tutorialul despre iframe pe saptamana care vine...mai intra din cand in cand, poate totusi il pun mai inainte
05-Jun-2009 - 19:34


   Alexandru

Am si eu 2 intrebari legat de "munca" cu frame-uri:

1. Vreau sa fac un singur frame in mijlocul paginii. Daca il fac cu structura clasica explicata mai sus, lungimea lui va fi limitata la inaltimea ecranului, iar daca textul este mai lung, va aparea o bara in dreapta frame-ului. Cum fac ca sa nu mai fie limtata aceasta lungime, iar bara de derulare sa nu apara langa frame, sa apara in marginea dreapta a browser-ului?

2. Cum fac ca atunci cand apas pe un link intr-un frame, sa se deschida pagina in alt frame, nu in frame-ul cu link-ul?
19-Sep-2009 - 13:42


   cristi

eu asta nu am inteleso deloc cu frameurile astea...cine poate sa ma ajute sa bage idu ko_cristi_16
23-Jan-2010 - 14:50


   catalin

sincer nu am inteles nici eu...care este rolul lor? de ce trebuie sa fie mai multe ferestre intr-una...cu ce ma ajuta?
va rog ...
va multumesc!
10-Mar-2010 - 13:15


   catalin

@cristi , @catalin
Framurile nu se mai folosesc de ceva timp incoace. Se vor scoate cat de curand. De fapt in HTML 5 nici nu mai sunt. Cu alte cuvinte puteti trece peste acest capitol. Voiam sa il sterg acum ceva timp dar m-am gandit ca de fapt, cam toate tutoriale au fost facute pentru HTML 4.1 desi cu mici exceptii sunt aplicabile si la celelalte versiuni.
10-Mar-2010 - 17:55


   Catalin

eee..chair sunt inteligent..mi-am dat eu seama ca ceva nu e in regula cu astea :)) daca si cei de la HTML..l-au scos.oricum tutorialul e pe gustul meu...bravo !!! invat de 2 saptamani si chiar am invatat, va multumesc pentru asta. am zis ca dupa ce il invat pe asta trec la java scrpit si dupa ala o iau pe programare C++.Sfaturi ceva? va multumesc mult si va iubesc!
10-Mar-2010 - 18:25


   SmS

Mersi ... m-ai ajutat :)
17-Jan-2011 - 11:17

1    


Trimite un comentariu!

Nume *
E-mail *
Vreau sa fiu anuntat de urmatoarele mesaje la acest articol
Comentariu *

Security image