Liviu Dumitracu

Informatic economic

2005

Cuprins
Principii i reguli generale pentru crearea unui site Web ............................................................... 1 Crearea i gestionarea unui site Web cu Dreamweaver MX 2004 ........................................... 11 Limbajul HTML i Dreamweaver MX 2004.................... 29 Inserarea i formatarea textului ................................. 35 Crearea foilor de stil CSS (Cascading Style Sheets) ............................................. 49 Inserarea, parametrizarea i formatarea imaginilor................................................... 67 Crearea legturilor hipertext........................................ 79 Inserarea i formatarea tabelelor ............................... 87 Crearea i validarea unui formular ............................... 97 Inserarea i formatarea cadrelor ................................. 109 Crearea i formatarea straturilor ................................. 117 Utilizarea bibliotecilor de obiecte i a modelelor ................................................................... 123

Limbajul JavaScript i Dreamweaver MX 2004 ............ 139 Publicarea site-ului ....................................................... 149 Exemple pentru crearea site-urilor Web cu Dreamweaver MX 2004 ........................................... 157 Bibliografie ................................................................... 189

01

Principii i reguli generale pentru crearea unui site Web

yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy n acest capitol: Principii de calitate Reguli generale Regulile de ... aur ale paginilor Web yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy

Principii de calitate
Z Pentru a realiza un site de succes, v recomandm s aplicai cteva din principiile care stau la baza crerii site-urilor Web de calitate.

Figura 1
Principii Calitatea vizual Descriere Paginile site-ului dumneavoastr trebuie s fie clare. Dac vizitatorul dumneavoastr se simte atras de site-ul pe care l-ai realizat, cu siguran c el va reveni. O pagin bine fcut este ntotdeauna mai agreabil dect o pagin tern i anost. Dac informaia n sine este capital pentru un vizitator, atunci prezentarea nu va avea nici o importan. Vizitatorul trece de la o pagin la alta a site-ului utiliznd legturi hipertext. n consecin, va trebui s evitai situaiile neplcute cnd vizitatorii se pot rtci n site-ul pe care l-ai creat. Concepia site-ului dumneavoastr trebuie s favorizeze cutarea informaiilor. Vizitatorul trebuie s ajung rapid la informaiile care-l intereseaz, iar returul la pagina de index (prima pagin) trebuie s se realizeze ct mai simplu cu putin. Cea mai mare parte a sistemelor de operare utilizeaz tehnologiile care favorizeaz dezvoltarea aplicaiilor multimedia (video, sunet). Folosii aceste tehnologii pentru a v atrage i mai mult vizitatorii. Rmnei sobri! Evitai elementele multimedia care prezint mai multe dezavantaje dect avantaje. Utilizai cu discernmnt

Uurina navigrii

Utilizarea tehnologiilor multimedia

Interesul pedagogic

Calitatea surselor de informare

animaiile gif, script-urile Java Script, VB Script sau applet-urile Java. Respectnd principiul c un vizitator nu rmne mai mult de 15 secunde pe un site, este bine s-i oferii informaii de ultim or pentru a-l putea convinge s rmnei mpreun. Fii ntotdeauna oneti! Informaiile pe care le furnizai trebuie s fie corecte! Erorile sau falsurile vor descalifica site-ul dumneavoastr!

Reguli generale
Z Dac Internet-ul, n general, i Web-ul, n particular, pot prea ca zone libere, n care toat lumea poate face ce vrea, n realitate lucrurile nu stau chiar aa. Ca dovad stau cteva reguli elementare pe care este bine s le aplicai n activitatea de creare a site-urilor Web de calitate: 9 9 9 9 9 9 9 Creai un storyboard al site-ului. Definii modul de navigare ntre paginile site-ului. Definii structura fiecrei pagini Web titlu, subiect, concluzii. Alegei un subiect care s trezeasc interes. Nu prezentai informaii false. Respectai legislaia n vigoare, drepturile de autor. Actualizai n mod regulat paginile site-ului.

Regulile de ... aur ale paginilor Web

Z nainte de a ncepe crearea unei pagini Web, este important s cunoatei cteva din regulile de aur ale paginilor Web pe care este bine s le i aplicai (figura 2).

Figura 2
Reguli pentru ... Pagina de primire (index) Descriere Este prima pagin a unui site. Numii pagina de primire (index) index.htm sau index.html. Trebuie s conin un rezumat succint al site-ului i/sau un sumar. n cazul ideal, ea trebuie s conin o prezentare scurt a proprietarului site-ului.

Alte pagini

Text

Fiecare pagin trebuie s nceap cu informaii importante (eseniale). Formatul A4 nu are nici o semnificaie pe Web. Nu publicai o pagin n curs de realizare! Actualizai n mod regulat paginile. Gndii-v la persoanele care dezactiveaz afiarea imaginilor n navigatorul acestora. Trebuie ca tot timpul pagina s fie gritoare, iar textul suficient de explicit fr imagini. Utilizai fiiere de dimensiune minimal pentru ca vizitatorul s nu atepte minute n ir apariia paginii ntregi pe ecran. Structurai textul utiliznd titluri de nivele diferite. Pentru a garanta o bun lizibilitate, utilizai cel mult dou sau trei fonturi diferite. Verificai corectitudinea tuturor informaiilor pe care le-ai menionat.

" Inserarea i formatarea textului sunt prezentate n

Foi de stiluri CSS (Cascading Style Sheets) Utilizai foile de stiluri CSS, deoarece ele reprezint cel mai sigur i cel mai uor mod de formatare a documentelor HTML. Utilizai foile de stiluri CSS pentru a putea crea o mai mare flexibilitate ntre paginile unui site Web. Utilizai foile de stiluri CSS pentru a reduce timpii de ncrcare i de mentenan ai paginilor Web. Utilizai foile de stiluri CSS interne pentru a crea stiluri CSS n pagina curent. Utilizai foile de stiluri CSS externe (salvate ca un fiier separat) pentru a folosi aceleai stiluri CSS n pagini diferite.

capitolul 4.

" Foile de stiluri CSS sunt tratate n capitolul 5.

Imagini Respectai copyright-ul. Nu folosii imagini fr acordul proprietarului! Evitai imaginile de dimensiuni mari. Imaginile sunt mari consumatoare de octei! Din acest motiv, ele necesit mult timp pentru a putea fi ncrcate i, n consecin, pot descuraja vizitatorii! Realizai o versiune n miniatur a imaginii pe care apoi vizitatorul s o poat mri la dimensiunile reale.

 Creai propriile imagini cu programe dedicate. Retuai imaginile cu programe dedicate (Macromedia Fireworks, Graphic Converter, Paint Shop Pro etc.). Plasai textul naintea imaginilor. Astfel, n momentul ncrcrii imaginilor, vizitatorul poate ncepe s citeasc textul n timp ce imaginile se ncarc. Asigurai-v c paginile dumneavoastr Web rmn inteligibile i atractive i, n absena imaginilor. O parte din vizitatorii site-ului dumneavoastr fie nu pot, fie ateapt s nu descarce imaginile atunci cnd viziteaz paginile Web. n consecin, n locul imaginilor, adugai un text explicativ. Refolosii imaginile ori de cte ori este posibil. Exist numeroase site-uri care v pot oferi, n mod gratuit, biblioteci de imagini. Nu ezitai s le folosii! Folosii tabelele pentru plasarea exact a imaginilor n cadrul unei pagini Web. Creai un folder special n care plasai toate imaginile pe care dorii s le inserai n paginile dumneavoastr Web.

" Imaginile sunt prezentate n capitolul 6.

Legturi Fiecare pagin a site-ului trebuie s fie prevzut cu o legtur hipertext de retur ctre pagina de index (pentru a nu v pierde vizitatorii!). Evitai sublinierea textelor care nu sunt legturi hipertext. Asociai legturilor hipertext texte implicite. Propunei un plan al site-ului, o vizit ghidat sau un sumar, pentru ca vizitatorii s poat accesa rapid teme, subiecte care prezint interes. n paginile relativ lungi, folosii legturile hipertext bazate pe ancore.

" Legturile sunt prezentate n capitolul 7.

Tabele

Listai toate datele nainte de a fi inserate n tabel. Definii structura tabelului (titlul tabelului, capul de tabel etc.). Realizai un crochiu al viitorului tabel pentru a putea justifica aspectul acestuia.

" Tabelele sunt prezentate n capitolul 8.

Formulare

Stabilii coninutul formularului i forma de prezentare. 9 Identificai informaiile ce urmeaz a fi incorporate n formular i stabilii forma de prezentare a acestora. 9 Structurai aceste informaii n mai multe ntrebri elementare, uor de prelucrat. De exemplu, dac

9 O bun proiectare a formularului v va scuti de posibile reveniri, modificri! Un formular bine conceput nu poate dect s ncurajeze utilizatorii n a v transmite informaiile dorite. 9 Verificai dac obiectivele propuse se verific cu rspunsurile la urmtoarele ntrebri: ce informaii

aceste informaii se refer la un client, putei s le structurai n: nume, prenume, adres, existnd astfel posibilitatea efecturii unor sortri pe anumite zone particulare ale formularului.

9 ncurajai utilizatorii s completeze i apoi s expedieze formularele. Dac formularele dumneavoastr sunt dificil de completat, riscai de a nu primi nici un rspuns! Oferii utilizatorilor dumneavoastr mici bonus-uri, chiar dac valoarea acestora este nesemnificativ. Dac ai ti ct conteaz! 9 Interesul vizual al formularului nu trebuie s minimalizeze alte aspecte ale paginii; o utilizare judicioas a culorilor, a alinierilor, imaginile de dimensiuni mici i fonturile de caractere dau formularului mai mult ... relief! 9 Utilizai antet-uri pentru a anuna fiecare nou grup de informaii. n acest mod, utilizatorii se pot orienta mult mai uor n formular. 9 Separai vizual grupurile de informaii. n acest mod, utilizarea formularului va fi mult uurat, ntruct seciunile vor deveni mai scurte i mai uor de urmrit. 9 Scoatei n relief, fr a exagera cteva cuvinte din pagin pentru a le pune n eviden. 9 Specificai modul n care utilizatorii trebuie s se deplaseze n formular. 9 Avei n vedere rezoluia monitoarelor, coloanele multiple pe care le propunei n formularul

dorii s obinei de la utilizator? Ct timp vor consuma utilizatorii pentru completarea formularului?

dumneavoastr i nu doar att. 9 Folosii sgeile pentru a ajuta utilizatorii s navigheze n pagin, ntr-o anumit ordine. 9 Utilizai rupturile de linie i spaiile pentru a obine o difereniere clar a informaiilor de descriere asociate anumitor butoane (de exemplu, casetele de 9 Specificai cmpurile care sunt opionale i cele care sunt obligatorii. Plasai cmpurile opionale dup cmpurile obligatorii. Anumite navigatoare i aplicaii de procesare rejecteaz formularele completate n mod incorect. 9 Utilizai o imagine de background. 9 Plasai n stnga formularului zonele de date de aceeai lungime. Textul se va alinia vertical i va deveni mult mai agreabil. 9 Folosii urmtoarele cmpuri (controale) pentru colectarea datelor: butoane de tip submit i reset; cmpurile de text; cmpurile de text multilinie; listele derulante; butoanele radio; casetele de validare. 9 Butoanele submit i reset trimit server-ului informaiile colectate n formular i iniializeaz formularul. 9 Cmpurile de text sunt zone simple de text. Utilizaile pentru rspunsuri scurte, ca de exemplu: nume, 9 Cmpurile de text multilinie sunt zone mai mari de text, cu mai multe linii. n aceast zon pot fi introduse comentarii, sugestii, instruciuni de livrare etc. 9 Listele derulante sunt cmpuri n care utilizatorii pot introduce o list de opiuni. Folosii-le pentru a prezenta liste lungi (dar finite) de opiuni. 9 Butoanele radio ofer utilizatorilor posibilitatea de a selecta o singur opiune (i numai una!), de exemplu sexul (masculin sau feminin). Butoanele radio se exclud reciproc. 9 Casetele de validare permit utilizatorilor de a selecta una, nici una sau mai multe opiuni din cadrul unei liste. 9 Atunci cnd alegei cmpurile pentru un formular, reflectai cu atenie la informaia pe care dorii s o colectai. n general, butoanele radio, casetele de

validare).

adrese etc.

validare i listele derulante sunt preferate zonelor de text. Dac utilizatorii aleg rspunsul lor dintr-o list, nu vei mai avea greeli de ortografie, rspunsuri incoerente sau rspunsuri n afar de subiect. Aceast metod este cea mai bun metod atunci cnd este posibil s propunei o list utilizatorilor! Creai formularele manual sau cu editoarele WYSISWYG. 9 Putei crea manual formularele cu limbajele (X)HTML sau automat cu editoarele WYSIWYG 9 Utilizai un editor WYSIWYG (de exemplu, Dreamweaver) atunci cnd dorii s creai mai multe formulare (de baz). Aceste editoare nu genereaz ntotdeauna rezultate satisfctoare, dar ele v permit s nu uitai nici un element sau atribut. 9 Utilizai (X)HTML (procedura manual) atunci cnd creai unul sau dou formulare. n acest caz, este mai bine s folosii procedura manual (X)HTML, dect s nvai modul de utilizare a unui editor WYSIWYG. Semnai ... de primire! 9 Realizai o pagin de confirmare de primire (recepie), un document pe care l returnai utilizatorului, precizndu-i c formularul a fost bine primit. 9 O pagin de confirmare de primire a unui formular poate conine toate ideile dumneavoastr! Putei lega aceast pagin de pagina de index a site-ului dumneavoastr. Nu uitai c utilizatorul a alocat un fond de timp pentru a completa formularul dumneavoastr. Se impune o form de respect, n acest sens!

(What You See Is What You Get).

" Formularele sunt prezentate n capitolul 9.

Cadre Indiferent dac apreciai sau nu cadrele, site-urile Web bazate pe cadre exist i vor mai exista! Teoretic nu exist limitri n ceea ce privete numrul de cadre. Cinci cadre sunt deja multe! Dou cadre reprezint numrul minim! Atenie, ns, la gradul de

lizibilitate al ecranului! Cadrele trebuie s permit o navigare uoar cu una din metodele: 9 Utilizatorii pot executa clic pe un cadru i vizualiza documentul obinut n alt cadru. 9 Utilizatorii pot executa clic ntr-un cadru i vizualiza documentul obinut n acelai cadru. Nu utilizai cadre numai de plcerea de a utiliza cadre. Nu afiai bordurile cadrelor. Nu utilizai cadre atunci cnd tabelele sunt mai indicate. Pentru a realiza o pagin mai atractiv, creai cadre inline (flotante). Nu folosii cadre imbricate. Creai o alternativ pentru vizitatorii care posed un browser incapabil s afieze cadrele. Folosii mesajul: Nu folosii cadrele atunci cnd creai link-uri ctre alte site-uri.

Acest site utilizeaz cadre i necesit un navigator capabil s le afieze.

" Cadrele sunt prezentate n capitolul 10.

Straturi Folosii straturile pentru poziionarea precis a obiectelor ntr-o pagin Web. Folosii straturile pentru crearea unui coninut dinamic al paginilor Web. Folosii straturile imbricate (nested) pentru a crea efecte de superpoziie. Controlai coninutul unui strat.

" Straturile sunt prezentate n capitolul 11.

Biblioteca de obiecte Folosii bibliotecile de obiecte pentru a putea ctiga un timp preios n activitatea de creare a paginilor Web. Catalogai n bibliotecile de obiecte acele elemente din pagina dumneavoastr Web care se repet cu regularitate n site-ul dumneavoastr: imagini, culori, animaii, logouri, bare de navigare, coordonate potale, URL-uri, tabele, texte, formulare etc.

" Biblioteca de obiecte este prezentat n capitolul 12.

Modelele

Utilizai modelele (abloanele) ori de cte ori dorii ca un numr mai mare de pagini s aib acelai aspect, fr a mai trebui s construii separat coninutul fiecreia de mai multe ori. Dac modelele propuse de editoarele de tip WYSIWYG nu v satisfac sau dorii s realizai toate paginile unui site cu un tip de formatare definit, soluia este aceea de a crea propriul model, iar apoi s-l aplicai paginilor site-ului dumneavoastr.

" Modelele sunt prezentate n capitolul 12.

Obiecte multimedia Pentru a utiliza un obiect multimedia, va trebui s avei instalat pe calculatorul dumneavoastr plug-in-uri. Nu ntotdeauna este uor s obinei obiecte multimedia de calitate. Prima soluie este aceea de a crea dumneavoastr, cu fore proprii, obiectele multimedia, dar va trebui s consacrai o mare parte din timpul dumneavoastr acestei activiti. A doua soluie const n cutarea obiectelor multimedia pe Web, dar nainte de a le utiliza, rspundei la urmtoarele ntrebri: 9 Obiectul multimedia contribuie pozitiv la mbuntirea coninutului paginii Web? 9 Obiectul multimedia valorific sau completeaz n mod eficient coninutul paginii Web? 9 Navigatoarele utilizatorilor suport obiectele multimedia pe care dorii s le inserai? 9 Utilizatorii dispun de o conexiune Internet rapid? 9 Utilizatorii dein cele mai bune plug-in -uri? Dispun ei de timp i de mijloace tehnice pentru a le obine i a le insera? Utilizai legturile hipertext pentru inserarea unui fiier sunet extern. Oferii vizitatorilor site-ului i posibilitatea unui control suplimentar asupra sunetului (volum, pauz, pornire etc.). Creai propriile fiiere video sau cutai-le pe Web. Utilizai legturile hipertext pentru inserarea fiierelor video. n acest mod, utilizatorii pot decide singuri dac vor sau nu vor s le vizioneze. Pentru a anima sau pentru a insera obiecte interactive n pagina dumneavoastr Web, folosii applet-uri Java.

" Obiectele multimedia sunt prezentate n capitolul 12.

Script-uri

Pentru a mri gradul de interactivitate al paginilor Web, folosii JavaScript, limbajul favorit al creatorilor de site-uri Web.

" Limbajul JavaScript este prezentat n capitolul 13.

inei-v bine pe Web! Fii curtenitori i politicoi, respectai eticheta. Asigurai estetica paginilor dumneavoastr! Evitai nfloriturile! Nu utilizai resurse pirat (imagini, text etc.) fr a fi obinut n prealabil copyright-ul! Fii universal, evitai pe ct posibil instruciunile specifice unui anumit tip de navigator. Creai o legtur (link) de tip mailto, pentru ca vizitatorii s poat s v expedieze cu uurin un e-mail. Prevedei un FAQ (Frecquently Asked Questions). Astfel, nu va trebui s rspundei de mai multe ori la ntrebri puse n mod frecvent.

Privilegiai interactivitatea!

"______________________________________________________________
_________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________

10

02

Crearea i gestionarea unui site Web cu Dreamweaver MX 2004

yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy n acest capitol: Dreamweaver MX 2004, un editor de tip WYSIWYG Interfaa Metode de creare a site-urilor Web cu Dreamweaver Dreamweaver MX 2004 Gestionarea unui site Web Crearea unei pagini Web MX 2004 Gestionarea paginilor Web Proprietile unei pagini Web yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy

Dreamweaver MX 2004, un editor de tip WYSIWYG

Z Dreamweaver MX 2004 este cel mai puternic i complet soft pentru crearea site-urilor Web. Z Dreamweaver MX 2004 este un editor de tip WYSIWYG (What You See Is What You Get), care impresioneaz prin simplitatea utilizrii sale i prin bogia facilitilor pe care le ofer. Z Funciile de editare vizual permit crearea rapid a paginilor Web fr a fi nevoii s scriei nici o linie de cod HTML (bucuria de moment a debutanilor care nu au cunotine HTML!). Z Dreameaver MX 2004 permite crearea unei noi generaii de aplicaii Internet, ntr-un timp foarte scurt i cu o uurin dezarmant. Z Dreameaver MX 2004 genereaz cod HTML foarte apropiat de standardul impus de W3C (World Wide Web Consortium), ceea ce i-a atras popularitatea. Z Dreamweaver MX 2004 integreaz toate facilitile necesare crerii site-urilor dinamice cu ajutorul tehnologiilor ASP, ASP.net, JSP, ColdFusion sau PHP.

11

 Interfaa Dreamweaver MX 2004

Pagina de demaraj
Z Lansai aplicaia Dreamweaver MX 2004.

Pe ecranul dumneavoastr se va afia caseta de dialog Workspace Setup.

Z n caseta de dialog Workspace Setup, alegei tipul de interfa cu care dorii s lucrai (figura 1).

Figura 1

Z Optai pentru interfaa clasic Designer (activai butonul radio Designer, iar apoi executai clic pe butonul ).

9 Designer este interfaa clasic implicit n care toate ferestrele

12

documentului i toate panourile sunt reunite n interiorul unei singure ferestre. Grupurile de panouri sunt afiate n dreapta ferestrei. 9 Coder Coder este o interfa destinat programatorilor (Coder afieaz paginile n cod HTML).

2004.

Z Pagina de demaraj (Macromedia Dreamweaver MX 2004) se gsete n partea stng a ecranului principal (figura 2). Ea reprezint o noutate a versiunii MX

Figura 2

Z Pagina de demaraj permite: deschiderea unui document cu care ai lucrat recent (opiunea Open a Recent Item); crearea unei noi pagini vide (opiunea Create New); crearea unei noi pagini pornind de la un model (opiunea Create from Samples).

Ferestrele
Ecranul principal
Z La prima vedere, ecranul care se afieaz (figura 3) poate prea descurajant! Funciile Dreamweaver se ascund n panouri, n bare de instrumente i n casete de dialog.

13

Figura 3

Z n partea dreapt a ecranului se poziioneaz panourile care permit accesul rapid la funciile Dreamweaver MX 2004. Aceste panouri pot fi mascate

executnd un simplu clic pe separatorul de ecran

. Spaiul rezervat panourilor

poate fi redus sau mrit (executai clic i glisai bara de separare ). Z La baza ecranului se poziioneaz panoul Properties, cunoscut i sub numele de Inspectorul de Proprieti. Panoul Properties permite vizualizarea i modificarea proprietilor unui obiect al paginii (text, tabel, imagine etc.).

14

"______________________________________________________________

 Panourile
Z Toate panourile sunt accesibile din meniul Window. Ele permit un acces rapid la funciile eseniale Dreamweaver MX 2004. Z Panourile sunt afiate n partea dreapt a ecranului, n grupe de panouri. Pentru a afia / masca rapid toate panourile, activai tasta F4. Z Panoul Properties (figura 4) joac un rol fundamental n activitatea de realizare a site-urilor Web. Parametrii de formatare ai panoului Properties se actualizeaz n funcie de obiectul selectat n pagin. n mod implicit, panoul Properties se afieaz la baza ecranului.

Figura 4

Barele
Bara de titlu
Z Situat n partea de sus a ferestrei, bara de titlu este comun tuturor aplicaiilor Windows (figura 5):

Figura 5

Bara de meniuri
Z Situat sub bara de titlu, bara de meniuri conine 10 meniuri principale, iar fiecare meniu cuprinde o list de comenzi (figura 6):

Figura 6

15

Bara de instrumente Document

Z Plasat imediat deasupra ferestrei Document (figura 7), aceast bar (poate fi detaat!) conine icon-uri i un meniu derulant care permit accesarea rapid a diferitelor moduri de afiare a ferestrei Document Code, Design, Code and Design; administrarea fiierelor; vizualizarea paginii Web ntr-un navigator; afiarea / mascarea diferitelor instrumente (Rulers, Grid etc.) de ajutor pentru poziionarea elementelor n pagin etc.

Figura 7

Bara de instrumente Standard

Z Plasat imediat sub bara de instrumente Document sau deasupra ferestrei Document, bara de instrumente Standard nu este afiat n mod implicit. Bara de instrumente Standard (poate fi detaat!) conine icon-uri (figura 8) care permit accesul rapid la diferite comenzi de gestiune a paginilor Web (Open, Close, Save, New), ct i cunoscutele icon-uri (Copy, Cut, Paste).

Figura 8

Bara (de instrumente) Insert

Z Noutate a versiunii MX 2004, bara Insert nlocuiete panoul Insert din versiunile precedente. Z Plasat imediat sub bara de meniuri (figura 9), bara Insert conine icon-uri i un meniu derulant care permit accesarea rapid a diferitelor tipuri de fiiere, crearea legturilor hipertext, a ancorelor numite, tabelelor, imaginilor, datei calendaristice, cadrelor, modelelor etc.

Figura 9

16
Z Bara Insert conine 8 categorii: Common, Layout, Forms, Text, HTML, Application, Flash elements, Favorites. Ele pot fi afiate n dou moduri: prin

intermediul meniului derulant situat n stnga barei Insert (figura 10); prin intermediul comenzii Show as Tabs din meniul derulant al barei Insert (figura 11).

Figura 10

Figura 11

Bara de stare
Z Situat n partea inferioar a ferestrei documentului (figura 12), bara de stare afieaz urmtorii parametrii: codul HTML (selectorul de tag-uri); dimensiunea ferestrei; dimensiunea documentului i timpul de ncrcare.

Figura 12

Alegerea navigatoarelor
Z Este obligatoriu s vizualizai paginile dumneavoastr Web n unul sau mai multe navigatoare, deoarece fiecare browser interpreteaz codul HTML n manier proprie.

17

Z Cu Dreamweaver MX 2004 putei alege navigatorul n care dorii s afiai i s verificai paginile dumneavoastr Web, cu una din metodele: 9 Meniul Edit, via Edit Preferences categoria Preview in Browser. 9 Bara de instrumente Document, via butonul
Se afieaz fereastra Preview in Browser.

Edit Browser List... .

Z Pentru a aduga un navigator, efectuai urmtoarele operaii:

1. 2.

n fereastra Preview in Browser executai clic pe butonul

