Curs Virtual de Dreamweaver

Cap.1 Introducere

Proiectul intitulat Curs virtual de Dreamweaver, realizată într-o combinație de HTML (HyperText Markup Language ) și DHTML( Dynamic HTML) ce reprezintă o colecție de pagini de Web care pune la dispoziția oricărui utilizator doua functiuni importante :

Învățarea programului Dreamweaver 4

Crearea de pagini Web cu Dreamweaver 4

Învățarea programului Dreamweaver 4

Învățarea acestui program constitue un avantaj in realizarea mai rapidă a paginilor și siturilor Web. Chiar de la apariția sa Macromedia Dreamweaver a avut un real success la care nimeni nu se aștepta. Pentru a folosi Dreamweaver 4 trebuie să învățăm limbajul HTML.

Cu ajutorul lui Dreamweaver 4 nu mai este necesar să mai scrim liniile de program deoarece acestea se pot scrie doar cu un simplu clic pe pictogramă și aceasta va apărea automat fără a mai srie codul in HTML.

Dreamweaver este un generator HTML de tip WYSIWYG (What You See Is What You Get). Aceasta înseamnă că, dacă efectuați o modificare pe ecran în interiorul programului, rezultatele acestora vor fi afișate instantaneu. Prin contrast, dacă ar fi fost necesar să scrieți manual liniile de program HTML, ar fi trebuit să examinați programul în interiorul unui browser Web pentru a vedea rezultatele. Răspunsul imediat al unui mediu de proiectare mobil, precum Dreamweaver, mărește considerabil fluxul activității, deoarece puteți vedea imediat, în timpul lucrului, dacă vă plac sau nu rezultatele obținute.

Dacă se descrie Internet-ul unui grup de persoane cu formare și interese în domeniul educațional, se poate prezenta ca cel mai mare, complet și complex instrument de învățare din lume. Prin Internet se pot gasi resurse de cunoștințe care permit studierea oricărei discipline. În plus, se poate comunica rapid și eficient cu alte persoane interesate în aceeași disciplină. Profesori, studenți, educatori pot să-și împartășească ideile imediat, in ciuda distanțelor foarte mari.

Pentru conducatorii industriei și comertului, Internetul reprezintă accesul la o comunitate foarte educata și cu perspective, care are venituri mai mari decât media. Chiar dacă cu membrii acestei comunități nu se pot face direct afaceri, ei pot oferi informații despre cum gândesc, ce fac în timpul liber, cum văd viitorul. Toate acestea pot avea o influență directă asupra produselor și planurilor de marketing.

În toate aceste descrieri este o temă care se repetă – comunitatea Internet si instrumentul care este Internet. Acești doi termeni sunt cei mai potriviți pentru a descrie ce reprezintă Internet. Este un nou mod de a vedea o comunitate, o comunitate vastă și larg dispersată, cu mulți membri. Fiecare membru poate caută să atingă diferite scopuri prin diferite mijloace, dar fiecare folosește instrumentele oferite de Internet pentru a ușura creșterea și dezvoltarea lor.

Cap.2 Elemente de HTML, JavaScript, DHTML, XML

Ce este 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 văzute pe Web. Multe din trăsăturile lui, cum ar fi independența față de platforma, structurarea formatării și legaturile hipertext, fac din el un foarte bun format pentru documentele Internet și Web.

Primele specificații de bază ale Web-ului au fost HTML, HTTP și URL.

HTML a fost dezvoltat inițial de Tim Berners-Lee la CERN in 1989. HTML a fost văzut ca o posibilitate pentru fizicienii care utilizează computere diferite și să schimbe intre ei informații utilizând Internetul. Erau prin urmare necesare câteva trăsături : independența de platformă, posibilități hypertext și structurarea documentelor. Independența de platformă înseamnă că un document poate fi afișat în mod asemănător de computere diferite ( deci cu fonte, grafică și culori diferite ), lucru vital pentru o audiență atât de variată.

Hipertext înseamnă ca orice cuvânt, frază, imagine sau alt element al documentului văzut de un utilizator ( client ) poate face referință la un alt document, ceea ce ușurează mult navigarea intre multiple documente sau chiar în interiorul unui aceluiași 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 afiliat la Internet Engineering Task Force (IETF). W3C a enunțat câteva versiuni ale specificației HTML, printre care și HTML 2.0, HTML 3.0,HTML 3.2, HTML 4.0 și, cel mai recent, HTML 4.01. În același 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 facto 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 mod text. HTML 2.0 reflectă concepția originală a HTML că un limbaj de marcare independent de obiectele existente pentru așezarea lor în pagina, în loc de a specfica exact cum ar trebui să arate acestea. Dacă dorim să fim siguri că toti vizitatorii vor vedea paginile așa cum trebuie, putem folosi tagurile HTML 2.0.

Specificația HTML 3.0, Enunțată în 1995, a încercat să dezvolte HTML 2.0 prin adăugarea unor facilitați precum tabelele și un mai mare control asupra textului din jurul imaginilor. Deși unele din noutățile HTML 3.0 erau deja folosite de autorii de browsere, multe nu erau încă. În unele cazuri, taguri asemănătoare implementate de autorii de browsere au devenit mai răspândite decât tagurile "oficiale". Specificația HTML 3.0 acum a expirat, deci nu mai este un standard oficial.

În Mai 1996, W3C a scos pe piață specificația HTML 3.2 , care era proiectată să reflecte și să standardizeze practicile acceptate la scară largă. Deci, HTML 3.2 include tagurile HTML 3.0 ce erau adoptate de autorii de browsere ca Netscape și Microsoft plus extensii HTML raspândite. În Bilanțul asupra HTML, W3C recomandă ca providerii de informații să utilizeze specificația HTML 3.2. Versiunile curente ale majorității browserelor ar trebui să suporte toate, sau aproape toate aceste taguri.

La momentul apariției, HTML 4.0 era deja larg utilizat și au fost deja publicate specificațiile HTML 4.01.

Documentele HTML sunt documente in format ASCII și prin urmare pot fi create cu orice editor de texte. Au fost însă dezvoltate editoare specializate care permit editarea intr-un fel de WYSIWYG deși nu se poate vorbi de WYSIWYG atâta vreme cât navigatoarele afișează același document oarecum diferit, în funcție 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 păstra decât parțial formatările anterioare deoarece limbajul HTML este încă incomplet.

Primii pasi

Orice document HTML începe cu notația <html> și se termină cu notația </html>. Aceste "chestii" se numesc in literatura de specialitate "TAG-uri".Prin convenție, toate informațiile HTML încep cu o paranteză unghiulară deschisă " < " și se termină cu o paranteză unghiulară închisă " > ".

Tag-urile între aceste paranteze transmit comenzi către browser pentru a afișa pagina într-un anumit mod.Unele blocuri prezintă delimitator de sfârșit de bloc, în timp ce pentru alte blocuri acest delimitator este opțional sau chiar interzis.

Între cele două marcaje <html> si </html> vom introduce două secțiuni:
-secțiunea de antet <head>…</head> și – corpul documentului <body>…</body>. Blocul <body>…</body> cuprinde conținutul propriu-zis al paginii HTML, adică ceea ce va fi afișat în ferastra browser-ului.

O etichetă poate fi scris atât cu litere mici, cât și cu litere mari.
Adică <HTML> = <HtmL> = <html>. Caracterele "spațiu" și "CR/LF" ce apar între etichete sunt ignorate de către browser.
Așa arată primul document HTML. Îl copiem folosind Copy/Paste într-un fișier nou și îl salvăm ca PRIM.HTM sau PRIM.HTML. Apoi pornim Netscape Navigator sau Internet Explorer, dăm CTRL-O și introduceți calea spre fișier. Dam OK și … nimic.

Să nu disperăm … vom adauga primele elemente la pagina noastră. În primul rând, titlul unei pagini se obține inserând în secțiunea <head>…</head> a urmatoarei linii:

<title>Aceasta este prima mea pagină de Web</title>

