Sunteți pe pagina 1din 62

INTRODUCERE

Proiectul intitulat Curs virtual de Dreamweaver, realizat ntr-o combinaie de HTML (HyperText Markup Language) i DHTML(Dynamic HTML) ce reprezint o colecie de pagini Web care pune la dispoziia oricrui utilizator doua funcii importante: I.nvarea programului Dreamweaver 4. II.Crearea de pagini Web cu Dreamweaver 4. nvarea programlui Dreamweaver 4 constitue un avantaj n realizarea mai rapid a paginilor i site-urilor Web. Chiar de la apariia sa Macromedia Dreamweaver a avut un real success la care nimeni nu se atepta. Pentru a folosi Dreamweaver 4 trebuie s nvm limbajul HTML. Cu ajutorul lui Dreamweaver 4 nu mai este necesar s scriem liniile de program deoarece acesta poate doar cu un simplu clic pe pictogram s nregistreze codul n HTML. Dreamweaver este un generator HTML de tip WYSIWYG (What You See Is What You Get). Aceasta nseamn c, dac efectum o modificare pe ecran n interiorul programului, rezultatele acestora vor fi afiate instantaneu. Prin contrast, dac ar fi fost necesar s scriem manual liniile de program n HTML, ar fi trebuit s examinm programul n interiorul unui browser Web pentru a vedea rezultatele. Rspunsul imediat al unui mediu de proiectare mobil, precum Dreamweaver, mrete considerabil fluxul activitii, deoarece putem vedea imediat, n timpul lucrului, dac ne place sau nu rezultatele obinute. Un aspect foarte ludat al Dreamweaver-ului l reprezint arhitectura sa extensibil. Extensiile, aa cum sunt ele cunoscute, sunt mici programe, pe care orice dezvoltator le poate scrie (de obicei n HTML i JavaScript) i pe care le poate descrca i instala, acestea aducnd un spor de performan i funcionalitate mbuntit programului. Exist o comunitate de dezvoltatori care produc extensii i le public (att commercial, ct i gratuit) pentru probleme de dezvoltare web, de la simple efecte rollover pn la soluii complete de vnzare online. Macromedia Dreamweaver este unul dintre softurile acestea care la ora actual este cel mai performant pentru crearea site-urilor Web. Teza dat const din introducere, 3 capitole, concluzie i bibliografie. n capitolul I intilulat Elemente de HTML, JavaScript, DHTML, XMLau fost descries: noiuni generale despre HTML, metode de introducere a JavaScript n pagiba HTML, noiunele generale despre DHTML i XML n captolul II denumit Pachete Macromedia. Descierea Dreamweaver au fost descrise noiunele generale: despre Dreamweaver, setarea preferinelor, utilizarea editoarelor externe, 2

setarea dimensiunelor predefinite ale ferestrelor, metode de gestiune a site-urilor, crearea hrii un nui site, tipurile de legturi i modalitatea de utilizare a lor, etapele de creare a tabelelor HTML. n capitolul III sub denumirea de Aplicaia a fost descris mersul pe pai de creare a unui site cu ajutorul Dreamweaver 4, metodele de inserare a textului, imaginilor, tabelelor i crearea unei legturi hipertext ctre o alta pagin web.

CAPITOLUL.1 Elemente de HTML, JavaScript, DHTML, XML


1.1 HTML
Unul din primele elemente fundamentale ale WWW (World Wide Web) este HTML (Hypertext Markup Language), care descrie formatul primar n care documentele sunt distribuite i vzute pe Web. Multe din trsturile lui, cum ar fi independena fa de platform, structurarea formatrii i legturile hipertext, fac din el un foarte bun format pentru documentele Internet i Web. Primele specificaii de baz ale Web-ului au fost HTML, HTTP i URL. HTML a fost dezvoltat iniial de Tim Berners-Lee la CERN n 1989. HTML a fost vzut ca o posibilitate pentru fizicienii care utilizeaz computere diferite ca ei s poat schimba ntre ei informaii, utiliznd Internetul. Pentru aceasta erau necesare cteva trsturi : independena de platform, posibiliti hypertext i structurarea documentelor. Independena de platform const in faptul c un document poate fi afiat n mod asemntor de computere diferite (cu fonte, grafic i culori diferite ), lucru vital pentru o audien att de variat. Hipertext nseamn ca orice cuvnt, fraz, imagine sau alt element al documentului vzut de un utilizator (client) poate face referin la un alt document, ceea ce uureaz mult navigarea intre multiplele documente sau chiar n interiorul unui i aceluiai document. Structurarea riguroas a documentelor permite convertirea acestora dintr-un format n altul precum i interogarea unor baze de date formate din aceste documente. Standardul oficial HTML este World Wide Web Consortium (W3C), care este aflat la Internet Engineering Task Force (IETF). W3C a enunat cteva versiuni ale specificaiei HTML, printre care HTML 2.0, HTML 3.0, HTML 3.2, HTML 4.0 i cel mai recent, HTML 4.01. n acelai timp, autorii de browsere, cum ar fi Netscape i Microsoft, au dezvoltat adesea propriile "extensii" HTML n afara procesului standard i le-au ncorporat n browserele lor. n unele cazuri, cum ar fi tagul Netscape, aceste extensii au devenit standarde, de fapt adoptate de autorii de browsere. HTML 2.0, elaborat n Iunie 1994, este standardul pe care ar trebui s-l suporte toate browserele curente - inclusiv cele model text. HTML 2.0 reflect concepia original a HTML ca un limbaj de marcare independent de obiectele existente pentru aezarea lor n pagin, n loc de a specifica exact cum ar trebui s arate acestea. Dac dorim s fim siguri c toi vizitatorii vor vedea paginile aa cum trebuie, putem folosi tagurile HTML 2.0.

Specificaia HTML 3.0, enunat n 1995, a ncercat s dezvolt HTML 2.0 prin adugarea unor facilitai precum tabelele i un mai mare control asupra textului din jurul imaginilor. Dei unele din noutile HTML 3.0 erau deja folosite de autorii de browsere, multe nu erau nc cunoscute. n unele cazuri, tagurile asemntoare implementate de autorii de browsere au devenit mai rspndite dect tagurile "oficiale". Specificaia HTML 3.0 acum a expirat, deci nu mai este un standard oficial. n Mai 1996, W3C a scos pe pia specificaia HTML 3.2, care era proiectat s reflecte i s standardizeze practicile acceptate. Deci, HTML 3.2 include tagurile HTML 3.0 ce erau adoptate de autorii de browsere, ca Netscape i Microsoft, plus extensii HTML raspndite. n bilanul asupra HTML, W3C recomand ca providerii de informaii s utilizeze specificaia HTML 3.2. Versiunile curente ale majoritatea browserelor ar trebui s suporte toate, sau aproape toate aceste taguri. La momentul apariiei, HTML 4.0 era deja larg utilizat i au fost deja publicate specificaiile HTML 4.01. Documentele HTML sunt documente n format ASCII i prin urmare pot fi create cu orice editor de texte. Au fost ns dezvoltate editoare specializate care permit editarea ntr-un fel de WYSIWYG. Dei nu se poate vorbi de WYSIWYG atta vreme ct navigatoarele afieaz acelai document oarecum diferit, n funcie de platforma pe care ruleaz. Au fost de asemenea dezvoltate convertoare care permit formatarea HTML a documentelor generate (i formatate) cu alte editoare. Evident conversiile nu pot pstra dect parial formatrile anterioare deoarece limbajul HTML este nc incomplet.

Primii pai, Orice document HTML ncepe cu notaia <html> i se termin cu notaia </html>. Aceste

"chestii" se numesc n literatura de specialitate "TAG-uri". Prin convenie, toate informaiile HTML ncep cu o parantez unghiular deschis " < " i se termin cu o parantez unghiular nchis " > ". Tag-urile ntre aceste paranteze transmit comenzi ctre browser pentru a afia pagina ntr-un anumit mod. Unele blocuri prezint delimitatori de sfrit de bloc, n timp ce pentru alte blocuri acest delimitator este opional sau chiar interzis. ntre cele dou marcaje <html> i </html> vom introduce dou seciuni: seciunea de antet <head>...</head> i corpul documentului <body>...</body>. Blocul <body>...</body> cuprinde coninutul propriu-zis al paginii HTML, adic ceea ce va fi afiat n ferastra browser-ului.

etichet

poate

fi

scris

att

cu

litere

mici,

ct

cu

litere

mari.

Adic <HTML> = <HtmL> = <html>. Caracterele "spaiu" i "CR/LF" ce apar ntre etichete sunt ignorate de ctre browser. l copiem folosind Copy/Paste ntr-un fiier nou i l salvm ca PRIM.HTM sau PRIM.HTML. Apoi pornim Netscape Navigator sau Internet Explorer, dm CTRL-O i introducem calea spre fiier. Dm OK i ... nimic. S nu disperm ... vom aduga primele elemente la pagina noastr. n primul rnd, titlul unei pagini se obine insernd n seciunea <head>...</head> a urmtoarei linii: <title>Aceasta este prima mea pagin de Web</title> n plus, n seciunea <body>...</body> putem scrie texte ct dorim. Dac nu ntlnim nici un marcaj < sau > atunci interpretorul HTML le va lua ca texte simple i le va afia pe ecran. Coninutul blocului <title>...</title> va aprea n bara de titlu a ferestrei browser-ului. Dac acest bloc lipsete ntr-o pagin HTML, atunci n bara de titlu a ferestrei browser-ului va aprea numele fiierului. Dac introducem mai multe linii ntr-o pagin, browser-ul va afia ntr-un singur rnd, ntruct caracterele " CR/LF " sunt ignorate de browser. Trecerea pe o linie nou se face la o comand explicit, care trebuie s apar n pagina html. Aceast comand este marcajul <br> (de la " line break " - ntrerupere de linie).

Culoarea de fond, O culoare poate fi precizat n dou moduri: 1. Printr-un nume de culoare. Sunt disponibile cel puin 16 nume de culori: aqua, black, fuchsia, gray, green lime, maroon, navy, olive, purple, red, silver, teal, white si yellow. 2. Prin construcia " #rrggbb " unde r (red), g (green), sau b (blue) sunt cifre hexazecimale i pot lua valorile: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, A, b, B, c, C, d, D, e, E, f, F; se pot defini astfel 65536 de culori. Culoarea unei pagini se precizeaz prin intermediul unui atribut al etichetei <body>. Culoarea fondului paginii Web se stabilete cu atributul bgcolor al etichetei <body>, de

xemplu: <body bgcolor=culoarea>. Textul afiat este caracterizat de urmatoarele atribute: Marime (size), Culoare (color), Font (style). Acestea sunt atribute ale etichetei <basefont>. Este o etichet singular (far delimitator de sfrit de bloc). <basefont size =numr color=culoare style=font>

unde: numar - poate fi 1, 2, 3, 4, 5, 6 sau 7; ( 1 pentru fontul cel mai mic i 7 pentru fontul cel mai mare); culoare - este o culoare precizat prin nume sau printr-o construcie RGB; font - poate fi un font generic ca "serif ", "san serif", "cursive ", "monospace", "fantasy " sau un font specific instalat pe calculator, ca "Times New Roman", " Helvetica" sau "Arial ". Se accept ca valoare i o list de fonturi separate prin virgul, de exemplu: " Times New Roman, serif, monospace ". Domeniul de valabilitate al caracteristicelor precizate de aceast etichet se ntinde de la locul n care apare eticheta pn la sfritul paginii sau pn la urmataorea etichet <basefont>. Dac acest atribut lipsete atunci textul din pagina Web are atribute prestabilite sau atribute de browseul utilizat. Atributele prestabilite sunt: size=3, color=black, i style ="Times New Roman". Poziionarea coninutului paginii Web fa de marginile ferestrei browserului se poate face cu ajutorul a doua atribute ale etichetei <body>: leftmargin (stabilete distana dintre marginea stng a ferstrei browserului i margine a stng a coninutului paginii); topmargin (stabilete distana dintre marginea de sus a ferstrei browserului i marginea de jos a coninutului paginii);

