Dreamweaver MX PDF

DREAMWEAVER
CUPRINS
Conversaţia 1. Creaţi pagini Web cu Dreamweaver MX................. 3
Dreamweaver MX – Dreamweaver, un editor de tip WYSIWYG ….…………… 3
Dreamweaver MX – Stabiliţi obiectivele site-ului dumneavoastră ……………. 4
Dreamweaver MX – Principalele componente Dreamweaver ..…................ 5
Dreamweaver 4 workspace, MX workspace – Spaţiul de lucru .................. 8
Dreamweaver MX – Temă …………………………………………………..……………… 27
Conversaţia 2. Creaţi un site Web cu Dreamweaver MX .............. 29

Dreamweaver MX – Creaţi un site nou .………………………………….……………. 29
Dreamweaver MX workspace, 4 workspace – Definiţi local site-ul
dumneavoastră …………………………………………………………………...……………. 30
Dreamweaver MX – Temă ……………………………………………………….…………. 46
Conversaţia 3. Introduceţi şi formataţi caracterele cu

Dreamweaver MX .................................................... 47
Dreamweaver 4 workspace, MX workspace – Introduceţi text ……………….. 47
Dreamweaver 4 workspace, MX workspace – Inseraţi caractere
speciale…………………………………………………………………………………………….. 63
Dreamweaver 4 workspace, MX workspace – Inseraţii caractere proprii
(X)HTML ……………………………………………………………………………………........ 70
Dreamweaver 4 workspace, MX workspace – Aplicaţi unui text formate
fizice şi logice …………………………………………………………............................ 76
Dreamweaver MX workspace – Inseraţi abrevieri şi acronime ……............. 93
Dreamweaver 4 workspace, MX workspace – Scrieţi un text cu exponent
sau cu indice …………………………………………………………………………………….. 97
Dreamweaver 4 workspace, MX workspace – Definiţi tipul de font .………… 105
Dreamweaver 4 workspace, MX workspace – Definiţi dimensiunea
fontului …………………………………………………………………………………………….. 110
Dreamweaver 4 workspace, MX workspace – Definiţi culorile ...……………… 115
Dreamweaver MX workspace – Creaţi propriile stiluri HTML .…….……………. 128
Dreamweaver MX – Temă ………………………………………………………………….. 135
Conversaţia 4. Creaţi şi formataţi paragrafele cu

Dreamweaver MX .................................................... 137
Dreamweaver 4 workspace, MX workspace – Creaţi un paragraf ……………. 137
Dreamweaver 4 workspace, MX workspace – Schimbaţi alinierea unui
paragraf …………………………………………………………………………................... 142
Dreamweaver 4 workspace, MX workspace – Treceţi la linia următoare
într-un paragraf …………………………………………………….………………………….. 152
Dreamweaver 4 workspace, MX workspace – Indentaţi un paragraf ……….. 156
Dreamweaver 4 workspace, MX workspace – Inseraţi un text
preformatat …..…...……………………………………………………………..……….……. 161
Dreamweaver 4 workspace, MX workspace – Creaţi un titlu ……................ 166
Dreamweaver 4 workspace, MX workspace – Creaţi liste cu simboluri
(simple), numerotate (ordonate) şi de definiţii ..……..……………………………. 173
Dreamweaver MX – Temă ……………………………………………………..…………… 202
Conversaţia 5. Inseraţi şi personalizaţi o linie orizontală cu

Dreamweaver MX .................................................... 203
Dreamweaver 4 workspace, MX workspace – Inseraţi o linie orizontală...... 203
Dreamweaver MX workspace – Coloraţi o linie orizontală …………………...... 208
Dreamweaver 4 workspace – Definiţi lungimea şi înălţimea unei linii
orizontale ………………………………………….……………………………………………… 209
Dreamweaver 4 workspace – Aliniaţi o linie orizontală ………..……..…………. 212
Dreamweaver MX workspace – Personalizaţi o linie orizontală …….…………. 215
Dreamweaver MX – Temă ……………………………………………………............... 217
Conversaţia 6. Creaţi şi utilizaţi foi de stiluri în cascadă cu

Dreamweaver MX .................................................... 219
Dreamweaver MX – Tipuri de stiluri CSS folosite în Dreamweaver ………….. 219
Dreamweaver 4 workspace, MX workspace – Creaţi stiluri CSS ………………. 220
Dreamweaver 4 workspace, MX workspace – Creaţi un stil CSS cu
opţiunea Make Custom Style (class) ..…….……………………………………………. 224
Dreamweaver 4 workspace, MX workspace – Aplicaţi un stil CSS (o clasă)
unui paragraf ...…………………………………………………………………………………. 233
Dreamweaver 4 workspace, MX workspace – Modificaţi un stil CSS (o
clasă) ………………………………………………………………………………………………. 237
Dreamweaver 4 workspace, MX workspace – Creaţi un stil CSS cu
opţiunea Redefine HTML Tag şi aplicaţi-l unui text ……….………….…………… 241
Dreamweaver 4 workspace, MX workspace – Modificaţi link-urile cu
selectorii CSS ……………………………………………………………………………………. 248
Dreamweaver 4 workspace, MX workspace – Creaţi şi aplicaţi o foaie de
stiluri externă …………………………………………………….……………………………… 256
Dreamweaver MX – Temă …………………………………………………..……………… 272
Conversaţia 7. Inseraţi imagini cu Dreamweaver MX ................... 273

Dreamweaver 4 workspace, MX workspace – Inseraţi o imagine ……………. 274
Dreamweaver 4 workspace, MX workspace – Aliniaţi orizontal o imagine…. 286
Dreamweaver 4 workspace, MX workspace – Aplicaţi o bordură unei
imagini …………………………………………………………………………………………….. 289
Dreamweaver 4 workspace, MX workspace – Definiţi un text de înlocuire
(substituţie) pentru o imagine ………………………………………………………..….. 292
Dreamweaver 4 workspace, MX workspace – Aliniaţi vertical o imagine în
raport cu un text …………………………………………….……………………………...... 295
Dreamweaver MX workspace – Inseraţi un spaţiu rezervat pentru o
imagine … în construcţie ………………………………………………………..………….. 302
Dreamweaver MX workspace – Plasaţi text în jurul unei imagini …………….. 304
Dreamweaver 4 workspace, MX workspace – Adăugaţi mai multe spaţii în
jurul unei imagini ……………………………………………………….……………………… 307
Dreamweaver 4 workspace, MX workspace – Aplicaţi o imagine de
background ………………………………………………………………………….............. 309
Dreamweaver 4 workspace, MX workspace – Convertiţi o imagine în
legătură ……………………………………………………………………………………………. 315
Dreamweaver 4 workspace, MX workspace – Creaţi o imagine cu zone
reactive …………………............................................................................. 321
Conversaţia 8. Creaţi legături cu Dreamweaver MX ...................... 329

Dreamweaver 4 workspace, MX workspace – Creaţi o legătură hipertext
către o altă pagină Web ….……………………………………….………………………… 329
Dreamweaver 4 workspace, MX workspace – Creaţi legături în aceeaşi
pagină Web ……………………………………………………………….……………………… 336
Dreamweaver 4 workspace, MX workspace – Creaţi o legătură externă
către un site Web, având ca suport o imagine ………………........................ 353
externă către un site Web ….…………………………………….………………………… 359
externă către o adresă e-mail …………………………………………………….……… 364
Dreamweaver 4 workspace, MX workspace – Modificaţi culoarea
legăturilor hipertext ………………………………………………………………..…………. 372
către o pagină care se deschide în propria sa fereastră …………………………. 377
Conversaţia 9. Creaţi tabele cu Dreamweaver MX ........................ 383

Dreamweaver 4 workspace, MX workspace – Creaţi un tabel ….…............. 384
Dreamweaver 4 workspace, MX workspace – Aliniaţi un tabel ……............. 393
Dreamweaver 4 workspace, MX workspace – Atribuiţi un titlu tabelului ….. 398
Dreamweaver 4 workspace, MX workspace – Aplicaţi o bordură tabelului... 408
Dreamweaver 4 workspace, MX workspace – Aliniaţi orizontal datele unui
tabel ………………………………………………………………………………................... 411
Dreamweaver 4 workspace, MX workspace – Aliniaţi vertical datele unui
tabel. Aplicaţii …………………………………………………………………………………… 415
Dreamweaver 4 workspace, MX workspace – Modificaţi spaţiul dintre
celulele unui tabel ………………………………………………..…………………………… 419
Dreamweaver 4 workspace, MX workspace – Modificaţi dimensiunile
liniilor unui tabel ……………………………………………..………………………………… 422
Dreamweaver 4 workspace, MX workspace – Modificaţi marginile
interioare ale celulelor unui tabel …..…………………………………….…………….. 429
Dreamweaver 4 workspace, MX workspace – Extindeţi o celulă pe mai
multe coloane sau linii …………………………………………………………............... 432
Dreamweaver 4 workspace, MX workspace – Aplicaţi o culoare
elementelor unui tabel ……………………………………………………………….......... 442
Dreamweaver 4 workspace, MX workspace – Aplicaţi o imagine de
background unui tabel sau unei celule a tabelului ….…………………………….. 444
Dreamweaver 4 workspace, MX workspace – Utilizaţi un tabel ca un
instrument de punere în pagină ….…………………………………………..…………. 449
Dreamweaver 4 workspace, MX workspace – Formataţi un tabel utilizând
modele predefinite …………………………………………………............................ 452
Dreamweaver 4 workspace, MX workspace – Creaţi un tabel în modul
Layout View …………………………………………………………………...................... 466
Dreamweaver MX – Temă ………………………………………………………............. 476
Conversaţia 10. Creaţi formulare cu Dreamweaver MX ................ 477

Dreamweaver 4 workspace, MX workspace – Creaţi un formular…………….. 477
Dreamweaver 4 workspace, MX workspace – Creaţi un buton pentru
expedierea (submit) unui formular …………………………………………….……….. 485
Dreamweaver 4 workspace, MX workspace – Creaţi un buton pentru
resetarea (reset) unui formular …..…………………………………………….……….. 491
Dreamweaver 4 workspace, MX workspace – Inseraţi o zonă simplă de
text …………………………………………………………………………………..…………….. 495
Dreamweaver 4 workspace, MX workspace – Inseraţi o zonă de text
multilinie ………………………………………………………………………………………….. 503
Dreamweaver 4 workspace, MX workspace – Creaţi o casetă de validare… 508
Dreamweaver 4 workspace, MX workspace – Creaţi un buton radio……….. 516
Dreamweaver 4 workspace, MX workspace – Creaţi un meniu derulant ….. 526
Dreamweaver MX – Temă ……………………………………………………..…………… 542
Conversaţia 11. Inseraţi obiecte cu Dreamweaver MX ................. 543

Dreamweaver 4 workspace, MX workspace – Inseraţi animaţii Flash şi
Shockwave …………………………………………………………………………............... 543
Dreamweaver 4 workspace, MX workspace – Inseraţi un text în format
Flash ……………………………………………………………………….………………………. 550
Dreamweaver 4 workspace, MX workspace – Creaţi un buton de navigare
Flash …………………………………………………………………….…………………………. 555
Dreamweaver 4 workspace, MX workspace – Inseraţi un obiect Fireworks
şi data zilei …………………………………………………………….…………………………. 560
Dreamweaver 4 workspace, MX workspace – Inseraţi un applet Java……… 567
Dreamweaver 4 workspace, MX workspace – Inseraţi obiecte care
necesită un plugin ……………………………………………………………………………… 572
Conversaţia 12. Creaţi cadre cu Dreamweaver MX ....................... 585

Dreamweaver MX – Apreciaţi cadrele Dreamweaver …..……….……………….. 585
Dreamweaver 4 workspace, MX workspace – Creaţi cadre care se
afişează în coloane ……………………………………………………………………………. 587
Dreamweaver 4 workspace, MX workspace – Inseraţi o pagină (X)HTML
într-un cadru …………………………………………………….…………………………...... 595
Dreamweaver 4 workspace , MX workspace – Creaţi cadre care se
afişează în linii …………………………………………………………………………….……. 601
Dreamweaver 4 workspace, MX workspace – Salvaţi setul de cadre………… 605
Dreamweaver 4 workspace, MX workspace – Numiţi un cadru ………….…… 608
Dreamweaver 4 workspace , MX workspace – Creaţi o legătură (link)
către un cadru ………………………………………………….………………………......... 612
Dreamweaver 4 workspace , MX workspace – Formataţi bordurile
cadrelor ………………………………………………………………..…………………………. 617
Dreamweaver 4 workspace , MX workspace – Controlaţi prezenţa sau
absenţa barelor de defilare ale cadrelor …..……………………….……………...... 620
Dreamweaver MX – Temă ………………………………………………..……………… 627
Conversaţia 13. Creaţi straturi cu Dreamweaver MX .................... 629

Dreamweaver 4 workspace, MX workspace – Creaţi un strat (layer)……….. 629
Dreamweaver 4 workspace, MX workspace – Modificaţi dimensiunile şi
poziţia unui strat. Aplicaţii …..…………………………………………………….……….. 638
Dreamweaver 4 workspace, MX workspace – Modificaţi vizibilitatea şi
ordinea de suprapunere a straturilor. Aplicaţii ………………………………………. 648
Dreamweaver 4 workspace, MX workspace – Controlaţi conţinutul unui
strat ………………………………………………………………………………………………… 656
Dreamweaver 4 workspace, MX workspace – Creaţi straturi imbricate
(nested) ………………………………………………………………….……………………….. 662
Dreamweaver MX – Temă ………………………………………………………….…...... 669
Conversaţia 14. Creaţi biblioteci cu Dreamweaver MX ................. 671

Dreamweaver MX – Bibliotecile de obiecte ……………….………………….….…… 671
Dreamweaver 4 workspace, MX workspace – Creaţi un element de
bibliotecă ………………………………………………………………………………….……… 675
Dreamweaver 4 workspace, MX workspace – Inseraţi un element de
bibliotecă ………………………………………………………………………………….……… 682
Dreamweaver 4 workspace, MX workspace – Modificaţi un element de
bibliotecă. Aplicaţii …………………………………………………………………………….. 688
Dreamweaver 4 workspace, MX workspace – Creaţi un model de pagină…. 695
Dreamweaver 4 workspace, MX workspace – Definiţi regiunile editabile
ale unui model. Aplicaţii ….…………………………………………......................... 703
Dreamweaver MX workspace – Utilizaţi regiunile facultative ale unui
model …………………………………………………………………………....................... 715
Dreamweaver MX workspace – Definiţi regiunile repetabile ale unui
model. Aplicaţii …………………………………………………………………………………. 724
Dreamweaver 4 workspace, MX workspace – Exportaţi structuri de date
în format XML …………………………………………………………………………………… 732
Dreamweaver MX – Temă ………….………………………….………………………..... 739
Conversaţia 15.Creaţi comportamente cu Dreamweaver MX ....... 741

Dreamweaver MX workspace - Comportamente Dreamweaver ……............ 741
Dreamweaver 4 workspace, MX workspace – Creaţi comportamentul
Open Browser Window ……………………………………………………………..……….. 745
Swap Image …………………………………………….……………………………..…….…. 752
Set Text of Status Bar. Aplicaţie ……..………………………………………………….. 759
Validate Form. Aplicaţii ………………………………………………………………………. 766
Set Text of Layer. Aplicaţii ..……………………………………………………………….. 772
Set Text of Frame ……………………………………………………………………………… 778
Dreamweaver MX – Temă …………………………………………………..…………..... 785
Conversaţia 16. Creaţi scenarii cu Dreamweaver MX ................... 787

Dreamweaver MX workspace – Creaţi un scenariu ..…………………………...... 787
Dreamweaver MX workspace – Creaţi o animaţie simplă ….……………………. 790
Dreamweaver MX workspace – Creaţi o animaţie curbă. Aplicaţie ............. 795
Dreamweaver MX workspace – Creaţi o animaţie complexă. Aplicaţii ……… 798
Dreamweaver MX workspace – Declanşaţi sau opriţi un scenariu cu
ajutorul unui comportament………………………………………………………………… 804
Bibliografie ....................................................................................... 807

Conversaţia 1
Creaţi pagini Web cu Dreamweaver MX

•••••••••••••••••••••••••••••••••••••••••
În această conversaţie:
f Dreamweaver MX – Dreamweaver, un editor de tip WYSIWYG
f Dreamweaver MX – Stabiliţi obiectivele site-ului dumneavoastră
f Dreamweaver MX – Principalele componente Dreamweaver
f Dreamweaver 4 workspace, MX workspace – Spaţiul de lucru
f Dreamweaver MX – Temă
•••••••••••••••••••••••••••••••••••••••••
Dreamweaver, un editor de tip

Dreamweaver MX
WYSIWYG
Acum, după ce aţi creat mai multe documente (X)HTML şi după ce aţi
înţeles bine principiile de bază (X)HTML puteţi trece la utilizarea unui
editor de tip WYSIWYG („What You See Is What You Get”) pentru
crearea paginilor Web.
Sunt câţiva ani de când editoarele de tip WYSIWYG au inundat piaţa dar
… din păcate numai câteva au rezistat în timp.
Macromedia Dreamweaver este unul dintre acestea, la ora actuală fiind

cel mai performant soft pentru crearea site-urilor Web.
Să mă explic.
4
Dreamweaver generează cod (X)HTML foarte apropiat de standardul
impus de W3C, este complet şi la zi cu noile tehnologii Internet.
În plus, Dreamweaver poate genera şi cod D-HTML; recunoaşte foile de

stiluri CSS1 şi CSS-P.
Macromedia Dreamweaver MX (ultima versiune, după Dreamweaver 4)

integrează toate funcţiile necesare creării site-urilor dinamice cu ajutorul
tehnologiilor: ASP, ASP.net, ColdFusion Markup Language (CFML), JSP
sau PHP.
Remarci:
9 Dreamweaver dispune de un editor HTML puternic şi de o interfaţă WYSIWYG
tot atât de puternică.
9 Dreamweaver este respectuos! El nu alterează codul dumneavoastră HTML,
ceea ce i-a atras popularitatea.
9 Dreamweaver a reuşit acolo unde alţii au dat greş!
9 Funcţiile de editare vizuală Dreamweaver permit crearea rapidă a paginilor
Web fără a scrie nici-o linie de cod HTML (bucuria de moment a debutanţilor
care nu au cunoştinţe HTML!). Dacă doriţi să faceţi apel la codificarea
manuală (vor exista astfel de situaţii!), Dreamweaver vă pune la dispoziţie,
după caz numeroase instrumente.
9 Dacă aţi utilizat alte aplicaţii pentru crearea site-urilor Web – FrontPage, de
exemplu sunteţi liber să treceţi la Dreamweaver pentru a dezvolta site-ul
dumneavoastră.
9 Dreamweaver permite vizualizarea paginilor Web în diverse navigatoare, pe
diferite platforme, dar importul de fişiere create cu alte programe poate fi o
operaţie destul de pretenţioasă.
9 Dreamweaver a primit numeroase distincţii internaţionale fiind de departe
numărul 1 în top-ul aplicaţiilor Web.
Stabiliţi obiectivele site-ului

Dreamweaver MX
dumneavoastră
Înainte de a vă lansa în construcţia site-ului dumneavoastră, încercaţi să

răspundeţi la cât mai multe din întrebările listate mai jos. La câteva
dintre ele puteţi răspunde pe loc; pentru celelalte veţi găsi răspunsul
puţin mai târziu. Succes!
9 Care sunt obiectivele site-ului dumneavoastră?

5
9 Cine sunt vizitatorii site-ului dumneavoastră?
9 Cine va lucra pe site-ul dumneavoastră? Câte persoane cu sarcini
precise în dezvoltarea şi întreţinerea site-ului trebuie să coordonaţi?
9 Ce proceduri veţi utiliza pentru colectarea textului şi a imaginilor ce
aparţin site-ului dumneavoastră?
9 Care este modul de organizare al fişierelor site-ului dumneavoastră?
9 Ce fişiere multimedia – Flash, real Audio va conţine site-ul
dumneavoastră?
9 Care sunt funcţiile interactive pe care doriţi să le conţină site-ul
dumneavoastră?
9 Care sunt aplicaţiile de care aveţi nevoie pentru a obţine funcţii
particulare (de exemplu Macromedia Flash pentru animaţii vectoriale)?
9 Care este sistemul de navigare ce se adaptează cel mai bine site-ului
dumneavoastră?
9 Cum veţi administra extinderile ulterioare ale site-ului dumneavoastră?
Principalele componente
Dreamweaver MX
Dreamweaver
La prima privire, Dreamweaver poate părea descurajant! Nu se poate

spune că totul vorbeşte de la sine! Funcţiile se ascund în panouri, în
bare de instrumente şi în cutii de dialog. A crea o pagină Web în
Dreamweaver este … un joc de copii! Vă veţi convinge că nu exagerez
cu nimic! Să trecem la treabă!
Deschideţi Dreamweaver MX (via Start Programs Macromedia

Macromedia Dreamweaver MX) şi analizaţi caseta de dialog care se
afişează (figura 1.1).
6
Figura 1.1
Sub Windows, Dreamweaver MX vă propune două prezentări:
9 un spaţiu de lucru integrat într-o singură fereastră care conţine

toate elementele (Dreamweaver MX Workspace);
9 un spaţiu de lucru flotant care seamănă cu cel de la versiunea 4

Dreamweaver (Dreamweaver 4 Workspace).
Atunci când lansaţi Dreamweaver pentru prima dată va trebui să

selectaţi una din opţiunile următoare:
9 Dreamweaver MX Workspace – spaţiu de lucru integrat care

utilizează interfaţa MDI (Multiple Document Interface) în care
toate ferestrele documentului şi toate panourile sunt reunite
într-o fereastră mare a aplicaţiei, grupurile de panouri fiind
ancorate în dreapta. Aceasta este prezentarea recomandată
majorităţii utilizatorilor.
9 Dreamweaver MX Workspace, Home Site/Coder-Style – acelaşi

spaţiu de lucru integrat, dar grupurile de panouri sunt ancorate
7
în stânga, într-o prezentarea similară cu aceea utilizată de
Macromedia HomeSite şi Macromedia ColdFusion Studio.
Ferestrele documentului se afişează în mod Code HTML. Pentru
a alege această prezentare, selectaţi opţiunea Dreamweaver MX
Workspace şi apoi selectaţi opţiunea Home Site/Coder Style.
9 Dreamweaver 4 Workspace – spaţiul de lucru utilizat în

Dreamweaver 4, unde fiecare document se afişează într-o
fereastră flotantă individuală. Grupurile de panouri sunt
ancorate împreună, dar ele nu sunt ancorate în aceeaşi
fereastră a aplicaţiei. Această prezentare este recomandată
numai utilizatorilor Dreamweaver 4 care preferă conservarea
unui spaţiu de lucru care le este familiar.
Remarcă. Dacă doriţi să schimbaţi ulterior spaţiul de lucru, executaţi clic pe: Edit
Preferences categoria General Change Workspace….
Evident, spaţiul de lucru este locul în care dumneavoastră elaboraţi

paginile Web. El constă dintr-o fereastră principală care afişează pagina
Web şi o serie de panouri (flotante) şi de ferestre care vă procură toate
instrumentele necesare activităţii de creare pagini Web. Spaţiul de lucru
Dreamweaver are în structura sa patru componente de bază:
9 fereastra documentului;
9 panourile flotante;
9 bara de meniuri;
9 bara de stare.
Remarcă. În cadrul acestei lucrări, vom prezenta Dreamweaver MX (sub Windows), după
cum urmează:
9 Dreamweaver 4 workspace.
9 Dreamweaver MX workspace.
8
Dreamweaver 4 Spaţiul de lucru

workspace
Fereastra documentului
În caseta de dialog Workspace Setup (figura 1.2) selectaţi opţiunea
Dreamweaver 4 Workspace şi în continuare executaţi clic pe butonul OK
(figura 1.2).
Figura 1.2
Pe ecranul monitorului dumneavoastră se afişează fereastra

documentului, panourile flotante (Insert, inspectorul de proprietăţi,
Launcher), Panel Group, bara de meniuri, bara de stare (figura 1.3).
Fereastra documentului (o pagină albă al cărei cod HTML este

rudimentar) este încărcată în spaţiul de lucru Dreamweaver 4. Aici este
locul în care introduceţi text, imagini şi elemente care se afişează
simultan în browser-ele Web ale vizitatorilor dumneavoastră.
9
Figura 1.3
Remarcă. Dreamweaver include opţiuni care permit crearea paginilor Web în funcţie de
navigatoarele de care dispuneţi.
Panourile flotante
Panourile flotante Dreamweaver 4 workspace oferă un acces rapid la
cele mai importante funcţii Dreamweaver. Cele trei panouri (Insert,
Properties, Launcher) sunt elemente esenţiale ale interfeţei
Dreamweaver. În mod implicit ele sunt afişate deasupra ferestrei
documentului dar puteţi modifica această opţiune via Edit Preferences
Categoria Panels. De asemenea puteţi deplasa şi combina cele trei
panouri. Toate panourile pot fi accesate din meniul Window. Dacă doriţi,
puteţi masca toate panourile afişate via View Hide panels.
Panoul Insert conţine icon-uri pentru crearea elementelor (obiectelor)

HTML: imagini, tabele, caractere speciale, formulare etc. În partea
superioară a panoului se află un meniu derulant care permite selectarea
uneia dintre cele unsprezece categorii de panouri: Common, Text,
10
Tables, Frames, Forms, Templates, Characters, Media, Head, Script,
Application (figura 1.4).
Figura 1.4
Inspectorul de proprietăţi permite vizualizarea, modificarea

proprietăţilor unui element al paginii (text, tabel, imagine etc.).
Inspectorul de proprietăţi se identifică puţin mai greu întrucât numele
său nu figurează în bara de titlu a panoului.
În figura 1.5 a fost selectată imaginea situată în colţul din stânga sus.
Inspectorul de proprietăţi afişează instantaneu caracteristicile sau
atributele acestei imagini (lungime, lăţime, aliniere, URL-ul etc.).
11
Figura 1.5
Remarci:
9 Puteţi lăsa deschis panoul Properties pe toată durata lucrului.
9 Inspectorul de proprietăţi nu permite accesarea tuturor atributelor unui
element (vezi opţiunea Page Properties…, din meniul Modify) dar puteţi
parametriza atributele cele mai des folosite.
9 Pentru a afişa mai multe atribute ale obiectului selectat, executaţi clic pe
butonul situat în colţul din dreapta jos al panoului Properties.
Panoul Launcher conţine icon-uri (figura 1.6) care permit accesul

rapid la următoarele funcţii Dreamweaver 4 workspace: Show Sites
( ), Show Assets ( ), Show CSS Style ( ), Show Behaviors ( ),
Show History ( ), Show Bindings ( ), Show Server Behaviors ( ),
Show Components ( ), Show Databases ( ).
Figura 1.6
Remarcă. Toate funcţiile afişate în panoul Launcher vor fi studiate în cadrul acestei
lucrări (vezi conversaţiile următoare).
12
Bara de meniuri
În partea de sus a ferestrei principale Dreamweaver 4 workspace se
găseşte bara de meniuri (figura 1.7).
Figura 1.7
Remarcă. Meniurile afişate în bara de meniuri (File, Edit, View, Insert, Modify, Text,
Commands, Site, Window, Help) permit accesarea tuturor funcţiilor Dreamweaver 4
workspace (unele dintre ele le găsiţi în panourile flotante; anumite funcţii nu sunt
disponibile decât în meniuri).
Bara de stare
Bara de stare se afişează la baza ferestrei principale Dreamweaver 4
workspace (figura 1.8). Ea permite afişarea următorilor parametrii: codul
HTML (colţul din stânga), dimensiunea ferestrei şi a documentului,
timpul de încărcare şi Mini-Launcher (colţul din dreapta al barei de
stare).
Figura 1.8
Remarcă. În mod implicit, imediat sub bara de meniuri apare bara de instrumente (figura
1.9) care permite accesul rapid la un mare număr de funcţii Dreamweaver.
Figura 1.9
13
Dreamweaver MX Spaţiul de lucru

workspace
Reveniţi la vechea interfaţă

Pentru a schimba spaţiul de lucru Dreamweaver respectaţi procedura
descrisă în continuare.
1. Executaţi clic pe Edit Preferences (figura 1.10).
Figura 1.10
Remarcă. Se deschide caseta de dialog Preferences.
2. În caseta de dialog Preferences, în categoria General executaţi

clic pe Change Workspace.
14
Figura 1.11
3. În caseta de dialog care se afişează (figura 1.12) selectaţi

opţiunea Dreamweaver MX Workspace, iar în continuare
executaţi clic pe butonul OK.
Figura 1.12
15
Remarcă. În caseta de avertisment (Macromedia Dreamweaver MX) executaţi clic pe OK.
Modificarea este aplicată după închiderea apoi deschiderea aplicaţiei Dreamweaver.
Pe ecranul monitorului dumneavoastră, în spaţiul de lucru Dreamweaver

MX se afişează:
9 fereastra documentului (figura 1.13).
Figura 1.13
9 fereastra Welcome (figura 1.14) care furnizează indicaţii privind

configurarea spaţiului de lucru (dacă este cazul!).
Figura 1.14
16
9 bara de meniuri (figura 1.15).
Figura 1.15
9 grupul de panouri Insert (figura 1.16).
Figura 1.16
9 panoul Properties (Inspectorul de proprietăţi) situat în afara

spaţiului de lucru Dreamweaver MX (figura 1.17).
Figura 1.17
9 bara de instrumente standard (figura 1.18).
Figura 1.18
9 grupurile de panouri închise: Design, Code, Application,

Answers; grupul de panouri deschis Files (figura 1.19). Panoul
Site (figura 1.19) permite administrarea fişierelor şi a dosarelor
site-ului dumneavoastră.
Figura 1.19
17
9 bara de stare situată la baza ferestrei principale Dreamweaver
MX workspace (figura 1.20).
Figura 1.20
Fereastra documentului
Fereastra documentului corespunde paginii Web curente.
Iată cum … descoperiţi fereastra documentului Dreamweaver MX.
1. Executaţi clic pe Untitled 2 pentru a schimba pagina (figura

1.21).
Figura 1.21
2. Executaţi clic în interiorul paginii Untitled 2 şi introduceţi: Un

text oarecare! (figura 1.22).
18
Figura 1.22
3. Afişaţi cele două ferestre în cascadă, via Window Cascade

(figura 1.23).
Figura 1.23
19
Grupul de panouri Insert
Grupul de panouri Insert permite inserarea în pagină a unei serii de
obiecte diverse: imagini, tabele, rollover-e, animaţii, caractere speciale,
formulare etc. Grupul de panouri Insert conţine 12 sub-panouri, fiecare
dintre ele conţinând propriul set de icon-uri pentru diferite funcţii:
Common, Layout, Text, Tables, Frames, Forms, Templates, Characters,
Media, Head, Script şi Application. Dreamweaver face referiri la aceste
sub-panouri prin numele lor complet, ca de exemplu: Insert Table sau
Insert Form.
În figura 1.24 se prezintă grupul de panouri Insert pentru sub-panourile

Common, Text şi Media.
Figura 1.24
Remarci:
9 Interfaţa utilizator integrată în Windows este o schimbare capitală în spaţiul
de lucru Dreamweaver MX. Desigur puteţi utiliza şi panourile flotante
(Dreamweaver 4) dar Macromedia vă recomandă (şi eu) să optaţi pentru noua
interfaţă.
9 Panoul (grupul de panouri) Insert oferă un acces rapid la obiecte şi
comportamente; este în întregime extensibil.
9 Aspectul panoului Insert poate fi personalizat. Puteţi afişa butoanele cu
icon-uri sau numai cu text sau ambele, via Edit Preferences categoria
General Insert panel: Icons only, Icons and text sau Text only.
Aplicaţii
Afişaţi panoul Answers.
Iată care este procedura pe care vă invităm s-o urmaţi.
1. Executaţi clic pe Window Answers.

20
Remarcă. Se afişează panoul Answers (figura 1.25).
Figura 1.25
2. Executaţi clic pe numele panoului pentru a-l reduce.
3. Executaţi clic pe numele panoului pentru a-l dezvolta.
Închideţi panoul Answers.
1. Executaţi clic pe butonul (figura 1.26).
Figura 1.26
21
2. În meniul local ( ) executaţi clic pe Close Panel Group (figura
1.27).
Figura 1.27
#_________________________________________________________
___________________________________________________________
___________________________________________________________
___________________________________________________________
___________________________________________________________
Afişaţi sau mascaţi rapid panourile.
1. Acţionaţi tasta F4.
Remarcă. Panourile sunt mascate (figura 1.28).
Figura 1.28
2. Acţionaţi tasta F4 pentru a afişa din nou panourile.
Remarcă. Pentru a masca sau afişa rapid panourile din dreapta spaţiului de lucru apăsaţi
butoanele sau .
Grupaţi panourile Answers şi Files.
1. Selectaţi panoul Answers care se regrupează cu Files (figura 1.29).

22
Figura 1.29
2. În panoul Answers, executaţi clic pe butonul (figura 1.30).
Figura 1.30
23
3. Executaţi clic pe Group Answers with apoi pe numele panoului Files
(figura 1.31).
Figura 1.31
Remarcă. Panourile Answers şi Files sunt regrupate (figura 1.32).
Figura 1.32
Remarcă. Fiecare panou posedă propriul său sub-panou.

24
Panoul Properties (Inspectorul de proprietăţi)
În Dreamweaver MX workspace, Inspectorul de proprietăţi (Properties)
este situat la baza paginii şi nu mai acoperă spaţiul de lucru. El afişează
proprietăţile (atributele) elementului selectat.
Remarcă. În Dreamweaver MX workspace, Inspectorul de proprietăţi se identifică foarte

uşor întrucât numele său, Properties figurează în bara de titlu a panoului.
În figura 1.33 Inspectorul de proprietăţi afişează atributele tabelului

HTML selectat.
Figura 1.33
Remarci:
9 Panoul Launcher este acum situat în colţul inferior dreapta al spaţiului de
lucru, dar poate fi deplasat (figura 1.34).
Figura 1.34
9 Panoul Launcher conţine următoarele icon-uri: Show Sites ( ), Show

Assets ( ), Show CSS Style ( ), Show Behaviors ( ), Show History
( ), Show Bindings ( ), Show Server Behaviors ( ), Show
Components ( ), Show Databases ( ).
9 Ultimele funcţii: Show Server Behaviors, Show Components şi Show
Databases sunt importante dacă doriţi să legaţi site-ul dumneavoastră la o
bază de date.
25
Bara de meniuri
Bara de meniuri permite accesarea tuturor funcţiilor Dreamweaver MX
workspace. Meniurile din bara de meniuri au următoarele denumiri: File,
Edit, View, Insert, Modify, Text, Commands, Site, Window, Help.
Bara de stare
Bara de stare permite afişarea următorilor parametrii: codul HTML,
dimensiunea ferestrei şi a documentului, timpul de încărcare al paginii şi
lansatorul (figura 1.35).
Figura 1.35
Remarci:
9 Selectorul de tag-uri vă permite să ştiţi unde sunteţi în codul HTML; asociat
cu Quick Tag Editor puteţi modifica rapid codul pentru a optimiza pagina
dumneavoastră Web.
9 Dimensiunea ferestrei vă permite să schimbaţi rapid dimensiunea acesteia.
9 Atenţie la timpii de încărcare ai paginilor Web! Vizitatorii dumneavoastră nu
au timp să aştepte!
Aplicaţie
Afişaţi bara de instrumente.
1. Executaţi clic pe View Toolbars (figura 1.36).
2. Executaţi clic pe numele barei (Standard), figura 1.36.

26
Figura 1.36
Remarcă. Puteţi schimba poziţia barei de instrumente, glisând bara (figura 1.37).
Figura 1.37
27
Dreamweaver MX Temă
Testaţi-vă cunoştinţele
1. Prezentaţi argumentele care au stat la baza alegerii Dreamweaver MX.
2. Care sunt componentele de bază ale spaţiului de lucru Dreamweaver.
3. De ce utilizăm Dreamweaver 4 workspace?
4. Descrieţi pe scurt: panoul Insert, inspectorul de proprietăţi, panoul

Launcher, bara de meniuri şi bara de stare din Dreamweaver 4
workspace.
5. Precizaţi rolul şi structura grupului de panouri Insert din Dreamweaver

MX workspace.
6. Cum afişaţi/mascaţi rapid panourile: Design, Code, Application, Files,

Answers?
Vizitaţi site-urile
9 www.macromedia.com
9 www.djtracyyoung.com
Conversaţia 2
Creaţi un site Web cu Dreamweaver MX

•••••••••••••••••••••••••••••••••••••••••
f Dreamweaver MX – Creaţi un site nou
f Dreamweaver MX workspace – Definiţi local site-ul dumneavoastră
f Dreamweaver 4 workspace – Definiţi local site-ul dumneavoastră
•••••••••••••••••••••••••••••••••••••••••
Dreamweaver MX Creaţi un site nou
Ştiu că sunteţi nerăbdători să începeţi să lucraţi la prima pagină Web cu

Dreamweaver, dar este bine să mai aşteptaţi … o conversaţie în care
veţi învăţa cum să creaţi local un site nou, urmând ca după aceea pe
structura site-ului creat să stocaţi paginile proprii. Merită acest efort
credeţi-mă, chiar dacă la început site-urile dumneavoastră nu sunt mari
dar, cu timpul, cu siguranţă ele vor creşte ca orice lucru-n viaţă:
copăcel, copăcel!
Este bine să începeţi crearea unui site direct pe calculatorul

dumneavoastră, în mod local. Desigur aceasta nu este decât o primă
etapă urmând apoi să-l publicaţi şi nu doar atât.
Remarci:
9 Fiecare site pe care îl creaţi cu Dreamweaver trebuie să fie definit.
30
9 În momentul definirii unui site nou, trebuie să creaţi pe hard-discul
dumneavoastră un folder, numit folder rădăcină local (Local Root Folder) în
care vor fi stocate toate fişierele pe care le creaţi (documente HTML, imagini,
scripturi, animaţii etc.).
9 Pentru crearea site-ului dumneavoastră cu Macromedia Dreamweaver MX
folosiţi două metode: o metodă elementară (Basic) şi o metodă avansată
(Advanced) pe care le puteţi aplica atât pentru Dreamweaver MX Workspace
cât şi pentru Dreamweaver 4 Workspace.
Şi acum să trecem la treabă!
Dreamweaver MX Definiţi local site-ul dumneavoastră

workspace
Utilizaţi categoria Local Info

Macromedia Dreamweaver MX propune două soluţii pentru crearea
site-ului dumneavoastră: o metodă elementară şi o metodă avansată.
Remarcă. Cele două metode se aplică pentru:

9 Dreamweaver MX Workspace;
9 Dreamweaver 4 Workspace.
Metoda elementară (BASIC)

Iată care este procedura pe care vă invităm s-o urmaţi dacă aţi ales
metoda elementară pentru crearea site-ului dumneavoastră, cu
Dreamweaver MX workspace.
1. Executaţi clic pe Site New Site.
Remarcă. Se deschide caseta de dialog Site Definition for… (figura 2.1).

31
Figura 2.1
2. Activaţi zona Basic (figura 2.2).
Figura 2.2
32
3. Introduceţi de la tastatură, în zona What would you like to
name your site? numele site-ului dumneavoastră (figura 2.3).
Figura 2.3
4. Executaţi clic pe butonul Next (figura 2.4).
Figura 2.4
5. Răspundeţi cu No (figura 2.5) la întrebarea pe care

Dreamweaver v-o adresează în continuare: Do you want to
work with a server technology such as ColdFusion, ASP.NET,
ASP, JSP, or PHP? (Doriţi să utilizaţi o tehnologie de tip server:
ASP Java Script, ASP VB Script, …, PHP?).
Figura 2.5
6. Executaţi clic pe butonul Next.

33
7. Indicaţi modul de lucru: local (opţiunea cea mai eficace) sau
direct pe server (nu vă recomandăm această opţiune), figura
2.6.
Figura 2.6
8. Executaţi clic pe pentru a identifica folder-ul site-ului local

(figura 2.7).
Remarcă. Se deschide caseta de dialog Choose Local Root Folder for Site Site web:
Figura 2.7
9. Selectaţi folder-ul local (figura 2.8) şi executaţi clic pe butonul

Select.
34
Figura 2.8
Remarcă. Dacă folder-ul nu există, executaţi clic pe pentru a-l crea.
10. În caseta de dialog Site Definition for Site web executaţi clic pe
butonul Next.
11. Alegeţi tipul de conexiune la server. Pentru moment optaţi

pentru None (figura 2.9).
Figura 2.9
12. Executaţi clic pe butonul Next.
Remarcă. În caseta de dialog Site Definition for Site web se afişează un rezumat al
tuturor parametrilor site-ului dumneavoastră (figura 2.10).
35
Figura 2.10
13. În caseta de dialog Site Definition for Site web executaţi clic pe
butonul Done.
Remarcă. În grupul de panouri Files, în zona Site puteţi vizualiza noul dumneavoastră
site (figura 2.11).
Figura 2.11
36
Metoda avansată (Advanced)
Iată care este procedura pe care trebuie s-o urmaţi dacă aţi ales metoda
avansată pentru crearea site-ului dumneavoastră cu Dreamweaver MX.
2. În caseta de dialog Site Definition for…, care se deschide

activaţi zona Advanced (figura 2.12).
Figura 2.12
3. Executaţi clic pe una din categoriile afişate (figura 2.13):
9 Local Info;
9 Remote Info;
9 Testing Server;
37
9 Cloaking;
9 Design Notes;
9 Site Map Layout;
9 File View Columns.
Figura 2.13
Remarcă. Pentru moment, numai categoria Local Info ne interesează (figura 2.14).
4. Modificaţi opţiunile corespunzătoare categoriei Local Info. În

figura 2.14 sunt listate toate opţiunile pentru categoria Local
Info: Site Name, Local Root Folder, Default Images Folder,
HTTP Address, Cache.
Figura 2.14
5. În caseta Site Definition, executaţi clic pe butonul OK.

38
Utilizaţi categoriile: Remote Info, Design Notes, Site Map
Layout, File View Columns
Identificaţi în caseta de dialog Site Definition for Site web următoarele
şase categorii:
9 Categoria Remote Info (vezi Dreamweaver 4 workspace).
9 Categoria Testing Server permite specificarea unui server utilizat

numai pentru dezvoltare, etapă necesară în procesul de creare a unui
site Web care utilizează funcţiile UltraDev ale Dreamweaver-ului cu o
bază de date.
9 Categoria Cloaking permite excluderea tuturor folder-elor şi fişierelor

specifice operaţiilor efectuate în cadrul site-ului ceea ce înseamnă că
folder-ele şi fişierele proiectate nu pot fi nici alterate nici descărcate în
site. Această funcţie este practică dacă doriţi să conservaţi diferite
secţiuni ale unui site fără ca ele să poată fi vizibile vizitatorilor
dumneavoastră.
9 Categoria Design Notes (vezi Dreamweaver 4 workspace).
9 Categoria Site Map Layout (vezi Dreamweaver 4 workspace).
9 Categoria File View Columns (vezi Dreamweaver 4 workspace).
Remarci:
9 Nu uitaţi să salvaţi toate fişierele care alcătuiesc site-ul dumneavoastră Web
în folder-ul rădăcină local (Local Root Folder). Dreamweaver MX vă
avertizează de fiecare dată când doriţi să utilizaţi un fişier care nu se găseşte
în folder-ul local (figura 2.15).
Figura 2.15
39
9 Puteţi modifica parametrii unui site, via Site Edit Sites. În lista site-urilor
care se afişează, selectaţi site-ul corespunzător şi apoi executaţi clic pe unul
din butoanele: New, Edit, Duplicate, Remove, Export (permite salvarea tuturor
caracteristicilor site-ului într-un fişier XML), Import (permite crearea unui nou
site pornind de la caracteristicile altui site). În final, executaţi clic pe butonul
Done (figura 2.16).
Figura 2.16
9 Când creaţi mai multe site-uri, puteţi accesa pe oricare dintre acestea, via Site
Site Files.
Dreamweaver 4 Definiţi local site-ul dumneavoastră

workspace
Utilizaţi categoria Local Info

Iată care este procedura care trebuie urmată pentru crearea unui site cu
Macromedia Dreamweaver 4 workspace.
Remarcă. Se deschide caseta de dialog Site Definition (figura 2.17).

40
Figura 2.17
Remarcă. Pentru moment numai categoria Local Info vă interesează. Asiguraţi-vă că

aceasta este selectată (vezi figura 2.17).
2. Introduceţi de la tastatură, în zona Site Name numele noului

site. Acest nume este definit numai pentru dumneavoastră şi
pentru Dreamweaver 4! (figura 2.18).
Figura 2.18
3. În zona (câmpul) Local Root Folder (Folder-ul rădăcină local)

introduceţi calea de acces (figura 2.19) sau executaţi clic pe
41
icon-ul folder-ului aflat în partea dreaptă a zonei Local Root
Folder, (figura 2.20).
Figura 2.19
Figura 2.20
Remarcă. Se deschide caseta de dialog Choose Local Root Folder for Site … (figura
2.21).
Figura 2.21
42
4. Selectaţi folder-ul pe care doriţi să-l utilizaţi şi executaţi clic pe
Select. Calea pe care aţi ales-o către folder-ul rădăcină local se
va afişa în zona Local Root Folder (figura 2.22).
Figura 2.22
5. Activaţi butonul Refresh Local File List Automatically pentru ca

Dreamweaver să actualizeze în mod automat lista noilor pagini
introduse în site-ul dumneavoastră (figura 2.23).
Figura 2.23
6. Activaţi opţiunea Enable Cache (figura 2.24).
Figura 2.24
Remarcă. Opţiunea Enable Cache permite aplicaţiei Dreamweaver să creeze un fişier de

cache care ajută la administrarea site-ului, garantând că link-urile sunt actualizate în
mod permanent. Sfatul nostru: faceţi cum credeţi, dar utilizaţi această opţiune.
43
7. În caseta de dialog Site Definition for… executaţi clic pe butonul
OK.
Utilizaţi categoriile: Remote Info, Design Notes, Site Map

Layout, File View Columns
Identificaţi în caseta de dialog Site Definition for… următoarele patru
categorii: Remote Info, Design Notes, Site Map Layout, File View
Columns.
9 Dreamweaver dispune de funcţii FTP care permit descărcarea

paginilor Web pe un server Web dedicat. În caseta de dialog Site
Definition for…, categoria Remote Info introduceţi informaţiile de
conexiune corespunzătoare (figura 2.25). Când lucraţi în grup, utilizaţi
opţiunea de extragere şi arhivare pentru a cunoaşte în orice moment
evoluţia site-ului dezvoltat de mai multe persoane.
Figura 2.25
44
9 Utilizaţi categoria Design Notes (note de concepţie). În caseta de
dialog Site Definition for…, categoria Design Notes introduceţi
informaţiile care controlează modul în care Dreamweaver utilizează
Design Notes (figura 2.26).
Figura 2.26
Utilizaţi Design Notes atunci când realizaţi un proiect de site Web în

echipă pentru a vă informa colegii (programatori, designeri, specialişti
în animaţii etc.) de activităţile prestate (modificări de script-uri, sursa
unei imagini etc.). Aceste note de concepţie (Design Notes) pot fi
asociate documentelor sau obiectelor incluse într-o pagină Web.
Design Notes funcţionează ca un tag de comentarii HTML fără ca
acesta să fie afişat în browser. Dar, Design Notes merge puţin mai
departe! Contrar tag-urilor de comentarii (COMMENT) HTML vizitatorii
nu pot vedea conţinutul Design Notes chiar dacă afişează fişierul sursă
HTML al paginii dumneavoastră. Puteţi descărca Design Notes pentru
a le partaja cu alte persoane care accesează server-ul dumneavoastră
sau puteţi preveni această operaţie pentru a păstra confidenţialitatea
comentariilor dumneavoastră.
9 Utilizaţi categoria Site Map Layout pentru a crea în mod automat o

hartă (diagramă) a tuturor paginilor Web din site-ul dumneavoastră.
Gestiunea site-ului devine în acest mod mult mai uşoară întrucât
45
beneficiaţi de o reprezentare grafică ierarhică a paginilor şi a
link-urilor. Site Map Layout este un instrument de mentenanţă a
fişierelor şi a folder-elor care structurează site-ul dumneavoastră. În
figura 2.27 se prezintă diagrama (harta) site-ului care conţine
structura cărţii pe care o lecturaţi.
Figura 2.27
9 Utilizaţi categoria File View Columns pentru a modifica fereastra

site-ului dumneavoastră. Atunci când lucraţi în echipă, informaţiile
provenind din Design Notes sau informaţiile personale pot fi listate în
fereastra folder-ului local adăugând după caz una sau mai multe
coloane.
46
1. Ce soluţii propune Dreamweaver MX pentru crearea site-ului
dumneavoastră?
2. Descrieţi pe scurt metoda elementară (BASIC) Dreamweaver MX

workspace pentru crearea unui site.
3. Descrieţi pe scurt metoda avansată (Advanced) Dreamweaver MX

workspace pentru crearea unui site.
4. Care este rolul categoriei Design Notes (caseta DE DIALOG Site

Definition for Site)?
9 www.macromedia.com/fr/support/
9 www.echomedium.com
9 www.projectseven.com/dreamweaver
Conversaţia 3
Introduceţi şi formataţi caracterele cu

Dreamweaver MX
•••••••••••••••••••••••••••••••••••••••••
f Dreamweaver 4 workspace, MX workspace – Introduceţi text
f Dreamweaver 4 workspace, MX workspace – Inseraţi caractere speciale
f Dreamweaver 4 workspace, MX workspace – Inseraţi caractere proprii
HTML
f Dreamweaver 4 workspace, MX workspace – Aplicaţi unui text formatele
fizice şi logice
f Dreamweaver MX workspace – Inseraţi abrevieri şi acronime
f Dreamweaver 4 workspace, MX workspace – Scrieţi un text cu exponent
sau cu indice
f Dreamweaver 4 workspace, MX workspace – Definiţi tipul de font
f Dreamweaver 4 workspace, MX workspace – Definiţi dimensiunea fontului
f Dreamweaver 4 workspace, MX workspace – Definiţi culorile
f Dreamweaver MX workspace – Creaţi propriile stiluri HTML
•••••••••••••••••••••••••••••••••••••••••
Dreamweaver 4 Introduceţi text

workspace
Acum, după ce site-ul dumneavoastră a fost definit puteţi începe să

creaţi pagini Web, pentru a-l umple.
48
Pentru a nu ne complica viaţa (care trebuie trăită şi nu consumată) vom
păstra aceeaşi aplicaţie pe care am folosit-o la prezentarea
(X)HTML-ului.
Bine aţi venit! Felicitări pentru răbdarea de a ne fi descoperit!
Iată care este procedura Dreamweaver 4 workspace pe care trebuie s-o

urmaţi.
1. Executaţi clic pe butonul Code and Design View din bara de

instrumente, pentru a vizualiza în acelaşi timp codul sursă
(HTML) şi pagina (figura 3.1).
Figura 3.1
Se obţine imaginea din figura 3.2, în care pagina dumneavoastră se

afişează la baza ferestrei, iar codul sursă HTML, pe care de fiecare dată
vă invităm să-l analizaţi se afişează în partea superioară a ferestrei.
Figura 3.2
49
Înainte de a executa primul pas al procedurii asiguraţi-vă că vă aflaţi în
spaţiul de lucru Dreamweaver 4 workspace (vezi Conversaţia 1).
Executaţi clic în partea de sus a paginii (complet vidă) pentru a poziţiona
cursorul (figura 3.3).
Figura 3.3
Remarci:
9 Metoda cu modul dublu de afişare (pagină şi cod) este foarte practică atunci
când doriţi să efectuaţi modificări în codul sursă şi să vedeţi imediat rezultatul
în pagină (se poate şi invers).
9 Puteţi efectua toate modificările dorite. Atunci când selectaţi un element
într-una din ferestre (cod sau pagină) echivalentul său este de asemenea
selectat în cealaltă fereastră.
9 Puteţi modifica dimensiunea celor două ferestre (cod, pagină),
redimensionând separatorul orizontal al celor două ferestre.
9 Dacă doriţi ca pagina dumneavoastră să se afişeze în partea superioară a
ferestrei şi codul la baza ferestrei, executaţi clic pe View Design View on
Top sau alegeţi aceeaşi comandă în meniul butonului (View Options) din
bara de instrumente.
9 Pentru a reveni la pagina dumneavoastră, executaţi clic pe butonul
(Show Design View).
2. Daţi un titlu (Pagina 1) paginii.
Pentru a da un titlu paginii cu Dreamweaver 4, folosiţi una din metodele

prezentate mai jos.
Metoda 1 – Meniul Modify, via Page Properties Title.
Metoda 2 – Caseta de text Title de pe bara de instrumente.

50
Vom folosi în cele ce urmează cea de-a doua metodă.
Metoda 2
2.1. Executaţi clic în zona Title situată pe bara de instrumente.
2.2. Introduceţi textul: Pagina 1 (figura 3.4).
2.3. Acţionaţi tasta Enter.
Figura 3.4
Remarci:
9 Dreamweaver 4 workspace atribuie în mod automat unui document nou titlul:
Untitled Document.
9 Încercaţi să modificaţi formatarea textului care reprezintă titlul paginii! Nu veţi
reuşi!
9 Titlul paginii se afişează în bara de titlu a navigatorului (figura 3.5).
Figura 3.5
3. Introduceţi de la tastatură, în fereastra Document, textul

specificat (figura 3.6).
Figura 3.6
51
4. Analizaţi codul HTML generat (figura 3.7).
Figura 3.7
Remarci:
9 Utilizaţi litere mari pentru tag-urile HTML pentru a le face să iasă în evidenţă
atunci când analizaţi codul. Executaţi clic pe Edit Preferences. Se deschide
caseta de dialog Preferences (figura 3.8).
Figura 3.8
52
9 În caste de dialog Preferences, categoria Code Format, alegeţi <UPPERCASE>
din meniul derulant Default Tag Case şi executaţi clic pe butonul OK pentru a
închide caseta de dialog (Preferences), figura 3.9.
Figura 3.9
9 Selectaţi tag-ul <HTML> în partea de sus a ecranului splitat (figura 3.10) şi

executaţi clic pe butonul Reference <?> de pe bara de instrumente (figura
3.10).
Figura 3.10
9 Se deschide panoul Reference în care se afişează informaţiile privind tag-ul

selectat <HTML> (figura 3.11).
Figura 3.11
53
9 Procedaţi în mod similar cu restul tag-urilor afişate sau, deschideţi panoul
Reference, via Window Reference, selectaţi opţiunea O’REILLY HTML
Reference în meniul derulant BOOK, iar în meniul derulant Tag selectaţi pe
rând tag-urile despre care doriţi să aflaţi informaţii. Pentru fiecare tag
selectat, se vor afişa în partea de jos a panoului informaţiile corespunzătoare
(figura 3.12).
Figura 3.12
9 Citiţi Conversaţia 3, paragraful HTML4 – Introduceţi text (Liviu Dumitraşcu,

(X)HTML, Editura Universităţii din Ploieşti, 2003).
5. Salvaţi documentul în folder-ul rădăcină local, via File Save

(figura 3.13).
Figura 3.13
54
6. Vizualizaţi pagina Web într-un browser, folosind una din
metodele prezentate în continuare:
9 Executaţi clic pe File Check Page CheckTarget Browsers şi

alegeţi un navigator din fereastra deschisă.
sau,
9 Acţionaţi tasta F12 pentru vizualizarea paginii în navigatorul

principal (Internet Explorer) sau tastele CTRL+F12 pentru
vizualizarea paginii în navigatorul secundar (Netscape).
sau,
9 Executaţi clic pe butonul (Preview/Debug in Browser) din

bara de instrumente şi selectaţi browser-ul în care doriţi
vizualizarea.
În figura 3.14 se prezintă pagina Web vizualizată în browser-ul Internet

Explorer.
Figura 3.14
Remarci:
9 Pentru vizualizarea paginii, Dreamweaver creează un fişier temporar
(D:\Site\TMP38bfw8jnh0.htm); numele fişierului începe cu sufixul TMP.
9 Macromedia permite definirea a cel mult 20 de browser-e! Va trebui să aveţi
instalate în calculatorul dumneavoastră aceste aplicaţii înainte de a cere
vizualizarea paginilor dumneavoastră Web. În ceea ce ne priveşte, am definit
două browser-e: Microsoft Internet Explorer şi Netscape Navigator, ambele
gratuite şi disponibile pe Internet.
55
Dreamweaver MX Introduceţi text

workspace
Cu Dreamweaver MX workspace puteţi crea mai multe tipuri de pagini

pentru Web.
Iată care este procedura Dreamweaver MX workspace pe care trebuie

s-o urmaţi pentru a crea o pagină Web care conţine text („Bine aţi venit!
Felicitări pentru răbdarea de a ne fi descoperit!” – vezi Dreamweaver 4
workspace) în conformitate cu codul XHTML.
Pentru a completa site-ul dumneavoastră, adăugaţi pagini noi, ori de

câte ori este necesar.
1. Executaţi clic pe File New (figura 3.15).
Figura 3.15
Remarcă. Se afişează caseta de dialog New Document (figura 3.16).

56
2. În caseta de dialog New Document executaţi clic pe General
(opţiune selectată implicit – figura 3.16).
Figura 3.16
Remarcă. Pentru a utiliza un model citiţi conversaţia 14.
3. În lista Category executaţi clic pe Basic Page (figura 3.17).
4. Executaţi clic pe HTML în lista Basic Page (figura 3.17).
Figura 3.17
57
5. Activaţi opţiunea Make Document XHTML Compliant (figura
3.18).
Figura 3.18
6. Executaţi clic pe butonul Create (figura 3.19).
Figura 3.19
Remarcă. Se afişează o nouă pagină … goală! (figura 3.20).
Figura 3.20
Remarci:
9 Dreamweaver MX workspace atribuie în mod automat, unui document nou,
titlul Untitled Document (figura 3.20).
9 Pentru a modifica numele implicit al paginii (atribuit în mod automat de
Dreamweaver MX workspace) salvaţi documentul. Numele fişierului html sub
care salvaţi documentul va înlocui pe cel implicit atribuit de Dreamweaver MX
workspace.
58
7. Daţi un titlu (Pagina 1) paginii. Folosiţi una din metodele
prezentate mai jos.
Metoda 1 – aceeaşi ca la Dreamweaver 4 workspace;
Metoda 2 – aceeaşi ca la Dreamweaver 4 workspace.
8. Executaţi clic pe butonul (Code and Design View) situat pe

bara de instrumente şi introduceţi de la tastatură textul
specificat (figura 3.21).
Figura 3.21
9. Analizaţi codul XHTML generat (figura 3.22).
Figura 3.22
59
Remarci:
9 Utilizaţi meniul Help Using Dreamweaver, secţiunea Index pentru a afişa
informaţii despre tag-ul xml. Respectaţi procedura descrisă în continuare.
• Executaţi clic pe Help Using Dreamweaver;
• În caseta de dialog care se afişează, Using Dreamweaver MX, în zona:
Type in keyword to find:, tastaţi xml (figura 3.23).
Figura 3.23
• Executaţi clic pe butonul Display.

• În caseta de dialog Topics Found, în zona Title, executaţi clic pe About
XML, iar apoi pe butonul Display ( figura 3.24).
Figura 3.24
60
9 În partea dreaptă a casetei de dialog Topics Found se afişează About XML
(figura 3.25).
9 În caseta de dialog Using Dreamweaver MX, secţiunea Index, în zona Type in
the keyword to find, tastaţi xhtml. Acţionaţi butonul Display şi citiţi informaţiile
care se afişează în partea dreaptă a ferestrei de dialog.
Figura 3.25
9 Utilizaţi meniul Help, secţiunea Search pentru a afişa informaţiile despre tag-ul
doctype (tastaţi doctype în zona Type in the keyword to find:; executaţi clic
pe List Topics şi apoi pe butonul Display).
9 Citiţi Conversaţia 3, paragraful XHTML – Introduceţi text (Liviu Dumitraşcu,
10. Salvaţi documentul în folder-ul rădăcină local Site.
10.1. Executaţi clic pe File Save.
Remarcă. Dacă bara de instrumente Standard este afişată, executaţi clic pe (Save).
Pentru a salva toate documentele, executaţi clic pe (Save all) (figura 3.26).
Figura 3.26
61
10.2. În zona file name tastaţi numele fişierului.
10.3. Executaţi clic pe butonul Save.
11. Vizualizaţi pagina Web într-un browser.
Pentru a vizualiza pagina Web într-un browser folosiţi una din metodele
(Metoda 3) prezentate pentru Dreamweaver 4 workspace.
Metoda 3
1. Executaţi clic pe butonul (Preview/Debug in browser)

(figura 3.27).
Figura 3.27
2. Executaţi clic pe Preview in iexplorer (figura 3.28).

62
Figura 3.28
Remarcă. În figura 3.29 se prezintă pagina Web vizualizată în Internet Explorer.
Figura 3.29
3. Închideţi fereastra navigatorului.
Remarcă. Pentru a testa pagina într-un browser, Dreamweaver MX creează un fişier

temporar al cărui nume este afişat în bara de adrese (figura 3.30).
Figura 3.30
63
Dreamweaver 4 Inseraţi caractere speciale

workspace
În Dreamweaver caracterele speciale sunt ceea ce în HTML numim

entităţi de caractere (caractere speciale - ©, ®; caractere accentuate –
ê, é; caractere care conţin diacritice – â, î; simboluri matematice – β, φ).
Pentru a insera caractere speciale cu Dreamweaver 4 workspace, folosiţi

una din metodele prezentate în continuare.
9 Metoda 1 – Meniul Insert, via Special Characters;
9 Metoda 2 – Panoul Insert, via Characters.
Iată cum inserăm cu Dreamweaver 4 textul:
© 2003 LUMINA BLÂNDĂ
care conţine caracterul special © (copyright – drept de autor).
Metoda 1
1. Introduceţi textul menţionat lăsând un spaţiu (blanc) înaintea

lui 2003.
Figura 3.31
2. Executaţi clic în spaţiul dinaintea lui 2003.
Figura 3.32
64
3. Executaţi clic pe Insert Special Characters Copyright
(figura 3.33).
Figura 3.33
Remarcă. Caracterul special copyright © se afişează în pagina document (vezi figura

3.34).
Figura 3.34
65
Figura 3.35
Remarci:
9 În (X)HTML toate entităţile de caractere încep cu „&” şi se termină cu „;”.
9 Citiţi conversaţia 3, paragraful HTML 4 – Introduceţi caractere speciale (Liviu
Dumitraşcu, (X)HTML, Editura Universităţii din Ploieşti, 2003).
9 Folosiţi secţiunea Index din meniul Help Using Dreamweaver pentru a afişa
informaţiile care se referă la entitatea de caractere © (special characters
– inserting) (figura 3.36).
Figura 3.36
Figura 3.37
66
Metoda 2
1. Afişaţi panoul Insert, via Window t Insert.
2. Executaţi clic pe comanda Characters din meniul derulant al

panoului Insert (figura 3.38).
Remarcă. Se afişează icon-urile caracterelor speciale din Dreamweaver 4 workspace

(figura 3.39)
Figura 3.38 Figura 3.39
3. Executaţi clic în spaţiul de dinaintea lui 2003 (figura 3.40).
Figura 3.40
4. Executaţi clic pe butonul Copyright din panoul Insert subpanoul

Characters (figura 3.39).
Remarcă. În spaţiul de dinaintea lui 2003 se inserează caracterul © (vezi figura 3.41).
67
Figura 3.41
5. Inseraţi icon-ul de conformitate şi analizaţi codul

HTML generat (figura 3.42).
Figura 3.42
6. Vizualizaţi pagina Web într-un browser (figura 3.43).
Figura 3.43
68
Dreamweaver MX Inseraţi caractere speciale

workspace
Pentru a insera caractere speciale cu Dreamweaver MX workspace,

folosiţi una din metodele prezentate în continuare.
9 Metoda 1 – Meniul Insert, via Special Characters;
9 Metoda 2 – Grupul de panouri Insert.
Iată cum inserăm cu Dreamweaver MX workspace textul:
©2003 LUMINA BLANDA,
care conţine caracterul special © (copyright).
Metoda 2
1. Afişaţi grupul de panouri Insert, via Window Insert (figura

3.44).
Figura 3.44
2. Executaţi clic pe subpanoul Characters (figura 3.45).
Figura 3.45
Remarcă. Se afişează icon-urile caracterelor speciale din Dreamweaver MX (figura 3.46).
Figura 3.46
3. Introduceţi textul: © 2003 LUMINA BLANDA, lăsând un spaţiu

înaintea lui 2003 (figura 3.47).
69
Figura 3.47
4. Executaţi clic în spaţiul de dinaintea lui 2003.
5. În subpanoul Characters, executaţi clic pe butonul ©

(copyright), figura 3.48.
Figura 3.48
Remarcă. În spaţiul de dinaintea lui 2003 se afişează caracterul © (figura 3.49).
Figura 3.49
70
Figura 3.50
Figura 3.51
Dreamweaver 4 Inseraţi caractere proprii HTML

workspace
Pentru a insera caractere proprii (X)HTML cu Dreamweaver 4 workspace

folosiţi una din metodele prezentate în continuare.
9 Metoda 1 – Meniul Insert, via Special Characters Other;
9 Metoda 2 – Panoul Insert.
Iată cum inseraţi cu Dreamweaver 4 workspace caracterul propriu HTML

& în textul: „Vizitaţi magazinele C&A!”
71
Metoda 2
1. Introduceţi textul menţionat, lăsând un spaţiu (blanc) între

caracterele C şi A (figura 3.52).
Figura 3.52
2. Executaţi clic în spaţiul dintre cele două caractere (C şi A).
Figura 3.53
3. Executaţi clic pe butonul (Insert Other Character) în panoul

de obiecte Characters (figura 3.54).
Figura 3.54
Remarcă. Se afişează caseta de dialog Insert Other Character.
4. În caseta de dialog Insert Other Character, executaţi clic pe

caracterul ampersand (&) sau, tastaţi & în zona Insert.
72
5. În caseta de dialog Insert Other Character executaţi clic pe
butonul OK.
Remarcă. În fereastra document se afişează caracterul special & (figura 3.55).
Figura 3.55
Figura 3.56
Remarci:
9 Citiţi Conversaţia 3, paragraful HTML 4 – Inseraţi caractere proprii (Liviu
9 Afişaţi numerotarea liniilor de cod via butonul (Options) Line Numbers
(figura 3.57).
Figura 3.57

73
Figura 3.58
Aplicaţie
Introduceţi următorul text (în limba franceză) care conţine caractere

accentuate (e cu accent grav).
Ma première page Web est O.K.!
Indicaţie. Folosiţi o tastatură cu caractere franţuzeşti sau inseraţi caracterul
special e cu accent grav (è), acţionând butonul din panoul Insert

via Insert Other Character.
Dreamweaver MX Inseraţi caractere proprii (X)HTML

workspace
Pentru a insera caractere proprii (X)HTML cu Dreamweaver MX, folosiţi

una din metodele prezentate mai jos:
9 Metoda 1 – Meniul Insert, via Special Characters Other (vezi

Dreamweaver 4);
Iată cum inserăm cu Dreamweaver MX workspace textul „Vizitaţi

magazinele C&A” care conţine caracterul propriu (X)HTML &
(ampersand).
Metoda 2
74
1. Introduceţi textul, lăsând un spaţiu între caracterele C şi A.
2. Executaţi clic în spaţiul dintre cele două caractere (C şi A).
3. În grupul de panouri Insert, executaţi clic pe butonul Other

Character (figura 3.59).
Figura 3.59
Se afişează caseta de dialog Insert Other Character (figura 3.60).
Figura 3.60
4. În caseta de dialog Insert Other Character, executaţi clic pe

butonul & (ampersand), dacă îl … găsiţi (!) sau tastaţi & în
zona Insert, care afişează codul (X)HTML corespunzător
caracterului pe care doriţi să-l inseraţi.
5. Executaţi clic pe butonul OK.
Remarcă. În fereastra document se afişează caracterul special &. (figura 3.61).

75
Figura 3.61
Figura 3.62
Figura 3.63
76
Dreamweaver 4 Aplicaţi unui text formatele fizice

workspace şi logice
Elementele de formatare „clasică” accesibile în Dreamweaver 4
workspace sunt: bold (îngroşat), italic (cursiv), underline (subliniat),
strikethrough (barat sau tăiat), teletype (cu pas fix, ca la maşina de
scris). Celelalte stiluri big şi small nu sunt accesibile în Dreamweaver dar
le puteţi utiliza direct în HTML 4, cum de altfel aţi şi făcut-o.
Pentru a aplica unui text formate fizice şi logice cu Dreamweaver 4

workspace folosiţi una din metodele prezentate mai jos:
9 Metoda 1 – Meniul Text, via Style;
9 Metoda 2 – Inspectorul Properties.
Formataţi un text cu caractere îngroşate (bolduit) şi cursive

(italice)
Iată cum aplicăm formatul fizic bold textului: „Bine aţi venit!”.
Metoda 1
1. Selectaţi textul (figura 3.64).
Figura 3.64
2. Executaţi clic pe Text Style Bold.

77
Textul selectat se afişează cu caractere bold (vezi figura 3.65).
Figura 3.65
Figura 3.66
Remarci:
9 Selectaţi tag-ul <STRONG>, deschideţi panoul Reference şi citiţi informaţiile
care se afişează.
9 Citiţi conversaţia 3, paragraful HTML – Aplicaţi unui text formate fizice şi
logice (Liviu Dumitraşcu, (X)HTML, Editura Universităţii din Ploieşti, 2003).
9 Schimbaţi culoarea liniei de cod <STRONG>Bine ati venit</STRONG> via Edit
Preferences categoria Code Colors.
Figura 3.67
78
Metoda 2
1. Asiguraţi-vă că inspectorul Properties este deschis.
2. Selectaţi textul.
3. Executaţi clic pe butonul în inspectorul Properties (figura

3.68).
Figura 3.68
4. Analizaţi codul HTML generat.
Iată cum aplicăm formatul fizic italic textului: „Felicitări pentru răbdarea
de a ne fi descoperit!”.
Metoda 1
Figura 3.69
2. Executaţi clic pe Text Style Italic.
Remarcă. Textul selectat se afişează cu caractere italice (vezi figura 3.70).
Figura 3.70
79
Figura 3.71
Remarci:
9 Selectaţi tag-ul <EM>, deschideţi panoul Reference şi citiţi informaţiile care se
afişează.
9 Citiţi conversaţia 3, paragraful HTML – Aplicaţi unui text formate fizice şi
4. Vizualizaţi pagina Web într-un browser (3.72).
Figura 3.72
Metoda 2
3. Executaţi clic pe butonul I în inspectorul Properties (figura

3.73).
Figura 3.73
Remarcă. Metoda 2 se foloseşte numai pentru aplicarea stilurilor bold (B) şi italic (I).
80
Măriţi sau micşoraţi un text
W3C a prevăzut două tag-uri (formate fizice) – big, small pentru mărirea
sau micşorarea unui text, dar ele nu sunt accesibile în Dreamweaver. În
consecinţă, va trebui să le introducem în codul sursă HTML.
Pentru a aplica unui text formatul fizic big, Dreamweaver 4 workspace

oferă patru metode:
9 Metoda 1 – Show Code and Design View ( );
9 Metoda 2 – Inspectorul de cod (Code Inspector);
9 Metoda 3 – Quick Tag Editor;
9 Metoda 4 – Show Code View ( ).
Iată cum introducem în codul sursă HTML tag-ul de formatare <big> pe

care urmează să-l aplicăm cuvântului „venit” din fraza „Bine aţi venit!”.
Metoda 1
1. Asiguraţi-vă că butonul (Show Code and Design Views) din

bara de instrumente este activat.
2. Executaţi clic înaintea cuvântului „venit” din prima frază afişată

în fereastra de sus a ecranului (conţine codul sursă HTML),
figura 3.74.
Figura 3.74
81
3. Introduceţi, în continuare tag-ul <BIG> (figura 3.75).
Figura 3.75
4. Introduceţi imediat după cuvântul „venit”, tag-ul final </BIG>

(figura 3.76).
Figura 3.76
5. Executaţi clic pe butonul (Refresh Design View) din bara

de instrumente pentru a actualiza pagina (figura 3.77).
Figura 3.77
Remarci:
9 Deoarece stilul big nu este definit în Dreamweaver, el nu va apare în
documentul dumneavoastră, ci numai în browser.
9 Pentru a reveni la pagina dumneavoastră, executaţi clic pe butonul
situat în bara de instrumente.
82
Figura 3.78
Aplicaţii
Aplicaţi tag-ul de formatare <small> frazei „Felicitări pentru răbdarea de a

ne fi descoperit!”. Utilizaţi metoda 1.
Aplicaţi tag-ul de formatare <nobr> frazei „Universitatea «Petrol-Gaze» din

Ploieşti, tradiţie şi dinamism.”. Utilizaţi metoda 1.
Metoda 2
Inspectorul Code Inspector afişează codul sursă HTML al paginii curente.

Inspectorul Code Inspector este foarte util atunci când doriţi să adăugaţi
sau să rectificaţi un tag la nivel de cod. În orice moment, cu inspectorul
Code Inspector puteţi vizualiza şi modifica codul sursă al paginii.
Iată cum utilizăm inspectorul Code Inspector pentru inserarea în codul

sursă HTML a tag-ului <big> pe care urmează să-l aplicăm cuvântului
„venit” din fraza „Bine aţi venit!”.
1. Lansaţi inspectorul Code Inspector din meniul Window, via

Window Other Code Inspector (figura 3.79).
83
Figura 3.79
Remarcă. Se afişează codul sursă al paginii Web (vezi figura 3.80).
Figura 3.80
2. Acţionaţi butonul (View Options) care vă permite

parametrizarea modului de afişaj al codului sursă (figura 3.81).
84
Figura 3.81
Remarci:
9 Opţiunea Word Wrap permite citirea cu uşurinţă a unei linii de cod atunci când
lăţimea ferestrei este prea mică pentru a vizualiza totul pe o singură linie.
9 Opţiunea Line Numbers permite numerotarea fiecărei linii a codului sursă.
9 Opţiunea Highlight Invalid HTML permite punerea în evidenţă prin fenomenul
de clipire a erorilor la nivel de cod HTML.
9 Opţiunea Syntax Coloring permite afişarea în culori a diferitelor părţi ale
codului sursă în funcţie de preferinţele definite.
9 Opţiunea Auto Indent permite indentarea automată a anumitor părţi ale
codului în funcţie de preferinţele definite.
3. Executaţi clic pe prima opţiune Word Wrap din meniul de

opţiuni (figura 3.82).
Figura 3.82
85
4. Introduceţi în codul sursă HTML tag-ul <BIG>, înaintea
cuvântului „venit” şi tag-ul </BIG> după cuvântul „venit”
(figura 3.83).
Figura 3.83
5. Executaţi clic pe butonul Refresh Design View din bara de

instrumente.
6. Acţionaţi tasta F10 pentru a reveni în fereastra document.
Aplicaţie
Aplicaţi tag-ul <small> frazei „Felicitări pentru răbdarea de a ne fi

descoperit!”. Utilizaţi metoda 2.
Metoda 3
Quick Tag editor permite verificarea, adăugarea, modificarea şi

suprimarea rapidă a unui tag HTML direct în fereastra Document.
Quick Tag Editor este un instrument foarte practic pentru aceia dintre
dumneavoastră care cunosc bine HTML şi care doresc să efectueze
modificări în codul sursă, în mod rapid, fără a deschide fereastra în care
se afişează codul sursă HTML şi a identifica elementul de modificat.
86
Quick Tag Editor poate fi utilizat în trei moduri:
9 Insert HTML;
9 Edit Tag;
9 Wrap Tag.
Pentru a bascula între cele trei moduri apăsaţi pe CTRL+T.
Iată cum utilizăm aplicaţia Quick Tag Editor pentru a insera în codul
sursă HTML, tag-ul <big> care urmează să fie aplicat cuvântului „venit”
din fraza „Bine aţi venit!”. Se va utiliza modul Insert HTML.
1. În fereastra Document, selectaţi cuvântul „venit” din fraza „Bine

aţi venit!” (figura 3.84).
Figura 3.84
2. Executaţi clic pe butonul Quick Tag Editor din inspectorul

Properties, sau acţionaţi simultan tastele CTRL+T (figura 3.85).
Figura 3.85
Fereastra Quick Tag Editor se deschide cu menţiunea Wrap Tag (vezi

figura 3.86).
87
Figura 3.86
Remarcă. Aplicaţia Quick Tag Editor mai poate fi lansată cu una din metodele:
9 acţionând simultan CTRL+T;
9 din meniul Modify, via Modify t Quick Tag Editor;
9 executaţi clic cu butonul drept al mouse-ului pe orice obiect şi
selectaţi comanda Edit Tag din meniul derulant.
3. Selectaţi tag-ul big (figura 3.87).
Figura 3.87
Remarci:
9 Tag-ul <big> mai poate fi selectat introducând prima literă b a tag-ului
(figura 3.88).
9 Quick Tag Editor selectează în lista sa primul element care începe cu litera b.
88
Figura 3.88
4. Acţionaţi tasta Enter pentru ca tag-ul <big> şi </big> să fie

acceptate (figura 3.89).
Figura 3.89
5. Acţionaţi încă o dată tasta Enter pentru a valida modificarea

efectuată.
6. Vizualizaţi pagina Web într-un navigator (3.90).
Figura 3.90
Remarci:
9 Tag-ul <BIG> (element standard W3C) nu se afişează în Dreamweaver.
9 Analizaţi codul sursă HTML.
9 Dreamweaver adaugă tag-ul <BIG> înaintea obiectului selectat (venit)
respectiv tag-ul de închidere </BIG> după obiectul (venit) selectat.
89
Daţi ordin … să clipească un text în pagină
W3C a prevăzut tag-ul <blink> pentru ca un text să … clipească în
cadrul unei pagini. Cum tag-ul <blink> nu este accesibil în
Dreamweaver, va trebui să-l introducem în codul sursă HTML.
Pentru ca textul „bine aţi venit” să clipească, introduceţi tag-ul <blink>

în codul sursă HTML. Utilizaţi una din cele patru metode prezentate
Vă lăsăm singuri să executaţi cu … plăcere ordinul „să clipească textul

«Bine aţi venit!»”. Dacă-i ordin!...
Dreamweaver MX Aplicaţi unui text formatele fizice

workspace şi logice
Pentru a aplica unui text formate fizice şi logice cu Dreamweaver MX,
folosiţi una din metodele prezentate mai jos:
9 Metoda 1 – Meniul Text, via Style;

9 Metoda 2 – Inspectorul Properties;
Iată cum aplicăm formatul fizic bold, textului „Bine aţi venit!”
Metoda 3
1. Asiguraţi-vă că grupul de panouri Insert este deschis.
3. În grupul de panouri Insert, executaţi clic pe subpanoul Text

(figura 3.91).
Figura 3.91
Remarcă. Dreamweaver afişează butoanele B I (figura 3.92).

90
Figura 3.92
4. Executaţi clic pe butonul (figura 3.93)
Figura 3.93
În fereastra document textul selectat se afişează bolduit (figura 3.94).
Figura 3.94
Figura 3.95
91
Remarci:
9 În mod implicit, Dreamweaver utilizează elementul HTML <strong> în locul
elementului <b>.
9 Pentru a utiliza elementul standard <b> aplicaţi următoarea procedură:
• Executaţi clic pe Edit Preferences;
• În categoria General, dezactivaţi opţiunea Use <strong> and <em> in
place of <b> and <i>.
9 Citiţi conversaţia 3, paragraful XHTML – Aplicaţi unui text formate fizice şi
Figura 3.96
Iată cum aplicăm formatul fizic italic, textului „Felicitări pentru răbdarea
de a ne fi descoperit!”.
Metoda 3
1. Asiguraţi-vă că grupul de panouri Insert este deschis.
3. În grupul de panouri Insert, executaţi clic pe subpanoul Text.
4. Executaţi clic pe butonul (figura 3.97).
Figura 3.97
Remarcă. În fereastra document textul selectat se afişează cu italice (figura 3.98).

92
Figura 3.98
Figura 3.99
Remarci:
9 În mod implicit Dreamweaver utilizează elementul HTML <em> în locul
elementului <i>.
9 Pentru a utiliza elementul standard <i> aplicaţi următoarea procedură:
• Executaţi clic pe Edit Preferences;
• În categoria General, dezactivaţi opţiunea Use <strong> and <em> in
place of <b> and <i>.
9 Citiţi conversaţia 3, paragraful XHTML – Aplicaţi unui text formate fizice şi
Figura 3.100
93
Măriţi sau micşoraţi un text
Iată cum introducem în codul sursă XHTML tag-ul de formatare <big>
pe care urmează să-l aplicăm cuvântului „venit” din fraza „Bine aţi
venit!”.
Indicaţie. Pentru a aplica unui text formatul fizic big cu Dreamweaver

MX workspace, folosiţi una din cele patru metode prezentate pentru
Dreamweaver 4 workspace. Analizaţi codul XHTML generat (figura
3.101).
Figura 3.101
Dreamweaver MX Inseraţi abrevieri şi acronime

workspace
Pentru a insera în pagina dumneavoastră Web o abreviere sau un

acronim cu Dreamweaver MX workspace, folosiţi grupul de panouri
Insert din care selectaţi subpanoul Text.
Iată cum procedăm pentru a insera abrevierea PL S, de la Ploieşti Sud.

94
1. Introduceţi abrevierea şi selectaţi-o (figura 3.102).
Figura 3.102
2. În grupul de panouri Insert, executaţi clic pe Text abbr.

(figura 3.103).
Figura 3.103
Remarcă. Se afişează caseta de dialog Abbreviation.
3. În caseta de dialog Abbreviation, în zona Full Text introduceţi

textul complet Ploieşti Sud iar în zona Language introduceţi ro
(pentru România), figura 3.104.
Figura 3.104
5. Salvaţi documentul.

95
Figura 3.105
Figura 3.106
Pentru a insera un acronim (UPG de la Universitatea Petrol-Gaze) aplicaţi

procedura descrisă în continuare.
1. Introduceţi acronimul şi selectaţi-l.
2. În grupul de panouri Insert, executaţi clic pe Text W3C.
3. În caseta de dialog Acronym, care se afişează, în zona Full Text

introduceţi textul complet al acronimului: Universitatea
Petrol-Gaze (figura 3.107).
Figura 3.107
96
4. Introduceţi ro (pentru România) în zona Language şi executaţi
clic pe butonul OK.
Figura 3.108
Figura 3.109
Remarcă. Când poziţionaţi pointer-ul pe acronim se afişează textul integral pe care l-aţi
introdus în zona Full Text.
97
Dreamweaver 4 Scrieţi un text cu exponent sau cu

workspace indice
Consorţiul W3C a prevăzut două elemente: <sup> şi <sub> pentru a
scrie un text cu exponent sau cu indice, dar ele nu sunt accesibile în
Dreamweaver. În consecinţă, va trebui să le introducem în codul sursă
(X)HTML.
Iată cum scriem cu Dreamweaver 4 workspace expresia:
LUMINABLANDA2=LUMINABLANDA*LUMINABLANDA
Vom aplica formatul fizic <SUP>.
Pentru scrierea unei expresii cu exponent sau cu indice, cu

Dreamweaver 4 workspace, folosiţi una din metodele prezentate mai
jos:
9 Metoda 1 – Show Code and Design View ( );
9 Metoda 2 – Inspectorul de cod (Code Inspector);
9 Metoda 3 – Quick Tag Editor;
9 Metoda 4 – Show Code View ( ).
Vom folosi Metoda 3, întrucât Quick Tag Editor permite efectuarea

modificărilor în mod rapid, fără a mai fi nevoie de a deschide fereastra
codului şi a identifica elementul de modificat. Quick tag editor este un
instrument foarte puternic pentru cei care cunosc bine (X)HTML.
Metoda 3
1. În fereastra Document (figura 3.110), tastaţi:
LUMINABLANDA2=LUMINABLANDA*LUMINABLANDA.
98
Figura 3.110
2. În fereastra Document selectaţi numai cifra 2 (figura 3.111).
Figura 3.111
3. Activaţi Quick Tag Editor prin icon-ul său ori direct de la

tastatură (CTRL+T).

figura 3.112).
Figura 3.112
99
4. Selectaţi tag-ul de inserat, sup (figura 3.113).
Figura 3.113
Remarcă. Când se afişează lista de tag-uri, tastaţi s. Quick Tag Editor

selectează primul tag care începe cu „s” (sau tastaţi rapid su). Derulaţi lista
tag-urilor până identificaţi şi selectaţi tag-ul <sup>.
5. Acţionaţi tasta Enter.
6. Acţionaţi încă o dată tasta Enter.
8. Vizualizaţi pagina Web într-un navigator (figura 3.114).
Figura 3.114
Iată cum scriem cu Dreamweaver 4 workspace expresia:
LUMINABLANDA12=LUMINABLANDA1*LUMINABLANDA1
Vom aplica formatul fizic <SUB>.
Pentru scrierea cu indice a expresiei de mai sus vom folosi tot Quick Tag
Editor (Metoda 3), după cum urmează.
100
Metoda 3
1. În fereastra Document (figura 3.115), tastaţi:
Figura 3.115
2. Selectaţi din LUMINABLANDA12 numai cifra 1 (figura 3.116).
Figura 3.116
3. Acţionaţi Quick Tag Editor.

figura 3.117).
101
Figura 3.117
4. Tastaţi între cele două paranteze sub. Se afişează lista de

tag-uri cu tag-ul sub selectat (figura 3.118).
Figura 3.118
6. Acţionaţi încă o dată tasta Enter.
7. Analizaţi codul XHTML generat.
Figura 3.119
9. Selectaţi cifra 1 din LUMINABLANDA1 (primul factor din

membrul drept!).
102
10. Repetaţi paşii 3, 4, 5, 6, 7, 8.
11. Selectaţi cifra 1 din LUMINABLANDA1 (al doilea factor din

membrul drept!).
12. Repetaţi paşii 3, 4, 5, 6, 7, 8.
Dreamweaver MX Scrieţi un text cu exponent sau cu

workspace
indice
Pentru a scrie cu Dreamweaver MX workspace un text care conţine
exponenţi sau indici, folosiţi una din cele 4 metode prezentate pentru
Dreamweaver 4 workspace.
Iată cum scriem cu Dreamweaver MX workspace expresia:
LUMINA BLANDA2=LUMINA BLANDA * LUMINA BLANDA
Vom aplica formatul fizic <sup>.
Metoda 2
1. Executaţi clic pe Window Others Code Inspector.
Remarcă. Se deschide fereastra Code Inspector (figura 3.120).
Figura 3.120
103
Remarci:
9 Pentru a deschide fereastra Code Inspector, puteţi folosi de asemenea tasta
F10.
9 Butonul View Options ( ) vă permite parametrizarea modului de afişare a
codului sursă (figura 3.121).
Figura 3.121
2. Introduceţi codul XHTML (figura 3.122):
LUMINABLANDA<SUP>2</SUP>=LUMINABLANDA*LUMINABLANDA
Figura 3.122
3. Tastaţi F10 pentru a reveni în fereastra document.

104
Figura 3.123
Iată cum scriem cu Dreamweaver MX workspace expresia:
Vom aplica formatul fizic <sub>.
Metoda 4 (vezi Dreamweaver 4 workspace)
1. Executaţi clic pe butonul (Show Code View), figura 3.124.
Figura 3.124
2. Introduceţi codul XHTML
LUMINABLANDA<sub>1</sub><sup>2</sup>=LUMINABLANDA<sub>1
</sub>*LUMINABLANDA<sub>1</sub>
Figura 3.125
105
3. Executaţi clic pe butonul (Show Code and Design Views)
sau (Show Design View) pentru a reveni în fereastra

document.
Figura 3.126
Dreamweaver 4 Definiţi tipul de font

workspace
Vă mai amintiţi de tag-urile <font>, <basefont> din HTML? Dar de

atributele lor: face, size, color? Ce vremuri, nu-i aşa! Ele rămân clasice
… în viaţă, deşi W3C (World Wide Web Consortium) doreşte să le
desfiinţeze, recomandând în schimb foile de stiluri (CSS-1). Deoarece
nu toate navigatoarele recunosc foile de stiluri, se pare că formatarea
„clasică” va mai avea încă zile frumoase de trăit! Unde se termină
realitatea, începe … speranţa!
Pentru a aplica unui text fonturi de substituţie cu Dreamweaver 4

9 Metoda 2 – Meniul Text.

106
Iată cum aplicăm textului integral al paginii, fonturi de substituţie din
grupul de fonturi: „Georgia, Times New Roman, Times, serif” disponibile
în Dreamweaver.
1. Selectaţi textul integral al paginii Web (figura 3.127).
Figura 3.127
2. Deschideţi inspectorul Properties, via Window Properties.
3. Derulaţi caseta Font Combination din inspectorul Properties,

până identificaţi şi apoi selectaţi din lista corpurilor de literă,
grupul de fonturi: „Georgia, Times New Roman, Times, serif”.
Figura 3.128
4. Executaţi clic pe grupul de fonturi selectat.

107
Figura 3.129
Figura 3.130
Remarci:
9 Dreamweaver 4 workspace propune şase familii de fonturi, care reprezintă
şase stiluri diferite:
• grupul de fonturi: Arial, Helvetica şi sans-serif;
• grupul de fonturi: Times New Roman, Times şi serif;
• grupul de fonturi: Courier New, Courier şi mono;
• grupul de fonturi: Georgia, Times New Roman, Times, serif;
• grupul de fonturi: Verdana, Arial, Helvetica şi sans-serif;
• grupul de fonturi: Geneva, Arial, Helvetica şi san-serif.
9 Navigatorul analizează secvenţial lista fonturilor şi se opreşte la primul font
disponibil în Windows, pe calculatorul dumneavoastră. Dacă nici unul din
fonturile analizate nu este disponibil, browser-ul va folosi corpul de literă
prestabilit, de obicei Times New Roman.
9 Atributul despre care am discutat, legat de definirea tipului de font foloseşte
tag-ul <font>, care după cum am precizat nu este încurajată de W3C.
9 Şi dumneavoastră vă puteţi crea propriile grupuri de fonturi!
9 Fonturile Verdana şi Georgia au fost create de Matthew Carter la solicitarea lui
Microsoft. Ele se difuzează gratuit.
Metoda 2
1. Selectaţi textul integral al paginii Web.

108
2. Executaţi clic pe Text Font şi apoi selectaţi grupul de fonturi
Georgia, Times New Roman, Times, serif (figura 3.131).
Figura 3.131
Remarcă. Dacă doriţi să utilizaţi un anume font căruia îi cunoaşteţi numele, introduceţi
direct numele în zona de fonturi a inspectorului Properties.
Aplicaţie
Aplicaţi celei de-a doua fraze „Felicitări pentru răbdarea de a ne fi

descoperit!” a paginii Web, fonturile de substituţie din grupul „Times New
Roman, Times, serif”.
Indicaţie. Selectaţi fraza menţionată, după care utilizaţi una din metodele
prezentate.
109
Dreamweaver MX Definiţi tipul de font

workspace
Pentru a aplica unui text fonturi de substituţie cu Dreamweaver MX

workspace, folosiţi una din cele două metode prezentate pentru
Iată cum aplicăm textului integral al paginii, fonturi de substituţie din

grupul de fonturi: „Georgia, Times New Roman, Times, serif” disponibile
în Dreamweaver.
2. Executaţi clic pe Text Font şi apoi selectaţi grupul de fonturi:

Georgia, Times New Roman, Times, serif.

110
Figura 3.132
Figura 3.133
Dreamweaver 4 Definiţi dimensiunea fontului

workspace
Puteţi sublinia sau reduce importanţa unui fragment de text schimbând

dimensiunea caracterelor. Valorile absolute posibile într-o pagină Web
variază de la 1 la 7 (vezi HTML 4).
111
Pentru a aplica unui text o anumită dimensiune cu Dreamweaver 4
9 Metoda 2 – Meniul Text, via Size.
Iată cum definim dimensiunea (4) fontului pentru textul integral al

paginii.
Metoda 1
1. Selectaţi textul integral al paginii Web (figura 3.134).
Figura 3.134
2. Deschideţi inspectorul Properties, via Window Properties.
3. Derulaţi caseta Size din inspectorul Properties, până identificaţi

şi apoi selectaţi valoarea absolută (4) a corpului de literă (figura
3.135).
Figura 3.135
112
Remarcă. Pentru a reveni la dimensiunea prestabilită a corpului de literă,
selectaţi None.
4. Executaţi clic pe valoarea absolută 4.
Figura 3.136
Remarci:
9 Selectaţi tag-ul <FONT>, deschideţi panoul Reference şi citiţi informaţiile care
se afişează. Utilizaţi meniul derulant Description pentru a vizualiza atributul
size.
9 Citiţi conversaţia 3, paragraful HTML 4 – Definiţi dimensiunea fontului (Liviu
Figura 3.137
Metoda 2
2. Executaţi clic pe Text Size 1 to 7 (figura 3.138).

113
Figura 3.138
3. Executaţi clic pe valoarea absolută (4), figura 3.138.
Remarci:
9 În HTML nu există nici o modalitate de a stabili o dimensiune precisă, în
puncte a corpului de literă, decât folosind foile de stil în cascadă (CSS).
9 Corespondenţa între dimensiunea fixă a fontului şi dimensiunea apropiată de
cea tipografică (exprimată în puncte) este următoarea:
• 1 la 8 puncte;
• 2 la 10 puncte;
• 3 sau dimensiunea implicită la 12 puncte;
• 4 la 14 puncte;
• 5 la 18 puncte;
• 6 la 24 puncte;
• 7 la 36 puncte.
9 Dimensiunea implicită a fontului în Dreamweaver este 3.
9 Dimensiunile relative variază de la -7 la +7, dar dimensiunea obţinută nu
coboară niciodată sub 1 şi nu depăşeşte niciodată valoarea 7.
9 Pentru a aplica o dimensiune relativă în raport cu dimensiunea implicită (3),
selectaţi cuvântul (fraza sau textul integral al paginii), apoi utilizaţi meniul
Text Size Change, apoi alegeţi +1 până la +4 sau -1 până la -3,
sau,
În inspectorul Properties, utilizaţi meniul derulant Size (figura 3.139).
114
Figura 3.139
Aplicaţie
Atribuiţi valoarea (absolută) 7, dimensiunii fontului pentru cea de-a doua

frază „Felicitări pentru răbdarea de a ne fi descoperit!” a paginii Web.
Indicaţie. Selectaţi fraza indicată, după care utilizaţi una din cele două metode
prezentate.
Dreamweaver MX Definiţi dimensiunea fontului

workspace
Pentru a defini dimensiunea unui font cu Dreamweaver MX workspace,

folosiţi una din metodele prezentate pentru Dreamweaver 4 workspace.
Iată cum definim dimensiunea (4) fontului pentru textul integral al

paginii.
2. Deschideţi inspectorul Properties.
3. Derulaţi caseta Size din panoul Properties.
4. Executaţi clic pe 4 (valoarea absolută dorită) (figura 3.140).
Figura 3.140
115
Remarcă. Dimensiunea 4 este aplicată fontului pentru textul integral al paginii.
Figura 3.141
Figura 3.142
116
Dreamweaver 4 Definiţi culorile

workspace
Puteţi schimba, după cum cunoaşteţi, culoarea întregului text al paginii,
a unei porţiuni de text (cuvânt, frază) sau a legăturilor (vizitate, active)
hipertext. Pe fundalul paginii dumneavoastră puteţi de asemenea aplica
o culoare uniformă sau o imagine. Dacă le aplicaţi pe amândouă, atenţie
la lizibilitate şi nu doar atât!
Coloraţi textul integral al paginii

Iată cum procedaţi pentru a colora în albastru tot textul paginii: „Bine aţi
venit! Felicitări pentru răbdarea de a ne fi descoperit! © 2003 LUMINA
BLÂNDĂ”.
1. Executaţi clic pe Modify Page Properties (figura 3.143).
Figura 3.143
117
Remarcă. Se afişează caseta de dialog Page Properties.
2. În caseta de dialog Page Properties executaţi clic în zona Text

(culoarea textului).
3. Folosiţi selectorul de culori (Color Picker) pentru a alege o

culoare (albastru) din paleta de culori (Executaţi clic cu pipeta
pe culoarea respectivă), figura 3.144.
Figura 3.144
Remarcă. Puteţi folosi o culoare personalizată.
4. În caseta de dialog Page Properties executaţi clic pe butonul

OK.
Figura 3.145

118
Figura 3.146
Remarci:
9 Tot textul paginii se afişează în albastru.
9 Puteţi de asemenea, alege o culoare pentru tot textul paginii, tastând direct în
casetă, valoarea RGB hexazecimală a culorii (dacă o cunoaşteţi). Puteţi de
asemenea tasta numele culorii (blue) în cazul nostru.
9 Pentru a şterge culoarea curentă fără a alege o altă culoare, executaţi clic pe
butonul Default Color din paleta de culori (selectaţi butonul Apply pentru a
vedea pe ecran modificarea culorii textului).
9 Paleta de culori (acceptate de browser-ele Internet Explorer şi Netscape)
Dreamweaver cuprinde 212 culori (paleta tradiţională de culorii cuprinde 216
culori!).
9 În Dreamweaver puteţi defini toate proprietăţile (atribute în HTML) unui
obiect (după ce l-aţi selectat!) cu ajutorul inspectorului Properties, cu o
singură excepţie: Page Properties din meniul Modify.
Coloraţi un cuvânt sau o frază

Pentru a colora un cuvânt sau o frază cu Dreamweaver 4 workspace,
9 Metoda 1 – Meniul Text, via Color;
Iată cum coloraţi în roşu fraza de copyright, din pagină: „© 2003

LUMINA BLÂNDĂ”.
Metoda 1
1. Selectaţi fraza menţionată (figura 3.147).

119
Figura 3.147
2. Executaţi clic pe Text Color… (figura 3.148).
Figura 3.148
Remarcă. Se afişează caseta de dialog Color.
3. Alegeţi o culoare (roşu) „websafe” (culoare recunoscută de

diferite browser-e pe diferite platforme) în Basic colors sau
creaţi (cu multă prudenţă) propria culoare personalizată în zona
din dreapta a casetei (figura 3.149).
120
Figura 3.149
Figura 3.150
Remarci:
9 Selectaţi tag-ul <FONT>, deschideţi panoul Reference şi citiţi informaţiile care
se afişează. Utilizaţi meniul derulant Description pentru a vizualiza atributul
color.
9 Citiţi conversaţia 3, paragraful HTML – Aplicaţi unui text formatele fizice şi

121
Figura 3.151
Metoda 2
1. Selectaţi fraza menţionată.
2. Deschideţi Inspectorul Properties, via Window Properties.
3. Executaţi un clic pe meniul de alegere a culorii websafe (figura

3.152).
Figura 3.152
Remarcă. Se afişează codul hexazecimal al culorii (#FF0000).

4. Executaţi clic cu pipeta pe culoarea dorită (roşu) din paleta de
culori care se afişează (figura 3.153).
Figura 3.153

122
Figura 3.154
Remarcă. Dacă cunoaşteţi numele culorii, introduceţi direct numele culorii în caseta
dedicată culorii din Inspectorul Properties.
Definiţi culoarea de fond

În mod implicit, culoarea de fond este albă (#FFFFFF) iar textul din
pagină este de culoare neagră (#000000).
Iată cum coloraţi în verde background-ul paginii dumneavoastră Web.
1. Executaţi clic pe Modify Page Properties.
2. În caseta de dialog Page Properties executaţi clic în caseta

Background situată deasupra casetei Text (figura 3.155).
Figura 3.155
123
3. Folosiţi selectorul de culori (Color Picker) pentru a alege o
culoare (verde) din paleta de culori (executaţi clic cu pipeta pe
culoarea respectivă), figura 3.156.
Figura 3.156
Remarcă. Puteţi alege de asemenea modul colorimetric, executând clic pe meniul local f
situat în colţul din dreapta sus, sau tastaţi numele culorii (green) în caseta background.
Figura 3.157
Remarci:
9 Selectaţi tag-ul <BODY>, deschideţi panoul Reference şi citiţi informaţiile care
se afişează. Utilizaţi meniul derulant Description pentru a vizualiza atributele
bgcolor şi text.
9 Citiţi conversaţia 3, paragraful HTML – Definiţi culorile (Liviu Dumitraşcu,

124
Figura 3.158
Remarcă. Background-ul paginii s-a colorat în verde.
Dreamweaver MX Definiţi culorile

workspace
Coloraţi textul integral al paginii

Iată cum procedaţi pentru a colora în albastru tot textul paginii: „Bine aţi
venit! Felicitări pentru răbdarea de a ne fi descoperit! © 2003 LUMINA
BLÂNDĂ”.
2. În caseta de dialog Page Properties, care se afişează executaţi
clic pe în zona Text.
3. Executaţi clic pe culoarea albastru în paleta de culori (figura

3.159).
Figura 3.159
Remarcă. Textul integral al paginii se afişează în albastru.

125
Figura 3.160
Figura 3.161
Coloraţi un cuvânt sau o frază

Pentru a colora un cuvânt sau o frază cu Dreamweaver MX workspace,
Iată cum coloraţi în roşu fraza de copyright: „© 2003 LUMINA BLANDĂ”.

126
Metoda 2
1. Selectaţi fraza menţionată.
2. Deschideţi panoul Properties.
3. Executaţi un clic pe meniul de alegere a culorii websafe (figura

3.162).
Figura 3.162
4. Executaţi clic cu pipeta pe culoarea dorită (roşu) din paleta de

culori care se afişează (figura 3.163).
Figura 3.163
Textul selectat se afişează în roşu.

127
Figura 3.164
Figura 3.165
Remarcă. Dacă cunoaşteţi numele culorii, introduceţi direct numele culorii în caseta
dedicată culorii din Inspectorul Properties.
Definiţi culoarea de fond

Pentru background-ul paginii dumneavoastră puteţi utiliza fie o culoare
uni fie o imagine. Dacă le utilizaţi pe amândouă, imaginea va fi afişată
cu prioritate.
128
Iată cum coloraţi în verde background-ul paginii dumneavoastră Web.
2. În caseta de dialog Page Properties care se afişează executaţi

clic în caseta Background.
3. Executaţi clic pe culoarea verde în paleta de culori.
Figura 3.166
Figura 3.167
129
Dreamweaver MX Creaţi propriile stiluri HTML

workspace
Într-un document sau într-un site Web complet, problema formatării

textelor apare în mod regulat. Pentru a câştiga timp şi a vă menaja …
sistemul nervos folosiţi stilurile HTML! Nu confundaţi stilurile HTML cu
foile de stiluri în cascadă (CSS). Stilurile HTML nu sunt decât o colecţie
de tag-uri <FONT> şi alte atribute de stiluri pe care le puteţi salva în
Dreamweaver şi apoi folosi în mod elegant.
Marea diferenţă între stilurile HTML şi CSS-uri este acea că dacă

modificaţi un text formatat cu un stil, această modificare nu actualizează
stilul corespunzător.
Creaţi un stil HTML

Pentru a crea stiluri HTML cu Dreamweaver MX workspace, folosiţi una
din metodele prezentate mai jos:
9 Metoda 1 – Meniul Text, via HTML Styles New Style;
9 Metoda 2 – Panoul Design Subpanoul HTML Styles.
Remarcă. Pentru a crea stiluri HTML cu Dreamweaver 4 workspace folosiţi aceleaşi

metode.
Iată cum procedăm pentru a crea un nou stil HTML: bold+red.
Metoda 2
1. În panoul Design, executaţi clic pe subpanoul HTML Styles

(figura 3.168).
130
Figura 3.168
2. În subpanoul HTML Styles, executaţi clic pe butonul (New

Style), figura 3.169.
Figura 3.169
Remarcă. Se afişează caseta de dialog Define HTML Style.
3. În caseta de dialog Define HTML Style (figura 3.170) executaţi

următoarele acţiuni:
9 În zona Name: – tastaţi numele stilului: bold+red;
9 În zona Apply to – alegeţi Selection(a) pentru a crea

un stil ce urmează a fi aplicat
caracterelor; dacă doriţi să creaţi
un stil ce se va aplica unui
paragraf selectaţi Paragraf(¶);
9 În zona When Applying – alegeţi Clear Existing Style pentru
131
a aplica stilul creat, suprimând
elementele de formatare
existente;
9 În zona Font Attributes – definiţi toate atributele de

formatare: fontul, dimensiunea,
culoarea, stilul caracterelor iar
apoi executaţi clic pe butonul OK.
Figura 3.170
Remarcă. Noul stil se afişează în subpanoul HTML Styles (figura 3.171).
Figura 3.171
132
Aplicaţi un stil HTML (predefinit)
Pentru a aplica stiluri HTML predefinite, folosiţi una din metodele
prezentate mai jos:
9 Metoda 1 – Meniul Text, via HTML Styles;
9 Metoda 2 – Meniul Window, via HTML Styles;
9 Metoda 3 – Panoul Design.
Iată cum aplicăm cuvântului „Bine” din paragraful „Bine aţi venit!” stilul
predefinit bold+red.
Metoda 3
1. Selectaţi cuvântul „Bine” în paragraful: „Bine aţi venit!”.
2. În panoul Design, executaţi clic pe subpanoul HTML Styles.
3. În lista de stiluri predefinite, care se afişează, executaţi clic pe

stilul bold+red (figura 3.172).
Figura 3.172
Remarci:
9 Stilurile HTML aplicabile caracterelor sunt precedate de simbolul a sau a+.
Cele care se aplică paragrafelor sunt precedate de simbolul ¶.
9 Simbolul a aplică stilul predefinit suprimând formatarea existentă.
9 Simbolul a+ aplică stilul predefinit adăugându-l la formatarea existentă.
9 Dacă opţiunea Auto Apply este activată, stilul se aplică direct.
133
4. Executaţi clic pe butonul Apply, în cazul în care opţiunea nu a
fost activată (figura 3.173).
Figura 3.173
Figura 3.174
Figura 3.175
134
Remarci:
9 Puteţi modifica, duplica şi suprima un stil existent utilizând butoanele de la
baza ferestrei HTML Styles.
9 Toate stilurile HTML sunt stocate în fişierul styles.xml din folder-ul Library.
Aplicaţie
Modificaţi toate atributele elementului <font> într-o singură casetă de dialog.

Utilizaţi panoul Insert.
Iată care este procedura pe care vă invităm s-o aplicaţi.
1. Selectaţi textul „Felicitări pentru răbdarea de a ne fi descoperit!”

(figura 3.176).
Figura 3.176
2. În subpanoul Text din grupul de panouri Insert, executaţi clic pe
butonul (Font Tag Editor), figura 3.177.
Figura 3.177
3. În caseta de dialog Tag Editor – Font care se afişează , în categoria

General, alegeţi în zona Face, o familie de caractere; în zona size
alegeţi dimensiunea caracterelor, iar în zona color alegeţi culoarea
caracterelor (figura 3.178).
135
Figura 3.178
Figura 3.179
Figura 3.180
136
1. Cum daţi un titlu paginii cu Dreamweaver 4 workspace/ Dreamweaver
MX workspace? Descrieţi pe scurt una din metodele folosite.
2. Descrieţi pe scurt procedura Dreamweaver MX de inserare caractere

speciale şi caractere proprii (X)HTML.
3. Descrieţi pe scurt metodele Dreamweaver 4 workspace /Dreamweaver

MX workspace de formatare a unui text cu caractere îngroşate
(bolduite) şi cursive (italice).
4. Aplicaţi unui text formatul fizic big cu metoda Quick Tag Editor.
5. Descrieţi pe scurt procedura Dreamweaver MX workspace de inserare

a abrevierilor şi acronimelor.
6. Cum procedaţi pentru a scrie cu Dreamweaver MX un text care

conţine exponent sau indice?
7. Cum definiţi cu Dreamweaver 4 workspace: tipul de font, dimensiunea

fontului, culoarea fontului pentru:
9 textul integral al paginii;
9 un cuvânt, o frază.
9 www.macromedia.com/fr/software/dreamweaver
9 www.manipulation.com
9 www.projectseven.com/dreamweaver
Conversaţia 4
Creaţi şi formataţi paragrafele cu

Dreamweaver MX
•••••••••••••••••••••••••••••••••••••••••
f Dreamweaver 4 workspace, MX workspace – Creaţi un paragraf
f Dreamweaver 4 workspace, MX workspace – Schimbaţi alinierea unui
paragraf
f Dreamweaver 4 workspace, MX workspace – Treceţi la linia următoare
într-un paragraf
f Dreamweaver 4 workspace, MX workspace – Indentaţi un paragraf
f Dreamweaver 4 workspace, MX workspace – Inseraţi un text preformatat
f Dreamweaver 4 workspace, MX workspace – Creaţi un titlu
f Dreamweaver 4 workspace, MX workspace – Creaţi liste cu simboluri
(simple), numerotate (ordonate) şi de definiţii
f Dreamweaver MX - Temă
•••••••••••••••••••••••••••••••••••••••••
Dreamweaver 4 Creaţi un paragraf

workspace
În Dreamweaver, ori de câte ori acţionaţi tasta Enter, creaţi un nou

paragraf. Acesta este separat de precedentul prin echivalentul unei linii
vide.
138
Iată cum structurăm textul din aplicaţia noastră în trei paragrafe:
Primul paragraf: „Bine aţi venit!”
Al doilea paragraf: „Felicitări pentru răbdarea de a ne fi descoperit!”
Al treilea paragraf: „Dorim să ne cunoaştem mai bine şi să rămânem

împreună! LUMINA BLÂNDĂ este puternică şi nu
doar atât!”
1. Introduceţi textul în fereastra Document (figura 4.1).
Figura 4.1
2. Executaţi clic acolo unde trebuie să înceapă al doilea paragraf

(figura 4.2).
Figura 4.2
Între cele două blocuri de text se afişează o linie vidă, transformându-le

în două paragrafe distincte (vezi figura 4.3).
139
Figura 4.3
Figura 4.4
Remarci:
9 Selectaţi tag-ul <P>, deschideţi panoul Reference şi citiţi informaţiile care se
afişează.
9 Citiţi Conversaţia 4, paragraful: HTML- Creaţi un paragraf (Liviu Dumitraşcu,
5. Repetaţi paşii 2 şi 3 pentru cel de-al treilea paragraf.
Figura 4.5
140
Figura 4.6
Dreamweaver MX Creaţi un paragraf

workspace
Dreamweaver MX workspace creează un nou paragraf de fiecare dată

când acţionaţi tasta ENTER. Puteţi de asemenea scinda un text existent
în mai multe paragrafe.
Iată cum scindăm în trei paragrafe următorul text: „Bine aţi venit!
Felicitări pentru răbdarea de a ne fi descoperit! Dorim să ne cunoaştem
şi să rămânem împreună! LUMINA BLANDĂ este puternică şi nu doar
atât!” Primul paragraf este „Bine aţi venit!”, iar al doilea paragraf este:
„Felicitări pentru răbdarea de a ne fi descoperit!”
1. Introduceţi textul.
2. Executaţi clic după primul semn al mirării (!).
4. Acţionaţi clic după cel de-al doilea semn al mirării (!) din cadrul
paragrafului generat.
141
Figura 4.7
Remarci:
9 Selectaţi tag-ul <p> (executaţi clic pe tag-ul <p> în bara de stare) şi
executaţi clic pe butonul (figura 4.8).
Figura 4.8
9 Panoul Reference afişează informaţiile despre tag-ul selectat (<p>), figura

4.9.
142
Figura 4.9
9 Citiţi Conversaţia 4, paragraful: XHTML-Creaţi un paragraf (Liviu Dumitraşcu,

Dreamweaver 4 Schimbaţi alinierea unui paragraf

workspace
În Dreamweaver 4 workspace sunt permise următoarele tipuri de

alinieri: Left, Center, Right şi Justify.
Pentru a modifica cu Dreamweaver 4 workspace alinierea paragrafelor,

9 Metoda 1 – Meniul Text, via Align;
Iată cum centrăm primul paragraf, cum aliniem la dreapta cel de-al
doilea paragraf şi cum aliniem la stânga cel de-al treilea paragraf.
Metoda 1
1. Executaţi clic în primul paragraf (selectaţi paragraful), figura

4.10.
143
Figura 4.10
2. Executaţi clic pe Text Align Center (figura 4.11).
Figura 4.11
Primul paragraf se afişează în centrul paginii Web (vezi figura 4.12).
Figura 4.12
144
Figura 4.13
Remarci:
9 Selectaţi tag-ul <p>, deschideţi panoul Reference, utilizaţi meniul derulant
Description pentru a vizualiza atributul align cu valoarea center.
9 Citiţi Conversaţia 4, paragraful: HTML4 - Schimbaţi alinierea unui paragraf
(Liviu Dumitraşcu, (X)HTML, Editura Universităţii din Ploieşti, 2003).
Figura 4.14
Remarci:
9 Pentru a alinia la dreapta cel de-al doilea paragraf, utilizaţi Metoda 1,
modificând pasul 2, după cum urmează:
2. Executaţi clic pe Text t Align t Right.
9 Pentru a alinia la stânga cel de-al treilea paragraf, utilizaţi Metoda 1,
2. Executaţi clic pe Text t Align t Left
145
Metoda 2
1. Selectaţi primul paragraf (figura 4.15).
Figura 4.15
2. Executaţi clic pe butonul (center) din inspectorul Properties.
Figura 4.16
Figura 4.17
Remarci:
9 Selectaţi tag-ul <p>, deschideţi panoul Reference, utilizaţi meniul Description
pentru a vizualiza atributul align cu valorile left şi right.
9 Citiţi Conversaţia 4, paragraful: HTML4 - Schimbaţi alinierea unui paragraf

146
Figura 4.18
Remarci:
9 Pentru a alinia la dreapta cel de-al doilea paragraf, utilizaţi Metoda 2,
2. Executaţi clic pe butonul (Align Right), din inspectorul
Properties (figura 4.19).
Figura 4.19
9 Pentru a alinia la stânga cel de-al treilea paragraf, utilizaţi Metoda 2,

2. Executaţi clic pe butonul (Align Left), din inspectorul Properties
(figura 4.20).
Figura 4.20
Aplicaţie
Aplicaţi alinierea de tip justify paragrafului: „Dorim să ne cunoaştem şi să

rămânem împreună! LUMINA BLANDĂ este puternică şi nu doar atât!”.
Indicaţie. Utilizaţi Metoda 1, executând clic pe Text Align Justify
sau,
Utilizaţi Metoda 2, executând clic pe butonul (Align Justify), din inspectorul

Properties.
147
Dreamweaver MX Schimbaţi alinierea unui paragraf

workspace
În Dreamweaver MX workspace sunt permise următoarele tipuri de

alinieri:
9 left;
9 center;
9 right;
9 Justify.
Pentru a modifica cu Dreamweaver MX workspace alinierea paragrafelor,
Iată cum procedăm pentru a centra primul paragraf „Bine aţi venit!”.
Metoda 1
1. Selectaţi paragraful.
2. Executaţi clic pe Text Align Center.
Figura 4.21
148
Figura 4.22
Aplicaţii
Aliniaţi la dreapta cel de-al doilea paragraf: „Felicitări pentru răbdarea de a

ne fi descoperit!”
Aliniaţi la stânga cel de-al treilea paragraf: „Dorim să ne cunoaştem şi să

rămânem împreună! LUMINA BLÂNDĂ este puternică şi nu doar atât!”.
Aliniaţi la dreapta primul paragraf „Bine aţi venit!”, modificând atributul

elementului XHTML: <p align=”center”>Bine aţi venit!</p> cu inspectorul de
tag-uri.
Iată care este procedura pe care trebuie s-o urmaţi.
1. Afişaţi inspectorul de tag-uri, via Window Tag Inspector
sau,
Acţionaţi tasta F9.
Se afişează panoul Code (figura 4.23).

149
Figura 4.23
Remarcă. În partea superioară a panoului puteţi vizualiza toată structura HTML a

documentului.
2. Selectaţi elementul (X)HTML <p> în această fereastră sau selectaţi

elementul grafic <p> în pagină.
3. În partea inferioară a ferestrei Inspectorului de tag-uri, executaţi clic

pe atributul align pe care doriţi să-l modificaţi pentru a afişa valorile
disponibile (figura 4.24).
Figura 4.24
4. Selectaţi valoarea right (figura 4.25).

150
Figura 4.25
Pagina Web este actualizată imediat.
Figura 4.26

151
Figura 4.27
Aplicaţi alinierea de tip justify paragrafului: „Dorim să ne cunoaştem şi să

rămânem împreună! LUMINA BLÂNDĂ este puternică şi nu doar atât!”
Metoda 2
2. Executaţi clic pe butonul (Align Justify) în panoul Properties (figura

4.28).
Figura 4.28
Remarcă. În Dreamweaver MX workspace este permis tag-ul de aliniere Justify.

152
Figura 4.29
4. Vizualizaţi pagina Web într-un browser (4.30).
Figura 4.30
153
Dreamweaver 4 Treceţi la linia următoare într-un

workspace
paragraf
În cadrul aceluiaşi paragraf este posibil de a trece la o nouă linie fără a
crea un nou paragraf.
Pentru a crea cu Dreamweaver 4 workspace un salt de linie în cadrul

aceluiaşi paragraf, folosiţi una din metodele prezentate mai jos:
9 Metoda 1 – Meniul Insert, via Special Characters Line Break;
9 Metoda 2 – Panoul Insert;
9 Metoda 3 – Shift + Enter.
Iată cum forţăm un salt de linie al celei de-a doua fraze din paragraful
„Dorim să ne cunoaştem şi să rămânem împreună! LUMINA BLANDĂ
este puternică şi nu doar atât!”.
Metoda 1
1. Executaţi clic înaintea cuvântului „LUMINA” (figura 4.31).
Figura 4.31
154
2. Executaţi clic pe Insert Special Characters Line Break.
Remarcă. Se inserează un salt de linie (vezi figura 4.32).
Figura 4.32
Figura 4.33
Figura 4.34
155
Metoda 2
Se modifică pasul 2 din Metoda 1, după cum urmează:
2. În panoul Insert, executaţi clic pe butonul (Insert Line

Break) din categoria Characters (figura 4.35).
Figura 4.35
Punctul de inserţie se deplasează la începutul liniei următoare, dar

rămâne tot timpul în acelaşi paragraf (vezi figura 4.36).
Figura 4.36
Remarcă. Pentru a vizualiza salturile de linie în pagina dumneavoastră Web trebuie să

acţionaţi elementul invizibil Line Breaks iar apoi să-l afişaţi după cum urmează:
1. Executaţi clic pe EDIT Preferences… Invisible Elements
2. Activaţi opţiunea Line Breaks iar apoi executaţi clic pe butonul OK.
3. Afişaţi elementele invizibile executând clic pe View Visual Aids Invisible
Elements.
156
Dreamweaver MX Treceţi la linia următoare într-un

workspace paragraf
Dacă doriţi să treceţi la linia următoare în cadrul aceluiaşi paragraf, va
trebui să inseraţi un salt de linie (elementul <br /> în XHTML).
Pentru a crea cu Dreamweaver MX workspace un salt de linie în cadrul

aceluiaşi paragraf, folosiţi una din metodele prezentate mai jos:
9 Metoda 1 – Meniul Insert, via Special Characters Line Break;
9 Metoda 2 – Grupul de panouri Insert;
9 Metoda 3 – Shift + Enter.
Iată cum forţăm un salt de linie al celei de-a doua fraze din paragraful
„Dorim să ne cunoaştem şi să rămânem împreună! LUMINA BLANDĂ
este puternică şi nu doar atât!”.
Metoda 2
1. Executaţi clic înaintea cuvântului „LUMINA” cu care începe cea

de-a doua frază a textului introdus în pagina Document.
2. În grupul de panouri Insert executaţi clic pe subpanoul

Characters.
Remarcă. Se afişează subpanoul Characters (figura 4.37).
Figura 4.37
3. Executaţi clic pe butonul (Line Break), figura 4.38.
Figura 4.38
157
Punctul de inserţie se deplasează la începutul liniei următoare, dar
rămâne tot timpul în acelaşi paragraf (figura 4.39).
Figura 4.39
Remarcă. Pentru a vizualiza salturile de linie în pagina dumneavoastră Web aplicaţi

procedura prezentată la Dreamweaver 4 workspace.
Dreamweaver 4 Indentaţi un paragraf

workspace
În Dreamweaver 4 workspace, pentru un paragraf sunt permise

indentări stânga-dreapta (de mărime egală).
Pentru a indenta cu Dreamweaver 4 workspace un paragraf, folosiţi una

9 Metoda 1 – Meniul Text, via Indent;
Iată cum indentăm dreapta paragraful „Felicitări pentru răbdarea de a

ne fi descoperit!”.
158
Metoda 1
1. Selectaţi paragraful (figura 4.40).
Figura 4.40
2. Executaţi clic pe Text Indent.
Figura 4.41
Remarcă. Paragraful se afişează decalat, spre dreapta (vezi figura 4.42).
Figura 4.42

159
Figura 4.43
Remarci:
9 Atunci când aplicaţi indentări unui paragraf, Dreamweaver 4 workspace
utilizează elementul <BLOCKQUOTE> </BLOCKQUOTE>.
9 Selectaţi tag-ul <BLOCKQUOTE>, deschideţi panoul Reference şi citiţi
informaţiile care se afişează.
9 Citiţi Conversaţia 4, paragraful: HTML4- Indentaţi un paragraf (Liviu
Figura 4.44
Metoda 2
2. Executaţi clic pe butonul (Text Indent) din inspectorul

160
Figura 4.45
Remarci:
9 De fiecare dată când creaţi o nouă indentare, lăţimea paragrafului se
diminuează.
9 Pentru a indenta stânga paragraful menţionat, utilizaţi Metoda 1, modificând
pasul 2, după cum urmează:
2. Executaţi clic pe Text Outdent
sau, utilizaţi Metoda 2, modificând pasul 2 după cum urmează:
2. Executaţi clic pe butonul (Text Outdent) din inspectorul Properties.
Dreamweaver MX Indentaţi un paragraf

workspace
Pentru a indenta cu Dreamweaver MX workspace un paragraf, folosiţi

9 Metoda 1 – Meniul Text, via Indent;
9 Metoda 2 – Panoul Properties;
Iată cum indentăm dreapta paragraful „Felicitări pentru răbdarea de a

ne fi descoperit!”.
Metoda 3
3. În subpanoul Text, executaţi clic pe butonul (figura 4.46).
Figura 4.46
Remarcă. Paragraful se afişează indentat, spre dreapta.

161
Figura 4.47
Remarci:
9 În (X)HTML în afara utilizării foilor de stiluri în cascadă (CSS-1) nu este posibil
de a crea pentru prima linie a unui paragraf indentări stânga/dreapta.
9 Atunci când aplicaţi indentări unui paragraf, Dreamweaver utilizează
elementul HTML <blockquote>, care este prevăzut de W3C pentru punerea în
evidenţă a citatelor de text.
9 Citiţi Conversaţia 4, paragraful: XHTML - Indentaţi un paragraf (Liviu
Figura 4.48
162
Dreamweaver 4 Inseraţi un text preformatat

workspace
Preformatarea unui text permite crearea cu uşurinţă a coloanelor de text

în pagina dumneavoastră Web. Toate spaţiile definite de tag-ul HTML
<PRE> sunt conservate. La ora actuală, utilizarea tag-ului <PRE> este
din ce în ce mai redusă (vezi recomandarea consorţiului W3C).
Pentru a insera cu Dreamweaver 4 workspace un text preformatat,

9 Metoda 1 – Meniul Text, via Paragraph Format Preformatted

Text;
Iată cum inserăm un text preformatat „Bine aţi venit!”, lăsând între
cuvinte opt spaţii.
Metoda 1
1. Introduceţi textul „Bine aţi venit!”.
Figura 4.49
3. Executaţi clic pe Text Paragraph Format Preformatted

Text (figura 4.50).
163
Figura 4.50
4. Introduceţi câte opt spaţii între cuvinte.
Remarcă. Textul se afişează cu opt spaţii între cuvinte (figura 4.51).
Figura 4.51
Figura 4.52
164
Remarci:
9 Selectaţi tag-ul <PRE>, deschideţi panoul Reference şi citiţi informaţiile care
se afişează.
9 Citiţi Conversaţia 4, paragraful: HTML4- Comunicaţi browser-ului să afişeze
liniile vide, spaţiile suplimentare etc. (Liviu Dumitraşcu, (X)HTML, Editura
Universităţii din Ploieşti, 2003)
Figura 4.53
Metoda 2
3. În inspectorul Properties, afişaţi meniul Format şi apoi executaţi

clic pe Preformatted (figura 4.54).
Figura 4.54
Aplicaţii
Lăsaţi un spaţiu de 15 pixeli între primele două paragrafe.
Indicaţie. Pentru a ajusta spaţiul vertical, acţionaţi tasta Enter de câte ori este
necesar – 15 ori (vezi figura 4.55). Analizaţi codul HTML generat.
165
Figura 4.55
Lăsaţi un spaţiu de 25 de pixeli înaintea primei linii a textului: „Bine aţi venit!
Felicitări pentru răbdarea de a ne fi descoperit! Dorim să ne cunoaştem şi să
rămânem împreună! LUMINA BLANDĂ este puternică şi nu doar atât!”.
Indicaţie. Pentru a ajusta spaţiul vertical, acţionaţi bara de spaţii de câte ori
este necesar – 25 de ori (figura 4.56). Analizaţi codul HTML generat.
Figura 4.56
Dreamweaver MX Inseraţi un text preformatat

workspace
Pentru a insera cu Dreamweaver MX workspace un text preformatat,

9 Metoda 1 – Meniul Text, via Paragraph Format Preformatted
Text;
166
Iată cum inserăm un text preformatat „Bine aţi venit!”, lăsând între
cuvinte opt spaţii.
Metoda 3
1. Introduceţi textul.
2. Selectaţi textul pe care l-aţi introdus.
Figura 4.57
5. Introduceţi câte opt spaţii între cuvinte.
Figura 4.58
Remarcă. Citiţi Conversaţia 4, paragraful: XHTML- Comunicaţi browser-ului să afişeze

liniile vide, spaţiile suplimentare etc. (Liviu Dumitraşcu, (X)HTML, Editura Universităţii
din Ploieşti, 2003)
167
Figura 4.59
Dreamweaver 4 Creaţi un titlu

workspace
Când aplicaţi un antet, aliniat (stânga, dreapta, centru – mai puţin

justify) sau nu, textul apare bolduit, pe cel mult şase nivele – Header 1
(dimensiunea cea mai mare) la Header 6 (dimensiunea cea mai mică).
Pentru a defini un antet cu Dreamweaver 4 workspace, folosiţi una din

metodele prezentate mai jos:
9 Metoda 1 – Meniul Text, via Paragraph Format;
Iată cum afişăm centrat, pe trei nivele de titlu, paragraful „Bine aţi
venit!”.
Metoda 1
1. Selectaţi textul ce urmează a fi convertit în titlu (figura 4.60).

168
Figura 4.60
2. Centraţi textul, executând clic pe butonul (center) din

inspectorul Properties (figura 4.61).
Figura 4.61
3. Executaţi clic pe Text Paragraph Format Heading 1 (figura

4.62).
Figura 4.62
Remarcă. Titlul se afişează centrat, cu dimensiunea cea mai mare – H1 (figura 4.63).
169
Figura 4.63
Figura 4.64
Remarci:
9 Selectaţi tag-ul <H1>, deschideţi panoul Reference şi citiţi informaţiile care se
afişează. Utilizaţi meniul Description pentru a vizualiza atributul align.
9 Citiţi Conversaţia 4, paragraful: HTML4- Creaţi un titlu (Liviu Dumitraşcu,
5. Repetaţi pasul 3 înlocuind Heading1 cu Heading 2, Heading 3.
Figura 4.65
170
Remarci:
9 Selectaţi tag-urile <H2>, <H3> deschideţi panoul Reference şi citiţi
9 Utilizaţi meniul Description pentru a vizualiza atributul align.
Figura 4.66
Metoda 2
3. În inspectorul Properties, afişaţi meniul Format şi apoi executaţi

clic pe nivelul de titlu Heading 1 (figura 4.67).
Figura 4.67
Aplicaţie
Creaţi următoarele titluri centrate:
Primul titlu: Primul paragraf
Al doilea titlu: Un antet de nivel 3
Al treilea titlu: Al doilea paragraf
Al patrulea titlu: Ultimul Paragraf
Al cincilea titlu: Un antet de nivel 6

171
Atunci când un text conţine mai multe elemente care trebuie să fie, de
exemplu, centrate (paragrafe, antet-uri, imagini…), puteţi optimiza codul,
utilizând tag-ul <DIV> care permite crearea unei diviziuni logice în cadrul
documentului. Tag-ul <DIV> recunoaşte atributul align.
Iată cum definim diviziunea logică DIV în documentul HTML pentru afişarea
centrată a titlurilor menţionate.
1. Tastaţi şi inseraţi toate elementele necesare pentru a afişa codul sursă

(figura 4.68).
Figura 4.68
2. Introduceţi tag-ul:
<DIV align=”center”> (figura 4.69)
Figura 4.69
172
3. Introduceţi tag-ul de închidere </DIV> după toate elementele de
centrat (figura 4.70).
Figura 4.70
Remarci:
9 Selectaţi tag-ul <DIV>, deschideţi panoul Reference şi citiţi informaţiile care
se afişează.
9 Utilizaţi meniul Description pentru a vizualiza atributul align.
Figura 4.71
173
Dreamweaver MX Creaţi un titlu

workspace
Pentru a crea o ierarhie în paginile dumneavoastră Web, adăugaţi titluri

şi subtitluri.
Pentru a defini un antet cu Dreamweaver MX workspace, folosiţi una din

9 Metoda 1 – Meniul Text, via Paragraph Format;
Iată cum afişăm centrat, pe trei nivele de titlu, paragraful „Bine aţi
venit!”.
Metoda 3
1. Selectaţi textul ce urmează a fi convertit în titlu.
2. Centraţi textul.
Figura 4.72
5. Titlul se afişează centrat, bolduit cu caractere de cea mai mare

dimensiune.
6. Repetaţi pasul 4 executând clic pe butonul şi apoi pe
butonul .

174
Figura 4.73
Remarci:
9 Citiţi Conversaţia 4, paragraful: XHTML- Creaţi un titlu (Liviu Dumitraşcu,
9 În (X)HTML titlurile au fost create pentru a indica vizual importanţa lor într-un
document foarte mare.
Creaţi liste cu simboluri (simple),

Dreamweaver 4 numerotate (ordonate) şi
workspace
de definiţii
Listele permit crearea unei enumerări de elemente. În Dreamweaver, ca
şi în HTML puteţi crea liste cu simboluri (simple), liste numerotate
(ordonate), liste de definiţii. Aveţi de asemenea posibilitatea de a
imbrica listele, unele într-altele.
Creaţi o listă cu simboluri

Pentru a crea cu Dreamweaver 4 workspace o listă cu simboluri, folosiţi
175
9 Metoda 1 – Meniul Text, via List Unordered List;
9 Metoda 1 modificată – Selectaţi elementele listei Metoda 1;
Iată cum creăm cu Dreamweaver 4 workspace, o listă cu simboluri

pentru serviciile oferite de firma LUMINA BLÂNDĂ: turism, training,
service PC-uri.
Metoda 1
1. Introduceţi textul: „LUMINA BLÂNDĂ oferă următoarele

servicii:”, iar apoi acţionaţi tasta Enter (figura 4.74).
Figura 4.74
2. Executaţi clic pe Text List Unordered List (figura 4.75).
Figura 4.75
176
Remarcă. Se afişează primul bumb (punct negru), figura 4.76.
Figura 4.76
3. Tastaţi elementele listei, acţionând tasta Enter după fiecare

element. În momentul în care aţi terminat de introdus
elementele listei, acţionaţi de două ori tasta Enter (figura 4.77).
Figura 4.77
Figura 4.78
177
Remarci:
9 Selectaţi tag-urile <UL>, <LI>, deschideţi panoul Reference şi citiţi
9 Citiţi Conversaţia 4, paragraful: HTML4 - Creaţi o listă cu simboluri (Liviu
Figura 4.79
Metoda 1 modificată
1. Selectaţi elementele listei (figura 4.80).
Figura 4.80
2. Executaţi clic pe Text List Unordered List. Se afişează lista

cu simboluri (figura 4.81).
178
Figura 4.81
Metoda 2
1. Executaţi clic pe butonul (Unordered List) din inspectorul

Properties.

element. În momentul în care aţi terminat de introdus
elementele listei, acţionaţi de două ori tasta Enter.
1. Selectaţi elementele listei.
2. Executaţi clic pe butonul (Unordered list) din inspectorul

Properties.

179
Aplicaţie
Marcaţi elementele listei (cu simboluri) cu un pătrat.
Iată cum schimbaţi stilul marcajului pentru toate elementele listei.
1. Executaţi clic pe un element oarecare al listei.
Figura 4.82
2. Executaţi clic pe Text List Properties….
Remarcă. Puteţi, de asemenea utiliza inspectorul Properties, acţionând butonul

List Item (figura 4.83).
Figura 4.83
3. În meniul derulant List Type, selectaţi Bulleted List (figura 4.84).
Figura 4.84
4. Selectaţi Square din meniul derulant Style (figura 4.85).

180
Figura 4.85
Remarcă. Pentru a utiliza cel de-al treilea stil circle, va trebui să afişaţi codul sursă după
care să introduceţi atributul circle (figura 4.86).
Figura 4.86
5. În caseta de dialog List Properties executaţi clic pe butonul OK.
Remarcă. Se afişează lista formatată.
Figura 4.87
181
Remarcă. Selectaţi tag-ul <UL>, deschideţi panoul Reference şi utilizaţi meniul
Description pentru a vizualiza atributul type.
Figura 4.88
Creaţi o listă ordonată

Pentru a crea cu Dreamweaver 4 workspace o listă ordonată, folosiţi una
9 Metoda 1 – Meniul Text, via List Ordered List;
Iată cum creăm cu Dreamweaver 4 workspace o listă ordonată pentru

serviciile oferite de firma LUMINA BLÂNDĂ: turism, training, service
PC-uri.
Metoda 1
Modificaţi pasul 2 (vezi Metoda 1, Listă cu simboluri), după cum

urmează:
2. Executaţi clic pe List Ordered List (figura 4.89).

182
Figura 4.89
Remarcă. Se afişează 1 (figura 4.90).
Figura 4.90
Remarci:
9 Codul HTML generat este ilustrat în figura 4.91.
Figura 4.91
183
9 Pagina Web afişată în Internet Explorer este ilustrată în figura 4.92.
Figura 4.92
Modificaţi pasul 2 (vezi Metoda 1 modificată, Listă cu simboluri) după

cum urmează:
2. Executaţi clic pe Text List Ordered List
Metoda 2
Modificaţi pasul 1 (vezi Metoda 2, Listă cu simboluri) după cum

urmează:
1. Executaţi clic pe butonul (Ordered List) din inspectorul

Properties.
Figura 4.93
Remarcă. Se afişează lista ordonată din figura 4.94.
Figura 4.94
184
Remarci:
9 Codul HTML generat este ilustrat în figura 4.95.
9 Selectaţi tag-ul <OL>, deschideţi panoul Reference şi citiţi informaţiile care se
afişează.
Figura 4.95
9 Pagina Web afişată în Internet Explorer este ilustrată în figura 4.96.
Figura 4.96
1. Selectaţi elementele listei.

Properties.
3. Analizaţi codul HTML.

185
Aplicaţii
Schimbaţi stilul de numerotare din lista ordonată creată anterior cu stilul:

cifre romane minuscule (i, ii, iii…).
1. Executaţi clic pe un element oarecare al listei numerotate.
2. Executaţi clic pe Text List Properties…
Se afişează caseta de dialog List Properties (figura 4.97).
Figura 4.97
Remarcă. Puteţi, de asemenea utiliza inspectorul Properties, acţionând butonul

List Item (figura 4.98).
Figura 4.98
3. Selectaţi în caseta List Type opţiunea Numbered List (figura 4.99).
Figura 4.99
186
4. Selectaţi în caseta Style stilul Roman Small [i, ii, iii …] (figura 4.100).
Figura 4.100
5. Executaţi clic pe butonul OK. Se afişează lista numerotată, cu stilul

Roman Small (figura 4.101).
Figura 4.101
Figura 4.102
187
Remarci:
9 Selectaţi tag-ul <OL>, deschideţi panoul Reference şi utilizaţi meniul
Description pentru a vizualiza atributul type..
9 Citiţi Conversaţia 4, paragraful: HTML4- Creaţi o listă ordonată (Liviu
Figura 4.103
Schimbaţi stilul Roman Small din lista ordonată creată anterior cu stilul
Alphabet Large (A, B, C…).
Indicaţie. Selectaţi în zona Style stilul Alphabet Large (A, B, C…), via Text List
Properties… (figura 4.104).
Figura 4.104
Remarcă. Se afişează lista numerotată cu stilul Alphabet Large (A, B, C…), figura 105.
Figura 4.105
188
Schimbaţi numărul de ordine iniţial (1) din stilul Number (1, 2, 3…) cu
numărul 7.
Indicaţie. Selectaţi în zona Style stilul Number (1, 2, 3…) şi tastaţi 7 în caseta
Start Count (Number), via Text List Properties….
Creaţi o listă de definiţii

Iată cum creăm cu Dreamweaver 4 workspace o listă de definiţii –
aceeaşi pe care am creat-o şi în (X)HTML.
1. Executaţi clic pe Text List Definition List (figura 4.106).
Figura 4.106
2. Introduceţi textul „Lista cu simboluri” (prima entitate ce

urmează a fi definită) apoi acţionaţi tasta Enter (figura 4.107).
Figura 4.107
189
3. Introduceţi definiţia pentru primul element al listei, iar apoi
acţionaţi tasta Enter (figura 4.108).
Figura 4.108
4. Introduceţi al doilea element al listei „Lista numerotată”, iar

apoi acţionaţi tasta Enter (figura 4.109).
Figura 4.109
5. Introduceţi definiţia pentru cel de-al doilea element al listei. În

momentul în care aţi terminat de introdus elementele listei,
acţionaţi de două ori tasta Enter (figura 4.110).
190
Figura 4.110
Figura 4.111
Remarci:
9 Selectaţi tag-urile <DL>, <DT>, <DD>, deschideţi panoul Reference şi citiţi
9 Citiţi Conversaţia 4, paragraful: HTML4- Creaţi o listă de definiţii (Liviu

191
Figura 4.112
Remarcă. Pentru a repera ce nivel al listei aţi introdus, priviţi cu atenţie bara de
stare a ferestrei document. Tot timpul, aceasta indică tag-ul HTML în care vă
aflaţi: <DL> / <DT> / <DD>.
Creaţi o listă imbricată

Cu Dreamweaver 4 workspace puteţi imbrica listele, unele într-altele
pentru a obţine mai multe nivele ierarhice vizibile, cu o indentare a listei
imbricate.
Iată cum creăm în Dreamweaver 4 workspace aceeaşi listă imbricată pe

care aţi realizat-o în HTML.

Properties.
2. Introduceţi prima linie a listei „Partea întâi”, apoi acţionaţi tasta

Enter.
3. Executaţi clic pe butonul (Text Indent) din inspectorul

Figura 4.113
192
4. Introduceţi liniile: „Capitolul 1”, „Capitolul 2” corespunzătoare
acestui nivel. După fiecare linie acţionaţi tasta Enter (figura
4.114).
Figura 4.114
5. Executaţi clic pe butonul (Text Outdent) din inspectorul

Figura 4.115
Se afişează prima parte a listei imbricate (figura 4.116).
Figura 4.116
6. Introduceţi restul listei respectând paşii anteriori (figura 4.117).

193
Figura 4.117
7. Acţionaţi de două ori tasta Enter.
8. Schimbaţi stilul Number (1, 2, 3…) în Roman Large (I, II, III…),
figura 4.118.
Figura 4.118
9. Schimbaţi stilul Number (1, 2, 3…) în Alphabet Large (A, B, C…)

pentru toate cele trei liste imbricate (nested).

194
Figura 4.119
Creaţi liste cu simboluri (simple),

Dreamweaver MX numerotate (ordonate) şi
workspace
de definiţii
Pentru a structura o listă de elemente, adăugaţi simboluri sau numere în
faţa fiecărui element (figura 4.120).
LISTA
SIMPLĂ NUMEROTATĂ DE DEFINIŢII
• turism; 1. turism; HTML
• training; 2. training; Hyper Text Markup Language
• service PC-uri. 3. service PC-uri. XHTML
Extended Hyper Text Markup
Language
Figura 4.120 XML
Extensible Markup Language
195
Creaţi o listă cu simboluri
Pentru a crea cu Dreamweaver MX workspace o listă cu simboluri,
9 Metoda 1 – Meniul Text, via List Unordered List;
9 Metoda 3 modificată – Selectaţi elementele listei Metoda 3.
Iată cum procedăm pentru a crea cu Dreamweaver MX workspace, o

listă cu simboluri, aceeaşi pe care aţi creat-o cu Dreamweaver 4
workspace.
Metoda 3

servicii:” iar apoi acţionaţi tasta Enter.
3. În subpanoul Text, executaţi clic pe butonul (Unordered

List), figura 4.121.
Figura 4.121

element.
5. Acţionaţi de două ori tasta Enter în momentul în care aţi

terminat de introdus elementele listei (figura 4.122).
196
Figura 4.122
Figura 4.123
Remarci:
9 Pentru a extinde o listă cu simboluri, executaţi clic la finele ultimei linii după
care acţionaţi tasta Enter.
9 Citiţi Conversaţia 4, paragraful: XHTML- Creaţi o listă cu simboluri (Liviu

197
Figura 4.124
Aplicaţii
Marcaţi elementele listei simple cu un pătrat.
Marcaţi elementele listei simple cu un cerc (vezi Dreamweaver 4 workspace).

Utilizaţi inspectorul de tag-uri pentru a schimba valoarea atributului type din
tag-ul <ul>.
Creaţi o listă ordonată

Pentru a crea o listă ordonată cu Dreamweaver MX workspace, folosiţi
9 Metoda 1 – Meniul Text, via List Ordered List;

Iată cum procedăm pentru a crea cu Dreamweaver MX workspace o listă
ordonată, aceeaşi pe care aţi creat-o cu Dreamweaver 4 workspace.

servicii:”, iar apoi acţionaţi tasta Enter.
2. Introduceţi şi selectaţi elementele listei.

198
4. În subpanoul Text, executaţi clic pe butonul (Ordered list),

figura 4.125.
Figura 4.125
Figura 4.126
Figura 4.127
Aplicaţii
Schimbaţi stilul de numerotare din lista ordonată creată anterior cu stilul

Roman Small: cifre romane minuscule (i, ii, iii …) – vezi Dreamweaver 4
workspace.
199
Schimbaţi stilul Roman Small cu stilul Alphabet Large (A, B, C…) – vezi
Schimbaţi numărul de ordine iniţial (1) din stilul Number (1, 2,3…) cu
numărul 7.
Creaţi o listă de definiţii

Pentru a crea o listă de definiţii cu Dreamweaver MX workspace, folosiţi
9 Metoda 1 – Meniul Text, via List Definition List;
Iată cum procedăm pentru a crea cu Dreamweaver MX workspace o listă

de definiţii, aceeaşi pe care am creat-o cu Dreamweaver 4 workspace.
Metoda 2
2. În subpanoul Text, executaţi clic pe butonul (Definition

List), figura 4.128.
Figura 4.128
3. Introduceţi primul element al listei „Lista cu simboluri”, iar apoi

acţionaţi tasta Enter.
4. Introduceţi definiţia pentru primul element al listei, iar apoi

5. Introduceţi al doilea element al listei „Lista numerotată”, iar

apoi acţionaţi tasta Enter.
6. Introduceţi definiţia pentru cel de-al doilea element al listei.

200
7. Acţionaţi de două ori tasta Enter în momentul în care aţi
terminat de introdus elementele listei.
Figura 4.129
Remarcă. Citiţi Conversaţia 4, paragraful: XHTML- Creaţi o listă de definiţii (Liviu

Figura 4.130
201
Creaţi liste imbricate
Cu Dreamweaver MX puteţi de asemenea crea liste imbricate sau
nested, folosind una din metodele prezentate la Dreamweaver 4
workspace.
Aplicaţii
Creaţi o listă imbricată, aceeaşi pe care aţi creat-o cu Dreamweaver 4.
Creaţi lista nested prezentată în figura 4.131.
Figura 4.131
1. Executaţi clic pe butonul (Ordered List) din panoul Properties.
2. Introduceţi „Limbaje informatice”, iar apoi acţionaţi tasta Enter.
3. Executaţi clic pe butonul (Text Indent) din panoul Properties

(figura 4.115).
4. Executaţi clic pe butonul (Unordered List) din panoul Properties.
5. Introduceţi liniile corespunzătoare acestui nivel; după fiecare linie

6. Executaţi clic pe butonul (Text Outdent) din inspectorul Properties.
7. Introduceţi restul listei respectând paşii anteriori.

202
Figura 4.132
Figura 4.133
203
1. Cum creaţi un paragraf cu Dreamweaver?
2. Ce tipuri de alinieri sunt permise în Dreamweaver MX?
3. Cu creaţi un salt de linie cu Dreamweaver MX?
4. Descrieţi o metodă Dreamweaver MX pentru crearea unui titlu.
5. Descrieţi metodele Dreamweaver MX workspace pentru crearea
următoarelor tipuri de liste:
9 cu simboluri;
9 numerotate;
9 de definiţii.
6. Folosiţi butoanele ul, ol, li din subpanoul Text (grupul de panouri
Insert) pentru a crea direct, în codul sursă XHTML mai multe tipuri de
liste.
9 www.mashat.com
9 www.cinemascope.com/photos
Conversaţia 5
Inseraţi şi personalizaţi o linie orizontală

cu Dreamweaver MX
•••••••••••••••••••••••••••••••••••••••••
f Dreamweaver 4 workspace, MX workspace – Inseraţi o linie orizontală
f Dreamweaver MX workspace – Coloraţi o linie orizontală
f Dreamweaver 4 workspace – Definiţi lungimea şi înălţimea unei linii
orizontale
f Dreamweaver 4 workspace – Aliniaţi o linie orizontală
f Dreamweaver MX workspace – Personalizaţi o linie orizontală
•••••••••••••••••••••••••••••••••••••••••
Dreamweaver 4 Inseraţi o linie orizontală

workspace
În Dreamweaver aveţi posibilitatea de a insera o linie (bară) orizontală

pentru a separa diferite zone ale documentului dumneavoastră. De notat
că formatarea acestei linii este foarte sumară.
Pentru a insera cu Dreamweaver 4 workspace o linie orizontală, folosiţi

9 Metoda 1 – Meniul Insert, via Horizontal Rule;

204
Iată cum separăm printr-o linie orizontală primele două paragrafe ale
paginii dumneavoastră.
Metoda 1
1. Executaţi clic la finele primului paragraf (figura 5.1).
Figura 5.1
2. Executaţi clic pe Insert Horizontal Rule (figura 5.2).
Figura 5.2
Remarcă. Se inserează o linie orizontală pe toată lungimea ferestrei (figura 5.3).

205
Figura 5.3
3. Executaţi clic la finele celui de-al doilea paragraf (figura 5.4).
4. Executaţi clic pe Insert Horizontal Rule. Se inserează o linie

orizontală pe toată lungimea ferestrei (figura 5.4).
Figura 5.4
Figura 5.5
206
Remarci:
9 Selectaţi tag-ul <HR>, deschideţi panoul Reference şi citiţi informaţiile care se
afişează.
9 Citiţi Conversaţia 5, paragraful: HTML4 – Inseraţi o linie orizontală (Liviu
Figura 5.6
Metoda 2
Se modifică paşii 2 şi 4 din Metoda 1, după cum urmează:
2,4. În panoul Insert, categoria Common, executaţi clic pe butonul
(Insert Horizontal Rule), figura 5.7.
Figura 5.7
207
Dreamweaver MX Inseraţi o linie orizontală

workspace
Pentru a delimita diferite zone ale paginii dumneavoastră Web, inseraţi

cu Dreamweaver MX workspace o linie orizontală.
Pentru a insera o linie orizontală cu Dreamweaver MX workspace, folosiţi

9 Metoda 1 – Meniul Insert, via Horizontal Rule;
Iată cum separăm printr-o linie orizontală primele două paragrafe ale
paginii dumneavoastră, aceleaşi pe care le-aţi separat cu Dreamweaver
4 workspace .
Metoda 2
1. Executaţi clic la finele primului paragraf.
2. În grupul de panouri Insert, executaţi clic pe subpanoul

Common (figura 5.8).
3. În subpanoul Common, executaţi clic pe butonul (Horizontal

Rule), figura 5.8.
Figura 5.8
Remarcă. Se inserează o linie orizontală pe toată lungimea ferestrei.
4. Executaţi clic la finele celui de-al doilea paragraf.
5. În subpanoul Common, executaţi clic pe butonul (Horizontal

Rule).
Remarcă. Se inserează o linie orizontală pe toată lungimea ferestrei.

208
Figura 5.9
Remarcă. Citiţi Conversaţia 5, paragraful: XHTML – Inseraţi o linie orizontală

Figura 5.10
Dreamweaver MX Coloraţi o linie orizontală

workspace
Dreamweaver-ul vă permite să aplicaţi sau nu o umbră liniilor orizontale,

dar nu vă permite să schimbaţi culoarea unei linii orizontale (vizibilă
numai cu Internet Explorer, non standard W3C). Dacă ţineţi neapărat să
209
coloraţi o linie orizontală, utilizaţi Macromedia Fireworks (Adobe
Photoshop sau orice altă aplicaţie) cu care să realizaţi propria imagine
de forma unei linii orizontale în culori.
Remarcă. Zona Horizontal Rule vizibilă în Inspectorul/Panoul Properties permite

atribuirea unui nume liniei orizontale, în cazul în care veţi utiliza această linie într-un
script (figura 5.11).
Figura 5.11
Dreamweaver 4 Definiţi lungimea şi înălţimea unei

workspace
linii orizontale
Cu Dreamweaver puteţi personaliza o linie orizontală modificând
lungimea, lăţimea etc.
Iată cum definim în procente (75%) lungimea primei linii orizontale.
1. Selectaţi prima linie orizontală în vederea personalizării acesteia

(figura 5.12).
Figura 5.12
2. În zona W din inspectorul Properties introduceţi valoarea 75%

(valoare relativă, exprimată în procente), figura 5.13.
Figura 5.13
210
Remarcă. Dacă doriţi să aplicaţi liniei orizontale şi efectul de umbră, activaţi opţiunea
Shading din inspectorul Properties, figura 5.14.
Figura 5.14
Dezactivaţi opţiunea Shading dacă doriţi ca bara să aibă un aspect „plin”!
Figura 5.15
Remarcă. Dimensiunea, umbra au fost modificate conform cerinţelor (vezi figura 5.15).
Figura 5.16
Remarcă. Selectaţi tag-ul <HR>, deschideţi panoul Reference şi utilizaţi meniul derulant
Description pentru a vizualiza atributul width.

211
Figura 5.17
Iată cum modificăm lungimea şi înălţimea celei de-a doua linii orizontale
cu 25 respectiv 10 pixeli.
1. Selectaţi a doua linie orizontală în vederea personalizării

acesteia.
2. În zona Horizontal Rule – W din inspectorul Properties

introduceţi valoarea 25 (valoare absolută, exprimată în pixeli),
iar în zona Horizontal Rule – H introduceţi valoarea 10 (valoarea
absolută, exprimată în pixeli), figura 5.18.
Remarcă. Înălţimea (Horizontal Rule - H) este întotdeauna exprimată în pixeli.
Figura 5.18
Remarcă. Cea de-a doua linie orizontală se afişează conform specificaţiilor (figura 5.19).
Figura 5.19
212
Figura 5.20
Remarci:
9 Selectaţi tag-ul <HR>, deschideţi panoul Reference, utilizaţi meniul derulant
Description pentru a vizualiza atributul size.
9 Citiţi Conversaţia 5, paragraful: HTML4 – Definiţi lungimea şi înălţimea unei
linii (Liviu Dumitraşcu, (X)HTML, Editura Universităţii din Ploieşti, 2003).
Figura 5.21
Dreamweaver 4 Aliniaţi o linie orizontală

workspace
Iată cum aliniem la dreapta pe o lungime de 75% din lăţimea totală a

paginii, linia orizontală care separă primele două paragrafe ale paginii.
213
1. Selectaţi prima linie orizontală în vederea alinierii acesteia
(figura 5.22).
Figura 5.22
2. În meniul derulant Align din inspectorul Properties identificaţi

opţiunea Right, iar apoi introduceţi valoarea 75% în zona W
(figura 5.23).
Figura 5.23
Figura 5.24
214
Remarci:
9 Selectaţi tag-ul <HR>, deschideţi panoul Reference, utilizaţi meniul derulant
Description pentru a vizualiza atributul align.
9 Citiţi Conversaţia 5, paragraful: HTML4 – Aliniaţi o linie orizontală (Liviu
Figura 5.25
Pentru a centra pe o lungime de 75 de pixeli linia care separă cel de-al

doilea paragraf de restul textului respectaţi procedura descrisă în cele ce
urmează.
1. Selectaţi cea de-a doua linie orizontală.
2. În zona Horizontal Rule – W introduceţi valoarea 75 iar în

meniul derulant Align selectaţi Center (figura 5.26).
Figura 5.26
Remarcă. Linia orizontală se afişează conform specificaţiilor (figura 5.27).
Figura 5.27
215
Figura 5.28
Figura 5.29
Dreamweaver MX Personalizaţi o linie orizontală

workspace
Iată cum procedăm pentru a personaliza prima linie orizontală: lungimea

75%; aliniere dreapta; efect de umbră.
1. Selectaţi prima linie orizontală care separă primele două

paragrafe.
2. În zona W din panoul Properties introduceţi valoarea 75%

(figura 5.30).
216
3. În meniul derulant Align din panoul Properties alegeţi opţiunea
Right (figura 5.30).
4. Activaţi opţiunea Shading din panoul Properties (figura 5.30).
Figura 5.30
Figura 5.31
Figura 5.32
217
Aplicaţie
Centraţi pe o lungime de 75 de pixeli linia care separă cel de-al doilea

paragraf de restul textului.
Indicaţie. Introduceţi 75 în zona W, iar în meniul derulant Align (panoul

Properties) selectaţi Center.
218
1. Descrieţi pe scurt o metodă Dreamweaver 4 workspace de inserare în
pagina dumneavoastră a unei linii orizontale.
2. Cum folosiţi grupul de panouri Insert pentru inserarea unei linii

orizontale?
3. Cum coloraţi cu Dreamweaver MX workspace o linie orizontală?
4. Descrieţi pe scurt procedura Dreamweaver 4 workspace/Dreamweaver

MX workspace pentru alinierea unei linii orizontale.
5. Cum personalizaţi o linie orizontală cu Dreamweaver MX workspace?
9 www.flashkit.com
9 www.werehere.com
9 www.macromedia.com/software/trial
9 www.libpng.org/pub/png
Conversaţia 6
Creaţi şi utilizaţi foi de stiluri în cascadă

cu Dreamweaver MX
•••••••••••••••••••••••••••••••••••••••••
f Dreamweaver MX – Tipuri de stiluri CSS folosite în Dreamweaver
f Dreamweaver 4 workspace, MX workspace – Creaţi stiluri CSS
f Dreamweaver 4 workspace, MX workspace – Creaţi un stil CSS cu
opţiunea Make Custom Style (class)
f Dreamweaver 4 workspace, MX workspace – Aplicaţi un stil CSS (o clasă)
unui paragraf
f Dreamweaver 4 workspace, MX workspace – Modificaţi un stil CSS (o
clasă)
f Dreamweaver 4 workspace, MX workspace – Creaţi un stil CSS cu
opţiunea Redefine HTML Tag şi aplicaţi-l unui text
f Dreamweaver 4 workspace, MX workspace – Modificaţi link-urile cu
selectorii CSS
f Dreamweaver 4 workspace, MX workspace – Creaţi şi aplicaţi o foaie de
stiluri externă
•••••••••••••••••••••••••••••••••••••••••
Tipuri de stiluri CSS folosite în

Dreamweaver MX
Dreamweaver
Cu Dreamweaver MX puteţi crea două tipuri de foi de stiluri: foi de stiluri

interne şi foi de stiluri externe.
220
Tipurile de stiluri CSS pe care le puteţi crea în cele două tipuri de foi, cu
Dreamweaver MX sunt:
9 Make Custom Style (class) – permite crearea unei clase;

9 Redefine HTML Tag – permite personalizarea tag-urilor
HTML;
9 CSS Selector – permite redefinirea tag-ului ancoră
<a>.
Remarcă. Citiţi Conversaţia 6 (Liviu Dumitraşcu, (X)HTML, Editura Universităţii din
Ploieşti, 2003), paragrafele:
9 (X)HTML – Foile de stiluri în cascadă CSS1, CSS2, CSS3;
9 (X)HTML – Creaţi stiluri CSS;
9 (X)HTML – Categorii de proprietăţi de stiluri.
Dreamweaver 4 Creaţi stiluri CSS

workspace
Iată cum procedaţi pentru a crea un stil CSS în pagina unui document
deschis, cu Dreamweaver 4 workspace.
1. Folosiţi una din metodele prezentate mai jos pentru a afişa

caseta de dialog New Style:
9 Metoda 1 – Meniul Window, via CSS Styles butonul

(New Style);
9 Metoda 2 – Meniul Text, via CSS Styles New CSS Style;
9 Metoda 3 – Meniul Window, via CSS Styles New CSS Style.
Remarcă. Se deschide caseta de dialog New CSS Style (figura 6.1).
Figura 6.1
221
2. În caseta de dialog New CSS Style, în zona:
9 Name – introduceţi numele stilului;

9 Type – alegeţi una din opţiunile: Make Custom Style (class),
care permite crearea unui stil personalizat numit
clasă; Redefine HTML Tag, care permite formatarea
unui element HTML existent; Use CSS Selector, care
permite într-o primă etapă definirea link-urilor
pentru patru stări: a:link; a:hover; a:active;
a:visited;
9 Define In – alegeţi una din opţiunile: New Style Sheet File,
care permite crearea unei foi de stiluri externă; This
Document Only, care permite crearea unei foi de
stiluri internă.
3. În caseta de dialog New CSS Style, executaţi clic pe butonul
OK.
Aplicaţii
Afişaţi stilurile CSS.
1. Executaţi clic pe Window CSS Styles (figura 6.2).
Figura 6.2
222
Remarcă. Se afişează panoul CSS Styles (figura 6.3).
Figura 6.3
Identificaţi icon-urile; (Attach Style Sheet); (New Style); (Edit

Style Sheet); (Delete CSS Style) de la baza panoului.
Dreamweaver MX Creaţi stiluri CSS

workspace
Iată cum procedaţi pentru a crea un stil CSS în pagina unui document
deschis, cu Dreamweaver MX workspace.
1. Folosiţi una din metodele prezentate mai jos:
9 Metoda 1 – Meniul Window, via CSS Styles butonul

(New CSS Style);
9 Metoda 2 – Meniul Text, via CSS Styles New CSS Style;
9 Metoda 3 – Meniul Window, via CSS Styles New CSS
Style;
9 Metoda 4 – Panoul CSS Styles, via butonul New CSS
Style.
223
Se deschide caseta New CSS Style.
2. În caseta de dialog New Style, în zona:
9 Name – introduceţi numele stilului;

9 Type – alegeţi una din opţiunile: Make Custom Style;
Redefine HTML Tag; Use CSS Selector;
9 Define In – alegeţi una din opţiunile: New Style Sheet File;
This Document Only.
OK.
Aplicaţie
Afişaţi stilurile CSS.
1. Executaţi clic pe Window CSS Styles.
Se afişează panoul CSS Styles (figura 6.4).
Figura 6.4
2. În panoul CSS Styles, executaţi clic pe butonul radio:
9 Apply Styles – se afişează lista stilurilor CSS ale documentului

(figura 6.5);
224
Figura 6.5
9 Edit Style – se afişează stilurile CSS şi caracteristicile acestora

(figura 6.6).
Figura 6.6
Dreamweaver 4 Creaţi un stil CSS cu opţiunea

workspace Make Custom Style (class)
Pentru a crea o clasă (un stil personalizat) cu Dreamweaver 4

workspace, folosiţi una din metodele prezentate mai jos:
225
9 Metoda 1 – Meniul Window, via CSS Styles icon-ul (Edit
Style Sheet);
9 Metoda 2 – Meniul Window, via CSS Styles icon-ul (New
Style);
9 Metoda 3 – Meniul Window, via CSS Styles New Style;
9 Metoda 4 – Meniul Text, via CSS Styles New Style;
9 Metoda 5 – Panoul Launcher.
Iată cum creăm clasa:
.parag {font-family: Georgia, Times New Roman, Times, Serif;

font-size: 24 px; font-weight: bold; color: #00FF00}.
Acest stil personalizat îl vom aplica paragrafului: „LUMINA BLÂNDĂ este
puternică şi nu doar atât!”.
Metoda 1
1. Executaţi clic pe Window CSS Styles.
2. În panoul CSS Styles, care se afişează executaţi clic pe icon-ul

(Edit Style Sheet), figura 6.7.
Figura 6.7
Remarcă. Se deschide caseta de dialog Edit Style Sheet.

226
3. În caseta de dialog Edit Style Sheet, executaţi clic pe butonul
New (figura 6.8).
Figura 6.8
Remarcă. Se deschide caseta de dialog New CSS Style.

4. În caseta de dialog New CSS Style (figura 6.9), în zona:
9 Name – introduceţi numele stilului personalizat (.parag);
9 Type – activaţi butonul radio Make Custom Style (class);
9 Define In – activaţi butonul radio This Document Only.
Figura 6.9
227
OK.
Remarcă. Se deschide caseta de dialog CSS Style definition for .parag în care urmează
să configuraţi atributele stilului.
6. În caseta de dialog CSS Style definition for .parag (figura 6.10),

în categoria Type, zona:
9 Font – selectaţi Georgia, Times New Roman, Times, Serif;
9 Size – selectaţi valoarea 24;
9 Weight – selectaţi bold;
9 Color – introduceţi #00FF00 (culoarea verde).
Figura 6.10
7. Executaţi clic pe butonul OK (pentru a salva stilul).
Remarcă. Se afişează caseta de dialog Edit Style Sheet.

Done (figura 6.11).
228
Figura 6.11
Remarcă. În panoul CSS Styles se afişează noul stil personalizat (.parag), figura 6.12.
Figura 6.12
Metoda 2
Se modifică pasul 2 (Metoda 1) după cum urmează:
2. În panoul CSS Styles, executaţi clic pe icon-ul (New Style).

229
Metoda 3
Se modifică paşii 2 şi 3 (Metoda 1) după cum urmează:
2. Deschideţi meniul local al panoului CSS Styles şi alegeţi New

CSS Style… (figura 6.13).
Figura 6.13
Metoda 4
Se modifică paşii 1 – 3 (Metoda 1) după cum urmează:
1. Executaţi clic pe Text CSS Styles New CSS Style (figura

6.14).
Figura 6.14
230
Metoda 5
1. În panoul Launcher, executaţi clic pe butonul (CSS Style),

figura 6.15.
Figura 6.15
Dreamweaver MX Creaţi un stil CSS cu opţiunea

workspace Make Custom Style (class)
Pentru a crea un stil personalizat (o clasă), cu Dreamweaver MX

9 Metoda 1 – Meniul Window, via CSS Styles icon-ul (Edit

Style Sheet);
9 Metoda 2 – Meniul Window, via CSS Styles icon-ul (New
CSS Style);
9 Metoda 3 – Meniul Window, via CSS Styles New CSS Style;
9 Metoda 4 – Meniul Text, via CSS Styles New Style;
9 Metoda 5 – Panoul CSS Styles.
Iată cum creăm clasa (aceeaşi pe care aţi creat-o cu Dreamweaver 4
workspace):
.parag {font-family: Georgia, Times New Roman, Times, Serif;

font-size: 24 px; font-weight: bold; color: #00FF00}.
231
Aplicaţi acest stil paragrafului: „LUMINA BLANDA este puternică şi nu
doar atât!”.
Metoda 5
1. În panoul CSS Styles, deschideţi meniul local ( ) şi alegeţi

CSS Style (figura 6.16).
Figura 6.16
2. În panoul CSS Styles, executaţi clic pe (New CSS Style),

figura 6.17.
Figura 6.17
Remarcă. Se deschide caseta de dialog New CSS Style.

232
3. În caseta de dialog New CSS Style, executaţi următoarele
acţiuni:
9 în zona Name – introduceţi .parag;
9 în zona Type – activaţi butonul radio Make Custom

Style (class);
9 în zona Define in – activaţi butonul radio This Document

Only;
9 – executaţi clic pe butonul OK.
4. În caseta de dialog Style definition for .parag executaţi

9 configuraţi atributele stilului .parag (zonele Font, Size,

Weight, Color);
9 executaţi clic pe butonul OK.
Remarcă. În panoul CSS Styles se afişează noul stil personalizat .parag (figura 6.18).
5. În caseta de dialog Edit Style Sheet, care se afişează, executaţi

clic pe butonul Done.
Figura 6.18
233
Aplicaţi un stil CSS (o clasă) unui

Dreamweaver 4
workspace paragraf
Iată cum procedăm pentru a aplica stilul CSS personalizat .parag,

paragrafului: „LUMINA BLÂNDĂ este puternică şi nu doar atât!”.
2. Afişaţi panoul CSS Styles.
3. În panoul CSS Styles, selectaţi stilul CSS personalizat .parag

(figura 6.19).
Figura 6.19
Remarci:
9 Stilul selectat se aplică automat paragrafului din documentul Dreamweaver.
9 Pentru a aplica imediat stilul personalizat, asiguraţi-vă că în panoul CSS
Styles, opţiunea Apply este activată.

234
Figura 6.20
Remarcă. Citiţi Conversaţia 6, paragraful: HTML 4 – Creaţi şi aplicaţi o clasă (Liviu

Figura 6.21
235
Dreamweaver MX Aplicaţi un stil CSS (o clasă) unui

workspace paragraf
Iată cum procedăm pentru a aplica stilul CSS personalizat .parag,

paragrafului: „LUMINA BLÂNDĂ este puternică şi nu doar atât!”.
2. În panoul CSS Styles executaţi clic pe „Apply Styles” (figura

6.22).
Figura 6.22
3. În panoul CSS Styles, executaţi clic pe stilul CSS personalizat

.parag (figura 6.23).
Figura 6.23
236
Remarcă. Stilul .parag este aplicat paragrafului selectat.
Figura 6.24
Figura 6.25
237
Dreamweaver 4 Modificaţi un stil CSS (o clasă)

workspace
Pentru a modifica un stil CSS personalizat (o clasă), folosiţi una din

9 Metoda 1 – Panoul CSS Style, via icon-ul (Edit Style Sheet);
9 Metoda 2 – Meniul Text, via CSS Styles Edit Style Sheet;
9 Metoda 3 – Panoul CSS Styles, via Edit Style Sheet.
Iată cum procedăm pentru a modifica stilul CSS personalizat .parag,

după cum urmează:
.parag {font – family: Times New Roman, Times, Serif;

font – size: 36 px;
color: #0000FF}.
Metoda 1
1. Afişaţi panoul CSS Styles.
2. În panoul CSS Styles, executaţi clic pe icon-ul (Edit Style

Sheet).
Remarcă. Se deschide caseta de dialog Edit Style Sheet.

Edit.
Remarcă. Se deschide caseta de dialog Style definition for .parag.
4. În caseta de dialog CSS Style definition for .parag, în categoria

Type (figura 6.26), zona:
9 Font – selectaţi Times New Roman, Times, serif;
9 Size – selectaţi 36 px;
9 Color – selectaţi #0000FF.

238
Figura 6.26
Metoda 2
2. Executaţi clic pe Text CSS Styles Edit Style Sheet.
Metoda 3
2. Deschideţi meniul local din panoul CSS Styles ( ) şi executaţi

clic pe Edit Style Sheet.
Aplicaţii
Anulaţi stilul CSS personalizat .parag.
Indicaţie. În panoul CSS Styles, executaţi clic pe stilul none.
Duplicaţi stilul CSS personalizat .parag.

239
Indicaţie. În caseta de dialog Edit Style Sheet… selectaţi stilul .parag, iar apoi
executaţi clic pe butonul Duplicate.
Suprimaţi stilul CSS personalizat .parag.
Indicaţie. În panoul CSS Styles, executaţi clic pe butonul (Delete Style).
Exportaţi stilul CSS personalizat .parag.
Indicaţie. În panoul CSS Styles, în meniul local ( ) alegeţi Export Style Sheet.
Creaţi două clase: avantaje, dezavantaje, care se vor aplica următoarelor

două paragrafe:
9 Avantaje: Se câştigă mult timp în activitatea de formatare.
9 Dezavantaje: Nu toate navigatoarele recunosc foile de stil.
Remarcă. Cele două clase sunt definite în Conversaţia 6, paragraful: HTML 4 – Creaţi şi
aplicaţi o clasă (Liviu Dumitraşcu, (X)HTML, Editura Universităţii din Ploieşti, 2003).
Indicaţie. Creaţi cele două clase cu una din metodele prezentate. Aplicaţi apoi
cele două clase, paragrafelor listate în cadrul aplicaţiei.
Dreamweaver MX Modificaţi un stil CSS (o clasă)

workspace
Iată cum procedăm pentru a modifica stilul CSS personalizat .parag,

(acelaşi pe care l-aţi modificat cu Dreamweaver 4 workspace).
.parag {font – family: Times New Roman, Times, serif;

font – size: 36 px;
color: #0000FF}
1. În panoul CSS Styles, executaţi clic Edit Styles (figura 6.27).
240
Figura 6.27
2. Executaţi dublu clic pe numele stilului personalizat .parag

(figura 6.28).
Figura 6.28
241
3. În caseta de dialog CSS Style definition for .parag care se
afişează, în zonele Font, Size, Color introduceţi noile
caracteristici ale stilului .parag.
Remarcă. Stilul .parag a fost modificat.

Aplicaţie
Anulaţi un stil CSS.
Indicaţie. În panoul CSS Styles, executaţi clic pe Apply Styles.
Creaţi un stil CSS cu opţiunea

Dreamweaver 4 Redefine HTML Tag şi aplicaţi-l
workspace
unui text
Redefine HTML Tag, cea de-a doua opţiune din caseta de dialog New
CSS Style (figura 6.29) vă dă acces la o listă de tag-uri pe care le puteţi
redefini mult mai simplu ca în HTML.
Figura 6.29
Iată cum definim cu Dreamweaver 4 workspace stilul:
h1 {text – align: center}.

242
Vom aplica acest stil textului: „LUMINA BLÂNDĂ”.
Remarcă. În mod prestabilit, tag-ul <H1> aliniază textul (obiectul) la stânga.
1. Afişaţi caseta de dialog New CSS Style.
2. În caseta de dialog New Style, în zona (figura 6.30):
9 Type – activaţi butonul radio Redefine HTML Tag;
9 Tag – executaţi clic pe butonul , iar apoi selectaţi

tag-ul h1;
9 Define In – activaţi butonul radio This Document Only.
Figura 6.30
Remarcă. Se afişează caseta de dialog CSS Style definition for h1, unde categoria Type
este selectată în mod automat.
4. În caseta de dialog CSS Style definition for h1 (figura 6.31),

executaţi următoarele acţiuni:
9 selectaţi categoria Block;
9 în zona Text Align (categoria Block) selectaţi Center.

243
Figura 6.31
Remarci:
9 Dreamweaver 4 workspace centrează imediat textul formatat cu <H1>.
9 Tag-urile HTML redefinite nu apar în lista cu stiluri din panoul CSS Styles.

244
Figura 6.32
Figura 6.33
Aplicaţii
Creaţi cu Dreamweaver 4 workspace stilul:
h1 {text-align: center;
font-size: 24 pt;
color: #FF0000;
background: cyan}.
Aplicaţi acest stil textului: „LUMINA BLANDA”.
Indicaţie. În caseta de dialog CSS Style definition for h1 selectaţi categoria Type
şi apoi categoria Background.
Creaţi cu Dreamweaver 4 workspace stilul:
p {text – align: center; font – size: 18 pt; color: blue}.

245
Aplicaţi acest stil paragrafului „Felicitări pentru răbdarea de a ne fi descoperit!”.
Creaţi cu Dreamweaver 4 workspace stilurile:
9 h1{text-align: right; font-size: 24 pt; color: red; background: cyan};

9 h2{text-align: left; font-size: 18 pt; color: purple};
9 p{text-align: left; font-size: 14 pt; color: blue}.
Aplicaţi stilurile h1, h2 şi p următoarelor texte prezentate mai jos:
9 LUMINA BLANDA;
9 Bine aţi venit!;
9 Felicitări pentru răbdarea de a ne fi descoperit!.
Creaţi un stil CSS cu opţiunea

Dreamweaver MX
workspace
Redefine HTML Tag şi aplicaţi-l
unui text
Iată cum definim cu Dreamweaver MX workspace stilul:
h1 {text – align: center}.
Vom aplica acest stil textului: „LUMINA BLÂNDĂ”.

acţiuni (figura 6.34):
9 în zona Type – activaţi butonul radio Redefine HTML

Tag;
9 în zona Tag – selectaţi tag-ul h1;
9 în zona Define In – activaţi butonul radio This Document
Only;
246
Figura 6.34
3. În caseta de dialog CSS Style definition for h1, executaţi

9 selectaţi categoria Block;

9 selectaţi în zona Text Align (categoria Block) Center;
Remarcă. Se afişează caseta de dialog Edit Style Sheet.

Done.
Figura 6.35
247
Figura 6.36
Aplicaţii
Creaţi cu Dreamweaver MX workspace stilul:
body {font-style: italic}.
Aplicaţi acest stil textului integral al paginii.
body {font-size: 30 pt}.
Aplicaţi acest stil textului integral al paginii.
Creaţi cu Dreamweaver MX workspace următoarele stiluri:
9 h1 {color: red};
9 h2 {color: red};
9 p {color: blue}.
Aplicaţi aceste stiluri următoarelor trei texte:
9 Bine aţi venit!
9 Felicitări pentru răbdarea de a ne fi descoperit!
9 LUMINA BLANDA este puternică şi nu doar atât!
Creaţi cu Dreamweaver MX workspace următoarele stiluri:
9 body {background-color: purple};
9 p {color: blue; background-color: white}.

248
Aplicaţi aceste stiluri:
9 fundalului unei pagini;
9 paragrafului „LUMINA BLANDA este puternică şi nu doar atât! Dorim

să ne cunoaştem şi să rămânem împreună!” din cadrul aceleiaşi
pagini.
body{background-image: URL (C:\Windows\Web\Wallpage\ follow.jpg)}.
Creaţi cu Dreamweaver MX stilul:
9 p {letter-spacing: 30 em}.
Aplicaţi acest stilul paragrafului: „LUMINA BLANDA este puternică şi nu doar

atât!”
9 h1 {text-decoration: blink}.
Aplicaţi acest stilul titlului de nivel 1: „Bine aţi venit!”.
9 h1 {text-decoration: blink}.
Aplicaţi acest stilul titlului de nivel: „Bine aţi venit!”
Modificaţi link-urile cu selectorii

Dreamweaver 4
workspace CSS
Modificarea link-urilor cu selectorii CSS Selector, cea de-a treia opţiune

din caseta de dialog New CSS Style (figura 6.37) este o practică
frecventă şi uneori chiar amuzantă.
249
Figura 6.37
Stilurile CSS Selector – a: link; a: hover; a: active; a: visited redefinesc

tag-ul ancoră <a>.
Iată cum folosim selectorul a: hover pentru a crea un efect de

hiperlegătură derulantă.
1. Creaţi un stil nou (New Style).
2. În caseta de dialog New CSS Style, în zona Type, selectaţi

butonul radio Use CSS Selector (figura 6.37).
Remarcă. Cele patru stiluri de link-uri se afişează imediat în meniul derulant

(figura 6.38).
Figura 6.38

acţiuni:
9 afişaţi meniul derulant în zona Selector şi selectaţi a: hover,

tipul de link pe care dorim să-l personalizăm.
9 în zona Define In activaţi butonul radio New Style Sheet File.
250
Remarcă. Se afişează caseta de dialog CSS Style Definition for (figura 6.38).
4. În caseta de dialog CSS Style definition for, în categoria Type,

selectaţi o culoare – green după care executaţi clic pe butonul
OK (figura 6.39).
Figura 6.39
5. Creaţi o hiperlegătură în pagina Dumneavoastră Web, pentru a

vedea selectorul a: hover pe care l-aţi definit (vezi figura 6.40).
Figura 6.40
251
6. Salvaţi pagina.
Figura 6.41
Figura 6.42
Remarcă. Efectul (a:hover) este disponibil numai în Internet Explorer. Când cursorul
dumneavoastră se află deasupra hiperlegăturii, aceasta îşi schimbă culoarea.
252
Aplicaţii
Convertiţi stilurile CSS în tag-uri HTML. În acest mod, reuşiţi să fiţi amabili cu
vizitatorii care folosesc browser-e mai vechi.
Iată care este procedura pe care trebuie s-o urmaţi:
1. Salvaţi pagina Web.
2. Executaţi clic pe File Convert 3.0 Browser Compatible.
Se afişează caseta de dialog Convert to 3.0 Browser Compatible (vezi figura

6.43).
Figura 6.43
3. În fereastra Convert to 3.0 Browser Compatible în zona Convert,

selectaţi butonul radio CSS Styles to HTML Markup, iar apoi executaţi
clic pe butonul OK (figura 6.44).
Figura 6.44
Figura 6.45
253
Remarci:
9 Noua pagină Web conţine tag-uri <font> în loc de stiluri CSS.
9 Evident că nu toate stilurile CSS pot fi convertite în tag-uri HTML. În acest
caz, ele vor fi generate.
Figura 6.46
Folosiţi stilurile CSS pentru a elimina sublinierea hiperlegăturilor (nu toţi

vizitatorii sunt de acord cu ... această aplicaţie! Noi o folosim în scopuri
didactice!).
1. În panoul CSS Styles redefiniţi tag-ul <a>.
2. În caseta de dialog Style definition, în categoria Text, alegeţi pentru

parametrul Decoration, valoarea None.
Utilizaţi stilul CSS Selector pentru a redefini grupul de tag-uri HTML: <h1>,
... ,<h6>. Modificaţi pentru toate cele 6 tag-uri de titlu, proprietatea de aliniere
a textului (left) în (center).
1. În caseta Duplicate, introduceţi numele tag-urilor <h1> până la <h6>

separate prin virgulă.
2. Modificaţi proprietatea de aliniere a textului la valoarea center.

254
Dreamweaver MX Modificaţi link-urile cu selectorii

workspace CSS
Cu selectorii CSS puteţi modifica formatarea link-urilor pentru a

îmbunătăţi prezentarea paginilor dumneavoastră Web. Aceşti selectori
(a: link; a: hover; a: active; a: visited) permit suprimarea sublinierilor.
Iată cum folosim selectorul a: hover, tipul de link pe care dorim să-l
personalizăm.

9 în zona Type – alegeţi Use CSS Selector;

9 în zona Selector – alegeţi a: hover;
9 în zona Define In – activaţi butonul radio, New Style Sheet
File;
Figura 6.47
3. În caseta de dialog CSS Style definition for, care se afişează, în

categoria Type, selectaţi o culoare – green, după care executaţi
clic pe butonul OK.
255
4. Creaţi o hiperlegătură „Bine aţi venit!” în pagina dumneavoastră
Web.
5. Salvaţi pagina.
Figura 6.48
7. Vizualizaţi pagina Web într-un browser şi testaţi efectul a: hover

(figura 6.49).
Figura 6.49
256
Dreamweaver 4 Creaţi şi aplicaţi o foaie de stiluri

workspace externă
Puteţi crea foi de stiluri externe în acelaşi mod în care aţi creat foile de
stiluri interne. Singura deosebire este aceea că foile de stiluri externe
trebuie să fie salvate ca un fişier text separat, cu extensia .css.
Remarcă. Dreamweaver stabileşte în mod automat link-ul către paginile Web cărora
doriţi să le aplicaţi definiţiile de stil.
Iată care este procedura pe care vă invităm s-o urmaţi pentru a crea o
foaie de stiluri externă în care definiţi stilul:
.parag {font-family: Georgia, Times New Roman, Times, serif;

font-size: 24 px;
font-weight: bold;
color: #00FF00}.
1. Creaţi fişierul stil.css.
1.1 Creaţi un nou document.
1.2 Afişaţi caseta de dialog New CSS Style.
1.3 În caseta de dialog New CSS Style, în zona:
9 Name – introduceţi numele stilului personalizat,

.parag (vedeţi clasa .parag);
9 Type – activaţi butonul radio Make Custom Style
(class);
9 Define In – activaţi butonul radio New Style Sheet File;
1.4 Executaţi clic pe butonul OK (fig. 6.50).

257
Figura 6.50
Remarcă. Se deschide caseta de dialog Save Style Sheet File As.
1.5 În caseta de dialog Save Style Sheet File As în zona:
9 Save – selectaţi folder-ul foii de stiluri;

9 File name – introduceţi numele foii de stil, stil.css;
9 Save as type – alegeţi Style Sheet Files (*.css);
9 URL – indicaţi calea de acces (dacă este cazul!);
9 Relative TO – păstraţi opţiunea Document, activă.
1.6 În caseta de dialog Save Style Sheet File As, executaţi clic
pe butonul Save.
1.7 În caseta de dialog CSS Style Definition for .parag in stil

.css, zona Type (figura 6.51):
9 indicaţi parametrii stilului;

258
Figura 6.51
Remarcă. Noul stil apare în fereastra CSS Styles cu simbolul său particular ( ), care
indică un link, figura 6.52.
Figura 6.52

259
Figura 6.53
Remarci:
9 Executaţi clic pe F8 pentru a vizualiza fişierul stil.css.
9 Citiţi Conversaţia 6, paragraful HTML 4 – Creaţi şi aplicaţi o foaie de stiluri
externă (Liviu Dumitraşcu, (X)HTML, Editura Universităţii din Ploieşti, 2003).
3. Creaţi link-ul către foaia de stiluri externă.
3.2 Executaţi clic pe Text CSS Styles Attach Style Sheet

(sau, în panoul CSS Styles, executaţi clic în meniul local şi
alegeţi Attach Style Sheet sau, în panoul CSS Styles,
executaţi clic pe butonul (Attach Style Sheet)).
Remarcă. Se deschide caseta de dialog Style Sheet File.
3.3 În caseta de dialog Style Sheet File, executaţi clic pe

stil.css şi apoi executaţi clic pe butonul Select.
Remarcă. Toate stilurile din această foaie de stiluri apar în panoul CSS Styles.

260
Figura 6.54
5. Aplicaţi foaia de stiluri externă unei pagini (figura 6.55).
Figura 6.55
Figura 6.56
Remarcă. Dreamweaver 4 workspace aplică foaia de stiluri externă paginii Web

selectate.
261
Aplicaţie
Modificaţi fişierul stil.css (extern).
1. Accesaţi un document Dreamweaver deschis şi legat la foaia de stiluri

externă.
2. Executaţi clic pe Text CSS Styles Edit Style Sheet.
3. În caseta de dialog Edit Style Sheet, care se afişează:
9 selectaţi stil.css (link);

9 executaţi clic pe butonul Edit.
4. În caseta de dialog CSS Style Definition for .parag in stil .css, efectuaţi
modificările pe care le consideraţi necesare.
5. Salvaţi foaia de stiluri, după care executaţi clic pe butonul Done.
Remarci:
9 Toate tag-urile care utilizează acest stil sunt actualizate.
9 Acţionaţi tasta F8 iar apoi executaţi dublu clic pe icon-ul fişierului stil.css
pentru a deschide foaia de stiluri.
Figura 6.57

262
Figura 6.58
Remarcă. Dreamweaver aplică foaia de stiluri externă paginii Web selectate.

Aplicaţie
Creaţi şi aplicaţi o foaie de stiluri externă stilh2.css în care definiţi stilul:
h2 {font – size: 18 pt; color: green}.
Aplicaţi foaia de stiluri externă creată.
Dreamweaver MX Creaţi şi aplicaţi o foaie de stiluri

workspace externă
Pentru a utiliza aceleaşi stiluri în pagini diferite, va trebui să creaţi o

foaie de stiluri externă, într-un fişier text separat, cu extensia .css.
Pentru a crea o foaie de stiluri externă cu Dreamweaver MX workspace,

9 Metoda 1 – Meniul Text via CSS Styles New CSS Style;
9 Metoda 2 – Panoul CSS Styles via butonul (New CSS Style);
9 Metoda 3 – Panoul CSS Styles via meniul local New CSS Style;
9 Metoda 4 – Meniul Text via CSS Styles Edit Style Sheet.

263
Iată cum procedaţi pentru a crea o foaie de stiluri externă în care vom
defini clasa .parag, după cum urmează:
.parag {font-family: Georgia, Times New Roman, Times, serif;

font-size: 24 px;
font-weight: bold;
color: #00FF00}.
Vom aplica foaia de stiluri externă unei pagini.
Metoda 4
1. Creaţi un nou document.
2. Executaţi clic pe Text CSS Styles Edit Style Sheet (figura

6.59).
Figura 6.59
Remarcă. Se deschide caseta de dialog Edit Style Sheet (figura 6.60).
3. În caseta de dialog Edit Style Sheet, executaţi clic (figura 6.60),

pe butonul New.
264
Figura 6.60
Remarcă. Când creaţi o nouă foaie de stiluri, va trebui să creaţi un nou stil.
4. În caseta de dialog New CSS Style care se afişează, executaţi

următoarele acţiuni (figura 6.61):
9 în zona Name – introduceţi numele stilului;

9 în zona Type – activaţi butonul radio Make Custom
Style (class);
9 în zona Define In – activaţi butonul radio New Style Sheet
File;
Figura 6.61
265
5. În caseta de dialog Save Style Sheet File As care se afişează,
executaţi următoarele acţiuni (figura 6.62):
9 în zona Save in – selectaţi folder-ul foii de stiluri;

9 în zona File name – introduceţi stil2.css;
9 în zona Save As Type – alegeţi Style Sheet File (*.css);
9 în zona URL – indicaţi calea de acces (dacă este
cazul!);
9 în zona Relative To – păstraţi opţiunea Document, activă;
9 – executaţi clic pe butonul Save.
Figura 6.62
6. În caseta de dialog CSS Styles Definition for .parag in stil2.css,

în zona Type:
9 indicaţi parametrii stilului;

266
7. Executaţi clic pe butonul Done din caseta de dialog Edit Style
Sheet (figura 6.63).
Figura 6.63
Remarcă. Atunci când utilizaţi o foaie de stiluri existentă, modificaţi pasul 3, după cum
urmează:
3. În caseta de dialog Edit Style Sheet, executaţi următoarele acţiuni (figura
6.64):
9 executaţi clic pe butonul Link;
9 în zona File/URL introduceţi calea de acces;
Figura 6.64

267
Figura 6.65
9. Creaţi link-ul către foaia de stiluri externă.
9.2 Afişaţi caseta de dialog Link External Style Sheet cu una

din metodele prezentate la punctul 3 (Creaţi link-ul către
foaia de stiluri externă cu Dreamweaver 4 workspace).
9.3 În caseta de dialog Link External Style Sheet, executaţi

9 în zona File/URL introduceţi calea de acces;
9 activaţi butonul radio Link;
Figura 6.66
268
Figura 6.67
11. Aplicaţi foaia de stiluri externă unei pagini (figura 6.68).
Figura 6.68

269
Figura 6.69
Aplicaţii
Creaţi o foaie de stiluri externă direct, în cod HTML.
Iată care este procedura pe care trebuie s-o aplicaţi.
1. Executaţi clic pe File New.
2. În caseta de dialog New Document, în subpanoul General, executaţi

9 în categoria Base Page executaţi clic pe CSS;
9 executaţi clic pe butonul Create.

270
Figura 6.70
3. În fereastra <<CSS>> care se afişează, introduceţi codul de descriere

al stilurilor (figura 6.71).
Figura 6.71
4. Salvaţi fişierul cu extensia .css.
Remarcă. Evident, puteţi realiza link-uri către paginile HTML dorite.

271
Folosiţi (dacă sunteţi în criză de inspiraţie) un model de foi de stiluri.
2. În caseta de dialog New Document, în subpanoul General executaţi

9 în categoria CSS Styles Sheet – alegeţi un model;
9 executaţi clic pe butonul Create.
Figura 6.72
3. Salvaţi această foaie de stil în folder-ul site-ului dumneavoastră.

272
1. Definiţi tipurile de stiluri CSS pe care le puteţi crea cu Dreamweaver
MX.
2. Creaţi cu Dreamweaver 4 workspace următoarea clasă:
.parag{font-family: Times New Roman, Times, Serif;
font-size:24 px;
color:#00FF00}.
3. Suprimaţi stilul CSS personalizat .parag.
4. Creaţi cu Dreamweaver MX workspace stilul
body{background-color: red}.
5. Creaţi o foaie de stiluri externă în care definiţi stilul:
.parag{font-family: Times New Roman, Times, Serif;
font-size:24 px;
font-weight:bold;
color:#0000FF}.
9 www.dhtmlzone.com
9 www.cinemascope.com/photos
Conversaţia 7
Inseraţi imagini cu Dreamweaver MX

•••••••••••••••••••••••••••••••••••••••••
f Dreamweaver 4 workspace, MX workspace – Inseraţi o imagine
f Dreamweaver 4 workspace, MX workspace – Aliniaţi orizontal o imagine
f Dreamweaver 4 workspace, MX workspace – Aplicaţi o bordură unei
imagini
f Dreamweaver 4 workspace, MX workspace – Definiţi un text de înlocuire
(substituţie) pentru o imagine
f Dreamweaver 4 workspace, MX workspace – Aliniaţi vertical o imagine în
raport cu un text
f Dreamweaver MX workspace – Inseraţi un spaţiu rezervat pentru o
imagine … în construcţie
f Dreamweaver MX workspace – Plasaţi text în jurul unei imagini
f Dreamweaver 4 workspace, MX workspace – Adăugaţi mai multe spaţii în
jurul unei imagini
f Dreamweaver 4 workspace, MX workspace – Aplicaţi o imagine de
background
f Dreamweaver 4 workspace, MX workspace – Convertiţi o imagine în
legătură
f Dreamweaver 4 workspace, MX workspace – Creaţi o imagine cu zone
reactive
•••••••••••••••••••••••••••••••••••••••••
274
Dreamweaver 4 Inseraţi o imagine

workspace
Prima versiune HTML nu lua în considerare imaginile, obiectivul principal

nefiind crearea unei pagini … „frumoase” cu transferul rapid de
informaţie. La ora actuală, Web-ul nu poate fi conceput fără imagine,
sunet, video…. Imaginile în format GIF, JPEG sau PNG pe care le inseraţi
în paginile dumneavoastră Web pot avea mai multe finalităţi: imagini de
informare, imagini pentru crearea legăturilor (link-urilor) hipertext etc.
Pentru a insera o imagine cu Dreamweaver 4 workspace într-o pagină

Web, folosiţi una din metodele prezentate mai jos:
9 Metoda 1 – Meniul Insert, via Image;
Iată cum inseraţi în pagina dumneavoastră Web, cu Dreamweaver 4

workspace imaginea „Smokey Light”, din folder-ul Site, în colţul din
stânga sus al paginii. Imaginea „Smokey Light” (Lumină … mai puţin
blândă!) în format .JPEG (.JPG) se va afişa într-o casetă de 85 x 85
pixeli.
Metoda 1
Pentru inserarea şi alinierea imaginii (Smokey Light) într-un frame cu

dimensiunile 85 x85 pixeli, vom aplica Metoda 1 în mai multe etape,
după cum urmează:
Etapa 1 – Inserarea imaginii (800 x600 JPEG);
Etapa 2 – Parametrizarea imaginii (85 x 85 JPEG);
Etapa 3 – Alinierea (left) imaginii.

275
Etapa 1
1. Executaţi clic în locul în care doriţi să se insereze imaginea

(figura 7.1).
Figura 7.1
2. Executaţi clic pe Insert Image (figura 7.2).
Figura 7.2
Remarcă. Se afişează caseta de dialog Select Image Source (figura 7.3).
Figura 7.3
3. Executaţi clic pe Smokey Light.jpg (figura 7.4).
4. Analizaţi imaginea selectată (800 x 600 JPEG) în zona Image

Preview (figura 7.4).
276
5. În meniul derulant Relative To: indicaţi calea de acces:
Document (figura 7.4).
Figura 7.4
Remarci:
9 Atunci când inseraţi o imagine, trebuie să precizaţi calea de acces la această
imagine: absolută, relativă la document sau relativă la rădăcina site-ului.
9 Utilizaţi legături absolute atunci când faceţi referiri la o sursă care se găseşte
în afara folder-ului site-ului dumneavoastră.
Exemplu: <img src=”http://www. ...”>
9 Utilizaţi legături relative la document atunci când nu este necesar să indicaţi
URL-urile relative la protocol, site.
Exemplu:
<img src=”Follow.jpg”>
6. Executaţi clic pe butonul OK (figura 7.4).
Remarcă. Imaginea este inserată în pagina Web (figura 7.5).
Figura 7.5
277
Figura 7.6
Remarci:
9 Spaţiile goale din interiorul denumirilor fişierelor sunt cauza apariţiei
caracterelor %20.
9 Selectaţi tag-ul <IMG>, deschideţi panoul Reference şi citiţi informaţiile care
se afişează. Utilizaţi meniul Description pentru a vizualiza atributul src.
9 Citiţi Conversaţia 7, paragraful HTML4- Inseraţi o imagine (Liviu Dumitraşcu,
Figura 7.7
Etapa 2
Iată cum parametrizăm imaginea Smokey Light:
9 lungimea – 85 pixeli;
9 lăţimea – 85 pixeli.
1. Selectaţi imaginea (inserată).
Dimensiunile imaginii apar automat în panoul Properties. În zona Image,

Dreamweaver afişează dimensiunea imaginii (figura 7.8).
278
Figura 7.8
Remarcă. În zona Image introduceţi numele imaginii în cazul în care doriţi să fie apelată
dintr-un script.
2. Introduceţi în zona width (W) valoarea 85 (pixeli), figura 7.9.
Figura 7.9
3. Introduceţi în zona height (H) valoarea 85 (pixeli), figura 7.10.
Figura 7.10
Remarcă. Imaginea se afişează la noii parametrii.
Figura 7.11
Figura 7.12
279
Remarci:
9 Selectaţi tag-ul <IMG>, deschideţi panoul Reference, utilizaţi meniul
Description şi vizualizaţi atributele width, height.
9 Inseraţi icon-ul de conformitate .
Figura 7.13
Etapa 3
În sfârşit, pentru a alinia la stânga imaginea inserată (Smokey Light) în

pagina dumneavoastră Web respectaţi paşii descrişi în continuare.
1. Selectaţi imaginea.
2. În panoul Properties executaţi clic pe butonul (Left).
Figura 7.14

280
Figura 7.15
Metoda 2
2. Executaţi clic pe butonul (Insert Image) din panoul Insert,

categoria Common (figura 7.16).
Figura 7.16
Remarci:
9 Calea de acces către imagine mai poate fi indicată tastând calea (Smokey
Light.jpg) în zona Src din panoul Properties (figura 7.17).
Figura 7.17
9 Puteţi modifica drumul de acces către imagine executând clic pe icon-ul

sau glisând icon-ul (către imaginea de inserat) (figura 7.18).
Figura 7.18
281
Aplicaţie
Redimensionaţi imaginea sigla.jpg creată cu aplicaţia Macromedia Fireworks.
Dreamweaver permite redimensionarea unei imagini în trei moduri: indicând

dimensiunea în pixeli (1), în procente (2) sau modificând pur şi simplu imaginea
glisând unul din punctele () de pe contur (3).
Care este cea mai bună tehnică pentru redimensionarea unei imagini într-o
pagină Web?
Cel mai bine este să utilizăm o aplicaţie dedicată, ca de exemplu Fireworks.
Atunci când redimensionaţi o imagine cu Dreamweaver, ea este mărită sau

micşorată în funcţie de noile dimensiuni, dar fişierul imagine nu-şi modifică
dimensiunile. În pagina Web noua imagine riscă de a nu fi de aceeaşi calitate
cu originalul.
Procedura pe care vă invităm s-o aplicaţi este descrisă în continuare.
2. Executaţi clic pe Commands Optimize Image in Fireworks…
Remarcă. Se afişează caseta de dialog Find Source(figura 7.19).
Figura 7.19
Remarcă. Dreamweaver vă întreabă dacă doriţi să utilizaţi un document original pentru a

efectua modificările. Răspundeţi prin Da sau Nu.
3. Acţionaţi butonul Yes pentru a găsi fişierul sursă în format .png creat
în Fireworks / acţionaţi butonul No pentru a deschide fişierul în
fereastra de optimizare a Fireworks-ului (figura 7.19).
282
4. Efectuaţi modificările dorite (figura 7.20).
Figura 7.20
5. Executaţi clic pe Update (figura 7.20).
Remarcă. Puteţi modifica o imagine utilizând un editor extern, pe care îl puteţi deschide
acţionând butonul Edit din panoul Properties (figura 7.21).
Figura 7.21
Dreamweaver MX Inseraţi o imagine

workspace
Pentru a insera o imagine cu Dreamweaver MX workspace într-o pagină

Web, folosiţi una din metodele prezentate mai jos:
9 Metoda 1 – Meniul Insert, via Image;

283
Iată cum inseraţi în pagina dumneavoastră Web, cu Dreamweaver MX
workspace aceeaşi imagine (Smokey Light) pe care aţi inserat-o cu
Dreamweaver 4 workspace. Imaginea, în format .JPG se va afişa într-o
casetă de 85 x 85 pixeli.
Metoda 2
1. Executaţi clic în locul în care doriţi să se insereze imaginea.
2. În subpanoul Common din cadrul grupului de panouri Insert,
executaţi clic pe butonul (Image), figura 7.22.
Figura 7.22
3. În caseta de dialog Select Image Source (figura 7.23) executaţi

9 În zona Select File Name From – lăsaţi activată opţiunea File

System;
9 – Executaţi clic pe Smokey
Light .JPG;
9 În meniul derulant Relative to: – indicaţi calea de acces:
Document.
9 – Executaţi clic pe butonul
OK;
284
Figura 7.23
Remarcă. Parametrii imaginii apar în panoul Properties (figura 7.24).
Figura 7.24
4. În zona Image, introduceţi numele imaginii în cazul în care

doriţi ca aceasta să fie apelată dintr-un script.
5. În zonele W şi H introduceţi valoarea 85 (pixeli).
Remarcă. Pentru a reveni la valorile iniţiale executaţi clic pe butonul (Reset Size).
285
6. În panoul Properties, executaţi clic pe butonul (Left), figura
7.25.
Figura 7.25
Figura 7.26
Remarcă. Citiţi Conversaţia 7, paragraful XHTML – Inseraţi o imagine (Liviu

Figura 7.27
286
Dreamweaver 4 Aliniaţi orizontal o imagine

workspace
Cu Dreamweaver 4 workspace puteţi alinia orizontal (stânga, centru,

dreapta) o imagine în pagina dumneavoastră Web.
Iată cum procedaţi pentru a centra cu Dreamweaver 4 workspace

sigla.jpg, sigla societăţii „LUMINĂ BLÂNDĂ”.
1. Selectaţi imaginea şi analizaţi ce se întâmplă în panoul

Figura 7.28
2. Acţionaţi tasta pentru a plasa punctul de inserţie exact la

dreapta imaginii (figura 7.29).
Figura 7.29
3. Acţionaţi tasta Enter pentru ca imaginea să se poziţioneze pe

propria linie.
4. Executaţi din nou clic pe imagine pentru a o selecta (figura

7.30).
Figura 7.30
287
5. Executaţi clic pe butonul center ( ) din panoul Properties
(figura 7.31).
Figura 7.31
Remarcă. Imaginea se afişează centrat în cadrul paginii (figura 7.32).
Figura 7.32
Figura 7.33
Remarcă. Puteţi de asemenea alinia la dreapta sigla.jpg executând clic pe butonul

(Right) din panoul Properties – pasul 5.
Figura 7.34
288
Dreamweaver MX Aliniaţi orizontal o imagine

workspace
Pentru a alinia orizontal o imagine în cadrul unei pagini Web, folosiţi

panoul Properties şi executaţi clic pe unul din cele trei butoane în funcţie
de tipul de aliniere dorit: left, center sau right.
Iată cum procedaţi pentru a centra cu Dreamweaver MX workspace

imaginea sigla.jpg, aceeaşi pe care aţi aliniat-o şi cu Dreamweaver 4
workspace.
1. Selectaţi imaginea şi analizaţi ce se întâmplă în panoul

Properties.
2. Executaţi clic pe butonul (Center) din panoul Properties

(figura 7.35).
Figura 7.35
3. Analizaţi codul XHTML generat(figura 7.36).
Figura 7.36
289
Remarcă. Citiţi Conversaţia 7, paragraful XHTML – Aliniaţi orizontal o imagine (Liviu
Figura 7.37
Dreamweaver 4 Aplicaţi o bordură unei imagini

workspace
Puteţi încadra imaginea într-un chenar de orice culoare!
Iată cum aplicaţi o bordură neagră de 13 pixeli imaginii sigla.jpg.
1. Selectaţi imaginea (figura 7.38).
Figura 7.38
2. În panoul Properties, zona Border, tastaţi valoarea 13 (pixeli)

care reprezintă lăţimea bordurii (figura 7.39).
290
Figura 7.39
Remarcă. În jurul imaginii se afişează o bordură, de aceeaşi culoare (neagră) cu textul

paginii (figura 7.40).
Figura 7.40
Figura 7.41
Remarci:
Description şi vizualizaţi atributul border.
9 Citiţi Conversaţia 7, paragraful HTML 4 – Aplicaţi o bordură unei imagini (Liviu

291
Figura 7.42
Dreamweaver MX Aplicaţi o bordură unei imagini

workspace
Pentru a pune în valoare imaginile dumneavoastră, adăugaţi-le borduri

folosind panoul Properties.
Iată cum aplicaţi o bordură neagră de 13 pixeli, imaginii sigla.jpg.
2. În panoul Properties, zona Border, tastaţi valoarea 13 (pixeli).
Figura 7.43
292
Remarcă. Citiţi Conversaţia 7, paragraful XHTML – Aplicaţi o bordură unei imagini (Liviu
Dreamweaver 4 Definiţi un text de înlocuire

workspace (substituţie) pentru o imagine
Iată cum definim cu Dreamweaver 4 workspace textul alternativ „Sigla

LUMINA BLÂNDĂ”.
Remarcă. Textul de înlocuire (substituţie) este folosit:

9 în locul imaginii pentru navigatoarele în mod text;
9 în mod temporar, în aşteptarea încărcării complete a imaginii;
9 atunci când legătura cu imaginea sursă este întreruptă;
9 pentru a permite navigatoarelor cu sinteză vocală de a citi textul alternativă.
1. Selectaţi imaginea căreia i se va asocia un text de înlocuire
(substituţie), figura 7.44.
Figura 7.44
2. În panoul Properties, în zona Alt, introduceţi textul de

substituţie „Sigla LUMINA BLÂNDĂ” (figura 7.45).
Figura 7.45
293
Remarcă. Zona Alt vă permite să indicaţi un text de substituţie al imaginii utilizat de
Internet Explorer şi de Netscape Navigator pentru a afişa o „bulă Help” atunci când
pointer-ul este deasupra imaginii (figura 7.46).
Figura 7.46
3. Acţionaţi tasta Enter. Dacă imaginea nu se afişează atunci când

consultaţi pagina Web într-un browser, ea va fi înlocuită de
textul de substituţie „Sigla LUMINA BLANDA” (figura 7.47).
Figura 7.47
Figura 7.48
294
Remarci:
Description şi vizualizaţi atributul alt.
9 Inseraţi icon-ul de conformitate .

9 Citiţi Conversaţia 7, paragraful HTML 4 – Definiţi un text de înlocuire
(substituţie) pentru o imagine (Liviu Dumitraşcu, (X)HTML, Editura
Universităţii din Ploieşti, 2003).
Figura 7.49
Dreamweaver MX Definiţi un text de înlocuire

workspace (substituţie) pentru o imagine
Dacă un utilizator a configurat navigatorul său să nu afişeze imaginile,
este important de a numi fiecare imagine în parte.
Iată cum definim cu Dreamweaver MX workspace textul de înlocuire

„Sigla LUMINA BLÂNDA” pentru imaginea sigla.jpg.
1. Selectaţi imaginea sigla.jpg.
2. În panoul Properties, în zona Alt, introduceţi textul de

substituţie „Sigla LUMINA BLÂNDA” (figura 7.50).
Figura 7.50
295
Figura 7.51
Remarcă. Citiţi Conversaţia 7, paragraful XHTML – Definiţi un text de înlocuire

(substituţie) pentru o imagine (Liviu Dumitraşcu, (X)HTML, Editura Universităţii din
Ploieşti, 2003).
Figura 7.52
Aliniaţi vertical o imagine în raport

Dreamweaver 4
workspace cu un text
Iată cum aliniem vertical (top) imaginea „sigla.jpg” în raport cu textul

„LUMINA BLANDĂ”.
296
Figura 7.53
2. Afişaţi meniul Align din panoul Properties (figura 7.54).
Figura 7.54
3. Executaţi clic pe tipul de aliniere dorit – Top (figura 7.55).
Figura 7.55
Remarcă. Imaginea este aliniată sus în raport cu textul „LUMINA BLANDA” (figura 7.56).
Figura 7.56
297
Figura 7.57
Remarci:
Description şi vizualizaţi atributul align cu valoarea top.
9 Citiţi Conversaţia 7, paragraful HTML 4 – Aliniaţi vertical o imagine în raport
cu un text (Liviu Dumitraşcu, (X)HTML, Editura Universităţii din Ploieşti,
2003).
Figura 7.58
Iată cum aliniem vertical (middle) imaginea sigla.jpg în raport cu textul

„LUMINA BLÂNDĂ”.
2. Afişaţi meniul Align din panoul Properties.
3. Executaţi clic pe tipul de aliniere dorit – middle (figura 7.59).
Figura 7.59
298
Remarcă. Imaginea este aliniată la mijloc în raport cu textul „LUMINA BLÂNDĂ” (figura
7.60).
Figura 7.60
Figura 7.61
Remarcă. Selectaţi tag-ul <IMG>, deschideţi panoul Reference, utilizaţi meniul

Description şi vizualizaţi atributul align cu valoarea middle.
Figura 7.62
Iată cum aliniem vertical (bottom) imaginea sigla.jpg în raport cu textul

299
3. Executaţi clic pe tipul de aliniere dorit – Bottom (figura 7.63).
Figura 7.63
Remarcă. Imaginea este aliniată jos în raport cu textul „LUMINA BLÂNDĂ” (figura 7.64).
Figura 7.64
Figura 7.65

Description şi vizualizaţi atributul align cu valoarea bottom.

300
Figura 7.66
Aplicaţie
Aliniaţi vertical (Baseline, Text Top, Absolute Middle, Absolute Bottom)

imaginea „sigla.jpg” în raport cu textul „LUMINA BLÂNDĂ”.
Indicaţie. Utilizaţi meniul derulant Align din panoul Properties.
Dreamweaver MX Aliniaţi vertical o imagine în raport

workspace cu un text
Pentru a alinia vertical o imagine în raport cu un text, cu Dreamweaver
MX workspace folosiţi panoul Properties.
Iată cum aliniem vertical (top) imaginea „sigla.jpg” în raport cu textul

2. În panoul Properties, în meniul derulant Align, executaţi clic pe

Top.

301
Figura 7.67
Remarcă. Citiţi Conversaţia 7, paragraful XHTML – Aliniaţi vertical o imagine în raport cu

un text (Liviu Dumitraşcu, (X)HTML, Editura Universităţii din Ploieşti, 2003).
Figura 7.68
Aplicaţii
Aliniaţi vertical (middle) imaginea sigla.jpg în raport cu textul „LUMINA

BLÂNDĂ”.
Indicaţie. În panoul Properties, în meniul derulant Align, executaţi clic pe

Middle.
Aliniaţi vertical (bottom) imaginea sigla.jpg în raport cu textul „LUMINA

BLÂNDĂ”.
Indicaţie. În panoul Properties, în meniul derulant Align, executaţi clic pe

Bottom.
302
Dreamweaver MX Inseraţi un spaţiu rezervat pentru

workspace o imagine … în construcţie
Dreamweaver MX workspace vă ajută să inseraţi un spaţiu rezervat
pentru o imagine pe care … n-o aveţi în momentul în care doriţi să
formataţi pagina dumneavoastră Web!
În consecinţă, puteţi construi pagina respectând dimensiunile şi

coordonatele de amplasare a imaginii. În momentul în care aveţi
imaginea, totul este … sub control! Folosiţi panoul Properties (zona Src).
Pentru a insera un spaţiu rezervat pentru o imagine cu Dreamweaver MX

workspace , folosiţi una din metodele prezentate mai jos:
9 Metoda 1 – Meniul Insert;
Iată cum procedaţi pentru a insera un spaţiu rezervat pentru imaginea

Kepler (în construcţie!).
Metoda 2
1. Executaţi clic în locul în care doriţi să fie plasată imaginea.
2. În subpanoul Common din grupul de panouri Insert, executaţi
clic pe butonul (Image Placeholder), figura 7.69.
Figura 7.69
Remarcă. Se afişează caseta de dialog Image Placeholder (figura 7.70).
3. În caseta de dialog Image Placeholder, introduceţi: nume,

lungime, lăţime, culoare, textul alternativă în zonele
corespunzătoare (figura 7.70).
303
Figura 7.70
Figura 7.71
Figura 7.72
304
Dreamweaver 4 Plasaţi text în jurul unei imagini

workspace
Puteţi insera o imagine într-un text şi apoi repartiza acest text în jurul
imaginii. Imaginea (flotantă) este plasată fie la stânga, fie la dreapta în
cadrul paragrafului.
Iată cum … îmbrăcăm cu acelaşi text (vezi Liviu Dumitraşcu, (X)HTML,

Editura Universităţii din Ploieşti, 2003) colţul drept al imaginii „sigla.jpg”.
3. Executaţi clic pe Left (tipul de aliniere dorit). Textul se

repartizează în jurul imaginii (figura 7.73).
Figura 7.73
Figura 7.74
305
Remarcă. Citiţi Conversaţia 7, paragraful HTML 4 – Plasaţi text în jurul unei imagini (Liviu
Figura 7.75
Aplicaţii
Deplasaţi imaginea sigla.jpg în cadrul paragrafului.
Îmbrăcaţi cu acelaşi paragraf (vezi HTML) colţul stâng al imaginii sigla.jpg.
Plasaţi textul „ZIUA ÎN CARE VIN PEŞTII” între două imagini follow.jpg.
Indicaţie. Folosiţi tehnica repartizării unui text – „ZIUA ÎN CARE VIN PEŞTII” în
jurul unei imagini (follow.jpg) – aliniere la stânga (îmbrăcarea colţului stâng al
imaginii); aliniere la dreapta (îmbrăcarea colţului drept al imaginii). Utilizaţi
meniul Align din panoul Properties.
Întrerupeţi … îmbrăcarea cu text a unei imagini.
Indicaţie. Cu Dreamweaver puteţi întrerupe îmbrăcarea cu text a unei imagini

tastând Enter în locul în care doriţi întreruperea liniei de text, dar acest lucru nu
reprezintă întotdeauna ceea ce v-aţi dorit!
În consecinţă, vă recomandăm să introduceţi codul sursă HTML:
<BR clear = all>
care mută textul de după întreruperea de linie dincolo de imagine, până când
ambele margini sunt libere.
Remarcă. Citiţi Conversaţia 7, paragraful HTML 4 – Întrerupeţi … îmbrăcarea cu text a

unei imagini (Liviu Dumitraşcu, (X)HTML, Editura Universităţii din Ploieşti, 2003).
306
Dreamweaver MX Plasaţi text în jurul unei imagini

workspace
Pentru a plasa text în jurul unei imagini (pentru a decora-o!) cu

Dreamweaver MX workspace, folosiţi panoul Properties.
Iată cum îmbrăcăm colţul drept al imaginii „sigla.jpg” cu acelaşi text pe

care l-am folosit cu Dreamweaver 4 workspace.
1. Selectaţi imaginea sigla.jpg.
2. În panoul Properties, în meniul derulant Align, executaţi clic pe

Left.
Figura 7.76
Remarcă. Citiţi Conversaţia 7, paragraful XHTML – Plasaţi text în jurul unei imagini (Liviu
Figura 7.77
307
Dreamweaver 4 Adăugaţi mai multe spaţii în jurul

workspace unei imagini
Puteţi modifica cu Dreamweaver spaţiul dintre imagine şi text.
Iată cum afişaţi decalat cu 20 de pixeli – orizontal şi vertical textul

adiacent (acelaşi cu cel din HTML) imaginii sigla.jpg.
2. În panoul Properties, tastaţi valoarea 20 (pixeli) în zonele

Vspace (Vertical Spacing in Pixels) şi Hspace (Horizontal
Spacing in Pixels), figura 7.78.
Figura 7.78
Remarcă. Citiţi Conversaţia 7, paragraful HTML 4 – Adăugaţi mai multe spaţii în jurul
unei imagini (Liviu Dumitraşcu, (X)HTML, Editura Universităţii din Ploieşti, 2003).
Figura 7.79

308
Figura 7.80
Dreamweaver MX Adăugaţi mai multe spaţii în jurul

workspace unei imagini
Dacă o imagine este înconjurată de un text, puteţi regla distanţa care le
separă. Astfel, veţi putea pune în valoare imaginile dumneavoastră.
Pentru a detaşa o imagine de text, cu Dreamweaver MX workspace,

folosiţi panoul Properties.
Iată cum adăugăm 20 de pixeli în jurul imaginii sigla.jpg pentru a o

detaşa de acelaşi text pe care l-aţi folosit cu Dreamweaver 4 workspace.
1. Selectaţi imaginea pe care doriţi să o distanţaţi de text.
2. În panoul Properties, în zonele VSpace şi HSpace tastaţi

valoarea 20 (pixeli).

309
Figura 7.81
Figura 7.82
Dreamweaver 4 Aplicaţi o imagine de background

workspace
Puteţi aplica pe fundalul paginii dumneavoastră o imagine care se va

repeta (în mozaic) de atâtea ori cât este necesar pentru a acoperi
întreaga fereastră a browser-ului.
Iată cum inseraţi în Dreamweaver 4 workspace o imagine de

background pentru pagina dumneavoastră Web.
1. Executaţi clic pe Modify Page Properties….

310
Remarcă. Se afişează caseta de dialog Page Properties.
2. În caseta de dialog Page Properties executaţi clic pe butonul

Browse… via Background Image (figura 7.83).
Figura 7.83
Remarcă. Se afişează caseta de dialog Select Image Source cu fişierele imagine

disponibile (figura 7.84).

9 Selectaţi imaginea pe care doriţi s-o aplicaţi pe fundalul

paginii;
9 Executaţi clic pe butonul OK.
Figura 7.84
311
Numele fişierului selectat (Blue hills) se afişează în zona Background
Image din fereastra Page Properties (figura 7.85).
Figura 7.85
Remarcă. Fundalul paginii este placat cu imaginea selectată. Dacă este necesar, ea este
repetată pe axa orizontală şi verticală pentru a ocupa toată pagina.
Nu vă îngrijoraţi dacă nu înţelegeţi nimic! Vă rugăm să ne păsuiţi puţin!

În continuare … veţi găsi toate explicaţiile!
Figura 7.86
Remarci:
9 Selectaţi tag-ul <BODY>, deschideţi panoul Reference, utilizaţi meniul
Description şi vizualizaţi atributul background.
9 Citiţi Conversaţia 7, paragraful HTML 4 – Aplicaţi o imagine de background

312
Figura 7.87
Dreamweaver MX Aplicaţi o imagine de background

workspace
O imagine de background permite acoperirea integrală a ecranului. Ea

rămâne în spatele altor elemente. Dacă imaginea pe care aţi găsit-o este
prea mică, ea este repetată în mozaic.
Pentru a aplica o imagine de background cu Dreamweaver MX

workspace, utilizaţi meniul Modify şi nu panoul Properties.
Iată cum procedăm pentru a insera cu Dreamweaver MX workspace,

aceeaşi imagine de background Blue hills.jpg, pe care aţi inserat-o cu
2. În caseta de dialog Page Properties, care se afişează executaţi

clic pe butonul Browse … via Background Image.
313

9 Selectaţi dosarul care conţine imaginea Blue hills.jpg şi apoi

executaţi clic pe aceasta.
Figura 7.88
Figura 7.89
Remarcă. Citiţi Conversaţia 7, paragraful XHTML – Aplicaţi o imagine de background


314
Figura 7.90
Aplicaţie
Definiţi marginile paginii.
Indicaţie. Cu Dreamweaver MX aveţi posibilitatea de a indica în fereastra

navigatorului, poziţia (în pixeli) paginii cu ajutorul parametrilor Left Margin, Top
Margin (recunoscute numai de Internet Explorer) şi Margin Width, Margin
Height (recunoscute numai de Netscape Navigator). Executaţi clic pe Modify
Page Properties şi introduceţi valorile dorite, în cele patru zone din caseta de
dialog Page Properties, care se afişează.
Dreamweaver 4 Convertiţi o imagine în legătură

workspace (link)
Iată cum creăm cu Dreamweaver 4 workspace o legătură către sigla.jpg

(versiunea originală) pornind de la versiunea în miniatură siglamin.jpg a
315
acesteia. Cele două imagini au fost create şi comentate în aplicaţiile
precedente.
1. Selectaţi imaginea siglamin.jpg (figura 7.91).
Figura 7.91
2. Executaţi clic pe icon-ul Browse for File ( ), via Link, din

panoul Properties (figura 7.92).
Figura 7.92
Remarcă. Se afişează caseta de dialog Select File (figura 7.93).
3. În caseta de dialog Select File (figura 7.93) executaţi

9 Executaţi clic pe fişierul către care se realizează legătura;

316
Figura 7.93
Remarcă. Imaginea este convertită în legătură hipertext (figura 7.94).
Figura 7.94
Remarcă. Nu puteţi testa legăturile în fereastra Document. Pentru verificarea legăturii

deschideţi pagina într-un browser.

317
Figura 7.95
Remarcă. Citiţi Conversaţia 7, paragraful HTML 4 – Convertiţi o imagine în legătură (Liviu

Figura 7.96
Aplicaţie
Încărcaţi temporar versiunea în miniatură a imaginii follow.jpg de 15x15

pixeli.
Iată cum procedaţi pentru a afişa mai întâi versiunea în miniatură followmin.jpg
(de 15x15 pixeli) în aşteptarea încărcării imaginii follow.jpg (283x212 pixeli) de
înaltă rezoluţie.
1. Selectaţi imaginea principală follow.jpg de înaltă rezoluţie (283x212

pixeli), figura 7.97.
318
Figura 7.97
2. În panoul Properties, în zona Low Src executaţi clic pe Browse for File
( ) / Point to File ( ) pentru a identifica imaginea miniatură
followmin.jpg de 15x15 pixeli.
Remarcă. Se afişează caseta de dialog Select Image Source.
3. În caseta de dialog Select Image Source (figura 7.98) executaţi clic pe

followmin.jpg.
Figura 7.98
Remarcă. Se afişează imaginea de joasă rezoluţie follow.jpg (15x15 pixeli).

319
Figura 7.99

Description şi vizualizaţi atributul lowsrc.
Figura 7.100
Remarcă. Atributul lowsrc nu este standard W3C.

320
Dreamweaver MX Convertiţi o imagine în legătură

workspace (link)
Ca şi textele, imaginile pot fi utilizate ca suporturi de legături (link-uri).
Iată cum convertim cu Dreamweaver MX workspace, imaginea

siglamin.jpg într-o legătură (link) către sigla.jpg (versiunea originală).
1. Selectaţi imaginea siglamin.jpg pe care urmează să o

transformăm în legătură.
2. În panoul Properties, executaţi clic pe (Browse for file) via

Link.
3. În caseta de dialog Select File, selectaţi folder-ul care conţine

pagina către care se realizează legătura, iar apoi executaţi clic
pe fişierul sigla.jpg către care se realizează legătura (figura
7.101).
Figura 7.101
321
Remarcă. Spre deosebire de textele de legătură subliniate şi colorate diferit, nimic nu

deosebeşte o imagine de o legătură, cu excepţia numelui zonei Link din panoul
Properties.
Figura 7.102
Figura 7.103
322
Dreamweaver 4 Creaţi o imagine cu zone reactive

workspace
Puteţi diversifica site-ul dumneavoastră profitând de instrumentul Map

din Dreamweaver, asociind legăturile diferitelor părţi ale unei imagini.
Image-map (în limba lui Shakespeare) sunt imagini pe care puteţi
delimita zone reactive (cerc, dreptunghi, poligon), care constituie
legături hipertext.
Iată cum creăm cu Dreamweaver 4 workspace o imagine cu zone

reactive, aceeaşi pe care am creat-o în HTML (Liviu Dumitraşcu,
1. Verificaţi dacă zonele reactive ale image-map-ului sunt afişate:

View t Visual Aids t Image Maps.
2. Executaţi clic (în documentul deschis) în locul în care doriţi să

inseraţi imaginea.
3. Inseraţi imaginea follow.jpg şi apoi selectaţi-o (figura 7.104).
Figura 7.104
323
4. În panoul Properties, în zona Map introduceţi numele paginii
imaginii map (peşti). Este obligatoriu! (figura 7.105).
Figura 7.105
5. Alegeţi o formă de zonă reactivă - (figura 7.106).
Figura 7.106
6. Cu instrumentul selectat, trasaţi o zonă pe imagine care devine

o legătură către fişierul specificat (figura 7.107).
Figura 7.107
Remarcă. Pentru a modifica sau deplasa forma desenată utilizaţi instrumentul

Pointer Hotspot Tool ( ).
7. În panoul Properties, în zona Link, tastaţi URL-ul fişierului către
care se face legătura (figura 7.108).
324
Figura 7.108
Remarcă. Puteţi utiliza de asemenea butonul Point to File ( ) pentru a selecta

fereastra documentului deschis sau fişierul în folder-ul site-ului sau puteţi
utiliza butonul Browse for File ( ) pentru a selecta fişierul către care se face
legătura.
8. În meniul derulant Target indicaţi cadrul pe care doriţi să-l
utilizaţi (figura 7.109).
Figura 7.109
9. În zona Alt introduceţi textul care doriţi să apară în bula de help

galbenă sub pointer, atunci când utilizatorul poziţionează
pointer-ul pe zona reactivă (figura 7.110).
Figura 7.110
10. Repetaţi paşii 5 – 9 pentru a asocia imaginii alte legături.

325
Figura 7.111
Remarci:
9 Selectaţi tag-urile <MAP>, <AREA>, deschideţi panoul Reference şi citiţi
9 Citiţi Conversaţia 7, paragraful: Creaţi o imagine cu zone reactive (Liviu
Figura 7.112
Dreamweaver MX Creaţi o imagine cu zone reactive

workspace
Iată cum creaţi cu Dreamweaver MX workspace aceeaşi imagine

follow.jpg cu zone reactive pe care aţi creat-o cu Dreamweaver 4
workspace.
326
1. Executaţi clic în locul în care doriţi să inseraţi imaginea.
2. Inseraţi imaginea follow.jpg şi apoi selectaţi-o.
3. În panoul Properties, în zona Map, introduceţi numele paginii

imaginii map (peşti). Este obligatoriu!
4. În panoul Properties, alegeţi o formă de zonă reactivă (figura

7.113).
Figura 7.113
5. Cu instrumentul selectat, trasaţi o zonă pe imagine.
6. În panoul Properties, în zona Link, tastaţi URL-ul fişierului către

care se face legătura (figura 7.114).
Figura 7.114
7. În panoul Properties, în meniul derulant Target indicaţi cadrul

pe care doriţi să-l utilizaţi.
8. În panoul Properties, în zona Alt introduceţi textul care doriţi să

apară în bula de help galbenă, sub pointer, atunci când
utilizatorul poziţionează pointer-ul pe zona reactivă.
9. Repetaţi paşii 5 – 8 pentru a asocia imaginii alte legături.

327
Figura 7.115
Remarcă. Citiţi Conversaţia 7, paragraful XHTML – Creaţi o imagine cu zone reactive

Figura 7.116
328
1. Prezentaţi pe scurt o metodă de inserare a unei imagini cu
Dreamweaver 4 workspace şi Dreamweaver MX workspace.
2. Cum aliniaţi orizontal o imagine cu Dreamweaver MX workspace?
3. Care sunt situaţiile în care folosiţi un text de înlocuire (substituţie)

pentru o imagine?
4. Descrieţi procedura Dreamweaver de aliniere verticală a unei imagini

în raport cu un text.
5. Cum aplicaţi o imagine de background cu Dreamweaver?
6. Descrieţi pe scurt procedura Dreamweaver de creare a unei imagini cu

zone reactive.
9 www.antville.com
9 www.imageclub.com
9 www.eyewire.com
9 www.photodisc.com
9 www.werehere.com
9 www.wenpromotion.com
9 www.corel.com
9 www.debabelizer.com
9 www.jasc.com
329
9 www.microfrontier.com
9 www.microsoft.com/office/photodraw
Conversaţia 8
Creaţi legături cu Dreamweaver MX

•••••••••••••••••••••••••••••••••••••••••
f Dreamweaver 4 workspace, MX workspace – Creaţi o legătură hipertext
către o altă pagină Web
f Dreamweaver 4 workspace, MX workspace – Creaţi legături în aceeaşi
pagină Web
f Dreamweaver 4 workspace, MX workspace – Creaţi o legătură externă
către un site Web, având ca suport o imagine
externă către un site Web
externă către o adresă e-mail
f Dreamweaver 4 workspace, MX workspace – Modificaţi culoarea
legăturilor hipertext
către o pagină care se deschide în propria sa fereastră
•••••••••••••••••••••••••••••••••••••••••
Dreamweaver 4 Creaţi o legătură hipertext către o

workspace altă pagină Web
Puteţi crea legături care facilitează deplasarea vizitatorilor în paginile
site-ului dumneavoastră.
330
Pentru a crea o legătură hipertext către o pagină Web cu Dreamweaver
4 workspace, folosiţi una din metodele prezentate mai jos:
9 Metoda 2 – Meniul Modify.
Iată cum creaţi o legătură hipertext din pagina Untitled-2.htm către

pagina b.htm. Creaţi mai întâi cele două pagini în folder-ul My
Documents. Vom utiliza textul de legătură „Ziua lungă”.
Metoda 1
1. Selectaţi textul de legătură (figura 8.1).
Figura 8.1
2. În inspectorul Properties, via Link, executaţi clic pe .
Figura 8.2
3. În lista fişierelor care se afişează în Select File executaţi clic pe

b.html, iar apoi executaţi clic pe butonul OK (figura 8.3).
331
Figura 8.3
Remarci:
9 Legătura se afişează în zona Link din inspectorul Properties.
9 Noua legătură se afişează colorată în albastru şi subliniată (figura 8.4).
Figura 8.4
Figura 8.5
Remarci:
9 Selectaţi tag-ul <A>, deschideţi panoul Reference şi citiţi informaţiile care se
afişează. Utilizaţi meniul Descripton pentru a vizualiza atributul href.
9 Citiţi Conversaţia 8, paragraful HTML 4 – Creaţi o legătură hipertext către o
altă pagină Web (Liviu Dumitraşcu, (X)HTML, Editura Universităţii din Ploieşti,
2003).
332
Figura 8.6
6. Testaţi legătura hipertext pe care aţi creat-o:
9 Executaţi clic pe Modify t Open Linked Page…;
sau,
9 Apăsaţi tasta CTRL şi apoi executaţi dublu clic pe legătură.
Aplicaţie
Suprimaţi legătura hipertext pe care aţi creat-o.
1. Selectaţi textul de legătură „Ziua lungă”.
2. Executaţi clic pe Modify t Remove Link (figura 8.7).
Figura 8.7
333
Remarcă. Legătura „Ziua lungă” este ştearsă (figura 8.8).
Figura 8.8
Metoda 2
Se modifică pasul 2 din Metoda 1 după cum urmează:
2. Executaţi clic pe Modify t Make Link.
Dreamweaver MX Creaţi o legătură hipertext către o

workspace altă pagină Web
Pentru ca vizitatorii (utilizatorii) să se deplaseze cu uşurinţă între
paginile site-ului dumneavoastră, creaţi legături hipertext.
Pentru a crea o legătură hipertext către o altă pagină Web cu

Dreamweaver MX workspace, folosiţi una din metodele prezentate mai
jos:
9 Metoda 2 – Meniul Modify.
Iată cum procedaţi pentru a crea o legătură hipertext din pagina

test.html către pagina b.htm. Vom utiliza textul de legătură „Ziua lungă”.
334
Metoda 1
1. Selectaţi textul ce urmează a fi convertit în legătură.
2. În panoul Properties, via Link, executaţi clic pe .
3. În lista fişierelor care se afişează în caseta de dialog Select File,

executaţi clic pe b.htm, apoi executaţi clic pe butonul OK (figura
8.9).
Figura 8.9
Remarcă. Textul „Ziua lungă” se transformă în legătură. Textul se afişează subliniat şi cu

o culoare diferită (figura 8.10).
Figura 8.10
335
Figura 8.11
Remarci:
9 Citiţi Conversaţia 8, paragraf paragraful XHTML 4 – Creaţi o legătură hipertext
către o altă pagină Web (Liviu Dumitraşcu, (X)HTML, Editura Universităţii din
Ploieşti, 2003).
9 Nu este posibil de a testa o legătură direct în Dreamweaver.
Figura 8.12
6. Testaţi legătura hipertext pe care aţi creat-o:
6.1 Treceţi cu mouse-ul peste legătură. Pointer-ul va lua forma
-.
6.2 Executaţi clic pe legătură pentru a schimba pagina.
336
Dreamweaver 4 Creaţi legături în aceeaşi pagină

workspace Web
Pentru a crea legături hipertext în cadrul aceleiaşi pagini, cu
DREAMWEAVER 4 workspace trebuie să creaţi mai întâi o ancoră (în
locul dorit!) şi apoi o legătură (către aceasta) cu una din metodele:
9 Metoda 1 – Meniul Insert, via Invisible Tags Named Anchor;
Vom utiliza textul cunoscut din aplicaţiile precedente (figura 8.13) în

care cuvântul „Bine” va fi convertit în legătură către cuvintele „LUMINA
BLÂNDĂ”, care va deveni ancoră numită.
Figura 8.13
Iată cum creăm cu Dreamweaver 4 ancora (numită) cu numele „LUMINA

BLANDA”.
Metoda 1
1. Verificaţi dacă opţiunea Named Anchors este activată, via Edit

Preferences Category Invisible Elements (figura 8.14).
337
Figura 8.14
2. Verificaţi dacă opţiunea Invisible Elements este activată, via

View Visual Aids Invisible Elements (figura 8.15).
Figura 8.15
338
3. Executaţi clic înaintea textului pe care doriţi să-l marcaţi ca
ancoră (figura 8.16).
Figura 8.16
4. Executaţi clic pe Insert Named Anchor (figura 8.17).
Figura 8.17
Remarcă. Se afişează caseta de dialog Named Anchor.
5. În caseta de dialog Named Anchor, introduceţi în zona Anchor

Name numele ancorei LUMINABLANDA iar apoi executaţi clic pe
butonul OK (figura 8.18).
339
Figura 8.18
În fereastra Document se afişează icon-ul de ancoră ( ), dar în

fereastra browser-ului ancora rămâne în totalitate invizibilă (figura 8.19).
Figura 8.19
Remarcă. Pentru a modifica numele ancorei, executaţi clic pe elementul său invizibil şi
utilizaţi inspectorul Properties (figura 8.20).
Figura 8.20
Figura 8.21
340
Remarci:
9 Selectaţi tag-ul <A>, deschideţi panoul Reference, utilizaţi meniul Description
şi vizualizaţi atributul name.
9 Citiţi Conversaţia 8, paragraful HTML 4 – Creaţi o legătură în aceeaşi pagină
Figura 8.22
Remarcă. În navigator, ancora nu se afişează.
Metoda 2
4. În panoul Insert, categoria Common, executaţi clic pe butonul
(Insert Named Anchor), figura 8.23.
Figura 8.23
341
Iată cum creăm, în continuare legătura „Bine” către ancora (numită)
„LUMINABLANDA” pe care am definit-o mai înainte.
1. Selectaţi textul de legătură (figura 8.24).
Figura 8.24
2. În inspectorul Properties, în zona Link, introduceţi numele

ancorei LUMINABLANDA, precedat de simbolul diez (#) (figura
8.25).
Figura 8.25
Remarcă. Puteţi folosi de asemenea butonul Point to File ( ).
Remarcă. Legătura apare colorată (în albastru) şi subliniată (figura 8.26).
Figura 8.26
342
Figura 8.27
Figura 8.28
6. Testaţi legătura creată:
6.1. Executaţi clic pe cuvântul „Bine” (figura 8.29).
Figura 8.29
Zona marcată cu ancora numită (LUMINA BLÂNDĂ) se afişează la

începutul ferestrei browser-ului (figura 8.30).
343
Figura 8.30
Aplicaţii
Creaţi o legătură către o ancoră situată în altă pagină.
Indicaţie. Respectaţi următoarea procedură:
1. Selectaţi textul de legătură.
2. În inspectorul Properties, în zona Link introduceţi legătura (link-ul) de

maniera: ?#X, înlocuind semnul de întrebare (?) cu adresa paginii şi
X-ul cu numele ancorei.
În următorul text sunt descrise serviciile oferite de Societatea LUMINA

BLÂNDĂ: 1. Servicii TURISM; 2. Servicii ACADEMICE; 3. Servicii INFORMATICE,
detaliate după cum urmează:
9 Servicii TURISM: Valea Prahovei, Valea Oltului, Valea Domanului, Valea

Arieşului, Valea Cernei, Valea Loirei.
9 Servicii ACADEMICE: Organizare expoziţii, Organizare simpozioane

naţionale, Organizare simpozioane internaţionale,
Organizare târg de job-uri, Organizare
work-shop-uri.
9 Servicii INFORMATICE: Training, Service reţele de calculatoare, Service

Video Conferinţe, Pagini Web.
Creaţi trei ancore: Secţiune 1, Secţiune 2, Secţiune 3 ce corespund celor trei

tipuri de servicii - TURISM, ACADEMICE, INFORMATICE. Creaţi legături
hipertext către ancorele numite, textele de legătură fiind denumirile serviciilor.
Iată cum creăm cu Dreamweaver 4 workspace ancorele (numite) şi legăturile

corespunzătoare.
344
1. Introduceţi textul aplicaţiei.
2. Creaţi trei ancore numite: Secţiune 1, Secţiune 2, Secţiune 3 ce

corespund celor trei tipuri de servicii – Servicii TURISM, Servicii
ACADEMICE, Servicii INFORMATICE.
Metoda 1
2.1 Executaţi clic înaintea textului Servicii TURISM pe care doriţi să-l
marcaţi ca ancoră numită - „Secţiune1”.
9 Executaţi clic pe Insert Invisible Tags Named Anchor.
9 Introduceţi numele ancorei Secţiune1 în zona Anchor Name

(figura 8.31).
Figura 8.31
2.2 Executaţi clic înaintea textului Servicii ACADEMICE pe care

doriţi să-l marcaţi ca ancoră numită - „Secţiune2”.

(figura 8.32).
Figura 8.32

345
2.3 Executaţi clic înaintea textului Servicii INFORMATICE pe care
doriţi să-l marcaţi ca ancoră numită - Secţiune3.

(figura 8.33).
Figura 8.33
3. Creaţi la începutul documentului ancora (numită) START (figura 8.34).
Figura 8.34
4. Creaţi la începutul documentului un meniu (o listă numerotată) pentru

serviciile oferite de societatea LUMINA BLÂNDĂ (figura 8.35).
Figura 8.35
346
5. Organizaţi textul, pentru fiecare din cele trei servicii (TURISM,
ACADEMICE, INFORMATICE) în liste cu simboluri.
6. Creaţi legături către ancorele numite: Secţiune1, Secţiune2,

Secţiune3.
6.1 Selectaţi textul de legătură Servicii TURISM.
9 În inspectorul Properties, în zona Link, introduceţi numele

ancorei, Secţiune1, precedat de simbolul diez (#).
9 Acţionaţi tasta Enter.
6.2 Selectaţi textul de legătură Servicii ACADEMICE.

6.3 Selectaţi textul de legătură Servicii INFORMATICE.

7. Creaţi legături din fiecare secţiune către ancora (numită) START.

Textul de legătură către ancora START este: Revenire START.
9 Introduceţi la finele celor trei secţiuni textul de legătură

Revenire START.
9 Selectaţi textul de legătură din cadrul fiecărei secţiuni.
9 În inspectorul Properties, în zona Link, introduceţi pentru

fiecare din cele trei secţiuni numele ancorei START, precedat
de simbolul diez (#). Acţionaţi de fiecare dată tasta Enter.

347
Figura 8.36
Remarcă. Citiţi Conversaţia 8, paragraful: HTML 4 – Creaţi o legătură hipertext către o

altă pagină Web. Aplicaţii (Liviu Dumitraşcu, (X)HTML, Editura Universităţii din Ploieşti,
2003).
348
Figura 8.37
10. Verificaţi legăturile hipertext create.

349
Dreamweaver MX Creaţi legături în aceeaşi pagină

workspace Web
Pentru a crea legături hipertext în cadrul paginii curente, cu
Dreamweaver MX workspace, creaţi mai întâi o ancoră şi apoi o legătură
către aceasta cu una din metodele prezentate mai jos:
9 Metoda 1 – Meniul Insert, via Named Anchor;
Creaţi o ancoră numită

Iată cum procedaţi pentru a crea cu Dreamweaver MX workspace
ancora (numită) cu numele „LUMINA BLÂNDĂ”. Cuvântul „Bine” din
paragraful „Bine aţi venit!” va fi convertit în legătură către cuvintele
„LUMINA BLÂNDĂ”, care vor deveni ancoră numită, din paragraful
„LUMINA BLÂNDĂ este puternică şi nu doar atât!”.
Metoda 2
1. Verificaţi dacă opţiunea Named Anchors este activată, via Edit

Preferences Categoria Invisible Elements.
2. Verificaţi dacă opţiunea Invisible Elements este activată, via

View Visual Aids Invisible Elements.
3. Executaţi clic înaintea textului pe care doriţi să-l marcaţi ca

ancoră: „LUMINA BLÂNDĂ este puternică şi nu doar atât!”.
4. În grupul de panouri Insert, subpanoul Common, executaţi clic
pe butonul (Named Anchor), figura 8.38.

350
Figura 8.38
5. În caseta de dialog care se afişează Named Anchor, în zona

Anchor Name, introduceţi numele ancorei „LUMINA BLANDA”,
iar apoi executaţi clic pe butonul OK (figura 8.39).
Figura 8.39
Remarcă. Icon-ul se afişează numai în fereastra Document (figura 8.40) nu şi în

fereastra browser-ului.
Figura 8.40

351
Figura 8.41
Remarcă. Ancora nu se afişează în navigator.
Creaţi o legătură către ancora numită

Iată cum creăm legătura „Bine” către ancora numită „LUMINA BLANDA”
cu Dreamweaver MX workspace.
2. În panoul Properties, în zona Link, introduceţi numele ancorei

„LUMINA BLANDA”, precedat de simbolul diez (#).

352
Figura 8.42
Figura 8.43
6. Testaţi legătura creată: executaţi clic pe cuvântul „Bine” (figura

8.44).
Figura 8.44
353
Aplicaţie
Creaţi cu Dreamweaver MX workspace pagina Web prezentată în figura 8.37.
Indicaţie. Folosiţi procedura descrisă pentru Dreamweaver 4 workspace.
Creaţi o legătură externă către un

Dreamweaver 4 site Web, având ca suport o
workspace
imagine
Puteţi accesa o pagină Web folosind şi o legătură imagine (executând
clic pe aceasta).
Iată cum creăm o legătură imagine, follow.jpg, către site-ul

www.upg-ploiesti.ro.
1. Inseraţi imaginea (follow.jpg) şi apoi selectaţi-o (figura 8.45).
Figura 8.45
2. În inspectorul Properties, în zona Link, creaţi legătura către

site-ul UPG din Ploieşti (vezi creare legătură hipertext), figura
8.46.
Figura 8.46
Imaginea follow.jpg a fost convertită în legătură hipertext (vezi figura

8.47).
354
Figura 8.47
Figura 8.48
Remarcă. Citiţi Conversaţia 8, paragraful HTML 4 – Creaţi o legătură imagine

Figura 8.49
5. Testaţi legătura imagine pe care aţi creat-o (figura 8.50).

355
Figura 8.50
Aplicaţii
Suprimaţi legătura imagine (în caz de eroare şi nu numai!) pe care aţi

creat-o.
1. Selectaţi legătura imagine, executând clic pe aceasta.
2. Executaţi clic pe Modify t Remove Link (figura 8.51).
Figura 8.51
Creaţi o legătură hipertext către versiunea originală a imaginii sigla.gif,

pornind de la versiunea în miniatură siglamin.gif a acesteia.
356
Iată care este procedura pe care vă invităm să o urmaţi.
1. Selectaţi siglamin.gif, versiunea în miniatură a imaginii originale

(figura 8.52).
Figura 8.52
2. În inspectorul Properties, în zona Link creaţi legătura către poza.gif,

creaţia dumneavoastră (figura 8.53).
Figura 8.53
Figura 8.54
Figura 8.55
357
5. Verificaţi legătura hipertext pe care aţi creat-o.
5.1 Selectaţi legătura pe care doriţi s-o verificaţi (figura 8.56).
Figura 8.56
5.2 Executaţi clic pe Modify t Open Linked Page…
sau,
5.3 Acţionaţi tasta CTRL şi apoi executaţi dublu clic pe legătură.
Creaţi o legătură externă către un

Dreamweaver MX
workspace
site Web, având ca suport o
imagine
Posibilităţile de a crea legături externe de tip imagine, cu Dreamweaver
MX workspace sunt numeroase: butoane (simple), rollovere, imagini cu
zone reactive (image map), bare de navigare etc. De menţionat, că
toate aceste imagini care vă servesc ca legături, trebuie mai întâi să fie
create!
Iată cum folosim imaginea follow.jpg, ca suport de legătură externă

către site-ul www.upg-ploieşti.ro.
1. Inseraţi imaginea şi apoi selectaţi-o.
2. În panoul Properties, în zona Link, creaţi legătura către site-ul

Universităţii Petrol-Gaze din Ploieşti.
358
Figura 8.57
5. Testaţi legătura imagine pe care aţi creat-o (figura 8.58).
Figura 8.58
Aplicaţie
Suprimaţi legătura imagine pe care aţi creat-o.
Indicaţie. Folosiţi meniul Modify, via Remove Link.

359
Dreamweaver 4 Creaţi o legătură hipertext externă

workspace către un site Web
Iată cum creaţi cu Dreamweaver 4 workspace o legătură hipertext
externă către site-ul Universităţii Petrol-Gaze din Ploieşti
(http://www.upg-ploiesti.ro). Textul de legătură este: UPG din Ploieşti.
1. Introduceţi şi apoi selectaţi textul de legătură (figura 8.59).
Figura 8.59
Remarcă. În mod implicit, pagina către care faceţi link-ul se deschide în fereastra
browser-ului, dar, pentru a nu pierde legătura cu pagina dumneavoastră, puteţi cere
ca această pagină (ţintă) să se deschidă într-o nouă fereastră a browser-ului.
2. În inspectorul Properties, în zona Link, introduceţi URL-ul

complet al site-ului Web către care creaţi legătura hipertext
(figura 8.60).
Figura 8.60
3. Executaţi clic pe _blank în meniul derulant Target (figura 8.61).
Figura 8.61
Remarcă. Legătura hipertext se afişează colorată (în albastru) şi subliniată (figura 8.62).
360
Figura 8.62
Remarcă. Nu puteţi testa legăturile în fereastra Document. Pentru a le testa vizualizaţi

pagina Web într-un browser şi executaţi clic pe textul de legătură.
Figura 8.63
Figura 8.64
361
6. Verificaţi legătura hipertext creată.
Remarcă. Dreamweaver 4 workspace nu este în măsură să verifice legăturile către

paginile Web ce aparţin site-urilor exterioare.
Dreamweaver MX Creaţi o legătură hipertext externă

workspace către un site Web
Iată cum procedaţi pentru a crea cu Dreamweaver MX workspace o
legătură hipertext externă către site-ul Universităţii Petrol – Gaze din
Ploieşti. Textul de legătură este „UPG din Ploieşti”.
1. Introduceţi textul de legătură şi apoi selectaţi-l.
2. În panoul Properties, în zona Link introduceţi URL-ul complet al

site-ului UPG (figura 8.65) şi executaţi clic pe _blank în meniul
derulant Target.
Figura 8.65

362
Figura 8.66
Figura 8.67
5. Testaţi legătura hipertext pe care aţi creat-o.
Aplicaţii
Modificaţi culoarea legăturii hipertext pe care aţi creat-o.
Indicaţie. Folosiţi Modify Properties Link Color.
Creaţi o legătură către site-ul UPG din Ploieşti având ca suport un text Flash:
UNIVERSITATE.
Iată care este procedura pe care trebuie s-o aplicaţi.
1. Executaţi clic în locul în care doriţi să figureze textul Flash.
2. Executaţi clic pe Insert Interactiv Images Text Flash.
Remarcă. Se afişează caseta de dialog Insert Text Flash.

363
3. În caseta de dialog Insert Text Flash, în zona Text introduceţi
UNIVERSITATE; în zona Link introduceţi adresa site-ului Universităţii
din Ploieşti, iar în final, executaţi clic pe butonul OK (figura 8.68).
Figura 8.68
4. Acţionaţi tasta F12.
5. Testaţi legătura pe care aţi creat-o (figura 8.69).
Figura 8.69
364
Dreamweaver 4 Creaţi o legătură hipertext externă

workspace către o adresă e-mail
Pentru a crea o legătură hipertext externă către o adresă e-mail cu

Dreamweaver 4, folosiţi una din metodele prezentate mai jos:
9 Metoda 1 – Meniul Insert, via Email Link;
9 Metoda 2 – Panoul Insert, via Email Link;
9 Metoda 2 modificată – Panoul Insert, via Insert Email Link;
Iată cum creaţi cu Dreamweaver 4 workspace, o legătură externă către

o adresă e-mail ldumitrascu@upg-ploiesti.ro. Textul legăturii este
„Primiţi mesajul”.
Metoda 1
1. Selectaţi textul/imaginea de legătură către adresa e-mail (figura

8.70).
Figura 8.70
2. Executaţi clic pe Insert Email Link (figura 8.71).

365
Figura 8.71
Remarcă. Se afişează caseta de dialog Email Link.
3. În caseta de dialog Email Link (figura 8.72), executaţi

următoarele activităţi:
9 În zona E-Mail – introduceţi adresa e-mail;
Figura 8.72
Remarcă. Legătura hipertext apare colorată în albastru şi subliniată (figura 8.73).

366
Figura 8.73
Figura 8.74
Remarcă. Citiţi Conversaţia 8, paragraful HTML 4 – Creaţi o legătură externă către: o

adresă e-mail (Liviu Dumitraşcu, (X)HTML, Editura Universităţii din Ploieşti, 2003).
Figura 8.75
Executaţi clic pe legătura hipertext creată: „Primiţi mesajul”. Se deschide

fereastra New Message (figura 8.76). Profitaţi de această adresă!
367
Figura 8.76
Remarcă. Dreamweaver 4 workspace permite verificarea legăturilor pe care le-aţi creat

detectând totodată legăturile … întrerupte.
Procedura este următoarea:
1. Executaţi clic pe File Check Links. Dacă legăturile sunt întrerupte,
Dreamweaver le afişează în caseta de dialog Check Links.
Pentru a restabili legăturile întrerupte, procedura este următoarea:
1. Executaţi clic pe fişierul către care legătura este întreruptă.
2. Indicaţi corect numele fişierului.
Metoda 2
1. Selectaţi textul/imaginea de legătură către adresa e-mail.
2. În panoul Insert, categoria Common executaţi clic pe butonul
(Insert Email Link), figura 8.77.
Figura 8.77

368
3. În caseta de dialog Email Link (figura 8.78), executaţi
următoarele activităţi:
9 În zona E-Mail – introduceţi adresa e-mail;
Figura 8.78
Remarcă. Legătura hipertext apare colorată în albastru şi subliniată.
(Insert Email Link).
2. În caseta de dialog Email Link (figura 8.79) executaţi

9 în zona Text – introduceţi textul de legătură;
9 în zona E-Mail – introduceţi adresa e-mail;
Figura 8.79
369
Remarcă. Textul de legătură se afişează în fereastra Document iar în zona Link
din inspectorul Properties adresa e-mail se afişează cu sufixul mailto (figura
8.80).
Figura 8.80
5. Verificaţi legătura hipertext.
Metoda 3
1. Selectaţi textul/imaginea de legătură către adresa e-mail.
2. Introduceţi direct în inspectorul Properties, zona Link adresa

e-mail sub forma: mailto:ldumitrascu@mail.upg-ploiesti.ro
(figura 8.81).
Figura 8.81
Remarcă. Adresa e-mail pe care o tastaţi în zona Link are ca sufix, obligatoriu, mailto!
Legătura hipertext apare colorată în albastru şi subliniată (figura 8.82).
Figura 8.82
370
4. Testaţi legătura hipertext creată.
Aplicaţii
Creaţi o legătură externă (hipertext) către un server FTP.
2. În inspectorul Properties, în zona Link introduceţi ftp://ftp.?, înlocuind

semnul de întrebare (?) cu calea de acces către site.
Creaţi o legătură hipertext externă către un grup de discuţii.
2. În inspectorul Properties, în zona Link introduceţi news://?, înlocuind

semnul de întrebare (?) cu adresa grupului de discuţii.
Dreamweaver MX Creaţi o legătură hipertext externă

workspace către o adresă e-mail
Cu Dreamweaver puteţi crea în documentul dumneavoastră o legătură

hipertext externă către o adresă e-mail.
Pentru a crea o legătură hipertext externă către o adresă e-mail, cu

jos:
9 Metoda 1 – Meniul Insert;
9 Metoda 3 – Panoul Properties.

371
legătură externă către adresa e-mail a autorului acestei lucrări:
ldumitrascu@upg-ploiesti.ro. Textul legăturii este: „Primiţi mesajul”.
Metoda 2
pe butonul (Insert Email Link), figura 8.83.
Figura 8.83
2. În caseta de dialog care se afişează, Email Link, în zona Text,

introduceţi textul de legătură „Primiţi mesajul” iar în zona E-
mail introduceţi ldumitrascu@upg-ploiesti.ro (figura 8.84).
Figura 8.84
Remarcă. Textul de legătură se afişează în fereastra Document, iar în zona Link din
panoul Properties adresa e-mail se afişează cu sufixul mailto: (figura 8.85).
372
Figura 8.85
Aplicaţii
Creaţi o legătură hipertext externă către un server FTP.
Creaţi o legătură hipertext externă către un grup de discuţii.
Dreamweaver 4 Modificaţi culoarea legăturilor

workspace hipertext
Puteţi schimba culoarea legăturilor pentru a le armoniza cu stilul vizual

al site-ului dumneavoastră.
Iată cum afişaţi în alb legătura „Primiţi mesajul” către adresa e-mail
„ldumitrascu@upg-ploiesti.ro”.
1. Executaţi clic pe Modify t Page Properties….
Remarcă. Se afişează caseta de dialog Page Properties (figura 8.86).

373
Figura 8.86
2. În caseta de dialog Page Properties, în zona Links executaţi clic

pe butonul d.
3. În paleta care se afişează, executaţi clic cu pipeta pe culoarea

dorită (albă), figura 8.87.
Figura 8.87
Remarcă. În browser, culoarea albă este aplicată legăturii „Primiţi mesajul” (figura 8.88).
374
Figura 8.88
Figura 8.89
Remarcă. Selectaţi tag-ul <BODY>, deschideţi panoul Reference, utilizaţi meniul

Description şi vizualizaţi atributul link.
Figura 8.90
7. Testaţi legătura. Executaţi clic pe „Primiţi mesajul”.
Aplicaţii
Afişaţi cu verde culoarea legăturilor hipertext vizitate, Visited Links.

375
Iată care este procedura pe care trebuie s-o parcurgeţi.
1. Executaţi clic pe Modify t Page Properties…
2. În caseta de dialog Visited Links executaţi clic pe butonul d.
3. În paleta de culori care se afişează, executaţi clic cu pipeta pe

culoarea dorită (verde).
Figura 8.91
Remarcă. Selectaţi tag-ul <BODY>, deschideţi panoul Reference, utilizaţi meniul

Description şi vizualizaţi atributul vlink.
Figura 8.92
7. Testaţi culoarea legăturilor vizitate.
Schimbaţi culoarea legăturilor hipertext active (nevizitate), Active Links.

376
Dreamweaver MX Modificaţi culoarea legăturilor

workspace hipertext
Dacă culorile implicite ale link-urilor generate cu Dreamweaver fac notă
discordantă cu paginile dumneavoastră Web, puteţi să le modificaţi.
Iată cum procedaţi pentru a afişa în alb, cu Dreamweaver MX

(workspace) legătura hipertext externă „Primiţi mesajul” către adresa
e-mail „ldumitrascu@upg-ploiesti.ro”.
2. În caseta de dialog Page Properties, care se afişează în zona

Links, executaţi clic pe butonul d .
3. Executaţi clic, cu pipeta pe culoarea albă (#FFFFFF) care se

afişează în paleta de culori.
Figura 8.93

377
7. Testaţi legătura.
Aplicaţii
Schimbaţi culoarea legăturilor hipertext vizitate (Visited Links).
Schimbaţi culoarea legăturilor hipertext active (Active Links).
Creaţi o legătură hipertext către o

Dreamweaver 4 pagină care se deschide în propria
workspace
sa fereastră
Puteţi crea o legătură care deschide pagina ţintă într-o nouă fereastră a
navigatorului.
Iată cum creaţi cu Dreamweaver 4 workspace o legătură „Fereastră

proprie” către pagina „tabel16.htm” care se va deschide într-o fereastră
nouă.
1. Selectaţi legătura (figura 8.94).
Figura 8.94
2. În inspectorul Properties afişaţi meniul Target (figura 8.95).
Figura 8.95
378
3. Executaţi clic pe _blank (figura 8.96).
Figura 8.96
Figura 8.97
Remarcă. Selectaţi tag-ul <A>, deschideţi panoul Reference, utilizaţi meniul

Description şi vizualizaţi atributul target.
Figura 8.98
6. Testaţi legătura: executaţi clic pe Fereastră proprie.
Remarcă. Pagina ţintă se afişează într-o nouă fereastră (figura 8.99).

379
Figura 8.99
Creaţi o legătură hipertext către o

Dreamweaver MX pagină care se deschide în propria
workspace
sa fereastră
În mod implicit, legăturile deschid paginile Web în aceeaşi fereastră.
Pentru a conserva pagina principală care a fost afişată, deschideţi
legăturile dumneavoastră într-o nouă fereastră.

legătură hipertext „Fereastră proprie” către pagina „tabel16.htm”, care
se va deschide într-o fereastră nouă.
1. Selectaţi legătura.
2. În panoul Properties, în meniul Target, executaţi clic pe _blank.

380
Figura 8.100
5. Executaţi clic pe „Fereastră proprie” (figura 8.101).
Figura 8.101
Remarcă. Pagina ţintă se afişează într-o nouă fereastră (figura 8.102).
Figura 8.102
381
1. Descrieţi pe scurt o metodă Dreamweaver MX workspace de creare a
unei legături hipertext către o altă pagină Web.
2. Descrieţi pe scurt o metodă Dreamweaver 4 workspace de creare

legături hipertext în cadrul aceleiaşi pagini.
3. Creaţi o legătură hipertext externă către site-ul www.yahoo.com

având ca suport imaginea sigla.jpg.
4. Creaţi o legătură hipertext externă către site-ul

www.macromedia.com, folosind textul de legătură Ploieşti 2003.
5. Descrieţi pe scurt o metodă Dreamweaver MX de creare a unei

legături hipertext externă către o adresă e-mail.
6. Creaţi o legătură către site-ul www.multimania.fr având ca suport

textul Flash: INDE PLOIEŞTI.
9 www.echomedium.com
9 www.opensurf.org
9 www.flashkit.com
9 www.werehere.com
Conversaţia 9
Creaţi tabele cu Dreamweaver MX

•••••••••••••••••••••••••••••••••••••••••
f Dreamweaver 4 workspace, MX workspace – Creaţi un tabel
f Dreamweaver 4 workspace, MX workspace – Aliniaţi un tabel
f Dreamweaver 4 workspace, MX workspace – Atribuiţi un titlu tabelului
f Dreamweaver 4 workspace, MX workspace – Aplicaţi o bordură tabelului
f Dreamweaver 4 workspace, MX workspace – Aliniaţi orizontal datele unui
tabel
f Dreamweaver 4 workspace, MX workspace – Aliniaţi vertical datele unui
tabel. Aplicaţii
f Dreamweaver 4 workspace, MX workspace – Modificaţi spaţiul dintre
celulele unui tabel
f Dreamweaver 4 workspace, MX workspace – Modificaţi dimensiunile
liniilor unui tabel
f Dreamweaver 4 workspace, MX workspace – Modificaţi marginile
interioare ale celulelor unui tabel
f Dreamweaver 4 workspace, MX workspace – Extindeţi o celulă pe mai
multe coloane sau linii
f Dreamweaver 4 workspace, MX workspace – Aplicaţi o culoare
elementelor unui tabel
f Dreamweaver 4 workspace, MX workspace – Aplicaţi o imagine de
background unui tabel sau unei celule a tabelului
f Dreamweaver 4 workspace, MX workspace – Utilizaţi un tabel ca un
instrument de punere în pagină
f Dreamweaver 4 workspace, MX workspace – Formataţi un tabel utilizând
modele predefinite
f Dreamweaver 4 workspace, MX workspace – Creaţi un tabel în modul
Layout View
•••••••••••••••••••••••••••••••••••••••••
384
Dreamweaver 4 Creaţi un tabel

workspace
Pentru a crea un tabel cu Dreamweaver 4 workspace, folosiţi una din

9 Metoda 1 – Meniul Insert, modul Standard;

9 Metoda 2 – Panoul Insert, modul Standard.
Iată cum procedăm pentru a crea cu Dreamweaver 4 workspace acelaşi

tabel (cu patru linii şi trei coloane) pe care l-am construit în HTML şi
XHTML (vezi Liviu Dumitraşcu, (X)HTML, Editura Universităţii din Ploieşti,
2003).
Metoda 1
1. Executaţi clic acolo unde doriţi să figureze tabelul (figura 9.1).
Figura 9.1
2. Executaţi clic pe Insert Table (figura 9.2).
Figura 9.2
385
Remarcă. Se afişează caseta de dialog Insert Table (figura 9.3).
Figura 9.3
3. Introduceţi în zona Rows numărul de linii (4), figura 9.4.
Figura 9.4
4. Introduceţi în zona Columns numărul de coloane (3), figura 9.5.
Figura 9.5
5. Introduceţi în zona Width lungimea tabelului, exprimată în pixeli

(500) sau în procente (figura 9.6).
Figura 9.6
6. Introduceţi în zona Border lăţimea bordurii, exprimată în pixeli

(10), figura 9.7.
Figura 9.7
7. Executaţi clic pe butonul OK (figura 9.8).
Figura 9.8
386
Remarcă. Dreamweaver 4 workspace inserează un tabel vid, aliniat (în mod implicit) la
stânga (figura 9.9).
Figura 9.9
Figura 9.10
Remarci:
9 Selectaţi tag-urile <TABLE>, <TR>, <TD>, deschideţi panoul Reference şi
citiţi informaţiile care se afişează.
9 Citiţi Conversaţia 9, paragraful HTML 4 – Creaţi un tabel (Liviu Dumitraşcu,
9. Executaţi clic pe oricare din celulele tabelului, iar apoi

introduceţi datele din prima linie (capul de tabel) şi din
următoarele trei linii (de date) ale tabelului (figura 9.11)
Figura 9.11
387
Remarcă. Dreamweaver 4 workspace adaptează dimensiunea unei celule în
funcţie de conţinutul acesteia.
Figura 9.12
Aplicaţie
Formataţi (bold, centrat) prima linie (capul de tabel) a tabelului.
1. Selectaţi prima linie.
2. În inspectorul Properties activaţi opţiunea Header (figura 9.13).
Figura 9.13
388
Remarcă. Celulele selectate din prima linie a tabelului se afişează bolduit şi centrat
(figura 9.14).
Figura 9.14
Figura 9.15
Remarci:
9 Selectaţi tag-ul <TH>, deschideţi panoul Reference şi citiţi informaţiile care se
afişează. Utilizaţi meniul derulant Description pentru a vizualiza atributul
Width.
9 Citiţi Conversaţia 9, paragraful HTML 4 – Creaţi un tabel (Liviu Dumitraşcu,
389
Figura 9.16
Metoda 2
Se modifică pasul 2 (Metoda 1), după cum urmează:
2. În panoul Insert, categoria Common, executaţi clic pe
butonul (Table) figura 9.17.
Figura 9.17
390
Dreamweaver MX Creaţi un tabel

workspace
Pentru a crea un tabel cu Dreamweaver MX workspace, folosiţi una din

9 Metoda 1 – Meniul Insert, modul Standard;
Iată cum procedăm pentru a crea un tabel cu patru linii şi trei coloane,
acelaşi pe care l-aţi creat cu Dreamweaver 4 workspace.
Metoda 2
1. Executaţi clic acolo unde doriţi să figureze tabelul.
pe butonul (Table), figura 9.18.
Figura 9.18
Remarcă. Se afişează caseta de dialog Insert Table.
3. În caseta de dialog Insert table (figura 9.19) executaţi

9 în zonele Rows şi Columns – introduceţi numărul de linii (4)

391
respectiv numărul de coloane
(3);
9 în zona Width – introduceţi lungimea tabelului,
exprimată în pixeli (500) sau în
procente;
9 în zona Border – introduceţi lăţimea bordurii (10
pixeli);
Figura 9.19
Remarcă. Dreamweaver MX workspace inserează un tabel vid, aliniat la stânga (figura

9.20).
Figura 9.20
4. Afişaţi codul XHTML generat (figura 9.21).

392
Figura 9.21
Remarcă. Citiţi Conversaţia 9, paragraful XHTML – Creaţi un tabel (Liviu Dumitraşcu,

5. Executaţi clic pe oricare din celulele tabelului, iar apoi

introduceţi datele din prima linie (capul de tabel) şi din
următoarele trei linii (de date) ale tabelului (figura 9.22).
Figura 9.22

393
Figura 9.23
Aplicaţie
Formataţi (bold, centrat) prima linie (capul de tabel) a tabelului pe care l-aţi
creat anterior.
Indicaţie. În panoul Properties, activaţi opţiunea Header. Citiţi Conversaţia 9,

paragraful XHTML – Creaţi un tabel (Liviu Dumitraşcu, (X)HTML, Editura
Dreamweaver 4 Aliniaţi un tabel

workspace
Iată cum centrăm cu Dreamweaver 4 workspace tabelul pe care l-aţi

creat în aplicaţia precedentă.
394
1. Selectaţi tabelul folosind una din cele trei metode prezentate în
continuare.
Metoda 1
1.1 Executaţi clic pe oricare din celulele tabelului.
1.2 Executaţi clic pe tag-ul <table> via <body> <table> <tr>

<td> (din selectorul de tag-uri) pentru a selecta tot
tabelul (figura 9.24).
Figura 9.24
Metoda 2
1.1 Poziţionaţi cursorul în apropierea uneia dintre marginile

exterioare ale tabelului până când acesta se transformă
într-un cursor în formă de săgeţi încrucişate, iar apoi
executaţi clic (figura 9.25).
Figura 9.25
395
Metoda 3
1.1 Executaţi clic în interiorul tabelului şi apoi pe Modify

Table Select Table.
Remarcă. Pentru selectarea tabelului vom utiliza Metoda 1, figura 9.26.
Figura 9.26
2. Utilizaţi inspectorul Properties după cum urmează:
2.1 Afişaţi meniul Align, figura 9.27.
Figura 9.27
2.2 Executaţi clic pe Center, figura 9.28.
Figura 9.28
Remarcă. Tabelul se afişează centrat (figura 9.29).
Figura 9.29
3 Analizaţi codul HTML generat (figura 9.30).

396
Figura 9.30
Remarci:
9 Selectaţi tag-ul <TABLE>, deschideţi panoul Reference. Utilizaţi meniul
derulant Description pentru a vizualiza atributul align.
9 Citiţi Conversaţia 9, paragraful HTML 4 – Aliniaţi un tabel (Liviu Dumitraşcu,
4 Vizualizaţi pagina Web într-un browser (figura 9.31).
Figura 9.31
Pentru a alinia la dreapta tabelul, înlocuiţi punctul 2.2 din procedura

anterioară, după cum urmează.
2.2 În inspectorul Properties, executaţi clic pe Right, figura 9.32.
Figura 9.32
Remarcă. Tabelul se afişează aliniat la dreapta.

397
Dreamweaver MX
workspace
Aliniaţi un tabel
Pentru a alinia un tabel cu Dreamweaver MX workspace, folosiţi panoul

Properties. În meniul derulant Align alegeţi una din poziţiile afişate: left,
center, right.
Iată cum centrăm cu Dreamweaver MX workspace tabelul pe care l-aţi

creat în aplicaţia precedentă.
1. Selectaţi tabelul.
2. În panoul Properties, meniul derulant Align, executaţi clic pe

Center (figura 9.33).
Figura 9.33
Remarcă. Tabelul se afişează centrat.
3. Analizaţi codul XHTML generat.
Remarcă. Citiţi Conversaţia 9, paragraful XHTML – Aliniaţi un tabel (Liviu Dumitraşcu,

398
Dreamweaver 4 Atribuiţi un titlu tabelului

workspace
Pentru a atribui un titlu/legendă unui tabel cu Dreamweaver 4

workspace, utilizaţi un tabel cu două celule pentru a plasa un
titlu/legendă deasupra, dedesubtul unui tabel/imagine.
Iată cum afişăm cu Dreamweaver 4 workspace deasupra tabelului pe

care l-aţi creat, titlul „ LISTA CURSURILOR DE INFORMATICĂ”.
1. Executaţi clic în locul în care doriţi să figureze tabelul şi titlul

indicat.
2. Inseraţi un tabel fără bordură cu două linii şi o coloană

(lungimea tabelului este 500 pixeli), figura 9.34.
Figura 9.34
3. Executaţi clic în linia inferioară a tabelului şi inseraţi tabelul

căruia doriţi să-i aplicaţi titlul indicat (de exemplu, via Copy/Cut
Paste), figura 9.35.
399
Figura 9.35
4. Executaţi clic în linia superioară a tabelului şi introduceţi titlul

tabelului: „LISTA CURSURILOR DE INFORMATICĂ” (figura
9.36).
Figura 9.36
5. Centraţi şi bolduiţi titlul tabelului (figura 9.37).
Figura 9.37

400
Figura 9.38
Remarcă. Citiţi Conversaţia 9, paragraful HTML 4 – Atribuiţi un titlu tabelului (Liviu

Figura 9.39
401
Remarcă. Mai există, evident, şi alte metode pe care le puteţi folosi pentru a atribui un
titlu/legendă unui tabel sau unei imagini. Nu ezitaţi să le folosiţi.
Aplicaţii
Aliniaţi la dreapta titlul tabelului.
Inseraţi titlul tabelului la baza acestuia, ca pe o legendă.
1. În locul stabilit, inseraţi un tabel (fără bordură) cu două linii şi o

coloană.
2. Inseraţi tabelul cu trei coloane şi patru linii în linia superioară a

tabelului cu două linii şi o coloană.
3. Executaţi clic în linia inferioară a tabelului şi introduceţi numele indicat

(legenda).
4. Centraţi şi bolduiţi titlul tabelului.
Îmbrăcaţi tabelul cu următorul text: Bine aţi venit! Felicitări pentru răbdarea
de a ne fi descoperit! Dorim să ne cunoaştem şi să rămânem împreună!
LUMINA BLÂNDĂ este puternică şi nu doar atât!
2. În inspectorul Properties, afişaţi meniul Align în care selectaţi

Left/Right.
Remarcă. Textul se afişează în jurul tabelului (stânga/dreapta), figura 9.40.

402
Figura 9.40
Atribuiţi imaginii „sigla.jpg”, legenda „LUMINA BLÂNDĂ”.
1. Inseraţi un tabel (fără bordură) cu două linii şi o coloană (figura 9.41).
Figura 9.41
2. Executaţi clic în linia superioară a tabelului şi inseraţi imaginea

sigla.jpg (figura 9.42).
403
Figura 9.42
3. Executaţi clic în linia inferioară a tabelului şi introduceţi legenda

(figura 9.43).
Figura 9.43
Figura 9.44
404
Figura 9.45
Plasaţi legenda alături de imaginea „sigla.jpg”.
Indicaţie. Utilizaţi un tabel cu o singură linie şi două celule.
Dreamweaver MX Atribuiţi un titlu tabelului

workspace
Pentru a atribui un titlu unui tabel cu Dreamweaver MX workspace,

9 Metoda 1 – Inseraţi un tabel (fără bordură) cu două linii şi o

coloană;
9 Metoda 2 – Codul sursă XHTML, via grupul de panouri Insert

subpanoul Table;
9 Metoda 3 – Codul sursă XHTML, via meniul Insert Table

Insert – TR, TH, TD.
Iată cum atribuim cu Dreamweaver MX, un titlu, „LISTA CURSURILOR

DE INFORMATICĂ” tabelului pe care l-aţi creat anterior.
405
Metoda 2
1. Executaţi clic în interiorul tabelului.
2. Afişaţi codul sursă XHTML (figura 9.46).
Figura 9.46
3. Executaţi clic în codul sursă XHTML (figura 9.47) în locul în care

urmează să inseraţi elementul <caption>.
Figura 9.47
406
4. În grupul de panouri Insert, în subpanoul Table, executaţi clic
pe butonul cap (caption), figura 9.48.
Figura 9.48
Remarcă. Semnificaţia elementelor din subpanoul Table este următoarea:

9 tabl, inserează un tabel;
9 tr, inserează o linie;
9 th, inserează un antet;
9 td, inserează o linie;
9 cap, inserează un titlu.
În codul sursă XHTML se inserează elementul <caption> (figura 9.49).
Figura 9.49
407
5. Între tag-urile elementului XHTML inserat <caption> introduceţi
titlul tabelului (figura 9.50).
Figura 9.50
6. Acţionaţi tasta F5 pentru a actualiza codul XHTML.
Remarcă. Citiţi Conversaţia 9, paragraful XHTML – Atribuiţi un titlu tabelului

Figura 9.51
Aplicaţie
Inseraţi titlul tabelului la baza acestuia, ca pe o legendă.

408
Dreamweaver 4 Aplicaţi o bordură tabelului

workspace
Pentru a formata un tabel cu Dreamweaver 4 workspace, folosiţi

inspectorul Properties.
Iată cum aplicaţi o bordură de 10 pixeli tabelului (LISTA CURSURILOR

DE INFORMATICĂ) pe care apoi îl vom centra şi dimensiona (400 x 200
pixeli).
2. În inspectorul Properties, în zonele W şi H redefiniţi lungimea şi

lăţimea tabelului, în pixeli sau procente (figura 9.52).
Figura 9.52
3. În zona Border introduceţi valoarea 10, care reprezintă lăţimea

bordurii exterioare a tabelului (figura 9.53).
Figura 9.53
4. În meniul derulant Align selectaţi Center.
Remarcă. Tabelul de dimensiuni 400*200 pixeli şi cu o bordură de 10 pixeli se va afişa

centrat.
Figura 9.54
409
Remarci:
9 Selectaţi tag-ul <TABLE> şi deschideţi panoul Reference. Utilizaţi meniul
derulant Description pentru a vizualiza atributul align.
9 Citiţi Conversaţia 9, paragraful HTML 4 – Aplicaţi o bordură tabelului (Liviu
Figura 9.55
Aplicaţii
Mascaţi toate bordurile exterioare ale tabelului.
Indicaţie. În zona Border introduceţi valoarea 0.
Afişaţi numai bordura superioară a tabelului.
Indicaţie. Introduceţi în codul sursă HTML: <TABLE border frame=above>.
Mascaţi toate bordurile interioare ale tabelului.
Indicaţie. Introduceţi în codul sursă HTML: <TABLE border rules=none>.
Afişaţi numai bordurile interioare care separă liniile orizontale ale tabelului.
Indicaţie. Introduceţi în codul sursă HTML: <TABLE border rules=rows>.

410
Dreamweaver MX Aplicaţi o bordură tabelului

workspace
Pentru a formata un tabel cu Dreamweaver MX workspace, folosiţi

panoul Properties.
Iată cum procedaţi pentru a aplica o bordură (10 pixeli) tabelului creat,
pe care apoi îl vom centra, dimensiona (400*200 pixeli) cu
2. În panoul Properties, în zonele W, H şi Border introduceţi

valorile: 400, 200 respectiv 10, iar în meniul derulant Align
selectaţi Center (figura 9.56).
Figura 9.56
Figura 9.57
Remarcă. Citiţi Conversaţia 9, paragraful XHTML – Aplicaţi o bordură (Liviu Dumitraşcu,

411
Dreamweaver 4 Aliniaţi orizontal datele unui tabel

workspace
Pentru a alinia orizontal datele unui tabel cu Dreamweaver 4 workspace,

folosiţi inspectorul de proprietăţi.
Iată cum aliniaţi (centraţi) orizontal datele din toate celulele care aparţin
primei linii de date a tabelului.
1. Selectaţi toate celulele din prima linie de date a tabelului (figura

9.58).
Figura 9.58
2. În inspectorul Properties, indicaţi poziţia orizontală – center a

conţinutului celulelor din prima linie de date a tabelului, cu
ajutorul meniului derulant Horz (figura 9.59).
Figura 9.59
3. Executaţi clic pe Center.

412
Remarcă. Datele din prima linie de date a tabelului se afişează centrat (figura 9.60).
Figura 9.60
Figura 9.61
Remarci:
9 Selectaţi tag-ul <TR> şi deschideţi panoul Reference. Utilizaţi meniul derulant
Description pentru a vizualiza atributul align.
9 Citiţi Conversaţia 9, paragraful HTML 4 – Aliniaţi orizontal datele unui tabel

413
Figura 9.62
Aplicaţie
Aliniaţi la dreapta datele din celula de date „UTILIZARE PC-uri” care aparţine
primei linii de date.
1. Selectaţi celula de date.
1.1 Ţineţi apăsat tasta CTRL şi executaţi clic pe celula de date

(figura 9.63).
Figura 9.63
2. În inspectorul Properties, indicaţi poziţia orizontală – Right a

conţinutului celulei de date a tabelului, cu ajutorul meniului derulant
Horz.
3. Executaţi clic pe Right.

414
Figura 9.64
Figura 9.65
415
Dreamweaver MX Aliniaţi orizontal datele unui tabel

workspace
Pentru a alinia orizontal conţinutul celulelor unui tabel cu Dreamweaver

MX workspace, folosiţi panoul Properties.
Iată cum aliniaţi (centraţi) orizontal datele din toate celulele care aparţin
primei linii de date ale tabelului creat.
1. Selectaţi toate celulele din prima linie de date a tabelului.
2. În panoul Properies, în zona Horz selectaţi Center.
3. Executaţi clic pe Center.
Figura 9.66
Remarcă. Citiţi Conversaţia 9, paragraful XHTML – Aliniaţi orizontal datele unui tabel
416
Dreamweaver 4 Aliniaţi vertical datele unui tabel

workspace
Pentru a alinia vertical datele unui tabel cu Dreamweaver 4 workspace,

folosiţi inspectorul de proprietăţi.
Iată cum aliniaţi vertical – la baza celulelor (bottom), datele din toate
celulele care aparţin primei linii de date a tabelului.
2. În inspectorul Properties, indicaţi poziţia verticală – Bottom a

conţinutului celulelor din prima linie de date a tabelului, cu
ajutorul meniului derulant Vert (figura 9.67).
Figura 9.67
3. Executaţi clic pe Bottom.
Datele din prima linie de date a tabelului se aliniază vertical, la baza

celulelor (figura 9.68).
Figura 9.68
417
Figura 9.69
Remarci:
Description pentru a vizualiza atributul valign.
9 Citiţi Conversaţia 9, paragraful HTML 4 – Aliniaţi vertical datele unui tabel
Figura 9.70
Aplicaţii
Aliniaţi vertical (middle) datele din toate celulele care aparţin primei coloane
a tabelului.
1. Selectaţi toate celulele din prima coloană a tabelului.

418
Figura 9.71
2. În inspectorul Properties, indicaţi poziţia verticală – Middle a

conţinutului celulelor din prima coloană a tabelului, cu ajutorul
meniului derulant Vert.
3. Executaţi clic pe Middle.
Aliniaţi vertical (top) datele dintr-o singură celulă de date: „Autocad”.
Dreamweaver MX Aliniaţi vertical datele unui tabel

workspace
Pentru a alinia vertical datele unui tabel cu Dreamweaver MX workspace,

folosiţi panoul Properties.
Iată cum procedaţi pentru a alinia vertical, la baza celulelor (bottom),

datele din toate celulele care aparţin primei linii de date a tabelului
creat.
2. În panoul Properties, în zona Vert, selectaţi Bottom.

419
3. Executaţi clic pe Bottom.
Remarcă. Datele din prima linie de date a tabelului se aliniază vertical, la baza celulelor.
Figura 9.72
Remarcă. Citiţi Conversaţia 9, paragraful XHTML – Aliniaţi vertical datele unui tabel (Liviu
Figura 9.73
420
Dreamweaver 4
workspace
Modificaţi spaţiul dintre celulele
unui tabel
Puteţi modifica cu Dreamweaver 4 workspace spaţiul dintre celulele unui
tabel pentru a ajusta în mod corespunzător dimensiunea bordurilor.
Iată cum modificăm (10 pixeli) spaţiul dintre celulele tabelului pe care
l-aţi creat anterior.
2. În inspectorul Properties, în zona Cell Space, introduceţi

valoarea 10 (figura 9.74).
Figura 9.74
Remarcă. Dreamweaver ajustează spaţiul care separă celulele tabelului, cu valoarea

indicată – 10 pixeli (figura 9.75).
Figura 9.75
421
Figura 9.76
Remarci:
derulant Description pentru a vizualiza atributul cellspacing.
9 Citiţi Conversaţia 9, paragraful HTML 4 – Modificaţi spaţiul dintre celulele unui
tabel (Liviu Dumitraşcu, (X)HTML, Editura Universităţii din Ploieşti, 2003).
Figura 9.77
422
Dreamweaver MX
workspace Modificaţi spaţiul dintre celulele
unui tabel
Pentru a modifica spaţiul dintre celulele unui tabel cu Dreamweaver MX

workspace, folosiţi panoul Properties.
Iată cum procedaţi pentru a modifica cu 10 pixeli spaţiul dintre celulele

tabelului pe care l-aţi creat anterior.
2. În panoul Properties, în zona CellSpace, introduceţi valoarea 10

(figura 9.78).
Figura 9.78
Figura 9.79
423
Remarcă. Citiţi Conversaţia 9, paragraful XHTML – Modificaţi spaţiul dintre celulele unui
Figura 9.80
Dreamweaver 4 Modificaţi dimensiunile liniilor

workspace unui tabel
Cu Dreamweaver puteţi modifica dimensiunile elementelor unui tabel,
fără stres.
Iată cum modificăm, cu 60 respectiv 120 de pixeli înălţimea primelor

două linii ale tabelului.
1. Selectaţi prima linie a tabelului (figura 9.81).

424
Figura 9.81
2. În inspectorul Properties, în zona H, redefiniţi înălţimea primei

linii introducând valoarea 60.
Remarcă. Prima linie a tabelului se afişează cu înălţimea modificată (60 pixeli), figura
9.82.
Figura 9.82
4. Selectaţi cea de-a doua linie a tabelului.
5. În inspectorul Properties, în zona H, introduceţi valoarea 120

(pixeli).

425
Figura 9.83
Remarci:
9 Selectaţi tag-ul <TD> şi deschideţi panoul Reference. Utilizaţi meniul derulant
Description pentru a vizualiza atributul height.
9 Citiţi Conversaţia 9, paragraful HTML 4 – Modificaţi dimensiunile liniilor unui
Figura 9.84
Pentru a modifica lungimea primei linii a tabelului (100 pixeli) respectaţi

paşii descrişi în continuare.
426
2. În inspectorul Properties, în zona W, redefiniţi lungimea
tabelului, introducând valoarea 100 pixeli.
Figura 9.85
Remarcă. Selectaţi tag-ul <TH> şi deschideţi panoul Reference. Utilizaţi meniul derulant
Description pentru a vizualiza atributul Width. Citiţi Conversaţia 9, paragraful HTML 4 –
Modificaţi dimensiunile liniilor unui tabel (Liviu Dumitraşcu, (X)HTML, Editura
Figura 9.86
Aplicaţii
Redimensionaţi tabelul „LISTA CURSURILOR DE INFORMATICĂ” cu valorile

550 x 350 pixeli.
Indicaţie. În inspectorul Properties, în zonele W şi H introduceţi valorile indicate.

427
Modificaţi lungimea primei coloane (Denumire curs) a aceluiaşi tabel, cu
valoarea 130 pixeli.
Indicaţie. Executaţi paşii listaţi în cele ce urmează.
1. Executaţi clic în celula Denumire curs.
2. În inspectorul Properties, în zona W, introduceţi valoarea 130 pixeli.
Modificaţi înălţimea primei celule (Denumire curs) a aceluiaşi tabel, cu

Indicaţie. Executaţi paşii descrişi în continuare.
1. Executaţi clic în celula Denumire curs.
2. În inspectorul Properties, în zona H, introduceţi valoarea 150 pixeli.
Modificaţi lungimea celei de-a treia celule de date (50$) a aceluiaşi tabel, cu
Modificaţi manual (cu ajutorul mouse-ului) dimensiunile aceluiaşi tabel cu

300 x 50 pixeli.
Iată care este procedura de urmat.
2. Glisaţi cele trei puncte (de pe conturul tabelului) în direcţiile

corespunzătoare (figura 9.87).
428
Figura 9.87
Convertiţi lungimea (300 pixeli) tabelului în procente.
Iată care sunt paşii pe care trebuie să-i parcurgeţi.
2. În inspectorul Properties executaţi clic pe butonul (Convert Table

Widths to Percent), figura 9.88.
Figura 9.88
sau,
2. Executaţi clic pe Modify Table Convert Widths to Percent.
Remarcă. Folosiţi butonul (Convert Table Widths to Pixels) din inspectorul Properties
pentru convertirea dimensiunii tabelului în pixeli.
Ştergeţi lungimea/lăţimea celulelor unui tabel.
2. În inspectorul Properties executaţi clic pe butonul (Clear Row
Heights)/ (Clear Column Widths), figura 9.89.

429
Figura 9.89
sau,
2. Executaţi clic pe Modify Table Clear Row Heights/Clear Column

Widths.
Dreamweaver MX Modificaţi dimensiunile liniilor

workspace unui tabel
Pentru a modifica dimensiunile liniilor unui tabel cu Dreamweaver MX

workspace, folosiţi panoul Properties.
Iată cum procedaţi pentru a modifica înălţimea primelor două linii ale
tabelului creat, cu 60, respectiv 120 de pixeli.
1. Selectaţi prima linie a tabelului.
2. În panoul Properties, în zona H, introduceţi valoarea 60 (pixeli).
4. Selectaţi cea de-a doua linie a tabelului.
5. În panoul Properties, în zona H introduceţi valoarea 120

(pixeli).

430
Figura 9.90
Figura 9.91
Iată cum procedaţi pentru a modifica lungimea primei linii a tabelului

(100 pixeli).
2. În panoul Properties, în zona W introduceţi valoarea 100

(pixeli).

431
Figura 9.92
Remarcă. Citiţi Conversaţia 9, paragraful XHTML – Modificaţi dimensiunile liniilor unui

Dreamweaver 4 Modificaţi marginile interioare ale

workspace celulelor unui tabel
Puteţi modifica cu Dreamweaver 4 workspace distanţa dintre conţinutul
şi marginile interioare ale celulelor unui tabel.
Iată cum modificăm (15 pixeli) marginile interioare ale celulelor tabelului
creat.
2. În inspectorul Properties, în zona CellPad, introduceţi valoarea

15 (figura 9.93).
Figura 9.93
432
Remarcă. Dreamweaver 4 workspace ajustează marginile interioare ale celulelor tabelului

cu valoarea indicată – 15 pixeli (figura 9.94).
Figura 9.94
Figura 9.95
Remarci:
derulant Description pentru a vizualiza atributul cellpadding.
9 Citiţi Conversaţia 9, paragraful HTML 4 – Modificaţi interioare ale celulelor
unui tabel (Liviu Dumitraşcu, (X)HTML, Editura Universităţii din Ploieşti,
2003).

433
Figura 9.96
Dreamweaver MX Modificaţi marginile interioare ale

workspace celulelor unui tabel
Pentru a modifica marginile interioare ale celulelor unui tabel cu
Iată cum procedaţi pentru a modifica (15 pixeli) marginile interioare ale
celulelor tabelului „LISTA CURSURILOR DE INFORMATICĂ”.
2. În panoul Properties, în zona CellPad, introduceţi valoarea 15

(pixeli).

434
Figura 9.97
Remarcă. Citiţi Conversaţia 9, paragraful XHTML – Modificaţi marginile

interioare ale celulelor unui tabel (Liviu Dumitraşcu, (X)HTML, Editura Universităţii
din Ploieşti, 2003).
Figura 9.98
Dreamweaver 4 Extindeţi o celulă pe mai multe

workspace coloane sau linii
Fuziunea celulelor (orizontal sau vertical) cu Dreamweaver 4 workspace
este o operaţie deosebit de simplă.
435
Iată cum adăugaţi în tabel o nouă linie de antet: „INFORMATICA”, care
se extinde pe toate cele trei coloane ale tabelului.
1. Adăugaţi o linie vidă deasupra liniei care conţine capul de tabel,

folosind una din cele trei metode prezentate în continuare.
Metoda 1
1.1 Executaţi clic în celula Denumire curs.
1.2 Executaţi clic pe Modify Table Insert Row.
Remarcă. Dreamweaver 4 workspace inserează o linie vidă deasupra liniei care conţine
capul de tabel (figura 9.99).
Figura 9.99
Metoda 2
1.1 Executaţi clic în celula Denumire curs.
1.2 Executaţi clic pe Modify Table Insert Row or

Columns….
Remarcă. Se afişează caseta de dialog Insert Rows or Columns.
1.3 În caseta de dialog Insert Rows or Columns, executaţi

9 în zona Insert – alegeţi opţiunea Rows;

436
9 în zona Number of Rows – alegeţi 1;
9 în zona Where – alegeţi opţiunea Above

the Selection.
Figura 9.100
Metoda 3
1.1 Executaţi clic cu butonul din dreapta al mouse-ului în

celula Denumire curs. Se afişează meniul derulant Table,
Paragraph Format, List ….
1.2 Executaţi clic pe Table Insert Row.
Remarcă. Pentru a adăuga o nouă linie la baza tabelului (Metoda 4), executaţi clic în
ultima celulă a tabelului şi apoi acţionaţi tasta ' sau în inspectorul Properties, în zona
Rows măriţi cu 1 valoarea iniţială.
2. Selectaţi celulele adiacente care doriţi să fuzioneze (figura

9.101).
Figura 9.101
437
3. Fuzionaţi celulele selecţionate într-una singură, folosind una din
cele două metode prezentate în continuare.
Metoda 1
3.1 În inspectorul Properties, executaţi clic pe butonul

(Merge Cells).
Figura 9.102
Remarcă. Dreamweaver 4 workspace afişează cele trei celule ale liniei într-una singură
(figura 9.103).
Figura 9.103
Metoda 2
3.1 Executaţi clic pe Modify Table Merge Cells.
4. Introduceţi titlul noii linii de antet: INFORMATICA (figura

9.104).
Figura 9.104
438
Remarci:
9 Pentru a mări dimensiunile unei celule fuzionate, executaţi clic în celula
fuzionată, iar apoi executaţi clic pe Modify Table Increase Row Span.
9 Pentru a micşora dimensiunile unei celule fuzionate, executaţi clic în celula
fuzionată, iar apoi executaţi clic pe Modify Table Decrease Row Span.
Figura 9.105
Remarci:
9 Selectaţi tag-ul <TH> şi deschideţi panoul Reference. Utilizaţi meniul derulant
Description pentru a vizualiza atributul colspan.
9 Citiţi Conversaţia 9, paragraful HTML 4 – Extindeţi o celulă pe mai multe
coloane sau linii (Liviu Dumitraşcu, (X)HTML, Editura Universităţii din Ploieşti,
2003).
Figura 9.106
Remarcă. Numai celulele contigue pot fi reunite.

439
Pentru a extinde prima celulă de date „UTILIZARE PC-uri” pe două linii,
parcurgeţi paşii descrişi în cele ce urmează: selectaţi celulele adiacente;
fuzionaţi celulele selecţionate într-una singură, aplicând una din cele
două variante prezentate anterior; analizaţi codul HTML generat;
vizualizaţi pagina Web într-un browser.
Remarci:
9 Invers, puteţi fracţiona celulele fuzionate (pentru a regăsi numărul iniţial de
celule).
9 Procedura de fracţionare a celulelor fuzionate este următoarea:
1. Executaţi clic într-o celulă fuzionată.
Metoda 1:
2. Executaţi clic pe Modify Table Split Cell.
Se afişează caseta de dialog Split Cell (figura 9.107).
Figura 9.107
3. În funcţie de fuziunea iniţială, alegeţi Split Cell Into: Rows sau Split
Cell Into: Columns apoi indicaţi Number of Columns.
Metoda 2:
Se modifică punctul 2, Metoda 1, după cum urmează:
2. În inspectorul Properties, executaţi clic pe butonul (Splits Cell into
rows or columns).
Dreamweaver MX Extindeţi o celulă pe mai multe

workspace coloane sau linii
Pentru a fuziona celulele unui tabel cu Dreamweaver MX workspace,
9 Metoda 1 – Meniul Modify, via Table Merge;

440
Iată cum procedaţi pentru a adăuga în tabelul pe care l-aţi creat cu
Dreamweaver 4 workspace o nouă linie de antet: „INFORMATICA”, care
se extinde pe toate cele trei coloane ale tabelului.
1. Adăugaţi o linie vidă deasupra liniei care conţine capul de tabel.
2. Selectaţi celulele adiacente care doriţi să fuzioneze.
3. Fuzionaţi celulele selecţionate.
Metoda 2
3.1 În panoul Properties, executaţi clic pe butonul (Merge

Cells), figura 9.108.
Figura 9.108
Remarcă. Dreamweaver MX workspace afişează cele trei celule ale liniei într-una singură.
4. Introduceţi titlul noii linii de antet: INFORMATICA.
Figura 9.109
441
Remarcă. Citiţi Conversaţia 9, paragraful XHTML – Extindeţi o celulă pe mai
multe coloane sau linii (Liviu Dumitraşcu, (X)HTML, Editura Universităţii din Ploieşti,
2003).
Figura 9.110
Aplicaţii
Extindeţi prima celulă de date „UTILIZARE PC-uri” pe două linii.
Fracţionaţi celulele fuzionate.
Indicaţie. Pentru a fracţiona celulele fuzionate cu Dreamweaver MX workspace,

9 Metoda 1 – Meniul Modify, via Table Split Cells;
Dreamweaver 4 Aplicaţi o culoare elementelor unui

workspace tabel
Cu Dreamweaver 4 workspace puteţi aplica, fără a vă stresa o culoare
celulelor, liniilor sau coloanelor unui tabel.
Iată cum aplicaţi o culoare (albastru deschis) primei linii a tabelului.

442
2. În inspectorul Properties, executaţi clic pe butonul (Bg).
Remarcă. Se afişează paleta de culori (figura 9.111).
Figura 9.111
3. Executaţi clic cu pipeta pe culoarea albastru deschis.
Dreamweaver 4 workspace afişează prima linie a tabelului în albastru deschis (figura

9.112).
Figura 9.112
Figura 9.113
443
Remarci:
Description pentru a vizualiza atributul BGCOLOR.
9 Citiţi Conversaţia 9, paragraful HTML 4 – Aplicaţi o culoare elementelor unui
Figura 9.114
Iată cum aplicaţi aceeaşi culoare (albastru deschis) primei coloane a

aceluiaşi tabel.
1. Selectaţi prima coloană a tabelului (figura 9.115).
Figura 9.115
2. În inspectorul Properties, executaţi clic pe butonul (Bg).

444
Figura 9.116
Figura 9.117
Dreamweaver MX Aplicaţi o culoare elementelor unui

workspace tabel
Pentru a aplica o culoare celulelor, liniilor sau coloanelor unui tabel cu
445
Iată cum aplicaţi o culoare (albastru deschis) primei linii a tabelului
„LISTA CURSURILOR DE INFORMATICĂ”.
2. În panoul Properties, executaţi clic pe butonul (Bg).
Figura 9.118
Remarcă. Citiţi Conversaţia 9, paragraful XHTML – Aplicaţi o culoare elementelor unui

Figura 9.119
446
Aplicaţii
Aplicaţi aceeaşi culoare (albastru deschis) primei coloane a aceluiaşi tabel.
Coloraţi în cyan background-ul tabelului. Coloraţi în aqua linia de antet şi în

white a doua linie de date a aceluiaşi tabel.
Coloraţi în galben bordura tabelului.
#_________________________________________________________
___________________________________________________________
___________________________________________________________
___________________________________________________________
Aplicaţi o imagine de background

Dreamweaver 4 unui tabel sau unei celule a
workspace
tabelului
Iată cum plasaţi pe fundalul tabelului imaginea Blue hills.jpg.
2. În inspectorul Properties, în zona BgImage introduceţi adresa

imaginii de background (figura 9.120).
Figura 9.120
Remarcă. Puteţi selecta imaginea de background, utilizând de asemenea

icon-ul Browse for File ( ) din inspectorul Properties, via BgImage.
Dreamweaver 4 workspace aplică pe fundalul tabelului imaginea dorită
(figura 9.121).
447
Figura 9.121
Figura 9.122
Remarci:
derulant Description pentru a vizualiza atributul BACKGROUND.
9 Citiţi Conversaţia 9, paragraful HTML 4 – Aplicaţi o imagine de background
unui tabel sau unei celule a tabelului (Liviu Dumitraşcu, (X)HTML, Editura
Figura 9.123
448
Pentru a plasa aceeaşi imagine de background în prima celulă de date
(UTILIZARE PC-uri) a tabelului, respectaţi procedura descrisă în cele ce
urmează.
1. Selectaţi celula de date UTILIZARE PC-uri (figura 9.124).
Figura 9.124
2. În inspectorul Properties, cu ajutorul icon-ului (Point to File)

şi (Background URL of cell) aplicaţi imaginea de background
Smokey Light.jpg celulei selectate (figura 9.125).
Figura 9.125
Dreamweaver 4 workspace aplică pe fundalul tabelului imaginea dorită (figura 9.126).
Figura 9.126

449
Figura 9.127
Remarcă. Selectaţi tag-ul <TD> şi deschideţi panoul Reference. Utilizaţi meniul derulant
Description pentru a vizualiza atributul BACKGROUND.
Figura 9.128
Aplicaţi o imagine de background

Dreamweaver MX unui tabel sau unei celule a
workspace
tabelului
Pentru a aplica o imagine de background unui tabel (celule) folosiţi
panoul Properties.
450
Iată cum procedaţi pentru a plasa pe fundalul tabelului creat, imaginea
Smokey Light.jpg.
2. În panoul Properties, în zona BgImage, introduceţi adresa

imaginii de background.
Figura 9.129
Figura 9.130
451
Aplicaţie
Plasaţi imaginea de background Smokey Light.jpg în prima celulă de date a

aceluiaşi tabel.
Dreamweaver 4 Utilizaţi un tabel ca un instrument

workspace de punere în pagină
Iată cum plasăm imaginea Smokey Light.jpg în tabel (figura 9.131).
1. Creaţi cu Dreamweaver 4 workspace tabelul în care urmează să

inseraţi imaginea (figura 9.131).
Figura 9.131
2. Plasaţi imaginea în celula din stânga tabelului (tabelul 9.132).
Figura 9.132
452
3. Afişaţi codul HTML generat (figura 9.133).
Figura 9.133
Remarci:
9 Selectaţi tag-ul <TD> şi deschideţi panoul Reference. Utilizaţi meniul derulant
Description pentru a vizualiza atributul rowspan.
9 Citiţi Conversaţia 9, paragraful HTML 4 – Utilizaţi un tabel ca un instrument de
punere în pagină (Liviu Dumitraşcu, (X)HTML, Editura Universităţii din Ploieşti,
2003).
Figura 9.134
Dreamweaver MX Utilizaţi un tabel ca un instrument

workspace de punere în pagină
De ce să nu utilizăm un tabel pentru a realiza punerea în pagină a
site-ului dumneavoastră? Este o soluţie agreată de un număr foarte
mare de webmasters!
453
Iată cum procedăm pentru a insera imaginea Smokey Light.jpg în celula
din stânga a tabelului „LISTA CURSURILOR DE INFORMATICĂ”.
1. Creaţi cu Dreamweaver MX workspace tabelul „LISTA

CURSURILOR DE INFORMATICĂ”.
2. Plasaţi imaginea în celula din stânga tabelului.
3. Afişaţi codul XHTML generat (figura 9.135).
Figura 9.135
Remarcă. Citiţi Conversaţia 9, paragraful XHTML – Utilizaţi un tabel ca un instrument de

punere în pagină (Liviu Dumitraşcu, (X)HTML, Editura Universităţii din Ploieşti, 2003).
Figura 9.136
454
Dreamweaver 4 Formataţi un tabel utilizând

workspace modele predefinite
Cu Dreamweaver puteţi să formataţi propriul tabel utilizând diverse
modele predefinite.
Iată cum utilizăm modelul Dbl Rows: Orange pentru formatarea tabelului
„LISTA CURSURILOR DE INFORMATICĂ”.
2. Executaţi clic pe Commands Format Table (figura 9.137).
Figura 9.137
Remarcă. Se afişează caseta de dialog Format Table (figura 9.138).

455
Figura 9.138
3. În lista derulantă (situată în stânga) alegeţi modelul predefinit

(Dbl Rows: Orange), figura 9.139.
Figura 9.139
4. În zona Row Colors indicaţi prima culoare (white) şi a doua

culoare (orange) tastând codul/numele culorii în cele două
zone: First respectiv Second (figura 9.140).
Figura 9.140
5. În meniul derulant Alternate alegeţi Every Two Rows, pentru a

aplica liniilor tabelului culorile definite anterior (figura 9.141).
Figura 9.141
456
6. În zona Top Row, care permite personalizarea primei linii a

tabelului alegeţi Center pentru câmpul Align şi Bold pentru
câmpul Text Style (figura 9.142).
Remarcă. Cei interesaţi pot completa şi câmpurile Bg Color şi Text Color

cunoscute din HTML şi Dreamweaver.
Figura 9.142
7. În zona Left Col, care permite formatarea primei coloane a

tabelului, alegeţi Left pentru câmpul Align şi Italic pentru
câmpul Text Style (figura 9.143).
Figura 9.143
8. În zona Border introduceţi valoarea 1 (lăţimea bordurii tabelului

exprimată în pixeli), figura 9.144.
Figura 9.144
9. Activaţi în zona Options opţiunea Apply All Attributes to TD

Tags Instead of TR Tags pentru a aplica toate atributele de
formatare (text, aliniere, culoare...) tag-urilor HTML <td> de
formatare a celulelor şi nu tag-urilor <tr> de formatare a liniilor
(figura 9.145).
Figura 9.145
Remarcă. Dreamweaver afişează tabelul formatat cu modelul Dbl Rows: Orange (figura
9.146).
457
Figura 9.146
Figura 9.147

458
Figura 9.148
Aplicaţii
Sortaţi ascendent după câmpul Denumire curs tabelul „LISTA CURSURILOR

DE INFORMATICĂ”.
Iată care este procedura pe care trebuie s-o urmaţi pentru sortarea tabelului,
după cheia de sortare indicată – Denumire curs.
1. Executaţi clic în tabel.
2. Executaţi clic pe Commands Sort Table (figura 9.149).
Figura 9.149
Remarcă. Se afişează caseta de dialog Sort Table (figura 9.150).

459
Figura 9.150
3. În meniul derulant Sort By alegeţi Column 1, care reprezintă coloana

după care se face sortarea (figura 9.151).
Figura 9.151
4. În meniul derulant Order alegeţi tipul Alphabetically (ordine

alfabetică) şi apoi Ascending (sortare ascendentă), figura 9.152.
Figura 9.152
Remarci:
9 În meniul derulant Then By alegeţi în cazul dublării primei coloane , a doua
coloană de sortare, indicând de asemenea tipul de sortare:
alfabetică/numerică, ascendentă/descendentă.
9 În Dreamweaver 4 workspace sunt admise una sau două chei de sortare.
9 Activaţi opţiunea Sort Includes First Row dacă prima linie a tabelului trebuie
să fie inclusă în sortare. În acest caz ea va fi deplasată.
9 Activaţi opţiunea Keep TR Attributes With Sorted Row pentru ca elementele
de formatare ale primei linii să fie deplasate cu aceasta.
Remarcă. Dreamweaver 4 workspace afişează tabelul sortat după prima coloană (figura
9.153).
460
Figura 9.153
Figura 9.154
Figura 9.155
461
Importaţi un tabel Excel.
Pentru a importa un tabel creat într-o altă aplicaţie (Excel, Acces etc.) respectaţi
procedura descrisă în continuare.
1. Creaţi în Excel tabelul corespunzător (figura 9.156).
Figura 9.156
2. În panoul Insert, zona Common, executaţi clic pe butonul (Insert

Tabular Data),figura 9.157.
Figura 9.157
sau,
2. Executaţi clic pe File Import Import Tabular Data....
Remarcă. Se afişează caseta de dialog Insert Tabular Data (figura 9.158).

462
Figura 9.158
3. Indicaţi fişierul de date (extensia .txt) executând clic pe butonul

Browse... via Data File.
4. În meniul derulant Delimiter alegeţi delimitatorul de date (figura

9.159):
5. În zona Table Width activaţi opţiunea Set pentru a preciza

dumneavoastră înşivă lărgimea tabelului în procente sau pixeli (figura
9.159).
6. Utilizaţi meniul derulant Format Top Row pentru a aplica o formatare

particulară datelor din prima linie (figura 9.159).
Figura 9.159
463
7. Definiţi: marginea interioară a celulelor, spaţiul dintre celule, bordura
utilizând câmpurile Cell Padding, Cell Spacing, Border din caseta de
dialog Insert Tabular Data.
Remarcă. Dreamweaver afişează tabelul importat din Excel (figura 9.160).
Figura 9.160
Figura 9.161

464
Figura 9.162
Exportaţi în Word tabelul pe care l-aţi creat cu Dreamweaver 4 workspace.
1. Executaţi clic în interiorul tabelului.
2. Executaţi clic pe File Export Table (figura 9.163).
Figura 9.163
Remarcă. Se afişează caseta de dialog Export Table.

465
3. În caseta de dialog Export Table (figura 9.164) realizaţi următoarele
acţiuni:
9 în meniul derulant Delimiter – alegeţi tipul de delimitator;
9 în meniul derulant Line Breaks – alegeţi tipul de salt de linie;
9 – executaţi clic pe butonul Export.
Figura 9.164
4. Afişaţi în Word tabelul Dreamweaver exportat (figura 9.165).
Figura 9.165
466
Dreamweaver MX Formataţi un tabel utilizând

workspace modele predefinite
Pentru a formata un tabel cu Dreamweaver MX workspace, folosiţi

meniul Commands, via Format Table (vezi Dreamweaver 4 workspace).
Iată cum formatăm tabelul „LISTA CURSURILOR DE INFORMATICĂ”

utilizând modelul Dbl Rows: cyan.
2. Executaţi clic pe Commands Format Table.
3. În caseta de dialog Format Table care se afişează (figura 9.166)

9 în lista derulantă (situată în stânga casetei) – alegeţi

modelul predefinit Dbl Rows: cyan;
9 în zona Row Colors – tastaţi White (câmpul First) şi cyan

(câmpul Second);
9 în meniul derulant Alternate – alegeţi Every Other Row;
9 în zona Top Row – alegeţi Center în câmpul Align şi Bold în

câmpul Text Style;
9 în zona Left Col – alegeţi Left în câmpul Align şi Regular în

câmpul Text Style;
9 în zona Border – introduceţi valoarea 1;
9 – activaţi opţiunea Apply All Attributes to TD

Tags Instead of TR Tags pentru a plica toate atributele de
formatare tag-urilor HTML <td> de formatare a celulelor;

467
Figura 9.166
Figura 9.167

468
Figura 9.168
Aplicaţii
Sortaţi ascendent, după câmpul Denumire curs „LISTA CURSURILOR DE

INFORMATICĂ”.
Importaţi un tabel Excel.
Indicaţie. Folosiţi una din metodele prezentate mai jos:

9 Metoda 2 – Meniul File, via Import Import Tabular Data.
Exportaţi în Word tabelul pe care l-aţi creat cu aplicaţia precedentă.
Indicaţie. Folosiţi meniul File, via Export Table.
Dreamweaver 4 Creaţi un tabel în modul Layout

workspace View
Cu Dreamweaver 4 workspace puteţi crea un tabel în două moduri:
9 Standard View;
9 Layout View.
Pentru a activa modul Layout View cu Dreamweaver 4 workspace folosiţi

9 Metoda 1 – Meniul View, via Table View Layout View;

469
Iată cum creăm în modul Layout View tabelul „LISTA CURSURILOR DE
INFORMATICĂ” pe care l-aţi realizat în modul Standard View. Vom utiliza
Metoda 2.
Metoda 2

(Layout View), figura 9.169.
Figura 9.169
Se afişează caseta de dialog Getting Started in Layout View (figura

9.170).
Figura 9.170
470
Remarcă. Puteţi, de asemenea, activa modul Layout View executând clic pe View
Table View Layout View (Metoda 1).
3. În panoul Insert, categoria Common - Layout View executaţi
clic pe butonul (Draw Layout Table) pentru a trasa un tabel

în modul Layout View (figura 9.171).
Figura 9.171
4. Desenaţi o zonă dreptunghiulară care delimitează tabelul

dumneavoastră, executând clic în stânga sus a ferestrei
document şi apoi cu butonul stânga al mouse-ului apăsat
deplasându-vă în dreapta jos pentru a determina dimensiunile
tabelului (figura 9.172).
Figura 9.172
471
5. Eliberaţi butonul din stânga al mouse-ului. Dreamweaver
afişează (în modul Layout View) tabelul în fereastra document
(figura 9.173) indicând lungimea tabelului exprimată în pixeli.
Figura 9.173
6. Ajustaţi dimensiunile tabelului acţionând asupra celor trei

puncte de pe conturul tabelului sau utilizând inspectorul
Properties - zonele Width şi Height (figura 9.174).
Figura 9.174
Remarci:
9 Puteţi indica, de asemenea, în inspectorul Properties: CellPad,
CellSpace, Bg cu semnificaţiile cunoscute.
9 Conţinutul tabelului nu poate fi editat încă întrucât acesta nu conţine
nici o celulă!
7. Desenaţi celulele în tabelul creat (400 x 200 pixeli).
7.1 În panoul Insert, categoria Common – Layout View
executaţi clic pe butonul (Draw Layout Cell),figura

9.175.
472
Figura 9.175
7.2 Trasaţi prima celulă a tabelului (figura 9.176).
Figura 9.176
7.3 Trasaţi celelalte celule ale tabelului (figura 9.177).
Remarcă. Pentru a desena mai multe celule contigue menţineţi apăsată tasta CTRL.
Figura 9.177
473
Remarci:
9 Puteţi, de asemenea, desena direct prima celulă, fără a desena înainte
tabelul. Celula va fi inclusă într-un tabel care va avea ca lungime dimensiunea
ecranului dumneavoastră de lucru.
9 Puteţi redimensiona celulele unui tabel fie manual, fie cu inspectorul
Properties (zonele Width şi Height).
9 Puteţi şterge o celulă menţinând apăsată tasta CTRL şi executând clic în celulă
şi acţionând tasta Delete.
9 Puteţi desena celulele dumneavoastră utilizând două moduri: absolut şi
relativ. Modul absolut vă permite să indicaţi valorile în pixeli care sunt fixe;
modul relativ vă permite să indicaţi valorile în procente în raport cu
dimensiunea ferestrei navigatorului. Este modul Autostretch. O singură
coloană de celule poate fi Autostretch.
9 Pentru a desena o coloană în mod relativ, respectaţi următoarea procedură:
desenaţi tabelul cu instrumentul Draw Layout Table ( ), care în mod

implicit este în mod Standard View.
în inspectorul Properties executaţi clic pe opţiunea Autostretch.
Dreamweaver desenează tabelul în modul relativ; un simbol specific
( ) se afişează în antet-ul tabelului (figura 9.178).
Figura 9.178
cu instrumentul Draw Layout Cell ( ) desenaţi prima celulă:

coloana corespunzătoare este în mod relativ, cealaltă coloană
este în mod absolut (figura 9.179).
Figura 9.179
desenaţi celelalte celule.

474
Figura 9.180
9. Afişaţi tabelul în modul standard, folosind una din cele două

metode prezentate mai jos (figura 9.181).
Metoda 1
9.1. Executaţi clic pe View Table View Standard View.
Metoda 2
9.1. În panoul Insert, categoria Common, executaţi clic pe

butonul (Standard View).
Figura 9.181

475
Figura 9.182
Dreamweaver MX Creaţi un tabel în modul Layout

workspace View
Pentru a activa modul Layout View cu Dreamweaver MX workspace
9 Metoda 1 – Meniul View, via Table View Layout View;

Creaţi tabelul în modul Layout View
Iată cum creăm în modul Layout View acelaşi tabel pe care l-aţi creat cu
Dreamweaver 4 workspace în modul Standard View.
Metoda 2
1. În grupul de panouri Insert, în subpanoul Layout, executaţi clic

pe butonul Layout View (figura 9.183).
Figura 9.183
2. În subpanoul Layout View, executaţi clic pe butonul (Draw

Layout Table).
3. Desenaţi o zonă dreptunghiulară care delimitează tabelul

dumneavoastră (figura 9.184).
476
Figura 9.184
Remarcă. Dreamweaver afişează tabelul în modul Layout View indicând lungimea (în
pixeli).
4. Ajustaţi dimensiunile tabelului (400 x 200 pixeli).
Indicaţie. Utilizaţi panoul Properties. Introduceţi valorile corespunzătoare

în zonele: Width (400), Height (200), CellPad (0), CellSpace (0).
Desenaţi celulele tabelului
1. În grupul de panouri Insert, în subpanoul Layout View,
executaţi clic pe butonul (Draw Layout Cell), figura 9.185.
Figura 9.185
2. Trasaţi prima celulă a tabelului (figura 9.186).
Figura 9.186
3. Trasaţi celelalte celule ale tabelului.

477
4. Completaţi tabelul pe care l-aţi creat.
5. Afişaţi tabelul în modul standard, folosind una din metodele

prezentate în continuare.
9 Metoda 1 – Meniul View, via Table View Standard View;
9 Metoda 2 – Grupul de panouri Insert, via subpanoul Layout

View Standard View.
Figura 9.187
Figura 9.188
478
1. Descrieţi pe scurt o metodă Dreamweaver MX pentru:
9 crearea unui tabel;
9 alinierea unui tabel;
9 atribuirea unui titlu tabelului;
9 aplicarea unei borduri tabelului;
9 alinierea orizontal/vertical a datelor unui tabel.
2. Cum extindeţi cu Dreamweaver MX o celulă pe mai multe coloane/
linii?
3. Cum folosiţi inspectorul de proprietăţi (Panoul Properties) pentru a
aplica o culoare celulelor, liniilor sau coloanelor unui tabel?
4. Puteţi utiliza un tabel pentru punerea în pagină a site-ului
dumneavoastră?
5. Cum formataţi un tabel utilizând modelele predefinite?
9 www.balam.net
9 www.modernmethod.com
9 www.banja.com
Conversaţia 10
Creaţi formulare cu Dreamweaver MX

•••••••••••••••••••••••••••••••••••••••••
f Dreamweaver 4 workspace, MX workspace – Creaţi un formular
f Dreamweaver 4 workspace, MX workspace – Creaţi un buton pentru
expedierea (submit) unui formular
f Dreamweaver 4 workspace, MX workspace – Creaţi un buton pentru
resetarea (reset) unui formular
f Dreamweaver 4 workspace, MX workspace – Inseraţi o zonă simplă de
text
f Dreamweaver 4 workspace, MX workspace – Inseraţi o zonă de text
multilinie
f Dreamweaver 4 workspace, MX workspace – Creaţi o casetă de validare
f Dreamweaver 4 workspace, MX workspace – Creaţi un buton radio
f Dreamweaver 4 workspace, MX workspace – Creaţi un meniu derulant
•••••••••••••••••••••••••••••••••••••••••
Dreamweaver 4 Creaţi un formular

workspace
Cu Dreamweaver 4 workspace puteţi crea un formular adăugând apoi

elementele (obiectele) care îl compun.
Pentru a crea un formular cu Dreamweaver 4 workspace, folosiţi una din

9 Metoda 1 – Meniul Insert, via Form;

478
Inseraţi un formular
Iată cum procedaţi pentru a insera un formular în pagina
dumneavoastră Web cu Dreamweaver 4 workspace.
Metoda 1
1. Executaţi clic pe Edit Preferences (figura 10.1).
Figura 10.1
Remarcă. Se afişează caseta de dialog Preferences (figura 10.2).
2. În caseta de dialog Preferences, în zona Category executaţi clic

pe Invisible Elements (figura 10.2).
479
Figura 10.2
Remarcă. Opţiunea Form Delimiter trebuie să fie activată (figura 10.2).
3. Verificaţi dacă elementele invizibile sunt afişate, via View

Visual Aids Invisible Elements.
4. Executaţi clic în zona în care doriţi să inseraţi formularul (figura

10.3).
Figura 10.3
5. Executaţi clic pe Insert Form (figura 10.4).

480
Figura 10.4
Remarcă. Dreamweaver inserează un dreptunghi discontinuu roşu, care materializează

limitele formularului (figura 10.5).
Figura 10.5
Figura 10.6
Remarci:
481
9 Selectaţi tag-ul <FORM>, deschideţi panoul Reference şi citiţi informaţiile care
se afişează.
9 Citiţi Conversaţia 10, paragraful: HTML 4 – Creaţi un formular (Liviu
Figura 10.7
Metoda 2
5. În panoul Insert, categoria Forms, executaţi clic pe butonul

(Insert Form), figura 10.8.
Figura 10.8
Precizaţi metoda şi script-ul utilizate

Unul din parametrii esenţiali ai formularului este calea de acces la
script-ul CGI utilizat. El este definit în inspectorul Properties.
482
Iată cum precizăm metoda prin care datele sunt comunicate server-ului,
precum şi calea de acces la script-ul CGI.
1. În inspectorul Properties (figura 10.9), în zona:
9 Form Name – introduceţi numele formularului (formular);
9 Action – introduceţi calea de acces la script-ul CGI

utilizat;
9 Method – alegeţi POST (purtaţi o discuţie cu

administratorul de reţea) din meniul derulant.
Figura 10.9
Figura 10.10
Remarcă. Selectaţi tag-ul <FORM>, deschideţi panoul Reference. Utilizaţi meniul

derulant Description pentru a vizualiza atributul action. Citiţi Conversaţia 10, paragraful
HTML 4 – Precizaţi metoda şi script-ul utilizate (Liviu Dumitraşcu, (X)HTML, Editura
Figura 10.11
483
Dreamweaver MX Creaţi un formular

workspace
Pentru a crea un formular cu Dreamweaver MX workspace, folosiţi una

9 Metoda 1 – Meniul Insert, via Form;
Inseraţi un formular
Iată cum procedaţi pentru a insera cu Dreamweaver MX workspace un
formular în pagina dumneavoastră Web.
Metoda 2
1. Executaţi clic în zona în care doriţi să inseraţi formularul.
2. În grupul de panouri Insert, în subpanoul Form, executaţi clic
pe butonul (Insert Form), figura 10.12.
Figura 10.12
Dreamweaver MX workspace inserează un dreptunghi discontinuu roşu, care

materializează limitele formularului (figura 10.13).
Figura 10.13
484
Figura 10.14
Precizaţi metoda şi script-ul utilizate

Pentru a expedia informaţiile ce aparţin formularului creat, folosiţi
panoul Properties.
Iată cum precizăm metoda prin care informaţiile sunt comunicate

serverului.
1. În panoul Properties (figura 10.15), în zona:
9 Form Name – introduceţi numele formularului (formular);
9 Action – introduceţi adresa script-ului de prelucrare;
9 Method – alegeţi POST.
Figura 10.15
Remarcă. Citiţi Conversaţia 10, paragraful XHTML – Precizaţi metoda şi script-ul utilizate

485
Dreamweaver 4 Creaţi un buton pentru expedierea

workspace (submit) unui formular
Pentru a utiliza formularul trebuie să inseraţi două butoane:
9 submit, pentru expedierea formularului;
9 reset, pentru resetarea formularului.
Pentru inserarea unui buton de tip submit cu Dreamweaver 4

9 Metoda 1 – Meniul Insert, via Form Objects Button;
Iată cum procedăm pentru a insera butonul de tip submit.
Metoda 1
1. Executaţi clic în zona în care doriţi să figureze butonul (figura

10.16).
Figura 10.16
2. Executaţi clic pe Insert Form Insert Button.
Remarcă. Dreamweaver 4 afişează butonul Submit (figura 10.17).

486
Figura 10.17
Inspectorul Properties vă permite parametrizarea acestui obiect, după

cum urmează:
9 În zona Button Name, introduceţi, eventual, un nume pentru

butonul de expediere a formularului (exp), figura 10.18.
Figura 10.18
9 În zona Label, introduceţi textul care va figura pe buton –

Expediati, figura 10.19.
Figura 10.19
9 În zona Action alegeţi Submit form, figura 10.20.
Figura 10.20
Figura 10.21
487
Remarci:
9 Selectaţi tag-ul <INPUT>, deschideţi panoul Reference şi citiţi informaţiile
care se afişează. Utilizaţi meniul derulant Description pentru a vizualiza
atributele: type, cu valoarea submit.
9 Citiţi Conversaţia 10, paragraful HTML 4 – Creaţi un buton pentru expedierea
(submit) unui formular (Liviu Dumitraşcu, (X)HTML, Editura Universităţii din
Ploieşti, 2003).
Figura 10.22
Metoda 2

Insert Button.
Aplicaţie
Creaţi un buton imagine pentru expedierea unui formular.
Puteţi înlocui butonul Submit form printr-o imagine.
1. Executaţi clic în zona dorită.
2. Executaţi clic pe Insert Form Insert Image Field.
sau,
2. În panoul Insert, categoria Forms executaţi clic pe butonul (Insert

Image Field).
Remarcă. Se afişează caseta Select Image Source (figura 10.23).

488
Figura 10.23
3. Selectaţi imaginea follow.jpg (figura 10.23).
4. În inspectorul Properties parametrizaţi imaginea ca pe o imagine

„clasică” (figura 10.24).
Figura 10.24
Figura 10.25
Remarcă. Selectaţi tag-ul <INPUT>, deschideţi panoul Reference; utilizaţi meniul

derulant Description pentru a vizualiza atributele: type, border, src, width, height. Citiţi
Conversaţia 10, paragraful HTML 4 – Creaţi un buton pentru expedierea (submit) unui
formular (Liviu Dumitraşcu, (X)HTML, Editura Universităţii din Ploieşti, 2003).
489
Figura 10.26
Dreamweaver MX Creaţi un buton pentru expedierea

workspace (submit) unui formular
Pentru ca informaţiile din cadrul unui formular să fie transmise
script-ului de prelucrare, trebuie să creaţi un buton submit în formularul
dumneavoastră.
Pentru inserarea unui buton de tip submit cu Dreamweaver MX

Iată cum procedăm pentru a insera în formularul dumneavoastră

butonul de tip submit.
Metoda 2
1. Executaţi clic în zona în care doriţi să fie inserat butonul.
2. În grupul de panouri Insert, subpanoul Form, executaţi clic pe
butonul (Button), figura 10.27.
Figura 10.27
490
9 Button Name – introduceţi exp;
9 Label – introduceţi Expediaţi;
9 Action – alegeţi Submit form.
Figura 10.28
Figura 10.29
Remarcă. Citiţi Conversaţia 10, paragraful XHTML 4 – Creaţi un buton pentru expedierea
(submit) unui formular (Liviu Dumitraşcu, (X)HTML, Editura Universităţii din Ploieşti,
2003).
Figura 10.30
Aplicaţie
Creaţi un buton imagine pentru expedierea unui formular.

491
Indicaţie. Folosiţi una din metodele prezentate mai jos:
9 Metoda 1 – Meniul Insert, via Form Objects Image Field;

9 Metoda 2 – Grupul de panouri Insert, via subpanoul Form butonul
(Image Field).
Dreamweaver 4 Creaţi un buton pentru resetarea

workspace (reset) unui formular
Pentru inserarea unui buton de tip reset cu Dreamweaver 4 workspace,

Pentru a insera un buton de tip reset, respectaţi procedura descrisă în

cele ce urmează.
Metoda 1
1. Executaţi clic în zona în care doriţi să figureze butonul.
2. Executaţi clic pe Insert Form Objects Button (figura 10.31).
Figura 10.31
492
Remarcă. Se afişează butonul Submit (figura 10.32).
Figura 10.32
3. Inspectorul Properties, vă permite parametrizarea acestui

obiect, după cum urmează:
9 în zona Button Name, introduceţi, eventual, un nume pentru

butonul de resetare a formularului (reset), figura 10.33.
Figura 10.33
9 în zona Label, introduceţi textul care va figura pe buton –

Ştergeţi iar în zona Action alegeţi Reset form (figura 10.34).
Figura 10.34
Figura 10.35
493
derulant Description pentru a vizualiza atributul type cu valoarea reset. Citiţi
Conversaţia 10, paragraful HTML 4 – Creaţi un buton pentru resetarea (reset) unui
buton (Liviu Dumitraşcu, (X)HTML, Editura Universităţii din Ploieşti, 2003).
Figura 10.36
Metoda 2

(Insert Button), figura 10.37.
Figura 10.37
Dreamweaver MX Creaţi un buton pentru resetarea

workspace (reset) unui formular
Pentru a insera un buton de tip reset cu Dreamweaver MX (workspace),
494
Iată cum procedăm pentru a insera în formularul dumneavoastră

butonul de tip reset.
Metoda 2
1. Executaţi clic în zona în care doriţi să fie inserat butonul.
butonul (Button).
9 Button Name – introduceţi reset;
9 Label – introduceţi Ştergeţi;
9 Action – alegeţi Reset Form.
Figura 10.38
Figura 10.39

495
Figura 10.40
Dreamweaver 4 Inseraţi o zonă simplă de text

workspace
Puteţi insera o zonă simplă de text în care să introduceţi puţine

caractere (nume, prenume etc.).
Pentru inserarea unei zone simple de text cu Dreamweaver 4

9 Metoda 1 – Meniul Insert, via Form Objects Text Field;
Iată cum inserăm în formular numele unui vizitator al site-ului

dumneavoastră.
Metoda 1
1. Executaţi clic în zona în care doriţi să figureze zona simplă de

text.
2. Executaţi clic pe Insert Form Objects Text Field (figura

10.41).
496
Figura 10.41
Remarcă. Dreamweaver 4 workspace inserează în formular un câmp de text (figura

10.42).
Figura 10.42
Inspectorul Properties vă permite să parametrizaţi această zonă (câmp)

simplă de text. În mod implicit este activat butonul Single Line (figura
10.43).
9 Text Field – introduceţi nume;

9 Type – alegeţi Single line.
Figura 10.43
497
4. După zona de text, introduceţi în continuare eticheta zonei de
text: Nume (figura 10.44).
Figura 10.44
Figura 10.45

derulant Description pentru a vizualiza atributul type cu valoarea text. Citiţi Conversaţia
10, paragraful HTML 4 – Inseraţi o zonă simplă de text (Liviu Dumitraşcu, (X)HTML,
Editura Universităţii din Ploieşti, 2003).
Figura 10.46
498
Metoda 2
Modificaţi pasul 2 (Metoda 1) după cum urmează:

(Insert Text Field).
Aplicaţie
Inseraţi, în continuare, în formular, cea de-a doua coordonată personală a

unui vizitator: prenumele.
Definiţi mărimea unei zone simple de text

Iată cum definim mărimea celor două zone de text: nume – 30
caractere; prenume – 20 caractere.
1. Selectaţi prima zonă de text – nume (figura 10.47).
Figura 10.47
2. În inspectorul de proprietăţi (figura 10.48), în zona:
9 Char Width – introduceţi valoarea 30;
9 Maxchars – introduceţi valoarea 40 (dacă este nevoie!).
Figura 10.48
499
3. Selectaţi cea de-a doua zonă de text – prenume.
9 Maxchars – introduceţi, dacă este nevoie (!) valoarea 30.
Figura 10.49
Remarci:
9 Asiguraţi-vă că în zona Type a fost selectată opţiunea Single line.
9 Puteţi tasta eventual, în zona InitVal o valoare iniţială ce va apare în pagina
Web (vizualizată într-un browser!).
Figura 10.50

derulant Description pentru a vizualiza atributele size şi maxlength. Citiţi Conversaţia
10, paragraful: HTML4 – Definiţi mărimea unei zone de text (Liviu Dumitraşcu,
6. Vizualizaţi pagina Web într-un browser(figura 10.51).
Figura 10.51
500
Dreamweaver MX Inseraţi o zonă simplă de text

workspace
Pentru inserarea unei zone simple de text cu Dreamweaver MX

Iată cum procedaţi pentru a insera în formular cu Dreamweaver MX

workspace într-o zonă simplă de text, numele unui vizitator al site-ului
dumneavoastră.
Metoda 2
1. Executaţi clic în zona în care doriţi să figureze zona simplă de

text.

butonul (Text Field), figura 10.52.
Figura 10.52
9 Text Field – introduceţi nume;
9 Type – alegeţi Single Line.
Figura 10.53
4. După zona de text, introduceţi în continuare eticheta zonei de

text: Nume (figura 10.54).
501
Figura 10.54
Figura 10.55
Remarcă. Citiţi Conversaţia 10, paragraful XHTML – Inseraţi o zonă simplă de text (Liviu
Figura 10.56
502
Aplicaţie
Inseraţi cea de-a doua coordonată a unui vizitator: prenume.
Definiţi mărimea unei zone simple de text

Iată cum definim cu Dreamweaver MX workspace mărimea celor două
zone de text: nume – 30 caractere; prenume – 20 caractere.
1. Selectaţi prima zonă de text, nume.
9 Max Chars – introduceţi valoarea 40 (dacă este nevoie!).
Figura 10.57
3. Selectaţi cea de-a doua zonă de text, prenume.
4. În panoul Properties, în zona:
9 Max Chars – introduceţi valoarea 30 (dacă este nevoie!).
Remarcă. Asiguraţi-vă că în zona Type a fost selectată opţiunea Single Line.

Figura 10.58
503
Figura 10.59
Dreamweaver 4 Inseraţi o zonă de text multilinie

workspace
Pentru inserarea unei zone de text multilinie cu Dreamweaver 4

Iată cum inserăm cu Dreamweaver 4 workspace cea de-a treia

coordonată personală a unui vizitator: adresa.
Metoda 1
1. Executaţi clic în zona în care doriţi să figureze zona de text

multilinie.
2. Executaţi clic pe Insert Form Objects Text Field.
9 Type – alegeţi Multiline;
9 Text Field – introduceţi adresa;
9 Char Width – introduceţi valoarea 30 (numărul de coloane);

504
9 Num Lines – introduceţi valoarea 5 (numărul de linii);
9 Wrap – alegeţi Default (modul în care se va comporta

textul în zona de date).
Figura 10.60
Remarcă. Dreamweaver afişează o zonă de text multilinie (figura 10.61).
Figura 10.61
Remarci:
9 Default – utilizează parametrii definiţi în mod implicit.
9 Off – liniile foarte lungi nu sunt tăiate la dreapta; textul continuă
pe aceeaşi linie în zona de introducere date.
9 Virtual – liniile foarte lungi sunt tăiate la dreapta; textul continuă pe
linia următoare în zona de introducere date.
9 Physical – liniile foarte lungi sunt tăiate la dreapta; textul continuă pe
linia următoare în zona de introducere date. Dar, în
formular retururile de linie sunt inserate acolo unde grafic
ele au fost inserate.
4. După zona de text multilinie introduceţi eticheta: Adresa (figura

10.62).
Figura 10.62
505
Figura 10.63
Remarcă. Selectaţi tag-ul <TEXTAREA>, deschideţi panoul Reference şi citiţi informaţiile

care se afişează. Utilizaţi meniul derulant Description pentru a vizualiza atributele: cols
şi rows. Citiţi Conversaţia 10, paragraful HTML 4 – Inseraţi o zonă de text multilinie
Figura 10.64
Metoda 2

(Insert Text Fields).
506
Aplicaţie
Inseraţi în formular o zonă de text pentru password (parolă). Cu acest tip de

câmp (password), vizitatorul nu va vedea caracterele pe care le introduce ci
doar asteriscuri.
Indicaţie. Inseraţi o zonă simplă de text de tip password (figura 10.65).
Figura 10.65
Dreamweaver MX Inseraţi o zonă de text multilinie

workspace
Pentru inserarea unei zone de text multilinie cu Dreamweaver MX

Iată cum procedaţi pentru a insera cu Dreamweaver MX workspace

într-o zonă de text multilinie cea de-a treia coordonată personală a unui
vizitator – adresa.
Metoda 2
1. Executaţi clic în zona în care doriţi să figureze zona de text

multilinie.
2. În grupul de panouri Insert, subpanoul Forms, executaţi clic pe

butonul (Text Field), figura 10.66.
Figura 10.66

507
9 Type – alegeţi Multiline;
9 Text Field – introduceţi adresa;
9 Char Width – introduceţi valoarea 30 (numărul de coloane);
9 Num Lines – introduceţi valoarea 5 (numărul de linii
exprimat în caractere);
9 Wrap – alegeţi Default.
Figura 10.67
4. După zona de text multilinie, introduceţi eticheta: Adresa

(figura 10.68).
Figura 10.68

508
Figura 10.69
Remarcă. Citiţi Conversaţia 10, paragraful XHTML – Inseraţi o zonă de text multilinie
Figura 10.70
Dreamweaver 4 Creaţi o casetă de validare

workspace
În interfaţa grafică obişnuită, casetele de validare sunt sinonime cu „una

sau mai multe opţiuni”.
509
Pentru crearea unei casete de validare cu Dreamweaver 4 workspace,
9 Metoda 1 – Meniul Insert, via Form Objects CheckBox;

Iată cum creăm într-un formular, patru casete de validare, cu numele a

patru cursuri de programare: Java, Pascal, Basic, C++, pe care vizitatorii
le pot urma la societatea LUMINA BLÂNDĂ.
Metoda 1
1. Executaţi clic în zona în care doriţi să figureze prima casetă de

validare (figura 10.71).
Figura 10.71
2. Executaţi clic pe Insert Form Objects Check Box (figura

10.72).
Figura 10.72
510
Remarcă. Se afişează prima casetă de validare (figura 10.73).
Figura 10.73
3. Repetaţi pasul 2 pentru celelalte trei casete de validare pe care

urmează să le inseraţi.
Dreamweaver 4 workspace afişează celelalte trei casete de validare

(figura 10.74).
Figura 10.74
Remarcă. Inspectorul Properties vă permite parametrizarea acestui obiect.
4. Executaţi clic pe prima casetă de validare, figura 10.75.
Figura 10.75
511
9 CheckBox – introduceţi numele simbolic C1;
9 Checked Value – introduceţi valoarea Java;
9 Initial State – alegeţi opţiunea Checked.
Figura 10.76
6. Executaţi clic pe a doua casetă de validare (figura 10.77).
Figura 10.77
9 Checked Value – introduceţi valoarea Pascal;
9 Initial State – alegeţi opţiunea Unchecked.
Figura 10.78
8. Executaţi clic pe a treia casetă de validare.
9. În inspectorul Properties, în zona:
9 Checked Value – introduceţi valoarea Basic;

512
10. Executaţi clic pe a patra casetă de validare.
9 Checked Value – introduceţi valoarea C++;
12. Introduceţi după fiecare casetă de validare etichetele

corespunzătoare: Java, Pascal, Basic, C++ (figura 10.79).
Figura 10.79
Figura 10.80

derulant Description pentru a vizualiza atributele: type cu valoarea checkbox şi
checked. Citiţi Conversaţia 10, paragraful HTML 4 – Creaţi o casetă de validare (Liviu

513
Figura 10.81
Metoda 2

(Insert CheckBox).
Dreamweaver MX Creaţi o casetă de validare

workspace
Pentru a crea o casetă de validare cu Dreamweaver MX workspace,

9 Metoda 1 – Meniul Insert, via Form Objects CheckBox;

Iată cum procedăm pentru a crea într-un formular, cu Dreamweaver MX
workspace patru casete de validare, cu numele a patru cursuri de
programare: Java, Pascal, Basic, C++ pe care vizitatorii site-ului
dumneavoastră le pot urma la societatea LUMINA BLÂNDĂ.
Metoda 2
1. Executaţi clic în zona în care doriţi să figureze prima casetă de

validare.

butonul (CheckBok), figura 10.82.
514
Figura 10.82
Remarcă. Se afişează prima casetă de validare (figura 10.83).
Figura 10.83
3. Repetaţi pasul 2 pentru celelalte trei casete de validare pe care

urmează să le inseraţi.
4. Executaţi clic pe prima casetă de validare (figura 10.84).
Figura 10.84
5. În panoul Properties, în zona CheckBox, introduceţi numele

simbolic C1; în zona Checked Value, introduceţi valoarea Java;
în zona Initial State alegeţi opţiunea Checked (figura 10.85).
Figura 10.85
515
6. Executaţi clic pe a doua casetă de validare.

9 Checked Value – introduceţi valoarea Pascal;
Figura 10.86
8. Executaţi clic pe a treia casetă de validare.

9 Checked Value – introduceţi valoarea Basic;
10. Executaţi clic pe a patra casetă de validare.

9 Checked Value – introduceţi valoarea C++;
12. Introduceţi după fiecare casetă de validare etichetele
corespunzătoare: Java, Pascal, Basic, C++ (figura 10.87).
Figura 10.87
516
Figura 10.88
Remarcă. Citiţi Conversaţia 10, paragraful XHTML – Creaţi o casetă de validare (Liviu
Figura 10.89
Dreamweaver 4 Creaţi un buton radio

workspace
Adăugaţi butoane radio în formularul dumneavoastră atunci când nu

doriţi să permiteţi vizitatorilor să aleagă mai mult de o opţiune dintre
cele propuse.
517
Pentru crearea unui buton radio cu Dreamweaver 4 workspace, folosiţi
9 Metoda 1 – Meniul Insert, via Form Objects Radio Button;
Iată cum definim într-un formular patru butoane radio – Excelent, Foarte
bine, Bine, Nesatisfăcător (pentru vizitatorii care vor să acorde un
calificativ site-ului pe care l-aţi realizat) plus încă două butoane radio
pentru sex (masculin, feminin).
Metoda 1
1. Executaţi clic în zona în care doriţi să figureze butonul radio,

figura 10.90.
Figura 10.90
2. Executaţi clic pe Insert Form Objects Radio Button (figura

10.91).
518
Figura 10.91
Remarcă. Se afişează primul buton radio (figura 10.92).
Figura 10.92
3. Repetaţi pasul 2 pentru a insera celelalte trei butoane radio.
Remarcă. Dreamweaver afişează cele trei butoane radio pe care le-aţi inserat (figura
10.93).
Figura 10.93
Remarcă. Inspectorul Properties vă permite parametrizarea acestui buton.

4. Executaţi clic pe primul buton radio (inserat).
519
9 RadioButton – introduceţi numele simbolic radio;
9 Checked Value – introduceţi valoarea Excelent;
Figura 10.94
6. Executaţi clic pe cel de-al doilea buton radio (inserat).
9 Checked Value – introduceţi valoarea Foarte bine;
8. Executaţi clic pe cel de-al treilea buton radio.
9 RadioButton – introduceţi acelaşi nume simbolic radio;
9 Checked Value – introduceţi valoarea Bine;
10. Executaţi clic pe cel de-al patrulea buton radio.
9 RadioButton – introduceţi acelaşi nume simbolic radio;
9 Checked Value – introduceţi valoarea Nesatisfăcător;
12. Introduceţi după fiecare buton radio (inserat) etichetele

corespunzătoare: Excelent, Foarte Bine, Bine, Nesatisfăcător
(figura 10.95).
520
Figura 10.95
13. Inseraţi încă două butoane radio (pentru sex!), figura 10.96.
Figura 10.96
14. Executaţi clic pe primul buton radio inserat (pentru sex!), figura
10.97.
Figura 10.97
9 RadioButton – introduceţi numele simbolic, sex;
9 Checked Value – introduceţi valoarea masculin;
Figura 10.98
521
16. Executaţi clic pe cel de-al doilea buton radio inserat (pentru
sex!).
9 RadioButton – introduceţi numele simbolic, sex;

9 Checked Value – introduceţi valoarea feminin;
18. Introduceţi după cele două butoane radio eticheta
corespunzătoare: Sex, figura 10.99.
Figura 10.99
Figura 10.100

derulant Description pentru a vizualiza atributul type cu valoarea radio. Citiţi
Conversaţia 10, paragraful HTML 4 – Creaţi un buton radio (Liviu Dumitraşcu,

522
Figura 10.101
Metoda 2

(Insert RadioButton).
Dreamweaver MX Creaţi un buton radio

workspace
Pentru crearea unui buton radio cu Dreamweaver MX workspace, folosiţi

9 Metoda 1 – Meniul Insert, via Form Objects RadioButton;
Iată cum procedăm pentru a crea într-un formular, cu Dreamweaver MX

workspace patru butoane radio: Excelent, Foarte bine, Bine,
Nesatisfăcător (pentru vizitatorii care vor să acorde un calificativ site-ului
pe care l-aţi realizat) plus încă două butoane radio pentru sex (masculin,
feminin).
523
Metoda 2
1. Executaţi clic în zona în care doriţi să figureze butonul radio.
butonul (RadioButton), figura 10.102.
Figura 10.102
Se afişează primul buton radio (figura 10.103).
Figura 10.103
3. Repetaţi pasul 2 pentru a insera celelalte trei butoane (figura

10.104).
Figura 10.104
524
4. Executaţi clic pe primul buton radio.
9 RadioButton – introduceţi numele simbolic, radio;
9 Checked Value – introduceţi valoarea Excelent;
6. Executaţi clic pe cel de-al doilea buton radio.
9 Checked Value – introduceţi valoarea Foarte bine;
8. Executaţi clic pe cel de-al treilea buton radio.
9 Checked Value – introduceţi valoarea Bine;
10. Executaţi clic pe cel de-al patrulea buton radio.
9 Checked Value – introduceţi valoarea Nesatisfăcător;
12. Introduceţi după fiecare buton radio inserat etichetele

corespunzătoare: Excelent, Foarte bine, Bine, Nesatisfăcător
(figura 10.105).
525
Figura 10.105
13. Inseraţi încă două butoane radio (pentru sex!).
14. Executaţi clic pe primul buton radio inserat.
9 RadioButton – introduceţi numele simbolic sex;

9 Checked Value – introduceţi valoarea masculin;
16. Executaţi clic pe cel de-al doilea buton radio inserat.
9 RadioButton – introduceţi numele simbolic sex;

9 Checked Value – introduceţi valoarea feminin;
18. Introduceţi după cele două butoane radio eticheta
corespunzătoare: sex (figura 10.106).
Figura 10.106

526
Figura 10.107
Remarcă. Citiţi Conversaţia 10, paragraful XHTML – Creaţi un buton radio (Liviu
Figura 10.108
Dreamweaver 4 Creaţi un meniu derulant

workspace
Un meniu derulant permite vizitatorului să aleagă o singură opţiune

dintr-o listă lungă de opţiuni.
527
Pentru crearea unui meniu derulant cu Dreamweaver 4 workspace,
9 Metoda 1 – Meniul Insert, via Form Objects List/Menu;
Iată cum creăm un meniu derulant ce conţine o listă (simplificată) a

profesiilor: economist, inginer, profesor universitar, profesor liceu,
profesor şcoală generală, avocat, contabil.
Metoda 1
1. Executaţi clic în zona în care doriţi să figureze meniul (figura

10.109).
Figura 10.109
2. Executaţi clic pe Insert Form Objects List/Menu (figura

10.110).
Figura 10.110
528
Remarcă. Dreamweaver 4 inserează un meniu în formular (figura 10.111).
Figura 10.111
Remarcă. Inspectorul Properties vă permite să parametrizaţi acest obiect (figura

10.112).
9 List/Menu – introduceţi numele meniului derulant, profesie;
9 Type – alegeţi Menu.
Figura 10.112
4. În inspectorul Properties, executaţi clic pe List Values… pentru

a introduce elementele listei.
Remarcă. Se afişează caseta de dialog List Values (figura 10.113).
Figura 10.113
5. Pentru fiecare element al meniului introduceţi o etichetă (Item

Label) şi o valoare (figura 10.114).
529
Figura 10.114
Remarci:
9 Item Label corespunde opţiunii din meniul derulant.
9 Pentru a trece rapid de la o zonă la alta, utilizaţi tasta Tab (Tab').
9 Pentru a adăuga sau şterge un element, utilizaţi butoanele + - (figura
10.114).
7. În inspectorul Properties, în zona Initially Selected, alegeţi

elementul care va fi selecţionat în mod implicit (în momentul
încărcării formularului, înaintea intervenţiei utilizatorului)
executând clic pe acesta – profesor universitar, figura 10.115.
Figura 10.115
8. Introduceţi o etichetă care descrie meniul: Care este profesia

dumneavoastră? (figura 10.116).
Figura 10.116

530
Figura 10.117
Remarci:
9 Selectaţi tag-urile <SELECT> şi <OPTION>, deschideţi panoul Reference şi
citiţi informaţiile care se afişează.
9 Citiţi Conversaţia 10, paragraful: HTML 4 – Creaţi un meniu derulant (Liviu
Figura 10.118
Metoda 2

(Insert List/Meniu).
Aplicaţii
Creaţi o listă derulantă (Transport) cu următoarele opţiuni: Autobuz, Taxi,

Tramvai, Metrou, Microbuz.
531
Iată care este procedura pe care vă invităm s-o urmaţi pentru a crea lista
derulantă Transport.
1. Executaţi clic în zona în care doriţi să figureze lista.
2. Inseraţi lista derulantă (obiectul formularului) urmând aceeaşi

procedură (Metoda 1/Metoda 2).
Remarcă. Inspectorul Properties vă permite să parametrizaţi acest obiect.
3. În inspectorul Properties, în zona Type alegeţi List, figura 10.119.
Figura 10.119
4. În zona Height indicaţi numărul de elemente (3) ale listei care vor fi
vizibile, celelalte (2) nu vor fi vizibile decât utilizând bara de defilare a
acestei liste (trei elemente vor fi vizibile dintr-un total de 5), figura
10.120.
Figura 10.120
5. În zona Selections activaţi opţiunea Allow multiple dacă doriţi să

oferiţi vizitatorului posibilitatea să selecteze mai multe elemente ale
listei, figura 10.121.
Figura 10.121
6. În inspectorul de proprietăţi, executaţi clic pe List Values....
Remarcă. Se afişează caseta de dialog List Values... (figura 10.122).
Figura 10.122
532
7. Pentru fiecare element al listei introduceţi o etichetă (Item Label) şi o
valoare (figura 10.123).
Figura 10.123
9. În zona Initialy Selected alegeţi elementul (executând clic pe acesta)

care va fi selecţionat în mod implicit, în momentul încărcării
formularului, înaintea intervenţiei utilizatorului. Utilizaţi tasta SHIFT/
CTRL pentru a face o preselecţie multiplă, figura 10.124.
Figura 10.124
10. Introduceţi eticheta care descrie lista derulantă: Transport, figura

10.125.
Figura 10.125

533
Figura 10.126
Figura 10.127
Creaţi un câmp de fişier – File Field.
Iată care este procedura pe care vă invităm s-o urmaţi pentru a crea o casetă
de dialog pentru expedierea unui fişier.
Metoda 1
1. Executaţi clic în zona în care doriţi să figureze caseta de dialog de

deschidere a unui fişier.
2. Executaţi clic pe Insert Form Objects File Field (figura 10.128).

534
Figura 10.128
Remarcă. Dreamweaver 4 afişează un câmp de text şi un buton Browse în formular

(figura 10.129).
Figura 10.129
Remarcă. Inspectorul Properties vă permite să parametrizaţi acest obiect.
9 File Field Name – introduceţi numele simbolic, fişier;
9 Char Width – introduceţi valoarea 40 (lungimea câmpului de

text în care se va introduce calea de acces către
fişier);
9 Max Chars – introduceţi numărul maxim de caractere.

535
Figura 10.130
4. Introduceţi eticheta care descrie câmpul inserat: Trimiteţi fişierul

dumneavoastră: (figura 10.131).
Figura 10.131
Figura 10.132
Figura 10.133
Metoda 2

536
(Insert File Field), figura 10.134.
Figura 10.134
Inseraţi un câmp ascuns (mascat).
Un câmp ascuns, după cum spune şi numele nu este vizibil în fereastra

browser-ului atunci când vizitatorii consultă site-ul dumneavoastră.
Câmpurile ascunse pot fi utile pentru site-urile marilor magazine (pentru a

cunoaşte în orice moment totalul vânzărilor), sau pentru construirea în mod
automat a unei adrese e-mail prin concatenarea prenumelui şi numelui
persoanei care utilizează formularul.
Iată care este procedura pe care trebuie s-o urmaţi pentru a crea un câmp
ascuns într-un formular.
Metoda 1
1. Executaţi clic în zona în care doriţi să figureze câmpul ascuns

(mascat).
2. Executaţi clic pe Insert Form Objects Hidden Field (figura

10.135).
537
Figura 10.135
Remarcă. Câmpul ascuns se afişează în fereastra document sub forma unui icon (figura
10.136).
Figura 10.136
Remarcă. Inspectorul Properties vă permite parametrizarea acestui obiect.
9 Hidden Field – introduceţi câmpinvizibil, numele câmpului ascuns

din formular;
9 Value – introduceţi o valoare corespunzătoare câmpului
ascuns.
Figura 10.137
538
Remarci:
9 De foarte multe ori câmpurile ascunse conţin informaţii de configurare pentru
script.
9 Câmpul ascuns nu apare în pagină decât sub forma unui element invizibil
( ). În momentul în care îl selectaţi, în inspectorul Properties se afişează
toţi parametrii acestuia.
Figura 10.138
Figura 10.139
Metoda 2

(Insert Hidden Field), figura 10.140.
Figura 10.140
539
Creaţi un script simplu care permite generarea unui adrese e-mail prin
concatenarea prenumelui şi numelui introduse în formular de către utilizator.
Iată care este procedura pe care trebuie s-o urmaţi pentru a crea script-ul de
concatenare.
1. Definiţi variabilele script-ului: nume, prenume, e-mail.
2. În zona <head> ... </head> descrieţi script-ul (figura 10.141).
Figura 10.141
Remarci:
9 Script-ul nu detectează dacă cele două câmpuri nume şi prenume sunt efectiv
introduse.
9 În câmpul prenume, adăugaţi codul <input type=”text” nume=”prenume”
onBlur=”creatmail()”>.
9 Când utilizatorul părăseşte acest câmp el declanşează funcţia creatmail() şi
concatenarea se realizează.
Dreamweaver MX Creaţi un meniu derulant

workspace
Pentru a crea un meniu derulant cu Dreamweaver MX workspace, folosiţi

9 Metoda 1 – Meniul Insert, via Form Objects List/Meniu;

540
Iată cum creăm cu Dreamweaver MX workspace un meniu derulant ce
conţine o listă (simplificată) a profesiilor: economist, inginer, profesor
universitar, profesor liceu, profesor şcoală generală, avocat, contabil.
Metoda 2
1. Executaţi clic în zona în care doriţi să figureze meniul.
butonul (List/Meniu), figura 10.142.
Figura 10.142
Remarcă. Dreamweaver MX workspace inserează un meniu în formular (figura 10.143).
Figura 10.143
3. Executaţi clic pe butonul List/Meniu inserat.
4. În panoul Properties, în zona (figura 10.144):
9 List/Meniu – introduceţi profesie;
9 Type – alegeţi Menu.
Figura 10.144
5. În panoul Properties, executaţi clic pe List Values … pentru a

introduce elementele listei.
541
6. În caseta de dialog List Values care se afişează, în zona Item
Label, introduceţi elementul listei iar în zona Value, valoarea
(figura 10.145).
Figura 10.145
8. În panoul Properties, în zona Initially Selected, alegeţi profesor

universitar – elementul care va fi selecţionat în mod implicit.
9. Introduceţi eticheta care descrie meniul: „Care este profesia

dumneavoastră?”.
Figura 10.146
Remarcă. Citiţi Conversaţia 10, paragraful XHTML – Creaţi un meniu derulant (Liviu

542
Figura 10.147
543
1. Descrieţi pe scurt una din metodele de creare a unui formular cu
Dreamweaver MX.
2. Precizaţi care este codul sursă XHTML pentru crearea unui buton de
tip submit.
3. Descrieţi pe scurt metoda (Grupul de panouri Insert) Dreamweaver
MX workspace de inserare a unei zone de text multilinie.
4. Cum creaţi un buton radio sau o casetă de validare cu Dreamweaver 4
workspace? Descrieţi pe scurt una din metodele folosite.
5. Creaţi cu Dreamweaver 4 workspace un meniu derulant care conţine o
listă (simplificată) a profesiilor: economist, inginer, profesor
universitar, profesor liceu, profesor şcoala generală, avocat, contabil.
9 www.fabric8.com
9 www.pcwebopedia.com/TERM/C/CGI.html
Conversaţia 11
Inseraţi obiecte cu Dreamweaver MX

•••••••••••••••••••••••••••••••••••••••••
f Dreamweaver 4 workspace, MX workspace – Inseraţi animaţii Flash şi
Shockwave
f Dreamweaver 4 workspace, MX workspace – Inseraţi un text în format
Flash
f Dreamweaver 4 workspace, MX workspace – Creaţi un buton de navigare
Flash
f Dreamweaver 4 workspace, MX workspace – Inseraţi un obiect Fireworks
şi data zilei
f Dreamweaver 4 workspace, MX workspace – Inseraţi un applet Java
f Dreamweaver 4 workspace, MX workspace – Inseraţi obiecte care
necesită un plugin
•••••••••••••••••••••••••••••••••••••••••
Dreamweaver 4 Inseraţi animaţii Flash şi

workspace Shockwave
Macromedia Flash şi Director reprezintă, fără îndoială, standarde de

referinţă pentru animaţii Web.
Macromedia Flash permite crearea de animaţii vectoriale interactive.

544
Inseraţi o animaţie Flash
Pentru a insera o animaţie Flash cu Dreamweaver 4 workspace, folosiţi
9 Metoda 1 – Meniul Insert, via Media Flash;
9 Metoda 2 – Panoul Insert, categoria Media.
Iată cum procedaţi pentru a insera în pagina dumneavoastră Web o

animaţie Flash, exemplu.swf.
Metoda 1
1. Executaţi clic în locul în care doriţi să inseraţi animaţia Flash.
2. Executaţi clic pe Insert Media Flash.
Remarcă. Se afişează caseta de dialog Select File.
3. În caseta de dialog Select File, executaţi următoarele acţiuni:
9 selectaţi fişierul exemplu.swf;
4. În inspectorul Properties, în zonele: Flash, W şi H, File, Align,

Bg, Reset Size, Play, V Space, H Space, Quality, Scale,
Parameters, parametrizaţi animaţia Flash ca în figura 11.1.
Figura 11.1

545
Figura 11.2
Remarcă. Selectaţi tag-urile <OBJECT> (implementat în Internet Explorer) şi <EMBED>

(implementat în Netscape), deschideţi panoul Reference şi citiţi informaţiile care se
afişează.
Figura 11.3
Metoda 2
2. În panoul Insert, categoria Media, executaţi clic pe butonul

(Flash), figura 11.4.
546
Figura 11.4
Inseraţi o animaţie Shockwave

Pentru a insera o animaţie Shockwave cu Dreamweaver 4 workspace,
9 Metoda 1 – Meniul Insert, via Media Shockwave;
Metoda 1
1. Executaţi clic în locul în care doriţi să inseraţi animaţia

Shockwave.
2. Executaţi clic pe Insert Media Shockwave.

9 selectaţi fişierul lumina.dir;
4. În inspectorul Properties, în zonele: W şi H; File; Align; Bg;

Play; Parameters; V Space şi H Space, parametrizaţi animaţia
Shockwave în aceeaşi manieră cu parametrizarea animaţiei
Flash (figura 11.5).
547
Figura 11.5
Figura 11.6
Figura 11.7
548
Dreamweaver MX Inseraţi animaţii Flash şi

workspace Shockwave
Inseraţi o animaţie Flash

Pentru a insera în pagina dumneavoastră Web o animaţie Flash cu
jos:
9 Metoda 1 – Meniul Insert, via Media Flash;
9 Metoda 2 – Grupul de panouri Insert, via subpanoul Media.
Iată cum inserăm o animaţie Flash, exemplu.swf, în pagina

dumneavoastră Web.
Metoda 2
1. Executaţi clic în locul în care doriţi să inseraţi animaţia Flash.
2. În grupul de panouri Insert, în subpanoul Media, executaţi clic
pe butonul (Flash), figura 11.8.
Figura 11.8

549
9 selectaţi fişierul exemplu.swf;
4. În panoul Properties, în zonele: Flash, W şi H, File, Align, Bg,

Reset Size, Play, V Space, H Space, Quality, Scale, Parameters,
parametrizaţi animaţia Flash pe care aţi inserat-o (vezi
Dreamweaver 4 workspace).
Figura 11.9
Figura 11.10
550
Inseraţi o animaţie Shockwave
Pentru a insera în pagina dumneavoastră Web o animaţie Shockwave cu
jos:
9 Metoda 1 – Meniul Insert, via Media Shockwave;
9 Metoda 2 – Grupul de panouri Insert, via Media, butonul

(Shockwave).
Aplicaţie
Inseraţi în pagina dumneavoastră Web animaţia Shockwave: lumina.dir.
Remarci:
9 Citiţi paragraful: Dreamweaver 4 workspace – Inseraţi o animaţie Shockwave.
9 Pentru a parametriza această animaţie, utilizaţi panoul Properties în aceeaşi
manieră ca la animaţia Flash.
Dreamweaver 4 Inseraţi un text în format Flash

workspace
Cu Dreamweaver puteţi insera direct un text în format Flash (.swf).

Desigur, nu puteţi crea animaţii la fel de puternice ca în Flash, dar puteţi
defini animaţii şi butoane Flash rezonabile, rămânând tot timpul în
universul Dreamweaver! Şi încă ceva! Dreamweaver pune la dispoziţia
dumneavoastră o puternică bibliotecă de obiecte Flash, ceea ce nu este
deloc puţin!
Pentru a insera în pagina dumneavoastră Web un text în format Flash,

cu Dreamweaver 4 workspace, folosiţi una din metodele prezentate mai
jos:
9 Metoda 1 – Meniul Insert, via Interactive Images Flash Text;
9 Metoda 2 – Meniul Insert, via Media.

551
Iată cum procedaţi pentru a insera textul „LUMINA BLANDA 2003” în
format Flash. Definiţi efectul de rollover.
Metoda 1
1. Salvaţi documentul (Dreamweaver) sub numele lumina.htm.
Remarcă. Documentul trebuie să fie salvat înainte de a insera un obiect text în

format Flash.
2. Executaţi clic pe Insert Interactive Images Flash Text.
Remarcă. Se afişează caseta de dialog Insert Flash Text.

3. În caseta de dialog Insert Flash Text executaţi următoarele
9 în zona Font – selectaţi Arial Black, în meniul derulant;
9 în zona Size – introduceţi valoarea 30;
9 – activaţi butonul (Bold);
9 – selectaţi butonul (Center);
9 în zona Color – introduceţi valoarea green (#00FF00)

pentru a defini culoarea inactivă a
textului atunci când nu treceţi cu
mouse-ul peste text;
9 în zona Rollover Color – introduceţi valoarea blue (#0000FF)

pentru a defini culoarea pe care o capătă
textul Flash atunci când treceţi cu
mouse-ul peste textul inserat;
9 în zona Text – introduceţi textul „LUMINA BLANDA

2003”;
9 –activaţi opţiunea Show Font pentru a

vizualiza textul pe care l-aţi introdus;
9 în zona Link – introduceţi numele paginii

(http://www.upg-ploieşti.ro) pe care
552
doriţi s-o apelaţi;
9 în zona Target – selectaţi cadrul în care doriţi să se

afişeze pagina (dacă este cazul!);
9 în zona BgColor – introduceţi valoarea #FFFFFF;
9 în zona Save As – introduceţi numele fişierului (cu
extensia .swf), text.swf;
Figura 11.11
Figura 11.12
553
Figura 11.13
6. Verificaţi efectul Rollover şi link-ul creat.
Metoda 2

(Flash Text), figura 11.14.
Figura 11.14
Dreamweaver MX Inseraţi un text în format Flash

workspace
Pentru a insera în pagina dumneavoastră Web un text în format Flash,

cu Dreamweaver MX workspace în format .swf, folosiţi una din metodele
prezentate mai jos:
9 Metoda 1 – Meniul Insert, via Interactive Images Flash Text;
9 Metoda 2 – Grupul de panouri Insert, via media butonul

(Flash Text).
554
Iată cum procedaţi pentru a insera în pagina dumneavoastră Web textul
în format Flash: „LUMINA BLANDA 2003”. Utilizaţi efectul de rollover.
Metoda 2
1. Salvaţi documentul, în folder-ul Site, sub numele lumina.htm.
pe butonul (Flash Text), figura 11.15.
Figura 11.15
Remarcă. Se afişează caseta de dialog Insert Flash Text.

3. În caseta de dialog Insert Flash Text executaţi aceleaşi acţiuni
pe care le-aţi realizat cu Dreamweaver 4 workspace.
Figura 11.16

555
Figura 11.17
6. Verificaţi efectul Rollover şi link-ul creat.
Dreamweaver 4 Creaţi un buton de navigare Flash

workspace
Pentru a crea un buton de navigare Flash (format .swf) cu Dreamweaver

4 workspace, folosiţi una din metodele prezentate mai jos:
9 Metoda 1 – Meniul Insert, via Interactive Images Flash

Button;
9 Metoda 2 – Panoul Insert, via Media.
Creaţi butonul de navigare Flash: „F.E.S.E” (Free European School

Economics din cadrul Universităţii Petrol – Gaze din Ploieşti).
Metoda 1
1. Salvaţi documentul (Dreamweaver) sub numele buton.htm.
2. Executaţi clic pe Insert Interactive Images Flash Button.
Remarcă. Se afişează caseta de dialog Insert Flash Button.
3. În caseta de dialog Insert Flash Button (figura 11.18), executaţi

9 în zona Style – selectaţi tipul de buton pe care îl preferaţi

(Blue Warper) (atenţie la zona Sample!);
556
9 în zona Button Text – introduceţi textul care se va
inscripţiona pe buton (F.E.S.E.);
9 în zona Size – introduceţi valoarea 12;
9 în zona Font – introduceţi Verdana;
9 în zona Link – introduceţi www.upg-ploiesti.ro;
9 în zona BgColor – introduceţi #FFFFFF;
Figura 11.18
Remarcă. Executaţi clic pe butonul Apply pentru a aplica efectul butonului în documentul
dumneavoastră.

557
Figura 11.19
Figura 11.20
Metoda 2

(Flash Button), figura 11.21.
Figura 11.21
558
Dreamweaver MX Creaţi un buton de navigare Flash

workspace
Pentru a crea un buton de navigare Flash (format.swf) cu Dreamweaver

MX workspace, folosiţi una din metodele prezentate mai jos:
9 Metoda 1 – Meniul Insert, via Interactive Images Flash

Button;
9 Metoda 2 – Grupul de panouri Insert, via Media.
Iată cum procedaţi pentru a crea butonul de navigare Flash: „F.E.S.E.”

(Free European School Economics din cadrul Universităţii Petrol – Gaze
din Ploieşti).
Metoda 2
1. Salvaţi documentul sub numele buton.html.
pe butonul (Flash Button), figura 11.22.
Figura 11.22
Remarcă. Se afişează caseta de dialog Insert Flash Button.
3. În caseta de dialog Insert Flash Button (figura 11.23) executaţi

aceleaşi acţiuni pe care le-aţi realizat cu Dreamweaver 4
workspace.
559
Figura 11.23
Figura 11.24

560
Figura 11.25
Dreamweaver 4 Inseraţi un obiect Fireworks şi

workspace data zilei
Macromedia Fireworks permite inserarea şi crearea în mod rapid şi
eficient a obiectelor vizuale (butoane, rollover-e etc.) pentru Web
generând cod HTML şi Java Script.
Inseraţi un obiect Fireworks

Pentru a insera în pagina Web un obiect Fireworks, cu Dreamweaver 4
9 Metoda 1 – Meniul Insert, via Interactive Images Fireworks;
Metoda 1
Iată cum inseraţi în pagina dumneavoastră Web un obiect Fireworks,

little.htm.
1. Executaţi clic în zona în care doriţi să inseraţi obiectul

Fireworks.
2. Executaţi clic pe Insert Interactive Images Fireworks

HTML.
561
Remarcă. Se afişează caseta de dialog Insert Fireworks HTML.
3. În caseta de dialog Insert Fireworks HTML (figura 11.26),

9 în zona Fireworks HTML File – introduceţi numele fişierului

(eventual folosiţi butonul
Browse);
9 în zona Options – activaţi opţiunea Delete file
after insertion (pentru a
suprima fişierul generat cu
Fireworks, după inserarea
acestuia);
Figura 11.26
Figura 11.27

562
Figura 11.28
Metoda 2
(Fireworks HTML), figura 11.29.
Figura 11.29
Inseraţi data zilei

Pentru a insera data curentă cu Dreamweaver 4 workspace, folosiţi una
9 Metoda 1 – Meniul Insert, via Date;
Iată care este procedura de inserare a datei curente.
Metoda 1
1. Executaţi clic în zona în care doriţi să fie inserată data curentă.

563
2. Executaţi clic pe Insert Date.
Remarcă. Se afişează caseta de dialog Insert Date.

3. În caseta de dialog Insert Date, executaţi următoarele acţiuni
(figura 11.30):
9 în fiecare meniu derulant alegeţi formatul dorit pentru zi,

dată şi oră;
9 activaţi caseta de validare Update Automatically on Save,

dacă doriţi să actualizaţi data de fiecare dată când salvaţi
documentul;
Figura 11.30
Figura 11.31

564
Figura 11.32
Metoda 2
(Date), figura 11.33.
Figura 11.33
Dreamweaver MX Inseraţi un obiect Fireworks şi

workspace data zilei
Inseraţi un obiect Fireworks

Pentru a insera în pagina Web un obiect Fireworks cu Dreamweaver MX
9 Metoda 1 – Meniul Insert, via Interactive Images Fireworks

HTML;
9 Metoda 2 – Grupul de Panouri Insert, via subpanoul Common
butonul (Fireworks HTML).

565
Metoda 2
1. Executaţi clic în zona în care doriţi să inseraţi obiectul

Fireworks.
2. În grupul de panouri Insert, în subpanoul Common executaţi
clic pe butonul (figura 11.34).
Figura 11.34
3. În caseta de dialog Insert Fireworks HTML, care se afişează

9 în zona Fireworks HTML File – introduceţi numele fişierului

(sau folosiţi butonul Browse);
9 în zona Options – activaţi opţiunea Delete for

after insertion;
Figura 11.35

566
Figura 11.36
Inseraţi data zilei

Pentru a insera în pagina Web data curentă cu Dreamweaver MX
9 Metoda 1 – Meniul Insert, via Date;
Iată cum procedaţi pentru a insera data curentă.
Metoda 2
1. Executaţi clic în zona în care doriţi să inseraţi data curentă.
2. În grupul de panouri Insert, în subpanoul Common, executaţi
clic pe butonul (Date).
3. În caseta de dialog Insert Date care se afişează, completaţi

informaţiile din zonele: Day Format, Date Format, Time Format.
4. În caseta de dialog Insert Date, activaţi opţiunea Update

Automatically on Save, după care executaţi clic pe butonul OK.

567
Figura 11.37
Figura 11.38
Dreamweaver 4 Inseraţi un applet Java

workspace
Limbajul Java definit de Sun, permite crearea de aplicaţii (applet, în

limba engleză; appliquettes, în limba franceză) care pot fi inserate într-o
pagină Web. Applet-ul Java este interpretat de Maşina Virtuală Java
instalată pe aproape toate platformele microinformatice.
Pentru a insera în pagina Web un applet Java cu Dreamweaver 4

9 Metoda 1 – Meniul Insert, via Media Applet;

568
Iată cum inserăm în pagina Web, un applet Java care afişează numărul
de apăsări ale unui buton.
Metoda 1
1. Executaţi clic în locul în care doriţi să fie inserat applet-ul Java.
2. Executaţi clic pe Insert Media Applet.

3. În caseta de dialog Select File, executaţi următoarele acţiuni
(figura 11.39):
9 selectaţi fişierul Test.class;
Figura 11.39
9 Applet Name – introduceţi numele applet-ului;

569
9 W şi H – introduceţi valorile 130 respectiv 50 pixeli;
9 Code – introduceţi numele fişierului sursă;
9 Base – introduceţi fişierul care conţine applet-ul;
9 Align – utilizaţi meniul derulant pentru a alinia
applet-ul;
9 Alt – indicaţi o imagine ca alternativă atunci

când browser-ul nu recunoaşte applet-ul
Java;
9 VSpace, HSpace– definiţi spaţiul (în pixeli) din jurul
applet-ului.
Figura 11.40
Figura 11.41
Remarci:
9 Selectaţi tag-ul <APPLET>, deschideţi panoul Reference şi citiţi informaţiile
care se afişează. Utilizaţi meniul derulant Description pentru a vizualiza
atributul Code.
9 Citiţi Conversaţia 11, paragraful HTML 4 – Inseraţi un applet Java (Liviu

570
Figura 11.42
7. Executaţi clic pe applet pentru a deschide mini-programul din …

spatele butonului.
Metoda 2

(Applet).
Figura 11.43
Dreamweaver MX Inseraţi un applet Java

workspace
Pentru a insera (în pagina Web) un applet Java cu Dreamweaver MX

9 Metoda 1 – Meniul Insert, via Media Applet;

571
Iată cum inserăm în pagina Web un applet Test.class, care afişează
numărul de apăsări ale unui buton.
Metoda 2
1. Executaţi clic în locul în care doriţi să fie inserat applet-ul Java.
pe butonul (Applet), figura 11.44.
Figura 11.44
3. În caseta de dialog Select File executaţi următoarele acţiuni:
9 selectaţi fişierul Test.class;
4. În panoul Properties, în zonele: Applet, W şi H, Code, Base,

Align, Sec, VSpace şi HSpace, parametrizaţi applet-ul pe care
l-aţi inserat (vezi Dreamweaver 4 workspace).
Figura 11.45

572
Figura 11.46
Remarcă. Executaţi clic pe applet.
Dreamweaver 4 Inseraţi obiecte care necesită un

workspace plugin
În afară de text şi imagini, puteţi de asemenea insera în paginile
dumneavoastră Web fişiere multimedia (sunet, video, animaţie …). Nu
uitaţi însă că browser-ul nu ştie să interpreteze decât HTML şi script-ul
clientului, în rest totul îi este necunoscut. Rezultă că, pentru a exploata
un obiect multimedia, utilizatorul trebuie să aibă instalate pe calculatorul
său programe speciale cunoscute sub numele de plugin.
Remarcă. Dreamweaver 4 workspace conţine obiecte multimedia(vezi panoul Insert) pe

care le puteţi insera în paginile dumneavoastră Web. Nu uitaţi de site-ul Macromedia
care dispune de obiecte multimedia suplimentare pe care le puteţi descărca şi instala!
Inseraţi un fişier sunet

Pentru a insera un fişier sunet cu Dreamweaver 4 workspace, folosiţi
9 Metoda 1 – Meniul Insert, via Media Plugin;
9 Metoda 2 – Panoul Insert, categoria Media.
Iată cum procedaţi pentru a insera în pagina dumneavoastră Web, un

fişier sunet, tada.wav (calea C:\Windows\Media).
573
Metoda 1
1. Executaţi clic în zona în care doriţi să fie inserat fişierul sunet.
2. Executaţi clic pe Insert Media Plugin (fişierul 11.47).
Figura 11.47

3. În caseta de dialog Select File, executaţi următoarele acţiuni
(figura 11.48):
9 selectaţi fişierul audio, tada.wav;
Figura 11.48
574
Remarcă. Găsiţi şi alte fişiere de sunet cu care să exersaţi! Succes!
4. În inspectorul Properties (figura 11.49), parametrizaţi fişierul,
după cum urmează:
9 în zona Plugin – introduceţi sunet;
9 în zonele W şi H – introduceţi valoarea 150;
9 în zona Src – introduceţi calea de acces;
9 în zona PlgURL – indicaţi site-ul Web din care utilizatorii

pot descărca plugin-ul;
9 în zonele Align şi VSpace,
HSpace şi Border – formataţi (după caz!) obiectul plugin;
9 în zona Parameters – introduceţi parametrii LOOP şi

PLAYCOUNT cu valoarea 5.
Figura 11.49
Remarci:
9 Oferiţi vizitatorilor site-ului dumneavoastră controlul privind redarea sau nu a
unui sunet. O pagină Web care conţine un sunet ce nu poate fi oprit poate
irita unele persoane!
9 La ora actuală există numeroase tipuri de formate audio (Real Audio, Quick
Time, Mp3 etc. …).
Figura 11.50
575
Remarci:
9 Selectaţi tag-ul <EMBED>, deschideţi panoul Reference şi citiţi informaţiile
care se afişează.
9 Citiţi Conversaţia 11, paragraful: HTML 4 – Inseraţi un fişier sunet pentru
Internet Explorer (Liviu Dumitraşcu, (X)HTML, Editura Universităţii din Ploieşti,
2003).
6. Vizualizaţi pagina Web în Internet Explorer (figura 11.51).

Ascultaţi sunetul … muzicii!
Figura 11.51
Metoda 2

(Plugin), figura 11.52.
Figura 11.52
Inseraţi un fişier video

Pentru a insera un fişier video în pagina dumneavoastră Web cu
576
Dreamweaver 4 workspace, folosiţi una din metodele cu care aţi inserat
un fişier sunet.
Iată cum procedaţi pentru a insera în pagina dumneavoastră Web, un

fişier video, MrBean.avi.
Metoda 2
1. Executaţi clic în zona în care doriţi să inseraţi fişierul video.
2. În panoul Insert, categoria Media executaţi clic pe butonul

(Plugin), figura 11.53.
Figura 11.53

9 selectaţi fişierul video MrBean.avi;
4. În inspectorul Properties, parametrizaţi fişierul, ca în figura

11.54.
Figura 11.54

577
Figura 11.55
Remarcă. Citiţi Conversaţia 11, paragraful HTML 4 – Inseraţi un fişier video (Liviu
6. Vizualizaţi pagina Web într-un browser (figura 11.56). Cum vă

place?
Figura 11.56
Inseraţi obiecte care necesită un

Dreamweaver MX
workspace plugin
Inseraţi un fişier sunet

Pentru a insera un fişier sunet în pagina Web cu Dreamweaver MX,
578
Iată cum procedăm pentru a insera în pagina Web un fişier sunet,

tada.wav (acelaşi pe care l-aţi inserat cu Dreamweaver 4 workspace) din
folder-ul C:\Windows\Media.
Metoda 2
1. Executaţi clic în zona în care doriţi să fie inserat fişierul sunet.
pe butonul (Plugin).
Figura 11.57
3. În caseta de dialog Select File, selectaţi fişierul audio tada.wav,

după care executaţi clic pe butonul OK.
4. În panoul Properties, parametrizaţi fişierul ca în figura 11.58.
Figura 11.58

579
Figura 11.59
6. Vizualizaţi pagina Web în Internet Explorer. Ascultaţi sunetul …

muzicii!
Figura 11.60
Inseraţi un fişier video

Pentru a insera în pagina Web un fişier video cu Dreamweaver MX
Metoda 2
1. Executaţi clic în zona în care doriţi să fie inserat fişierul video.

580
pe butonul (Plugin).

3. În caseta de dialog Select File selectaţi fişierul video
MrBean.avi, după care executaţi clic pe butonul OK.
4. În inspectorul Properties (veţi regăsi aceleaşi atribute ca şi în

cazul sunetelor!) completaţi zonele afişate (figura 11.61) după
modelul … sunetelor.
Figura 11.61
Figura 11.62
581
6. În panoul Properties, executaţi clic pe butonul
pentru a testa conţinutul multimedia.
7. Vizualizaţi pagina Web într-un browser (figura 11.63). Cum vă

place?
Figura 11.63
Aplicaţii
Creaţi o legătură hipertext către fişierul sunet (audio) extern: tada.wav.

Textul legăturii este „Ascultaţi sunetul muzicii!”
1. Selectaţi textul legăturii.
9 Link – introduceţi calea de acces către fişierul sunet extern;
9 Target – alegeţi în meniul derulant opţiunea _blank.

582
Figura 11.64
Figura 11.65
4. Vizualizaţi pagina Web într-un browser (figura 11.66). Ascultaţi

sunetul … muzicii! Cum vă place?
Figura 11.66
Remarcă. Executaţi clic pe textul legăturii.

Creaţi o legătură hipertext către fişierul video extern: MrBean.avi. Textul
legăturii este: „Vizionaţi secvenţa video”.
583
1. Cum inseraţi animaţii Flash şi Shockwave cu Dreamweaver?
2. Descrieţi o metodă de inserare a unui text în format Flash cu

Dreamweaver.
3. Cum inseraţi data zilei cu Dreamweaver?
4. Inseraţi un applet Java cu Dreamweaver.
5. Descrieţi pe scurt metodele de inserare a fişierelor sunet şi video

(obiecte care necesită un plugin) cu Dreamweaver MX workspace.
9 www.verisgn.com
9 www.flashkit.com
9 www.werehere.com
Conversaţia 12
Creaţi cadre cu Dreamweaver MX

•••••••••••••••••••••••••••••••••••••••••
f Dreamweaver MX – Apreciaţi cadrele Dreamweaver
f Dreamweaver 4 workspace, MX workspace – Creaţi cadre care se
afişează în coloane
f Dreamweaver 4 workspace, MX workspace – Inseraţi o pagină (X)HTML
într-un cadru
f Dreamweaver 4 workspace , MX workspace – Creaţi cadre care se
afişează în linii
f Dreamweaver 4 workspace, MX workspace – Salvaţi setul de cadre
f Dreamweaver 4 workspace, MX workspace – Numiţi un cadru
f Dreamweaver 4 workspace , MX workspace – Creaţi o legătură (link) către
un cadru
f Dreamweaver 4 workspace , MX workspace – Formataţi bordurile cadrelor
f Dreamweaver 4 workspace , MX workspace – Controlaţi prezenţa sau
absenţa barelor de defilare ale cadrelor
•••••••••••••••••••••••••••••••••••••••••
Dreamweaver MX Apreciaţi cadrele Dreamweaver
Cadrele Dreamweaver sunt mult mai uşor de construit decât cadrele

(X)HTML.
586
Problema cea mai importantă (atât pentru cadrele (X)HTML cât şi pentru
cadrele Dreamweaver) rămâne incompatibilitatea acestora cu vechile
navigatoare sau cu navigatoarele care nu afişează decât text.
Aplicaţie
Accesaţi site-ul: www.ReelDirectory.com (figura 12.1)
Figura 12.1
Analizaţi modul de structurare al cadrelor şi … nu doar atât!
Remarci:
9 Nu utilizaţi cadre numai de plăcerea de a utiliza cadre.
9 Nu afişaţi bordurile cadrelor.
9 Nu utilizaţi cadre atunci când tabelele sunt mai indicate.
9 Nu folosiţi cadre imbricate (nested).
9 Creaţi o alternativă pentru vizitatorii care posedă un browser incapabil să
afişeze cadrele. Folosiţi mesajul „Acest site utilizează cadre şi necesită un
navigator capabil să le afişeze”.
9 Nu folosiţi cadrele atunci când creaţi link-uri către alte site-uri.
587
Dreamweaver 4 Creaţi cadre care se afişează în

workspace coloane
Dreamweaver permite crearea cadrelor prin divizarea ferestrei

navigatorului în ferestre de dimensiuni mai mici, în care se afişează
pagini Web individuale. Setul de cadre este un fişier HTML care conţine
informaţiile necesare pentru construcţia cadrelor. Într-un cadru puteţi să
încărcaţi o pagină Web existentă sau să creaţi o nouă pagină Web.
Puteţi diviza (fracţiona) fereastra Document în două părţi: stânga-

dreapta (vertical) sau sus-jos (orizontal), într-un mod destul de simplu.
Pentru a crea cadre care se afişează în coloane cu Dreamweaver 4

9 Metoda 1 – Meniul Modify, via Frameset;
9 Metoda 3 – Meniul Insert, via Frames;
9 Metoda 4 – Meniul View, via Visual Aids Frame Borders.
Iată cum creăm două cadre: unul la stânga, celălalt la dreapta prin
divizarea ferestrei unui navigator în coloane (cadre în coloană).
Metoda 1
2. Executaţi clic pe Modify FrameSet Split Frame Left (figura

12.2).
588
Figura 12.2
Remarcă. Comenzile Split Frame Left şi Split Frame Right împart pagina vertical, în două
cadre: unul la stânga şi altul la dreapta (vezi figura 12.3).
Figura 12.3
Remarci:
9 Conţinutul paginii este deplasat (stânga/dreapta) în funcţie de comanda
aleasă: Split Frame Left / Split Frame Right.
9 Puteţi continua divizarea cadrelor via Modify Frame Set pentru a obţine
cadre imbricate.
9 Puteţi continua prin a modifica proprietăţile cadrelor (bordura, dimensiune,
opţiuni de defilare şi redimensionare etc.)
589
9 Puteţi continua introducând: text, imagini, tabele etc. în fiecare din cadrele pe
care le-aţi creat.
9 Puteţi salva fişierul dumneavoastră.
9 Dacă aţi parcurs aceste etape cu titlu de antrenament, nu salvaţi deocamdată
setul de cadre pe care l-aţi creat. Executaţi clic pe File Close iar atunci când
Dreamweaver vă întreabă dacă doriţi să salvaţi modificările efectuate
răspundeţi prin No.
3. Analizaţi codul sursă HTML generat (figura 12.4).
Figura 12.4
Remarci:
9 Selectaţi tag-urile <FRAMESET>, <FRAME>, <NOFRAMES>, deschideţi
panoul Reference şi citiţi informaţiile care se afişează.
9 Utilizaţi meniul derulant Description pentru a vizualiza atributul cols al tag-ului
<FRAMESET>.
9 Citiţi Conversaţia 12, paragraful HTML4 – Creaţi cadre care se afişează în
coloane (fixe, dinamice) (Liviu Dumitraşcu, (X)HTML, Editura Universităţii din
Ploieşti, 2003).
Figura 12.5
590
Metoda 2
2. În panoul Insert, alegeţi categoria Frames (figura 12.6).
Figura 12.6
Remarcă. Panoul Frames conţine seturi de cadre predefinite pe care le puteţi insera în
paginile dumneavoastră, adaptându-le eventual printr-un „reglaj fin”.
3. Executaţi clic pe pictograma (Right) sau trageţi-o cu

mouse-ul în Document, pentru a o aplica (figura 12.7).
Figura 12.7
Remarci:
9 Metoda 2 utilizează un set de cadre predefinit.
9 Toate seturile de cadre din panoul Frames au chenarele dezactivate.
9 Cadrele au deja un nume, dar urmează să salvaţi fiecare fişier în parte (File
Save Frameset).
591
4. Analizaţi codul sursă HTML generat.
5. Vizualizaţi pagina Web într-un browser; comentaţi rezultatul

obţinut.
Metoda 3
2. Executaţi clic pe Insert Frames Right (figura 12.8).
Figura 12.8
3. Salvaţi setul de cadre (File Save Frameset).
Remarcă. Metoda 3 utilizează un set de cadre predefinit.

592
Metoda 4
1. Vizualizaţi chenarele cadrelor via View Visual Aids Frame

Borders (figura 12.9).
Figura 12.9
Remarcă. În jurul paginii Web se afişează un set de chenare (figura 12.10).
Figura 12.10
593
2. Trageţi cu mouse-ul de chenarul cadrului din stânga pentru a
crea cele două cadre: unul la stânga, altul la dreapta (figura
12.11).
Figura 12.11
3. Salvaţi setul de cadre.
Dreamweaver MX Creaţi cadre care se afişează în

workspace coloane
Pentru a crea cadre care se afişează în coloane, cu Dreamweaver MX

workspace , folosiţi una din metodele prezentate mai jos:

594
Iată cum creăm cu Dreamweaver MX workspace două cadre care se
afişează în coloane (cadre în coloană).
Metoda 2
2. În grupul de panouri Insert, subpanoul Frames, executaţi clic
pe butonul setului de cadre predefinit (Right Frame), figura

12.12.
Figura 12.12
3. Analizaţi codul sursă XHTML generat (figura 12.13).
Figura 12.13
Remarcă. Citiţi Conversaţia 12, paragraful XHTML – Creaţi cadre care se afişează în
coloane (fixe, dinamice), (Liviu Dumitraşcu, (X)HTML, Editura Universităţii din Ploieşti,
2003).

595
Figura 12.14
Dreamweaver 4 Inseraţi o pagină HTML într-un

workspace cadru
Puteţi introduce informaţii într-un cadru deschizând un document HTML

existent. Dacă doriţi să introduceţi text direct de la tastatură, procedaţi
ca în cazul paginilor tradiţionale.
Iată cum adăugăm în două cadre (vezi paragraful „Creaţi cadre în

coloane”) informaţiile din paginile a.html şi b.html (vezi aplicaţia HTML
„Structuraţi site-ul cu ajutorul cadrelor”), (Liviu Dumitraşcu, (X)HTML,
Editura Universităţii din Ploieşti, 2003).
1. Executaţi clic pe Window Others Frames.
Remarcă. Se afişează panoul Frames.
2. În panoul Frames care se afişează, selectaţi cadrul din stânga

paginii, executând clic în interiorul acestuia (figura 12.15).
Figura 12.15
596
Remarcă. Proprietăţile cadrului selectat sunt evidenţiate în inspectorul Properties.
3. În inspectorul Properties, executaţi clic pe pictograma Browse

for File ( ), figura 12.16.
Figura 12.16
Remarcă. Se afişează caseta de dialog Select HTML File.
4. În caseta Select HTML File, care se afişează executaţi clic pe:
9 a.htm;
9 butonul OK.
Remarcă. Dreamweaver afişează documentul HTML (a.html) în cadrul din stânga paginii.
Figura 12.17
6. Selectaţi cel de-al doilea cadru (din dreapta paginii).
7. În inspectorul Properties, executaţi clic pe icon-ul (Browse

for File).
8. În caseta de dialog Select File HTML, executaţi clic pe:
9 b.htm;
9 butonul OK.
Remarcă. Dreamweaver 4 workspace afişează documentul b.html în cadrul din dreapta

paginii.
597
Figura 12.18
Figura 12.19
Remarci:
9 Folosiţi comanda Open in Frame (via File) pentru a deschide, în cadrul unde
este localizat cursorul, o pagină Web existentă.
9 Atenţie la încărcarea într-un cadru a unei pagini Web care conţine cadre!
Există riscul ca aceste cadre să apară prea mici!
Dreamweaver MX Inseraţi o pagină XHTML într-un

workspace cadru
Iată cum inserăm cu Dreamweaver MX workspace paginile a.html şi
b.html în două cadre în coloană, aceleaşi pe care le-aţi creat cu
598
1. Executaţi clic pe Window Others Frames (figura 12.20).
Figura 12.20
2. În panoul Frames care se afişează, selectaţi cadrul din stânga

paginii, executând clic în interiorul acestuia (figura 12.21).
Figura 12.21
599
3. În panoul Properties, executaţi clic pe pictograma (Browse
for File), figura 12.22.
Figura 12.22
4. În caseta de dialog Select HTML File, care se afişează executaţi

9 selectaţi folder-ul care conţine fişierul a.htm;
9 executaţi clic pe a.htm;
Figura 12.23
600
Remarcă. Dreamweaver afişează documentul HTML (a.html) în cadrul din stânga paginii
(figura 12.24).
Figura 12.24
Figura 12.25
6. Selectaţi cel de-al doilea cadru (din dreapta paginii).
7. În inspectorul Properties, executaţi clic pe icon-ul (Browse

for File).
8. În caseta de dialog Select File HTML, executaţi clic pe:
9 b.htm;
9 butonul OK.
601
Remarcă. Dreamweaver MX workspace afişează fişierul b.html în cadrul din dreapta
paginii.
Figura 12.26
Figura 12.27
Dreamweaver 4 Creaţi cadre care se afişează în linii

workspace
Puteţi de asemenea diviza orizontal fereastra Document pentru a crea

două cadre (în linii): unul sus şi altul jos.
602
Vom folosi aceleaşi metode pe care le-am aplicat la crearea cadrelor
coloană, dar cu modificările prezentate mai jos:
Iată cum procedaţi pentru a crea două cadre: unul sus altul jos, într-o
pagină Web vidă.
Metoda 1
Se modifică pasul 2 (Metoda 1 – cadre coloană), după cum urmează:
2. Executaţi clic pe Modify FrameSet Split Frame Up.
Metoda 2 – Panoul Insert
3. Executaţi clic pe pictograma (Top) sau trageţi-o cu

mouse-ul în Document, pentru a o aplica.
Metoda 3
2. Executaţi clic pe Insert Frames Top.
Metoda 4
2. Trageţi cu mouse-ul de chenarul cadrului de sus pentru a crea

cele două cadre: unul sus, altul jos.
În figura 12.28 se prezintă cele două cadre afişate: unul sus, altul jos.
603
Figura 12.28
Remarcă. Diferenţa dintre Split Frame Left şi Split Frame Right sau Split Frame Top şi
Split Frame Bottom nu apare pentru moment. În consecinţă, puteţi alege oricare din
cele două comenzi.
Dreamweaver MX Creaţi cadre care se afişează în linii

workspace
Pentru a crea cadre care se afişează în linii, cu Dreamweaver MX

workspace, folosiţi una din metodele prezentate în cadrul paragrafului
„Dreamweaver 4 workspace – Creaţi cadre care se afişează în linii”.
Iată cum procedaţi pentru a crea cu Dreamweaver MX workspace două

cadre: unul sus altul jos, într-o pagină Web vidă.
Metoda 1
2. Executaţi clic pe Modify FrameSet Split Frame Up (figura

12.29).
604
Figura 12.29
Figura 12.30

605
Figura 12.31
Dreamweaver 4 Salvaţi setul de cadre

workspace
La primul antrenament cu cadre (vezi aplicaţiile: „Creaţi cadre care se

afişează în coloane” şi „Creaţi cadre care se afişează în linii”) v-am cerut
să nu salvaţi cele două cadre (stânga/dreapta şi sus/jos) şi setul de
cadre corespunzător.
Iată care este procedura de salvare a celor trei fişiere HTML (vezi
paragraful „Creaţi cadre care se afişează în coloane”).
1. Executaţi clic pe File Save All (figura 12.32).
Figura 12.32
606
Remarci:
9 Se afişează caseta de dialog Save As.
9 Este prima casetă de dialog care se afişează. Numărul total de casete de
dialog depinde de numărul de cadre definite.
2. Daţi un nume fişierului: set_de_cadre.htm (figura 12.33).
Figura 12.33
Remarci:
9 Primul fişier pe care-l salvaţi reprezintă fişierul frameset, adică fişierul care
indică ierarhia cadrelor.
9 Fişierul frameset trebuie să poarte un nume semnificativ (set_de_cadre sau s
etc.) pentru a vă reaminti ori de câte ori este nevoie că aceasta este pagina
care conţine setul de cadre.
3. Salvaţi fişierul în folder-ul Site.
Remarcă. Fişierul set_de_cadre.html a fost salvat în folder-ul Site şi o nouă casetă de

dialog Save As se afişează.
4. Daţi un nume fişierului: stanga.htm.
Acest fişier identifică unul din cadrele (stânga) documentului

dumneavoastră. Puteţi uşor să-l reperaţi întrucât Dreamweaver îl
selectează.
5. Executaţi clic pe Save.
Fişierul cadru (stanga.html) este salvat şi o nouă casetă de dialog se

afişează.
6. Daţi un nume fişierului: dreapta.htm.
7. Executaţi clic pe Save.
Remarci:
9 Nu uitaţi să priviţi documentul în vederea identificării cadrului pe care
Dreamweaver se pregăteşte să-l salveze. Conturul său este selectat.
9 Odată cu salvarea în totalitate a cadrelor nici o casetă de dialog Save As nu
se va mai afişa.
9 Uneori, nu doriţi să salvaţi toate fişierele o singură dată. Pentru a salva un
singur cadru, poziţionaţi cursorul în cadrul respectiv şi executaţi clic pe File
Save Frame As. Dreamweaver nu salvează decât fişierul cadrului respectiv.
9 Pentru a nu salva decât pagina care defineşte setul de cadre (pagina de
cadre) selectaţi toate cadrele executând clic pe una din borduri, apoi executaţi
clic pe File Save all frames.
607
9 Nu uitaţi că pagina de cadre nu se afişează în nici un cadru: ea se limitează la
definirea zonei de afişaj a cadrelor, a poziţiei şi a dimensiunii acestora.
9 Titlul pe care îl vedeţi în bara de titlu a browser-ului este titlul din pagina care
conţine setul de cadre. Pentru a adăuga un titlu selectaţi Page Properties (via
Modify) în timp ce este selectat setul de cadre. Tastaţi un titlu în caseta de
titlu.
Dreamweaver MX Salvaţi setul de cadre

workspace
Iată cum procedaţi pentru a salva setul de cadre (fişierul frameset) şi

cele două cadre coloană (stânga/dreapta) pe care le-aţi creat în
paragraful „Dreamweaver MX workspace - Creaţi cadre care se afişează
în coloane”.
1. Selectaţi setul de cadre.
2. Executaţi clic pe File Save All.
3. În caseta de dialog Save As, care se afişează, executaţi

9 selectaţi folder-ul (Site) în care urmează să salvaţi cele trei

fişiere;
9 în zona File name introduceţi set_de cadre.htm.
9 executaţi clic pe butonul Save.
Figura 12.34
608
Remarcă. Fişierul set_de_cadre.htm a fost salvat în folder-ul Site şi o nouă casetă de
dialog Save As se afişează.
4. În caseta de dialog Save As executaţi următoarele acţiuni:
9 în zona File name introduceţi stanga.htm;

Fişierul cadru (stanga.htm) este salvat şi o nouă casetă de dialog Save

As se afişează.
5. În caseta de dialog Save As executaţi următoarele acţiuni:
9 în zona File name introduceţi dreapta.htm;
Dreamweaver 4 Numiţi un cadru

workspace
Dreamweaver numeşte în mod automat un cadru: leftFrame, topFrame,

mainFrame. Puteţi, desigur, să păstraţi acest nume. Dar, cum
dumneavoastră aveţi personalitate, este bine să acţionaţi în consecinţă!
Iată cum procedăm pentru a atribui un nume cadrelor. Vom utiliza

fişierul set_de_cadre.htm, pe care l-am creat şi salvat în aplicaţia
precedentă.
1. Deschideţi fişierul set_de_cadre.html (figura 12.35).
Figura 12.35
609
2. Afişaţi panoul Frames, via Window Other Frames (figura
12.36).
Figura 12.36
Remarcă. Panoul Frames este o reprezentare în miniatură a paginii care conţine cele
două cadre (verticale).
3. Asiguraţi-vă că inspectorul Properties este deschis (via Window

Properties).
4. Executaţi clic în interiorul cadrului din dreapta care urmează a fi

numit (figura 12.37).
Figura 12.37
Remarci:
9 Inspectorul Properties afişează proprietăţile cadrului pe care l-aţi selectat.
Panoul Frames permite selectarea unui singur cadru sau a unui singur set de
cadre o dată.
9 Puteţi modifica numele cadrului (zona Frame Name) şi schimba adresa URL
(zona SRC). Puteţi configura totodată derularea cadrelor şi atributele
chenarelor.
5. În inspectorul Properties, în zona Frame Name, introduceţi:

CadruDreapta (figura 12.38).
Figura 12.38
610
6. Salvaţi fiecare fişier în parte.
Figura 12.39
Remarcă. Puteţi salva fiecare fişier în parte sau tot setul de cadre.
Dreamweaver MX Numiţi un cadru

workspace
Iată cum procedăm pentru a atribui un nume cadrelor cu Dreamweaver

MX workspace. Vom utiliza fişierul set_de_cadre.htm, pe care l-am creat
şi salvat în paragraful „Dreamweaver MX workspace – Salvaţi setul de
cadre”.
1. Executaţi clic pe Window Others Frames (figura 12.40).
Figura 12.40
611
2. Executaţi clic în interiorul cadrului din dreapta, care urmează a
fi numit (figura 12.41).
Figura 12.41
3. În panoul Properties, în zona Frame Name, introduceţi: Cadru

Dreapta (figura 12.42).
Figura 12.42
Remarcă. Numele cadrului apare în panoul Frames.
Figura 12.43
612
Dreamweaver 4 Creaţi o legătură (link) către un

workspace
cadru
În Dreamweaver este foarte simplu să creaţi o legătură către un alt
cadru.
Iată cum creăm un link din cadrul din stânga (Pagina 1) către Pagina 4
(figura 12.44) care se va deschide în cadrul principal (Pagina 3).
Figura 12.44
Remarcă. În cadrul din stânga am adăugat text pentru legăturile către Paginile 4, 5 şi 6.
1. Selectaţi textul Pagina 4 care urmează a fi convertit în legătură

(link) către Pagina4.html (figura 12.45).
Figura 12.45
613
2. În inspectorul Properties, executaţi clic pe pictograma în formă
de dosar, (Browse for File).
3. Executaţi dublu clic pe fişierul ţintă: pagina4.html.
Remarcă. Numele fişierului se afişează în inspectorul Properties, în zona Link (figura

12.46).
Figura 12.46
4. În inspectorul Properties, în zona Target, în meniul derulant

(d), alegeţi mainFrame – numele cadrului în care doriţi să se
afişeze pagina4.html.
Remarci:
9 Dreamweaver listează toate cadrele numite. Noi am ales mainFrame.
9 Puteţi de asemenea consulta numele cadrelor în panoul Frames via Window
Others Frames (figura 12.47).
Figura 12.47
9 Există patru nume de ţintă rezervate:

• _top (deschide documentul în întreaga fereastră a browser-ului);
• _self (deschide documentul în aceeaşi fereastră sau în acelaşi cadru care
conţine legătură; aceasta este valoarea prestabilită);
• _parent (deschide documentul în setul de cadre părinte);
• _blank (deschide documentul într-o nouă fereastră a browser-ului).
9 Lista de ţinte nu este activă decât dacă selectaţi textul de legătură.

614
Figura 12.48
Remarcă. Citiţi Conversaţia 12, paragraful HTML4 – Creaţi o legătură (link) către un
cadru (Liviu Dumitraşcu, (X)HTML, Editura Universităţii din Ploieşti, 2003).
Figura 12.49
Remarcă. Dacă executaţi clic pe textul de legătură Pagina 4, se afişează în cadrul

principal (mainFrame) al setului de cadre pagina HTML: Pagina 4.
615
Dreamweaver MX Creaţi o legătură (link) către un

workspace
cadru
Iată cum creăm un link din cadrul din stânga (Pagina 1) către Pagina 4,
care se va deschide în cadrul principal (Pagina 3). Vom utiliza setul de
cadre din paragraful „Dreamweaver 4 workspace – Creaţi o legătură
(link) către un cadru”.
1. Selectaţi Pagina 4 – textul care urmează a fi convertit în

legătură către Pagina4.html.
2. În inspectorul Properties, executaţi clic pe (Browse for File).
3. În caseta de dialog Select File, care se afişează, executaţi

9 selectaţi folder-ul Site;
9 executaţi clic pe fişierul ţintă, pagina4.htm;
Figura 12.50
616
4. În panoul Properties, în zona Target, în meniul derulant alegeţi
mainFrame, numele cadrului unde doriţi să se afişeze
pagina4.html (figura 12.51).
Figura 12.51
Figura 12.52
Remarcă. Citiţi Conversaţia 12, paragraful XHTML – Creaţi o legătură (link) către un
cadru (Liviu Dumitraşcu, (X)HTML, Editura Universităţii din Ploieşti, 2003).
Figura 12.53
617
Dreamweaver 4 Formataţi bordurile cadrelor

workspace
Pentru a deveni performant în utilizarea cadrelor, va trebui să modificaţi,

nu de puţine ori, proprietăţile cadrelor dumneavoastră.
În acest sens, veţi configura atributele de derulare şi redimensionare

ale cadrelor, veţi configura chenarele cadrelor, veţi umbla la culoarea
sau bordura unui cadru etc.
Pentru accesarea tuturor acestor opţiuni, utilizaţi panoul Frames via

Window Frames.
Iată cum modificaţi grosimea şi culoarea chenarului setului de cadre din

aplicaţia „Creaţi cadre care se afişează în coloane”.
1. Executaţi clic pe bordura unui cadru pentru a selecta setul de

cadre (figura 12.54).
Figura 12.54
Remarcă. Cea mai simplă metodă de a selecta setul de cadre afişând atributele setului
de cadre în inspectorul Properties este aceea de selectare a tag-ului <frameset> în
selectorul de tag-uri. Selectorul de tag-uri afişează tag-ul <frameset> atunci când este
selectat un cadru din interiorul setului de cadre.
9 Borders – selectaţi Yes în meniul Borders;

618
9 Border width – introduceţi valoarea 10 (grosimea bordurii);
9 Border Color – selectaţi culoarea Blue (#0000FF).
Figura 12.55
Remarcă. În fereastra Document din Dreamweaver, puteţi vedea imediat modificările

efectuate.
Figura 12.56
Remarci:
9 Selectaţi tag-ul <FRAMESET> şi deschideţi panoul Reference. Utilizaţi meniul
derulant Description pentru a vizualiza atributul border.
9 Citiţi Conversaţia 12, paragraful HTML4 – Formataţi bordurile cadrelor (Liviu
Figura 12.57
Aplicaţie
Suprimaţi bordura cadrelor.

619
În inspectorul Properties, în:
9 meniul Borders (via Borders) – selectaţi No.
9 zona Border Width – introduceţi valoarea 0 (zero).
Remarci:
9 Dacă nu doriţi să se afişeze chenarele, asiguraţi-vă că acestora nu le este
atribuită nici o valoare.
9 Pentru a dezactiva un chenar, toate cadrele adiacente trebuie să aibă, şi ele,
chenarele dezactivate.
Dreamweaver MX
workspace
Formataţi bordurile cadrelor
Pentru a delimita cât mai bine cadrele, modificaţi dimensiunea şi

culoarea bordurilor.
Iată cum procedaţi pentru a modifica grosimea (10 pixeli) şi culoarea

(blue) bordurii setului de cadre pe care l-aţi creat în aplicaţia „Creaţi
cadre care se afişează în coloane” (Paragraful „Dreamweaver MX
workspace – Creaţi cadre care se afişează în coloane”).
9 Borders – executaţi clic pe şi selectaţi Yes;
9 Border width – introduceţi o valoarea 10 (grosimea

chenarului);
9 Border Color – selectaţi culoarea Blue (#0000FF).
Figura 12.58

620
Figura 12.59
Remarcă. Citiţi Conversaţia 12, paragraful XHTML – Formataţi bordurile cadrelor (Liviu
Figura 12.60
Controlaţi prezenţa sau absenţa

Dreamweaver 4
workspace barelor de defilare ale cadrelor
Cu Dreamweaver 4 workspace puteţi controla într-un mod simplu

prezenţa/absenţa barelor de defilare (derulare) – orizontale, verticale din
cadrele dumneavoastră.
621
Iată cum configuraţi atributele de defilare ale cadrului Pagina 2 din
aplicaţia „Creaţi cadre care se afişează în coloane”.
1. Selectaţi cadrul Pagina 2 (figura 12.61).
Figura 12.61
2. În inspectorul Properties, în zona Scroll, executaţi clic pe

butonul d şi selectaţi Auto în meniul Scroll pentru a activa
barele de defilare în cazul în care conţinutul cadrului este mai
mare decât ceea ce se vede în fereastra navigatorului (figura
12.62).
Figura 12.62
Remarci:
9 Atunci când este selectat un cadru, inspectorul Properties afişează patru
opţiuni: Yes, No, Auto, Default pentru barele de defilare.
9 Yes activează barele de defilare (orizontale, verticale), indiferent de situaţie.
9 No dezactivează barele de defilare, indiferent de situaţie.
9 Auto activează numai barele de defilare (orizontale sau verticale) necesare.
Figura 12.63
622
Remarcă. Citiţi Conversaţia 12, paragraful HTML4 – Controlaţi prezenţa sau absenţa
barelor de defilare (Liviu Dumitraşcu, (X)HTML, Editura Universităţii din Ploieşti, 2003).
Figura 12.64
Aplicaţii
Împiedicaţi redimensionarea unui cadru.
Iată cum procedăm pentru a modifica opţiunea de redimensionare a unui cadru.
1. Selectaţi cadrul Pagina 2.
2. În inspectorul Properties, în zona No Resize (fără redimensionare)

selectaţi caseta de validare (figura 12.65).
Figura 12.65
Figura 12.66

623
Figura 12.67
Remarcă. Utilizatorul nu poate glisa bordura cadrului Pagina 2.
Definiţi coordonatele spaţiului dintre bordura cadrului şi conţinutul acestuia.
2. În inspectorul Properties, în zonele Margin Width şi Margin Height

introduceţi valoarea 2 pixeli (sugestia noastră!), figura 12.68.
Figura 12.68
Remarci:
9 Cu ajutorul cadrelor puteţi controla în mod precis dimensiunile imaginii
(spaţiul dintre bordura şi conţinutul cadrului).
9 Dacă doriţi să suprimaţi cele două margini introduceţi valoarea 0 (zero) în cele
două zone (Marge Width şi Marge Height).
Modificaţi dimensiunile cadrelor
Iată care este procedura pe care trebuie s-o urmaţi. Vom apela la aplicaţia
„Creaţi cadre în coloane”.
1. Executaţi clic pe bordura unui cadru pentru a selecta setul de cadre

(figura 12.69).
624
Figura 12.69
9 RowCol Selection – executaţi clic pe cadrul Pagina 2;
9 Column via Value – introduceţi valoarea 150;
9 Units – selectaţi Pixels.
Figura 12.70
Remarcă. Inspectorul Properties afişează în zona Units următoarele unităţi: Pixels,

Percent, Relative.
Figura 12.71

625
Figura 12.72
Remarcă. Metoda cea mai simplă pentru modificarea dimensiunilor unui cadru este
aceea de a selecta bordura cadrului şi de a o glisa până la dimensiunile dorite. Cu
această metodă puteţi şi suprima un cadru, glisând bordura până la marginea ferestrei.
Folosiţi pentru modificarea dimensiunii cadrelor şi celelalte unităţi (zona Units
din inspectorul Properties): Percent, Relative.
Dreamweaver MX Controlaţi prezenţa sau absenţa

workspace barelor de defilare ale cadrelor
Iată cum activăm barele de defilare (orizontale/verticale) ale cadrului

Pagina 2, pe care l-aţi creat în aplicaţia „Creaţi cadre care se afişează în
coloane” (Paragraful „Dreamweaver MX workspace – Creaţi cadre care
se afişează în coloane”).
1. Selectaţi cadrul Pagina 2.
2. În inspectorul Properties (figura 12.73), în:
9 zona Scroll – executaţi clic pe butonul d;
9 meniul Scroll – selectaţi Auto.
Figura 12.73

626
Figura 12.74
Remarcă. Citiţi Conversaţia 12, paragraful XHTML – Controlaţi prezenţa sau

absenţa barelor de defilare (Liviu Dumitraşcu, (X)HTML, Editura Universităţii din
Ploieşti, 2003).
Figura 12.75
Aplicaţii
Folosiţi un text de înlocuire (alternativă pentru cadre) „Ne pare rău că trebuie
să renunţaţi la cadre!” în situaţia în care browser-ul dumneavoastră este …
incapabil să afişeze cadrele!
2. Executaţi clic pe Modify Frameset Edit Noframes Content.
3. Introduceţi textul alternativă care urmează să se afişeze în absenţa

cadrelor (figura 12.76).
627
Figura 12.76
Modificaţi opţiunea de redimensionare a unui cadru.
Indicaţie. În panoul Properties, în zona No Resize, selectaţi caseta de validare.
Modificaţi coordonatele (2 pixeli!) spaţiului dintre bordura cadrului şi

conţinutul acestuia.
Indicaţie. În panoul Properties, în zonele Margin Width şi Margin Height

introduceţi valoarea 2.
Modificaţi dimensiunile cadrelor (vezi aceeaşi aplicaţie, paragraful:

„Dreamweaver 4 workspace – Controlaţi prezenţa sau absenţa barelor de
defilare ale cadrelor”).
628
1. Prezentaţi pe scurt una din metodele Dreamweaver de creare cadre
care se afişează în coloane/linii.
2. Cum inseraţi o pagină HTML într-un cadru?
3. Descrieţi pe scurt procedura Dreamweaver de creare a unei legături

(link) către un cadru.
4. Prezentaţi pe scurt procedura Dreamweaver de formatare a bordurilor

cadrelor.
5. Cum procedaţi în situaţia în care browser-ul dumneavoastră este …

incapabil să afişeze cadrele.
6. Cum modificaţi opţiunea de redimensionare a unui cadru?
9 http://metabolicnutrition.com
9 www.terespond.com
9 www.economist.com
9 www.macromedia.com/90/dreamweaver_tutorials
Conversaţia 13
Creaţi straturi cu Dreamweaver MX

•••••••••••••••••••••••••••••••••••••••••
f Dreamweaver 4 workspace, MX workspace – Creaţi un strat (layer)
f Dreamweaver 4 workspace, MX workspace – Modificaţi dimensiunile şi
poziţia unui strat. Aplicaţii
f Dreamweaver 4 workspace, MX workspace – Modificaţi vizibilitatea şi
ordinea de suprapunere a straturilor. Aplicaţii
f Dreamweaver 4 workspace, MX workspace – Controlaţi conţinutul unui
strat
f Dreamweaver 4 workspace, MX workspace – Creaţi straturi imbricate
(nested)
•••••••••••••••••••••••••••••••••••••••••
Dreamweaver 4
workspace Creaţi un strat (layer)
Dreamweaver permite crearea într-un mod simplu şi direct a trei funcţii
DHTML puternice:
9 straturi;
9 comportamente;
9 scenarii.
Vom prezenta în cele ce urmează modul de lucru cu straturile.

630
Straturile (layers, în limba engleză; calques, în limba franceză) sunt foi
de stiluri de poziţionare a obiectelor într-o pagină Web (CSS-P pentru
W3C; în prezent ele sunt integrate în CSS – 2), care aparţin marii familii
CSS (foi de stiluri în cascadă).
Straturile permit suprapunerea elementelor unei pagini Web. Ele pot

conţine aceleaşi elemente ca şi paginile Web: text, imagini, animaţie
Flash etc. Întrucât straturile sunt transparente, elementele paginii
rămân, în anumite limite, vizibile.
Poziţia straturilor este indicată în trei dimensiuni (3D): x, y, z (figura

13.1).
marginea paginii
y
Stratul 3
z
Stratul 2
Stratul 1
Figura 13.1
unde,
x reprezintă poziţia orizontală faţă de marginea din stânga a

stratului;
y reprezintă poziţia verticală faţă de marginea de sus a stratului;
z reprezintă ordinea de suprapunere (stivuire) în raport cu alte

straturi.
631
În Dreamweaver, straturile au o poziţie absolută: stratul este plasat în
raport cu marginile paginii şi este poziţionat deasupra conţinutului
paginii.
Remarci:
9 Pentru a poziţiona un strat, folosiţi două tipuri de elemente HTML: elementul
<div> recunoscut de browser-e şi de standardul W3C; elementul <layer>
specific navigatorului Netscape (recunoscut numai de către acesta).
9 Pentru a parametriza elementul HTML <DIV>, utilizaţi Edit Preference
categoria Layers (figura 13.2).
Figura 13.2
9 În meniul derulant Tag, alegeţi DIV.

9 În zonele: Visibility, Width, Height, Background Color, Background Image şi
Nesting, nu modificaţi parametrii afişaţi.
9 În zona Netscape 4 Compatibility, activaţi opţiunea Add Resize Fix when
Inserting Layer (pentru a optimiza paginile care conţin straturi).
Pentru a crea un strat (layer) cu Dreamweaver 4 workspace , folosiţi

9 Metoda 1 – Meniul Insert, via Layer;

632
Inseraţi un strat
Iată cum procedaţi pentru a insera un strat peste conţinutul paginii
existente.
Metoda 1
1. Executaţi clic în locul în care doriţi să fie inserat layer-ul.
2. Executaţi clic pe Insert Layer.
Remarcă. Dreamweaver 4 workspace afişează un layer deasupra tuturor informaţiilor

existente (figura 13.3).
Figura 13.3
3. Selectaţi stratul, executând clic pe conturul acestuia (figura

13.4)
Figura 13.4
Remarci:
9 Atunci când plasaţi mouse-ul pe conturul stratului, pointer-ul se transformă
într-o cruce cu patru săgeţi.
633
9 Când stratul a fost selectat, pe perimetrul acestuia apar opt pătrate negre
(mânere).
4. Trageţi de mânerele de redimensionare pentru a obţine o

dimensiune aproximativă a stratului.
Figura 13.5
Figura 13.6
Aplicaţie
Inseraţi în stratul pe care l-aţi definit sigla societăţii LUMINA BLÂNDĂ.
634
Metoda 2
(Draw Layer) şi trageţi cursorul (pointer-ul) în formă de

cruce în pagina dumneavoastră pentru a aproxima
dimensiunea dorită a stratului (figura 13.7).
Figura 13.7
Aplicaţie
Inseraţi un strat (layer) peste conţinutul paginii existente în care urmează să

introduceţi sigla societăţii LUMINA BLÂNDĂ.
Dreamweaver MX Creaţi un strat (layer)

workspace
Pentru a crea un strat (layer) cu Dreamweaver MX workspace, folosiţi

9 Metoda 1 – Meniul Insert, via Layer;
Inseraţi un strat
Iată cum procedaţi pentru a insera un strat (layer) peste conţinutul
paginii existente (figura 13.8).
635
Metoda 2
1. Executaţi clic în locul în care doriţi să fie inserat layer-ul (figura

13.8).
Figura 13.8
pe butonul (Draw Layer), figura 13.9.
Figura 13.9
3. Executaţi clic pe conturul stratului, pentru a-l selecta (figura

13.10).
Figura 13.10
636
Remarci:
9 Un icon indică prezenţa unui strat (figura 13.10).
9 Dacă icon-ul nu se afişează atunci, executaţi clic pe Edit Preference
Categoria Invisible Elements şi activaţi opţiunea Anchor Points for Layers.
9 Stratul este inserat în pagină peste celelalte elemente (figura 13.10).
4. Trageţi de mânerele de redimensionare pentru a obţine o
dimensiune aproximativă a stratului.
Figura 13.11
637
Inseraţi o imagine într-un strat
Iată care este procedura pe care vă invităm s-o urmaţi pentru a insera
imaginea ce reprezintă sigla societăţii LUMINA BLÂNDĂ în stratul pe care
l-aţi creat.
1. Executaţi clic în interiorul stratului.
2. Executaţi clic pe Insert Image.
Remarcă. Se afişează caseta de dialog Select Image Source.
3. În caseta de dialog Select Image Source executaţi următoarele

9 în zona LOOK in – selectaţi folder-ul care conţine imaginea;
9 File Name – introduceţi sigla.jpg;
Figura 13.12

638
Figura 13.13
Figura 13.14
Dreamweaver 4 Modificaţi dimensiunile şi poziţia

workspace unui strat
Puteţi redimensiona şi repoziţiona un strat după bunul dumneavoastră
plac.
Iată cum modificăm dimensiunile (Width, Height) stratului pe care l-am

creat în aplicaţia precedentă (width=300; height=200 în loc de 200
respectiv 115 pixeli).
639
1. Selectaţi stratul pe care doriţi să-l redimensionaţi.
Remarcă. Există mai multe variante de selectare a unui strat:

1. executaţi clic pe elementul invizibil ( );
sau,
2. executaţi clic pe conturul stratului;
sau,
3. când punctul de inserţie se află în interiorul stratului, executaţi clic pe pătratul
( ) aflat în colţul din stânga sus al stratului (figura 13.15).
Figura 13.15
sau,
4. când stratul nu este activat, acţionaţi şi menţineţi apăsată tasta Shift şi
executaţi clic oriunde în interiorul stratului.
sau,
5. în paleta Layers, via Window t Layers, zona Name, executaţi clic pe numele
stratului (pentru moment, Layer 1).
2. Afişaţi: panoul Layers, Window Others Layers şi

inspectorul Properties, (figura 13.16).
Figura 13.16
640
3. În inspectorul Properties, executaţi următoarele acţiuni (figura
13.17).
9 în zona Layer ID – introduceţi numele stratului, Demo;

9 în zona L – introduceţi valoarea 50, care reprezintă
distanţa în pixeli, măsurată de la
marginea din stânga a paginii la marginea
din stânga a stratului;
9 în zona T – introduceţi valoarea 30, care reprezintă
distanţa în pixeli, măsurată de la
marginea de sus a paginii la marginea
superioară a stratului;
9 în zonele W şi H – introduceţi valoarea 300, respectiv 200
pixeli;
9 în zona Z – Index – lăsaţi 1, valoarea afişată care precizează
că stratul se găseşte dedesubtul celorlalte
(stratul situat cel mai jos în stiva
straturilor).
Figura 13.17
4. Schimbaţi poziţia stratului executând clic şi apoi deplasând

pătratul din colţul din stânga sus al stratului.
Remarcă. Dreamweaver repoziţionează stratul (figura 13.18).

641
Figura 13.18
Figura 13.19
Figura 13.20
642
Aplicaţii
Aliniaţi cele trei straturi din figura 13.21.a în raport cu stratul din mijloc
(selectat) la marginea superioară (figura 13.21.b).
Figura 13.21 a Figura 13.21 b
Indicaţie. Alinierea se face în raport cu stratul (din mijloc) selectat. Executaţi

clic pe Modify t Align t Left sau Right sau Top sau Bottom.
Remarcă. Puteţi să vă aliniaţi straturile utilizând comenzile Grid (grilă), via View t Grid
t Show Grid şi View t Rulers t Show. Puteţi modifica aspectul grilei utilizând caseta
de dialog Grid Settings.
Transformaţi straturile din figura 13.22 într-un tabel.
Figura 13.22
643
1. Desenaţi straturile din figura 13.22.
2. Selectaţi toate straturile.
3. Executaţi clic pe Modify t Convert t Layers to Table… (figura 13.23).
Figura 13.23
Se afişează caseta de dialog Convert Layers to Table (figura 13.24) care conţine
secţiunile: Table Layout (machetare tabel) şi Layout Tools (instrumente).
Figura 13.24
644
4. În caseta de dialog Convert Layers to Table, activaţi butonul radio
Most Accurate (figura 13.25).
Figura 13.25
Remarci:
9 Most Accurate (cel mai precis) permite convertirea fiecărui strat într-o celulă
de tabel, creând atâtea celule cât este necesar.
9 Smallest: Collapse Empty Cells (cel mai mic: elimină celulele vide) elimină
liniile sau coloanele vide dacă acestea se găsesc la o distanţă egală cu un
număr stabilit de pixeli în raport co o linie/coloană existentă.
9 Use Transparent GIFs (utilizează fişiere GIF transparente) completează ultimul
rând al tabelului cu imagini GIF transparente.
9 Center on Page (centrează în pagină) centrează tabelul în pagina
dumneavoastră.
Figura 13.26

645
Figura 13.27
Dreamweaver MX Modificaţi dimensiunile şi poziţia

workspace unui strat
Iată cum modificăm dimensiunile (300 * 200 pixeli în loc de 200 * 115
pixeli) şi poziţia stratului pe care l-aţi creat în aplicaţia precedentă.
1. Selectaţi stratul pe care doriţi să-l formataţi (figura 13.28).
Remarci:
9 Asiguraţi-vă că elementele invizibile ale straturilor sunt activate.
9 În pagină, elementele invizibile şi bordurile straturilor trebuie să fie afişate.
9 Pentru selectarea unui strat, folosiţi una din variantele prezentate (vezi
Dreamweaver 4 workspace).
646
Figura 13.28
2. Afişaţi panoul Layers (figura 13.29), via Window Other

Layer.
Figura 13.29
3. În panoul Properties, parametrizaţi stratul ca în figura 13.30

(vezi Dreamweaver 4 workspace).
647
Figura 13.30
4. Schimbaţi poziţia stratului, executând clic şi apoi deplasând

pătratul din colţul din stânga sus al stratului.
Remarcă. Dreamweaver MX workspace repoziţionează stratului.
Figura 13.31

648
Figura 13.32
Dreamweaver 4 Modificaţi vizibilitatea şi ordinea

workspace
de suprapunere a straturilor
Puteţi configura (fără efort!) alte două caracteristici puternice ale
straturilor: suprapunerea şi vizibilitatea.
Iată care este procedura pe care trebuie s-o urmaţi pentru a configura
suprapunerea (indicele z) şi vizibilitatea a două straturi: sigla (sigla
societăţii LUMINA BLÂNDĂ – un bec de 10 W!) şi text (LUMINA
BLÂNDĂ), figura 13.33.
B
Figura 13.33 LUMINA BLÂNDĂ LUMINA BLÂNDĂ
1. Aranjaţi cele două straturi (sigla şi text) într-o poziţie

convenabilă utilizând tehnicile prezentate (figura 13.34).
649
Figura 13.34
2. Afişaţi panoul Layers, via Window t Others Layers (figura

13.35).
Figura 13.35
Remarci:
9 Panoul Layers afişează toate straturile dintr-o pagină.
9 Numele (name), vizibilitatea ( ) şi indicele z (z) sunt uşor accesibile în
acest panou.
9 Pentru a verifica vizibilitatea straturilor executaţi clic în coloana ( ).
9 Pentru a modifica numele straturilor executaţi dublu clic pe numele acestuia în
coloana Name.
9 Pentru a modifica ordinea de suprapunere a straturilor, executaţi dublu clic pe
valoarea corespunzătoare în coloana z; puteţi de asemenea glisa (sus/jos)
numele stratului în fereastra panoului Layers.
3. Schimbaţi ordinea de suprapunere a straturilor executând clic

pe numele stratului (text) în panoul Layers şi apoi glisându-l
către începutul sau sfârşitul listei (acolo unde doriţi!) de nume
(figura 13.36).
650
Figura 13.36
Dreamweaver 4 workspace modifică ordinea de suprapunere a

straturilor (figura 13.37).
Figura 13.37
Remarci:
9 Panoul Layers afişează indicele z în dreapta numelui stratului.
9 Panoul Layers afişează straturile după valoarea indicelui z, stratul cel mai de
sus având indicele z cel mai mare, iar stratul de jos având indicele z cel mai
mic.
9 Indicele z poate fi un număr pozitiv sau negativ.
9 Puteţi configura indicele z în inspectorul Properties, în zona z-index.
9 Puteţi schimba cu uşurinţă ordinea de suprapunere a straturilor prin
selectarea numelui stratului (în panoul Layers) urmată de tragerea acestuia
către începutul sau sfârşitul listei de nume.
651
4. Modificaţi vizibilitatea stratului sigla, executând clic pe
pictograma (imaginea unui ochi) în panoul Layers (figura
13.38).
Figura 13.38
Stratul sigla se afişează ca în figura 13.39.
Figura 13.39
Remarci:
9 Puteţi configura caracteristicile de vizibilitate ale unui strat [visible (vizibil);
hidden (ascuns); inherit (moştenire); default (prestabilit)], selectând
pictograma în formă de ochi din stânga stratului sau utilizând meniul derulant
Vis, via inspectorul Properties t zona Vis.
9 În panoul Layers, ochiul plasat lângă un strat este deschis atunci când stratul
este vizibil şi este închis atunci când stratul este ascuns.
9 Parametrul Inherit (moştenire) nu are o reprezentare în formă de ochi. Ochiul
este un comutator care oscilează între parametrii default, visible şi hidden,
după care revine la valoarea prestabilită (vizibilitatea moştenită în majoritatea
browser-elor).
652
Figura 13.40
Figura 13.41
Aplicaţie
Mascaţi stratul sigla din aplicaţia precedentă. Utilizaţi inspectorul Properties,

meniul derulant VIS, opţiunea hidden.
Dreamweaver MX Modificaţi vizibilitatea şi ordinea

workspace
de suprapunere a straturilor
Pentru a modifica ordinea de suprapunere şi vizibilitatea straturilor,
653
9 Metoda 2 – Meniul Window, via Others Layers.
Iată cum procedaţi pentru a configura suprapunerea şi vizibilitatea a
două straturi: sigla societăţii LUMINA BLÂNDĂ (un bec de 10 W!) şi
textul „LUMINA BLÂNDĂ” (vezi Dreamweaver 4 workspace).
Metoda 2
1. Aranjaţi cele două straturi într-o poziţie convenabilă (figura

13.42).
Figura 13.42
2. Executaţi clic pe Window Others Layers (figura 13.43).

654
Figura 13.43
3. În panoul Layers, schimbaţi ordinea de suprapunere a

straturilor executând clic pe text (zona Name) şi apoi glisându-l
către începutul sau sfârşitul listei de nume (zona Name), figura
13.44.
Figura 13.44
655
4. Modificaţi vizibilitatea stratului sigla, executând clic pe
pictograma în panoul Layers (figura 13.45).
Figura 13.45
Remarcă. Stratul sigla se afişează ca în figura 13.45.

Figura 13.46
Aplicaţii
Aplicaţi o culoare de fond (background), albastră (blue), stratului pe care

l-aţi creat.
Indicaţie. Folosiţi zona BgColor din panoul Properties.
Aplicaţi o imagine de fond (background) stratului pe care l-aţi creat.
Indicaţie. Folosiţi zona BgImage din panoul Properties.

656
Dreamweaver 4 Controlaţi conţinutul unui strat

workspace
Pentru a adapta dimensiunea unui strat la conţinutul acestuia,

Dreamweaver vă propune mai multe soluţii.
În inspectorul Properties, în meniul derulant Overflow, alegeţi una din
opţiunile:
9 visible – permite mărirea dimensiunii stratului, astfel încât
întreg conţinutul stratului să poată fi afişat;
9 hidden – permite mascarea conţinutului stratului care
debordează.
9 auto – păstrează dimensiunea curentă a stratului, astfel încât
conţinutul stratului să nu se poată afişa dacă este mai
mare decât dimensiunea stratului;
9 scroll – permite afişarea barelor de defilare atunci când
conţinutul stratului este mai mic decât dimensiunea
acestuia;
Iată cum procedaţi pentru a controla conţinutul unui strat folosind
opţiunea visible din meniul Overflow.
1. Selectaţi stratul.
2. În inspectorul de proprietăţi, în meniul derulant Overflow,
alegeţi opţiunea visible (figura 13.47).
Figura 13.47

657
Figura 13.48
Aplicaţie
Controlaţi conţinutul stratului pe care l-aţi creat, folosind opţiunile: scroll,
auto şi hidden din meniul derulant Overflow (inspectorul Properties).
Remarcă. În Netscape conţinutul stratului nu poate fi decât decupat. Valorile de
decupare sunt: T (top); L (left); R (right); B (bottom). Valorile pe care le introduceţi în
inspectorul Properties, via clip definesc distanţa de la marginea stratului, şi nu de la
marginea paginii.
Dreamweaver MX Controlaţi conţinutul unui strat

workspace
Pentru a controla conţinutul unui strat cu Dreamweaver MX, folosiţi una

din opţiunile: scroll, auto, visible, hidden care se afişează în meniul
derulant Overflow din panoul Properties.
Iată cum procedaţi pentru a controla conţinutul unui strat folosind
opţiunile din meniul Overflow.
Opţiunea visible
2. În panoul Properties, în meniul derulant Overflow, alegeţi

opţiunea visible (figura 13.49).
658
Figura 13.49
Figura 13.50

659
Figura 13.51
Opţiunea hidden

opţiunea hidden.
Figura 13.52

660
Figura 13.53
Opţiunea scroll

opţiunea scroll.
Figura 13.54

661
Figura 13.55
Opţiunea auto

opţiunea auto.
Figura 13.56

662
Figura 13.57
Dreamweaver 4 Creaţi straturi imbricate (nested)

workspace
O altă metodă de a plasa straturi pe suprafaţa unei pagini este aceea de

a le imbrica. Un strat imbricat (nested) este un strat plasat în interiorul
unui alt strat, păstrând relaţia „paternală”.
Înţelegeţi desigur (sperăm) că primul strat devine „tatăl” stratului

imbricat („fiu”). Stratul „fiu” utilizează colţul superior din stânga al
stratului părinte ca punct de orientare pentru poziţionare. Dacă straturile
se află în zone diferite ale paginii, relaţia cu stratul părinte se păstrează.
Atunci când deplasaţi primul strat în pagină, stratul imbricat se
deplasează de asemenea, exact ca în situaţia în care stăpânul îşi plimbă
câinele ţinut în lesă (câinele se deplasează independent de stăpânul lui,
dar … cât îl ţine lesa!). Un strat poate conţine alte straturi imbricate.
Dacă ştergeţi stratul „părinte” în mod automat se şterg şi straturile „fiu”.
Pentru a crea straturi imbricate cu Dreamweaver 4 workspace, folosiţi

9 Metoda 1 – în mod normal;
9 Metoda 2 – în mod automat.
Iată cum creăm manual două straturi (tată şi fiu) imbricate.

663
Metoda 1
1. Desenaţi primul strat pe care-l numiţi tata (figura 13.58).
2. Desenaţi cel de-al doilea strat în interiorul primului strat şi

numiţi-l fiu (figura 13.58).
Figura 13.58
3. Afişaţi panoul Layers via Window t Layers (figura 13.59).
Figura 13.59
Remarci:
9 Nu este nevoie ca straturile imbricate să fie plasate în stratul „părinte”.
9 În panoul Layers identificaţi un strat imbricat prin indentarea stratului „fiu” în
stratul „tată” şi prin simbolul plasat înaintea stratului „tată”. Acest simbol
permite reînchiderea indentării.

664
Figura 13.60
Figura 13.61
Metoda 2
Iată cum creăm în mod automat cele două straturi (tată şi fiu) imbricate.
1. Executaţi clic pe Edit t Preferences.
Remarcă. Se afişează caseta de dialog Preferences.
2. În caseta de dialog Preferences, categoria Layers, executaţi

9 în zona Nesting – activaţi opţiunea Nest When Created
Within a Layer;

665
Figura 13.62
3. Desenaţi stratul „tata”.
4. În interiorul acestui strat, desenaţi stratul „fiu”.
Stratul „fiu” este imbricat în stratul „tata”, în mod automat.
Remarcă. Nu uitaţi să dezactivaţi opţiunea Nest When Created Within a Layer.
Dreamweaver MX Creaţi straturi imbricate (nested)

workspace
Pentru a crea straturi imbricate cu Dreamweaver MX workspace, folosiţi

9 Metoda 1 – în mod manual;

9 Metoda 2 – în mod automat, via Edit Preferences.
666
Iată cum procedaţi pentru a crea manual două straturi imbricate: tata şi
fiu.
Metoda 1
1. Desenaţi primul strat (numiţi-l tata!), figura 13.63.
Figura 13.63
2. Desenaţi cel de-al doilea strat în interiorul primului strat

(numiţi-l fiu!), figura 13.64.
Figura 13.64
3. Afişaţi panoul Layers (figura 13.65).

667
Figura 13.65
Remarcă. Identificaţi în panoul Layers stratul nested prin simbolul plasat înaintea
stratului tată.
Figura 13.66
Figura 13.67
668
Metoda 2
1. Executaţi clic pe Edit Preferences.
Remarcă. Se afişează caseta de dialog Preferences.
2. În caseta de dialog Preferences, categoria Layers, executaţi

9 în zona Nesting – activaţi opţiunea Nest When Created
Within a Layer;
Figura 13.68
3. Desenaţi stratul „tata”.
4. În interiorul stratului tata, desenaţi stratul „fiu”.
Remarci:
9 Stratul „fiu” este imbricat în stratul „tata”, în mod automat.
9 Nu uitaţi să dezactivaţi opţiunea Nest When Created Within a Layer.
669
5. Analizaţi codul sursă XHTML generat.
1. Care este rolul straturilor într-o pagină Web?
2. Descrieţi pe scurt o metodă de creare a unui strat cu Dreamweaver

MX.
3. Descrieţi pe scurt procedura de modificare a dimensiunilor şi a poziţiei

unui strat cu Dreamweaver MX.
4. Cum modificaţi vizibilitatea şi ordinea de suprapunere a straturilor cu

Dreamweaver MX?
5. Descrieţi pe scurt o metodă de creare a două straturi imbricate, cu

Dreamweaver MX.
9 www.macromedia.com/fr/exchange/dreamweaver
9 www.macromedia.com/exchange/dreamweaver
Conversaţia 14
Creaţi biblioteci cu Dreamweaver MX

•••••••••••••••••••••••••••••••••••••••••
f Dreamweaver MX – Bibliotecile de obiecte
f Dreamweaver 4 workspace, MX workspace – Creaţi un element de
bibliotecă
f Dreamweaver 4 workspace, MX workspace – Inseraţi un element de
bibliotecă
f Dreamweaver 4 workspace, MX workspace – Modificaţi un element de
bibliotecă. Aplicaţii
f Dreamweaver 4 workspace, MX workspace – Creaţi un model de pagină
f Dreamweaver 4 workspace, MX workspace – Definiţi regiunile editabile ale
unui model. Aplicaţii
f Dreamweaver MX workspace – Utilizaţi regiunile facultative ale unui
model
f Dreamweaver MX workspace – Definiţi regiunile repetabile ale unui
model. Aplicaţii
f Dreamweaver 4 workspace, MX workspace – Exportaţi structuri de date în
format XML
f Dreamweaver MX workspace – Temă
•••••••••••••••••••••••••••••••••••••••••
Dreamweaver MX Bibliotecile de obiecte
Panoul Assets, o „super bibliotecă”

După cum aţi putut constata, atunci când creaţi site-uri Web, diverse
elemente revin cu regularitate: imagini, culori, animaţii, URL-uri etc.
672
Pentru reutilizarea acestor elemente, puteţi utiliza, desigur, Copy/Paste,
dar … această operaţie nu este deloc productivă! Utilizaţi mai degrabă,
bibliotecile de obiecte şi modelele.
Bibliotecile stochează acele elemente din pagina dumneavoastră Web:

imagini, culori, animaţii, URL-uri, texte, tabele, formulare ce urmează a
fi refolosite în site-ul propriu.
Atunci când doriţi ca un număr mai mare de pagini să aibă acelaşi

aspect, fără a mai trebui să construiţi separat conţinutul fiecăreia de mai
multe ori, utilizaţi modelele (şabloanele).
Remarcă. Elementele de bibliotecă identifică porţiuni ale unei pagini, în timp ce un model
reprezintă o pagină întreagă. Bibliotecile şi modelele sunt asemănătoare întrucât
ambele pot actualiza în mod automat paginile la care se leagă.
Dreamweaver propune un panou, panoul Assets, care regrupează toate

elementele de bibliotecă şi modelele paginilor.
Deschideţi biblioteca de obiecte

Iată care este procedura de deschidere a bibliotecii de obiecte
Dreamweaver MX, pe care vă invităm s-o aplicaţi.
1. Executaţi clic pe Window Assets (figura 14.1).

673
Figura 14.1
Remarcă. Se afişează panoul Assets.
2. În panoul Assets executaţi clic pe (Library), figura 14.2.
Figura 14.2
674
Remarcă. Dreamweaver MX afişează elementele bibliotecii (figura 14.3).
Figura 14.3
3. Executaţi clic pe (Templates), figura 14.4.
Figura 14.4
Remarcă. Dreamweaver MX afişează modelele paginilor (figura 14.5).
Figura 14.5
675
4. Executaţi clic pe (Images), figura 14.6.
Figura 14.6
Remarcă. Dreamweaver MX afişează imaginile utilizate în site (figura 14.7).
Figura 14.7
Remarcă. Celelalte butoane corespund altor tipuri de elemente utilizate în site: culori
( ); URL-uri ( ); Flash ( ); Shockwave ( );filme ( ); scripturi ( ).
Dreamweaver 4 Creaţi un element de bibliotecă

workspace
Este bine ca toate elementele care se repetă de mai multe ori într-un
site Web – copyright-ul, adresele, logo-urile, clauzele de garanţie etc. să
676
fie integrate într-o bibliotecă. Creaţi un element de bibliotecă, salvaţi-l şi
apoi aplicaţi-l oricărei pagini din site-ul propriu.
Pentru a crea un element de bibliotecă cu Dreamweaver 4 workspace,

9 Metoda 1 – Meniul Modify via Library Add Object to

Library;
9 Metoda 2 – Meniul Window, via Assets.
Iată cum procedăm pentru a crea în pagina Web lumina.htm elementul

de bibliotecă „©2003 LUMINA BLÂNDĂ”.
Metoda 1
1. În pagina Web lumina.htm selectaţi textul „©2003 LUMINA

BLÂNDĂ”, pe care urmează să-l definiţi ca element de bibliotecă
(figura 14.8).
Figura 14.8
Remarcă. Înainte de a crea un element de bibliotecă trebuie să definiţi site-ul Web.

Dreamweaver creează folder-ul Library în care stochează elementele de bibliotecă.
2. Executaţi clic pe Modify Library Add Object to Library

(figura 14.9).
677
Figura 14.9
Remarcă. În panoul Assets, subpanoul Library, Dreamweaver creează un nou

element de bibliotecă fără nume (untitled), figura 14.10.
Figura 14.10
678
3. Atribuiţi elementului de bibliotecă, un nume semnificativ:
copyright (figura 14.11).
Figura 14.11
Remarcă. Noul element de bibliotecă, copyright este afişat în galben, numai în pagina
Dreamweaver!
5. În pagina dumneavoastră, executaţi clic pe elementul de

bibliotecă şi vizualizaţi informaţiile în inspectorul de proprietăţi
(figura 14.12).
Figura 14.12
Remarcă. Src precizează calea de acces şi numele elementului de bibliotecă utilizat.

679
Figura 14.13
Figura 14.14
Metoda 2

680
2.1 Executaţi clic pe Window Assets;
2.2 Executaţi clic pe butonul (Library);
2.3 În meniul local al panoului Assets, alegeţi opţiunea New Library

Item.
Dreamweaver MX Creaţi un element de bibliotecă

workspace
Crearea unui element de bibliotecă se realizează într-o pagină standard.
Pentru a crea un element de bibliotecă cu Dreamweaver MX workspace,

9 Metoda 1 – Meniul Modify, via Library Add Object to Library;
9 Metoda 2 – Meniul Window, via Assets.
Iată cum procedăm pentru a crea elementul de bibliotecă „©2003

LUMINA BLÂNDĂ”.
Metoda 2
1. Selectaţi în pagina Web (lumina.html) obiectul „©2003 LUMINA

BLÂNDĂ”, pe care urmează să-l definiţi ca element de bibliotecă
(figura 14.15).
Figura 14.15
681
2. Executaţi clic pe Window Assets.
3. Executaţi clic pe butonul (Library), figura 14.16.
Remarcă. În fereastra de jos a subpanoului Library se afişează elementele bibliotecii.
Figura 14.16
4. Creaţi elementul de bibliotecă (fără nume) folosind una din

procedurile descrise mai jos:
9 în meniul local al panoului Assets, subpanoul Library ( ),

alegeţi opţiunea New Library Item;
9 executaţi clic pe butonul (New Library Item);
9 glisaţi obiectul selectat în fereastra bibliotecii.
5. Atribuiţi un nume semnificativ, copyright, elementului de

bibliotecă.
6. Activaţi tasta Enter.
7. Închideţi subpanoul Library.
8. Executaţi clic în pagina dumneavoastră Web.

682
9. Vizualizaţi informaţiile în panoul Properties (figura 14.17).
Figura 14.17
Remarcă. Src indică numele elementului de bibliotecă şi calea de acces.
Dreamweaver 4 Inseraţi un element de bibliotecă

workspace
În acest moment sunteţi în măsură să inseraţi elementul de bibliotecă pe

care l-aţi creat în pagina dumneavoastră Web.
Iată cum procedaţi pentru a insera elementul de bibliotecă copyright.lbi

în pagina Web servicii.htm.
1. Executaţi clic în zona în care doriţi să inseraţi elementul de

bibliotecă (figura 14.18).
Figura 14.18
2. În panoul Assets, butonul (Library), selectaţi numele

elementului de bibliotecă, copyright, pe care doriţi să-l inseraţi.
683
3. Inseraţi elementul de bibliotecă (copyright) folosind una din
Metoda 1 – în subpanoul Library, executaţi clic pe butonul Insert.
Metoda 2 – în meniul local al panoului Assets, subpanoul Library,

alegeţi opţiunea Insert;
Metoda 3 – glisaţi icon-ul obiectului selectat în document.
Figura 14.19
Figura 14.20
684
Dreamweaver MX Inseraţi un element de bibliotecă

workspace
Iată cum procedaţi pentru a insera elementul de bibliotecă copyright.lbi

(elementele de bibliotecă se creează cu extensia .lbi) în pagina
dumneavoastră Web (servicii.html).
1. Executaţi clic în zona în care doriţi să inseraţi elementul de

bibliotecă (figura 14.21).
Figura 14.21
2. În panoul Assets, butonul (Library) selectaţi numele

elementului de bibliotecă, copyright, pe care doriţi să-l inseraţi
(figura 14.22).
685
Figura 14.22
Remarcă. Elementul de bibliotecă copyright se afişează în partea superioară a

subpanoului Library.
3. Inseraţi elementul de bibliotecă (copyright) folosind una din

metodele prezentate mai jos (figura 14.23):
9 executaţi clic pe butonul (Insert);
9 în meniul local al panoului Assets, subpanoul Library, alegeţi

opţiunea Insert;
9 glisaţi icon-ul obiectului selectat în document.

686
Figura 14.23
Remarcă. Dreamweaver afişează elementul de bibliotecă în fereastra Document (figura

14.24).
Figura 14.24
687
Figura 14.25
Figura 14.26
Aplicaţie
Suprimaţi elementul de bibliotecă (copyright) inserat.
Iată care este procedura pe care vă invităm s-o aplicaţi:
1. Selectaţi în pagina Web elementul pe care trebuie să-l suprimaţi.
2. Acţionaţi tasta Delete.
Remarcă. Elementul de bibliotecă este eliminat, dar … el rămâne (totuşi) în bibliotecă.

688
Dreamweaver 4 Modificaţi un element de

workspace bibliotecă. Aplicaţii
Interesul de a utiliza elemente de bibliotecă constă în dinamismul
acestora în cazul modificărilor; dacă modificaţi un element de bibliotecă
atunci toate apariţiile acestuia în site sunt actualizate în mod automat.
Iată cum procedaţi pentru a modifica elementul de bibliotecă

(copyright): „© 2003 LUMINA BLÂNDĂ” în „© 2004 LUMINA BLÂNDĂ”.
1. Activaţi tasta F8 pentru a afişa catalogul site-ului.
2. Deschideţi, dacă este nevoie, folder-ul Library şi apoi executaţi

dublu clic pe fişierul copyright.lbi.
Remarcă. Dreamweaver afişează fereastra elementului de bibliotecă, copyright.lbi (figura

14.27).
Figura 14.27
Remarcă. Există mai multe metode pentru afişarea ferestrei <<Library Item>>
(copyright.lbi) (vezi Dreamweaver MX workspace).
3. În fereastra <<Library Item>> [copyright.lbi], efectuaţi

modificările necesare (figura 14.28).
Figura 14.28
689
4. Salvaţi documentul, via File Save.
5. În caseta de dialog Update Library Items, care se afişează,

Dreamweaver vă întreabă: „Update library items in these
files?”. Executaţi clic pe butonul Update.
Remarcă. Dreamweaver afişează rezultatul actualizării (figura 14.29).
Figura 14.29
Aplicaţii
Detaşaţi elementul de bibliotecă copyright de original.
Indicaţie. Vedeţi paragraful Aplicaţii – Dreamweaver MX workspace.
Redenumiţi elementul de bibliotecă copyright în dreptautor.
Indicaţie. Vedeţi paragraful: Aplicaţi Dreamweaver MX workspace.
Ştergeţi elementul de bibliotecă dreptautor.
Indicaţie. Vedeţi paragraful: Aplicaţii – Dreamweaver MX workspace.

690
Dreamweaver MX Modificaţi un element de

workspace bibliotecă. Aplicaţii
Iată cum procedaţi pentru a modifica elementul de bibliotecă
(copyright): „© 2003 LUMINA BLÂNDĂ” în „© 2004 LUMINA BLÂNDĂ”.
1. Activaţi tasta F8 pentru a afişa catalogul site-ului.
2. Deschideţi, dacă este nevoie, folder-ul Library şi apoi executaţi

dublu clic pe fişierul copyright.lbi (figura 14.30).
Figura 14.30
3. Executaţi dublu clic pe fişierul elementului de bibliotecă

copyright.lbi.
sau,
3. Selectaţi elementul de bibliotecă copyright.lbi în panoul Assets,
categoria (Library), apoi executaţi clic pe butonul (Edit).
sau,
3. Deschideţi meniul local al panoului Assets , apoi selectaţi
opţiunea Edit.
691
sau,
3. Selectaţi elementul de bibliotecă (copyright.lbi) folosit în
document, iar apoi în panoul Properties, executaţi clic pe
butonul Open (figura 14.31).
Figura 14.31
Remarcă. Dreamweaver deschide fereastra elementului de bibliotecă. Atenţie la bara de

titlu!
4. În fereastra <<Library Item>> [copyright.lbi], efectuaţi

modificările necesare (figura 14.32).
Figura 14.32
5. Executaţi clic pe File Save.
Remarcă. Se afişează caseta de dialog Update Library Items. Dreamweaver vă întreabă

dacă doriţi să actualizaţi fişierele care utilizează acest element de bibliotecă (figura
14.33).
6. În caseta de dialog Update Library Items, executaţi clic pe

butonul Update (figura 14.33).
Figura 14.33
692
Remarcă. Dreamweaver afişează rezultatul actualizării în caseta de dialog ilustrată în
figura 14.34.
Figura 14.34
Aplicaţii
Detaşaţi un element de bibliotecă copyright, de original.
Iată care este procedura pe care vă invităm s-o aplicaţi pentru a suprima
legătura cu elementul de bibliotecă (copyright).
1. Selectaţi elementul de bibliotecă, copyright, care urmează a fi detaşat

de original.
2. În panoul Properties, executaţi clic pe butonul Detach from original

(figura 14.35).
Figura 14.35
Remarcă. Se afişează caseta de dialog Macromedia Dreamweaver.

3. În caseta de dialog Macromedia Dreamweaver, executaţi clic pe
butonul OK.
Remarcă. Textul © 2003 LUMINA BLÂNDĂ nu mai constituie un element de bibliotecă,

nu se mai afişează în galben şi este editabil.
693
Actualizaţi paginile Web folosind elemente de bibliotecă.
Puteţi modifica elementul de bibliotecă (copyright, în exemplul nostru) fără a

forţa actualizarea documentelor care conţin acest element, dacă executaţi clic
pe butonul Don’t Update când salvaţi modificările. În acest caz, va trebui să
actualizaţi singuri paginile care utilizează elementul de bibliotecă.
1. Deschideţi o pagină care utilizează elementul de bibliotecă.
2. Executaţi clic pe Modify Library Update Curent Page/ Update

Pages.
Remarcă. Dreamweaver afişează caseta de dialog Update Pages.

3. În caseta de dialog Update Pages, în meniul derulant Look in, selectaţi
(figura 14.36):
9 Entire Site – pentru a actualiza toate paginile site-ului

dumneavoastră şi toate elementele de
bibliotecă.
9 Files That Use … – pentru a actualiza toate paginile site-ului
dumneavoastră, care utilizează un element de
bibliotecă (se găseşte în meniul derulant din
dreapta).
Figura 14.36
4. În caseta de dialog Update Pages, lăsaţi activate opţiunile Library

Items şi Show Log.
5. În caseta de dialog Update Pages, executaţi clic pe butonul Start iar

apoi pe butonul Close.
694
Redenumiţi elementul de bibliotecă copyright în dreptautor.
Iată care este procedura pe care vă invităm s-o aplicaţi în cele ce urmează.
1. În panoul Assets, categoria Library, executaţi clic pe elementul pe

care doriţi să-l redenumiţi (copyright).
2. Deschideţi meniul local ( ), apoi executaţi clic pe Rename.
sau,
2. Executaţi clic pe numele elementului (este selectată zona numelui).
3. Introduceţi noul nume, dreptautor, iar apoi acţionaţi tasta Enter.
Remarcă. Dreamweaver vă întreabă: „Update links in the following files?”.

4. În caseta de dialog Update Files, executaţi clic pe Update sau pe Don’t
Update (figura 14.37).
Figura 14.37
Ştergeţi elementul de bibliotecă dreptautor.
1. Selectaţi elementul de bibliotecă dreptautor, în categoria Library din

panoul Assets.
2. Deschideţi meniul local , apoi executaţi clic pe Delete.
sau,
2. Executaţi clic pe butonul (Delete).
sau,
695
2. Executaţi un clic cu butonul dreapta al mouse-ului pe elementul de
bibliotecă dreptautor, apoi alegeţi Delete.
3. În caseta de dialog Macromedia Dreamweaver, executaţi clic pe

butonul Yes pentru a confirma ştergerea elementului de bibliotecă
(figura 14.38).
Figura 14.38
Recreaţi un element de bibliotecă, dacă … din greşeală l-aţi şters.
1. Selectaţi în documentul Dreamweaver elementul de bibliotecă

suprimat.
2. În panoul Properties, executaţi clic pe butonul Recreate (figura

14.39).
Figura 14.39
Remarcă. În mod automat, elementul reprimeşte numele care îi fusese atribuit şi îşi reia
locul în bibliotecă.
Dreamweaver 4
workspace
Creaţi un model de pagină
Un model de pagină diferă de un element de bibliotecă prin aceea că

modelul reprezintă o întreagă pagină Web şi nu doar o porţiune a
acesteia.
696
Puteţi defini o formatare aplicată unei pagini întregi ca model pentru a
câştiga timp în momentul creării paginilor din site-ul propriu. Puteţi
construi un model de la zero sau salva o pagină existentă ca model.
Modelul poate fi folosit şi de alte persoane care lucrează în aceeaşi

echipă cu dumneavoastră; de asemenea, dumneavoastră puteţi folosi
modelele create de alţii.
Pentru a crea un model de pagină cu Dreamweaver 4 workspace, folosiţi

Metoda 1 – Meniul File, via Save As Template;
Metoda 2 – Panoul Insert.
Iată cum procedăm pentru a crea modelul din figura 14.40 care conţine
elementul de bibliotecă „© 2003 LUMINA BLÂNDĂ”.
Figura 14.40
Metoda 1
1. Creaţi pagina Web care vă va servi ca model (figura 14.40), sau

deschideţi o pagină deja creată care vă va servi ca model.
2. Executaţi clic pe File Save As Template... (figura 14.41).

697
Figura 14.41
Remarcă. Se deschide caseta de dialog Save As Template.
3. În caseta de dialog Save As Template (figura 14.42), executaţi

9 în zona Site – selectaţi în meniul derulant, site-ul în care

doriţi să salvaţi modelul de pagină.
9 în zona Save As – introduceţi numele modelului, identitate;
9 – executaţi clic pe butonul Save.

698
Figura 14.42
4. Executaţi clic pe Window Assets.
5. În panoul Assets, executaţi clic pe butonul (Templates).
Figura 14.43
Metoda 2
Se modifică pasul 2 (Metoda 1) după cum urmează.

699
2. În panoul Insert, subpanoul Templates, executaţi clic pe icon-ul
(Make Template), figura 14.44.
Figura 14.44
Dreamweaver MX Creaţi un model de pagină

workspace
Dacă utilizaţi tot timpul acelaşi tip de pagină în site-ul dumneavoastră,

începeţi prin a crea un model care va servi ca bază pentru noile pagini
Web.
Pentru a crea un model de pagină cu Dreamweaver MX workspace,

9 Metoda 1 – Meniul File, via Save As Template;
9 Metoda 2 – Grupul de panouri Insert, via subpanoul Templates
icon-ul (Make Template).
Iată cum procedăm pentru a crea modelul de pagină din figura 14.45,
care conţine elementul de bibliotecă „© 2003 LUMINA BLÂNDĂ”.
700
Figura 14.45
Metoda 2
1. Creaţi pagina Web care vă va servi ca model (figura 14.46), sau

deschideţi o pagină deja creată care vă va servi ca model.
2. În grupul de panouri Insert, subpanoul Templates, executaţi clic
pe icon-ul (Make Template), figura 14.46.
Figura 14.46
701
Remarcă. Se deschide caseta de dialog Save As Template.
3. În caseta de dialog Save As Template, executaţi acţiunile

ilustrate în figura 14.47.
Figura 14.47
4. Afişaţi panoul Assets.
5. În panoul Assets, executaţi clic pe butonul (Templates),

figura 14.48.
Figura 14.48
Remarci:
9 Analizaţi cele două ferestre ale subpanoului Templates.
9 Reţineţi extensia .dwt (identitate.dwt) pentru Dreamweaver template.

702
Figura 14.49
Aplicaţie
Afişaţi folder-ul modelelor.
Indicaţie. Acţionaţi tasta F8. Deschideţi, dacă este cazul folder-ul Templates,
creat de Dreamweaver (figura 14.50).
Figura 14.50
703
Dreamweaver 4 Definiţi regiunile editabile ale unui

workspace model
În mod prestabilit, elementele unei pagini care se bazează pe un model
(de pagină) nu sunt editabile. Dumneavoastră vă revine sarcina de a
defini regiunile (zonele) editabile, care variază de la o pagină la alta.
Pentru a crea regiunile editabile ale unui model, cu Dreamweaver 4

9 Metoda 1 – Meniul Insert, via Template Objects Editable

Region;
Iată cum definim în modelul identitate.dwt, trei zone editabile: Nume,

Prenume, Funcţia.
1. În panoul Assets, executaţi clic pe categoria (Templates).
2. Executaţi dublu clic pe identitate (numele modelului), pentru a-l

deschide.
3. Selectaţi prima zonă editabilă: Nume.
4. Executaţi clic pe Insert Template Objects Editable Region

(figura 14.51).
704
Figura 14.51
Remarcă. Se afişează caseta New Editable Region.
5. În caseta de dialog New Editable Region, în zona Name

introduceţi numele primei zone editabile: Nume angajat, iar
6. Repetaţi paşii 3, 4, 5 pentru a defini celelalte regiuni editabile:

Prenume angajat, Funcţie angajat (figura 14.52).
Figura 14.52
7. Salvaţi modelul.
705
Figura 14.53
Figura 14.54
706
Metoda 2
4. În panoul Insert, categoria Templates, executaţi clic pe icon-ul
(Editable Region), figura 14.55.
Figura 14.55
Dreamweaver MX Definiţi regiunile editabile ale unui

workspace model. Aplicaţii
Pentru a crea regiunile editabile ale unui model, cu Dreamweaver MX
9 Metoda 1 – Meniul Insert, via Template Objects Editable

Region;
9 Metoda 2 – Grupul de panouri Insert, subpanoul Templates
icon-ul (Editable Region).
Iată cum definim în modelul identitate1.dwt, trei zone editabile: Nume,

Prenume, Funcţia.
Metoda 2
1. În panoul Assets, executaţi clic pe categoria (Templates).

707
2. În panoul Assets, categoria Templates, executaţi dublu clic pe
identitate1 (numele modelului), pentru a-l deschide.
3. Selectaţi prima zonă editabilă: Nume (figura 14.56).
Figura 14.56
pe icon-ul (Editable Region) (figura 14.57).
Figura 14.57
Remarcă. Se afişează caseta New Editable Region.

708
5. În caseta de dialog New Editable Region, executaţi următoarele
9 în zona Name – introduceţi numele primei zone editabile:

Nume angajat;
Figura 14.58
Remarcă. Dreamweaver MX workspace adaugă modelului o regiune editabilă. O casetă

bleu indică numele său – Nume angajat (figura 14.59).
Figura 14.59
6. Repetaţi paşii 3, 4, 5 pentru a defini celelalte regiuni

editabile (figura 14.60).
709
Figura 14.60
7. Salvaţi modelul (CTRL+S sau, File Save).
Figura 14.61

710
Figura 14.62
Aplicaţii
Suprimaţi o zonă editabilă (Nume).
Indicaţie. Utilizaţi meniul Modify, via Templates.
Creaţi un document pornind de la un model (identitate1.dwt).
2. În subpanoul Templates, executaţi următoarele acţiuni (figura 14.63):
9 în zona Templates For: – selectaţi site-ul care conţine modelul

identitate1.dwt;
9 – activaţi opţiunea Update Page when
Template Changes;
9 – executaţi clic pe butonul Create.

711
Figura 14.63
Introduceţi informaţiile corespunzătoare în regiunile editabile ale

documentului.
Pentru a introduce informaţiile în regiunile editabile ale unui document, folosiţi

9 Metoda 1 – Selectaţi sau executaţi clic în zona editabilă, apoi

introduceţi informaţiile respective (figura 14.64);
9 Metoda 2 – Executaţi clic pe numele regiunii editabile în meniul Modify

Templates, apoi introduceţi informaţiile respective.
Remarci:
9 Dacă încercaţi să introduceţi text într-o zonă non editabilă, veţi avea parte de
un semnal sonor!
9 La finele acţiunii, salvaţi documentul (File Save).
712
Figura 14.64
Aplicaţi un model (identitate1.dwt) unei pagini Web.
1. În subpanoul Assets, executaţi clic pe categoria (Templates),

figura 14.65.
2. În zona Name, în lista de modele afişată, selectaţi identitate1, apoi

executaţi clic pe butonul Apply (figura 14.65).
Figura 14.65
713
sau,
2. Deschideţi meniul local , apoi alegeţi Apply;
sau,
2. Deplasaţi icon-ul modelului (identitate1) în pagina Web.
Remarcă. Dacă documentul nu este vid (gol!), Dreamweaver vă întreabă unde să

plaseze elementele prezentate (figura 14.66).
Figura 14.66
3. În lista regiunilor editabile, selectaţi-le pe cele corespunzătoare, apoi

executaţi clic pe butonul OK (figura 14.67).
Figura 14.67
714
Modificaţi modelul identitate1 după cum urmează: adăugaţi a patra zonă
editabilă, E-MAIL.
1. În subpanoul Templates, categoria (Templates), selectaţi modelul
identitate1, apoi executaţi clic pe butonul (Edit).
sau,
1. Deschideţi meniul local ( ), apoi executaţi clic pe Edit;
sau,
1. Executaţi dublu clic pe icon-ul modelului identitate1;
sau,
1. Executaţi clic pe Window Site, deschideţi folder-ul Templates şi

executaţi dublu clic pe identitate1.dwt.
2. Adăugaţi zona editabilă E-Mail (figura 14.68).
Figura 14.68
3. Salvaţi fişierul (File Save).
Remarcă. Dreamweaver vă întreabă dacă doriţi să actualizaţi toate documentele care au

la bază acest model (figura 14.69).
715
Figura 14.69
4. În caseta de dialog Update Template File executaţi clic pe butonul

Update.
Remarcă. Dreamweaver afişează jurnalul rezultatelor (figura 14.70).
Figura 14.70
Dreamweaver MX Utilizaţi regiunile facultative ale

workspace unui model
Într-un model, o regiune facultativă este regiunea pe care
dumneavoastră o puteţi programa astfel încât ea să apară sau nu într-un
716
document bazat pe acest model. Aceste criterii pot depinde de valoarea
(true sau false) unei variabile booleene sau de valoarea variabilei
language (f,a etc.).
Pentru a crea regiunile facultative într-un model, folosiţi una din

9 Metoda 1 – Meniul Insert, via Template Objects Optional

Region;
Creaţi regiuni facultative

Iată cum procedaţi pentru a insera imaginea sigla.jpg, într-o regiune
facultativă imagine, a modelului identitate1.dwt.
Metoda 2
pe icon-ul (Optional Region), figura 14.71.
Figura 14.71
Remarcă. Dreamweaver afişează caseta de dialog New Optional Region.
2. În caseta de dialog New Optional Region, categoria Basic,

executaţi următoarele acţiuni (figura 14.72):
9 în zona Name – introduceţi numele regiunii facultative,

imagine.

717
Figura 14.72
Remarcă. Dacă alegeţi opţiuni Show by Default, imaginea acestei regiuni facultative va fi
afişată implicit în documentul creat având la bază acest model. În caz contrar,
utilizatorul modelului va modifica parametrul (true, pentru a afişa această regiune
facultativă).
3. Inseraţi o imagine, sigla.jpg în această regiune editabilă (figura

14.73).
Figura 14.73
718
4. Pentru a modifica parametrii regiunii facultative, selectaţi
imaginea şi utilizaţi butonul Edit din panoul Properties (figura
14.74).
Figura 14.74
Figura 14.75
Figura 14.76
719
Utilizaţi un model cu regiuni facultative
1. Executaţi clic pe File New Templates Templates For:

Site Web modelul identitate1.
2. Executaţi clic pe butonul Create.
Remarcă. Dumneavoastră nu vedeţi imaginea în cazul în care nu aţi activat opţiunea

Show by Default. Valoarea parametrului este deci false.
3. Afişaţi codul sursă XHTML generat (figura 14.77).
Figura 14.77
Remarcă. În codul sursă XHTML, value=”false”.
4. Executaţi clic pe Modify Template Properties….
Remarcă. Se afişează caseta de dialog Template Properties.
5. În caseta de dialog Template Properties, executaţi următoarele

9 selectaţi linia care corespunde numelui regiunii facultative

imagine (valoarea parametrului devine true);
9 activaţi opţiunea Show imagine;

720
Figura 14.78
6. Afişaţi codul sursă XHTML generat (14.79).
Figura 14.79
Figura 14.80
721
Creaţi un model cu regiuni facultative multiple
Vom completa în cele ce urmează modelul Agenda.dwt (vezi paragraful:
Dreamweaver MX workspace – Exportaţi structuri de date în format
XML).
Iată cum procedaţi pentru a afişa numele documentului: Address Book

sau Carnet adressos, în funcţie de parametrul limba: A (engleză) sau E
(spaniolă).
1. Afişaţi codul sursă al modelului.
2. În zona <head> a documentului, introduceţi codul parametrului

<!—TemplateParam name=”limba” type=”text” value=”F”-->.
3. În locul dorit în document, introduceţi codul listat mai jos

(figura 14.81).
Figura 14.81
722
Remarcă. Pentru fiecare limbă (cond=’limba==”F”’) se indică textul care dorim să fie
afişat, între TemplateBeginIfClause şi TemplateEndIfClause.
4. Afişaţi pagina în mod Show Design View (figura 14.82).
Figura 14.82
5. Creaţi un nou document având la bază acest model.
Figura 14.83
6. Executaţi clic pe Modify Template Properties….
7. În caseta de dialog Template Properties, executaţi următoarele

9 pentru parametrul imagine – alegeţi true sau false;

723
9 pentru parametrul limba, în câmpul language – introduceţi A
(una din valorile A/F);
Figura 14.84
Figura 14.85
724
Dreamweaver MX Definiţi regiunile repetabile ale

workspace unui model. Aplicaţii
Dacă o regiune trebuie să fie repetată de mai multe ori în cadrul unei
pagini care are la bază un model, va trebui să precizaţi acest lucru în
zona de creare a modelului.
Pentru a crea regiunile repetabile ale unui model, folosiţi una din
9 Metoda 1 – Meniul Insert, via Template Objects Repeating

Region;
9 Metoda 2 – Grupul de panouri Insert, subpanoul Templates.
Creaţi o regiune repetabilă, non editabilă

Iată cum procedaţi pentru a crea în cadrul unui model, o regiune care se
repetă, non editabilă, E-Mail.
Metoda 2
1. Deschideţi modelul identitate1.dwt.
2. Selectaţi zona repetabilă, E-Mail (figura 14.86).
Figura 14.86
725
pe icon-ul (Repeating Region), figura 14.87.
Figura 14.87
Remarcă. Se deschide caseta de dialog New Repeating Region.
4. În caseta de dialog New Repeating Region, executaţi

9 în zona Name – introduceţi numele regiunii repetabile, E-Mail

angajat;
Figura 14.88
Remarcă. Dreamweaver adaugă modelului o regiune care se repetă, Repeat: E-Mail

angajat (figura 14.89).
Figura 14.89
726
Creaţi o regiune repetabilă, editabilă
Iată cum procedaţi pentru a crea în cadrul unui model o regiune care se
repetă, editabilă Funcţia angajat.
Metoda 1
1. Executaţi clic pe subpanoul bleu, Funcţie angajat (figura 14.90).
Figura 14.90
2. Executaţi clic pe Insert Template Objects Repeating

Region (figura 14.91).
Figura 14.91
727
Remarcă. Se deschide caseta de dialog New Repeating Region.
3. În caseta de dialog New Repeating Region, executaţi

9 în zona Name – introduceţi numele regiunii repetabile,

Funcţia angajat;
Figura 14.92
Remarcă. Dreamweaver adaugă modelului o regiune care se repetă, Repeat: Funcţia

angajat care înglobează regiunea editabilă Funcţia (figura 14.93).
Figura 14.93
Utilizaţi modelul
Iată cum procedaţi pentru a utiliza modelul pe care l-aţi creat în aplicaţia
precedentă.
1. Creaţi un nou document bazat pe acest model.

728
2. Introduceţi primele date (figura 14.94).
Figura 14.94
3. Utilizaţi butoanele şi pentru a adăuga sau suprima

regiunile: (Butoanele şi permit modificarea
secvenţei de introducere a datelor), figura 14.95.
Figura 14.95

729
Figura 14.96
Figura 14.97
730
Aplicaţii
Creaţi un tabel (figura 14.98) care se repetă.
CURSURI DE INFORMATICĂ
Denumire curs Durata (în ore) Costuri (în $)

Utilizare PC-uri 50 60
Tehnologii Internet 60 90
Figura 14.98 Autocad 50 70
1. Creaţi un nou model.
2. Executaţi clic în locul în care doriţi să figureze tabelul.
3. În grupul de panouri Insert, subpanoul Templates, executaţi clic pe
icon-ul (Repeating Table), figura 14.99.
Figura 14.99
Remarcă. Dreamweaver afişează caseta de dialog Insert Repeating Table.

sau,
3. Executaţi clic pe meniul Insert Template Objects Repeating

Table.
4. În caseta de dialog Insert Repeating Table, executaţi următoarele

acţiuni (14.100):
9 în zonele Rows, Columns – introduceţi numărul de linii (4) şi

numărul de coloane (3);
9 în zona width – introduceţi valoarea 75%;
9 în zona Repeat rows of the table, în câmpul Starting Row şi în
câmpul Ending Row – introduceţi valorile 2 respectiv 3;
9 în zona Region Name – introduceţi date;
731
Figura 14.100
Remarci:
9 Primele opţiuni sunt identice cu cele ale unui tabel clasic.
9 Tabelul este inserat în model.
Utilizaţi modelul.
Iată cum procedaţi pentru a utiliza modelul pe care l-aţi creat în aplicaţia
precedentă.
1. Creaţi un document bazat pe acest model.
2. Utilizaţi butoanele şi pentru a adăuga sau suprima regiunile şi

butoanele şi pentru a le sorta (vezi utilizarea aceloraşi butoane
pentru regiunile care se repetă în cadrul unui model), figura 14.101.
Figura 14.101
732
Creaţi un model imbricat – imbricaţi o regiune editabilă (Autor) într-o regiune
editabilă existentă (Titlu).
1. Creaţi un document care are la bază un model (carte.dwt).
2. Selectaţi textul regiunii editabile (Titlu) şi inseraţi o regiune editabilă,

numită Autor (figura 14.102).
Figura 14.102
Remarci:
9 Regiunea editabilă (Titlu) a modelului de bază este colorată în bleu.
9 Puteţi crea mai multe modele imbricate pornind de la un model de bază.
Dreamweaver 4 Exportaţi structuri de date în

workspace format XML
Întrucât în cadrul unui model, fiecare regiune editabilă este unică şi
perfect identificată, puteţi utiliza numele acestor regiuni pentru a genera
tag-uri XML (eXtensible Markup Language; vezi lucrarea L. Dumitraşcu,
Limbajul XML, Editura Universităţii din Ploieşti, 2003) în vederea
exportului (importului) de date structurate.
733
Iată cum procedăm pentru a crea cu Dreamweaver 4 workspace un
model Agenda.dwt pe care apoi îl exportăm în format XML.
2. Inseraţi un tabel cu 5 linii şi 4 coloane, în care prima linie

conţine numele câmpurilor: Titlu ştiinţific, Nume, Prenume,
E-mail.
3. Salvaţi tabelul ca model, Agenda.dwt.
4. Creaţi regiuni editabile, cu următoarele denumiri:
9 {t1}, … {t4} – pentru titlul ştiinţific;

9 {n1}, …, {n4} – pentru nume;
9 {p1}, …, {p4} – pentru prenume;
9 {em1}, …, {em4} – pentru e-mail.
6. Creaţi un nou document având la bază modelul creat, apoi

introduceţi datele (figura 14.103).
Figura 14.103
7. Salvaţi documentul sub numele agendapers.
8. Executaţi clic pe File Export Template Data as XML.

734
9. În caseta de dialog Export Template Data as XML executaţi
9 în zona Notation – alegeţi opţiunea Use Editable Region

Names as XML tags (vezi modul de afişare
al tag-urilor XML, în zona Sample).
Figura 14.104
10. Numiţi documentul XML agendapers, apoi deschideţi acest

document agendapers.xml.
11. Afişaţi codul sursă XML generat (figura 14.105).
Figura 14.105
735
Dreamweaver MX Exportaţi structuri de date în

workspace format XML
XML (eXtensible Markup Language) este cel mai nou limbaj dezvoltat de
consorţiul W3C.
În viitor, XML-ul va reprezenta cu siguranţă instrumentul standard

pentru descrierea, manipularea şi transmisia datelor (vezi lucrarea L.
Dumitraşcu, Limbajul XML, Editura Universităţii din Ploieşti, 2003).
Iată cum procedăm pentru a crea un model Agenda.dwt pe care apoi îl

exportăm în format XML.
2. Inseraţi un tabel cu 5 linii şi 4 coloane; prima linie conţine

numele câmpurilor: Titlu ştiinţific, Nume, Prenume, E-mail
(figura 14.106).
Figura 14.106
3. Salvaţi tabelul ca model, sub numele agenda.dwt.

736
4. Creaţi regiuni editabile, cu următoarele denumiri (figura
14.107):
9 t – pentru titlul ştiinţific;

9 n – pentru nume;
9 p – pentru prenume;
9 em – pentru e-mail.
Figura 14.107
6. Creaţi un nou document având la bază modelul creat, iar apoi

introduceţi datele (figura 14.108).
Figura 14.108
737
7. Salvaţi documentul sub numele agendapers.
8. Executaţi clic pe File Export Template Data as XML (figura

14.109).
Figura 14.109
Remarcă. Se afişează caseta de dialog Export Template Data as XML.
9. În caseta de dialog Export Template Data as XML, executaţi

9 în zona Notation – activaţi butonul radio Use Standard
Dreamweaver XML tags (vezi modul de

afişare al tag-urilor XML, în zona Sample);

738
Figura 14.110
Remarci:
9 Prima opţiune afişează un tag sub forma: <item name=”t1”> - </item>.
9 A doua opţiune afişează un tag sub forma: <t1> - </t1>.
10. În caseta de dialog Export Template Data as XML, numiţi
documentul XML: agendapers iar apoi deschideţi acest
document agendapers.xml.
11. Afişaţi codul sursă XML generat (figura 14.111).
Figura 14.111
739
Aplicaţie
Importaţi un document XML într-un model cu condiţia ca ele să aibă aceeaşi

structură.
Remarcă. Trebuie să existe o perfectă concordanţă între numele tag-urilor XML şi

numărul de înregistrări, ceea ce limitează puţin importurile.
740
1. Precizaţi care este deosebirea dintre elementele de bibliotecă şi
modele.
2. Care sunt butoanele din panoul Assets?
3. Descrieţi pe scurt o metodă de creare a unui element de bibliotecă cu

4. Descrieţi pe scurt o metodă de creare a unui model de pagină, cu

Dreamweaver MX.
5. Cum definiţi regiunile editabile ale unui model?
6. Descrieţi metodele de creare a regiunilor facultative într-un model, cu

7. Cum procedaţi pentru a exporta structuri de date în format XML?
9 www.microsoft.com/FRANCE/ssafe
9 www.ics.uci.edu/pub/ietf
Conversaţia 15
Creaţi comportamente cu
Dreamweaver MX
•••••••••••••••••••••••••••••••••••••••••
f Dreamweaver MX workspace - Comportamente Dreamweaver
f Dreamweaver 4 workspace, MX workspace – Creaţi comportamentul Open
Browser Window
f Dreamweaver 4 workspace, MX workspace – Creaţi comportamentul
Swap Image
f Dreamweaver 4 workspace, MX workspace – Creaţi comportamentul Set
Text of Status Bar. Aplicaţie
f Dreamweaver 4 workspace, MX workspace – Creaţi comportamentul
Validate Form. Aplicaţii
Text of Layer. Aplicaţii
Text of Frame
•••••••••••••••••••••••••••••••••••••••••
Dreamweaver MX Comportamente Dreamweaver

workspace
Creaţi un comportament
Inserarea unui comportament (behavior, în limba engleză) în paginile
dumneavoastră Web are ca efect creşterea interactivităţii cu vizitatorii.
742
Un comportament are ecuaţia:
Comportament=eveniment + acţiune.
În general, evenimentul reprezintă o acţiune a utilizatorului cu mouse-ul:
9 evenimentul onMouseOver – se declanşează atunci când vizitatorul

plasează mouse-ul deasupra unui
obiect;
9 evenimentul onMouseDown – se declanşează atunci când vizitatorul

apasă pe butonul mouse-ului;
9 evenimentul onMouseUp – se declanşează atunci când vizitatorul

eliberează butonul mouse-ului;
9 evenimentul onClick – se declanşează atunci când vizitatorul

execută clic cu mouse-ul;
9 evenimentul onDblClick – se declanşează atunci când vizitatorul

execută dublu clic.
Acţiunea este generată de Java Script şi permite o schimbare în pagina

dumneavoastră (substituirea unei imagini cu o altă imagine, afişarea
unui mesaj în bara de stare a navigatorului, înlocuirea conţinutului unui
strat/cadru cu un text şi cu o altă imagine) sau o acţiune programată
(verificarea unui calcul într-un câmp al formularului etc.).
În concluzie, pentru a defini un comportament trebuie să precizaţi:

obiectul din pagină, acţiunea şi evenimentul.
Remarci:
9 De regulă, interactivitatea necesită cunoştinţe de programare în Java Script!
Dacă utilizaţi Dreamweaver, nu este nevoie de script-are pentru a folosi
comportamentele! Dreamweaver generează, în locul dumneavoastră, liniile de
program Java Script.
9 Comportamentele Dreamweaver (Open Browser Window, Swap Image, Set
Text of Status Bar, Set Text of Text Field, Set Text of Layer, Set Text of
Frame, Validate Form etc.) funcţionează atât în Internet Explorer (versiunea
4.0 sau superior), cât şi în Netscape.
743
Alegeţi navigatorul
Nu toate navigatoarele acceptă în totalitate comportamentele
Dreamweaver. În consecinţă, este bine să precizaţi navigatorul pe care îl
veţi utiliza pentru a limita lista comportamentelor disponibile.
Iată care este procedura pe care vă invităm s-o aplicaţi pentru a alege
navigatorul corespunzător.
1. În panoul Behaviors, executaţi clic pe butonul Show

Events For (figura 15.1).
Figura 15.1
2. Executaţi clic pe navigatorul cu care veţi lucra (figura 15.2).

744
Figura 15.2
3. Alegeţi comportamentul corespunzător (figura 15.3).
Figura 15.3
Remarcă. Am selectat comportamentul (acţiunea) Open Browser Window.
4. Alegeţi evenimentul care declanşează acţiunea (figura 15.4).

745
Figura 15.4
Remarcă. Am selectat evenimentul onClick.
Creaţi comportamentul Open

Dreamweaver 4
workspace Browser Window
Comportamentul Open Browser Window din Dreamweaver permite
deschiderea unei pagini într-o fereastră pe care o puteţi personaliza.
Acest comportament este ideal pentru activitatea de marketing,
publicitate etc.
Iată cum procedăm pentru a crea comportamentul Open Browser

Window, în care obiectul din pagină este imaginea sigla.jpg (figura
15.5), iar evenimentul care va declanşa acţiunea (deschideţi o pagină
într-o nouă fereastră a browser-ului) este onClick.
Remarcă. Pentru a defini un comportament trebuie să precizaţi următoarele trei

elemente:
9 obiectul din pagină;
9 acţiunea de efectuat;
9 evenimentul care va declanşa acţiunea.
746
1. Selectaţi imaginea (figura 15.5), care reprezintă obiectul din
pagină.
Figura 15.5
2. Deschideţi panoul Behaviors via Window Behaviors;
sau,
2. Panoul Launcher clic pe butonul (Behaviors).
3. În panoul Behaviors, executaţi clic pe butonul Open

Browser Window.
4. În caseta de dialog Open Browser Window completaţi zonele

afişate, ca în figura 15.6.
Figura 15.6
747
5. În caseta de dialog Open Browser Window executaţi clic pe
butonul OK.
6. În panoul Behaviors, în meniul derulant (Events), selectaţi

evenimentul onClick.
Remarcă. În panoul Behaviors, se afişează evenimentul onClick şi comportamentul Open

Browser Window.
7. Analizaţi codul HTML (Java Script) generat.
Figura 15.7
9. Testaţi comportamentul Open Browser Window (figura 15.8).
Figura 15.8
Remarcă. Executaţi clic deasupra imaginii. Pagina servicii.htm se deschide într-o nouă
fereastră a browser-ului.
748
Dreamweaver MX Creaţi comportamentul Open

workspace
Browser Window
Iată cum procedăm pentru a crea comportamentul Open Browser
Window cu Dreamweaver MX workspace. Obiectul din pagină este
sigla.jpg, iar evenimentul care va declanşa acţiunea (deschide o
fereastră a browser-ului) este onClick.
Figura 15.9
Remarcă. Pentru a ataşa un comportament întregii pagini, executaţi clic pe tag-ul

<body> care se afişează în colţul din stânga al ferestrei Dreamweaver (vezi bara de
stare).
2. Executaţi clic pe Window Behaviors.
sau,
2. Panoul Launcher clic pe butonul (Behaviors), figura

15.10.
Remarcă. Se afişează panoul Behaviors.

749
Figura 15.10
3. În panoul Behaviors, executaţi clic pe butonul Open

Browser Window (figura 15.11).
Figura 15.11
Remarcă. Dreamweaver MX workspace afişează caseta de dialog Open Browser Window.

750
4. În caseta de dialog Open Browser Window, completaţi zonele:
URL to Display, Window Width, Window Height, Window Name,
activaţi opţiunile (Meniu Bar, Status Bar) ca în figura 15.12.
Figura 15.12
5. În caseta de dialog Open Browser Window, executaţi clic pe

butonul OK.
6. În panoul Behaviors, în meniul derulant Events ( ), selectaţi

evenimentul onClick (figura 15.13).
Figura 15.13
751
Remarcă. În panoul Behaviors, se afişează evenimentul onClick şi comportamentul Open
Browser Window (figura 15.14).
Figura 15.14
7. Analizaţi codul XHTML (Java Script) generat (15.15).
Figura 15.15
Remarcă. Este important să vizualizaţi codul Java Script pe care Dreamweaver MX

workspace l-a generat. Dacă nu cunoaşteţi Java Script, acum aveţi ocazia să începeţi
să înţelegeţi …. O lume întreagă înţelegea ….
752
8. Salvaţi documentul iar apoi afişaţi pagina într-un browser
(figura 15.16).
Figura 15.16
9. Testaţi comportamentul (Open Browser Window) executând clic

deasupra imaginii (figura 15.17).
Figura 15.17
Remarcă. Pagina servicii.htm se deschide într-o nouă fereastră a browser-ului.
Creaţi comportamentul Swap

Dreamweaver 4
workspace Image
Comportamentul Swap Image din Dreamweaver vă permite să înlocuiţi o
imagine cu altă imagine, în timpul evenimentelor: onMouseOver, onClick
etc.
753
Iată cum procedăm pentru a crea comportamentul Swap Image, în care
obiectul din pagină este imaginea autumn.jpg pe care o vom substitui cu
imaginea azul.jpg, iar evenimentul care va declanşa acţiunea (înlocuiţi o
imagine cu altă imagine) este onMouseOver.
1. Inseraţi imaginea autumn.jpg în documentul Dreamweaver 4

workspace şi selectaţi-o (figura 15.18).
Figura 15.18
2. În panoul Properties, introduceţi numele imaginii (buton2).
3. Deschideţi panoul Behaviors.
4. În panoul Behaviors, executaţi clic pe butonul Swap

Image.
5. În caseta de dialog Swap Image, care se afişează, executaţi

9 în zona Images – selectaţi image ”buton2”;
9 în zona Set Source to – introduceţi calea de acces a imaginii;
9 – activaţi opţiunile Preload Images şi
Restore Images onMouseOut;

754
6. Analizaţi codul HTML (Java Script) generat (figura 15.19).
Figura 15.19
8. Testaţi rollover-ul, trecând mouse-ul pe deasupra imaginii

(figura 15.20).
755
Figura 15.20
Dreamweaver MX Creaţi comportamentul Swap

workspace Image
Folosiţi Dreamweaver MX workspace pentru a crea comportamentul
Swap Image.
Iată cum procedăm pentru a crea comportamentul Swap Image, în care

obiectul din pagină este imaginea autumn.jpg pe care o vom înlocui cu
imaginea azul.jpg, iar evenimentul care va declanşa acţiunea (Swap
Image) este onMouseOver.
1. Inseraţi imaginea autumn.jpg în documentul Dreamweaver MX

workspace şi selectaţi-o.
2. În panoul Properties, introduceţi numele imaginii, buton2,

pentru a putea fi referită de către script-ul comportamentului
(figura 15.21).
756
Figura 15.21
4. În panoul Behaviors, executaţi clic pe butonul , iar în meniul

derulant, selectaţi comportamentul Swap Image (figura 15.22).
Figura 15.22
757
Remarcă. Se afişează caseta de dialog Swap Image.
5. În caseta de dialog Swap Image, care se afişează, executaţi

9 în zona Images – selectaţi numele imaginii pe care

doriţi s-o substituiţi;
9 în zona Set Source to – introduceţi calea de acces a imaginii
sau, executaţi clic pe butonul Browse
şi selectaţi imaginea de substituţie
azul.jpg;
9 – activaţi opţiunile Preload Images şi
Restore Images onMouseOut;
Figura 15.23

758
Figura 15.24
8. Testaţi rollover-ul, trecând mouse-ul pe deasupra imaginii

(figura 15.25).
759
Figura 15.25
Dreamweaver 4 Creaţi comportamentul Set Text of

workspace Status Bar
Comportamentul Set Text of Status Bar din Dreamweaver vă permite să
afişaţi un mesaj (asociat unui element din pagina Web) în bara de stare
a navigatorului, în timpul evenimentelor: onClick, onMouseOver etc.
Iată cum procedăm pentru a crea comportamentul Set Text of Status

Bar, în care obiectul din pagină este imaginea autumn.jpg căreia îi
atribuim mesajul „Învăţaţi să priviţi dincolo de aparenţe”, iar
evenimentul care va declanşa acţiunea (Set Text of Status Bar) este
onClick.
1. Selectaţi imaginea autumn.jpg.
2. În panoul Behaviors, selectaţi comportamentul Set Text of

Status Bar, via Set Text.
3. În caseta de dialog Set Text of Status Bar, în zona Message,

introduceţi mesajul „Învăţaţi să priviţi dincolo de aparenţe”, iar
760
4. Selectaţi evenimentul onClick.
Figura 15.26
7. Testaţi comportamentul (executaţi clic pe imagine!), figura

15.27.
Figura 15.27
Remarcă. Mesajul se afişează în bara de stare a navigatorului.

761
Dreamweaver MX Creaţi comportamentul Set Text of

workspace Status Bar. Aplicaţie
Folosiţi Dreamweaver MX workspace pentru a crea comportamentul Set
Text of Status Bar.
Iată cum procedăm pentru a afişa mesajul „Învăţaţi să priviţi dincolo de

aparenţe” în bara de stare a navigatorului. Asociaţi acest mesaj imaginii
autumn.jpg şi folosiţi evenimentul onClick pentru a declanşa acţiunea
Set Text of Status Bar.
1. Selectaţi imaginea autumn.jpg, care trebuie să afişeze mesajul

în bara de stare.
2. În panoul Behaviors, executaţi clic pe butonul Set Text

Set Text of Status Bar (figura 15.28).
Figura 15.28
762
Remarcă. Se afişează caseta de dialog Set Text of Status Bar.
3. În caseta de dialog Set Text of Status Bar, executaţi

9 în zona Message – introduceţi mesajul „Învăţaţi să priviţi

dincolo de aparenţe”
Figura 15.29
4. Selectaţi evenimentul onClick (figura 15.30).
Figura 15.30
Remarcă. În mod implicit, textul este afişat în timpul evenimentului onMouseOver.

763
5. Analizaţi codul Java Script generat (figura 15.31).
Figura 15.31
Figura 15.32
764
7. Testaţi comportamentul (executaţi clic pe imagine!), figura
15.33.
Figura 15.33
Remarcă. Mesajul se afişează în bara de stare a navigatorului.

Aplicaţie
Creaţi comportamentul Popup Message (mesaj contextual), în care:
9 autumn.jpg – reprezintă obiectul din pagină căruia îi asociem

mesajul „Învăţaţi să priviţi dincolo de aparenţe”;
9 Popup Message – reprezintă acţiunea din panoul Behaviors de
executat, care afişează mesajul într-o casetă de
dialog de avertizare;
9 onClick – reprezintă evenimentul care va declanşa acţiunea.
1. Selectaţi imaginea autumn.jpg, care trebuie să afişeze mesajul într-o

casetă de dialog.
2. În panoul Behaviors, executaţi clic pe butonul , iar apoi pe Popup

Message.
Remarcă. Se afişează caseta de dialog Popup Message.

765
3. În caseta de dialog Popup Message, executaţi următoarele acţiuni
(figura 15.34):
9 în zona Message – introduceţi mesajul "Învăţaţi să priviţi dincolo

de aparenţe".
Figura 15.34
Remarcă. În mod implicit, caseta de dialog este afişată atunci când asupra elementului
se execută un clic (onClick).
4. Analizaţi codul XHTML (Java Script) generat.
5. Vizualizaţi pagina Web într-un browser (figura 15.35) iar apoi testaţi
comportamentul.
Figura 15.35
Remarcă. Se afişează o casetă de avertizare, care afişează mesajul. Executaţi clic pe

butonul OK.
766
Dreamweaver 4 Creaţi comportamentul Validate

workspace Form
Folosiţi Dreamweaver 4 workspace pentru a valida un formular în
momentul expedierii acestuia.
Iată cum procedăm pentru a valida câmpul E-MAIL al unui formular

(figura 15.36) în momentul expedierii acestuia. Folosiţi evenimentul
onSubmit pentru a declanşa acţiunea Validate Form.
1. Selectaţi formularul (figura 15.36).
Figura 15.36
2. Afişaţi panoul Behaviors.
3. În panoul Behaviors, executaţi clic pe butonul Validate

Form.
4. În caseta de dialog Validate Form: în zona Named Fields,

selectaţi câmpul text ”email” in form ”formular”; în zona Value,
activaţi butonul radio Required; în zona Accept, activaţi butonul
radio Email Address.
767
5. În caseta de dialog Validate Form executaţi clic pe butonul OK.
Figura 15.37
8. Testaţi comportamentul (figura 15.38).

768
Figura 15.38
Dreamweaver MX Creaţi comportamentul Validate

workspace Form
Cu Dreamweaver MX workspace puteţi efectua verificarea unui formular
atunci când vizitatorul completează câmpurile unul după altul sau când
execută clic pe butonul de expediere (submit) al formularului.
Iată cum procedăm pentru a efectua validarea unui câmpul E-MAIL al

formularului din figura 15.39 în momentul expedierii acestuia. Folosiţi
evenimentul onSubmit pentru a declanşa acţiunea Validate Form.
1. Selectaţi formularul (figura 15.39).

769
Figura 15.39
2. Afişaţi panoul Behaviors (comportamente).
3. În panoul Behaviors, executaţi clic pe butonul , iar apoi din

meniul derulant alegeţi comportamentul Validate Form.
Remarcă. Se afişează caseta de dialog Validate Form care repertoriază toate câmpurile
de tip text ale formularului.
4. În caseta de dialog Validate Form, executaţi următoarele acţiuni

(figura 15.40):
9 în zona Named Fields – selectaţi câmpul căruia urmează să i

se aplice validarea text ”email” in
form ”formular”;
9 în zona Value – activaţi caseta de validare Required

pentru a interzice o zonă vidă în
acest câmp;
9 în zona Accept – activaţi butonul radio Email Address;

770
Figura 15.40
Remarcă. În panoul Behaviors s-a afişat evenimentul onSubmit. Puteţi alege, evident, şi
un alt eveniment (figura 15.41).
Figura 15.41
5. Analizaţi codul XHTML (Java Script) generat (figura 15.42).

771
Figura 15.42

772
Figura 15.43
Remarcă. În momentul expedierii formularului, după ce aţi introdus date incorecte (email
greşit), navigatorul afişează un mesaj de eroare.
Aplicaţii
Vizualizaţi câmpurile Nume, Prenume care aparţin aceluiaşi formular.
Indicaţie. Folosiţi evenimentul onBlur pentru a declanşa acţiunea Validate Form.
Transmiteţi un mesaj de mulţumire vizitatorilor care au completat formularul

cu impresiile acestora privind site-ul accesat.
Indicaţie. Folosiţi evenimentul OnMouseDown pentru a declanşa acţiunea Set

Text of Text Field.

workspace Layer
Comportamentul Set Text of Layer vă permite să înlocuiţi conţinutul şi
formatarea unui strat cu un conţinut diferit şi/sau atribute dedicate.
773
Iată cum procedăm pentru a înlocui imaginea sigla.jpg din stratul sigla
cu textul TOAMNA şi o altă imagine autumn.jpg. Folosiţi evenimentul
onMouseOver pentru a declanşa acţiunea (Set Text of Layer).
1. Inseraţi imaginea sigla.jpg într-un strat (figura 15.44).
Figura 15.44

Set Text of Layer.
4. În caseta de dialog Set Text of Layer (figura 15.45) executaţi

9 în zona Layer – alegeţi stratul ţintă layer „sigla” al cărui

conţinut va fi integral şters;
9 .în zona New HTML – tastaţi textul / codul HTML care trebuie
să se afişeze în cadru;
Figura 15.45
774
5. Analizaţi codul HTML generat (15.46).
Figura 15.46
Figura 15.47
775
Figura 15.48

workspace Layer
Cu Dreamweaver MX workspace puteţi schimba conţinutul şi formatarea
unui strat, folosind comportamentul Set Text of Layer.
Iată cum procedăm pentru a înlocui conţinutul unui strat, imaginea

sigla.jpg cu un text, TOAMNA şi o altă imagine, autumn.jpg. Folosiţi
evenimentul onMouseOver pentru a declanşa acţiunea Set Text of Layer.
1. Inseraţi imaginea sigla.jpg într-un strat.

Set Text of Layer (figura 15.49).
776
Figura 15.49
Remarcă. Se afişează caseta de dialog Set Text of Layer.
4. În caseta de dialog Set Text of Layer, executaţi următoarele

9 în zona Layer – alegeţi stratul ţintă layer „sigla” al cărui

9 .în zona New HTML – tastaţi textul/codul HTML care trebuie
să se afişeze în cadru;
Figura 15.50
777
Remarcă. În panoul Behaviors, Dreamweaver a … completat evenimentul onMouseOver.
Desigur, dumneavoastră puteţi alege un alt eveniment.
5. Analizaţi codul XHTML generat (15.51).
Figura 15.51
Figura 15.52
778
Figura 15.53
Remarcă. Iniţial, stratul conţinea o imagine. În timpul evenimentului onMouseOver,

conţinutul său este înlocuit cu textul TOAMNA şi o altă imagine (autumn.jpg).
Aplicaţii
Inseraţi un fişier sunet în pagina dumneavoastră Web, care va fi declanşat

executând clic pe un buton-imagine sau trecând cu mouse-ul peste acest buton.
Indicaţie. Inseraţi o imagine-buton pentru a declanşa sunetul. În panoul

Behaviors alegeţi comportamentul Play Sound.
Controlaţi o animaţie Flash sau Shockwave cu ajutorul comportamentului

Control Shockwave or Flash.

workspace Frame
Comportamentul Set Text of Frame vă permite să înlocuiţi conţinutul
unui cadru cu un conţinut diferit şi/sau atribute dedicate.
779
Iată cum procedăm pentru a înlocui imaginea sigla.jpg din cadrul „sus”
cu textul TOAMNA şi o altă imagine autumn.jpg. Folosiţi evenimentul
onMouseOver pentru a declanşa acţiunea (Set Text of Frame).
1. Inseraţi imaginea sigla.jpg într-un cadru (figura 15.54).
Figura 15.54

Set Text of Frame.
4. În caseta de dialog Set Text of Frame, executaţi următoarele

acţiuni: în zona Frame, alegeţi cadrul ţintă frame ”sus” al cărui
conţinut va fi şters; în zona New HTML introduceţi textul care
trebuie să se afişeze în cadru sau codul HTML (figura 15.55).
Figura 15.55
780
5. Alegeţi evenimentul onMouseOver sau onClick.
Figura 15.56
Figura 15.57
781
Figura 15.58

workspace Frame
Cu Dreamweaver MX workspace puteţi schimba conţinutul unui cadru,
folosind comportamentul Set Text of Frame.
Iată cum procedăm pentru a înlocui conţinutul unui cadru, imaginea

sigla.jpg cu textul TOAMNA şi o altă imagine autumn.jpg. Folosiţi
evenimentul onMouseOver pentru a declanşa acţiunea (Set Text of
Frame).
1. Inseraţi imaginea sigla.jpg într-un cadru (figura 15.59).

782
Figura 15.59

Set Text of Frame (figura 15.60).
Figura 15.60
783
Remarcă. Se afişează caseta de dialog Set Text Frame.
4. În caseta de dialog Set Text of Frame (figura 15.61), executaţi

9 în zona Frame – alegeţi cadrul ţintă frame ”sus” al cărui

9 în zona New HTML – introduceţi textul care trebuie să se
afişeze în cadru sau codul XHTML
(exemplul nostru);
9 – activaţi opţiunea Preserve Background
Color;
Figura 15.61
5. Alegeţi evenimentul onMouseOver sau onClick.

784
Figura 15.62
Figura 15.63

785
Figura 15.64
Remarcă. Iniţial, cadrul de sus conţinea o imagine. În timpul evenimentului

onMouseOver, conţinutul său este înlocuit cu textul TOAMNA şi o altă imagine,
autumn.jpg.
786
1. Care este ecuaţia unui comportament?
2. Precizaţi care sunt cele trei elemente necesare pentru a defini un

comportament.
3. Descrieţi pe scurt comportamentele:
9 Open Browser Window

9 Swap Image
9 Set Text of Status Bar
9 Validate Form
9 Set Text of Layer
9 Set Text of Frame.
9 www.macromedia.com/exchange/dreamweaver
9 www.modernmethod.com
Conversaţia 16
Creaţi scenarii cu Dreamweaver MX

•••••••••••••••••••••••••••••••••••••••••
f Dreamweaver MX workspace – Creaţi un scenariu
f Dreamweaver MX workspace – Creaţi o animaţie simplă
f Dreamweaver MX workspace – Creaţi o animaţie curbă. Aplicaţie
f Dreamweaver MX workspace – Creaţi o animaţie complexă. Aplicaţii
f Dreamweaver MX workspace – Declanşaţi sau opriţi un scenariu cu
ajutorul unui comportament
•••••••••••••••••••••••••••••••••••••••••
Dreamweaver MX Creaţi un scenariu

workspace
Puţin DHTML
Pentru a da viaţă paginilor dumneavoastră Web utilizaţi funcţiile
interactive puse la dispoziţie de HTML dinamic (DHTML). Vă asigur că
DHTML este foarte … excitant!
DHTML utilizează tehnici de script-are avansate pentru poziţionarea

precisă a elementelor şi crearea unui conţinut dinamic, lucru imposibil cu
HTML standard.
788
Remarci:
9 Pentru a crea animaţii interactive puteţi alege şi alte tehnologii: Java,
Shockwave şi Flash.
9 DHTML permite crearea de animaţii interactive direct în Dreamweaver, fără a
fi nevoiţi să învăţaţi manipularea unui alt program.
Trei sunt funcţiile puternice ale Dreamweaver-ului care permit crearea

cu uşurinţă a funcţiilor DHTML:
9 straturile;
9 comportamentele;
9 scenariile.
Remarci:
9 Pentru controlul riguros al poziţiei elementelor unei pagini Web, DHTML
utilizează straturile (vezi Conversaţia 13).
9 Comportamentele au fost prezentate în Conversaţia 15, iar scenariile sunt
prezentate în cadrul acestei conversaţii.
Inspectorul de scenarii Timelines

Animând straturile, aşa cum vom proceda chiar în cadrul acestei
conversaţii, veţi reuşi să evadaţi din lumea paginilor Web statice. Este
doar … o mică provocare!
Funcţia Dreamweaver numită scenariu permite crearea de animaţii şi

modificarea dimensiunii, poziţiei, vizibilităţii straturilor şi a conţinutului
acestora pentru o perioadă de timp predeterminată.
Întrucât codul sursă de creare a straturilor animate este foarte

complicat, Dreamweaver îl simplifică prin interfaţa sa prietenoasă şi
intuitivă. În plus, scenariile sunt uşor de integrat în comportamente,
ceea ce nu este deloc puţin!
Pentru a crea scenarii cu Dreamweaver MX folosiţi inspectorul de

scenarii Timelines.
789
Utilizaţi inspectorul de scenarii Timelines pentru a insera în straturile din
paginile dumneavoastră, rapid, fără stres, animaţiile … preferate!
Iată cum procedăm pentru a afişa cu Dreamweaver MX workspace

inspectorul de scenarii, panoul Timelines.
1. Executaţi clic pe Window Others Timelines (figura 16.1).
Figura 16.1
Remarcă. Dreamweaver MX workspace afişează panoul Timelines (figura 16.2)
Figura 16.2
790
Remarci:
9 Numele scenariului apare în meniul derulant Timeline 1 (linie de durată 1).
9 Canalul B este destinat adăugării de „comportamente” animaţiei
dumneavoastră.
9 Dreptunghiul roşu şi linia verticală asociată reprezintă capul de citire; ele
permit vizualizarea deplasării stratului în pagină.
9 FPS 15 indică numărul de imagini pe secundă (15 imagini/secundă reprezintă
standardul Web).
9 Canalele de animaţie (barele 1, 2, 3 …) permit înregistrarea fiecărei animaţii.
Puteţi avea mai multe animaţii într-un scenariu. Când veţi înregistra un traseu
al stratului dumneavoastră, poziţiile cheie de început şi de sfârşit vor fi vizibile
datorită „imaginilor cheie” (cercurile albe) din canalul de animaţie.
Dreamweaver MX Creaţi o animaţie simplă

workspace
Cu inspectorul de scenarii (Timelines) puteţi adăuga rapid animaţii

simple în paginile dumneavoastră Web.
Iată care este procedura de creare a unei animaţii simple utilizând

imagini cheie (mici cercuri albe), pe care vă invităm s-o aplicaţi.
1. Creaţi un strat, numiţi-l (strat) iar apoi umpleţi-l cu text sau cu

o imagine, sigla.jpg (figura 16.3).
Figura 16.3
791
2. Plasaţi stratul în locul în care doriţi să înceapă secvenţa de
animaţie.
3. Executaţi clic pe Window Others Timelines.
4. Selectaţi stratul iar apoi în meniul local al panoului Timelines

executaţi clic pe Add Object.
Remarcă. Se afişează bara de animaţie Layer1 cu 15 imagini (figura 16.4).
Figura 16.4
5. Executaţi clic pe ultima imagine a animaţiei (figura 16.5).
Figura 16.5
792
Remarci:
9 Punctele scenariului simbolizează „imaginile - cheie”.
9 Toate obiectele scenariului dispun de o „imagine-cheie” de început şi de
sfârşit.
6. Deplasaţi stratul într-o nouă poziţie (figura 16.6).
Figura 16.6
Remarcă. Linia din figura 16.6 corespunde traseului stratului.
7. Afişaţi codul Java Script generat (figura 16.7).

793
Figura 16.7
8. Executaţi clic în interiorul barei (1) pentru a putea urmări

evoluţia animaţiei.
sau,
8. Utilizaţi butoanele şi .
sau,
8. Deplasaţi capul de citire 1.
Remarcă. Pentru a vedea desfăşurarea animaţiei, în panoul Timelines executaţi clic pe

butonul Play. Ţineţi apăsat butonul Play pentru a putea vedea o mişcare mai lentă.
794
9. Activaţi opţiunea Autoplay (figura 16.8) pentru a demara
animaţia odată cu deschiderea paginii Web.
Figura 16.8
Figura 16.9
Remarcă. Stratul se deplasează de la prima la ultima poziţie.

795
Dreamweaver MX
workspace Creaţi o animaţie curbă. Aplicaţie
Adăugând „imagini-cheie” în mijlocul animaţiei, puteţi defini alte poziţii

ale stratului în afara celor de început şi de sfârşit.
Iată cum procedaţi pentru a realiza o animaţie curbă.
1. Realizaţi o animaţie simplă.
2. În panoul Timelines activaţi opţiunea Autoplay pentru a demara

animaţia odată cu deschiderea paginii Web.
3. Executaţi clic pe o „imagine-cheie” în interiorul barei de

animaţie.
4. În panoul Timelines, în meniul local executaţi clic pe Add

Keyframe (figura 16.10).
796
Figura 16.10
Remarcă. În bara de animaţie se afişează o nouă „imagine-cheie” (figura 16.11).
Figura 16.11
5. Deplasaţi stratul într-o altă poziţie (figura 16.12).

797
Figura 16.12
6. Analizaţi codul Java Script generat (figura 16.13).
Figura 16.13
Figura 16.14
798
Remarcă. Stratul se deplasează de la prima la ultima poziţie, trecând prin poziţia
centrală, urmând o curbă.
Aplicaţie
Înregistraţi un traseu pentru o animaţie.
2. Executaţi clic pe Modify Timeline Record Path of Layer pentru a

înregistra traseul (figura 16.15).
Figura 16.15
Remarcă. Dreamweaver MX workspace afişează panoul Timelines.
3. Desenaţi traseul.
Remarcă. Pe măsură ce deplasaţi stratul, o linie gri se va afişa pe ecran. Urmăriţi cum se
generează în mod automat noi „imagini cheie” reprezentate prin mici cerculeţe pe bara
de animaţie.
799
Dreamweaver MX Creaţi o animaţie complexă.

workspace Aplicaţii
Nu vă mulţumiţi numai cu o simplă traiectorie. Adăugaţi noi bare de
animaţie pentru a deplasa stratul în mai multe poziţii.
2. În panoul Timelines, activaţi opţiunea Autoplay.
3. Executaţi clic pe prima „imagine-cheie” vidă după ultima

„imagine-cheie” (figura 16.16).
Figura 16.16
5. În panoul Timelines, în meniul local, executaţi clic pe Add

Object.
800
Remarcă. Dreamweaver MX workspace afişează o nouă bară de animaţie (figura 16.17).
Figura 16.17
6. Executaţi clic pe ultima „imagine-cheie” (figura 16.18).
Figura 16.18
7. Deplasaţi stratul în ultima sa poziţie.

8. Repetaţi paşii 3 la 7 pentru a adăuga noi animaţii (figura
16.19).
801
Figura 16.19
9. Analizaţi codul Java Script generat.

10. Acţionaţi tasta F12 pentru a testa animaţia în navigator (figura
16.20).
Figura 16.20
Aplicaţii
Adăugaţi mai multe animaţii în aceeaşi pagină.
Iată cum procedaţi pentru a adăuga mai multe animaţii în interiorul aceleiaşi
pagini.
2. În panoul Timelines, activaţi opţiunea Autoplay.
3. Inseraţi un strat (figura 16.21).

802
Figura 16.21
4. În Timelines, în linia 2, executaţi clic pe „imaginea-cheie”, unde

trebuie să debuteze animaţia.
6. În panoul Timelines, în meniul local, executaţi clic pe Add Object

(figura 16.22).
Remarcă. Dreamweaver MX workspace afişează o nouă bară de animaţie Layer2, sub

Layer1.
Figura 16.22
7. Executaţi clic pe ultima „imagine-cheie” a animaţiei din linia 2 (figura

16.23).
803
Figura 16.23
8. Deplasaţi stratul din stânga către celălalt strat.
10. Acţionaţi tasta F12 pentru a testa animaţia în browser (figura 16.24).
Figura 16.24
Remarcă. Cele două animaţii funcţionează simultan.
Modificaţi fluxul unei animaţii.
Indicaţie. Viteza unei animaţii este determinată de doi parametrii: numărul de

imagini pe secundă şi numărul de imagini utilizate pentru a se deplasa de la un
punct la altul.
Mascaţi periodic un strat pentru a-l face să clipească.
1. În panoul Timelines, activaţi opţiunile Autoplay şi Loop (figura 16.25).

804
Figura 16.25
2. Executaţi clic pe o „imagine-cheie” din cadrul barei (1) de animaţie.
3. În meniul local, executaţi clic pe Add Keyframe.
4. Executaţi clic pe o „imagine-cheie” din cadrul barei (1) de animaţie.
5. În panoul Properties, în meniul derulant, selectaţi hidden (figura

16.26).
Figura 16.26
Remarcă. Stratul va fi mascat.
6. Executaţi clic pe prima „imagine-cheie” (bara 1).
Figura 16.27
805
Remarcă. Întrucât atributul visible conţine valoarea inherit, stratul va fi din nou afişat.
Dreamweaver MX Declanşaţi sau opriţi un scenariu

workspace cu ajutorul unui comportament
Iată cum procedaţi pentru a declanşa o animaţie cu ajutorul unui
comportament.
2. În panoul Timelines, dezactivaţi opţiunea Autoplay.
3. Afişaţi panoul Behaviors.
4. Selectaţi elementul care urmează să declanşeze animaţia

(figura 16.28).
Figura 16.28
5. În panoul Behaviors, executaţi clic pe butonul Timeline

Play Timeline (figura 16.29).
806
Figura 16.29
Remarcă. Dreamweaver MX workspace afişează caseta de dialog Play Timeline.
6. În caseta de dialog Play Timeline, executaţi următoarele acţiuni

(figura 16.30):
9 în zona Play Timeline – selectaţi scenariul Timeline 1 pe

care urmează să-l declanşaţi;
Figura 16.30
7. Afişaţi pagina Web într-un navigator (figura 16.31).

807
Figura 16.31
8. Executaţi clic pe elementul care declanşează animaţia (figura

16.32).
Figura 16.32
Remarcă. Pentru a crea un element care stopează animaţia, parcurgeţi etapele 1-7 şi
alegeţi în etapa 5, comanda Stop Timeline.
808
1. Ce este un scenariu Dreamweaver?
2. Descrieţi pe scurt procedura de creare a unei animaţii simple, curbe.
3. Cum creaţi cu Dreamweaver MX o animaţie complexă?
4. Descrieţi pe scurt procedura de declanşare a unui scenariu cu ajutorul
unui comportament.
9 www.dthmlzone.com
9 www.Big-Wheel.com
BIBLIOGRAFIE
1. Cristophe Aubry, La collection Studio Factory, Editions ENI, 2002, Paris,

France
2. Janine Warner, Ivonne Berkovitz, Dreamweaver MX pour les nuls,
Editions First Interactive, 2002, Paris, France
3. Macromedia, Bien démarrer avec Dreamweaver MX, Macromedia, 2002,
Paris, France
808

Dreamweaver MX PDF

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Dreamweaver MX PDF

Încărcat de

Drepturi de autor:

Formate disponibile

DREAMWEAVER

Conversaţia 2. Creaţi un site Web cu Dreamweaver MX .............. 29

Conversaţia 3. Introduceţi şi formataţi caracterele cu

Conversaţia 4. Creaţi şi formataţi paragrafele cu

Conversaţia 5. Inseraţi şi personalizaţi o linie orizontală cu

Conversaţia 6. Creaţi şi utilizaţi foi de stiluri în cascadă cu

Conversaţia 7. Inseraţi imagini cu Dreamweaver MX ................... 273

Conversaţia 8. Creaţi legături cu Dreamweaver MX ...................... 329

Conversaţia 9. Creaţi tabele cu Dreamweaver MX ........................ 383

Conversaţia 10. Creaţi formulare cu Dreamweaver MX ................ 477

Conversaţia 11. Inseraţi obiecte cu Dreamweaver MX ................. 543

Conversaţia 12. Creaţi cadre cu Dreamweaver MX ....................... 585

Conversaţia 13. Creaţi straturi cu Dreamweaver MX .................... 629

Conversaţia 14. Creaţi biblioteci cu Dreamweaver MX ................. 671

Conversaţia 15.Creaţi comportamente cu Dreamweaver MX ....... 741

Conversaţia 16. Creaţi scenarii cu Dreamweaver MX ................... 787

Bibliografie ....................................................................................... 807

Creaţi pagini Web cu Dreamweaver MX

Dreamweaver, un editor de tip

Macromedia Dreamweaver este unul dintre acestea, la ora actuală fiind

În plus, Dreamweaver poate genera şi cod D-HTML; recunoaşte foile de

Macromedia Dreamweaver MX (ultima versiune, după Dreamweaver 4)

Stabiliţi obiectivele site-ului

Înainte de a vă lansa în construcţia site-ului dumneavoastră, încercaţi să

9 Care sunt obiectivele site-ului dumneavoastră?

La prima privire, Dreamweaver poate părea descurajant! Nu se poate

Deschideţi Dreamweaver MX (via Start  Programs  Macromedia 

Sub Windows, Dreamweaver MX vă propune două prezentări:

9 un spaţiu de lucru integrat într-o singură fereastră care conţine

9 un spaţiu de lucru flotant care seamănă cu cel de la versiunea 4

Atunci când lansaţi Dreamweaver pentru prima dată va trebui să

9 Dreamweaver MX Workspace – spaţiu de lucru integrat care

9 Dreamweaver MX Workspace, Home Site/Coder-Style – acelaşi

9 Dreamweaver 4 Workspace – spaţiul de lucru utilizat în

Evident, spaţiul de lucru este locul în care dumneavoastră elaboraţi

Dreamweaver 4 Spaţiul de lucru

Pe ecranul monitorului dumneavoastră se afişează fereastra

Fereastra documentului (o pagină albă al cărei cod HTML este

Panoul Insert conţine icon-uri pentru crearea elementelor (obiectelor)

Inspectorul de proprietăţi permite vizualizarea, modificarea

Panoul Launcher conţine icon-uri (figura 1.6) care permit accesul

Dreamweaver MX Spaţiul de lucru

Reveniţi la vechea interfaţă

1. Executaţi clic pe Edit  Preferences (figura 1.10).

Remarcă. Se deschide caseta de dialog Preferences.

2. În caseta de dialog Preferences, în categoria General executaţi

3. În caseta de dialog care se afişează (figura 1.12) selectaţi

Pe ecranul monitorului dumneavoastră, în spaţiul de lucru Dreamweaver

9 fereastra documentului (figura 1.13).

9 fereastra Welcome (figura 1.14) care furnizează indicaţii privind

9 grupul de panouri Insert (figura 1.16).

9 panoul Properties (Inspectorul de proprietăţi) situat în afara

9 bara de instrumente standard (figura 1.18).

9 grupurile de panouri închise: Design, Code, Application,

Iată cum … descoperiţi fereastra documentului Dreamweaver MX.

1. Executaţi clic pe Untitled 2 pentru a schimba pagina (figura

2. Executaţi clic în interiorul paginii Untitled 2 şi introduceţi: Un

3. Afişaţi cele două ferestre în cascadă, via Window  Cascade

În figura 1.24 se prezintă grupul de panouri Insert pentru sub-panourile

 Afişaţi panoul Answers.

Iată care este procedura pe care vă invităm s-o urmaţi.

1. Executaţi clic pe Window  Answers.

2. Executaţi clic pe numele panoului pentru a-l reduce.

Deschideţi Dreamweaver MX (via Start Programs Macromedia

1. Executaţi clic pe Edit Preferences (figura 1.10).

3. Afişaţi cele două ferestre în cascadă, via Window Cascade

Afişaţi panoul Answers.

1. Executaţi clic pe Window Answers.

Închideţi panoul Answers.

Afişaţi sau mascaţi rapid panourile.

Afişaţi bara de instrumente.

1. Executaţi clic pe View Toolbars (figura 1.36).

1. Executaţi clic pe Site New Site.

1. Executaţi clic pe Site New Site.

1. Executaţi clic pe Site New Site.