În plus, în secțiunea <body>…</body> putem scrie texte căt dorim. Dacă nu întâlnim nici un marcaj < sau > atunci interpretorul HTML le va lua ca texte simple și le va afișa pe ecran.

Conținutul blocului <title>…</title> va aparea în bara de titlu a ferestrei browser-ului.

Dacă acest bloc lipsește într-o pagina HTML, atunci în bara de titlu a ferestrei browser-ului va aparea numele fișierului.

Dacă introducem mai multe linii într-o pagină browser-ul va afișa într-un singur rând, întrucât caracterele " CR/LF " sunt ignorate de browser. Trecerea pe o linie noua 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:

Printr-un nume de culoare.Sunt disponibile cel puțin 16 nume de culori: aqua, black, fuchsia, gray, green lime, maroon, navy, olive, purple, red, silver, teal, white si yellow.

Prin construcția " #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 stabilește cu atributul bgcolor al etichetei <body>, de exemplu: <body bgcolor = culoare>.
Textul afișat este caracterizat de urmatoarele atribute: Marime ( size), Culoare ( color ), Font (style).

Acestea sunt atribute ale etichetei <basefont>. Este o etichetă singulară (fară delimitator de sfârșit de bloc).

<basefont size = numar 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 construcție 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 accepta 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 până la sfârșitul paginii sau până la urmataorea eticheta <basefont>.
Dacă acest atribut lipsește atunci textul din pagina Web are atribute prestabilite sau atribute precizate de browserul utilizat.
Atributele prestabilite sunt: size = 3, color = black, si style = " Times New Roman " .

Poziționarea conținutului paginii Web față de marginile ferestrei browserului se poate face cu ajutorul a doua atribute ale etichetei <body>:

leftmargin ( stabilește distanța dintre marginea stângă a ferstrei browserului și marginea stângă a conținutului paginii );

topmargin ( stabilește distanța dintre marginea de sus a ferstrei browserului și marginea de sus a conținutului paginii );

Stiluri pentru blocurile de text

Pentru ca un bloc de text să apară în pagina evidențiată (cu caractere aldine), trebuie inclus între delimitatorii <b>…</b> ( b vine de la "bold" = indraznet ).

Pentru ca un text să fie scris cu carcatere mai mari cu o unitate decât 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 decât cele curente acesta trebuie inclus intr-un bloc delimitat= indraznet ).

Pentru ca un text să fie scris cu carcatere mai mari cu o unitate decât 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 decât cele curente acesta trebuie inclus intr-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 secvențe de text aliniate ca indice (sub-script) sau ca exponent (super-script) , aceste fragmente trebuie delimitate de etichetele _…, respectiv ^….

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

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

Fonturi

Un font este caracterizat de urmatoarele atribute:

culoare (stabilită prin atributul color);

tipul sau stilul (stabilit prin atributul face);

marimea (definită prin atributul size);

marimea in puncte tipografice (stabilită prin atributul point-size);

grosime (definită prin atributul weight).

Toate aceste atribute aparțin etichetei , care permite înserarea de blocuri de texte personalizate.

Culori

O culoare poate fi precizată în doua moduri:

printr-un nume de culoare.

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

Culoarea fontului

Pentru a scrie un fragment de text cu caractere de o anumita culoare se încadrează acest fragment între delimitatorii … având stabilit atributul color la valoarea necesară.

Marimea fontului

Pentru a stabili mărimea unui font se utilizează atributul size al etichetei . Valorile acestui atribut pot fi:

1, 2, 3, 4, 5, 6, 7 ( 1 pentru cel mai mic font si 7 pentru cel mai mare);

+1, +2, etc. pentru a mări dimensiunea fontului cu 1, 2, etc. față de valoarea curentă;

-1, -2, etc. pentru a micșora dimensiunea fontului cu 1, 2, etc. față de valoarea curentă.

Mărimea unui font poate fi stabilită exact cu ajutorul atributului point-size. Valorile acceptate de acest atribut pot fi orice numere naturale pozitive. Numărul astfel precizat reprezintă mărimea fontului în puncte tipografice.

Grosimea unui font

Grosimea unui caracter poate fi definita cu ajutorul atributului weight al etichetei .

Valorile posibile pentru acest atribut sunt 100, 200, 300, 400, 500, 600, 700, 800 si 900 (100 pentru fontul cel mai subțire si 900 pentru cel mai gros).

Blocuri de text

Aceste etichete nu se referă la particularitațiile caracterelor ce compun textul, ci la funcțiile pe care le poate avea un bloc de text în cadrul paginii Web.

Toate aceste etichete produc automat trecerea la un rând nou și adăugarea unui spațiu suplimentar.

Indentarea unui bloc

Pentru ca un bloc de text să fie indentat ( marginea din stânga 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 fișiere cu diverse formate. Formatele 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 folosește atributul background al etichetei <body>, având ca valoare adresa URL a imaginii.

Imaginea se multiplică pe orizontala și pe verticală până umple întregul ecran.

Imagini folosite ca legaturi

O legatură (link) introduce în pagina Web o zonă activă.
Efectuand click cu butonul mouse-ului pe această zonă în browser se va încarca o alta pagină.

Pentru a utiliza imaginea "ubm1.jpg" drept legatură către pagina index.html utilizăm sintaxa:

<a href ="index.html"><img src= "../../images/ubm1.jpg "></a>

Utilizari speciale ale imaginilor

Imaginile pot fi utilizate pentru a obține efecte deosebite într-o pagină web.

Printre aceste utilizări speciale putem enumera:

Linii orizontale formate cu ajutorul imaginilor .

Simboluri speciale pentru elementele unei liste neordonate

Legaturi

Lagaturile (link-urile) reprezintă partea cea mai importanta a unei pagini Web.

Ele transformă un text obișnuit în hipertext sau hiperlegatura, care permite trecerea rapidă de la o informație aflată pe un anumit server la altă informație memorată pe un alt server aflat oriunde in lume.

Legaturile sunt zone active într-o pagină Web, adică zone de pe ecran sensibile la apăsarea butonului stâng al mouse-ului.

Ancore

Intr-o pagină foarte lungă pot exista puncte de reper către care se definesc legaturi.

O ancoră se definește de asemenea prin eticheta <a>. Pentru a defini ancora se utilizează atributul name care primește ca valoare un nume atribuit ancorei (de exemplu "leg1").

Pentru a insera o legatură către "leg1" definită în aceeași pagină se utilizează eticheta <a> având atributul href de valoare "#leg1".
Pentru a introduce o legatură către o ancoră definită în alt document (altă pagină) aflată în același director, atributul href primește o valoare de forma "nume_fișier.html#nume_ancoră".

Legături catre fisiere de sunet

Sunetele pot fi stocate in fișiere în diverse formate:

AU/m-law cu extensia .au;

AIFF/AIFC cu extensiile .aiff, .aif;

WAVE/WAV cu extensia .wav;

MPEG Audio cu extensia .mpeg2, sau .mp2;

MIDI cu extensia .mid sau .midi;

O legatură către un fișier de sunet se realizează folosind eticheta <a> destinată legaturilor către orice tip de fișiere, unde atributul href va avea valoarea egală cu adresa URL a fișierului de sunet.
De exemplu:

<a href="numefișier.au">Link catre fișierul de sunet</a>

Legaturi catre fisiere videoclipuri

Videoclipurile sunt stocate în fișiere diverse formate. Formatele și extensiile corespunazătoare pentru fișierele utilizabile în paginile Web sunt urmatoarele:

MPEG cu extensia .mpeg sau mpg;

QuickTime cu extensia .mov;

AVI cu extensia .avi.

O legatură către un fișier de sunet se realizează folosind eticheta <a> destinată legăturilor către orice tip de fișiere, unde atributul href va avea valoarea egală cu adresa URL a fișierului videoclip.
De exemplu:

<a href="numefișier.avi">Link catre fișierul videoclip</a>

Liste

Unul din cele mai obișnuite elemente din documentele cu mai multe pagini este un set de definiții, referințe sau indexuri. Glosarele sunt exemple clasice în acest sens; cuvintele sunt listate în ordine alfabetică, urmate de definiții ale termenilor respectivi. În HTML, întreaga secțiune a unui glosar va fi gestoinată printr-o listă de defințtii, care este inclusă într-o pereche de marcaje de listă de definiții: <dl>…</dl> (de la "definition list" = listă de definiții).

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 inițiat de eticheta <li> (list item).

Lista va fi indentică față de restul paginii Web și fiecare element al listei începe pe un rând nou.

Tag-urile <ul> si <li> pot avea un atribut type care satilește caracterul asfișat în fața fiecărui element al listei. Valorile posibile al acestui atribut sunt:

"circle" (cerc)

"disc" (disc plin) (valoarea prestabilita);

"square" (patrat)

Liste ordonate

O listă ordonată de elemente este un bloc de text delimitat de etichetele corespondente <ol>…</ol> (" ol " vine de la " ordered list " = listă ordonată). Fiecare element al listei este inițiat de eticheta <li> (list item).

Lista va fi indentică față de restul paginii Web și fiecare element al listei începe pe un rând nou.

Tag-urile <ol> si <li> pot avea un atribut type care stabilește 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 – opțiune prestabilită );