Stiluri pentru blocurile de text, Pentru ca un bloc de text s apar n pagina evideniat (cu caractere aldine), el trebuie

inclus ntre delimitatorii <b>...</b> (b vine de la "bold" = ndrzne). Pentru ca un text s fie scris cu carcatere mai mari cu o unitate dect cele curente, acesta trebuie inclus ntr-un bloc delimitat de etichetele <big>...</big>. Pentru ca un text s fie scris cu carcatere mai mici cu o unitate dect cele curente, acesta trebuie inclus ntr-un bloc delimitat de etichetele <small>...</small>. Pentru ca un text s fie scris cu carcatere cursive, acesta trebuie inclus ntr-un bloc delimitat de etichetele <i>...</i> (i vine de la italic). Pentru a insera secvene de text aliniate ca indice (sub-script) sau ca exponent (superscript), aceste fragmente trebuie delimitate de etichetele <sub>...</sub>, respectiv

<sup>...</sup>. Pentru a insera un bloc de caractere subliniate se utilizeaz etichetele <u>...</u> (u vine de la underline).

Pentru a insera un bloc de caractere subliniate se utilizeaz etichetele <strike>...</strike> sau <s>...</s>.

Fonturi, Un font este caracterizat de urmatoarele atribute:

a) culoare (stabilit prin atributul color); b) tipul sau stilul (stabilit prin atributul face); c) marimea (definit prin atributul size); d) marimea in puncte tipografice (stabilit prin atributul point-size); e) grosime (definit prin atributul weight). Toate aceste atribute aparin etichetei, care permite nserarea de blocuri de texte personalizate.

Culori, O culoare poate fi precizat n dou moduri:

a) printr-un nume de culoare; b) printr-o constant conform standardului de culoare RGB (Red, Green, Blue). O astfel de constant se formeaz astfel: #rrggbb, unde r, g i b sunt cifre hexazecimale.

Culoarea fontului Pentru a scrie un fragment de text cu caractere de o anumita culoare se ncadreaz acest

fragment ntre delimitatori avnd stabilit atributul color la valoarea necesar. Mrimea fontului, Pentru a stabili mrimea unui font se utilizeaz atributul size al etichetei. Valorile acestui atribut pot fi: a) 1, 2, 3, 4, 5, 6, 7 (1 pentru cel mai mic font i 7 pentru cel mai mare); b) +1, +2, etc. pentru a mri dimensiunea fontului cu 1, 2, unit. fa de valoarea curent; c) -1, -2, etc. pentru a micora dimensiunea fontului cu 1, 2, unit. fa de valoarea curent. Mrimea unui font poate fi stabilit exact cu ajutorul atributului point-size. Valorile acceptate de acest atribut pot fi orice numere naturale pozitive. Numrul astfel precizat reprezint mrimea fontului n puncte tipografice.

Grosimea unui font, Grosimea unui caracter poate fi definit cu ajutorul atributului weight al etichetei. Valorile posibile pentru acest atribut sunt 100, 200, 300, 400, 500, 600, 700, 800 i 900

(100 pentru fontul cel mai subire i 900 pentru cel mai gros).

Blocuri de text, Aceste etichete nu se refer la particularitiile caracterelor ce compun textul, ci la

funciile pe care le poate avea un bloc de text n cadrul paginii Web. Toate aceste etichete produc automat trecerea la un rnd nou i adugarea unui spaiu suplimentar.

Editarea unui bloc, Pentru ca un bloc de text s fie editat (marginea din stnga textului s fie deplasat la

dreapta la o anumit distan fa de marginea paginii), acesta trebuie inclus ntre etichetele <blockquote>...</blockquote>.

Imagini Imaginile sunt stocate n fiiere cu diverse formate. Formatul acceptat de browsere pentru

fisierele imagine sunt: GIF (Graphics Interchange Format) cu extensia .gif; JPEG (Joint Photographic Experts Group) cu extensia .jpeg sau .jpg; XPM (X PixMap) cu extensia .xmp; XBM (X BitMap) cu extensia .xbm; BMP (BitMap) cu extensia .bmp (numai cu Internet Explorer); TIFF (Tagged Image File Format) cu extensia .tif sau .tiff;

Imagini pentru fondul unei pagini, O imagine poate fi utilizat pentru a stabili fondul unei pagini Web. n acest scop se

folosete atributul background al etichetei <body>, avnd ca valoare adresa URL a imaginii. Imaginea se multiplic pe orizontala i pe vertical pn umple ntregul ecran. Imagini folosite ca legturi O legatur (link) introduce n pagina Web o zon activ. Efectuand click cu butonul mouse-ului pe aceast zon n browser se va ncrca o alt pagin.

Pentru a utiliza imaginea "ubm1.jpg" drept legatur ctre pagina index.html utilizm sintaxa: <a href ="index.html"><img src= "../../images/ubm1.jpg "></a> Utilizri speciale ale imaginilor Imaginile pot fi utilizate pentru a obine efecte deosebite ntr -o pagin web. Printre aceste utilizri speciale putem enumera: a.Linii orizontale formate cu ajutorul imaginilor. b.Simboluri speciale pentru elementele unei liste neordonate. Legturi, Legturile (link-urile) reprezint partea cea mai important a unei pagini Web. Ele transform un text obinuit n hipertext sau hiperlegtur, care permite trecerea rapid de la o informaie aflat pe un anumit server la alt informaie memorat pe un alt server aflat oriunde n lume. Legturile sunt zone active ntr-o pagin Web, adic zone de pe ecran sensibile la apsarea butonului stng al mouse-ului.

Ancore ntr-o pagin foarte lung pot exista puncte de reper ctre care se definesc legturi. O ancor se definete de asemenea prin eticheta <a>. Pentru a defini ancora se utilizeaz

atributul name care primete ca valoare un nume atribuit ancorei (de exemplu "leg1"). Pentru a insera o legatur ctre "leg1" definit n aceeai pagin se utilizeaz eticheta <a> avnd atributul href de valoarea #leg1. Pentru a introduce o legatur ctre o ancor definit n alt document (alt pagin) aflat n acelai director, atributul href primete o valoare de forma "nume_fiier.html#nume_ancor".

Legturi ctre fiiere de sunet

Sunetele pot fi stocate in fiiere n diverse formate: a) AU/m-law cu extensia .au; b) AIFF/AIFC cu extensiile .aiff, .aif; c) WAVE/WAV cu extensia .wav; d) MPEG Audio cu extensia .mpeg2, sau .mp2; e) MIDI cu extensia .mid sau .midi; 10

O legatur ctre un fiier de sunet se realizeaz folosind eticheta <a> destinat legaturilor ctre orice tip de fiiere, unde atributul href va avea valoarea egal cu adresa URL a fiierului de sunet. De exemplu: <a href="numefiier.au">Link catre fiierul de sunet</a> Legturi ctre fiiere videoclipuri, Videoclipurile sunt stocate n fiiere diverse formate. Formatele i extensiile corespunaztoare pentru fiierele utilizabile n paginile Web sunt urmatoarele: a) MPEG cu extensia .mpeg sau mpg; b) QuickTime cu extensia .mov; c) AVI cu extensia .avi. O legatur ctre un fiier de sunet se realizeaz folosind eticheta <a> destinat legturilor ctre orice tip de fiiere, unde atributul href va avea valoarea egal cu adresa URL a fiierului videoclip. De exemplu: <a href="numefiier.avi">Link catre fiierul videoclip</a>

Liste, Unul din cele mai obinuite elemente din documentele cu mai multe pagini este un set de

definiii, referine sau indexuri. Glosarele sunt exemple clasice n acest sens; cuvintele sunt listate n ordine alfabetic, urmate de definiii ale termenilor respectivi. n HTML, ntreaga seciune a unui glosar va fi gestionat printr-o list de definii, care este inclus ntr-o pereche de marcaje de list de definiii: <dl>...</dl> (de la "definition list" = list de definiii).

Liste neordonate O list neordonat este un bloc de text delimitat de etichetele corespondente <ul>...</ul>

(ul vine de la unordered list = list neordonat). Fiecare element al listei este iniiat de eticheta <li> (list item). Lista va fi identic fa de restul paginii Web i fiecare element al listei ncepe pe un rnd nou. Tag-urile <ul> i <li> pot avea un atribut type care stabolete caracterul afiat n faa fiecrui element al listei. Valorile posibile al acestui atribut sunt: "circle" (cerc) "disc" (disc plin) (valoarea prestabilita); "square" (patrat)

11

Liste ordonate, O list ordonat de elemente este un bloc de text delimitat de etichetele co respondente

<ol>...</ol> (ol vine de la ordered list= list ordonat). Fiecare element al listei este iniiat de eticheta <li> (list item). Lista va fi identic fa de restul paginii Web i fiecare element al listei ncepe pe un rnd nou. Tag-urile <ol> si <li> pot avea un atribut type care stabilete tipul de caractere utilizate pentru ordonarea listei. Valorile posibile sunt: " A " pentru ordonare de tipul A , B , C , D etc. (litere mari); " a " pentru ordonare de tipul a , b , c , d etc. (litere mici); " I " pentru ordonare de tipul I , II , III , IV etc. (cifre romane mari); " i " pentru ordonare de tipul i , ii , iii , iv etc. (cifre romane mici); " 1 " pentru ordonare de tipul 1 , 2 , 3 , 4 etc. ( cifre arabe - opiune prestabilit ); Tag-ul <ol> poate avea un atribut start care stabilete valoarea iniial a secvenei de ordonare.Valoarea acestui atribut trebuie s fie un numr ntreg pozitiv. Tag-ul <li> poate avea un atribut value care satilete valoare pentru elementul respectiv al listei. Valoarea acestui atribut trebuie s fie un numr ntreg pozitiv. O list de meniuri este un bloc delimitat de etichete corespondente <menu>...</menu>. Fiecare element al listei este iniiat de eticheta <li> (list item). Cele mai multe browsere afieaz lista de meniuri ca pe o list neordonat. O list de directoare este un bloc delimitat de etichete corespondente <dir>...</dir> (de la director). Fiecare element al listei este iniiat de eticheta <li> (list item). Cele mai multe browsere afieaz lista de directoare ca pe o list neordonat.

Tabele
Tabelele ne permit s crem o reea dreptunghiular de domenii, fiecare domeniu avnd propriile opiuni pentru culoarea fondului, culoarea textului, alinierea textului etc. Un tabel este format din rnduri. Pentru a insera un rnd ntr-un tabel se folosesc etichetele (de la " table row "= rand de tabel).Folosirea etichetei de sfrit este opional. Un rnd este format din mai multe celule ce conin date. In mod prestabilit, un tabel nu are chenar. pentru a aduga un chenar unui tabel, se utilizeaz un atribut al etichetei numit border. Acest atribut poate primi ca valoare orice numar ntreg (inclusiv 0) i reprezint grosimea n pixeli a chenarului tabelului.

12

Dac atributul border nu este urmat de o valoare atunci tabelul va avea o grosime prestabilit egal cu 1 pixel, o valoare egal cu 0 a grosimii semnific absena chenarului. Cnd atributul border are o valoare nenul chenarul unui tabel are un aspect tridimensional.

Definirea culorilor de fond pentru un table Culoarea de fond se stabilete cu ajutorul atributului bgcolor, care poate fi atasat

intregului tabel prin eticheta unei linii sau celule de date. Valorile pe care le poate primi bgcolor sunt cele cunoscute pentru o culoare. Ferestre n HTML, Ferestrele sau (cadrele) ne permit s definim n fereastra browserului subferstre n care s fie ncrcate documente HTML diferite.Ferestrele sunt definite ntr-un fiier HTML special , n care blocul <body>...</body> este nlocuit de blocul <frameset>...</frameset>. n interiorul acestui bloc, fiecare cadru este introdus prin eticheta <frame>. Un atribut obligatoriu al etichetei <frame> este src, care primete ca valoare adresa URL a documentului HTML care va fi ncarcat n acel frame. Definirea cadrelor se face prin mparirea ferestrelor (i a subferestrelor) n linii i coloane: mprirea unei ferestre ntr-un numr de subferestre de tip coloan se face cu ajutorul atributului cols al etichetei <frameset> ce descrie acea fereastr; mparirea unei ferestre ntr-un numr de subferestre de tip linie se face cu ajutorul atributului rows al etichetei <frameset> ce descrie acea fereastr; valoare atributelor cols si rows este o list de elmente separate prin virgul , care descriu modul n care se face mprirea.

