U6 PDF

UNITATEA DE ÎNVĂȚARE NR.
6
Ferestre. Definirea structurii de cadre
Cuprins:
6.1 FERESTRE ÎN HTML ............................................................................... 89

6.2 DEFINIREA STRUCTURII DE CADRE (FRAMES) ............................. 90
6.3 APLICAȚII..................................................................................................96
6.4 MODELE DE CONSTRUIRE A SITE-URILOR WEB.......................128
Obiective
Însuşirea noţiunilor generale despre împărțirea unei pagini în cadre.
Înțelegerea structurii de cadrelor și a modalităților de utilizare a acestora.
Utilizarea cadrelor și a importanței acestora în proiectarea paginilor web.
Timp alocat:1 oră
6.1 Ferestre in HTML
Ferestrele sau cadrele ne permit să definim în fereastra browserului

subferestre în care să fie încărcate documente HTML diferite.
Folosirea cadrelor prezintă atât avantaje cât şi dezavantaje. Printre avantaje
se numară uşurinţa în navigare, reducerea timpilor de încarcare a paginilor HTML.
De partea cealaltă se situează problemele pe care le au motoarele de
căutare în indexarea site-urilor ce conţin frame-uri, precum ţi unele probleme de
securitate.
Structura documentului HTML care introduce structura de cadre este
diferită de structura unui document ce nu conţine cadre (tagul <FRAMESET>
înlocuieşte marcajul <BODY>).
Un document care conţine cadre (frame-uri) se defineşte astfel:
<HTML>
<HEAD>
...
</HEAD>
<FRAMESET>
...
</FRAMESET>
</HTML>
89
Marcajul <FRAMESET> poate să includă alte marcaje <frameset>,
putându-se astfel diviza un cadru în două sau mai multe cadre.
6.2 Definirea structurii de cadre (frames)
O structură de cadre se defineşte similar unui tabel. Marcajul principal este

frameset (introduce o structură de cadre pentru documentul curent):
Definirea cadrelor se face prin împărţirea ferstrelor (şi a subferestrelor) în
linii şi coloane:
 împărţirea unei ferstre într-un număr de subferestre de tip coloană se
face cu ajutorul atributului cols al etichetei <frameset> ce descrie acea fereastră;
 împărţirea unei ferestre într-un număr de subferestre de tip linie se
face cu ajutorul atributului rows al etichetei <frameset> ce descrie acea fereastră;
 valoarea atributelor cols şi rows este o listă de elmente separate prin
virgulă , care descriu modul în care se face împărţirea.
Elementele listei pot fi:
 un număr întreg de pixeli;
 procente din dimensiunea ferestrei (număr între 1 şi 99 terminat cu
%);
 n* care înseamnă n părţi din spaţiul ramas;
Exemplu 1: cols=200,*,50%,* înseamnă o împărţire în 4 subferestre , dintre care

prima are 200 pixeli , a treia ocupă jumătate din spaţiul total disponibil ,iar a doua
şi a patra ocupa în mod egal restul de spaţiu rămas disponibil.
Exemplu 2: cols=200,1*,50%,2* înseamnă o împărţire în 4 subferestre , dintre

care prima are 200 pixeli , a treia ocupă jumătate din spaţiul total disponibil iar a
doua şi a patra ocupă în mod egal restul de spaţiu rămas disponibil, care se împarte
în trei părţi egale , a doua fereastra ocupând o parte , iar a patra ocupând 2 părţi.
<FRAMESET [ROWS] [COLS] [FRAMEBORDER]

[FRAMESPACING] [BORDER] [STYLE][BORDERCOLOR]>
....
</FRAMESET>
 Atributele ROWS, COLS definesc structura de cadre. Dimensiunile