Tag-ul <ol> poate avea un atribut start care stabilește valoarea inițială a secvenței de ordonare.Valoarea acestui atribut trebuie să fie un număr întreg pozitiv.

Tag-ul <li> poate avea un atribut value care satilește valoare pentru elementul respectiv al listei. Valoarea acestui atribut trebuie să fie un număr întreg pozitiv.

O listă de meniuri este un bloc delimitat de etichete corespondente <menu>…</menu>. Fiecare element al listei este inițiat de eticheta <li> ( list item ). Cele mai multe browsere afișează 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 inițiat de eticheta <li> ( list item ). Cele mai multe browsere afițează lista de directoare ca pe o listă neordonată.

Tabele

Tabelele ne permit să creăm o rețea dreptunghiulară de domenii, fiecare domeniu având propriile opțiuni pentru culoarea fondului, culoarea textului, alinierea textului etc.

. Un tabel este format din rânduri. Pentru a insera un rând într-un tabel se folosesc etichetele

…( de la " table row "= rand de tabel ).Folosirea etichetei de sfârșit este opțională. Un rând este format din mai multe celule ce conțin date.

In mod prestabilit, un tabel nu are chenar. pentru a adăuga 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.

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ă absența chenarului.

Când atributul border are o valoare nenulă chenarul unui tabel are un aspect tridimensional.

Definirea culorilor de fond pentru un table

Culoarea de fond se stabilește 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 încarcate documente HTML diferite.
Ferestrele sunt definite într-un fișier 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 primește ca valoare adresa URL a documentului HTML care va fi încarcat în acel frame. Definirea cadrelor se face prin împarțirea ferestrelor (și a subferestrelor) în linii și coloane:

împărțirea unei ferestre într-un număr de subferestre de tip coloană se face cu ajutorul atributului cols al etichetei <frameset> ce descrie acea fereastră;

împarțirea unei ferestre într-un număr 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 împărțirea.

Formulare

Un formular este un ansamblu de zone active alcatuit din butoane ,casete de selecție,câmpuri de editare etc.

Formularele va asigura construirea unori pagini Web care permit utilizatorilor să introducă efectiv informații ș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 căutare – element caracteristic tuturor motoarelor de căutare din Web – până la o structură complexă ,cu multiple secțiuni ,care oferă facilitați puternice de transmisie a datelor..

Un formular este definit într-un bloc delimitat de etichetele corespondente <form> și </form>.

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 lipsește, 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 având valoarea "radio".

La expedierea formularului se va transmite una dintre perechile "sex=b" sau "sex=f",în funcție de alegerea facută de utilizator.

Butoane

Într-un formular pot fi afișate butoane.Când utilizatorul apasă un buton, se lansează în execuție o funcție de tratare a acestui eveniment.

Limbajul HTML nu permite scrierea unor astfel de funcții (acest lucru este posibil dacă se utilizează limbajele JavaScript sau Java).

Pentru a insera un buton într-un formular , se utilizează eticheta <input> având atributul type configurat la valoarea "button".
Alte doua atribute ale elementului "button" sunt:

atributul name, care permite atașarea unui nume butonului

atributul value, care primește ca valoare textul ce va fi afișat pe buton.

Un buton pentru lansarea în execuție a unei acțiuni poate fi introdus într-un formular prin elementul <input> având atributul type configurat la valoarea "button", .

Există o a doua modalitate de a introduce într-o pagină Web un buton de apăsat, și anume prin intermediul blocului <button>…</button>.

Un astfel de buton poate fi inserat într-un formular, în acest caz declanșând acțiuni legate de acel formular, sau poate fi introdus oriunde în pagină pentru inițierea unor acțiuni independente de formulare.

Atributele posibile ale elementului "button" sunt:

name acordă elementului un nume;

value precizează textul care va fi afișat pe buton;

type precizează acșiunea ce se va executa la apăsarea 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 dispoziția creatorilor de site-uri noi posibilități de personalizare a paginilor Web. Un stil reprezintă un mod de a scrie un bloc de text ( adică anumite valori pentru font, mărime culoare, aliniere, distanțe față de margini etc).

Există doua modalitaăi de a defini un stil:

sintaxa CSS (Cascading Style Sheets);

sintaxa Javascript.

Ce este JavaScript ?

JavaScript este un nou limbaj de scripting și este dezvoltat de Netscape. Cu ajutorul JavaScript putem creea cu ușurință pagini Web interactive.

JavaScript nu este Java!

Mulți oameni au impresia că JavaScript este același lucru cu Java, și aceasta din cauza similaritații numelor. Însă nu este adevărat. Cred că pentru moment nu trebuie să enumerăm diferențele, 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 (începând cu versiunea 2.0) sau Microsoft Internet Explorer (MSIE – începând cu versiunea 3.0). De vreme ce aceste browsere sunt extrem de răspândite mulți oameni au posibilitatea de a rula scripturile JavaScript.

Acesta este un amănunt important în procesul de alegere a JavaScript ca limbaj de scripting pentru pagini.
Bineînțeles că avem nevoie de cunoșterea – cel puțin la nivel de mediu – a HTML, înainte de a incepe acest tutorial..

Introducerea JavaScript in pagina HTML

Codul JavaScript este introdus direct în pagina HTML. Pentru a vedea cum functioneaza JavaScript să vedem un exemplu ușor:

<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 – același rezultat îl puteam obține 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. Puteți observa folosirea document.write() – una dintre cele mai importante comezi in programarea JavaScript. document.write() este folosit pentru a scrie ceva intr-un document (in acest caz in documentul HTML). Așa că micul nostru program JavaScript scrie textul Acesta este JavaScript! în documentul HTML.

Functii

Funcțiile sunt o metodă de a lega mai multe comenzi împreună.

Comenzile din interiorul {} aparțin funcției myFunction(). Aceasta înseamnă că cele două comenzi document.write() sunt strânse împreunî și pot fi executate prin apelarea funcției. În special translatarea variabilelor fac ca scripturile să fie cu adevarat flexibile.

Avem doua imagini, o legatură și un formular cu doua câmpuri text și un buton. Din punctul de vedere al JavaScript fereastra browserului este un obiect window. Acest obiect window (fereastra) conține unele elemente ca, de exemplu, bara de stare (status bar). În interiorul ferestrei putem incărca un document HTML (sau un fișier 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 încărcată la un anumit moment. Obiectul document este un obiect foarte important în JavaScript – îl veți folosi în mod repetat.

Primul obiect este denumit document. Prima imagine este reprezentată prin images[0]. Aceasta înseamnă că putem accesa acest obiect prin intermediul JavaScript cu ajutorul document.images[0].
Dacă de exemplu doriți să știți ce introduce utilizatorul în primul element din formular trebuie să vă gîndiți cum să accesați acest obiect. În referințe veți 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ă lucrăm cu această variabilă. De exemplu putem creea o fereastra cu ajutorul alert("Hi " + name). Dacă în câmpul text a fost introdus 'Ștefan' atunci comanda alert("Hi " + name) va deschide o fereastră cu textul 'Hi Stefan'
Dacă aveți pagini de dimensiuni mari poate deveni dificilă adresarea diferitelor obiecte prin numere – de exemplu vă puteți întreba la un moment dat dacă vroiați să apelați document.forms[3].elements[17] sau document.forms[2].elements[18]!. Pentru a evita astfel de probleme puteți de nume unice diferitelor obiecte. Puteți 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] puteți utiliza name (așa 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ă observați că trebuie păstrat acelasi tip de litera – litera mare sau litera mica – deci nu puteți scrie myform in loc de myForm).