Formulare , Un formular este un ansamblu de zone active alctuit din butoane, casete de selecie,

cmpuri de editare etc. Formularele v asigur construirea unori pagini Web care permit utilizatorilor s introduc efectiv informaii i s le transmit serverului. Formularele pot varia de la o simpl caset de text, pentru introducerea unui ir de caractere pe post de cheie de cutare - element caracteristic tuturor motoarelor de cutare din Web - pn la o structur complex, cu multiple seciuni ,care ofer facilitai puternice de transmisie a datelor. Un formular este definit ntr-un bloc delimitat de etichetele corespondente <form> i </form>. 13

Butonul Reset, Dac un element de tip <input> are atributul type configurat la valoarea "reset" ,atunci n

formular se introduce un buton pe care scrie "Reset". La apasarea acestui buton ,toate elementele din formular primesc valorile prestabilite (definit odat cu formularul), chiar dac aceste valori au fost modificate de utilizator. Un buton Reset poate primi un nume cu ajutorul atributului name si o valoare printr-un atribut value. Un asemenea buton afiseaza textul "Reset" dac atributul value lipsete, respectiv valoarea acestui atribut n caz contrar.

Butoane radio, Butoanele radio permit alegerea ,la un moment dat, a unei singure variante din mai multe

posibile. Butoanele radio se introduc prin eticheta <input> cu atributul type avnd valoarea "radio". La expedierea formularului se va transmite una dintre perechile "sex=b" sau "sex=f", n funcie de alegerea facut de utilizator.

Butoane, ntr-un formular pot fi afiate butoane. Cnd utilizatorul apas un buton, se lanseaz n

execuie o funcie de tratare a acestui eveniment. Limbajul HTML nu permite scrierea unor astfel de funcii (acest lucru este posibil dac se utilizeaz limbajele JavaScript sau Java). Pentru a insera un buton ntr-un formular, se utilizeaz eticheta <input> avnd atributul type configurat la valoarea "button". Alte doua atribute ale elementului "button" sunt: a) atributul name, care permite ataarea unui nume butonului b) atributul value, care primete ca valoare textul ce va fi afiat pe buton. Un buton pentru lansarea n execuie a unei aciuni poate fi introdus ntr-un formular prin elementul <input> avnd atributul type configurat la valoarea "button". Exist o a doua modalitate de a introduce ntr-o pagin Web un buton de apsat, i anume prin intermediul blocului <button>...</button>. Un astfel de buton poate fi inserat ntr-un formular, n acest caz declannd aciuni legate de acel formular, sau poate fi introdus oriunde n pagin pentru iniierea unor aciuni independente de formulare. Atributele posibile ale elementului "button" sunt:

14

a) name acord elementului un nume; b) value precizeaz textul care va fi afiat pe buton; c) type precizeaz aiunea ce se va executa la apsarea butonului dac acesta este inclus ntr-un formular. Valorile posibile pentru acest atribut sunt: -"button" , -"submit" ,-"reset". n corpul blocului <button>...</button> se poate afla un text sau un marcaj de inserare a unei imagini.

Stiluri,
Stilurile pun la dispoziia creatorilor de site-uri noi posibiliti de personalizare a paginilor Web. Un stil reprezint un mod de a scrie un bloc de text ( adic anumite valori pentru font, mrime culoare, aliniere, distane fa de margini etc). Exist doua modalitai de a defini un stil: a) sintaxa CSS (Cascading Style Sheets); b) sintaxa Javascript. JavaScript este un nou limbaj de scripting i este dezvoltat de Netscape. Cu ajutorul JavaScript putem creea cu uurin pagini Web interactive.

JavaScript nu este Java, Muli oameni au impresia c JavaScript este acelai lucru cu Java, i aceasta din cauza

similaritaii numelor. ns nu este adevrat. Cred c pentru moment nu trebuie s enumerm diferenele, trebuie doar s tim c JavaScript nu este Java.

Rularea JavaScript, Pentru a rula scripturi scrise in JavaScript avem nevoie de un browser care suport

JavaScript - de exemplu Netscape Navigator (ncepnd cu versiunea 2.0) sau Microsoft Internet Explorer (MSIE - ncepnd cu versiunea 3.0). De vreme ce aceste browsere sunt extrem de rspndite muli oameni au posibilitatea de a rula scripturile JavaScript. Acesta este un amnunt important n procesul de alegere a JavaScript ca limbaj de scripting pentru pagini. Bineneles c avem nevoie de cunoterea - cel puin la nivel de mediu a HTML, nainte de a incepe acest tutorial. Concluzie: Cu ajutorul limbajului HTML (Hyper Text Markup Language) se poate construi pagini web nu foarte pretenioase ins reprezint un nceput pentru realizarea site-urilor profesionale. Sigur ca va trebui sa mai treaca ceva timp pan se va putea realiza pagini web complexe ca cele ale marilor firme, ins aa cum se spune, invarea limbajului HTML reprezinta un inceput. 15

1.2 Introducerea JavaScript in pagina HTML


Codul JavaScript este introdus direct n pagina HTML. Pentru a vedea cum functioneaza JavaScript s vedem un exemplu uor: <html> <body> <br> Acesta este un document HTML. <br> <script language="JavaScript"> document.write("Acesta este JavaScript!") </script> <br> Din nou cod HTML. </body> </html> La prima vedere acest bucat de cod arat ca un fisier HTML normal. Singurul lucru nou este partea: <script language="JavaScript"> document.write ("Acesta este JavaScript!") </script> Acest script nu prea este folositor - acelai rezultat l puteam obine cu HTML mult mai simplu. Am dorit numai s demonstrez folosirea tagului <script>. Tot ce este ntre tagul <script> i tagul </script> este interpretat drept cod JavaScript. Putei observa folosirea document.write() - una dintre cele mai importante comezi in programarea JavaScript. document.write() este folosit pentru a scrie ceva intr-un document (n acest caz in documentul HTML). Aa c micul nostru program JavaScript scrie textul Acesta este JavaScript! n documentul HTML. Funcii, Funciile sunt o metod de a lega mai multe comenzi mpreun. Comenzile din interiorul {} aparin funciei myFunction(). Aceasta nseamn c cele dou comenzi document.write() sunt strnse mpreun i pot fi executate prin apelarea funciei. n special translatarea variabilelor fac ca scripturile s fie cu adevarat flexibile. Avem doua imagini, o legatur i un formular cu doua cmpuri text i un buto n. Din punctul de vedere al JavaScript fereastra browserului este un obiect window. Acest obiect 16

window (fereastra) conine unele elemente ca, de exemplu, bara de stare (status bar). n interiorul ferestrei putem incrca un document HTML (sau un fiier de alt tip, ne vom limita pentru moment la documente HTML). Aceast pagin este un obiect document. Aceasta nseamn c obiectul document este chiar pagina HTML ncrcat la un anumit moment. Obiectul document este un obiect foarte important n JavaScript l vei folosi n mod repetat. Primul obiect este denumit document. Prima imagine este reprezentat prin images[0]. Aceasta nseamn c pui accesa acest obiect prin intermediul JavaScript cu ajutorul document.images[0]. Dac de exemplu dorim s tim ce introduce utilizatorul n primul element din formular trebuie s negndim cum s accesm acest obiect. n referine vom vedea c un element text are proprietatea value. Acesta este textul introdus n elementul text. Acum putem citi valoarea cu ajutorul urmatoarei linii de cod: name= document.forms[0].elements[0].value; irul este nmagazinat n variabila name. Putem acum s lucrm cu aceast variabil. De exemplu putem creea o fereastra cu ajutorul alert("Hi" + name). Dac n cmpul text a fost introdus 'tefan' atunci comanda alert("Hi" + name) va deschide o fereastr cu textul 'Hi Stefan'. Dac avei pagini de dimensiuni mari poate deveni dificil adresarea diferitelor obiecte prin numere - de exemplu v putei ntreba la un moment dat dac vroiai s apelai document.forms[3].elements[17] sau document.forms[2].elements[18]!. Pentru a evita astfel de probleme putem da nume unice diferitelor obiecte. Putem vedea codul HTML pe care l oferim drept exemplu: <form name="myForm"> Name: <input type="text" name="name" value=""><br> Aceasta nseamn c forms[0] este de asemenea myForm. n loc de elements[0] putei utiliza name (aa cum este specificat cu proprietatea name in tagul <input>). Deci n loc de a scrie: name= document.forms[0].elements[0].value;

putem scrie: name= document.myForm.name.value; Aceasta face ca totul s fie mai usor - n special paginile de dimensiuni mari cu multe obiecte. (V rog s observai c trebuie pstrat acelasi tip de litera - litera mare sau litera mica deci nu putei scrie myform in loc de myForm). Multe proprieti ale obiectelor JavaScript pot face i altceva dect operaii de citire. Putem da valori noi acestor proprieti.

17

Frame (ferestre cadru). Crearea de Ferestre cadru (Frames), Fereastra browserului poate fi mprit n mai multe frame-uri. Aceasta nseamn c un

frame este o parte din suprafaa ferestrei browserului. Fiecare frame prezint n interior un document propriu (de cele mai multe ori document HTML). De exemplu putem creea doua frame-uri. n primul frame putem ncrca pagina de deschidere a siteului Netscape, iar n cea de a doua pagin de deschidere a siteului Microsoft. Dei crearea de frameuri este o problema HTML vreau s descriu cteva lucruri de baza. Pentru crearea de frameuri se folosesc dou taguri: <frameset> si <frame>. O pagina HTML care creaza dou frame-uri poate arta astfel: <html> <frameset rows="50%,50%"> <frame src="page1.htm" name="frame1"> <frame src="page2.htm" name="frame2"> </frameset> </html> Bottom of Form 1 Bottom of Form 2 Putem fixa dimensiunile marginii prin intermediul proprietatii border n tagul <frameset>. border=0 nseamn c nu dorim s avem margine la frame (nu functioneaza cu Netscape 2.x).

Frame-urile si JavaScript, JavaScript organizeaz toate elementele de pe o pagin intr-o ierarhie. Aceasta se

pstreaz i pentru frame-uri. n vrful iererhiei este fereastra browser. Aceast fereastr este mparit n dou frame-uri. Fereastra este "printe" n aceast ierarhie iar cele dou frame-uri sunt "copii". Putem s dm celor dou frame-uri nume frame1 si frame2. Cu ajutorul acestor nume putem schimba informaii ntre cele dou frame-uri. Un script poate rezolva urmatoarea problem: utilizatorul clickeaz pe un link n primul frame - dar pagina se ncarc n cel de-al doilea frame i nu n primul. Din punct de vedere a ferestrei cele dou frameuri se numesc frame1 i frame2. Putem vedea n imaginea de mai sus exist o conexiune direct din fereastra printe a fiecarui frame. Deci dac avem un script n fereastra parinte - n pagina care creaza frame-urile - i dorim s accesm frame-urile trebuie doar s folosii numele frame-ului. Cteodat vom dori s accesm fereastra printe dintr-un frame. Acest procedeu poate fi util atunci cnd dorim s eliminm frame-urile. Eliminarea structurii de frames nseamn doar ncrcarea unei pagini noi in locul paginii care a creeat frame -ul. Aceasta este n acest caz 18