n caseta de dialog care se afieaz (Add Browser), introducei n cmpul Name numele navigatorului, iar n cmpul Application introducei calea de acces ctre aplicaie sau executai clic pe butonul .

Z Pentru a vizualiza paginile Web ntr-un browser, folosii una din metodele: 9 Meniul File, via Preview in Browser... alegei navigatorul. 9 Bara de instrumente Document, via butonul Preview / Debug in Browser List alegei Preview in <numele navigatorului> .

Metode de creare a site-urilor Web cu Dreamweaver MX 2004

Z Pentru a crea un site Web cu Dreamweaver MX 2004, folosii una din metodele: 9 Basic. 9 Advanced. Z Prezentm n continuare metoda Advanced (metoda Basic cere mai puin informaie tehnic dect metoda Advanced). Z Pentru a crea un site Web cu metoda Advanced, parcurgei paii prezentai n figura 13:

Figura 13

18 1.

Metoda Advanced (avansat) Fereastra de demaraj Meniul Site Executai clic pe

Panoul Files ,

1. Executai clic pe

Site Manage SitesNew Site

1.

Selectai n lista

derulant iar apoi executai clic pe

NewSite.

Remarc. Se deschide caseta de dialog Site Definition for.

2. Activai Advanced.
Remarc. Pentru moment numai categoria Local Info prezint interes.

3. Tastai numele site-ului n cmpul Site name. 4. n cmpul Local root folder tastai calea de acces sau executai clic pe icon-ul
pentru a selecta de pe hard discul dumneavoastr folder-ul care conine toate fiierele site-ului.

5. Opiunea Refresh local file list automaticcaly permite actualizarea n mod automat a fiierelor n repertoriul local atunci cnd facei copii n folder-ul local. 6. Cmpul Default images folder v permite s indicai n ce folder al folder-ului
rdcin local vor putea fi stocate toate imaginile site-ului dumneavoastr.

7. Cmpul HTTP address v permite s indicai adresa (http://...) de publicare a

site-ului n cazul n care dorii ca Dreamweaver MX 2004 s verifice aceste legturi.

8. Lsai activat opiunea Enable Cache care permite ca Dreamweaver MX 2004 s creeze un fiier de cache pentru a verifica i a administra rapid legturile site-ului dumneavoastr i funcionalitile panoului Actifs. 9.
Executai clic pe butonul . iar apoi executai clic pe butonul

19

 Gestionarea unui site Web

Panoul Files
Z Panoul Files permite administrarea rapid a site-ului i a coninutului su. Z Pentru a afia panoul Files (figura 14), executai clic pe Window Files.

Figura 14

Deschiderea unui site

Z Pentru a deschide un site, executai dublu clic pe folder-ul site-ului n panoul Files, sau utilizai pagina de demaraj (categoria Recent Item Open), sau utilizai bara de instrumente Standard (butonul Open).

Modificarea parametrilor unui site

Z Pentru a modifica parametrii unui site, efectuai urmtoarele operaii n caseta de dialog Manage Sites. Afiai caseta de dialog Manage Sites, via Site Manage Sites. n caseta de dialog Manage Sites, efectuai operaiile descrise n continuare (figura 15).

1. 20 2.

Figura 15

2.1. n lista site-urilor, selectai site-ul corespunztor. 2.2. Executai clic pe butonul pentru
parametrii ai site-ului. selectat.

a modifica diferii

2.3. Executai 2.4. Executai

selectat.

clic pe butonul clic pe butonul

pentru a copia site-ul pentru a suprima site-ul

2.5. Executai

clic pe butonul pentru a converti site-ul n format XML (Extensible Markup Language). clic pe butonul pentru a crea un nou site pornind de la caracteristicile unui alt site exportat. .

2.6. Executai 3.

Executai clic pe butonul

"______________________________________________________________
_________________________________________________________________

21

 Crearea unei pagini Web

Dreamweaver MX 2004 v permite s creai mai multe tipuri de pagini pentru Web (vezi pagina de demaraj Macromedia Dreamweaver MX 2004, categoriile Create New i Create from Sample).

Inserarea unei pagini vide

Z Pentru a insera o pagin vid (goal), folosii una din metodele prezentate n figura 16.

Figura 16
Pagina de demaraj Bara de instrumente

Standard

Meniul File

1. n pagina de
clic pe

1. Dac pagina de demaraj nu demaraj, n rubrica este afiat, n bara de Create executai instrumente Standard executai
. clic pe butonul

1. Executai clic pe
FileNew.

(New).

Remarc. Se afieaz caseta de dialog New Document.

22 2. n fereastra New Document efectuai urmtoarele

operaii:

2.1. Executai clic pe General (opiune selectat n mod

implicit).

2.2. n lista Category executai clic pe Basic page. 2.3. n lista Basic page executai clic pe HTML. 2.4. Dac dorii ca Dreamweaver MX 2004 s genereze
cod XHTML, activai opiunea Make document

XHTML compliant.

2.5. Executai clic pe butonul

Remarc. n fereastra de lucru se afieaz o nou pagin (goal).

Remarc. Ct timp pagina nu este salvat, ea nu apare n panoul Site.

Importarea unei pagini

Z Pentru a importa o pagin dintr-o alt aplicaie HTML (Front Page, Go Live etc.), afiai caseta de dialog Open (via meniul File sau pagina de demaraj), iar apoi selectai folder-ul corespunztor i executai clic pe butonul Open.

Utilizarea modelelor Dreamweaver MX 2004

Z Pentru a crea rapid o pagin Web deja formatat, putei apela la modelele oferite de Dreamweaver MX 2004, via pagina de demaraj Create from Samples sau New Document Page Designs. Z Mai multe informaii despre modele gsii n capitolul 12.

23

 Gestionarea paginilor Web

Salvarea unei pagini
Z Pentru a salva o pagin Web, efectuai urmtoarele operaii:

1. 2.

Executai clic pe File Save As. n caseta de dialog Save As care se afieaz, n cmpul File name introducei numele paginii, iar apoi executai clic pe butonul (figura 17).

Figura 17

nchiderea unei pagini

Z Pentru a nchide o pagin Web, executai clic pe File Close sau n bara de instrumente Standard executai clic pe butonul (Close).

24

Deschiderea unei pagini

Z Pentru a deschide un document (creat, salvat), folosii una din metodele prezentate n detaliu n figura 18.

Figura 18

Meniul File

Bara de instrumente

Standard

Panoul Files

1. Executai clic pe
FileOpen.

1. n bara de instrumente 1. n panoul Files (via

butonul

Standard, executai clic pe WindowFiles), executai (Open).

clic pe fiierul pe care dorii s-l deschidei.

Remarc. Se afieaz caseta de dialog Open.

2. n caseta de dialog Open executai clic pe fiierul pe care dorii s-l deschidei (dup ce ai selectat folder-ul corespunztor n cmpul Look in:).
tergerea unei pagini

Remarc. Pentru a deschide rapid o pagin acionai simultan tastele Ctrl+O.

Z Pentru a terge o pagin (din diverse motive!), n panoul Files, selectai pagina, iar apoi executai clic pe butonul .

Tiprirea unei pagini

Z Pentru a tipri o pagin Web, efectuai urmtoarele operaii:

1. 2. 3.

Afiai pagina ntr-un browser. n meniul File al browser-ului, executai clic pe Print. n caseta de dialog Print care se afieaz, selectai (eventual!) opiunile de imprimare, iar apoi executai clic pe butonul operaia. pentru a lansa

Proprietile unei pagini Web

Caseta de dialog Page Properties
Z n momentul n care v-ai decis s creai o pagin Web, este bine s ncepei prin a defini proprietile paginii, folosind caseta de dialog Page Properties (figura 19). Z Pentru a afia caseta de dialog Page Properties: executai clic pe Modify Page Properties sau n inspectorul Properties, executai clic pe butonul .

25

Figura 19

Atribuirea unui titlu

Z Nu confundai numele paginii cu titlul paginii. Numele paginii corespunde celui pe care l-ai indicat atunci cnd ai salvat pentru prima dat documentul, pe cnd titlul este cuvntul (fraza) care se va afia n bara de titlu a navigatorului. Z Pentru a atribui un titlu paginii Web, folosii una din urmtoarele metode: 9 Meniul Modify Page Properties Title/Encoding. 9 Inspectorul Properties butonul Title/Encoding.... 9 Bara de instrumente Document zona Title.

Definirea elementelor background-ului

26

Z n background-ul unei pagini putei aplica o culoare uniform sau putei plasa o imagine. Z Pentru a insera un element de background (imagine sau culoare uniform), folosii una din metodele prezentate n detaliu n figura 20.

Figura 20

Meniul Modify

Inspectorul Properties

Properties.

1. Afiai n prim plan pagina n care dorii s inserai un element de background. 2. Executai clic pe ModifyPage 2. Executai clic pe butonul
.
Remarc. Se afieaz caseta de dialog Page Properties.

3. n caseta de dialog Page Properties executai clic pe categoria Appearance. 4. n zona Background image, executai clic pe butonul pentru a
identifica, n folder-ul dumneavoastr imaginea de background.

5. Pentru a defini o culoare de background, n zona Background color introducei codul hexazecimal al culorii, dac l cunoatei sau numele culorii. Putei folosi de asemenea modul colorimetru. 6. Executai clic pe butonul
.

"______________________________________________________________
_________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________

27

"______________________________________________________________
_________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________

28

03

Limbajul HTML i Dreamweaver MX 2004

yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy n acest capitol: Limbajul HTML Dreamweaver i limbajul HTML yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy

Limbajul HTML
Progresul extraordinar al Internet-ului de la nceputul anilor 90 a avut loc datorit faptului c HTML (Hyper Text Markup Language) este un limbaj foarte uor de nvat (el nu este un limbaj de programare!). A ncepe astzi s nvai HTML 4 n conformitate cu DTD HTML 4.01 Strict este n final un avantaj, deoarece vei nva s evitai vechile obiceiuri n crearea paginilor Web. Vei nva s respectai reguli, principii, care n final v vor aduce nu numai satisfacia lucrului bine fcut, ci i o recompens eticheta de calitate W3C (World Wide Web Consortium), pe care putei s o afiai n paginile dumneavoastr Web: . n plus, dup ce ai creat paginile dumneavoastr n HTML 4, vei simi cu siguran nevoia de a utiliza XHTML (eXtensible Hyper Text Markup Language), XML (eXtensible Markup Language) pentru a le face mai atractive i ... nu doar att!

Interesul pentru cunoaterea limbajului HTML

Z Dei nu este necesar s cunoatei limbajul HTML pentru a v crea propriile pagini, deoarece editoarele de tip WYSIWYG sunt la dispoziia dumneavoastr, totui exist situaii cnd va trebui s facei apel la HTML: modificarea unui atribut, suprimarea elementelor HTML inutile sau redundante, adugarea elementelor HTML standard care nu sunt disponibile n Dreamweaver MX 2004 etc. Z A ti s inserezi cod HTML, a cunoate bazele limbajului HTML reprezint atuuri suplimentare pentru optimizarea paginilor Web, ct i pentru a depi limitele software-ului de tip WYSIWYG.

29

 Bazele limbajului HTML

Z HTML este alctuit din: elemente, tag-uri i atribute. Z Toate tag-urile HTML trebuie s fie scrise ntre simbolurile < i > (nu sunt admise spaii ntre cele dou simboluri!). Cea mai mare parte a tag-urilor HTML trebuie s fie deschise i nchise. Un tag de nchidere este identic cu tag-ul de deschidere, dar n plus necesit o bar oblic (/) dup simbolul <. Z Un element HTML este alctuit din tag-ul de deschidere, coninutul propriuzis (text alfanumeric) i tag-ul de nchidere. Z Exist mai multe tipuri de tag-uri HTML: tag-uri care conin metainformaii (<META>); tag-uri de formatare a paginii (<B>, <I>, <BIG>, <SMALL>, <SUP>, <SUB>, <DFN>, <P>, <CITE>, <ABBR>); tag-uri pentru legturi hipertext (<A>); tag-uri pentru inserarea imaginilor (<IMG>); tag-uri pentru inserarea formularelor (<FORM>); tag-uri pentru inserarea obiectelor multimedia (<BGSOUND>, <EMBED>); tag-uri pentru inserarea cadrelor (<FRAMESET>, <FRAME>) etc. Z Majoritatea tag-urilor (de deschidere) posed atribute. Anumite atribute sunt obligatorii, altele sunt facultative. Valorile permit definirea opiunilor atributelor.

Structura unei pagini HTML

Z Oricare ar fi editorul WYSIWYG pe care l utilizai, structura paginii va fi ntotdeauna aceeai. n Dreamweaver MX 2004, structura paginii este creat n mod automat (figura 1):

Figura 1

30

Z O pagin HTML este alctuit din trei pri: tipul documentului (declaraia DOCTYPE); seciunea de antet (elementul HEAD) i corpul paginii (elementul BODY).

Dreamweaver i limbajul HTML

n mod implicit, n Dreamweaver MX 2004 lucrai n modul Design, fr a vedea codul HTML generat n momentul n care introducei text, inserai imagini, obiecte etc.

Modul de afiaj Code

Z n bara de instrumente Standard, executai clic pe butonul (Show

Z Pentru a parametriza modul de afiaj al codului surs HTML, activai butonul (View options) din bara de instrumente Document. Z Pentru a reveni n pagina curent, executai clic pe butonul View). (Show Design

Code View).

Modul de afiaj Code i Design

Z n bara de instrumente Standard, executai clic pe butonul (Show Code and Design View). Z Atunci cnd selectai un element ntr-una din ferestre (cod sau pagin), echivalentul su este de asemenea selectat n cealalt fereastr.

Inserarea codului HTML

Z Dac stpnii bine limbajul HTML, atunci putei insera un element HTML cu atributele asociate acestuia, folosind una din urmtoarele metode: 9 9 9 9 Inserare manual, via modul de afiaj Code. Code Inspector, via Window Code Inspector. HTML Tags, via meniul Insert Tag HTML Tags ... . Meniul contextual.

31

Z Quick Tag Editor permite verificarea, adugarea i suprimarea rapid a unui tag HTML direct n fereastra Document. Quick Tag Editor poate fi utilizat n trei

moduri: Insert HTML; Edit tag; Wrap tag. Pentru a lansa Quick Tag Editor, folosii una din metodele: 9 Inspectorul Properties butonul 9 Meniul Modify Quick Tag Editor. 9 Tastele Ctrl+T. (Quick Tag Editor).

Tags (selectorul de tag-uri) pune la dispoziia dumneavoastr o list de tag-uri pe care le putei insera rapid n pagina dumneavoastr, utiliznd caseta de dialog Tag Chooser (via meniul Insert Tags), figura 2. Figura 2

Z HTML

Z Putei utiliza Dreamweaver MX 2004 ca un veritabil editor HTML, avnd o sintax contextual (meniul contextual) figura 3a, 3b, 3c, 3d.

Figura 3

32
a).

b).

c).

d).

"______________________________________________________________
_________________________________________________________________

33

"______________________________________________________________
_________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________

34

04 Inserarea i formatarea textului

yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy n acest capitol: Introducerea textului Inserarea textului Inserarea unei abrevieri sau a Cutarea i nlocuirea unui text Formatarea paragrafelor unui acronim Crearea listelor Formatarea textului Structurarea unei pagini cu ajutorul liniilor orizontale yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy

Introducerea textului
Reguli generale
Z Z Z Z Z Z Nu inserai un text pirat. Nu publicai informaii false. Nu folosii n paginile Web mai mult de trei nivele de titluri. Nu utilizai n cadrul aceleiai pagini Web mai mult de trei fonturi. Folosii liniile orizontale pentru structurarea paginilor. Pentru a crea un nou paragraf, acionai tasta Enter.

Ori de cte ori inserai un paragraf, Dreamweaver MX 2004 insereaz n codul HTML tagul <P>.

Z Pentru a trece la o nou linie (n cadrul aceluiai paragraf), fr a crea un nou paragraf, folosii una din urmtoarele metode: 9 Meniul Insert HTML Special Characters Line Break. 9 Bara Insert categoria Text butonul

(Line Break).

Z Pentru inserarea caracterelor speciale i a simbolurilor, folosii una din urmtoarele metode: 9 Meniul Insert HTML Special characters .... 9 Bara Insert categoria Text butonul

35

(Characters) ... .

 Inserarea textului
Z Dac ai introdus un text ntr-o alt aplicaie, putei s-l inserai ntr-un document HTML din Dreamweaver MX 2004, via Edit Copy Paste. Putei insera coninutul unui document MS Office. Z ncepnd cu Dreamweaver MX 2004, textele din documentele Word, Excel pot fi copiate n fiierele HTML din Dreamweaver MX 2004 cu respectarea formatrilor existente. Z n Dreamweaver MX 2004 putei insera un text n format .swf (shockwave flash), cu una din metodele: 9 Meniul Insert Media Flash text Caseta de dialog Insert Flash Text

....

9 Bara Insert categoria Common butonul

(Flash Text) ... .

Inserarea unei abrevieri sau a unui acronim

Z Pentru a insera o abreviere n pagina dumneavoastr Web, folosii bara

Insert categoria Text butonul (Abbreviation). Z Pentru a insera un acronim n pagina dumneavoastr Web, folosii bara Insert categoria Text butonul (Acronym).

Cutarea i nlocuirea unui text

Z Pentru a cuta un text n pagina dumneavoastr pe care s-l nlocuii apoi cu un altul, efectuai urmtoarele operaii:

1. 36 2.

Executai clic pe Edit Find and Replace.

Se afieaz caseta de dialog Find and Replace.

Introducei textul pe care-l cutai n zona Find i textul cu care-l nlocuii n zona Replace (figura 1).

Figura 1

Remarci: 9 Deoarece Dreamweaver MX 2004 face diferena ntre majuscule i minuscule, activai opiunea Match case. 9 Putei cuta text n codul surs, n textul propriu-zis i n tag-urile asociate.

Formatarea paragrafelor
Modificarea alinierii paragrafelor
Z Pentru a modifica alinierea unui paragraf, folosii una din urmtoarele metode: 9 Meniul Text Align Left / Center / Right / Justify. 9 Inspectorul Properties

Aplicarea indentrilor
Z n Dreamweaver MX 2004, pentru un paragraf sunt permise indentrile stnga i dreapta (de mrime egal). Z Pentru a aplica indentri (dreapta) unui paragraf, folosii una din urmtoarele metode: 9 Meniul Text Indent. 9 Inspectorul Properties butonul (Text Indent).

37

9 Bara Insert categoria Text butonul

(Block Quote).

Z Pentru a aplica indentri (stnga) unui paragraf deja indentat (dreapta), folosii una din urmtoarele metode: 9 Meniul Text Outdent. 9 Inspectorul Properties butonul (Text Outdent).

Definirea titlurilor
Z Titlurile (antet-urile) au fost create pentru a indica vizual titluri de mare sau mai mic importan ntr-un document de dimensiuni mari. Z Cnd aplicai un antet, textul se afieaz bolduit, cu o dimensiune care variaz n funcie de importana antet-ului. Z Heading 1 (antet-ul 1) are dimensiunea cea mai mare, iar Heading 6 (antet-ul 6) are dimensiunea cea mai mic (figura 2).

Figura 2

38

Z Pentru a defini un antet, folosii una din urmtoarele metode: 9 Meniul Text Paragraph Format Heading1 ... Heading 6. 9 Inspectorul Properties Format Heading 1 ... Heading 6. 9 Bara Insert categoria Text butoanele

 Crearea listelor
Listele permit crearea unei enumerri de elemente. Cu Dreamweaver MX 2004 putei crea urmtoarele tipuri de liste (figura 3): liste simple (cu simboluri), liste numerotate (ordonate) i liste de definiii. Avei, de asemenea, posibilitatea s imbricai listele, unele ntr-altele. Figura 3
List simpl Anotimpurile anului: primvara; vara; toamna; iarna. List ordonat Anotimpurile anului: 1. primvara; 2. vara; 3. toamna; 4. iarna. List de definiii HTML HyperText Markup Language XHTML eXtended HyperText Markup Language XML eXtensible Markup Language

Crearea i formatarea unei liste simple

Z Listele simple (cu simboluri) conin elemente (item-uri) precedate n mod implicit de un bumb. Putei marca elementele listei i cu un ptrat, cerc, o imagine etc. Z Pentru a crea o list simpl, pornind de la un text existent sau de la un text nou, folosii una din urmtoarele metode prezentate n detaliu n figura 4:

Figura 4
Text nou
Meniul

Text existent
categoria

Text

Inspectorul

Properties

Insert, Text

Bara

Meniul Text Inspectorul

Properties

Bara Insert, categoria Text

Executai clic n locul n care dorii s inserai lista. clic pe Text clic pe butonul clic pe butonul

1.

1. Selectai elementele listei (textul existent).

clic pe Text clic pe butonul butonul .

2. Executai 2. Executai 2. Executai 2. Executai 2. Executai 2. Executai clic pe

List List

39

Unordered List.

Unordered List.

Tastai elementele listei i acionai tasta ENTER dup fiecare element. Pentru a opri lista, acionai de dou ori tasta ENTER.

3. 4.

Z Pentru a formata elementele unei liste simple, folosii una din metodele prezentate n detaliu in figura 5:

Figura 5
Toate elementele
Meniul Text Inspectorul

Un element
Meniul Text Inspectorul Properties

Properties

Executai clic pe un element oarecare al listei.

1.

1. Executai clic pe elementul de formatat.

Text List Properties.
.

2. Executai clic pe 2. Executai clic pe 2. Executai clic pe 2. Executai clic pe butonul

Text List Properties.
butonul . n caseta de dialog List Properties care se afieaz pstrai Bulleted List n zona List Type, iar apoi efectuai urmtoarele operaii:

3.

3.1. Alegei din meniul derulant Style 3.1. Alegei din meniul derulant New Style noul 40
noul stil: square. stil al elementului selectat. Remarc. Pentru stilul circle (cerc) afiai codul surs HTML i introducei n tag-ul <ul> atributul circle: <ul type=circle> </ul>.

3.2. Executai clic pe butonul

 Crearea i formatarea unei liste ordonate

Z Listele ordonate conin elemente (item-uri) care se afieaz ntr-o ordine precis. n mod implicit, elementele listei ordonate sunt precedate de numerele 1, 2, 3 ... (stilul Number). Z Pentru a crea o list ordonat pornind de la un text simplu sau de la un text nou, folosii una din metodele prezentate n detaliu n figura 6:

Figura 6
Text nou
Meniul

Text existent
categoria

Text

Inspectorul

Properties

Insert, Text

Bara

Meniul Text Inspectorul

Properties

Bara Insert, categoria Text

Executai clic n locul n care dorii s inserai lista.

1. 2.

1. Selectai elementele listei (textul existent). 2. 2. Executai 2. Executai clic pe

clic pe butonul . butonul .

Executai Executai Executai Executai clic pe Text clic pe clic pe clic pe Text List butonul butonul . List

2.

2.

Ordered List.

Ordered List.

3. Tastai elementele listei i acionai

tasta ENTER dup fiecare element. Pentru a opri lista, acionai de dou ori tasta ENTER.

4.

Z Pentru a formata elementele unei liste ordonate, folosii una din metodele prezentate n detaliu n figura 7:

Figura 7
Toate elementele
Meniul Text Inspectorul

Un element
Meniul Text Inspectorul Properties

Properties

Executai clic pe un element oarecare al listei.

1.

1. Executai clic pe elementul de formatat. 41

Text List Properties.
.

2. Executai clic pe 2. Executai clic pe 2. Executai clic pe 2. Executai clic pe butonul

Text List Properties.
butonul .

3. n caseta de dialog List Properties care se afieaz pstrai Numbered List

Type, iar apoi efectuai urmtoarele operaii:

n zona List

3.1. Alegei din meniul derulant Style 3.1. Alegei din meniul derulant New Style noul
noul stil de numerotare: 9 Number (1, 2, 3 ) opiune implicit; 9 Roman Small (i, ii, iii ); 9 Roman Large (I, II, III ); 9 Alphabet Small (a, b, c ); 9 Alphabet Large (A, B, C). n zona Start Count introducei valoarea (numeric) pentru o nou numerotare. stil de numerotare (aceleai cu stilurile care se afieaz n meniul derulant Style).

3.2.

3.2. n zona Reset Count introducei valoarea

(numeric) pentru o nou numerotare. .

3.3. Executai clic pe butonul

Crearea unei liste de definiii

Z Listele de definiii sunt frecvent utilizate n generarea dicionarelor de termeni. Ele nu utilizeaz caractere de antet. Z O list de definiii cuprinde un cuvnt de definit, iar apoi pe linia urmtoare, cu indentare spre dreapta, definiia sa. Z Pentru a crea o list de definiii, folosii una din metodele prezentate n detaliu n figura 8.

42

Figura 8

Meniul Text

Bara Insert, categoria Text

1. Executai clic n locul n care dorii s inserai lista. 2. Executai clic pe 2. Executai clic pe butonul

TextListDefinition List

(Definition List).

3. Introducei primul cuvnt de definit, iar apoi acionai tasta ENTER. 4. Introducei definiia, iar apoi acionai tasta ENTER. 5. Introducei cel de-al doilea cuvnt de definit, iar apoi acionai tasta ENTER. 6. Introducei definiia, iar apoi acionai tasta ENTER. 7. Procedai n mod similar pentru toate definiiile ... 8. Pentru a opri lista, acionai de dou ori tasta ENTER. Formatarea textului
W3C (World Wide Web Consortium) recomand n mod insistent s nu se mai utilizeze formatarea clasic n HTML (elementele <font>, <basefont> etc.). Aceste elemente sunt declarate depite. W3C recomand utilizarea foilor de stil. Dar cum nu toate navigatoarele recunosc n acelai mod recomandrile CSS1, utilizarea formatrii clasice mai are nc zile bune de trit. Aceste formatri se aplic tuturor elementelor de text: paragrafe, antet-uri, liste etc. Dreamweaver MX 2004 aplic, de asemenea, recomandarea W3C; n mod implicit, formatarea textului se face cu CSS.

