Teorie Macromedia Dreamweaver

8/10/2019 Teorie Macromedia Dreamweaver

1/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 intrun browser web. !a are in

partea dreapta panourile. "ceste 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 intro interfata integrata.


2/16

Freastra Document

Fereastra Document contine bara de titlu, bara de meniuri, bara de

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

aplicatieiDreamweaver numele fisierului si titlu paginii web curente. "cest titlu

va mai aparea in bara de titlu a browserului web. $umele fisierului este

pozitionat la dreapta titlului si este inclus intre paranteze.

Bara de inserari

#ara de inserari este chiar sub bara de meniuri. !a contine butoane

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

formularele si hiper legaturile. %uteti, fie sa dati clic&, fie sa trageti cu mouseul

pictograma butonului pentru a insera acel obiect in pagina web.

#ara de inserari contine un numar de sectiuni care va permit sa alegeti

dintre diferitele categorii de obiecte disponibile. Implicit, exista '( sectiuni in bara

de inserari) Common, *a+out, ext, ables, Frames, Forms, emplates,

Characters, -edia, ead, /cript si "plication. %entru a afisa butoanele

obiectelor dintro anumita categorie, dati clic& pe sectiunea categoriei.


3/16

Bara de instrumente

#ara de instrumente va ofera un acces rapid la comenzile importante.

Daca bara nu este vizibila in fereastra Document, selectati comanda oolbar din

meniul 0iew 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 1efresh Design 0iew

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 dea lungul partii

de jos a paginii. !a contine selectorul de taguri, meniul derulant Windows /ize si

statisticile de descarcare. "ceste instrumente conventionale sunt doar o parte dinfrumoasele abilitati pe care le ofera Dreamweaver pentru a va ajuta sa aveti o

experienta productiva si amuzanta proiectand pentru web.

anouri si fereste de inspectare

%rin 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.

%anourile 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


4/16

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

fereastra de inspectare, deselectati comanda din meniul Window. $umele de

comenzi din meniul Window pot fi usor diferite de numele panourilor si feretrelor

de inspectare pe care ii lanseaza.

Fereastra de inspectare ropert!

Ferestra de inspectare %ropert+ afiseaza toate proprietatile obiectului

selectat la un moment dat. !a este ca un cameleon va arata diferit, afisand

proprietatile corespunzatoare, pentru diferite obiecte dintro pagina Web. De

exemplu, cand este selectat un text pe ecran, fereastra de inspectare %ropert+

prezinta proprietatile textului, daca este selectata o imagine atunci prezinta

proprietatile imaginii.


5/16

Menuri derulante

2nii prefera sa utilizeze comenzi din meniuri, iar altii prefera sa dea clic&

pe pictograme. %entru cei care prefera meniurile, aceasta sectiune descrie

organizarea meniurilor din Dreamweaver. -eniurile File si !dit sunt standart

pentru majoritatea programelor. -eniul File contine comenzi de deschidere,

salvare, import si export de fisiere. -eniul !dit contine comenzile Cut, Cop+ si

%aste, alaturi de comenzile Find si 1eplace si comanda %references. -ulte

elemente din interfata Dreamweaver si din operarea sa pot fi configurate in

%references.

-eniurile File si !dit contin comenzi care sunt comune mai multor aplicatii, dar si

cateva specifice pentru Dreamweaver.


6/16

-eniul 0iew gazduieste comenzi pentru activarea sau dezactivarea

elementelor de interfata.

-eniurile Insert si -odif+ aceste va permit

inserarea si modificarea atributelor obiectelor.

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


7/16

meniul ext. -eniul Commands are comenzi de inregistrare a animatiilor, de

curatare a codului -* si de formatare si sortare a tabelelor.

Comenzile din meniul /ite folosesc la administrarea Web. Comenzile meniului

Windows folosesc la gestionarea panourilor si ferestrelor de inspectare

Dreamweaver.