fereastra printe. Putem accesa fereastra printe (parent frame) din interiorul ferestrelor 'copil' cu ajutorul parent. Pentru a ncarca un nou document trebuie s dm un nou URL n location.href. Deoarece dorim s eliminam frame-urile trebuie s utilizam obiectul locaie al ferestrei printe. Fiecare frame ncarc o anumita pagin, deci vom avea o locaie-obiect pentru fiecare frame. Foarte des vom avea de nfruntat problema de a accesa o frame 'copil' din alt frame 'copil'. Cum putei scrie ceva din interiorul primei ferestre n cea de-a doua fereastr - ce comand s folosim ntr-o pagin numit page1.htm? n imaginea noastra putem vedea c nu exist legatur direct ntre cele doua frame-uri. Aceasta nseamn c nu putem apela frame2 din frame1 deoarece frame-ul acesta nu cunoate existena celuilalt. Din punctul de vedere a ferestrei mam (parent) cea de-a doua fereastr (frame) este numit frame2 iar fereastra mam este numit parent vzuta de primul frame. Deci trebuie s scriem urmatoarele pentru a avea acces la obiectul document al celei de-a doua ferestre de control (frame): parent.frame2.document.write("Hi, this is frame1 calling."); Bare de navigaie, Vom avea mai multe legturi ntr-un singur frame. Dac utilizatorul clickeaz una dintre aceste legturi paginile nu vor fi afiate n acelai frame - vor fi ncrcate ntr-o a doua fereastr cadru (frame). Dac dorim s eliminm ferestrele cadru cu ajutorul funciei load() trebuie doar s scriem parent.location.href= url n interiorul funciei. Proprietatea target este foarte simplu de utilizat. O putem utiliza dac dorim s ncrcm o pagin ntr-o fereastr cadru. Soluia JavaScript (i.e. prima legatur) este folosit dac dorii s facem mai multe lucruri ca o consecin a clickului pe o legatur. O problem des ntlnit este s ncrcm dou pagini deodat n dou ferestre cadru (frames) diferite. Dei putem rezolva aceasta cu proprietetea target, utiliznd o funcie JavaScript rezolvarea este mult mai simpl. S presupunem c avem trei ferestre cadru numite frame1,frame2 i frame3. Utilizatorul clickeaz pe o legtur n frame1. Apoi dorim s ncrcai dou pagini n celelalte dou ferestre cadru (frames). Putei utiliza aceast funcie: function loadtwo() { parent.frame1.location.href= "first.htm"; parent.frame2.location.href= "second.htm"; } Dac dorim s avem o funcie mai flexibil putem folosi o variabil. Scriptul arat astfel: function loadtwo(url1, url2) { parent.frame1.location.href= url1; 19

parent.frame2.location.href= url2; } Apoi putei apela aceast funcie cu loadtwo ("first.htm", "second.htm") sau loadtwo("third.htm", "forth.htm"). Translatarea variabilei face ca funcia s fie mai flexibil. O putem utiliza de cte ori dorim n situaii diferite.

Crearea ferestrelor, Deschiderea unei noi ferestre de browser este una dintre proprietile extraordinare ale

JavaScript. Putem s ncarcm fie un document nou (de exemplu un document HTML) n noua fereastr, fie putem crea un nou document. Mai nti vom vedea cum putem deschide o nou fereastr, ncarc o pagina HTLM n aceast fereastr i apoi s o nchidei la loc. Aa cum am vzut folosim trei argumente pentru a deschide o fereastr: myWin= open("bla.htm", "displayWindow", "width=400,height=300,status=no,toolbar=no,menubar=no"); Acesta este numele ferestrei. Dac tim numele unei anumite ferestre putem ncrca o nou pagin n aceasta cu: <a href="bla.html" target="displayWindow"> Pentru aceasta va trebui numele ferestrei (dac fereastra nu exist, o nou fereastr este creat). S observm c myWin nu este numele ferestrei. Putem s acesm fereastra prin intermediul acestei variabile. Aceasta este o variabil normal care este valabil numai n interiorul unui script. Numele ferestrei (aici displayWindow) este un nume unic care poate fi folosit de toate ferestrele browserului.

Crearea de noi documente, Aceasta nseamn c putem lasa JavaScript s creeze o nou pagin HTML. Mai mult

trebuie s creem alte documente - cum ar fi scene VRML etc. Putem ncrca aceste documente ntr-o fereastr separat sau ntr-un frame. Mai nti vom crea un document simplu HTML care va fi afiat ntr-o nou fereastr. S ne uitm la funcia winOpen3(). Putem vedea c deschidem o nou fereastr browser mai nti. Dup cum putem vedea, primul argument este un ir gol " " aceasta nseamn c nu trebuie specificat un URL. Browserul nu trebuie s aduc un document JavaScript o s creeze noul document. Pentru nceput definim variabila myWin. Cu ajutorul acestei variabile putem accesa noua fereastr. Se observ c nu putem folosi numele ferestrei (displayWindow) pentru aceast 20

operaie. Dup ce am deschis fereatra putem s deschidem documentul. Aceasta se poate realiza prin: // open document for further output myWin.document.open(); Am folosit metoda open() a obiectului document - ce este diferit de metoda open a obiecutlui fereastr. Aceat comand nu deschide o nou fereatra - ci pregtete documentul pentru urmtorul input. Trebuie s plasm myWin nainte de document.open() pentru a accesa noua fereastr. Putem vedea c putem scrie taguri normale HTML n interiorul documentului. Noi creem cod HTML! Putem scrie orice tagri HTML aici. Dup afiare trebuie s nchidem din nou documentul. Codul urmtor face aceasta: // close the document - (not the window!) myWin.document.close(); Aa cum am precizat putem creea documente noi i s le afiai ntr-un frame. Dac de exemplu avem dou frame-uri numite frame1 i frame2 i dorim s creai un nou document n frame2 putei scrie urmtorul cod n frame1: a) parent.frame2.document.open(); b) parent.frame2.document.write("Here goes your HTML-code"); c) parent.frame2.document.close()

Bara de stare (statusbar) i ntreruperile (timeouts,) Programele JavaScript pot scrie pe bara de stare. Aceasta este bara din josul ferestrei

browser. Tot ce avem de fcut este s dm o valoare-ir lui window.status. Creem un formular cu dou butoane. Ambele butoane apeleaz funcia statbar(). Putem vedea c apelarea funciei creat de butonul Write! arat astfel: statbar ('Hi! This is the statusbar!'); n interiorul parantezelor specificm irul 'Hi! This is the statusbar!' Aceasta nseamn c irul este trimis funciei statbar(). Putem vedea c am definit funcia statbar() astfel: function statbar(txt) { window.status = txt; } Ceea ce aduce nou este folosirea txt n interiorul parantezelor aparinnd funciei. Aceasta nseamn c irul pe care l transmitem este nmagazinat ntr-o variabil txt.

21

Transmiterea valorilor ctre funcii este deseori folosit pentru a face funciile mai flexibile. Putei transmite mai multe valori funciilor - trebuie doar s le separm prin virgule. irul txt este afiat pe bara de stare prin intermediul window.status = txt. tergerea textului de pe bara de stare se face prin definirea unui ir gol pentru window.status. Afiarea textului pe bara de stare poate fi uor utilizat n combinaie cu legturile hipertext. n loc ca bara de stare s afieze locaia web a paginii din link este posi bil ca pe bara de stare s avem o descriere a paginii urmtoare. Acest link demonstreaz chiar asta - este de ajuns s poziionm cursorul deasupra legturii. Codul pentru acest exemplu arat astfel: <a href="dontclck.htm" onMouseOver="window.status='Don\'t click me!'; return true;" onMouseOut="window.status='';">link</a> Aici utilizm onMouseOver i onMouseOut pentru a detecta cnd pointerul mouseului trece deasupra legturii (linkului). Probabil ne ntrebm de ce trebuie s scriem return true n interiorul proprietii onMouseOver . Aceasta nseamn c browserul nu va executa codul sau propriu ca reacie a evenimentului onMouseOver. n mod obinuit browserul afieaz pe bara de stare URL-ul (adresa din Internet) spre care trimite legtura. Dac nu utilizm return true browserul va scrie pe bara de stare imediat ce codul nostru a fost executat - deci va terge textul nostru i utilizatorul nu l va putea citi. n general putem s suprimm aciunile urmtoare ale browserului folosind return true n managerul de eveniment. OnMouseOut nu exist n JavaScript 1.0. Dac folosii Netscape Navigator 2.x putei obine rezultate diferite pe platforme diferite. Pe platformele Unix textul dispare chiar dac browserul nu cunoate onMouseOut. Pe platformele Windows textul nu dispare. Dac dorim ca scriptul dumneavoastr s fie compatibil cu Netscape 2.x pentru Windows putei scrie de exemplu o funcie care scrie textul pe bara de stare i l terge periodic dup o anumit perioad de timp. Acest efect este realizat cu ajutorul unei ntreruperi - pauz (timeout). Vom analiza ntreruperile n paragraful urmtor. n acest script putem vedea nc un lucru - cteodat vem dori s afiati ghilimele. Dorim s afim textul Don't click me - deorece specificm irul n interiorul unui manager de eveniment onMouseOver folosim gilimele simple. Dar cuvntul Don't folosete nc o ghilimea simpl! Browserul este 'ameit' dac scriei direct 'Don't ...'. Pentru a rezolva problema putem s folosii naintea ghilimelelor - ceea ce nseamn c urmarea aparine ieirii (putem folosi acelai procedeu i cu ghilimele duble ).

22

Obiectul Date, Java Script ne permite s folosim cteva obiecte predefinite. Acestea sunt, de exemplu,

obiectele Data (Date), Matrice (Array) sau Matematic (Math). Exist i alte obiecte - v rog s apelai documentaia oferit de Netscape pentru informaii complete. Vom examina obiectul - Date mai nti. Cum numele sugereaz, acest obiect v permite s lucrm cu data i ora. De exemplu putem cu uurin s calculm cte zile au mai rmas pn la Crciunul urmtor, sau putei aduga ora exacta documentului dumneavoastr HTML. S ncepem cu un exemplu care afieaz ora exact. Trebuie creeat mai nti un nou obiect Date. Petru aceasta folosim un nou operator. Fii ateni la urmtoarele linii de cod: today= new Date() Acestea creeaz un nou obiect Date today. Dac nu specificm o anumit dat i ora atunci cnd creeai un nou obiect Date atunci data i ora existente vor fi folosite. Aceasta nseamn c dup executarea today= new Date() noul obiect Date today reprezint data i ora acestui moment. Date ofer cteva metode care pot fi folosite cu obiectul nostru today. Se pot folosi getHours(), setHours(), getMinutes(), setMinutes(), getMonth(), setMonth() i aa mai departe. Se observ c obiectul Date reprezint numai o dat sau ora "static". Nu este vorba de un ceas care arat trecerea fiecrei secunde sau milisecunde automat. Pentru a obine o nou dat i o nou or trebuie folosit o alt construcie (este vorba de metoda Date apelat printr-un nou operator n momentul construciei obiectului): today= new Date(1997, 0, 1, 17, 35, 23) Aceast secven de cod va creea un obiect Date cu proprietile Ianuarie 1997, ora 17:35 i 23 secunde. Deci trebuie specificat data si ora astfel: Date(year, month, day, hours, minutes, seconds) V rog s observai c trebuie s folosii 0 pentru Ianuarie - i nu 1, aa cum s-ar fi putut presupune. 1 este folosit pentru Februarie, 2 pentru Martie s.a.m.d. Aici trebuie s folosii metode ca getHours() pentru a afia data i ora specificate n obiectul Date . Putei observa c am adugat 1900 anului. Metoda get Year() returneaz numerul anului ncepnd cu 1900. Aadar, dac anul prezent ar fi 1997 metoda va returna 97; dac anul prezent ar fi 2010 va returna 110 - nu 10 ! Dac adugam 1900 scpm de problema anului 2000. Acest script nu verifica daca numarul minutelor este mai mic dacat 10. Aceasta inseamna ca s-ar putea obtine ceva sub forma 14:3 care de fapt nseamn 14:03. Putem vedea c funcia clock() este apelat de un onLoad event-handler n tagul <body> . n partea de coninut a paginii HTML avem dou elemente de text. Funcia clock() scrie data i ora n aceste dou elemente n formatul corespunztor. Putei vedea c folosim dou iruri n 23

