INTERNET - George Popescu

Realizarea paginilor Web Editorul HTML Netscape Composer

Aplicaia Netscape Composer este una dintre aplicaiile de creare a paginilor Web destinate nceptorilor Este !oarte indicat pentru pagini simple" li#ibile" con!orme cu standardele de ergonomie Web enunate de $a%ob Nielsen &''' useit com( )intre aplicaiile pro!esionale !ace parte *acromedia )ream'ea+er Cunoa,terea principiilor de creare a paginilor de Web cu a-utorul aplicaiei Netscape Composer este obligatorie pentru a putea lucra cu alte aplicaii a+ansate Aplicaia Netscape Composer !ace parte din grupul Netscape Communicator" care cuprinde un na+igator de Web &Netscape Na+igator(" un utilitar pentru citirea ,tirilor distribuite &Netscape Collabra(" un client de e-mail &Netscape *essenger( , a Este unul dintre primele editoare de pagini de Web" dar rm.ne ,i ast#i unul dintre programele cu a-utorul crora se pot crea pagini de Web care s respecte criteriile de li#ibilitate Este o aplicaie pentru nceptori ns" care nu se pretea# la ultimele ino+aii te/nologice &animaii" 0mouse o+er1 etc ( 2nainte de a ncepe crearea paginilor cu aplicaia Netscape Composer" trebuie s respectai c.te+a reguli te/nice3 - Creai un !older pe /ard dis%" cu o denumire simpl" de pre!erabil care s conin un singur cu+.nt" de tipul 0site1 Acolo +ei plasa toate paginile create" imaginile !olosite sau te4tele pre#ente n pagini Composer con+erte,te automat orice imagine din orice alt !ormat n .jpg sau .gif ,i le plasea# n acest !older" dar este bine ca imaginile ce +or !i !olosite n pagini s !ie de-a sal+ate n !older Atunci c.nd dorii s mutai !olderul ntr-o alt locaie pe /ard dis% sau s l transportai pe o disc/et" copiai at.t paginile de Web create" c.t ,i imaginile !olosite 5inei cont de !aptul c" deplas.nd una sau mai multe pagini de-a create ntr-i alt locaie" lin%-urile ntre pagini nu +or mai !unciona ,i trebuie re!cute - 6iecare pagin de Web are" practic" trei determinante3 a( titlul !i,ierului care desemnea# pagina" care ar trebui denumit tot printr-un singur cu+.nt" sau mai multe cu+inte legate prin 071" de tipul 0pre#entare1 sau 0pre#entare7!irma18 terminaia 0/tml1 +a !i adugat automat de Composer8 b( titlul din bara de titlu a paginii Web" care n principiu este acela,i cu titlul general al site-ului" de tipul 09coop *edia : ,tiri n timp real18 acesta poate !i modi!icat n paginile secundare ale site-ului" pentru a o!eri mereu utili#atorului in!ormaii pri+ind locul unde se a!l n orice moment &de e4emplu" pentru pagina de ,tiri sporti+e" titlul din bara de titlu poate de+eni 09coop *edia : ,tiri n timp real ---- 9port1(8 c( titlul din pagina propriu-#is" care pentru prima pagin se poate identi!ica cu titlul din bara de titlu8 n paginile secundare ns" este bine ca titlul s !ie modi!icat n !uncie de speci!icul paginii respecti+e - 2n Composer pot !i doar editate paginile" ele trebuie +i#uali#ate n Na+igator" prin comanda Preview *ulte !ormatri aplicate paginii n Composer nu au efect dec.t dac sunt +i#uali#ate n Na+igator - Paginile trebuie sal+ate din c.nd n c.nd ,i mai ales nainte de a !i +i#uali#ate n Na+igator - 6i,ierul primei pagini a site-ului trebuie denumit 0inde4 /tml1" pentru ca pagina s !ie recunoscut ca /omepage al site-ului" atunci c.nd acesta este plasat online

INTERNET - George Popescu

Netscape Composer poate !i lansat din grupul Netscape Communicator din meniul Start Programs" din s/ortcut-ul de pe tastatur sau din icon-ul pre#ent mereu n partea din dreapta -os a oricrei !erestre a grupului Netscape )up ce nc/idei aplicaia ,i dorii s desc/idei una dintre pagini pentru a continua lucrul" este posibil ca pagina s se desc/id cu aplicaia Internet E4plorer 2n acest ca#" desc/idei mai nt.i Netscape Composer" apoi prin File Open desc/idei pagina dorit C.nd desc/idei aplicaia" automat se desc/ide o pagin de Web nou" !r coninut Putei crea n orice moment o nou pagin" aps.nd pe File New Blank Page *ai putei alege drept ,ablon una dintre paginile disponibile pe site-ul companiei Netscape Comen#ile din aplicaie sunt disponibile" ca n orice aplicaie din Windo's" n meniuri" n barele de unelte ,i n meniurile incidentale disponibile prin apsarea butonului din dreapta al mouse-ului

Reali#area lin%-urilor

Caut sec+ene de te4t n pagin

Publicarea site-ului pe Web

@i#uali#area paginii n Na+igator

*rimea !ontului

Culoarea !ontului

Introducerea i editarea te tului Te4tul poate !i inserat n corpul paginii" ncep.nd din colul din st.nga sus Te4tul se introduce ca n orice editor de te4t ,i i se pot aplica !ormatri de caracter ,i de !ont &bold" italic" subliniat" corp mai mare etc( Te4tul poate !i separat prin spaii albe sau prin linii ori#ontale care pot !i inserate aps.nd pe icon-ul 0< =ine1 din meniu sau din Insert !ori"ontal #ine Aps.nd de dou ori rapid pe linia ori#ontal" accesai opiunile suplimentare" printre care grosimea liniei" alinierea ,i e!ecte de trei dimensiuni )up ce ai aplicat un stil unei poriuni de te4t" putei readuce te4tul la stilul normal aps.nd din nou pe acela,i !ormatri &de e4emplu" dac ai !cut un te4t bold" eliminai stilul ngro,at aps.nd din nou pe bold" repre#entat de un A ngro,at( Poate !i importat te4t ,i din alte aplicaii" prin comen#ile $op% &n aplicaia de editare de te4t( ,i Paste &n pagina de Composer( >nele !ormatri care au !ost aplicate te4tului n aplicaia de editare se +or pierde o dat cu lipirea te4tului n Composer Aplicaia *icroso!t Word permite sal+area documentelor direct n !ormatul <T*=" ast!el c paginile pot !i desc/ise n Composer ,i se pstrea# !ormatrile Te4tul poate !i aliniat din icon-ul speci!ic din bara de unelte" la st.nga" la dreapta ,i n centru Te4tul poate !i indentat prin icon-urile speci!ice" a+ans.ndu-l n interiorul pe paginii" bloc cu bloc Te4tul poate !i aran-at n liste Pentru meniul de

INTERNET - George Popescu

na+igare" este important ierar/i#area lin%-urilor cu a-utorul listelor" n lipsa altor elemente gra!ice care s le delimite#e E4ist dou tipuri de liste3 - =iste numerotate - =iste cu bumbi Pentru a crea primul element din list" apsai pe icon-ul de list 2n ca#ul listei numerotate" n loc de ci!ra ; +a aprea simbolul A )up ce apsai Enter pentru a trece la urmtorul element din list" +a aprea un nou semn A 2n Pre+ie'" se +or a!i,a ns ci!rele corespun#toare C.nd dorii s punei capt listei" apsai Enter pentru a crea un nou numr sau bumb ,i apsai din nou pe icon-ul pentru liste din bara de unelte )ac dorii s trans!ormai un paragra! simplu n list" selectai paragra!ul respecti+ ,i apsai pe unul dintre icon-urile de list $aracteristicile generale ale paginii >nele caracteristici generale ale paginii Web trebuie stabilite de la nceput ,i se pot multiplica ,i n celelalte pagini ale site-ului" ast!el nc.t site-ul s !ie conceput n acela,i cod gra!ic 2nc de c.nd sal+ai prima oar pagina" Composer + cere s preci#ai titlul din bara de titlu Putei accepta sugestia de titlu o!erit de aplicaie sau putei tasta orice titlu dorii Acest titlu poate !i modi!icat n orice moment Caracteristicile generale ale paginii de Web pe care tocmai ai creat-o se gsesc n Format Page $olors and Properties

Aceast !ereastr de dialog are mai multe taburi" n tabul General !iind opiunile de !undal ,i culori ale di+erselor stiluri de te4t 2n &eneral 'itle tastai titlul paginii Pentru a sc/imba culorile din pagin" a+ei tabul $olors and Background Putei sc/imba urmtoarele elemente3 - Culoarea te4tului normal &te4tul simplu" care nu este interacti+" negru din o!iciu( - Culoarea te4tului interacti+" cel care de+ine ancor &lin%-urile nainte de a apsa pe ele" albastru ,i subliniat din o!iciu( - Culoarea lin%-ului acti+ &culoarea te4tului interacti+ n momentul c.nd se apas pe el( - Culoarea lin%-ului +i#itat &culoarea te4tului interacti+ dup ce s-a apsat pe el" mo+ din o!iciu( - Culoarea !undalului paginii Composer o!er ;? stiluri presetate de culori pentru toate aceste tipuri de te4t Nu este recomandabil sc/imbarea stilului albastru subliniat pentru lin%-uri" deoarece acesta este codul gra!ic cu care sunt obi,nuii utili#atorii 2n loc de a seta o culoare pentru bac%ground" se poate !olosi o imagine Imaginea +a !i a,ea#at n modul 'ile" adic se +a repeta pe toat supra!aa paginii Este important a selecta o imagine care" o dat repetat pe toat pagina" s nu mpiedice

INTERNET - George Popescu

li#ibilitatea )ac imaginea selectat are mici dimensiuni" ea +a !i repetat p.n c.nd +a umple ecranul )ac dorii ca imaginea s se ntind e4act c.t dimensiunile paginii de Web create" prelucrai imaginea n prealabil cu a-utorul unei aplicaii de editare de imagine Pentru a seta o imagine ca !undal3 Page $olors and Properties ( $olors and Background Background )se Image $*oose File )ac dorii s pstrai acelea,i elemente pe toate paginile ulterioare" acti+ai opiunea 09a+e t/ese settings !or ne' pages1 )ac dorii ca urmtoarele pagini s arate la !el ca prima pagin" putei sal+a prima pagin cu denumirea paginii urmtoare" cre.nd ast!el o copie a primei pagini ,i elimin.nd e!ortul de a o lua de la capt de !iecare dat c.nd +rei s creai o pagin nou Celelalte elemente din meniul Format Page $olors and Properties" tabul &eneral" sunt3 - Aut/or : introducei numele celui care creea# pagina - )escription : introducei o descriere de p.n n ?CC de caractere" pe care ma-oritatea motoarelor de cutare o a!i,ea# atunci c.nd listea# site-ul - DeE'ords : introducei cu+intele care descriu cel mai bine site-ul ,i care +or a-uta motoarele de cutare s gseasc site-ul 9e pot introduce p.n la ;CCC de caractere E+itai repetiiile" deoarece motoarele de cutare nu inde4ea# pagini care repet agresi+ cu+inte n descriere $rearea i formatarea ta+elelor Tabelele o!er posibilitatea organi#rii in!ormaiei pe criterii de li#ibilitate ,i o mai bun organi#are a blocurilor de coninut Cel mai simplu mod de a organi#a o pagin este prin introducerea unui tabel cu un r.nd ,i dou coloane 2n coloana mai ngust din st.nga se introduce meniul de na+igare ce poate !i pstrat n toate paginile site-ului" iar n coloana din dreapta se plasea# coninutul care se sc/imb n !iecare pagin Ast#i" se !olosesc !oarte mult tabele 0ascunse1" adic marginile tabelului sunt in+i#ibile" n a,a !el nc.t utili#atorul are impresia c blocurile de coninut sunt independente Inserai un tabel nou aps.nd pe icon-ul speci!ic din bara de unelte sau din Insert 'a+le Atunci c.nd introducei tabelul" apare o !ereastr de dialog cu elemente generale care in de tabel" ma-oritatea a+.nd +alori din o!iciu Putei sc/imba n orice moment aceste +alori F parte din aceste setri din o!iciu !ac ca celulele tabelului s !ie egale" marginea tabelului s !ie +i#ibil" te4tul s !ie aliniat n mi-locul celulei etc Iat c.te+a opiuni care pot !i sc/imbate n !ereastra de dialog a opiunilor de tabel nou3 - numrul de r.nduri ,i numrul de coloane &; ,i ?" n ca#ul n care dorii s a+ei meniul n st.nga paginii ,i coninutul n dreapta(

INTERNET - George Popescu

alinierea n pagin a tabelului &st.nga" centru" dreapta( includerea unei legende &e4plicaii( deasupra sau dedesubtul tabelului &n ca#ul n care n tabel plasai imagini care necesit e4plicaii( grosimea marginii &n pi4eli(8 de#acti+ai aceast opiune dac dorii ca marginea s !ie in+i#ibil distana dintre celule &n pi4eli( distana dintre marginea celulei ,i te4tul din celul &n pi4eli( limea tabelului &n procente din !ereastr sau n pi4eli(8 mic,orai aici dimensiunile dac dorii s !acei mai ngust coloana din st.nga" unde +a !i plasat meniul nlimea tabelului &n procente din !ereastr sau n pi4eli( !undalul tabelului &colorat sau cu o anumit imagine pe !ond(

)up ce tabelul a !ost creat" acestor opiuni din !ereastra de dialog li se adaug taburi pri+ind r.ndul ,i coloana Pentru a modi!ica ce+a n tabel" plasai cursorul n celula respecti+" apsai pe butonul-dreapta al mouse-ului ,i selectai 'a+le Properties" sau mergei n meniu la Format 'a+le Properties Putei alege taburile 'a+le" $ell sau ,ow Putei aduga un !undal pentru oricare dintre celule Putei modi!ica setrile unei celule" dar unele dintre ele le +or a!ecta ,i pe cele ale celorlalte celule Pentru a trece dintr-o celul n alta" !olosii tasta Tab Totu,i" dac + a!lai n ultima celul ,i apsai Tab" se +a crea un r.nd nou )ac dorii s ,tergei un r.nd sau o coloan" plasai cursorul n r.ndul sau coloana respecti+ ,i apsai pe butonul-dreapta al mouse-ului" de unde selectai -elete ,ow sau $olumn 2n ca#ul n care cursorul nu rm.ne n celula dorit" atunci c.nd aceasta este goal" adugai c.te+a litere ,i accesai meniul 'a+le Properties aps.nd pe butonul-dreapta direct pe aceste litere sau" atunci c.nd cursorul este n celula dorit" selectai opiunile din meniul Format 'a+le Properties" ,i nu cu a-utorul mouse-ului 2n ca#ul n care cursorul este plasat automat n mi-locul celulei ,i te4tul se alinia# n centrul ei" accesai 'a+le Properties $ell .ertical /lignment 'op )ac dorii ca celula din st.nga &!olosit de obicei pentru a plasa meniul de na+igare( s !ie mai ngust" accesai 'a+le Properties $ell $ell 0idt* ,i modi!icai +aloarea de la ;CCH la n -ur de ;IH Iat opiunile disponibile n meniul 'a+le Properties3 Op iunea
Jorder =ine Widt/ Cell 9pacing Cell Padding Alignment Include Caption Table Widt/ *in Table <eig/t EKual Column Widt/s "undalul tabelului Color

!escrierea op iunii
9etea# bordura tabelului" n pi4eli" ntre C ,i ;CC 9paiul dintre celule" n pi4eli @alorile mai mari +or !ace marginea tabelului mai subire 9paiul dintre bordura tabelului ,i te4tul din interiorul celului respecti+e Alinia# tabelul n st.nga" n centru sau n dreapta !a de pagin 9etea# o celul special pentru a introduce o legend pentru tabel Putei alege deasupra sau sub tabel 9etea# limea tabelului n pi4eli" sau ca procenta- din !ereastr 9etea# o nlime minim pentru tabel" n pi4eli sau n procentadin !ereastr Composer +a ec/ilibra celulele 9etea# o culoare ca !undal pentru tabel" di!erit de culoarea de pe !undalul paginii

INTERNET - George Popescu

Image Op iuni de r#nd <ori#ontal &Alignment( @ertical &Alignment( Op iuni de celul$ Cell &ro's or columns( Te4t3 Nonbrea%ing Te4t3 <eader 9tEle

9etea# o imagine ca !undal pentru tabel" di!erit de imaginea setat ca !undal pentru pagin Se activea"1 prin selectarea ta+(ului ,ow din 'a+le Properties. Alinierea pe ori#ontal a te4tului din r.ndul respecti+ Alinierea pe +ertical a te4tului din r.ndul respecti+ Se activea"1 prin selectarea ta+(ului $ell din 'a+le Properties. Numrul de coloane sau r.nduri peste care s se ntind celula spans curent &opiune asemntoare comen#ii *erge Cells din *icroso!t Word( 2mpiedic mularea te4tului pe marginile celulei 9etea# celula drept antet al tabelului ,i trans!orm te4tul din acea celul n bold ,i centrat

Inserarea i manipularea imaginilor Criteriile de li#ibilitate spun c pe o pagin Web ar trebui s e4iste ma4im trei imagini de dimensiuni medii" ast!el nc.t pagina s nu !ie ncrcat Imaginile din paginile create cu Composer nu se sal+ea# o dat cu paginile de Web" ci se reali#ea# o legtur ntre locul unde este plasat imaginea n pagin ,i locul de pe /ard dis% unde este imaginea sal+at 2n consecin" dup ce imaginile au !ost plasate n pagini" ele nu mai trebuie deplasate sau paginile de Web trebuie s se a!le n acela,i !older cu imaginile 6ormatele acceptate de paginile Web sunt .gif ,i .jpg Composer accept ,i alte !ormate de imagini" dup ce le con+erte,te n prealabil 2n Composer se pot modi!ica imaginile scalabil" adic mrimea imaginii poate !i modi!icat" dar nu se pot sc/imba dimensiunile !i,ierului Pentru a mic,ora cu ade+rat imaginea" aceasta trebuie prelucrat ntr-un editor de imagine" precum P/otos/op Pentru a insera o imagine" se !olose,te icon-ul de pe bara de unelte sau comanda Insert Image din meniu $*oose File este comanda prin care se selectea# imaginea din !olderul unde este sal+at pe /ard dis% Image Properties este meniul care conine opiunile de modi!icare a caracteristicilor imaginii 2n primul r.nd" se poate modi!ica de aici blancul dintre imagine ,i te4t" pe toate laturile F margine solid poate !i aplicat )in o!iciu" nu este preci#at nici o margine solid" dar dac reali#ai un lin% dintr-o imagine" se +a aplica automat o margine solid de ? pi4eli pe care o putei elimina 2n opiunea /lt.'e t2#ow ,esolution Image din Image Properties" se poate preci#a o descriere a imaginii care s apar n etic/eta galben +i#ibil atunci c.nd mouse-ul este plasat pe imagine sau c.nd bro'ser-ul are de#acti+at opiunea de ncrcare a imaginilor E4ist mai multe moduri de aliniere a imaginii !a de te4t 5inei cont de !aptul c alinierile nu sunt +i#ibile n Composer" ci doar n Na+igator &Pre+ie'( )ac site-ul are multe imagini" este bine ca ele s !ie organi#ate pe !oldere )ac imaginile nu sunt numeroase" ele pot !i pstrate n acela,i !older cu paginile Web Imaginile plasate n pagini pot !i modi!icate ulterior din opiunile Image Properties Pentru a ,terge o imagine" ea se selectea# ,i se apas tasta Jac%space sau tasta )elete )ac sal+ai imagini de pe Internet ,i ele au denumiri cu mai mult de un cu+.nt" redenumii-le ,i punei semnul 071 ntre cu+intele denumirii Este recomandabil s sal+ai imagini la dimensiuni c.t mai apropiate de cele dorite n pagin 6olosii aplicaii e4terne de editare a imaginii pentru a prelucra imaginea ,i apoi plasai-o n pagina Web

INTERNET - George Popescu

Iat opiunile disponibile n meniul Image Properties3 Op iunea !escrierea op iunii

Preci#ea# locul unde este stocat imaginea care urmea# a !i plasat Image 6ile Name or =ocation8n pagin Poate !i plasat o imagine de pe /ard dis% sau de pe un C/oose 6ile button ser+er &n acest ca#" speci!icai adresa direct" de tipul /ttp3MM''' !-sc roMimage -pg( =ea+e image at t/e originalActi+ai opiunea aceasta pentru a-i permite lui Netscape Composer s location copie#e imaginea n acela,i !i,ier ca ,i pagina Web )escriere a imaginii" asemntoare unei legende M Imagine de calitate Alt Te4t M =o' Resolution mai slab" care se +a a!i,a naintea imaginii originale" pentru a-l !ace Image pe utili#ator s a,tepte Resetea# imaginea la dimensiunile originale" n ca#ul n care )imensions3 Friginal 9i#e imaginea a !ost mic,orat sau mrit n Composer 9etea# anumite dimensiuni" n pi4eli sau procente" pentru nlime ,i )imensions3 Custom 9i#e lime Atunci c.nd setai o anumit dimensiune" dac dorii s pstrai proporiile ntre limea ,i nlimea imaginii" acti+ai aceast opiune )imensions3 Constrain Frice +aloare ai introduce la nlime" Composer +a pune +aloarea corespun#toare la lime ,i in+ers *odurile n care te4tul se alinia# !a de imagine E!ectul opiunilor Image 'rapping options nu este +i#ibil n Composer" ci n Pre+ie' 9pace Around Image 9pace Around Jorder Image3 9olid 9paiul alb din -urul imaginii 9etea# o bordur imaginii" +alorile pot !i date n pi4eli

$rearea i manipularea leg1turilor interactive =in%-urile sunt cele care !ac interacti+itatea site-ului E4ist trei categorii de lin%-uri3 - lin%-uri ctre alte pagini ale site-ului" care !acilitea# na+igarea - lin%-uri ctre interiorul aceleia,i pagini - lin%-uri ctre alte site-uri - lin%-uri ctre adrese de e-mail - lin%-uri ctre documente de alt tip dec.t /tml &te4t" imagine" sunet etc ( Composer nu !ace di!eren ntre aceste lin%-uri" deosebirea const.nd n modul de reali#are a legturilor Toate lin%-urile din Composer se creea# select.nd mai nt.i elementul care +a de+eni interacti+ &ancor( Acesta poate !i un cu+.nt sau mai multe" un simbol gra!ic sau o imagine Apoi" se selectea# butonul =in% de pe bara de unelte sau opiunea #ink din meniul Insert 2n !ereastra de dialog ce apare" se introduce destinaia legturii =in%urile se pot +eri!ica numai n Pre+ie'" ele nu !uncionea# n Composer Pentru ca lin%-ul ctre o alt pagin a site-ului s !uncione#e" trebuie ca pagina de destinaie s !i !ost creat 2n !ereastra de opiuni pentru lin%" apsai butonul $*oose File ,i selectai pagina de destinaie )ac pagina de destinaie este n acela,i !older ca ,i pagina din care se !ace lin%-ul" putei tasta pur ,i ismplu denumirea paginii n spaiul din !ereastra cu opiuni )enumirea trebuie s !ie tastat e4act ,i cu

INTERNET - George Popescu

terminaia inclus &de e4emplu" stiri /tml( Pentru a !i siguri c legturile +or !unciona" selectai de !iecare dat pagina de destinaia prin butonul $*oose File =in% ctre interiorul aceleia,i pagini este indicat n ca#ul paginilor cu un coninut !oarte bogat" care !ace ca pagina s !ie !oarte lung >n e4emplu clasic este pagina cu ntrebri ,i rspunsuri !rec+ente din interiorul site-ului 9 presupunem c n antetul paginii a+em lista ntrebrilor ,i dorim s le trans!ormm n lin%-uri interne" n a,a !el nc.t utili#atorul s apese pe o ntrebare" pentru a citi rspunsul corespun#tor Pentru a reali#a acest lucru" trebuie mai nt.i s introducem target-uri la !iecare dintre rspunsuri" deci n locurile care repre#int destinaia +iitoarelor lin%-uri interne 9electai opiunea 'arget din meniul Insert sau apsai butonul 'arget de pe bara de unelte Tastai un nume pentru !iecare target 'arget-urile nu +or aprea n pagina de Na+igator" ele sunt +i#ibile numai n Composer )up ce ai introdus target-urile" reali#ai lin%-uri corespun#toare 9electai prima ntrebare" acti+ai #ink" dar nu mai trebuie s accesai $*oose File =ista targeturilor apare n !ereastra de opiuni pentru #ink Este su!icient s selectai !iecare target corespun#tor !iecrui lin% 2n ca#ul n care dorii s plasai un lin% ctre partea de sus a paginii" dup s!.r,itul !iecrei ntrebri" introducei un target n partea de sus ,i reali#ai lin%-ul corespun#tor" pe care l putei copia ,i lipi dup !iecare rspuns 2n ca#ul lin%-urilor ctre alte pagini" selectai cu+.ntul sau imaginea care +a de+eni ancor Acti+ai opiunile de #ink ,i tastai adresa ntreag a paginii de destinaie" preci#.nd inclusi+ protocolul &de e4emplu" *ttp322www.fjsc.ro( Nu este ne+oie s memorai adresa de destinaie pe care o +ei introduce n Composer" deoarece !unciile $op% ,i Paste !uncionea# ,i n acest ca# )e asemenea" putei e4ecuta 0drag and drop1 dintr-o !ereastr de Na+igator sau dintr-un !i,ier de pe )es%top ctre Composer ,i automat se +a desc/ide !ereastra de opiuni pentru #ink Putei atunci modi!ica setrile lin%-ului Pentru a u,ura 0e!ortul1 depus de utili#ator n cursul na+igrii prin site" putei crea un lin% care acti+ea# aplicaia de e-mail din o!iciu de pe calculator" desc/i#.nd o !ereastr de mesa- nou" a+.nd adresa de la destinatar de-a tastat 9electai cu+.ntul care dorii s de+in acti+ &de e4emplu" 0Contact1 sau 09criei-mi1( ,i desc/idei !ereastra de opiuni #ink 2n bara de adres" tastai urmtoarea sec+en" !r pau#e ntre cu+inte3 mailto3adresa4server.ro 2n ca#ul n care dorii ca e-mailul s !ie trimis la mai multe adrese" tastai adresele separ.ndu-le prin +irgule3 mailto3adresa54server.ro6adresa74server.com6adresa84server.org Putei preseta c/iar ,i cu+intele care s apar n c.mpul subiectului e-mail-ului utili#atorului" ast!el3 mailto3adresa4server.ro9su+ject:-oresc c;teva informa<ii 2n acest ultim ca#" c.nd utili#atorul +a apsa pe ancor" se +a desc/ide aplicaia de email ,i o !ereastr de redactare a unui nou mesa-" a+.nd de-a tastate la c.mpul adres adresa4server.ro ,i la c.mpul subiect -oresc c;teva informa<ii Este bine totu,i s ,i preci#ai clar adresa de e-mail unde+a n pagin" deoarece" din moti+e de securitate" unele bro'sere pot !i setate ast!el nc.t s nu declan,e#e automat aplicaia de e-mail atunci c.nd se apas pe un lin% de asemenea tip Putei reali#a lin%-uri ctre orice tip de !i,ier" inclusi+ cele gra!ice" de te4t sau audio-+ideo 9etrile !iecrui utili#ator +or !i cele care +or decide cum se +or desc/ide respecti+ele !i,iere &direct n bro'ser sau n !erestre separate( Pentru asemenea ca#uri" lin%-ul se reali#ea# la !el ca ,i cele ctre paginile secundare ale site-ului" numai c" aps.nd $*oose File" nu se +a mai selecta o pagin a site-ului" ci documentul +i#at

INTERNET - George Popescu

Pu+licarea site(ului pe 0e+ 9ite-ul poate !i construit !r s a+ei un spaiu pe +reun ser+er distant )ac dorii s publicai site-ul" trebuie s + re#er+ai un nume de domeniu ,i s pltii o ta4 periodic la un I9P &Internet 9er+ice Pro+ider( care + poate g#dui paginile create E4ist ns numeroase site-uri care o!er ,i ser+icii de g#duire de site-uri" gratuit" n sc/imbul a!i,rii unor reclame 2n aceast categorie intr site-uri precum www.*ome.ro" www.geocities.com sau www.ifrance.com Pentru a trans!era !i,ierele din Composer &paginile Web ,i imaginile( pe ser+erul unde +-ai creat un cont" a+ei ne+oie de o aplicaie 6TP &6ile Trans!er Protocol( Composer include un ast!el de ser+iciu" dar este bine s instalai ,i o alt aplicaie 6TP pe calculatorul local )ac decidei s !olosii utilitatea de trans!er de !i,iere din Composer" apsai butonul Pu+lis* 9e +a a!i,a o !ereastr de dialog" unde +ei putea seta elemente care in de site-ul propriu-#is ,i de ser+erul unde +-ai creat contul Page 'itle : preci#ai numele sub care utili#atorii + +or cunoa,te site-ul8 - !'=# Filename : denumirea !i,ierului care +a constitui prima pagin8 aceasta a !ost de-a denumit 0inde4 /tml18 - !''P or F'P #ocation : adresa ser+erului unde +a !i publicat site-ul" de tipul !tp /ome ro8 - )sername ,i Password sunt elementele personale pe care leai selectat c.nd +-ai creat contul la ser+erul gratuit8 - Ot*ers files to include : dac +ei selecta Files associated to t*is page" imaginile !olosite n pagini +or !i ,i ele trans!erate pe ser+er8 dac selectai /ll files in page>s folder" se +or trans!era toate !i,ierele care e4ist n acela,i !older cu pagina Web creat &opiunea aceasta nu este recomandat dac nu au !ost !olosite toate !i,ierele din !olderul respecti+(8 6i,ierele care urmea# s !ie trans!erate +or aprea ntr-o list n partea de -os a !erestrei de dialog )ac dup ce apsai FD" dispare !ereastra de dialog" !r a mai aprea un mesa- de eroare" nseamn c site-ul a !ost trans!erat cu succes pe ser+erul distant ,i el poate !i accesat la o adres de tipul www.stiri.*ome.ro sau www.*ome.ro2stiri -

%&% 'rincipii generale de design Web

2nainte de a ncepe construirea paginilor de Web propriu-#ise" este important proiectarea site-ului F sc/em reali#at pe /.rtie este un lucru simplu care a-ut !oarte mult la +i#uali#area coninutului iniial al paginilor ,i a legturilor dintre ele Pe o pagin AG" se +or desena paginile de Web n miniatur ,i se +a ncerca imitarea

INTERNET - George Popescu

;C

design-ului din realitate =egturile dintre pagini +or !i repre#entate prin sgei care leag paginile n a,a !el nc.t utili#atorul s aib tot timpul controlul asupra na+igrii Trebuie respectate c.te+a principii de design" unele c/iar din !a#a de proiectare" aletele n timpul construirii site-ului ,i altele dup ce paginile au !ost create3 ( ?c*ili+rul. 9en#aia de de#ec/ilibru al unei pagini data de aglomerarea ntr-o anumit #on a mai multor elemente ,i spaiile goale din alte #one este neplcut Este inadec+at s atragem atenia spre un singur col al paginii prin !olosirea" n acea #on a unor culori puternic contrastante cu !ondul Aceste #one trebuie plasate ori n centrul paginii" ori uni!orm de-a lungul uneia dintre laturile paginii - Navigarea uoar1. 2n general" !iecare pagin are o anumita meta!or" o anumit concepie gra!ic Indi!erent de tema site-ului" utili#atorul trebuie s a-ung la in!ormaia dorit prin ma4im trei apsri de mouse )e asemenea" codul de na+igare trebuie pstrat pe parcursul tuturor paginilor )ac" de e4emplu" utili#atorul ,tie c" dac apas pe acel buton +erde" +a a-unge la prima pagin" nu este logic ca butonul +erde s duc ,i alte pagini dec.t prima - 2n !iecare pagina !oloseste si navigarea pe +a"a de te t 9e poate ca utili#atorul s !i anulat ncrcarea imaginilor din site ,i atunci nu +a putea +edea lin%-urile plasate pe butoane" ci doar in!ormaiile de tip te4t" a,a c meniul-te4t l +a a-uta s se deplase#e n pagini - Nu se plasea"1 prea mult te t @ntr(o celul1 de ta+el" deoarece te4tul din tabel se ncarca tot deodata 9e poate 0sparge1 te4tul n mai multe tabele Trebuie e+itat !olosirea tabelelor imbricate &tabel n tabel( - Pentru versiuni mari ale imaginilor6 folosi<i pagini separate Ilustraiile de mari dimensiuni ncarc pagina ,i nu toi utili#atorii sunt dispu,i s a,tepte ncrcarea paginii respecti+e F +ersiune n miniatur dintr-o pagin poate !i interacti+ ,i poate duce la o +ersiune mai mare a acelea,i imagini" care s se desc/id ntr-o !ereastr separat - /nima<iile nu tre+uie folosite dec;t dac1 este neap1rat necesar Animaii ncarc ,i ele n mod inutil paginile de Web ,i derutea# utili#atorul - Nu reali"a<i link(uri ale unor pagini c1tre ele @nsele )in moment ce utili#atorul se a!l n pagina respecti+" nu mai are sens un lin% ctre aceea,i pagin Acest pleonasm de design Web irit utili#atorii - ?vita<i paginile care nu mai au leg1turi c1tre celelalte ABfund1turiCD )e asemenea" nu sunt utile lin%-urile 02nainte1 ,i 02napoi1" deoarece utili#atorul nu este obligat s parcurg site-ul liniar" asemeni unei cri 2n plus" utili#atorul poate intra n site printr-o alt pagin dec.t prima pagin Este mai logic !olosirea unui lin% de re+enire la prima pagin - ?vita<i pleonasmele de tipul Bapas1 aiciC6 deoarece nu aduc nici o idee nou1 )ac dorii ca utili#atorul s a-ung la respecti+a pagin" !olosii drept ancor un cu+.nt repre#entati+ pentru coninutul paginii respecti+e &de e4emplu" 0,tiri1 sau 0istoricul !irmei1( - Encerca<i s1 p1stra<i codurile grafice deja consacrate >tili#atorii sunt obi,nuii s apese pe ancorele albastre ,i subliniate" deoarece acesta este codul gra!ic impus de na+igatorul Netscape ,i e4ist rare situaii c.nd acest cod poate !i sc/imbat - Preci#ai" cel puin pe prima pagin" numele autorului i metode de contact6 precum i data la care site(ul a fost actuali"at ultima oar1 Aceste elemente con!er credibilitate site-ului. - Paginile create tre+uie vi"uali"ate cel pu<in cu Netscape i Internet ? plorer " pentru a se putea a-usta e+entualele di!erene de a!i,are )e asemenea" +i#uali#ai site-ul dup ce ai anulat n prealabil ncrcarea imaginilor

INTERNET - George Popescu

;;

>tili#atorii +ad paginile prima data ca o masa mare de culoare si !orme Pentru a le reduce e!ortul de concentrare" +ackground(ul tre+uie s1 fie suficient de contrastant pentru a nu obosi 2n Europa ,i 9>A trebuie s mai tinem cont si de !aptul ca modul de citire este de la stanga la dreapta ,i de sus n -os Primii ;C cm? din partea din st.nga sus sunt cea mai +i#ibil #on a ecranului 2n aceasta #on trebuie a,e#ate elementele cele mai repre#entati+e pentru site