pot fi exprimate ca o valoare sau ca o succesiune de valori. Valorile pot fi
exprimate absolut (pixeli) sau relativ (procente). În cazul în care se utilizează întreg
spaţiul disponibil, se foloseşte (*).
Nu este obligatorie prezenţa ambelor atribute.
Valorile absolute se utilizează atunci când dimensiunea unui cadru trebuie
păstrată indiferent de dimensiunea ferestrei browserului. Valorile relative se
90
utilizează atunci când trebuie păstrate proporţiile cadrelor indiferent de acţiunea
(resize) realizată de utilizator asupra ferestrei browser-ului.
 Atributul FRAMEBORDER specifica prezenta sau absenta

chenarului: YES = chenarul este activat; NO = chenarul este dezactivat. Internet
Explorer 4.0 accepta atat varianta "YES|NO", cat si "1|0". Netscape Navigator
recunoaste doar combinatia "YES|NO".
 Atributul FRAMESPACING este o versiune mai veche a atributului

BORDER. Spre deosebire de atributul BORDER, utilizarea valorii 0, nu va elimina
chenarul. Este o extensie Microsoft.
 Atributul BORDER. Cadrele afişează în mod standard un chenar 3D.

Lăţimea este definită de valoarea acestui atribut.
 Atributul STYLE permite alocarea uneia sau mai multor proprietăţi

CSS elementului curent. Este o extensie Microsoft.
 Atributul BORDERCOLOR stabileşte culoarea tuturor chenarelor

cadrelor incluse.
Marcajul "FRAME" defineşte conţinutul şi atributele unui cadru şi are
următoarea sintaxă:
<FRAME [SRC] [NAME] [NORESIZE] [SCROLLING] [MARGINWIDTH]

[MARGINHEIGHT] [FRAMEBORDER][BORDERCOLOR][TARGET]>
 Atributul SRC reprezintă adresa (absolută sau relativă) a

documentului HTML care va fi inserat în cadrul respectiv.
 Atributul NAME. În cazul în care un formular sau un link trebuie să

returneze un document într-un alt cadru decât cel curent, este necesară cunoaşterea
numelui (name) cadrului respectiv.
De exemplu, urmarea link-ului <a href="x.html" target="_nume">Link</a>, va
încarca documentul "x.html" în cadrul "_nume".
 Atributul NORESIZE. În cazul în care se specifică atributul

"noresize", utilizatorul nu va putea redimensiona cadrele.
 Atributul SCROLLING specifică dacă barele de defilare (scroll)

orizontale/verticale vor fi afişate. Poate lua următoarele valori:
 YES - bare de defilare inserate;
 NO - fără bare de defilare;
 AUTO - barele de defilare se insereaza doar dacă este nevoie.
91
 Atributele MARGINWIDTH, MARGINHEIGHT specifică
dimensiunile (pixeli) dintre marginile cadrului şi conţinutul acestuia (distanţele
textului la marginile frame-ului).
 Atributul FRAMEBORDER specifică dacă fereastra are chenar (1)

sau nu are chenar (0). Netscape Navigator înlocuieste perechea (0|1) cu (YES|NO).
Internet Explorer recunoaşte ambele seturi de valori.
 Atributul BORDERCOLOR stabileşte culoarea chenarului pentru un

cadru individual
 Atributul TARGET acceptă anumite valori predefinite de o valoare

deosebită pentru creatorii de pagini Web.Aceste valori sunt:
 "_SELF" (încărcarea noii pagini are loc în cadrul curent);
 "_BLANK" (încărcarea noii pagini are loc într-o fereastră nouă
anonimă);
 "_PARENT" (încărcarea noii pagini are loc în cadrul părinte al
cadrului curent dacă acesta există, altfel are loc în fereastra browserului
curent);
 "_TOP" (încărcarea noii pagini are loc în fereastra browserului ce
conţine cadrul curent);
Exemplul 1: Se construieşte o pagină cu două cadre orizontale în proportia 20% şi

