curs webdesign
Frame-uri în HTML
•
Cu frame-uri, puteti publica mai multe documente HTML care vor fi deschise in aceeasi fereastra a browser-ului. Fiecare document HTML deschis in fereastra browser-ului se numeste frame, iar fiecare frame se comporta independent fata de celelalte frame-uri. Dezavantajele utilizarii frame-urilor: Dezvoltatorul Web trebuie sa aiba in vedere mai multe documente HTML Printarea intregii pagini este relativ dificila.
Sintaxa (tag) Setului de frame-uri (Frameset) •
Tag-ul <frameset> defineşte divizarea ferestrei în două sau mai multe frame-uri. Fiecare frameset este definit de un set de linii sau coloane. Valorile liniilor/coloanelor stabilesc suprafaţa de pe ecran pe care fiecare linie/coloană o va ocupa.
Tag-ul Frame •
Tag-ul <frame> stabileşte ce document HTML trebuie inserat în fiecare frame. În exemplul de mai jos avem un frameset cu două coloane. Prima coloană este setată la 25% din lungimea ferestrei browserului. Cea de-a doua coloană este setată la 75% din lungimea ferestrei browserului. Documentul HTML "frame_a.htm" este inserat în prima coloană, iar documentul "frame_b.htm" ocupă a doua coloană: <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 tragând de margine cu ajutorul cursorului de la mouse. Pentru a nu face acest lucru posibil, puteţi adăuga “noresize” la tagul <frame>. Adaugati tag-ul <noframes> pentru browserele care nu au suport pentru frame-uri.
Exemple •
Frameset vertical Acest exemplu va demonstra cum să construiţi un frameset pe verticală care să conţină 3 documente diferite. <html> <frameset cols="25%,50%,25%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> <frame src="frame_c.htm"> </frameset> </html>
•
Frameset orizontal Acest exemplu va demonstra cum sa construiţi un frameset pe orizontală care să conţină 3 documente diferite. <html> <frameset rows="25%,50%,25%">
1
curs webdesign <frame src="frame_a.htm"> <frame src="frame_b.htm"> <frame src="frame_c.htm"> </frameset> </html> •
Utilizarea tag-ului <noframes> Acest exemplu va demonstra cum trebuie folosit tag-ul <noframes> <html> <frameset cols="25%,50%,25%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> <frame src="frame_c.htm"> <noframes> <body>Your browser does not handle frames!</body> </noframes> </frameset> </html>
•
Frameset mixt Acest exemplu demonstreaza cum sa contruiţi un frameset alcatuit din 3 documente şi cum să le manipulaţi ca linii şi coloane. <html> <frameset rows="50%,50%"> <frame src="frame_a.htm"> <frameset cols="25%,75%"> <frame src="frame_b.htm"> <frame src="frame_c.htm"> </frameset> </frameset> </html>
•
Frameset cu noresize="noresize" Acest exemplu va demonstra atributul “noresize”. Suprafaţa frame-urilor nu poate fi modificată. Puteţi misca cursorul mouse-ului pe deasupra marginilor dintre frame-uri şi veţi observa că nu puteţi mişca aceste margini. <html> <frameset rows="50%,50%"> <frame noresize="noresize" src="frame_a.htm"> <frameset cols="25%,75%"> <frame noresize="noresize" src="frame_b.htm"> <frame noresize="noresize" src="frame_c.htm"> </frameset> </frameset> </html>
•
Frame de navigare Acest exemplu demonstrează cum să construiţi un frame de navigare. Frame-ul de navigare conţine o listă a link-urilor ce au ca ţintă al doilea frame (paginile se vor deschide în al doilea frame). Fişierul numit "tryhtml_contents.htm" conţine 3 link-uri. Codul sursă 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>
2
curs webdesign Al doilea frame va arăta documentul care este legat de link. <html> <frameset cols="120,*"> <frame src="tryhtml_contents.htm"> <frame src="frame_a.htm" name="showframe"> </frameset> </html> •
Frame interior Acest exemplu va demonstra cum să creaţi un frame interior (un frame care se află în interiorul unei pagini HTML). <html> <body> <iframe src="pag.html"></iframe> <p>Browserele vechi nu suporta iframes</p> <p>Astfel ca iframe-ul nu va putea fi vizualizat.</p> </body> </html>
Alte exemple pentru frame-uri Exemplele prezentate în capitolele anterioare încărcau o singură pagina HTML în fereastra browserului. Sunt şi situaţii în care imaginea afişată de browser este formată din mai multe pagini HTML numite cadre. Caracteristic acestor pagini este că perechea de etichete <body> </body> este înlocuită de <frameset> </frameset>, iar în interiorul lor cadrele sunt delimitate de <frame> şi </frame>. Atributele etichetei frameset sunt: cols împarte pagina în coloane şi are valori exprimate în procente din dimensiunea ferestrei, număr de pixeli sau * adică spaţiul rămas rows împarte pagina în rânduri cu aceleaşi valori ca la cols bordercolor culoarea tuturor chenarelor conform modelului #rrggbb frameborder inhibarea afişării chenarelor cu valorile yes sau no Cadrele sunt introduse prin perechea de etichete <frame> </frame>, şi suportă 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 două cadre orizontale în proportia 20% si 80% din înălţimea totală. Pagina de sus are chenarul roşu iar cea de jos are scroll. <html> <head> <title>Frameuri</title> </head> <frameset rows="20%,80%"> <frame src="pag1.html" bordercolor="#ff0000"> <frame src="pag2.html" scrolling="yes"> </frameset> </html>
3
curs webdesign Exemplu: 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>Frameuri</title> </head> <frameset cols="40%,60%"> <frame src="pag1.html"> <frame src="pag2.html" noresize> </frameset> </html> Exemplu: pagină cu două cadre. În cadrul din stânga sunt link-ri către alte pagini care se vor deschide în cadrul din dreapta (se poate verifica funcţionarea atributului target al legăturii). Cadrul din stânga va avea scroll. În situaţia în care browserul folosit nu suportă pagini care conţin cadre, imaginea afişată va fi goală. Pentru a evita acest lucru vom introduce un mesaj încadrat de <body> şi </body> între etichetele <noframes> şi </noframes> prin care informăm vizitatorul că foloseşte un browser care nu suportă cadre. <frameset cols = "30%, 40%,*"> <noframes> <body>Browserul folosit nu suporta cadre</body> </noframes> <frame src ="pag1.html"> <frame src ="pag2.html"> <frame src ="pag3.html"> </frameset>
Cadre in-line Sunt blocuri care se introduc în pagină 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 şi 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 Exemplu: 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>Frameuri</title> </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>
4
curs webdesign
TEMĂ
1. Să se creeze un sistem de 2 cadre verticale, cel din stânga conţinând o pagină cu o imagine, cel din dreapta o pagină cu text despre imagine. 2. Să se creeze 2 cadre orizontale, în cel de sus încărcându-se o pagină de tip meniu cu link-uri şi cel de jos o pagină oarecare cu text, imagini şi o listă. 3. Să se creeze o pagină cu 2 cadre verticale, cel din stânga încărcând o pagină de tip meniu cu link-uri şi cadrul din dreapta încărcând paginile corespunzătoare link-urilor din stânga.
5