Aplicaţia Macromedia Deamweaver

Dreamweaver foloseşte la editarea diferitelor tipuri de fişiere utilizate la realizarea paginilor web sau a aplicaţiilor destinate web-ului. Astfel, în fereastra de desschidere a aplicaţiei utilizatorul poate selecta tipul de fişier pe care urmează să-l realizeze, sau poate deschide un fişier realizat anterior. Caseta de dialog iniţială arată astfel:

În coloana din stânga sunt evidenţiate fişierele de lucru editate recent, acestea putând fi deschise direct de aici. De asemenea se poate folosi butonul „Open…” pentru a deschide un alt fişier decât cele listate. În coloana din mijloc sunt listate principalele tipuri de fişiere ce pot fi editate cu ajutorul aplicaţiei; tot aici găsim butonul „More…” care ajută la vizualizarea tipurilor de fişiere ce pot fi editate care nu apar în lista scurtă din această coloană. În ultima coloană se află câteva şabloane ce pot fi utilizate drept suport pentru realizarea unui fişier nou.

În continuare ne vom concentra asupra realizării fişierelor HTML cu ajutorul web-editorului Dreamweaver. În acest caz în fereastra iniţială se va selecta „HTML” din coloana „Create new”. Acest lucru va avea ca efect trecerea la fereastra următoare care arată astfel:

Observăm componentele aplicaţiei: bara de meniuri, bara de instrumente, zona de lucru, fereastra de proprietăţi (aflată în partea de jos a aplicaţiei) şi ferestrele de editare (aflate iniţial în partea dreaptă a aplicaţiei). În fereastra de editare se pot deschide mai multe fişiere simultan, acestea fiind dispuse automat sub forma unor taburi ce conţin numele fişierelor respective. În cazul de faţă avem un singur fişier deshis, tabul corespunzător conţinând numele acestuia (Untitled-1). Numele fişierul va fi stabilit în momentul salvării acestuia. Salvarea se realizează accesând meniul „File”, opţiunea „Save” sau „Save as…”. Se va alege locaţia în care se face salvarea şi numele sub care va fi salvat fişierul. După salvare, tabul corespunzător fişierului va afişa noul nume.

În fereastra de editare observăm prezenţa câmpului „Title”, acesta este titlul documentului HTML, nu titlul documentului în sine. Tot în fereastra de editare observăm cele trei variante de vizualizare posibile: Code, Split şi Design.

• Opţiunea „Code” foloseşte la vizualizarea codului HTML corespunzător paginii.

• Opţiunea „Split” împarte fereastra de editare în 2 zone: în prima zonă se va vizualiza codul HTML corespunzător paginii, iar in zona a doua se va vizualiza modul în care va fi afişată pagina de către browser după modelul „wysiwyg” (What-You-See-Is-What-You-Get – fereastra de editare ne previzualizează pagina, utilizatorul putând observa cum va fi afişată această de către browser).

• Opţiunea „Design” afişează aspectul paginii (aşa cum va arăta în browser). În acest mod de afişare se pot utiliza butoanele şi opţiunile din barele de instrumente şi de formatare în scopul de a edita elementele din pagină. Utilizarea acestora va avea ca efect editarea elementelor în modul de vizualizare dar şi editarea codului HTML corespunzător. Astfel, utilizând acest mod de lucru se realizează cu uşurintă editarea paginii, deoarece codul corespunzător va fi adăugat în mod automat de către aplicaţie.

În continuare vom prezenta bara de proprietăţi implicită (va fi afişată în situaţia în care nu avem niciun element din pagină selectat). Această bară de proprietăţi arată astfel:

Se observă opţiunile generale ce pot fi selectate : Format, Font, Style, Size. Aceste opţiuni se vor aplica textului ce va fi editat în pagină. De asemenea observăm prezenţa opţiunilor de formatare a textului (B-bold, I-Italic), se poate alege culoarea textului şi aliniamentul utilizat (cele 4 forme de aliniament sunt similare cu formele de aliniament utilizate de către aplicaţia Microsoft Word). De asemenea în această fereastră găsim şi opţiuni de realizare/formatare a listelor şi indentărilor corespunzătoare.

