Aplicaia Macromedia Deamweaver Dreamweaver folosete la editarea diferitelor tipuri de fiiere utilizate la realizarea paginilor web sau a aplicaiilor

destinate web-ului. Astfel, n fereastra de desschidere a aplicaiei utilizatorul poate selecta tipul de fiier pe care urmeaz s-l realizeze, sau poate deschide un fiier realizat anterior. Caseta de dialog iniial arat astfel:

n coloana din stnga sunt evideniate fiierele de lucru editate recent, acestea putnd fi deschise direct de aici. De asemenea se poate folosi butonul Open pentru a deschide un alt fiier dect cele listate. n coloana din mijloc sunt listate principalele tipuri de fiiere ce pot fi editate cu ajutorul aplicaiei; tot aici gsim butonul More care ajut la vizualizarea tipurilor de fiiere ce pot fi editate care nu apar n lista scurt din aceast coloan. n ultima coloan se afl cteva abloane ce pot fi utilizate drept suport pentru realizarea unui fiier nou.

n continuare ne vom concentra asupra realizrii fiierelor HTML cu ajutorul web-editorului Dreamweaver. n acest caz n fereastra iniial se va selecta HTML din coloana Create new. Acest lucru va avea ca efect trecerea la fereastra urmtoare care arat astfel:

Observm componentele aplicaiei: bara de meniuri, bara de instrumente, zona de lucru, fereastra de proprieti (aflat n partea de jos a aplicaiei) i ferestrele de editare (aflate iniial n partea dreapt a aplicaiei). n fereastra de editare se pot deschide mai multe fiiere simultan, acestea fiind dispuse automat sub forma unor taburi ce conin numele fiierelor respective. n cazul de fa avem un singur fiier deshis, tabul corespunztor coninnd numele acestuia (Untitled-1). Numele fiierul va fi stabilit n momentul salvrii acestuia. Salvarea se realizeaz accesnd meniul File, opiunea Save sau Save as. Se va alege locaia n care se face salvarea i numele sub care va fi salvat fiierul. Dup salvare, tabul corespunztor fiierului va afia noul nume.

n fereastra de editare observm prezena cmpului Title, acesta este titlul documentului HTML, nu titlul documentului n sine. Tot n fereastra de editare observm cele trei variante de vizualizare posibile: Code, Split i Design. Opiunea Code folosete la vizualizarea codului HTML corespunztor paginii. Opiunea Split mparte fereastra de editare n 2 zone: n prima zon se va vizualiza codul HTML corespunztor paginii, iar in zona a doua se va vizualiza modul n care va fi afiat pagina de ctre browser dup modelul wysiwyg (What-You-See-Is-What-You-Get fereastra de editare ne previzualizeaz pagina, utilizatorul putnd observa cum va fi afiat aceast de ctre browser). Opiunea Design afieaz aspectul paginii (aa cum va arta n browser). n acest mod de afiare se pot utiliza butoanele i opiunile 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 corespunztor. Astfel, utiliznd acest mod de lucru se realizeaz cu uurint editarea paginii, deoarece codul corespunztor va fi adugat n mod automat de ctre aplicaie. n continuare vom prezenta bara de proprieti implicit (va fi afiat n situaia n care nu avem niciun element din pagin selectat). Aceast bar de proprieti arat astfel:

Se observ opiunile generale ce pot fi selectate : Format, Font, Style, Size. Aceste opiuni se vor aplica textului ce va fi editat n pagin. De asemenea observm prezena opiunilor de formatare a textului (B-bold, IItalic), se poate alege culoarea textului i aliniamentul utilizat (cele 4 forme de aliniament sunt similare cu formele de aliniament utilizate de ctre aplicaia Microsoft Word). De asemenea n aceast fereastr gsim i opiuni de realizare/formatare a listelor i indentrilor corespunztoare.

Tot n aceast fereastr de proprieti exist opiuni de editare a legturilor (link). Absena opiunii U-underline se datoreaz faptului c n paginile web n general un text subliniat marcheaz o legtur. Dac totui se dorete s se introduc un text subliniat care nu reprezint o legtur, acest lucru se poate realiza utiliznd tag-ul HTML corespunztor ( <u>). De asemenea, tot aici gsim i butonul Page properties cu ajutorul cruia putem stabili opiunii generale de formatare a paginii cum ar fi tipul de codificare (necesar pentru ca browserul s afieze corect caracterele specifice cum ar fi diacriticele), opiuni de formatare general a legturilor, opiuni referitoare la aspectul general al paginii (culoare de fundal, imagine de fundal, opiuni de spaiere). Fereastra de dialog corespunztoare arat astfel:

n partea stng observm meniul structurat iar n dreapta opiunile corespunztoare meniului selectat n stnga. Opiunile 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 formatnd zonele respective cu ajutorul instrumentelor de formatare specifice (sau efectiv aplicnd anumite tag-uri HTML zonelor respective).

n continuare vom utiliza opiunile din bara de instrumente pentru a aduga elemnte n pagina web. Prima opiune din aceast bar de instrumente ne permite s adugm o legtur. Vom folosi fereastra de dialog corespunztoare pentru a aduga n pagina noastr o legtur ctre siteul microportal:

