Upload
bianca-stefan
View
263
Download
0
Embed Size (px)
Citation preview
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.
8/10/2019 Teorie Macromedia Dreamweaver
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.
8/10/2019 Teorie Macromedia Dreamweaver
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
8/10/2019 Teorie Macromedia Dreamweaver
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.
8/10/2019 Teorie Macromedia Dreamweaver
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.
8/10/2019 Teorie Macromedia 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
8/10/2019 Teorie Macromedia Dreamweaver
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/10/2019 Teorie Macromedia 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.
8/10/2019 Teorie Macromedia Dreamweaver
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+.
8/10/2019 Teorie Macromedia Dreamweaver
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.
8/10/2019 Teorie Macromedia Dreamweaver
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
8/10/2019 Teorie Macromedia Dreamweaver
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.
8/10/2019 Teorie Macromedia Dreamweaver
13/16
&alvarea pa"inii si previ%uali%area intr'un #rowser
Chiar daca Dreamweaver este un instrument W;/IW;
8/10/2019 Teorie Macromedia Dreamweaver
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;
8/10/2019 Teorie Macromedia Dreamweaver
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
8/10/2019 Teorie Macromedia Dreamweaver
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&.