Fra Muri

Introducere pentru frameuri
Frameurile HTML permit autorilor sa prezinte documentele in vizualizari multiple, care pot fi
ferestre si subferestre independente. Vizualizarile multiple ofera designerilor un mod de a tine
anumite informatii vizibile, in timp ce alte vizualizari sunt derulate sau inlocuite. De exemplu, in
aceeasi fereastra, un frame poate afisa un afis static, un al doilea un menu de navigatie si un al
treilea documentul principal care poate fi derulat sau inlocuit prin navigarea in cel de-al doilea
frame.
Iata un document simplu cu frameuri:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>Un document simplu cu frameuri</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%">
<FRAMESET rows="100, 200">
<FRAME src="continutul_lui_frame1.html">
<FRAME src="continutul_lui_frame2.gif">
</FRAMESET>
<FRAME src="continutul_lui_frame3.html">
<NOFRAMES>
<P>Acest document cu frameuri contine:
<UL>
<LI><A href="continutul_lui_frame1.html">Ceva continut de bun gust</A>
<LI><IMG src="continutul_lui_frame2.gif" alt="O imagine de bun gust">
<LI><A href="continutul_lui_frame3.html">Alt continut de bun gust</A>
</UL>
</NOFRAMES>
</FRAMESET>
</HTML>
care ar putea crea o aranjare a frameurilor cam asa:
---------------------------------------
| | |
| | |
| Frame 1 | |
| | |
| | |
|---------| |
| | Frame 3 |
| | |
| | |
| | |
| Frame 2 | |
| | |
| | |
| | |
| | |
---------------------------------------
Daca agentul utilizator nu poate afisa frameuri sau este configurat sa nu o faca, va interpreta
continutul elementului NOFRAMES.
16.2 Aranjarea frameurilor
Un document HTML care descrie aranjarea frameurilor (numit un document frameset) are un
aspect diferit fata de un document HTML fara frameuri. Un document standard are o
sectiune HEAD si o sectiune BODY. Un document frameset are un HEAD si un FRAMESET in
locul lui BODY.
Sectiunea FRAMESET a unui document specifica aranjarea vederilor in fereastra principala a
agentului utilizator. In plus, sectiuneaFRAMESET poate contine un
element NOFRAMES pentru a furniza continut alternativ pentru agentii utilizator care nu suporta
frameurile sau sunt configurati sa nu afiseze frameurile.
Elementele care in mod normal ar putea fi plasate in elementul BODY trebuie sa nu apara inainte
de primul element FRAMESET sauFRAMESET va fi ignorat.
16.2.1 Elementul FRAMESET
<![ %HTML.Frameset; [
<!ELEMENT FRAMESET - - ((FRAMESET|FRAME)+ & NOFRAMES?) -- subdiviziune
fereastra-->
<!ATTLIST FRAMESET
%coreattrs; -- id, class, style, title --
rows %MultiLengths; #IMPLIED -- lista de lungimi,
implicit: 100% (1 rand) --
cols %MultiLengths; #IMPLIED -- lista de lungimi,
implicit: 100% (1 coloana) --
onload %Script; #IMPLIED -- toate frameurile au fost incarcate --
onunload %Script; #IMPLIED -- toate frameurile au fost eliminate --
>
]]>
Definitiile atributelor
rows = multi-length-list [CN]
Acest atribut specifica aranjarea frameurilor orizontale. Este o lista de pixeli, procentaje
si lungimi relative separate cu virgule. Valoarea implicita este 100%, insemnand un rand.
cols = multi-length-list [CN]
Acest atribut specifica aranjarea frameurilor verticale. Este o lista de pixeli, procentaje si
lungimi relative separate cu virgule. Valoarea implicita este 100%, insemnand o coloana.
Atribute definite in alta parte
id, class (identificatori pentru intreg documentul)
title (titlul elementului)
style (informatii de stil inline)
onload, onunload (evenimente intrinseci)
Elementul FRAMESET specifica aranjarea ferestrei principale a utilizatorului in termeni de
subspatii dreptunghiulare.
Randuri si coloane
Setand atributul rows defineste un numar de spatii orizontale intr-un set de frameuri. Setand
atributul cols defineste un numar de subspatii verticale. Ambele atribute pot fi setate simultan
pentru a crea o grila.
Daca atributul rows nu este setat, fiecare coloana se extinde pe intreaga lungime a paginii. Daca
atributul cols nu este setat, fiecare rand se extinde pe intreaga latime a paginii. Daca nici un
atribut nu este setat, frameul acopera exact intreaga pagina.
Frameurile sunt create de la stanga spre dreapta pentru coloane si de sus in jos pentru randuri.
Cand ambele atribute sunt specificate, vizualizarile sunt create de la stanga spre dreapta in randul
de sus, stanga spre dreapta in randul doi, etc.
Primul exemplu imparte ecranul vertical in doua (i.e., creaza o jumatate de sus si o jumatate de
jos).
<FRAMESET rows="50%, 50%">
...restul definitiei...
</FRAMESET>
Urmatorul exemplu creaza trei coloane: a doua are o latime fixa de 250 pixeli (utila, de exemplu,
pentru a contine o imagine cu o dimensiune cunoscuta). Prima receptioneaza 25% din spatiul
ramas si cea de-a treia 75% din spatiul ramas.
<FRAMESET cols="1*,250,3*">
</FRAMESET>
Urmatorul exemplu creaza o grila 2x3 de subspatii.
<FRAMESET rows="30%,70%" cols="33%,34%,33%">
</FRAMESET>
Pentru exemplul urmator, sa presupunem ca fereastra browserului are inaltimea curenta de 1000
pixeli. Primei sectiuni i se aloca 30% din inaltimea totala (300 pixeli). Cea de-a doua sectiune
este specificata ca avand exact 400 pixeli in inaltime. Aceasta lasa 300 sa fie impartiti intre
celelalte doua frameuri. Inaltimea celui de-al patrulea frame este specificata ca "2*", asa ca este
de doua ori mai inalt ca cel de-al treilea frame, a carui inaltime este numai "*" (echivalent cu 1*).
Prin urmare al treilea frame va fi inalt de 100 pixeli si cel de-al patrulea va fi inalt de 200 pixeli.
<FRAMESET rows="30%,400,*,2*">
</FRAMESET>
Lungimile absolute care adunate nu dau 100% din spatiul real disponibil ar trebui sa fie ajustate
de catre agentul utilizator. Cand se subestimeaza, spatiul ramas ar trebui sa fie alocat
proportional fiecarei sectiuni. Cand se supraestimeaza, fiecare sectiune ar trebui sa fie redusa in
concordanta cu proportia specificata ei din spatiul total.
Seturi de frameuri imbricate
Seturile de frameuri pot fi imbricate la orice nivel.
In exemplul urmator, FRAMESET din exterior imparte spatiul disponibil in trei coloane
egale. FRAMESET-ul interior imparte apoi a doua zona in trei randuri de inaltimi inegale.
<FRAMESET cols="33%, 33%, 34%">
...continutul primului frame...
<FRAMESET rows="40%, 50%">
...continutul celui de-al doilea frame, randul unu...
...continutul celui de-al doilea frame, al doilea rand...
</FRAMESET>
...continutul celui de-al treilea frame...
</FRAMESET>
Partajarea datelor intre frameuri
Autorii pot partaja date intre cateva frameuri via unui element OBJECT. Autorii ar trebui sa
includa elementul OBJECT in elementul HEAD al unui document frameset si sa-l numeasca cu
atributul id. Orice document care este continutul unui frame dintr-un set de frameuri poate referi
acest identificator.
Exemplul urmator ilustreaza cum un script se poate referi la un element OBJECT definit pentru
un intreg set de frameuri:
<HTML>
<HEAD>
<TITLE>Acesta este un set de frameuri cu OBJECT in HEAD</TITLE>

