Vom folosi un tag nou: <FRAMESET> care este insotit de unul din atributele <COLS> sau <ROWS>, cols pentru cadre verticale si rows pentru cadre orizontale.
Pentru a imparti pagina web in mai multe cadre orizontale, se vor asocia mai multe procente atributului ROWS, dar suma lor nu trebuie sa depaseasca 100%.
La fel se procedeaza si pentru impartirea unei pagini in cadre verticale numai ca se foloseste atributul COLS. Trebuie sa punem si tag-ul de incheiere </FRAMESET>
Alaturi de tag-ul <FRAMESET> se mai folosesc si atributele <FRAMESPACING>, pentru marimea spatiilor dintre cadre si <FRAMEBORDER>, care fac niste cadre definite, cu chenar sau nu. Valorile sale pot fi ,,yes" sau ,,no".
Fiecare tag <FRAME> trebuie sa aiba si un atribut SRC pentru a indica sursa. Mai pe romaneste fiecare cadru este de fapt o pagina separata si trebuie sa indicam sursa.
Am sa fac un document HTLM nou pe care il voi folosi numai pentru acest tutorial.
Prima data am sa impart pagina in doua.
Am deschis un Notepad si am facut o pagina numita 1:
<HTML>
<HEAD>
<TITLE>Cadre</TITLE>
</HEAD>
<FRAMESET ROWS="25%,*" FRAMEBORDER="no" FRAMESPACING="0">
<FRAME SRC="2.html">
<FRAME SRC="3.html"></FRAMESET>
<BODY>
</BODY>
</HTML>
Acum trebuie sa mai fac doua pagini pentru a putea pune ceva in fiecare cadru. Pentru ca prima pagina am salvat-o 1.html am sa mai fac doua pagini cu numele 2 si 3, cum deja am dat calea in primul document (<FRAME SRC="2.html">)
Pagina 2:
<HTML>
<HEAD>
<TITLE>Cadre</TITLE>
</HEAD>
<BODY BGCOLOR="black">
</BODY>
</HTML>
Pagina 3:
<HTML>
<HEAD>
<TITLE>Cadre</TITLE>
</HEAD>
<BODY BGCOLOR="#FF9900">
</BODY>
</HTML>
Deci am 3 pagini separate salvate cu numele 1, 2 si 3 in acelasi director. La pagina 2 am dat culoarea neagra si la pagina 3 culoare orange:
Destul de clar nu? Acum daca dau dublu click pe pagina 1 va apare asa:
Sa spunem ca vrem sa mai adaugam un cadru orizontal. In cazul asta mai facem o pagina. Eu fac pagina 4.html, insa de data asta voi folosi culoarea verde.
Pagina 4:
<HTML>
<HEAD><TITLE>Cadre</TITLE>
</HEAD>
<BODY BGCOLOR="green">
</BODY>
</HTML>
Acum trebuie sa introducem cadrul in pagina principala (pagina 1 in cazul meu)
<HTML>
<HEAD><TITLE>Cadre</TITLE>
</HEAD>
<FRAMESET ROWS="20%,*" FRAMEBORDER="no" FRAMESPACING="0">
<FRAME SRC="2.html">
<FRAMESET ROWS="85%,*" FRAMEBORDER="no" FRAMESPACING="0">
<FRAME SRC="3.html">
<FRAME SRC="4.html"></FRAMESET>
<BODY>
</BODY>
</HTML>
Am lasat 20% pentru partea neagra si am setat ca partea portocalie sa ia 85% din ce ramane. In tutorial erau numai 2 cadre asa ca mi-a fost destul de greu sa ma prind cum e cu procentajele.In fine acum arata asa:
Acum sa testez daca am inteles bine. Am sa vreau sa bag un cadru vertical sub cadrul negru. Sa vedem ce iese.
M-am chinuit putin. Am frecat vreo 2 ore frame astea :) . In tutorial nu explica asa ceva, insa eu am vrut neaparat sa impart numai portocaliul in doua cadre.
Am adaugat linia de cod FRAMESET COLS="20%,*" FRAMEBORDER="yes" FRAMESPACING="3" sub linia de cod care definea bucata portocalie, am adaugat noua pagina de culoare galbena si am inchis tag-ul </FRAMESET> sub calea spre pagina 3 (portocaliul) si am deschis alt tag <FRAME SRC="4.html"> pentru a da linkul spre bucata verde :)
Ca sa ma lamuresc si cu FRAMEBORDER SI FRAMESPACING am pus yes si am adaugat valoarea 3 ca sa iasa mai groasa. Puteti observa in poza diferenta si ce fac cele 2 atribute.<HTML>
<HEAD><TITLE>Cadre</TITLE>
</HEAD>
<FRAMESET ROWS="20%,*" FRAMEBORDER="yes" FRAMESPACING="3">
<FRAME SRC="2.html">
<FRAMESET ROWS="85%,*" FRAMEBORDER="yes" FRAMESPACING="3">
<FRAMESET COLS="20%,*" FRAMEBORDER="yes" FRAMESPACING="3"><FRAME SRC="5.html">
<FRAME SRC="3.html">
</FRAMESET>
<FRAME SRC="4.html">
</FRAMESET>
<BODY>
</BODY>
</HTML>