Aplicarea elementelor de formatare clasic

Z Elementele de formatare clasic sunt: Bold, Italic, Underline, Strikethrough,

Teletype.

Elementele Big i Small din HTML 4 nu sunt accesibile n Dreamweaver!

Z Pentru a aplica elementele de formatare clasic, folosii una din urmtoarele metode: 9 Meniul Text Style Bold, Italic, Underline, Strikethrough sau

Teletype.

9 Inspectorul Properties butoanele

(pentru Bold i Italic). (pentru Bold i

9 Bara Insert categoria Text butoanele Italic).

43

 Alegerea i aplicarea font-ului de caractere

Z Dreamweaver MX 2004 propune grupuri de caractere ale cror font-uri sunt aproape identice pentru diferite platforme microinformatice (PC, MAC, LINUX). Z Pentru a aplica un font unui text anume, folosii una din metodele prezentate n detaliu n figura 9.

Figura 9

Meniul Text

Inspectorul Properties

2. n meniul derulant Font, selectai grupul de TextFont, iar apoi selectai font-uri sau, dac dorii un font specific cruia i unul din grupurile de fonturi cunoatei numele tastai-l n zona Font.
propuse.

1. Selectai textul. 2. Executai clic pe

3. Executai clic pe grupul de font-uri selectat.

Definirea dimensiunii caracterelor
Utilizarea valorilor absolute
Z Pentru a modifica dimensiunea caracterelor utiliznd valori absolute, folosii una din metodele prezentate n figura 10.

Figura 10

Meniul Text

Inspectorul Properties

1. Selectai textul de formatat. 2. Executai clic pe 2. n meniul derulant Size, selectai valoarea
TextSize1 la 7 i selectai absolut a corpului de liter.

44

valoarea absolut a corpului de liter.

Remarci: 9 Dimensiunea implicit a font-ului n Dreamweaver MX 2004 este 3.

9 n HTML nu putei modifica cu precizie dimensiunea caracterelor, dect dac folosii foile de stiluri n cascad (CSS).

Utilizarea valorilor relative

Z Pentru a modifica dimensiunea caracterelor utiliznd valori relative n raport cu dimensiunea implicit (3), folosii una din metodele prezentate n figura 11.

Figura 11

Meniul Text

Inspectorul Properties

2. n meniul derulant Size, selectai change iar apoi alegei +1 la +4 sau valoarea relativ a corpului de liter. -1 la -3.
Aplicarea elementelor de formatare indice i exponent
Z W3C a prevzut dou elemente pentru scrierea cu exponent i cu indice a unui text <sup> i <sub>, dar ele nu sunt accesibile n Dreamweaver MX 2004. Z Pentru inserarea elementelor de formatare <sup> i <sub> n codul surs HTML folosii una din metodele: 9 Code Inspector, via Window Code Inspector. 9 Quick Tag Editor, via Modify Quick Tag Editor sau Inspectorul

1. Selectai textul de formatat. 2. Executai clic pe TextSize

Properties butonul

(Quick tag Editor) sau tastele Ctrl+T.

Aplicarea unei culori caracterelor

n Dreamweaver MX 2004 avei mai multe posibiliti de alegere a unei culori pentru un text. Putei alege o culoare websafe, o culoare personalizat sau putei tasta pur i simplu numele culorii dorite.

45
Z Pentru a aplica o culoare unui text, folosii una din metodele prezentate n figura 12.

Figura 12

Meniul Text

Inspectorul Properties

zona Basic colors sau creai (cu mult pruden!) propria culoare (personalizat) n zona din dreapta a casetei.

1. Selectai textul. 2. Executai clic pe TextColor. 2. Executai clic pe meniul de alegere a 3. Alegei o culoare websafe n culorii websafe:
Remarci: 9 Se afieaz codul hexazecimal al culorii. 9 Dac cunoatei numele culorii, putei s-l introducei n zona de culoare.

Remarc. Pentru a declara culoarea unui text (n mod implicit), folosii caseta de dialog Page Properties (via Modify Page Properties categoria Appearance Text-color).

Structurarea unei pagini cu ajutorul liniilor orizontale

Dreamweaver MX 2004 v ofer posibilitatea s inserai o linie orizontal pentru a separa diferite zone ale documentului dumneavoastr.
Z Pentru a insera o linie orizontal n pagin, folosii una din metodele prezentate n figura 13.

Figura 13

46

Meniul Insert

Bara Insert, categoria HTML

1. Executai clic n locul n care dorii s inserai linia orizontal. 2. Executai clic pe InsertHorizontal 2. n bara Insert, categoria HTML,
Rule.

executai clic pe butonul Rule).

(Horizontal

Remarc. n mod implicit, linia orizontal se afieaz pe toat lungimea paginii.

Z Pentru a formata o linie orizontal (modificarea lungimii, a limii i a modului de aliniere), utilizai inspectorul Properties (zonele Horizontal Rule, W, H, Align, Shading, Class).

"______________________________________________________________
_________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________

47

"______________________________________________________________
_________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________

48

05

Crearea foilor de stil CSS (Cascading Style Sheets)

yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy n acest capitol: Foile de stiluri CSS1, CSS2, CSS3 Codul HTML al stilurilor Crearea unei Crearea unei foi de stiluri CSS extern Utilizarea foi de stiluri CSS intern unui model CSS Sheets yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy

Foile de stiluri CSS1, CSS2, CSS3

Utilizarea foilor de stil CSS (Cascading Style Sheets foi de stil n cascad) reprezint cel mai sigur i cel mai uor mod de formatare a documentelor (X)HTML.
Z Foile de stiluri CSS prezint urmtoarele avantaje: formatarea este complet separat de coninutul paginii; toate schimbrile efectuate n foile de stiluri se repercuteaz n mod automat n toate paginile site-ului; un model de foaie de stiluri n cascad permite definirea mai multor nivele de stiluri; timpii de ncrcare i de mentenan ai paginilor sunt redui; respectarea stilurilor este mult mai concis i riguroas; permit o mai mare flexibilitate ntre documentele unui site Web. Z Foile de stiluri CSS1 (Cascading Style Sheets Level 1) au aprut n anul 1996 ca o recomandare a consoriului W3C i cuprind urmtoarele caracteristici: fonturi, aliniere, mrime, culoare, margini, borduri etc. Z Foile de stiluri CSS2 au aprut n anul 1998. Ele au la baz caracteristicile foilor de stiluri CSS1 la care se adaug urmtoarele proprieti: tipuri de media, poziionare (absolut, relativ i fix), font-uri ncrcabile, stiluri pentru tabele, modele de formatare vizual, stiluri de cursor etc. Z Foile de stiluri CSS3 sunt bazate pe module care cuprind un suport multimedia mbuntit, capaciti dinamice i interactive superioare etc.

49

 Codul HTML al stilurilor

O definiie de stil sau regul de stil precizeaz caracteristicile de formatare. Putei alege oricare din cele 8 categorii de proprieti de formatare: proprietile fontului de caractere; proprietile de text; proprietile de zon; proprietile de culoare i de background; proprietile de clasificare; proprietile foilor sonore; proprietile foilor de stiluri de imprimare; proprietile de poziionare.

Categorii de proprieti de stiluri

Z Cele mai utilizate proprieti HTML ale font-ului de caractere sunt: font, fontfamily, font-size, font-style, font-variant, font-weight. Z Cele mai utilizate proprieti HTML de text sunt: letter-spacing, line-height, text-align, text-decoration, text-indent, text-transform, vertical-align. Z Cele mai utilizate proprieti de zon sunt: border, border-color, border-style, border-width, clear, float, height, margin, margin-bottom, margin-left, marginright, margin-top, width. Z Cele mai importante proprieti de culoare i de background sunt: background, background-color, background-image, background-repeat, color. Z Cele mai importante proprieti HTML de clasificare sunt: display, list-style-

image, list-style-type.

Z Proprietile foilor sonore controleaz prezentarea documentelor HTML (numai foile de stiluri CSS2). Z Proprietile foilor de stiluri de imprimare documentelor HTML (numai foile de stiluri CSS2). controleaz imprimarea

Z Proprietile de poziionare controleaz de o manier precis elementele ce urmeaz a fi afiate (numai foile de stiluri CSS2).

50

"______________________________________________________________
_________________________________________________________________

 Redactarea stilurilor
HTML
Z Sintaxa de scriere a unui stil este urmtoarea: TAG{stil_1:valoare_1; stil_2:valoare_2}. Z Stilurile sunt plasate ntre acolade, iar fiecare stil este separat prin dou puncte de valoarea atribuit. Fiecare cuplu (stil, valoare) este separat de cellalt cuplu prin punct i virgul (figura 1).

Figura 1
BODY{font-family:Arial; font-style:bold}

Dreamweaver MX 2004
Z Dreamweaver MX 2004 pune la dispoziia utilizatorilor un sistem de redactare a stilurilor extrem de perfecionat. Z Atunci cnd tastai tag-ul <style= , n fereastra de cod se afieaz o caset n care sunt etichetate toate opiunile posibile (figura 2). Dup ce ai ales opiunea corespunztoare, acionai una din tastele Enter / Tab.

CSS Styles (via Window CSS Styles), figura 3. Figura 2

Z Pentru a vizualiza ansamblul parametrilor atribuii stilurilor, folosii panoul

51

Figura 3

Z Pentru a afia regulile stilului selectat, executai dublu clic pe numele font-ului n panoul CSS Styles. Observai c numele font-ului se transform automat n cod HTML. Z Tag-urile HTML 4 pe care le putei asocia stilurilor n Dreamweaver MX 2004 sunt structurate n cinci grupe: BODY; P; TD; UL; OL; LI; H1; H2; H3; H4; H5; H6. Dac dorii s consultai aceste tag-uri, efectuai urmtoarele operaii:

1. 2.

Style.

Afiai caseta de dialog New CSS Style, via Text CSS Styles New

n caseta de dialog New CSS Style, n zona Selector Type, selectai opiunea Tag (redefines the look of a specific tag), iar apoi executai clic pe lista derulant Tag (figura 4).

Figura 4

52

 Metode de inserare a stilurilor

Z Pentru a insera un stil ntr-un document HTML, folosii una din metodele: stiluri incorporate; stiluri in-line; stiluri definite n fiiere externe; pseudoclase. Z Metoda stilurilor incorporate este cea mai eficace i se recomand pentru a fi utilizat ct mai mult posibil. Se aplic numai blocurilor de text. Stilul se plaseaz n elementul <STYLE>, care, la rndul lui, se plaseaz n seciunea <HEAD> a documentului. Z Metoda stiluri in-line se aplic unui element particular al stilului. n acest caz, stilul definit cu atributul style nu se aplic dect local, elementului precizat. Z Metoda stilurilor definite n fiierele externe prezint avantajul c poate utiliza aceeai foaie de stiluri pentru mai multe documente HTML diferite, fr a fi nevoii de a le recopia n fiecare dintre ele. Stilurile se plaseaz ntr-un document extern salvat cu extensia .css. Acest fiier va fi legat la documentul HTML corespunztor, prin elementul LINK plasat n header-ul documentului. Z Metoda pseudoclaselor se aplic diferitelor elemente a cror stare vizual poate fi schimbat ca, de exemplu, link-urile care posed mai multe stri: a-link; a:visited; a:active; a:hover.

Crearea unei foi de stiluri CSS intern

n Dreamweaver MX 2004 putei crea dou tipuri de foi de stiluri CSS: interne i externe.

Tipuri de stiluri CSS

Z n cele dou foi de stiluri CSS (interne i externe) se pot crea urmtoarele tipuri de stiluri CSS: 9 Class (can apply to any tag) permite crearea unei clase (class). 9 Tag (redefines the look of a specific tag) permite personalizarea tag-urilor HTML. 9 Advanced (Ids, contextual selector etc.) permite redefinirea tag-urilor ancor (<a>).

53

Z Pentru a crea un stil n pagina curent a unui document, folosii una din metodele prezentate n figura 5.

Figura 5

Meniul Text

Panoul CSS Styles

StylesNew.

1. Executai clic pe TextCSS

1. Afiai panoul CSS Styles (via

butonul meniul local

WindowCSS Styles) i executai clic pe (New CSS Style) sau deschidei

al panoului i alegei New.

Remarc. Se deschide caseta de dialog New CSS Style.

2. n caseta de dialog New CSS Style, efectuai urmtoarele operaii: 2.1. n zona Name, introducei numele stilului pe care dorii s-l creai. 2.2. n zona Selector Type, alegei una din opiunile:

9 Class (can apply to any tag) permite crearea unui stil personalizat numit clas. Numele clasei trebuie s nceap ntotdeauna cu caracterul . (punct); dac uitai s-l punei, Dreamweaver MX 2004 l pune n locul dumneavoastr. 9 Tag (redefines the look of a specific tag) permite formatarea unui elemement HTML existent. 9 Advanced (Ids, contextual selections etc.) permite ntr-o prim etap definirea link-urilor pentru patru stri: a:link; a:hoover;

2.3. n zona Define in: alegei una din opiunile: New Style Sheet File 2.4. Dup ce ai ales tipul de stil dorit, executai clic pe butonul 54
.

a:active; a:visited.

(permite crearea unei foi de stiluri extern) sau This document only (Crearea unei foi de stiluri intern).

 Definirea formatrii
Z Dup ce ai creat un stil personalizat de tip clas, se afieaz caseta de dialog CSS Style definition for ... (figura 6), care conine urmtoarele categorii: Type, Background, Block, Box, Border, List, Positioning, Extensions.

Figura 6

Z Categoria Type se folosete pentru formatarea caracterelor. Z Categoria Background permite aplicarea unui element de background (Background color; Background image) obiectului selectat. Z Categoria Block permite formatarea unui text. Z Categoria Box permite formatarea imaginilor, a straturilor i a blocurilor de text. Z Categoria Border permite formatarea bordurilor. Z Categoria List permite definirea listelor. Z Categoria Positioning permite parametrizarea straturilor.

55

Z Categoria Extensions permite parametrizarea extensiilor care nu sunt recunoscute de ctre navigatoare.

Crearea unui stil CSS cu opiunea Class

Metode de creare
Z Pentru a crea un stil CSS cu opiunea Class (can apply to any tag), folosii una din metodele prezentate n figura 7.

n zona Selector Type activai butonul radio class (pasul

2.2), iar apoi, n zona

Define in activai butonul This document only (pasul 2.3).

Aplicarea stilului
Z Pentru a aplica unui text un stil CSS de tip clas, folosii una din metodele prezentate n figura 7.

Figura 7
Meniul Text Panoul CSS Styles Inspectorul

Properties

1. Executai clic n paragraf sau selectai textul. 2. Executai clic pe Text 2. Selectai stilul 2.
CSS Stylesnume_stil.
corespunztor, iar apoi, n meniul local, alegei Apply.

n lista derulant selectai stilul corespunztor.

Style,

3. Vizualizai pagina Web ntr-un browser.

Anularea stilului
Z Pentru a anula un stil CSS de tip clas, folosii una din metodele de mai jos:

56

9 Executai clic pe Text CSS Styles None. 9 n inspectorul Properties, n meniul derulant Style, alegei None.

Modificarea stilului
Z Pentru a modifica un stil CSS de tip clas, folosii una din metodele prezentate n figura 8.

Figura 8

Meniul Text

Inspectorul

Properties

Panoul CSS Styles

1. Executai clic pe

TextCSS Style alegei Manage StylesManage Styles.. Style.

Remarc. Se deschide fereastra <style>.

1. n lista derulant

1. Selectai stilul de modificat.

2. n fereastra style, selectai stilul de modificat, 2. n meniul local

iar apoi executai clic pe butonul .

alegei

Edit.

Remarc. Se deschide caseta de dialog CSS Style definition for .parag.

57

3. n caseta de dialog CSS Style definition for .parag efectuai modificrile

dorite.

4. Executai clic pe butonul . 5. n fereastra <style> executai clic pe butonul

Suprimarea stilului

Z Pentru a modifica un stil CSS de tip clas, folosii una din metodele prezentate n figura 9.

Figura 9

Meniul Text

Panoul CSS Styles

1. Executai clic pe Text CSS Styles Manage Styles

1. Selectai stilul de suprimat.

2. n caseta de dialog <style> care 2. Deschidei meniul local i alegei se afieaz, selectai numele stilului Delete sau executai clic pe butonul de suprimat, iar apoi executai clic (Delete CSS Style).
pe butonul . .

3. Executai clic pe butonul

"______________________________________________________________
Exportul stilului
Z Pentru a exporta un stil CSS de tip clas, folosii una din metodele prezentate n figura 10.

Figura 10

Meniul Text

Panoul CSS Styles

58

Styles Export.

1. Executai clic pe Text CSS

1. n meniul local

alegei Export.

Remarc. Se afieaz caseta de dialog Export Styles As CSS File.

2. n caseta de dialog Export Styles As CSS File, n zona File name introducei
numele fiierului, iar apoi executai clic pe butonul .

Crearea unui stil CSS cu opiunea Tag (redefines the look

of a specific tag)

Z Pentru a crea un stil CSS cu opiunea Tag (redefines the look of a specific tag), folosii una din metodele prezentate n figura 5.

2.2, iar apoi, n zona Define in, activai butonul radio This Document only (pasul 2.3).
specific tag), pasul