n cmpul Text vom scrie textul ce va forma legtura, n cmpul Link vom scrie adresa de destinaie, 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 conine titlul legturii (afiat n momentul staionrii cursorului deasupra sa). Urmtorul buton din bara de instrumente este Email link utilizat pentru a introduce un link ctre o adres de email (utilizarea linkului va avea ca efect deschiderea aplicaiei de email n vederea editrii unui email ce va fi transmis ctre 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 aplicaiei de mail (de ex. Outlook) n vederea transmiterii unui email la adresa contact@microportal.ro

Urmtorul buton din bara de instrumente (Anchor name) folosete la inserarea unei ancore n document. Ancora se utilizeaz la introducerea legturilor interne (de exemplu dac n pagin avem 3 titluri putem marca fiecare titlu cu o astfel de ancor, putnd ulterior s faci legturi ctre acestea; astfel la utilizarea acestora pagina va fi deschis i derulat astfel nct zona de vizualizare a acesteia s nceap n dreptul ancorei, n cazul nostru n dreptul unuia dintre titluri). Fereastra de dialog arat astfel:

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

Din aceast fereastr se pot stabili numrul iniial de linii i de coloane pe care le conine tabelul precum i proprietile acestuia (bordur, dimensiuni, spaiere). n momentul n care tabelul din pagin este selectat

observm c fereastra de proprieti i modific elementele, aceasta afind elemente de formatare a tabelelor. n aceast situaie, fereastra de proprieti arat astfel:

Se observ c n acest caz din aceast fereastr putem formata opiuni corespunztoare tabelului selectat n zona de vizualizare a paginii. Urmtorul buton din bara de instrumente ajut la inserarea unui element HTML de tip div. Fereastra de dialog corespunztoare acestei opiuni arat astfel:

Se poate stabili id-ul divului (numele utilizat n cazul apelrii utiliznd scripturi) i clasa divului ce presupune atribuirea unuor proprieti expuse cu ajutorul unui fiier de tip css, fiier n care vom include proprieti pentru toate elementele din pagin crora le aplicm diferite atribute.

Urmtorul buton din bara de isntrumente ajut la inserarea imaginilor n pagin. Observm c acest buton conine i un submeniu de unde putem selecta diferite opiuni de formatare a imaginii. Fereastra de dialog corespunztoare inserrii clasice a unei imagini arat astfel:

Selectm imaginea ce urmeaz a fi inserat n document (vom avea i o previzualizare a acesteia n partea din dreapta a ferestrei) i apsm butonul Ok. Avnd imaginea selectat n zona de editare, observm c fereastra de proprieti corespunztoare documentului i schimb coninutul, aceasta adaptndu-se elementului selectat i afind proprieti ce vizeaz acest element, n cazul de fa imaginea. Se pot stabili de aici dimensiunile imaginii, se poate ataa o legtur, se poate schimba aliniamentul, bordura imaginii etc. n acest caz, fereastra de proprieti arat astfel:

Urmtorul buton din bara de instrumente, numit Media permite inserarea n pagin a diferitelor tipuri de obiecte multimedia cum ar fi: animaii flash, butoane, elemente video etc. Urmtorul buton din bara de instrumente, numit Date ajut la inserarea datei n interiorul paginii. Fereastra de dialog corespunztoare acestei opiuni arat astfel:

Urmtorul 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 aplicaii descrise cu ajutorul unor limbaje de programare web. Urmtorul buton din bara de instrumente, numit Comment ajut la inserarea unui comentariu n interiorul paginii web. Acest comentariu nu va fi vizibil n momentul vizualizrii paginii cu ajutorul unui browser, acesta fiind util pentru a marca anumite probleme/informaii n vederea editrilor ulterioare.

Fereastra de dialog corespunztoare acestei opiuni arat astfel:

Urmtorul 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, reducndu-se astfel timpul de proiectare, nefiind necesar s proiectm din nou modelul respectiv. Urmtorul buton din bara de instrumente, numit Tag chooser ajut la inserarea n document a unui tag. Se obser c n momentul utilizrii acestui buton aplicaia 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 corespunztoare acestei opiuni arat astfel:

Se observ c aceast opiune nu se limiteaz la inserarea tagurilo HTML, ci permite i inserarea altor tipuri de taguri din spectrul programrii web (asp, php, jsp etc). n final, cele 3 tipuri de vizualizare arat astfel: 1. CODE:

2. SPLIT

3. DESIGN

Opiunile prezentate anterior sunt opiunile de baz pe care le conine aplicaia Micromedia Dreamweaver. Cu ajutorul acestora se poate realiza un site de nivel minim (se pot construi pagini HTML de baz coninnd anumite informaii i se pot insera legturi ntre aceste pagini). Aplicaia Dreamweaver conine ns i alte opiuni utilizate la formatarea avansat a paginilor web. Aceste opiuni pot fi gsite utiliznd meniurile aplicaiei i modul de aplicare este sugestiv. Aplicaia conine i instrumente de vizualizare ajuttoare precum Rulers (opiune util n cazul afirii unor rigle ajut la alinierea elementelor n pagin pentru a realiza pagini web cu un aspect plcut) sau Grid (opiune asemntoare ce afieaz o gril ce conine linii verticale i orizontale).

Opiunile de vizualizare prezentare anterior pot fi selectate cu ajutorul meniului View. De asemenea celelalte meniuri ale aplicaiei conin instrumente utile i intuitive de editare a elementelor din pagina HTML, fie ele zone de text, imagini, tabele sau alte elemente HTML. Combinnd aceste elemente (i utiliznd tagurile HTML cunoscute) se pot obine 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 situaii este necesar editarea n modul Code ceea ce presupune cunotine minime de HTML. Informaii referitoare la limbajul HTML pot fi gsite n cursul HTML din lista de cursuri a siteului microportal, curs aflat la adresa urmtoare de internet: http://www.microportal.ro/cursuri/Learning_Html.pdf .