Multe proprietăți ale obiectelor JavaScript pot face și altceva decât operații de citire. Puteți da valori noi acestor proprietăți.

Frame (ferestre cadru)

Crearea de Ferestre cadru (Frames)

Fereastra browserului poate fi împărțită în mai multe frame-uri. Aceasta înseamnă că un frame este o parte din suprafața ferestrei browserului. Fiecare frame prezintă în interior un document propriu (de cele mai multe ori document HTML). De exemplu puteți creea doua frame-uri. În primul frame puteți încărca pagina de deschidere a siteului Netscape, iar în cea de a doua pagină de deschidere a siteului Microsoft.
Deși crearea de frameuri este o problema HTML vreau să descriu câteva lucruri de baza. Pentru crearea de frameuri se folosesc două taguri: <frameset> si <frame>. O pagina HTML care creaza două frame-uri poate arăta 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

Puteți fixa dimensiunile marginii prin intermediul proprietatii border în tagul <frameset>. border=0 înseamnă că nu doriți să aveți 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 păstrează și pentru frame-uri. În vârful iererhiei este fereastra browser. Această fereastră este împarțită în două frame-uri. Fereastra este "părinte" în această ierarhie iar cele două frame-uri sunt "copii". Putem să dăm celor două frame-uri nume frame1 si frame2. Cu ajutorul acestor nume putem schimba informații î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. Puteți vedea în imaginea de mai sus că există o conexiune directă din fereastra părinte a fiecarui frame. Deci dacă avem un script în fereastra parinte – în pagina care creaza frame-urile – și doriți să accesați frame-urile trebuie doar să folosiți numele frame-ului.

Câteodată veți dori să accesați fereastra părinte dintr-un frame. Acest procedeu poate fi util atunci când doriți să eliminați frame-urile. Eliminarea structurii de frames înseamnă doar încărcarea unei pagini noi in locul paginii care a creeat frame-ul. Aceasta este în acest caz fereastra părinte. Putem accesa fereastra părinte (parent frame) din interiorul ferestrelor 'copil' cu ajutorul parent. Pentru a încarca un nou document trebuie să dăm un nou URL în location.href. Deoarece dorim să eliminam frame-urile trebuie să utilizam obiectul locație al ferestrei părinte. Fiecare frame încarcă o anumita pagină, deci vom avea o locație-obiect pentru fiecare frame.

Foarte des veți avea de înfruntat problema de a accesa o frame 'copil' din altă frame 'copil'. Cum puteți 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 puteți 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 cunoaște existența celuilalt. Din punctul de vedere a ferestrei mamă (parent) cea de-a doua fereastră (frame) este numită frame2 iar fereastra mamă este numită parent văzuta 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 navigatie

Vom avea mai multe legături într-un singur frame. Dacă utilizatorul clickează una dintre aceste legături paginile nu vor fi afișate în același frame – vor fi încărcate într-o a doua fereastră cadru (frame).

Dacă doriți să eliminați ferestrele cadru cu ajutorul funcției load() trebuie doar să scrieți parent.location.href= url în interiorul funcției.

Proprietatea target este foarte simplu de utilizat. O puteți utiliza dacă doriți să încărcați o pagină într-o fereastră cadru. Soluția JavaScript (i.e. prima legatură) este folosită dacă doriți să faceți mai multe lucruri ca o consecință a clickului pe o legatură. O problemă des întâlnită este să încărcați două pagini deodată în două ferestre cadru (frames) diferite. Deși puteți rezolva aceasta cu proprietetea target, utilizând o funcție JavaScript rezolvarea este mult mai simplă. Să presupunem că avem trei ferestre cadru numite frame1,frame2 și frame3. Utilizatorul clickează pe o legătură în frame1. Apoi doriți să încărcați două pagini în celelalte două ferestre cadru (frames). Puteți utiliza această funcție:

function loadtwo() {

parent.frame1.location.href= "first.htm";

parent.frame2.location.href= "second.htm";

}

Dacă doriți să aveți o funcție mai flexibilă puteți folosi o variabilă. Scriptul arată astfel:

function loadtwo(url1, url2) {

parent.frame1.location.href= url1;

parent.frame2.location.href= url2;

}

Apoi puteți apela această funcție cu loadtwo ("first.htm", "second.htm") sau loadtwo("third.htm", "forth.htm"). Translatarea variabilei face ca funcția să fie mai flexibilă. O puteți utiliza de câte ori doriți în situații diferite.

Windows și crearea de documente

Crearea ferestrelor

Deschiderea unei noi ferestre de browser este una dintre proprietățile extraordinare ale JavaScript. Puteți să încarcăți fie un document nou (de exemplu un document HTML) în noua fereastră, fie puteți crea un nou document. Mai întâi vom vedea cum puteți deschide o nouă fereastră, încarcă o pagina HTLM în această fereastră și apoi să o închideți la loc.

Așa cum ați văzut 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ă știți numele unei anumite ferestre puteți încărca o nouă pagină în aceasta cu:

<a href="bla.html" target="displayWindow">

Pentru aceasta vă trebuie numele ferestrei (dacă fereastra nu există, o nouă fereastră este creată).

Să observați că myWin nu este numele ferestrei. Puteți să acesați fereaastra 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ă puteți lasa JavaScript să creeze o nouă pagină HTML. Mai mult trebuie să creați alte documente – cum ar fi scene VRML etc. Puteti încărca aceste documente într-o fereastră separată sau într-un frame. Mai întâi vom crea un document simplu HTML care va fi afișat într-o nouă fereastră. Să ne uităm la funcția winOpen3(). Puteți vedea că deschidem o nouă fereastră browser mai întâi. După cum puteți 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ă operație.

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 pregătește documentul pentru următorul input.
Trebuie să plasăm myWin înainte de document.open() pentru a accesa noua fereastră.

Puteți vedea că putem scrie taguri normale HTML în interiorul documentului. Noi creem cod HTML! Puteți scrie orice tagri HTML aici.
După afișare trebuie să închidem din nou documentul. Codul următor face aceasta:

// close the document – (not the window!)

myWin.document.close();

Așa cum am precizat puteți creea documente noi și să le afișați într-un frame. Dacă de exemplu aveți două frame-uri numite frame1 și frame2 și doriți să creați un nou document în frame2 puteți scrie următorul cod în frame1:

parent.frame2.document.open();

parent.frame2.document.write("Here goes your HTML-code");

parent.frame2.document.close();

Bara de stare (statusbar) și întreruperile (timeouts)

Bara de stare (statusbar)

Programele JavaScript pot scrie pe bara de stare. Aceasta este bara din josul ferestrei browser. Tot ce aveți de făcut este să dați o valoare-șir lui window.status.

Creem un formular cu două butoane. Ambele butoane apelează funcția statbar(). Puteți vedea că apelarea funcției creată de butonul Write! arată astfel:

statbar('Hi! This is the statusbar!');

În interiorul parantezelor specificăm șirul 'Hi! This is the statusbar!' Aceasta înseamnă că șirul este trimis funcției statbar(). Puteți vedea că am definit funcția statbar() astfel:

function statbar(txt) {

window.status = txt;

}

Ceea ce aduce nou este folosirea txt în interiorul parantezelor aparținând funcției. Aceasta înseamnă că șirul pe care îl transmitem este înmagazinat într-o variabilă txt.

Transmiterea valorilor către funcții este deseori folosită pentru a face funcțiile mai flexibile. Puteți transmite mai multe valori funcțiilor – trebuie doar să le separați prin virgule. Șirul txt este afișat 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.