n zona Selector Type, activai butonul radio Tag (redefines the look of a

Redefinirea tag-urilor ancor (<a>) cu opiunea Advanced

Redefinirea tag-urilor ancor (<a>) este o practic frecvent i, uneori, chiar amuzant!
Z Stilurile: a:link; a:hover; a:active; a:visited redefinesc tag-ul ancor <a>.

59

Z Pentru a modifica link-urile cu opiunea Advanced (Ids, contextual selector etc.), efectuai operaiile urmtoare:

1. 2.

Creai un stil nou (New Style). n caseta de dialog New CSS Style, n zona Selector Type, selectai butonul radio Advanced.

Cele patru stiluri de link-uri se afieaz n meniul derulant.

3.

n caseta de dialog New CSS Style (figura 11), efectuai urmtoarele operaii:

Figura 11

3.1. Afiai meniul derulant n zona Selector, iar apoi selectai tipul de link
pe care dorii s-l personalizai.

3.2. n zona Define in, activai butonul radio New Style Sheet File. 3.3. Executai clic pe butonul .
Se afieaz caseta de dialog CSS Style Definition for ... .

4. 60 5. 6. 7.

n caseta de dialog CSS Style Definition for ... , n categoria Type, selectai o culoare (de exemplu, green), iar apoi executai clic pe butonul

Creai o hiperlegtur n pagina dumneavoastr Web pentru a vedea selectorul a:... pe care l-ai definit. Salvai pagina. Vizualizai pagina Web ntr-un browser.

Atunci cnd cursorul dumneavoastr se afl deasupra legturii, aceasta i schimb culoarea.

Crearea unei foi de stiluri CSS extern

Foile de stiluri CSS externe se creeaz n acelai mod n care ai creat foile de stiluri interne, singura deosebire fiind aceea c foile de stiluri externe trebuie s fie salvate ca un fiier text (separat), cu extensia .css. Dreamweaver MX 2004 stabilete n mod automat link-ul ctre paginile Web crora dorii s le aplicai definiiile de stil.

Metode de creare
Z Pentru a crea o foaie de stiluri CSS extern (un fiier .css), folosii una din metodele prezentate n figura 12.

Figura 12

Meniul Text

Panoul CSS Styles

StylesNew.

1. Creai un nou document. 2. Executai clic pe TextCSS

2. Afiai panoul CSS Styles i executai

(New CSS Style) sau clic pe butonul i alegei deschidei meniul local New.

Remarc. Se afieaz caseta de dialog New CSS Style.

3. n caseta de dialog New CSS Style efectuai urmtoarele operaii: 3.1. n zona Name introducei numele stilului pe care dorii s-l creai. 3.2. n zona Selector Type alegei un tip de selector. 3.3. n zona Define in: alegei opiunea New Style Sheet File. 3.4. Executai clic pe butonul .
Remarc. Se afieaz caseta de dialog Save Style Sheet File As.

4. n caseta de dialog Save Style Sheet File As efectuai urmtoarele operaii: 4.1. n zona Save in selectai folder-ul foii de stiluri. 4.2. n zona File name, introducei numele foii de stiluri. 4.3. n zona Save as type alegei Style Sheet Files (*css).

61

4.4. n zona URL indicai, dac este cazul, calea de acces. 4.5. n zona Relative To pstrai opiunea Document activ. 4.6. Executai clic pe butonul .
Remarc. Se afieaz caseta de dialog CSS Styles Definition for.

5. n caseta de dialog CSS Styles Definition for parametrizai elementele de

formatare ale stilului, iar apoi executai clic pe butonul .
Remarci: 9 Foaia de stiluri CSS extern se afieaz cu toate stilurile asociate, 9 n codul surs HTML, Dreamweaver MX 2004 face un link direct ctre fiierul de stiluri .css: <link rel= href=>.

6. Executai clic pe tasta F8 pentru a vizualiza fiierul .css n folder-ul corespunztor.

Ataarea unui fiier .css
Z Pentru a ataa un fiier .css, efectuai urmtoarele operaii:

1. 2.

Creai un nou document. Afiai caseta de dialog Link External Style Sheet, cu una din urmtoarele metode: 9 Executai clic pe Text CSS Styles Attach Style Sheet. 9 n panoul CSS Styles, n meniul local alegei Attach Style Sheet. 9 n panoul CSS Styles, executai clic pe butonul Sheet). (Attach Style

3.

n caseta de dialog Link External Style Sheet, efectuai urmtoarele operaii (figura 13).

3.1. n zona File / URL, introducei calea de acces. 3.2. n zona Add As: activai butonul radio Link. 3.3. Executai clic pe butonul . 62

Figura 13

Toate stilurile din foaia de stiluri CSS extern se afieaz n panoul CSS Styles.

Modificarea unui fiier .css extern

Z Pentru a modifica un fiier .css extern, efectuai operaiile urmtoare:

1. 2. 3.

Accesai un document Dreamweaver MX 2004 deschis i legat la foaia de stiluri extern care urmeaz a fi modificat. Executai clic pe Text CSS Styles Manage Style.

Se afieaz caseta de dialog Edit Style Sheet.

n caseta de dialog Edit Style Sheet, efectuai urmtoarele operaii (figura 14).

3.1. Selectai foaia legat (cu extensia .css). 3.2. Executai clic pe butonul . 4. 5.
n caseta de dialog CSS Style Definition ... , efectuai modificrile corespunztoare. Salvai foaia de stiluri, iar apoi executai clic pe butonul .

63

Figura 14

Toate elementele care vor utiliza acest stil sunt actualizate. Putei modifica direct un stil n foaia de stiluri legat, via panoul CSS Styles. Putei afia sau masca stilurile care provin de la un fiier cu extensia .css, via Text CSS Styles Design Time ... .

surs HTML

Crearea unei foi de stiluri CSS extern direct, n codul

Dac suntei un bun cunosctor al limbajului HTML i al CSS, avei posibilitatea s codificai direct stilurile CSS ntr-un fiier extern cu extensia .css.

Z Pentru a crea o foaie de stiluri CSS extern n HTML, efectuai urmtoarele operaii:

1. 2. 64

Executai clic pe File New. n caseta de dialog New Document, efectuai urmtoarele operaii (figura 15).

2.1. n subpanoul General, n categoria Basic Page, executai clic pe CSS. 2.2. Executai clic pe butonul .

Figura 15

3.

n fereastra <<CSS>> care se afieaz, introducei codul HTML de descriere al stilurilor folosind meniul contextual care se afieaz (figura 16).

Figura 16

65 4.
Salvai fiierul cu extensia .css.

Putei realiza link-uri ctre paginile HTML dorite.

Utilizarea unui model CSS Style Sheets

Dac suntei cumva n criz de inspiraie, putei utiliza foile de stil predefinite (modele).
Z Pentru a utiliza o foaie de stil predefinit (un model) n Dreamweaver MX 2004, efectuai urmtoarele operaii:

1. 2.

Executai clic pe File New. n fereastra New Document care se afieaz, efectuai urmtoarele operaii (figura 17).

2.1. n categoria General, executai clic pe CSS Style Sheets. 2.2. Selectai o foaie de stil predefinit i vizualizai stilurile
partea dreapt a ferestrei Preview.

propuse n

2.3. Executai clic pe butonul

Figura 17

66

3.

Salvai modelul ales n site-ul dumneavoastr.

Putei lega acest fiier cu extensia .css la paginile dumneavoastr HTML.

06

Inserarea, parametrizarea i formatarea imaginilor

yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy n acest capitol: Cile de acces la imagini De unde procurm imaginile Formatele de Inserarea unei imagini imagine recunoscute de navigatoare Parametrizarea unei imagini Formatarea unei imagini Crearea zonelor Retuarea unei imagini Comportamente asociate imaginilor reactive yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy

Cile de acces la imagini

Cnd dorii s inserai o imagine, va trebui s precizai care este calea de acces la aceast imagine: cile absolute, cile relative la document i cile relative la rdcina site-ului.

Cile absolute
Z Calea absolut precizeaz URL-ul complet de acces la resurs (figura 1).

Figura 1
<img src=http://www.carte.ro/exemplu/imagini/sigla.jpg> unde, 9 <img> - reprezint tag-ul HTML pentru inserarea unei imagini; 9 src= reprezint atributul care precizeaz calea de acces la imagine.

Imaginea sigla.jpg se gsete n subfolder-ul imagini, plasat n folder-ul exemplu al site-ului www.carte.ro, accesibil prin protocolul http.

Cile relative la document

Z Calea relativ la document precizeaz calea de acces la resurs, n raport cu documentul (figura 2).

67

Figura 2
<img src= sigla.jpg> <img src=.../imagini/sigla.jpg>

Cile relative la rdcina site-ului

Z Calea de acces la rdcina site-ului precizeaz calea de acces la resurs n raport cu rdcina site-ului (figura 3).

Figura 3
<img src=/imagini/sigla.jpg>

De unde procurm imaginile

Z Exist numeroase magazine de IT care ofer vizitatorilor, n mod gratuit, CDROM-uri cu imagini. Z Folosii site-urile Web care v pot oferi, n mod gratuit, biblioteci de imagini (fr drept de copyright!). Z Utilizai motoarele de cutare (Google), care conin legturi hipertext (Images) ce v permit s efectuai cutri tematice. Vei obine o list consistent de imagini, adaptat cererii dumneavoastr. Z Scanai fotografii de familie, fotografii ale animalelor, ilustraii (o imagine poate ilustra uneori un concept mai greu de explicat n cuvinte), logo-uri etc.

Photoshop, Illustrator, Paint Shop Pro etc.

Z Creai propriile imagini cu una din aplicaiile: Macromedia Fireworks,

68

"______________________________________________________________
_________________________________________________________________ _________________________________________________________________

 Formatele navigatoare

de

imagine

recunoscute

de

Z Exist mai multe formate de imagine pe care le putei utiliza, n funcie de scopul urmrit: BMP (BitMap); GIF (Graphics Interchange Format); JPG (Joint

Photographic Experts Group); PNG (Portable Network Graphics); TIFF (Tagged Image File Format); WPG (format vectorial utilizat de aplicaiile din familia Word Perfect Word Perfect, Draw Perfect, WP Presentation etc.) .a.m.d.

Z Formatele de imagine recunoscute de navigatoare sunt: 9 .gif (Graphics Interchange Format) Acest format este ideal pentru imagini vectoriale care conin maximum 256 de culori. 9 .jpg / .jpeg (Joint Photografic Experts Group) Acest format este ideal pentru imagini de tip fotografie; conine mii de culori, degradeuri sau nuane subtile. 9 .png (Portable Network Graphics) Acest format este ideal pentru imagini complexe, dar este recunoscut doar de ctre navigatoarele recente.

Inserarea unei imagini

Z Proprietile obiectului Image sunt: Image (numele imaginii); W, H (lungimea i limea imaginii, exprimate n pixeli); Src (fiierul surs al imaginii); Link (legtura hipertext pentru imagine); Align (aliniaz imaginea i textul pe aceeai linie cu una din opiuni: Default, Baseline, Top, Middle, Bottom, Text Top, Absolute Middle, Absolute Bottom, Left, Right); Alt (specific textul alternativ care va aprea n locul imaginilor); Map (numele imaginii map); Draw Rectangle Hotspot, Draw Oval Hotspot, Draw Polygon Hotspot (instrumente de desenare folosite n relaie cu o imagine map); Vspace, Hspace (adaug un spaiu vertical i un spaiu orizontal n jurul unei imagini); Target (specific fereastra sau cadrul n care urmeaz s fie ncrcat pagina ... legat, cu una din opiunile: _blank, _parent, _self, _top); LowSrc (specific imaginea care trebuie s fie ncrcat naintea imaginii principale); Border (limea bordurii exprimate n pixeli); Modify (specific opiunile pentru retuarea unei imagini); Class (permite aplicarea regulilor de stil CSS). Z Toate proprietile obiectului Image sunt afiate n inspectorul Properties (figura 4).

69

Figura 4

Z Pentru a insera o imagine, folosii una din metodele prezentate n figura 5.

Figura 5

Meniul Insert

Bara Insert, categoria Common

1. Executai clic n locul n care dorii s inserai imaginea. 2. Executai clic pe 2. n bara Insert, categoria Common,
InsertImage.
executai clic pe butonul alegei Image.

(Images) i

3. n caseta de dialog care se afieaz (Select Image Source), n zona Select file name from lsai activat opiunea File system, iar apoi efectuai urmtoarele
operaii:

70

3.1. Baleiai folder-ul din site-ul dumneavoastr pentru a selecta imaginea pe

care dorii s-o inserai.

Root.

3.2. n meniul derulant Relative to, indicai calea de acces: Document sau Site 3.3. Executai clic pe butonul
.

Z Cu Dreamweaver MX 2004 avei posibilitatea s inserai un spaiu rezervat (obiectul Placeholder) pentru o imagine pe care nu o avei n momentul formatrii paginii Web.
Navigatorul poate rezerva spaiile necesare pentru obiecte ca: imagini, tabele sau text.

Z Pentru a insera obiectul Placeholder, folosii una din metodele prezentate n figura 6.

Figura 6

Meniul Insert

Bara Insert, categoria Common

ObjectsImage Placeholder.

1. Executai clic n locul n care dorii s fie inserat imaginea. 2. Executai clic pe InsertImage 2. n bara Insert, categoria Common,
executai clic pe butonul i alegei
Remarc. Se afieaz caseta de dialog Image Placeholder.

(Images)

(Image Placeholder).

3. n caseta de dialog Image Placeholder introducei valorile parametrilor: Name

(Nume), Width (lungime), Height (nlime), Color (culoare), Alternate text (text alternativ), ca n exemplul de mai jos.

71

4. Executai clic pe butonul

Remarc. Dreamweaver MX 2004 rezerv un spaiu pentru imagine (obiectul Image).

5. n momentul n care dispunei de fiierul imagine, pentru a-l plasa n spaiul rezervat procedai dup cum urmeaz: n inspectorul Properties, executai clic pe
icon-ul folder-ului asociat n zona Src, sau executai dublu clic pe spaiul rezervat n pagin. Selectai fiierul imagine n caseta de dialog care se afieaz i executai clic pe butonul .

Parametrizarea unei imagini

Z Pentru a parametriza obiectul Image, selectai imaginea pe care ai inserat-o (via clic pe imagini sau via clic pe tag-ul <img> n bara de stare, iar apoi, n inspectorul Properties, modificai n mod corespunztor, parametrii afiai.
Dac modificai parametrii W i H (vei pierde n calitate!), noile valori se vor afia bolduit, care se afieaz n dreapta lui permite restabilirea dimensiunii iniiale a iar butonul imaginii.

Formatarea unei imagini

Formatarea unei imagini are n vedere urmtoarele aspecte: alinierea imaginii (orizontal, vertical); repartizarea textului n jurul imaginii; modificarea spaiului dintre imagine i text; aplicarea unei borduri; inserarea unei imagini de joas rezoluie.

72

 Alinierea orizontal a unei imagini

Z Pentru a alinia orizontal o imagine n cadrul unei pagini Web, selectai imaginea, iar apoi, n inspectorul Properties, executai clic pe unul din cele trei butoane: , , n funcie de tipul de aliniere dorit (left, center, right).

Alinierea vertical a unei imagini n raport cu un text

Z Pentru a alinia vertical o imagine n raport cu un text, selectai imaginea, iar apoi, n inspectorul Properties, n meniul derulant Align, executai clic pe tipul de aliniere dorit: Top, Middle, Bottom, ... (figura 7).

Figura 7

Repartizarea textului n jurul unei imagini

Z Pentru a plasa text n jurul unei imagini, efectuai urmtoarele operaii: inserai imaginea ntr-un paragraf, selectai imaginea, iar apoi, n inspectorul Properties, n meniul derulant Align, alegei Left / Right (figura 8).

Figura 8

73

 Modificarea spaiului dintre imagine i text

Z Pentru a modifica spaiul dintre imagine i text, efectuai urmtoarele operaii: inserai ntr-un paragraf o imagine flotant (Stnga / Dreapta), selectai imaginea, iar apoi, n inspectorul Properties, n zonele Vspace i Hspace, introducei valorile corespunztoare exprimate n pixeli (figura 9).

Figura 9

Aplicarea unei borduri

Z Pentru a ncadra o imagine ntr-un chenar de culoare neagr, efectuai urmtoarele operaii: selectai imaginea, iar apoi, n inspectorul Properties, n zona Border, introducei o valoare (0...9999) exprimat n pixeli (figura 10).

Figura 10

74

 Crearea zonelor reactive

Image-maps sunt imagini n care putei delimita zone reactive: cerc, dreptunghi, poligon, care au rolul de legturi hipertext.
Z Pentru a crea zone reactive ntr-o imagine, folosii una din metodele prezentate n figura 11.

Figura 11 Bara Insert, categoria Common AidsImage Maps.

Inspectorul Properties

1. Verificai dac zonele reactive ale image-map-ului sunt afiate: ViewVisual 2. n documentul HTML, executai clic n locul n care dorii s inserai imaginea. 3. Inserai imaginea, iar apoi selectai-o. 4. n bara Insert, categoria Common 4. n panoul Properties, n zona Map
executai clic pe butonul (Images) i alegei butonul / / introducei numele imaginii map (este obligatoriu!) iar apoi alegei un instrument de desenare .

5. Cu instrumentul de desenare selectat, trasai o zon (reactiv) pe suprafaa imaginii, care devine astfel o legtur hipertext ctre pagina HTML corespunztoare. 6. n inspectorul Properties efectuai urmtoarele operaii: 6.1. n zona Link introducei URL-ul paginii ctre care se face legtura. 6.2. n meniul derulant Target indicai cadrul pe care dorii s-l utilizai n
situaia n care dorii un set de cadre.

6.3. n zona Alt introducei textul de legtur. 7. Repetai paii 5, 6 pentru a asocia imaginii alte legturi. 8. Salvai documentul. 9. Afiai pagina Web ntr-un browser. 10. Testai legturile hipertext.

75

 Retuarea unei imagini

Z n Dreamweaver MX 2004 putei modifica parametrii de optimizare ai unei imagini cu ajutorul aplicaiei Macromedia Fireworks, via Modify Image Optimize Image in Fireworks sau inspectorul Properties, via zona Modify, butonul (Optimize in Fireworks).

Z n Dreamweaver MX 2004 putei tia o imagine pentru a nu putea vizualiza dect o parte a acesteia, via Modify Image Crop sau butonul zona Modify din inspectorul Properties. (Crop) n

Z n Dreamweaver MX 2004 putei modifica luminozitatea i / sau contrastul (imagine fad sau luminoas) unei imagini, via Modify Image

Brightness/Contrast sau butonul inspectorul Properties (figura 12). Figura 12

(Brightness/Contrast), n zona Modify din

Z n Dreamweaver MX 2004 putei suprima zonele terse dintr-o imagine, via

Modify Image Sharpen sau butonul inspectorul Properties (figura 13). Figura 13

(Sharpen) n zona Modify din

76

 Comportamente asociate imaginilor

Comportamentele Swap Image i Swap Image Restore pot fi aplicate direct imaginilor.

Z Swap Image permite nlocuirea unei imagini cu alt imagine. Este preferabil ca ambele imagini s aib aceeai dimensiune, altfel vor aprea deformaii. Putei schimba una sau mai multe imagini n acelai timp.

1. 2.

Z Pentru a defini comportamentul Swap Image, efectuai urmtoarele operaii: Inserai o imagine-buton pentru a declana aciunea prin Insert Image. Inserai n pagina Web imaginea sau imaginile care vor fi schimbate ntre ele. n inspectorul Properties, dai un nume acestei (acestor) imagini. Selectai imaginea-buton. Afiai panoul Behaviors, via Window Behaviors. n panoul Behaviors, executai clic pe butonul Events For i selectai o versiune de navigator. Executai clic pe butonul , apoi alegei Show

3. 4. 5. 6. 7. 8. 9. 10.

, apoi selectai Swap Image.

n caseta de dialog Swap Image, care se afieaz, n zona Images, selectai prima imagine care trebuie s fie schimbat. n cmpul Set source to, executai clic pe butonul selecta imaginea care urmeaz s fie nlocuit. pentru a

Activai opiunile: 9 Preload Images pentru a evita ateptarea apariiei imaginii de nlocuire. 9 Restore Images onMouse Out pentru a regsi imaginile de origine atunci cnd pointer-ul prsete suprafaa butonului declanator. Selectai cea de-a doua imagine, care trebuie s fie nlocuit i procedai n mod similar. Executai clic pe butonul .

11. 12.

Panoul Behaviors afieaz dou evenimente (figura 14): OnMouseOut, OnMouseOver.

77

Figura 14

13. 14. 15.

Salvai documentul. Afiai pagina Web ntr-un browser. Testai comportamentul, (onMouseOver). trecnd mouse-ul deasupra butonului

n figura 15 se prezint un exemplu de comportament Swap Image care schimb ntre ele dou imagini.

Figura 15

78

"______________________________________________________________

07 Crearea legturilor hipertext

yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy n acest capitol: Tipuri de legturi Crearea unei legturi hipertext ctre o alt pagin Crearea unei legturi hipertext Crearea unei legturi hipertext ntr-o pagin ctre o adres de e-mail Crearea unei legturi hipertext ntr-o imagine Alegerea culorii legturilor hipertext Gestionarea legturilor hipertext yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy

Tipuri de legturi
ntr-o pagin Web, putei ntlni pe lng textele simple, obinuite, i texte care pot fi activate: legturile hipertext. Legturile hipertext permit vizitatorilor s navigheze n site-ul dumneavoastr. De regul, legturile hipertext activate i schimb culoarea, dar acest lucru nu este obligatoriu!
Z n Dreamweaver MX 2004 putei crea legturi interne i legturi externe. Z Legturile (hipertext) interne permit deplasarea n interiorul aceleiai pagini a site-ului sau ctre o alt pagin a site-ului. Z Legturile externe sunt legturi ctre alte site-uri Web, ctre o adres e-mail sau ctre un server FTP (File Transfer Protocol). Z Legturile pot fi de tip text un cuvnt sau mai multe cuvinte pe care vizitatorul va executa un clic. Ele pot fi, de asemenea, de tip imagine un buton, un rollover, o imagine-map n care putei delimita zone reactive (cerc, dreptunghi, poligon).

Crearea unei legturi hipertext ctre o alt pagin

Z Pentru a crea o legtur hipertext ctre o alt pagina Web, folosii una din metodele prezentate n figura 1:

79

Figura 1

Meniul Modify

Inspectorul

Properties

Panoul Files

Bara Insert, categoria Common, butonul

Hyperlink

1. Selectai textul ce urmeaz a fi convertit n legtur.

1. Executai clic n locul n acre dorii s inserai legtura hipertext.

2. Executai clic 2. n zona Link, 2. Afiai panoul 2. Afiai caseta de dialog pe ModifyMake executai clic pe Files, via Hyperlink, via Bara Insert, WindowFiles. categoria Common, butonul Link.
(Browse for file). (Hyperlink).
Remarc. Se afieaz caseta de dialog

Select File.

3. n caseta de dialog Select File, 3. n inspectorul 3. n caseta de dialog

efectuai urmtoarele operaii:

3.1. Selectai fiierul ctre care

dorii s dirijai link-ul.

3.2. n meniul derulant Relative 3.3. Executai clic pe butonul

.

to, alegei Document sau Site Root.

Hyperlink completai coninutul cmpurilor care executai clic pe se afieaz, iar apoi executai clic pe butonul icon-ul (Point to File), iar apoi . glisai-l peste Remarc. Se afieaz caseta numele paginii, de dialog Select File. n panoul Files 4. n caseta de dialog ctre care dorii Select File, efectuai s glisai link-ul. urmtoarele operaii:

Properties, n zona Link

4.1. Selectai fiierul ctre care dorii s dirijai link-ul. 4.2. n meniul derulant 4.3. Executai clic pe
butonul

Relative to, alegei Document sau Site Root.

80

Remarci: 9 Legtura se afieaz n zona Link din inspectorul Properties. 9 Noua legtur se afieaz n albastru i subliniat.

 Crearea unei legturi hipertext ntr-o pagin

Pentru a crea legturi hipertext n cadrul aceleiai pagini Web, trebuie s creai mai nti o ancor (n locul dorit!), iar apoi o legtur ctre ancor.

Crearea ancorei
Z Pentru a crea o ancor ntr-un document HTML care conine deja un text structurat, folosii una din metodele prezentate n figura 2.

Figura 2

Meniul Insert

Bara Insert, categoria Common

1. Verificai dac opiunea Named Anchors este activat, via Edit Preferences Category Invisible Elements.
Aids Invisible Elements.

2. Verificai dac opiunea Invisible Elements este activat, via View Visual 3. Executai clic naintea textului pe care dorii s-l marcai ca ancor. 4. Executai clic pe InsertNamed 4. n bara Insert, categoria Common,
Anchor
Remarc. Se afieaz caseta de dialog Named Anchor.

executai clic pe butonul Anchor).

(Named

5. n caseta de dialog Named Anchor, efectuai urmtoarele operaii: 5.1. n zona Anchor name introducei numele ancorei. 5.2. Executai clic pe butonul .

81
Remarci: 9 Elementul invizibil al ancorei ( ) se afieaz n fereastra Document (nu se afieaz

n fereasta browser-ului!). 9 Pentru a modifica numele ancorei, executai clic pe elementul invizibil, iar apoi utilizai inspectorul Properties (cmpul Name). 9 Codul HTML care definete o ancor (numit) este:

Crearea legturii hipertext ctre ancor

Z Pentru a crea o legtur ctre ancora numit, folosii una din metodele prezentate n figura 3.

Figura 3

Inspectorul Properties

Bara Insert, categoria Common, butonul

Hyperlink

1. Selectai textul de legtur. 2. n inspectorul Properties, n

1. Executai clic n locul n care dorii s

inserai legturahipertext.

2. Afiai caseta de dialog Hyperlink, via bara Insert categoria Common, butonul Hyperlink. zona Link, introducei numele ancorei precedat de simbolul # (fr nici un spaiu ntre ele!).
Remarc. Putei folosi icon-ul (Point to File, din inspectorul Properties) pe care s-l glisai peste elementul invizibil al ancorei numite (n fereastra Document).

3. Acionai tasta

3. n caseta de dialog Hyperlink, efectuai urmtoarele operaii: 3.1. Executai clic pe meniul derulant Link, iar
apoi selectai ancora numit.

82

3.2. n cmpul Text introducei numele

legturii.

3.3. Executai clic pe butonul

 Crearea unei legturi hipertext ctre o adres de e-mail

Z Pentru a crea o legtur hipertext (extern) ctre o adres de e-mail, folosii una din metodele prezentate n figura 4.

Figura 4

Meniul Insert

Bara Insert, categoria

Common

Inspectorul Properties

1. Executai clic pe 1. n bara Insert, categoria 1. Introducei textul de

InsertEmail Link. Common, executai clic pe
legtur iar apoi selectai-l. butonul (Email Link). Remarc. Se afieaz caseta de dialog Email

Link.

2. n caseta de dialog Email Link, efectuai urmtoarele operaii: 2.1. n zona Text, introducei textul legturii. 2.2. n zona E-mail introducei adresa de e-mail. 2.3. Executai clic pe butonul .

2. n cmpul Link, introducei o legtur de tipul:

mailto:liviu@dumitrascu.ro.

83
Remarci: 9 Textul legturii se afieaz n fereastra Document, iar n zona Link din inspectorul Properties adresa de e-amil se afieaz cu sufixul mailto:.

9 Codul HTML generat este:

Crearea unei legturi hipertext ntr-o imagine

Posibilitile de creare a legturilor (externe) ntr-o imagine cu Dreamweaver MX 2004 sunt numeroase: butoane (simple), rollover-e, imagini cu zone reactive, bare de navigare etc.
Z Pentru a crea legturi hipertext ntr-o imagine, folosii una din metodele prezentate n figura 5.

Figura 5

Inspectorul Properties

Meniul Modify

1. Inserai imaginea, iar apoi selectai-o. 2. n zona Link introducei URL-ul 2. Afiai caseta de dialog Select File,
complet al fiierului (site-ului) ctre care dorii s dirijai link-ul. via ModifyMake Link.

3. n caseta de dialog Select File,

efectuai urmtoarele operaii:

3.1. Selectai fiierul ctre care dorii s dirijai link-ul. 3.2. n meniul derulant Relative to,
alegei Document sau Site Root.

3.3. Executai clic pe butonul

.

84 Alegerea culorii legturilor hipertext

Dac culorile implicite (bleu) ale link-urilor generate cu Dreamweaver MX 2004 fac not discordant cu paginile dumneavoastr Web, putei s le modificai.

Z Pentru a schimba culoarea legturilor hipertext, efectuai urmtoarele operaii (figura 6):

Figura 6

1. Selectai legtura. 2. Executai clic pe ModifyPage Properties. 3. n caseta de dialog care se afieaz Page Properties selectai categoria
Links.

4. n zona Visited links executai clic pe butonul . 5. n paleta care se afieaz, executai clic cu pipeta pe culoarea dorit.

85 6. Executai clic pe butonul

.

 Gestionarea legturilor hipertext

tergerea unei legturi hipertext
Z Pentru a terge o legtur hipertext, efectuai urmtoarele operaii:

1. 2.

Selectai legtura hipertext. n inspectorul Properties, n cmpul Link, selectai calea de acces la legtur, iar apoi activai tasta Delete.

tergerea unei ancore

Z Metoda cea mai rapid pentru tergerea unei ancore este urmtoarea:

1. 2. 3. 4.

n codul surs HTML selectai tag-ul de nceput <A>:<A href=#...>. Activai tasta Delete. Selectai tag-ul final </A>. Activai tasta Delete.

"______________________________________________________________
_________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________

86

08 Inserarea i formatarea tabelelor

yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy n acest capitol: Crearea unui tabel Formatarea unui tabel Modificarea structurii unui Expanded Tables Mode tabel yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy

Crearea unui tabel

La puin timp dup introducerea lor n HTML, tabelele au devenit cel mai puternic i util instrument pentru formatarea paginilor Web. Tabelele sunt alctuite din trei elemente de baz: linii, coloane i celule. Organizarea tabelului este simpl: titlul tabelului, corpul tabelului, celulele de date. Dreamweaver MX 2004 pune la dispoziia utilizatorilor numeroase instrumente care permit relaii de bun vecintate ntre celule, linii i coloane.

Reguli generale
Z Listai toate datele nainte de a fi inserate ntr-un tabel. Z Definii structura tabelului (titlul tabelului, capul de tabel, numrul de linii, coloane, celulele de date etc.). Z Realizai un crochiu al viitorului tabel pentru a putea judeca aspectul acestuia.

Metode de inserare
Z n Dreamweaver MX 2004 putei crea un tabel n dou moduri: Standard Mode i Layout Mode. Z Pentru a insera un tabel n Dreamweaver MX 2004, folosii una din metodele prezentate n detaliu n figura 1.

87

Figura 1
Modul Standard Meniul Insert Bara Insert, categoria

Common

Modul Layout Bara Insert, Modul View categoria Layout

1. Executai clic n locul n care dorii s inserai tabelul. 2. Executai clic pe 2. Executai clic pe 2. Executai clic pe 2. Executai clic pe
InsertTable.
butonul

(Table).

Remarc. Putei folosi de asemenea

ViewTable Mode butonul Layout Mode (Layout). (Ctrl+F6).

butonul (Table) din categoria Layout, modul Standard. Remarc. Se afieaz caseta de dialog Remarc. Se afieaz caseta de dialog

Table.

Getting Started in Layout Mode.

3. Introducei valorile corespunztoare pentru parametrii afiai n caseta de dialog Table. 4. Executai clic pe butonul 88
.

3. Executai clic pe butonul

.

Table).

4. Executai clic pe butonul

(Layout

5. Desenai o zon dreptunghiular care

delimiteaz tabelul dumneavoastr.
Remarc. Dreamweaver MX 2004 afieaz tabelul n modul Layout View i indic

lungimea n pixeli.

tabelului direct (glisai mnerele) sau folosii inspectorul Properties. n zonele Width i Height introducei valorile dorite.

6. Modificai (dac este cazul!) structura

CellSpace, Bg i Class.

7. Indicai dac este cazul: CellPad,

8. Folosii, dup caz, butonul (Clear Row Heights) pentru tergerea valorilor atribuite nlimii celulelor.

9. Desenai celulele tabelului. 9.1. n bara Insert, categoria Layout,

executai clic pe butonul

Layout Cell).

(Draw

9.2.Trasai prima celul a tabelului. 9.3. Trasai celelalte celule ale

tabelului.

9.4. Completai tabelul pe care l-ai creat. 10. Afiai tabelul n modul standard
folosind una din metodele de mai jos: 9Meniul ViewTable Mode Standard 9Bara InsertCategoria Layout Butonul . 9Executai clic pe legtura exit situat deasupra paginii:

Mode;

Remarci: 9 n modul Standard Mode, atunci cnd mrii o celul vei constata c aceast operaie se transmite i celorlalte celule ale coloanei. n concluzie, n Standard Mode nu putei mri sau micora o singur celul ntr-o coloan. 9 Dac dorii s efectuai aceast operaie (numai pentru o singur celul!) trecei n Layout Mode. Dac revenii n Standard Mode vei constata c a fost creat o nou celul.

89

9 Dac parametrul No wrap din inspectorul Properties (n Standard Mode) este activat, atunci textul va continua ctre coloana din dreapta.

Formatarea unui tabel

Formatarea Properties

unui

tabel

cu

ajutorul

inspectorului

Z Proprietile obiectului Table sunt: Table Id (numele tabelului); Rows, Cols (numrul de linii i de coloane); W, H (dimensiunea tabelului); CellPad (spaiul dintre coninut i marginile interioare ale celulelor unui tabel); CellSpace (spaiul dintre celulele unui tabel); Align (tipul de aliniere: Default; Left; Center; Right). Z Toate proprietile obiectului Table sunt afiate n inspectorul Properties (figura 2).

Figura 2

Properties

Formatarea celulelor unui tabel cu ajutorul inspectorului

Z O celul poate conine: text, liste, imagini etc. Z Atunci cnd plasai pointer-ul mouse-ului ntr-o celul, Dreamweaver MX 2004 afieaz toate proprietile celulei n inspectorul Properties (figura 3): Horz (aliniamentul orizontal al coninutului unei celule Default, Center, Left, Right), Vert (aliniamentul vertical al coninutului unei celule Default, Top, Middle, Bottom, Baseline); W, H (lungimea i limea celulei); Bg (numele fiierului de fundal al unei celule sau culoarea unei celule); Merges selected cell using spans (fuzioneaz celulele selectate ntr-o singur celul); Splits cell into rows or columns (fracioneaz o celul n dou sau mai multe celule); Header (formateaz bold i centrat celulele selectate ca fiind celule de antet).

90

Figura 3

Z Pentru a formata celulele unui tabel, selectai celulele respective, iar n inspectorul Properties, n partea inferioar a panoului, modificai parametrii afiai.
Remarc. Coninutul unei celule (text, liste, imagini etc.) poate fi formatat n manier clasic. Dac selectai o imagine sau un text ntr-o celul a unui tabel, inspectorul Properties afieaz elementele de formatare ale coninutului selectat.

Formatarea unui tabel cu ajutorul modelelor predefinite

Z Cu Dreamweaver MX 2004 putei s formatai propriul tabel, utiliznd diferite modele predefinite: DblRows: Orange; DblRows: Cyan; DblRows: Grey; DblRows: Magenta, Blue; AltRows: Basic Grey, AltRows: Red etc. Z Pentru formatri complexe, putei insera un tabel ntr-o celul a tabelului.

Modificarea structurii unui tabel

Adugarea liniilor / coloanelor
Z Pentru a aduga linii / coloane ntr-un tabel, folosii una din metodele prezentate n figura 4.

Figura 4
Metoda Tasta ' (Tab) Inspectorul Descriere Executai clic n ultima celul a tabelului dumneavoastr, iar apoi acionai tasta ' (Tab).
Remarc. Este inserat o nou linie.

Properties

Selectai tabelul. n inspectorul Properties mrii valoarea din cmpurile Rows i/sau Columns.
Remarc. Noile linii se insereaz la baza tabelului iar noile coloane se insereaz la dreapta tabelului.

91
Meniul Modify Executai clic n celula deasupra creia dorii s se

insereze o nou linie, iar apoi executai clic pe

insereze o nou coloan, iar apoi executai clic pe sau coloane, iar apoi executai clic pe

ModifyTableInsert Row. Executai clic n celula n stnga creia dorii s se ModifyTableInsert Column. Executai clic n celula alturi de care dorii s inserai linii ModifyTableInsert Rows or Column.
Remarc. Se afieaz caseta de dialog Insert Rows or Columns.

Alegei opiunea Insert Rows sau Columns. Indicai Number of rows pe care dorii s le inserai. Cu opiunea Where alegei Above the Selection sau Below the Selection pentru linii; sau Before current Column sau After current Column pentru coloane, apoi executai clic pe butonul Bara Insert, categoria Layout Utilizai butoanele: .

(Insert Row Above),

(Insert

Row Bellow), (Insert Column to the Left), (Insert Column to the Right).

Objects.

Remarc. Regsii aceste comenzi n meniul InsertTable

92 tergerea liniilor / coloanelor

Z Pentru a suprima linii / coloane ale unui tabel, folosii una din metodele prezentate n figura 5.

Figura 5
Metoda Meniul Modify Inspectorul Descriere Executai clic n celula care aparine liniei/coloanei pe care dorii s-o tergei, iar apoi executai clic pe ModifyTableDelete Row sau Delete Column. Selectai tabelul. n inspectorul Properties micorai valoarea din zona Rows sau Columns.
Remarc. Liniile terse sunt cele situate la baza tabelului, iar coloanele terse sunt cele situate la dreapta tabelului.

Properties

Tasta 

Selectai o linie sau o coloan, iar apoi acionai tasta 

(Backspace)
Tastele Ctrl+Shift+M

(Backspace). Pentru a terge o linie, executai clic ntr-o celul a liniei, iar apoi acionai tastele Ctrl+Shift+M.

Fuzionarea celulelor unui tabel

Z Pentru a fuziona celulele unui tabel, folosii una din metodele prezentate n figura 6.

Figura 6

Meniul Modify

Inspectorul Properties

ModifyTableMerge Cells (Ctrl+Alt+M). Tabel Iniial

1. Selectai celulele adiacente pe care dorii s le extindei. 2. Executai clic pe 2. Executai clic pe butonul
selected cells using spans). Tabel cu celule extinse

(Merge

Remarc. Pentru a mri o celul extins (sau o celul nou fuzionat) executai clic n celul, iar apoi executai clic pe ModifyTableIncrease Row Span sau Increase Column

93

Span.

 Fracionarea celulelor fuzionate

Z Pentru a fraciona celulele fuzionate ale unui tabel, folosii una din metodele prezentate n figura 7.

Figura 7

Meniul Modify

Inspectorul Properties

1. Executai clic ntr-o celul fuzionat. 2. Executai clic pe ModifyTableSplit 2. Executai clic pe butonul
Remarc. Se afieaz caseta de dialog Split cell.

(Split

Cell.

cells into rows or columns).

3. n funcie de fuziunea iniial alegei Split cell into: Rows sau Split cell into:
Columns, iar apoi indicai Number of rows sau Number of columns.
.

4. Executai clic pe butonul

Modificarea structurii unui tabel folosind codul surs HTML

Z Dac cunoatei bine limbajul HTML, avei posibilitatea s modificai direct, n codul surs HTML, structura unui tabel, folosind una din urmtoarele metode:

94

9 Bara Insert categoria HTML. 9 Meniul Insert Table Objects Table, TR, TH, TD sau Caption.

 Expanded Tables Mode

Expanded Tables Mode adaug o margine interioar celulelor i spaii pentru toate tabelele unui document. El mrete, de asemenea, bordurile tabelelor pentru a facilita modificrile. Acest mod particular de afiare a unui tabel permite regsirea uoar a elementelor ntr-un tabel i plasarea punctului de inserare ntr-o manier mult mai precis.
Z Metodele de afiare a Expanded Tables Mode sunt prezentate n figura 8.

Figura 8

Meniul View

Bara Insert, categoria Layout

1. Executai clic pe ViewTable ModeExpanded Tables Mode. 2. Pentru a reveni n Standard

1. Executai clic pe butonul

(Expanded Tables Mode).

2. Pentru a reveni n Standard Mode, Mode, executai clic pe ViewTable executai clic pe butonul . ModeStandard Mode.
Remarc. pentru a reveni n mod rapid n Standard Mode executai clic pe legtura , care se afieaz n corpul paginii.

Z n figura 9 se prezint un exemplu de tabel afiat n Standard Mode i Expanded Tables Mode.

Figura 9
Standard Mode Expanded Tables Mode

95

"______________________________________________________________
_________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________

96

09 Crearea i validarea unui formular

yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy n acest capitol: Crearea unui formular Inserarea obiectelor ntr-un formular Validarea unui formular yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy

Crearea unui formular

Formularele sunt ideale pentru a realiza o interactivitate ntre dumneavoastr i vizitatorii site-ului pe care l-ai creat. Pentru a utiliza formularele, sunt obligatorii dou elemente: obiectele formularului (Text Field, Textarea, Button, CheckBox, Radio Button, List/Menu, File Field, Image Field, Hidden Field) i un script pentru gestionarea datelor. Cu Dreamweaver MX 2004 dumneavoastr putei crea formularul, urmnd ca script-ul s-l creai cu un limbaj de script (Java Script, Perl etc.).

Etapele de creare a unui formular

Z Stabilii coninutul i forma de prezentare a formularului. Z Creai formularul propriu-zis (manual sau cu un editor WYSIWYG). Z Inserai obiectele formularului (Text Field, Textarea etc.). Z Realizai o pagin de confirmare de primire (un document pe care l returnai utilizatorului, precizndu-i c formularul a fost bine primit). Z Alegei metoda de prelucrare a datelor din formular.

Inserarea unui formular

Z Pentru a insera un formular (obiectul Form), folosii una din urmtoarele metode (figura 1).

97

Figura 1

Meniul Insert

Bara Insert, categoria Forms

1. Verificai dac opiunea Form delimiter este activat, via Edit Preferences categoria Invisible ElementsShow: Form delimiter.
Invisible Elements.

2. Verificai dac elementele invizibile sunt afiate, via ViewVisual Aids 3. Executai clic pe
InsertFormForm.

3. n bara Insert, categoria Forms,

executai clic pe butonul

(Form).

Remarc. Dreamweaver MX 2004 creeaz un dreptunghi discontinuu rou, care materializeaz limitele formularului.

Inserarea obiectelor ntr-un formular

Inserarea unui cmp de text (Text Field)
Z Pentru a insera ntr-un formular un cmp de text (obiectul Text Field) n care utilizatorul poate introduce un text (pe o singur linie) cu puine caractere (nume, prenume, ora, comun, e-mail, adres Web etc.) folosii una din urmtoarele metode (figura 2).

Figura 2

Meniul Insert

Bara Insert, categoria Forms n bara Insert, categoria Forms, (Text Field). selectai obiectul

1. Executai clic n interiorul formularului. 2. Executai clic pe Insert Form 2.

Text Field.

3. 98

Parametrizai obiectul formularului n inspectorul Properties, iar apoi introducei eticheta corespunztoare dup obiectul inserat. Z Pentru a parametriza obiectul Text Field, folosii inspectorul Properties n care completai zonele: Text Field (numele obiectului); Char Width; Max Chars; Init Val; Class.

 Inserarea unei zone de text (Textarea)

Zona de text (obiectul Textarea) este un cmp de text multilinie, n care utilizatorul poate introduce mai mult text (mesaj, adres etc.).
Z Pentru a insera ntr-un formular o zon de text (obiectul Textarea), modificai pasul 2 din figura 2, dup cum urmeaz (figura 3).

Figura 3

Meniul Insert

Bara Insert, categoria Forms n bara Insert, categoria Forms, (Textarea).

1. Executai clic n interiorul formularului. 2. Executai clic pe Insert Form 2.

Textarea.

selectai obiectul

3.

Parametrizai obiectul formularului n inspectorul Properties, iar apoi introducei eticheta corespunztoare dup obiectul inserat. Z Pentru a parametriza obiectul Textarea, folosii inspectorul Properties n care completai zonele: Textarea (numele obiectului); Type (alegei Multiline); Char Width; Num Lines; Init Val; Wrap (alegei Default); Class.

Inserarea unui buton (Button)

Z Un buton poate avea trei funciuni: valideaz formularul i demareaz expedierea informaiilor ctre server (obiectul Submit); reseteaz cmpurile formularului (obiectul Reset); execut o funcie (Java Script sau alt limbaj de script).

2 din figura 2, dup cum urmeaz (figura 4). Figura 4

Z Pentru a insera ntr-un formular un buton (obiectul Button), modificai pasul

Meniul Insert

Bara Insert, categoria Forms

Button.

1. Executai clic n interiorul formularului. 2. Executai clic pe Insert Form 2.

99
n bara Insert, categoria Forms, (Button).

selectai obiectul

3.

Parametrizai obiectul formularului n inspectorul Properties, iar apoi introducei eticheta corespunztoare dup obiectul inserat. Z Pentru a parametriza obiectul Button, folosii inspectorul Properties n care completai zonele: Button name, Label, Action, Class.

Inserarea unei casete de validare (CheckBox)

n limbajul interfeelor grafice, casetele de validare (obiectul CheckBox) sunt sinonime cu una sau mai multe opiuni din cele propuse.
Z Pentru a insera ntr-un formular o caset de validare (obiectul CheckBox), modificai pasul 2 din figura 2, dup cum urmeaz (figura 5).

Figura 5

Meniul Insert

Bara Insert, categoria Forms n bara Insert, categoria Forms, (CheckBox).

1. Executai clic n interiorul formularului. 2. Executai clic pe Insert Form 2.

CheckBox.

selectai obiectul

3.

Parametrizai obiectul formularului n inspectorul Properties, iar apoi introducei eticheta corespunztoare dup obiectul inserat. Z Pentru a parametriza obiectul CheckBox, folosii inspectorul Properties n care completai zonele: CheckBox, Checked Value, Initial State, Class.

Inserarea unui buton radio (Radio Button)

n limbajul interfeelor grafice, butoanele radio (obiectul Radio Button) sunt sinonime cu o singur opiune din cele propuse.
Z Pentru a insera ntr-un formular un buton radio (obiectul Radio Button), modificai pasul 2 din figura 2, dup cum urmeaz (figura 6):

100

Figura 6

Meniul Insert

Bara Insert, categoria Forms n bara Insert, categoria Forms, (Radio Button).

1. Executai clic n interiorul formularului. 2. Executai clic pe Insert Form 2.

Radio Button.

selectai obiectul

3.

Parametrizai obiectul formularului n inspectorul Properties, iar apoi introducei eticheta corespunztoare dup obiectul inserat. Z Pentru a parametriza obiectul Radio Button, folosii inspectorul Properties n care completai zonele: Radio Button, Initial State, Class.

Inserarea unui grup de butoane radio (Radio Group)

Z Pentru a insera ntr-un formular un grup de butoane radio (obiectul Radio Group), modificai pasul 2 din figura 2, dup cum urmeaz (figura 7).

Figura 7

Meniul Insert

Bara Insert, categoria Forms n bara Insert, categoria Forms, (Radio Group).

1. Executai clic n interiorul formularului. 2. Executai clic pe Insert Form 2.

Radio Group.

selectai obiectul

3.

Parametrizai obiectul formularului n inspectorul Properties, iar apoi introducei eticheta corespunztoare dup obiectul inserat.

Fiecare buton radio, ce aparine grupului de butoane radio, poate fi modificat n inspectorul Properties.

Inserarea unui set de cmpuri (Fieldset)

Z Pentru a insera ntr-un formular un set de cmpuri (obiectul Fieldset), modificai pasul 2 din figura 2, dup cum urmeaz (figura 8).

101

Figura 8

Meniul Insert

Bara Insert, categoria Forms n bara Insert, categoria Forms, selectai obiectul (Fieldset).

1. Executai clic n interiorul formularului. 2. Executai clic pe Insert Form 2.

Fieldset.

3.

Parametrizai obiectul formularului n inspectorul Properties, iar apoi introducei eticheta corespunztoare dup obiectul inserat.
Fiecare obiect al formularului ce aparine setului de cmpuri (Fieldset), poate fi modificat n inspectorul Properties.

Inserarea unui meniu derulant (List / Menu)

Cu un meniu derulant putei propune vizitatorilor site-ului dumneavoastr mai multe opiuni, dar ... el nu poate alege dect una singur.
Z Pentru a insera ntr-un formular un meniu derulant (obiectul Menu), modificai pasul 2 din figura 2, dup cum urmeaz (figura 9).

Figura 9

Meniul Insert

Bara Insert, categoria Forms n bara Insert, categoria Forms, (List/Menu).

1. Executai clic n interiorul formularului. 2. Executai clic pe Insert Form 2.

List/Menu.

selectai obiectul

3.

Parametrizai obiectul formularului n inspectorul Properties, iar apoi introducei eticheta corespunztoare dup obiectul inserat. Fiecare obiect al formularului ce aparine setului de cmpuri (Fieldset), poate fi modificat n inspectorul Properties.

102

Obiectul Menu poate fi parametrizat n inspectorul Properties.

"______________________________________________________________
_________________________________________________________________

 Inserarea unei liste derulante (List / Menu)

Cu o list derulant putei propune vizitatorilor site-ului dumneavoastr mai multe opiuni, ei putnd alege oricte doresc.
Z Pentru a insera ntr-un formular o list derulant (obiectul List), procedai la fel ca la inserarea unui meniu derulant.
Obiectul List poate fi parametrizat n inspectorul Properties.

Inserarea obiectului Hidden Field

Un cmp mascat (obiectul Hidden Field) nu este vizibil n fereastra browser-ului atunci cnd vizitatorii consult site-ul dumneavoastr. Totui, el este cunoscut de ctre proiectantul site-ului. (Cmpul Hidden figureaz n codul surs al documentului HTML!).
Z Pentru a insera ntr-un formular un cmp mascat (obiectul Hidden Field), modificai pasul 2 din figura 2, dup cum urmeaz (figura 10).

Figura 10

Meniul Insert

Bara Insert, categoria Forms n bara Insert, categoria Forms, (Hidden Field).

Hidden Field.

1. Executai clic n interiorul formularului. 2. Executai clic pe Insert Form 2. 3.

selectai obiectul

Parametrizai obiectul formularului n inspectorul Properties, iar apoi introducei eticheta corespunztoare dup obiectul inserat. Z Pentru a parametriza obiectul Hidden Field, folosii inspectorul Properties n care completai zonele: Hidden Field Name, Value, Class.

Inserarea butonului de expediere (Submit)

Z Pentru a insera ntr-un formular un buton de expediere (obiectul Submit), modificai pasul 2 din figura 2, dup cum urmeaz (figura 11).

103

Figura 11

Meniul Insert

Bara Insert, categoria Forms n bara Insert, categoria Forms, (Button).

1. Executai clic n interiorul formularului. 2. Executai clic pe Insert Form 2.

Button.

selectai obiectul

3.

Parametrizai obiectul formularului n inspectorul Properties, iar apoi introducei eticheta corespunztoare dup obiectul inserat. Z Pentru a parametriza obiectul Submit, folosii inspectorul Properties n care completai zonele: Button name, Label, Action (alegei Submit form), Class.

Inserarea butonului de resetare (Reset)

Butonul de resetare permite utilizatorului s anuleze valorile introduse n cmpurile formularului i s renceap introducerea noilor valori.
Z Pentru a insera ntr-un formular un buton de resetare a formularului (obiectul Reset), modificai pasul 2 din figura 2, dup cum urmeaz (figura 12):

Figura 12

Meniul Insert

Bara Insert, categoria Forms n bara Insert, categoria Forms, (Button).

1. Executai clic n interiorul formularului. 2. Executai clic pe Insert Form 2.

Button.

selectai obiectul

3.

Parametrizai obiectul formularului n inspectorul Properties, iar apoi introducei eticheta corespunztoare dup obiectul inserat. Z Pentru a parametriza obiectul Reset, folosii inspectorul Properties n care completai zonele: Button name, Label, Action (alegei Reset form), Class.

104

"______________________________________________________________
_________________________________________________________________ _________________________________________________________________ _________________________________________________________________

 Validarea unui formular

Putei valida corectitudinea datelor introduse n cmpurile unui formular de ctre vizitatorii site-ului dumneavoastr n dou situaii: n momentul expedierii formularului (evenimentul onSubmit); atunci cnd vizitatorul completeaz cmpurile unul dup altul (evenimentul onBlur/onChange).

Inserarea comportamentului Validate Form

Validarea n momentul expedierii formularului
Z Creai comportamentul Validate Form cu evenimentul onSubmit pentru ca validarea formularului s se realizeze n momentul acionrii butonului de expediere, Submit. Z Efectuai urmtoarele operaii (figura 13).

Figura 13

1. Selectai formularul executnd clic pe elementul <form> n bara de stare. 2. Afiai panoul Behaviors, via WindowBehaviors (SHIFT+F3). 3. n panoul Behaviors, executai clic pe butonul , alegei Show Events For,
iar n meniul secundar selectai navigatorul cu care vei lucra.

4. n panoul Behaviors, executai clic pe butonul

iar apoi alegei comportamentul Validate Form.

(adugare comportament),

Remarc. Se afieaz caseta de dialog Validate Form care repertoriaz toate cmpurile de tip text ale formularului.

105

5. n caseta de dialog Validate Form, efectuai urmtoarele operaii:

5.1. n zona Named fields selectai cmpul cruia urmeaz s i se aplice

validarea.

5.2. n zona Value activai caseta de validare Required pentru a interzice n

acest cmp o zon vid.

5.3. n zona Accept, alegei una din opiunile:

9 Anything pentru a nu impune un tip de date particular (caseta de validare Required a fost activat!). 9 Number pentru a nu accepta dect valori numerice. 9 Email adress pentru a testa prezena caracterului @. 9 Number from x to y pentru a avea o valoare numeric cuprins n intervalul indicat.

5.4. Odat primul cmp parametrizat, selectai cel de-al doilea cmp; parametrizai-l .a.m.d. (n cazul unei validri globale). 5.5. Executai clic pe butonul
Validarea cmp cu cmp
Z Creai comportamentul Validate Form cu evenimentul onBlur/onChange pentru ca validarea formularului s se realizeze de fiecare dat cnd utilizatorul prsete un cmp al formularului. .

"______________________________________________________________
106
_________________________________________________________________ _________________________________________________________________ _________________________________________________________________

Z Efectuai urmtoarele operaii (figura 14).

Figura 14

iar apoi alegei comportamentul Validate Form.

1. Selectai formularul executnd clic pe elementul <form> n bara de stare. 2. Afiai panoul Behaviors, via WindowBehaviors (SHIFT+F3). 3. n panoul Behaviors, executai clic pe butonul (adugare comportament),

4. Parametrizai cmpurile formularului ca n cazul precedent (validrii n momentul expedierii formularului). 5. Executai clic pe butonul
.

"______________________________________________________________
_________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________

107

"______________________________________________________________
_________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________

108

10 Inserarea i formatarea cadrelor

yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy n acest capitol: Crearea unui set de cadre Formatarea unui set de cadre Formatarea Inserarea obiectelor ntr-un cadru Definirea legturilor hipertext cadrelor ntr-un set de cadre Comportamente asociate seturilor de cadre yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy

Crearea unui set de cadre

Cadrele reprezint un set de control al navigrii. Proiectanii recurg la cadre pentru a crea o pagin care conine dou sau trei cadre. Teoretic nu exist limitri n ceea ce privete numrul de cadre. Atunci cnd vizitatorul afieaz un site care conine cadre, el vede un ansamblu de informaii organizate n dreptunghiuri ce se afieaz pe linii sau coloane. n cea mai mare parte a timpului, un sumar al site-ului este afiat n cadrul din stnga al ecranului, fiind suficient ca vizitatorul s execute un clic pe unul din item-urile afiate pentru a vedea pagina corespunztoare ntr-unul din celelalte cadre ale ecranului.
Z Decizia de a utiliza cadre v aparine (vezi figura 1).

Figura 1
Avantaje Cadrele sunt recunoscute de cea mai mare parte a navigatoarelor. Cadrele sunt percepute ca un set distinct al utilizrii tehnologiilor avansate de creare a unui site. Cadrele reduc timpul de ncrcare al paginilor; atunci cnd sunt utilizate, se ncarc numai coninutul paginilor, elementele statice (logo-urile, meniurile de navigare etc.) fiind deja ncrcate de ctre utilizatori. Dezavantaje Cadrele au reputaia de a fi incoerente. Navigarea in interiorul cadrelor rmne nc un mister pentru unii dintre noi. Cadrele pot ocupa mai mult spaiu dect le este necesar. Nu de puine ori, cadrele pot reprezenta un risc juridic. Drepturile de autor pot fi nclcate atunci cnd se execut link-uri ctre documentele

109

 Cadrele mresc gradul de (X)HTML din interiorul site-ului. funcionalitate al site-ului. Navigarea rmne vizibil n timp ce coninutul este n curs de schimbare, ntr-un cadru separat. Cadrele permit de o manier simpl i rapid actualizarea paginilor i adugarea unui coninut nou. Alturi de tabele, cadrele reprezint, de asemenea, un foarte puternic instrument de proiectare a site-urilor. Paginile care conin cadre ocup mai puin spaiu de memorie dect tabelele i se ncarc mai rapid; sunt mai uor de actualizat i de ntreinut. Cadrele sunt standarde n HTML 4. Z Proprietile obiectului Frameset sunt: Borders, Border width, Border color, Rowcol Selection, Units. Z Toate proprietile obiectului Frameset sunt afiate n inspectorul Properties. Z Panoul Frames afieaz ansamblul structurii cadrelor prezente n pagin. Panoul Frames permite vizualizarea rapid a tuturor cadrelor pe care nu le putem vedea ntr-o pagin fr a le mri (figura 2). Pentru a afia panoul Frames, executai clic pe Window Frames.

Figura 2

110

 Metode de inserare
n Dreamweaver MX 2004 putei crea seturi de cadre proprii (cu un mic efort!) sau putei folosi seturi de cadre predefinite (de-a gata!). Analizai i decidei!
Z Pentru a crea seturi de cadre proprii, folosii una din metodele prezentate n detaliu n figura 3.

Figura 3
Cadre care se afieaz n coloane Meniul Modify Meniul View Cadre care se afieaz n linii Meniul Modify Meniul View

ModifyFrameSet Split Frame Left sau Split Frame Right.

1. Executai clic pe 1. Executai clic pe 1. Executai clic pe 1. Executai clic pe

ViewVisual AidsFrame Borders pentru a
cadrelor.

Modify Frame SetSplit Frame Up sau Split Frame vizualiza chenarele Down.

ViewVisual AidsFrame Borders pentru a

vizualiza chenarele cadrelor.

Remarc. Comenzile Split Frame Left/Split Frame Right mpart pagina vertical, n dou cadre: unul la stnga i altul la dreapta.

Remarc. Tragei cu mouse-ul de chenarul cadrului din stnga pentru a afia setul de cadre n coloane.

Remarc. Comenzile Split Frame Up/Split Frame Down mpart pagina orizontal, n dou cadre: unul sus i altul jos.

Remarc. Tragei cu mouse-ul de chenarul cadrului de sus pentru a afia setul de cadre n linii.

Diferena ntre cele dou comenzi nu intervine ntr-o pagin goal. Ea apare numai n cazul n care avei o pagin care conine: text, imagini etc.

Diferena ntre cele dou comenzi nu intervine ntr-o pagin goal. Ea apare numai n cazul n care avei o pagin care conine: text, imagini etc.

2. Putei continua 2. Putei continua 2. Putei continua 2. Putei continua

ModifyFrame WindowFrames SetSplit Frame pentru a obine Up sau Split Frame cadre imbricate.
fracionarea cadrelor via fracionarea cadrelor via

ModifyFrame SetSplit Frame Left sau Split

fracionarea cadrelor via

fracionarea cadrelor via

111

pentru a obine cadre imbricate.

Window Frames

n Frames selectai Frame Right pentru obine cadre viitorul cadru ce a obine cadre imbricate (nested). urmeaz a fi imbricate (nested). fracionat.

Down pentru a

n panoul Frames selectai viitorul cadru ce urmeaz a fi fracionat.

3. Salvai setul de cadre via FileSave Frame.

Z Pentru a crea seturi de cadre pornind de la cadrele predefinite Dreamweaver MX 2004, folosii una din metodele prezentate n figura 4.

Figura 4

Categoria General,

Framesets

Bara Insert, categoria

Layout

Meniul Insert

1. Creai un nou

1. Creai un document document, via FileNew. simplu (fr cadre predefinite), via
FileNewCategory Basic pageCreate.

1. Executai clic pe

InsertHTMLFrames.

2. n categoria General, 2. Executai clic pe

n lista derulant (Frames), Framesets alegei setul de butonul iar apoi alegei setul de cadre dorit, iar apoi executai clic pe butonul cadre dorit. .

2. Alegei setul de cadre

dorit.

3. Putei continua fracionarea ferestrei deja fracionate. n document, executai clic n cadrul care urmeaz s fie din nou fracionat sau, n panoul Frames, selectai (printr-un clic) cadrul care urmeaz a fi fracionat. Inserai un set de cadre predefinit .a.m.d. 4. Salvai setul de cadre via FileSave Frame As. Formatarea unui set de cadre
Z Pentru a formata un set de cadre, efectuai urmtoarele operaii:

112 1. 2.

Selectai setul de cadre de nivelul cel mai nalt. n inspectorul Properties efectuai operaiile prezentate n cele ce urmeaz (vezi figura 5).

2.1. n meniul derulant Borders alegei No/Yes. Dac ai optat pentru Yes,
completai cmpurile Border width i Border color.

2.2. n

2.3. Introducei 3. 4.

zona Rowcol Selection, executai clic pe Row/Column pentru a defini (Value) lungimea liniei / limea coloanei selectate.

n zonele Value i Units lungimea / limea liniei sau coloanei exprimate n Pixels, Percent, Relative.

Selectai alte linii / coloane i definii lungimea /limea respectnd acelai principiu. Selectai, dup caz, seturile de cadre imbricate i formatai-le dup aceleai principii.

Figura 5

Formatarea cadrelor
Properties: Frame name, Src, Scroll, Borders, Border color, Noresize, Class, Margin Width, Margin Height.
Z Toate proprietile unui cadru (obiectul Frame) sunt disponibile n inspectorul

Z Avei obligaia s formatai fiecare cadru care aparine unui set de cadre dup cum urmeaz:

1. 2.

Selectai obiectul Frame, via panoul Frames. n inspectorul Properties efectuai urmtoarele operaii:

2.1. n

zona Frame name introducei numele cadrului pentru a putea fi referit ntr-un set de cadre i pentru a putea crea link-uri. acest cadru.

2.2. n zona Src introducei numele paginii care trebuie s se afieze n 2.3. n meniul derulant Borders, alegei una din opiunile Yes, No, Auto,
Default. Dac ai ales Yes, introducei n zona Border color culoarea bordurii.

2.4. n 2.5. n

meniul derulant Scroll, alegei una din opiunile Yes, No, Auto, Default, pentru a preciza prezena / absena barelor de derulare.

113

zonele Margin Width i Margin Height definii distanele (orizontal, vertical) ntre bordur i cadru.

 Inserarea obiectelor ntr-un cadru

Dreamweaver MX 2004 v permite s inserai ntr-un cadru orice obiect dorii: imagini, text Flash etc. Dac, de exemplu, dorii s introducei text de la tastatur, procedai ca n cazul paginilor tradiionale.
Z Metodele pe care este bine s le avei n vedere n strategia dumneavoastr de concepie a unui set de cadre sunt prezentate n figura 6.

Figura 6
Pregtirea Crearea documentelor documentelor n avans pe parcurs Pregtirea i crearea documentelor

1. Creai i salvai n
avans toate documentele care vor interveni n procesul de creare a seturilor de cadre.

1. Creai, formatai i
salvai setul de cadre.

1. Combinai primele
dou metode: pregtii diverse documente n avans, concepei cadrele dumneavoastr ntr-un document deja creat, iar apoi creai noi documente.

2. Creai ntr-un nou

document setul de cadre i formatai-l (cu inspectorul Properties).

2. n fereastra Document,
n primul cadru: inserai toate elementele necesare i salvai documentul (via File Save Frame).

3. Procedai n mod similar i cu celelalte cadre. Definirea legturilor hipertext ntr-un set de cadre
Z Pentru a defini link-urile ntr-un set de cadre, efectuai urmtoarele operaii:

1. 114 2.

Selectai textul / imaginea legturii. n inspectorul Properties efectuai urmtoarele operaii:

2.1. n cmpul Link indicai pagina care urmeaz s fie ncrcat.

2.2. n

meniul derulant Target, selectai numele cadrului din setul de cadre n care urmeaz s se afieze pagina.

Comportamente asociate seturilor de cadre

Z Comportamentele asociate seturilor de cadre livrate cu Dreamweaver MX 2004 (Set Text of Frame, GoToURL) permit utilizatorului s interacioneze dinamic cu paginile dumneavoastr Web. Z Pentru a schimba coninutul unui cadru, folosii comportamentul Set Text of Frame, dup cum urmeaz:

1. 2. 3. 4. 5. 6. 7. 8.

Creai setul de cadre. Afiai panoul Behaviors. Selectai cadrul cruia dorii s-i schimbai coninutul. n panoul Behaviors, executai clic pe

Set Text Set Text of Frame.

n caseta de dialog Set Text of Frame, efectuai operaiile corespunztoare schimbrii coninutului cadrului. Alegei evenimentul onMouseOver / onClick. Vizualizai pagina Web ntr-un browser. Testai comportamentul Set Text of Frame.

"______________________________________________________________
_________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________

115

"______________________________________________________________
_________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________

116

11 Crearea i formatarea straturilor

yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy n acest capitol: Crearea unui strat Formatarea unui strat Crearea straturilor Comportamente asociate straturilor imbricate yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy

Crearea unui strat

Un strat (obiectul Layer) sub Dreamweaver MX 2004 este o celul pe care o putei deplasa i redimensiona liber n pagina dumneavoastr Web. Sistemul de straturi v permite plasarea foarte precis a obiectelor paginii: text, imagini, animaii, tabele care, la rndul lor, conin obiecte.

Reguli generale
Z Straturile aparin marii familii a foilor de stil n cascad (CSS); ele sunt foi de stil de poziionare a obiectelor ntr-o pagin Web - CSSP pentru W3C (n prezent, ele sunt integrate n CSS-2). Z Straturile permit suprapunerea obiectelor unei pagini Web. Z Straturile pot servi la crearea animaiilor dup un scenariu. Z Cu ajutorul straturilor, putei crea efecte de superpoziie foarte interesante i originale, plasnd straturile unele deasupra celorlalte. Z Dreamweaver MX 2004 v propune dou formate de straturi: straturi CSS care poziioneaz obiectele paginii cu ajutorul tag-urilor Div i Span; straturi Netscape care poziioneaz obiectele paginii cu ajutorul tag-urilor Layer i Ilayer (utilizate numai de Netscape).

117

Z n Dreamweaver MX 2004 straturile au o poziie absolut: stratul este plasat n raport cu marginile paginii i este poziionat deasupra coninutului paginii (figura 1).

Figura 1
y x

Stratul 3 Stratul 2 Stratul 1

unde: x reprezint poziia orizontal fa de marginea din stnga a stratului; y reprezint poziia vertical fa de marginea de sus a stratului; z reprezint
ordinea de suprapunere n raport cu alte straturi.

Inserarea unui strat

Z Proprietile obiectului Layer sunt: Layer ID (numele stratului); L (distana n pixeli msurat de la marginea din stnga a paginii la marginea din stnga stratului); T (distana n pixeli msurat de la marginea de sus a paginii la marginea superioar a stratului); W i H (dimensiunile stratului); Z-Index (ordinea de suprapunere a stratului); Bg Image (imaginea de background pentru strat); Bg Color (culoarea de background pentru strat); Overflow (modul n care straturile se afieaz n browser); Clip (valori de decupare L, T, R, B); Class (stil CSS). Z Panoul Layers afieaz toate straturile ntr-o pagin (figura 2). Pentru a afia panoul Layers, executai clic pe Window Layers.

Figura 2

118

Z Pentru a insera un strat (obiectul Layer) n pagin, folosii una din metodele prezentate n figura 3.

Figura 3

Meniul Insert

Bara Insert, categoria Layout

ObjectsLayer.

1. Executai clic n locul n care dorii s fie inserat stratul (layer-ul). 2. Executai clic pe InsertLayout 2. Executai clic pe butonul
Layer).

(Draw

3. Selectai stratul, folosind una din urmtoarele proceduri:

9 executai clic pe elementul invizibil ( ); 9 executai clic pe coninutul stratului; 9 cnd punctul de inserie se afl n interiorul stratului, executai clic pe butonul aflat n colul din stnga sus al stratului; 9 cnd stratul nu este activat, acionai i meninei apsat tasta Shift i executai clic oriunde n interiorul stratului; 9 n panoul Layers (via WindowLayer, zona Name) executai clic pe numele stratului (pentru moment Layer1).
Remarci: 9 Cnd stratul a fost selectat, pe conturul acestuia apar opt ptrate negre (mnere). 9 Verificai dac elementele invizibile ale straturilor au fost activate (via EditPreferenceCategory Invisible Elementsopiunea Anchor Points for Layers). 9 n pagin, elementele invizibile i bordurile trebuie s fie afiate (via View Visual Aids Invisible Elements i Layers Borders).

4. Tragei de mnerele de redimensionare pentru a obine dimensiunea aproximativ a stratului.

"______________________________________________________________
_________________________________________________________________ _________________________________________________________________ _________________________________________________________________

Formatarea unui strat

Z Pentru a formata un strat, utilizai panoul Layers i inspectorul Properties. Z Selectai stratul, iar apoi n inspectorul Properties completai zonele: Layer ID, L, T, W, H, Z-Index, Vis, BgColor, Overflow, Clip, Class (figura 4).

119

Figura 4

Crearea straturilor imbricate

Z Un strat imbricat este un strat plasat n interiorul altui strat, pstrnd relaia paternal. Primul strat devine tatl stratului imbricat (fiu). Stratul fiu utilizeaz colul superior din stnga al stratului printe ca punct de orientare pentru poziionare. Dac straturile se afl n zone diferite ale paginii, relaia cu stratul printe se pstreaz. Dac tergei stratul printe, n mod automat se terg i straturile fiu. Z Pentru a crea straturi imbricate cu Dreamweaver MX 2004, folosii una din metodele prezentate n figura 5.

Figura 5
Metoda manual Metoda automat
Remarc. Se afieaz caseta de dialog

1. Desenai primul strat i numii-l tata. 1. Executai clic pe Edit Preferences.

Preferences.

120

2. Desenai cel de-al doilea strat n

interiorul primului strat i numii-l fiu.

zona Nesting activai opiunea Nest when created within a layer.

2. n caseta de dialog Preferences, n

3. Afiai panoul Layers.

3. Executai clic pe butonul

.

Remarc. n panoul Layers identificai un strat imbricat prin indentarea stratului fiu n stratul tata i prin simbolul plasat naintea stratului tata.

stratul fiu.

4. Desenai stratul tata. 5. n interiorul acestui strat, desenai

Remarci: 9 Stratul fiu este imbricat n stratul tata n mod automat. 9 Nu uitai s dezactivai opiunea dac nu dorii s creai n mod sistematic straturi imbricate.

Nested when created within a Layer

Comportamente asociate straturilor

Z Comportamentul Set Text of Layer permite nlocuirea coninutului i formatarea unui strat printr-un coninut diferit i/sau atribute specifice.
Coninutul unui strat poate fi cod HTML.

Z Comportamentul Show-Hide Layers permite afiarea straturilor mascate i mascarea straturilor vizibile. Z Comportamentul Drag Layer d posibilitatea utilizatorului s deplaseze un strat. Aceast deplasare poate fi liber sau restrictiv.

121

"______________________________________________________________
_________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________

122

12

Utilizarea bibliotecilor de obiecte i a modelelor

yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy n acest capitol: Inserarea obiectelor Biblioteci de obiecte Modele yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy Pentru gestionarea paginilor Web, Dreamweaver MX 2004 pune la dispoziia utilizatorului dou instrumente practice: bibliotecile de obiecte i modelele. Bibliotecile de obiecte permit catalogarea (stocarea) anumitor poriuni (zone) ale unei pagini, iar un model (de pagin) reprezint o pagin ntreag, deja formatat.

Inserarea obiectelor
Cu Dreamweaver MX 2004, putei insera n paginile Web obiecte dintre cele mai diverse: animaii Flash / Shockwave, obiecte Fireworks, applet-uri Java, controale ActiveX, script-uri, obiecte multimedia etc.

Animaii Flash
Z Proprietile animaiei Flash sunt: Flash (numele animaiei); W i H (dimensiunile animaiei); Loop i Autoplay (ciclarea i revenirea la nceputul animaiei); Vspace i Hspace (spaiul exprimat n pixeli dintre animaie i textul adiacent); Align (tipul de aliniere); Bg (culoarea de background); Class (stil

CSS).

Z Toate proprietile unei animaii Flash sunt disponibile n inspectorul Properties (figura 1).

Figura 1

123

Z Pentru a insera ntr-o pagin o animaie Flash, folosii una din metodele prezentate n figura 2.

Figura 2

Meniul Insert

Bara Insert, categoria Common

Flash.

1. Executai clic n locul n care dorii s inserai animaia Flash. 2. Executai clic pe InsertMedia 2. n bara Insert, categoria Common,
executai clic pe butonul alegei
Remarc. Se afieaz caseta de dialog Select File.

(Media) i

. n site-ul dumneavoastr.

3. n caseta de dialog Select File, selectai fiierul .swf

Remarc. n document animaia apare sub forma

4. Executai clic pe butonul 124

Z Pentru a parametriza o animaie Flash, utilizai inspectorul Properties.

"______________________________________________________________

 Animaii Shockwave
Z Proprietile animaiei Shockwave sunt: Shockwave, W, H, File, Class,

Vspace, Hspace, Align, Bg.

Z Toate proprietile unei animaii Shockwave sunt disponibile n inspectorul Properties (figura 3).

Figura 3

Z Pentru a insera ntr-o pagin o animaie Shockwave, folosii una din metodele prezentate n figura 4.

Figura 4

Meniul Insert

Bara Insert, categoria Common

Shockwave.

1. Executai clic n locul n care dorii s inserai animaia Shockwave. 2. Executai clic pe InsertMedia 2. n bara Insert, categoria Common,
executai clic pe butonul alegei
Remarc. Se afieaz caseta de dialog Select File.

(Media) i

3. n caseta de dialog Select File, selectai fiierul.dir n site-ul dumneavoastr.

125

Remarc. n document animaia apare sub forma

4. Executai clic pe butonul

Z Pentru a parametriza o animaie Shockwave, folosii inspectorul Properties. Z Folosii comportamentul Control Shockwave or Flash pentru a controla o animaie Flash sau Shockwave.

Applet-uri Java
Limbajul de programare Java, dezvoltat de Sun Microsystems permite programatorilor s scrie mici aplicaii (applet, n limba englez) care pot fi inserate ntr-o pagin Web.
Z Proprietile unui applet Java sunt: Applet name, W, H, Code, Base, Align, Alt, Vspace, Hspace, Class. Z Toate proprietile unui applet Java sunt disponibile n inspectorul Properties (figura 5).

Figura 5

Z Pentru a insera ntr-o pagin un applet Java, folosii una din metodele prezentate n figura 6.

Figura 6

Meniul Insert

Bara Insert, categoria Common

126 1. Executai clic n locul n care dorii s fie inserat applet-ul Java. 2. Executai clic pe InsertMedia 2. n bara Insert, categoria Common,
Applet.
executai clic pe butonul

(Media), iar

apoi alegei
Remarc. Se afieaz caseta de dialog Select File.

3. Selectai fiierul .class pe care dorii s-l inserai. 4. Executai clic pe butonul .
Z Pentru a parametriza un applet Java, folosii inspectorul Properties.

Obiecte multimedia
n afar de text i imagini, mai putei insera n paginile dumneavoastr Web: sunet, video (obiecte multimedia). Site-ul Macromedia dispune de numeroase obiecte multimedia pe care le putei descrca i instala fr efort.

Obiectul sunet
Z Proprietile obiectului sunet sunt: Plugin, W, H, Src, PlgURL, Align, Vspace, Hspace, Border, Class. Z Toate proprietile obiectului sunet sunt disponibile n inspectorul Properties (figura 7).

Figura 7

Z Pentru a insera ntr-o pagin un obiect sunet, folosii una din metodele prezentate n figura 8.

Figura 8

Meniul Insert

Bara Insert, categoria Common

Plugin.

1. Executai clic n locul n care dorii s fie inserat fiierul sunet. 2. Executai clic pe InsertMedia 2. n bara Insert, categoria Common,
executai clic pe butonul

127

(Media), iar

apoi alegei
Remarc. Se afieaz caseta de dialog Select File.

3. n caseta de dialog Select File selectai fiierul audio .wav pe care dorii s-l inserai. 4. Executai clic pe butonul
. Z Inserarea obiectului sunet necesit un plug-in. Z Pentru a parametriza un obiect sunet, folosii inspectorul Properties. Z Folosii comportamentul Play Sound care poate fi aplicat direct sunetului.

Obiectul video
Z Proprietile, metodele de inserare ale obiectului video sunt aceleai ca ale obiectului sunet. Z Inserarea obiectului video necesit un plug-in. Z Pentru a parametriza un obiect video, folosii inspectorul Properties.

Biblioteci de obiecte
Atunci cnd concepei site-urile Web n cadrul unei echipe, numeroase elemente HTML sunt considerate comune i reutilizabile. Pentru a putea reutiliza aceste elemente recurente, folosii bibliotecile de obiecte din Dreamweaver MX 2004, mai precis panoul Assets care poate fi considerat o superbibliotec.

Utilizarea bibliotecii de obiecte

Este bine ca toate elementele care se repet ntr-un site Web (copyright-ul, adresele, logo-urile, clauzele de garanie etc.) s fie catalogate ntr-o bibliotec. Creai un element de bibliotec, salvai-l, iar apoi aplicai-l oricrei pagini din site-ul dumneavoastr.

128

Z Dreamweaver MX 2004 stocheaz elementele de bibliotec ntr-un folder cu numele Library situat n rdcina local a fiecrui site, care conine propria sa bibliotec. Z Un element de bibliotec poate fi oricare din elementele seciunii BODY ale unui document: text, tabele, formulare, applet-uri Java, bare de navigare, imagini. Elementele de bibliotec pot conine, de asemenea, comportamente, dar nu pot conine scenarii sau foi de stil. Z Pentru a afia biblioteca de obiecte Dreamweaver MX 2004, efectuai urmtoarele operaii:

1. 2.

Executai clic pe Window Assets sau activai tasta F11.

Se afieaz panoul Assets.

n panoul Assets, n coloana din stnga, executai clic pe butonul (Library), figura 9.

Figura 9

129
Z Pentru a cataloga un element de bibliotec, folosii una din metodele prezentate n figura 10.

Figura 10

Meniul Modify

Panoul Assets

1. Selectai site-ul Dreamweaver MX 2004 (deja existent). 2. Deschidei pagina care conine obiectele ce urmeaz a fi catalogate n
biblioteca de obiecte.

ModifyLibraryAdd Object to Library.

3. Selectai obiectul pe care dorii s-l catalogai n bibliotec. 4. Executai clic pe 4. Executai clic pe Window Assets
butonul

(Library).

Remarc. n panoul Assets, subpanoul Library, Dreamweaver MX 2004 creeaz un nou element de bibliotec fr nume (Untitled).

5. Deplasai obiectul selectat n fereastra bibliotecii.

Remarc. Pentru crearea elementului de bibliotec (fr nume) mai putei folosi una din procedurile urmtoare: 9 n meniul local al panoului Assets, categoria Library alegei opiunea New Library

Item;

9 executai clic pe butonul

(New Library Item).

6. Atribuii un nume (semnificativ) elementului de bibliotec. 7. Acionai tasta ENTER.

Remarc. Odat ce elementul a fost catalogat (adugat n bibliotec), o realizare a acestui element este imediat utilizat n pagina curent.

8. Selectai elementul de bibliotec, pe care l-ai catalogat n pagina dumneavoastr i vizualizai informaiile care se afieaz n inspectorul Properties.

Remarc. Src indic numele elementului de bibliotec i calea de acces.

130

Z Fiecare realizare a unui element de bibliotec pe care l-ai creat se afieaz n pagin, colorat n galben. Dac este cazul, putei schimba culoarea galben. Z Pentru a insera ntr-o pagin un element de bibliotec, efectuai urmtoarele operaii:

1.

Executai clic n zona n care dorii s inserai elementul de bibliotec.

2. 3.

n panoul Assets executai clic pe butonul (Library), iar apoi selectai elementul de bibliotec pe care dorii s-l inserai. Inserai elementul de bibliotec (selectat), folosind una din metodele: 9 Executai clic pe butonul . 9 Deschidei meniul local al panoului Assets, iar apoi alegei opiunea Insert. 9 Glisai icon-ul obiectului selectat n document.

4. 1. 2. 3. 4.

nchidei categoria Library.

Z Pentru a modifica un element de bibliotec, efectuai urmtoarele operaii: Afiai catalogul site-ului, via tasta F8. Afiai fereastra elementului de bibliotec Library Item, via folder-ul Library sau panoul Assets. n fereastra Library Item efectuai modificrile corespunztoare. Executai clic pe File Save.

Se afieaz caseta de dialog Update Library Items. Rspundei la ntrebarea Update library items in these files?.

5.

n caseta de dialog Update Library Items, executai clic pe butonul , iar apoi executai clic pe butonul .

Z Pentru a suprima legtura (link-ul) cu elementul de bibliotec, selectai elementul, iar apoi, n inspectorul Properties, executai clic pe butonul . Z Pentru a redenumi un element de bibliotec, efectuai urmtoarele operaii: n panoul Assets, categoria Library, executai clic pe elementul pe care dorii s-l redenumii; deschidei meniul local, iar apoi executai clic pe Rename. Introducei noul nume al elementului, iar n caseta de dialog Update Files, executai clic pe butonul / .

Z Dac, din greeal, ai ters un element de bibliotec, putei s-l recreai, via inspectorul Properties, butonul .

131

 Modele
Utilizarea modelelor Dreamweaver MX 2004
Un model Dreamweaver este o machet n care nu putei modifica dect anumite regiuni regiuni editabile. Un model Dreamweaver difer de un element de bibliotec prin aceea c modelul reprezint o pagin ntreag, deja formatat. Modelele Dreamweaver sunt gestionate de panoul Assets, categoria Templates. Putei construi un model de la zero sau putei salva o pagin existent ca model.
Z ntr-un model Dreamweaver MX 2004, pot fi inserate urmtoarele tipuri de regiuni (zone): Editable Region (zona poate fi modificat); Optional Region (zona poate fi utilizat sau nu); Repeating Region (zona poate fi repetat); Repeating Table (zona conine un tabel care poate fi modificat).

Crearea unui nou document Dreamweaver existent

cu

ajutorul

unui

model

Z Pentru a crea rapid o pagin deja formatat, putei apela la modelele Dreamweaver MX 2004. Z Dac pagina de demaraj nu este afiat, efectuai urmtoarele operaii: afiai caseta de dialog New Document; executai clic pe una din urmtoarele categorii Page Designs / Page Designs (Accesible) / Template Page; executai clic pe modelul corespunztor. Z Dac pagina de demaraj este afiat, n categoria Create from Sample, executai clic pe categoria de model de pagin corespunztoare, iar apoi n caseta de dialog care se afieaz, selectai modelul pe care dorii s-l creai.

Crearea unui model personalizat

132

Dac modelele oferite de Dreamweaver MX 2004 nu v satisfac, sau nu dorii s realizai toate paginile site-ului cu un tip de formatare definit, soluia este aceea de a crea un nou model pe care apoi s-l aplicai paginilor din site-ul dumneavoastr.

Z Pentru a crea un model personalizat, folosii una din metodele prezentate n detaliu n figura 11.

Figura 11

Meniul File

Bara Insert, categoria Common

1. Creai o pagin Web care v va servi ca model, sau deschidei o pagin deja
creat care v va servi ca model.

2. Executai clic pe FileSave As

Template

2. n bara Insert, categoria Common,

executai clic pe butonul .

Remarc. Se deschide caseta de dialog Save As Template.

3. n caseta de dialog Save As Template, efectuai urmtoarele operaii: 3.1. n zona Site, selectai n meniul derulant, site-ul n care dorii s salvai
modelul de pagin.

3.2. n zona Save as introducei numele modelului. 3.3. Executai clic pe butonul .

4. Afiai panoul Assets, via WindowAssets. 5. n panoul Assets, executai clic pe butonul

(Templates).

Remarc. Reinei extensia .dwt pentru Dreamweaver template.

"______________________________________________________________
_________________________________________________________________

133

Inserarea unei regiuni editabile

Cnd creai un model, totul este ... ngheat! n consecin, va trebui s creai regiuni editabile pe care s le modificai atunci cnd, pornind de la un model, vei crea un nou document.
Z Pentru a insera regiuni editabile ntr-un model, folosii una din metodele prezentate n figura 12.

Figura 12

Meniul Insert

Bara Insert, categoria Common

1. n panoul Assets, executai clic pe categoria (Templates). 2. n panoul Assets, categoria Templates executai dublu clic pe numele
modelului, pentru a-l deschide.

InsertTemplate ObjectsEditable executai clic pe butonul Region.

i alegei
Remarc. Se afieaz caseta de dialog New Editable Region.

3. Selectai prima regiune editabil. 4. Executai clic pe 4. n bara Insert, categoria Common,
(Template)
.

5. n caseta de dialog New Editable Region, executai urmtoarele operaii: 5.1. n zona Name introducei numele primei zone editabile. 5.2. Executai clic pe butonul .

Remarc. Dreamweaver MX 2004 adaug modelului o regiune editabil; o caset bleu indic numele su.

134 6. Repetai paii 3, 4, 5 pentru a defini celelalte regiuni editabile. 7. Salvai modelul (via FileSave sau Ctrl+S).

Z Pentru a accesa rapid una sau mai multe regiuni editabile, executai clic pe Modify Templates regiunea editabil. Z Pentru a suprima o regiune editabil, executai clic pe Modify Templates Remove Template Markup. Z Pentru a crea un document pornind de la un model care conine regiuni editabile, efectuai urmtoarele operaii: n subpanoul Templates (File New) selectai site-ul care conine modelul corespunztor; selectai modelul care urmeaz s fie utilizat; activai opiunea Update page when template changes; executai clic pe butonul (figura 13).

Figura 13

Z Pentru a introduce informaiile corespunztoare n regiunile editabile ale unui document, folosii una din urmtoarele metode: 9 Selectai sau executai clic n regiunea editabil, iar apoi introduceti informaiile respective. 9 Executai clic pe numele regiunii editabile (via Modify Templates), iar apoi introducei informaiile corespunztoare. Z Ca i n cazul elementelor de bibliotec, putei modifica un model, via panoul

135

Assets categoria Templates butonul

(Edit).

Z Pentru a redenumi un model, folosii panoul Assets, categoria Templates, comanda Rename din meniul local.

Modify Templates Detach from template.

Z Pentru a suprima legtura dintre model i document(e), executai clic pe

Z Pentru a suprima un model, selectai modelul pe care dorii s-l tergei (via panoul Assets categoria Templates), iar apoi executai clic pe butonul (Delete).

Inserarea unei regiuni facultative

ntr-un model, o regiune facultativ este o regiune pe care o putei programa astfel nct ea s apar sau nu ntr-un document bazat pe acest model.
Z Pentru a insera una sau mai multe regiuni facultative ntr-un model, folosii una din metodele prezentate n figura 14.

Figura 14

Meniul Insert

Bara Insert, categoria Common

InsertTemplate ObjectsOptional Region.

1. Executai clic pe

1. Executai clic pe
.

(Templates)

Remarc. Se afieaz caseta de dialog New Optional Region.

2. n caseta de dialog New Optional Region, categoria Basic, efectuai urmtoarele operaii: 2.1. n zona Name, introducei un cuvnt cheie (variabil) care corespunde regiunii facultative. 2.2. Activai sau nu opiunea Show by default. 2.3. Executai clic pe butonul . 136

"______________________________________________________________
_________________________________________________________________ _________________________________________________________________

3. Inserai un obiect, n aceast regiune facultativ. 4. Modificai parametrii regiunii facultative, via inspectorul Properties butonul
Modify.

Inserarea unei regiuni repetabile

O regiune repetabil permite definirea unei regiuni editabile care va putea fi repetat n cadrul modelului.
Z Pentru a crea o regiune repetabil, folosii una din metodele prezentate n figura 15.

Figura 15

Meniul Insert

Bara Insert, categoria Common

Template Objects Repeating Region.

1. Deschidei modelul. 2. Selectai regiunea repetabil. 3. Executai clic pe Insert

3. n bara Insert, categoria Common,

executai clic pe .

(Templates)

Remarc. Se deschide caseta de dialog New Repeating Region.

4. n caseta de dialog New Repeating Region, efectuai operaiile urmtoare: 4.1. n zona Name, introducei numele regiunii repetabile. 4.2. Executai clic pe butonul .

137

5. Salvai modelul.
Inserarea unui tabel repetabil
n general, o regiune repetabil este utilizat pentru tabele. Dreamweaver MX 2004 permite crearea unui tabel repetabil, al crui numr de linii poate fi precizat.
Z Pentru a insera un tabel repetabil, folosii una din metodele prezentate n figura 16.

Figura 16

Meniul Insert

Bara Insert, categoria Common

ObjectsRepeating Table.

1. Creai un nou model. 2. Executai clic pe Insert Template 2. n bara Insert, categoria Common,
executai clic pe butonul

(Templates)
Remarc. Se deschide caseta de dialog Insert Repeating Table.

3. Completai parametrii tabelului, iar apoi executai clic pe butonul

.

4. Salvai mdelul. 138

Z Pentru a utiliza un model care conine un tabel repetabil, efectuai urmtoarele operaii:

1. 2.

Creai un nou document bazat pe modelul respectiv. Utilizai butoanele i pentru adugarea i suprimarea liniilor repetabile i butoanele i pentru sortarea lor.

13

Limbajul Java Script i Dreamweaver MX 2004

yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy n acest capitol: Interesul pentru limbajul Java Script Terminologia limbajului Java Script Bazele limbajului Java Script DOM (Document Object Model) yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy

Interesul pentru limbajul Java Script

Z Java Script este limbajul favorit al creatorilor de site-uri Web. Z Java Script este un limbaj uor de nvat. Z Java Script este un limbaj care poate fi interpretat de ctre browser-e. Z Script-urile Java Script pot fi incluse direct n documentele (X)HTML.

Terminologia limbajului Java Script

Pentru a putea lucra cu limbajul Java Script, va trebui s v familiarizai cu termenii i conceptele acestui limbaj de script: obiect, proprietate, metod, instruciune, funcie, evenimente, gestionar de evenimente, variabil.

Z Obiect: entitate cu parte ntreag. Tipuri de obiecte Java Script obiecte interne, furnizate de limbajul Java Script; obiecte personalizate, create de ctre utilizator n funcie de cerinele script-ului; obiectele navigatorului, care sunt exterioare limbajului Java Script i sunt recunoscute de ctre browser-e.

n limbajul Java Script, obiectele sunt considerate ca substantive.

Z DOM: Document Object Model. Definete obiectele navigatorului n mod ierarhic.

n limbajul Java Script, proprietile sunt considerate ca adjective. Ele se separ de obiect prin punct.

Z Proprietate: descrie un obiect.

139

Z Metod: o funcie care definete un anumit comportament caracteristic al unui obiect. Fiecare obiect posed o colecie de metode, iar fiecare metod aparine cel puin unui obiect.

n limbajul Java Script, metodele sunt considerate ca verbe. Ele se separ de obiect prin punct.
Z Instruciune: o aciune care produce afiarea unui text, modificarea proprietilor unui obiect etc. Z Funcie: un grup de instruciuni tratate ca o singur entitate, sau un obiect care conine cod executabil. Spre deosebire de metode, funciile nu sunt asociate nici unui obiect particular. Z Evenimente: o aciune care se produce n raport cu un obiect (buton, fereastr etc.). Fiecare eveniment este asociat unui obiect. Z Gestionarii de evenimente: indic navigatorului cum s reacioneze atunci cnd se produc diferite evenimente. n general, un gestionar de evenimente ia forma unei funcii Java Script pe care o creai special pentru a prelucra un anume tip de eveniment, dar el poate fi, totodat, o instruciune sau mai multe instruciuni Java Script, care sunt integrate n codul (X)HTML de definire a evenimentului. Pentru a defini un gestionar de evenimente, adugai on la nceputul evenimentului.

onBlur, onChange, onClick, onFocus, onKeyPress, onMouseOver, onMouseOut

sunt exemple de gestionari de evenimente. Z Variabil: reprezint un element fundamental al limbajului Java Script. O variabil poate fi: un numr, un ir de caractere sau un obiect. n limbajul Java Script nu trebuie s specificai tipul variabilelor. Ori de cte ori creai o variabil, valoarea pe care o atribuii determin tipul variabilei. n Java Script, cuvntul cheie var poate servi la declararea unei variabile. Totui, n foarte multe cazuri, putei s-l omitei.

"______________________________________________________________
140
_________________________________________________________________ _________________________________________________________________ _________________________________________________________________

 Bazele limbajului Java Script

Elementele script i noscript
Z Rolul elementului script (<script> cod Java Script </script>) este acela de a defini script-ul care va fi utilizat n documentul (X)HTML. Z Atributele tag-ului <script> (figura 1) sunt: type (indic tipul limbajului de script); language (indic limbajul de script i facultativ versiunea); src (indic URL-ul fiierului extern care conine script-ul).

Figura 1
<script type=text/JavaScript language=JavaScript src=...> Cod Java Script </script> Z Incapacitatea navigatorului de a prelucra un script poate avea trei cauze: fie el nu tie s prelucreze script-urile n general; fie el nu recunoate limbajul desemnat prin atributul type; fie utilizatorul a dezactivat prelucrarea scripturilor. Din acest motiv se utilizeaz elementul <noscript> ... </noscript>, n interiorul cruia putei plasa elementele (X)HTML care vor fi ignorate de ctre navigatoarele capabile s exploateze un script (figura 2).

Figura 2
<script> Cod Java Script </script> <noscript> Ne pare ru c navigatorul dumneavoastr nu recunoate script-urile! </noscript>

Inserarea unui script Java Script cu Dreamweaver MX 2004

ntr-un document (X)HTML un script Java Script poate fi plasat n corpul paginii (ntre <body> i </body>); n antetul paginii (ntre <head> i </head>); ntr-un fiier extern (cu extensia .js); ntr-un gestionar de evenimente.

141

Z Dreamweaver MX 2004 permite inserarea automat a script-urilor ntr-un document (X)HTML. Z Pentru a insera un script Java Script ntr-un document (X)HTML cu Dreamweaver MX 2004 folosii una din metodele prezentate n figura 3:

Figura 3

Meniul Insert

Bara Insert, categoria HTML

1. Executai clic n locul n care dorii s inserai script-ul. 2. Executai clic pe Insert HTML 2. n bara Insert, categoria HTML,
Object Script Script.
selectai butonul
Remarc. Se afieaz caseta de dialog Script.

(Script).

3. n caseta de dialog Script, efectuai urmtoarele operaii: 3.1. n zona Content introducei script-ul. 3.2. Executai clic pe butonul .
Remarc. Elementul <script> ... </script> se insereaz automat n locul pe care lai indicat n documentul HTML.

4. Vizualizai pagina Web ntr-un browser.

Operatorii Java Script
Operatorii sunt simbolurile i identificatorii care reprezint fie modul n care sunt modificate datele, fie modul n care este evaluat o combinaie de expresii. Limbajul Java Script recunoate att operatorii binari, ct i operatorii unari.
Z Principalii operatori Java Script sunt: aritmetici, atribuire plus combinaii; relaionali, logici, condiionali, pentru prelucrarea irurilor. Z Operatorii aritmetici: + (adunare); ++ (incrementare); - (scdere); -(decrementare); * (nmulire); / (mprire); % (modulo). Z Operatorii de atribuire plus combinaii: = (atribuire simpl); += (atribuire cu adunare); -= (atribuire cu scdere); *= (atribuire cu nmulire); /= (atribuire cu mprire); %= (atribuire cu modulo). Z Operatorii relaionali: < (mai mic); <= (mai mic sau egal); > (mai mare); >= (mai mare sau egal); == (egal); != (diferit). Z Operatorii logici: && (AND); || (OR); ^ (SAU exclusiv); ! (NOT). Z Operatorii condiionali: ? (condiie).

142

Z Operatorii pentru prelucrarea irurilor: <; <=; >; >=; ==; != (operatori relaionali) i + (operatorul de concatenare).

Obiectele matematice
Z Obiectele matematice v permit s accesai constante i s executai diferite funcii matematice. Z Obiectele matematice ale limbajului Java Script sunt: Math, Number, Boolean.

E (constanta lui Euler), PI (constanta 3.14), SQRT2 (rdcina ptrat din 2) sunt proprieti ale obiectului Math. pow(), sqrt() sunt metode ale obiectului Math.

Instruciunile limbajului Java Script

Instruciunile limbajului Java Script sunt uor de neles i de aplicat. Ele piloteaz script-ul, permindu-i s ia o ... decizie, s creeze bucle (iteraii) etc.
Z Pentru a programa n limbajul JavaScript, folosii urmtoarele tipuri de instruciuni: 9 9 9 9 9 9 9 iteraii (cicluri) for; for...in; do...while. decizii (selecii) if; if...else; switch. funcii function(); return. declararea unei variabile var. reducerea codului with. revenirea la nceputul unei bucle continue. ieirea forat dintr-o bucl break.

Obiectul String
Z Java Script stocheaz irurile de caractere ca obiecte String. Z Obiectul String se creeaz cu ajutorul constructorului String(). Z Obiectul String poate fi folosit pentru: 9 formatarea irurilor de caractere, cu una din metodele: big(); bold(); italic(); small(); sub(); sup().

143

9 manipularea irurilor de caractere, cu una din metodele: charAt(); indexOf(); toLowerCase(); toUpperCase(); toString().

Obiectul Array
Z Obiectul Array poate fi folosit pentru prelucrarea datelor structurate ntr-o matrice. Z Obiectul Array se creeaz cu ajutorul constructorului Array(). Z n limbajul Java Script, array-urile trebuie s fie declarate nainte de a fi utilizate. Z n limbajul Java Script nu se pot crea array-uri cu mai multe dimensiuni. Pentru a depi aceast restricie, ncepei prin a crea un vector, iar apoi n fiecare element al vectorului, inserai cte un array.

DOM (Document Object Model)

Rolul DOM-ului este acela de a v oferi o interfa simpl i coerent ntre script-urile Java Script i navigatoarele Web.
Z DOM-ul definete evenimentele acestora. obiectele disponibile, proprietile, metodele i

Z nainte de a ncepe s programai n limbajul Java Script, trebuie s acordai atenie ierarhiei obiectelor n cadrul paginii Web (figura 4).

Figura 4
0 1 Anchor Area Applet Form Image Layer Link Plugin 2 3 Button CheckBox FileUpload Hidden Password Radio Reset Submit Select Text Textarea

Document Window Frame History Location Event Style

Option

144

 Obiectul Window
Z Obiectul Window (nivelul 0) se afl n vrful arborescenei. El reprezint fereastra navigatorului n care este afiat obiectul Document. Fiecare fereastr a navigatorului i fiecare cadru au propriul lor obiect Window. Un obiect Window i proprietile sale pot fi atribuite unei variabile Java Script ca orice alt obiect. Z Metodele fundamentale ale obiectului Window sunt: alert(); confirm(); prompt(); open(). i un Z Metoda alert() afieaz o caset de dialog care conine un buton mesaj (figura 5). Apelarea metodei oprete execuia script-ului Java Script pn cnd utilizatorul execut clic pe butonul .

Figura 5

Z Metoda confirm() afieaz o caset de dialog, care conine un mesaj, butoanele i . Dac utilizatorul execut clic pe butonul , , metoda returneaz TRUE. Dac utilizatorul execut clic pe butonul metoda returneaz FALSE (figura 6).

Figura 6

145

Z Metoda prompt() afieaz o caset de dialog, care conine un mesaj, o zon de text pe care o completeaz utilizatorul, butonul i butonul . , atunci valoarea coninut n Dac utilizatorul execut clic pe butonul zona de text este returnat script-ului. Dac utilizatorul execut clic pe butonul , atunci valoarea null este returnat script-ului (valoarea null reprezint nimic sau un obiect vid), figura 7.

Figura 7

Z Metoda open() deschide o nou fereastr a navigatorului i returneaz un obiect Window pentru a o reprezenta. Dac apelai metoda open() fr parametri, vei obine o fereastr vid.

Obiectul Form
Z Obiectul Form (nivelul 2) este un obiect Java Script reprezentat prin perechea de tag-uri (X)HTML: <form> i </form>. Pentru referirea obiectelor Form, folosii numele formularului sau matricea forms. Z Putei utiliza limbajul Java Script pentru validarea unui formular n urmtoarele situaii: 9 construirea formularelor interactive; 9 testarea conformitii datelor introduse de utilizator cu politicile de procedur impuse; 9 testarea prezenei datelor n cmpurile obligatorii ale unui formular. Z Pentru validarea formularelor, folosii, de asemenea (fr efort!), comportamentele din Dreamweaver MX 2004. Utilizarea lor nu necesit cunotine de Java Script.

146

 Obiectul Frame
Z Obiectul Frame (nivelul 1) este un obiect Java Script reprezentat prin perechea de tag-uri (X)HTML: <frame> i </frame>. Acest obiect este echivalent cu un obiect Window atta timp ct el servete la manipularea cadrelor i nu a ferestrelor. Z Pentru referirea obiectelor Frame, folosii numele frame-ului sau matricea frames. Matricea frames conine cte un obiect Window pentru fiecare cadru al paginii. Z Pentru convertirea cadrelor HTML n Java Script, folosii convertizoarele de cadre dedicate (http://www.toulouse-renaissance.net/c_outils/c_convertir.htm).

Obiectul Layer
Z Obiectul Layer (nivelul 2) este un obiect Java Script reprezentat prin perechea de tag-uri (X)HTML: <div> ... </div> sau <layer> ... </layer>. Z Obiectul Layer permite accesarea straturilor n interiorul documentelor (o pagin Web poate conine mai multe straturi care se pot suprapune parial / total).

"______________________________________________________________
_________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________

147

"______________________________________________________________
_________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________

148

14 Publicarea site-ului
yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy n acest capitol: Ultimele etape nainte de publicarea site-ului Publicarea site-ului Referenierea site-urilor Web yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy

Ultimele etape nainte de publicarea site-ului

Dup ce ai reuit s creai un site Web, va trebui s-l facei cunoscut pe net pentru a putea fi accesat de ct mai muli vizitatori. Pentru aceasta, avei mai multe posibiliti: motoarele de cutare, anuarele i tehnica link-urilor. Dar, nainte de publicarea site-ului, va trebui s verificai compatibilitatea site-ului cu diferite navigatoare Internet, s verificai legturile create n cadrul site-ului, s testai tag-urile HTML i accesibilitatea site-ului etc.

Inserarea meta-informaiilor n paginile site-ului

Inserarea cuvintelor cheie
Z Pentru a insera cuvinte cheie ntr-un document, folosii una din urmtoarele metode: 9 Meniul Insert HTML Head Tags Keywords .... 9 Bara Insert categoria HTML butonul (Keywords) ... .

Se afieaz caseta de dialog Keyswords n care urmeaz s tastai lista cuvintelor cheie (nu mai mult de zece!) separate prin virgul.
Inserarea unei descrieri Z Pentru a insera o descriere ntr-un document, folosii una din urmtoarele metode: 9 Meniul Insert HTML Head Tags Description. 9 Bara Insert categoria HTML butonul

149

(Description).

Se afieaz caseta de dialog Description n care urmeaz s introducei un text scurt, care descrie pagina dumneavoastr.
Inserarea tag-urilor <meta> Z Pentru inserarea tag-urilor <meta> (deosebit de utile pentru o cercetare dup: autor, tem, data publicrii), folosii una din urmtoarele metode: 9 Meniul Insert HTML Head Tags Meta.; 9 Bara Insert categoria HTML butonul

(Meta).

Se afieaz caseta de dialog Meta.

navigatoare

Verificarea compatibilitii site-ului cu mai multe

Problema navigatoarelor Internet apare la tag-urile HTML sau la plug-in, mpiedicnd vizitatorii s acceseze integral funciile site-ului pe care l-ai creat. Pentru a evita astfel de surprize, se recomand verificarea site-ului nainte de a-l publica. Dreamweaver MX 2004 v propune o funcie Validation, care testeaz codul HTML al documentelor dumneavoastr, pentru a vedea dac nu conine tag-uri i atribute care nu sunt luate n considerare de ctre navigatoarele int.

Z Pentru verificarea compatibilitii site-ului cu diferite navigatoare, deschidei site-ul (via Files Site), afiai panoul Results (via Window Results), n care activai categoria Target Browser Check. Efectuai clic pe butonul (Action) Settings. Se afieaz caseta de dialog Target Browsers, care conine o list cu ase navigatoare Internet care pot fi testate cu site-ul dumneavoastr.

Verificarea i repararea legturilor

De cele mai multe ori, verificarea legturilor este o activitate lung i dificil. Dreamweaver MX 2004 v propune o verificare integral a legturilor. Se vor controla mai nti legturile defecte ale site-ului, apoi legturile externe, iar, n final, fiierele orfeline.
Z Pentru verificarea legturilor paginilor, efectuai urmtoarele operaii:

150

1. 2. 3.

Afiai panoul Results, via Window Results. n panoul Results, executai clic pe categoria Link Checker. Executai clic pe butonul (figura 1). (Action) i selectai Check Links For Entire Site

Figura 1

Remarci: 9 n panoul Results se afieaz numai legturile defecte. 9 Dreamweaver MX 2004 permite i verificarea doar a unei singure pagini (via

Results butonul

Check Links For Selected Files.

Z Pentru repararea legturilor defecte, efectuai urmtoarele operaii:

1. 2. 3. 4.

Afiai documentul HTML care conine o legtur defect. n panoul Results relansai o verificare, via butonul (Action).

n panoul Results se afieaz legtura defect.

Corectai legtura defect:

3.1. Executai clic pe URL-ul legturii. 3.2. Introducei legtura corect.

Activai tasta ENTER.

Simularea duratei de ncrcare a paginilor

Dreamweaver MX 2004 permite calculul vitezei de ncrcare a paginilor Web n funcie de conexiunea utilizat.

151

Z Pentru a calcula durata de ncrcare a unei pagini, deschidei documentul HTML (exemplu, index.htm) al site-ului i afiai caseta de dialog Preferences, via Edit Preferences. n caseta de dialog Preferences, categoria Status Bar, alegei un debit de conexiune.

Generarea rapoartelor de site

Atunci cnd creai un site Web cu Dreamweaver MX 2004, avei posibilitatea s creai mai multe tipuri de rapoarte care v permit s identificai elementele redundante, elementele vide, documentele fr titlu etc.! Putei crea rapoarte care conin informaii privind lucrul n echip. Putei salva aceste rapoarte, pentru a reveni ori de cte ori este nevoie.
Z Pentru a crea un raport de site, efectuai urmtoarele operaii:

1. 2.

Afiai caseta de dialog Reports, via Site Reports.... n caseta de dialog Reports, efectuai urmtoarele operaii:

2.1. n

2.2. n zona Select reports, alegei tipul de raport HTML. 2.3. Utilizai butonul pentru parametrizarea
opiuni.

meniul derulant Report on, alegei una din opiunile Current Document/Entire Current Local Site/Selected Files in Site/Folder....

diferitelor

2.4. Executai clic pe butonul . 2.5. Utilizai butoanele din stnga panoului:
9 9 9 pentru obinerea mai multor informaii; pentru salvarea raportului; pentru crearea unui nou raport.

Publicarea site-ului 152

Aceast meritat operaie (publicarea site-ului) presupune c v-ai relaionat deja cu un provider Internet de la care ai obinut o adres de cont FTP, login-ul i password-ul.

 Publicarea unui site via FTP

Z Pentru a publica un site prin FTP (File Transfer Protocol), efectuai urmtoarele operaii:

1. 2. 3. 4. 5. 6.

Afiai caseta de dialog Manages Sites, via Site Manages Sites. Selectai site-ul pe care dorii s-l publicai. Executai clic pe butonul Executai clic pe categoria Advanced. Selectai categoria Remote Info. .

Se afieaz caseta de dialog Remote Info.

n caseta de dialog Remote Info, efectuai urmtoarele operaii (figura 2).

Figura 2

153

6.1. n zona FTP host, indicai numele server-ului. 6.2. n zona Host directory, introducei numele site-ului local. 6.3. n zona Login, introducei numele utilizatorului. 6.4. n zona Password, introducei parola, iar apoi activai opiunea Save. 6.5. Dac server-ul este protejat printr-un firewall, activai opiunea Use 6.6. Activai 6.7. Activai
firewall.
opiunea Automatically upload files to server on save dac dorii ca Dreamweaver s ncarce pe server-ul Web toate documentele pe care le salvai. opiunea Enable file check in and check out dac dorii s accesai grupul de lucru.

Mentenana site-ului
Z Este obligatoriu dumneavoastr. s actualizai n mod regulat paginile site-ului

Z Efectuai modificrile corespunztoare, iar apoi publicai noile pagini nlocuindu-le pe cele vechi.

Referenierea site-urilor Web

ansa ca site-ul dumneavoastr s fie accesat, nu ntmpltor, de ct mai muli vizitatori este din ce n ce mai mare dac: nscriei site-ul n ct mai multe motoare i anuare de cercetare; realizai un promo al site-ului, privilegiind linkurile transversale cu alte site-uri; povestii despre site-ul dumneavoastr tuturor prietenilor, colaboratorilor etc.; nu uitai s trecei pe cartea de vizit adresa de Web a site-ului dumneavoastr; utilizai un software de refereniere.

Tehnica link-urilor
Z Pentru a obine o bun refereniere, orice strategie de publicare a unui site trebuie s includ i un plan de publicare a tehnicii link-urilor.

154

Z Tehnica link-urilor s-a conturat i se dezvolt n jurul procedurii folosite de motorul de cutare Google cu privire la referenierea site-urilor Web, aanumitul PageRank. PageRank este o metod foarte sofisticat de clasificare a documentelor Web.

Z n ultimii ani, Google a devenit cel mai folosit motor de cutare din lume, ceea ce ne face i pe noi s asociem n mare msur notorietatea unui site Web cu succesul acestuia pe Google. Z Indexarea cuvintelor / frazelor n motoarele de cutare se realizeaz n mod automat. Motoarele de cutare trimit ctre server-e aa-ziii roboi, care indexeaz toate site-urile la care au acces pe un anumit server. Aceast indexare se face n mod regulat, la intervale de timp prestabilite. Z Pentru o mai bun cutare, dar mai ales pentru a diminua apariia unor pagini construite special pentru a pcli tehnologia de clasificare automat a unui motor de cutare, a fost dezvoltat conceptul de popularitate a link-ului. Z Numrul link-urilor ctre o pagin Web reprezint un criteriu important folosit de motoarele de cutare. O pagin Web este cu att mai important cu ct este refereniat de mai multe alte pagini (exist link-uri ctre aceasta din alte siteuri). PageRank nu se bazeaz pe numrul link-urilor (referinelor) primite de la alte pagini, ci pe importana acestora. Link-urile ctre o pagin sunt clasificate n funcie de importana (rank-ul) paginilor Web care trimit link-ul, care, la rndul lor, sunt clasificate dup acest criteriu. Z Pe baza conceptului de PageRank, importana unei pagini Web (site) este determinat recursiv de importana paginilor de care se leag.

Un link din site-ul cnn.com, un site foarte vizitat i referit ctre site-ul dumneavoastr, va cntri enorm de mult n stabilirea PageRank-ului de ctre Google. Sistemul PageRank este bazat pe structura legturilor dintre toate paginile Web-ului. Cu ct site-ul este mai important (PageRank mare), cu att acesta va fi afiat mai sus printre rezultatele unei cutri la Google, iar acesta este lucrul care ne intereseaz n cea mai mare msur.

Aciuni de promovare a site-urilor

nscrierea n toate cataloagele online importante
Z Prin catalog online nelegem o colecie de referine (link-uri i scurte descrieri) ctre site-urile Web. Aceste referine sunt organizate pe categorii, n general domenii de activitate: Afaceri i Economie, Art i Cultur, Auto, Divertisment, Educaie, Mass-Media etc.

155

Z nscrierea n cataloagele online reprezint, de cele mai multe ori, alegerea categoriei / categoriilor n care site-ul Web se potrivete cel mai bine i completarea unor informaii minimale: descrierea site-ului i adresa Web.

Cu ct adresa site-ului nostru apare de mai multe ori n site-uri importante cum sunt cataloagele online, cu att PageRank-ul site-ului crete. traffic.ro etc.
Z Exemple de cataloage online din Romnia: rol.ro; kappa.ro; bumerang.ro;

Promovarea site-ului n mediul online

Z Urmrind aceeai strategie de link-uri ctre site-ul personal, un rol important n promovarea site-ului n mediul online l au: articolele n site-urile de tiri

online care s refere site-ul; articolele n newsletter-e, n site-uri de specialitate, pe forum-uri de discuie, publicitate prin intermediul banner-elor sau al ad-urilor comerciale etc.

Evitarea link-urilor reciproce

Z Nu este ntotdeauna indicat s execui un link pentru a obine un link. Nu inserai link-uri ctre alte site-uri dect dac aceast operaie are sens.

Obinerea link-urilor de la site-uri care sunt, la rndul lor, bine refereniate

Z Conceptul de popularitate a link-ului ajut la clasificarea pe o poziie inferioar a paginilor care sunt create doar pentru a debusola motoarele de cutare i nu au nici o importan pe Web. Z Pentru a induce n eroare motoarele de cutare, muli webmasteri folosesc n cadrul paginilor o mulime de link-uri de la alte pagini de acelai tip. Aceast tehnic este total neconstructiv i este detectat de motoarele de cutare. Rezultatul descoperirii poate fi, n multe cazuri, chiar excluderea site-ului din lista de rezultate afiate n urma unei cutri.

156

"______________________________________________________________
_________________________________________________________________ _________________________________________________________________ _________________________________________________________________

15

Exemple pentru crearea site-urilor Web cu Dreamweaver MX 2004

yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy n acest capitol: EXEMPLUL 1 Crearea primului site Web cu Dreamweaver MX 2004 EXEMPLUL 2 Crearea i inserarea unui script Java Script, care afieaz o linie EXEMPLUL 3 Crearea i inserarea unui script Java Script, care de text EXEMPLUL 4 Crearea unui Curriculum calculeaz i afieaz aria unui cerc Vitae (modelul comun european de CV) cu ajutorul tabelelor yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy

EXEMPLUL 1

Crearea primului site Web cu Dreamweaver MX 2004

Site-ul pe care v invitm s-l creai n acest studiu de caz este foarte simplu. El conine o pagin Web n care vi se cere s inserai: un text, o imagine i o legtur hipertext ctre site-ul Universitii Petrol-Gaze din Ploieti (www.upgploieti.ro). Pornind de la elementele prezentate n acest studiu de caz, creai noul site, parcurgnd urmtorii pai: Crearea i organizarea site-ului. Definirea parametrilor paginii. Introducerea i formatarea textului:

1. 2. 3. 4. 5.

appearances.

Learn

to

see

beyond

the

Inserarea i formatarea imaginii Petrol-Gaze din Ploieti. Inserarea legturii hipertext.

, care reprezint sigla Universitii

157

Etapa 1. Crearea site-ului

EXERCIIU CREAREA UNUI NOU SITE

Creai un site sub Dreamweaver MX 2004, numit Primul site, n mod local cu metoda elementar (Basic).

MENIUL SITE, MANAGE SITES..., NEW, SITE 1.

n meniul Site executai clic pe

Manage Sites... New Site.

Remarc. Se afieaz caseta de dialog Site Definition for....

2. 158 3.

n caseta de dialog Site Definition for... activai zona Basic (modul Basic cere mai puine informaii tehnice dect modul Advanced). Tastai numele site-ului Primul site, iar apoi executai clic pe butonul .

4.

n caseta de dialog urmtoare, activai butonul radio No (Do

apoi executai clic pe butonul .

you want to work with a server technology such as ColdFusion, ASP.NET, ASP, JSP or PHP?), iar

5.

n noua fereastr, activai primul buton radio, iar apoi executai clic pe butonul (folder) pentru a selecta folder-ul rdcin local (D:\Primul site\). Dac acest folder nu a fost creat, putei s-l creai n acest moment. Executai clic pe butonul .

159

6.

n meniul derulant din caseta de dialog urmtoare, alegei None, iar apoi executai clic pe butonul .

Remarc. Dreamweaver MX 2004 afieaz un rezumat al tuturor parametrilor site-ului dumneavoastr.

7.

Executai clic pe butonul

160

Etapa 2. Organizarea site-ului: crearea folderelor i a fiierelor

EXERCIIU CREAREA FOLDERELOR

Creai folderele html i imagini.

PANOUL FILES, NEW FOLDER 1.

n panoul Files, executai clic cu butonul din dreapta al mouseului pe site-ul Primul site. n meniul contextual, executai clic pe New Folder.

2. 3.

nlocuii untitled cu html. Repetai paii

1 i 2 pentru a crea folder-ul imagini.

161

EXERCIIU
FIIERULUI INDEX.HTM FIIERULUI UPGPLOIESTI.GIF

CREAREA

SALVAREA

Creai n folder-ul html, fiierul index.htm (pagina de index a site-ului), iar n folder-ul imagini salvai fiierul UPGPoiesti.gif (sigla Universitii Petrol-Gaze din Ploieti).

NEW FILE 1. 2. 3.
Executai clic cu butonul din dreapta al mouse-ului pe folder-ul html, iar apoi executai clic pe New file. Tastai numele fiierului, index.htm. Salvai imaginea care reprezint sigla Universitii Petrol-Gaze din Ploieti n folder-ul imagini sub numele UPGPloiesti.gif.

Remarci: 9 Observai structura arborescent a celor dou foldere. 9 Pentru moment, pagina dumneavoastr Web nu conine nimic, tot ceea ce am realizat a fost organizarea site-ului n foldere i n fiiere. 9 Urmeaz ca n etapele urmtoare s v preocupai de inserarea elementelor paginii.

162

"______________________________________________________________
_________________________________________________________________ _________________________________________________________________ _________________________________________________________________

Etapa 3. Definirea parametrilor paginii

EXERCIIU PARAMETRIZAREA PAGINII

Folosii categoria Appearance (caseta de dialog Page Properties) pentru a definii urmtorii parametri ai paginii index.htm: 9 Page font: Verdana, Arial; 9 Size: 24 pixels; 9 Background: #FFFF00.

MENIUL MODIFY, PAGE PROPERTIES, CATEGORIA APPEARANCE 1. 2. 3. 4.

Deschidei documentul index.htm via Window Files. n pagina index.htm executai clic pe butonul . Afiai caseta de dialog Page Properties, via Meniul ModifyPage

Properties.

n caseta de dialog Page Properties, categoria Appearance definii parametrii paginii.

163

EXERCIIU ATRIBUIREA UNUI TITLU PAGINII

Atribuii paginii dumneavoastr (index.htm) titlul: Universitate. Folosii una din metodele: Page Properties / Bara de instrumente ale

documentului / Codul surs HTML.

PAGE PROPERTIES, CATEGORIA TITLE/ENCODING (1) 1. 2.

n caseta de dialog Page Properties, executai clic pe categoria

Title/Encoding.

n zona Title introducei: Universitate.

164
Remarc. Titlul paginii se afieaz n bara de titlu a navigatorului.

BARA DE INSTRUMENTE (2) 1. 2.

Executai clic pe View Toolbar Document (dac toolbar-ul nu este afiat). n cmpul Title introducei: Universitate.

CODUL SURS HTML (3) 1. 2.

Executai clic pe butonul . n elementul <title> din seciunea <head> nlocuii Untitled Document cu Universitate.

Cod surs
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-2"> <title>Universitate</title> <style type="text/css"> <!-body,td,th { font-family: Arial, Helvetica, sans-serif; font-size: 24px; } body { background-color: #FFFF00; } --> </style></head> <body> </body> </html>

165

Etapa 4. Introducerea i formatarea textului

EXERCIIU INTRODUCEREA UNUI TEXT

Introducei n documentul index.htm, de la tastatur textul: Learn to see beyond the appearances.

BARA INSERT, CATEGORIA TEXT, BUTONUL 1. 2.

Executai clic n fereastra documentului index.htm. Introducei de la tastatur textul:

Learn to see appearances.

beyond

the

Etapa 5. Inserarea i formatarea imaginii

EXERCIIU INSERAREA I FORMATAREA UNEI IMAGINI 166

Inserai imediat dup text, din folderul imagini, imaginea UPGPloiesti.gif.

MENIUL INSERT, COMANDA IMAGE 1. 2. 3. 4.

Executai clic n locul n care dorii s inserai imaginea (imediat dup linia de text inserat). Acionai tasta Enter. n meniul Insert executai clic pe comanda Image.

Remarc. Se afieaz caseta de dialog Select Image Source.

n caseta de dialog Select Image Source, selectai folder-ul imagini, iar apoi executai clic pe fiierul UPGPloiesti.gif. Executai clic pe butonul .

5.

Centrai imaginea pentru a mbunti modul de prezentare.

5.1 5.2

Selectai imaginea. n inspectorul Properties, executai clic pe butonul

(Center).

167

6.

Vizualizai pagina Web ntr-un browser.

Etapa 6. Inserarea legturii hipertext

EXERCIIU TRANSFORMAREA UNEI IMAGINI NTR-O LEGTUR

HIPERTEXT
Atribuii imaginii inserate legtura hipertext: http://www.upg-ploiesti.ro.

INSPECTORUL PROPERTIES 1. 2.
Selectai imaginea. inspectorul Properties, n zona Link introducei adresa Web: http://www.upg-ploiesti.ro. n

168 3. 4.

Salvai pagina Web (prima dumneavoastr pagin Web!) via File Save. Analizai codul HTML generat.

Cod surs
<p align="center"> <a href="http://www.upg-ploiesti.ro"><img src="../imagini/UPGPloiesti.gif" width="81" height="77" border="0"></a> </p>

5.

n panoul Files, n zona Site vizualizai structura primului dumneavoastr site.

6.

Vizualizai pagina Web ntr-un browser.

7.

Testai legtura hipertext pe care ai creat-o.

169

EXEMPLUL 2

Crearea i inserarea unui script Java Script, care afieaz o linie de text

n acest exemplu, vom crea o pagin Web, cu ajutorul unui script Java Script, care afieaz cursiv (italic) o linie de text: Viaa este grea, dar noroc c este

scurt!

Etapa 1. Crearea i organizarea site-ului

EXERCIIU CREAREA I ORGANIZAREA UNUI NOU SITE

Creai un nou site sub Dreamweaver MX 2004, cu numele EXEMPLUL 2, compus din folder-ul html. n folder-ul html, creai fiierul index.htm.

METODA BASIC, PANOUL FILES, NEW FOLDER

n figura alturat se prezint panoul Files i structura arborescent a site-ului (EXEMPLUL 2).

170

Etapa 2. Definirea parametrilor paginii

EXERCIIU PARAMETRIZAREA PAGINII

Definii urmtorii parametri ai paginii index.htm: Title: script2; Page font: Verdana, Arial; Background: #00FFFF.

METODA MODIFY, PAGE PROPERTIES 1. 2. 3.

Deschidei documentul index.htm. Afiai caseta de dialog Page Properties. Definii parametrii paginii cu ajutorul categoriilor Appearance i Title Encoding.

171

Etapa 3. Inserarea script-ului Java Script, care afieaz o linie de text

Varianta 1

EXERCIIU INSERAREA UNUI SCRIPT JAVA SCRIPT (1)

S se insereze un script Java Script n corpul paginii index.htm, care afieaz cursiv (italic) linia de text: Viaa este grea, dar noroc c este scurt!.

172

BARA INSERT, CATEGORIA HTML, BUTONUL

(SCRIPT)

1. 2. 3.

Executai clic n fereastra de cod HTML a documentului index.htm, ntre <body> i </body>. n bara Insert, categoria HTML, executai clic pe butonul (Script). n caseta de dialog Script, n zona Contents, introducei urmtorul cod Java Script (figura 4):

Cod surs
document.write(<i>Viaa este grea, dar noroc c este scurt!</i>);

Varianta 2

EXERCIIU INSERAREA UNUI SCRIPT JAVA SCRIPT (2)

S se insereze un script Java Script n antet-ul paginii index.htm, care afieaz cursiv (italic) linia de text: Viaa este grea, dar noroc c este scurt!.

BARA INSERT, CATEGORIA HTML, BUTONUL 1.

(SCRIPT)

Inserai un script Java Script, n antet-ul documentului, care conine funcia de afiare a liniei de text (afiare()), via bara Insert, categoria HTML, butonul (Script).

Cod surs
function afiare() { document.write(<I>Viaa este grea, dar noroc c este scurt!</I>); }

173

2.

Inserai un script Java Script, n corpul documentului, care conine instruciunea de apelare a funciei afiare(), via bara Insert, categoria HTML, butonul (Script).

Cod surs
afiare();

3.

Afiai documentul HTML complet.

Cod surs
<html> <head> <title>script2</title> <script> function afiare() { document.write(<I>Viaa este grea, dar noroc c este scurt!</I>); } </script> </head> <body> <script> afiare(); </script> </body> </html>

4.

Vizualizai pagina Web ntr-un browser.

174

 Varianta 3

EXERCIIU INSERAREA UNUI SCRIPT JAVA SCRIPT (3)

S se insereze un script Java Script ntr-un fiier extern, cu extensia .js, care afieaz cursiv (italic) linia de text: Viaa este grea, dar noroc c este scurt!.

CREAREA UNUI FIIER EXTERN CU EXTENSIA .JS 1.

Creai un fiier extern Java Script: functie1.js.

1.1. Executai clic pe File New. 1.2. n fereastra New Document,

Basic page, iar apoi, n coloana din dreapta, executai clic pe JavaScript.

care se afieaz, selectai categoria

175

1.3. Executai clic pe butonul

Cod surs

pentru a ncepe s introducei codul Java Script al script-ului, linie cu linie.

// JavaScript Document function afisare(){ document.write("<i>Viaa este grea, dar noroc c este scurt!"); }

2. 3.

1.4. Salvai fiierul n folder-ul html.

Inserai script-ul Java Script (functie1.js), n antet-ul documentului, cu meniunea c n tag-ul de nceput <script> va trebui s adugai atributul src=functie1.js. Afiai documentul HTML complet.

Cod surs
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>script2</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script src="functie1.js"> </script> <style type="text/css"> <!-body,td,th { font-family: Verdana, Arial, Helvetica, sans-serif; } body { background-color: #00FFFF; } --> </style></head> <body> <script language="JavaScript" type="text/JavaScript"> afisare(); </script> </body> </html>

176

4.

Vizualizai pagina Web ntr-un browser.

Varianta 4

EXERCIIU INSERAREA UNUI SCRIPT JAVA SCRIPT (4)

S se insereze un script Java Script n antet-ul documentului index.htm, care afieaz cursiv (italic) linia de text: Viaa este grea, dar noroc c

este scurt!. Se va asocia butonului evenimente onClick, care conine funcia afiare().

gestionarul de

ASOCIEREA UNUI GESTIONAR DE EVENIMENTE 1. 2.

Inserai un script Java Script n antet-ul documentului, care conine funcia afiare(), via bara Insert, categoria HTML, butonul (Script). Inspectai codul Java Script pentru butonul .

177

Cod surs
<input type=button value=Mesaj>

3.

Asociai butonului contine funcia afiare().

gestionarul de evenimente onClick, care

Cod surs
<input type=button value=Mesaj onClick=afiare>

4.

Afiai documentul HTML complet.

Cod surs
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>script2</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script src="functie1.js"> </script> <style type="text/css"> <!-body,td,th { font-family: Verdana, Arial, Helvetica, sans-serif; } body { background-color: #00FFFF; } --> </style></head> <body> <input name="Mesaj" type="submit" id="Mesaj" value="Mesaj" onClick="afisare()"> </body> </html>

178

5.

Afiai pagina Web ntr-un browser.

6.

Testai script-ul.

"______________________________________________________________
_________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________

179

EXEMPLUL 3

Crearea i inserarea unui script Java Script, care calculeaz aria unui cerc

n acest exemplu, vom crea o pagin Web, cu ajutorul unui script Java Script, care calculeaz i afieaz aria unui cerc. Raza cercului (valoare) se introduce de la tastatur i se valideaz (valori pozitive) cu ajutorul unui script Java Script.

Pentru calculul ariei cercului se va folosi funcia JavaScript areaOfCircle(Radius), furnizat de Dreamweaver MX 2004.

Etapa 1. Crearea i organizarea site-ului

EXERCIIU CREAREA I ORGANIZAREA UNUI NOU SITE

S se creeze un nou site sub Dreamweaver MX 2004, cu numele EXEMPLUL 3, compus din folder-ul html. n folder-ul html, creai fiierul index.htm.

180

"______________________________________________________________
_________________________________________________________________ _________________________________________________________________

Etapa 2. Definirea parametrilor paginii

EXERCIIU PARAMETRIZAREA PAGINII

Definii urmtorii parametri ai paginii index.htm: Title: script 3; Page font: Verdana, Arial; Background: #99FFFF.

Etapa 3. Inserarea script-ului Java Script de calcul a ariei cercului

EXERCIIU INSERAREA UNUI SCRIPT JAVA SCRIPT

S se insereze un script Java Script n antet-ul paginii index.htm, care conine funcia de calcul a ariei cercului, areaOfCircle(radius).

BARA INSERT, CATEGORIA HTML, BUTONUL 1.

(SCRIPT)

Inserai un script JavaScript n antet-ul documentului index.htm, care conine funcia areaOfCircle(radius).

1.1. Executai 1.2. n

(Script).

clic n fereastra de cod HTML a documentului index.htm, ntre <head> i </head>. bara Insert, categoria HTML, executai clic pe butonul

181

2.

Inserai funcia areaOfCircle(radius).

2.1. Afiai panoul Snippets, via Window Snippets. 2.2. Executai clic pe JavaScript Area of Circle.

Remarc. Dreamweaver MX 2004 a inserat n antet-ul documentului index.htm funcia

areaOfCircle(radius).

Etapa 4. Inserarea script-ului Java Script de validare a razei cercului i de afiare a rezultatelor

EXERCIIU INSERAREA UNUI SCRIPT JAVA SCRIPT 182

S se insereze n corpul documentului index.htm, un script Java Script care citete de la tastatur valoarea razei cercului, verific dac aceasta este pozitiv n caz contrar afieaz un mesaj Raz negativ, iar apoi afieaz aria cercului.

BARA INSERT, CATEGORIA HTML, BUTONUL 1. 2.

(SCRIPT)

Afiai caseta de dialog Script, via bara Insert, categoria HTML, butonul (Script). n caseta de dialog Script, n zona Contents, introducei urmtorul cod JavaScript.

Cod surs
//citeste raza cercului r=parseFloat(prompt("Introducei raza cercului r=",0)); //bucla while pentru validare raz while(r<0) { document.write(r+"&nbsp;&nbsp;"+"Raz negativ"+"<br>"); //citete raza cercului r=parseFloat(prompt("Introducei raza cercului r=",0)); } //afieaz rezultatul document.write("Aria cercului="+areaOfCircle(r));

3.

Afiai codul HTML complet.

Cod surs
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>script 3</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"> <style type="text/css"> <!-body,td,th { font-family: Verdana, Arial, Helvetica, sans-serif; } body { background-color: #99FFFF;

183

} --> </style> <script language="JavaScript" type="text/JavaScript"> function areaOfCircle(radius) { return Math.PI * Math.pow(radius, 2); } </script> </head> <body> <script language="JavaScript" type="text/JavaScript"> //citeste raza cercului r=parseFloat(prompt("Introducei raza cercului r=",0)); //bucla while pentru validare raz while(r<0) { document.write(r+"&nbsp;&nbsp;"+"Raz negativ"+"<br>"); //citete raza cercului r=parseFloat(prompt("Introducei raza cercului r=",0)); } //afieaz rezultatul document.write("Aria cercului="+areaOfCircle(r)); </script> </body> </html>

4.

Vizualizai pagina Web ntr-un browser.

184

"______________________________________________________________
_________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________

185

EXEMPLUL 4

Crearea unui Curriculum Vitae (modelul comun european de CV) cu ajutorul tabelelor

n acest ultim exemplu, v invitm s creai singuri (fr ajutorul nostru!), cu ajutorul tabelelor, un site care s conin CV-ul dumneavoastr (modelul comun european de CV) a crui structur a fost publicat n Monitorul Oficial al Romniei din 13 iulie 2004.

186

"______________________________________________________________

Indicaie. 1 Pornind de la elementele prezentate, creai noul site, parcurgnd urmtorii pai:

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11.

Crearea i organizarea site-ului. Definirea parametrilor paginii. Crearea stilurilor CSS de tip clas (class) n pagina curent. Inserarea unui tabel cu 7 linii i 2 coloane. Formatarea tabelului definirea culorii de background (#9900FF) pentru linia 1, coloana 1 ale tabelului. Completarea primei linii a tabelului (seciunea de titlu) inserarea i formatarea imaginii care reprezint steagul Uniunii Europene; introducerea i formatarea textului Curriculum Vitae; introducerea i formatarea numelui aplicantului; inserarea i formatarea pozei aplicantului. Completarea liniei a doua a tabelului (seciunea Informaii Personale) introducerea i formatarea textului Informaii Personale; crearea i formatarea unui tabel care conine categoriile seciunii (denumire i informaiile corespunztoare). Completarea liniei a treia a tabelului (seciunea Experien Profesional) introducerea i formatarea textului Experien Profesional; crearea i formatarea unui tabel care conine categoriile seciunii (denumire i informaiile corespunztoare). Completarea liniei a patra a tabelului (seciunea Educaie i Formare) introducerea i formatarea textului Educaie i Formare; crearea i formatarea unui tabel care conine categoriile seciunii (denumire i informaiile corespunztoare). Completarea liniei a cincea a tabelului (seciunea Aptitudini i Competene) introducerea i formatarea textului Aptitudini i competene; crearea i formatarea unui tabel care conine categoriile seciunii (denumire i informaiile corespunztoare). Completarea liniei a asea a tabelului (seciunea Informaii Suplimentare) introducerea i formatarea textului Informaii Suplimentare; crearea i formatarea unui tabel care conine categoriile seciunii (denumire i informaiile corespunztoare).

187
Vezi L. Dumitracu, L. Ioni, G. Marcu, Studii de caz i exerciii rezolvate pentru crearea site-urilor WEB cu Dreamweaver MX 2004 (pag. 74-102), Colecia I.N.D.E. Ploieti, Editura Universitii din Ploieti, 2005.
1

12.

Completarea liniei a aptea a tabelului (secinea Anexe) introducerea i formatarea textului Anexe; crearea i formatarea unui tabel care conine categoriile seciunii (denumire i informaiile corespunztoare).

"______________________________________________________________
_________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________ _________________________________________________________________

188

Bibliografie
1. 2. 3. Chistophe Aubry Dreamweaver MX 2004 pour PC / Mac, Editions ENI, Nantes, 2004 Alexandre Boni, Nicolas Stemart, Macromedia Dreamweaver MX 2004, Micro Application, Paris, 2004 Liviu Dumitracu, Liviu Ioni, Gabriel Marcu, Studii de caz i exerciii rezolvate pentru crearea site-urilor Web cu Dreamweaver MX 2004, Colecia I.N.D.E. Ploieti, Editura Universitii din Ploieti, 2005 Liviu Dumitracu, Crearea site-urilor Web cu Dreamweaver MX 2004, Colecia I.N.D.E. Ploieti, Editura Universitii din Ploieti, 2005 Ionu Lambrescu (coordonator) i colectiv, Tehnologii Internet n sprijinul micro-ntreprinderilor, Editura Universitii din Ploieti, 2005 Remy Lentzner, Le guide de la creation des sites internet avec Dreamweaver MX 2004, Editions ESKA Interactive, Paris, 2004

4. 5. 6.

189