Macromedia Dreamweaver MX 2004 partea 1 Introducere

Pentru realizarea unui site web este nevoie de un editor HTML. Exist dou tipuri de editoare HTML: editoare de tipul WYSIWYG (What You See Is What You Get - ceea ce vedei este ceea ce obinei) editoare n cod HTML Editoarele WYSIWYG sunt uor de utilizat chiar i pentru nceptori, realizarea unei pagini web simple neridicnd nici un fel de probleme. Nu trebuie dect s introducei text, cteva imagini, legturi i pagina web este gata. Dezavantajele editoarelor WYSIWIG constau n faptul c nu permit realizarea unei programri HTML avansate iar fiierele rezultate sunt mai mari. Exemple de editoare WYSIWYG: Microsoft FrontPage, Netscape Composer, etc. Editoarele n cod HTML permit editarea unei pagini web n mod profesionist. La fel ca editoarele WYSIWIG i acestea v permit s vedei modul n care va arta pagina web. Exemple de editoare HTML: HotDog, HTML Assistant Pro, etc. Macromedia Dreamweaver MX 2004 este un program hibrid care mbin cele dou tipuri de editoare HTML, utilizatorul putnd alege modul de proiectare: cu ajutorul interfeei grafice sau prin scrierea codului HTML. De asemenea, Dreamweaver v permite s realizai att creerea i formatarea paginilor web ct i organizarea i administrarea unui site existent. Dreamweaver permite o organizare facil a fiierelor din site, fiiere care ulterior vor fi transferate pe un server care va gzdui siteul. Siteurile web sunt alctuite din pagini web. Fiecare pagin este un fiier HTML care conine text formatat i legturi ctre alte pagini. O pagin web poate conine i imagini sau elemente media, cum ar fi sunete sau secvene video, cu meniunea c toate aceste obiecte sunt fiiere separate i ele doar par a fi parte integrant a paginii respective. Textul este principalul element de coninut al unui site. Acesta poate fi scris direct n Dreamweaver sau poate fi importat dintr-un editor de text cum ar fi Microsoft Word. Elementele de grafic care se introduc n site trebuie s fie n format GIF sau JPEG, formate obinute cu ajutorul unui program de grafic, cum ar fi Adobe Photoshop. Fiierele de sunet sau fiierele video pot fi integrate complet n site sau putei ntroduce link-uri ctre ele, pentru a fi deschise ntr-o fereastr de browser separat. Realizarea unui site web presupune efectuarea a trei pai: adunarea fiierelor de care avei nevoie ntr-un director realizarea unui site local ncrcarea coninutului site-ului pe un server -1-

Interfaa Dreamweaver
Elementele ce apar la lansarea programului Dreamweaver sunt prezentate n figura de mai jos:

Panoul Insert

Panouri ancorate Fereasta Document

Fereasta Site

Panoul Properties Fereastra Document este locul n care proiectai coninutul paginii. Dac avei deschise mai multe pagini, n partea superioar a acestei ferestre vor fi tab-uri care v permit s comutai ntre ele, cum se vede din figura de mai jos:

Tot din partea superioar a fereastrei Document putei alege editorul HTML n care dorii s lucrai: editorul de tip WYSIWYG prin selectarea butonului Design, editorul n cod HTML, prin selectarea butonului Code, sau amndou editoare cu Split. Panoul Insert conine pictograme de comand rapid care v permit s introducei n pagin obiectele dorite. Panoul Properties se modific n funcie de obiectul selectat i v permite modificarea atributelor acestuia. Panourile ancorate permit realizarea operaiilor dorite fr a mai fi nevoie de a accesa meniul principal i a cuta n submeniuri. Acestea pot fi nchise prin selectarea Close Panel Group din partea dreapt sus a fiecrui panou. Fereastra Site este una din cele mai importante, acesta fiind locul unde creai, denumii, organizai i tergei fiierele dintr-un site. Tot din aceast fereastr putei deschide pentru editare n fereastra Document fiierele HTML.

-2-

Definirea unui site

