Informatica economica

Liviu Dumitraşcu

Informatică economică

2005

Cuprins

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

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

01 Principii şi reguli generale pentru crearea unui site Web

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

□ Principii de calitate

Pentru a realiza un site de succes, vă recomandăm să aplicaţi câteva din principiile care stau la baza creării site-urilor Web de calitate. Figura 1

Principii Descriere Calitatea vizuală Paginile site-ului dumneavoastră trebuie să fie clare.

Dacă vizitatorul dumneavoastră se simte atras de site-ul pe care l-aţi realizat, cu siguranţă că el va reveni. O pagină bine făcută este întotdeauna mai agreabilă decât o pagină ternă şi anostă. Dacă informaţia în sine este capitală pentru un vizitator, atunci prezentarea nu va avea nici o importanţă.

Uşurinţa navigării Vizitatorul trece de la o pagină la alta a site-ului utilizând legături hipertext. În consecinţă, va trebui să evitaţi situaţiile neplăcute când vizitatorii se pot rătăci în site-ul pe care l-aţi creat. Concepţia site-ului dumneavoastră trebuie să favorizeze căutarea informaţiilor. Vizitatorul trebuie să ajungă rapid la informaţiile care-l interesează, iar returul la pagina de index (prima pagină) trebuie să se realizeze cât mai simplu cu putinţă.

Utilizarea tehnologiilor multimedia

Cea mai mare parte a sistemelor de operare utilizează tehnologiile care favorizează dezvoltarea aplicaţiilor multimedia (video, sunet). Folosiţi aceste tehnologii pentru a vă atrage şi mai mult vizitatorii. Rămâneţi sobri! Evitaţi elementele multimedia care prezintă mai multe dezavantaje decât avantaje. Utilizaţi cu discernământ

2

„animaţiile gif”, script-urile Java Script, VB Script sau applet-urile Java.

Interesul pedagogic Respectând principiul că un vizitator nu rămâne mai mult de 15 secunde pe un site, este bine să-i oferiţi informaţii de ultimă oră pentru a-l putea convinge să rămâneţi împreună.

Calitatea surselor de informare

Fiţi întotdeauna oneşti! Informaţiile pe care le furnizaţi trebuie să fie corecte! Erorile sau falsurile vor descalifica site-ul dumneavoastră!

□ Reguli generale

Dacă Internet-ul, în general, şi Web-ul, în particular, pot părea ca zone libere, în care toată lumea poate face ce vrea, în realitate lucrurile nu stau chiar aşa. Ca dovadă stau câteva reguli elementare pe care este bine să le aplicaţi în activitatea de creare a site-urilor Web de calitate:

Creaţi un storyboard al site-ului. Definiţi modul de navigare între paginile site-ului. Definiţi structura fiecărei pagini Web – titlu, subiect, concluzii. Alegeţi un subiect care să trezească interes. Nu prezentaţi informaţii false. Respectaţi legislaţia în vigoare, drepturile de autor. Actualizaţi în mod regulat paginile site-ului.

□ Regulile de ... aur ale paginilor Web

Înainte de a începe crearea unei pagini Web, este important să cunoaşteţi câteva din regulile de aur ale paginilor Web pe care este bine să le şi aplicaţi (figura 2). Figura 2 Reguli pentru ... Descriere Pagina de primire (index)

Este prima pagină a unui site. Numiţi pagina de primire (index) index.htm sau

index.html. Trebuie să conţină un rezumat succint al site-ului

şi/sau un sumar. În cazul ideal, ea trebuie să conţină o prezentare

scurtă a proprietarului site-ului.

3

Alte pagini Fiecare pagină trebuie să înceapă cu informaţii importante (esenţiale).

Formatul A4 nu are nici o semnificaţie pe Web. Nu publicaţi o pagină în curs de realizare! Actualizaţi în mod regulat paginile. Gândiţi-vă la persoanele care dezactivează afişarea

imaginilor în navigatorul acestora. Trebuie ca tot timpul pagina să fie grăitoare, iar textul suficient de explicit fără imagini.

Utilizaţi fişiere de dimensiune minimală pentru ca vizitatorul să nu aştepte minute în şir apariţia paginii întregi pe ecran.

Text Structuraţi textul utilizând titluri de nivele diferite. Pentru a garanta o bună lizibilitate, utilizaţi cel mult

două sau trei fonturi diferite. Verificaţi corectitudinea tuturor informaţiilor pe care

le-aţi menţionat.

Inserarea şi formatarea textului sunt prezentate în capitolul 4.

Foi de stiluri CSS (Cascading Style Sheets)

Utilizaţi foile de stiluri CSS, deoarece ele reprezintă cel mai sigur şi cel mai uşor mod de formatare a documentelor HTML.

Utilizaţi foile de stiluri CSS pentru a putea crea o mai mare flexibilitate între paginile unui site Web.

Utilizaţi foile de stiluri CSS pentru a reduce timpii de încărcare şi de mentenanţă ai paginilor Web.

Utilizaţi foile de stiluri CSS interne pentru a crea stiluri CSS în pagina curentă.

Utilizaţi foile de stiluri CSS externe (salvate ca un fişier separat) pentru a folosi aceleaşi stiluri CSS în pagini diferite.

Foile de stiluri CSS sunt tratate în capitolul 5. Imagini Respectaţi copyright-ul. Nu folosiţi imagini fără acordul

proprietarului! Evitaţi imaginile de dimensiuni mari. Imaginile sunt

mari consumatoare de octeţi! Din acest motiv, ele necesită mult timp pentru a putea fi încărcate şi, în consecinţă, pot descuraja vizitatorii!

Realizaţi o versiune în miniatură a imaginii pe care apoi vizitatorul să o poată mări la dimensiunile reale.

4

Creaţi propriile imagini cu programe dedicate. Retuşaţi imaginile cu programe dedicate (Macromedia

Fireworks, Graphic Converter, Paint Shop Pro etc.). Plasaţi textul înaintea imaginilor. Astfel, în momentul

încărcării imaginilor, vizitatorul poate începe să citească textul în timp ce imaginile se încarcă.

Asiguraţi-vă că paginile dumneavoastră Web rămân inteligibile şi atractive şi, în absenţa imaginilor. O parte din vizitatorii site-ului dumneavoastră fie nu pot, fie aşteaptă să nu descarce imaginile atunci când vizitează paginile Web. În consecinţă, în locul imaginilor, adăugaţi un text explicativ.

Refolosiţi imaginile ori de câte ori este posibil. Există numeroase site-uri care vă pot oferi, în mod

gratuit, biblioteci de imagini. Nu ezitaţi să le folosiţi! Folosiţi tabelele pentru plasarea exactă a imaginilor în

cadrul unei pagini Web. Creaţi un folder special în care plasaţi toate imaginile

pe care doriţi să le inseraţi în paginile dumneavoastră Web.

Imaginile sunt prezentate în capitolul 6. Legături Fiecare pagină a site-ului trebuie să fie prevăzută cu o

legătură hipertext de retur către pagina de index (pentru a nu vă „pierde” vizitatorii!).

Evitaţi sublinierea textelor care nu sunt legături hipertext.

Asociaţi legăturilor hipertext texte implicite. Propuneţi un plan al site-ului, o vizită ghidată sau un

sumar, pentru ca vizitatorii să poată accesa rapid teme, subiecte care prezintă interes.

În paginile relativ lungi, folosiţi legăturile hipertext bazate pe ancore.

Legăturile sunt prezentate în capitolul 7. Tabele Listaţi toate datele înainte de a fi inserate în tabel.

Definiţi structura tabelului (titlul tabelului, capul de tabel etc.).

Realizaţi un crochiu al viitorului tabel pentru a putea justifica aspectul acestuia.

Tabelele sunt prezentate în capitolul 8.

5

Formulare Stabiliţi conţinutul formularului şi forma de prezentare. Identificaţi informaţiile ce urmează a fi incorporate în

formular şi stabiliţi forma de prezentare a acestora. Structuraţi aceste informaţii în mai multe întrebări

elementare, uşor de prelucrat. De exemplu, dacă aceste informaţii se referă la un client, puteţi să le structuraţi în: nume, prenume, adresă, existând astfel posibilitatea efectuării unor sortări pe anumite zone particulare ale formularului.

O bună proiectare a formularului vă va scuti de posibile reveniri, modificări! Un formular bine conceput nu poate decât să încurajeze utilizatorii în a vă transmite informaţiile dorite.

Verificaţi dacă obiectivele propuse se verifică cu răspunsurile la următoarele întrebări: ce informaţii doriţi să obţineţi de la utilizator? Cât timp vor consuma utilizatorii pentru completarea formularului?

Încurajaţi utilizatorii să completeze şi apoi să expedieze formularele. Dacă formularele dumneavoastră sunt dificil de completat, riscaţi de a nu primi nici un răspuns! Oferiţi utilizatorilor dumneavoastră mici bonus-uri, chiar dacă valoarea acestora este nesemnificativă. Dacă aţi şti cât contează!

Interesul vizual al formularului nu trebuie să minimalizeze alte aspecte ale paginii; o utilizare judicioasă a culorilor, a alinierilor, imaginile de dimensiuni mici şi fonturile de caractere dau formularului mai mult ... relief!

Utilizaţi antet-uri pentru a anunţa fiecare nou grup de informaţii. În acest mod, utilizatorii se pot orienta mult mai uşor în formular.

Separaţi vizual grupurile de informaţii. În acest mod, utilizarea formularului va fi mult uşurată, întrucât secţiunile vor deveni mai scurte şi mai uşor de urmărit.

Scoateţi în relief, fără a exagera câteva cuvinte din pagină pentru a le pune în evidenţă.

Specificaţi modul în care utilizatorii trebuie să se deplaseze în formular.

Aveţi în vedere rezoluţia monitoarelor, coloanele multiple pe care le propuneţi în formularul

6

dumneavoastră şi nu doar atât. Folosiţi săgeţile pentru a ajuta utilizatorii să

navigheze în pagină, într-o anumită ordine. Utilizaţi rupturile de linie şi spaţiile pentru a obţine o

diferenţiere clară a informaţiilor de descriere asociate anumitor butoane (de exemplu, casetele de validare).

Specificaţi câmpurile care sunt opţionale şi cele care sunt obligatorii. Plasaţi câmpurile opţionale după câmpurile obligatorii. Anumite navigatoare şi aplicaţii de procesare rejectează formularele completate în mod incorect.

Utilizaţi o imagine de background. Plasaţi în stânga formularului zonele de date de

aceeaşi lungime. Textul se va alinia vertical şi va deveni mult mai agreabil.

Folosiţi următoarele câmpuri (controale) pentru colectarea datelor: butoane de tip submit şi reset; câmpurile de text; câmpurile de text multilinie; listele derulante; butoanele radio; casetele de validare.

Butoanele submit şi reset trimit server-ului informaţiile colectate în formular şi iniţializează formularul.

Câmpurile de text sunt zone simple de text. Utilizaţi-le pentru răspunsuri scurte, ca de exemplu: nume, adrese etc.

Câmpurile de text multilinie sunt zone mai mari de text, cu mai multe linii. În această zonă pot fi introduse comentarii, sugestii, instrucţiuni de livrare etc.

Listele derulante sunt câmpuri în care utilizatorii pot introduce o listă de opţiuni. Folosiţi-le pentru a prezenta liste lungi (dar finite) de opţiuni.

Butoanele radio oferă utilizatorilor posibilitatea de a selecta o singură opţiune (şi numai una!), de exemplu sexul (masculin sau feminin). Butoanele radio se exclud reciproc.

Casetele de validare permit utilizatorilor de a selecta una, nici una sau mai multe opţiuni din cadrul unei liste.

Atunci când alegeţi câmpurile pentru un formular, reflectaţi cu atenţie la informaţia pe care doriţi să o colectaţi. În general, butoanele radio, casetele de

7

validare şi listele derulante sunt preferate zonelor de text. Dacă utilizatorii aleg răspunsul lor dintr-o listă, nu veţi mai avea greşeli de ortografie, răspunsuri incoerente sau răspunsuri în afară de subiect. Această metodă este cea mai bună metodă atunci când este posibil să propuneţi o listă utilizatorilor!

Creaţi formularele manual sau cu editoarele

WYSISWYG. Puteţi crea manual formularele – cu limbajele

(X)HTML sau automat cu editoarele WYSIWYG („What You See Is What You Get”).

Utilizaţi un editor WYSIWYG (de exemplu, Dreamweaver) atunci când doriţi să creaţi mai multe formulare (de bază). Aceste editoare nu generează întotdeauna rezultate satisfăcătoare, dar ele vă permit să nu uitaţi nici un element sau atribut.

Utilizaţi (X)HTML (procedura manuală) atunci când creaţi unul sau două formulare. În acest caz, este mai bine să folosiţi procedura manuală (X)HTML, decât să învăţaţi modul de utilizare a unui editor WYSIWYG.

Semnaţi ... de primire! Realizaţi o pagină de confirmare de primire

(recepţie), un document pe care îl returnaţi utilizatorului, precizându-i că formularul a fost bine primit.

O pagină de confirmare de primire a unui formular poate conţine toate ideile dumneavoastră! Puteţi lega această pagină de pagina de index a site-ului dumneavoastră. Nu uitaţi că utilizatorul a alocat un fond de timp pentru a completa formularul dumneavoastră. Se impune o formă de respect, în acest sens!

Formularele sunt prezentate în capitolul 9. Cadre Indiferent dacă apreciaţi sau nu cadrele, site-urile Web

bazate pe cadre există şi vor mai exista! Teoretic nu există limitări în ceea ce priveşte numărul

de cadre. Cinci cadre sunt deja multe! Două cadre reprezintă numărul minim! Atenţie, însă, la gradul de

8

lizibilitate al ecranului!

Cadrele trebuie să permită o navigare uşoară cu una din metodele:

Utilizatorii pot executa clic pe un cadru şi vizualiza documentul obţinut în alt cadru.

Utilizatorii pot executa clic într-un cadru şi vizualiza documentul obţinut în acelaşi cadru.

Nu utilizaţi cadre numai de plăcerea de a utiliza cadre. Nu afişaţi bordurile cadrelor. Nu utilizaţi cadre atunci când tabelele sunt mai

indicate. Pentru a realiza o pagină mai atractivă, creaţi cadre

inline (flotante). Nu folosiţi cadre imbricate. Creaţi o alternativă pentru vizitatorii care posedă un

browser incapabil să afişeze cadrele. Folosiţi mesajul: „Acest site utilizează cadre şi necesită un navigator capabil să le afişeze”.

Nu folosiţi cadrele atunci când creaţi link-uri către alte site-uri.

Cadrele sunt prezentate în capitolul 10. Straturi Folosiţi straturile pentru poziţionarea precisă a

obiectelor într-o pagină Web. Folosiţi straturile pentru crearea unui conţinut dinamic

al paginilor Web. Folosiţi straturile imbricate (nested) pentru a crea

efecte de superpoziţie. Controlaţi conţinutul unui strat.

Straturile sunt prezentate în capitolul 11. Biblioteca de obiecte

Folosiţi bibliotecile de obiecte pentru a putea câştiga un timp preţios în activitatea de creare a paginilor Web.

Catalogaţi în bibliotecile de obiecte acele elemente din pagina dumneavoastră Web care se repetă cu regularitate în site-ul dumneavoastră: imagini, culori, animaţii, logo-uri, bare de navigare, coordonate poştale, URL-uri, tabele, texte, formulare etc.

Biblioteca de obiecte este prezentată în capitolul 12.

9

Modelele Utilizaţi modelele (şabloanele) ori de câte ori doriţi ca un număr mai mare de pagini să aibă acelaşi aspect, fără a mai trebui să construiţi separat conţinutul fiecăreia de mai multe ori.

Dacă modelele propuse de editoarele de tip WYSIWYG nu vă satisfac sau doriţi să realizaţi toate paginile unui site cu un tip de formatare definit, soluţia este aceea de a crea propriul model, iar apoi să-l aplicaţi paginilor site-ului dumneavoastră.

Modelele sunt prezentate în capitolul 12. Obiecte multimedia Pentru a utiliza un obiect multimedia, va trebui să aveţi

instalat pe calculatorul dumneavoastră plug-in-uri. Nu întotdeauna este uşor să obţineţi obiecte

multimedia de calitate. Prima soluţie este aceea de a crea dumneavoastră, cu forţe proprii, obiectele multimedia, dar va trebui să consacraţi o mare parte din timpul dumneavoastră acestei activităţi. A doua soluţie constă în căutarea obiectelor multimedia pe Web, dar înainte de a le utiliza, răspundeţi la următoarele întrebări:

Obiectul multimedia contribuie pozitiv la îmbunătăţirea conţinutului paginii Web?

Obiectul multimedia valorifică sau completează în mod eficient conţinutul paginii Web?

Navigatoarele utilizatorilor suportă obiectele multimedia pe care doriţi să le inseraţi?

Utilizatorii dispun de o conexiune Internet rapidă? Utilizatorii deţin cele mai bune plug-in -uri? Dispun ei

de timp şi de mijloace tehnice pentru a le obţine şi a le insera?

Utilizaţi legăturile hipertext pentru inserarea unui fişier

sunet extern. Oferiţi vizitatorilor site-ului şi posibilitatea unui control suplimentar asupra sunetului (volum, pauză, pornire etc.).

Creaţi propriile fişiere video sau căutaţi-le pe Web. Utilizaţi legăturile hipertext pentru inserarea fişierelor

video. În acest mod, utilizatorii pot decide singuri dacă vor sau nu vor să le vizioneze.

Pentru a anima sau pentru a insera obiecte interactive în pagina dumneavoastră Web, folosiţi applet-uri Java.

Obiectele multimedia sunt prezentate în capitolul 12.

10

Script-uri Pentru a mări gradul de interactivitate al paginilor Web, folosiţi JavaScript, limbajul favorit al creatorilor de site-uri Web.

Limbajul JavaScript este prezentat în capitolul 13. Ţineţi-vă bine pe Web!

Fiţi curtenitori şi politicoşi, respectaţi eticheta. Asiguraţi estetica paginilor dumneavoastră! Evitaţi

înfloriturile! Nu utilizaţi resurse pirat (imagini, text etc.) fără a fi

obţinut în prealabil copyright-ul! Privilegiaţi interactivitatea!

Fiţi universal, evitaţi pe cât posibil instrucţiunile specifice unui anumit tip de navigator.

Creaţi o legătură (link) de tip mailto, pentru ca vizitatorii să poată să vă expedieze cu uşurinţă un e-mail.

Prevedeţi un FAQ (Frecquently Asked Questions). Astfel, nu va trebui să răspundeţi de mai multe ori la întrebări puse în mod frecvent.

__________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

11

02 Crearea şi gestionarea unui site Web cu Dreamweaver MX 2004

În acest capitol: � Dreamweaver MX 2004, un editor de tip WYSIWYG � Interfaţa Dreamweaver MX 2004 � Metode de creare a site-urilor Web cu Dreamweaver MX 2004 � Gestionarea unui site Web � Crearea unei pagini Web � Gestionarea paginilor Web � Proprietăţile unei pagini Web �

□ Dreamweaver MX 2004, un editor de tip WYSIWYG

Dreamweaver MX 2004 este cel mai puternic şi complet soft pentru crearea site-urilor Web.

Dreamweaver MX 2004 este un editor de tip WYSIWYG („What You See Is What You Get”), care impresionează prin simplitatea utilizării sale şi prin bogăţia facilităţilor pe care le oferă.

Funcţiile de editare vizuală permit crearea rapidă a paginilor Web fără a fi nevoiţi să scrieţi nici o linie de cod HTML (bucuria de moment a debutanţilor care nu au cunoştinţe HTML!).

Dreameaver MX 2004 permite crearea unei noi generaţii de aplicaţii Internet, într-un timp foarte scurt şi cu o uşurinţă dezarmantă.

Dreameaver MX 2004 generează cod HTML foarte apropiat de standardul impus de W3C (World Wide Web Consortium), ceea ce i-a atras popularitatea.

Dreamweaver MX 2004 integrează toate facilităţile necesare creării site-urilor dinamice cu ajutorul tehnologiilor ASP, ASP.net, JSP, ColdFusion sau PHP.

12

□ Interfaţa Dreamweaver MX 2004 ► Pagina de demaraj

Lansaţi aplicaţia Dreamweaver MX 2004. Pe ecranul dumneavoastră se va afişa caseta de dialog Workspace Setup.

În caseta de dialog Workspace Setup, alegeţi tipul de interfaţă cu care doriţi să lucraţi (figura 1). Figura 1

Optaţi pentru interfaţa clasică Designer (activaţi butonul radio Designer, iar

apoi executaţi clic pe butonul ).

Designer – este interfaţa clasică implicită în care toate ferestrele documentului şi toate panourile sunt reunite în interiorul unei singure ferestre. Grupurile de panouri sunt afişate în dreapta ferestrei.

Coder – Coder este o interfaţă destinată programatorilor (Coder afişează paginile în cod HTML).

13

Pagina de demaraj (Macromedia Dreamweaver MX 2004) se găseşte în partea stângă a ecranului principal (figura 2). Ea reprezintă o noutate a versiunii MX 2004. Figura 2

Pagina de demaraj permite: deschiderea unui document cu care aţi lucrat recent (opţiunea Open a Recent Item); crearea unei noi pagini vide (opţiunea Create New); crearea unei noi pagini pornind de la un model (opţiunea Create from Samples). ► Ferestrele Ecranul principal

La prima vedere, ecranul care se afişează (figura 3) poate părea descurajant! Funcţiile Dreamweaver se ascund în panouri, în bare de instrumente şi în casete de dialog.

14

Figura 3

În partea dreaptă a ecranului se poziţionează panourile care permit accesul

rapid la funcţiile Dreamweaver MX 2004. Aceste panouri pot fi mascate

executând un simplu clic pe separatorul de ecran . Spaţiul rezervat panourilor

poate fi redus sau mărit (executaţi clic şi glisaţi bara de separare ).

La baza ecranului se poziţionează panoul Properties, cunoscut şi sub numele de Inspectorul de Proprietăţi. Panoul Properties permite vizualizarea şi modificarea proprietăţilor unui obiect al paginii (text, tabel, imagine etc.).

______________________________________________________________

15

► Panourile

Toate panourile sunt accesibile din meniul Window. Ele permit un acces rapid la funcţiile esenţiale Dreamweaver MX 2004.

Panourile sunt afişate în partea dreaptă a ecranului, în grupe de panouri. Pentru a afişa / masca rapid toate panourile, activaţi tasta F4.

Panoul Properties (figura 4) joacă un rol fundamental în activitatea de realizare a site-urilor Web. Parametrii de formatare ai panoului Properties se actualizează în funcţie de obiectul selectat în pagină. În mod implicit, panoul Properties se afişează la baza ecranului. Figura 4

► Barele Bara de titlu

Situată în partea de sus a ferestrei, bara de titlu este comună tuturor aplicaţiilor Windows (figura 5): Figura 5

Bara de meniuri

Situată sub bara de titlu, bara de meniuri conţine 10 meniuri principale, iar fiecare meniu cuprinde o listă de comenzi (figura 6): Figura 6

16

Bara de instrumente Document

Plasată imediat deasupra ferestrei Document (figura 7), această bară (poate fi detaşată!) conţine icon-uri şi un meniu derulant care permit accesarea rapidă a diferitelor moduri de afişare a ferestrei Document – Code, Design, Code and Design; administrarea fişierelor; vizualizarea paginii Web într-un navigator; afişarea / mascarea diferitelor instrumente (Rulers, Grid etc.) de ajutor pentru poziţionarea elementelor în pagină etc. Figura 7

Bara de instrumente Standard

Plasată imediat sub bara de instrumente Document sau deasupra ferestrei Document, bara de instrumente Standard nu este afişată în mod implicit. Bara de instrumente Standard (poate fi detaşată!) conţine icon-uri (figura 8) care permit accesul rapid la diferite comenzi de gestiune a paginilor Web (Open, Close, Save, New), cât şi cunoscutele icon-uri (Copy, Cut, Paste). Figura 8

Bara (de instrumente) Insert

Noutate a versiunii MX 2004, bara Insert înlocuieşte panoul Insert din versiunile precedente.

Plasată imediat sub bara de meniuri (figura 9), bara Insert conţine icon-uri şi un meniu derulant care permit accesarea rapidă a diferitelor tipuri de fişiere, crearea legăturilor hipertext, a ancorelor numite, tabelelor, imaginilor, datei calendaristice, cadrelor, modelelor etc. Figura 9

Bara Insert conţine 8 categorii: Common, Layout, Forms, Text, HTML,

Application, Flash elements, Favorites. Ele pot fi afişate în două moduri: prin

17

intermediul meniului derulant situat în stânga barei Insert (figura 10); prin intermediul comenzii Show as Tabs din meniul derulant al barei Insert (figura 11). Figura 10

Figura 11

Bara de stare

Situată în partea inferioară a ferestrei documentului (figura 12), bara de stare afişează următorii parametrii: codul HTML (selectorul de tag-uri); dimensiunea ferestrei; dimensiunea documentului şi timpul de încărcare. Figura 12

