duminică, 13 noiembrie 2011

Activitatea nr.9: 18.11-22.11

Tema nr.4:  Cadre/frame  HTML

Unitatea de invatare:
Instrumente de lucru pentru crearea site-urilor Web
Tipul lectiei: Dobandire de noi cunostinte


Cadre 

În tot ceea ce s-a prezentat în sectiunile anterioare s-a presupus cã utilizatorul vede pe ecran un document HTML într-o fereastrã atasatã acelui document.
Acest lucru - o fereastrã, un document - este de multe ori deranjant prin aceea cã se pierde "firul" drumului parcurs iar întoarcerile sunt mai dificil de efectuat.
Pentru a se rezolva aceastã problemã, cât si pentru reducerea timpilor de încãrcare, mãrirea atractivitãtii prezentãrilor etc., s-a introdus tehnica "subferestrelor", uzualã în procesãrile de texte (sau în mediul Windows, în general), de divizare a ferestrei principale a browserului în sectiuni.
Fiecare asemenea "ochi de geam" este considerat o nouã fereastrã, poate sã fie atasatã unui document HTML, astfel încât simultan pe ecran putem vizualiza mai multe documente. Între ferestre putem naviga, putem trece dintr-o fereastrã într-un document pe care-l vizualizãm în altã fereastrã, astfel încât legãturile dintre documente rãmân mereu vizibile. Vom numi o asemenea fereastrã cadru, sau vom utiliza termenul englezesc frame.

Definirea unei structuri de cadre este relativ simplã, similarã definirii unui tabel. Deosebirea importantã este aceea cã structura generalã a documentului HTML, care introduce structura de cadre, este modificatã fatã de structura unui document care nu contine cadre.

În documentele care definesc o structurã de cadre containerul BODY este înlocuit cu containerul FRAMESET, tagul care este dedicat structurii de cadre.
Documentele care vor fi vizualizate într-un cadru nu trebuie sã fie modificate în nici un fel, cu exceptia cazului în care se doreste includerea atributului de fereastrã tintã.

Sunt si situatii in care imaginea afisata de browser este formata din mai multe pagini HTML numite cadre. Caracteristic acestor pagini este ca perechea de etichete <body> </body> este inlocuita de <frameset> </frameset>, iar in interiorul lor cadrele sunt delimitate de <frame> si </frame>.
Cadrele, sau frame-uri, sunt folosite pentru impartirea ferestrei browser-ului astfel incat sa fie afisate mai multe pagini in aceeasi fereastra de browser.
Un frame (cadru) este o parte din suprafata ferestrei browserului.
Fiecare frame prezinta în interior un document propriu (in general un document HTML).
De exemplu puteti creea doua cadre intr-o fereastra, in primul cadru puteti incarca un document HTML (ex. doc1.htm) iar in al doilea cadru un alt document HTML, de la alta adresa (ex. doc2.htm)
Dupa cum puteti vedea in imaginea de mai jos.
Structura generalã a unui document cu frame-uri este prin urmare:

<HTML>
    <HEAD>
 ...
    </HEAD>
    <FRAMESET>
 ...
    </FRAMESET>
</HTML>
Containerul FRAMESET poate sã includã alte containere FRAMESET încât structura definitã poate deveni suficient de complexã.
Exemplul disponibil pentru un document cu cadre este pagina de fatã. Fiecare parte a ferestrei principale este un frame, fiecare cu afisajele sale. Se observã cã fiecare cadru suportã orice actiune posibilã pentru o fereastrã "întreagã". Se poate deci accepta ideea cã un document fãrã cadre este de fapt un document cu un singur cadru.
O ultima observatie este aceea cã ideea de cadre este o extensie Microsoft si Netscape. Alte browsere nu vor accepta structurile de cadre, dar este mai mult ca sigur ca viitoarele standarde HTML vor asimila ideile privind cadrele.

Definirea structurii de cadre

O structurã de cadre se defineste similar unui tabel:
  1. se stabilesc un numãr de linii (sau de coloane) si
  2. pentru fiecare linie (respectiv coloanã):
    • se stabileste continutul sãu sau
    • o altã structurã de cadre.