acest scop: timeStr i dateStr. Am afirmat mai devreme c exist o problem cu minutele mai mici de 10 - acest script o rezolv cu ajutorul urmtoarelor linii de cod: timeStr+= ((minutes < 10) ? ":0" : ":") + minutes. Aici numrul de minute este adugat irului timeStr. Dac numrul minutelor este mai mic de 10 trebuie s adugai 0. Codul acesta poate vi se pare straniu. l putei scrie i n modul de mai jos, ce ar putea s v fie mai familiar: if (minutes < 10) timeStr+= ":0" + minutes else timeStr+= ":" + minutes;

Formularele. Validarea datelor introduse in formular, Formularele (Forms) sunt foarte des ntlnite pe Internet. Datele introduse n formular

(input) sunt de regula trimise napoi la server sau prin pota electronic ctre un cont de email. Cu ajutorul JavaScript datele introduse ntr-un formular pot fi cu uurin verificate nainte de a fi transmise prin Internet. Mai nti a dori s demonstrez cum formularele pot fi verificate (validate). Apoi vom examina posibilitile de a trimite informaii prin Internet. Mai nti s creem un script simplu. Pagina HTML va conine dou elemente text. Utilizatorul trebuie s introduc numele n primul text i adresa de email n cel de-al doilea. Putem introduce orice n formular i apoi apsm butonul. Top of Form 1 Bottom of Form 1 n cazul primului element introdus se va returna un mesaj de eroare dac nu este nimic introdus. Desigur, acest tip de verificare ns nu mpiedic utiliztorul s introduc un nume fals! Browserul accept i numere. Aa c dac vei introduce '17' va fi returnat mesajul 'Hi 17!'. Se pare c nu este cel mai bun mod de verificare. Cel de-al doilea formular este mai sofisticat. ncercai s introducei un ir simplu - numele dumneavostra de exemplu. Nu o s mearg (dect dac avei caracterul @ n numele dumneavostra ... ). Criteriul pentru a accepta datele introduse ca o adres s aib caracterul @. Un sigur @ ajunge - dar desigur nu este reprezentativ. Toate adresele email Internet conin @ aa c este normal s cutm @ n adres. Mai nti uitai-v la codul HTML din corpul documentului. Este vorba doar de creerea a dou elemente text i dou butoane. Butoanele apeleaz funciile test1(...) sau test2(...) n funcie de ce buton este apsat. Transmitem this.form ctre funcii pentru a adresa elementele din funcii. Funcia test1(form) verific dac irul este gol. Aceasta se realizeaz prin intermediul if (form.text1.value == "")... . 'form' este variabila care primete valoarea 'this.form' . Putem obine valoarea elementului introdus prin folosirea 'value' n combinatie cu form.text1. Pentru a vedea dac irul este gol l comparm cu "". Daca datele introduse sunt egale cu "" atunci nu a fost 24

introdus nimic. Utilizatorul va primi un mesaj de eroare. Dac ceva este introdus utilizatorul va primi un mesaj OK. Problema care poate aprea aici este c utilizatorul poate introduce numai spaii. Acestea sunt consemnate ca un input valid! Dac dorii, putei verifica aceste posibiliti i s le excludei. Cred c este destul de uor cu informaiile coninute aici. Acum aruncai o privire pe functia test2(form). Aceast funcie compar irul de intrare cu un ir gol "" pentru a fi siguri c a fost introdus ceva. Dar mai trebuie ceva adugat comenzii if. Operatorul || este numit operatorul OR. Ai fcut cunotiin cu el n partea a 6-a. Comanda if verific dac prima sau cea de-a doua comparare este adevrat. Dac cel puin una dintre ele este adevrat atunci comanda if primete valoare 'adevrat' i urmtoarea comand este executat. Aceasta nseamn c vei obine un mesaj de eroare dac irul este gol sau dac nu exist caracterul @ n irul dumneavoastr.

Verificarea existentei unor caractere, Cteodat dorim s restricionm irul introdus la unele caractere sau numere. Gndii-v

la un numr de telefon - ceea ce este introdus trebuie s fie compus numai din numere (presupunem aici c numrul de telefon nu conine nici un alt caracter). Putem verifica dac inputul este un numr. Dar muli oameni folosesc o serie de simboluri cnd i scriu numerele de telefon - de exemplu: 01234-56789, 01234/56789 sau 01234 56789 (cu un spaiu ntre cifre). Utilizatorul trebuie forat s introduc numrul de telefon fr aceste simboluri. Trebuie deci s extindem scriptul s verifice ciferele i alte simboluri.

Transmiterea inputului din formulare, Cea mai convenabil cale de transmitere a inputului este de a trimite datele prin email.

Vom examina metoda mai pe ndelete. Dac dorii ca datele introduse n formular s fie prelucrate de ctre server trebuie s folosii CGI (Common Gateway Interface). Aceasta v permite s procesai automat datele din formular. De exemplu, serverul poate creea o baz de date pe baza datelor introduse de ctre clieni. Alt exemplu sunt paginile index gen Yahoo. De regul exist un formular pentru realizarea unei cutri n baza de date. Utilizatorul primete un rspuns rapid dup ce butonul a fost apsat. Nu este nevoie ca utilizatorul s atepte ca persoanele care administreaza servereul s citeasc formularul i s caute informaiile cerute. Aceasta este realizat automat de ctre server. JavaScript nu poate realiza astfel de sarcini. Nu puteti creea "guestbooks" (-albume pentru vizitatori-) folosind JavaScript pentru c JavaScript nu poate scrie ntr-un fiier pe server. Aceasta se poate realiza numai prin CGI. Se 25

poate creea un album pentru vizitatori cu mesajele primite de la vizitatori prin email. Trebuie ns s rspundei personal, ceea ce este n regul dac nu v ateptai s primii 1000 de emailuri pe zi. Aa c aici nu avei nevoie de JavaScript! Avei nevoie de JavaScript numai dac verificai datele introduse n formular. Trebuie s menionez c formatul comenzii mailto nu funcioneaz ntotdeauna - de exemplu Microsoft Internet Explorer 3.0 nu l suport.

Obiectul Image. Imagini in pagina web, Pentru nceput s examinm obiectul Image ce a aprut odat cu JavaScript 1.1 (deci cu

Netscape Navigator 3.0). Cu ajutorul obiectului Image putei schimba imaginile din pagina web. Astfel avem posibilitatea s creem animaii n paginile web. Haidei s vedem cum pot fi adresate imaginile cu ajutorul JavaScript. Toate imaginile sunt reprezentate printr-o matrice. Aceast matrice este numita images. Este o proprietate a obiectului document. Fiecare imagine de pe o pagina web are un anumit numr. Prima imagine are numrul 0, cea de-a doua imagine are numrul 1 i aa mai departe. Adresm deci prima imagine cu document.images[0]. Fiecare imagine ntr-un document HTML este considerat un obiect Image. Un obiect Image are o serie de proprieti care pot fi accesate prin JavaScript. De exemplu putei vedea ce dimensiuni are o imagine folosind proprietile width i height. Document.images[0].width furnizeaz limea (in pixeli) a primei imagini din pagina web. n special dac avei mai multe imagini pe o singur pagin devine din ce n ce mai greu s le avei pe toate sub observaie. Atribuirea de nume fiecarei imagini rezolv aceast problem. Dac declarai o imagine prin tagul: <img src="img.gif" name="myImage" width=100 height=100> putei adresa prin document.myImage ori document.images["myImage"]. ncrcarea imaginii noi, Dei este eficient s tii care sunt dimensiunile unei imagini pe o pagin web nu este chiar ceea ce ne trebuie neaprat. Dorim s putem schimba imaginile pe pagin. Pentru aceasta folosim proprietatea src. La fel ca n tagul <img> proprietatea src reprezint adresa imaginii afiate. Cu JavaScript 1.1 putei da o nou adres unei imagini deja ncrcate. Rezultatul este c imaginea de la noua adres este ncrcat. Aceast nou imagine nlocuiete vechea ima gine de pe pagina web. Iat i un exemplu: <img src="img1.gif" name="myImage" width=100 height=100> 26

Imaginea img1.gif este ncrcat i i-a numele myImage. Urmatoarea linie de cod nlocuiete fosta imagine img1.gif cu o nou imagine img2.gif: document.myImage.src= "img2.src"; Noua imagine are ntotdeauna aceleai dimensiuni ca i vechea imagine. Nu putei schimba suprafaa de afiare a imaginii. Prencrcarea imaginilor, Unul dintre neajunsuri este c noua imagine este ncrcat dup ce a fost desemnat o nou adres proprietaii src. Dac imaginea nu a fost deja ncrcat este necesar o perioad de timp pentru ncrcarea din Internet. n unele cazuri acest fenomen nu creeaz probleme - dar exist i situaii n care astfel de ntrzieri sunt inacceptabile. Solutia este prencrcarea imaginilor. Pentru aceasta crem un nou obiect Image. hiddenImg= new Prima linie creeaz un nou obiect Image. A doua linie definete adresa imaginii care va fi reprezentat prin obiectul hiddenImg. Am vzut deja c desemnarea unei noi adrese n atributul src foreaz browserul s ncarce imaginea de la adresa de la care i-a fost indicat. Deci imagine img2.gif este ncrcat cnd cea de-a doua linie de cod este executat. Aa cum sugereaz numele hiddenImg presupune c imaginea nu mai este afiat dup ce browserul a terminat ncrcarea. Ea este pstrat n memorie (sau mai bine n cache) pentru utilizare ulterioar. Pentru a afia aceast imagine putem s folosim urmtoarea linie de cod: document.myImage.src= hiddenImg.src; Acum imaginea este preluat din memoria cache i afiata imediat. Deja noi avem ncrcat imaginea. Bineneles c browserul trebuie s fi terminat ncrcarea fiierului (fr ca utilizatorul s supravegheze procesul) pentru a putea s afieze imaginea fr ntrzieri. Dac avei un numr mare de imagini pe care le prencrcai este posibil s avei ntrzieri n afiare. Trebuie s avei ntotdeauna n vedere viteza conexiunii, prencrcarea imaginilor nu face ca imaginile s fie ncrcate mai repede, ci doar s fie ncrcate nainte de a fi afiate. Dac avei o conexiune la Internet rapid probabil v ntrebai despre ce este toat discuia. Trebuie s v aducei aminte c sunt i utilizatori cu modemuri de 14.400. Schimbarea imaginii ca urmare a unor aciuni iniiate de utilizator, Putei creea efecte deosebite prin scimbarea imaginilor ca urmare a unor evenimente. Putei de exemplu schimba imaginile la trecerea mouseului deasupra unei zone. Testei acest exemplu prin mutarea mouselui deasupra imaginii (vei obine un mesaj de eroare ntr-un browser care utilizeaz JavaScript 1.0 - vom vedea i cum s evitm aceast eroare): 27

Codul surs al acestui exemplu arat astfel: <a href="#" onMouseOver="document.myImage2.src='img2.gif'" onMouseOut="document.myImage2.src='img1.gif'"> <img src="img1.gif" name="myImage2" width=160 height=50 border=0></a> Aceast secven de cod cauzeaz unele probleme atunci cnd: - utilizatorul nu foloseste un browser compatibil JavaScript 1.1; - cea de-a doua imagine nu a fost nc prencrcat; - trebuie rescris codul pentru fiecare imagine n parte. Vom vedea acum un script complet care rezolv aceste probleme. Scriptul devine mai lung - dar odat ce l avei nu trebuie s v mai batei capul. Numrul de imagini - nu conteaz dac sunt 10 sau 100 imagini. Ordinea imaginilor - este posibil schimbarea ordinei imaginilor fr schimbarea codului.

Straturile (layers) Straturile (sau nivele) - n original LAYERS, termen ce va fi folosit ca atare n acest

