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 vedeţi
este ceea ce obţineţi)
• editoare în cod HTML
Editoarele WYSIWYG sunt uşor de utilizat chiar şi pentru începători, realizarea unei
pagini web simple neridicând nici un fel de probleme. Nu trebuie decât să introduceţi text,
câteva imagini, legături şi pagina web este gata. Dezavantajele editoarelor WYSIWIG
constau în faptul că nu permit realizarea unei programări HTML avansate iar fişierele
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ă vedeţi modul în care va arăta 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 putând alege modul de proiectare: cu ajutorul
interfeţei grafice sau prin scrierea codului HTML.
De asemenea, Dreamweaver vă permite să realizaţi atât creerea şi formatarea
paginilor web cât şi organizarea şi administrarea unui site existent. Dreamweaver permite
o organizare facilă a fişierelor din site, fişiere care ulterior vor fi transferate pe un server
care va găzdui siteul.
Siteurile web sunt alcătuite din pagini web. Fiecare pagină este un fişier HTML care
conţine text formatat şi legături către alte pagini. O pagină web poate conţine şi imagini
sau elemente media, cum ar fi sunete sau secvenţe video, cu menţiunea că toate aceste
obiecte sunt fişiere separate şi ele doar par a fi parte integrantă a paginii respective.
Textul este principalul element de conţinut 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 obţinute cu ajutorul unui program de grafică, cum ar fi Adobe Photoshop.
Fişierele de sunet sau fişierele video pot fi integrate complet în site sau puteţi
întroduce link-uri către ele, pentru a fi deschise într-o fereastră de browser separată.
Realizarea unui site web presupune efectuarea a trei paşi:
 adunarea fişierelor de care aveţi nevoie într-un director
 realizarea unui site local
 încărcarea conţinutului site-ului pe un server

1
 Interfaţa 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 proiectaţi conţinutul paginii. Dacă aveţi
deschise mai multe pagini, în partea superioară a acestei ferestre vor fi tab-uri care vă
permit să comutaţi între ele, cum se vede din figura de mai jos:

Tot din partea superioară a fereastrei Document puteţi alege editorul HTML în care
doriţi să lucraţi: editorul de tip WYSIWYG prin selectarea butonului Design, editorul în cod
HTML, prin selectarea butonului Code, sau amândouă editoare cu Split.
Panoul Insert conţine pictograme de comandă rapidă care vă permit să introduceţi în
pagină obiectele dorite.
Panoul Properties se modifică în funcţie de obiectul selectat şi vă permite
modificarea atributelor acestuia.
Panourile ancorate permit realizarea operaţiilor dorite fără a mai fi nevoie de a
accesa meniul principal şi a căuta în submeniuri. Acestea pot fi închise prin selectarea Close
Panel Group din partea dreaptă sus a fiecărui panou.
Fereastra Site este una din cele mai importante, acesta fiind locul unde creaţi,
denumiţi, organizaţi şi ştergeţi fişierele dintr-un site. Tot din această fereastră puteţi
deschide pentru editare în fereastra Document fişierele HTML.

2
 Definirea unui site