8/16

-eniul elp lanseaza sistemul elp extensiv din Dreamweaver.

Crearea unei pa"ini noi si sta#ilirea proprietatilor de pa"ina

%entru a crea o pagina Web noua, selectati comanda $ew din meniul File.

0a aparea caseta de dialog $ew Document, care va permite sa selectati tipul de

document pe care doriti sal creati. "cesta caseta de dialog este alcatuita dintro

coloana Categor+ si o coloana ce contina lista paginilor din acea categorie.

/electati categoria #asic %age si apoi selctati pentru #asic %age tipul -*.

Dati clic pe butonul Create. "vand un document nou creat, sunteti gata sa

adaugati un text, imagini si alte obiecte pe pagina web.


9/16

Intoducerea si centrarea unui text

%uteti introduce de la tastatura un text in fereastra Document a paginii

Web. Introduceti un text pentru antet, apasati tasta !nter si introduceti cateva

fraze. %entru a alinia antetul pe centrul paginii)

Deschideti fereastra de inspectare %ropert+.

/electati textul antetului.

Dati clic& pe pictograma "lign Center din fereastra de inspectare %ropert+.

"lternativ, avand textul antetului selectat, selectati meniul ext, alegeti

"lignment si apoi comanda Center. -eniul ext contine toate comenzile de

formatare de text.

Adau"area unui titlu documentului

itlul documentului dumneavostra apare in bara de titlu atat a programului

Dreamweaver, cat si a browserului. itlul documentului este salvat intro lista din

browserul utilizatorului, care contine semnele de carte si adresele favorite, deci

trebuie sa fie semnificativ si usor de retinut

/tabiliti titlul documentului in %age %roperties. %uteti accesa %age

%roperties in doua moduri)

/electati comanda %age %roperties din

meniul -odif+.


10/16

Dati clic&dreapta pe o portiune libera din fereasta Document si selectati

%age %roperties din meniul derulant.

%entru a da un titlu documentului dumneavostra)

'. Dupa selectarea comenzii %age %roperties, introduceti un text descriptiv in

caseta itle din partea de sus a casetei de dialog %age %roperties

(. "pasati butonul "ppl+ sau 34. Daca alegeti butonul "ppl+, caseta de dialog

%age %roperties va ramane deschisa si preg5tita pentru urm5toarele edit5ri ale

paginii. Daca dati clic pe 34, caseta de dialog se va 6nchide.


11/16

$tili%area selectorului de culoare

!xista c7teva locuri in Dreamweaver unde pute8i schimba o culoare.

-odifica8i culoarea implicita a textului in %age %roperties si exersa8i folosind

sectorul de culoare din Dreamweaver. -odifica8i culoare implicita a textului d7nd

mai intai clic pe caseta de culoare de langa eticheta ext in caseta de dialog

%age %roperties.

Formatarea textului

Formatati textul in modul -* standard folosind meniul derulant format

din fereastra de inspectare %ropert+. !xista patru optiuni de formatare de baza)

$one inlatura orice stil de formatare aplicat la acel moment sectiunii.

%aragraph aplica sectiunii tagurile de paragraf. "cesta va adauga doua

randuri noi dupa sectiune

eadings ' pana la 9 aplica sectiunii taguri de antet. eading ' este cel

mai mare antet ca dimensiune, iar eading 9 este cel mai mic. "plicarea


12/16

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

antet.

Formatul %reformatted afiseaza textul in font cu dimensiune fixa sau nu, in

functie de setarile sistemului. %e cele mai multe sisteme fontul este

Courier de ': puncte.

&electarea unui font

%entru a utiliza un fond, selectati un text si derulati caseta Font

Combination din fereastra de inspectare %ropert+.

Fonturile din meniul derulant Font Combination sunt definite in grupuri.

%rin specificarea unui grup in loc de un anume font creste probabilitatea ca