Tot în această fereastră de proprietăţi există opţiuni de editare a legăturilor (link). Absenţa opţiunii U-underline se datorează faptului că în paginile web în general un text subliniat marchează o legătură. Dacă totuşi se doreşte să se introducă un text subliniat care nu reprezintă o legătură, acest lucru se poate realiza utilizând tag-ul HTML corespunzător ( <u>). De asemenea, tot aici găsim şi butonul „Page properties…” cu ajutorul căruia putem stabili opţiunii generale de formatare a paginii cum ar fi tipul de codificare (necesar pentru ca browserul să afişeze corect caracterele specifice cum ar fi diacriticele), opţiuni de formatare generală a legăturilor, opţiuni referitoare la aspectul general al paginii (culoare de fundal, imagine de fundal, opţiuni de spaţiere). Fereastra de dialog corespunzătoare arată astfel:

În partea stângă observăm meniul structurat iar în dreapta opţiunile corespunzătoare meniului selectat în stânga. Opţiunile alese cu ajutorul acestei ferestre de formatare se aplică întregului document. Dacă dorim ca anumite zone din pagină să fie formate altfel, putem realiza acest lucru formatând zonele respective cu ajutorul instrumentelor de formatare specifice (sau efectiv aplicând anumite tag-uri HTML zonelor respective).

În continuare vom utiliza opţiunile din bara de instrumente pentru a adăuga elemnte în pagina web. Prima opţiune din această bară de instrumente ne permite să adăugăm o legătură. Vom folosi fereastra de dialog corespunzătoare pentru a adăuga în pagina noastră o legătură către siteul microportal:

În câmpul „Text” vom scrie textul ce va forma legătura, în câmpul „Link” vom scrie adresa de destinaţie, „Target” reprezintă modul de deschidere a paginii (în cazul de faţă am ales „_blank” ceea ce va avea ca efect deschiderea paginii în fereastră nouă), iar „Title” va conţine titlul legăturii (afişat în momentul staţionării cursorului deasupra sa). Următorul buton din bara de instrumente este „Email link” utilizat pentru a introduce un link către o adresă de email (utilizarea linkului va avea ca efect deschiderea aplicaţiei de email în vederea editării unui email ce va fi transmis către adresa de email specificată). Fereastra de dialog arată astfel:

În cazul nostru am introdus un link cu textul „contact” care va avea ca efect deschiderea aplicaţiei de mail (de ex. Outlook) în vederea transmiterii unui email la adresa contact@microportal.ro

Următorul buton din bara de instrumente („Anchor name”) foloseşte la inserarea unei „ancore” în document. Ancora se utilizează la introducerea legăturilor interne (de exemplu dacă în pagină avem 3 titluri putem marca fiecare titlu cu o astfel de ancoră, putând ulterior să faci legături către acestea; astfel la utilizarea acestora pagina va fi deschisă şi derulată astfel încât zona de vizualizare a acesteia să înceapă în dreptul ancorei, în cazul nostru în dreptul unuia dintre titluri). Fereastra de dialog arată astfel:

Următorul buton din bara de instrumente este folosit la introducerea unu tabel. Fereastra de dialog arată astfel:

Din această fereastră se pot stabili numărul iniţial de linii şi de coloane pe care le conţine tabelul precum şi proprietăţile acestuia (bordură, dimensiuni, spaţiere). În momentul în care tabelul din pagină este selectat

observăm că fereastra de proprietăţi îşi modifică elementele, aceasta afişând elemente de formatare a tabelelor. În această situaţie, fereastra de proprietăţi arată astfel:

Se observă că în acest caz din această fereastră putem formata opţiuni corespunzătoare tabelului selectat în zona de vizualizare a paginii.

Următorul buton din bara de instrumente ajută la inserarea unui element HTML de tip „div”. Fereastra de dialog corespunzătoare acestei opţiuni arată astfel:

Se poate stabili „id-ul” divului (numele utilizat în cazul apelării utilizând scripturi) şi „clasa” divului ce presupune atribuirea unuor proprietăţi expuse cu ajutorul unui fişier de tip „css”, fişier în care vom include proprietăţi pentru toate elementele din pagină cărora le aplicăm diferite atribute.

Următorul buton din bara de isntrumente ajută la inserarea imaginilor în pagină. Observăm că acest buton conţine şi un submeniu de unde putem selecta diferite opţiuni de formatare a imaginii. Fereastra de dialog corespunzătoare inserării clasice a unei imagini arată astfel:

Selectăm imaginea ce urmează a fi inserată în document (vom avea şi o previzualizare a acesteia în partea din dreapta a ferestrei) şi apăsăm butonul Ok.