► Alegerea navigatoarelor

Este obligatoriu să vizualizaţi paginile dumneavoastră Web în unul sau mai multe navigatoare, deoarece fiecare browser interpretează codul HTML în manieră proprie.

18

Cu Dreamweaver MX 2004 puteţi alege navigatorul în care doriţi să afişaţi şi să verificaţi paginile dumneavoastră Web, cu una din metodele:

Meniul Edit, via Edit Preferences categoria Preview in Browser.

Bara de instrumente Document, via butonul Edit Browser List... . Se afişează fereastra Preview in Browser.

Pentru a adăuga un navigator, efectuaţi următoarele operaţii:

1. În fereastra Preview in Browser executaţi clic pe butonul .

2. În caseta de dialog care se afişează (Add Browser), introduceţi în câmpul Name numele navigatorului, iar în câmpul Application introduceţi calea de acces către aplicaţie sau executaţi clic pe butonul .

Pentru a vizualiza paginile Web într-un browser, folosiţi una din metodele:

Meniul File, via Preview in Browser... alegeţi navigatorul.

Bara de instrumente Document, via butonul Preview / Debug in Browser List alegeţi Preview in <numele navigatorului> .

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

Pentru a crea un site Web cu Dreamweaver MX 2004, folosiţi una din metodele:

Basic. Advanced.

Prezentăm în continuare metoda Advanced (metoda Basic cere mai puţină

informaţie tehnică decât metoda Advanced).

Pentru a crea un site Web cu metoda Advanced, parcurgeţi paşii prezentaţi în figura 13: Figura 13

Metoda Advanced (avansată) Fereastra de demaraj Meniul Site Panoul Files

1. Executaţi clic pe

1. Executaţi clic pe Site Manage Sites New… Site…

1. Selectaţi în lista

derulantă , iar apoi executaţi clic pe New Site.

19

Remarcă. Se deschide caseta de dialog Site Definition for….

2. Activaţi Advanced. Remarcă. Pentru moment numai categoria Local Info prezintă interes.

3. Tastaţi numele site-ului în câmpul Site name.

4. În câmpul Local root folder tastaţi calea de acces sau executaţi clic pe icon-ul pentru a selecta de pe hard discul dumneavoastră folder-ul care conţine

toate fişierele site-ului.

5. Opţiunea Refresh local file list automaticcaly permite actualizarea în mod automat a fişierelor în repertoriul local atunci când faceţi copii în folder-ul local.

6. Câmpul Default images folder vă permite să indicaţi în ce folder al folder-ului rădăcină local vor putea fi stocate toate imaginile site-ului dumneavoastră.

7. Câmpul HTTP address vă permite să indicaţi adresa (http://...) de publicare a site-ului în cazul în care doriţi ca Dreamweaver MX 2004 să verifice aceste legături.

8. Lăsaţi activată opţiunea Enable Cache care permite ca Dreamweaver MX 2004 să creeze un fişier de cache pentru a verifica şi a administra rapid legăturile site-ului dumneavoastră şi funcţionalităţile panoului Actifs.

9. Executaţi clic pe butonul iar apoi executaţi clic pe butonul

.

20

□ Gestionarea unui site Web ► Panoul Files

Panoul Files permite administrarea rapidă a site-ului şi a conţinutului său. Pentru a afişa panoul Files (figura 14), executaţi clic pe Window Files.

Figura 14

► Deschiderea unui site

Pentru a deschide un site, executaţi dublu clic pe folder-ul site-ului în panoul Files, sau utilizaţi pagina de demaraj (categoria Recent Item Open), sau utilizaţi bara de instrumente Standard (butonul Open). ► Modificarea parametrilor unui site

Pentru a modifica parametrii unui site, efectuaţi următoarele operaţii în caseta de dialog Manage Sites.

1. Afişaţi caseta de dialog Manage Sites, via Site Manage Sites.

2. În caseta de dialog Manage Sites, efectuaţi operaţiile descrise în continuare (figura 15).

21

Figura 15

2.1. În lista site-urilor, selectaţi site-ul corespunzător.

2.2. Executaţi clic pe butonul pentru a modifica diferiţi parametrii ai site-ului.

2.3. Executaţi clic pe butonul pentru a copia site-ul selectat.

2.4. Executaţi clic pe butonul pentru a suprima site-ul selectat.

2.5. Executaţi clic pe butonul pentru a converti site-ul în format XML (Extensible Markup Language).

2.6. Executaţi clic pe butonul pentru a crea un nou site pornind de la caracteristicile unui alt site exportat.

3. Executaţi clic pe butonul .

_______________________________________________________________________________________________________________________________

22

□ Crearea unei pagini Web Dreamweaver MX 2004 vă permite să creaţi mai multe tipuri de pagini pentru Web (vezi pagina de demaraj Macromedia Dreamweaver MX 2004, categoriile Create New şi Create from Sample). ► Inserarea unei pagini vide

Pentru a insera o pagină vidă (goală), folosiţi una din metodele prezentate în figura 16. Figura 16

Pagina de demaraj

Bara de instrumente Standard

Meniul File

1. În pagina de demaraj, în rubrica Create executaţi

clic pe .

1. Dacă pagina de demaraj nu este afişată, în bara de instrumente Standard executaţi

clic pe butonul (New).

1. Executaţi clic pe File New.

Remarcă. Se afişează caseta de dialog New Document.

2. În fereastra New Document efectuaţi următoarele

23

operaţii:

2.1. Executaţi clic pe General (opţiune selectată în mod implicit).

2.2. În lista Category executaţi clic pe Basic page.

2.3. În lista Basic page executaţi clic pe HTML.

2.4. Dacă doriţi ca Dreamweaver MX 2004 să genereze cod XHTML, activaţi opţiunea Make document XHTML compliant.

2.5. Executaţi clic pe butonul . Remarcă. În fereastra de lucru se afişează o nouă pagină (goală).

Remarcă. Cât timp pagina nu este salvată, ea nu apare în panoul Site. ► Importarea unei pagini

Pentru a importa o pagină dintr-o altă aplicaţie HTML (Front Page, Go Live etc.), afişaţi caseta de dialog Open (via meniul File sau pagina de demaraj), iar apoi selectaţi folder-ul corespunzător şi executaţi clic pe butonul Open. ► Utilizarea modelelor Dreamweaver MX 2004

Pentru a crea rapid o pagină Web deja formatată, puteţi apela la modelele oferite de Dreamweaver MX 2004, via pagina de demaraj Create from Samples sau New Document Page Designs.

Mai multe informaţii despre modele găsiţi în capitolul 12.

24

□ Gestionarea paginilor Web ► Salvarea unei pagini

Pentru a salva o pagină Web, efectuaţi următoarele operaţii:

1. Executaţi clic pe File Save As.

2. În caseta de dialog Save As care se afişează, în câmpul File name introduceţi numele paginii, iar apoi executaţi clic pe butonul (figura 17).

Figura 17

► Închiderea unei pagini

Pentru a închide o pagină Web, executaţi clic pe File Close sau în bara de instrumente Standard executaţi clic pe butonul (Close). ► Deschiderea unei pagini

Pentru a deschide un document (creat, salvat), folosiţi una din metodele prezentate în detaliu în figura 18.

25

Figura 18

Meniul File Bara de instrumente Standard

Panoul Files

1. Executaţi clic pe File Open.

1. În bara de instrumente Standard, executaţi clic pe

butonul (Open).

1. În panoul Files (via Window Files), executaţi clic pe fişierul pe care doriţi să-l deschideţi.

Remarcă. Se afişează caseta de dialog Open.

2. În caseta de dialog Open executaţi clic pe fişierul pe care doriţi să-l deschideţi (după ce aţi selectat folder-ul corespunzător în câmpul Look in:).

Remarcă. Pentru a deschide rapid o pagină acţionaţi simultan tastele Ctrl+O. ► Ştergerea unei pagini

Pentru a şterge o pagină (din diverse motive!), în panoul Files, selectaţi pagina, iar apoi executaţi clic pe butonul . ► Tipărirea unei pagini

Pentru a tipări o pagină Web, efectuaţi următoarele operaţii:

1. Afişaţi pagina într-un browser.

2. În meniul File al browser-ului, executaţi clic pe Print.

3. În caseta de dialog Print care se afişează, selectaţi (eventual!) opţiunile de

imprimare, iar apoi executaţi clic pe butonul pentru a lansa operaţia.

□ Proprietăţile unei pagini Web ► Caseta de dialog Page Properties

În momentul în care v-aţi decis să creaţi o pagină Web, este bine să începeţi prin a defini proprietăţile paginii, folosind caseta de dialog Page Properties (figura 19).

Pentru a afişa caseta de dialog Page Properties: executaţi clic pe Modify Page Properties sau în inspectorul Properties, executaţi clic pe butonul

.

26

Figura 19

► Atribuirea unui titlu

Nu confundaţi numele paginii cu titlul paginii. Numele paginii corespunde celui pe care l-aţi indicat atunci când aţi salvat pentru prima dată documentul, pe când titlul este cuvântul (fraza) care se va afişa în bara de titlu a navigatorului.

Pentru a atribui un titlu paginii Web, folosiţi una din următoarele metode:

Meniul Modify Page Properties Title/Encoding. Inspectorul Properties butonul Title/Encoding.... Bara de instrumente Document zona Title.

► Definirea elementelor background-ului

În background-ul unei pagini puteţi aplica o culoare uniformă sau puteţi plasa o imagine.

Pentru a insera un element de background (imagine sau culoare uniformă), folosiţi una din metodele prezentate în detaliu în figura 20.

27

Figura 20

Meniul Modify Inspectorul Properties

1. Afişaţi în prim plan pagina în care doriţi să inseraţi un element de background.

2. Executaţi clic pe Modify Page Properties.

2. Executaţi clic pe butonul

. Remarcă. Se afişează caseta de dialog Page Properties.

3. În caseta de dialog Page Properties executaţi clic pe categoria Appearance.

4. În zona Background image, executaţi clic pe butonul pentru a identifica, în folder-ul dumneavoastră imaginea de background.

5. Pentru a defini o culoare de background, în zona Background color introduceţi codul hexazecimal al culorii, dacă îl cunoaşteţi sau numele culorii. Puteţi folosi de asemenea modul colorimetru.


___________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

28

____________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

29

03 Limbajul HTML şi Dreamweaver MX 2004

În acest capitol: � Limbajul HTML � Dreamweaver şi limbajul HTML �

□ Limbajul HTML Progresul extraordinar al Internet-ului de la începutul anilor ’90 a avut loc datorită faptului că HTML (Hyper Text Markup Language) este un limbaj foarte uşor de învăţat (el nu este un limbaj de programare!). A începe astăzi să învăţaţi HTML 4 în conformitate cu „DTD HTML 4.01 Strict” este în final un avantaj, deoarece veţi învăţa să evitaţi vechile obiceiuri în crearea paginilor Web. Veţi învăţa să respectaţi reguli, principii, care în final vă vor aduce nu numai satisfacţia lucrului bine făcut, ci şi o recompensă – eticheta de calitate W3C (World Wide Web Consortium), pe care puteţi să o afişaţi în paginile

dumneavoastră Web: . În plus, după ce aţi creat paginile dumneavoastră în HTML 4, veţi simţi cu siguranţă nevoia de a utiliza XHTML (eXtensible Hyper Text Markup Language), XML (eXtensible Markup Language) pentru a le face mai atractive şi ... nu doar atât!

► Interesul pentru cunoaşterea limbajului HTML

Deşi nu este necesar să cunoaşteţi limbajul HTML pentru a vă crea propriile pagini, deoarece editoarele de tip WYSIWYG sunt la dispoziţia dumneavoastră, totuşi există situaţii când va trebui să faceţi apel la HTML: modificarea unui atribut, suprimarea elementelor HTML inutile sau redundante, adăugarea elementelor HTML standard care nu sunt disponibile în Dreamweaver MX 2004 etc.

A şti să inserezi cod HTML, a cunoaşte bazele limbajului HTML reprezintă atuuri suplimentare pentru „optimizarea” paginilor Web, cât şi pentru a depăşi limitele software-ului de tip WYSIWYG.

30

► Bazele limbajului HTML

HTML este alcătuit din: elemente, tag-uri şi atribute.

Toate tag-urile HTML trebuie să fie scrise între simbolurile „<” şi „>” (nu sunt admise spaţii între cele două simboluri!). Cea mai mare parte a tag-urilor HTML trebuie să fie deschise şi închise. Un tag de închidere este identic cu tag-ul de deschidere, dar în plus necesită o bară oblică (/) după simbolul „<”.

Un element HTML este alcătuit din tag-ul de deschidere, conţinutul propriu-zis (text alfanumeric) şi tag-ul de închidere.

Există mai multe tipuri de tag-uri HTML: tag-uri care conţin metainformaţii (<META>); tag-uri de formatare a paginii (<B>, <I>, <BIG>, <SMALL>, <SUP>, <SUB>, <DFN>, <P>, <CITE>, <ABBR>); tag-uri pentru legături hipertext (<A>); tag-uri pentru inserarea imaginilor (<IMG>); tag-uri pentru inserarea formularelor (<FORM>); tag-uri pentru inserarea obiectelor multimedia (<BGSOUND>, <EMBED>); tag-uri pentru inserarea cadrelor (<FRAMESET>, <FRAME>) etc.

Majoritatea tag-urilor (de deschidere) posedă atribute. Anumite atribute sunt obligatorii, altele sunt facultative. Valorile permit definirea opţiunilor atributelor. ► Structura unei pagini HTML

Oricare ar fi editorul WYSIWYG pe care îl utilizaţi, structura paginii va fi întotdeauna aceeaşi. În Dreamweaver MX 2004, structura paginii este creată în mod automat (figura 1): Figura 1

31

O pagină HTML este alcătuită din trei părţi: tipul documentului (declaraţia

DOCTYPE); secţiunea de antet (elementul HEAD) şi corpul paginii (elementul BODY).

□ Dreamweaver şi limbajul HTML În mod implicit, în Dreamweaver MX 2004 lucraţi în modul Design, fără a vedea codul HTML generat în momentul în care introduceţi text, inseraţi imagini, obiecte etc. ► Modul de afişaj Code

În bara de instrumente Standard, executaţi clic pe butonul (Show Code View).

Pentru a parametriza modul de afişaj al codului sursă HTML, activaţi butonul

(View options) din bara de instrumente Document.

Pentru a reveni în pagina curentă, executaţi clic pe butonul (Show Design View). ► Modul de afişaj Code şi Design

În bara de instrumente Standard, executaţi clic pe butonul (Show Code and Design View).

Atunci când selectaţi un element într-una din ferestre (cod sau pagină), echivalentul său este de asemenea selectat în cealaltă fereastră. ► Inserarea codului HTML

Dacă stăpâniţi bine limbajul HTML, atunci puteţi insera un element HTML cu atributele asociate acestuia, folosind una din următoarele metode:

Inserare manuală, via modul de afişaj Code. Code Inspector, via Window Code Inspector. HTML Tags, via meniul Insert Tag HTML Tags ... . Meniul contextual.

Quick Tag Editor permite verificarea, adăugarea şi suprimarea rapidă a unui

tag HTML direct în fereastra Document. Quick Tag Editor poate fi utilizat în trei

32

moduri: Insert HTML; Edit tag; Wrap tag. Pentru a lansa Quick Tag Editor, folosiţi una din metodele:

Inspectorul Properties butonul (Quick Tag Editor). Meniul Modify Quick Tag Editor. Tastele Ctrl+T.

HTML Tags (selectorul de tag-uri) pune la dispoziţia dumneavoastră o listă de tag-uri pe care le puteţi insera rapid în pagina dumneavoastră, utilizând caseta de dialog Tag Chooser (via meniul Insert Tags), figura 2. Figura 2

Puteţi utiliza Dreamweaver MX 2004 ca un veritabil editor HTML, având o sintaxă contextuală (meniul contextual) – figura 3a, 3b, 3c, 3d. Figura 3

a).

33

b).

c).

d).

_______________________________________________________________________________________________________________________________

34

____________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

35

04 Inserarea şi formatarea textului

În acest capitol: � Introducerea textului � Inserarea textului � Inserarea unei abrevieri sau a unui acronim � Căutarea şi înlocuirea unui text � Formatarea paragrafelor � Crearea listelor � Formatarea textului � Structurarea unei pagini cu ajutorul liniilor orizontale �

□ Introducerea textului ► Reguli generale

Nu inseraţi un text pirat. Nu publicaţi informaţii false. Nu folosiţi în paginile Web mai mult de trei nivele de titluri. Nu utilizaţi în cadrul aceleiaşi pagini Web mai mult de trei fonturi. Folosiţi liniile orizontale pentru structurarea paginilor. Pentru a crea un nou paragraf, acţionaţi tasta Enter.

Ori de câte ori inseraţi un paragraf, Dreamweaver MX 2004 inserează în codul HTML tag-ul <P>.

Pentru a trece la o nouă linie (în cadrul aceluiaşi paragraf), fără a crea un nou paragraf, folosiţi una din următoarele metode:

Meniul Insert HTML Special Characters Line Break.

Bara Insert categoria Text butonul (Line Break).

Pentru inserarea caracterelor speciale şi a simbolurilor, folosiţi una din următoarele metode:

Meniul Insert HTML Special characters ....

Bara Insert categoria Text butonul (Characters) ... .

36

□ Inserarea textului

Dacă aţi introdus un text într-o altă aplicaţie, puteţi să-l inseraţi într-un document HTML din Dreamweaver MX 2004, via Edit Copy Paste. Puteţi insera conţinutul unui document MS Office.

Începând cu Dreamweaver MX 2004, textele din documentele Word, Excel pot fi copiate în fişierele HTML din Dreamweaver MX 2004 cu respectarea formatărilor existente.

În Dreamweaver MX 2004 puteţi insera un text în format .swf (shockwave flash), cu una din metodele:

Meniul Insert Media Flash text Caseta de dialog Insert Flash Text ....

Bara Insert categoria Common butonul (Flash Text) ... .

□ Inserarea unei abrevieri sau a unui acronim

Pentru a insera o abreviere în pagina dumneavoastră Web, folosiţi bara

Insert categoria Text butonul (Abbreviation). Pentru a insera un acronim în pagina dumneavoastră Web, folosiţi bara

Insert categoria Text butonul (Acronym).

□ Căutarea şi înlocuirea unui text

Pentru a căuta un text în pagina dumneavoastră pe care să-l înlocuiţi apoi cu un altul, efectuaţi următoarele operaţii:

1. Executaţi clic pe Edit Find and Replace. Se afişează caseta de dialog Find and Replace.

2. Introduceţi textul pe care-l căutaţi în zona Find şi textul cu care-l înlocuiţi în zona Replace (figura 1).

37

Figura 1

Remarci:

Deoarece Dreamweaver MX 2004 face diferenţa între majuscule şi minuscule, activaţi opţiunea Match case.

Puteţi căuta text în codul sursă, în textul propriu-zis şi în tag-urile asociate.

□ Formatarea paragrafelor ► Modificarea alinierii paragrafelor

Pentru a modifica alinierea unui paragraf, folosiţi una din următoarele metode:

Meniul Text Align Left / Center / Right / Justify.

Inspectorul Properties / / / . ► Aplicarea indentărilor

În Dreamweaver MX 2004, pentru un paragraf sunt permise indentările stânga şi dreapta (de mărime egală).

Pentru a aplica indentări (dreapta) unui paragraf, folosiţi una din următoarele metode:

Meniul Text Indent.

Inspectorul Properties butonul (Text Indent).

38

Bara Insert categoria Text butonul (Block Quote).

Pentru a aplica indentări (stânga) unui paragraf deja indentat (dreapta), folosiţi una din următoarele metode:

Meniul Text Outdent.

Inspectorul Properties butonul (Text Outdent).

► Definirea titlurilor

Titlurile (antet-urile) au fost create pentru a indica vizual titluri de mare sau mai mică importanţă într-un document de dimensiuni mari.

Când aplicaţi un antet, textul se afişează bolduit, cu o dimensiune care variază în funcţie de importanţa antet-ului.

Heading 1 (antet-ul 1) are dimensiunea cea mai mare, iar Heading 6 (antet-ul 6) are dimensiunea cea mai mică (figura 2). Figura 2

Pentru a defini un antet, folosiţi una din următoarele metode:

Meniul Text Paragraph Format Heading1 ... Heading 6. Inspectorul Properties Format Heading 1 ... Heading 6.

Bara Insert categoria Text butoanele .

39

□ Crearea listelor Listele permit crearea unei enumerări de elemente. Cu Dreamweaver MX 2004 puteţi crea următoarele tipuri de liste (figura 3): liste simple (cu simboluri), liste numerotate (ordonate) şi liste de definiţii. Aveţi, de asemenea, posibilitatea să imbricaţi listele, unele într-altele. Figura 3

Listă simplă Listă ordonată Listă de definiţii Anotimpurile anului:

primăvara; vara; toamna; iarna.

Anotimpurile anului: 1. primăvara; 2. vara; 3. toamna; 4. iarna.

HTML HyperText Markup Language

XHTML eXtended HyperText Markup Language

XML eXtensible Markup Language

► Crearea şi formatarea unei liste simple

Listele simple (cu simboluri) conţin elemente (item-uri) precedate în mod implicit de un bumb. Puteţi marca elementele listei şi cu un pătrat, cerc, o imagine etc.

Pentru a crea o listă simplă, pornind de la un text existent sau de la un text nou, folosiţi una din următoarele metode prezentate în detaliu în figura 4: Figura 4

Text nou Text existent Meniul Text

Inspectorul Properties

Bara Insert,

categoria Text

Meniul Text Inspectorul Properties

Bara Insert, categoria Text

1. Executaţi clic în locul în care doriţi să inseraţi lista.

1. Selectaţi elementele listei (textul existent).

2. Executaţi clic pe Text

List




List



butonul .

40

Unordered List. . .

Unordered List. .

3. Tastaţi elementele listei şi acţionaţi tasta ENTER după fiecare element.

4. Pentru a opri lista, acţionaţi de două ori tasta ENTER.

Pentru a formata elementele unei liste simple, folosiţi una din metodele

prezentate în detaliu in figura 5: Figura 5

Toate elementele Un element Meniul Text Inspectorul

Properties Meniul Text Inspectorul Properties

1. Executaţi clic pe un element oarecare al listei.

1. Executaţi clic pe elementul de formatat.

2. Executaţi clic pe Text List Properties.


.



.

3. În caseta de dialog List Properties care se afişează păstraţi Bulleted List în zona List Type, iar apoi efectuaţi următoarele operaţii:

3.1. Alegeţi din meniul derulant Style noul stil: square.

3.1. Alegeţi din meniul derulant New Style noul stil al elementului selectat.

Remarcă. Pentru stilul circle (cerc) afişaţi codul sursă HTML şi introduceţi în tag-ul <ul> atributul circle: <ul type=”circle”> … </ul>.

3.2. Executaţi clic pe butonul .

41

► Crearea şi formatarea unei liste ordonate

Listele ordonate conţin elemente (item-uri) care se afişează într-o ordine precisă. În mod implicit, elementele listei ordonate sunt precedate de numerele 1, 2, 3 ... (stilul Number).

Pentru a crea o listă ordonată pornind de la un text simplu sau de la un text nou, folosiţi una din metodele prezentate în detaliu în figura 6: Figura 6

Text nou Text existent Meniul Text


Bara Insert,

categoria Text


Bara Insert, categoria Text


1. Selectaţi elementele listei (textul existent).


List Ordered List.


.


butonul .


List Ordered List.


.


butonul .

3. Tastaţi elementele listei şi acţionaţi tasta ENTER după fiecare element.


Pentru a formata elementele unei liste ordonate, folosiţi una din metodele

prezentate în detaliu în figura 7: Figura 7

Toate elementele Un element Meniul Text Inspectorul

Properties Meniul Text Inspectorul Properties

1. Executaţi clic pe un element oarecare al listei.

1. Executaţi clic pe elementul de formatat.



.



.

42

3. În caseta de dialog List Properties care se afişează păstraţi Numbered List în zona List Type, iar apoi efectuaţi următoarele operaţii:

3.1. Alegeţi din meniul derulant Style noul stil de numerotare:

Number (1, 2, 3 …) – opţiune implicită;

Roman Small (i, ii, iii …); Roman Large (I, II, III …); Alphabet Small (a, b, c …); Alphabet Large (A, B, C…).

3.1. Alegeţi din meniul derulant New Style noul stil de numerotare (aceleaşi cu stilurile care se afişează în meniul derulant Style).

3.2. În zona Start Count introduceţi valoarea (numerică) pentru o nouă numerotare.

3.2. În zona Reset Count introduceţi valoarea (numerică) pentru o nouă numerotare.


► Crearea unei liste de definiţii

Listele de definiţii sunt frecvent utilizate în generarea dicţionarelor de termeni. Ele nu utilizează caractere de antet.