Înainte de a începe realizarea unui site web trebuie creat un director pe PC-ul local,
director care va conţine toate elementele componente ale site-ului.
Din meniul principal alegeţi Site/Manage Site, iar din fereastra care se deschide
alegeţi New şi astfel începeţi să vă definiţi site-ul: îi daţi un nume, alegeţi directorul pe
care tocmai l-aţi creat, etc.
Odată creat site-ul puteţi începeţi să proiectaţi pagina sa de start. Pentru a
deschide o pagină în cadrul site-ului, alegeţi din meniul principal File/New şi alegeţi Basic
Page. Apăsând butonul Create aţi obţinut o pagină nouă.
Puteţi crea o nouă pagină şi din fereastra Site printr-un clic pe butonul din dreapta şi
alegând New File din meniu. Pentru a edita pagina nou creată trebuie doar să daţi dublu clic
pe fişierul HTML corespunzător.
Prima pagină creată reprezintă pagina de pornire şi trebuie denumită index.htm,
pentru a putea fi recunoscută drept pagină de start de către server.
Fiecare pagină trebuie să primească un titlu, care va apărea în bara de titlu a
browser-ului. Acest titlu trebuie ales cât 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ă vedeţi cum va arăta pagina.
Pentru alte modificări 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 adăugarea metaetichetelor folosite de motoarele de
căutare. 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 conţinutul paginii în cadrul unei liste rezultate prin căutarea 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ă operaţiune Copy/Paste.
Formatarea textului se realizează fie din meniul Text, fie prin intermediul panoului
Properties, aceasta din urmă fiind cel mai uşor de utilizat. Trebuie ţinut cont de faptul că
formatarea textului pentru paginile web este limitată, cei care vizitează site-ul având
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 obţine o spaţiere simplă între două paragrafe consecutive trebuie să
apăsaţi tasta Shift în timp ce apăsaţi Enter.
În paralel cu formatarea textului în editorul WYSIWYG se produc modificările
aferente şi în editorul HTML. Dacă se împarte fereastra Document astfel încât să fie

3
afişate 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 transparenţa culorii -
folosite pentru sigle, pictograme de navigare şi JPEG, care au un număr mare de culori –
folosite de obicei pentru fotografii.
Pentru a insera o imagine se dă clic pe pictograma corespunzătoare din panoul Insert.
La selectarea imaginii panoul Properties va afişa caracteristicile acesteia şi puteţi astfel
face modificările dorite.
Puteţi denumi imaginea, cu menţiunea că numele imaginii nu este acelaşi cu numele
fişierului, ci este numele sub care apare dacă se alege din browser “Save Picture As”. De
asemenea, puteţi adăuga şi text alternativ, care va fi afişat în browser atunci când un
utilizator trece cu mouse-ul peste imagine.

Utilizarea tabelelor

Tabelele sunt folosite pentru a organiza textul şi imaginile, ele reprezentând

elementul de bază pentru controlul aşezării î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ă
spaţiul dintre conţinutul unei celule şi marginea sa, iar ‘Cell spacing’ reprezintă spaţiul
dintre celule.
Odată introdus un tabel îi puteţi schimba caracteristicile din panoul Properties.
Puteţi schimba grosimea şi culoarea chenarului, puteţi defini o culoare sau o imagine de
fundal. Tabelul mai poate fi utilizat şi pentru definirea lăţimii unei pagini, prin introducerea
întregului conţinut al paginii respective într-ul tabel cu o singură celulă, fără chenare şi
centrat, care să aibe lăţimea identică cu cea dorită pentru pagină.
Fiecare celulă din cadrul tabelului poate fi formatată individual. Dacă o celulă conţine
text, în panoul Properties va apărea în partea superioară elementele pentru formatarea
textului şi în partea inferioară cele pentru formatarea celulei.

4
Exerciţiul 1
1. Creaţi un director. Creaţi un site în acel director. Creaţi două pagini în site:
index.htm şi tabel.htm
2. Utilizând acest document proiectaţi pagina de start pentru a arăta identic cu
cea din figura de mai jos (fără a utiliza tabele):

 Imaginea o denumiţi poza.jpg

 Fixaţi dimensiunea imaginii la 200 x 150
 Adăugaţi textul “interfata”
 Vizualizaţi pagina în browser pentru rezoluţii diferite ale
monitorului

5. Proiectaţi pagina tabel.htm pentru a arăta identic cu

imaginea de mai jos (utilizând tabele):

6. Selectaţi pagina index.htm şi utilizaţi un tabel pentru a

definii lăţimea paginii la 600 pixeli. Şi în acest caz vizualizaţi pagina în browser
pentru rezoluţii diferite ale monitorului.
5
6