Lectia 9- Folosirea cadrelor intr-o pagina web

Astazi, vom invata cum putem folosi cadrele in cadrul unei pagini web. Cu ajutorul cadrelor, putem impartii o pagina web in mai multe zone, iar apoi putem stabilii ce functie va avea fiecare zona a paginii (header, content, footer, sidebar…).

Pentru a impartii o pagina web in mai multe cadre, vom folosi tagul < FRAMESET>  insotit de unul dintre atributele COLS sau ROWS pentru a defini exct cum va fi impartita bagina respectiva.

Pentru a impartii pagina in doua cadre orizontale, vom folosi urmatoarea linie de cod:

<frameset rows=”70%,*”>

Se folosesc procente pentru a defini marimea randurilor sau a coloanelor care vor forma cadrele. in exemplul dat, primul cadru va avea 70% din inaltimea paginii iar al doilea cadru va avea restul, adica „*” sau 30%.

Alaturi de tagul <FRAMESET> se mai folosesc si atributele FRAMESPACING  pentru marimea spatiilor dintre cadre si FRAMEBORDER care se refera la cadrele definite care au sau nu chenar, valorile acestuia fiind „yes” sau „no”  . Astfel linia completa pentru definirea a doua cadre orizontale va fi urmatoarea:

<FRAMESET ROWS=”70%,*” FRAMEBORDER=”NO” FRAMESPACING=”0″>

Pentru a impartii pagina web in mai multe cadre orizontale, se vor asocia mai multe procente atributului ROWS, dar avand grija ca suma lor sa nu depaseasca 100%. La fel se procedeaza si pentru impartirea unei pagini web in cadre verticale, singura deosebire fiind ca in locul atributului ROWS  vom folosi atributul COLS . Nu uita de tagul de incheiere </FRAMESET>  .

Dupa ce am stabilit impartirea paginii in cadre, vom trece la definirea cadrelor. Astfel intre tagurile < FRAMESET>  si </FRAMESET>  vom folosi tagul < FRAME>  . Principalul atribut al tagului < FRAME> este SRC cu ajutorul caruia indicam sursa cadrului. Astfel o linie de cod care defineste un cadru ar putea fi urmatoarea:

<FRAME SRC=”NUMELEPAGINII.HTML”>

Pentru a intelege mai bine utilizarea cadrelor in paginile web, vom face impreuna o pagina web cu mai multe cadre care va arata ca in imaginea urmatoare:

Acum sa ne apucam de treaba. Trebuie sa facem patru pagini web, fiecare avand culoarea de background la fel ca una dintre cele patru culori ale imaginii de mai sus. Apoi vom face o a cinia pagina web in care vom defini cadrele si care practic le va contine pe cele patru pagini. Numele celor patru pagini vor fi rosu.html , albastru.html, galben.html si verde.html .

Paginile ar trebui sa arate astfel:

rosu.html
Cod:
<html>
<head>
<title>Cadre</title>
</head>
<body bgcolor=”#FF0000″>
</body>
</html>
albastru.html
Cod:
<html>
<head>
<title>Cadre</title>
</head>
<body bgcolor=”#0000FF”>
</body>
</html>
verde.html
Cod:
<html>
<head>
<title>Cadre</title>
</head>
<body bgcolor=”#00FF00″>
</body>
</html>
galben.html
Cod:
<html>
<head>
<title>Cadre</title>
</head>
<body bgcolor=”#FFFF00″>
</body>
</html>
Scrieti codurile si salvatile cu numele paginilor mentionate mai sus.
Acum sa vedem codul sursa care va contine cele patru pagini web create:

<HEAD>
<TITLE>Cadre</TITLE>
</HEAD>
<FRAMESET COLS=”25%,*” FRAMEBORDER=”NO” FRAMESPACING=”0″>
<FRAME SRC=”rosu.html”>
<FRAMESET ROWS=”45%,35%,*” FRAMEBORDER=”NO” FRAMESPACING=”0″>
<FRAME SRC=”albastru.html”>
<FRAME SRC=”galben.html”>
<FRAME SRC=”verde.html”>
</FRAMESET>
</FRAMESET>
<BODY>
</BODY>
</HTML>

Salveaza pagina, in acelasi folder cu celelalte patru, cu numele cadre.html
Daca totul a decurs cum trebuie, pagina web ar trevui sa arate asa:click aici
Nu arata exact ca in imagine dar important este sa intelegi cum se face o pagina web cu mai multe cadre.
 
Nu uita sa definesti cadrele inainte de tagul <BODY> si sa exersezi toate notiunile invatate in acest tutorial. Fa cat mai multe pagini care sa fie formate din cadre pozitionate in diverse proportii.

Leave a Reply

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *