1
Web design
Frame-urile reprezintă elementul potrivit pentru designeri atunci cānd
doresc ca homepage-ul să aibă o structură corespunzătoare, iar
navigarea să fie pe măsură.
1.Planificare şi pregătire
Īn cazul īn care doriţi să introduceţi frame-uri īn homepage, trebuie
să lămu-riţi cāteva lucruri: Īn ce scop utilizaţi frame-urile? Cāte
frame-uri sunt nece-sare? Cum se īmpart paginile?
Apoi luaţi o hārtie şi un creion. Pe o foaie A4 proiectaţi īn mare
īmpărţirea paginii. Liniile nu trebuie să fie poziţio-nate la
milimetru, dar această schiţă vă ajută să aveţi o imagine asupra
structurii paginii. Schiţaţi īn rame şi conţinutul -indicaţi bara de
navigare şi includeţi ima-ginile. Nu faceţi economie de timp -lucraţi
pānă cānd sunteţi mulţumiţi de proiect. Pentru că īn momentul īn care
īncepeţi cu realizarea frame-urilor, even-tualele modificări vor duce
la pierdere de vreme. Īncepe apoi transpunerea īn prac-tică. Scrieţi -
eventual cu Notepad - trei noi fişiere HTML cu următorul conţinut:
<html><body bgcolor=red> cadru X</body></html>
Īn locul lui X scrieţi cifrele de la 1 la 3. Salvaţi aceste fişiere sub
numele de cadrul.html pānă la cadru3.html. Dacă doriţi, puteţi schimba
indicaţia de culoare din al doilea şi al treilea fişier, de exemplu:
<body bgcolor=yellow> si
<body bgcolor=green>
Aceste pagini-schiţă vă ajută la con-struirea setului de frame-uri şi
permit verificarea īmpărţirii. Conţinutul pro-priu-zis va putea fi
alcătui ulterior.
2.Īmpărţirea setului de frame-uri
Tag-ul html<frameset> este răspunzător pentru frame-uri.
Deter-minanţi sunt parametrii rows şi cols: rows īmparte fereastra
orizontal pe rānduri, iar cols vertical pe coloane. Acestea vor mai
obţine pe parcurs alte cāteva valori. De numărul de indicaţii
despărţite prin vir-gulă depinde numărul de coloane sau de rānduri.
Indicaţia <frameset.cols="33%, 33%, 33%"> īmparte fereastra
browserului īn trei coloane de dimensiuni egale. Cu <frameset
rows="10%, 90%"> veţi īmpărţi fereastra īn două rānduri. Primul rānd
ocupă o zecime din īnălţimea ferestrei, iar cea de a doua 90 de
pro-cente. Īn locul procentajului puteţi indica -dimensiunile şi cu
valori īn pixeli. O po-ziţie deosebită ocupă caracterul *, anume acesta
semnifică: ocupă restul ferestrei.
3.Drumul spre primul frameset
Cu ajutorul unei valori īn pixeli, puteţi stabili īn partea dreaptă o
coloană fixă pentru bara de navigare, iar celei de a doua coloane īi
atribuiţi restul spaţiului ferestrei.Pentru un prim test introduceţi
listing-ul 1 şi salvaţi-l sub numele de frame.html. Aceste valori
atribuie primei coloane 160 de pixeli, iar restul rămāne pentru
coloa-na a doua. Pentru īncărcarea datelor īn frame-uri răspunde
<frame src...>.
Important: atribuiţi fiecărui frame un nume (name=...), deoarece astfel
veţi simplifica organizarea ulterioară. Īn ca-drul primului test veţi
observa şi avanta-jul indicării valorilor īn pixeli, atunci cānd doriţi
să măriţi sau să micşoraţi fereastra browserului: īn timp ce cadrul din
dreapta se modifică odată cu dimen-siunea ferestrei browserului, cel
din stān-ga rămāne mereu la fel.
4.Īncastrarea frameset-urilor
Pentru a subīmpărţi fereastra browse-rului atāt orizontal cāt şi
vertical, trebuie să īncastraţi două frame-uri unul īntr-altul. Schiţa,
pe care aţi realizat-o iniţial, va fi acum de folos. Pentru că aici
puteţi esti-ma cāt spaţiu necesită fiecare cadru. Īn exemplul de faţă,
coloana din stānga va avea o lăţime de 160 de pixeli, iar bara de
navigare din partea de sus a ferestrei va avea o īnălţime de 70 de
pixeli. Salvaţi listing-u1 2 sub numele de frame l.html şi verificaţi
layout-ul cu browserul. Īn cazul īn care doriţi ca bara de navigare să
ocupe toată lăţimea ferestrei, īncastraţi frame-urile invers şi
realizaţi iniţial īmpărţirea orizontală şi doar apoi cea verticală.
Sal-vaţi această definiţie de frameset sub nu-mele de frame2.html.
Observaţi diferen-ţele pentru reprezentare faţă de frame l. html -
īmpărţirea arată acum cu totul altfel.
5.Frame-uri fără rame inestetice
După ce aţi pus pe picioare structura, puteţi să vă ocupaţi şi de
partea estetică. In majoritatea cazurilor, ramele sunt de-ranjante şi
inestetice. Aceste borduri pot fi īndepărtate cu ajutorul parametrului
suplimentar border=0: <fra~set rows="70, *" bordez=0> Important:
acest parametru funcţio-nează numai īn cazul frameset-urilor
īn-castrate şi numai īn prima indicaţie frame-set. Īn toate celelalte
tag-uri frameset, border nu are nici un efect. Ambele ver-siuni actuale
de Navigator şi Explorer recunosc fără probleme parametrul bor-der.
Pentru a evita incompatibilitatea faţă de versiunile mai vechi de
browser, este indicat să extindeţi tag-ul cu indicaţii pentru versiuni
mai vechi de Internet Explorer: <frameset rows="70, *"
bor-der=Oframeborder=0'frame-spacing=0> framespacing stabileşte īn
Internet Ex-plorer distanţa dintre cadre, frameborder este analog cu
border īn browserele mai vechi. Īn cazul īn care īn tag-ul frameset
utilizaţi ambii parametri, pentru a defini culoarea frame-urilor,
trebuie să atribuiţi aceleaşi valori pentru aceste indicaţii.
6.Definirea distanţelor faţă de margini
Īn cazul unui layout foarte exact, sunt deranjante distanţele prea mari
faţă de margini. Browserele include automat ase-menea distanţări. Prin
intermediul a doi parametri pentru tag-ul frame, aveţi posi-bilitatea
de a stabili valoarea exactă a acestor margini: <frame
src="cadru3.html" name="continut" margin-width=0 marginheight=0>
marginwidth stabileşte distanţa faţă de marginile laterale. Īn cazul
valorii 0, textul va īncepe de la marginea paginii. Margin-width este
valabil atāt pentru marginea din dreapta cāt şi pentru cea din stānga:
Netscape Navigator va include totuşi, ī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 conţinutul lipit de marginea de
sus a ferestrei - vor rămāne 5 pixeli īn Navigator şi 4 īn Explorer.
Folosiţi aceste indicaţii pentru mar-gini doar pentru layout-ul brut.
Īn cazul īn care doriţi să poziţionaţi exact texte sau imagini, este
indicat să folosiţi tabele. Mai multe amănunte despre tabele veţi afla
din episodul al treilea al acestui serial.
7.Limitări raţionale
Bordurile prezintă şi un al doilea avan-taj īn designul frame-urilor:
ele pot fi deplasate. Īn acest fel se pot modifica dimensional ramele
din pagină. Dacă doriţi să lucraţi cu dimensiuni fixe ale cadrelor,
stabiliţi un parametru noresize. Acest parametru poate fi utilizat
pentru fiecare frame īn parte. Bineīnţeles, el va avea un efect numai
īn cazul īn care nu apare bordex=0. Pentru ca numai frame-urile din
partea de jos să poată fi depla-sate, modificaţi a doua linie.din
frame2. html:
<frame src="cadru2.html" name="navsite" noresize>
Īn cazul īn care conţinutul este mai mare decāt cadrul, va apărea īn
partea din dreapta o bară de navigare. Aceasta poate fi dezactivată cu
scrolling=no. Astfel nu va apărea niciodată respectiva bară. Cu
scrolling=yes, bara va apărea īntotdeau-na - chiar şi atunci cānd
conţinutul īn-cape īn frame. Opţiunea presetată īn browsere este
scrolling=auto, ceea ce īnseamnă că barele de navigare apar nu-mai
atunci cānd sunt necesare.
8.Link-uri spre frame-uri
Urmează partea complicată: trimite-rile. Acestea trebuie stabilite cu
mare atenţie. Astfel, pot fi plasate cāteva link-uri īn cadru l.html,
care se vor răsfrānge asupra navigării prin site. Pentru aceasta, vom
īnlocui documentul-schiţă iniţial ca-dru l.html cu listing-u13. Toate
link-urile se află aici īntr-un document.
Determinant este parametrul target. El stabileşte unde va fi īncărcat
conţinutul link-ului selectat. Aici intervin numele care au fost
atribuite īn definirea frame-ului. Dacă acestea se grupează īn
para-metrul target, documentul aferent link-ului va apărea exact acolo
unde trebuie. Pe lāngă numele stabilite de dumnea-voastră pentru
frame-uri, există şi cāteva valori speciale. _self īncarcă fişierul din
spatele link-ului īn frame-ul de unde a fost apelată trimiterea.
Documentul pre-cedent dispare din acest cadru, fiind īnlo-cuit de cel
apelat.
Un bun mecanism de securitate este _top. El se ramifică spre nivelul
superior - surferul va ajunge din nou īn fereastra browserului fără
subīmpărţiri. _top este obligatoriu atunci cānd indicaţi un link spre
un site web extern. _parent īncarcă documentul īn fereastra īn care a
fost definit anterior frameset-ul. Acesta prez-intă 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 doc-umentul. Dar atenţie!
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
cāt mai simplă.
Homepage-urile cu mai mult de două documente necesită o navi-gare bine
pusă la punct. Pentru că, dacă cititorii se rătăcesc prin paginile
dumneavoastră, nemaigăsind cuprinsul sau homepage-ul, atunci ei vor
apăsa cu siguranţă butonul Home al browserului, iar pe viitor vor ocoli
pagina dumneavoastră.
Principii de bază
Īnainte de a lansa pagini web īn reţea, trebuie să verificaţi structura
acestora: Există două variante: o structură īn formă de stea pentru
site-uri mici şi o construcţie ierarhică pentru ofertele ample.
Īn cazul structurilor īn formă de stea plasaţi pagina de intrare īn
centrul atenţiei, de la aceasta plecānd apoi toate celelalte pagini.
Construcţia ierarhică aminteşte pe undeva de structura arborescentă a
directoarelor de pe harddisk. Din pagina principală pleacă link-uri
către nivelul următor - ca şi spre subdirectoarele de pe harddisk.
Fiecare nivel conţine o temă proprie şi se ramifică īn alte subrubrici.
Acest tip de construcţie este necesar, de exemplu, īn momentul īn care
doriţi să introduceţi īn reţea o arhivă de texte.
Atenţia principală trebuie acordată paginii de intrare. Aceasta trebuie
să con-ţină link-uri către toate celelalte pagini; cānd se lucrează cu
site-uri cu mai multe nivele, este suficient să fie introduse link-uri
către următorul nivel. Şi invers, pagina de intrare trebuie să poată fi
acce-sată īntotdeauna de pe orice altă pagină. Dacă aveţi mai multe
nivele subordonate, este necesar, īn plus, un link pentru accesarea
nivelului imediat superior. Īn ca-zul 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 către
fiecare pagină īn parte.
1
Poziţionarea elementelor de navigare
Elementele de navigare trebuie să fie foarte vizibile şi să fie plasate
īntot-deauna īn aceeaşi zonă a fiecărei pagini. Atunci cānd lucraţi cu
site-uri bazate pe frame-uri, grupaţi toate link-urile īntr-un frame
individual.
Dacă īnsă nu utilizaţi frame-uri, po-ziţionaţi elementele de navigare
īn partea de sus şi īn partea de jos a fiecărui docu-ment. Ele trebuie
să fie evidenţiate din punct de vedere al aspectului faţă de conţinut.
Īn acest sens, īn funcţie de gust şi talent este suficient dacă
includeţi 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ă aveţi nevoie de mai multe link-uri, includeţi două bare de
navigare: una sus pe pagină şi una īn partea stāngă, lāngă document:
Bara de sus va conţine link--urile identice ce sunt incluse pe toate
paginile, de exemplu trimiterea la home-page, la funcţia de căutare sau
la pagina de feed-back. Īn partea din stānga se vor afla link-urile
spre celelalte documente sau subnivele ale site-ului.
1. Navigare simplă
Dacă vă grăbiţi sau apreciaţi mai mult un design modest, este ideală o
bară de navigare cu text. Hyperlink-urile vor ară-ta atunci aşa cum au
fost create īn HTML. Doar parantezele pătrate evidenţiază faptul că
este vorba de un element de navigare (aici, pas1)
Toate link-urile acestui exemplu sunt poziţionate pe o singură linie.
Ruperea rāndurilor īn codul sursă asigură plasarea unui spaţiu ī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
cāmpul adresantului. Īn acest fel, surferul are posibilitatea de a vi
se adresa direct de pe pagină, fără să caute adresa dumneavoastră. Bara
de navigare este separată de restul docu-mentului printr-o linie
orizontală. Aici, aceasta este aliniată la stānga prin align=left, iar
lăţimea acesteia este limi-tată la 800 de pixeli prin width=800.
2. Butoane din creaţia proprie
Butoane fără umbră. Web-design-erii cu pretenţii la capitolul grafică
īşi desenează singuri elementele de navi-gare. Īn general sunt
preferate butoane cu o dimensiune de circa 100x40 de pixeli. Acestea au
o suprafaţă destul de mare pentru a īncăpea inscripţionarea şi sunt
suficient de mici; pentru a nu ocupa prea mult spaţiu din pagină:
Aceste. dimen-siuni sunt avantajoase şi din alt punct de vedere:
butoanele mici pot fi şi īncărcate mai uşor.
Calea cea mai simplă spre asemenea butoane este apelarea la programul
share-ware Paintshop Pro, care deţine funcţia Buttonize. Īnsă această
funcţie trebuie exploatată cu grijă.
Deschideţi īn Paintshop Pro un nou document grafic cu 16,7
milioane de
cu-lori cu lăţimea de I00 de pixeli şi īnăl-ţimea de 40 de pixeli.
Fundalul rămāne alb. Măriţi imaginea cu ajutorul funcţiei de zoom
pentru a poziţiona mai uşor textul.Daţi un clic pe butonul de text şi
selectaţi un font oarecare, de 12 puncte, bold. Introduceţi textul
Home, daţi un clic pe OK şi plasaţi scrisul īn mijlocul noului buton.
Deoarece textul este īncă marcat, apăsaţi combinaţia de taste
[CTRL]+[D] pentru a elimina marcajul.
Selectaţi apoi Image - Effects - But-tonize. Pentru Height este
indicată o valoare cuprinsă īntre 15 şi 20, atunci cānd este activată
funcţia de Transparent Edge. Solid Edge nu arată la fel de bine. Dar
dacă totuşi doriţi să o folosiţi, stabi-liţi pentru Height o valoare
mai mică, īntre 5 şi 10. După confirmarea cu OK, noul buton este gata.
Salvaţi-1 ca fişier JPG. Apoi pentru ca timpul necesar īncărcării
acestei imagini să fie minim folosiţi un program pentru optimizare
JPEG, cum ar fi JPEG Optimizer.
Īn documentul HTML (WELCOME. HTML) legaţi grafica de hyperlink după cum
urmează:
Cu ajutorul func-ţiei Buttonize din Paintshop Pro pu-teţi desena rapid
butoane pentru homepage-ul dumneavoastră. Pentru orice even-tualitate
salvaţi separat un buton neinscripţionat.
Parametrul border=0 evită afişarea marginii albastre inestetice, care
sugerea-ză faptul că respectiva grafică reprezintă un link.
Butoane cu umbră.
Rămān īn con-tinuare la modă umbrele poziţionate īn spatele butoanelor.
Cu puţină īndemā-nare puteţi desena chiar dumneavoastră aceste elemente
de navigare de efect. Şi de această dată puteţi apela la Paintshop Pro.
Deschideţi o imagine nouă, avānd dimensiunea de 400x400 de pixeli.
Pentru prima īncercare folosiţi albul ca şi cu-loare de fundal şi 16,7
milioane de culori. Desenaţi un dreptunghi īn colţul din stānga sus al
ferestrei. Atenţie ca funcţia de fill să fie activată şi să fie destul
spaţiu pentru un al doilea dreptunghi de aceleaşi dimensiuni. Marcaţi
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] inseraţi o copie a dreptunghiului īn spaţiul
liber al imaginii. Coloraţi noul dreptunghi cu gri deschis cu ajutorul
funcţiei Flood-Fill. Aceasta este reprezentată īn bara de sim-boluri ca
o cutie de conserve stilizată. Activaţi apoi shortcut-ul [CTRL]+[D],
pentru a elimina marcajul. Daţi din nou un clic pe bagheta ma-gică. De
această dată Feather va obţine valoarea 10. Īn momentul īn care daţi un
clic pe dreptunghi, Paintshop Pro va de-sena un cadru de marcare.
Apelaţi de cinci ori consecutiv punctul de meniu Image - Blur - Blur
More. Īn acest fel finisaţi marginile umbrei. Marcaţi din nou primul
dreptunghi cu bagheta magică . Feather are valoarea 0. Trageţi acest
dreptunghi peste umbra sa. Decupaţi butonul obţinut şi salvaţi-1 ca
JPG. Bineīnţeles că acum puteţi inscrip-ţiona butonul, salvāndu-1 de
fiecare dată sub un alt nume. Nu ştergeţi butonul gol (fără
inscripţionare), astfel īncāt să-1 pu-teţi 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 lāngă celălalt fără spaţiu īntre ele. Pentru aceasta,
desenaţi bara completă pe care includeţi inscripţio-nările adecvate.
Apoi īmpărţiţi imaginea īn componente şi salvaţi-le. Īn docu-mentul web
integraţi apoi graficele după cum urmează:
Rolul esenţial īl joacă aici tag-ul nobr. Acesta īmpiedică ruperea
rāndurilor, chiar şi atunci cānd fereastra browserului este mai īngustă
decāt bara cu butoane. Īn afară de aceasta, nu este voie să se rupă
rāndul īntre hyperlink-uri īn codul sursă. Īn caz contrar, browserul
include un spa-ţiu īntre diferitele imagini.
O variantă alternativă este includerea imaginilor īntr-un tabel. Acest
lucru are acelaşi efect optic, dar oferă mai multe posibilităţi.
| Cele mai ok referate! www.referateok.ro |