Sunteți pe pagina 1din 6

Creare de pagini Web

Frame-urile reprezint elementul potrivit pentru designeri atunci cnd doresc


ca homepage-ul s aib o structur corespunztoare, iar navigarea s fie pe msur.
1.Planificare i pregtire
n cazul n care dorii s introducei frame-uri n homepage, trebuie s lmurii
cteva lucruri: n ce scop utilizai frame-urile? Cte frame-uri sunt necesare? Cum se
mpart paginile?
Apoi luai o hrtie i un creion. Pe o foaie A4 proiectai n mare mprirea
paginii. Liniile nu trebuie s fie poziionate la milimetru, dar aceast schi v ajut s
avei o imagine asupra structurii paginii. Schiai n rame i coninutul indicai bara de
navigare i includei imaginile. Nu facei economie de timp lucrai pn cnd suntei
mulumii de proiect. Pentru c n momentul n care ncepei cu realizarea frameurilor, eventualele modificri vor duce la pierdere de vreme. ncepe apoi transpunerea
n practic. Scriei - eventual cu Notepad - trei noi fiiere HTML cu urmtorul coninut:
<html><body bgcolor=red> cadru X</body></html>
n locul lui X scriei cifrele de la 1 la 3. Salvai aceste fiiere sub numele de
cadrul.html pn la cadru3.html. Dac dorii, putei schimba indicaia de culoare din
al doilea i al treilea fiier, de exemplu:
<body bgcolor=yellow> . i
<body.b.gcolor=green>
Aceste pagini-schi v ajut la construirea setului de frame-uri i permit
verificarea mpririi. Coninutul propriu-zis va putea fi alctui ulterior.
2.mprirea setului de frame-uri
Tag-ul html<frameset> este rspunztor pentru frame-uri. Determinani sunt
parametrii rows i cols: rows mparte fereastra orizontal pe rnduri, iar cols vertical pe
coloane. Acestea vor mai obine pe parcurs alte cteva valori. De numrul de indicaii
desprite prin virgul depinde numrul de coloane sau de rnduri. Indicaia
<frameset.cols="33%, 33%, 33%"> mparte fereastra browserului n trei coloane de
dimensiuni egale. Cu <frameset rows="10%, 90%"> vei mpri fereastra n dou
rnduri. Primul rnd ocup o zecime din nlimea ferestrei, iar cea de a doua 90 de
procente. n locul procentajului putei indica dimensiunile i cu valori n pixeli. O poziie deosebit ocup caracterul *, anume acesta semnific: ocup restul ferestrei.
3.Drumul spre primul frameset
Cu ajutorul unei valori n pixeli, putei stabili n partea dreapt o coloan fix
pentru bara de navigare, iar celei de a doua coloane i atribuii restul spaiului
ferestrei.Pentru un prim test introducei listing-ul 1 i salvai-l sub numele de
frame.html. Aceste valori atribuie primei coloane 160 de pixeli, iar restul rmne
pentru coloana a doua. Pentru ncrcarea datelor n frame-uri rspunde <frame
src...>.
Important: atribuii fiecrui frame un nume (name=...), deoarece astfel vei simplifica
organizarea ulterioar. n cadrul primului test vei observa i avantajul indicrii
valorilor n pixeli, atunci cnd dorii s mrii sau s micorai fereastra browserului: n
timp ce cadrul din dreapta se modific odat cu dimensiunea ferestrei browserului,
cel din stnga rmne mereu la fel.
4.ncastrarea frameset-urilor
Pentru a submpri fereastra browserului att orizontal ct i vertical, trebuie
s ncastrai dou frame-uri unul ntr-altul. Schia, pe care ai realizat-o iniial, va fi
acum de folos. Pentru c aici putei estima ct spaiu necesit fiecare cadru. n
exemplul de fa, coloana din stnga va avea o lime de 160 de pixeli, iar bara de
navigare din partea de sus a ferestrei va avea o nlime de 70 de pixeli. Salvai
listing-u1 2 sub numele de frame l.html i verificai layout-ul cu browserul. n cazul n
care dorii ca bara de navigare s ocupe toat limea ferestrei, ncastrai frameurile
invers i realizai iniial mprirea orizontal i doar apoi cea vertical. Salvai
aceast definiie de frameset sub numele de frame2.html. Observai diferenele
pentru reprezentare fa de frame l. html - mprirea arat acum cu totul altfel.
5.Frame-uri fr rame inestetice

Dup ce ai pus pe picioare structura, putei s v ocupai i de partea estetic. In