traducere - sunt una dintre noile faciliti ale Netscape Navigator 4.0. Ele permit poziionarea absolut a obiectelor i deci i a imaginilor. n afar de aceasta putei mica obiectele n pagina HTML. Straturile pot fi mai uor manipulate cu ajutorul JavaScript. n momentul de fa putei utiliza straturi numai n Netscape Navigator 4.0 ! Ele pot fi explicate cu destula uurin: luai cteva foi de hrtie. Pe una din foi scriei un text. Pe alta desenai o imagine. Scriei un text lng imagine pe o a treia pagin i aa mai departe. Acum, punei toate cele trei foi de hartie pe mas. nchipuii-v c fiecare foaie de hrtie este un strat. Din acest punct de vederere un strat poate fi vzut ca un container. El conine obiecte - n acest caz text i imagini. Concluzie: JavaScript este un limbaj de programare orienta Bazat pe conceptual prototipurilor. Este folosit mai ales pentru introducerea unor funcionaliti n paginile web, codul Javascript din aceste pagini fiind rulat de ctre browser. Limbajul este binecunoscut pentru folosirea sa n construirea siturilor web, dar este folosit i pentru accesul la obiecte ncastrate (embedded objects) n alte aplicaii. A fost dezvoltat iniial de ctre Brendan Eich de la Netscape Communications Corporation sub numele de Mocha, apoi LiveScript, i denumit n final JavaScript.

28

1.3 DHTML
DHTML (Dynamic HTML) este un asamblu de diferite tehnologii. Acesta poate include orice combinaie de HTML, JavaScript. Prin combinarea acestor tehnologii, putem realiza un coninut mai dinamic dect cel permis de limbajul HTML. Unele din lucrurile posibile cu DHTML includ animaia, targerea i plasarea cu mouse -ul i imagini derulante complicate (rollovers butoane care i modific aspectul la deplasarea unui mouse deasupra acestora). Dreamweaver folosete DHTML pentru a ne permite s creem pagini cu butoane care se mic simultan pe ecran n mai multe locuri. Ca i n HTML, efectele DHTML n Dreamweaver sunt codificate n fundal. Cu toate acestea, n ceea ce privete DHML exist unele brobleme legate de compabilitatea inter platform, deoarece acest limbaj este acceptat n moduri diferite de Netscape i Explorer.

1.4 XML
XML este abrevierea de la Extensible Markup Language (limbaj de marcare extinsibil). Specificaiile pentru XML, sunt nc n faza de elaborare, dar muli vd n acest limbaj o soluie pentru mbuntirea interactivitii siturilor Web i bazelor de date. Una dintre caracteristicile avansate ale programului Dreamweaver const n capacitatea de a importa baze de date XML prin intermediul uni ablon.

29

CAPITOLUL 2. Pachete Macromedia. Descrier Dreamweaver.


2.1 Dreamweaver
Dreamweaver este un generator HTML de tip WYSIWYG (What You See Is What You Get). Aceasta nseamn c, dac efectuai o modificare pe ecran n interiorul programului, rezultatele acestora vor fi afiate instantaneu. Prin contrast, dac ar fi fost necesar s scriei manual liniile de program HTML, ar fi trebuit s examinai programul n interiorul unui browser Web pentru a vedea rezultatele. Rspunsul imediat al unui mediu de proiectare mobil, precum Dreamweaver, mrete considerabil fluxul activitii, deoarece putei vedea imediat, n timpul lucrului, dac v plac sau nu rezultatele obinute.

HTML cu dus-ntors Dreamweaver a ctigat o multime de aprecieri i de clieni loiali, datorit inveniei

numite HTML cu dus-ntors (n original, round HTML). Acesta v permite s modificai liniile de program pe care Dreamweaver le scrie n mod automat. Majoritatea celorlalte editoare editoare HTML de tip WYSIWYG actuale nu permit modificarea liniilor de program generate de acestea, deoarece editoarele respective trebuie sa lucreze cu programe scrise intr-un anumit mod, pentru a putea oferi toate caracteristicile WYSIWYG. Cu alte cuvinte, liniile de cod se deservesc pe ele nsele pentru a ajuta programul, nu pentru a crea HTML.

30

2.2Interfaa
Alte editoare HTML pe care le-am folosit impun deschiderea a mai multor ferestre si panouri de diferite dimensiuni pentru a obine accesul la toate caracteristicile. n schimb Dreamweaver folosete un sistemde panouri i ferstre fixe, care nu-i schimb poziia, i modifica opiunile de configurare n funcie de contextul aciunii intreprinse. Astfel se realizeaz o economie de spaiu pe ecran i se faciliteaz foarte mult procesul de nvare a interfaei.

Un tur al interfaei Caracteristicile oferite de Dreamweaver sunt foarte complexe, dar interfaa sa este, in

realitate, foarte simpl. Acest program are ase componente principale: bara cu inst rumente (Toolbar), bara de lansare a aplicaiilor (Launcher), panoul Objects, fereastra Document, bara Mini Launcher i inspectorul Property.

31

Panoul Objects, Panoul Objects conine rnduri cu pictograme de obiecte i este folosit ca punct de oprire

(cu un clic) pentru numeroase operaii. Dac deplasati mouse-ul deasupra panoului Objects i luai o scurt pauz, vei vedea ce anume simbolizeaz fiecare pictogram. Putei modifica aspectul acestui panou din meniul Dreamweaver Preferences, dac dorii s vedei i numele abiectelor, n afara pictogramelor sau n locul lor. Multe articole care se gsesc sub form de obiecte exist de asemenea sub meniul Insert, situat in bara superioar cu meniuri. Panoul Objects ofer posibilitatea utilizrii unui singur clic de mouse n locul barei cu meniuri respective. n general unii se simnt mai bine cnd execut clic pe pictograme, n timp ce alii prefer accesul prin intermediul meniurilor.

32

Tabelul 1 Panou Characters Descriere

Tipuri ale panoului Objects Panoul Characters conine entiti de tip caracter frecvent folosite, precum i simboluri, pentru a nu se mai folosi comenzile de la tastatur. Panoul Common conine obiecte folosite cel mai des n Dreamweaver, inclusiv imagini (Images), tabele (Tables), imagini derulante (Rollovers) simple, Insert Fireworks HTML i altele. Panoul Forms conine toate obiectele eseniale pentru crearea de formulare n pagina Web. ntre aceste obiecte se numr casete de text, butoane, meniuri. Panoul Frames conine numeroase seturi de cadre predefinite. Cu ajutorul unui clic de mouse putei aduga oricte seturi de cadre diferite. Panoul Head conine obiecte inserate n eticheta Head a paginii Web. Chiar dac nu sunt vizibile n pagin, pot reprezenta o component important a paginii respective, deoarece includ etichete META, precum Keywords (cuvinte cheie) i description (descrieri). Multe dintre acestte etichete se folosesc pentru operaii de cutare. Categoria Invisibles conine obiecte precum ancorele denumite (Named Anchors), includeri pe parte de server (Server-Side Includes ), spaii indivizibile (Non-Breaking Spaces). Categoria Special este probabil cea mai rar folosit, dar conine unele obiecte importante, precum manipulanii Java, module plug-in i obiecte ActiveX.

Common

Forms

Frames

Head

Invisibles

Special

Tipuri de obiecte ,
Similar cu numeroase bare cu instrumente folosite in Dreamweaver, panoul Objects este sensibil la context. n mod prestabilit, acesta afieaz ceea ce Dreamweaver numeste obiecte de tip Common. Putei modifica panoul Objects astfel nct acesta s afieze i alte categorii de obiecte, atunci cnd avei nevoie de acestea. Cand meninei indicatorul mouse-ului deasupra sgeii amplasate n partea de sus a panoului Objects, vei obseva ca aceasta are meniunea Common, ceea ce nseamn c n acest moment vedei elementele de tip Common din aceast bar cu instrumente. Pentru ca programul s afieze celelalte tipuri de obiecte, executai clic i meninei apsat butonul mouse-lui pe sgeata meniului pop-up. Vei vedea o list a celorlalte panouri, denumite Characters (caractere), Forms (formulare), Frames (cadre), Head, Invisibles (invizibile) i Special. 33

Inspectorul Property, Similar panoului Objects, inspectorul Property este sensibil la context, ceea ce nseamn

c i modific n mod constant coninutul n funcie de tipul elementului selectat. Inspectorul Property controleaz numeroi parametri, inclusiv cei pentru text, tabele, aliniere, imagini. Deoarece Dreamweaver insereaz n mod prestabilit o pagin fr coninut, unde se gsete un simbol clipitor pentru inserare de text, inspectorul Property afieaz n mod prestabilit proprietile unui text.

Coninutul Inspectorului Property se modifica n funcie de ceea ce este editat pe ecran. Deoarece aceste elemente se modific n funcie de context. Bara Launcher i Mini-Launcher, Bara Launcher v permite s obinei acces la diferite aspecte ale programului Dreamweaver prin intermediul unui singur clic. n esen de aici sunt lansate regiunile Site (sit), Assets (active), HTML Styles (stiluri HTML), CSS Styles (stiluri CSS), Behaviors (comportri), History (istoric) i Code Inspector (inspector de program) ale interfaei.

Bara Launcher

Amplasare bar Mini-Launcher Bara Mini-Launcher, situat n partea inferioar a ecranului, funcioneaz la fel ca bara Launcher .

34

Tabelul 2 Site

Caracteristici ale barelor Launcher i Mini-Launcher Deschide panoul Site, de unde vei controla puternicele caracteristici ale programului Dreamweaver de gestiune a siturilor. Acest panou v permite s gestioni activele sitului, precum imaginile, culorile, culorile externe, filmele, scripturile, bibliotecile, abloanele.

Assets

HTML Styles

Stilurile HTML sunt similar functional cu foile de stil in cascad (CSS), cu exceptia faptului c pot fi utilizate cu orice browser, chiar i cu cele vechi. Stilurile CSS reprezint o caracteritic avansat a programului Dreamweaver. Acestea permit automat aplicarea unei machete i a unor stiluri de text n mai multe pagini ale sitului. Aceast caracteristic permite adugarea de linii de program JavaSript n paginile sitului. Panoul History este utilizat pentru coordonarea animaiilor folosind Dynamic HTML.

CSS Styles

Behaviors

History

Cod inspector Inspectorul de cod prezint locul unde se pot vizualiza liniile de program generate efectiv de Dreamweaver. Se pot vedea programele HTML generate n timp ce se creaz obiecte n pagin.

Personalizare barei Launcher, La deschiderea programului Dreamweaver, bara Launcher va conine opiunile

prestabilite. Dac descoperi c nu utilizai frecvent unele opiuni sau c alte opiuni lipsesc, putei modifica opiunile ce apara n bara Launcher, ct i n Mini-Launcher, selectnd Edit > Preferences... > Panels > Show in Lancher. Putei elimina opiunile existente prin evidenierea lor i executare unui clic pe semnul minus (-). Prin executarea unui clic pe plus (+), va fi afiat o list cu opiuni care pot fi ataate la ambele bare de lansare. Ordinea opiunilor selectate poate fi modificat cu uurin prin evidenierea unei opiuni i executarea unui clic pe sgeile orientate n sus, respectiv n jos. Scurtturi pentru barele Launcher, Toate caracteristicile barelor Launcher sunt disponibile ca articole sub meniul Window. De asemenea, scurtturile cu taste funcionale prezentate n continuare sunt valabile att utilizatorilor de sisteme Mac, ct i pentru cei care folosesc Windows.

35

Bara de instrumente n acest moment putei opine acces la numeroase opiuni de care avei nevoie direct din

bara de instrumente, o caracteristic nou n Dreamweaver 4. Bara cu instrumente coine o serie de butoane si meniuri derulante care v permit executarea unor operatii percum schimbarea modului de vizualizare a documentului, stabilirea titlului paginii, previzualizarea paginii intr-un browser i accesul la noul panou Reference.

Tabelul 3

Caracteristici ale barei de instrumente noastr. l putem folosi pentru a edita codul n mod direct i pentru a efectua modificri fr a fi necesar utilizarea unui editor de texte separat, precum BBEdit sau HomeSite. Acest mod de vizualizere este util dac preferm s scriem programele aferente paginilor sau dac trebuie s creem sau s modificm programe personalizate, precum JavaSript, ASP etc.