O listă de definiţii cuprinde un cuvânt de definit, iar apoi pe linia următoare, cu indentare spre dreapta, definiţia sa.

Pentru a crea o listă de definiţii, folosiţi una din metodele prezentate în detaliu în figura 8. Figura 8

Meniul Text Bara Insert, categoria Text


2. Executaţi clic pe 2. Executaţi clic pe butonul

43

Text List Definition List (Definition List).

3. Introduceţi primul cuvânt de definit, iar apoi acţionaţi tasta ENTER.

4. Introduceţi definiţia, iar apoi acţionaţi tasta ENTER.

5. Introduceţi cel de-al doilea cuvânt de definit, iar apoi acţionaţi tasta ENTER.

6. Introduceţi definiţia, iar apoi acţionaţi tasta ENTER.

7. Procedaţi în mod similar pentru toate definiţiile ...


□ Formatarea textului W3C (World Wide Web Consortium) recomandă în mod insistent să nu se mai utilizeze formatarea clasică în HTML (elementele <font>, <basefont> etc.). Aceste elemente sunt declarate depăşite. W3C recomandă utilizarea foilor de stil. Dar cum nu toate navigatoarele recunosc în acelaşi mod recomandările CSS1, utilizarea formatării „clasice” mai are încă zile bune de trăit. Aceste formatări se aplică tuturor elementelor de text: paragrafe, antet-uri, liste etc. Dreamweaver MX 2004 aplică, de asemenea, recomandarea W3C; în mod implicit, formatarea textului se face cu CSS. ► Aplicarea elementelor de formatare clasică

Elementele de formatare clasică sunt: Bold, Italic, Underline, Strikethrough, Teletype. Elementele Big şi Small din HTML 4 nu sunt accesibile în Dreamweaver!

Pentru a aplica elementele de formatare clasică, folosiţi una din următoarele metode:

Meniul Text Style Bold, Italic, Underline, Strikethrough sau Teletype.

Inspectorul Properties butoanele (pentru Bold şi Italic).

Bara Insert categoria Text butoanele (pentru Bold şi Italic).

44

► Alegerea şi aplicarea font-ului de caractere

Dreamweaver MX 2004 propune grupuri de caractere ale căror font-uri sunt aproape identice pentru diferite platforme microinformatice (PC, MAC, LINUX).

Pentru a aplica un font unui text anume, folosiţi una din metodele prezentate în detaliu în figura 9. Figura 9


1. Selectaţi textul.

2. Executaţi clic pe Text Font, iar apoi selectaţi unul din grupurile de fonturi propuse.

2. În meniul derulant Font, selectaţi grupul de font-uri sau, dacă doriţi un font specific căruia îi cunoaşteţi numele tastaţi-l în zona Font.

3. Executaţi clic pe grupul de font-uri selectat.

► Definirea dimensiunii caracterelor Utilizarea valorilor absolute

Pentru a modifica dimensiunea caracterelor utilizând valori absolute, folosiţi una din metodele prezentate în figura 10. Figura 10


1. Selectaţi textul de formatat.

2. Executaţi clic pe Text Size 1 la 7 şi selectaţi valoarea absolută a corpului de literă.

2. În meniul derulant Size, selectaţi valoarea absolută a corpului de literă.

Remarci:

Dimensiunea implicită a font-ului în Dreamweaver MX 2004 este 3.

45

În HTML nu puteţi modifica cu precizie dimensiunea caracterelor, decât dacă folosiţi foile de stiluri în cascadă (CSS).

Utilizarea valorilor relative

Pentru a modifica dimensiunea caracterelor utilizând valori relative în raport cu dimensiunea implicită (3), folosiţi una din metodele prezentate în figura 11. Figura 11


1. Selectaţi textul de formatat.

2. Executaţi clic pe Text Size change iar apoi alegeţi +1 la +4 sau -1 la -3.

2. În meniul derulant Size, selectaţi valoarea relativă a corpului de literă.

► Aplicarea elementelor de formatare indice şi exponent

W3C a prevăzut două elemente pentru scrierea cu exponent şi cu indice a unui text – <sup> şi <sub>, dar ele nu sunt accesibile în Dreamweaver MX 2004.

Pentru inserarea elementelor de formatare <sup> şi <sub> în codul sursă HTML folosiţi una din metodele:

Code Inspector, via Window Code Inspector. Quick Tag Editor, via Modify Quick Tag Editor sau Inspectorul

Properties butonul (Quick tag Editor) sau tastele Ctrl+T. ► Aplicarea unei culori caracterelor În Dreamweaver MX 2004 aveţi mai multe posibilităţi de alegere a unei culori pentru un text. Puteţi alege o culoare „websafe”, o culoare personalizată sau puteţi tasta pur şi simplu numele culorii dorite.

Pentru a aplica o culoare unui text, folosiţi una din metodele prezentate în figura 12.

46

Figura 12


1. Selectaţi textul.

2. Executaţi clic pe Text Color.

3. Alegeţi o culoare „websafe” în zona Basic colors sau creaţi (cu multă prudenţă!) propria culoare (personalizată) în zona din dreapta a casetei.

2. Executaţi clic pe meniul de alegere a culorii websafe:

Remarci:

Se afişează codul hexazecimal al culorii. Dacă cunoaşteţi numele culorii, puteţi să-l

introduceţi în zona de culoare.

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

□ Structurarea unei pagini cu ajutorul liniilor orizontale Dreamweaver MX 2004 vă oferă posibilitatea să inseraţi o linie orizontală pentru a separa diferite zone ale documentului dumneavoastră.

Pentru a insera o linie orizontală în pagină, folosiţi una din metodele prezentate în figura 13. Figura 13

Meniul Insert Bara Insert, categoria HTML

1. Executaţi clic în locul în care doriţi să inseraţi linia orizontală.

2. Executaţi clic pe Insert Horizontal Rule.

2. În bara Insert, categoria HTML,

47

executaţi clic pe butonul (Horizontal Rule).

Remarcă. În mod implicit, linia orizontală se afişează pe toată lungimea paginii.

Pentru a formata o linie orizontală (modificarea lungimii, a lăţimii şi a modului de aliniere), utilizaţi inspectorul Properties (zonele Horizontal Rule, W, H, Align, Shading, Class).

____________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

48

_____________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

49

05 Crearea foilor de stil CSS (Cascading Style Sheets)

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

□ Foile de stiluri CSS1, CSS2, CSS3 Utilizarea foilor de stil CSS (Cascading Style Sheets – foi de stil în cascadă) reprezintă cel mai sigur şi cel mai uşor mod de formatare a documentelor (X)HTML.

Foile de stiluri CSS prezintă următoarele avantaje: formatarea este complet separată de conţinutul paginii; toate schimbările efectuate în foile de stiluri se repercutează în mod automat în toate paginile site-ului; un model de foaie de stiluri în cascadă permite definirea mai multor nivele de stiluri; timpii de încărcare şi de mentenanţă ai paginilor sunt reduşi; respectarea stilurilor este mult mai concisă şi riguroasă; permit o mai mare flexibilitate între documentele unui site Web.

Foile de stiluri CSS1 (Cascading Style Sheets Level 1) au apărut în anul 1996 ca o recomandare a consorţiului W3C şi cuprind următoarele caracteristici: fonturi, aliniere, mărime, culoare, margini, borduri etc.

Foile de stiluri CSS2 au apărut în anul 1998. Ele au la bază caracteristicile foilor de stiluri CSS1 la care se adaugă următoarele proprietăţi: tipuri de media, poziţionare (absolută, relativă şi fixă), font-uri încărcabile, stiluri pentru tabele, modele de formatare vizuală, stiluri de cursor etc.

Foile de stiluri CSS3 sunt bazate pe module care cuprind un suport multimedia îmbunătăţit, capacităţi dinamice şi interactive superioare etc.

50

□ Codul HTML al stilurilor O definiţie de stil sau regulă de stil precizează caracteristicile de formatare. Puteţi alege oricare din cele 8 categorii de proprietăţi de formatare: proprietăţile fontului de caractere; proprietăţile de text; proprietăţile de zonă; proprietăţile de culoare şi de background; proprietăţile de clasificare; proprietăţile foilor sonore; proprietăţile foilor de stiluri de imprimare; proprietăţile de poziţionare. ► Categorii de proprietăţi de stiluri

Cele mai utilizate proprietăţi HTML ale font-ului de caractere sunt: font, font-family, font-size, font-style, font-variant, font-weight.

Cele mai utilizate proprietăţi HTML de text sunt: letter-spacing, line-height, text-align, text-decoration, text-indent, text-transform, vertical-align.

Cele mai utilizate proprietăţi de zonă sunt: border, border-color, border-style, border-width, clear, float, height, margin, margin-bottom, margin-left, margin-right, margin-top, width.

Cele mai importante proprietăţi de culoare şi de background sunt: background, background-color, background-image, background-repeat, color.

Cele mai importante proprietăţi HTML de clasificare sunt: display, list-style-image, list-style-type.

Proprietăţile foilor sonore controlează prezentarea documentelor HTML (numai foile de stiluri CSS2).

Proprietăţile foilor de stiluri de imprimare controlează imprimarea documentelor HTML (numai foile de stiluri CSS2).

Proprietăţile de poziţionare controlează de o manieră precisă elementele ce urmează a fi afişate (numai foile de stiluri CSS2).

_______________________________________________________________________________________________________________________________

51

► Redactarea stilurilor HTML

Sintaxa de scriere a unui stil este următoarea: TAG{stil_1:valoare_1; stil_2:valoare_2}.

Stilurile sunt plasate între acolade, iar fiecare stil este separat prin două puncte de valoarea atribuită. Fiecare cuplu (stil, valoare) este separat de celălalt cuplu prin punct şi virgulă (figura 1). Figura 1

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

Dreamweaver MX 2004

Dreamweaver MX 2004 pune la dispoziţia utilizatorilor un sistem de redactare a stilurilor extrem de perfecţionat.

Atunci când tastaţi tag-ul <style= , în fereastra de cod se afişează o casetă în care sunt etichetate toate opţiunile posibile (figura 2). După ce aţi ales opţiunea corespunzătoare, acţionaţi una din tastele Enter / Tab.

Pentru a vizualiza ansamblul parametrilor atribuiţi stilurilor, folosiţi panoul CSS Styles (via Window CSS Styles), figura 3. Figura 2

52

Figura 3

Pentru a afişa regulile stilului selectat, executaţi dublu clic pe numele font-ului în panoul CSS Styles. Observaţi că numele font-ului se transformă automat în cod HTML.

Tag-urile HTML 4 pe care le puteţi asocia stilurilor în Dreamweaver MX 2004 sunt structurate în cinci grupe: BODY; P; TD; UL; OL; LI; H1; H2; H3; H4; H5; H6. Dacă doriţi să consultaţi aceste tag-uri, efectuaţi următoarele operaţii:

1. Afişaţi caseta de dialog New CSS Style, via Text CSS Styles New Style.

2. În caseta de dialog New CSS Style, în zona Selector Type, selectaţi opţiunea Tag (redefines the look of a specific tag), iar apoi executaţi clic pe lista derulantă Tag (figura 4).

Figura 4

53

► Metode de inserare a stilurilor

Pentru a insera un stil într-un document HTML, folosiţi una din metodele: stiluri incorporate; stiluri in-line; stiluri definite în fişiere externe; pseudoclase.

Metoda stilurilor incorporate este cea mai eficace şi se recomandă pentru a fi utilizată cât mai mult posibil. Se aplică numai blocurilor de text. Stilul se plasează în elementul <STYLE>, care, la rândul lui, se plasează în secţiunea <HEAD> a documentului.

Metoda stiluri in-line se aplică unui element particular al stilului. În acest caz, stilul definit cu atributul style nu se aplică decât local, elementului precizat.

Metoda stilurilor definite în fişierele externe prezintă avantajul că poate utiliza aceeaşi foaie de stiluri pentru mai multe documente HTML diferite, fără a fi nevoiţi de a le recopia în fiecare dintre ele. Stilurile se plasează într-un document extern salvat cu extensia .css. Acest fişier va fi legat la documentul HTML corespunzător, prin elementul LINK plasat în header-ul documentului.

Metoda pseudoclaselor se aplică diferitelor elemente a căror stare vizuală poate fi schimbată ca, de exemplu, link-urile care posedă mai multe stări: a-link; a:visited; a:active; a:hover.

□ Crearea unei foi de stiluri CSS internă În Dreamweaver MX 2004 puteţi crea două tipuri de foi de stiluri CSS: interne şi externe. ► Tipuri de stiluri CSS

În cele două foi de stiluri CSS (interne şi externe) se pot crea următoarele tipuri de stiluri CSS:

Class (can apply to any tag) – permite crearea unei clase (class). Tag (redefines the look of a specific tag) – permite personalizarea

tag-urilor HTML. Advanced (Ids, contextual selector etc.) – permite redefinirea tag-urilor

ancoră (<a>).

54

Pentru a crea un stil în pagina curentă a unui document, folosiţi una din metodele prezentate în figura 5. Figura 5

Meniul Text Panoul CSS Styles

1. Executaţi clic pe Text CSS Styles New.

1. Afişaţi panoul CSS Styles (via Window CSS Styles) şi executaţi clic pe

butonul (New CSS Style) sau deschideţi

meniul local al panoului şi alegeţi New. Remarcă. Se deschide caseta de dialog New CSS Style.

2. În caseta de dialog New CSS Style, efectuaţi următoarele operaţii:

2.1. În zona Name, introduceţi numele stilului pe care doriţi să-l creaţi.

2.2. În zona Selector Type, alegeţi una din opţiunile: Class (can apply to any tag) – permite crearea unui stil personalizat

numit clasă. Numele clasei trebuie să înceapă întotdeauna cu caracterul . (punct); dacă uitaţi să-l puneţi, Dreamweaver MX 2004 îl pune în locul dumneavoastră.

Tag (redefines the look of a specific tag) – permite formatarea unui elemement HTML existent.

Advanced (Ids, contextual selections etc.) – permite într-o primă etapă definirea link-urilor pentru patru stări: a:link; a:hoover; a:active; a:visited.

2.3. În zona Define in: alegeţi una din opţiunile: New Style Sheet File (permite crearea unei foi de stiluri externă) sau This document only (Crearea unei foi de stiluri internă).

2.4. După ce aţi ales tipul de stil dorit, executaţi clic pe butonul

.

55

► Definirea formatării

După ce aţi creat un stil personalizat de tip clasă, se afişează caseta de dialog CSS Style definition for ... (figura 6), care conţine următoarele categorii: Type, Background, Block, Box, Border, List, Positioning, Extensions. Figura 6

Categoria Type se foloseşte pentru formatarea caracterelor.

Categoria Background permite aplicarea unui element de background (Background color; Background image) obiectului selectat.

Categoria Block permite formatarea unui text.

Categoria Box permite formatarea imaginilor, a straturilor şi a blocurilor de text.

Categoria Border permite formatarea bordurilor.

Categoria List permite definirea listelor.

Categoria Positioning permite parametrizarea straturilor.

56

Categoria Extensions permite parametrizarea extensiilor care nu sunt

recunoscute de către navigatoare.

►Crearea unui stil CSS cu opţiunea Class Metode de creare

Pentru a crea un stil CSS cu opţiunea Class (can apply to any tag), folosiţi una din metodele prezentate în figura 7.

În zona Selector Type activaţi butonul radio class (pasul 2.2), iar apoi, în zona

Define in activaţi butonul This document only (pasul 2.3). Aplicarea stilului

Pentru a aplica unui text un stil CSS de tip clasă, folosiţi una din metodele prezentate în figura 7. Figura 7

Meniul Text Panoul CSS Styles Inspectorul Properties

1. Executaţi clic în paragraf sau selectaţi textul.

2. Executaţi clic pe Text CSS Styles nume_stil.

2. Selectaţi stilul corespunzător, iar apoi, în meniul local, alegeţi Apply.

2. În lista derulantă Style, selectaţi stilul corespunzător.

3. Vizualizaţi pagina Web într-un browser. Anularea stilului

Pentru a anula un stil CSS de tip clasă, folosiţi una din metodele de mai jos:

Executaţi clic pe Text CSS Styles None. În inspectorul Properties, în meniul derulant Style, alegeţi None.

57

Modificarea stilului

Pentru a modifica un stil CSS de tip clasă, folosiţi una din metodele prezentate în figura 8. Figura 8


Panoul CSS Styles

1. Executaţi clic pe Text CSS Styles Manage Styles..

1. În lista derulantă Style alegeţi Manage Style.

1. Selectaţi stilul de modificat.

Remarcă. Se deschide fereastra <style>.

2. În fereastra style, selectaţi stilul de modificat,

iar apoi executaţi clic pe butonul .

2. În meniul local alegeţi Edit….

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

58

3. În caseta de dialog CSS Style definition for .parag efectuaţi modificările dorite.


5. În fereastra <style> executaţi clic pe butonul .

Suprimarea stilului

Pentru a modifica un stil CSS de tip clasă, folosiţi una din metodele prezentate în figura 9. Figura 9


1. Executaţi clic pe Text CSS Styles Manage Styles…

1. Selectaţi stilul de suprimat.

2. În caseta de dialog <style> care se afişează, selectaţi numele stilului de suprimat, iar apoi executaţi clic

pe butonul .

2. Deschideţi meniul local şi alegeţi

Delete sau executaţi clic pe butonul (Delete CSS Style).


______________________________________________________________ Exportul stilului

Pentru a exporta un stil CSS de tip clasă, folosiţi una din metodele prezentate în figura 10. Figura 10


1. Executaţi clic pe Text CSS Styles Export.

1. În meniul local alegeţi Export.

Remarcă. Se afişează caseta de dialog Export Styles As CSS File.

59

2. În caseta de dialog Export Styles As CSS File, în zona File name introduceţi

numele fişierului, iar apoi executaţi clic pe butonul . ► Crearea unui stil CSS cu opţiunea Tag (redefines the look of a specific tag)

Pentru a crea un stil CSS cu opţiunea Tag (redefines the look of a specific tag), folosiţi una din metodele prezentate în figura 5. În zona Selector Type, activaţi butonul radio Tag (redefines the look of a

specific tag), pasul 2.2, iar apoi, în zona Define in, activaţi butonul radio This

Document only (pasul 2.3). ► Redefinirea tag-urilor ancoră (<a>) cu opţiunea Advanced Redefinirea tag-urilor ancoră (<a>) este o practică frecventă şi, uneori, chiar amuzantă!

Stilurile: a:link; a:hover; a:active; a:visited redefinesc tag-ul ancoră <a>.

60

Pentru a modifica link-urile cu opţiunea Advanced (Ids, contextual selector etc.), efectuaţi operaţiile următoare:

1. Creaţi un stil nou (New Style).

2. În caseta de dialog New CSS Style, în zona Selector Type, selectaţi butonul radio Advanced.

Cele patru stiluri de link-uri se afişează în meniul derulant.

3. În caseta de dialog New CSS Style (figura 11), efectuaţi următoarele operaţii:

Figura 11

3.1. Afişaţi meniul derulant în zona Selector, iar apoi selectaţi tipul de link pe care doriţi să-l personalizaţi.

3.2. În zona Define in, activaţi butonul radio New Style Sheet File.

3.3. Executaţi clic pe butonul . Se afişează caseta de dialog CSS Style Definition for ... .

4. În caseta de dialog CSS Style Definition for ... , în categoria Type, selectaţi

o culoare (de exemplu, green), iar apoi executaţi clic pe butonul . 5. Creaţi o hiperlegătură în pagina dumneavoastră Web pentru a vedea

selectorul a:... pe care l-aţi definit.

6. Salvaţi pagina.

7. Vizualizaţi pagina Web într-un browser.

61

Atunci când cursorul dumneavoastră se află deasupra legăturii, aceasta îşi schimbă culoarea.

□ Crearea unei foi de stiluri CSS externă Foile de stiluri CSS externe se creează în acelaşi mod în care aţi creat foile de stiluri interne, singura deosebire fiind aceea că foile de stiluri externe trebuie să fie salvate ca un fişier text (separat), cu extensia .css. Dreamweaver MX 2004 stabileşte în mod automat link-ul către paginile Web cărora doriţi să le aplicaţi definiţiile de stil. ► Metode de creare

Pentru a crea o foaie de stiluri CSS externă (un fişier .css), folosiţi una din metodele prezentate în figura 12. Figura 12


1. Creaţi un nou document.

2. Executaţi clic pe Text CSS Styles New.

2. Afişaţi panoul CSS Styles şi executaţi

clic pe butonul (New CSS Style) sau deschideţi meniul local şi alegeţi New.

Remarcă. Se afişează caseta de dialog New CSS Style.

3. În caseta de dialog New CSS Style efectuaţi următoarele operaţii:

3.1. În zona Name introduceţi numele stilului pe care doriţi să-l creaţi.

3.2. În zona Selector Type alegeţi un tip de selector.

3.3. În zona Define in: alegeţi opţiunea New Style Sheet File.

3.4. Executaţi clic pe butonul . Remarcă. Se afişează caseta de dialog Save Style Sheet File As.

4. În caseta de dialog Save Style Sheet File As efectuaţi următoarele operaţii:

4.1. În zona Save in selectaţi folder-ul foii de stiluri.

4.2. În zona File name, introduceţi numele foii de stiluri.

4.3. În zona Save as type alegeţi Style Sheet Files (*css).

62

4.4. În zona URL indicaţi, dacă este cazul, calea de acces.

4.5. În zona Relative To păstraţi opţiunea Document activă.

4.6. Executaţi clic pe butonul . Remarcă. Se afişează caseta de dialog CSS Styles Definition for.

5. În caseta de dialog CSS Styles Definition for parametrizaţi elementele de

formatare ale stilului, iar apoi executaţi clic pe butonul . Remarci:

Foaia de stiluri CSS externă se afişează cu toate stilurile asociate, În codul sursă HTML, Dreamweaver MX 2004 face un link direct către fişierul de

stiluri .css: <link rel=”…” href=”…”>.

6. Executaţi clic pe tasta F8 pentru a vizualiza fişierul .css în folder-ul corespunzător. ► Ataşarea unui fişier .css

Pentru a ataşa un fişier .css, efectuaţi următoarele operaţii:

1. Creaţi un nou document.

2. Afişaţi caseta de dialog Link External Style Sheet, cu una din următoarele metode:

Executaţi clic pe Text CSS Styles Attach Style Sheet. În panoul CSS Styles, în meniul local alegeţi Attach Style Sheet. În panoul CSS Styles, executaţi clic pe butonul (Attach Style

Sheet).

3. În caseta de dialog Link External Style Sheet, efectuaţi următoarele operaţii (figura 13).

3.1. În zona File / URL, introduceţi calea de acces.

3.2. În zona Add As: activaţi butonul radio Link.


63

Figura 13

Toate stilurile din foaia de stiluri CSS externă se afişează în panoul CSS Styles. ► Modificarea unui fişier .css extern

Pentru a modifica un fişier .css extern, efectuaţi operaţiile următoare:

1. Accesaţi un document Dreamweaver MX 2004 deschis şi legat la foaia de stiluri externă care urmează a fi modificată.

2. Executaţi clic pe Text CSS Styles Manage Style. Se afişează caseta de dialog Edit Style Sheet.

3. În caseta de dialog Edit Style Sheet, efectuaţi următoarele operaţii (figura 14).

3.1. Selectaţi foaia legată (cu extensia .css).


4. În caseta de dialog CSS Style Definition ... , efectuaţi modificările corespunzătoare.

5. Salvaţi foaia de stiluri, iar apoi executaţi clic pe butonul .

64

Figura 14

Toate elementele care vor utiliza acest stil sunt actualizate. Puteţi modifica direct un stil în foaia de stiluri legată, via panoul CSS Styles. Puteţi afişa sau masca stilurile care provin de la un fişier cu extensia .css, via Text CSS Styles

Design Time ... . ► Crearea unei foi de stiluri CSS externă direct, în codul sursă HTML Dacă sunteţi un bun cunoscător al limbajului HTML şi al CSS, aveţi posibilitatea să codificaţi direct stilurile CSS într-un fişier extern cu extensia .css.

Pentru a crea o foaie de stiluri CSS externă în HTML, efectuaţi următoarele operaţii:


2. În caseta de dialog New Document, efectuaţi următoarele operaţii (figura 15).

2.1. În subpanoul General, în categoria Basic Page, executaţi clic pe CSS.


65

Figura 15

3. În fereastra <<CSS>> care se afişează, introduceţi codul HTML de descriere al stilurilor folosind meniul contextual care se afişează (figura 16).

Figura 16

4. Salvaţi fişierul cu extensia .css.

66

Puteţi realiza link-uri către paginile HTML dorite.

□ Utilizarea unui model CSS Style Sheets Dacă sunteţi cumva în criză de inspiraţie, puteţi utiliza foile de stil predefinite (modele).

Pentru a utiliza o foaie de stil predefinită (un model) în Dreamweaver MX 2004, efectuaţi următoarele operaţii:


2. În fereastra New Document care se afişează, efectuaţi următoarele operaţii (figura 17).