<OBJECT id="myobject" data="data.bar"></OBJECT>
</HEAD>
<FRAMESET>
<FRAME src="bianca.html" name="bianca">
</FRAMESET>
</HTML>


<HTML>
<HEAD>
<TITLE>Pagina Biancai</TITLE>
</HEAD>
<BODY>
...inceputul documentului...
<P>
<SCRIPT type="text/javascript">
parent.myobject.myproperty
</SCRIPT>
...restul documentului...
</BODY>
</HTML>
16.2.2 Elementul FRAME
<![ %HTML.Frameset; [

<!ELEMENT FRAME - O EMPTY -- subfereastra -->
<!ATTLIST FRAME
%coreattrs; -- id, class, style, title --
longdesc %URI; #IMPLIED -- legatura la o descriere lunga
(completeaza titlul) --
name CDATA #IMPLIED -- numele frameului de tintit --
src %URI; #IMPLIED -- sursa continutului frameului --
frameborder (1|0) 1 -- cere contur frameului? --
marginwidth %Pixels; #IMPLIED -- latimile marginilor in pixeli --
marginheight %Pixels; #IMPLIED -- inaltimea marginii in pixeli --
noresize (noresize) #IMPLIED -- permite utilizatorilor sa redimensioneze frameurile? --
scrolling (yes|no|auto) auto -- bara de defilare sau fara --
>
]]>
Definitiile atributelor
name = cdata [CI]
Acest atribut atribuie un nume frameului curent. Acest nume poate fi utilizat ca tinta a
legaturilor ulterioare.
longdesc = uri [CT]
Acest atribut specifica o legatura la o descriere lunga a frameului. Aceasta descriere ar
trebui sa completeze descrierea scurta furnizata utilizand atributul title si poate fi
folositoare in mod particular agentilor utilizator non-vizuali.
src = uri [CT]
Acest atribut specifica locatia continutului initial de inclus in frame.
noresize [CI]
Cand este prezent, acest atribut boolean spune agentului utilizator ca fereastra frameului
trebuie sa nu fie redimensionabila.
scrolling = auto|yes|no [CI]
Acest atribut specifica informatia de derulare pentru fereastra frameului. Valori posibile
auto: Aceasta valoare spune agentului utilizator sa furnizeze dispozitive de
derulare pentru fereastra frame cand este necesar. Aceasta este valoarea implicita.
yes: Aceasta valoare spune agentului utilizator sa furnizeze intotdeauna
dispozitive de derulare pentru fereastra frame.
no: Aceasta valoare spune agentului utilizator sa nu furnizeze dispozitive de
derulare pentru fereastra frame.
frameborder = 1|0 [CN]
Acest atribut furnizeaza agentului utilizator informatii despre conturul frameului. Valori
posibile:
1: Aceasta valoare spune agentului utilizator sa deseneze un separator intre acest
frame si orice frame adiacent. Aceasta este valoarea implicita.
0: Aceasta valoare spune agentului utilizator sa nu deseneze un separator intre
acest frame si fiecare frame adiacent. De notat ca separatorii pot fi desenati langa
acest frame in orice caz daca sunt specificati de alte frameuri.
marginwidth = pixels [CN]
Acest atribut specifica marimea spatiului care trebuie sa fie lasat intre continutul
frameului si marginile din stanga si din dreapta. Valoarea trebuie sa fie mai mare decat
zero (pixeli). Valoarea implicita depinde de agentul utilizator.
marginheight = pixels [CN]
Acest atribut specifica marimea spatiului care trebuie sa fie lasat intre continutul
frameului si marginile de sus si de jos ale lui. Valoarea trebuie sa fie mai mare decat zero
(pixeli). Valoarea implicita depinde de agentul utilizator.
Atribute definite in alta parte
id, class (identificatori pentru intreg documentul)
title (titlul elementului)
style (informatii de stil inline)
Elementul FRAME defineste continutul si aspectul unui singur frame.
Setarea continutului initial al unui frame
Atributul src specifica documentul initial ce va fi continut de frame.
Urmatorul exemplu de document HTML:
<HTML>
<HEAD>
<TITLE>Un document cu un set de frameuri</TITLE>
</HEAD>
<FRAMESET cols="33%,33%,33%">
<FRAMESET rows="*,200">
<FRAME src="continutul_unui_frame1.html">
<FRAME src="continutul_unui_frame2.gif">
</FRAMESET>
</FRAMESET>
</HTML>
ar trebui sa creeze o aranjare a frameurilor aratand asemanator cu:
------------------------------------------
|Frame 1 |Frame 3 |Frame 4 |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
-------------| | |
|Frame 2 | | |
| | | |
| | | |
------------------------------------------
si sa determine agentul utilizator sa incarce fiecare fisier intr-o sectiune separata.
Continutul unui frame trebuie sa nu fie in acelasi document ca si definitia frameului.

