Sunteți pe pagina 1din 16

MACROMEDIA DREAMWEAVER

Examinarea suprafatei de lucru in dreamweaver


Ii incurajeaza pe toti utilizatorii sa incerce interfata Dreamweaver.
Cand deschideti Dreamweaveaver

pentru Windows, veti vedea o

suprafata alba, goala, numita fereastra document. Fereastra document afiseaza


pagina web aproximativ asa cum va aparea intr-un browser web. Ea are in
partea dreapta panourile. Aceste panouri va permit sa modificati si sa organizati
elementele de pagina web. Fereastra Document, panourile si alte elemente pe
care le veti examina in cateva minute, sunt grupate intr-o interfata integrata.

Freastra Document
Fereastra Document

contine bara de titlu, bara de meniuri, bara de

inserari si bara de instrumente in partea de sus. Bara de titlu contine numele


aplicatiei-Dreamweaver - numele fisierului si titlu paginii web curente. Acest titlu
va mai aparea in bara de titlu

a browserului web. Numele fisierului este

pozitionat la dreapta titlului si este inclus intre paranteze.


Bara de inserari
Bara de inserari

este chiar sub bara de meniuri. Ea contine butoane

pentru inserarea elementelor pe pagina web, cum ar fi imaginile tabelele


formularele si hiper legaturile. Puteti, fie sa dati click, fie sa trageti cu mouse-ul
pictograma butonului pentru a insera acel obiect in pagina web.
Bara de inserari contine un numar de sectiuni care va permit sa alegeti
dintre diferitele categorii de obiecte disponibile. Implicit, exista 12 sectiuni in bara
de inserari: Common, Layout, Text, Tables, Frames, Forms, Templates,
Characters, Media, Head, Script si Aplication. Pentru

a afisa butoanele

obiectelor dintr-o anumita categorie, dati click pe sectiunea categoriei.

Bara de instrumente
Bara de instrumente va ofera un acces rapid la comenzile importante.
Daca bara nu este vizibila in fereastra Document, selectati comanda Toolbar din
meniul View si apoi selectai Document. Cele trei butoane din partea stanga a
barei de instrumente va permite sa comunicati intre Code si view, Designe view
si o vizualizare impartita in care se vede atat vizualizarea cod cat si designul.
Cand sunteti in vizualizarea codului, butonul Refresh Design View
reimprospateaza vizualizarea designului astfel incat sa puteti vedea imediat, in
fereastra Document, modificarile facute in cod.

Bara de stare
Fereastra Dreamweaver Document are o bara de stare de-a lungul partii
de jos a paginii. Ea contine selectorul de taguri, meniul derulant Windows Size si
statisticile de descarcare. Aceste instrumente conventionale sunt doar o parte din
frumoasele abilitati pe care le ofera Dreamweaver pentru a va ajuta sa aveti o
experienta productiva si amuzanta proiectand pentru web.
Panouri si fereste de inspectare
Prin panourile si ferestrele de inspectare din Dreamweaver stabiliti
proprietati, afisati panouri, creati animati si adaugati diverse functionalitati paginii
dumneavostra Web. Cele mai multe comenzi din Dreamweaver sunt disponibile
in mai multe locuri, de obicei sub forma unei comenzi din meniu si ca o comanda
din panou.
Panourile din Dreamweaver sunt impartite in grupuri de panouri pe
sectiuni alaturi de fereastra Document.
Daca este deschis un panou, comanda sa din meniul Window are un

semn de validare alaturi. Pentru a inchide sau a deschide un panou sau o


fereastra de inspectare, deselectati comanda din meniul Window. Numele de
comenzi din meniul Window pot fi usor diferite de numele panourilor si feretrelor
de inspectare pe care ii lanseaza.

Fereastra de inspectare Property


Ferestra de inspectare Property afiseaza toate proprietatile obiectului
selectat la un moment dat. Ea este ca un cameleon -va arata diferit, afisand
proprietatile corespunzatoare, pentru diferite obiecte dintr-o pagina Web. De
exemplu, cand este selectat un text pe ecran, fereastra de inspectare Property
prezinta proprietatile textului, daca este selectata o imagine atunci prezinta
proprietatile imaginii.

Menuri derulante
Unii prefera sa utilizeze comenzi din meniuri, iar altii prefera sa dea click
pe pictograme. Pentru cei care prefera meniurile, aceasta sectiune descrie
organizarea meniurilor din Dreamweaver. Meniurile File si Edit sunt standart
pentru majoritatea programelor. Meniul File contine comenzi de deschidere,
salvare, import si export de fisiere. Meniul Edit contine comenzile Cut, Copy si
Paste, alaturi de comenzile Find si Replace si comanda Preferences. Multe
elemente din interfata Dreamweaver si din operarea sa pot fi configurate in
Preferences.

Meniurile File si Edit contin comenzi care sunt comune mai multor aplicatii, dar si
cateva specifice pentru Dreamweaver.

Meniul View gazduieste comenzi pentru activarea sau dezactivarea


elementelor de interfata.

Meniurile Insert si Modify

aceste

va

permit