majoritatea cazurilor, ramele sunt deranjante i inestetice. Aceste borduri pot fi
ndeprtate cu ajutorul parametrului suplimentar border=0: <fra~set rows="70, *"
bordez=0> Important: acest parametru funcioneaz numai n cazul frameset-urilor
ncastrate i numai n prima indicaie frameset. n toate celelalte tag-uri frameset,
border nu are nici un efect. Ambele versiuni actuale de Navigator i Explorer recunosc
fr probleme parametrul border. Pentru a evita incompatibilitatea fa de versiunile
mai vechi de browser, este indicat s extindei tag-ul cu indicaii pentru versiuni mai
vechi de Internet Explorer: <frameset rows="70, *" border=Oframeborder=0'framespacing=0> framespacing stabilete n Internet Explorer distana dintre cadre,
frameborder este analog cu border n browserele mai vechi. n cazul n care n tag-ul
frameset utilizai ambii parametri, pentru a defini culoarea frame-urilor, trebuie s
atribuii aceleai valori pentru aceste indicaii.
6.Definirea distanelor fa de margini
n cazul unui layout foarte exact, sunt deranjante distanele prea mari fa de
margini. Browserele include automat asemenea distanri. Prin intermediul a doi
parametri pentru tag-ul frame, avei posibilitatea de a stabili valoarea exact a
acestor margini: <frame src="cadru3.html" name="continut" marginwidth=0
marginheight=0> marginwidth stabilete distana fa de marginile laterale. n cazul
valorii 0, textul va ncepe de la marginea paginii. Marginwidth este valabil att pentru
marginea din dreapta ct i pentru cea din stnga: Netscape Navigator va include
totui, n ciuda valorii 0, o distan de l pixel. Pentru marginea de sus i cea de jos
este nevoie de parametrul marginheight. Valoarea 0 nu va plasa coninutul lipit de
marginea de sus a ferestrei - vor rmne 5 pixeli n Navigator i 4 n Explorer.
Folosii aceste indicaii pentru margini doar pentru layout-ul brut. n cazul n
care dorii s poziionai exact texte sau imagini, este indicat s folosii tabele. Mai
multe amnunte despre tabele vei afla din episodul al treilea al acestui serial.
7.Limitri raionale
Bordurile prezint i un al doilea avantaj n designul frame-urilor: ele pot fi
deplasate. n acest fel se pot modifica dimensional ramele din pagin. Dac dorii s
lucrai cu dimensiuni fixe ale cadrelor, stabilii un parametru noresize. Acest
parametru poate fi utilizat pentru fiecare frame n parte. Bineneles, el va avea un
efect numai n cazul n care nu apare bordex=0. Pentru ca numai frameurile din
partea de jos s poat fi deplasate, modificai a doua linie.din frame2. html:
<frame src="cadru2.html" name="navsite" noresize>
n cazul n care coninutul este mai mare dect cadrul, va aprea n partea din
dreapta o bar de navigare. Aceasta poate fi dezactivat cu scrolling=no. Astfel nu va
aprea niciodat respectiva bar. Cu scrolling=yes, bara va aprea ntotdeauna chiar i atunci cnd coninutul ncape n frame. Opiunea presetat n browsere este
scrolling=auto, ceea ce nseamn c barele de navigare apar numai atunci cnd sunt
necesare.
8.Link-uri spre frame-uri
Urmeaz partea complicat: trimiterile. Acestea trebuie stabilite cu mare
atenie. Astfel, pot fi plasate cteva linkuri n cadru l.html, care se vor rsfrnge
asupra navigrii prin site. Pentru aceasta, vom nlocui documentul-schi iniial cadru
l.html cu listing-u13. Toate link-urile se afl aici ntr-un document.
Determinant este parametrul target. El stabilete unde va fi ncrcat coninutul
link-ului selectat. Aici intervin numele care au fost atribuite n definirea frameului.
Dac acestea se grupeaz n parametrul target, documentul aferent linkului va
aprea exact acolo unde trebuie. Pe lng numele stabilite de dumneavoastr pentru
frame-uri, exist i cteva valori speciale. _self ncarc fiierul din spatele link-ului n
frame-ul de unde a fost apelat trimiterea. Documentul precedent dispare din acest
cadru, fiind nlocuit de cel apelat.
Un bun mecanism de securitate este _top. El se ramific spre nivelul superior surferul va ajunge din nou n fereastra browserului fr submpriri. _top este
obligatoriu atunci cnd indicai un link spre un site web extern. _parent ncarc
documentul n fereastra n care a fost definit anterior frameset-ul. Acesta prezint
interes n momentul n care sunt ncastrate mai multe frame-uri, dar designul va fi
derutant.

O alt valoare este _blank. Se leag de o nou fereastr. Browserul va