2.1. În categoria General, executaţi clic pe CSS Style Sheets.

2.2. Selectaţi o foaie de stil predefinită şi vizualizaţi stilurile propuse în partea dreaptă a ferestrei Preview.

2.3. Executaţi clic pe butonul . Figura 17

3. Salvaţi modelul ales în site-ul dumneavoastră. Puteţi „lega” acest fişier cu extensia .css la paginile dumneavoastră HTML.

67

06 Inserarea, parametrizarea şi formatarea imaginilor

În acest capitol: � Căile de acces la imagini � De unde procurăm imaginile � Formatele de imagine recunoscute de navigatoare � Inserarea unei imagini � Parametrizarea unei imagini � Formatarea unei imagini � Crearea zonelor reactive � Retuşarea unei imagini � Comportamente asociate imaginilor �

□ Căile de acces la imagini Când doriţi să inseraţi o imagine, va trebui să precizaţi care este calea de acces la această imagine: căile absolute, căile relative la document şi căile relative la rădăcina site-ului. ► Căile absolute

Calea absolută precizează URL-ul complet de acces la resursă (figura 1). Figura 1 <img src=”http://www.carte.ro/exemplu/imagini/sigla.jpg”> unde,

<img> - reprezintă tag-ul HTML pentru inserarea unei imagini; src=” ” – reprezintă atributul care precizează calea de acces la imagine.

Imaginea sigla.jpg se găseşte în subfolder-ul imagini, plasat în folder-ul exemplu al site-ului www.carte.ro, accesibil prin protocolul http. ► Căile relative la document

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

68

Figura 2 <img src=” sigla.jpg”>

<img src=”.../imagini/sigla.jpg”>

► Căile relative la rădăcina site-ului

Calea de acces la rădăcina site-ului precizează calea de acces la resursă în raport cu rădăcina site-ului (figura 3). Figura 3 <img src=”/imagini/sigla.jpg”>

□ De unde procurăm imaginile

Există numeroase magazine de IT care oferă vizitatorilor, în mod gratuit, CD-ROM-uri cu imagini.

Folosiţi site-urile Web care vă pot oferi, în mod gratuit, biblioteci de imagini (fără drept de copyright!).

Utilizaţi motoarele de căutare (Google), care conţin legături hipertext (Images) ce vă permit să efectuaţi căutări tematice. Veţi obţine o listă consistentă de imagini, adaptată cererii dumneavoastră.

Scanaţi fotografii de familie, fotografii ale animalelor, ilustraţii (o imagine poate ilustra uneori un concept mai greu de explicat în cuvinte), logo-uri etc.

Creaţi propriile imagini cu una din aplicaţiile: Macromedia Fireworks, Photoshop, Illustrator, Paint Shop Pro etc.

________________________________________________________________________________________________________________________________________________________________________________________________

69

□ Formatele de imagine recunoscute de navigatoare

Există mai multe formate de imagine pe care le puteţi utiliza, în funcţie de scopul urmărit: BMP (BitMap); GIF (Graphics Interchange Format); JPG (Joint Photographic Experts Group); PNG (Portable Network Graphics); TIFF (Tagged Image File Format); WPG (format vectorial utilizat de aplicaţiile din familia Word Perfect – Word Perfect, Draw Perfect, WP Presentation etc.) ş.a.m.d.

Formatele de imagine recunoscute de navigatoare sunt: .gif (Graphics Interchange Format) – Acest format este ideal pentru

imagini vectoriale care conţin maximum 256 de culori. .jpg / .jpeg (Joint Photografic Experts Group) – Acest format este ideal

pentru imagini de tip fotografie; conţine mii de culori, degradeuri sau nuanţe subtile.

.png (Portable Network Graphics) – Acest format este ideal pentru imagini complexe, dar este recunoscut doar de către navigatoarele recente.

□ Inserarea unei imagini

Proprietăţile obiectului Image sunt: Image (numele imaginii); W, H (lungimea şi lăţimea imaginii, exprimate în pixeli); Src (fişierul sursă al imaginii); Link (legătura hipertext pentru imagine); Align (aliniază imaginea şi textul pe aceeaşi linie cu una din opţiuni: Default, Baseline, Top, Middle, Bottom, Text Top, Absolute Middle, Absolute Bottom, Left, Right); Alt (specifică textul alternativ care va apărea în locul imaginilor); Map (numele imaginii map); Draw Rectangle Hotspot, Draw Oval Hotspot, Draw Polygon Hotspot (instrumente de desenare folosite în relaţie cu o imagine map); Vspace, Hspace (adaugă un spaţiu vertical şi un spaţiu orizontal în jurul unei imagini); Target (specifică fereastra sau cadrul în care urmează să fie încărcată pagina ... legată, cu una din opţiunile: _blank, _parent, _self, _top); LowSrc (specifică imaginea care trebuie să fie încărcată înaintea imaginii principale); Border (lăţimea bordurii exprimate în pixeli); Modify (specifică opţiunile pentru retuşarea unei imagini); Class (permite aplicarea regulilor de stil CSS).

Toate proprietăţile obiectului Image sunt afişate în inspectorul Properties (figura 4).

70

Figura 4

Pentru a insera o imagine, folosiţi una din metodele prezentate în figura 5.

Figura 5

Meniul Insert Bara Insert, categoria Common

1. Executaţi clic în locul în care doriţi să inseraţi imaginea.

2. Executaţi clic pe Insert Image.

2. În bara Insert, categoria Common,

executaţi clic pe butonul (Images) şi alegeţi Image.

3. În caseta de dialog care se afişează (Select Image Source), în zona Select file name from lăsaţi activată opţiunea File system, iar apoi efectuaţi următoarele operaţii:

71

3.1. Baleiaţi folder-ul din site-ul dumneavoastră pentru a selecta imaginea pe care doriţi s-o inseraţi.

3.2. În meniul derulant Relative to, indicaţi calea de acces: Document sau Site Root.


Cu Dreamweaver MX 2004 aveţi posibilitatea să inseraţi un spaţiu rezervat

(obiectul Placeholder) pentru o imagine pe care nu o aveţi în momentul formatării paginii Web. Navigatorul poate rezerva spaţiile necesare pentru obiecte ca: imagini, tabele sau text.

Pentru a insera obiectul Placeholder, folosiţi una din metodele prezentate în figura 6. Figura 6


1. Executaţi clic în locul în care doriţi să fie inserată imaginea.

2. Executaţi clic pe Insert Image Objects Image Placeholder.


executaţi clic pe butonul (Images)

şi alegeţi (Image Placeholder). Remarcă. Se afişează caseta de dialog Image Placeholder.

3. În caseta de dialog Image Placeholder introduceţi valorile parametrilor: Name (Nume), Width (lungime), Height (înălţime), Color (culoare), Alternate text (text alternativă), ca în exemplul de mai jos.

72

4. Executaţi clic pe butonul . Remarcă. Dreamweaver MX 2004 rezervă un spaţiu pentru imagine (obiectul Image).

5. În momentul în care dispuneţi de fişierul imagine, pentru a-l plasa în spaţiul rezervat procedaţi după cum urmează: în inspectorul Properties, executaţi clic pe icon-ul folder-ului asociat în zona Src, sau executaţi dublu clic pe spaţiul rezervat în pagină. Selectaţi fişierul imagine în caseta de dialog care se afişează şi

executaţi clic pe butonul .

□ Parametrizarea unei imagini

