Prof.
Negrilescu Nicolae Colegiul National Vlaicu Voda Curtea de arges Cadre ( Frames ) Cadrele permit mprirea unei ferestre n seciuni independente ntre ele, n fiecare dintre acestea fiind posibil ncrcarea unui document HTML. Astfel, utilizatorul poate vizualiza simultan mai multe documente. De e emplu, putem mpri documentul n dou cadre. !n primul cadru va fi afi"at o bara de navi#aie. $electarea unui meniu al barei de navi#aie va determina ncrcarea pa#inii corespunztoare n cel de%al doilea cadru. Astfel, bara de meniuri va fi vizibil n orice moment al navi#rii site%ului. &entru structurarea unui document HTML n cadre sunt utilizate ta#urile' (frameset) (frame) (noframe) (iframe)
Organizarea documentului n cadre - Tagul frameset! *n document cu cadre se realizeaz similar unui document HTML oarecare, n care ta#urile (bod+), respectiv (,bod+) sunt nlocuite cu ta#urile (frameset), respectiv (,frameset)' <html> <head> </head> <frameset> </frameset> </html> A"adar, ta#ul (frameset) permite structurarea documentului principal n cadre. !n interiorul perec-ii (frameset) (,frameset) nu pot e ista dec.t elemente (frameset), (frame), (noframe). Ta#ul (frameset) accept urmtoarele atribute' ro/s 0 prime"te ca parametru o list de valori, separate prin vir#ul, ce reprezint nlimea cadrelor orizontale ale documentului principal. 1umrul de cadre orizontale este dat de numrul de valori din list. 2alorile sunt e primate fie prin numere ntre#i pozitive 3nlime absolut e primat n pi eli4, fie prin procente din nlimea cadrului printe 3nime relativ4, fie prin caracterul de puncuaie 567, care semnific o nlime relativ.
Observaii: 8. 1u se recomand ca toate valorile s fie absolute, deoarece bro/serele pot utiliza rezoluii diferite, ceea ce poate duce la distorsiuni ale afi"rii9 :. !n cazul utilizrii procentelor, suma acestora nu poate s dep"easc 8;;<, n caz contrar, bro/serul va trunc-ia toate valorile p.n ce suma va fi 8;;. cols 0 permite mprirea cadrului curent n sectoare verticale. &arametrii acceptai respect acelea"i re#uli ca "i n cazul atributului ro/s, numai c se refer la lun#imea cadrului. border 0 prime"te o valoare ntrea# nene#ativ, [Link] #rosimea, e primat n pi eli, a c-enarului cadrelor. =mplicit, #rosimea c-enarului este de > pi eli. 2aloarea ; a atributului border in-ib afi"area c-enarelor tuturor cadrelor. bordercolor 0 permite setarea culorii c-enarelor cadrelor. Culoarea poate fi specificat fie printr%un triplet -e a de forma ?rr##bb, fie printr%un nume predefinit de culoare. frameborder 0 controleaza afi"area,ascunderea c-enarelor tuturor cadrelor. Atributul poate primi valorile' +es sau 8 3se foreaz afi"area c-enarelor4, no sau ; 3 se foreaz ascunderea c-enarelor49 framespacin# 0 permite specificarea distanei, n pi eli, de spaiu liber n @urul tuturor cadrelor.
Observaie: Ascunderea unui c-enar, prin utilizarea perec-ii frameborderABnoB sau borderAB;B, face ca acesta s nu mai fie vizibil pentru utilizator. Totu"i, n =nternet C plorer, utilizatorul poate opta pentru redimensionarea cadrului, prin operaia Dra# and Drop asupra mar#inii invizibile. &entru a in-iba aceast posibilitate, ascunderea c-enarului trebuie nsoit de secvena' framespacin#AB;B. "efinirea cadrelor - Tagul frame! Ta#ul (frame) permite definirea unui cadru n interiorul unui set de cadre. Cl are sens numai atunci [Link] apare n interiorul perec-ii (frameset) (,frameset). Atribute acceptate' src 0 specific adresa *DL a documentului ce va fi ncrcat n cadrul respectiv9 name 0 specific numele cadrului, nume ce va fi utilizat pentru referirea cadrului respectiv atunci [Link] se va ncrca n el un alt document HTML, prin
intermediul unei -iperle#turi aflate n alt cadru. 1umele este o combinaie de caractere alfanumerice9 mar#in/idt-, mar#in-ei#-t 0 controleaza distana, e primat n pi eli, ntre coninutul cadrului "i c-enarul su9 scrollin# 0 atributul controleaz afi"area,ascunderea barelor de defilare 3orizontal sau vertical4. &oate primi valorile' o +es 0 se foreaz afi"area barelor de defilare9 o no % se foreaz ascunderea barelor de defilare9 o auto % barele de defilare vor fi afi"ate numai atunci [Link] este necesar [Link] coninutul cadrului dep"e"te lun#imea "i,sau nlimea cadrului va fi afi"at bara de defilare orizontal "i,sau cea vertical49 border 0 permite setarea #rosimii c-enarului cadrului curent. 2aloarea atributului border aflat n interiorul ta#ului frame este prioritar fa de valoarea aceluia"i atribut aflat n ta#ul frameset. noresize 0 se in-ib utilizatorului posibilitatea de a redimensiona cadrele. Altfel, el are aceast posibilitate, prin operaia Dra# and Drop asupra mar#inilor cadrelor. frameborder 0 controleaza afi"area,ascunderea c-enarului cadrului curent. Atributul poate primi valorile' +es sau 83se afi"eaz c-enarul4, no sau ; 3se ascunde c-enarul49 framespacin# 0 permite specificarea distanei, n pi eli, de spaiu liber n @urul cadrului. bordercolor 0 permite specificarea culorii c-enarului cadrului respectiv.
#ro$serele %ec&i - Tagul noframe! Ta#ul (noframe) este utilizat n cazul n care se navi#-eaz cu un bro/ser mai vec-i, care nu suport cadrele. !n aceast situaie, bro/serul va afi"a coninutul inclus n interiorul perec-ii (noframe) (,noframe). Dac ns, bro/serul recunoa"te cadrele, el va i#nora coninutul perec-ii (noframe) (,noframe). De re#ul, atunci [Link] un bro/ser nu recunoa"te un ta#, nu l interpreteaz. Acest lucru se poate [Link] "i n cazul ta#urilor (frameset), (frame). Cste evident c dac un bro/ser nu recunoa"te ta#urile (frameset) "i (frame) el nu va recunoa"te nici (noframe). !ns, va interpreta ta#urile pe care le recunoa"te, adic, n acest caz, cele cuprinse ntre (noframe) "i (,noframe). De fapt, efectul ta#ului (noframe) este, n cazul bro/serelor care recunosc cadre, acela de a i#nora coninutul inclus n interiorul perec-ii (noframe) (,noframe).
Cadre in-line - Tagul iframe! (in-line frame) Ta#urile (iframe) sunt similare ta#urilor (frame), cu deosebirea c se includ n documente HTML obi"nuite 3nu n documente HTML cu cadre4, adic n interiorul perec-ii (bod+) (,bod+). La ora actual numai =nternet C plorer accept cadre in%line. Dac un bro/ser nu recunoa"te cadre, el va afi"a coninutul cuprins ntre (iframe) "i (,iframe). Ta#ul (iframe) accept acelea"i atribute ca "i ta#ul (frame), n plus accept atribute preluate de la ta#ul (im#), care controleaz modul de afi"are al cadrului n interiorul documentului. Atribute acceptate' % preluate de la ta#ul (frame)' % src name9 scrollin#9 border, bordercolor9 frameborder9 framespacin#9 noresize9 mar#in/idt-, mar#in-ei#-t9
preluate de la ta#ul (im#)' ali#n9 /idt-, -ei#-t9 vspace, -space.
Toate atributele menionate mai sus au semnificaiile "i parametrii prezentai n seciunile anterioare ale cursului .
'(em)le* +ealizarea cadrelor orizontale
<!--[Link]--> <html> <head> <title>Grand Garage</title> </head> <frameset rows="150,*, 0!"> <frame sr"="[Link]"> <frame sr"=""ontin#[Link]"> <frame sr"="[Link]"> </frameset> </html> <!--[Link]--> <html> <head> </head> <$od%> <"enter> <h&>G'()* G('(G+</h&> <h&>(#to ,.'.-.</h&> <h&>*ealer *(+.//</h&> </"enter> </$od%> </html> <!--"ontin#[Link]--> <html> <head> </head> <$od%> <0>)oile 0ret#ri de la *(+.// s#nt mai mi"i "a ni"iodata. </0> <0>*a"a 0ana a"#m n# "redeai, 1ino sa 1e2i! </0> </$od%> </html> <!--[Link]--> <html> <head> </head> <$od%> <0 align=""enter"><$>3#"#resti, ,tr. -. )egrean# 1&, 4elefon5 051.166.178.</$></0> </$od%> </html>
,m-ricarea cadrelor
>
<!--[Link]--> <html> <head> <title>Grand Garage</title> </head> <frameset rows="1 0,*, 0!"> <frame sr"="[Link]"> <frameset "ols="100,*"> <frame sr"="meni#.htm"> <frame sr"="[Link]"> </frameset> <frame sr"="[Link]"> </frameset> </html>
Cadre im-ricate cu c&enare colorate de di%erse grosimi
<html> <head> <title>9adre im$ri"ate</title> </head> <frameset rows="50,*,50!"> <frameset "ols=" 5!,*" $order="&0" $order"olor="red"> <frame sr"=":[Link]"> <frame sr"=":agina .htm"> </frameset> <frameset "ols="*, *,&*" > <frame sr"=":agina&.htm" s"rolling=;%es;> <frame sr"=":[Link]" s"rolling=;a#to;> <frame sr"=":[Link]" s"rolling=;no;> </frameset> <frameset "ols="*,100" $order="15"> <frame sr"=":agina<.htm"> <frame sr"=":[Link]" $order"olor="maroon" noresi2e> </frameset> </frameset> </html>
C&enare inacti%e
<!--[Link]--> <html> <head> <title>Grand Garage</title> </head> <frameset rows="92,*,20 " frame!order="no" frames"a#ing="0"> <frame sr#="[Link]"> <frameset #ols="$00,*"> <frame sr#="meni%.htm"> <frame sr#="des"[Link]"> </frameset> <frame sr#="[Link]"> </frameset> </html>
#ro$serele care nu acce)ta cadre
<!--[Link]--> <html> <head> <title>Grand Garage</title> </head> <frameset rows="= ,*, 0!" $order="0" frame$order="0"> <frame sr"="[Link]"> <frameset "ols="100,*"> <frame sr"="meni#.htm"> <frame sr"="[Link]"> </frameset> <frame sr"="[Link]"> <noframe> <h& align=""enter">G'()* G('(G+ - (#to ,.'.-.</h&> <h& align=""enter">*ealer *(+.//</h&> <0 align=""enter"><a href="meni#.htm">3ara de na1igatie</a></0> </noframes> </frameset> </html>
.n e(em)lu com)le(
<!--[Link]--> <html> <head> <title>Grand Garage</title> </head> <frameset rows="= ,*, 0!" $order="0" frame$order="0"> <frame sr"="[Link]"> <frameset "ols="1 &,*"> <frame sr"="meni#.htm"> <!--meni#.htm--> <html> <$od%> <0><a href="[Link]" target=""ontin#t">*es 0re )oi</a></0> <0><a href="[Link]" target=""ontin#t">>an 2ari</a></0> <0><a href="0ret#[Link]" target=""ontin#t">:re t#ri</a></0> </$od%> </html> <!--[Link]--> <html> <$od%> <h& align=""enter">G '()* G('(G+ (#to ,.'.-.</h&> <h& align=""enter">* ealer *(+.//</h&> </$od%> </html> <!--[Link]--> <html> <$od%> <0 align=""enter"><$ >3#"#resti, ,tr. -. )egrean# 1&, 4elefon5 051.166.178.</$>< /0> </$od%> </html>
<frame name=""ontin#t" sr"="[Link]"> </frameset> <frame sr"="[Link]"> </frameset> </html>
<!-[Link]--> <html> <$od%> <0>-eader 0e 0iata a#to romaneas"a, so"ietatea noastra, Grand Garage-(#to ,.'.-., "omer"iali2ea2a a#tot#risme mar"a *(+.//. </0> <0>:ret#rile noastre s#nt mai mi"i "a ni"iodata. *a"a 0ana a"#m n# "redeai, 1ino sa 1e2i! </0> </$od%> </html>
<!--[Link]--> <html> <$od%> <h6>Grand Garage a#to ,.'.-. ofera "lientilor nostri trei modalitati de 0lata5</h6> <#l> <li>1an2are "# 0lata integrala la "#m0arare?</li> <li>1an2are in rate?</li> <li>1an2are in sistem leasing.</li> </#l> </$od%> </html>
<!--0ret#[Link]--> <html> <$od%> <ta$le $order="1" $g"olor="sil1er" $order"olor="$la"@" "ell0adding="10"> <"a0tion><h6>:ret#ri a#to1ehi"#le *aewoo</h6></"a0tion> <tr><th>Aodel</th><th>:ret B+C'/, toate taxele in"l#seD</th></tr> <tr><td>4i"o</td><td>6==0</td></tr> <tr><td>Aati2</td><td>6==0B+D<800B,+ :/.+'D</td></tr> <tr><td>9ielo</td><td>8 =0BG-+D=&=0B+xe.-:GD</td></tr> </ta$le> </$od%> </html>