Mod de vizualizare Modul de vizualizare Code view va afia programul care creeaz pagina Code view

Mod de vizualizare Modul de vizualizare Code and Design va diviza programul n dou pri, Code and Design unde vor fi afiate att programul, ct i macheta efectiv a paginii. Acest mod de vizualizare este util dac dorim s efectuam unele modificri minore i s vedem imediat efectul acestora asupra paginii. Mod de vizualizare Modul de vizualizare Design Design este modul prestabilit pentru fereastra document. Acest mod de vizualizare va afia pagina n modul WYSIWYG, ceea ce nseamn c vei vedea imaginile, textul i alte componente pe msur ce le inserm n pagin. Acest mod de vizualizare este util dac nu suntei familiarizat cu HTML sau nu dorim s tastm toate liniile de program; de asemenea, ne ofer o previzualizare destul de exact a aspectului paginii ntr-un browser, chiar n momentul proiectrii acesteia. Titlul paginii Acest cmp de text ne permite s specificm titlul paginii. Textul 36

Title field

respectiva aprea n partea superioar a ferestrei browser i este folosit de unele motoare de cutare pentru a descrie listingul sitului. De asemenea, este numele care identific pagina atunci cnd o salvm intr-o list browser, sub forma unui semn de carte sau a unui sit preferat. Titlul mai poate fi stabilit i n caseta de dialog Page Properties. Acest meniu derulant ne permite s gestinm fiierele din situl nostru, inclusiv s ncrcm i s descrcm fiiere, s le blocm, s le inserm sau s le extragem din site i s lucrm cu note de proiectare. Astfel, accesul la aceste opiuni este posibil direct din fereastra document. / Acest meniu derulant ne permite s alegem un browser pentru n vizualizarea paginii sau pentru depanarea liniilor de program JavaScript. De asemenea, putem obine acces la caseta de dialog Define Browsers, care ne permite s definim browserele noi i s modificm referinele la

Gestiunea fiierelor File management

Previzualizarea depanarea browser

Preview / Debug Remprosptarea modului

browserele existente, care au fost deja definite. Acest buton ne permite s remprosptm coninutul modului de de vizualizare Design. Acest lucru poate fi util dac operm modificri n pagin folosind modul de vizualizare Code i nu vedem imediat efectul acestora. Acest buton ne permite un acces rapid la noul panou Reference din Dreamweaver 4. Butonul este util mai ales n modul de vizualizare Code, unde putem s evideniem o poriune de program, s executm clic pe acest buton i s facem referire la panoul Reference pentru a primii o explicaie complet a textului selectat. Aceasta constitue o excelent modalitate de a nva HTML, CSS i chiar JavaScript.

vizualizare Design Refresh Referin Reference

Navigare program Code navigation Opiuni vizualizare View options

n Aceast opiune este utilizat realizrii n mod de vizualizare Code i ne permite s selectm cu rapiditate liniile de program pentru adugarea de funcii JavaScript. de Acest meniu derulant ne permite s controlm mai multe opiuni, care modific spectul modului de vizualizare Code. Putem impune utilizarea n modul de vizualizare Code a facilitii de trecere automat pe rndul urmtor (word wrap), a afirii numerelor de linii, a colorrii elementelor de sintax. Mai putem de asemenea, configura modul de vizualizare Design astfel nct sa se gseasc deasupra modului de vizualizare Code and Design.

37

Fereastra Document este teatrul de desfurare a tuturor operaiunilor . Aici se asambleaz elementele unei pagini i tot aici se proiecteaz paginile. Fereastra Document este similar, din punct de vedere al aspectului, cu fereastra browserului, atunci cnd este vizualizat in Netscape Navigator sau Internet Explorer. La deschiderea aplicaiei, att pe sistemele Mac ct i n Windows, Dreamweaver va crea un document fr coninut i fr titlu (Untitled Document) la fiecare deschidere a aplicaiei. n mod prestabilit, fereastra Document se va afla n modulul de vizualizare Design.

Tabelul 4 Caracteristic Bara de titlu Descriere

Caracteristicile ferestrei document Conine numle paginii Web (De exemplu Pagina mea Web ) i numele fiierului care conine documentul. cu Este o noutate n programul Dreamweaver 4. Aceast porine a ferestrei document v permite s modificai rapid titlul paginii i conine butoane i meniuri derulante pentru cteva opini frecvent folosite. Putei selecta sau ascunde riglele selectnd View > Rules i activnd sau dezactivnd opiunea Show. 38

Bara instrumente

Rigle

Selector etichete

de Dac selectai elementele vizuale pe ecran, selectorul de etichete evideniaz liniile de cod HTML corespunztoare. Este o modalitate rapid i simpl de a selecta diferite articole din pagin. Acest meniu derulant v permite s redimensionai fereastra pn la diferite dimensiuni (exprimate n pixeli) predefinite sau personalizate. de Aceast meniu indic dimensiunea aproximativ (exprimat in kilooctei) i timpul de descrcare pentru pagina curent. Este o versiuni n miniatur a barei Launcher, care ne ofer acces la diferite caracteristici cheie din cadrul programului Dreamweaver.

Dimensiunea ferestrei Timp descrcare Mini-Launcher

Modurile de vizualizare n fereastra document Dreamweaver 4 ofer un nivel superior de control i flexibilitate, exprimat prin posibilitatea de vizualizare a paginilor dumneavoastr ntr-unul din cele trei moduride vizualizare diferite, respectiv Code, Code and Design i Design. n mod prestabilit, toate documentele noi se vor deschide n modul de vizualizare Design. Cele trei butoane situate in colul din stnga-sus al ferestrei document v permit s comunicai n cele trei moduri de vizualizare diferite.

Mod de vizualizare Code

Mod de vizualizare Code and Design

Mod de vizualizare Design

2.3 Preferine
Exist numeroase preferine (Preferences) pe care le putei modifica, pentru a transforma Dreamweaver n propriul dumneavoastr editor HTML personalizat. Aceti parametri pot fi modificai n orice moment. Pentru a obine accesul la caseta de dialog Prefernces selectai Edit > Preferences... Sub categoria General exist parametri care determin aspectul i modul de funcionare a programului Dreamweaver n asamblu.

39

2.4 Editoare externe


Putei specifica editoarele HTML externe (External HTML Editors). Aceasta nseamn c se poate specifica un alt editor HTML,precum BBEdit sau HomeSite, pentru editarea codului generat de Dreamweaver. Dreamweaver 4 este livrat cu BBEdit (pentru Mac), repectiv cu HomeSite (Windows), deci aceste dou programe vor fi predefinite ca editoare HTML externe implicite.

40

2.5 Dimensiuni predefinite ale ferestrelor


Unul din dezavantajele proiectarii in Web este acela c aspectul paginii se va modifica n funcie de dimensiunile monitorului care o afieaz. Dreamweaver dispune de o caracteristic util i anume opinea Window Sizes (dimensiuni ale ferestrelor) care contribuie la o proiectere mai precis pentru o anumit dimensiune a monitorului.

Meniul Windows Size ofera o diversitate de dimensiuni predefinite pentru fereastra Document. De exemplu, dac dorim s proiectm pentru un ecran cu dimensiunile 740 x 420 pixeli, putem selecta aceast dimemsiune, iar Dreamweaver va modifica automat fereastra Document pentru a reflecta o nou configuraie. Astfel, vom putea vizualiza mai uor paginile n fereastra browser de diferite dimensiuni, dar nu vom modifica fizic dimensiunea ferestrei HTML pentru utilizatorul final, n cazul n care alege aceast optiune.

536 x 196 (640 x 480, Default) 600 x 300 (640 x 480, Maximized) 760 x 420 (800 x 600, Maximized) 795 x 470 (832 x 624, Maximized) 955 x 600 (1024 x 768, Maximized) 544 x 378 (WebTV)

41

2.6 Controlul siturilor


Cei care au mai construit situri Web vor fi de acord ca gestiunea fiierelor este una dintre cele mai mari probleme ale acestui mediu. Gestiunea fiierelor const din organizarea , structura dosarelor i conveniile de denumire pentru toate paginile i obiectele din site-ul Web. Puine alte discipline necesit crearea simultan a unui numr att de mare de documente, deoarece paginile Web sunt alctuite , de obicei, din numeroase fiiere de text i imagine. Pentru a reduce dificultatea de a gestiona un numr foarte mare de fiiere, majoritatea dezvoltatorilor i construiesc siturile Web pe hard-disc, iar dupa ce au terminat ncarc aceste fiiere pe un server Web, astfel nct fiierele s poat fi vizualizate din Internet.

3. Dosar rdcin local, Dreamweaver folosete o schem de gestionare a siturilor care impune pstrarea tuturor fiierelor n interiorul unui dosar rdcin local principal, pentru a putea reproduce cu uurin ierarhia de dosare de pe hard disc atunci cnd ncrcm fiierele intr-un server Web. Un dosar rdcin local este asemntor cu oricare alt dosar de pe hard-disc, cu excepia faptului c i-am indicat programului Dreamweaver c n acest dosar se gsesc toate fiierele HTML i fiierele media aferente sitului. Un dosar rdcin local poate conine multe sub-dosare, dar Dreamweaver nu poate pstra evidena elementelor dac acestea nu sunt stocate n dosarul rdcin local.

4. Definirea unui site Caracteristica programului Dreamweaver de gestiune ale site-urilor va cataloga toate fiierele din cadrul acestui dosar prin construirea unui fiier cache de sit e un mic fiier care conine informaii despre locaia i numele tuturor fiierelor i dosarelor din site.

42

Deschidem Dreamweaver i apsm tasta F8 pentru a deschide fereastra Site. Din meni ul pop up, selectm Define Sites... (definire situri). Astfel, se va deschide fereastra Definition.

n cmpul Site Name (numele sitului) tastm numele sitului. 5. Gestiunea fiierelor i dosarelor, Din interiorul ferestrei Site a programului Dreamweaver, putem crea dosare i fiiere noi, respectiv le putem muta dintr-un catalog n altul. La executarea acestei operaii, de fapt adugm dosare i fiiere pe hard disc. Accesul din interiorul programului Dreamweaver la unitatea de disc este esenial pentru operaiile de gestiune a siturilui, deoarece n acest mod Dreamweaver va putea pstra evidena locaiei unde au fost mutate fiierele sau unde au fost adugate fiiere noi.

43

2.7 Crearea hrii unui sit


Crearea unei hri de site reprezint o excelent modalitate de a examina structura siteului Web, deoarece v permite s vizualizai diferite niveluri ale sitului Web, precum i elementele componente ale acestor niveluri. Dreamweaver poate crea cu uurin hari de sit i le poate transforma n fiiere PICT sau JPEG (Mac), respectiv BMP sau PNG (Windows).

Din fereastra Site, selectm File > Save Site Map.

44

2.8 Legturi
O caracteristic important este Point to File, care v permite s indicai un fiier n cadrul ferestrei Site i s creai legturi pe baza seleciei. Aceast caracteristic este util deoarece v oblig s selectai fiiere plasate numai n interiorul dosarului rdcin localal sitului, ceea ce asigur integritatea legturilor. Pe lng crearea legturilor cu fiierele HTML , mai putei folosi Point to File i pentru a selecta noi fiiere imagine i pentru a le inlocui pe cele deja existente.

Un alt tip de lagturi este legtura de tip pot electronic. Acest tip special de legtura lanseaz programul de e-mail al utilizatorului final i introduce n mod automat adresa destinatarului.

45

2.9Aplicarea stilurilor HTML


Stilurile HTML reprezint o excelent modalitate de formatare rapid a textelor dintr-un document. Putem salva atributele specifice de formatare a textelor, pe care le putei aplica apoi unui text dintr-o pagin sau tuturor textelor dintr-un sit.