Sintaxa (tag) Setului de frame-uri (Frameset)
Tag-ul [b]<frameset> defineste divizarea ferestrei in mai doua sau mai frame-uri.
Fiecare frameset este definit de un set de linii sau coloane.
Valorile liniilor/coloanelor stabilesc suprafata de pe ecran pe care fiecare linie/coloana o
va ocupa.
Tag-ul Frame
Tag-ul [b]<frame> stabileste ce document HTML trebuie inserat in fiecare frame. In
exemplul de mai jos avem un frameset cu doua coloane. Prima coloana este setata la 25%
din lungimea ferestrei browserului. Cea de-a doua coloana este setata la 75% din lungimea
ferestrei browserului. Documentul HTML "freame_a.htm" este inserat in prima coloana,
iar documentul "frame_b.htm" ocupa a doua coloana:
<frameset cols="25%,75%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>
Sfaturi folositoare
Daca un frame are marginile vizibile, vizitatorul paginii poate modifica dimensiunile
frame-urilor tragand de margine cu ajutorul cursorului de la mouse. Pentru a nu face acest
lucru posibil, puteti adauga [b]noresize="noresize" la tagul <frame>.
Adaugati tag-ul [b]<noframes> pentru browserele care nu au suport pentru frame-uri.
EXEMPLE
[b]Frameset vertical

