Încadrarea este pur si simplu o metoda de plasare a doua sau mai multe ferestre pe ecran în acelasi timp, dând spectatorului controlul asupra unei parti, asupra nici unei parti sau asupra întregului continut a acestor ferestre. O pagina dintr-un cadru poate face trecerea la alte pagini, independent de comportamentul restului afisajului. Acest lucru da unui proiectant Web o mare flexibilitate în organizarea si prezentarea continutului de grafica, text sau multimedia.
Cadrele pot fi clasificate în mod convenabil în doua mari categorii. Mai întâi, cadrele statice. Un cadru static ramâne vizibil utilizatorului indiferent ce ar face acesta, iar continutul sau nu se schimba. Cadrele statice sunt folosite adesea pentru a afisa instrumente de navigare, care în mod normal trebuie sa fie vizitate tot timpul.
În al doilea rând, exista cadrele dinamice. Continutul unui cadru dinamic se va schimba ca raspuns la actiunile utilizatorului, ca de exemplu daca executa clic pe o hiperlegatura.
Colectia de cadre care organizeaza un mediu de cadre se numeste set de cadre. Un set cadre singur nu contine nici o informatie pentru utilizator. Pentru a fi folositor are nevoie de un continut, iar conti 545h75f nutul unui cadru este pur si simplu o pagina HTML. Puteti sa considerati setul de cadre ca un fel de schela pe care se aranjeaza paginile HTML si care face legatura dintre ele. Un set de cadre este continut într-o pagina HTML - de fapt un set de cadre este un fisier de text, ca orice pagina HTML.
Un set de cadre este definit de etichetele :<FRAMESET> si </FRAMESET>, care împreuna creeaza containarul <FRAMESET>. Toate seturile de cadre, chiar si cale mai complexe, sunt produse urmând pasii generali de mai jos:
Creati o pagina HTML care sa contina setul de cadre, folosind urmatorul cod(observati ca nu exista nici o eticheta <BODY>)
<HTML>
<Head>
</Head>
<HTML>
Adaugati câte elemente <Head> doriti, ca de exemplu containarul <Title>.
Imediat dupa eticheta de închidere </Head> , creati principalul containar de set de cadre, folosind perechea de etichete <Frameset> si </Frameset>.
Inserati atributele rows si/sau cols în eticheta <Frameset>. Puteti insera de asemenea alte atribute optionale pentru setul de cadre, dupa cum este necesar.
<FRAMESET cols="50%, 50%">
În containarul principal de set de cadre, inserati o instructiune <Frame src> pentru a specifica adresa URL a fiecarei pagini care va aparea initial în setul de cadre. Trebuie sa aveti o astfel de instructiune <frame> pentru fiecare cadru sau set de cadre.
Adaugati ce atribute optionale doriti la eticheta <Frame>.
Daca este nevoie, inserati mai multe containare set de cadre în interiorul principalului recipient set de cadre. Acestea se numesc cadre imbricate si sunt folosite pentru a crea medii de cadre complexe.
ex.1:<HTML>
<Head>
</Head>
<FRAMESET cols="50%, 50%">
<FRAME src="pagina1.html">
<FRAME src="pagina 2.html">
</FRAMESET>
</HTML>
Sa presupunem ca vreti în stânga un cadru de o traime din latimea ferestrei browser-ului, iar în dreapta un cadru de doua treimi. Atunci ar trebui sa scrieti:
<FRAMESET cols= "*,2*">
Un asterisc reprezinta o felie de fereastra. Pentru a va da seama câte felii are fereastra în total, adunati toate numerele din fata asteriscului
Puteti de asemenea specifica latimea si înaltimea unui cadru în pixeli. Pentru a face acest lucru folositi numere ca valori. Pentru a crea doua cadre, unul de 80 de pixeli înaltime, iar celalalt de 120 de pixeli, trebuie sa scrieti:
<FRAMESET rows= "80,120">
Folosirea definirilor cu pixeli de obicei nu este o idee prea buna. Aceasta deoarece nu stiti cu siguranta ce tip de monitor folosesc vizitatorii paginii dumneavoastra. Daca definiti cadre cu latimea de 800 de pixeli, iar utilizatorii au afisaje de 640/480, cadrele dumneavoastra nu vor încapea în ecranele lor. Definitiile proportionale sau procentuale sunt de obicei mult mai sigure.
Puteti de asemenea sa combinati definitiile, daca trebuie. Sa presupunem ca doriti jumatatea din stânga a ferestrei browser-ului pentru un cadru, iar cealalta jumatate împartita în doua cadre. Unul din aceste cadre va ocupa o treime din jumatatea dreapta, iar celalalt doua treimi.
<FRAMESET cols ="50%,*,2*">
Pagina care furnizeaza continutul unui cadru este apelata de atributul src. Forma generica a atributului src este:
<FRAME src="url">
unde url, bineînteles, este adresa URL a paginii HTML care urmeaza sa fie afisata. Aceasta adresa poate fi orice adresa URL valida, precum si cai catre fisiere HTML locale. Daca vreti sa prezentati pagina de baza Netscape într-un cadru, de exemplu, atributul este:
<FRAME src="https://www.home.netscape.com">
Folosirea containerului <NOFRAME>
Cu toate ca ultimele versiuni ale browser-ului Microsoft Internet Explorer si Netscape Navigator accepta cadrele, nu toata lumea foloseste browsere care recunosc cadrele. Pentru a depasi acest obstacol, folositi containerul <NOFRAME> si introduceti în el o pagina HTML normala. Cei care utilizeaza browsere care nu recunosc cadre vor vedea pagina definita în interiorul containerului <NOFRAME>; codul de set de cadre care încadreaza containerul va fi ignorat. Pentru a face acest lucru se efectueaza urmatorii pasi:
Creati setul de cadre corespunzator.
Inserati containerul <NOFRAME> </NOFRAME> în containerul<FRAMESET>. Daca aveti alt set de cadre imbricat în interiorul setului de cadre principal, asigurati-va ca containerul <NOFRAME> apare în setul de cadre principal, înaintea codului setului de cadre imbricat .
În interiorul containerului creati codul HTML pentru pagina alternativa care va fi vazuta de cei care folosesc browsere care nu accepta cadre. Aceasta pagina este una normala si poate contine orice elemente HTML:
ex.2: <HTML>
<Head>
</Head>
<Frameset cols="50%, 50%">
<Frame src="pagina1.html">
<Frame src="pagina2.html">
<Noframe>
<Head>
<Title>Your Home Page</Title>
</Head>
<Body> ... </Body>
</HTML>
</Noframe>
</Frameset>
</HTML>
Observati ca acesta este singurul caz în care puteti folosi recipientul <Body> în aceeasi pagina cu containerul <Frameset>. Containerul <Body> se afla în interiorul containerului <Noframe>, deci codul setului de cadre îl ignora.
Sa presupunem ca dorim o pagina care sa se încadreze într-o grila care are doua linii si trei coloane. Vom folosi urmatorul cod pentru a obtine o astfel de pagina:
ex.3: <Html>
<Head>
</Head>
<Frameset rows="50%,50%" cols="*,*,*">
<Frame src=" ">
<Frame src=" ">
<Frame src=" ">
<Frame src=" ">
<Frame src=" ">
<Frame src=" ">
</Frameset>
</Html>
Folosirea atributelor etichetei <FRAME>
Puteti controla aspectul si comportamentul seturilor de cadre de paginare folosind anumite atribute <Frame> . Acestea sunt:
Scrolling="yes!no!auto" Atributul optional srolling este folosit pentru a determina daca în cadru vor exista sau nu bare de derulare. Yes face barele de derulare permanent vizibile în cadru. No face ca barele de derulare sa nu fie niciodata vizibile . Auto spune browser-ului sa decida daca barele de derulare sunt necesare si sa le introduca acolo unde este nevoie. Valoarea implicita este auto.
Noresize Atributul optional noresize nu ia valori. El identifica faptul ca utilizatorul nu poate schimba dimensiunile cadrului. Utilizatorii modifica de obicei cadrele prin tragerea marginii cadrului cu mouse-ul pâna în alta pozitie. Implicit toate cadrele permit modificarea dimensiunilor lor.
Marginwidth="valoare" Atributul optional marginwidth este folosit când doriti sa controlati marginile textului sau ale imaginilor din cadru. Daca este specificata, valoarea acestui atribut este în pixeli. Marginile nu pot fi mai mici de un pixel. Implicit browser-ul decide o latime corespunzatoare a marginii.
Marginheight="valoare" Atributul optional marginheight se comporta ca si atributul marginwidth, cu exceptia faptului ca el controleaza marginile superioare si inferioare ale cadrului.
Folosirea atributelor de chenar cadru
Frameborder="0" elimina chenarul 3D al tuturor cadrelor din setul de cadre. Daca sunt necesare sau cer bare de derulare pentru un cadru, acestea vor ramâne vizibile chiar când chenarul cadrului nu se va vedea. Frameborder="1" trece chenarul în modul vizibil .
Framesapcing="valoare", unde valoare se da în pixeli, stabileste grosimea chenarului 3D.
ex.4: <Html>
<Framset cols="20%,80%">
<Frame src=" ">
<Frameset rows="30%,70%">
<Frame src=" ">
<Frame src=" ">
</Frameset>
</Frameset>
</Html>
1.Începeti prin crearea unui set de cadre de doua ferestre astfel:
<Html>
<Frameset cols="50%,50%">
<Frame src="pagina1.html" name="left">
<Frame src="pagina2.html" name="right">
</Frameset>
</Html>
Observati atributul name care a fost adaugat în cadrul etichetei . Name atribuie un nume fiecarui cadru den setul de cadre; sau, cu alte cuvinte, fiecare fereastra a setului de cadre are propriul sau nume.
2. Acum vom modifica codul HTML al paginii "pagina1.html", pagina care contine hiperlegaturile, astfel încât aceste hiperlegaturi sa trimita paginile lor la fereastra potrivita. Pentru a face acest lucru adaugati atributul Target la codul hiperlegaturii paginii HTML, astfel:
<Html>
<Body>
<H1>Link-uri:</H1>
<br><br>
<A href="vânzari.html" target="right">Departamentul de vânzari </A>
<br>
</Body>
</Html>
Uneori dorim ca toate ca toate sau majoritatea legaturilor dintr-o pagina HTML sa apara în aceeasi fereastra. Daca sunt multe astfel de pagini, ar trebui sa specificati atributul Target pentru fiecare legatura în parte. Pentru a evita sa scrieti de mai multe ori acelasi lucru puteti folosi eticheta <Base> cu atributul Target:
<Html>
<Head>
<Base target="right">
</Head>
<Body>...
</Body>
</Html>
Linia <Base target="right"> specifica faptul ca toate legaturile de pe aceea pagina se vor încarca în fereastra cu numele right. Daca doriti ca una sau mai multe legaturi sa în alta fereastra decât right, pur si simplu specificati un atribut Target pentru acele legaturi. Acest lucru anuleaza efectul etichetei <Base> pentru acea legatura.
Un clic pe o legatura deschide o noua fereastra de browser în care apare pagina legata. Aceasta noua fereastra se numeste fereastra copil(child), iar fereastra care contine legatura initiala este fereastra parinte(parent) . Când utilizatorul închide fereastra copil, pagina continând legaturile ramâne pe ecran în fereastra parinte a browser-ului.
Crearea unei pagini noi când dam clic pe o legatura se face astfel:
<A href="pagina2.html" target="any_window">Pagina 1</A>
Se observa ca fereastra "any_window" nu a fost definita pâna acum si, foarte important de retinut faptul ca aceasta pagina nu face parte dintr-un set de cadre.
Folosirea valorii TARGET="_Blank"
Folosirea acestei tinte forteaza pagina legata sa fie încarcata într-o fereastra noua de browser. Din punct de vedere functional este acelasi lucru cu a crea o fereastra copil, numind acea fereastra într-o legatura. Diferenta consta în faptul ca folosind numele predefinit _blank noua fereastra nu are nici un nume asociat ei. Se poate de asemenea folosi valoarea _blank pentru a anula atributul target specificat în linia Base Target a paginii, daca exista aceasta linie.
Folosirea valorii TARGET="_self"
Folosirea acestei tinte forteaza pagina legata sa fie încarcata în fereastra sau în cadrul care contine legatura initiala. Da fapt anulati orice atribut target continut în legatura sau în linia Base Target a paginii, daca exista aceasta linie. Puteti folosi Target="_self" într-un set de cadre pentru a determina ca pagina legata sa se deschida în acelasi cadru ca si legatura.
Folosirea TARGET="_parent"
Folosirea acestei tinte forteaza Pagina legata sa fie încarcata în fereastra sau în cadrul care contine legatura initiala si restaureaza fereastra browser-ului.
Aceasta tinta actioneaza ca _self, cu exceptia faptului ca restaureaza fereastra browser-ului. Efectul concret al acestei actiuni are nevoie de o mica explicatie. Daca legatura care contine tinta _parents afla într-un cadru sau într-un set de cadre, când se executa clic pe legatura dispar toate cadrele din afisajul browser-ului. Ele sunt înlocuite de o singura fereastra fara cadre. Aceasta actiune de înlocuire este denumita restaurarea ferestrei. Pagina legata este apoi încarcata în aceasta fereastra .
Folosirea TARGET="_top" pentru a iesi dintr-un set de cadre
Uneori doriti ca o legatura sa se încarce în propria sa fereastra de browser, dar nu vreti sa produceti o fereastra copil. Cel mai simplu mod de a realiza acest lucru este sa folositi tinta _top în cadrul legaturii. Indiferent cât de adânc a patruns în cadrele sau seturile de cadre copil, _top îl va scoate din ele si-l va duce în cel mai sus nivel al ierarhiei ferestrelor.
O bara flotanta de navigare este una pe care utilizatorul o poate deplasa pe ecran si careia îi poate modifica marimea dupa cum este necesar. Daca doriti sa construiti una, tot ceea ce trebuie sa faceti este sa creati si sa salvati pagina care contine bara de navigare. Codul sau HTML ar arata astfel:
ex.5:
<HTML>
<Head>
<Title> Bara de navigare</Title>
<Base target="a_window">
</Head>
<Body>
<A href="Sales.html">Sales</A>
<BR><BR>
<A href="products.html">Products</A>
<BR><BR>
<A href="contacts.html">Co0ntacts</A>
</Body>
</HTML>
Când utilizatorul executa clic pe o legatura, pagina
legata apare în propria sa fereastra, care este definita de
linia de cod <Base
Target="a_window">. De fiecare data când se efectueaza clic pe
o legatura, noua pagina apare în fereastra a_window, înlocuind pagina anterioara.
|