Afișarea textului pe bara de stare poate fi ușor utilizată în combinație cu legăturile hipertext. În loc ca bara de stare să afișeze locația web a paginii din link este posibil ca pe bara de stare să aveți o descriere a paginii următoare. Acest link demonstrează chiar asta – este de ajuns să poziționați cursorul deasupra legăturii. 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 utilizăm onMouseOver și onMouseOut pentru a detecta când pointerul mouseului trece deasupra legăturii (linkului).

Probabil vă întrebați de ce trebuie să scriem return true în interiorul proprietății onMouseOver . Aceasta înseamnă că browserul nu va executa codul sau propriu ca reacție a evenimentului onMouseOver. În mod obișnuit browserul afișează pe bara de stare URL-ul (adresa din Internet) spre care trimite legătura. Dacă nu utilizăm 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ă suprimăm acțiunile următoare ale browserului folosind return true ăn managerul de eveniment. OnMouseOut nu există în JavaScript 1.0. Dacă folosiți Netscape Navigator 2.x puteți obține rezultate diferite pe platforme diferite. Pe platformele Unix textul dispare chiar dacă browserul nu cunoaște onMouseOut. Pe platformele Windows textul nu dispare. Dacă doriți ca scriptul dumneavoastră să fie compatibil cu Netscape 2.x pentru Windows puteți scrie de exemplu o funcție 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 următor.

În acest script puteți vedea încă un lucru – câteodată veți dori să afișati ghilimele. Dorim să afișăm textul Don't click me – deorece specificăm șirul în interiorul unui manager de eveniment onMouseOver folosim gilimele simple. Dar cuvântul Don't folosește încă o ghilimea simplă! Browserul este 'amețit' dacă scrieți direct 'Don't …'. Pentru a rezolva problema puteți să folosiți înaintea ghilimelelor – ceea ce înseamnă că urmarea aparține ieșirii (puteți folosi acelați procedeu și cu ghilimele duble ").

Obiectul Date

Java Script vă permite să folosiți câteva obiecte predefinite. Acestea sunt, de exemplu, obiectele Data (Date) , Matrice (Array) sau Matematic (Math). Există și alte obiecte – vă rog să apelați documentația oferită de Netscape pentru informații complete.

Vom examina obiectul – Date mai întâi. Cum numele sugerează, acest obiect vă permite să lucrați cu data și ora. De exemplu puteți cu ușurință să calculați câte zile au mai rămas până la Crăciunul următor, sau puteți adăuga ora exacta documentului dumneavoastră HTML.
Să începem cu un exemplu care afișează ora exactă. Trebuie creeat mai întâi un nou obiect – Date. Petru aceasta folosim un nou operator. Fiți atenți la următoarele linii de cod:

today= new Date()

Acestea creează un nou obiect Date today. Dacă nu specificați o anumită dată și ora atunci când creeați 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.
Obiectul Date oferă câteva metode care pot fi folosite cu obiectul nostru today. Se pot folosi getHours(), setHours(), getMinutes(), setMinutes(), getMonth(), setMonth() și așa mai departe.

Se observă că obiectul Date reprezintă numai o dată sau ora "statică". Nu este vorba de un ceas care arată trecerea fiecărei secunde sau milisecunde automat.

Pentru a obține o nouă dată și o nouă oră trebuie folosită o altă construcție (este vorba de metoda Date apelată printr-un nou operator în momentul construcției obiectului):

today= new Date(1997, 0, 1, 17, 35, 23)

Această secvență de cod va creea un obiect Date cu proprietățile 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ă observați că trebuie să folosiți 0 pentru Ianuarie – și nu 1, așa cum s-ar fi putut presupune. 1 este folosit pentru Februarie, 2 pentru Martie s.a.m.d.

Aici trebuie să folosim metode ca getHours() pentru a afișa data și ora specificate în obiectul Date . Puteți observa că am adăugat 1900 anului. Metoda get Year() returnează numerul anului începând cu 1900. Așadar, dacă anul prezent ar fi 1997 metoda va returna 97; dacă anul prezent ar fi 2010 va returna 110 – nu 10 ! Dacă adăugam 1900 scăpăm 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.

Puteți vedea că funcția clock() este apelată de un onLoad event-handler în tagul <body> . În partea de conținut a paginii HTML avem două elemente de text. Funcția clock() scrie data și ora în aceste două elemente în formatul corespunzător. Puteți vedea că folosim două șiruri în 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 următoarelor linii de cod:

timeStr+= ((minutes < 10) ? ":0" : ":") + minutes.

Aici numărul de minute este adăugat șirului timeStr. Dacă numărul minutelor este mai mic de 10 trebuie să adăugați 0. Codul acesta poate vi se pare straniu. Îl puteți 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 întâlnite pe Internet. Datele introduse în formular (input) sunt de regula trimise înapoi la server sau prin poșta electronică către un cont de email. Cu ajutorul JavaScript datele introduse într-un formular pot fi cu ușurință verificate înainte de a fi transmise prin Internet. Mai întâi aș dori să demonstrez cum formularele pot fi verificate (validate). Apoi vom examina posibilitățile de a trimite informații prin Internet.