Acest exemplu va demonstra cum sa construiti un frameset pe verticala care sa contina 3
documente diferite.
<html>

<frameset cols="25%,50%,25%">

<frame src="frame_c.htm">

</frameset>

</html>
[b]Frameset orizontal
Acest exemplu va demonstra cum sa construiti un frameset pe orizontala care sa contina 3
documente diferite.
<html>

<frameset rows="25%,50%,25%">


</frameset>

</html>
[b]Utilizarea tag-ului <noframes>
Acest exemplu va demonstra cum trebuie folosit tag-ul <noframes>.
<html>

<frameset cols="25%,50%,25%">
<noframes>
<body>Your browser does not
handle frames!</body>
</noframes>
</frameset>

</html>
[b]Frameset mixt
Acest exemplu demonstreaza cum sa contruiti un frameset alcatuit din 3 documente, si
cum sa le manipulati ca linii si coloane.
<html>

<frameset rows="50%,50%">


</frameset>

</frameset>

</html>
[b]Frameset cu noresize="noresize"
Acest exemplu va demonstra atributul noresize. Suprafata frame-urilor nu poate fi
modificata. Puteti misca cursorul mouse-ului pe deasupra marginilor dintre frame-uri si
veti observa ca nu puteti misca aceste margini.
<html>


<frame noresize="noresize" src="frame_a.htm">

<frame noresize="noresize" src="frame_b.htm">
<frame noresize="noresize" src="frame_c.htm">
</frameset>

</frameset>