80% din înălţimea totală. Pagina de sus are chenarul roşu iar cea de jos are scroll.
<html>
<head>
<title>Cadre</title></head>
<frameset rows="20%,80%">
<frame src="exemplu_1.html" bordercolor="#ff0000">
<frame src="exemplu_2.html" scrolling="yes">
</frameset><noframes></noframes>
</html>
Exemplu1_1.html:
<html>
<head>
<title>Exemplu1_1</title></head>
<body>
Pagina de sus(20% din fereastra)
</body>
</html>
92
Exemplu1_2.html:
<html>
<head>
<body>
Pagina de jos(80% din fereastra)
</body>
</html>
Figura 8.1.1 – Construirea a două cadre orizontale
Exemplul 2: Se construieşte o pagină cu două cadre verticale în proporţia 40% şi

60% din lăţimea totală, fără posibilitatea de redimensionare a cadrelor.
<html>
<head><title>Cadre verticale</title></head>
<frameset cols="40%,60%">
<frame src="exemplu2_1.html">
<frame src="exemplu2_2.html" noresize>
</frameset>
</html>
Exemplu2_1:
93
<html>
<head>
<body>
Pagina din stanga(40% din fereastra)
</body>
</html>
Exemplu2_2:
<html>
<head>
<body>
Pagina din dreapta(60% din fereastra)
</body>
</html>
Figura 8.1.2 – Construirea a două cadre verticale

Cadrele in-line(interne) sunt blocuri care se introduc în pagina prin
perechea de etichete <IFRAME> şi </IFRAME>, şi au atributele:
 SRC fişierul sau adresa acestuia

 HEIGHT înălţimea cadrului
 WIDTH lăţimea cadrului
 FRAMEBORDER grosimea bordurii (chenarului)
 SCROLLING adaugă bare de defilare cu valorile YES, NO si 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
94
Exemplu: Se construieşte 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.
<html>
<head>
<title>Cadre interne</title>
</head>
Mai jos este un cadru in-line cu urmatori parametrii: 
width="300" si height="200" hspace="200" vspace="100"
scrolling="yes" 
<iframe src="Exemplu3_1.htm" width="300" height="100" hspace="50"
vspace="50" scrolling="yes">
Browserul folosit nu suporta cadre in-line
</iframe>
</body>
</html>
Exemplu3_1:
<html>
<head>
<title>Exemplu3_1</title>
</head>
<body>
Pagina introdusa printr-un cadru in-line
</body>
</html>
Figura 8.1.3 – Cadre interne

95
6.3 Aplicații
1.
Frame.htm
<html>
<head><title>Cadre</title></head>
<frameset cols="25%, 75%">
<frame src="cadru1.htm" name="cadru1">
<frame src="cadru2.htm" name="cadru2" scrolling="yes">
</html>
Cadru1.htm:
<html>
<head><title>Cadru 1</title></head>
<body link=blue vlink=green alink=red>
 CADRUL 1 
<a href="Pag1.htm" target="cadru2">Pagina 1</a> 
<a href="frame.htm" target="_top">Revenire</a>
</body>
</html>
Cadru2.htm:
<html>
<head><title>Cadrul 2</title></head>
<body >
<center>
 CADRUL 2</center>
</body>
</html>
Pag1.htm:
<html>
<head><title>Pagina 1</title></head>
<body bgcolor="#FFFFCC">
PAGINA 1
</body>
</html>
96
Pag2.htm:
<html>
<body bgcolor="#FFCCFF">
PAGINA 2
</body>
</html>
Pag3.htm:
<html>
<body bgcolor="#CCFFFF"text="#000066">
PAGINA 3
</body>
</html>
97
98
2. Se vor folosi fişierele pag1.htm, pag2.htm, pag3.htm din exemplul anterior.
Ferestre.html:
<html>
<head> <title> FERESTRE </title> </head>
<frameset cols="30%,*" BORDERCOLOR="RED" BORDER=15>
<frame src="left.html" name="left" SCROLLING="NO">
<frameset rows="100,*,50%" BORDERCOLOR=BLUE BORDER=10>
<frame src="pag.htm" name="main" >
<frame src="img1.jpg" SCROLLING="AUTO" >
<frameset cols=200,* FRAMEBORDER="NO">
<frame src="pag2.htm" MARGINHEIGHT=40 MARGINWITHD=100>
<frame src="pag3.htm">
</html>
Left.html:
<html>
<head> <title> left1 </title></head>
<body>
<a href="pag1.htm" target="main"> Fisier1 </a> 
99
<a href="pag1.htm" target="_blank"> Fisier1 intr-o fereastra noua </a>
 