inserarea si modificarea

atributelor obiectelor.

Toate comenzile necesare pentru a modifica elementele unui text se afla in

meniul Text. Meniul Commands are comenzi de inregistrare a animatiilor, de


curatare a codului HTML si de formatare si sortare a tabelelor.

Comenzile din meniul Site folosesc la administrarea Web. Comenzile meniului


Windows folosesc la gestionarea panourilor si ferestrelor de inspectare
Dreamweaver.

Meniul Help lanseaza sistemul Help extensiv din Dreamweaver.

Crearea unei pagini noi si stabilirea proprietatilor de pagina


Pentru a crea o pagina Web noua, selectati comanda New din meniul File.
Va aparea caseta de dialog New Document, care va permite sa selectati tipul de
document pe care doriti sa-l creati. Acesta caseta de dialog este alcatuita dintr-o
coloana Category si o coloana ce contina lista paginilor din acea categorie.
Selectati categoria Basic Page si apoi selctati pentru Basic Page tipul HTML.
Dati clic pe butonul Create. Avand un document nou creat, sunteti gata sa
adaugati un text, imagini si alte obiecte pe pagina web.

Intoducerea si centrarea unui text


Puteti introduce de la tastatura un text in fereastra Document a paginii
Web. Introduceti un text pentru antet, apasati tasta Enter si introduceti cateva
fraze. Pentru a alinia antetul pe centrul paginii:

Deschideti fereastra de inspectare Property.

Selectati textul antetului.

Dati click pe pictograma Align Center din fereastra de inspectare Property.


Alternativ, avand textul antetului selectat, selectati meniul Text, alegeti

Alignment si apoi comanda Center. Meniul Text contine toate comenzile de


formatare de text.

Adaugarea unui titlu documentului


Titlul documentului dumneavostra apare in bara de titlu atat a programului
Dreamweaver, cat si a browserului. Titlul documentului este salvat intr-o lista din
browserul utilizatorului, care contine semnele de carte si adresele favorite, deci
trebuie sa fie semnificativ si usor de retinut
Stabiliti titlul documentului

in Page Properties. Puteti accesa Page

Properties in doua moduri:

Selectati comanda
meniul Modify.

Page Properties din

Dati click-dreapta pe o portiune libera din fereasta Document si selectati


Page Properties din meniul derulant.

Pentru a da un titlu documentului dumneavostra:


1. Dupa selectarea comenzii Page Properties, introduceti un text descriptiv in
caseta Title din partea de sus a casetei de dialog Page Properties

2. Apasati butonul Apply sau OK. Daca alegeti butonul Apply, caseta de dialog
Page Properties va ramane deschisa si pregtita pentru urmtoarele editri ale
paginii. Daca dati clic pe OK, caseta de dialog se va nchide.

Utilizarea selectorului de culoare


Exista cteva locuri in Dreamweaver unde putei schimba o culoare.
Modificai culoarea implicita a textului in Page Properties si exersai folosind
sectorul de culoare din Dreamweaver. Modificai culoare implicita a textului dnd
mai intai clic pe caseta de culoare de langa eticheta Text in caseta de dialog
Page Properties.

Formatarea textului
Formatati textul in modul HTML standard folosind meniul derulant format
din fereastra de inspectare Property. Exista patru optiuni de formatare de baza:

None inlatura orice stil de formatare aplicat la acel moment sectiunii.

Paragraph aplica sectiunii tagurile de paragraf. Acesta va adauga doua


randuri noi dupa sectiune

Headings 1 pana la 6 aplica sectiunii taguri de antet. Heading 1 este cel


mai mare antet ca dimensiune, iar Heading 6 este cel mai mic. Aplicarea

unui tag Heading transforma tot ce e pe acea linie in acea dimensiune de


antet.

Formatul Preformatted afiseaza textul in font cu dimensiune fixa sau nu, in


functie de setarile sistemului. Pe cele mai multe sisteme fontul este
Courier de 10 puncte.

Selectarea unui font


Pentru a utiliza un fond, selectati un text si derulati caseta Font
Combination din fereastra de inspectare Property.
Fonturile din meniul derulant Font Combination sunt definite in grupuri.
Prin specificarea unui grup in loc de un anume font creste probabilitatea ca
utilizatorul

sa aiba cel putin unul dintre fonturile grupului. Dreamweaver

predefinit niste grupuri din care sa alegeti, dar puteti crea si dumneavoastra
propriile grupuri.

Salvarea paginii si previzualizarea intr-un browser


Chiar daca Dreamweaver este un instrument WYSIWYG, va trebui sa
vedeti de fapt cum arata pagina dumneavoastra pe anumite browsere. Este bine
sa salvati pagina inainte de o a vizualiza. Salvand pagina, Dreamweaver
stabileste corect caile catre fisierele legate, cum sunt imaginile. Vom examina
conceptul de fisiere legate si cai.
Mai inati, configurati un browser astfel:

Selectati comanda Preview in Browser din meniul File. Apoi selectati


comanda Edit Browser

Se deschide caseta Preferences din Dreamweaver la categoria Preview