Mai întâi să creem un script simplu. Pagina HTML va conține două elemente text. Utilizatorul trebuie să introducă numele în primul text și adresa de email în cel de-al doilea. Puteți introduce orice în formular și apoi apăsați 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. Așa că dacă veți 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. Încercați să introduceți un șir simplu – numele dumneavostra de exemplu. Nu o să meargă (decât dacă aveți 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 conțin @ așa că este normal să căutăm @ în adresă.

Mai întâi uitați-vă la codul HTML din corpul documentului. Este vorba doar de creerea a două elemente text și două butoane. Butoanele apelează funcțiile test1(…) sau test2(…) în funcție de ce buton este apăsat. Transmitem this.form către funcții pentru a adresa elementele din funcții.

Funcția test1(form) verifică dacă șirul este gol. Aceasta se realizează prin intermediul if (form.text1.value == "")… . 'form' este variabila care primește valoarea 'this.form' . Putem obține valoarea elementului introdus prin folosirea 'value' în combinatie cu form.text1. Pentru a vedea dacă șirul este gol îl comparăm cu "". Daca datele introduse sunt egale cu "" atunci nu a fost introdus nimic. Utilizatorul va primi un mesaj de eroare. Dacă ceva este introdus utilizatorul va primi un mesaj OK.

Problema care poate apărea aici este că utilizatorul poate introduce numai spații. Acestea sunt consemnate ca un input valid! Dacă doriți, puteți verifica aceste posibilități și să le excludeți. Cred că este destul de ușor cu informațiile conținute aici.

Acum aruncați o privire pe functia test2(form). Această funcție compară șirul de intrare cu un șir gol "" pentru a fi siguri că a fost introdus ceva. Dar mai trebuie ceva adăugat comenzii if. Operatorul || este numit operatorul OR. Ați făcut cunoștiință cu el în partea a 6-a.
Comanda if verifică dacă prima sau cea de-a doua comparare este adevărată. Dacă cel puțin una dintre ele este adevărată atunci comanda if primește valoare 'adevărat' și următoarea comandă este executată. Aceasta înseamnă că veți obține un mesaj de eroare dacă șirul este gol sau dacă nu există caracterul @ în șirul dumneavoastră.

Verificarea existentei unor caractere

Câteodată dorim să restricționăm șirul introdus la unele caractere sau numere. Gândiți-vă la un număr de telefon – ceea ce este introdus trebuie să fie compus numai din numere (presupunem aici că numărul de telefon nu conține nici un alt caracter). Putem verifica dacă inputul este un număr. Dar mulți oameni folosesc o serie de simboluri când își scriu numerele de telefon – de exemplu: 01234-56789, 01234/56789 sau 01234 56789 (cu un spațiu între cifre). Utilizatorul trebuie forțat să introducă numărul de telefon fără 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ă doriți ca datele introduse în formular să fie prelucrate de către server trebuie să folosiți CGI (Common Gateway Interface). Aceasta vă permite să procesați automat datele din formular. De exemplu, serverul poate creea o bază de date pe baza datelor introduse de către clienți. Alt exemplu sunt paginile index gen Yahoo. De regulă există un formular pentru realizarea unei căutări în baza de date. Utilizatorul primește un răspuns rapid după ce butonul a fost apăsat. Nu este nevoie ca utilizatorul să aștepte ca persoanele care administreaza servereul să citească formularul și să caute informațiile cerute. Aceasta este realizată automat de către 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 fișier pe server. Aceasta se poate realiza numai prin CGI. Se poate creea un album pentru vizitatori cu mesajele primite de la vizitatori prin email. Trebuie însă să răspundeți personal, ceea ce este în regulă dacă nu vă așteptați să primiți 1000 de emailuri pe zi. Așa că aici nu aveți nevoie de JavaScript! Aveți nevoie de JavaScript numai dacă verificați datele introduse în formular. Trebuie să menționez că formatul comenzii mailto nu funcționează întotdeauna – de exemplu Microsoft Internet Explorer 3.0 nu îl suportă.

Obiectul Image

Imagini in pagina web

Pentru început să examinăm obiectul Image ce a apărut odată cu JavaScript 1.1 (deci cu Netscape Navigator 3.0). Cu ajutorul obiectului Image puteți schimba imaginile din pagina web. Astfel avem posibilitatea să creem animații în paginile web.

Haideți 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 număr. Prima imagine are numărul 0, cea de-a doua imagine are numărul 1 și așa mai departe. Adresăm 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 proprietăți care pot fi accesate prin JavaScript. De exemplu puteți vedea ce dimensiuni are o imagine folosind proprietățile width și height. Document.images[0].width furnizează lățimea (in pixeli) a primei imagini din pagina web.

În special dacă aveți mai multe imagini pe o singură pagină devine din ce în ce mai greu să le aveți pe toate sub observație. Atribuirea de nume fiecarei imagini rezolvă această problemă. Dacă declarați o imagine prin tagul:

<img src="img.gif" name="myImage" width=100 height=100>

puteți adresa prin document.myImage ori

document.images["myImage"].

Încărcarea imaginii noi

Deși este eficient să știm care sunt dimensiunile unei imagini pe o pagină web nu este chiar ceea ce ne trebuie neapărat. Dorim să putem schimba imaginile pe pagină. Pentru aceasta folosim proprietatea src. La fel ca în tagul <img> proprietatea src reprezintă adresa imaginii afișate. Cu JavaScript 1.1 puteți da o nouă adresă unei imagini deja încărcate. Rezultatul este că imaginea de la noua adresă este încărcată. Această nouă imagine înlocuiește vechea imagine de pe pagina web. Iată și un exemplu:

<img src="img1.gif" name="myImage" width=100 height=100>

Imaginea img1.gif este încărcată și i-a numele myImage. Urmatoarea linie de cod înlocuiește fosta imagine img1.gif cu o nouă imagine img2.gif:

document.myImage.src= "img2.src";

Noua imagine are întotdeauna aceleași dimensiuni ca și vechea imagine. Nu puteți schimba suprafața de afișare a imaginii.

Preîncarcarea imaginilor

Unul dintre neajunsuri este că noua imagine este încărcată dupî ce a fost desemnată o nouă adresă proprietații src. Dacă imaginea nu a fost deja încărcată este necesară o perioadă de timp pentru încărcarea din Internet. În unele cazuri acest fenomen nu creează probleme – dar există și situații în care astfel de întârzieri sunt inacceptabile. Solutia este preîncărcarea imaginilor. Pentru aceasta creăm un nou obiect Image. hiddenImg= new

Prima linie creează un nou obiect Image. A doua linie definește adresa imaginii care va fi reprezentată prin obiectul hiddenImg. Am văzut deja că desemnarea unei noi adrese în atributul src forțează browserul să încarce imaginea de la adresa de la care i-a fost indicată. Deci imagine img2.gif este încărcată când cea de-a doua linie de cod este executată. Așa cum sugerează numele hiddenImg presupune că imaginea nu mai este afișată după ce browserul a terminat încărcarea. Ea este păstrată în memorie (sau mai bine în cache) pentru utilizare ulterioară. Pentru a afișa această imagine putem să folosim următoarea linie de cod:

document.myImage.src= hiddenImg.src;

Acum imaginea este preluată din memoria cache și afișata imediat. Deja noi avem încărcată imaginea.

Bineînțeles că browserul trebuie să fi terminat încărcarea fișierului (fără ca utilizatorul să supravegheze procesul) pentru a putea să afișeze imaginea fără întârzieri. Dacă aveți un număr mare de imagini pe care le preîncărcați este posibil să aveți întârzieri în afișare. Trebuie să aveți întotdeauna în vedere viteza conexiunii, preîncărcarea imaginilor nu face ca imaginile să fie încărcate mai repede, ci doar să fie încărcate înainte de a fi afișate.

Dacă aveți o conexiune la Internet rapidă probabil vă întrebați despre ce este toată discuția. Trebuie să vă aduceți aminte că sunt și utilizatori cu modemuri de 14.400.

Schimbarea imaginii ca urmare a unor acțiuni inițiate de utilizator

Puteți creea efecte deosebite prin scimbarea imaginilor ca urmare a unor evenimente. Puteți de exemplu schimba imaginile la trecerea mouseului deasupra unei zone. Testeți acest exemplu prin mutarea mouselui deasupra imaginii (veți obține un mesaj de eroare într-un browser care utilizează JavaScript 1.0 – vom vedea și cum să evităm această eroare):

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 când:

– utilizatorul nu foloseste un browser compatibil JavaScript 1.1;

– cea de-a doua imagine nu a fost încă preîncărcată;

– 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 aveți nu trebuie să vă mai bateți capul.

Numărul de imagini – nu contează dacă sunt 10 sau 100 imagini.

Ordinea imaginilor – este posibilă schimbarea ordinei imaginilor fără schimbarea codului.

Straturi

Ce sunt straturile (layers)?

Straturile (sau nivele) – în original LAYERS, termen ce va fi folosit ca atare în acestă traducere – sunt una dintre noile facilități ale Netscape Navigator 4.0. Ele permit poziționarea absolută a obiectelor și deci și a imaginilor. În afară de aceasta puteți mișca obiectele în pagina HTML.

Puteți de asemenea să mutați obiecte.

Straturile pot fi mai ușor manipulate cu ajutorul JavaScript. În momentul de față puteți utiliza straturi numai în Netscape Navigator 4.0 !

Ele pot fi explicate cu destula ușurință: luați câteva foi de hârtie. Pe una din foi scrieți un text. Pe alta desenați o imagine. Scrieți un text lângă imagine pe o a treia pagină și așa mai departe. Acum, puneți toate cele trei foi de hartie pe masă. Închipuiți-vă că fiecare foaie de hârtie este un strat. Din acest punct de vederere un strat poate fi văzut ca un container. El conține obiecte – în acest caz text și imagini.

Luați acum o foaie de hârtie cu o imagine desenată. Mișcați-o pe suprafața mesei. Mișcarea imaginii respectă mișcarea foii de hârtie pe care este desenată. Straturile pot conține diverse obiecte – imagini, formulare, text etc. – ce pot fi inserate în pagina HTML și mutate în cadrul ei. Dacă se mută un strat toate obiectele de pe acel strat se mută.

Ce este DHTML ?

DHTML (Dynamic HTML) este un asamblu de diferite tehnologii. Acesta poate include orice combinație de HTML, JavaScript. Prin combinarea acestor tehnologii, putem realiza un conținut mai dinamic decât cel permis de limbajul HTML.

Unele din lucrurile posibile cu DHTML includ animația, targerea și plasarea cu mouse-ul și imagini derulante complicate (rollovers – butoane care își modifică aspectul la deplasarea unui mouse deasupra acestora). Dreamweaver folosește DHTML pentru a ne permite să creem pagini cu butoane care se mișcă 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 privește DHML există unele brobleme legate de compabilitatea inter – platformă, deoarece acest limbaj este acceptat ăn moduri diferite de Netscape și Explorer.

Ce este XML ?

XML este abrevierea de la Extensible Markup Language (limbaj de marcare extinsibil). Specificațiile pentru XML, sunt încă în faza de elaborare, dar mulți văd în acest limbaj o soluție pentru îmbunătățirea interactivității 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.

Cap.3 Ce este Dreamweaver ?

Dreamweaver este un generator HTML de tip WYSIWYG (What You See Is What You Get). Aceasta înseamnă că, dacă efectuați o modificare pe ecran în interiorul programului, rezultatele acestora vor fi afișate instantaneu. Prin contrast, dacă ar fi fost necesar să scrieți manual liniile de program HTML, ar fi trebuit să examinați programul în interiorul unui browser Web pentru a vedea rezultatele. Răspunsul imediat al unui mediu de proiectare mobil, precum Dreamweaver, mărește considerabil fluxul activității, deoarece puteți vedea imediat, în timpul lucrului, dacă vă plac sau nu rezultatele obținute.

HTML cu dus-întors

Dreamweaver a câștigat o multime de aprecieri și de clienți loiali, datorită invenției numite HTML cu dus-întors (în original, round HTML). Acesta vă permite să modificați 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.

Interfața

Alte editoare HTML pe care le-am folosit impun deschiderea a mai multor ferestre si panouri de diferite dimensiuni pentru a obține accesul la toate caracteristicile. În schimb Dreamweaver folosește un sistemde panouri și ferstre fixe, care nu-și schimbă poziția, și modifica opțiunile de configurare în funcție de contextul acțiunii intreprinse. Astfel se realizează o economie de spațiu pe ecran și se facilitează foarte mult procesul de învățare a interfaței.

Interfața

Un tur al interfaței

Caracteristicile oferite de Dreamweaver sunt foarte complexe, dar interfața sa este, in realitate, foarte simplă. Acest program are șase componente principale: bara cu instrumente (Toolbar), bara de lansare a aplicațiilor (Launcher), panoul Objects, fereastra Document, bara Mini Launcher și inspectorul Property.

Panoul Objects

Panoul Objects conține rânduri cu pictograme de obiecte și este folosit ca punct de oprire (cu un clic) pentru numeroase operații. Dacă deplasațti mouse-ul deasupra panoului Objects și luați o scurtă pauză, veți vedea ce anume simbolizează fiecare pictogramă. Puteți modifica aspectul acestui panou din meniul Dreamweaver Preferences, dacă doriți să vedeți și numele abiectelor, în afara pictogramelor sau în locul lor.

Multe articole care se găsesc sub formă de obiecte există de asemenea sub meniul Insert, situat in bara superioară cu meniuri. Panoul Objects oferă posibilitatea utilizării unui singur clic de mouse în locul barei cu meniuri respective. În general unii se simnt mai bine când execută clic pe pictograme, în timp ce alții preferă accesul prin intermediul meniurilor.

Panoul Objects

Tipuri de obiecte

Similar cu numeroase bare cu instrumente folosite in Dreamweaver, panoul Objects este sensibil la context. În mod prestabilit, acesta afișează ceea ce Dreamweaver numeste obiecte de tip Common. Puteți modifica panoul Objects astfel încât acesta să afișeze și alte categorii de obiecte, atunci când aveți nevoie de acestea.

Cand mențineți indicatorul mouse-ului deasupra săgeții amplasate în partea de sus a panoului Objects, veți obseva ca aceasta are mențiunea Common, ceea ce înseamnă că în acest moment vedeți elementele de tip Common din această bară cu instrumente. Pentru ca programul să afișeze celelalte tipuri de obiecte, executați clic și mențineți apăsat butonul mouse-lui pe săgeata meniului pop-up. Veți vedea o listă a celorlalte panouri, denumite Characters (caractere), Forms (formulare), Frames (cadre), Head, Invisibles (invizibile) și Special.

Inspectorul Property

Similar panoului Objects, inspectorul Property este sensibil la context, ceea ce înseamnă că își modifică în mod constant conținutul în funcție de tipul elementului selectat.

Inspectorul Property controlează numeroși parametri, inclusiv cei pentru text, tabele, aliniere, imagini. Deoarece Dreamweaver inserează în mod prestabilit o pagină fără conținut, unde se găsește un simbol clipitor pentru inserare de text, inspectorul Property afișează în mod prestabilit

proprietățile unui text.

Inspectorul Property

Conținutul Inspectorului Property se modifica în funcție de ceea ce este editat pe ecran. Deoarece aceste elemente se modifică în funcție de context.

Bara Launcher și Mini-Launcher

Bara Launcher vă permite să obțineți 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 (comportări), History (istoric) și Code Inspector (inspector de program) ale interfaței.

Bara Launcher

Amplasare bară Mini-Launcher

Bara Mini-Launcher, situată în partea inferioară a ecranului, funcționează la fel ca bara Launcher .

Personalizare barei Launcher

La deschiderea programului Dreamweaver, bara Launcher va conține opțiunile prestabilite. Dacă descoperți că nu utilizați frecvent unele opțiuni sau că alte opțiuni lipsesc, puteți modifica opțiunile ce apara în bara Launcher, cât și în Mini-Launcher, selectând Edit > Preferences… > Panels > Show in Lancher. Puteți elimina opțiunile existente prin evidențierea lor și executare unui clic pe semnul minus (-). Prin executarea unui clic pe plus (+), va fi afișată o listă cu opțiuni care pot fi atașate la ambele bare de lansare.

Ordinea opțiunilor selectate poate fi modificată cu ușurință prin evidențierea unei opțiuni și executarea unui clic pe săgețile orientate în sus, respectiv în jos.

Scurtături pentru barele Launcher

Toate caracteristicile barelor Launcher sunt disponibile ca articole sub meniul Window.

De asemenea, scurtăturile cu taste funcționale prezentate în continuare sunt valabile atât utilizatorilor de sisteme Mac, cât și pentru cei care folosesc Windows.

Bara de instrumente

În acest moment puteți opține acces la numeroase opțiuni de care aveți nevoie direct din bara de instrumente, o caracteristică nouă în Dreamweaver 4. Bara cu instrumente coține 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.

Bara de instrumente

Fereastra Document

Fereastra Document este teatrul de desfășurare a tuturor operațiunilor . 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 când este vizualizată in Netscape Navigator sau Internet Explorer. La deschiderea aplicației, atât pe sistemele Mac cât și în Windows, Dreamweaver va crea un document fără conținut și fără titlu (Untitled Document) la fiecare deschidere a aplicației. În mod prestabilit, fereastra Document se va afla în modulul de vizualizare Design.

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 colțul din stânga-sus al ferestrei document vă permit să comunicați în cele trei moduri de vizualizare diferite.

Mod de Mod de vizualizare Mod de vizualizare

vizualizare Code Code and Design Design

Preferințe

Există numeroase preferințe (Preferences) pe care le puteți modifica, pentru a transforma Dreamweaver în propriul dumneavoastră editor HTML personalizat. Acești parametri pot fi modificați în orice moment. Pentru a obține accesul la caseta de dialog Prefernces selectați Edit > Preferences… Sub categoria General există parametri care determină aspectul și modul de funcționare a programului Dreamweaver în asamblu.

Meniu Preferințe

Editoare externe

Puteți 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.

Editoare Externe

Dimensiuni predefinite ale ferestrelor

Unul din dezavantajele proiectarii in Web este acela că aspectul paginii se va modifica în funcție de dimensiunile monitorului care o afișează. Dreamweaver dispune de o caracteristică utilă – și anume opținea Window Sizes (dimensiuni ale ferestrelor) – care contribuie la o proiectere mai precisă pentru o anumită dimensiune a monitorului.

Meniu dimensiuni ferestre

Meniul Windows Size ofera o diversitate de dimensiuni predefinite pentru fereastra Document. De exemplu, dacă dorim să proiectăm 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ă configurație. Astfel, vom putea vizualiza mai ușor 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)