Pentru a parametriza obiectul Image, selectaţi imaginea pe care aţi inserat-o (via clic pe imagini sau via clic pe tag-ul <img> în bara de stare, iar apoi, în inspectorul Properties, modificaţi în mod corespunzător, parametrii afişaţi. Dacă modificaţi parametrii W şi H (veţi pierde în calitate!), noile valori se vor afişa bolduit, iar butonul care se afişează în dreapta lui permite restabilirea dimensiunii iniţiale a imaginii.

□ Formatarea unei imagini Formatarea unei imagini are în vedere următoarele aspecte: alinierea imaginii (orizontală, verticală); repartizarea textului în jurul imaginii; modificarea spaţiului dintre imagine şi text; aplicarea unei borduri; inserarea unei imagini de joasă rezoluţie.

73

► Alinierea orizontală a unei imagini

Pentru a alinia orizontal o imagine în cadrul unei pagini Web, selectaţi imaginea, iar apoi, în inspectorul Properties, executaţi clic pe unul din cele trei

butoane: , , în funcţie de tipul de aliniere dorit (left, center, right). ► Alinierea verticală a unei imagini în raport cu un text

Pentru a alinia vertical o imagine în raport cu un text, selectaţi imaginea, iar apoi, în inspectorul Properties, în meniul derulant Align, executaţi clic pe tipul de aliniere dorit: Top, Middle, Bottom, ... (figura 7). Figura 7

► Repartizarea textului în jurul unei imagini

Pentru a plasa text în jurul unei imagini, efectuaţi următoarele operaţii: inseraţi imaginea într-un paragraf, selectaţi imaginea, iar apoi, în inspectorul Properties, în meniul derulant Align, alegeţi Left / Right (figura 8). Figura 8

74

► Modificarea spaţiului dintre imagine şi text

Pentru a modifica spaţiul dintre imagine şi text, efectuaţi următoarele operaţii: inseraţi într-un paragraf o imagine flotantă (Stânga / Dreapta), selectaţi imaginea, iar apoi, în inspectorul Properties, în zonele Vspace şi Hspace, introduceţi valorile corespunzătoare exprimate în pixeli (figura 9). Figura 9

► Aplicarea unei borduri

Pentru a încadra o imagine într-un chenar de culoare neagră, efectuaţi următoarele operaţii: selectaţi imaginea, iar apoi, în inspectorul Properties, în zona Border, introduceţi o valoare (0...9999) exprimată în pixeli (figura 10). Figura 10

75

□ Crearea zonelor reactive Image-maps sunt imagini în care puteţi delimita zone reactive: cerc, dreptunghi, poligon, care au rolul de legături hipertext.

Pentru a crea zone reactive într-o imagine, folosiţi una din metodele prezentate în figura 11. Figura 11

Bara Insert, categoria Common Inspectorul Properties

1. Verificaţi dacă zonele reactive ale image-map-ului sunt afişate: View Visual Aids Image Maps.

2. În documentul HTML, executaţi clic în locul în care doriţi să inseraţi imaginea.

3. Inseraţi imaginea, iar apoi selectaţi-o.

4. În bara Insert, categoria Common

executaţi clic pe butonul (Images) şi alegeţi butonul

/

/

.

4. În panoul Properties, în zona Map introduceţi numele imaginii map (este obligatoriu!) iar apoi alegeţi un

instrument de desenare - .

5. Cu instrumentul de desenare selectat, trasaţi o zonă (reactivă) pe suprafaţa imaginii, care devine astfel o legătură hipertext către pagina HTML corespunzătoare.

6. În inspectorul Properties efectuaţi următoarele operaţii:

6.1. În zona Link introduceţi URL-ul paginii către care se face legătura.

6.2. În meniul derulant Target indicaţi cadrul pe care doriţi să-l utilizaţi în situaţia în care doriţi un set de cadre.

6.3. În zona Alt introduceţi textul de legătură.

7. Repetaţi paşii 5, 6 pentru a asocia imaginii alte legături.

8. Salvaţi documentul.

9. Afişaţi pagina Web într-un browser.

10. Testaţi legăturile hipertext.

76

□ Retuşarea unei imagini

În Dreamweaver MX 2004 puteţi modifica parametrii de optimizare ai unei imagini cu ajutorul aplicaţiei Macromedia Fireworks, via Modify Image Optimize Image in Fireworks sau inspectorul Properties, via zona Modify,

butonul (Optimize in Fireworks).

În Dreamweaver MX 2004 puteţi tăia o imagine pentru a nu putea vizualiza

decât o parte a acesteia, via Modify Image Crop sau butonul (Crop) în zona Modify din inspectorul Properties.

În Dreamweaver MX 2004 puteţi modifica luminozitatea şi / sau contrastul (imagine fadă sau luminoasă) unei imagini, via Modify Image

Brightness/Contrast sau butonul (Brightness/Contrast), în zona Modify din inspectorul Properties (figura 12). Figura 12

În Dreamweaver MX 2004 puteţi suprima zonele şterse dintr-o imagine, via

Modify Image Sharpen sau butonul (Sharpen) în zona Modify din inspectorul Properties (figura 13). Figura 13

77

□ Comportamente asociate imaginilor Comportamentele Swap Image şi Swap Image Restore pot fi aplicate direct imaginilor.

Swap Image permite înlocuirea unei imagini cu altă imagine. Este preferabil ca ambele imagini să aibă aceeaşi dimensiune, altfel vor apărea deformaţii. Puteţi schimba una sau mai multe imagini în acelaşi timp.

Pentru a defini comportamentul Swap Image, efectuaţi următoarele operaţii:

1. Inseraţi o „imagine-buton” pentru a declanşa acţiunea prin Insert Image.

2. Inseraţi în pagina Web imaginea sau imaginile care vor fi schimbate între ele.

3. În inspectorul Properties, daţi un nume acestei (acestor) imagini.

4. Selectaţi imaginea-buton.

5. Afişaţi panoul Behaviors, via Window Behaviors.

6. În panoul Behaviors, executaţi clic pe butonul , apoi alegeţi Show Events For şi selectaţi o versiune de navigator.

7. Executaţi clic pe butonul , apoi selectaţi Swap Image.

8. În caseta de dialog Swap Image, care se afişează, în zona Images, selectaţi prima imagine care trebuie să fie schimbată.

9. În câmpul Set source to, executaţi clic pe butonul pentru a selecta imaginea care urmează să fie înlocuită.

10. Activaţi opţiunile: Preload Images – pentru a evita aşteptarea apariţiei imaginii de

înlocuire. Restore Images onMouse Out – pentru a regăsi imaginile de origine

atunci când pointer-ul părăseşte suprafaţa butonului declanşator.

11. Selectaţi cea de-a doua imagine, care trebuie să fie înlocuită şi procedaţi în mod similar.

12. Executaţi clic pe butonul . Panoul Behaviors afişează două evenimente (figura 14): OnMouseOut, OnMouseOver.

78

Figura 14

13. Salvaţi documentul.


15. Testaţi comportamentul, trecând mouse-ul deasupra butonului (onMouseOver).

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

______________________________________________________________

79

07 Crearea legăturilor hipertext

În acest capitol: � Tipuri de legături � Crearea unei legături hipertext către o altă pagină � Crearea unei legături hipertext într-o pagină � Crearea unei legături hipertext către o adresă de e-mail � Crearea unei legături hipertext într-o imagine � Alegerea culorii legăturilor hipertext � Gestionarea legăturilor hipertext �

□ Tipuri de legături Într-o pagină Web, puteţi întâlni pe lângă textele simple, obişnuite, şi texte care pot fi activate: legăturile hipertext. Legăturile hipertext permit vizitatorilor să navigheze în site-ul dumneavoastră. De regulă, legăturile hipertext activate îşi schimbă culoarea, dar acest lucru nu este obligatoriu!

În Dreamweaver MX 2004 puteţi crea legături interne şi legături externe. Legăturile (hipertext) interne permit deplasarea în interiorul aceleiaşi pagini a

site-ului sau către o altă pagină a site-ului. Legăturile externe sunt legături către alte site-uri Web, către o adresă e-mail

sau către un server FTP (File Transfer Protocol). Legăturile pot fi de tip text – un cuvânt sau mai multe cuvinte pe care

vizitatorul va executa un clic. Ele pot fi, de asemenea, de tip imagine – un buton, un rollover, o imagine-map în care puteţi delimita zone reactive (cerc, dreptunghi, poligon).

□ Crearea unei legături hipertext către o altă pagină

Pentru a crea o legătură hipertext către o altă pagina Web, folosiţi una din metodele prezentate în figura 1:

80

Figura 1 Meniul Modify Inspectorul

Properties Panoul Files Bara Insert, categoria

Common, butonul Hyperlink

1. Selectaţi textul ce urmează a fi convertit în legătură.

1. Executaţi clic în locul în acre doriţi să inseraţi legătura hipertext.

2. Executaţi clic pe Modify Make Link.

2. În zona Link, executaţi clic pe

(Browse for file).

Remarcă. Se afişează caseta de dialog Select File.

2. Afişaţi panoul Files, via Window Files.

2. Afişaţi caseta de dialog Hyperlink, via Bara Insert, categoria Common, butonul

(Hyperlink).

3. În caseta de dialog Hyperlink completaţi conţinutul câmpurilor care se afişează, iar apoi executaţi clic pe butonul

. Remarcă. Se afişează caseta de dialog Select File.

4. În caseta de dialog Select File, efectuaţi următoarele operaţii:


3.1. Selectaţi fişierul către care doriţi să dirijaţi link-ul.

3.2. În meniul derulant Relative to, alegeţi Document sau Site Root.

3.3. Executaţi clic pe butonul

.

3. În inspectorul Properties, în zona Link executaţi clic pe

icon-ul (Point to File), iar apoi glisaţi-l peste numele paginii, în panoul Files către care doriţi să glisaţi link-ul.



4.3. Executaţi clic pe

butonul . Remarci:

Legătura se afişează în zona Link din inspectorul Properties. Noua legătură se afişează în albastru şi subliniată.

81

□ Crearea unei legături hipertext într-o pagină Pentru a crea legături hipertext în cadrul aceleiaşi pagini Web, trebuie să creaţi mai întâi o ancoră (în locul dorit!), iar apoi o legătură către ancoră. ► Crearea ancorei

Pentru a crea o ancoră într-un document HTML care conţine deja un text structurat, folosiţi una din metodele prezentate în figura 2. Figura 2


1. Verificaţi dacă opţiunea Named Anchors este activată, via Edit PreferencesCategory Invisible Elements.

2. Verificaţi dacă opţiunea Invisible Elements este activată, via View Visual Aids Invisible Elements.

3. Executaţi clic înaintea textului pe care doriţi să-l marcaţi ca ancoră.

4. Executaţi clic pe Insert Named Anchor


executaţi clic pe butonul (Named Anchor).

Remarcă. Se afişează caseta de dialog Named Anchor.

5. În caseta de dialog Named Anchor, efectuaţi următoarele operaţii:

5.1. În zona Anchor name introduceţi numele ancorei.


Remarci:

Elementul invizibil al ancorei ( ) se afişează în fereastra Document (nu se afişează

82

în fereasta browser-ului!). Pentru a modifica numele ancorei, executaţi clic pe elementul invizibil, iar apoi

utilizaţi inspectorul Properties (câmpul Name). Codul HTML care defineşte o ancoră (numită) este:

► Crearea legăturii hipertext către ancoră

Pentru a crea o legătură către ancora numită, folosiţi una din metodele prezentate în figura 3. Figura 3

Inspectorul Properties Bara Insert, categoria Common, butonul Hyperlink

1. Selectaţi textul de legătură. 1. Executaţi clic în locul în care doriţi să inseraţi legăîturahipertext.

2. În inspectorul Properties, în zona Link, introduceţi numele ancorei precedat de simbolul „#” (fără nici un spaţiu între ele!). Remarcă. Puteţi folosi icon-ul

(Point to File, din inspectorul Properties) pe care să-l glisaţi peste elementul invizibil al ancorei numite (în fereastra Document).

2. Afişaţi caseta de dialog Hyperlink, via bara Insert categoria Common, butonul Hyperlink.

3. Acţionaţi tasta . 3. În caseta de dialog Hyperlink, efectuaţi următoarele operaţii:

3.1. Executaţi clic pe meniul derulant Link, iar apoi selectaţi ancora numită.

3.2. În câmpul Text introduceţi numele legăturii.


83

□ Crearea unei legături hipertext către o adresă de e-mail

Pentru a crea o legătură hipertext (externă) către o adresă de e-mail, folosiţi una din metodele prezentate în figura 4. Figura 4



1. Executaţi clic pe Insert Email Link.

1. În bara Insert, categoria Common, executaţi clic pe

butonul (Email Link). Remarcă. Se afişează caseta de dialog Email Link.

1. Introduceţi textul de legătură iar apoi selectaţi-l.

2. În caseta de dialog Email Link, efectuaţi următoarele operaţii:

2.1. În zona Text, introduceţi textul legăturii.

2.2. În zona E-mail introduceţi adresa de e-mail.


2. În cîmpul Link, introduceţi o legătură de tipul: mailto:[email protected].

Remarci: Textul legăturii se afişează în fereastra Document, iar în zona Link din inspectorul

Properties adresa de e-amil se afişează cu sufixul mailto:.

84

Codul HTML generat este:

□ Crearea unei legături hipertext într-o imagine Posibilităţile de creare a legăturilor (externe) într-o imagine cu Dreamweaver MX 2004 sunt numeroase: butoane (simple), rollover-e, imagini cu zone reactive, bare de navigare etc.

Pentru a crea legături hipertext într-o imagine, folosiţi una din metodele prezentate în figura 5. Figura 5

Inspectorul Properties Meniul Modify

1. Inseraţi imaginea, iar apoi selectaţi-o.

2. În zona Link introduceţi URL-ul complet al fişierului (site-ului) către care doriţi să dirijaţi link-ul.

2. Afişaţi caseta de dialog Select File, via Modify Make Link.




3.3. Executaţi clic pe butonul

.

□ Alegerea culorii legăturilor hipertext Dacă culorile implicite (bleu) ale link-urilor generate cu Dreamweaver MX 2004 fac notă discordantă cu paginile dumneavoastră Web, puteţi să le modificaţi.

85

Pentru a schimba culoarea legăturilor hipertext, efectuaţi următoarele operaţii

(figura 6): Figura 6

1. Selectaţi legătura.

2. Executaţi clic pe Modify Page Properties.

3. În caseta de dialog care se afişează – Page Properties – selectaţi categoria Links.

4. În zona Visited links executaţi clic pe butonul .

5. În paleta care se afişează, executaţi clic cu pipeta pe culoarea dorită.


86

□ Gestionarea legăturilor hipertext ► Ştergerea unei legături hipertext

Pentru a şterge o legătură hipertext, efectuaţi următoarele operaţii:

1. Selectaţi legătura hipertext.

2. În inspectorul Properties, în câmpul Link, selectaţi calea de acces la legătură, iar apoi activaţi tasta Delete.

► Ştergerea unei ancore

Metoda cea mai rapidă pentru ştergerea unei ancore este următoarea:

1. În codul sursă HTML selectaţi tag-ul de început <A>:<A href=”#...”>.

2. Activaţi tasta Delete.

3. Selectaţi tag-ul final </A>.

4. Activaţi tasta Delete.

_______________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

87

08 Inserarea şi formatarea tabelelor

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

□ Crearea unui tabel La puţin timp după introducerea lor în HTML, tabelele au devenit cel mai puternic şi util instrument pentru formatarea paginilor Web. Tabelele sunt alcătuite din trei elemente de bază: linii, coloane şi celule. Organizarea tabelului este simplă: titlul tabelului, corpul tabelului, celulele de date. Dreamweaver MX 2004 pune la dispoziţia utilizatorilor numeroase instrumente care permit „relaţii de bună vecinătate” între celule, linii şi coloane.

► Reguli generale

Listaţi toate datele înainte de a fi inserate într-un tabel. Definiţi structura tabelului (titlul tabelului, capul de tabel, numărul de linii,

coloane, celulele de date etc.). Realizaţi un crochiu al viitorului tabel pentru a putea judeca aspectul

acestuia. ► Metode de inserare

În Dreamweaver MX 2004 puteţi crea un tabel în două moduri: Standard Mode şi Layout Mode.

Pentru a insera un tabel în Dreamweaver MX 2004, folosiţi una din metodele prezentate în detaliu în figura 1.

88

Figura 1

Modul Standard Modul Layout Meniul Insert Bara Insert,

categoria Common

Modul View Bara Insert, categoria Layout

1. Executaţi clic în locul în care doriţi să inseraţi tabelul.

2. Executaţi clic pe Insert Table.


butonul (Table). Remarcă. Puteţi folosi de asemenea

butonul (Table) din categoria Layout, modul Standard.

2. Executaţi clic pe View Table Mode

Layout Mode (Ctrl+F6).


butonul (Layout).

Remarcă. Se afişează caseta de dialog Table.

Remarcă. Se afişează caseta de dialog Getting Started in Layout Mode.

3. Introduceţi valorile corespunzătoare pentru parametrii afişaţi în caseta de dialog Table.


.


.

4. Executaţi clic pe butonul (Layout Table).

5. Desenaţi o zonă dreptunghiulară care delimitează tabelul dumneavoastră. Remarcă. Dreamweaver MX 2004 afişează tabelul în modul Layout View şi indică

89

lungimea în pixeli.

6. Modificaţi (dacă este cazul!) structura tabelului direct (glisaţi mânerele) sau folosiţi inspectorul Properties. În zonele Width şi Height introduceţi valorile dorite.

7. Indicaţi dacă este cazul: CellPad, CellSpace, Bg şi Class.

8. Folosiţi, după caz, butonul (Clear Row Heights) pentru ştergerea valorilor atribuite înălţimii celulelor.

9. Desenaţi celulele tabelului.

9.1. În bara Insert, categoria Layout,

executaţi clic pe butonul (Draw Layout Cell).

9.2.Trasaţi prima celulă a tabelului.

9.3. Trasaţi celelalte celule ale tabelului.

9.4. Completaţi tabelul pe care l-aţi creat.

10. Afişaţi tabelul în modul standard folosind una din metodele de mai jos:

Meniul View Table Mode Standard Mode; Bara Insert Categoria Layout

Butonul . Executaţi clic pe legătura exit situată deasupra paginii:

Remarci:

În modul Standard Mode, atunci când măriţi o celulă veţi constata că această operaţie se transmite şi celorlalte celule ale coloanei. În concluzie, în Standard Mode nu puteţi mări sau micşora o singură celulă într-o coloană.

Dacă doriţi să efectuaţi această operaţie (numai pentru o singură celulă!) treceţi în Layout Mode. Dacă reveniţi în Standard Mode veţi constata că a fost creată o nouă celulă.

90

Dacă parametrul No wrap din inspectorul Properties (în Standard Mode) este activat, atunci textul va continua către coloana din dreapta.

□ Formatarea unui tabel ► Formatarea unui tabel cu ajutorul inspectorului Properties

Proprietăţile obiectului Table sunt: Table Id (numele tabelului); Rows, Cols (numărul de linii şi de coloane); W, H (dimensiunea tabelului); CellPad (spaţiul dintre conţinut şi marginile interioare ale celulelor unui tabel); CellSpace (spaţiul dintre celulele unui tabel); Align (tipul de aliniere: Default; Left; Center; Right).

Toate proprietăţile obiectului Table sunt afişate în inspectorul Properties (figura 2). Figura 2

► Formatarea celulelor unui tabel cu ajutorul inspectorului Properties

O celulă poate conţine: text, liste, imagini etc. Atunci când plasaţi pointer-ul mouse-ului într-o celulă, Dreamweaver MX

2004 afişează toate proprietăţile celulei în inspectorul Properties (figura 3): Horz (aliniamentul orizontal al conţinutului unei celule – Default, Center, Left, Right), Vert (aliniamentul vertical al conţinutului unei celule – Default, Top, Middle, Bottom, Baseline); W, H (lungimea şi lăţimea celulei); Bg (numele fişierului de fundal al unei celule sau culoarea unei celule); Merges selected cell using spans (fuzionează celulele selectate într-o singură celulă); Splits cell into rows or columns (fracţionează o celulă în două sau mai multe celule); Header (formatează bold şi centrat celulele selectate ca fiind celule de antet). Figura 3

91

Pentru a formata celulele unui tabel, selectaţi celulele respective, iar în inspectorul Properties, în partea inferioară a panoului, modificaţi parametrii afişaţi. Remarcă. Conţinutul unei celule (text, liste, imagini etc.) poate fi formatat în manieră clasică. Dacă selectaţi o imagine sau un text într-o celulă a unui tabel, inspectorul Properties afişează elementele de formatare ale conţinutului selectat. ► Formatarea unui tabel cu ajutorul modelelor predefinite

Cu Dreamweaver MX 2004 puteţi să formataţi propriul tabel, utilizând diferite modele predefinite: DblRows: Orange; DblRows: Cyan; DblRows: Grey; DblRows: Magenta, Blue; AltRows: Basic Grey, AltRows: Red etc.

Pentru formatări complexe, puteţi insera un tabel într-o celulă a tabelului.

□ Modificarea structurii unui tabel ► Adăugarea liniilor / coloanelor

Pentru a adăuga linii / coloane într-un tabel, folosiţi una din metodele prezentate în figura 4. Figura 4

Metoda Descriere Tasta (Tab) Executaţi clic în ultima celulă a tabelului dumneavoastră,

iar apoi acţionaţi tasta (Tab). Remarcă. Este inserată o nouă linie.


Selectaţi tabelul. În inspectorul Properties măriţi valoarea din câmpurile Rows şi/sau Columns. Remarcă. Noile linii se inserează la baza tabelului iar noile coloane se inserează la dreapta tabelului.

Meniul Modify Executaţi clic în celula deasupra căreia doriţi să se

92

insereze o nouă linie, iar apoi executaţi clic pe Modify Table Insert Row. Executaţi clic în celula în stânga căreia doriţi să se insereze o nouă coloană, iar apoi executaţi clic pe Modify Table Insert Column. Executaţi clic în celula alături de care doriţi să inseraţi linii sau coloane, iar apoi executaţi clic pe Modify Table Insert Rows or Column. Remarcă. Se afişează caseta de dialog Insert Rows or Columns.

Alegeţi opţiunea Insert Rows sau Columns. Indicaţi Number of rows pe care doriţi să le inseraţi. Cu opţiunea Where alegeţi Above the Selection sau Below the Selection pentru linii; sau Before current Column sau After current Column pentru coloane, apoi executaţi clic

pe butonul . Bara Insert, categoria Layout Utilizaţi butoanele: (Insert Row Above), (Insert

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

Remarcă. Regăsiţi aceste comenzi în meniul Insert Table Objects.

► Ştergerea liniilor / coloanelor

Pentru a suprima linii / coloane ale unui tabel, folosiţi una din metodele prezentate în figura 5.

93

Figura 5 Metoda Descriere

Meniul Modify Executaţi clic în celula care aparţine liniei/coloanei pe care doriţi s-o ştergeţi, iar apoi executaţi clic pe Modify Table Delete Row sau Delete Column.


Selectaţi tabelul. În inspectorul Properties micşoraţi valoarea din zona Rows sau Columns. Remarcă. Liniile şterse sunt cele situate la baza tabelului, iar coloanele şterse sunt cele situate la dreapta tabelului.

Tasta (Backspace)

Selectaţi o linie sau o coloană, iar apoi acţionaţi tasta (Backspace).

Tastele Ctrl+Shift+M

Pentru a şterge o linie, executaţi clic într-o celulă a liniei, iar apoi acţionaţi tastele Ctrl+Shift+M.

► Fuzionarea celulelor unui tabel

Pentru a fuziona celulele unui tabel, folosiţi una din metodele prezentate în figura 6. Figura 6


1. Selectaţi celulele adiacente pe care doriţi să le extindeţi.

2. Executaţi clic pe Modify Table Merge Cells (Ctrl+Alt+M).

2. Executaţi clic pe butonul (Merge selected cells using spans).

Tabel Iniţial Tabel cu celule extinse

Remarcă. Pentru a mări o celulă extinsă (sau o celulă nou fuzionată) executaţi clic în celulă, iar apoi executaţi clic pe Modify Table Increase Row Span sau Increase Column Span.

94

► Fracţionarea celulelor fuzionate

Pentru a fracţiona celulele fuzionate ale unui tabel, folosiţi una din metodele prezentate în figura 7. Figura 7


1. Executaţi clic într-o celulă fuzionată.

2. Executaţi clic pe Modify Table Split Cell.

2. Executaţi clic pe butonul (Split cells into rows or columns).

Remarcă. Se afişează caseta de dialog Split cell.

3. În funcţie de fuziunea iniţială alegeţi Split cell into: Rows sau Split cell into: Columns, iar apoi indicaţi Number of rows sau Number of columns.


► Modificarea structurii unui tabel folosind codul sursă HTML

Dacă cunoaşteţi bine limbajul HTML, aveţi posibilitatea să modificaţi direct, în codul sursă HTML, structura unui tabel, folosind una din următoarele metode:

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

95

□ Expanded Tables Mode Expanded Tables Mode adaugă o margine interioară celulelor şi spaţii pentru toate tabelele unui document. El măreşte, de asemenea, bordurile tabelelor pentru a facilita modificările. Acest mod particular de afişare a unui tabel permite regăsirea uşoară a elementelor într-un tabel şi plasarea punctului de inserare într-o manieră mult mai precisă.

Metodele de afişare a Expanded Tables Mode sunt prezentate în figura 8. Figura 8

Meniul View Bara Insert, categoria Layout

1. Executaţi clic pe View Table Mode Expanded Tables Mode.

1. Executaţi clic pe butonul (Expanded Tables Mode).

2. Pentru a reveni în Standard Mode, executaţi clic pe View Table Mode Standard Mode.

2. Pentru a reveni în Standard Mode,

executaţi clic pe butonul . Remarcă. pentru a reveni în mod rapid în Standard Mode executaţi clic pe legătura

, care se afişează în corpul paginii.

În figura 9 se prezintă un exemplu de tabel afişat în Standard Mode şi Expanded Tables Mode. Figura 9

Standard Mode Expanded Tables Mode

96

_____________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

97

09 Crearea şi validarea unui formular

În acest capitol: � Crearea unui formular � Inserarea obiectelor într-un formular � Validarea unui formular �

□ Crearea unui formular Formularele sunt ideale pentru a realiza o interactivitate între dumneavoastră şi vizitatorii site-ului pe care l-aţi creat. Pentru a utiliza formularele, sunt obligatorii două elemente: obiectele formularului (Text Field, Textarea, Button, CheckBox, Radio Button, List/Menu, File Field, Image Field, Hidden Field) şi un script pentru gestionarea datelor. Cu Dreamweaver MX 2004 dumneavoastră puteţi crea formularul, urmând ca script-ul să-l creaţi cu un limbaj de script (Java Script, Perl etc.). ► Etapele de creare a unui formular

Stabiliţi conţinutul şi forma de prezentare a formularului. Creaţi formularul propriu-zis (manual sau cu un editor WYSIWYG). Inseraţi obiectele formularului (Text Field, Textarea etc.). Realizaţi o pagină de confirmare de primire (un document pe care îl returnaţi

utilizatorului, precizându-i că formularul a fost bine primit). Alegeţi metoda de prelucrare a datelor din formular.

► Inserarea unui formular

Pentru a insera un formular (obiectul Form), folosiţi una din următoarele metode (figura 1).

98

Figura 1

Meniul Insert Bara Insert, categoria Forms

1. Verificaţi dacă opţiunea Form delimiter este activată, via Edit Preferences… categoria Invisible Elements Show: Form delimiter.

2. Verificaţi dacă elementele invizibile sunt afişate, via View Visual Aids Invisible Elements.

3. Executaţi clic pe Insert Form Form.

3. În bara Insert, categoria Forms,

executaţi clic pe butonul (Form). Remarcă. Dreamweaver MX 2004 creează un dreptunghi discontinuu roşu, care materializează limitele formularului.

□ Inserarea obiectelor într-un formular ► Inserarea unui câmp de text (Text Field)

Pentru a insera într-un formular un câmp de text (obiectul Text Field) în care utilizatorul poate introduce un text (pe o singură linie) cu puţine caractere (nume, prenume, oraş, comună, e-mail, adresă Web etc.) folosiţi una din următoarele metode (figura 2). Figura 2


1. Executaţi clic în interiorul formularului.

2. Executaţi clic pe Insert Form Text Field.

2. În bara Insert, categoria Forms, selectaţi obiectul (Text Field).

3. Parametrizaţi obiectul formularului în inspectorul Properties, iar apoi introduceţi eticheta corespunzătoare după obiectul inserat.

Pentru a parametriza obiectul Text Field, folosiţi inspectorul Properties în care

completaţi zonele: Text Field (numele obiectului); Char Width; Max Chars; Init Val; Class.

99

► Inserarea unei zone de text (Textarea) Zona de text (obiectul Textarea) este un câmp de text multilinie, în care utilizatorul poate introduce mai mult text (mesaj, adresă etc.).

Pentru a insera într-un formular o zonă de text (obiectul Textarea), modificaţi pasul 2 din figura 2, după cum urmează (figura 3). Figura 3



2. Executaţi clic pe Insert Form Textarea.

2. În bara Insert, categoria Forms, selectaţi obiectul (Textarea).


Pentru a parametriza obiectul Textarea, folosiţi inspectorul Properties în care

completaţi zonele: Textarea (numele obiectului); Type (alegeţi Multiline); Char Width; Num Lines; Init Val; Wrap (alegeţi Default); Class. ► Inserarea unui buton (Button)

Un buton poate avea trei funcţiuni: validează formularul şi demarează expedierea informaţiilor către server (obiectul Submit); resetează câmpurile formularului (obiectul Reset); execută o funcţie (Java Script sau alt limbaj de script).

Pentru a insera într-un formular un buton (obiectul Button), modificaţi pasul 2 din figura 2, după cum urmează (figura 4). Figura 4



2. Executaţi clic pe Insert Form Button.

2. În bara Insert, categoria Forms, selectaţi obiectul (Button).

100


Pentru a parametriza obiectul Button, folosiţi inspectorul Properties în care

completaţi zonele: Button name, Label, Action, Class. ► Inserarea unei casete de validare (CheckBox) În limbajul interfeţelor grafice, casetele de validare (obiectul CheckBox) sunt sinonime cu „una sau mai multe opţiuni din cele propuse”.

Pentru a insera într-un formular o casetă de validare (obiectul CheckBox), modificaţi pasul 2 din figura 2, după cum urmează (figura 5). Figura 5



2. Executaţi clic pe Insert Form CheckBox.

2. În bara Insert, categoria Forms, selectaţi obiectul (CheckBox).


Pentru a parametriza obiectul CheckBox, folosiţi inspectorul Properties în care

completaţi zonele: CheckBox, Checked Value, Initial State, Class. ► Inserarea unui buton radio (Radio Button) În limbajul interfeţelor grafice, butoanele radio (obiectul Radio Button) sunt sinonime cu „o singură opţiune din cele propuse”.

Pentru a insera într-un formular un buton radio (obiectul Radio Button), modificaţi pasul 2 din figura 2, după cum urmează (figura 6):

101

Figura 6



2. Executaţi clic pe Insert Form Radio Button.

2. În bara Insert, categoria Forms, selectaţi obiectul (Radio Button).


Pentru a parametriza obiectul Radio Button, folosiţi inspectorul Properties în

care completaţi zonele: Radio Button, Initial State, Class. ► Inserarea unui grup de butoane radio (Radio Group)

Pentru a insera într-un formular un grup de butoane radio (obiectul Radio Group), modificaţi pasul 2 din figura 2, după cum urmează (figura 7). Figura 7



2. Executaţi clic pe Insert Form Radio Group.

2. În bara Insert, categoria Forms,

selectaţi obiectul (Radio Group).


Fiecare buton radio, ce aparţine grupului de butoane radio, poate fi modificat în inspectorul Properties. ► Inserarea unui set de câmpuri (Fieldset)

Pentru a insera într-un formular un set de câmpuri (obiectul Fieldset), modificaţi pasul 2 din figura 2, după cum urmează (figura 8).

102

Figura 8



2. Executaţi clic pe Insert Form Fieldset.

2. În bara Insert, categoria Forms, selectaţi obiectul (Fieldset).


Fiecare obiect al formularului ce aparţine setului de câmpuri (Fieldset), poate fi modificat în inspectorul Properties. ► Inserarea unui meniu derulant (List / Menu) Cu un meniu derulant puteţi propune vizitatorilor site-ului dumneavoastră mai multe opţiuni, dar ... el nu poate alege decât una singură.

Pentru a insera într-un formular un meniu derulant (obiectul Menu), modificaţi pasul 2 din figura 2, după cum urmează (figura 9). Figura 9



2. Executaţi clic pe Insert Form List/Menu.

2. În bara Insert, categoria Forms, selectaţi obiectul (List/Menu).


Fiecare obiect al formularului ce aparţine setului de câmpuri (Fieldset), poate fi modificat în inspectorul Properties. Obiectul Menu poate fi parametrizat în inspectorul Properties.

_______________________________________________________________________________________________________________________________

103

► Inserarea unei liste derulante (List / Menu) Cu o listă derulantă puteţi propune vizitatorilor site-ului dumneavoastră mai multe opţiuni, ei putând alege oricâte doresc.

Pentru a insera într-un formular o listă derulantă (obiectul List), procedaţi la fel ca la inserarea unui meniu derulant. Obiectul List poate fi parametrizat în inspectorul Properties. ► Inserarea obiectului Hidden Field Un câmp mascat (obiectul Hidden Field) nu este vizibil în fereastra browser-ului atunci când vizitatorii consultă site-ul dumneavoastră. Totuşi, el este cunoscut de către proiectantul site-ului. (Câmpul Hidden figurează în codul sursă al documentului HTML!).

Pentru a insera într-un formular un câmp mascat (obiectul Hidden Field), modificaţi pasul 2 din figura 2, după cum urmează (figura 10). Figura 10



2. Executaţi clic pe Insert Form Hidden Field.

2. În bara Insert, categoria Forms, selectaţi obiectul (Hidden Field).


Pentru a parametriza obiectul Hidden Field, folosiţi inspectorul Properties în

care completaţi zonele: Hidden Field Name, Value, Class. ► Inserarea butonului de expediere (Submit)

Pentru a insera într-un formular un buton de expediere (obiectul Submit), modificaţi pasul 2 din figura 2, după cum urmează (figura 11).

104

Figura 11






Pentru a parametriza obiectul Submit, folosiţi inspectorul Properties în care

completaţi zonele: Button name, Label, Action (alegeţi Submit form), Class. ► Inserarea butonului de resetare (Reset) Butonul de resetare permite utilizatorului să anuleze valorile introduse în câmpurile formularului şi să reînceapă introducerea noilor valori.

Pentru a insera într-un formular un buton de resetare a formularului (obiectul Reset), modificaţi pasul 2 din figura 2, după cum urmează (figura 12): Figura 12






Pentru a parametriza obiectul Reset, folosiţi inspectorul Properties în care

completaţi zonele: Button name, Label, Action (alegeţi Reset form), Class.

_________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

105

□ Validarea unui formular Puteţi valida corectitudinea datelor introduse în câmpurile unui formular de către vizitatorii site-ului dumneavoastră în două situaţii: în momentul expedierii formularului (evenimentul onSubmit); atunci când vizitatorul completează câmpurile unul după altul (evenimentul onBlur/onChange).

► Inserarea comportamentului Validate Form Validarea în momentul expedierii formularului

Creaţi comportamentul Validate Form cu evenimentul onSubmit pentru ca validarea formularului să se realizeze în momentul acţionării butonului de expediere, Submit.

Efectuaţi următoarele operaţii (figura 13). Figura 13

1. Selectaţi formularul executând clic pe elementul <form> în bara de stare.

2. Afişaţi panoul Behaviors, via Window Behaviors (SHIFT+F3).

3. În panoul Behaviors, executaţi clic pe butonul , alegeţi Show Events For, iar în meniul secundar selectaţi navigatorul cu care veţi lucra.

4. În panoul Behaviors, executaţi clic pe butonul (adăugare comportament), iar apoi alegeţi comportamentul Validate Form.

Remarcă. Se afişează caseta de dialog Validate Form care repertoriază toate câmpurile de tip text ale formularului.

5. În caseta de dialog Validate Form, efectuaţi următoarele operaţii:

106

5.1. În zona Named fields selectaţi câmpul căruia urmează să i se aplice validarea.

5.2. În zona Value activaţi caseta de validare Required pentru a interzice în acest câmp o zonă vidă.

5.3. În zona Accept, alegeţi una din opţiunile: Anything – pentru a nu impune un tip de date particular (caseta de validare

Required a fost activată!). Number – pentru a nu accepta decât valori numerice. Email adress – pentru a testa prezenţa caracterului @. Number from x to y – pentru a avea o valoare numerică cuprinsă în

intervalul indicat.

5.4. Odată primul câmp parametrizat, selectaţi cel de-al doilea câmp; parametrizaţi-l ş.a.m.d. (în cazul unei validări globale).


Validarea câmp cu câmp

Creaţi comportamentul Validate Form cu evenimentul onBlur/onChange pentru ca validarea formularului să se realizeze de fiecare dată când utilizatorul părăseşte un câmp al formularului.

_________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

107

Efectuaţi următoarele operaţii (figura 14).

Figura 14

1. Selectaţi formularul executând clic pe elementul <form> în bara de stare.

2. Afişaţi panoul Behaviors, via Window Behaviors (SHIFT+F3).

3. În panoul Behaviors, executaţi clic pe butonul (adăugare comportament), iar apoi alegeţi comportamentul Validate Form.

4. Parametrizaţi câmpurile formularului ca în cazul precedent (validării în momentul expedierii formularului).


______________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

108

____________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

109

10 Inserarea şi formatarea cadrelor

În acest capitol: � Crearea unui set de cadre � Formatarea unui set de cadre � Formatarea cadrelor � Inserarea obiectelor într-un cadru � Definirea legăturilor hipertext într-un set de cadre � Comportamente asociate seturilor de cadre �

□ Crearea unui set de cadre Cadrele reprezintă un set de control al navigării. Proiectanţii recurg la cadre pentru a crea o pagină care conţine două sau trei cadre. Teoretic nu există limitări în ceea ce priveşte numărul de cadre. Atunci când vizitatorul afişează un site care conţine cadre, el vede un ansamblu de informaţii organizate în dreptunghiuri ce se afişează pe linii sau coloane. În cea mai mare parte a timpului, un sumar al site-ului este afişat în cadrul din stânga al ecranului, fiind suficient ca vizitatorul să execute un clic pe unul din item-urile afişate pentru a vedea pagina corespunzătoare într-unul din celelalte cadre ale ecranului.

Decizia de a utiliza cadre vă aparţine (vezi figura 1). Figura 1

Avantaje Dezavantaje Cadrele sunt recunoscute de cea mai

mare parte a navigatoarelor. Cadrele sunt percepute ca un set

distinct al utilizării tehnologiilor avansate de creare a unui site.

Cadrele reduc timpul de încărcare al paginilor; atunci când sunt utilizate, se încarcă numai conţinutul paginilor, elementele statice (logo-urile, meniurile de navigare etc.) fiind deja încărcate de către utilizatori.

Cadrele au reputaţia de a fi incoerente.

Navigarea in interiorul cadrelor rămâne încă un mister pentru unii dintre noi.

Cadrele pot ocupa mai mult spaţiu decât le este necesar.

Nu de puţine ori, cadrele pot reprezenta un risc juridic. Drepturile de autor pot fi încălcate atunci când se execută link-uri către documentele

110

Cadrele măresc gradul de funcţionalitate al site-ului. Navigarea rămâne vizibilă în timp ce conţinutul este în curs de schimbare, într-un cadru separat.

Cadrele permit de o manieră simplă şi rapidă actualizarea paginilor şi adăugarea unui conţinut nou.

Alături de tabele, cadrele reprezintă, de asemenea, un foarte puternic instrument de proiectare a site-urilor. Paginile care conţin cadre ocupă mai puţin spaţiu de memorie decât tabelele şi se încarcă mai rapid; sunt mai uşor de actualizat şi de întreţinut.

Cadrele sunt standarde în HTML 4.

(X)HTML din interiorul site-ului.

Proprietăţile obiectului Frameset sunt: Borders, Border width, Border color,

Rowcol Selection, Units.

Toate proprietăţile obiectului Frameset sunt afişate în inspectorul Properties.

Panoul Frames afişează ansamblul structurii cadrelor prezente în pagină. Panoul Frames permite vizualizarea rapidă a tuturor cadrelor pe care nu le putem vedea într-o pagină fără a le mări (figura 2). Pentru a afişa panoul Frames, executaţi clic pe Window Frames. Figura 2

111

► Metode de inserare În Dreamweaver MX 2004 puteţi crea seturi de cadre proprii (cu un mic efort!) sau puteţi folosi seturi de cadre predefinite (de-a gata!). Analizaţi şi decideţi!

Pentru a crea seturi de cadre proprii, folosiţi una din metodele prezentate în detaliu în figura 3. Figura 3 Cadre care se afişează în coloane Cadre care se afişează în linii Meniul Modify Meniul View Meniul Modify Meniul View

1. Executaţi clic pe Modify FrameSet

Split Frame Left sau Split Frame Right.

1. Executaţi clic pe View Visual Aids Frame Borders pentru a vizualiza chenarele cadrelor.

1. Executaţi clic pe Modify Frame Set Split Frame Up sau Split Frame Down.

1. Executaţi clic pe View Visual Aids Frame Borders pentru a vizualiza chenarele cadrelor.

Remarcă. Comenzile Split Frame Left/Split Frame Right împart pagina vertical, în două cadre: unul la stânga şi altul la dreapta.

Diferenţa între cele două comenzi nu intervine într-o pagină goală. Ea apare numai în cazul în care aveţi o pagină care conţine: text, imagini etc.

Remarcă. Trageţi cu mouse-ul de chenarul cadrului din stânga pentru a afişa setul de cadre în coloane.

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

Diferenţa între cele două comenzi nu intervine într-o pagină goală. Ea apare numai în cazul în care aveţi o pagină care conţine: text, imagini etc.

Remarcă. Trageţi cu mouse-ul de chenarul cadrului de sus pentru a afişa setul de cadre în linii.

2. Puteţi continua fracţionarea cadrelor via Modify Frame Set Split Frame Up sau Split Frame

2. Puteţi continua fracţionarea cadrelor via Window Frames pentru a obţine cadre imbricate.

2. Puteţi continua fracţionarea cadrelor via Modify Frame Set Split Frame Left sau Split

2. Puteţi continua fracţionarea cadrelor via Window Frames pentru a obţine cadre imbricate.

112

Down pentru a obţine cadre imbricate (nested).

În Frames selectaţi viitorul cadru ce urmează a fi fracţionat.

Frame Right pentru a obţine cadre imbricate (nested).

În panoul Frames selectaţi viitorul cadru ce urmează a fi fracţionat.

3. Salvaţi setul de cadre via File Save Frame.

Pentru a crea seturi de cadre pornind de la cadrele predefinite Dreamweaver

MX 2004, folosiţi una din metodele prezentate în figura 4. Figura 4

Categoria General, Framesets

Bara Insert, categoria Layout

Meniul Insert

1. Creaţi un nou document, via File New.

1. Creaţi un document simplu (fără cadre predefinite), via File New Category Basic page Create.

1. Executaţi clic pe Insert HTML Frames.

2. În categoria General, în lista derulantă Framesets alegeţi setul de cadre dorit, iar apoi executaţi clic pe butonul

.


butonul (Frames), iar apoi alegeţi setul de cadre dorit.

2. Alegeţi setul de cadre dorit.

3. Puteţi continua fracţionarea ferestrei deja … fracţionate. În document, executaţi clic în cadrul care urmează să fie din nou fracţionat sau, în panoul Frames, selectaţi (printr-un clic) cadrul care urmează a fi fracţionat. Inseraţi un set de cadre predefinit ş.a.m.d.

4. Salvaţi setul de cadre via File Save Frame As.

□ Formatarea unui set de cadre

Pentru a formata un set de cadre, efectuaţi următoarele operaţii:

1. Selectaţi setul de cadre de nivelul cel mai înalt.

2. În inspectorul Properties efectuaţi operaţiile prezentate în cele ce urmează (vezi figura 5).

2.1. În meniul derulant Borders alegeţi No/Yes. Dacă aţi optat pentru Yes, completaţi câmpurile Border width şi Border color.

113

2.2. În zona Rowcol Selection, executaţi clic pe Row/Column pentru a defini (Value) lungimea liniei / lăţimea coloanei selectate.

2.3. Introduceţi în zonele Value şi Units lungimea / lăţimea liniei sau coloanei exprimate în Pixels, Percent, Relative.

3. Selectaţi alte linii / coloane şi definiţi lungimea /lăţimea respectând acelaşi principiu.

4. Selectaţi, după caz, seturile de cadre imbricate şi formataţi-le după aceleaşi principii.

Figura 5

□ Formatarea cadrelor

Toate proprietăţile unui cadru (obiectul Frame) sunt disponibile în inspectorul Properties: Frame name, Src, Scroll, Borders, Border color, Noresize, Class, Margin Width, Margin Height.

Aveţi obligaţia să formataţi fiecare cadru care aparţine unui set de cadre după cum urmează:

1. Selectaţi obiectul Frame, via panoul Frames.


2.1. În zona Frame name introduceţi numele cadrului pentru a putea fi referit într-un set de cadre şi pentru a putea crea link-uri.

2.2. În zona Src introduceţi numele paginii care trebuie să se afişeze în acest cadru.

2.3. În meniul derulant Borders, alegeţi una din opţiunile Yes, No, Auto, Default. Dacă aţi ales Yes, introduceţi în zona Border color culoarea bordurii.

2.4. În meniul derulant Scroll, alegeţi una din opţiunile Yes, No, Auto, Default, pentru a preciza prezenţa / absenţa barelor de derulare.

2.5. În zonele Margin Width şi Margin Height definiţi distanţele (orizontală, verticală) între bordură şi cadru.

114

□ Inserarea obiectelor într-un cadru Dreamweaver MX 2004 vă permite să inseraţi într-un cadru orice obiect doriţi: imagini, text Flash etc. Dacă, de exemplu, doriţi să introduceţi text de la tastatură, procedaţi ca în cazul paginilor tradiţionale.

Metodele pe care este bine să le aveţi în vedere în strategia dumneavoastră de concepţie a unui set de cadre sunt prezentate în figura 6. Figura 6

Pregătirea documentelor în avans

Crearea documentelor pe parcurs

Pregătirea şi crearea documentelor

1. Creaţi şi salvaţi în avans toate documentele care vor interveni în procesul de creare a seturilor de cadre.

1. Creaţi, formataţi şi salvaţi setul de cadre.

1. Combinaţi primele două metode: pregătiţi diverse documente în avans, concepeţi cadrele dumneavoastră într-un document deja creat, iar apoi creaţi noi documente.

2. Creaţi într-un nou document setul de cadre şi formataţi-l (cu inspectorul Properties).

2. În fereastra Document, în primul cadru: inseraţi toate elementele necesare şi salvaţi documentul (via File Save Frame).

3. Procedaţi în mod similar şi cu celelalte cadre.

□ Definirea legăturilor hipertext într-un set de cadre

Pentru a defini link-urile într-un set de cadre, efectuaţi următoarele operaţii:

1. Selectaţi textul / imaginea legăturii.


2.1. În câmpul Link indicaţi pagina care urmează să fie încărcată.

115

2.2. În meniul derulant Target, selectaţi numele cadrului din setul de cadre în care urmează să se afişeze pagina.

□ Comportamente asociate seturilor de cadre

Comportamentele asociate seturilor de cadre livrate cu Dreamweaver MX 2004 (Set Text of Frame, GoToURL) permit utilizatorului să interacţioneze dinamic cu paginile dumneavoastră Web.

Pentru a schimba conţinutul unui cadru, folosiţi comportamentul Set Text of Frame, după cum urmează:

1. Creaţi setul de cadre.

2. Afişaţi panoul Behaviors.

3. Selectaţi cadrul căruia doriţi să-i schimbaţi conţinutul.

4. În panoul Behaviors, executaţi clic pe Set Text Set Text of Frame.

5. În caseta de dialog Set Text of Frame, efectuaţi operaţiile corespunzătoare schimbării conţinutului cadrului.

6. Alegeţi evenimentul onMouseOver / onClick.


8. Testaţi comportamentul Set Text of Frame.

____________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

116

_____________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

117

11 Crearea şi formatarea straturilor

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

□ Crearea unui strat Un strat (obiectul Layer) sub Dreamweaver MX 2004 este o celulă pe care o puteţi deplasa şi redimensiona liber în pagina dumneavoastră Web. Sistemul de straturi vă permite plasarea foarte precisă a obiectelor paginii: text, imagini, animaţii, tabele care, la rândul lor, conţin obiecte. ► Reguli generale

Straturile aparţin marii familii a foilor de stil în cascadă (CSS); ele sunt foi de stil de poziţionare a obiectelor într-o pagină Web - CSSP pentru W3C (în prezent, ele sunt integrate în CSS-2).

Straturile permit suprapunerea obiectelor unei pagini Web.

Straturile pot servi la crearea animaţiilor după un scenariu.

Cu ajutorul straturilor, puteţi crea efecte de superpoziţie foarte interesante şi originale, plasând straturile unele deasupra celorlalte.

Dreamweaver MX 2004 vă propune două formate de straturi: straturi CSS care poziţionează obiectele paginii cu ajutorul tag-urilor Div şi Span; straturi Netscape care poziţionează obiectele paginii cu ajutorul tag-urilor Layer şi Ilayer (utilizate numai de Netscape).

118

În Dreamweaver MX 2004 straturile au o poziţie absolută: stratul este plasat în raport cu marginile paginii şi este poziţionat deasupra conţinutului paginii (figura 1). Figura 1 y x unde: x reprezintă poziţia orizontală faţă de marginea din stânga a stratului; y reprezintă poziţia verticală faţă de marginea de sus a stratului; z reprezintă ordinea de suprapunere în raport cu alte straturi. ► Inserarea unui strat

Proprietăţile obiectului Layer sunt: Layer ID (numele stratului); L (distanţa în pixeli măsurată de la marginea din stânga a paginii la marginea din stânga stratului); T (distanţa în pixeli măsurată de la marginea de sus a paginii la marginea superioară a stratului); W şi H (dimensiunile stratului); Z-Index (ordinea de suprapunere a stratului); Bg Image (imaginea de background pentru strat); Bg Color (culoarea de background pentru strat); Overflow (modul în care straturile se afişează în browser); Clip (valori de decupare – L, T, R, B); Class (stil CSS).

Panoul Layers afişează toate straturile într-o pagină (figura 2). Pentru a afişa panoul Layers, executaţi clic pe Window Layers. Figura 2

Stratul 1

Stratul 2

Stratul 3 z

119

Pentru a insera un strat (obiectul Layer) în pagină, folosiţi una din metodele

prezentate în figura 3. Figura 3

Meniul Insert Bara Insert, categoria Layout

1. Executaţi clic în locul în care doriţi să fie inserat stratul (layer-ul).

2. Executaţi clic pe Insert Layout Objects Layer.

2. Executaţi clic pe butonul (Draw Layer).

3. Selectaţi stratul, folosind una din următoarele proceduri:

executaţi clic pe elementul invizibil ( ); executaţi clic pe conţinutul stratului; când punctul de inserţie se află în interiorul stratului, executaţi clic pe

butonul aflat în colţul din stânga sus al stratului; când stratul nu este activat, acţionaţi şi menţineţi apăsată tasta Shift şi

executaţi clic oriunde în interiorul stratului; în panoul Layers (via Window Layer, zona Name) executaţi clic pe numele

stratului (pentru moment Layer1). Remarci:

Când stratul a fost selectat, pe conturul acestuia apar opt pătrate negre (mânere). Verificaţi dacă elementele invizibile ale straturilor au fost activate (via

Edit Preference Category Invisible Elements opţiunea Anchor Points for Layers). În pagină, elementele invizibile şi bordurile trebuie să fie afişate (via View Visual

Aids Invisible Elements şi Layers Borders).

4. Trageţi de mânerele de redimensionare pentru a obţine dimensiunea aproximativă a stratului.

_________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

□ Formatarea unui strat

Pentru a formata un strat, utilizaţi panoul Layers şi inspectorul Properties. Selectaţi stratul, iar apoi în inspectorul Properties completaţi zonele: Layer

ID, L, T, W, H, Z-Index, Vis, BgColor, Overflow, Clip, Class (figura 4).

120

Figura 4

□ Crearea straturilor imbricate

Un strat imbricat este un strat plasat în interiorul altui strat, păstrând relaţia „paternală”. Primul strat devine „tatăl” stratului imbricat („fiu”). Stratul „fiu” utilizează colţul superior din stânga al stratului părinte ca punct de orientare pentru poziţionare. Dacă straturile se află în zone diferite ale paginii, relaţia cu stratul părinte se păstrează. Dacă ştergeţi stratul „părinte”, în mod automat se şterg şi straturile „fiu”.

Pentru a crea straturi imbricate cu Dreamweaver MX 2004, folosiţi una din metodele prezentate în figura 5. Figura 5

Metoda manuală Metoda automată

1. Desenaţi primul strat şi numiţi-l tata.

1. Executaţi clic pe Edit Preferences. Remarcă. Se afişează caseta de dialog Preferences.

2. Desenaţi cel de-al doilea strat în interiorul primului strat şi numiţi-l fiu.

2. În caseta de dialog Preferences, în zona Nesting activaţi opţiunea Nest when created within a layer.

121

3. Afişaţi panoul Layers.

Remarcă. În panoul Layers identificaţi un strat imbricat prin indentarea stratului „fiu” în stratul „tata” şi prin simbolul plasat înaintea stratului „tata”.


.

4. Desenaţi stratul „tata”. 5. În interiorul acestui strat, desenaţi

stratul „fiu”. Remarci:

Stratul „fiu” este imbricat în stratul „tata” în mod automat.

Nu uitaţi să dezactivaţi opţiunea „Nested when created within a Layer” dacă nu doriţi să creaţi în mod sistematic straturi imbricate.

□ Comportamente asociate straturilor

Comportamentul Set Text of Layer permite înlocuirea conţinutului şi formatarea unui strat printr-un conţinut diferit şi/sau atribute specifice. Conţinutul unui strat poate fi cod HTML.

Comportamentul Show-Hide Layers permite afişarea straturilor mascate şi mascarea straturilor vizibile.

Comportamentul Drag Layer dă posibilitatea utilizatorului să deplaseze un strat. Această deplasare poate fi liberă sau restrictivă.

122

____________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

123

12 Utilizarea bibliotecilor de obiecte şi a modelelor

În acest capitol: � Inserarea obiectelor � Biblioteci de obiecte � Modele �

Pentru gestionarea paginilor Web, Dreamweaver MX 2004 pune la dispoziţia utilizatorului două instrumente practice: bibliotecile de obiecte şi modelele. Bibliotecile de obiecte permit catalogarea (stocarea) anumitor porţiuni (zone) ale unei pagini, iar un model (de pagină) reprezintă o pagină întreagă, deja formatată.

□ Inserarea obiectelor Cu Dreamweaver MX 2004, puteţi insera în paginile Web obiecte dintre cele mai diverse: animaţii Flash / Shockwave, obiecte Fireworks, applet-uri Java, controale ActiveX, script-uri, obiecte multimedia etc.

► Animaţii Flash

Proprietăţile animaţiei Flash sunt: Flash (numele animaţiei); W şi H (dimensiunile animaţiei); Loop şi Autoplay (ciclarea şi revenirea la începutul animaţiei); Vspace şi Hspace (spaţiul exprimat în pixeli dintre animaţie şi textul adiacent); Align (tipul de aliniere); Bg (culoarea de background); Class (stil CSS).

Toate proprietăţile unei animaţii Flash sunt disponibile în inspectorul Properties (figura 1). Figura 1

124

Pentru a insera într-o pagină o animaţie Flash, folosiţi una din metodele

prezentate în figura 2. Figura 2


1. Executaţi clic în locul în care doriţi să inseraţi animaţia Flash.

2. Executaţi clic pe Insert Media Flash.


executaţi clic pe butonul (Media) şi

alegeţi . Remarcă. Se afişează caseta de dialog Select File.

3. În caseta de dialog Select File, selectaţi fişierul .swf în site-ul dumneavoastră.

Remarcă. În document animaţia apare sub forma .


Pentru a parametriza o animaţie Flash, utilizaţi inspectorul Properties.

______________________________________________________________

125

► Animaţii Shockwave

Proprietăţile animaţiei Shockwave sunt: Shockwave, W, H, File, Class, Vspace, Hspace, Align, Bg.

Toate proprietăţile unei animaţii Shockwave sunt disponibile în inspectorul Properties (figura 3). Figura 3

Pentru a insera într-o pagină o animaţie Shockwave, folosiţi una din metodele prezentate în figura 4. Figura 4


1. Executaţi clic în locul în care doriţi să inseraţi animaţia Shockwave.

2. Executaţi clic pe Insert Media Shockwave.


executaţi clic pe butonul (Media) şi

alegeţi . Remarcă. Se afişează caseta de dialog Select File.

3. În caseta de dialog Select File, selectaţi fişierul.dir în site-ul dumneavoastră.

126

Remarcă. În document animaţia apare sub forma .


Pentru a parametriza o animaţie Shockwave, folosiţi inspectorul Properties.

Folosiţi comportamentul Control Shockwave or Flash pentru a controla o animaţie Flash sau Shockwave. ► Applet-uri Java Limbajul de programare Java, dezvoltat de Sun Microsystems permite programatorilor să scrie mici aplicaţii (applet, în limba engleză) care pot fi inserate într-o pagină Web.

Proprietăţile unui applet Java sunt: Applet name, W, H, Code, Base, Align, Alt, Vspace, Hspace, Class.

Toate proprietăţile unui applet Java sunt disponibile în inspectorul Properties (figura 5). Figura 5

Pentru a insera într-o pagină un applet Java, folosiţi una din metodele prezentate în figura 6. Figura 6


1. Executaţi clic în locul în care doriţi să fie inserat applet-ul Java.

2. Executaţi clic pe Insert Media Applet.


executaţi clic pe butonul (Media), iar

127

apoi alegeţi . Remarcă. Se afişează caseta de dialog Select File.

3. Selectaţi fişierul ….class pe care doriţi să-l inseraţi.


Pentru a parametriza un applet Java, folosiţi inspectorul Properties. ► Obiecte multimedia În afară de text şi imagini, mai puteţi insera în paginile dumneavoastră Web: sunet, video (obiecte multimedia). Site-ul Macromedia dispune de numeroase obiecte multimedia pe care le puteţi descărca şi instala fără efort. Obiectul sunet

Proprietăţile obiectului sunet sunt: Plugin, W, H, Src, PlgURL, Align, Vspace, Hspace, Border, Class.

Toate proprietăţile obiectului sunet sunt disponibile în inspectorul Properties (figura 7). Figura 7

Pentru a insera într-o pagină un obiect sunet, folosiţi una din metodele prezentate în figura 8. Figura 8


1. Executaţi clic în locul în care doriţi să fie inserat fişierul sunet.

2. Executaţi clic pe Insert Media Plugin.


executaţi clic pe butonul (Media), iar

128

apoi alegeţi . Remarcă. Se afişează caseta de dialog Select File.

3. În caseta de dialog Select File selectaţi fişierul audio ….wav pe care doriţi să-l inseraţi.


Inserarea obiectului sunet necesită un plug-in.

Pentru a parametriza un obiect sunet, folosiţi inspectorul Properties.

Folosiţi comportamentul Play Sound care poate fi aplicat direct sunetului. Obiectul video

Proprietăţile, metodele de inserare ale obiectului video sunt aceleaşi ca ale obiectului sunet.

Inserarea obiectului video necesită un plug-in.

Pentru a parametriza un obiect video, folosiţi inspectorul Properties.

□ Biblioteci de obiecte Atunci când concepeţi site-urile Web în cadrul unei echipe, numeroase elemente HTML sunt considerate comune şi reutilizabile. Pentru a putea reutiliza aceste elemente recurente, folosiţi bibliotecile de obiecte din Dreamweaver MX 2004, mai precis panoul Assets care poate fi considerat o „superbibliotecă”. ► Utilizarea bibliotecii de obiecte Este bine ca toate elementele care se repetă într-un site Web (copyright-ul, adresele, logo-urile, clauzele de garanţie etc.) să fie catalogate într-o bibliotecă. Creaţi un element de bibliotecă, salvaţi-l, iar apoi aplicaţi-l oricărei pagini din site-ul dumneavoastră.

129

Dreamweaver MX 2004 stochează elementele de bibliotecă într-un folder cu numele Library situat în rădăcina locală a fiecărui site, care conţine propria sa bibliotecă.

Un element de bibliotecă poate fi oricare din elementele secţiunii BODY ale unui document: text, tabele, formulare, applet-uri Java, bare de navigare, imagini. Elementele de bibliotecă pot conţine, de asemenea, comportamente, dar nu pot conţine scenarii sau foi de stil.

Pentru a afişa biblioteca de obiecte Dreamweaver MX 2004, efectuaţi următoarele operaţii:

1. Executaţi clic pe Window Assets sau activaţi tasta F11. Se afişează panoul Assets.

2. În panoul Assets, în coloana din stânga, executaţi clic pe butonul (Library), figura 9.

Figura 9

Pentru a cataloga un element de bibliotecă, folosiţi una din metodele prezentate în figura 10.

130

Figura 10 Meniul Modify Panoul Assets

1. Selectaţi site-ul Dreamweaver MX 2004 (deja existent).

2. Deschideţi pagina care conţine obiectele ce urmează a fi catalogate în biblioteca de obiecte.

3. Selectaţi obiectul pe care doriţi să-l catalogaţi în bibliotecă.

4. Executaţi clic pe Modify Library Add Object to Library.

4. Executaţi clic pe Window Assets

butonul (Library).

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

5. Deplasaţi obiectul selectat în fereastra bibliotecii. Remarcă. Pentru crearea elementului de bibliotecă (fără nume) mai puteţi folosi una din procedurile următoare:

în meniul local al panoului Assets, categoria Library alegeţi opţiunea New Library Item;

executaţi clic pe butonul (New Library Item).

6. Atribuiţi un nume (semnificativ) elementului de bibliotecă.

7. Acţionaţi tasta ENTER. Remarcă. Odată ce elementul a fost catalogat (adăugat în bibliotecă), o realizare a acestui element este imediat utilizată în pagina curentă.

8. Selectaţi elementul de bibliotecă, pe care l-aţi catalogat în pagina dumneavoastră şi vizualizaţi informaţiile care se afişează în inspectorul Properties.

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

Fiecare realizare a unui element de bibliotecă pe care l-aţi creat se afişează în pagină, colorat în galben. Dacă este cazul, puteţi schimba culoarea galbenă.

Pentru a insera într-o pagină un element de bibliotecă, efectuaţi următoarele operaţii:

1. Executaţi clic în zona în care doriţi să inseraţi elementul de bibliotecă.

131

2. În panoul Assets executaţi clic pe butonul (Library), iar apoi selectaţi elementul de bibliotecă pe care doriţi să-l inseraţi.

3. Inseraţi elementul de bibliotecă (selectat), folosind una din metodele:

Executaţi clic pe butonul . Deschideţi meniul local al panoului Assets, iar apoi alegeţi opţiunea

Insert. Glisaţi icon-ul obiectului selectat în document.

4. Închideţi categoria Library.

Pentru a modifica un element de bibliotecă, efectuaţi următoarele operaţii:

1. Afişaţi catalogul site-ului, via tasta F8.

2. Afişaţi fereastra elementului de bibliotecă „Library Item”, via folder-ul Library sau panoul Assets.

3. În fereastra „Library Item” efectuaţi modificările corespunzătoare.

4. Executaţi clic pe File Save. Se afişează caseta de dialog Update Library Items. Răspundeţi la întrebarea „Update library items in these files?”.

5. În caseta de dialog Update Library Items, executaţi clic pe butonul

, iar apoi executaţi clic pe butonul .

Pentru a suprima legătura (link-ul) cu elementul de bibliotecă, selectaţi elementul, iar apoi, în inspectorul Properties, executaţi clic pe butonul

.

Pentru a redenumi un element de bibliotecă, efectuaţi următoarele operaţii: în panoul Assets, categoria Library, executaţi clic pe elementul pe care doriţi să-l redenumiţi; deschideţi meniul local, iar apoi executaţi clic pe Rename. Introduceţi noul nume al elementului, iar în caseta de dialog Update Files,

executaţi clic pe butonul / .

Dacă, din greşeală, aţi şters un element de bibliotecă, puteţi să-l recreaţi, via

inspectorul Properties, butonul .

132

□ Modele ► Utilizarea modelelor Dreamweaver MX 2004 Un model Dreamweaver este o machetă în care nu puteţi modifica decât anumite regiuni – regiuni editabile. Un model Dreamweaver diferă de un element de bibliotecă prin aceea că modelul reprezintă o pagină întreagă, deja formatată. Modelele Dreamweaver sunt gestionate de panoul Assets, categoria Templates. Puteţi construi un model de la zero sau puteţi salva o pagină existentă ca model.

Într-un model Dreamweaver MX 2004, pot fi inserate următoarele tipuri de regiuni (zone): Editable Region (zona poate fi modificată); Optional Region (zona poate fi utilizată sau nu); Repeating Region (zona poate fi repetată); Repeating Table (zona conţine un tabel care poate fi modificat). Crearea unui nou document cu ajutorul unui model Dreamweaver existent

Pentru a crea rapid o pagină deja formatată, puteţi apela la modelele Dreamweaver MX 2004.

Dacă pagina de demaraj nu este afişată, efectuaţi următoarele operaţii: afişaţi caseta de dialog New Document; executaţi clic pe una din următoarele categorii – Page Designs / Page Designs (Accesible) / Template Page; executaţi clic pe modelul corespunzător.

Dacă pagina de demaraj este afişată, în categoria Create from Sample, executaţi clic pe categoria de model de pagină corespunzătoare, iar apoi în caseta de dialog care se afişează, selectaţi modelul pe care doriţi să-l creaţi. Crearea unui model personalizat Dacă modelele oferite de Dreamweaver MX 2004 nu vă satisfac, sau nu doriţi să realizaţi toate paginile site-ului cu un tip de formatare definită, soluţia este aceea de a crea un nou model pe care apoi să-l aplicaţi paginilor din site-ul dumneavoastră.

133

Pentru a crea un model personalizat, folosiţi una din metodele prezentate în detaliu în figura 11. Figura 11

Meniul File Bara Insert, categoria Common

1. Creaţi o pagină Web care vă va servi ca model, sau deschideţi o pagină deja creată care vă va servi ca model.

2. Executaţi clic pe File Save As Template…


executaţi clic pe butonul .Remarcă. Se deschide caseta de dialog Save As Template.

3. În caseta de dialog Save As Template, efectuaţi următoarele operaţii:

3.1. În zona Site, selectaţi în meniul derulant, site-ul în care doriţi să salvaţi modelul de pagină.

3.2. În zona Save as introduceţi numele modelului.


4. Afişaţi panoul Assets, via Window Assets.

5. În panoul Assets, executaţi clic pe butonul (Templates). Remarcă. Reţineţi extensia .dwt pentru Dreamweaver template.

_______________________________________________________________________________________________________________________________

134

Inserarea unei regiuni editabile Când creaţi un model, totul este ... îngheţat! În consecinţă, va trebui să creaţi regiuni editabile pe care să le modificaţi atunci când, pornind de la un model, veţi crea un nou document.

Pentru a insera regiuni editabile într-un model, folosiţi una din metodele prezentate în figura 12. Figura 12


1. În panoul Assets, executaţi clic pe categoria (Templates).

2. În panoul Assets, categoria Templates executaţi dublu clic pe numele modelului, pentru a-l deschide.

3. Selectaţi prima regiune editabilă.

4. Executaţi clic pe Insert Template Objects Editable Region.


executaţi clic pe butonul (Template)

şi alegeţi . Remarcă. Se afişează caseta de dialog New Editable Region.

5. În caseta de dialog New Editable Region, executaţi următoarele operaţii:

5.1. În zona Name introduceţi numele primei zone editabile.


Remarcă. Dreamweaver MX 2004 adaugă modelului o regiune editabilă; o casetă bleu indică numele său.

6. Repetaţi paşii 3, 4, 5 pentru a defini celelalte regiuni editabile.

7. Salvaţi modelul (via File Save sau Ctrl+S).

135

Pentru a accesa rapid una sau mai multe regiuni editabile, executaţi clic pe Modify Templates regiunea editabilă.

Pentru a suprima o regiune editabilă, executaţi clic pe Modify Templates Remove Template Markup.

Pentru a crea un document pornind de la un model care conţine regiuni editabile, efectuaţi următoarele operaţii: în subpanoul Templates (File New) selectaţi site-ul care conţine modelul corespunzător; selectaţi modelul care urmează să fie utilizat; activaţi opţiunea Update page when template changes;

executaţi clic pe butonul (figura 13). Figura 13

Pentru a introduce informaţiile corespunzătoare în regiunile editabile ale unui document, folosiţi una din următoarele metode:

Selectaţi sau executaţi clic în regiunea editabilă, iar apoi introduceti informaţiile respective.

Executaţi clic pe numele regiunii editabile (via Modify Templates), iar apoi introduceţi informaţiile corespunzătoare.

Ca şi în cazul elementelor de bibliotecă, puteţi modifica un model, via panoul

Assets categoria Templates butonul (Edit).

136

Pentru a redenumi un model, folosiţi panoul Assets, categoria Templates, comanda Rename din meniul local.

Pentru a suprima legătura dintre model şi document(e), executaţi clic pe Modify Templates Detach from template.

Pentru a suprima un model, selectaţi modelul pe care doriţi să-l ştergeţi (via panoul Assets categoria Templates), iar apoi executaţi clic pe butonul (Delete). Inserarea unei regiuni facultative Într-un model, o regiune facultativă este o regiune pe care o puteţi programa astfel încât ea să apară sau nu într-un document bazat pe acest model.

Pentru a insera una sau mai multe regiuni facultative într-un model, folosiţi una din metodele prezentate în figura 14. Figura 14


1. Executaţi clic pe Insert Template Objects Optional Region.

1. Executaţi clic pe (Templates)

. Remarcă. Se afişează caseta de dialog New Optional Region.

2. În caseta de dialog New Optional Region, categoria Basic, efectuaţi următoarele operaţii:

2.1. În zona Name, introduceţi un cuvânt cheie (variabilă) care corespunde regiunii facultative.

2.2. Activaţi sau nu opţiunea Show by default.


________________________________________________________________________________________________________________________________________________________________________________________________

137

3. Inseraţi un obiect, în această regiune facultativă.

4. Modificaţi parametrii regiunii facultative, via inspectorul Properties butonul Modify. Inserarea unei regiuni repetabile

O regiune repetabilă permite definirea unei regiuni editabile care va putea fi repetată în cadrul modelului.

Pentru a crea o regiune repetabilă, folosiţi una din metodele prezentate în figura 15. Figura 15


1. Deschideţi modelul.

2. Selectaţi regiunea repetabilă.

3. Executaţi clic pe Insert Template Objects Repeating Region.


executaţi clic pe (Templates)

. Remarcă. Se deschide caseta de dialog New Repeating Region.

4. În caseta de dialog New Repeating Region, efectuaţi operaţiile următoare:

4.1. În zona Name, introduceţi numele regiunii repetabile.


138

5. Salvaţi modelul. Inserarea unui tabel repetabil În general, o regiune repetabilă este utilizată pentru tabele. Dreamweaver MX 2004 permite crearea unui tabel repetabil, al cărui număr de linii poate fi precizat.

Pentru a insera un tabel repetabil, folosiţi una din metodele prezentate în figura 16. Figura 16


1. Creaţi un nou model.

2. Executaţi clic pe Insert Template Objects Repeating Table.


executaţi clic pe butonul

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

3. Completaţi parametrii tabelului, iar apoi executaţi clic pe butonul

.

4. Salvaţi mdelul.

Pentru a utiliza un model care conţine un tabel repetabil, efectuaţi

următoarele operaţii:

1. Creaţi un nou document bazat pe modelul respectiv.

2. Utilizaţi butoanele şi pentru adăugarea şi suprimarea liniilor repetabile şi butoanele şi pentru sortarea lor.

139

13 Limbajul Java Script şi Dreamweaver MX 2004

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

□ Interesul pentru limbajul Java Script

Java Script este limbajul favorit al creatorilor de site-uri Web. Java Script este un limbaj uşor de învăţat. Java Script este un limbaj care poate fi interpretat de către browser-e. Script-urile Java Script pot fi incluse direct în documentele (X)HTML.

□ Terminologia limbajului Java Script Pentru a putea lucra cu limbajul Java Script, va trebui să vă familiarizaţi cu termenii şi conceptele acestui limbaj de script: obiect, proprietate, metodă, instrucţiune, funcţie, evenimente, gestionar de evenimente, variabilă.

Obiect: entitate cu parte întreagă. Tipuri de obiecte Java Script – obiecte interne, furnizate de limbajul Java Script; obiecte personalizate, create de către utilizator în funcţie de cerinţele script-ului; obiectele navigatorului, care sunt exterioare limbajului Java Script şi sunt recunoscute de către browser-e. În limbajul Java Script, obiectele sunt considerate ca substantive.

DOM: Document Object Model. Defineşte obiectele navigatorului în mod ierarhic.

Proprietate: descrie un obiect. În limbajul Java Script, proprietăţile sunt considerate ca adjective. Ele se separă de obiect prin punct.

140

Metodă: o funcţie care defineşte un anumit comportament caracteristic al unui obiect. Fiecare obiect posedă o colecţie de metode, iar fiecare metodă aparţine cel puţin unui obiect. În limbajul Java Script, metodele sunt considerate ca verbe. Ele se separă de obiect prin punct.

Instrucţiune: o acţiune care produce afişarea unui text, modificarea proprietăţilor unui obiect etc.

Funcţie: un grup de instrucţiuni tratate ca o singură entitate, sau un obiect care conţine cod executabil. Spre deosebire de metode, funcţiile nu sunt asociate nici unui obiect particular.

Evenimente: o acţiune care se produce în raport cu un obiect (buton, fereastră etc.). Fiecare eveniment este asociat unui obiect.

Gestionarii de evenimente: indică navigatorului cum să reacţioneze atunci când se produc diferite evenimente. În general, un gestionar de evenimente ia forma unei funcţii Java Script pe care o creaţi special pentru a prelucra un anume tip de eveniment, dar el poate fi, totodată, o instrucţiune sau mai multe instrucţiuni Java Script, care sunt integrate în codul (X)HTML de definire a evenimentului. Pentru a defini un gestionar de evenimente, adăugaţi on la începutul evenimentului. onBlur, onChange, onClick, onFocus, onKeyPress, onMouseOver, onMouseOut sunt exemple de gestionari de evenimente.

Variabilă: reprezintă un element fundamental al limbajului Java Script. O variabilă poate fi: un număr, un şir de caractere sau un obiect. În limbajul Java Script nu trebuie să specificaţi tipul variabilelor. Ori de câte ori creaţi o variabilă, valoarea pe care o atribuiţi determină tipul variabilei. În Java Script, cuvântul cheie var poate servi la declararea unei variabile. Totuşi, în foarte multe cazuri, puteţi să-l omiteţi.

_________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

141

□ Bazele limbajului Java Script ► Elementele script şi noscript

Rolul elementului script (<script> cod Java Script </script>) este acela de a defini script-ul care va fi utilizat în documentul (X)HTML.

Atributele tag-ului <script> (figura 1) sunt: type (indică tipul limbajului de script); language (indică limbajul de script şi facultativ versiunea); src (indică URL-ul fişierului extern care conţine script-ul). Figura 1 <script type=”text/JavaScript” language=”JavaScript” src=”...”> Cod Java Script </script>

Incapacitatea navigatorului de a prelucra un script poate avea trei cauze: fie

el nu ştie să prelucreze script-urile în general; fie el nu recunoaşte limbajul desemnat prin atributul type; fie utilizatorul a dezactivat prelucrarea script-urilor. Din acest motiv se utilizează elementul <noscript> ... </noscript>, în interiorul căruia puteţi plasa elementele (X)HTML care vor fi ignorate de către navigatoarele capabile să exploateze un script (figura 2). Figura 2 <script> Cod Java Script </script> <noscript> Ne pare rău că navigatorul dumneavoastră nu recunoaşte script-urile! </noscript>

► Inserarea unui script Java Script cu Dreamweaver MX 2004 Într-un document (X)HTML un script Java Script poate fi plasat în corpul paginii (între <body> şi </body>); în antetul paginii (între <head> şi </head>); într-un fişier extern (cu extensia .js); într-un gestionar de evenimente.

142

Dreamweaver MX 2004 permite inserarea automată a script-urilor într-un document (X)HTML.

Pentru a insera un script Java Script într-un document (X)HTML cu Dreamweaver MX 2004 folosiţi una din metodele prezentate în figura 3: Figura 3

Meniul Insert Bara Insert, categoria HTML

1. Executaţi clic în locul în care doriţi să inseraţi script-ul.

2. Executaţi clic pe Insert HTML Object Script Script.

2. În bara Insert, categoria HTML,

selectaţi butonul (Script). Remarcă. Se afişează caseta de dialog Script.

3. În caseta de dialog Script, efectuaţi următoarele operaţii:

3.1. În zona Content introduceţi script-ul.

3.2. Executaţi clic pe butonul . Remarcă. Elementul <script> ... </script> se inserează automat în locul pe care l-aţi indicat în documentul HTML.


► Operatorii Java Script Operatorii sunt simbolurile şi identificatorii care reprezintă fie modul în care sunt modificate datele, fie modul în care este evaluată o combinaţie de expresii. Limbajul Java Script recunoaşte atât operatorii binari, cât şi operatorii unari.

Principalii operatori Java Script sunt: aritmetici, atribuire plus combinaţii; relaţionali, logici, condiţionali, pentru prelucrarea şirurilor.

Operatorii aritmetici: + (adunare); ++ (incrementare); - (scădere); -- (decrementare); * (înmulţire); / (împărţire); % (modulo).

Operatorii de atribuire plus combinaţii: = (atribuire simplă); += (atribuire cu adunare); -= (atribuire cu scădere); *= (atribuire cu înmulţire); /= (atribuire cu împărţire); %= (atribuire cu modulo).

Operatorii relaţionali: < (mai mic); <= (mai mic sau egal); > (mai mare); >= (mai mare sau egal); == (egal); != (diferit).

Operatorii logici: && (AND); || (OR); ^ (SAU exclusiv); ! (NOT). Operatorii condiţionali: ? (condiţie).

143

Operatorii pentru prelucrarea şirurilor: <; <=; >; >=; ==; != (operatori relaţionali) şi + (operatorul de concatenare). ► Obiectele matematice

Obiectele matematice vă permit să accesaţi constante şi să executaţi diferite funcţii matematice.

Obiectele matematice ale limbajului Java Script sunt: Math, Number, Boolean. E (constanta lui Euler), PI (constanta 3.14), SQRT2 (rădăcina pătrată din 2) sunt proprietăţi ale obiectului Math. pow(), sqrt() sunt metode ale obiectului Math. ► Instrucţiunile limbajului Java Script Instrucţiunile limbajului Java Script sunt uşor de înţeles şi de aplicat. Ele pilotează script-ul, permiţându-i să ia o ... decizie, să creeze bucle (iteraţii) etc.

Pentru a programa în limbajul JavaScript, folosiţi următoarele tipuri de instrucţiuni:

iteraţii (cicluri) – for; for...in; do...while. decizii (selecţii) – if; if...else; switch. funcţii – function(); return. declararea unei variabile – var. reducerea codului – with. revenirea la începutul unei bucle – continue. ieşirea forţată dintr-o buclă – break.

► Obiectul String

Java Script stochează şirurile de caractere ca obiecte String. Obiectul String se creează cu ajutorul constructorului String(). Obiectul String poate fi folosit pentru:

formatarea şirurilor de caractere, cu una din metodele: big();

bold(); italic(); small(); sub(); sup().

144

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

► Obiectul Array

Obiectul Array poate fi folosit pentru prelucrarea datelor structurate într-o matrice.

Obiectul Array se creează cu ajutorul constructorului Array(). În limbajul Java Script, array-urile trebuie să fie declarate înainte de a fi

utilizate. În limbajul Java Script nu se pot crea array-uri cu mai multe dimensiuni.

Pentru a depăşi această restricţie, începeţi prin a crea un vector, iar apoi în fiecare element al vectorului, inseraţi câte un array.

□ DOM (Document Object Model) Rolul DOM-ului este acela de a vă oferi o interfaţă simplă şi coerentă între script-urile Java Script şi navigatoarele Web.

DOM-ul defineşte obiectele disponibile, proprietăţile, metodele şi evenimentele acestora.

Înainte de a începe să programaţi în limbajul Java Script, trebuie să acordaţi atenţie ierarhiei obiectelor în cadrul paginii Web (figura 4). Figura 4

0 1 2 3

Window

Document Frame History Location Event Style

Anchor Area Applet Form Image Layer Link Plugin

Button CheckBox FileUpload Hidden Password Radio Reset Submit Select Text Textarea

Option

145

► Obiectul Window

Obiectul Window (nivelul 0) se află în vârful arborescenţei. El reprezintă fereastra navigatorului în care este afişat obiectul Document. Fiecare fereastră a navigatorului şi fiecare cadru au propriul lor obiect Window. Un obiect Window şi proprietăţile sale pot fi atribuite unei variabile Java Script ca orice alt obiect.

Metodele fundamentale ale obiectului Window sunt: alert(); confirm(); prompt(); open().

Metoda alert() afişează o casetă de dialog care conţine un buton şi un mesaj (figura 5). Apelarea metodei opreşte execuţia script-ului Java Script până

când utilizatorul execută clic pe butonul . Figura 5

Metoda confirm() afişează o casetă de dialog, care conţine un mesaj,

butoanele şi . Dacă utilizatorul execută clic pe butonul ,

metoda returnează TRUE. Dacă utilizatorul execută clic pe butonul , metoda returnează FALSE (figura 6). Figura 6

146

Metoda prompt() afişează o casetă de dialog, care conţine un mesaj, o zonă

de text pe care o completează utilizatorul, butonul şi butonul .

Dacă utilizatorul execută clic pe butonul , atunci valoarea conţinută în zona de text este returnată script-ului. Dacă utilizatorul execută clic pe butonul

, atunci valoarea null este returnată script-ului (valoarea null reprezintă „nimic” sau un obiect vid), figura 7. Figura 7

Metoda open() deschide o nouă fereastră a navigatorului şi returnează un

obiect Window pentru a o reprezenta. Dacă apelaţi metoda open() fără parametri, veţi obţine o fereastră vidă. ► Obiectul Form

Obiectul Form (nivelul 2) este un obiect Java Script reprezentat prin perechea de tag-uri (X)HTML: <form> şi </form>. Pentru referirea obiectelor Form, folosiţi numele formularului sau matricea forms.

Puteţi utiliza limbajul Java Script pentru validarea unui formular în următoarele situaţii:

construirea formularelor interactive; testarea conformităţii datelor introduse de utilizator cu politicile de

procedură impuse; testarea prezenţei datelor în câmpurile obligatorii ale unui formular.

Pentru validarea formularelor, folosiţi, de asemenea (fără efort!),

comportamentele din Dreamweaver MX 2004. Utilizarea lor nu necesită cunoştinţe de Java Script.

147

► Obiectul Frame

Obiectul Frame (nivelul 1) este un obiect Java Script reprezentat prin perechea de tag-uri (X)HTML: <frame> şi </frame>. Acest obiect este echivalent cu un obiect Window atâta timp cât el serveşte la manipularea cadrelor şi nu a ferestrelor.

Pentru referirea obiectelor Frame, folosiţi numele frame-ului sau matricea frames. Matricea frames conţine câte un obiect Window pentru fiecare cadru al paginii.

Pentru convertirea cadrelor HTML în Java Script, folosiţi convertizoarele de cadre dedicate (http://www.toulouse-renaissance.net/c_outils/c_convertir.htm). ► Obiectul Layer

Obiectul Layer (nivelul 2) este un obiect Java Script reprezentat prin perechea de tag-uri (X)HTML: <div> ... </div> sau <layer> ... </layer>.

Obiectul Layer permite accesarea straturilor în interiorul documentelor (o pagină Web poate conţine mai multe straturi care se pot suprapune – parţial / total).

_____________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

148

____________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

149

14 Publicarea site-ului

În acest capitol: � Ultimele etape înainte de publicarea site-ului � Publicarea site-ului � Referenţierea site-urilor Web �

□ Ultimele etape înainte de publicarea site-ului După ce aţi reuşit să creaţi un site Web, va trebui să-l faceţi cunoscut pe net pentru a putea fi accesat de cât mai mulţi vizitatori. Pentru aceasta, aveţi mai multe posibilităţi: motoarele de căutare, anuarele şi tehnica link-urilor. Dar, înainte de publicarea site-ului, va trebui să verificaţi compatibilitatea site-ului cu diferite navigatoare Internet, să verificaţi legăturile create în cadrul site-ului, să testaţi tag-urile HTML şi accesibilitatea site-ului etc. ► Inserarea meta-informaţiilor în paginile site-ului Inserarea cuvintelor cheie

Pentru a insera cuvinte cheie într-un document, folosiţi una din următoarele metode:

Meniul Insert HTML Head Tags Keywords .... Bara Insert categoria HTML butonul (Keywords) ... .

Se afişează caseta de dialog Keyswords în care urmează să tastaţi lista cuvintelor cheie (nu mai mult de zece!) separate prin virgulă. Inserarea unei descrieri

Pentru a insera o descriere într-un document, folosiţi una din următoarele metode:

Meniul Insert HTML Head Tags Description.

Bara Insert categoria HTML butonul (Description).

150

Se afişează caseta de dialog Description în care urmează să introduceţi un text scurt, care descrie pagina dumneavoastră. Inserarea tag-urilor <meta>

Pentru inserarea tag-urilor <meta> (deosebit de utile pentru o cercetare după: autor, temă, data publicării), folosiţi una din următoarele metode:

Meniul Insert HTML Head Tags Meta.;

Bara Insert categoria HTML butonul (Meta). Se afişează caseta de dialog Meta. ► Verificarea compatibilităţii site-ului cu mai multe navigatoare Problema navigatoarelor Internet apare la tag-urile HTML sau la plug-in, împiedicând vizitatorii să acceseze integral funcţiile site-ului pe care l-aţi creat. Pentru a evita astfel de surprize, se recomandă verificarea site-ului înainte de a-l publica. Dreamweaver MX 2004 vă propune o funcţie Validation, care testează codul HTML al documentelor dumneavoastră, pentru a vedea dacă nu conţine tag-uri şi atribute care nu sunt luate în considerare de către navigatoarele ţintă.

Pentru verificarea compatibilităţii site-ului cu diferite navigatoare, deschideţi site-ul (via Files Site), afişaţi panoul Results (via Window Results), în care activaţi categoria Target Browser Check. Efectuaţi clic pe butonul (Action) Settings. Se afişează caseta de dialog Target Browsers, care conţine o listă cu şase navigatoare Internet care pot fi testate cu site-ul dumneavoastră. ► Verificarea şi repararea legăturilor De cele mai multe ori, verificarea legăturilor este o activitate lungă şi dificilă. Dreamweaver MX 2004 vă propune o verificare integrală a legăturilor. Se vor controla mai întâi legăturile defecte ale site-ului, apoi legăturile externe, iar, în final, fişierele orfeline.

Pentru verificarea legăturilor paginilor, efectuaţi următoarele operaţii:

151

1. Afişaţi panoul Results, via Window Results.

2. În panoul Results, executaţi clic pe categoria Link Checker.

3. Executaţi clic pe butonul (Action) şi selectaţi Check Links For Entire Site (figura 1).

Figura 1

Remarci:

În panoul Results se afişează numai legăturile defecte. Dreamweaver MX 2004 permite şi verificarea doar a unei singure pagini (via

Results butonul Check Links For Selected Files.

Pentru repararea legăturilor defecte, efectuaţi următoarele operaţii:

1. Afişaţi documentul HTML care conţine o legătură defectă.

2. În panoul Results relansaţi o verificare, via butonul (Action). În panoul Results se afişează legătura defectă.

3. Corectaţi legătura defectă:

3.1. Executaţi clic pe URL-ul legăturii.

3.2. Introduceţi legătura corectă.

4. Activaţi tasta ENTER. ► Simularea duratei de încărcare a paginilor Dreamweaver MX 2004 permite calculul vitezei de încărcare a paginilor Web în funcţie de conexiunea utilizată.

152

Pentru a calcula durata de încărcare a unei pagini, deschideţi documentul HTML (exemplu, index.htm) al site-ului şi afişaţi caseta de dialog Preferences, via Edit Preferences. În caseta de dialog Preferences, categoria Status Bar, alegeţi un debit de conexiune. ► Generarea rapoartelor de site Atunci când creaţi un site Web cu Dreamweaver MX 2004, aveţi posibilitatea să creaţi mai multe tipuri de rapoarte care vă permit să identificaţi elementele redundante, elementele vide, documentele fără titlu etc.! Puteţi crea rapoarte care conţin informaţii privind lucrul în echipă. Puteţi salva aceste rapoarte, pentru a reveni ori de câte ori este nevoie.

Pentru a crea un raport de site, efectuaţi următoarele operaţii:

1. Afişaţi caseta de dialog Reports, via Site Reports....

2. În caseta de dialog Reports, efectuaţi următoarele operaţii:

2.1. În meniul derulant Report on, alegeţi una din opţiunile Current Document/Entire Current Local Site/Selected Files in Site/Folder....

2.2. În zona Select reports, alegeţi tipul de raport HTML.

2.3. Utilizaţi butonul pentru parametrizarea diferitelor opţiuni.


2.5. Utilizaţi butoanele din stânga panoului: – pentru obţinerea mai multor informaţii; – pentru salvarea raportului; – pentru crearea unui nou raport.

□ Publicarea site-ului Această meritată operaţie (publicarea site-ului) presupune că v-aţi relaţionat deja cu un provider Internet de la care aţi obţinut o adresă de cont FTP, login-ul şi password-ul.

153

► Publicarea unui site via FTP

Pentru a publica un site prin FTP (File Transfer Protocol), efectuaţi următoarele operaţii:

1. Afişaţi caseta de dialog Manages Sites, via Site Manages Sites.

2. Selectaţi site-ul pe care doriţi să-l publicaţi.


4. Executaţi clic pe categoria Advanced.

5. Selectaţi categoria Remote Info. Se afişează caseta de dialog Remote Info.

6. În caseta de dialog Remote Info, efectuaţi următoarele operaţii (figura 2). Figura 2

154

6.1. În zona FTP host, indicaţi numele server-ului.

6.2. În zona Host directory, introduceţi numele site-ului local.

6.3. În zona Login, introduceţi numele utilizatorului.

6.4. În zona Password, introduceţi parola, iar apoi activaţi opţiunea Save.

6.5. Dacă server-ul este protejat printr-un firewall, activaţi opţiunea Use firewall.

6.6. Activaţi opţiunea Automatically upload files to server on save dacă doriţi ca Dreamweaver să încarce pe server-ul Web toate documentele pe care le salvaţi.

6.7. Activaţi opţiunea Enable file check in and check out dacă doriţi să accesaţi grupul de lucru.

► Mentenanţa site-ului

Este obligatoriu să actualizaţi în mod regulat paginile site-ului dumneavoastră.

Efectuaţi modificările corespunzătoare, iar apoi publicaţi noile pagini înlocuindu-le pe cele vechi.

□ Referenţierea site-urilor Web Şansa ca site-ul dumneavoastră să fie accesat, nu întâmplător, de cât mai mulţi vizitatori este din ce în ce mai mare dacă: înscrieţi site-ul în cât mai multe motoare şi anuare de cercetare; realizaţi un promo al site-ului, privilegiind link-urile transversale cu alte site-uri; povestiţi despre site-ul dumneavoastră tuturor prietenilor, colaboratorilor etc.; nu uitaţi să treceţi pe cartea de vizită adresa de Web a site-ului dumneavoastră; utilizaţi un software de referenţiere. ► Tehnica link-urilor

Pentru a obţine o bună referenţiere, orice strategie de publicare a unui site trebuie să includă şi un plan de publicare a tehnicii link-urilor.

Tehnica link-urilor s-a conturat şi se dezvoltă în jurul procedurii folosite de motorul de căutare Google cu privire la referenţierea site-urilor Web, aşa-numitul PageRank. PageRank este o metodă foarte sofisticată de clasificare a documentelor Web.

155

În ultimii ani, Google a devenit cel mai folosit motor de căutare din lume,

ceea ce ne face şi pe noi să asociem în mare măsură notorietatea unui site Web cu succesul acestuia pe Google.

Indexarea cuvintelor / frazelor în motoarele de căutare se realizează în mod automat. Motoarele de căutare trimit către server-e aşa-zişii roboţi, care indexează toate site-urile la care au acces pe un anumit server. Această indexare se face în mod regulat, la intervale de timp prestabilite.

Pentru o mai bună căutare, dar mai ales pentru a diminua apariţia unor pagini construite special pentru a păcăli tehnologia de clasificare automată a unui motor de căutare, a fost dezvoltat conceptul de popularitate a link-ului.

Numărul link-urilor către o pagină Web reprezintă un criteriu important folosit de motoarele de căutare. O pagină Web este cu atât mai importantă cu cât este referenţiată de mai multe alte pagini (există link-uri către aceasta din alte site-uri). PageRank nu se bazează pe numărul link-urilor (referinţelor) primite de la alte pagini, ci pe importanţa acestora. Link-urile către o pagină sunt clasificate în funcţie de importanţa (rank-ul) paginilor Web care trimit link-ul, care, la rândul lor, sunt clasificate după acest criteriu.

Pe baza conceptului de PageRank, importanţa unei pagini Web (site) este determinată recursiv de importanţa paginilor de care se leagă. Un link din site-ul cnn.com, un site foarte vizitat şi referit către site-ul dumneavoastră, va cântări enorm de mult în stabilirea PageRank-ului de către Google. Sistemul PageRank este bazat pe structura legăturilor dintre toate paginile Web-ului. Cu cât site-ul este mai important (PageRank mare), cu atât acesta va fi afişat „mai sus” printre rezultatele unei căutări la Google, iar acesta este lucrul care ne interesează în cea mai mare măsură. ► Acţiuni de promovare a site-urilor Înscrierea în toate cataloagele online importante

Prin catalog online înţelegem o colecţie de referinţe (link-uri şi scurte descrieri) către site-urile Web. Aceste referinţe sunt organizate pe categorii, în general domenii de activitate: Afaceri şi Economie, Artă şi Cultură, Auto, Divertisment, Educaţie, Mass-Media etc.

156

Înscrierea în cataloagele online reprezintă, de cele mai multe ori, alegerea categoriei / categoriilor în care site-ul Web se potriveşte cel mai bine şi completarea unor informaţii minimale: descrierea site-ului şi adresa Web. Cu cât adresa site-ului nostru apare de mai multe ori în site-uri importante cum sunt cataloagele online, cu atât PageRank-ul site-ului creşte.

Exemple de cataloage online din România: rol.ro; kappa.ro; bumerang.ro; traffic.ro etc. Promovarea site-ului în mediul online

Urmărind aceeaşi strategie de link-uri către site-ul personal, un rol important în promovarea site-ului în mediul online îl au: articolele în site-urile de ştiri online care să refere site-ul; articolele în newsletter-e, în site-uri de specialitate, pe forum-uri de discuţie, publicitate prin intermediul banner-elor sau al ad-urilor comerciale etc. Evitarea link-urilor reciproce

Nu este întotdeauna indicat să execuţi un link pentru a obţine un link. Nu inseraţi link-uri către alte site-uri decât dacă această operaţie are sens. Obţinerea link-urilor de la site-uri care sunt, la rândul lor, bine referenţiate

Conceptul de popularitate a link-ului ajută la clasificarea pe o poziţie inferioară a paginilor care sunt create doar pentru a debusola motoarele de căutare şi nu au nici o importanţă pe Web.

Pentru a induce în eroare motoarele de căutare, mulţi webmasteri folosesc în cadrul paginilor o mulţime de link-uri de la alte pagini de acelaşi tip. Această tehnică este total neconstructivă şi este detectată de motoarele de căutare. Rezultatul descoperirii poate fi, în multe cazuri, chiar excluderea site-ului din lista de rezultate afişate în urma unei căutări.

_________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

157

15 Exemple pentru crearea site-urilor Web cu Dreamweaver MX 2004

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

EXEMPLUL 1

Crearea primului site Web cu Dreamweaver MX 2004

Site-ul pe care vă invităm să-l creaţi în acest studiu de caz este foarte simplu. El conţine o pagină Web în care vi se cere să inseraţi: un text, o imagine şi o legătură hipertext către site-ul Universităţii Petrol-Gaze din Ploieşti (www.upg-ploieşti.ro). Pornind de la elementele prezentate în acest studiu de caz, creaţi noul site, parcurgând următorii paşi:

1. Crearea şi organizarea site-ului.

2. Definirea parametrilor paginii.

3. Introducerea şi formatarea textului: „Learn to see beyond the appearances”.

4. Inserarea şi formatarea imaginii , care reprezintă sigla Universităţii Petrol-Gaze din Ploieşti.

5. Inserarea legăturii hipertext.

158

Etapa 1. Crearea site-ului

EXERCIŢIU

CREAREA UNUI NOU SITE Creaţi un site sub Dreamweaver MX 2004, numit Primul site, în mod local

cu metoda elementară (Basic).

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

1. În meniul Site executaţi clic pe Manage Sites... New Site.

Remarcă. Se afişează caseta de dialog Site Definition for....

2. În caseta de dialog Site Definition for... activaţi zona Basic (modul Basic cere mai puţine informaţii tehnice decât modul Advanced).

3. Tastaţi numele site-ului Primul site, iar apoi executaţi clic pe butonul

.

159

4. În caseta de dialog următoare, activaţi butonul radio No („Do you want to work with a server technology such as ColdFusion, ASP.NET, ASP, JSP or PHP?”), iar apoi executaţi clic pe butonul

.

5. În noua fereastră, activaţi primul buton radio, iar apoi executaţi clic pe butonul (folder) pentru a selecta folder-ul rădăcină local (D:\Primul site\). Dacă acest folder nu a fost creat, puteţi să-l creaţi în acest moment. Executaţi clic pe

butonul .

160

6. În meniul derulant din caseta de dialog următoare, alegeţi None, iar apoi executaţi clic pe butonul

. Remarcă. Dreamweaver MX 2004 afişează un rezumat al tuturor parametrilor site-ului dumneavoastră.


161

Etapa 2. Organizarea site-ului: crearea folderelor şi a fişierelor

EXERCIŢIU

CREAREA FOLDERELOR Creaţi folderele html şi imagini.

PANOUL FILES, NEW FOLDER

1. În panoul Files, executaţi clic cu butonul din dreapta al mouse-ului pe site-ul Primul site. În meniul contextual, executaţi clic pe New Folder.

2. Înlocuiţi untitled cu html.

3. Repetaţi paşii 1 şi 2 pentru a crea folder-ul imagini.

162

EXERCIŢIU

CREAREA FIŞIERULUI INDEX.HTM ŞI SALVAREA

FIŞIERULUI UPGPLOIESTI.GIF Creaţi în folder-ul html, fişierul index.htm (pagina de index a site-ului),

iar în folder-ul imagini salvaţi fişierul UPGPoiesti.gif (sigla Universităţii Petrol-Gaze din Ploieşti).

NEW FILE

1. Executaţi clic cu butonul din dreapta al mouse-ului pe folder-ul html, iar apoi executaţi clic pe New file.

2. Tastaţi numele fişierului, index.htm.

3. Salvaţi imaginea care reprezintă sigla Universităţii Petrol-Gaze din Ploieşti în folder-ul imagini sub numele UPGPloiesti.gif.

Remarci:

Observaţi structura arborescentă a celor două foldere.

Pentru moment, pagina dumneavoastră Web nu conţine nimic, tot ceea ce am realizat a fost organizarea site-ului în foldere şi în fişiere.

Urmează ca în etapele următoare să vă preocupaţi de inserarea elementelor paginii.

_________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

163

Etapa 3. Definirea parametrilor paginii

EXERCIŢIU

PARAMETRIZAREA PAGINII Folosiţi categoria Appearance (caseta de dialog Page Properties) pentru a

definii următorii parametri ai paginii index.htm: Page font: Verdana, Arial; Size: 24 pixels; Background: #FFFF00.

MENIUL MODIFY, PAGE PROPERTIES, CATEGORIA APPEARANCE

1. Deschideţi documentul index.htm via Window Files.

2. În pagina index.htm executaţi clic pe butonul .

3. Afişaţi caseta de dialog Page Properties, via Meniul Modify Page Properties.

4. În caseta de dialog Page Properties, categoria Appearance definiţi parametrii paginii.

164

EXERCIŢIU

ATRIBUIREA UNUI TITLU PAGINII Atribuiţi paginii dumneavoastră (index.htm) titlul: Universitate. Folosiţi

una din metodele: Page Properties / Bara de instrumente ale documentului / Codul sursă HTML.

PAGE PROPERTIES, CATEGORIA TITLE/ENCODING (1)

1. În caseta de dialog Page Properties, executaţi clic pe categoria Title/Encoding.

2. În zona Title introduceţi: Universitate.

Remarcă. Titlul paginii se afişează în bara de titlu a navigatorului.

165

BARA DE INSTRUMENTE (2)

1. Executaţi clic pe View Toolbar Document (dacă toolbar-ul nu este afişat).

2. În câmpul Title introduceţi: Universitate.

CODUL SURSĂ HTML (3) 1. Executaţi clic pe butonul .

2. În elementul <title> din secţiunea <head> înlocuiţi Untitled Document cu Universitate.

Cod sursă <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"> <title>Universitate</title> <style type="text/css">  </style></head> <body> </body> </html>

166

Etapa 4. Introducerea şi formatarea textului

EXERCIŢIU

INTRODUCEREA UNUI TEXT Introduceţi în documentul index.htm, de la tastatură textul: „Learn to see

beyond the appearances”.

BARA INSERT, CATEGORIA TEXT, BUTONUL

1. Executaţi clic în fereastra documentului index.htm.

2. Introduceţi de la tastatură textul: „Learn to see beyond the appearances”.

Etapa 5. Inserarea şi formatarea imaginii

EXERCIŢIU

INSERAREA ŞI FORMATAREA UNEI IMAGINI Inseraţi imediat după text, din folderul imagini, imaginea UPGPloiesti.gif.

167

MENIUL INSERT, COMANDA IMAGE

1. Executaţi clic în locul în care doriţi să inseraţi imaginea (imediat după linia de text inserată).

2. Acţionaţi tasta Enter.

3. În meniul Insert executaţi clic pe comanda Image. Remarcă. Se afişează caseta de dialog Select Image Source.

4. În caseta de dialog Select Image Source, selectaţi folder-ul imagini, iar apoi

executaţi clic pe fişierul UPGPloiesti.gif. Executaţi clic pe butonul .

5. Centraţi imaginea pentru a îmbunătăţi modul de prezentare.

5.1 Selectaţi imaginea.

5.2 În inspectorul Properties, executaţi clic pe butonul (Center).

168


Etapa 6. Inserarea legăturii hipertext

EXERCIŢIU

TRANSFORMAREA UNEI IMAGINI ÎNTR-O LEGĂTURĂ

HIPERTEXT Atribuiţi imaginii inserate legătura hipertext: http://www.upg-ploiesti.ro.

INSPECTORUL PROPERTIES

1. Selectaţi imaginea.

2. În inspectorul Properties, în zona Link introduceţi adresa Web: http://www.upg-ploiesti.ro.

3. Salvaţi pagina Web (prima dumneavoastră pagină Web!) via File Save.

4. Analizaţi codul HTML generat.

169

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

5. În panoul Files, în zona Site vizualizaţi structura primului dumneavoastră site.


7. Testaţi legătura hipertext pe care aţi creat-o.

170

EXEMPLUL 2

Crearea şi inserarea unui script Java Script, care afişează o linie de text

În acest exemplu, vom crea o pagină Web, cu ajutorul unui script Java Script, care afişează cursiv (italic) o linie de text: Viaţa este grea, dar noroc că este scurtă!

Etapa 1. Crearea şi organizarea site-ului

EXERCIŢIU

CREAREA ŞI ORGANIZAREA UNUI NOU SITE

Creaţi un nou site sub Dreamweaver MX 2004, cu numele EXEMPLUL 2,

compus din folder-ul html. În folder-ul html, creaţi fişierul index.htm.

METODA BASIC, PANOUL FILES, NEW FOLDER În figura alăturată se prezintă panoul Files şi structura arborescentă a site-ului (EXEMPLUL 2).

171


EXERCIŢIU

PARAMETRIZAREA PAGINII

Definiţi următorii parametri ai paginii index.htm: Title: script2; Page font:

Verdana, Arial; Background: #00FFFF.

METODA MODIFY, PAGE PROPERTIES

1. Deschideţi documentul index.htm.

2. Afişaţi caseta de dialog Page Properties.

3. Definiţi parametrii paginii cu ajutorul categoriilor Appearance şi Title Encoding.

172

Etapa 3. Inserarea script-ului Java Script, care afişează o linie de text

► Varianta 1

EXERCIŢIU

INSERAREA UNUI SCRIPT JAVA SCRIPT (1)

Să se insereze un script Java Script în corpul paginii index.htm, care

afişează cursiv (italic) linia de text: „Viaţa este grea, dar noroc că este scurtă!”.

BARA INSERT, CATEGORIA HTML, BUTONUL (SCRIPT)

173

1. Executaţi clic în fereastra de cod HTML a documentului index.htm, între <body> şi </body>.

2. În bara Insert, categoria HTML, executaţi clic pe butonul (Script).

3. În caseta de dialog Script, în zona Contents, introduceţi următorul cod Java Script (figura 4):

Cod sursă document.write(”<i>Viaţa este grea, dar noroc că este scurtă!</i>”);

► Varianta 2

EXERCIŢIU


Să se insereze un script Java Script în antet-ul paginii index.htm, care

afişează cursiv (italic) linia de text: „Viaţa este grea, dar noroc că este scurtă!”.


1. Inseraţi un script Java Script, în antet-ul documentului, care conţine funcţia de afişare a liniei de text (afişare()), via bara Insert, categoria HTML, butonul (Script).

Cod sursă function afişare() { document.write(”<I>Viaţa este grea, dar noroc că este scurtă!</I>”); }

174

2. Inseraţi un script Java Script, în corpul documentului, care conţine instrucţiunea de apelare a funcţiei afişare(), via bara Insert, categoria HTML, butonul (Script).

Cod sursă afişare();

3. Afişaţi documentul HTML complet. Cod sursă <html> <head> <title>script2</title> <script> function afişare() { document.write(”<I>Viaţa este grea, dar noroc că este scurtă!</I>”); } </script> </head> <body> <script> afişare(); </script> </body> </html>


175

► Varianta 3

EXERCIŢIU


Să se insereze un script Java Script într-un fişier extern, cu extensia .js,

care afişează cursiv (italic) linia de text: „Viaţa este grea, dar noroc că este scurtă!”.

CREAREA UNUI FIŞIER EXTERN CU EXTENSIA .JS

1. Creaţi un fişier extern Java Script: functie1.js.

1.1. Executaţi clic pe File New.

1.2. În fereastra New Document, care se afişează, selectaţi categoria Basic page, iar apoi, în coloana din dreapta, executaţi clic pe JavaScript.

176

1.3. Executaţi clic pe butonul pentru a începe să introduceţi codul Java Script al script-ului, linie cu linie.

Cod sursă // JavaScript Document function afisare(){ document.write("<i>Viaţa este grea, dar noroc că este scurtă!"); }

1.4. Salvaţi fişierul în folder-ul html.

2. Inseraţi script-ul Java Script (functie1.js), în antet-ul documentului, cu menţiunea că în tag-ul de început <script> va trebui să adăugaţi atributul src=”functie1.js”.

3. Afişaţi documentul HTML complet. Cod sursă <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>script2</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script src="functie1.js"> </script> <style type="text/css">  </style></head> <body> <script language="JavaScript" type="text/JavaScript"> afisare(); </script> </body> </html>

177


► Varianta 4

EXERCIŢIU


Să se insereze un script Java Script în antet-ul documentului index.htm,

care afişează cursiv (italic) linia de text: „Viaţa este grea, dar noroc că

este scurtă!”. Se va asocia butonului gestionarul de evenimente onClick, care conţine funcţia afişare().

ASOCIEREA UNUI GESTIONAR DE EVENIMENTE

1. Inseraţi un script Java Script în antet-ul documentului, care conţine funcţia afişare(), via bara Insert, categoria HTML, butonul (Script).

2. Inspectaţi codul Java Script pentru butonul . Cod sursă <input type=”button” value=”Mesaj”>

178

3. Asociaţi butonului gestionarul de evenimente onClick, care contine funcţia afişare().

Cod sursă <input type=”button” value=”Mesaj” onClick=”afişare”>

4. Afişaţi documentul HTML complet. Cod sursă <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>script2</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script src="functie1.js"> </script> <style type="text/css">  </style></head> <body> <input name="Mesaj" type="submit" id="Mesaj" value="Mesaj" onClick="afisare()"> </body> </html>

179

6. Testaţi script-ul.

___________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

180

EXEMPLUL 3

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

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

Pentru calculul ariei cercului se va folosi funcţia JavaScript areaOfCircle(Radius), furnizată de Dreamweaver MX 2004.

Etapa 1. Crearea şi organizarea site-ului

EXERCIŢIU

CREAREA ŞI ORGANIZAREA UNUI NOU SITE

Să se creeze un nou site sub Dreamweaver MX 2004, cu numele

EXEMPLUL 3, compus din folder-ul html. În folder-ul html, creaţi fişierul index.htm.

________________________________________________________________________________________________________________________________________________________________________________________________

181


EXERCIŢIU

PARAMETRIZAREA PAGINII

Definiţi următorii parametri ai paginii index.htm: Title: script 3; Page

font: Verdana, Arial; Background: #99FFFF.

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

EXERCIŢIU

INSERAREA UNUI SCRIPT JAVA SCRIPT

Să se insereze un script Java Script în antet-ul paginii index.htm, care

conţine funcţia de calcul a ariei cercului, areaOfCircle(radius).


1. Inseraţi un script JavaScript în antet-ul documentului index.htm, care conţine funcţia areaOfCircle(radius).

1.1. Executaţi clic în fereastra de cod HTML a documentului index.htm, între <head> şi </head>.

1.2. În bara Insert, categoria HTML, executaţi clic pe butonul (Script).

182

2. Inseraţi funcţia areaOfCircle(radius).

2.1. Afişaţi panoul Snippets, via Window Snippets.

2.2. Executaţi clic pe JavaScript Area of Circle.

Remarcă. Dreamweaver MX 2004 a inserat în antet-ul documentului index.htm funcţia areaOfCircle(radius).

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

EXERCIŢIU

INSERAREA UNUI SCRIPT JAVA SCRIPT

Să se insereze în corpul documentului index.htm, un script Java

Script care citeşte de la tastatură valoarea razei cercului, verifică dacă aceasta este pozitivă – în caz contrar afişează un mesaj „Rază negativă”, iar apoi afişează aria cercului.

183


1. Afişaţi caseta de dialog Script, via bara Insert, categoria HTML, butonul (Script).

2. În caseta de dialog Script, în zona Contents, introduceţi următorul cod JavaScript.

Cod sursă //citeste raza cercului r=parseFloat(prompt("Introduceţi raza cercului r=",0)); //bucla while pentru validare rază while(r<0) { document.write(r+" "+"Rază negativă"+"<br>"); //citeşte raza cercului r=parseFloat(prompt("Introduceţi raza cercului r=",0)); } //afişează rezultatul document.write("Aria cercului="+areaOfCircle(r));

3. Afişaţi codul HTML complet.

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

184

} --> </style> <script language="JavaScript" type="text/JavaScript"> function areaOfCircle(radius) { return Math.PI * Math.pow(radius, 2); } </script> </head> <body> <script language="JavaScript" type="text/JavaScript"> //citeste raza cercului r=parseFloat(prompt("Introduceţi raza cercului r=",0)); //bucla while pentru validare rază while(r<0) { document.write(r+" "+"Rază negativă"+"<br>"); //citeşte raza cercului r=parseFloat(prompt("Introduceţi raza cercului r=",0)); } //afişează rezultatul document.write("Aria cercului="+areaOfCircle(r)); </script> </body> </html>


185

__________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

186

EXEMPLUL 4

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

În acest ultim exemplu, vă invităm să creaţi singuri (fără ajutorul nostru!), cu ajutorul tabelelor, un site care să conţină CV-ul dumneavoastră (modelul comun european de CV) a cărui structură a fost publicată în Monitorul Oficial al României din 13 iulie 2004.

______________________________________________________________

187

Indicaţie.1 Pornind de la elementele prezentate, creaţi noul site, parcurgând următorii paşi:

1. Crearea şi organizarea site-ului.

2. Definirea parametrilor paginii.

3. Crearea stilurilor CSS de tip clasă (class) în pagina curentă.

4. Inserarea unui tabel cu 7 linii şi 2 coloane.

5. Formatarea tabelului – definirea culorii de background (#9900FF) pentru linia 1, coloana 1 ale tabelului.

6. Completarea primei linii a tabelului (secţiunea de titlu) – inserarea şi formatarea imaginii care reprezintă steagul Uniunii Europene; introducerea şi formatarea textului Curriculum Vitae; introducerea şi formatarea numelui aplicantului; inserarea şi formatarea pozei aplicantului.

7. Completarea liniei a doua a tabelului (secţiunea Informaţii Personale) – introducerea şi formatarea textului Informaţii Personale; crearea şi formatarea unui tabel care conţine categoriile secţiunii (denumire şi informaţiile corespunzătoare).

8. Completarea liniei a treia a tabelului (secţiunea Experienţă Profesională) – introducerea şi formatarea textului Experienţă Profesională; crearea şi formatarea unui tabel care conţine categoriile secţiunii (denumire şi informaţiile corespunzătoare).

9. Completarea liniei a patra a tabelului (secţiunea Educaţie şi Formare) – introducerea şi formatarea textului Educaţie şi Formare; crearea şi formatarea unui tabel care conţine categoriile secţiunii (denumire şi informaţiile corespunzătoare).

10. Completarea liniei a cincea a tabelului (secţiunea Aptitudini şi Competenţe) – introducerea şi formatarea textului Aptitudini şi competenţe; crearea şi formatarea unui tabel care conţine categoriile secţiunii (denumire şi informaţiile corespunzătoare).

11. Completarea liniei a şasea a tabelului (secţiunea Informaţii Suplimentare) – introducerea şi formatarea textului Informaţii Suplimentare; crearea şi formatarea unui tabel care conţine categoriile secţiunii (denumire şi informaţiile corespunzătoare).

1 Vezi L. Dumitraşcu, L. Ioniţă, G. Marcu, “Studii de caz şi exerciţii rezolvate pentru crearea site-urilor WEB cu Dreamweaver MX 2004” (pag. 74-102), Colecţia I.N.D.E. Ploieşti, Editura Universităţii din Ploieşti, 2005.

188

12. Completarea liniei a şaptea a tabelului (secţinea Anexe) – introducerea şi formatarea textului Anexe; crearea şi formatarea unui tabel care conţine categoriile secţiunii (denumire şi informaţiile corespunzătoare).

_________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

189

Bibliografie

1. Chistophe Aubry – Dreamweaver MX 2004 pour PC / Mac, Editions ENI,

Nantes, 2004 2. Alexandre Boni, Nicolas Stemart, Macromedia Dreamweaver MX 2004,

Micro Application, Paris, 2004 3. Liviu Dumitraşcu, Liviu Ioniţă, Gabriel Marcu, Studii de caz şi exerciţii

rezolvate pentru crearea site-urilor Web cu Dreamweaver MX 2004, Colecţia I.N.D.E. Ploieşti, Editura Universităţii din Ploieşti, 2005

4. Liviu Dumitraşcu, Crearea site-urilor Web cu Dreamweaver MX 2004,

Colecţia I.N.D.E. Ploieşti, Editura Universităţii din Ploieşti, 2005 5. Ionuţ Lambrescu (coordonator) şi colectiv, Tehnologii Internet în sprijinul

micro-întreprinderilor, Editura Universităţii din Ploieşti, 2005 6. Remy Lentzner, Le guide de la creation des sites internet avec

Dreamweaver MX 2004, Editions ESKA Interactive, Paris, 2004

Informatica economica

Documents

Transcript of Informatica economica