Având imaginea selectată în zona de editare, observăm că fereastra de proprietăţi corespunzătoare documentului îşi schimbă conţinutul, aceasta adaptându-se elementului selectat şi afişând proprietăţi ce vizează acest element, în cazul de faţă imaginea. Se pot stabili de aici dimensiunile imaginii, se poate ataşa o legătură, se poate schimba aliniamentul, bordura imaginii etc.

În acest caz, fereastra de proprietăţi arată astfel:

Următorul buton din bara de instrumente, numit „Media” permite inserarea în pagină a diferitelor tipuri de obiecte multimedia cum ar fi: animaţii flash, butoane, elemente video etc. Următorul buton din bara de instrumente, numit „Date” ajută la inserarea datei în interiorul paginii. Fereastra de dialog corespunzătoare acestei opţiuni arată astfel:

Următorul buton din bara de instrumente, numit „Server-Side Include” ajută la inserarea unor scripturi ce vor fi rulate în pagina de web. Aceste scripturi sunt aplicaţii descrise cu ajutorul unor limbaje de programare web.

Următorul buton din bara de instrumente, numit „Comment” ajută la inserarea unui comentariu în interiorul paginii web. Acest comentariu nu va fi vizibil în momentul vizualizării paginii cu ajutorul unui browser, acesta fiind util pentru a marca anumite probleme/informaţii în vederea editărilor ulterioare.

Fereastra de dialog corespunzătoare acestei opţiuni arată astfel:

Următorul buton din bara de instrumente, numit „Templates” ajută la inserarea unor elemente tip în pagina web (modele ce pot fi utilizate în diferite pagini). În momentul în care avem nevoie de un astfel de model îl putem insera în pagină, reducându-se astfel timpul de proiectare, nefiind necesar să proiectăm din nou modelul respectiv.

Următorul buton din bara de instrumente, numit „Tag chooser” ajută la inserarea în document a unui tag. Se obseră că în momentul utilizării acestui buton aplicaţia va comuta automat în modul de vizualizare „Split” deoarece tagul va fi inserat în interiorul codului HTML editabil, iar acest cod este vizibil în unul din modurile de vizualizare „Split” sau „Code”. Se utilizează modul „Split” deoarece acesta permite vizualizarea simultană a codului şi a paginii rezultat. Fereastra de dialog corespunzătoare acestei opţiuni arată astfel:

Se observă că această opţiune nu se limitează la inserarea tagurilo HTML, ci permite şi inserarea altor tipuri de taguri din spectrul programării web (asp, php, jsp etc). În final, cele 3 tipuri de vizualizare arată astfel:

1. CODE:

2. SPLIT

3. DESIGN

Opţiunile prezentate anterior sunt opţiunile de bază pe care le conţine aplicaţia Micromedia Dreamweaver. Cu ajutorul acestora se poate realiza un site de nivel minim (se pot construi pagini HTML de bază conţinând anumite informaţii şi se pot insera legături ăntre aceste pagini). Aplicaţia Dreamweaver conţine însă şi alte opţiuni utilizate la formatarea avansată a paginilor web. Aceste opţiuni pot fi găsite utilizând meniurile aplicaţiei şi modul de aplicare este sugestiv. Aplicaţia conţine şi instrumente de vizualizare ajutătoare precum „Rulers” (opţiune utilă în cazul afişării unor rigle – ajută la alinierea elementelor în pagină pentru a realiza pagini web cu un aspect plăcut) sau „Grid” (opţiune asemănătoare ce afişează o grilă ce conţine linii verticale şi orizontale).

Opţiunile de vizualizare prezentare anterior pot fi selectate cu ajutorul meniului „View”. De asemenea celelalte meniuri ale aplicaţiei conţin instrumente utile şi intuitive de editare a elementelor din pagina HTML, fie ele zone de text, imagini, tabele sau alte elemente HTML. Combinând aceste elemente (şi utilizând tagurile HTML cunoscute) se pot obţine pagini web de un nivel superior. Se recomandă parcurgerea unui curs de HTML înainte de a începe editarea paginilor HTML cu Dreamweaver şi trecerea în revistă a tagurilor HTML de bază, deoarece în anumite situaţii este necesară editarea în modul „Code” ceea ce presupune cunoştinţe minime de HTML. Informaţii referitoare la limbajul HTML pot fi găsite în cursul HTML din lista de cursuri a siteului microportal, curs aflat la adresa următoare de internet:

http://www.microportal.ro/cursuri/Learning_Html.pdf .