Controlul siturilor

Cei care au mai construit situri Web vor fi de acord ca gestiunea fișierelor este una dintre cele mai mari probleme ale acestui mediu. Gestiunea fișierelor constă din organizarea , structura dosarelor și convențiile de denumire pentru toate paginile și obiectele din site-ul Web.

Puține alte discipline necesită crearea simultană a unui număr atât de mare de documente, deoarece paginile Web sunt alcătuite , de obicei, din numeroase fișiere de text și imagine.

Pentru a reduce dificultatea de a gestiona un număr foarte mare de fișiere, majoritatea dezvoltatorilor își construiesc siturile Web pe hard-disc, iar dupa ce au terminat încarcă aceste fișiere pe un server Web, astfel încât fișierele să poată fi vizualizate din Internet.

Fereastra unui site

Ce este un dosar rădăcină local?

Dreamweaver folosește o schemă de gestionare a siturilor care impune păstrarea tuturor fișierelor în interiorul unui dosar rădăcină local principal, pentru a putea reproduce cu ușurință ierarhia de dosare de pe hard – disc atunci când încărcăm fișierele intr-un server Web. Un dosar rădăcină local este asemănător cu oricare alt dosar de pe hard-disc, cu excepția faptului că i-am indicat programului Dreamweaver că în acest dosar se găsesc toate fișierele HTML și fișierele media aferente sitului.