deschide o nou instan, unde va reprezenta documentul. Dar atenie! Cine deschide
prea multe ferestre pe desktop-ul surferului; va avea parte numai de critici.

Nu doar n web, ci i pe propriul homepage este important navigarea ct mai


simpl.
Homepage-urile cu mai mult de dou documente necesit o navigare bine
pus la punct. Pentru c, dac cititorii se rtcesc prin paginile dumneavoastr,
nemaigsind cuprinsul sau homepage-ul, atunci ei vor apsa cu siguran butonul
Home al browserului, iar pe viitor vor ocoli pagina dumneavoastr.
Principii de baz
nainte de a lansa pagini web n reea, trebuie s verificai structura acestora:
Exist dou variante: o structur n form de stea pentru site-uri mici i o construcie
ierarhic pentru ofertele ample.
n cazul structurilor n form de stea plasai pagina de intrare n centrul
ateniei, de la aceasta plecnd apoi toate celelalte pagini. Construcia ierarhic
amintete pe undeva de structura arborescent a directoarelor de pe harddisk. Din
pagina principal pleac link-uri ctre nivelul urmtor - ca i spre subdirectoarele de
pe harddisk. Fiecare nivel conine o tem proprie i se ramific n alte subrubrici.
Acest tip de construcie este necesar, de exemplu, n momentul n care dorii s
introducei n reea o arhiv de texte.
Atenia principal trebuie acordat paginii de intrare. Aceasta trebuie s conin link-uri ctre toate celelalte pagini; cnd se lucreaz cu site-uri cu mai multe
nivele, este suficient s fie introduse link-uri ctre urmtorul nivel. i invers, pagina
de intrare trebuie s poat fi accesat ntotdeauna de pe orice alt pagin. Dac avei
mai multe nivele subordonate, este necesar, n plus, un link pentru accesarea
nivelului imediat superior. n cazul site-urilor mai mici, aceast structur ierarhic
poate fi modificat. n afar de link-ul spre homepage, pot fi introduse n conceptul de
navigare trimiteri ctre fiecare pagin n parte.
Poziionarea elementelor de navigare
Elementele de navigare trebuie s fie foarte vizibile i s fie plasate ntotdeauna n aceeai zon a fiecrei pagini. Atunci cnd lucrai cu site-uri bazate pe
frame-uri, grupai toate link-urile ntr-un frame individual.
Dac ns nu utilizai frame-uri, poziionai elementele de navigare n partea
de sus i n partea de jos a fiecrui document. Ele trebuie s fie evideniate din punct
de vedere al aspectului fa de coninut. n acest sens, n funcie de gust i talent este
suficient dac includei o linie orizontal, o culoare sau o grafic deosebit. Astfel se
creeaz o bar de navigare, care va fi recunoscuta de surfer pe fiecare pagin n
parte.
Dac avei nevoie de mai multe link-uri, includei dou bare de navigare: una
sus pe pagin i una n partea stng, lng document: Bara de sus va conine link-urile identice ce sunt incluse pe toate paginile, de exemplu trimiterea la homepage, la
funcia de cutare sau la pagina de feed-back. n partea din stnga se vor afla linkurile spre celelalte documente sau subnivele ale site-ului.
1. Navigare simpl
Dac v grbii sau apreciai mai mult un design modest, este ideal o bar de
navigare cu text. Hyperlink-urile vor arta atunci aa cum au fost create n HTML.
Doar parantezele ptrate evideniaz faptul c este vorba de un element de navigare
(aici, pas1)
Toate link-urile acestui exemplu sunt poziionate pe o singur linie. Ruperea
rndurilor n codul surs asigur plasarea unui spaiu ntre link-uri. Ultimul link este
deosebit de util, fapt pentru care nu ar trebui s lipseasc de pe nici un site. Tag-ul
mailto apeleaz clientul de e-mail al surferului, unde este completat adresa
dumneavoastr n cmpul adresantului. n acest fel, surferul are posibilitatea de a vi
se adresa direct de pe pagin, fr s caute adresa dumneavoastr. Bara de navigare
este separat de restul documentului printr-o linie orizontal. Aici, aceasta este