</html>
[b]Frame de navigare
Acest exemplu demonstreaza cum sa construiti un frame de navigare. Frame-ul de
navigare contine o lista a link-urilor ce au ca tinta al doilea frame (paginile se vor deschide
in al doilea frame).
Fisierul numit "tryhtml_contents.htm" contine 3 link-uri.
Codul sursa al link-urilor:
<a href ="frame_a.htm" target ="showframe">Frame a</a><br>
<a href ="frame_b.htm" target ="showframe">Frame b</a><br>
<a href ="frame_c.htm" target ="showframe">Frame c</a>

Al doilea frame va arata documentul care este legat de link.
<html>

<frameset cols="120,*">

<frame src="tryhtml_contents.htm">
<frame src="frame_a.htm"
name="showframe">

</frameset>

</html>
[b]Frame interior
Acest exemplu va demonstra cum sa creati un frame interior (un frame care se afla in
interiorul unei pagini HTML).
<html>
<body>

<iframe src="default.asp"></iframe>

<p>Browserele vechi nu suporta iframes</p>
<p>Astfel ca iframe-ul nu va putea fi vizualizat.</p>

</body>
</html>

adrele sunt introduse prin perechea de etichete <frame> </frame>, si suporta atributele:
src fisierul sau adresa fisierului introdus
bordercolor culoarea chenarului cadrului curent conform modelului #rrggbb
noresize dezactiveaza posibilitatea vizitatorului de a redimensiona cadrul
scrolling adauga cadrului bare de defilare cu valorile yes no si auto
Exemplu: pagina cu doua cadre orizontale in proportia 20% si 80% din inaltimea totala. Pagina
de sus are chenarul rosu iar cea de jos are scroll.
<html>
<head>
<title>Exemplul 8_1</title>
</head>
<frame src="exemplu8_1_1.html" bordercolor="#ff0000">
<frame src="exemplu8_1_2.html" scrolling="yes">
</frameset>
</html>
Exemplu: pagina cu doua cadre verticale in proportia 40% si 60% din latimea totala, fara
posibilitatea de redimensionare a cadrelor
<html>
<head>
</head>
<frame src="exemplu8_2_1.html">
<frame src="exemplu8_2_2.html" noresize>
</frameset>
</html>
Exemplu: pagina cu doua cadre. In cadrul din stanga sunt link-ri catre alte pagini care se vor
deschide in cadrul din dreapta (se poate verifica functionarea atributului target al legaturii).
Cadrul din stanga va avea scroll.
In situatia in care browserul folosit nu suporta pagini care contin cadre, imaginea afisata va fi
goala. Pentru a evita acest lucru vom introduce un mesaj incadrat de <body> si </body> intre
etichetele <noframes> si </noframes> prin care informam vizitatorul ca foloseste un browser
care nu suporta cadre.
<frameset cols = "30%, 40%,*">
<noframes>
<body>Browserul folosit nu suporta cadre</body>
</noframes>
<frame src ="pag1.html">
</frameset>
Cadre in-line
Sunt blocuri care se introduc in pagina prin perechea de etichete <iframe> si </iframe>, si au
atributele:
src fisierul sau adresa acestuia
height inaltimea cadrul
width latimea cadrul
frameborder grosimea bordurii (chenarului)
scrolling adauga bare de defilare cu valorile yes no si auto
align aliniaza cadrul (left, right, center, top, bottom, middle)
vspace distanta peste si sub cadru
hspace distanta in stanga si in dreapta de cadru
Exemplu: o pagina in care este gazduit un cadru in-line. Si aici se poate introduce un mesaj
pentru browserele care nu suporta cadre in-line. Modul de afisare al exemplului poate diferi de la
un browser la altul.
<html>
<head>
</head>
Mai jos este un cadru in-line cu urmatori parametrii:<br>
width="300" si height="200" hspace="200" vspace="100" scrolling="yes"<br>
<iframe src="pag.html" width="300" height="100" hspace="200" vspace="100"
scrolling="yes">Browserul folosit nu suporta cadre in-line</iframe>
</body>
</html>