in Browser. E posibil ca Dreamweaver sa fie localizat deja un browser si
sa-l fi introdus in timpul procesului de instalare, asa ca lista poate sa nu fie
goala.

Dati click pe butonul "+" pentru a adauga un browser.

Stabilirea mai multor legaturi: hiperlegaturi, URL-uri, ancore si legaturi de


e- mail
O hiperlegatura permite utilizatorului sa treaca la alta pagina Web, sa
treaca la alta sectiune a paginii Web curente sau sa lanseze o aplicatie de posta
electronica. Un site Web este alcatuit dintr-un grup de pagini Web.
Hiperlegaturile permit utilizatorilor paginii dumneavoastra Web sa navigheze de
la o pagina la alta.
Hiperlegaturile, in limbaj cat mai simplu cu putinta, sunt acele texte familiare,
subliniate si colorate, pe care dati clic. Multe site-uri Web se folosesc de grafica

pentru legaturi, uneori de diverse efecte la trecerea mouse-ului pe deasupra,


pentru implementarea hiperlegaturilor.
Adaugarea unei hiperlegaturi in site-ul Web
Daca mai creati o pagina Web noua si o salvati in acelasi director cu
pagina Web, putem spune ca avem un site Web simplu. Putem folosi aceste
doua pagini pentru a exersa legatura folosind caile relative la document.
Creati o noua pagina care se leaga la o pagina existenta:
1. Selectati comanda New din meniul File pentru a crea un document nou.
2. Selectati categoria

Page Designs

din caseta de dialog New Document.

Aceste modele sunt livrate cu Dreamweaver si sunt un punct de plecare grozav


pentru dezvoltarea paginii dumneavoastra Web. Selectati Image: Pictures and
Descriptione Vertical ca model de pagina. Aveti grija sa creati un document prin
selectarea butonului radio Document. Dati clic pe butonul Create.
3. Aveti acum o pagina Web cu un spatiu destinat unei imagini si ceva spatiu
pentru text. Salvati acest document in radacina site-ului dumneavoastra.
4. Inlocuiti spatiul pentru text cu un text propriu. Veti inlocui spatiul pentru
imagine
5. Selectati textul de pe pagina Web.
6. Selectati pictograma Browse de langa caseta Link. Navigati la directorul unde
este pozitionati fisierul index.html. Selectati numele de fisier si dati clic pe butonul
Select. Dreamweaver va introduce un URL relativ in caseta Link.
Adaugarea unei imagini intr-o pagina
Imaginile sunt fisiere separate care apar intr-o pagina Web. Deoarece
Dreamweaver este un program de tip WYSIWYG, veti putea vedea imaginile
chiar in fereastra Document. Imaginile nu sunt parte a fisierului HTML, ci raman
fisiere separate care sunt inserate de browser cand vizualizati paginea Web.
Deschideti pagina creata. Mergeti in document si stergeti spatiul alocat
imaginii. Pentru a insera o imagine in pagina dumneavostra Web:

Plasati cursorul in loc de insertie a imaginii. Veti vedea punctul de inserare

palpaind.

Selectati comanda de Insert Image din bara Insert

Dati clic pe pictograma Browse din fereastra de inspectare Property


pentru a naviga la directorul unde se afla fisierul imagine. Va apare caseta
de dialog Select Image Source

Selectati un fisier imagine. Daca este marcata caseta de validare Preview


Images, se poate vedea o forma redusa a imaginii in partea dreapta a
casetei de dialog. Retineti dimensiunea fisierului, dimensiunile imaginii si
timpul necesar descarcarii, aflate sub imaginea redusa.

Cand localizati imaginea corecta, dati clic pe butonul Select.

Crearea efectului de rollover


Dreamweaver faciliteaza implementarea imaginilor pentru efectele de
trecere a mouse-ului peste imagine, adica a unei imagini rollover, prin folosirea
obiectului Rollover Image. O imagine rollover este o imagine care se suprapune
peste o alta imagine cand cursorul utilizatorului se afla deasupra ei. Veti avea

nevoie de doua fisiere de imagine cu exact aceeasi dimensiune pentru a crea


efectul de rollover.
1. Plasati punctul de inserare acolo unde doriti sa apara imaginea rollover.
2. Selectati obiectul Rollover Image din bara Insert sau comanda Rollover Image
din submeniul Interactive Image al meniului Insert
3. Apare caseta de dialog Insert Rollover Image. Dati un nume imaginii in caseta
de sus
4. Selectati ambele fisiere, cel cu imaginea initiala si cel cu imaginea rollover,
prin clic pe butoanele Browse.
5. Maracati caseta de validare Preload Rollover Image daca doriti ca imaginea
rollover sa fie descarcata in copia cache din browserul utilizatorului. Avand o
imagine preincarcata, exista mai putine sanse ca utilizatorul sa plaseze cursorul
peste imagine si sa fie nevoit sa astepte pentru ca imaginea rollover sa se
descarce.
6. Adaugati o legatura la imaginea rollover dand clic pe butonul Browse sau
introducand URL-ul extern sau numele ancorei.
7. Dati clic pe butonul ok.