<a href="pag2.htm" target="_self"> Fisier2 in fereastrea curenta </a>
 
<a href="ferestre.html" target="_top"> home </a> 
</body>
</html>
Pag.htm:
<html>
<head>
<title>PAG</title>
</head>
<body>
Fereastra main
</body>
</html>
Când se alege link-ul „Fişier 1” se obţine:
100
La apăsarea link-ului „Fişier 2” obţinem:
În momentul alegerii obţiunii „Fisier 3” avem următorul rezultat:
101
Link-ul „Fişier într-o fereastră nouă” conduce la apariţia unei noi ferestre în care
se deschide „Pag1.htm”
102
Link-ul „Fişier în fereastra curentă” realizează lansarea fişierului „Pag2.htm” în
fereastra cu numele „main”
103

U6 PDF

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

U6 PDF

Încărcat de

Drepturi de autor:

Formate disponibile

UNITATEA DE ÎNVĂȚARE NR.

6.1 FERESTRE ÎN HTML ............................................................................... 89

Timp alocat:1 oră

6.1 Ferestre in HTML

Ferestrele sau cadrele ne permit să definim în fereastra browserului

6.2 Definirea structurii de cadre (frames)

O structură de cadre se defineşte similar unui tabel. Marcajul principal este

Exemplu 1: cols=200,*,50%,* înseamnă o împărţire în 4 subferestre , dintre care

Exemplu 2: cols=200,1*,50%,2* înseamnă o împărţire în 4 subferestre , dintre

<FRAMESET [ROWS] [COLS] [FRAMEBORDER]

 Atributele ROWS, COLS definesc structura de cadre. Dimensiunile

 Atributul FRAMEBORDER specifica prezenta sau absenta

 Atributul FRAMESPACING este o versiune mai veche a atributului

 Atributul BORDER. Cadrele afişează în mod standard un chenar 3D.

 Atributul STYLE permite alocarea uneia sau mai multor proprietăţi

 Atributul BORDERCOLOR stabileşte culoarea tuturor chenarelor

<FRAME [SRC] [NAME] [NORESIZE] [SCROLLING] [MARGINWIDTH]

 Atributul SRC reprezintă adresa (absolută sau relativă) a

 Atributul NAME. În cazul în care un formular sau un link trebuie să

 Atributul NORESIZE. În cazul în care se specifică atributul

 Atributul SCROLLING specifică dacă barele de defilare (scroll)

 Atributul FRAMEBORDER specifică dacă fereastra are chenar (1)

 Atributul BORDERCOLOR stabileşte culoarea chenarului pentru un

 Atributul TARGET acceptă anumite valori predefinite de o valoare

Exemplul 1: Se construieşte o pagină cu două cadre orizontale în proportia 20% şi

Figura 8.1.1 – Construirea a două cadre orizontale

Exemplul 2: Se construieşte o pagină cu două cadre verticale în proporţia 40% şi

Figura 8.1.2 – Construirea a două cadre verticale

 SRC fişierul sau adresa acestuia

Figura 8.1.3 – Cadre interne

Când se alege link-ul „Fişier 1” se obţine:

În momentul alegerii obţiunii „Fisier 3” avem următorul rezultat:

S-ar putea să vă placă și

Exemplu 1: cols=200,,50%, înseamnă o împărţire în 4 subferestre , dintre care

Exemplu 2: cols=200,1,50%,2 înseamnă o împărţire în 4 subferestre , dintre