utilizatorul sa aiba cel putin unul dintre fonturile grupului. Dreamweaver a

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

propriile grupuri.


13/16

&alvarea pa"inii si previ%uali%area intr'un #rowser

Chiar daca Dreamweaver este un instrument W;/IW;


14/16

pentru legaturi, uneori de diverse efecte la trecerea mouseului pe deasupra,

pentru implementarea hiperlegaturilor.

Adau"area unei *iperle"aturi in site'ul We#

Daca mai creati o pagina Web noua si o salvati in acelasi director cu

pagina Web, putem spune ca avem un site Web simplu. %utem folosi aceste

doua pagini pentru a exersa legatura folosind caile relative la document.

Creati o noua pagina care se leaga la o pagina existenta)

'. /electati comanda $ew din meniul File pentru a crea un document nou.

(. /electati categoria %age Designs din caseta de dialog $ew Document.

"ceste modele sunt livrate cu Dreamweaver si sunt un punct de plecare grozav

pentru dezvoltarea paginii dumneavoastra Web. /electati Image) %ictures and

Descriptione 0ertical ca model de pagina. "veti grija sa creati un document prin

selectarea butonului radio Document. Dati clic pe butonul Create.

?. "veti acum o pagina Web cu un spatiu destinat unei imagini si ceva spatiu

pentru text. /alvati acest document in radacina siteului dumneavoastra.

@. Inlocuiti spatiul pentru text cu un text propriu. 0eti inlocui spatiul pentru

imagine

A. /electati textul de pe pagina Web.9. /electati pictograma #rowse de langa caseta *in&. $avigati la directorul unde

este pozitionati fisierul index.html. /electati numele de fisier si dati clic pe butonul

/elect. Dreamweaver va introduce un 21* relativ in caseta *in&.

Adau"area unei ima"ini intr'o pa"ina

Imaginile sunt fisiere separate care apar intro pagina Web. Deoarece

Dreamweaver este un program de tip W;/IW;


15/16

palpaind.

/electati comanda de Insert Image din bara Insert

Dati clic pe pictograma #rowse din fereastra de inspectare %ropert+

pentru a naviga la directorul unde se afla fisierul imagine. 0a apare casetade dialog /elect Image /ource

/electati un fisier imagine. Daca este marcata caseta de validare %review

Images, se poate vedea o forma redusa a imaginii in partea dreapta a

casetei de dialog. 1etineti dimensiunea fisierului, dimensiunile imaginii si

timpul necesar descarcarii, aflate sub imaginea redusa.

Cand localizati imaginea corecta, dati clic pe butonul /elect.

Crearea efectului de rollover

Dreamweaver faciliteaza implementarea imaginilor pentru efectele de

trecere a mouseului peste imagine, adica a unei imagini rollover, prin folosirea

obiectului 1ollover Image. 3 imagine rollover este o imagine care se suprapune

peste o alta imagine cand cursorul utilizatorului se afla deasupra ei. 0eti avea


16/16

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

efectul de rollover.

'. %lasati punctul de inserare acolo unde doriti sa apara imaginea rollover.

(. /electati obiectul 1ollover Image din bara Insert sau comanda 1ollover Image

din submeniul Interactive Image al meniului Insert

?. "pare caseta de dialog Insert 1ollover Image. Dati un nume imaginii in caseta

de sus

@. /electati ambele fisiere, cel cu imaginea initiala si cel cu imaginea rollover,

prin clic pe butoanele #rowse.

A. -aracati caseta de validare %reload 1ollover Image daca doriti ca imaginea

rollover sa fie descarcata in copia cache din browserul utilizatorului. "vand 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.

9. "daugati o legatura la imaginea rollover dand clic pe butonul #rowse sau

introducand 21*ul extern sau numele ancorei.

B. Dati clic pe butonul o&.

Teorie Macromedia Dreamweaver

Documents

Transcript of Teorie Macromedia Dreamweaver