nainte de a ncepe realizarea unui site web trebuie creat un director pe PC-ul local, director care va conine toate elementele componente ale site-ului. Din meniul principal alegei Site/Manage Site, iar din fereastra care se deschide alegei New i astfel ncepei s v definii site-ul: i dai un nume, alegei directorul pe care tocmai l-ai creat, etc. Odat creat site-ul putei ncepei s proiectai pagina sa de start. Pentru a deschide o pagin n cadrul site-ului, alegei din meniul principal File/New i alegei Basic Page. Apsnd butonul Create ai obinut o pagin nou. Putei crea o nou pagin i din fereastra Site printr-un clic pe butonul din dreapta i alegnd New File din meniu. Pentru a edita pagina nou creat trebuie doar s dai dublu clic pe fiierul HTML corespunztor. Prima pagin creat reprezint pagina de pornire i trebuie denumit index.htm, pentru a putea fi recunoscut drept pagin de start de ctre server. Fiecare pagin trebuie s primeasc un titlu, care va aprea n bara de titlu a browser-ului. Acest titlu trebuie ales ct mai sugestiv i se introduce n caseta Title din partea superioar a ferestrei Document. Tot aici mai este i butonul Preview in browser care v permite s vedei cum va arta pagina. Pentru alte modificri care se mai doresc a fi aduse paginii, cum ar fi culoarea sau imaginea de fundal sau dimensiunile marginilor se poate utiliza fie din meniul principal Modify/Page Properties, fie din panoul Properties. De asemenea este util i adugarea metaetichetelor folosite de motoarele de cutare. Se poate introduce o metaetichet cu cuvinte cheie Insert/HTML/Head Tags/Keywords, precum i una de descriere Insert/HTML/Head/Tags/Description, util pentru a rezuma coninutul paginii n cadrul unei liste rezultate prin cutarea dup cuvinte cheie.

Introducerea i modificarea textului i a imaginilor

De regul se prefer utilizarea textului editat n cadrul unui procesor de text (Microsoft Word). Introducerea acestuia ntr-o pagin din cadrul site-ului se realizeaz printr-o simpl operaiune Copy/Paste. Formatarea textului se realizeaz fie din meniul Text, fie prin intermediul panoului Properties, aceasta din urm fiind cel mai uor de utilizat. Trebuie inut cont de faptul c formatarea textului pentru paginile web este limitat, cei care viziteaz site-ul avnd browsere i monitoare setate diferit. Se poate astfel modifica tipul i dimensiunea fontului, culoarea textului. De asemenea, se poate stabili tipul de aliniere al paragrafelor, modul de indentare, realizarea listelor, etc. Pentru a obine o spaiere simpl ntre dou paragrafe consecutive trebuie s apsai tasta Shift n timp ce apsai Enter. n paralel cu formatarea textului n editorul WYSIWYG se produc modificrile aferente i n editorul HTML. Dac se mparte fereastra Document astfel nct s fie -3-

afiate ambele editoare, se poate observa c formatarea unui text nseamn asocierea de etichete HTML textului respectiv. Dreamweaver poate fi utilizat pentru a integra imagini, a le redimensiona i a le muta n pagin. Este de preferat utilizarea formatelor GIF, care permit transparena culorii folosite pentru sigle, pictograme de navigare i JPEG, care au un numr mare de culori folosite de obicei pentru fotografii. Pentru a insera o imagine se d clic pe pictograma corespunztoare din panoul Insert. La selectarea imaginii panoul Properties va afia caracteristicile acesteia i putei astfel face modificrile dorite. Putei denumi imaginea, cu meniunea c numele imaginii nu este acelai cu numele fiierului, ci este numele sub care apare dac se alege din browser Save Picture As. De asemenea, putei aduga i text alternativ, care va fi afiat n browser atunci cnd un utilizator trece cu mouse-ul peste imagine.

Utilizarea tabelelor
Tabelele sunt folosite pentru a organiza textul i imaginile, ele reprezentnd elementul de baz pentru controlul aezrii n pagin. Pentru a introduce un tabel se poate accesa din meniul principal Insert/Table. Se deschide astfel o fereastr care permite definirea acestuia. Cell padding reprezint spaiul dintre coninutul unei celule i marginea sa, iar Cell spacing reprezint spaiul dintre celule. Odat introdus un tabel i putei schimba caracteristicile din panoul Properties. Putei schimba grosimea i culoarea chenarului, putei defini o culoare sau o imagine de fundal. Tabelul mai poate fi utilizat i pentru definirea limii unei pagini, prin introducerea ntregului coninut al paginii respective ntr-ul tabel cu o singur celul, fr chenare i centrat, care s aibe limea identic cu cea dorit pentru pagin. Fiecare celul din cadrul tabelului poate fi formatat individual. Dac o celul conine text, n panoul Properties va aprea n partea superioar elementele pentru formatarea textului i n partea inferioar cele pentru formatarea celulei.

-4-

Exerciiul 1 1. Creai un director. Creai un site n acel director. Creai dou pagini n site: index.htm i tabel.htm 2. Utiliznd acest document proiectai pagina de start pentru a arta identic cu cea din figura de mai jos (fr a utiliza tabele):

Imaginea o denumii poza.jpg Fixai dimensiunea imaginii la 200 x 150 Adugai textul interfata Vizualizai pagina n browser pentru rezoluii diferite ale monitorului 5. Proiectai pagina tabel.htm pentru a arta identic cu imaginea de mai jos (utiliznd tabele):

6. Selectai pagina index.htm i utilizai un tabel pentru a definii limea paginii la 600 pixeli. i n acest caz vizualizai pagina n browser pentru rezoluii diferite ale monitorului. -5-