Administrator
Data inscrierii: 07/Oct/2007
Mesaje: 34
Localitate: Bucuresti
|
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 fotografie 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 facerea 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> 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 altera indicaþia de culoare din al doilea ºi al treilea fiºier, de exemplu:
<body> si
<body>
Aceste pagini-schiþã vã ajutã la con-struirea setului de frame-uri ºi încuviințează 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> împarte fereastra browserului în trei coloane de dimensiuni egale. Cu <frameset> 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 susținerea 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>.
Important: atribuiþi fiecãrui frame un nume (name=...), căci astfel veþi simplifica organizarea ulterioarã. În ca-drul primului test veþi observa ºi avanta-jul indicãrii valorilor în pixeli, atunci îndată ce 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 doamnaþã, 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 doamnaþã 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> 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. Cele două ver-siuni actuale de Navigator ºi Explorer recunosc fãrã complicații parametrul bor-der. Pentru a evita incompatibilitatea doamnaþã 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 doamnaþã de margini
În cazul unui layout foarte exact, sunt deranjante distanþele prea mari doamnaþã 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> marginwidth stabileºte distanþa doamnaþã de marginile laterale. În cazul valorii 0, textul va inițiază 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 întocmai 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 folosit 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 porțiunea de jos sã poatã fi depla-sate, modificaþi a doua linie.din frame2. html:
<frame>
În cazul în care conþinutul este mai mare decât cadrul, va apãrea în bucată 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ã fracțiune 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ã astea se grupeazã în para-metrul target, documentul aferent link-ului va apãrea fidel 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 numeroase 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 absolut 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.
Poziþionarea elementelor de navigare
Elementele de navigare trebuie sã fie extrem 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 componentă de sus ºi în partea de jos a fiecãrui docu-ment. Ele trebuie sã fie evidenþiate din punct de vedere al aspectului doamnaþã de conþinut. În acest sens, în funcþie de gust ºi talent este suficient dacã includeþi o linie orizontalã, o nuanță 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 produse î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 mărime 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. Pentru că 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 fără întârziere 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 poză 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 îndeajuns 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 neocupat 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 indiferent ce 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 ingrediente º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 ima
_________________
Urban Hell Team
|
|