Tagul principal este FRAMESET (reamintim cã el înlocuieste, la nivelul cel mai exterior, tagul BODY).  

<FRAMESET [ ROWS="structura-linii"]
[ COLS="structura-coloane"]
[ FRAMEBORDER=1|0] [ FRAMESPACING=interspatiu]>
continut-cadre
</FRAMESET> 

introduce o structurã de cadre pentru documentul curent.
  • ROWS si COLS definesc structura initialã de linii si coloane, interpretând fiecare celulã drept un cadru. Nu este obligatorie prezenta ambelor atribute, lipsa fiind consideratã ca valoare implicitã 1. Structura liniilor/coloanelor este datã ca o listã de valori, separate prin virgule. Mãsurile pentru spatiul ocupat de respectiva structurã pot fi absolute sau relative. 
Un element al listei poate fi
  • numãr absolut de pixeli;
  • un procent - cât la sutã din fereatra utilizatorului sã fie ocupatã de linia/coloana respectivã;
  • caracterul * - cu semnificatia "ce rãmâne" dupã ce s-au alocat dimensiunile fixe sau relative. Dacã sunt mai multe valori *, atunci se distribuie spatiul rãmas între ele; dacã o valoare * este precedatã de un numãr, cum ar fi 2*, atunci, la împãrtirea pãrtii rãmase, aceastã linie/coloana va participa cu ponderea indicatã de coeficientul asteriscului.
De exemplu, o lista de genul ROWS="120, 10%, *, 3*" va produce o serie de patru linii: prima cu o înãltime fixã de 120 de pixeli, a doua va avea 10% din fereastra utilizator, iar ceea ce rãmâne dupã aceste douã atribuiri se va repartiza între urmãtoarele douã linii în raportul 1 la 3. Utilizarea unor valori absolute necesitã mai multã atentie deoarece s-ar putea ca spatiul alocat sã nu poatã include informatia atasatã. Oricum browserul face o scalare încât sã fie folosit tot spatiul de pe ecranul utilizatorului.
Alocarea datã prin COLS si/sau ROWS este valabilã doar pentru afisarea initialã a paginii: utilizatorul are, în general, posibilitatea sã o modifice potrivit nevoilor de consultare.
  • FRAMEBORDER specificã prezenta sau absenta chenarului: 1 = prezentã; 0 = absentã. Valoarea prezentã devine implicitã pentru toate tagurile FRAMESET ulterioare. Aceasta este o optiune Microsoft (nu si Netscape). FRAMESPACING indicã prezenta unui spatiu suplimentar între cadre. Valoarea este în pixeli. Aceasta este o optiune Microsoft (nu si Netscape).
continut-cadre contine descrierea cadrelor, realizatã prin taguri FRAME si/sau FRAMESET.
De remarcat, încã o datã, cã prin FRAMESET se introduce o structurã de cadre. Acest tag se va utiliza doar atunci când se doreste structurarea ecranului sau a unei zone din ecran.

<FRAME [ SRC="adresa-URL"] [ NAME="nume-cadru"] [ NORESIZE] [ SCROLLING="yes"|"no"|"auto"] [ MARGINWIDTH="lãtime"] [ MARGINHEIGHT="&înãltime"] [ ALIGN=top|middle|bottom|left|right] [ FRAMEBORDER=0|1]> 

defineste continutul si atributele unui cadru.
  • SRC precizeazã adresa absolutã sau relativã a documentului HTML care va fi inserat în cadrul respectiv. De remarcat cã dacã noul document este structurat pe cadre, structurarea are loc doar pentru "ochiul de geam" detinut de document.
  • NAME precizeazã numele cadrului. Acesta este numele cu care poate fi referit cadrul atunci când se doreste încãrcarea unui document în cadrul respectiv (se realizeazã prin utilizarea atributului TARGET din tagul A).
  • NORESIZE aratã cã dimensiunile cadrului nu pot fi modificate de utilizator. În lipsa acestei optiuni utilizatorul poate sã modifice dimensiunile unui cadru prin drop-and-drag pe bordurile acestuia (operatiunea va reduce/mãri dimensiunea celorlalte frame-uri si alocarea initialã a spatiului nu va mai functiona).
  • SCROLLING specificã dacã frame-ul va contine sau nu bare de defilare:
  • "yes" - bare de defilare inserate;
  • "no" - fãrã bare de defilare;
  • "auto" - barele de defilare se insereaza doar dacã este nevoie.