HTML - Frames, Pagina Generica
In general frame-urile se folosesc pentru a afisa un meniu pe de o parte iar continutul pe de o alta
parte. Atunci cand cineva da un clik pe un link din meniu se va deschide o alta pagina in partea
de continut. Vom exempifica toate acestea cu ajutorul codului urmator:
<html> <head></head>
<frameset cols="30%,*">
<frame src="menu.html">
<frame src="content.html">
</frameset>
</html>
Vizualizare
Vizualizeaza acest exemplu intr-o fereastra noua.
- frameset - Este tagul care stabileste caracteristicile frame-ului. Frame-urile individuale vor fi
definite i nauntrul lui.
- frameset cols="#%, *"- "Cols" stabileste inaltime pe care fiecareframe o va avea. In exemplul
anterion am stabilit ca primul frame (meniul) va ocupa 30% din suprafata afisata, si am folosit
semnul " * " pentru a indica browser-ului ca in restul paginii ramase se va afisa continutul
paginii.
- frame src="" - adresa fisierelor care vor fi afisate ca meniu si respectiv continut.

HTML - Frame- Adaugarea unui banner sau Titlu
Folositi codul urmator:
<html><head></head>
<frameset rows="20%,*">
<frame src="title.html">
<frame src="content.html">
</frameset> </html>
frameset rows="#%, *"- "rows" stabileste inaltimea fiecarui frame care va fi afisat. In
exemplul anterior am ales ca primul frame va fi 20% iar restul de spatiu ramas va fi impartit intre
menu.html si content.html.

HTML - Frame - Margine si Spatiere
Probabil ai observat ca intera frame-uri raman niste linii gri care de multe ori nu sunt dorite.
Inlaturarea lor este posibila cu ajutorul frameborder si framespaciing. Aceste atribute vor fi
introduse innauntru tag-ului frameset.
**Nota: In realitate frameset si frameborder este acelasi atribut. Exista insa browsere care nu
recunosc decat unul dintre cele doua. Deaceia, sfatul nostru, este sa le folositi pe amandoua
pentru mai multa siguranta.
frameborder="#" - Valoarea 0 nu reproduce margine.
- border="#"- modifica grosimea marginii. (folosit de netscape)
- framespacing="#" - modifica grosimea marginii (folosit de Internet Explorer)
Iata si un exemplu practic:
<html><head></head>
<frameset border="0" frameborder="0" framespacing="0" rows="20%,*">
<frame src="title.html">
<frameset border="0" frameborder="0" framespacing="0" cols="30%,*">
<frame src="content.html"> </frameset> </html>

HTML - "frame name" si "frame target"
Pentru a menitine meniul in pozitia actuala iar cand executam clic pe pagina de contact de
exemplu sa se deschida in locul pagini de continut, vom da un nume fiecarui frame si vom
precisa locul unde se va deschide cu ajutorul base target.
Iata si codul pentru pagina noastra
<html><head>
<base target="content">
</head>
<frameset rows="20%,*">
<frame name="title" src="title.html">
<frame name="menu" src="menu.html">
<name="content" src="content.html">
</frameset>
</html>
Noresize si scrolling
Frame-ul se mai poate personaliza inca putin folosind atributele neresizesi scrolling.
<html><head></head>
<frameset border="2" frameborder="1" framespacing="2" rows="20%,*">
<frame src="title.html" noresize scrolling="no">
<frameset border="4" frameborder="1" framespacing="4" cols="30%,*">
<frame src="menu.html" scrolling="auto" noresize>
<frame src="content.html" scrolling="yes" noresize>
</frameset> </html>
- no resize- nu lasa ca framul sa se redimensioneze in functie de monutorul vizitatorului
- scrolling="(yes/no)"- permite sau nu sroll-ul intr-un frame

Fra Muri

Încărcat de

Informații document

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

Fra Muri

Încărcat de

Drepturi de autor:

Formate disponibile

Introducere pentru frameuri

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