Crearea paginilor cu cadre (frame)

Crearea paginilor cu cadre (frame)

Exemplele prezentate în produsele anterioare încărcau o singură pagină HTML în fereastra browserului.

Sunt şi situaţii în care imaginea afişată de browser este formată din mai multe pagini HTML numite cadre. Caracteristic acestor pagini este că perechea de etichete <body> </body> este înlocuită de <frameset> </frameset> iar în interiorul lor cadrele sunt delimitate de <frame> şi </frame>.

Atributele etichetei frameset sunt:
cols - îimparte pagina în coloane şi are valori exprimate în procente din dimensiunea ferestrei, număr de pixeli sau * adică spaţiul rămas
rows - împarte pagina în rânduri cu aceleaşi valori ca la cols
bordercolor - culoarea tuturor chenarelor conform modelului #rrggbb
frameborder - înhibarea afişării chenarelor cu valorile yes sau no

Cadrele sunt introduse prin pereche de etichete <frame> </frame> care suportă atributele:
src - fişierul sau adresa fişierului introdus
bordercolor - colorit chenarului cadrului curent conform modelului #rrggbb
noresize - dezactivează posibilitatea vizitatorului de a redimensiona cadrul
scrolling - adaugă cadrului bare de defilare cu valorile yes, no şi auto

Exemplu: pagină cu două cadre orizontale în proporţia 20% şi 80% din înălţimea totală. Pagina de sus are chenarul roşu iar cea de jos are scroll.
Cod:

<html>
<head>
<title>Exemplul 1</title>
</head>
<frameset rows="20%,80%">
<frame src="pag1.html" bordercolor="#ff0000">
<frame src="pag2.html" scrolling="yes">
</frameset>
</html>

Exemplu: pagină cu două cadre verticale în proporţia 40% şi 60% din lăţimea totală, privat de posibilitatea de redimensionare a cadrelor:

Cod:

<html>
<head>
<title>Exemplul 2</title>
</head>
<frameset cols="40%,60%">
<frame src="pag1.html">
<frame src="pag2.html" noresize>
</frameset>
</html>

Exemplu: pagină cu două cadre. În cadrul din stânga sunt link-uri către alte pagini care se vor deschide în cadrul din stânga (se poate verifica funcţionarea atributului target al legăturii). Cadrul din stânga va avea scroll.

În situaţia în care browserul întrebuințat nu suportă pagini care conţin cadre imaginea afişată va fi goală. Pentru a evita acest fapt vom introduce un mesaj încadrat de <body> şi </body> între etichetele <noframes> şi </noframes> prin care informăm vizitatorul că foloseşte un browser care nu suportă cadre.

Cod:

<frameset cols = "30%, 40%,*">
<noframes>
<body>Browserul folosit nu suporta cadre</body>
</noframes>
<frame src ="pag1.html">
<frame src ="pag2.html">
<frame src ="pag3.html">
</frameset>

Cadre in-line
Sunt blocuri care se introduc în pagină prin perechea de etichete <iframe> şi </iframe> şi au atributele:
src - fişierul sau adresa acestuia
height - înălţime cadru
width - lăţime cadru
frameborder - grosimea bordurii (chenarului)
scrolling - adaugă bare de defilare cu valorile yes, no şi auto
align - aliniază cadrul (left, right, center, top, bottom, middle)
vspace - distanţa peste şi sub cadru
hspace - distanţa în stânga şi în dreapta de cadru

Exemplu: o pagină în care este găzduit un cadru in-line. Şi aici se poate introduce un mesaj pentru browserele care nu suportă cadre in-line. Modul de afişare al exemplului poate diferi de la un browser la altul.

Cod:

<html>
<head>
<title>Exemplul 4</title>
</head>
Mai jos este un cadru in-line cu următori parametrii:<br>
width="300" si height="200" hspace="200" vspace="100" scrolling="yes"<br>
<iframe src="pag1.html" width="300" height="100" hspace="200" vspace="100" scrolling="yes">
Browserul folosit nu suportă cadre in-line
</iframe>
</body>