În cazul când dimensiunea cadrului nu permite afisarea întregului document si nu este permisã defilarea, partea neafisatã rãmâne inaccesibilã utilizatorului. Unele browsere permit totusi afisarea unui document într-o fereastrã separatã, independentã de structura initialã de cadre.
  • MARGINWIDTH, MARGINHEIGHT specificã dimensiunile, în pixeli, pentru marginile laterale, respectiv marginile de sus si jos, în cadrul frame-ului (distantele textului la marginile frame-ului).
  • ALIGN comandã modul de aliniere a textului în cadru. Aceasta este o optiune Microsoft (nu si Netscape).
  • FRAMEBORDER specificã dacã frame-ul are chenar (1) sau nu are chenar (0). Valoarea definitã devine implicitã pentru tagurile FRAME ulterioare, pânã la o nouã atribuire. Aceasta este o optiune Microsoft (nu si Netscape). Fiecare cadru trebuie sã aibã atasat un tag FRAME pentru a putea fi utilizat. Ordinea de definire a cadrelor este cea uzualã, de la stânga la dreapta, de sus în jos, în cuprinsul FRAMESET-ului curent.

<IFRAME [SRC="adresa-URL"][NAME="nume-cadru"][SCROLLING="yes"|"no"] [MARGINWIDTH="lãatime"][MARGINHEIGHT="înãltime"][ ALIGN=top|middle|bottom|left|right] [ FRAMEBORDER=0|1]> 

defineste continutul si atributele unui cadru flotant în interiorul unui FRAMESET. Aceasta este o optiune Microsoft (nu si Netscape).
Atributele si valorile sunt identice cu cele similare de la FRAME.

Exemple
Structurile prezentate în continuare exemplifica modul în care se pot defini structuri de linii si coloane de frame-uri.

Primul exemplu aratã cum a doua coloanã dintr-o structurã poate fi segmentatã, la rândul ei, în douã linii. Se vor identifica totodatã elementele implicite de la definirea de cadre: borduri, dimensiuni fixe. Fiecare cadru este denumit în structurã pentru a putea fi referit.


<FRAMESET COLS="30%,*">
    <FRAME SRC="frame1.html" NAME="window_1">
    <FRAMESET ROWS="40%,*">
 <FRAME SRC="frame2.html" NAME="window_2">
 <FRAME SRC="frame3.html" NAME="window_3">
    </FRAMESET>
</FRAMESET>
Exemplu

Exemplul al doilea aratã cum poate fi sectionatã coloana intermediarã  dintr-o structurã de trei coloane. Se va remarca la primul frame  aparitia barelor de defilare si interzicerea lor la frame-ul al  patrulea. Încercati sã modificati dimensiunea cadrelor (prin miscarea  mouse-ului) si sã observati efectul asupra barelor de defilare.





<FRAMESET COLS="20%,60%,*">
    <FRAME SRC="frame1.html" NAME="window_1" SCROLLING="yes">
    <FRAMESET ROWS="40%,*">
 <FRAME SRC="frame2.html" NAME="window_2">
 <FRAME SRC="frame3.html" NAME="window_3">
    </FRAMESET>
    <FRAMESET COLS="100%">
        <FRAME SRC="frame4.html" NAME="window_4" SCROLLING="no">
    </FRAMESET>
</FRAMESET>
Exemplu

Pentru browserele care nu acceptã extensiile pentru cadre existã posibilitatea unei alternative prin NOFRAMES.     <NOFRAMES>

text

</NOFRAMES>

indicã unui browser care interpreteazã cadre sã ignore textul din  containerul NOFRAMES. Un browser care nu interpreteazã cadre va ignora  toate tagurile legate de cadre, deci si tagul NOFRAMES, dar va  interpreta textul. Rezultã ca în textul dat se va trece un  document HTML care sã realizeze, mai putin evoluat grafic, o parte din  ceea ce se realiza prin structura de frame-uri.