Un dosar rădăcină local poate conține multe sub-dosare, dar Dreamweaver nu poate păstra evidența elementelor dacă acestea nu sunt stocate în dosarul rădăcină local.

Definirea unui site

Caracteristica programului Dreamweaver de gestiune ale siturilor va cataloga toate fișierele din cadrul acestui dosar prin construirea unui fișier cache de sit – un mic fișier care conține informații despre locația și numele tuturor fișierelor și dosarelor din sit.

Deschidem Dreamweaver și apăsăm tasta F8 pentru a deschide fereastra Site. Din meniul pop – up, selectăm Define Sites… (definire situri). Astfel, se va deschide fereastra Definition.

Fereastra Site Definition

În câmpul Site Name (numele sitului) tastăm numele sitului.

Gestiunea fișierelor și dosarelor

Din interiorul ferestrei Site a programului Dreamweaver, putem crea dosare și fișiere noi, respectiv le putem muta dintr-un catalog în altul. La executarea acestei operații, de fapt adăugăm dosare și fișiere pe hard – disc. Accesul din interiorul programului Dreamweaver la unitatea de disc este esențial pentru operațiile de gestiune a siturilui, deoarece în acest mod Dreamweaver va putea păstra evidența locației unde au fost mutate fișierele sau unde au fost adăugate fișiere noi.

Crearea hărții unui sit

Crearea unei hărți de sit reprezintă o excelentă modalitate de a examina structura sitului Web, deoarece vă permite să vizualizați diferite niveluri ale sitului Web, precum și elementele componente ale acestor niveluri. Dreamweaver poate crea cu ușurință harți de sit și le poate transforma în fițiere PICT sau JPEG (Mac), respectiv BMP sau PNG (Windows).

Harta unui sit în Windows

Din fereastra Site, selectăm File > Save Site Map..

Legături

O caracteristică importantă este Point to File, care vă permite să indicați un fișier în cadrul ferestrei Site și să creați legături pe baza selecției. Această caracteristică este utilă deoarece vă obligă să selectați fișiere plasate numai în interiorul dosarului rădăcină localal sitului, ceea ce asigură integritatea legăturilor. Pe lângă crearea legăturilor cu fișierele HTML , mai puteți folosi Point to File și pentru a selecta noi fișiere imagine și pentru a le inlocui pe cele deja existente.

Un alt tip de lagături este legătura de tip poștă electronică. Acest tip special de legătura lansează programul de e-mail al utilizatorului final și introduce în mod automat adresa destinatarului.

Aplicarea 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 puteți 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.

Panou culori

Tabele

Tabele HTML au fost introduse în versiunea 1.2 a browserului Netscape Navigator ca modalitate de a afișa ș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 rânduri definite. Inginerii HTML care au creat tabelele pentru Web nu au anticipat faptul că toți dezvoltatorii vor folosii tabele pentru alinierea imaginilor, nu numai pentru afișarea textelor și a valorilor numerice.

Acest capitol prezintă modul de creare a tabelelor personalizate, de inserare a rândurilor și a coloanelor, de creare a propriilor scheme de culori, precum și de executare a operațiilor de formatare și sortare. Tabelele reprezintă un element esențial în „caseta” cu instrumente de proiectare în Web, iar Dreamweaver asigură un control strict asupra acestora și pune la dispoziție tehnici de manipulare avansată.

Ce este un tabel?

Un tabel este o caracteristică extrem de flexibilă a mediului HTML. Tabelele pot fi utilizate pentru organizarea datelor sau poziționarea imaginilor. Un tabel este compus dintr-o combinație 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 implementării acestei caracteristici , era necesară copierea și lipirea manuală a fiecărui tabel. În prezent sortarea tabelelor în Dreamweaver se realizează folosind o simplă casetă de dialog.

Meniu sortare tabele

Caseta de dialog Sort Table

Caseta de dialog Sort Table dispune de o diversitate de opțiuni care vă ajută să modificți aspectul tabelelor. O explicație a tuturor caracteristicilor acestei casete de dialog este dată în tabelul următor:

Modificarea schemei de culori

În lista operațiilor necesare construirii unui tabel, următoarea este aplicarea culorilor ca element de formatare .

Dacă din meniul derulant se alege o opține se va observa că tabelul din mijloc își va schimba culorile atunci când se execută clic pe diferite scheme de formatare.

Crearea și modificarea unui tabel

Această opțiune ne va ajuta să descoperim numeroasele opțiuni aferente lucrului cu tabelele. Pentru a crea un tabel vom avea nevoie de o combinație intre obiectul Insert Table, meniul Modify > Table și inspectorul Property.

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.

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 conține o sută de pagini și am vrea să plasăm aceeași imagine la baza fiecăreia dintre aceste pagini, ar fi necesar să intersectăm 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 încărcarea imaginii în alte o sută de pagini HTML.

Cap. 4 Aplicație

Atunci când proiectați un site simplu pentru o singură pagină Web, în scopul de a-l utiliza personal, nu este nici o problemă dacă pagina se dezvoltă pe măsură ce experimentați. Însă atunci când proiectăm un site mult mai complex trebuie să elaborăm un plan de concepere a paginii Web.

Ca aplicație se prezintă o pagină a unui deputat menită să țină legătura cu electoratul.

Structura sitului este simplă, toate paginile sunt accesate dintr-un meniu plasat în partea stângă a fiecărei pagini.

Ținând cont de faptul că nu toate browserele pot afișa frame-uri, s-a optat ca paginile să fie organizate sub formă de tabel în care se aranjează conținutul paginilor.

Ca o recomandare, rezoluția minimă să fie 800 x 600 x 16, fiind necesar totodată pentru vizionarea paginilor trebuie să fie instalat și Macromedia Flash Player 6, meniul fiind construit în Macromedia Flash MX pentru un design mai deosebit.

Un preview al primei pagini al aplicației se poate vedea in pagina următoare:

Cap. 5 Concluzii

Avantaje față de alte programe

Dreamweaver 4 este primul editor HTML carea câștigat foarte multă simpatie fațtă de programatorii Web prin faptul că nu sunt obligați să scrie liniile de program „ curate ’’ , lipsite de o mulțime de etichete brevetate care se auto – deservesc, și le permite să realizeze o machetare vizuală fără a înțelege măcar o line de program.

O nouă modalitate care simplifică foarte mult crearea butoanelor derulante ( acest tip de buton impune utilizarea a patru imagini, câte una pentru fiecare stare ), în Dreamweaver 4 s-a adăugat o caracteristică de inserție a barelor de navigare (Insert Navigation Bar) .

Bibliografie

Macromedia Dreamweaver 4 – Garo Green, Lynda Weinman

Notițe de curs HTML – Nicu Bâzdoacă

www.macromedia.com

www.javascript.internet.com

Crearea paginilor web cu HTML 4.0 – Dave Taylor