Folosind inspectorul Property, putem modifica tipul de liter n Verdana, Arial, Helvetica, sans serif, dimensiunea (Size) n 4 i culoarea.

Tabelul 5 Opiune Name: Descriere

Stiluri HTML Acesta este numele stilului, care apare n panoul HTML Styles. Dac aceast opiune este selectat, formatarea va fi aplicat numai textului selectat. Dac aceast opiune este selectat, formatarea va fi aplicat ntregului text delimitat prin etichetele de paragraf <p>

Apply to: Selection

Apply to: Paragraph

When applying: Add to Dac aceast opiune este selectat, formatarea va fi Existing Style adugat la toate elementele de formatare aplicate n prealabil textului selectat. When applying: Clear Dac aceast opiune este selectat, formatarea va nlocui toate elementele de formatare aplicate n prealabil textului 46

Existing Style

selectat. Font Attributes: Font: Aceast opiune v permite s specificai tipul de liter folosit n cadrul stilului. Font Attributes: Size: Aceast opiune v permite s specificai dimensiunea tipului de liter folosit n cadrul stilului. Font Attributes: Color: Aceast opiune v permite s specificai culoarea tipului de liter folosit n cadrul stilului. Putei alege o culoare din palet sau putei introduce o valoare hexazecimal. Font Attributes: Style: Aceast opiune v permite s specificai stilurile pentru tipuri de liter (aldin, cusiv, etc). Paragraph Format Attributes: Disponibil numai dac este selectat opiunea Apply To: Paragraph, aceast opiune v permite s alegei tipuri de formatare precum heading1, Paragraph. Paragraph Alignment Attributes: Disponibil numai dac este selectat opiunea Apply To: Paragraph, aceast opiune v permite s alegei tipuri de aliniere aferente stilului.

2.10 Tabele
Tabele HTML au fost introduse n versiunea 1.2 a browserului Netscape Navigator ca modalitate de a afia i organiza diagrame i date. Tabelele erau folosite n programe de calcul financiar sau n foi de calcul tabelar pentru baze de date, deoarece furnizau coloane i rnduri definite. Inginerii HTML care au creat tabelele pentru Web nu au anticipat faptul c toi dezvoltatorii vor folosii tabele pentru alinierea imaginilor, nu numai pentru afiarea textelor i a valorilor numerice. 47

Acest subcapitol prezint modul de creare a tabelelor personalizate, de inserare a rndurilor i a coloanelor, de creare a propriilor scheme de culori, precum i de executare a operaiilor de formatare i sortare. Tabelele reprezint un element esenial n caseta cu instrumente de proiectare n Web, iar Dreamweaver asigur un control strict asupra acestora i pune la dispoziie tehnici de manipulare avansat. Un tabel este o caracteristic extrem de flexibil a mediului HTML. Tabelele pot fi utilizate pentru organizarea datelor sau poziionarea imaginilor. Un tabel este compus dintr-o combinaie de etichete HTML.

Sortarea tabelelor n versiunea 2.0 a programului Dreamweaver, firma Macromedia a introdus caracteristica de sortare numeric i alfabetic a tabelelor. Anterior implementrii acestei caracteristici , era necesar copierea i lipirea manual a fiecrui tabel. n prezent sortarea tabelelor n Dreamweaver se realizeaz folosind o simpl caset de dialog.

48

Caseta de dialog Sort Table

Caseta de dialog Sort Table dispune de o diversitate de opiuni care v ajut s modifici aspectul tabelelor. O explicaie a tuturor caracteristicilor acestei casete de dialog este dat n tabelul urmtor:

Tabelul 6 Caracteristic Sort By (criteriu de sortare) Definiie

Caracteristici de sortare Aceast opiune se folosete pentru a selecta coloana pe care dorii s o folosii pentru sortarea tabelului. Aceste dou meniuri derulante se folosesc pentru a alege intre opiunile Alphabetically (n ordine alfabetic) i Numerically (n ordine numeric), respectiv ntre Ascending (n ordine cresctoare) sau Descending (n ordine descresctoare).

Order (ordine)

Then By (urmtorul criteriu Folosim aceast opiune pentru a sorta mai multe de sortare) Options: Sort Includes (opiuni: sortarea include ) coloane n tabel. Dac aceast caset este validat, va fi sortat primul rnd al tabelului. n mod prestabilit, opiunea este deselectat, deoarece primul rnd este aproape ntotdeuna folosit ca antet al tabelului. Options: Attributes (opiuni: Keep TR Dac aceast caset este validat i un rnd i schimb poziia n urma procesului de sortare, toate atributele pstrarea rndului i vor modifica poziia. n HTML, < tr > este

atributelor rndurilor din abrevierea de la Table Row (rnd de tabel). tabel)

Modificarea schemei de culori

n lista operaiilor necesare construirii unui tabel, urmtoarea este aplicarea culorilor ca element de formatare .

49

Dac din meniul derulant se alege o opine se va observa c tabelul din mijloc i va schimba culorile atunci cnd se execut clic pe diferite scheme de formatare.

Crearea i modificarea unui tabel Aceast opiune ne va ajuta s descoperim numeroasele opiuni aferente lucrului cu

tabelele. Pentru a crea un tabel vom avea nevoie de o combinaie intre obiectul Insert Table, m

Cu ajutorul lui Insert Table se pot controla cu precizie alinierea tabelelor. Se utilizeaz tabele cu dimensiune fix, care pot fi exprimate n dou feluri n pixeli i n procente.

50

Un exemplu de tabele exprimate n procente i pixeli.

Cadre Un cadru este o pagin HTML situat n cadrul altei pagini HTML. S presupunem c

am creat o imagine care se afl n partea inferioar a unei pagini HTML.Dac situl nostru conine o sut de pagini i am vrea s plasm aceeai imagine la baza fiecreia dintre aceste pagini, ar fi necesar s intersectm imaginea respectiv de o sut de ori, n fiecare din cele o sut de pagini individuale. Cadrele permit reutilizarea unei singure pagini HTML prin imbricarea sa ntr -un alt document HTML (cunoscut i sub numele de set de cadre). Astfel, este posibil crearea imaginii respective la baza unei pagini HTML o singur dat, dar i ncrcarea imaginii n alte o sut de pagini HTML.

51

Concluzia: Dreamweaver permite folosirea majoritii browserelor instalate pe calculatorul utilizatorului, pentru a previzualiza website-ul creat. De asemenea conine i cteva utilitare pentru administrarea site-urilor, cum ar fi cele pentru a gsi i a modifica un paragraf sau o linie de cod, n ntregul web site, pe baza oricror parametri specificai de ctre utilizator. Cu ajutorul panourilor de stare se poate crea cod JavaScript fr a avea cunotine de programare.

52

Capitolul 3. Aplicaia
3.1 Crarea saitului
Macromedia Dreamweaver MX propune dou soluii pentru crearea site-ului, o metod elementar i o metod avansat: a.Dreamweaver MX Workspace; b.Dreamweaver 4 Workspace. Metoda elementar (BASIC) 1. Execut clic pe Site - New Site. Se deschide caseta de dialog Site Definition for

53

2. Activai zona Basic

3. Introducei de la tastatur, n zona What would you like to name your site? numele site-ului dumneavoastr

4. Executai clic pe butonul Nex

54

Se deschide caseta de dialog Choose Local Root Folder for Site Site web:

Selectez folder-ul local i executai clic pe butonul Select

n grupul de panouri Files, n zona Site putei vizualiza noul dumneavoastr site

55

3.2 Inserarea textului


1. Execut clic pe butonul Code and Design View din bara de instrumente, pentru a vizualiza n acelai timp codul surs (HTML) i pagina

n care pagina noastr se afieaz la baza ferestrei, iar codul surs HTML, pe care de fiecare dat v invitm s-l analizai se afieaz n partea superioar a ferestre

2. Dm un titlu paginii. Pentru a da un titlu paginii cu Dreamweaver 4, folosim una din metodele prezentate mai jos: Metoda 1 Meniul Modify, via Page Properties Title. Metoda 2 Caseta de text Title de pe bara de instrumente. Vom folosi n cele ce urmeaz cea de-a doua metod.

56

Metoda 2 2.1. Execut clic n zona Title situat pe bara de instrumente. 2.2. Introduc textul: Pagina 1. 2.3. Acionez tasta Enter.

3. Introduc de la tastatur, n fereastra Document, textul specificat

4. Salvez documentul n folder-ul rdcin local, via File Save

57

3.3 Inserai o imagine


Pentru a insera o imagine cu Dreamweaver 4 workspace ntr-o pagin Web, folosii una din metodele prezentate mai jos: Metoda 1 Meniul Insert, via Image Metoda 2 Panoul Insert. Metoda 1 Pentru inserarea i alinierea imaginii (Smokey Light) ntr-un frame cu dimensiunile 85 x85 pixeli, vom aplica Metoda 1 n mai multe etape, dup cum urmeaz Etapa 1 Inserarea imaginii (800 x600 JPEG); Etapa 2 Parametrizarea imaginii (85 x 85 JPEG); Etapa 3 Alinierea (left) imaginii Etapa 1 1. Executai clic n locul n care dorii s se insereze imaginea.

2. Executai clic pe Insert Image.

3. Executai clic pe Smokey Light.jpg

58

3.4Crearea uni tabel


Pentru a crea un tabel cu Dreamweaver 4 workspace, folosii una din metodele prezentate mai jos: Metoda 1 Meniul Insert, modul Standard; Metoda 2 Panoul Insert, modul Standard. Metoda 1 1.Executai clic acolo unde dorii s figureze tabelu

2. Executai clic pe Insert Table

3.Se afieaz caseta de dialog Insert Table


executai clic pe butonul OK. Dreamweaver MX workspace insereaz un tabel vid, aliniat la stnga

59

Dreamweaver cs4 insereaz un tabel vid, aliniat la stnga

3.4Crearea unei legturi hipertext ctre o alt pagin Web


Putem crea legturi care faciliteaz deplasarea vizitatorilor n paginile site-ului nostru. Pentru a crea o legtur hipertext ctre o pagin Web cu Dreamweaver 4 , folosim una din metodele prezentate mai jos: Metoda 1 Inspectorul Properties Metoda 2 Meniul Modify Iat cum creem o legtur hipertext din pagina Untitled-2.htm ctre pagina b.htm. Creem mai nti cele dou pagini n folder-ul My Documents. Vom utiliza textul de legtur Ziua lung. Metoda 1 1. Selectm textul de legtur

60

2. n inspectorul Properties, via Link, executai clic pe

Se afieaz caseta de dialog Select File 3. n lista fiierelor care se afieaz n Select File executai clic pe b.html, iar apoi executai clic pe butonul OK

Legtura se afieaz n zona Link din inspectorul Properties Noua legtur se afieaz colorat n albastru i subliniat

61

4. Analizai codul HTML generat

Selectai tag-ul <A>, deschidei panoul Reference i citii informaiile care se afieaz. Utilizai meniul Descripton pentru a vizualiza atributul href Citii Conversaia 8, paragraful HTML 4 Creai o legtur hipertext ctre o alt pagin Web (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003) 5. Vizualizai pagina Web ntr-un browser

6. Testai legtura hipertext pe care ai creat-o: Executai clic pe Modify - Open Linked Page; Apsai tasta CTRL i apoi executai dublu clic pe legtur

62

Concluzii:
Dreamweaver 4 este primul editor HTML carea a ctigat foarte mult simpatie fa de programatorii Web prin faptul c nu sunt obligai s scrie liniile de program curate , lipsite de o mulime de etichete brevetate care se auto deservesc, i le permite s realizeze o machetare vizual fr a nelege mcar o line de program. O nou modalitate care simplific foarte mult crearea butoanelor derulante (acest tip de buton impune utilizarea a patru imagini, cte una pentru fiecare stare), n Dreamweaver 4 s-a adugat o caracteristic de inserie a barelor de navigare (Insert Navigation Bar) . La momentul actual Dreamweaver este un redactor HTML care are o popularitate foaret mare in rindurile progamatorilor care permite uurina folosireai acestui program i libara inserare pe un host.

63