aliniat la stnga prin align=left, iar limea acesteia este limitat la 800 de pixeli
prin width=800.
2. Butoane din creaia proprie
Butoane fr umbr. Web-designerii cu pretenii la capitolul grafic i
deseneaz singuri elementele de navigare. n general sunt preferate butoane cu o
dimensiune de circa 100x40 de pixeli. Acestea au o suprafa destul de mare pentru a
ncpea inscripionarea i sunt suficient de mici; pentru a nu ocupa prea mult spaiu
din pagin: Aceste. dimensiuni sunt avantajoase i din alt punct de vedere: butoanele
mici pot fi i ncrcate mai uor.
Calea cea mai simpl spre asemenea butoane este apelarea la programul
shareware Paintshop Pro, care deine funcia Buttonize. ns aceast funcie trebuie
exploatat cu grij.
Deschidei n Paintshop Pro un nou document grafic cu 16,7 milioane de culori
cu limea de I00 de pixeli i nlimea de 40 de pixeli. Fundalul rmne alb. Mrii
imaginea cu ajutorul funciei de zoom pentru a poziiona mai uor textul.Dai un clic
pe butonul de text i selectai un font oarecare, de 12 puncte, bold. Introducei textul
Home, dai un clic pe OK i plasai scrisul n mijlocul noului buton. Deoarece textul
este nc marcat, apsai combinaia de taste [CTRL]+[D] pentru a elimina marcajul.
Selectai apoi Image - Effects - Buttonize. Pentru Height este indicat o valoare
cuprins ntre 15 i 20, atunci cnd este activat funcia de Transparent Edge. Solid
Edge nu arat la fel de bine. Dar dac totui dorii s o folosii, stabilii pentru Height
o valoare mai mic, ntre 5 i 10. Dup confirmarea cu OK, noul buton este gata.
Salvai-1 ca fiier JPG. Apoi pentru ca timpul necesar ncrcrii acestei imagini s fie
minim folosii un program pentru optimizare JPEG, cum ar fi JPEG Optimizer.
n documentul HTML (WELCOME. HTML) legai grafica de hyperlink dup cum
urmeaz:
Cu ajutorul funciei Buttonize din Paintshop Pro putei desena rapid butoane
pentru homepage-ul dumneavoastr. Pentru orice eventualitate salvai separat un
buton neinscripionat.
Parametrul border=0 evit afiarea marginii albastre inestetice, care sugereaz faptul
c respectiva grafic reprezint un link.
Butoane cu umbr.
Rmn n continuare la mod umbrele poziionate n spatele butoanelor. Cu
puin ndemnare putei desena chiar dumneavoastr aceste elemente de navigare
de efect. i de aceast dat putei apela la Paintshop Pro.
Deschidei o imagine nou, avnd dimensiunea de 400x400 de pixeli. Pentru
prima ncercare folosii albul ca i culoare de fundal i 16,7 milioane de culori.
Desenai un dreptunghi n colul din stnga sus al ferestrei. Atenie ca funcia de fill s
fie activat i s fie destul spaiu pentru un al doilea dreptunghi de aceleai
dimensiuni. Marcai apoi dreptunghiul cu Magic Wand, care apare ca o baghet n
bara de simboluri. Tolerance i Feather trebuie s aib valoarea 0. Cu [Ctrl]+[C] i
[Ctrl]+[E] inserai o copie a dreptunghiului n spaiul liber al imaginii. Colorai noul
dreptunghi cu gri deschis cu ajutorul funciei Flood-Fill. Aceasta este reprezentat n
bara de simboluri ca o cutie de conserve stilizat. Activai apoi shortcut-ul [CTRL]+
[D], pentru a elimina marcajul. Dai din nou un clic pe bagheta magic. De aceast
dat Feather va obine valoarea 10. n momentul n care dai un clic pe dreptunghi,
Paintshop Pro va desena un cadru de marcare. Apelai de cinci ori consecutiv punctul
de meniu Image - Blur - Blur More. n acest fel finisai marginile umbrei. Marcai din
nou primul dreptunghi cu bagheta magic . Feather are valoarea 0. Tragei acest
dreptunghi peste umbra sa. Decupai butonul obinut i salvai-1 ca JPG. Bineneles
c acum putei inscripiona butonul, salvndu-1 de fiecare dat sub un alt nume. Nu
tergei butonul gol (fr inscripionare), astfel nct s-1 putei apela pentru orice fel
de modificare.
3. Bar de navigare dintr-o bucat

Bara de navigare este compus din mai multe grafice individuale, care sunt
plasate unul lng cellalt fr spaiu ntre ele. Pentru aceasta, desenai bara
complet pe care includei inscripionrile adecvate. Apoi mprii imaginea n
componente i salvai-le. n documentul web integrai apoi graficele dup cum
urmeaz:
Rolul esenial l joac aici tag-ul nobr. Acesta mpiedic ruperea rndurilor,
chiar i atunci cnd fereastra browserului este mai ngust dect bara cu butoane. n
afar de aceasta, nu este voie s se rup rndul ntre hyperlink-uri n codul surs. n
caz contrar, browserul include un spaiu ntre diferitele imagini.
O variant alternativ este includerea imaginilor ntr-un tabel. Acest lucru are
acelai efect optic, dar ofer mai multe posibiliti.