Tagul NOFRAMES se poate scufunda doar în containerul FRAMESET. 
 Sarcina de lucru:
  1. Analizati urmatorul cod HTML si discutati impreuna cu colegii. 
    <HTML>
    
<HEAD>
    
<TITLE> TITLU PAGINII </TITLE>
    
</HEAD>
    
<FRAMESET COLS="120,*">
    
<FRAME SRC="baner.htm">
    
<FRAMESET COLS="120,*">
    
<FRAME SRC="Meniu.htm" NAME="meniu">
    
<FRAME SRC="Continut.htm" NAME="date">
    
</FRAMESET>
    
</FRAMESET>
    
<BODY>
    
</BODY>
    
</HTML>          
    2. Creati o pagina HTML care sa contina doua cadre, cel din stânga ocupând 23% din spatiul paginii iar cel din dreapta 77%
    2. 

Solutii:
<HTML>

<HEAD>

<TITLE> TITLU PAGINII </TITLE>

</HEAD>

<FRAMESET COLS="23%,77%">

<FRAME SRC="doc1.htm" NAME="left" SROLLING="NO">

<FRAME SRC="doc2.htm" NAME="right" SROLLING="YES">

</FRAMESET>

<BODY>

</BODY>

</HTML>      












la

































12 comentarii:








  1. Gabriel28 noiembrie 2011 la 21:41
    "1.Analizati urmatorul cod HTML si discutati impreuna cu colegii. ".S-a discutat la ora trebuie sa-l avem doar copiat in caiet cu data...;)
    RăspundețiȘtergere
  2. Bogdan Cosofret28 noiembrie 2011 la 22:43
    avem procedee asemanatoare ca si la tabele, simplu mi se pare
    RăspundețiȘtergere
  3. Ana Maria Ciobanu 12 D29 noiembrie 2011 la 05:38
    A doua sarcina de lucru trebuie sa o punem pe stick sau sa o trimitem pe mail?
    RăspundețiȘtergere
  4. Lavinia29 noiembrie 2011 la 05:43
    Trebuie trimisa pe e-mail-ul profesorului.
    RăspundețiȘtergere
  5. Raluca Simion29 noiembrie 2011 la 13:29
    aplicatiile care nu le putem face in caiet trebuie sa le avem pe stick.
    RăspundețiȘtergere
  6. E-Emanuela30 noiembrie 2011 la 22:18
    Aplicatiile discutate la ora, exemplificate de profesor la videoproiector trebuie sa le faceti si voi, deci trebuie sa le aveti pe stik, dar mai exact sa le trimiteti pe adresa de email,
    RăspundețiȘtergere
  7. Raluk1 decembrie 2011 la 02:32
    v-am trimis o parte din aplicatii,insa acum verificand,mi-am dat seama ca pe cele de la cadre nu le-am facut.dar le voi face chiar acum:D
    RăspundețiȘtergere
  8. Rupanu Mihai7 decembrie 2011 la 10:37
    Nu sunt asa grele aceste aplicatii..dar cand trebuie sa le facem in clasa e mai greu ca nu prea functioneaza bine calculatoarele....
    RăspundețiȘtergere
  9. Nistor Madalina-Elena7 decembrie 2011 la 12:45
    Mi-a placut lectia, explicatia dumneavoastra si aplicatia mi-a iesi cu brio :))
    RăspundețiȘtergere
  10. princoschi daniel7 decembrie 2011 la 21:18
    de acord cu Madalina ,aceasta lectie chiar a  fost explicata foarte bine
    RăspundețiȘtergere
  11. valy8 decembrie 2011 la 09:06
    cum pot trimite aplicatiile pe e-mail? k nu-mi da voie sa le trimit...
    RăspundețiȘtergere
  12. Iacob Marius8 decembrie 2011 la 10:45
    sunt mai grele fata de tabele
    RăspundețiȘtergere




























        

      









Abonați-vă la:
Postare comentarii (Atom)