Dreamweaver MX PDF

DREAMWEAVER
CUPRINS
Conversaia 1. Creai pagini Web cu Dreamweaver MX................. 3
Dreamweaver MX Dreamweaver, un editor de tip WYSIWYG . 3
Dreamweaver MX Stabilii obiectivele site-ului dumneavoastr . 4
Dreamweaver MX Principalele componente Dreamweaver .................. 5
Dreamweaver 4 workspace, MX workspace Spaiul de lucru .................. 8
Dreamweaver MX Tem .. 27
Conversaia 2. Creai un site Web cu Dreamweaver MX .............. 29

Dreamweaver MX Creai un site nou ... 29
Dreamweaver MX workspace, 4 workspace Definii local site-ul
dumneavoastr .... 30
Conversaia 3. Introducei i formatai caracterele cu

Dreamweaver MX .................................................... 47
Dreamweaver 4 workspace, MX workspace Introducei text .. 47
Dreamweaver 4 workspace, MX workspace Inserai caractere
speciale.. 63
Dreamweaver 4 workspace, MX workspace Inseraii caractere proprii
(X)HTML ........ 70
Dreamweaver 4 workspace, MX workspace Aplicai unui text formate
fizice i logice ............................ 76
Dreamweaver MX workspace Inserai abrevieri i acronime ............. 93
Dreamweaver 4 workspace, MX workspace Scriei un text cu exponent
sau cu indice .. 97
Dreamweaver 4 workspace, MX workspace Definii tipul de font . 105
Dreamweaver 4 workspace, MX workspace Definii dimensiunea
fontului .. 110
Dreamweaver 4 workspace, MX workspace Definii culorile ... 115
Dreamweaver MX workspace Creai propriile stiluri HTML ... 128
Conversaia 4. Creai i formatai paragrafele cu

Dreamweaver MX .................................................... 137
Dreamweaver 4 workspace, MX workspace Creai un paragraf . 137
Dreamweaver 4 workspace, MX workspace Schimbai alinierea unui
paragraf ................... 142
Dreamweaver 4 workspace, MX workspace Trecei la linia urmtoare
ntr-un paragraf ... 152
Dreamweaver 4 workspace, MX workspace Indentai un paragraf .. 156
Dreamweaver 4 workspace, MX workspace Inserai un text
preformatat ......... 161
Dreamweaver 4 workspace, MX workspace Creai un titlu ................ 166
Dreamweaver 4 workspace, MX workspace Creai liste cu simboluri
(simple), numerotate (ordonate) i de definiii ..... 173
Conversaia 5. Inserai i personalizai o linie orizontal cu

Dreamweaver MX .................................................... 203
Dreamweaver 4 workspace, MX workspace Inserai o linie orizontal...... 203
Dreamweaver MX workspace Colorai o linie orizontal ...... 208
Dreamweaver 4 workspace Definii lungimea i nlimea unei linii
orizontale . 209
Dreamweaver 4 workspace Aliniai o linie orizontal ..... 212
Dreamweaver MX workspace Personalizai o linie orizontal .. 215
Dreamweaver MX Tem ............... 217
Conversaia 6. Creai i utilizai foi de stiluri n cascad cu

Dreamweaver MX .................................................... 219
Dreamweaver MX Tipuri de stiluri CSS folosite n Dreamweaver .. 219
Dreamweaver 4 workspace, MX workspace Creai stiluri CSS . 220
Dreamweaver 4 workspace, MX workspace Creai un stil CSS cu
opiunea Make Custom Style (class) .... 224
Dreamweaver 4 workspace, MX workspace Aplicai un stil CSS (o clas)
unui paragraf .... 233
Dreamweaver 4 workspace, MX workspace Modificai un stil CSS (o
clas) . 237
Dreamweaver 4 workspace, MX workspace Creai un stil CSS cu
opiunea Redefine HTML Tag i aplicai-l unui text .. 241
Dreamweaver 4 workspace, MX workspace Modificai link-urile cu
selectorii CSS . 248
Dreamweaver 4 workspace, MX workspace Creai i aplicai o foaie de
stiluri extern . 256
Conversaia 7. Inserai imagini cu Dreamweaver MX ................... 273

Dreamweaver 4 workspace, MX workspace Inserai o imagine . 274
Dreamweaver 4 workspace, MX workspace Aliniai orizontal o imagine. 286
Dreamweaver 4 workspace, MX workspace Aplicai o bordur unei
imagini .. 289
Dreamweaver 4 workspace, MX workspace Definii un text de nlocuire
(substituie) pentru o imagine .... 292
Dreamweaver 4 workspace, MX workspace Aliniai vertical o imagine n
raport cu un text ....... 295
Dreamweaver MX workspace Inserai un spaiu rezervat pentru o
imagine n construcie .... 302
Dreamweaver MX workspace Plasai text n jurul unei imagini .. 304
Dreamweaver 4 workspace, MX workspace Adugai mai multe spaii n
jurul unei imagini . 307
Dreamweaver 4 workspace, MX workspace Aplicai o imagine de
background .............. 309
Dreamweaver 4 workspace, MX workspace Convertii o imagine n
legtur . 315
Dreamweaver 4 workspace, MX workspace Creai o imagine cu zone
reactive ............................................................................. 321
Conversaia 8. Creai legturi cu Dreamweaver MX ...................... 329

Dreamweaver 4 workspace, MX workspace Creai o legtur hipertext
ctre o alt pagin Web .. 329
Dreamweaver 4 workspace, MX workspace Creai legturi n aceeai
pagin Web . 336
Dreamweaver 4 workspace, MX workspace Creai o legtur extern
ctre un site Web, avnd ca suport o imagine ........................ 353
extern ctre un site Web .. 359
extern ctre o adres e-mail . 364
Dreamweaver 4 workspace, MX workspace Modificai culoarea
legturilor hipertext ... 372
ctre o pagin care se deschide n propria sa fereastr . 377
Conversaia 9. Creai tabele cu Dreamweaver MX ........................ 383

Dreamweaver 4 workspace, MX workspace Creai un tabel .............. 384
Dreamweaver 4 workspace, MX workspace Aliniai un tabel ............. 393
Dreamweaver 4 workspace, MX workspace Atribuii un titlu tabelului .. 398
Dreamweaver 4 workspace, MX workspace Aplicai o bordur tabelului... 408
Dreamweaver 4 workspace, MX workspace Aliniai orizontal datele unui
tabel ................... 411
Dreamweaver 4 workspace, MX workspace Aliniai vertical datele unui
tabel. Aplicaii 415
Dreamweaver 4 workspace, MX workspace Modificai spaiul dintre
celulele unui tabel .. 419
Dreamweaver 4 workspace, MX workspace Modificai dimensiunile
liniilor unui tabel .. 422
Dreamweaver 4 workspace, MX workspace Modificai marginile
interioare ale celulelor unui tabel ..... 429
Dreamweaver 4 workspace, MX workspace Extindei o celul pe mai
multe coloane sau linii ............... 432
Dreamweaver 4 workspace, MX workspace Aplicai o culoare
elementelor unui tabel .......... 442
Dreamweaver 4 workspace, MX workspace Aplicai o imagine de
background unui tabel sau unei celule a tabelului ... 444
Dreamweaver 4 workspace, MX workspace Utilizai un tabel ca un
instrument de punere n pagin .... 449
Dreamweaver 4 workspace, MX workspace Formatai un tabel utiliznd
modele predefinite ............................ 452
Dreamweaver 4 workspace, MX workspace Creai un tabel n modul
Layout View ...................... 466
Dreamweaver MX Tem ............. 476
Conversaia 10. Creai formulare cu Dreamweaver MX ................ 477

Dreamweaver 4 workspace, MX workspace Creai un formular.. 477
Dreamweaver 4 workspace, MX workspace Creai un buton pentru
expedierea (submit) unui formular ... 485
Dreamweaver 4 workspace, MX workspace Creai un buton pentru
resetarea (reset) unui formular ..... 491
Dreamweaver 4 workspace, MX workspace Inserai o zon simpl de
text .... 495
Dreamweaver 4 workspace, MX workspace Inserai o zon de text
multilinie .. 503
Dreamweaver 4 workspace, MX workspace Creai o caset de validare 508
Dreamweaver 4 workspace, MX workspace Creai un buton radio.. 516
Dreamweaver 4 workspace, MX workspace Creai un meniu derulant .. 526
Conversaia 11. Inserai obiecte cu Dreamweaver MX ................. 543

Dreamweaver 4 workspace, MX workspace Inserai animaii Flash i
Shockwave ............... 543
Dreamweaver 4 workspace, MX workspace Inserai un text n format
Flash .. 550
Dreamweaver 4 workspace, MX workspace Creai un buton de navigare
Flash .. 555
Dreamweaver 4 workspace, MX workspace Inserai un obiect Fireworks
i data zilei .. 560
Dreamweaver 4 workspace, MX workspace Inserai un applet Java 567
Dreamweaver 4 workspace, MX workspace Inserai obiecte care
necesit un plugin 572
Conversaia 12. Creai cadre cu Dreamweaver MX ....................... 585

Dreamweaver MX Apreciai cadrele Dreamweaver ..... 585
Dreamweaver 4 workspace, MX workspace Creai cadre care se
afieaz n coloane . 587
Dreamweaver 4 workspace, MX workspace Inserai o pagin (X)HTML
ntr-un cadru ....... 595
Dreamweaver 4 workspace , MX workspace Creai cadre care se
afieaz n linii .. 601
Dreamweaver 4 workspace, MX workspace Salvai setul de cadre 605
Dreamweaver 4 workspace, MX workspace Numii un cadru . 608
Dreamweaver 4 workspace , MX workspace Creai o legtur (link)
ctre un cadru .......... 612
Dreamweaver 4 workspace , MX workspace Formatai bordurile
cadrelor ... 617
Dreamweaver 4 workspace , MX workspace Controlai prezena sau
absena barelor de defilare ale cadrelor ......... 620
Conversaia 13. Creai straturi cu Dreamweaver MX .................... 629

Dreamweaver 4 workspace, MX workspace Creai un strat (layer).. 629
Dreamweaver 4 workspace, MX workspace Modificai dimensiunile i
poziia unui strat. Aplicaii ..... 638
Dreamweaver 4 workspace, MX workspace Modificai vizibilitatea i
ordinea de suprapunere a straturilor. Aplicaii . 648
Dreamweaver 4 workspace, MX workspace Controlai coninutul unui
strat 656
Dreamweaver 4 workspace, MX workspace Creai straturi imbricate
(nested) ... 662
Dreamweaver MX Tem ....... 669
Conversaia 14. Creai biblioteci cu Dreamweaver MX ................. 671

Dreamweaver MX Bibliotecile de obiecte ... 671
Dreamweaver 4 workspace, MX workspace Creai un element de
bibliotec . 675
Dreamweaver 4 workspace, MX workspace Inserai un element de
bibliotec . 682
Dreamweaver 4 workspace, MX workspace Modificai un element de
bibliotec. Aplicaii .. 688
Dreamweaver 4 workspace, MX workspace Creai un model de pagin. 695
Dreamweaver 4 workspace, MX workspace Definii regiunile editabile
ale unui model. Aplicaii .......................... 703
Dreamweaver MX workspace Utilizai regiunile facultative ale unui
model ....................... 715
Dreamweaver MX workspace Definii regiunile repetabile ale unui
model. Aplicaii . 724
Dreamweaver 4 workspace, MX workspace Exportai structuri de date
n format XML 732
Conversaia 15.Creai comportamente cu Dreamweaver MX ....... 741

Dreamweaver MX workspace - Comportamente Dreamweaver ............ 741
Dreamweaver 4 workspace, MX workspace Creai comportamentul
Open Browser Window .... 745
Swap Image ..... 752
Set Text of Status Bar. Aplicaie .... 759
Validate Form. Aplicaii . 766
Set Text of Layer. Aplicaii .... 772
Set Text of Frame 778
Conversaia 16. Creai scenarii cu Dreamweaver MX ................... 787

Dreamweaver MX workspace Creai un scenariu ........ 787
Dreamweaver MX workspace Creai o animaie simpl .. 790
Dreamweaver MX workspace Creai o animaie curb. Aplicaie ............. 795
Dreamweaver MX workspace Creai o animaie complex. Aplicaii 798
Dreamweaver MX workspace Declanai sau oprii un scenariu cu
ajutorul unui comportament 804
Bibliografie ....................................................................................... 807

Conversaia 1
Creai pagini Web cu Dreamweaver MX
n aceast conversaie:
f Dreamweaver MX Dreamweaver, un editor de tip WYSIWYG
f Dreamweaver MX Stabilii obiectivele site-ului dumneavoastr
f Dreamweaver MX Principalele componente Dreamweaver
f Dreamweaver 4 workspace, MX workspace Spaiul de lucru
f Dreamweaver MX Tem
Dreamweaver, un editor de tip

Dreamweaver MX
WYSIWYG
Acum, dup ce ai creat mai multe documente (X)HTML i dup ce ai

neles bine principiile de baz (X)HTML putei trece la utilizarea unui
editor de tip WYSIWYG (What You See Is What You Get) pentru
crearea paginilor Web.
Sunt civa ani de cnd editoarele de tip WYSIWYG au inundat piaa dar
din pcate numai cteva 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; recunoate foile de

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

integreaz toate funciile necesare crerii 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 att de puternic.
9 Dreamweaver este respectuos! El nu altereaz codul dumneavoastr HTML,
ceea ce i-a atras popularitatea.
9 Dreamweaver a reuit acolo unde alii au dat gre!
9 Funciile de editare vizual Dreamweaver permit crearea rapid a paginilor
Web fr a scrie nici-o linie de cod HTML (bucuria de moment a debutanilor
care nu au cunotine HTML!). Dac dorii s facei apel la codificarea
manual (vor exista astfel de situaii!), Dreamweaver v pune la dispoziie,
dup caz numeroase instrumente.
9 Dac ai utilizat alte aplicaii pentru crearea site-urilor Web FrontPage, de
exemplu suntei liber s trecei la Dreamweaver pentru a dezvolta site-ul
dumneavoastr.
9 Dreamweaver permite vizualizarea paginilor Web n diverse navigatoare, pe
diferite platforme, dar importul de fiiere create cu alte programe poate fi o
operaie destul de pretenioas.
9 Dreamweaver a primit numeroase distincii internaionale fiind de departe
numrul 1 n top-ul aplicaiilor Web.
Stabilii obiectivele site-ului

Dreamweaver MX
dumneavoastr
nainte de a v lansa n construcia site-ului dumneavoastr, ncercai s

rspundei la ct mai multe din ntrebrile listate mai jos. La cteva
dintre ele putei rspunde pe loc; pentru celelalte vei gsi rspunsul
puin mai trziu. Succes!
9 Care sunt obiectivele site-ului dumneavoastr?

5
9 Cine sunt vizitatorii site-ului dumneavoastr?
9 Cine va lucra pe site-ul dumneavoastr? Cte persoane cu sarcini
precise n dezvoltarea i ntreinerea site-ului trebuie s coordonai?
9 Ce proceduri vei utiliza pentru colectarea textului i a imaginilor ce
aparin site-ului dumneavoastr?
9 Care este modul de organizare al fiierelor site-ului dumneavoastr?
9 Ce fiiere multimedia Flash, real Audio va conine site-ul
dumneavoastr?
9 Care sunt funciile interactive pe care dorii s le conin site-ul
dumneavoastr?
9 Care sunt aplicaiile de care avei nevoie pentru a obine funcii
particulare (de exemplu Macromedia Flash pentru animaii vectoriale)?
9 Care este sistemul de navigare ce se adapteaz cel mai bine site-ului
dumneavoastr?
9 Cum vei administra extinderile ulterioare ale site-ului dumneavoastr?
Principalele componente
Dreamweaver MX
Dreamweaver
La prima privire, Dreamweaver poate prea descurajant! Nu se poate

spune c totul vorbete de la sine! Funciile 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 vei convinge c nu exagerez
cu nimic! S trecem la treab!
Deschidei Dreamweaver MX (via Start Programs Macromedia

Macromedia Dreamweaver MX) i analizai caseta de dialog care se
afieaz (figura 1.1).
6
Figura 1.1
Sub Windows, Dreamweaver MX v propune dou prezentri:
9 un spaiu de lucru integrat ntr-o singur fereastr care conine

toate elementele (Dreamweaver MX Workspace);
9 un spaiu de lucru flotant care seamn cu cel de la versiunea 4

Dreamweaver (Dreamweaver 4 Workspace).
Atunci cnd lansai Dreamweaver pentru prima dat va trebui s

selectai una din opiunile urmtoare:
9 Dreamweaver MX Workspace spaiu de lucru integrat care

utilizeaz interfaa MDI (Multiple Document Interface) n care
toate ferestrele documentului i toate panourile sunt reunite
ntr-o fereastr mare a aplicaiei, grupurile de panouri fiind
ancorate n dreapta. Aceasta este prezentarea recomandat
majoritii utilizatorilor.
9 Dreamweaver MX Workspace, Home Site/Coder-Style acelai

spaiu de lucru integrat, dar grupurile de panouri sunt ancorate
7
n stnga, ntr-o prezentarea similar cu aceea utilizat de
Macromedia HomeSite i Macromedia ColdFusion Studio.
Ferestrele documentului se afieaz n mod Code HTML. Pentru
a alege aceast prezentare, selectai opiunea Dreamweaver MX
Workspace i apoi selectai opiunea Home Site/Coder Style.
9 Dreamweaver 4 Workspace spaiul de lucru utilizat n

Dreamweaver 4, unde fiecare document se afieaz ntr-o
fereastr flotant individual. Grupurile de panouri sunt
ancorate mpreun, dar ele nu sunt ancorate n aceeai
fereastr a aplicaiei. Aceast prezentare este recomandat
numai utilizatorilor Dreamweaver 4 care prefer conservarea
unui spaiu de lucru care le este familiar.
Remarc. Dac dorii s schimbai ulterior spaiul de lucru, executai clic pe: Edit
Preferences categoria General Change Workspace.
Evident, spaiul de lucru este locul n care dumneavoastr elaborai

paginile Web. El const dintr-o fereastr principal care afieaz pagina
Web i o serie de panouri (flotante) i de ferestre care v procur toate
instrumentele necesare activitii de creare pagini Web. Spaiul 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 lucrri, vom prezenta Dreamweaver MX (sub Windows), dup
cum urmeaz:
9 Dreamweaver 4 workspace.
9 Dreamweaver MX workspace.
8
Dreamweaver 4 Spaiul de lucru

workspace
Fereastra documentului
n caseta de dialog Workspace Setup (figura 1.2) selectai opiunea
Dreamweaver 4 Workspace i n continuare executai clic pe butonul OK
(figura 1.2).
Figura 1.2
Pe ecranul monitorului dumneavoastr se afieaz fereastra

documentului, panourile flotante (Insert, inspectorul de proprieti,
Launcher), Panel Group, bara de meniuri, bara de stare (figura 1.3).
Fereastra documentului (o pagin alb al crei cod HTML este

rudimentar) este ncrcat n spaiul de lucru Dreamweaver 4. Aici este
locul n care introducei text, imagini i elemente care se afieaz
simultan n browser-ele Web ale vizitatorilor dumneavoastr.
9
Figura 1.3
Remarc. Dreamweaver include opiuni care permit crearea paginilor Web n funcie de
navigatoarele de care dispunei.
Panourile flotante
Panourile flotante Dreamweaver 4 workspace ofer un acces rapid la
cele mai importante funcii Dreamweaver. Cele trei panouri (Insert,
Properties, Launcher) sunt elemente eseniale ale interfeei
Dreamweaver. n mod implicit ele sunt afiate deasupra ferestrei
documentului dar putei modifica aceast opiune via Edit Preferences
Categoria Panels. De asemenea putei deplasa i combina cele trei
panouri. Toate panourile pot fi accesate din meniul Window. Dac dorii,
putei masca toate panourile afiate via View Hide panels.
Panoul Insert conine 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 proprieti permite vizualizarea, modificarea

proprietilor unui element al paginii (text, tabel, imagine etc.).
Inspectorul de proprieti se identific puin mai greu ntruct numele
su nu figureaz n bara de titlu a panoului.
n figura 1.5 a fost selectat imaginea situat n colul din stnga sus.
Inspectorul de proprieti afieaz instantaneu caracteristicile sau
atributele acestei imagini (lungime, lime, aliniere, URL-ul etc.).
11
Figura 1.5
Remarci:
9 Putei lsa deschis panoul Properties pe toat durata lucrului.
9 Inspectorul de proprieti nu permite accesarea tuturor atributelor unui
element (vezi opiunea Page Properties, din meniul Modify) dar putei
parametriza atributele cele mai des folosite.
9 Pentru a afia mai multe atribute ale obiectului selectat, executai clic pe
butonul situat n colul din dreapta jos al panoului Properties.
Panoul Launcher conine icon-uri (figura 1.6) care permit accesul

rapid la urmtoarele funcii 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 funciile afiate n panoul Launcher vor fi studiate n cadrul acestei
lucrri (vezi conversaiile urmtoare).
12
Bara de meniuri
n partea de sus a ferestrei principale Dreamweaver 4 workspace se
gsete bara de meniuri (figura 1.7).
Figura 1.7
Remarc. Meniurile afiate n bara de meniuri (File, Edit, View, Insert, Modify, Text,
Commands, Site, Window, Help) permit accesarea tuturor funciilor Dreamweaver 4
workspace (unele dintre ele le gsii n panourile flotante; anumite funcii nu sunt
disponibile dect n meniuri).
Bara de stare
Bara de stare se afieaz la baza ferestrei principale Dreamweaver 4
workspace (figura 1.8). Ea permite afiarea urmtorilor parametrii: codul
HTML (colul din stnga), dimensiunea ferestrei i a documentului,
timpul de ncrcare i Mini-Launcher (colul 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 numr de funcii Dreamweaver.
Figura 1.9
13
Dreamweaver MX Spaiul de lucru

workspace
Revenii la vechea interfa

Pentru a schimba spaiul de lucru Dreamweaver respectai procedura
descris n continuare.
1. Executai 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 executai

clic pe Change Workspace.
14
Figura 1.11
3. n caseta de dialog care se afieaz (figura 1.12) selectai

opiunea Dreamweaver MX Workspace, iar n continuare
executai clic pe butonul OK.
Figura 1.12
15
Remarc. n caseta de avertisment (Macromedia Dreamweaver MX) executai clic pe OK.
Modificarea este aplicat dup nchiderea apoi deschiderea aplicaiei Dreamweaver.
Pe ecranul monitorului dumneavoastr, n spaiul de lucru Dreamweaver

MX se afieaz:
9 fereastra documentului (figura 1.13).
Figura 1.13
9 fereastra Welcome (figura 1.14) care furnizeaz indicaii privind

configurarea spaiului 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 proprieti) situat n afara

spaiului 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 fiierelor 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 descoperii fereastra documentului Dreamweaver MX.
1. Executai clic pe Untitled 2 pentru a schimba pagina (figura

1.21).
Figura 1.21
2. Executai clic n interiorul paginii Untitled 2 i introducei: Un

text oarecare! (figura 1.22).
18
Figura 1.22
3. Afiai 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, animaii, caractere speciale,
formulare etc. Grupul de panouri Insert conine 12 sub-panouri, fiecare
dintre ele coninnd propriul set de icon-uri pentru diferite funcii:
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 Interfaa utilizator integrat n Windows este o schimbare capital n spaiul
de lucru Dreamweaver MX. Desigur putei utiliza i panourile flotante
(Dreamweaver 4) dar Macromedia v recomand (i eu) s optai 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. Putei afia 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.
Aplicaii
Afiai panoul Answers.
Iat care este procedura pe care v invitm s-o urmai.
1. Executai clic pe Window Answers.

20
Remarc. Se afieaz panoul Answers (figura 1.25).
Figura 1.25
2. Executai clic pe numele panoului pentru a-l reduce.
3. Executai clic pe numele panoului pentru a-l dezvolta.
nchidei panoul Answers.
1. Executai clic pe butonul (figura 1.26).
Figura 1.26
21
2. n meniul local ( ) executai clic pe Close Panel Group (figura
1.27).
Figura 1.27
#_________________________________________________________
___________________________________________________________
___________________________________________________________
___________________________________________________________
___________________________________________________________
Afiai sau mascai rapid panourile.
1. Acionai tasta F4.
Remarc. Panourile sunt mascate (figura 1.28).
Figura 1.28
2. Acionai tasta F4 pentru a afia din nou panourile.
Remarc. Pentru a masca sau afia rapid panourile din dreapta spaiului de lucru apsai
butoanele sau .
Grupai panourile Answers i Files.
1. Selectai panoul Answers care se regrupeaz cu Files (figura 1.29).

22
Figura 1.29
2. n panoul Answers, executai clic pe butonul (figura 1.30).
Figura 1.30
23
3. Executai 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 su sub-panou.

24
Panoul Properties (Inspectorul de proprieti)
n Dreamweaver MX workspace, Inspectorul de proprieti (Properties)
este situat la baza paginii i nu mai acoper spaiul de lucru. El afieaz
proprietile (atributele) elementului selectat.
Remarc. n Dreamweaver MX workspace, Inspectorul de proprieti se identific foarte

uor ntruct numele su, Properties figureaz n bara de titlu a panoului.
n figura 1.33 Inspectorul de proprieti afieaz atributele tabelului

HTML selectat.
Figura 1.33
Remarci:
9 Panoul Launcher este acum situat n colul inferior dreapta al spaiului de
lucru, dar poate fi deplasat (figura 1.34).
Figura 1.34
9 Panoul Launcher conine urmtoarele icon-uri: Show Sites ( ), Show

Assets ( ), Show CSS Style ( ), Show Behaviors ( ), Show History
( ), Show Bindings ( ), Show Server Behaviors ( ), Show
Components ( ), Show Databases ( ).
9 Ultimele funcii: Show Server Behaviors, Show Components i Show
Databases sunt importante dac dorii s legai site-ul dumneavoastr la o
baz de date.
25
Bara de meniuri
Bara de meniuri permite accesarea tuturor funciilor Dreamweaver MX
workspace. Meniurile din bara de meniuri au urmtoarele denumiri: File,
Edit, View, Insert, Modify, Text, Commands, Site, Window, Help.
Bara de stare
Bara de stare permite afiarea urmtorilor parametrii: codul HTML,
dimensiunea ferestrei i a documentului, timpul de ncrcare al paginii i
lansatorul (figura 1.35).
Figura 1.35
Remarci:
9 Selectorul de tag-uri v permite s tii unde suntei n codul HTML; asociat
cu Quick Tag Editor putei modifica rapid codul pentru a optimiza pagina
dumneavoastr Web.
9 Dimensiunea ferestrei v permite s schimbai rapid dimensiunea acesteia.
9 Atenie la timpii de ncrcare ai paginilor Web! Vizitatorii dumneavoastr nu
au timp s atepte!
Aplicaie
Afiai bara de instrumente.
1. Executai clic pe View Toolbars (figura 1.36).
2. Executai clic pe numele barei (Standard), figura 1.36.

26
Figura 1.36
Remarc. Putei schimba poziia barei de instrumente, glisnd bara (figura 1.37).
Figura 1.37
27
Dreamweaver MX Tem
Testai-v cunotinele
1. Prezentai argumentele care au stat la baza alegerii Dreamweaver MX.
2. Care sunt componentele de baz ale spaiului de lucru Dreamweaver.
3. De ce utilizm Dreamweaver 4 workspace?
4. Descriei pe scurt: panoul Insert, inspectorul de proprieti, panoul

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

MX workspace.
6. Cum afiai/mascai rapid panourile: Design, Code, Application, Files,

Answers?
Vizitai site-urile
9 www.macromedia.com
9 www.djtracyyoung.com
Conversaia 2
Creai un site Web cu Dreamweaver MX
f Dreamweaver MX Creai un site nou
f Dreamweaver MX workspace Definii local site-ul dumneavoastr
f Dreamweaver 4 workspace Definii local site-ul dumneavoastr
Dreamweaver MX Creai un site nou
tiu c suntei nerbdtori s ncepei s lucrai la prima pagin Web cu

Dreamweaver, dar este bine s mai ateptai o conversaie n care
vei nva cum s creai local un site nou, urmnd ca dup aceea pe
structura site-ului creat s stocai paginile proprii. Merit acest efort
credei-m, chiar dac la nceput site-urile dumneavoastr nu sunt mari
dar, cu timpul, cu siguran ele vor crete ca orice lucru-n via:
copcel, copcel!
Este bine s ncepei crearea unui site direct pe calculatorul

dumneavoastr, n mod local. Desigur aceasta nu este dect o prim
etap urmnd apoi s-l publicai i nu doar att.
Remarci:
9 Fiecare site pe care l creai cu Dreamweaver trebuie s fie definit.
30
9 n momentul definirii unui site nou, trebuie s creai pe hard-discul
dumneavoastr un folder, numit folder rdcin local (Local Root Folder) n
care vor fi stocate toate fiierele pe care le creai (documente HTML, imagini,
scripturi, animaii etc.).
9 Pentru crearea site-ului dumneavoastr cu Macromedia Dreamweaver MX
folosii dou metode: o metod elementar (Basic) i o metod avansat
(Advanced) pe care le putei aplica att pentru Dreamweaver MX Workspace
ct i pentru Dreamweaver 4 Workspace.
i acum s trecem la treab!
Dreamweaver MX Definii local site-ul dumneavoastr

workspace
Utilizai categoria Local Info

Macromedia Dreamweaver MX propune dou soluii 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 invitm s-o urmai dac ai ales
metoda elementar pentru crearea site-ului dumneavoastr, cu
Dreamweaver MX workspace.
1. Executai clic pe Site New Site.
Remarc. Se deschide caseta de dialog Site Definition for (figura 2.1).

31
Figura 2.1
2. Activai zona Basic (figura 2.2).
Figura 2.2
32
3. Introducei de la tastatur, n zona What would you like to
name your site? numele site-ului dumneavoastr (figura 2.3).
Figura 2.3
4. Executai clic pe butonul Next (figura 2.4).
Figura 2.4
5. Rspundei 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? (Dorii s utilizai o tehnologie de tip server:
ASP Java Script, ASP VB Script, , PHP?).
Figura 2.5
6. Executai clic pe butonul Next.

33
7. Indicai modul de lucru: local (opiunea cea mai eficace) sau
direct pe server (nu v recomandm aceast opiune), figura
2.6.
Figura 2.6
8. Executai 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. Selectai folder-ul local (figura 2.8) i executai clic pe butonul

Select.
34
Figura 2.8
Remarc. Dac folder-ul nu exist, executai clic pe pentru a-l crea.
10. n caseta de dialog Site Definition for Site web executai clic pe
butonul Next.
11. Alegei tipul de conexiune la server. Pentru moment optai

pentru None (figura 2.9).
Figura 2.9
12. Executai clic pe butonul Next.
Remarc. n caseta de dialog Site Definition for Site web se afieaz 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 executai clic pe
butonul Done.
Remarc. n grupul de panouri Files, n zona Site putei vizualiza noul dumneavoastr
site (figura 2.11).
Figura 2.11
36
Metoda avansat (Advanced)
Iat care este procedura pe care trebuie s-o urmai dac ai ales metoda
avansat pentru crearea site-ului dumneavoastr cu Dreamweaver MX.
2. n caseta de dialog Site Definition for, care se deschide

activai zona Advanced (figura 2.12).
Figura 2.12
3. Executai clic pe una din categoriile afiate (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. Modificai opiunile corespunztoare categoriei Local Info. n

figura 2.14 sunt listate toate opiunile pentru categoria Local
Info: Site Name, Local Root Folder, Default Images Folder,
HTTP Address, Cache.
Figura 2.14
5. n caseta Site Definition, executai clic pe butonul OK.

38
Utilizai categoriile: Remote Info, Design Notes, Site Map
Layout, File View Columns
Identificai n caseta de dialog Site Definition for Site web urmtoarele
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 funciile UltraDev ale Dreamweaver-ului cu o
baz de date.
9 Categoria Cloaking permite excluderea tuturor folder-elor i fiierelor

specifice operaiilor efectuate n cadrul site-ului ceea ce nseamn c
folder-ele i fiierele proiectate nu pot fi nici alterate nici descrcate n
site. Aceast funcie este practic dac dorii s conservai diferite
seciuni ale unui site fr 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 uitai s salvai toate fiierele care alctuiesc site-ul dumneavoastr Web
n folder-ul rdcin local (Local Root Folder). Dreamweaver MX v
avertizeaz de fiecare dat cnd dorii s utilizai un fiier care nu se gsete
n folder-ul local (figura 2.15).
Figura 2.15
39
9 Putei modifica parametrii unui site, via Site Edit Sites. n lista site-urilor
care se afieaz, selectai site-ul corespunztor i apoi executai clic pe unul
din butoanele: New, Edit, Duplicate, Remove, Export (permite salvarea tuturor
caracteristicilor site-ului ntr-un fiier XML), Import (permite crearea unui nou
site pornind de la caracteristicile altui site). n final, executai clic pe butonul
Done (figura 2.16).
Figura 2.16
9 Cnd creai mai multe site-uri, putei accesa pe oricare dintre acestea, via Site
Site Files.
Dreamweaver 4 Definii local site-ul dumneavoastr

workspace
Utilizai 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. Asigurai-v c

aceasta este selectat (vezi figura 2.17).
2. Introducei 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 (cmpul) Local Root Folder (Folder-ul rdcin local)

introducei calea de acces (figura 2.19) sau executai 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. Selectai folder-ul pe care dorii s-l utilizai i executai clic pe
Select. Calea pe care ai ales-o ctre folder-ul rdcin local se
va afia n zona Local Root Folder (figura 2.22).
Figura 2.22
5. Activai 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. Activai opiunea Enable Cache (figura 2.24).
Figura 2.24
Remarc. Opiunea Enable Cache permite aplicaiei Dreamweaver s creeze un fiier de

cache care ajut la administrarea site-ului, garantnd c link-urile sunt actualizate n
mod permanent. Sfatul nostru: facei cum credei, dar utilizai aceast opiune.
43
7. n caseta de dialog Site Definition for executai clic pe butonul
OK.
Utilizai categoriile: Remote Info, Design Notes, Site Map

Layout, File View Columns
Identificai n caseta de dialog Site Definition for urmtoarele patru
categorii: Remote Info, Design Notes, Site Map Layout, File View
Columns.
9 Dreamweaver dispune de funcii FTP care permit descrcarea

paginilor Web pe un server Web dedicat. n caseta de dialog Site
Definition for, categoria Remote Info introducei informaiile de
conexiune corespunztoare (figura 2.25). Cnd lucrai n grup, utilizai
opiunea de extragere i arhivare pentru a cunoate n orice moment
evoluia site-ului dezvoltat de mai multe persoane.
Figura 2.25
44
9 Utilizai categoria Design Notes (note de concepie). n caseta de
dialog Site Definition for, categoria Design Notes introducei
informaiile care controleaz modul n care Dreamweaver utilizeaz
Design Notes (figura 2.26).
Figura 2.26
Utilizai Design Notes atunci cnd realizai un proiect de site Web n

echip pentru a v informa colegii (programatori, designeri, specialiti
n animaii etc.) de activitile prestate (modificri de script-uri, sursa
unei imagini etc.). Aceste note de concepie (Design Notes) pot fi
asociate documentelor sau obiectelor incluse ntr-o pagin Web.
Design Notes funcioneaz ca un tag de comentarii HTML fr ca
acesta s fie afiat n browser. Dar, Design Notes merge puin mai
departe! Contrar tag-urilor de comentarii (COMMENT) HTML vizitatorii
nu pot vedea coninutul Design Notes chiar dac afieaz fiierul surs
HTML al paginii dumneavoastr. Putei descrca Design Notes pentru
a le partaja cu alte persoane care acceseaz server-ul dumneavoastr
sau putei preveni aceast operaie pentru a pstra confidenialitatea
comentariilor dumneavoastr.
9 Utilizai 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 uoar ntruct
45
beneficiai de o reprezentare grafic ierarhic a paginilor i a
link-urilor. Site Map Layout este un instrument de mentenan a
fiierelor i a folder-elor care structureaz site-ul dumneavoastr. n
figura 2.27 se prezint diagrama (harta) site-ului care conine
structura crii pe care o lecturai.
Figura 2.27
9 Utilizai categoria File View Columns pentru a modifica fereastra

site-ului dumneavoastr. Atunci cnd lucrai n echip, informaiile
provenind din Design Notes sau informaiile personale pot fi listate n
fereastra folder-ului local adugnd dup caz una sau mai multe
coloane.
46
Dreamweaver MX Tem
Testai-v cunotinele
1. Ce soluii propune Dreamweaver MX pentru crearea site-ului
dumneavoastr?
2. Descriei pe scurt metoda elementar (BASIC) Dreamweaver MX

workspace pentru crearea unui site.
3. Descriei 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)?
Vizitai site-urile
9 www.macromedia.com/fr/support/
9 www.echomedium.com
9 www.projectseven.com/dreamweaver
Conversaia 3
Introducei i formatai caracterele cu

Dreamweaver MX
f Dreamweaver 4 workspace, MX workspace Introducei text
f Dreamweaver 4 workspace, MX workspace Inserai caractere speciale
f Dreamweaver 4 workspace, MX workspace Inserai caractere proprii
HTML
f Dreamweaver 4 workspace, MX workspace Aplicai unui text formatele
fizice i logice
f Dreamweaver MX workspace Inserai abrevieri i acronime
f Dreamweaver 4 workspace, MX workspace Scriei un text cu exponent
sau cu indice
f Dreamweaver 4 workspace, MX workspace Definii tipul de font
f Dreamweaver 4 workspace, MX workspace Definii dimensiunea fontului
f Dreamweaver 4 workspace, MX workspace Definii culorile
f Dreamweaver MX workspace Creai propriile stiluri HTML
Dreamweaver 4 Introducei text

workspace
Acum, dup ce site-ul dumneavoastr a fost definit putei ncepe s

creai pagini Web, pentru a-l umple.
48
Pentru a nu ne complica viaa (care trebuie trit i nu consumat) vom
pstra aceeai aplicaie pe care am folosit-o la prezentarea
(X)HTML-ului.
Bine ai venit! Felicitri pentru rbdarea de a ne fi descoperit!
Iat care este procedura Dreamweaver 4 workspace pe care trebuie s-o

urmai.
1. Executai clic pe butonul Code and Design View din bara de

instrumente, pentru a vizualiza n acelai timp codul surs
(HTML) i pagina (figura 3.1).
Figura 3.1
Se obine imaginea din figura 3.2, n care pagina dumneavoastr se

afieaz la baza ferestrei, iar codul surs HTML, pe care de fiecare dat
v invitm s-l analizai se afieaz n partea superioar a ferestrei.
Figura 3.2
49
nainte de a executa primul pas al procedurii asigurai-v c v aflai n
spaiul de lucru Dreamweaver 4 workspace (vezi Conversaia 1).
Executai clic n partea de sus a paginii (complet vid) pentru a poziiona
cursorul (figura 3.3).
Figura 3.3
Remarci:
9 Metoda cu modul dublu de afiare (pagin i cod) este foarte practic atunci
cnd dorii s efectuai modificri n codul surs i s vedei imediat rezultatul
n pagin (se poate i invers).
9 Putei efectua toate modificrile dorite. Atunci cnd selectai un element
ntr-una din ferestre (cod sau pagin) echivalentul su este de asemenea
selectat n cealalt fereastr.
9 Putei modifica dimensiunea celor dou ferestre (cod, pagin),
redimensionnd separatorul orizontal al celor dou ferestre.
9 Dac dorii ca pagina dumneavoastr s se afieze n partea superioar a
ferestrei i codul la baza ferestrei, executai clic pe View Design View on
Top sau alegei aceeai comand n meniul butonului (View Options) din
bara de instrumente.
9 Pentru a reveni la pagina dumneavoastr, executai clic pe butonul
(Show Design View).
2. Dai un titlu (Pagina 1) paginii.
Pentru a da un titlu paginii cu Dreamweaver 4, folosii 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. Executai clic n zona Title situat pe bara de instrumente.
2.2. Introducei textul: Pagina 1 (figura 3.4).
2.3. Acionai tasta Enter.
Figura 3.4
Remarci:
9 Dreamweaver 4 workspace atribuie n mod automat unui document nou titlul:
Untitled Document.
9 ncercai s modificai formatarea textului care reprezint titlul paginii! Nu vei
reui!
9 Titlul paginii se afieaz n bara de titlu a navigatorului (figura 3.5).
Figura 3.5
3. Introducei de la tastatur, n fereastra Document, textul

specificat (figura 3.6).
Figura 3.6
51
4. Analizai codul HTML generat (figura 3.7).
Figura 3.7
Remarci:
9 Utilizai litere mari pentru tag-urile HTML pentru a le face s ias n eviden
atunci cnd analizai codul. Executai 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, alegei <UPPERCASE>
din meniul derulant Default Tag Case i executai clic pe butonul OK pentru a
nchide caseta de dialog (Preferences), figura 3.9.
Figura 3.9
9 Selectai tag-ul <HTML> n partea de sus a ecranului splitat (figura 3.10) i

executai clic pe butonul Reference <?> de pe bara de instrumente (figura
3.10).
Figura 3.10
9 Se deschide panoul Reference n care se afieaz informaiile privind tag-ul

selectat <HTML> (figura 3.11).
Figura 3.11
53
9 Procedai n mod similar cu restul tag-urilor afiate sau, deschidei panoul
Reference, via Window Reference, selectai opiunea OREILLY HTML
Reference n meniul derulant BOOK, iar n meniul derulant Tag selectai pe
rnd tag-urile despre care dorii s aflai informaii. Pentru fiecare tag
selectat, se vor afia n partea de jos a panoului informaiile corespunztoare
(figura 3.12).
Figura 3.12
9 Citii Conversaia 3, paragraful HTML4 Introducei text (Liviu Dumitracu,

(X)HTML, Editura Universitii din Ploieti, 2003).
5. Salvai documentul n folder-ul rdcin local, via File Save

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

alegei un navigator din fereastra deschis.
sau,
9 Acionai tasta F12 pentru vizualizarea paginii n navigatorul

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

bara de instrumente i selectai browser-ul n care dorii
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 fiier temporar
(D:\Site\TMP38bfw8jnh0.htm); numele fiierului ncepe cu sufixul TMP.
9 Macromedia permite definirea a cel mult 20 de browser-e! Va trebui s avei
instalate n calculatorul dumneavoastr aceste aplicaii nainte de a cere
vizualizarea paginilor dumneavoastr Web. n ceea ce ne privete, am definit
dou browser-e: Microsoft Internet Explorer i Netscape Navigator, ambele
gratuite i disponibile pe Internet.
55
Dreamweaver MX Introducei text

workspace
Cu Dreamweaver MX workspace putei crea mai multe tipuri de pagini

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

s-o urmai pentru a crea o pagin Web care conine text (Bine ai venit!
Felicitri pentru rbdarea de a ne fi descoperit! vezi Dreamweaver 4
workspace) n conformitate cu codul XHTML.
Pentru a completa site-ul dumneavoastr, adugai pagini noi, ori de

cte ori este necesar.
1. Executai clic pe File New (figura 3.15).
Figura 3.15
Remarc. Se afieaz caseta de dialog New Document (figura 3.16).

56
2. n caseta de dialog New Document executai clic pe General
(opiune selectat implicit figura 3.16).
Figura 3.16
Remarc. Pentru a utiliza un model citii conversaia 14.
3. n lista Category executai clic pe Basic Page (figura 3.17).
4. Executai clic pe HTML n lista Basic Page (figura 3.17).
Figura 3.17
57
5. Activai opiunea Make Document XHTML Compliant (figura
3.18).
Figura 3.18
6. Executai clic pe butonul Create (figura 3.19).
Figura 3.19
Remarc. Se afieaz 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) salvai documentul. Numele fiierului html sub
care salvai documentul va nlocui pe cel implicit atribuit de Dreamweaver MX
workspace.
58
7. Dai un titlu (Pagina 1) paginii. Folosii una din metodele
prezentate mai jos.
Metoda 1 aceeai ca la Dreamweaver 4 workspace;
Metoda 2 aceeai ca la Dreamweaver 4 workspace.
8. Executai clic pe butonul (Code and Design View) situat pe

bara de instrumente i introducei de la tastatur textul
specificat (figura 3.21).
Figura 3.21
9. Analizai codul XHTML generat (figura 3.22).
Figura 3.22
59
Remarci:
9 Utilizai meniul Help Using Dreamweaver, seciunea Index pentru a afia
informaii despre tag-ul xml. Respectai procedura descris n continuare.
Executai clic pe Help Using Dreamweaver;
n caseta de dialog care se afieaz, Using Dreamweaver MX, n zona:
Type in keyword to find:, tastai xml (figura 3.23).
Figura 3.23
Executai clic pe butonul Display.

n caseta de dialog Topics Found, n zona Title, executai 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 afieaz About XML
(figura 3.25).
9 n caseta de dialog Using Dreamweaver MX, seciunea Index, n zona Type in
the keyword to find, tastai xhtml. Acionai butonul Display i citii informaiile
care se afieaz n partea dreapt a ferestrei de dialog.
Figura 3.25
9 Utilizai meniul Help, seciunea Search pentru a afia informaiile despre tag-ul
doctype (tastai doctype n zona Type in the keyword to find:; executai clic
pe List Topics i apoi pe butonul Display).
9 Citii Conversaia 3, paragraful XHTML Introducei text (Liviu Dumitracu,
10. Salvai documentul n folder-ul rdcin local Site.
10.1. Executai clic pe File Save.
Remarc. Dac bara de instrumente Standard este afiat, executai clic pe (Save).
Pentru a salva toate documentele, executai clic pe (Save all) (figura 3.26).
Figura 3.26
61
10.2. n zona file name tastai numele fiierului.
10.3. Executai clic pe butonul Save.
11. Vizualizai pagina Web ntr-un browser.
Pentru a vizualiza pagina Web ntr-un browser folosii una din metodele
(Metoda 3) prezentate pentru Dreamweaver 4 workspace.
Metoda 3
1. Executai clic pe butonul (Preview/Debug in browser)

(figura 3.27).
Figura 3.27
2. Executai 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. nchidei fereastra navigatorului.
Remarc. Pentru a testa pagina ntr-un browser, Dreamweaver MX creeaz un fiier

temporar al crui nume este afiat n bara de adrese (figura 3.30).
Figura 3.30
63
Dreamweaver 4 Inserai caractere speciale

workspace
n Dreamweaver caracterele speciale sunt ceea ce n HTML numim

entiti de caractere (caractere speciale - , ; caractere accentuate
, ; caractere care conin diacritice , ; simboluri matematice , ).
Pentru a insera caractere speciale cu Dreamweaver 4 workspace, folosii

una din metodele prezentate n continuare.
9 Metoda 1 Meniul Insert, via Special Characters;
9 Metoda 2 Panoul Insert, via Characters.
Iat cum inserm cu Dreamweaver 4 textul:
2003 LUMINA BLND
care conine caracterul special (copyright drept de autor).
Metoda 1
1. Introducei textul menionat lsnd un spaiu (blanc) naintea

lui 2003.
Figura 3.31
2. Executai clic n spaiul dinaintea lui 2003.
Figura 3.32
64
3. Executai clic pe Insert Special Characters Copyright
(figura 3.33).
Figura 3.33
Remarc. Caracterul special copyright se afieaz n pagina document (vezi figura

3.34).
Figura 3.34
65
Figura 3.35
Remarci:
9 n (X)HTML toate entitile de caractere ncep cu & i se termin cu ;.
9 Citii conversaia 3, paragraful HTML 4 Introducei caractere speciale (Liviu
Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
9 Folosii seciunea Index din meniul Help Using Dreamweaver pentru a afia
informaiile care se refer la entitatea de caractere © (special characters
inserting) (figura 3.36).
Figura 3.36
Figura 3.37
66
Metoda 2
1. Afiai panoul Insert, via Window t Insert.
2. Executai clic pe comanda Characters din meniul derulant al

panoului Insert (figura 3.38).
Remarc. Se afieaz icon-urile caracterelor speciale din Dreamweaver 4 workspace

(figura 3.39)
Figura 3.38 Figura 3.39
3. Executai clic n spaiul de dinaintea lui 2003 (figura 3.40).
Figura 3.40
4. Executai clic pe butonul Copyright din panoul Insert subpanoul

Characters (figura 3.39).
Remarc. n spaiul de dinaintea lui 2003 se insereaz caracterul (vezi figura 3.41).
67
Figura 3.41
5. Inserai icon-ul de conformitate i analizai codul

HTML generat (figura 3.42).
Figura 3.42
6. Vizualizai pagina Web ntr-un browser (figura 3.43).
Figura 3.43
68
Dreamweaver MX Inserai caractere speciale

workspace
Pentru a insera caractere speciale cu Dreamweaver MX workspace,

folosii una din metodele prezentate n continuare.
9 Metoda 1 Meniul Insert, via Special Characters;
9 Metoda 2 Grupul de panouri Insert.
Iat cum inserm cu Dreamweaver MX workspace textul:
2003 LUMINA BLANDA,
care conine caracterul special (copyright).
Metoda 2
1. Afiai grupul de panouri Insert, via Window Insert (figura

3.44).
Figura 3.44
2. Executai clic pe subpanoul Characters (figura 3.45).
Figura 3.45
Remarc. Se afieaz icon-urile caracterelor speciale din Dreamweaver MX (figura 3.46).
Figura 3.46
3. Introducei textul: 2003 LUMINA BLANDA, lsnd un spaiu

naintea lui 2003 (figura 3.47).
69
Figura 3.47
4. Executai clic n spaiul de dinaintea lui 2003.
5. n subpanoul Characters, executai clic pe butonul

(copyright), figura 3.48.
Figura 3.48
Remarc. n spaiul de dinaintea lui 2003 se afieaz caracterul (figura 3.49).
Figura 3.49
70
Figura 3.50
Figura 3.51
Dreamweaver 4 Inserai caractere proprii HTML

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

folosii una din metodele prezentate n continuare.
9 Metoda 1 Meniul Insert, via Special Characters Other;
9 Metoda 2 Panoul Insert.
Iat cum inserai cu Dreamweaver 4 workspace caracterul propriu HTML

& n textul: Vizitai magazinele C&A!
71
Metoda 2
1. Introducei textul menionat, lsnd un spaiu (blanc) ntre

caracterele C i A (figura 3.52).
Figura 3.52
2. Executai clic n spaiul dintre cele dou caractere (C i A).
Figura 3.53
3. Executai clic pe butonul (Insert Other Character) n panoul

de obiecte Characters (figura 3.54).
Figura 3.54
Remarc. Se afieaz caseta de dialog Insert Other Character.
4. n caseta de dialog Insert Other Character, executai clic pe

caracterul ampersand (&) sau, tastai & n zona Insert.
72
5. n caseta de dialog Insert Other Character executai clic pe
butonul OK.
Remarc. n fereastra document se afieaz caracterul special & (figura 3.55).
Figura 3.55
Figura 3.56
Remarci:
9 Citii Conversaia 3, paragraful HTML 4 Inserai caractere proprii (Liviu
9 Afiai numerotarea liniilor de cod via butonul (Options) Line Numbers
(figura 3.57).
Figura 3.57

73
Figura 3.58
Aplicaie
Introducei urmtorul text (n limba francez) care conine caractere

accentuate (e cu accent grav).
Ma premire page Web est O.K.!
Indicaie. Folosii o tastatur cu caractere franuzeti sau inserai caracterul
special e cu accent grav (è), acionnd butonul din panoul Insert

via Insert Other Character.
Dreamweaver MX Inserai caractere proprii (X)HTML

workspace
Pentru a insera caractere proprii (X)HTML cu Dreamweaver MX, folosii

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

Dreamweaver 4);
Iat cum inserm cu Dreamweaver MX workspace textul Vizitai

magazinele C&A care conine caracterul propriu (X)HTML &
(ampersand).
Metoda 2
74
1. Introducei textul, lsnd un spaiu ntre caracterele C i A.
2. Executai clic n spaiul dintre cele dou caractere (C i A).
3. n grupul de panouri Insert, executai clic pe butonul Other

Character (figura 3.59).
Figura 3.59
Se afieaz caseta de dialog Insert Other Character (figura 3.60).
Figura 3.60
4. n caseta de dialog Insert Other Character, executai clic pe

butonul & (ampersand), dac l gsii (!) sau tastai & n
zona Insert, care afieaz codul (X)HTML corespunztor
caracterului pe care dorii s-l inserai.
5. Executai clic pe butonul OK.
Remarc. n fereastra document se afieaz caracterul special &. (figura 3.61).

75
Figura 3.61
Figura 3.62
Figura 3.63
76
Dreamweaver 4 Aplicai unui text formatele fizice

workspace i logice
Elementele de formatare clasic accesibile n Dreamweaver 4
workspace sunt: bold (ngroat), italic (cursiv), underline (subliniat),
strikethrough (barat sau tiat), teletype (cu pas fix, ca la maina de
scris). Celelalte stiluri big i small nu sunt accesibile n Dreamweaver dar
le putei utiliza direct n HTML 4, cum de altfel ai i fcut-o.
Pentru a aplica unui text formate fizice i logice cu Dreamweaver 4

workspace folosii una din metodele prezentate mai jos:
9 Metoda 1 Meniul Text, via Style;
9 Metoda 2 Inspectorul Properties.
Formatai un text cu caractere ngroate (bolduit) i cursive

(italice)
Iat cum aplicm formatul fizic bold textului: Bine ai venit!.
Metoda 1
1. Selectai textul (figura 3.64).
Figura 3.64
2. Executai clic pe Text Style Bold.

77
Textul selectat se afieaz cu caractere bold (vezi figura 3.65).
Figura 3.65
Figura 3.66
Remarci:
9 Selectai tag-ul <STRONG>, deschidei panoul Reference i citii informaiile
care se afieaz.
9 Citii conversaia 3, paragraful HTML Aplicai unui text formate fizice i
logice (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
9 Schimbai culoarea liniei de cod <STRONG>Bine ati venit</STRONG> via Edit
Preferences categoria Code Colors.
Figura 3.67
78
Metoda 2
1. Asigurai-v c inspectorul Properties este deschis.
2. Selectai textul.
3. Executai clic pe butonul n inspectorul Properties (figura

3.68).
Figura 3.68
4. Analizai codul HTML generat.
Iat cum aplicm formatul fizic italic textului: Felicitri pentru rbdarea
de a ne fi descoperit!.
Metoda 1
Figura 3.69
2. Executai clic pe Text Style Italic.
Remarc. Textul selectat se afieaz cu caractere italice (vezi figura 3.70).
Figura 3.70
79
Figura 3.71
Remarci:
9 Selectai tag-ul <EM>, deschidei panoul Reference i citii informaiile care se
afieaz.
9 Citii conversaia 3, paragraful HTML Aplicai unui text formate fizice i
4. Vizualizai pagina Web ntr-un browser (3.72).
Figura 3.72
Metoda 2
2. Selectai textul.
3. Executai clic pe butonul I n inspectorul Properties (figura

3.73).
Figura 3.73
Remarc. Metoda 2 se folosete numai pentru aplicarea stilurilor bold (B) i italic (I).
80
Mrii sau micorai un text
W3C a prevzut dou tag-uri (formate fizice) big, small pentru mrirea
sau micorarea 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 aplicm cuvntului venit din fraza Bine ai venit!.
Metoda 1
1. Asigurai-v c butonul (Show Code and Design Views) din

bara de instrumente este activat.
2. Executai clic naintea cuvntului venit din prima fraz afiat

n fereastra de sus a ecranului (conine codul surs HTML),
figura 3.74.
Figura 3.74
81
3. Introducei, n continuare tag-ul <BIG> (figura 3.75).
Figura 3.75
4. Introducei imediat dup cuvntul venit, tag-ul final </BIG>

(figura 3.76).
Figura 3.76
5. Executai 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, executai clic pe butonul
situat n bara de instrumente.
82
Figura 3.78
Aplicaii
Aplicai tag-ul de formatare <small> frazei Felicitri pentru rbdarea de a

ne fi descoperit!. Utilizai metoda 1.
Aplicai tag-ul de formatare <nobr> frazei Universitatea Petrol-Gaze din

Ploieti, tradiie i dinamism.. Utilizai metoda 1.
Metoda 2
Inspectorul Code Inspector afieaz codul surs HTML al paginii curente.

Inspectorul Code Inspector este foarte util atunci cnd dorii s adugai
sau s rectificai un tag la nivel de cod. n orice moment, cu inspectorul
Code Inspector putei vizualiza i modifica codul surs al paginii.
Iat cum utilizm inspectorul Code Inspector pentru inserarea n codul

surs HTML a tag-ului <big> pe care urmeaz s-l aplicm cuvntului
venit din fraza Bine ai venit!.
1. Lansai inspectorul Code Inspector din meniul Window, via

Window Other Code Inspector (figura 3.79).
83
Figura 3.79
Remarc. Se afieaz codul surs al paginii Web (vezi figura 3.80).
Figura 3.80
2. Acionai butonul (View Options) care v permite

parametrizarea modului de afiaj al codului surs (figura 3.81).
84
Figura 3.81
Remarci:
9 Opiunea Word Wrap permite citirea cu uurin a unei linii de cod atunci cnd
limea ferestrei este prea mic pentru a vizualiza totul pe o singur linie.
9 Opiunea Line Numbers permite numerotarea fiecrei linii a codului surs.
9 Opiunea Highlight Invalid HTML permite punerea n eviden prin fenomenul
de clipire a erorilor la nivel de cod HTML.
9 Opiunea Syntax Coloring permite afiarea n culori a diferitelor pri ale
codului surs n funcie de preferinele definite.
9 Opiunea Auto Indent permite indentarea automat a anumitor pri ale
codului n funcie de preferinele definite.
3. Executai clic pe prima opiune Word Wrap din meniul de

opiuni (figura 3.82).
Figura 3.82
85
4. Introducei n codul surs HTML tag-ul <BIG>, naintea
cuvntului venit i tag-ul </BIG> dup cuvntul venit
(figura 3.83).
Figura 3.83
5. Executai clic pe butonul Refresh Design View din bara de

instrumente.
6. Acionai tasta F10 pentru a reveni n fereastra document.
Aplicaie
Aplicai tag-ul <small> frazei Felicitri pentru rbdarea de a ne fi

descoperit!. Utilizai metoda 2.
Metoda 3
Quick Tag editor permite verificarea, adugarea, 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
modificri n codul surs, n mod rapid, fr a deschide fereastra n care
se afieaz 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 apsai pe CTRL+T.
Iat cum utilizm aplicaia Quick Tag Editor pentru a insera n codul
surs HTML, tag-ul <big> care urmeaz s fie aplicat cuvntului venit
din fraza Bine ai venit!. Se va utiliza modul Insert HTML.
1. n fereastra Document, selectai cuvntul venit din fraza Bine

ai venit! (figura 3.84).
Figura 3.84
2. Executai clic pe butonul Quick Tag Editor din inspectorul

Properties, sau acionai simultan tastele CTRL+T (figura 3.85).
Figura 3.85
Fereastra Quick Tag Editor se deschide cu meniunea Wrap Tag (vezi

figura 3.86).
87
Figura 3.86
Remarc. Aplicaia Quick Tag Editor mai poate fi lansat cu una din metodele:
9 acionnd simultan CTRL+T;
9 din meniul Modify, via Modify t Quick Tag Editor;
9 executai clic cu butonul drept al mouse-ului pe orice obiect i
selectai comanda Edit Tag din meniul derulant.
3. Selectai tag-ul big (figura 3.87).
Figura 3.87
Remarci:
9 Tag-ul <big> mai poate fi selectat introducnd 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. Acionai tasta Enter pentru ca tag-ul <big> i </big> s fie

acceptate (figura 3.89).
Figura 3.89
5. Acionai nc o dat tasta Enter pentru a valida modificarea

efectuat.
6. Vizualizai pagina Web ntr-un navigator (3.90).
Figura 3.90
Remarci:
9 Tag-ul <BIG> (element standard W3C) nu se afieaz n Dreamweaver.
9 Analizai codul surs HTML.
9 Dreamweaver adaug tag-ul <BIG> naintea obiectului selectat (venit)
respectiv tag-ul de nchidere </BIG> dup obiectul (venit) selectat.
89
Dai ordin s clipeasc un text n pagin
W3C a prevzut 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 ai venit s clipeasc, introducei tag-ul <blink>

n codul surs HTML. Utilizai una din cele patru metode prezentate
V lsm singuri s executai cu plcere ordinul s clipeasc textul

Bine ai venit!. Dac-i ordin!...
Dreamweaver MX Aplicai unui text formatele fizice

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

9 Metoda 2 Inspectorul Properties;
Iat cum aplicm formatul fizic bold, textului Bine ai venit!
Metoda 3
1. Asigurai-v c grupul de panouri Insert este deschis.
2. Selectai textul.
3. n grupul de panouri Insert, executai clic pe subpanoul Text

(figura 3.91).
Figura 3.91
Remarc. Dreamweaver afieaz butoanele B I (figura 3.92).

90
Figura 3.92
4. Executai clic pe butonul (figura 3.93)
Figura 3.93
n fereastra document textul selectat se afieaz 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> aplicai urmtoarea procedur:
Executai clic pe Edit Preferences;
n categoria General, dezactivai opiunea Use <strong> and <em> in
place of <b> and <i>.
9 Citii conversaia 3, paragraful XHTML Aplicai unui text formate fizice i
Figura 3.96
Iat cum aplicm formatul fizic italic, textului Felicitri pentru rbdarea
de a ne fi descoperit!.
Metoda 3
1. Asigurai-v c grupul de panouri Insert este deschis.
2. Selectai textul.
3. n grupul de panouri Insert, executai clic pe subpanoul Text.
4. Executai clic pe butonul (figura 3.97).
Figura 3.97
Remarc. n fereastra document textul selectat se afieaz 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> aplicai urmtoarea procedur:
Executai clic pe Edit Preferences;
n categoria General, dezactivai opiunea Use <strong> and <em> in
place of <b> and <i>.
9 Citii conversaia 3, paragraful XHTML Aplicai unui text formate fizice i
Figura 3.100
93
Mrii sau micorai un text
Iat cum introducem n codul surs XHTML tag-ul de formatare <big>
pe care urmeaz s-l aplicm cuvntului venit din fraza Bine ai
venit!.
Indicaie. Pentru a aplica unui text formatul fizic big cu Dreamweaver

MX workspace, folosii una din cele patru metode prezentate pentru
Dreamweaver 4 workspace. Analizai codul XHTML generat (figura
3.101).
Figura 3.101
Dreamweaver MX Inserai abrevieri i acronime

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

acronim cu Dreamweaver MX workspace, folosii grupul de panouri
Insert din care selectai subpanoul Text.
Iat cum procedm pentru a insera abrevierea PL S, de la Ploieti Sud.

94
1. Introducei abrevierea i selectai-o (figura 3.102).
Figura 3.102
2. n grupul de panouri Insert, executai clic pe Text abbr.

(figura 3.103).
Figura 3.103
Remarc. Se afieaz caseta de dialog Abbreviation.
3. n caseta de dialog Abbreviation, n zona Full Text introducei

textul complet Ploieti Sud iar n zona Language introducei ro
(pentru Romnia), figura 3.104.
Figura 3.104
5. Salvai documentul.

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

procedura descris n continuare.
1. Introducei acronimul i selectai-l.
2. n grupul de panouri Insert, executai clic pe Text W3C.
3. n caseta de dialog Acronym, care se afieaz, n zona Full Text

introducei textul complet al acronimului: Universitatea
Petrol-Gaze (figura 3.107).
Figura 3.107
96
4. Introducei ro (pentru Romnia) n zona Language i executai
clic pe butonul OK.
Figura 3.108
Figura 3.109
Remarc. Cnd poziionai pointer-ul pe acronim se afieaz textul integral pe care l-ai
introdus n zona Full Text.
97
Dreamweaver 4 Scriei un text cu exponent sau cu

workspace indice
Consoriul W3C a prevzut 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, folosii 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, ntruct Quick Tag Editor permite efectuarea

modificrilor n mod rapid, fr 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), tastai:
LUMINABLANDA2=LUMINABLANDA*LUMINABLANDA.
98
Figura 3.110
2. n fereastra Document selectai numai cifra 2 (figura 3.111).
Figura 3.111
3. Activai Quick Tag Editor prin icon-ul su ori direct de la

tastatur (CTRL+T).

figura 3.112).
Figura 3.112
99
4. Selectai tag-ul de inserat, sup (figura 3.113).
Figura 3.113
Remarc. Cnd se afieaz lista de tag-uri, tastai s. Quick Tag Editor

selecteaz primul tag care ncepe cu s (sau tastai rapid su). Derulai lista
tag-urilor pn identificai i selectai tag-ul <sup>.
5. Acionai tasta Enter.
6. Acionai nc o dat tasta Enter.
8. Vizualizai 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), tastai:
Figura 3.115
2. Selectai din LUMINABLANDA12 numai cifra 1 (figura 3.116).
Figura 3.116
3. Acionai Quick Tag Editor.

figura 3.117).
101
Figura 3.117
4. Tastai ntre cele dou paranteze sub. Se afieaz lista de

tag-uri cu tag-ul sub selectat (figura 3.118).
Figura 3.118
6. Acionai nc o dat tasta Enter.
7. Analizai codul XHTML generat.
Figura 3.119
9. Selectai cifra 1 din LUMINABLANDA1 (primul factor din

membrul drept!).
102
10. Repetai paii 3, 4, 5, 6, 7, 8.
11. Selectai cifra 1 din LUMINABLANDA1 (al doilea factor din

membrul drept!).
12. Repetai paii 3, 4, 5, 6, 7, 8.
Dreamweaver MX Scriei un text cu exponent sau cu

workspace
indice
Pentru a scrie cu Dreamweaver MX workspace un text care conine
exponeni sau indici, folosii 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. Executai 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, putei folosi de asemenea tasta
F10.
9 Butonul View Options ( ) v permite parametrizarea modului de afiare a
codului surs (figura 3.121).
Figura 3.121
2. Introducei codul XHTML (figura 3.122):
LUMINABLANDA<SUP>2</SUP>=LUMINABLANDA*LUMINABLANDA
Figura 3.122
3. Tastai 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. Executai clic pe butonul (Show Code View), figura 3.124.
Figura 3.124
2. Introducei codul XHTML
LUMINABLANDA<sub>1</sub><sup>2</sup>=LUMINABLANDA<sub>1
</sub>*LUMINABLANDA<sub>1</sub>
Figura 3.125
105
3. Executai clic pe butonul (Show Code and Design Views)
sau (Show Design View) pentru a reveni n fereastra

document.
Figura 3.126
Dreamweaver 4 Definii tipul de font

workspace
V mai amintii de tag-urile <font>, <basefont> din HTML? Dar de

atributele lor: face, size, color? Ce vremuri, nu-i aa! Ele rmn clasice
n via, dei W3C (World Wide Web Consortium) dorete s le
desfiineze, recomandnd 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 trit! Unde se termin
realitatea, ncepe sperana!
Pentru a aplica unui text fonturi de substituie cu Dreamweaver 4

9 Metoda 2 Meniul Text.

106
Iat cum aplicm textului integral al paginii, fonturi de substituie din
grupul de fonturi: Georgia, Times New Roman, Times, serif disponibile
n Dreamweaver.
1. Selectai textul integral al paginii Web (figura 3.127).
Figura 3.127
2. Deschidei inspectorul Properties, via Window Properties.
3. Derulai caseta Font Combination din inspectorul Properties,

pn identificai i apoi selectai din lista corpurilor de liter,
grupul de fonturi: Georgia, Times New Roman, Times, serif.
Figura 3.128
4. Executai 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 secvenial lista fonturilor i se oprete 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 folosete
tag-ul <font>, care dup cum am precizat nu este ncurajat de W3C.
9 i dumneavoastr v putei 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. Selectai textul integral al paginii Web.

108
2. Executai clic pe Text Font i apoi selectai grupul de fonturi
Georgia, Times New Roman, Times, serif (figura 3.131).
Figura 3.131
Remarc. Dac dorii s utilizai un anume font cruia i cunoatei numele, introducei
direct numele n zona de fonturi a inspectorului Properties.
Aplicaie
Aplicai celei de-a doua fraze Felicitri pentru rbdarea de a ne fi

descoperit! a paginii Web, fonturile de substituie din grupul Times New
Roman, Times, serif.
Indicaie. Selectai fraza menionat, dup care utilizai una din metodele
prezentate.
109
Dreamweaver MX Definii tipul de font

workspace
Pentru a aplica unui text fonturi de substituie cu Dreamweaver MX

workspace, folosii una din cele dou metode prezentate pentru
Iat cum aplicm textului integral al paginii, fonturi de substituie din

grupul de fonturi: Georgia, Times New Roman, Times, serif disponibile
n Dreamweaver.
2. Executai clic pe Text Font i apoi selectai grupul de fonturi:

Georgia, Times New Roman, Times, serif.

110
Figura 3.132
Figura 3.133
Dreamweaver 4 Definii dimensiunea fontului

workspace
Putei sublinia sau reduce importana unui fragment de text schimbnd

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. Selectai textul integral al paginii Web (figura 3.134).
Figura 3.134
2. Deschidei inspectorul Properties, via Window Properties.
3. Derulai caseta Size din inspectorul Properties, pn identificai

i apoi selectai 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,
selectai None.
4. Executai clic pe valoarea absolut 4.
Figura 3.136
Remarci:
9 Selectai tag-ul <FONT>, deschidei panoul Reference i citii informaiile care
se afieaz. Utilizai meniul derulant Description pentru a vizualiza atributul
size.
9 Citii conversaia 3, paragraful HTML 4 Definii dimensiunea fontului (Liviu
Figura 3.137
Metoda 2
2. Executai clic pe Text Size 1 to 7 (figura 3.138).

113
Figura 3.138
3. Executai 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, dect folosind foile de stil n cascad (CSS).
9 Corespondena ntre dimensiunea fix a fontului i dimensiunea apropiat de
cea tipografic (exprimat n puncte) este urmtoarea:
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 obinut nu
coboar niciodat sub 1 i nu depete niciodat valoarea 7.
9 Pentru a aplica o dimensiune relativ n raport cu dimensiunea implicit (3),
selectai cuvntul (fraza sau textul integral al paginii), apoi utilizai meniul
Text Size Change, apoi alegei +1 pn la +4 sau -1 pn la -3,
sau,
n inspectorul Properties, utilizai meniul derulant Size (figura 3.139).
114
Figura 3.139
Aplicaie
Atribuii valoarea (absolut) 7, dimensiunii fontului pentru cea de-a doua

fraz Felicitri pentru rbdarea de a ne fi descoperit! a paginii Web.
Indicaie. Selectai fraza indicat, dup care utilizai una din cele dou metode
prezentate.
Dreamweaver MX Definii dimensiunea fontului

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

folosii una din metodele prezentate pentru Dreamweaver 4 workspace.
Iat cum definim dimensiunea (4) fontului pentru textul integral al

paginii.
2. Deschidei inspectorul Properties.
3. Derulai caseta Size din panoul Properties.
4. Executai 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 Definii culorile

workspace
Putei schimba, dup cum cunoatei, culoarea ntregului text al paginii,
a unei poriuni de text (cuvnt, fraz) sau a legturilor (vizitate, active)
hipertext. Pe fundalul paginii dumneavoastr putei de asemenea aplica
o culoare uniform sau o imagine. Dac le aplicai pe amndou, atenie
la lizibilitate i nu doar att!
Colorai textul integral al paginii

Iat cum procedai pentru a colora n albastru tot textul paginii: Bine ai
venit! Felicitri pentru rbdarea de a ne fi descoperit! 2003 LUMINA
BLND.
1. Executai clic pe Modify Page Properties (figura 3.143).
Figura 3.143
117
Remarc. Se afieaz caseta de dialog Page Properties.
2. n caseta de dialog Page Properties executai clic n zona Text

(culoarea textului).
3. Folosii selectorul de culori (Color Picker) pentru a alege o

culoare (albastru) din paleta de culori (Executai clic cu pipeta
pe culoarea respectiv), figura 3.144.
Figura 3.144
Remarc. Putei folosi o culoare personalizat.
4. n caseta de dialog Page Properties executai clic pe butonul

OK.
Figura 3.145

118
Figura 3.146
Remarci:
9 Tot textul paginii se afieaz n albastru.
9 Putei de asemenea, alege o culoare pentru tot textul paginii, tastnd direct n
caset, valoarea RGB hexazecimal a culorii (dac o cunoatei). Putei de
asemenea tasta numele culorii (blue) n cazul nostru.
9 Pentru a terge culoarea curent fr a alege o alt culoare, executai clic pe
butonul Default Color din paleta de culori (selectai 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 tradiional de culorii cuprinde 216
culori!).
9 n Dreamweaver putei defini toate proprietile (atribute n HTML) unui
obiect (dup ce l-ai selectat!) cu ajutorul inspectorului Properties, cu o
singur excepie: Page Properties din meniul Modify.
Colorai un cuvnt sau o fraz

Pentru a colora un cuvnt sau o fraz cu Dreamweaver 4 workspace,
9 Metoda 1 Meniul Text, via Color;
Iat cum colorai n rou fraza de copyright, din pagin: 2003

LUMINA BLND.
Metoda 1
1. Selectai fraza menionat (figura 3.147).

119
Figura 3.147
2. Executai clic pe Text Color (figura 3.148).
Figura 3.148
Remarc. Se afieaz caseta de dialog Color.
3. Alegei o culoare (rou) websafe (culoare recunoscut de

diferite browser-e pe diferite platforme) n Basic colors sau
creai (cu mult pruden) propria culoare personalizat n zona
din dreapta a casetei (figura 3.149).
120
Figura 3.149
Figura 3.150
Remarci:
9 Selectai tag-ul <FONT>, deschidei panoul Reference i citii informaiile care
se afieaz. Utilizai meniul derulant Description pentru a vizualiza atributul
color.
9 Citii conversaia 3, paragraful HTML Aplicai unui text formatele fizice i

121
Figura 3.151
Metoda 2
1. Selectai fraza menionat.
2. Deschidei Inspectorul Properties, via Window Properties.
3. Executai un clic pe meniul de alegere a culorii websafe (figura

3.152).
Figura 3.152
Remarc. Se afieaz codul hexazecimal al culorii (#FF0000).

4. Executai clic cu pipeta pe culoarea dorit (rou) din paleta de
culori care se afieaz (figura 3.153).
Figura 3.153

122
Figura 3.154
Remarc. Dac cunoatei numele culorii, introducei direct numele culorii n caseta
dedicat culorii din Inspectorul Properties.
Definii culoarea de fond

n mod implicit, culoarea de fond este alb (#FFFFFF) iar textul din
pagin este de culoare neagr (#000000).
Iat cum colorai n verde background-ul paginii dumneavoastr Web.
1. Executai clic pe Modify Page Properties.
2. n caseta de dialog Page Properties executai clic n caseta

Background situat deasupra casetei Text (figura 3.155).
Figura 3.155
123
3. Folosii selectorul de culori (Color Picker) pentru a alege o
culoare (verde) din paleta de culori (executai clic cu pipeta pe
culoarea respectiv), figura 3.156.
Figura 3.156
Remarc. Putei alege de asemenea modul colorimetric, executnd clic pe meniul local f
situat n colul din dreapta sus, sau tastai numele culorii (green) n caseta background.
Figura 3.157
Remarci:
9 Selectai tag-ul <BODY>, deschidei panoul Reference i citii informaiile care
se afieaz. Utilizai meniul derulant Description pentru a vizualiza atributele
bgcolor i text.
9 Citii conversaia 3, paragraful HTML Definii culorile (Liviu Dumitracu,

124
Figura 3.158
Remarc. Background-ul paginii s-a colorat n verde.
Dreamweaver MX Definii culorile

workspace
Colorai textul integral al paginii

Iat cum procedai pentru a colora n albastru tot textul paginii: Bine ai
venit! Felicitri pentru rbdarea de a ne fi descoperit! 2003 LUMINA
BLND.
2. n caseta de dialog Page Properties, care se afieaz executai
clic pe n zona Text.
3. Executai clic pe culoarea albastru n paleta de culori (figura

3.159).
Figura 3.159
Remarc. Textul integral al paginii se afieaz n albastru.

125
Figura 3.160
Figura 3.161
Colorai un cuvnt sau o fraz

Pentru a colora un cuvnt sau o fraz cu Dreamweaver MX workspace,
Iat cum colorai n rou fraza de copyright: 2003 LUMINA BLAND.

126
Metoda 2
1. Selectai fraza menionat.
2. Deschidei panoul Properties.
3. Executai un clic pe meniul de alegere a culorii websafe (figura

3.162).
Figura 3.162
4. Executai clic cu pipeta pe culoarea dorit (rou) din paleta de

culori care se afieaz (figura 3.163).
Figura 3.163
Textul selectat se afieaz n rou.

127
Figura 3.164
Figura 3.165
Remarc. Dac cunoatei numele culorii, introducei direct numele culorii n caseta
dedicat culorii din Inspectorul Properties.
Definii culoarea de fond

Pentru background-ul paginii dumneavoastr putei utiliza fie o culoare
uni fie o imagine. Dac le utilizai pe amndou, imaginea va fi afiat
cu prioritate.
128
Iat cum colorai n verde background-ul paginii dumneavoastr Web.
2. n caseta de dialog Page Properties care se afieaz executai

clic n caseta Background.
3. Executai clic pe culoarea verde n paleta de culori.
Figura 3.166
Figura 3.167
129
Dreamweaver MX Creai propriile stiluri HTML

workspace
ntr-un document sau ntr-un site Web complet, problema formatrii

textelor apare n mod regulat. Pentru a ctiga timp i a v menaja
sistemul nervos folosii stilurile HTML! Nu confundai stilurile HTML cu
foile de stiluri n cascad (CSS). Stilurile HTML nu sunt dect o colecie
de tag-uri <FONT> i alte atribute de stiluri pe care le putei salva n
Dreamweaver i apoi folosi n mod elegant.
Marea diferen ntre stilurile HTML i CSS-uri este acea c dac

modificai un text formatat cu un stil, aceast modificare nu actualizeaz
stilul corespunztor.
Creai un stil HTML

Pentru a crea stiluri HTML cu Dreamweaver MX workspace, folosii 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 folosii aceleai

metode.
Iat cum procedm pentru a crea un nou stil HTML: bold+red.
Metoda 2
1. n panoul Design, executai clic pe subpanoul HTML Styles

(figura 3.168).
130
Figura 3.168
2. n subpanoul HTML Styles, executai clic pe butonul (New

Style), figura 3.169.
Figura 3.169
Remarc. Se afieaz caseta de dialog Define HTML Style.
3. n caseta de dialog Define HTML Style (figura 3.170) executai

urmtoarele aciuni:
9 n zona Name: tastai numele stilului: bold+red;
9 n zona Apply to alegei Selection(a) pentru a crea

un stil ce urmeaz a fi aplicat
caracterelor; dac dorii s creai
un stil ce se va aplica unui
paragraf selectai Paragraf();
9 n zona When Applying alegei Clear Existing Style pentru
131
a aplica stilul creat, suprimnd
elementele de formatare
existente;
9 n zona Font Attributes definii toate atributele de

formatare: fontul, dimensiunea,
culoarea, stilul caracterelor iar
apoi executai clic pe butonul OK.
Figura 3.170
Remarc. Noul stil se afieaz n subpanoul HTML Styles (figura 3.171).
Figura 3.171
132
Aplicai un stil HTML (predefinit)
Pentru a aplica stiluri HTML predefinite, folosii 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 aplicm cuvntului Bine din paragraful Bine ai venit! stilul
predefinit bold+red.
Metoda 3
1. Selectai cuvntul Bine n paragraful: Bine ai venit!.
2. n panoul Design, executai clic pe subpanoul HTML Styles.
3. n lista de stiluri predefinite, care se afieaz, executai 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 suprimnd formatarea existent.
9 Simbolul a+ aplic stilul predefinit adugndu-l la formatarea existent.
9 Dac opiunea Auto Apply este activat, stilul se aplic direct.
133
4. Executai clic pe butonul Apply, n cazul n care opiunea nu a
fost activat (figura 3.173).
Figura 3.173
Figura 3.174
Figura 3.175
134
Remarci:
9 Putei modifica, duplica i suprima un stil existent utiliznd butoanele de la
baza ferestrei HTML Styles.
9 Toate stilurile HTML sunt stocate n fiierul styles.xml din folder-ul Library.
Aplicaie
Modificai toate atributele elementului <font> ntr-o singur caset de dialog.

Utilizai panoul Insert.
Iat care este procedura pe care v invitm s-o aplicai.
1. Selectai textul Felicitri pentru rbdarea de a ne fi descoperit!

(figura 3.176).
Figura 3.176
2. n subpanoul Text din grupul de panouri Insert, executai clic pe
butonul (Font Tag Editor), figura 3.177.
Figura 3.177
3. n caseta de dialog Tag Editor Font care se afieaz , n categoria

General, alegei n zona Face, o familie de caractere; n zona size
alegei dimensiunea caracterelor, iar n zona color alegei culoarea
caracterelor (figura 3.178).
135
Figura 3.178
Figura 3.179
Figura 3.180
136
Dreamweaver MX Tem
Testai-v cunotinele
1. Cum dai un titlu paginii cu Dreamweaver 4 workspace/ Dreamweaver
MX workspace? Descriei pe scurt una din metodele folosite.
2. Descriei pe scurt procedura Dreamweaver MX de inserare caractere

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

MX workspace de formatare a unui text cu caractere ngroate
(bolduite) i cursive (italice).
4. Aplicai unui text formatul fizic big cu metoda Quick Tag Editor.
5. Descriei pe scurt procedura Dreamweaver MX workspace de inserare

a abrevierilor i acronimelor.
6. Cum procedai pentru a scrie cu Dreamweaver MX un text care

conine exponent sau indice?
7. Cum definii cu Dreamweaver 4 workspace: tipul de font, dimensiunea

fontului, culoarea fontului pentru:
9 textul integral al paginii;
9 un cuvnt, o fraz.
Vizitai site-urile
9 www.macromedia.com/fr/software/dreamweaver
9 www.manipulation.com
9 www.projectseven.com/dreamweaver
Conversaia 4
Creai i formatai paragrafele cu

Dreamweaver MX
f Dreamweaver 4 workspace, MX workspace Creai un paragraf
f Dreamweaver 4 workspace, MX workspace Schimbai alinierea unui
paragraf
f Dreamweaver 4 workspace, MX workspace Trecei la linia urmtoare
ntr-un paragraf
f Dreamweaver 4 workspace, MX workspace Indentai un paragraf
f Dreamweaver 4 workspace, MX workspace Inserai un text preformatat
f Dreamweaver 4 workspace, MX workspace Creai un titlu
f Dreamweaver 4 workspace, MX workspace Creai liste cu simboluri
(simple), numerotate (ordonate) i de definiii
f Dreamweaver MX - Tem
Dreamweaver 4 Creai un paragraf

workspace
n Dreamweaver, ori de cte ori acionai tasta Enter, creai un nou

paragraf. Acesta este separat de precedentul prin echivalentul unei linii
vide.
138
Iat cum structurm textul din aplicaia noastr n trei paragrafe:
Primul paragraf: Bine ai venit!
Al doilea paragraf: Felicitri pentru rbdarea de a ne fi descoperit!
Al treilea paragraf: Dorim s ne cunoatem mai bine i s rmnem

mpreun! LUMINA BLND este puternic i nu
doar att!
1. Introducei textul n fereastra Document (figura 4.1).
Figura 4.1
2. Executai clic acolo unde trebuie s nceap al doilea paragraf

(figura 4.2).
Figura 4.2
ntre cele dou blocuri de text se afieaz o linie vid, transformndu-le

n dou paragrafe distincte (vezi figura 4.3).
139
Figura 4.3
Figura 4.4
Remarci:
9 Selectai tag-ul <P>, deschidei panoul Reference i citii informaiile care se
afieaz.
9 Citii Conversaia 4, paragraful: HTML- Creai un paragraf (Liviu Dumitracu,
5. Repetai paii 2 i 3 pentru cel de-al treilea paragraf.
Figura 4.5
140
Figura 4.6
Dreamweaver MX Creai un paragraf

workspace
Dreamweaver MX workspace creeaz un nou paragraf de fiecare dat

cnd acionai tasta ENTER. Putei de asemenea scinda un text existent
n mai multe paragrafe.
Iat cum scindm n trei paragrafe urmtorul text: Bine ai venit!

Felicitri pentru rbdarea de a ne fi descoperit! Dorim s ne cunoatem
i s rmnem mpreun! LUMINA BLAND este puternic i nu doar
att! Primul paragraf este Bine ai venit!, iar al doilea paragraf este:
Felicitri pentru rbdarea de a ne fi descoperit!
1. Introducei textul.
2. Executai clic dup primul semn al mirrii (!).
4. Acionai clic dup cel de-al doilea semn al mirrii (!) din cadrul
paragrafului generat.
141
Figura 4.7
Remarci:
9 Selectai tag-ul <p> (executai clic pe tag-ul <p> n bara de stare) i
executai clic pe butonul (figura 4.8).
Figura 4.8
9 Panoul Reference afieaz informaiile despre tag-ul selectat (<p>), figura

4.9.
142
Figura 4.9
9 Citii Conversaia 4, paragraful: XHTML-Creai un paragraf (Liviu Dumitracu,

Dreamweaver 4 Schimbai alinierea unui paragraf

workspace
n Dreamweaver 4 workspace sunt permise urmtoarele 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 centrm primul paragraf, cum aliniem la dreapta cel de-al
doilea paragraf i cum aliniem la stnga cel de-al treilea paragraf.
Metoda 1
1. Executai clic n primul paragraf (selectai paragraful), figura

4.10.
143
Figura 4.10
2. Executai clic pe Text Align Center (figura 4.11).
Figura 4.11
Primul paragraf se afieaz n centrul paginii Web (vezi figura 4.12).
Figura 4.12
144
Figura 4.13
Remarci:
9 Selectai tag-ul <p>, deschidei panoul Reference, utilizai meniul derulant
Description pentru a vizualiza atributul align cu valoarea center.
9 Citii Conversaia 4, paragraful: HTML4 - Schimbai alinierea unui paragraf
(Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Figura 4.14
Remarci:
9 Pentru a alinia la dreapta cel de-al doilea paragraf, utilizai Metoda 1,
modificnd pasul 2, dup cum urmeaz:
2. Executai clic pe Text t Align t Right.
9 Pentru a alinia la stnga cel de-al treilea paragraf, utilizai Metoda 1,
2. Executai clic pe Text t Align t Left
145
Metoda 2
1. Selectai primul paragraf (figura 4.15).
Figura 4.15
2. Executai clic pe butonul (center) din inspectorul Properties.
Figura 4.16
Figura 4.17
Remarci:
9 Selectai tag-ul <p>, deschidei panoul Reference, utilizai meniul Description
pentru a vizualiza atributul align cu valorile left i right.
9 Citii Conversaia 4, paragraful: HTML4 - Schimbai alinierea unui paragraf

146
Figura 4.18
Remarci:
9 Pentru a alinia la dreapta cel de-al doilea paragraf, utilizai Metoda 2,
2. Executai clic pe butonul (Align Right), din inspectorul
Properties (figura 4.19).
Figura 4.19
9 Pentru a alinia la stnga cel de-al treilea paragraf, utilizai Metoda 2,

2. Executai clic pe butonul (Align Left), din inspectorul Properties
(figura 4.20).
Figura 4.20
Aplicaie
Aplicai alinierea de tip justify paragrafului: Dorim s ne cunoatem i s

rmnem mpreun! LUMINA BLAND este puternic i nu doar att!.
Indicaie. Utilizai Metoda 1, executnd clic pe Text Align Justify
sau,
Utilizai Metoda 2, executnd clic pe butonul (Align Justify), din inspectorul

Properties.
147
Dreamweaver MX Schimbai alinierea unui paragraf

workspace
n Dreamweaver MX workspace sunt permise urmtoarele tipuri de

alinieri:
9 left;
9 center;
9 right;
9 Justify.
Pentru a modifica cu Dreamweaver MX workspace alinierea paragrafelor,
Iat cum procedm pentru a centra primul paragraf Bine ai venit!.
Metoda 1
1. Selectai paragraful.
2. Executai clic pe Text Align Center.
Figura 4.21
148
Figura 4.22
Aplicaii
Aliniai la dreapta cel de-al doilea paragraf: Felicitri pentru rbdarea de a

ne fi descoperit!
Aliniai la stnga cel de-al treilea paragraf: Dorim s ne cunoatem i s

rmnem mpreun! LUMINA BLND este puternic i nu doar att!.
Aliniai la dreapta primul paragraf Bine ai venit!, modificnd atributul

elementului XHTML: <p align=center>Bine ai venit!</p> cu inspectorul de
tag-uri.
Iat care este procedura pe care trebuie s-o urmai.
1. Afiai inspectorul de tag-uri, via Window Tag Inspector
sau,
Acionai tasta F9.
Se afieaz panoul Code (figura 4.23).

149
Figura 4.23
Remarc. n partea superioar a panoului putei vizualiza toat structura HTML a

documentului.
2. Selectai elementul (X)HTML <p> n aceast fereastr sau selectai

elementul grafic <p> n pagin.
3. n partea inferioar a ferestrei Inspectorului de tag-uri, executai clic

pe atributul align pe care dorii s-l modificai pentru a afia valorile
disponibile (figura 4.24).
Figura 4.24
4. Selectai valoarea right (figura 4.25).

150
Figura 4.25
Pagina Web este actualizat imediat.
Figura 4.26

151
Figura 4.27
Aplicai alinierea de tip justify paragrafului: Dorim s ne cunoatem i s

rmnem mpreun! LUMINA BLND este puternic i nu doar att!
Metoda 2
2. Executai 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. Vizualizai pagina Web ntr-un browser (4.30).
Figura 4.30
153
Dreamweaver 4 Trecei la linia urmtoare ntr-un

workspace
paragraf
n cadrul aceluiai paragraf este posibil de a trece la o nou linie fr a
crea un nou paragraf.
Pentru a crea cu Dreamweaver 4 workspace un salt de linie n cadrul

aceluiai paragraf, folosii 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 form un salt de linie al celei de-a doua fraze din paragraful
Dorim s ne cunoatem i s rmnem mpreun! LUMINA BLAND
este puternic i nu doar att!.
Metoda 1
1. Executai clic naintea cuvntului LUMINA (figura 4.31).
Figura 4.31
154
2. Executai 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, executai clic pe butonul (Insert Line

Break) din categoria Characters (figura 4.35).
Figura 4.35
Punctul de inserie se deplaseaz la nceputul liniei urmtoare, dar

rmne tot timpul n acelai paragraf (vezi figura 4.36).
Figura 4.36
Remarc. Pentru a vizualiza salturile de linie n pagina dumneavoastr Web trebuie s

acionai elementul invizibil Line Breaks iar apoi s-l afiai dup cum urmeaz:
1. Executai clic pe EDIT Preferences Invisible Elements
2. Activai opiunea Line Breaks iar apoi executai clic pe butonul OK.
3. Afiai elementele invizibile executnd clic pe View Visual Aids Invisible
Elements.
156
Dreamweaver MX Trecei la linia urmtoare ntr-un

workspace paragraf
Dac dorii s trecei la linia urmtoare n cadrul aceluiai paragraf, va
trebui s inserai un salt de linie (elementul <br /> n XHTML).
Pentru a crea cu Dreamweaver MX workspace un salt de linie n cadrul

aceluiai paragraf, folosii 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 form un salt de linie al celei de-a doua fraze din paragraful
Dorim s ne cunoatem i s rmnem mpreun! LUMINA BLAND
este puternic i nu doar att!.
Metoda 2
1. Executai clic naintea cuvntului LUMINA cu care ncepe cea

de-a doua fraz a textului introdus n pagina Document.
2. n grupul de panouri Insert executai clic pe subpanoul

Characters.
Remarc. Se afieaz subpanoul Characters (figura 4.37).
Figura 4.37
3. Executai clic pe butonul (Line Break), figura 4.38.
Figura 4.38
157
Punctul de inserie se deplaseaz la nceputul liniei urmtoare, dar
rmne tot timpul n acelai paragraf (figura 4.39).
Figura 4.39
Remarc. Pentru a vizualiza salturile de linie n pagina dumneavoastr Web aplicai

procedura prezentat la Dreamweaver 4 workspace.
Dreamweaver 4 Indentai un paragraf

workspace
n Dreamweaver 4 workspace, pentru un paragraf sunt permise

indentri stnga-dreapta (de mrime egal).
Pentru a indenta cu Dreamweaver 4 workspace un paragraf, folosii una

9 Metoda 1 Meniul Text, via Indent;
Iat cum indentm dreapta paragraful Felicitri pentru rbdarea de a

ne fi descoperit!.
158
Metoda 1
1. Selectai paragraful (figura 4.40).
Figura 4.40
2. Executai clic pe Text Indent.
Figura 4.41
Remarc. Paragraful se afieaz decalat, spre dreapta (vezi figura 4.42).
Figura 4.42

159
Figura 4.43
Remarci:
9 Atunci cnd aplicai indentri unui paragraf, Dreamweaver 4 workspace
utilizeaz elementul <BLOCKQUOTE> </BLOCKQUOTE>.
9 Selectai tag-ul <BLOCKQUOTE>, deschidei panoul Reference i citii
informaiile care se afieaz.
9 Citii Conversaia 4, paragraful: HTML4- Indentai un paragraf (Liviu
Figura 4.44
Metoda 2
2. Executai clic pe butonul (Text Indent) din inspectorul

160
Figura 4.45
Remarci:
9 De fiecare dat cnd creai o nou indentare, limea paragrafului se
diminueaz.
9 Pentru a indenta stnga paragraful menionat, utilizai Metoda 1, modificnd
pasul 2, dup cum urmeaz:
2. Executai clic pe Text Outdent
sau, utilizai Metoda 2, modificnd pasul 2 dup cum urmeaz:
2. Executai clic pe butonul (Text Outdent) din inspectorul Properties.
Dreamweaver MX Indentai un paragraf

workspace
Pentru a indenta cu Dreamweaver MX workspace un paragraf, folosii

9 Metoda 1 Meniul Text, via Indent;
9 Metoda 2 Panoul Properties;
Iat cum indentm dreapta paragraful Felicitri pentru rbdarea de a

ne fi descoperit!.
Metoda 3
3. n subpanoul Text, executai clic pe butonul (figura 4.46).
Figura 4.46
Remarc. Paragraful se afieaz indentat, spre dreapta.

161
Figura 4.47
Remarci:
9 n (X)HTML n afara utilizrii foilor de stiluri n cascad (CSS-1) nu este posibil
de a crea pentru prima linie a unui paragraf indentri stnga/dreapta.
9 Atunci cnd aplicai indentri unui paragraf, Dreamweaver utilizeaz
elementul HTML <blockquote>, care este prevzut de W3C pentru punerea n
eviden a citatelor de text.
9 Citii Conversaia 4, paragraful: XHTML - Indentai un paragraf (Liviu
Figura 4.48
162
Dreamweaver 4 Inserai un text preformatat

workspace
Preformatarea unui text permite crearea cu uurin a coloanelor de text

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

9 Metoda 1 Meniul Text, via Paragraph Format Preformatted

Text;
Iat cum inserm un text preformatat Bine ai venit!, lsnd ntre

cuvinte opt spaii.
Metoda 1
1. Introducei textul Bine ai venit!.
Figura 4.49
3. Executai clic pe Text Paragraph Format Preformatted

Text (figura 4.50).
163
Figura 4.50
4. Introducei cte opt spaii ntre cuvinte.
Remarc. Textul se afieaz cu opt spaii ntre cuvinte (figura 4.51).
Figura 4.51
Figura 4.52
164
Remarci:
9 Selectai tag-ul <PRE>, deschidei panoul Reference i citii informaiile care
se afieaz.
9 Citii Conversaia 4, paragraful: HTML4- Comunicai browser-ului s afieze
liniile vide, spaiile suplimentare etc. (Liviu Dumitracu, (X)HTML, Editura
Universitii din Ploieti, 2003)
Figura 4.53
Metoda 2
3. n inspectorul Properties, afiai meniul Format i apoi executai

clic pe Preformatted (figura 4.54).
Figura 4.54
Aplicaii
Lsai un spaiu de 15 pixeli ntre primele dou paragrafe.
Indicaie. Pentru a ajusta spaiul vertical, acionai tasta Enter de cte ori este
necesar 15 ori (vezi figura 4.55). Analizai codul HTML generat.
165
Figura 4.55
Lsai un spaiu de 25 de pixeli naintea primei linii a textului: Bine ai venit!

Felicitri pentru rbdarea de a ne fi descoperit! Dorim s ne cunoatem i s
rmnem mpreun! LUMINA BLAND este puternic i nu doar att!.
Indicaie. Pentru a ajusta spaiul vertical, acionai bara de spaii de cte ori
este necesar 25 de ori (figura 4.56). Analizai codul HTML generat.
Figura 4.56
Dreamweaver MX Inserai 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 inserm un text preformatat Bine ai venit!, lsnd ntre

cuvinte opt spaii.
Metoda 3
1. Introducei textul.
2. Selectai textul pe care l-ai introdus.
Figura 4.57
5. Introducei cte opt spaii ntre cuvinte.
Figura 4.58
Remarc. Citii Conversaia 4, paragraful: XHTML- Comunicai browser-ului s afieze

liniile vide, spaiile suplimentare etc. (Liviu Dumitracu, (X)HTML, Editura Universitii
din Ploieti, 2003)
167
Figura 4.59
Dreamweaver 4 Creai un titlu

workspace
Cnd aplicai un antet, aliniat (stnga, dreapta, centru mai puin

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, folosii una din

metodele prezentate mai jos:
9 Metoda 1 Meniul Text, via Paragraph Format;
Iat cum afim centrat, pe trei nivele de titlu, paragraful Bine ai

venit!.
Metoda 1
1. Selectai textul ce urmeaz a fi convertit n titlu (figura 4.60).

168
Figura 4.60
2. Centrai textul, executnd clic pe butonul (center) din

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

4.62).
Figura 4.62
Remarc. Titlul se afieaz centrat, cu dimensiunea cea mai mare H1 (figura 4.63).
169
Figura 4.63
Figura 4.64
Remarci:
9 Selectai tag-ul <H1>, deschidei panoul Reference i citii informaiile care se
afieaz. Utilizai meniul Description pentru a vizualiza atributul align.
9 Citii Conversaia 4, paragraful: HTML4- Creai un titlu (Liviu Dumitracu,
5. Repetai pasul 3 nlocuind Heading1 cu Heading 2, Heading 3.
Figura 4.65
170
Remarci:
9 Selectai tag-urile <H2>, <H3> deschidei panoul Reference i citii
9 Utilizai meniul Description pentru a vizualiza atributul align.
Figura 4.66
Metoda 2
3. n inspectorul Properties, afiai meniul Format i apoi executai

clic pe nivelul de titlu Heading 1 (figura 4.67).
Figura 4.67
Aplicaie
Creai urmtoarele 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 cnd un text conine mai multe elemente care trebuie s fie, de
exemplu, centrate (paragrafe, antet-uri, imagini), putei optimiza codul,
utiliznd tag-ul <DIV> care permite crearea unei diviziuni logice n cadrul
documentului. Tag-ul <DIV> recunoate atributul align.
Iat cum definim diviziunea logic DIV n documentul HTML pentru afiarea
centrat a titlurilor menionate.
1. Tastai i inserai toate elementele necesare pentru a afia codul surs

(figura 4.68).
Figura 4.68
2. Introducei tag-ul:
<DIV align=center> (figura 4.69)
Figura 4.69
172
3. Introducei tag-ul de nchidere </DIV> dup toate elementele de
centrat (figura 4.70).
Figura 4.70
Remarci:
9 Selectai tag-ul <DIV>, deschidei panoul Reference i citii informaiile care
se afieaz.
9 Utilizai meniul Description pentru a vizualiza atributul align.
Figura 4.71
173
Dreamweaver MX Creai un titlu

workspace
Pentru a crea o ierarhie n paginile dumneavoastr Web, adugai titluri

i subtitluri.
Pentru a defini un antet cu Dreamweaver MX workspace, folosii una din

9 Metoda 1 Meniul Text, via Paragraph Format;
Iat cum afim centrat, pe trei nivele de titlu, paragraful Bine ai

venit!.
Metoda 3
1. Selectai textul ce urmeaz a fi convertit n titlu.
2. Centrai textul.
Figura 4.72
5. Titlul se afieaz centrat, bolduit cu caractere de cea mai mare

dimensiune.
6. Repetai pasul 4 executnd clic pe butonul i apoi pe
butonul .

174
Figura 4.73
Remarci:
9 Citii Conversaia 4, paragraful: XHTML- Creai un titlu (Liviu Dumitracu,
9 n (X)HTML titlurile au fost create pentru a indica vizual importana lor ntr-un
document foarte mare.
Creai liste cu simboluri (simple),

Dreamweaver 4 numerotate (ordonate) i
workspace
de definiii
Listele permit crearea unei enumerri de elemente. n Dreamweaver, ca
i n HTML putei crea liste cu simboluri (simple), liste numerotate
(ordonate), liste de definiii. Avei de asemenea posibilitatea de a
imbrica listele, unele ntr-altele.
Creai o list cu simboluri

Pentru a crea cu Dreamweaver 4 workspace o list cu simboluri, folosii
175
9 Metoda 1 Meniul Text, via List Unordered List;
9 Metoda 1 modificat Selectai elementele listei Metoda 1;
Iat cum crem cu Dreamweaver 4 workspace, o list cu simboluri

pentru serviciile oferite de firma LUMINA BLND: turism, training,
service PC-uri.
Metoda 1
1. Introducei textul: LUMINA BLND ofer urmtoarele

servicii:, iar apoi acionai tasta Enter (figura 4.74).
Figura 4.74
2. Executai clic pe Text List Unordered List (figura 4.75).
Figura 4.75
176
Remarc. Se afieaz primul bumb (punct negru), figura 4.76.
Figura 4.76
3. Tastai elementele listei, acionnd tasta Enter dup fiecare

element. n momentul n care ai terminat de introdus
elementele listei, acionai de dou ori tasta Enter (figura 4.77).
Figura 4.77
Figura 4.78
177
Remarci:
9 Selectai tag-urile <UL>, <LI>, deschidei panoul Reference i citii
9 Citii Conversaia 4, paragraful: HTML4 - Creai o list cu simboluri (Liviu
Figura 4.79
Metoda 1 modificat
1. Selectai elementele listei (figura 4.80).
Figura 4.80
2. Executai clic pe Text List Unordered List. Se afieaz lista

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

Properties.

element. n momentul n care ai terminat de introdus
elementele listei, acionai de dou ori tasta Enter.
Metoda 2 modificat
1. Selectai elementele listei.
2. Executai clic pe butonul (Unordered list) din inspectorul

Properties.

179
Aplicaie
Marcai elementele listei (cu simboluri) cu un ptrat.
Iat cum schimbai stilul marcajului pentru toate elementele listei.
1. Executai clic pe un element oarecare al listei.
Figura 4.82
2. Executai clic pe Text List Properties.
Remarc. Putei, de asemenea utiliza inspectorul Properties, acionnd butonul

List Item (figura 4.83).
Figura 4.83
3. n meniul derulant List Type, selectai Bulleted List (figura 4.84).
Figura 4.84
4. Selectai 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 afiai codul surs dup
care s introducei atributul circle (figura 4.86).
Figura 4.86
5. n caseta de dialog List Properties executai clic pe butonul OK.
Remarc. Se afieaz lista formatat.
Figura 4.87
181
Remarc. Selectai tag-ul <UL>, deschidei panoul Reference i utilizai meniul
Description pentru a vizualiza atributul type.
Figura 4.88
Creai o list ordonat

Pentru a crea cu Dreamweaver 4 workspace o list ordonat, folosii una
9 Metoda 1 Meniul Text, via List Ordered List;
Iat cum crem cu Dreamweaver 4 workspace o list ordonat pentru

serviciile oferite de firma LUMINA BLND: turism, training, service
PC-uri.
Metoda 1
Modificai pasul 2 (vezi Metoda 1, List cu simboluri), dup cum

urmeaz:
2. Executai clic pe List Ordered List (figura 4.89).

182
Figura 4.89
Remarc. Se afieaz 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 afiat n Internet Explorer este ilustrat n figura 4.92.
Figura 4.92
Metoda 1 modificat
Modificai pasul 2 (vezi Metoda 1 modificat, List cu simboluri) dup

cum urmeaz:
2. Executai clic pe Text List Ordered List
Metoda 2
Modificai pasul 1 (vezi Metoda 2, List cu simboluri) dup cum

urmeaz:
1. Executai clic pe butonul (Ordered List) din inspectorul

Properties.
Figura 4.93
Remarc. Se afieaz lista ordonat din figura 4.94.
Figura 4.94
184
Remarci:
9 Codul HTML generat este ilustrat n figura 4.95.
9 Selectai tag-ul <OL>, deschidei panoul Reference i citii informaiile care se
afieaz.
Figura 4.95
9 Pagina Web afiat n Internet Explorer este ilustrat n figura 4.96.
Figura 4.96
Metoda 2 modificat
1. Selectai elementele listei.

Properties.
3. Analizai codul HTML.

185
Aplicaii
Schimbai stilul de numerotare din lista ordonat creat anterior cu stilul:

cifre romane minuscule (i, ii, iii).
1. Executai clic pe un element oarecare al listei numerotate.
2. Executai clic pe Text List Properties
Se afieaz caseta de dialog List Properties (figura 4.97).
Figura 4.97
Remarc. Putei, de asemenea utiliza inspectorul Properties, acionnd butonul

List Item (figura 4.98).
Figura 4.98
3. Selectai n caseta List Type opiunea Numbered List (figura 4.99).
Figura 4.99
186
4. Selectai n caseta Style stilul Roman Small [i, ii, iii ] (figura 4.100).
Figura 4.100
5. Executai clic pe butonul OK. Se afieaz lista numerotat, cu stilul

Roman Small (figura 4.101).
Figura 4.101
Figura 4.102
187
Remarci:
9 Selectai tag-ul <OL>, deschidei panoul Reference i utilizai meniul
Description pentru a vizualiza atributul type..
9 Citii Conversaia 4, paragraful: HTML4- Creai o list ordonat (Liviu
Figura 4.103
Schimbai stilul Roman Small din lista ordonat creat anterior cu stilul
Alphabet Large (A, B, C).
Indicaie. Selectai n zona Style stilul Alphabet Large (A, B, C), via Text List
Figura 4.104
Remarc. Se afieaz lista numerotat cu stilul Alphabet Large (A, B, C), figura 105.
Figura 4.105
188
Schimbai numrul de ordine iniial (1) din stilul Number (1, 2, 3) cu
numrul 7.
Indicaie. Selectai n zona Style stilul Number (1, 2, 3) i tastai 7 n caseta

Start Count (Number), via Text List Properties.
Creai o list de definiii

Iat cum crem cu Dreamweaver 4 workspace o list de definiii
aceeai pe care am creat-o i n (X)HTML.
1. Executai clic pe Text List Definition List (figura 4.106).
Figura 4.106
2. Introducei textul Lista cu simboluri (prima entitate ce

urmeaz a fi definit) apoi acionai tasta Enter (figura 4.107).
Figura 4.107
189
3. Introducei definiia pentru primul element al listei, iar apoi
acionai tasta Enter (figura 4.108).
Figura 4.108
4. Introducei al doilea element al listei Lista numerotat, iar

apoi acionai tasta Enter (figura 4.109).
Figura 4.109
5. Introducei definiia pentru cel de-al doilea element al listei. n

momentul n care ai terminat de introdus elementele listei,
acionai de dou ori tasta Enter (figura 4.110).
190
Figura 4.110
Figura 4.111
Remarci:
9 Selectai tag-urile <DL>, <DT>, <DD>, deschidei panoul Reference i citii
9 Citii Conversaia 4, paragraful: HTML4- Creai o list de definiii (Liviu

191
Figura 4.112
Remarc. Pentru a repera ce nivel al listei ai introdus, privii cu atenie bara de

stare a ferestrei document. Tot timpul, aceasta indic tag-ul HTML n care v
aflai: <DL> / <DT> / <DD>.
Creai o list imbricat

Cu Dreamweaver 4 workspace putei imbrica listele, unele ntr-altele
pentru a obine mai multe nivele ierarhice vizibile, cu o indentare a listei
imbricate.
Iat cum crem n Dreamweaver 4 workspace aceeai list imbricat pe

care ai realizat-o n HTML.

Properties.
2. Introducei prima linie a listei Partea nti, apoi acionai tasta

Enter.
3. Executai clic pe butonul (Text Indent) din inspectorul

Figura 4.113
192
4. Introducei liniile: Capitolul 1, Capitolul 2 corespunztoare
acestui nivel. Dup fiecare linie acionai tasta Enter (figura
4.114).
Figura 4.114
5. Executai clic pe butonul (Text Outdent) din inspectorul

Figura 4.115
Se afieaz prima parte a listei imbricate (figura 4.116).
Figura 4.116
6. Introducei restul listei respectnd paii anteriori (figura 4.117).

193
Figura 4.117
7. Acionai de dou ori tasta Enter.
8. Schimbai stilul Number (1, 2, 3) n Roman Large (I, II, III),

figura 4.118.
Figura 4.118
9. Schimbai stilul Number (1, 2, 3) n Alphabet Large (A, B, C)

pentru toate cele trei liste imbricate (nested).

194
Figura 4.119
Creai liste cu simboluri (simple),

Dreamweaver MX numerotate (ordonate) i
workspace
de definiii
Pentru a structura o list de elemente, adugai simboluri sau numere n
faa fiecrui element (figura 4.120).
LISTA
SIMPL NUMEROTAT DE DEFINIII
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
Creai 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 Selectai elementele listei Metoda 3.
Iat cum procedm pentru a crea cu Dreamweaver MX workspace, o

list cu simboluri, aceeai pe care ai creat-o cu Dreamweaver 4
workspace.
Metoda 3

servicii: iar apoi acionai tasta Enter.
3. n subpanoul Text, executai clic pe butonul (Unordered

List), figura 4.121.
Figura 4.121

element.
5. Acionai de dou ori tasta Enter n momentul n care ai

terminat de introdus elementele listei (figura 4.122).
196
Figura 4.122
Figura 4.123
Remarci:
9 Pentru a extinde o list cu simboluri, executai clic la finele ultimei linii dup
care acionai tasta Enter.
9 Citii Conversaia 4, paragraful: XHTML- Creai o list cu simboluri (Liviu

197
Figura 4.124
Aplicaii
Marcai elementele listei simple cu un ptrat.
Marcai elementele listei simple cu un cerc (vezi Dreamweaver 4 workspace).

Utilizai inspectorul de tag-uri pentru a schimba valoarea atributului type din
tag-ul <ul>.
Creai o list ordonat

Pentru a crea o list ordonat cu Dreamweaver MX workspace, folosii
9 Metoda 1 Meniul Text, via List Ordered List;

Iat cum procedm pentru a crea cu Dreamweaver MX workspace o list
ordonat, aceeai pe care ai creat-o cu Dreamweaver 4 workspace.
Metoda 3 modificat

servicii:, iar apoi acionai tasta Enter.
2. Introducei i selectai elementele listei.

198
4. n subpanoul Text, executai clic pe butonul (Ordered list),

figura 4.125.
Figura 4.125
Figura 4.126
Figura 4.127
Aplicaii
Schimbai stilul de numerotare din lista ordonat creat anterior cu stilul

Roman Small: cifre romane minuscule (i, ii, iii ) vezi Dreamweaver 4
workspace.
199
Schimbai stilul Roman Small cu stilul Alphabet Large (A, B, C) vezi
Schimbai numrul de ordine iniial (1) din stilul Number (1, 2,3) cu
numrul 7.
Creai o list de definiii

Pentru a crea o list de definiii cu Dreamweaver MX workspace, folosii
9 Metoda 1 Meniul Text, via List Definition List;
Iat cum procedm pentru a crea cu Dreamweaver MX workspace o list

de definiii, aceeai pe care am creat-o cu Dreamweaver 4 workspace.
Metoda 2
2. n subpanoul Text, executai clic pe butonul (Definition

List), figura 4.128.
Figura 4.128
3. Introducei primul element al listei Lista cu simboluri, iar apoi

acionai tasta Enter.
4. Introducei definiia pentru primul element al listei, iar apoi

5. Introducei al doilea element al listei Lista numerotat, iar

apoi acionai tasta Enter.
6. Introducei definiia pentru cel de-al doilea element al listei.

200
7. Acionai de dou ori tasta Enter n momentul n care ai
terminat de introdus elementele listei.
Figura 4.129
Remarc. Citii Conversaia 4, paragraful: XHTML- Creai o list de definiii (Liviu

Figura 4.130
201
Creai liste imbricate
Cu Dreamweaver MX putei de asemenea crea liste imbricate sau
nested, folosind una din metodele prezentate la Dreamweaver 4
workspace.
Aplicaii
Creai o list imbricat, aceeai pe care ai creat-o cu Dreamweaver 4.
Creai lista nested prezentat n figura 4.131.
Figura 4.131
1. Executai clic pe butonul (Ordered List) din panoul Properties.
2. Introducei Limbaje informatice, iar apoi acionai tasta Enter.
3. Executai clic pe butonul (Text Indent) din panoul Properties

(figura 4.115).
4. Executai clic pe butonul (Unordered List) din panoul Properties.
5. Introducei liniile corespunztoare acestui nivel; dup fiecare linie

6. Executai clic pe butonul (Text Outdent) din inspectorul Properties.
7. Introducei restul listei respectnd paii anteriori.

202
Figura 4.132
Figura 4.133
203
Dreamweaver MX Tem
Testai-v cunotinele
1. Cum creai un paragraf cu Dreamweaver?
2. Ce tipuri de alinieri sunt permise n Dreamweaver MX?
3. Cu creai un salt de linie cu Dreamweaver MX?
4. Descriei o metod Dreamweaver MX pentru crearea unui titlu.
5. Descriei metodele Dreamweaver MX workspace pentru crearea
urmtoarelor tipuri de liste:
9 cu simboluri;
9 numerotate;
9 de definiii.
6. Folosii butoanele ul, ol, li din subpanoul Text (grupul de panouri
Insert) pentru a crea direct, n codul surs XHTML mai multe tipuri de
liste.
Vizitai site-urile
9 www.mashat.com
9 www.cinemascope.com/photos
Conversaia 5
Inserai i personalizai o linie orizontal

cu Dreamweaver MX
f Dreamweaver 4 workspace, MX workspace Inserai o linie orizontal
f Dreamweaver MX workspace Colorai o linie orizontal
f Dreamweaver 4 workspace Definii lungimea i nlimea unei linii
orizontale
f Dreamweaver 4 workspace Aliniai o linie orizontal
f Dreamweaver MX workspace Personalizai o linie orizontal
Dreamweaver 4 Inserai o linie orizontal

workspace
n Dreamweaver avei 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, folosii

9 Metoda 1 Meniul Insert, via Horizontal Rule;

204
Iat cum separm printr-o linie orizontal primele dou paragrafe ale
paginii dumneavoastr.
Metoda 1
1. Executai clic la finele primului paragraf (figura 5.1).
Figura 5.1
2. Executai 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. Executai clic la finele celui de-al doilea paragraf (figura 5.4).
4. Executai 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 Selectai tag-ul <HR>, deschidei panoul Reference i citii informaiile care se
afieaz.
9 Citii Conversaia 5, paragraful: HTML4 Inserai o linie orizontal (Liviu
Figura 5.6
Metoda 2
Se modific paii 2 i 4 din Metoda 1, dup cum urmeaz:
2,4. n panoul Insert, categoria Common, executai clic pe butonul
(Insert Horizontal Rule), figura 5.7.
Figura 5.7
207
Dreamweaver MX Inserai o linie orizontal

workspace
Pentru a delimita diferite zone ale paginii dumneavoastr Web, inserai

cu Dreamweaver MX workspace o linie orizontal.
Pentru a insera o linie orizontal cu Dreamweaver MX workspace, folosii

9 Metoda 1 Meniul Insert, via Horizontal Rule;
Iat cum separm printr-o linie orizontal primele dou paragrafe ale
paginii dumneavoastr, aceleai pe care le-ai separat cu Dreamweaver
4 workspace .
Metoda 2
1. Executai clic la finele primului paragraf.
2. n grupul de panouri Insert, executai clic pe subpanoul

Common (figura 5.8).
3. n subpanoul Common, executai clic pe butonul (Horizontal

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

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

208
Figura 5.9
Remarc. Citii Conversaia 5, paragraful: XHTML Inserai o linie orizontal

Figura 5.10
Dreamweaver MX Colorai o linie orizontal

workspace
Dreamweaver-ul v permite s aplicai sau nu o umbr liniilor orizontale,

dar nu v permite s schimbai culoarea unei linii orizontale (vizibil
numai cu Internet Explorer, non standard W3C). Dac inei neaprat s
209
colorai o linie orizontal, utilizai Macromedia Fireworks (Adobe
Photoshop sau orice alt aplicaie) cu care s realizai 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 vei utiliza aceast linie ntr-un
script (figura 5.11).
Figura 5.11
Dreamweaver 4 Definii lungimea i nlimea unei

workspace
linii orizontale
Cu Dreamweaver putei personaliza o linie orizontal modificnd
lungimea, limea etc.
Iat cum definim n procente (75%) lungimea primei linii orizontale.
1. Selectai prima linie orizontal n vederea personalizrii acesteia

(figura 5.12).
Figura 5.12
2. n zona W din inspectorul Properties introducei valoarea 75%

(valoare relativ, exprimat n procente), figura 5.13.
Figura 5.13
210
Remarc. Dac dorii s aplicai liniei orizontale i efectul de umbr, activai opiunea
Shading din inspectorul Properties, figura 5.14.
Figura 5.14
Dezactivai opiunea Shading dac dorii ca bara s aib un aspect plin!
Figura 5.15
Remarc. Dimensiunea, umbra au fost modificate conform cerinelor (vezi figura 5.15).
Figura 5.16
Remarc. Selectai tag-ul <HR>, deschidei panoul Reference i utilizai meniul derulant
Description pentru a vizualiza atributul width.

211
Figura 5.17
Iat cum modificm lungimea i nlimea celei de-a doua linii orizontale
cu 25 respectiv 10 pixeli.
1. Selectai a doua linie orizontal n vederea personalizrii

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

introducei valoarea 25 (valoare absolut, exprimat n pixeli),
iar n zona Horizontal Rule H introducei valoarea 10 (valoarea
absolut, exprimat n pixeli), figura 5.18.
Remarc. nlimea (Horizontal Rule - H) este ntotdeauna exprimat n pixeli.
Figura 5.18
Remarc. Cea de-a doua linie orizontal se afieaz conform specificaiilor (figura 5.19).
Figura 5.19
212
Figura 5.20
Remarci:
9 Selectai tag-ul <HR>, deschidei panoul Reference, utilizai meniul derulant
Description pentru a vizualiza atributul size.
9 Citii Conversaia 5, paragraful: HTML4 Definii lungimea i nlimea unei
linii (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Figura 5.21
Dreamweaver 4 Aliniai o linie orizontal

workspace
Iat cum aliniem la dreapta pe o lungime de 75% din limea total a

paginii, linia orizontal care separ primele dou paragrafe ale paginii.
213
1. Selectai prima linie orizontal n vederea alinierii acesteia
(figura 5.22).
Figura 5.22
2. n meniul derulant Align din inspectorul Properties identificai

opiunea Right, iar apoi introducei valoarea 75% n zona W
(figura 5.23).
Figura 5.23
Figura 5.24
214
Remarci:
9 Selectai tag-ul <HR>, deschidei panoul Reference, utilizai meniul derulant
Description pentru a vizualiza atributul align.
9 Citii Conversaia 5, paragraful: HTML4 Aliniai 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 respectai procedura descris n cele ce
urmeaz.
1. Selectai cea de-a doua linie orizontal.
2. n zona Horizontal Rule W introducei valoarea 75 iar n

meniul derulant Align selectai Center (figura 5.26).
Figura 5.26
Remarc. Linia orizontal se afieaz conform specificaiilor (figura 5.27).
Figura 5.27
215
Figura 5.28
Figura 5.29
Dreamweaver MX Personalizai o linie orizontal

workspace
Iat cum procedm pentru a personaliza prima linie orizontal: lungimea

75%; aliniere dreapta; efect de umbr.
1. Selectai prima linie orizontal care separ primele dou

paragrafe.
2. n zona W din panoul Properties introducei valoarea 75%

(figura 5.30).
216
3. n meniul derulant Align din panoul Properties alegei opiunea
Right (figura 5.30).
4. Activai opiunea Shading din panoul Properties (figura 5.30).
Figura 5.30
Figura 5.31
Figura 5.32
217
Aplicaie
Centrai pe o lungime de 75 de pixeli linia care separ cel de-al doilea

paragraf de restul textului.
Indicaie. Introducei 75 n zona W, iar n meniul derulant Align (panoul

Properties) selectai Center.
218
Dreamweaver MX Tem
Testai-v cunotinele
1. Descriei pe scurt o metod Dreamweaver 4 workspace de inserare n
pagina dumneavoastr a unei linii orizontale.
2. Cum folosii grupul de panouri Insert pentru inserarea unei linii

orizontale?
3. Cum colorai cu Dreamweaver MX workspace o linie orizontal?
4. Descriei pe scurt procedura Dreamweaver 4 workspace/Dreamweaver

MX workspace pentru alinierea unei linii orizontale.
5. Cum personalizai o linie orizontal cu Dreamweaver MX workspace?
Vizitai site-urile
9 www.flashkit.com
9 www.werehere.com
9 www.macromedia.com/software/trial
9 www.libpng.org/pub/png
Conversaia 6
Creai i utilizai foi de stiluri n cascad

cu Dreamweaver MX
f Dreamweaver MX Tipuri de stiluri CSS folosite n Dreamweaver
f Dreamweaver 4 workspace, MX workspace Creai stiluri CSS
f Dreamweaver 4 workspace, MX workspace Creai un stil CSS cu
opiunea Make Custom Style (class)
f Dreamweaver 4 workspace, MX workspace Aplicai un stil CSS (o clas)
unui paragraf
f Dreamweaver 4 workspace, MX workspace Modificai un stil CSS (o
clas)
f Dreamweaver 4 workspace, MX workspace Creai un stil CSS cu
opiunea Redefine HTML Tag i aplicai-l unui text
f Dreamweaver 4 workspace, MX workspace Modificai link-urile cu
selectorii CSS
f Dreamweaver 4 workspace, MX workspace Creai i aplicai o foaie de
stiluri extern
Tipuri de stiluri CSS folosite n

Dreamweaver MX
Dreamweaver
Cu Dreamweaver MX putei crea dou tipuri de foi de stiluri: foi de stiluri

interne i foi de stiluri externe.
220
Tipurile de stiluri CSS pe care le putei 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. Citii Conversaia 6 (Liviu Dumitracu, (X)HTML, Editura Universitii din
Ploieti, 2003), paragrafele:
9 (X)HTML Foile de stiluri n cascad CSS1, CSS2, CSS3;
9 (X)HTML Creai stiluri CSS;
9 (X)HTML Categorii de proprieti de stiluri.
Dreamweaver 4 Creai stiluri CSS

workspace
Iat cum procedai pentru a crea un stil CSS n pagina unui document
deschis, cu Dreamweaver 4 workspace.
1. Folosii una din metodele prezentate mai jos pentru a afia

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 introducei numele stilului;

9 Type alegei una din opiunile: 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 stri: a:link; a:hover; a:active;
a:visited;
9 Define In alegei una din opiunile: 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, executai clic pe butonul
OK.
Aplicaii
Afiai stilurile CSS.
1. Executai clic pe Window CSS Styles (figura 6.2).
Figura 6.2
222
Remarc. Se afieaz panoul CSS Styles (figura 6.3).
Figura 6.3
Identificai icon-urile; (Attach Style Sheet); (New Style); (Edit

Style Sheet); (Delete CSS Style) de la baza panoului.
Dreamweaver MX Creai stiluri CSS

workspace
Iat cum procedai pentru a crea un stil CSS n pagina unui document
deschis, cu Dreamweaver MX workspace.
1. Folosii 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 introducei numele stilului;

9 Type alegei una din opiunile: Make Custom Style;
Redefine HTML Tag; Use CSS Selector;
9 Define In alegei una din opiunile: New Style Sheet File;
This Document Only.
OK.
Aplicaie
Afiai stilurile CSS.
1. Executai clic pe Window CSS Styles.
Se afieaz panoul CSS Styles (figura 6.4).
Figura 6.4
2. n panoul CSS Styles, executai clic pe butonul radio:
9 Apply Styles se afieaz lista stilurilor CSS ale documentului

(figura 6.5);
224
Figura 6.5
9 Edit Style se afieaz stilurile CSS i caracteristicile acestora

(figura 6.6).
Figura 6.6
Dreamweaver 4 Creai un stil CSS cu opiunea

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

workspace, folosii 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 crem 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 BLND este
puternic i nu doar att!.
Metoda 1
1. Executai clic pe Window CSS Styles.
2. n panoul CSS Styles, care se afieaz executai 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, executai 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 introducei numele stilului personalizat (.parag);
9 Type activai butonul radio Make Custom Style (class);
9 Define In activai 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 configurai atributele stilului.
6. n caseta de dialog CSS Style definition for .parag (figura 6.10),

n categoria Type, zona:
9 Font selectai Georgia, Times New Roman, Times, Serif;
9 Size selectai valoarea 24;
9 Weight selectai bold;
9 Color introducei #00FF00 (culoarea verde).
Figura 6.10
7. Executai clic pe butonul OK (pentru a salva stilul).
Remarc. Se afieaz caseta de dialog Edit Style Sheet.

Done (figura 6.11).
228
Figura 6.11
Remarc. n panoul CSS Styles se afieaz 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, executai clic pe icon-ul (New Style).

229
Metoda 3
Se modific paii 2 i 3 (Metoda 1) dup cum urmeaz:
2. Deschidei meniul local al panoului CSS Styles i alegei New

CSS Style (figura 6.13).
Figura 6.13
Metoda 4
Se modific paii 1 3 (Metoda 1) dup cum urmeaz:
1. Executai clic pe Text CSS Styles New CSS Style (figura

6.14).
Figura 6.14
230
Metoda 5
1. n panoul Launcher, executai clic pe butonul (CSS Style),

figura 6.15.
Figura 6.15
Dreamweaver MX Creai un stil CSS cu opiunea

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 crem clasa (aceeai pe care ai 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
Aplicai acest stil paragrafului: LUMINA BLANDA este puternic i nu
doar att!.
Metoda 5
1. n panoul CSS Styles, deschidei meniul local ( ) i alegei

CSS Style (figura 6.16).
Figura 6.16
2. n panoul CSS Styles, executai 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, executai urmtoarele
aciuni:
9 n zona Name introducei .parag;
9 n zona Type activai butonul radio Make Custom

Style (class);
9 n zona Define in activai butonul radio This Document

Only;
9 executai clic pe butonul OK.
4. n caseta de dialog Style definition for .parag executai

urmtoarele aciuni:
9 configurai atributele stilului .parag (zonele Font, Size,

Weight, Color);
Remarc. n panoul CSS Styles se afieaz noul stil personalizat .parag (figura 6.18).
5. n caseta de dialog Edit Style Sheet, care se afieaz, executai

clic pe butonul Done.
Figura 6.18
233
Aplicai un stil CSS (o clas) unui

Dreamweaver 4
workspace paragraf
Iat cum procedm pentru a aplica stilul CSS personalizat .parag,

paragrafului: LUMINA BLND este puternic i nu doar att!.
2. Afiai panoul CSS Styles.
3. n panoul CSS Styles, selectai 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, asigurai-v c n panoul CSS
Styles, opiunea Apply este activat.

234
Figura 6.20
Remarc. Citii Conversaia 6, paragraful: HTML 4 Creai i aplicai o clas (Liviu

Figura 6.21
235
Dreamweaver MX Aplicai un stil CSS (o clas) unui

workspace paragraf
Iat cum procedm pentru a aplica stilul CSS personalizat .parag,

paragrafului: LUMINA BLND este puternic i nu doar att!.
2. n panoul CSS Styles executai clic pe Apply Styles (figura

6.22).
Figura 6.22
3. n panoul CSS Styles, executai 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 Modificai un stil CSS (o clas)

workspace
Pentru a modifica un stil CSS personalizat (o clas), folosii 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 procedm 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. Afiai panoul CSS Styles.
2. n panoul CSS Styles, executai 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 selectai Times New Roman, Times, serif;
9 Size selectai 36 px;
9 Color selectai #0000FF.

238
Figura 6.26
Metoda 2
2. Executai clic pe Text CSS Styles Edit Style Sheet.
Metoda 3
2. Deschidei meniul local din panoul CSS Styles ( ) i executai

clic pe Edit Style Sheet.
Aplicaii
Anulai stilul CSS personalizat .parag.
Indicaie. n panoul CSS Styles, executai clic pe stilul none.
Duplicai stilul CSS personalizat .parag.

239
Indicaie. n caseta de dialog Edit Style Sheet selectai stilul .parag, iar apoi
executai clic pe butonul Duplicate.
Suprimai stilul CSS personalizat .parag.
Indicaie. n panoul CSS Styles, executai clic pe butonul (Delete Style).
Exportai stilul CSS personalizat .parag.
Indicaie. n panoul CSS Styles, n meniul local ( ) alegei Export Style Sheet.
Creai dou clase: avantaje, dezavantaje, care se vor aplica urmtoarelor

dou paragrafe:
9 Avantaje: Se ctig mult timp n activitatea de formatare.
9 Dezavantaje: Nu toate navigatoarele recunosc foile de stil.
Remarc. Cele dou clase sunt definite n Conversaia 6, paragraful: HTML 4 Creai i
aplicai o clas (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Indicaie. Creai cele dou clase cu una din metodele prezentate. Aplicai apoi
cele dou clase, paragrafelor listate n cadrul aplicaiei.
Dreamweaver MX Modificai un stil CSS (o clas)

workspace
Iat cum procedm pentru a modifica stilul CSS personalizat .parag,

(acelai pe care l-ai modificat cu Dreamweaver 4 workspace).
.parag {font family: Times New Roman, Times, serif;

font size: 36 px;
color: #0000FF}
1. n panoul CSS Styles, executai clic Edit Styles (figura 6.27).
240
Figura 6.27
2. Executai 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
afieaz, n zonele Font, Size, Color introducei noile
caracteristici ale stilului .parag.
Remarc. Stilul .parag a fost modificat.

Aplicaie
Anulai un stil CSS.
Indicaie. n panoul CSS Styles, executai clic pe Apply Styles.
Creai un stil CSS cu opiunea

Dreamweaver 4 Redefine HTML Tag i aplicai-l
workspace
unui text
Redefine HTML Tag, cea de-a doua opiune din caseta de dialog New
CSS Style (figura 6.29) v d acces la o list de tag-uri pe care le putei
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 BLND.
Remarc. n mod prestabilit, tag-ul <H1> aliniaz textul (obiectul) la stnga.
1. Afiai caseta de dialog New CSS Style.
2. n caseta de dialog New Style, n zona (figura 6.30):
9 Type activai butonul radio Redefine HTML Tag;
9 Tag executai clic pe butonul , iar apoi selectai

tag-ul h1;
9 Define In activai butonul radio This Document Only.
Figura 6.30
Remarc. Se afieaz 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),

executai urmtoarele aciuni:
9 selectai categoria Block;
9 n zona Text Align (categoria Block) selectai 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
Aplicaii
Creai cu Dreamweaver 4 workspace stilul:
h1 {text-align: center;
font-size: 24 pt;
color: #FF0000;
background: cyan}.
Aplicai acest stil textului: LUMINA BLANDA.
Indicaie. n caseta de dialog CSS Style definition for h1 selectai categoria Type
i apoi categoria Background.
Creai cu Dreamweaver 4 workspace stilul:
p {text align: center; font size: 18 pt; color: blue}.

245
Aplicai acest stil paragrafului Felicitri pentru rbdarea de a ne fi descoperit!.
Creai 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}.
Aplicai stilurile h1, h2 i p urmtoarelor texte prezentate mai jos:
9 LUMINA BLANDA;
9 Bine ai venit!;
9 Felicitri pentru rbdarea de a ne fi descoperit!.
Creai un stil CSS cu opiunea

Dreamweaver MX
workspace
Redefine HTML Tag i aplicai-l
unui text
Iat cum definim cu Dreamweaver MX workspace stilul:
h1 {text align: center}.
Vom aplica acest stil textului: LUMINA BLND.

aciuni (figura 6.34):
9 n zona Type activai butonul radio Redefine HTML

Tag;
9 n zona Tag selectai tag-ul h1;
9 n zona Define In activai butonul radio This Document
Only;
246
Figura 6.34
3. n caseta de dialog CSS Style definition for h1, executai

urmtoarele aciuni:
9 selectai categoria Block;

9 selectai n zona Text Align (categoria Block) Center;
Remarc. Se afieaz caseta de dialog Edit Style Sheet.

Done.
Figura 6.35
247
Figura 6.36
Aplicaii
Creai cu Dreamweaver MX workspace stilul:
body {font-style: italic}.
Aplicai acest stil textului integral al paginii.
body {font-size: 30 pt}.
Aplicai acest stil textului integral al paginii.
Creai cu Dreamweaver MX workspace urmtoarele stiluri:
9 h1 {color: red};
9 h2 {color: red};
9 p {color: blue}.
Aplicai aceste stiluri urmtoarelor trei texte:
9 Bine ai venit!
9 Felicitri pentru rbdarea de a ne fi descoperit!
9 LUMINA BLANDA este puternic i nu doar att!
Creai cu Dreamweaver MX workspace urmtoarele stiluri:
9 body {background-color: purple};
9 p {color: blue; background-color: white}.

248
Aplicai aceste stiluri:
9 fundalului unei pagini;
9 paragrafului LUMINA BLANDA este puternic i nu doar att! Dorim

s ne cunoatem i s rmnem mpreun! din cadrul aceleiai
pagini.
body{background-image: URL (C:\Windows\Web\Wallpage\ follow.jpg)}.
Creai cu Dreamweaver MX stilul:
9 p {letter-spacing: 30 em}.
Aplicai acest stilul paragrafului: LUMINA BLANDA este puternic i nu doar

att!
9 h1 {text-decoration: blink}.
Aplicai acest stilul titlului de nivel 1: Bine ai venit!.
9 h1 {text-decoration: blink}.
Aplicai acest stilul titlului de nivel: Bine ai venit!
Modificai link-urile cu selectorii

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

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

hiperlegtur derulant.
1. Creai un stil nou (New Style).
2. n caseta de dialog New CSS Style, n zona Type, selectai

butonul radio Use CSS Selector (figura 6.37).
Remarc. Cele patru stiluri de link-uri se afieaz imediat n meniul derulant

(figura 6.38).
Figura 6.38

aciuni:
9 afiai meniul derulant n zona Selector i selectai a: hover,

tipul de link pe care dorim s-l personalizm.
9 n zona Define In activai butonul radio New Style Sheet File.
250
Remarc. Se afieaz caseta de dialog CSS Style Definition for (figura 6.38).
4. n caseta de dialog CSS Style definition for, n categoria Type,

selectai o culoare green dup care executai clic pe butonul
OK (figura 6.39).
Figura 6.39
5. Creai o hiperlegtur n pagina Dumneavoastr Web, pentru a

vedea selectorul a: hover pe care l-ai definit (vezi figura 6.40).
Figura 6.40
251
6. Salvai pagina.
Figura 6.41
Figura 6.42
Remarc. Efectul (a:hover) este disponibil numai n Internet Explorer. Cnd cursorul
dumneavoastr se afl deasupra hiperlegturii, aceasta i schimb culoarea.
252
Aplicaii
Convertii stilurile CSS n tag-uri HTML. n acest mod, reuii s fii amabili cu
vizitatorii care folosesc browser-e mai vechi.
Iat care este procedura pe care trebuie s-o urmai:
1. Salvai pagina Web.
2. Executai clic pe File Convert 3.0 Browser Compatible.
Se afieaz 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,

selectai butonul radio CSS Styles to HTML Markup, iar apoi executai
clic pe butonul OK (figura 6.44).
Figura 6.44
Figura 6.45
253
Remarci:
9 Noua pagin Web conine 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
Folosii stilurile CSS pentru a elimina sublinierea hiperlegturilor (nu toi

vizitatorii sunt de acord cu ... aceast aplicaie! Noi o folosim n scopuri
didactice!).
1. n panoul CSS Styles redefinii tag-ul <a>.
2. n caseta de dialog Style definition, n categoria Text, alegei pentru

parametrul Decoration, valoarea None.
Utilizai stilul CSS Selector pentru a redefini grupul de tag-uri HTML: <h1>,
... ,<h6>. Modificai pentru toate cele 6 tag-uri de titlu, proprietatea de aliniere
a textului (left) n (center).
1. n caseta Duplicate, introducei numele tag-urilor <h1> pn la <h6>

separate prin virgul.
2. Modificai proprietatea de aliniere a textului la valoarea center.

254
Dreamweaver MX Modificai link-urile cu selectorii

workspace CSS
Cu selectorii CSS putei modifica formatarea link-urilor pentru a

mbunti prezentarea paginilor dumneavoastr Web. Aceti 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
personalizm.

9 n zona Type alegei Use CSS Selector;

9 n zona Selector alegei a: hover;
9 n zona Define In activai butonul radio, New Style Sheet
File;
Figura 6.47
3. n caseta de dialog CSS Style definition for, care se afieaz, n

categoria Type, selectai o culoare green, dup care executai
clic pe butonul OK.
255
4. Creai o hiperlegtur Bine ai venit! n pagina dumneavoastr
Web.
5. Salvai pagina.
Figura 6.48
7. Vizualizai pagina Web ntr-un browser i testai efectul a: hover

(figura 6.49).
Figura 6.49
256
Dreamweaver 4 Creai i aplicai o foaie de stiluri

workspace extern
Putei crea foi de stiluri externe n acelai mod n care ai creat foile de
stiluri interne. Singura deosebire este aceea c foile de stiluri externe
trebuie s fie salvate ca un fiier text separat, cu extensia .css.
Remarc. Dreamweaver stabilete n mod automat link-ul ctre paginile Web crora
dorii s le aplicai definiiile de stil.
Iat care este procedura pe care v invitm s-o urmai pentru a crea o
foaie de stiluri extern n care definii stilul:
.parag {font-family: Georgia, Times New Roman, Times, serif;

font-size: 24 px;
font-weight: bold;
color: #00FF00}.
1. Creai fiierul stil.css.
1.1 Creai un nou document.
1.2 Afiai caseta de dialog New CSS Style.
1.3 n caseta de dialog New CSS Style, n zona:
9 Name introducei numele stilului personalizat,

.parag (vedei clasa .parag);
9 Type activai butonul radio Make Custom Style
(class);
9 Define In activai butonul radio New Style Sheet File;
1.4 Executai 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 selectai folder-ul foii de stiluri;

9 File name introducei numele foii de stil, stil.css;
9 Save as type alegei Style Sheet Files (*.css);
9 URL indicai calea de acces (dac este cazul!);
9 Relative TO pstrai opiunea Document, activ.
1.6 n caseta de dialog Save Style Sheet File As, executai clic
pe butonul Save.
1.7 n caseta de dialog CSS Style Definition for .parag in stil

.css, zona Type (figura 6.51):
9 indicai parametrii stilului;

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

259
Figura 6.53
Remarci:
9 Executai clic pe F8 pentru a vizualiza fiierul stil.css.
9 Citii Conversaia 6, paragraful HTML 4 Creai i aplicai o foaie de stiluri
extern (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
3. Creai link-ul ctre foaia de stiluri extern.
3.2 Executai clic pe Text CSS Styles Attach Style Sheet

(sau, n panoul CSS Styles, executai clic n meniul local i
alegei Attach Style Sheet sau, n panoul CSS Styles,
executai clic pe butonul (Attach Style Sheet)).
Remarc. Se deschide caseta de dialog Style Sheet File.
3.3 n caseta de dialog Style Sheet File, executai clic pe

stil.css i apoi executai clic pe butonul Select.
Remarc. Toate stilurile din aceast foaie de stiluri apar n panoul CSS Styles.

260
Figura 6.54
5. Aplicai 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
Aplicaie
Modificai fiierul stil.css (extern).
1. Accesai un document Dreamweaver deschis i legat la foaia de stiluri

extern.
2. Executai clic pe Text CSS Styles Edit Style Sheet.
3. n caseta de dialog Edit Style Sheet, care se afieaz:
9 selectai stil.css (link);

9 executai clic pe butonul Edit.
4. n caseta de dialog CSS Style Definition for .parag in stil .css, efectuai
modificrile pe care le considerai necesare.
5. Salvai foaia de stiluri, dup care executai clic pe butonul Done.
Remarci:
9 Toate tag-urile care utilizeaz acest stil sunt actualizate.
9 Acionai tasta F8 iar apoi executai dublu clic pe icon-ul fiierului 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.

Aplicaie
Creai i aplicai o foaie de stiluri extern stilh2.css n care definii stilul:
h2 {font size: 18 pt; color: green}.
Aplicai foaia de stiluri extern creat.
Dreamweaver MX Creai i aplicai o foaie de stiluri

workspace extern
Pentru a utiliza aceleai stiluri n pagini diferite, va trebui s creai o

foaie de stiluri extern, ntr-un fiier 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 procedai 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. Creai un nou document.
2. Executai 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, executai clic (figura 6.60),

pe butonul New.
264
Figura 6.60
Remarc. Cnd creai o nou foaie de stiluri, va trebui s creai un nou stil.
4. n caseta de dialog New CSS Style care se afieaz, executai

urmtoarele aciuni (figura 6.61):
9 n zona Name introducei numele stilului;

9 n zona Type activai butonul radio Make Custom
Style (class);
9 n zona Define In activai butonul radio New Style Sheet
File;
Figura 6.61
265
5. n caseta de dialog Save Style Sheet File As care se afieaz,
executai urmtoarele aciuni (figura 6.62):
9 n zona Save in selectai folder-ul foii de stiluri;

9 n zona File name introducei stil2.css;
9 n zona Save As Type alegei Style Sheet File (*.css);
9 n zona URL indicai calea de acces (dac este
cazul!);
9 n zona Relative To pstrai opiunea Document, activ;
9 executai clic pe butonul Save.
Figura 6.62
6. n caseta de dialog CSS Styles Definition for .parag in stil2.css,

n zona Type:
9 indicai parametrii stilului;

266
7. Executai clic pe butonul Done din caseta de dialog Edit Style
Sheet (figura 6.63).
Figura 6.63
Remarc. Atunci cnd utilizai o foaie de stiluri existent, modificai pasul 3, dup cum
urmeaz:
3. n caseta de dialog Edit Style Sheet, executai urmtoarele aciuni (figura
6.64):
9 executai clic pe butonul Link;
9 n zona File/URL introducei calea de acces;
Figura 6.64

267
Figura 6.65
9. Creai link-ul ctre foaia de stiluri extern.
9.2 Afiai caseta de dialog Link External Style Sheet cu una

din metodele prezentate la punctul 3 (Creai link-ul ctre
foaia de stiluri extern cu Dreamweaver 4 workspace).
9.3 n caseta de dialog Link External Style Sheet, executai

9 n zona File/URL introducei calea de acces;
9 activai butonul radio Link;
Figura 6.66
268
Figura 6.67
11. Aplicai foaia de stiluri extern unei pagini (figura 6.68).
Figura 6.68

269
Figura 6.69
Aplicaii
Creai o foaie de stiluri extern direct, n cod HTML.
Iat care este procedura pe care trebuie s-o aplicai.
1. Executai clic pe File New.
2. n caseta de dialog New Document, n subpanoul General, executai

9 n categoria Base Page executai clic pe CSS;
9 executai clic pe butonul Create.

270
Figura 6.70
3. n fereastra <<CSS>> care se afieaz, introducei codul de descriere

al stilurilor (figura 6.71).
Figura 6.71
4. Salvai fiierul cu extensia .css.
Remarc. Evident, putei realiza link-uri ctre paginile HTML dorite.

271
Folosii (dac suntei n criz de inspiraie) un model de foi de stiluri.
2. n caseta de dialog New Document, n subpanoul General executai

9 n categoria CSS Styles Sheet alegei un model;
Figura 6.72
3. Salvai aceast foaie de stil n folder-ul site-ului dumneavoastr.

272
Dreamweaver MX Tem
Testai-v cunotinele
1. Definii tipurile de stiluri CSS pe care le putei crea cu Dreamweaver
MX.
2. Creai cu Dreamweaver 4 workspace urmtoarea clas:
.parag{font-family: Times New Roman, Times, Serif;
font-size:24 px;
color:#00FF00}.
3. Suprimai stilul CSS personalizat .parag.
4. Creai cu Dreamweaver MX workspace stilul
body{background-color: red}.
5. Creai o foaie de stiluri extern n care definii stilul:
.parag{font-family: Times New Roman, Times, Serif;
font-size:24 px;
font-weight:bold;
color:#0000FF}.
Vizitai site-urile
9 www.dhtmlzone.com
9 www.cinemascope.com/photos
Conversaia 7
Inserai imagini cu Dreamweaver MX
f Dreamweaver 4 workspace, MX workspace Inserai o imagine
f Dreamweaver 4 workspace, MX workspace Aliniai orizontal o imagine
f Dreamweaver 4 workspace, MX workspace Aplicai o bordur unei
imagini
f Dreamweaver 4 workspace, MX workspace Definii un text de nlocuire
(substituie) pentru o imagine
f Dreamweaver 4 workspace, MX workspace Aliniai vertical o imagine n
raport cu un text
f Dreamweaver MX workspace Inserai un spaiu rezervat pentru o
imagine n construcie
f Dreamweaver MX workspace Plasai text n jurul unei imagini
f Dreamweaver 4 workspace, MX workspace Adugai mai multe spaii n
jurul unei imagini
f Dreamweaver 4 workspace, MX workspace Aplicai o imagine de
background
f Dreamweaver 4 workspace, MX workspace Convertii o imagine n
legtur
f Dreamweaver 4 workspace, MX workspace Creai o imagine cu zone
reactive
274
Dreamweaver 4 Inserai o imagine

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

nefiind crearea unei pagini frumoase cu transferul rapid de
informaie. La ora actual, Web-ul nu poate fi conceput fr imagine,
sunet, video. Imaginile n format GIF, JPEG sau PNG pe care le inserai
n paginile dumneavoastr Web pot avea mai multe finaliti: imagini de
informare, imagini pentru crearea legturilor (link-urilor) hipertext etc.
Pentru a insera o imagine cu Dreamweaver 4 workspace ntr-o pagin

Web, folosii una din metodele prezentate mai jos:
9 Metoda 1 Meniul Insert, via Image;
Iat cum inserai n pagina dumneavoastr Web, cu Dreamweaver 4

workspace imaginea Smokey Light, din folder-ul Site, n colul din
stnga sus al paginii. Imaginea Smokey Light (Lumin mai puin
blnd!) n format .JPEG (.JPG) se va afia 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. Executai clic n locul n care dorii s se insereze imaginea

(figura 7.1).
Figura 7.1
2. Executai clic pe Insert Image (figura 7.2).
Figura 7.2
Remarc. Se afieaz caseta de dialog Select Image Source (figura 7.3).
Figura 7.3
3. Executai clic pe Smokey Light.jpg (figura 7.4).
4. Analizai imaginea selectat (800 x 600 JPEG) n zona Image

Preview (figura 7.4).
276
5. n meniul derulant Relative To: indicai calea de acces:
Document (figura 7.4).
Figura 7.4
Remarci:
9 Atunci cnd inserai o imagine, trebuie s precizai calea de acces la aceast
imagine: absolut, relativ la document sau relativ la rdcina site-ului.
9 Utilizai legturi absolute atunci cnd facei referiri la o surs care se gsete
n afara folder-ului site-ului dumneavoastr.
Exemplu: <img src=http://www. ...>
9 Utilizai legturi relative la document atunci cnd nu este necesar s indicai
URL-urile relative la protocol, site.
Exemplu:
<img src=Follow.jpg>
6. Executai 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 Spaiile goale din interiorul denumirilor fiierelor sunt cauza apariiei
caracterelor %20.
9 Selectai tag-ul <IMG>, deschidei panoul Reference i citii informaiile care
se afieaz. Utilizai meniul Description pentru a vizualiza atributul src.
9 Citii Conversaia 7, paragraful HTML4- Inserai o imagine (Liviu Dumitracu,
Figura 7.7
Etapa 2
Iat cum parametrizm imaginea Smokey Light:
9 lungimea 85 pixeli;
9 limea 85 pixeli.
1. Selectai imaginea (inserat).
Dimensiunile imaginii apar automat n panoul Properties. n zona Image,

Dreamweaver afieaz dimensiunea imaginii (figura 7.8).
278
Figura 7.8
Remarc. n zona Image introducei numele imaginii n cazul n care dorii s fie apelat
dintr-un script.
2. Introducei n zona width (W) valoarea 85 (pixeli), figura 7.9.
Figura 7.9
3. Introducei n zona height (H) valoarea 85 (pixeli), figura 7.10.
Figura 7.10
Remarc. Imaginea se afieaz la noii parametrii.
Figura 7.11
Figura 7.12
279
Remarci:
9 Selectai tag-ul <IMG>, deschidei panoul Reference, utilizai meniul
Description i vizualizai atributele width, height.
9 Inserai icon-ul de conformitate .
Figura 7.13
Etapa 3
n sfrit, pentru a alinia la stnga imaginea inserat (Smokey Light) n

pagina dumneavoastr Web respectai paii descrii n continuare.
1. Selectai imaginea.
2. n panoul Properties executai clic pe butonul (Left).
Figura 7.14

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

categoria Common (figura 7.16).
Figura 7.16
Remarci:
9 Calea de acces ctre imagine mai poate fi indicat tastnd calea (Smokey
Light.jpg) n zona Src din panoul Properties (figura 7.17).
Figura 7.17
9 Putei modifica drumul de acces ctre imagine executnd clic pe icon-ul

sau glisnd icon-ul (ctre imaginea de inserat) (figura 7.18).
Figura 7.18
281
Aplicaie
Redimensionai imaginea sigla.jpg creat cu aplicaia Macromedia Fireworks.
Dreamweaver permite redimensionarea unei imagini n trei moduri: indicnd

dimensiunea n pixeli (1), n procente (2) sau modificnd pur i simplu imaginea
glisnd 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 utilizm o aplicaie dedicat, ca de exemplu Fireworks.
Atunci cnd redimensionai o imagine cu Dreamweaver, ea este mrit sau

micorat n funcie de noile dimensiuni, dar fiierul imagine nu-i modific
dimensiunile. n pagina Web noua imagine risc de a nu fi de aceeai calitate
cu originalul.
Procedura pe care v invitm s-o aplicai este descris n continuare.
2. Executai clic pe Commands Optimize Image in Fireworks
Remarc. Se afieaz caseta de dialog Find Source(figura 7.19).
Figura 7.19
Remarc. Dreamweaver v ntreab dac dorii s utilizai un document original pentru a

efectua modificrile. Rspundei prin Da sau Nu.
3. Acionai butonul Yes pentru a gsi fiierul surs n format .png creat
n Fireworks / acionai butonul No pentru a deschide fiierul n
fereastra de optimizare a Fireworks-ului (figura 7.19).
282
4. Efectuai modificrile dorite (figura 7.20).
Figura 7.20
5. Executai clic pe Update (figura 7.20).
Remarc. Putei modifica o imagine utiliznd un editor extern, pe care l putei deschide
acionnd butonul Edit din panoul Properties (figura 7.21).
Figura 7.21
Dreamweaver MX Inserai o imagine

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

Web, folosii una din metodele prezentate mai jos:
9 Metoda 1 Meniul Insert, via Image;

283
Iat cum inserai n pagina dumneavoastr Web, cu Dreamweaver MX
workspace aceeai imagine (Smokey Light) pe care ai inserat-o cu
Dreamweaver 4 workspace. Imaginea, n format .JPG se va afia ntr-o
caset de 85 x 85 pixeli.
Metoda 2
1. Executai clic n locul n care dorii s se insereze imaginea.
2. n subpanoul Common din cadrul grupului de panouri Insert,
executai clic pe butonul (Image), figura 7.22.
Figura 7.22
3. n caseta de dialog Select Image Source (figura 7.23) executai

urmtoarele aciuni:
9 n zona Select File Name From lsai activat opiunea File

System;
9 Executai clic pe Smokey
Light .JPG;
9 n meniul derulant Relative to: indicai calea de acces:
Document.
9 Executai 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, introducei numele imaginii n cazul n care

dorii ca aceasta s fie apelat dintr-un script.
5. n zonele W i H introducei valoarea 85 (pixeli).
Remarc. Pentru a reveni la valorile iniiale executai clic pe butonul (Reset Size).
285
6. n panoul Properties, executai clic pe butonul (Left), figura
7.25.
Figura 7.25
Figura 7.26
Remarc. Citii Conversaia 7, paragraful XHTML Inserai o imagine (Liviu

Figura 7.27
286
Dreamweaver 4 Aliniai orizontal o imagine

workspace
Cu Dreamweaver 4 workspace putei alinia orizontal (stnga, centru,

dreapta) o imagine n pagina dumneavoastr Web.
Iat cum procedai pentru a centra cu Dreamweaver 4 workspace

sigla.jpg, sigla societii LUMIN BLND.
1. Selectai imaginea i analizai ce se ntmpl n panoul

Figura 7.28
2. Acionai tasta pentru a plasa punctul de inserie exact la

dreapta imaginii (figura 7.29).
Figura 7.29
3. Acionai tasta Enter pentru ca imaginea s se poziioneze pe

propria linie.
4. Executai din nou clic pe imagine pentru a o selecta (figura

7.30).
Figura 7.30
287
5. Executai clic pe butonul center ( ) din panoul Properties
(figura 7.31).
Figura 7.31
Remarc. Imaginea se afieaz centrat n cadrul paginii (figura 7.32).
Figura 7.32
Figura 7.33
Remarc. Putei de asemenea alinia la dreapta sigla.jpg executnd clic pe butonul

(Right) din panoul Properties pasul 5.
Figura 7.34
288
Dreamweaver MX Aliniai orizontal o imagine

workspace
Pentru a alinia orizontal o imagine n cadrul unei pagini Web, folosii

panoul Properties i executai clic pe unul din cele trei butoane n funcie
de tipul de aliniere dorit: left, center sau right.
Iat cum procedai pentru a centra cu Dreamweaver MX workspace

imaginea sigla.jpg, aceeai pe care ai aliniat-o i cu Dreamweaver 4
workspace.
1. Selectai imaginea i analizai ce se ntmpl n panoul

Properties.
2. Executai clic pe butonul (Center) din panoul Properties

(figura 7.35).
Figura 7.35
3. Analizai codul XHTML generat(figura 7.36).
Figura 7.36
289
Remarc. Citii Conversaia 7, paragraful XHTML Aliniai orizontal o imagine (Liviu
Figura 7.37
Dreamweaver 4 Aplicai o bordur unei imagini

workspace
Putei ncadra imaginea ntr-un chenar de orice culoare!
Iat cum aplicai o bordur neagr de 13 pixeli imaginii sigla.jpg.
1. Selectai imaginea (figura 7.38).
Figura 7.38
2. n panoul Properties, zona Border, tastai valoarea 13 (pixeli)

care reprezint limea bordurii (figura 7.39).
290
Figura 7.39
Remarc. n jurul imaginii se afieaz o bordur, de aceeai culoare (neagr) cu textul

paginii (figura 7.40).
Figura 7.40
Figura 7.41
Remarci:
Description i vizualizai atributul border.
9 Citii Conversaia 7, paragraful HTML 4 Aplicai o bordur unei imagini (Liviu

291
Figura 7.42
Dreamweaver MX Aplicai o bordur unei imagini

workspace
Pentru a pune n valoare imaginile dumneavoastr, adugai-le borduri

folosind panoul Properties.
Iat cum aplicai o bordur neagr de 13 pixeli, imaginii sigla.jpg.
2. n panoul Properties, zona Border, tastai valoarea 13 (pixeli).
Figura 7.43
292
Remarc. Citii Conversaia 7, paragraful XHTML Aplicai o bordur unei imagini (Liviu
Dreamweaver 4 Definii un text de nlocuire

workspace (substituie) pentru o imagine
Iat cum definim cu Dreamweaver 4 workspace textul alternativ Sigla

LUMINA BLND.
Remarc. Textul de nlocuire (substituie) este folosit:

9 n locul imaginii pentru navigatoarele n mod text;
9 n mod temporar, n ateptarea ncrcrii complete a imaginii;
9 atunci cnd legtura cu imaginea surs este ntrerupt;
9 pentru a permite navigatoarelor cu sintez vocal de a citi textul alternativ.
1. Selectai imaginea creia i se va asocia un text de nlocuire
(substituie), figura 7.44.
Figura 7.44
2. n panoul Properties, n zona Alt, introducei textul de

substituie Sigla LUMINA BLND (figura 7.45).
Figura 7.45
293
Remarc. Zona Alt v permite s indicai un text de substituie al imaginii utilizat de
Internet Explorer i de Netscape Navigator pentru a afia o bul Help atunci cnd
pointer-ul este deasupra imaginii (figura 7.46).
Figura 7.46
3. Acionai tasta Enter. Dac imaginea nu se afieaz atunci cnd

consultai pagina Web ntr-un browser, ea va fi nlocuit de
textul de substituie Sigla LUMINA BLANDA (figura 7.47).
Figura 7.47
Figura 7.48
294
Remarci:
Description i vizualizai atributul alt.
9 Inserai icon-ul de conformitate .

9 Citii Conversaia 7, paragraful HTML 4 Definii un text de nlocuire
(substituie) pentru o imagine (Liviu Dumitracu, (X)HTML, Editura
Universitii din Ploieti, 2003).
Figura 7.49
Dreamweaver MX Definii un text de nlocuire

workspace (substituie) pentru o imagine
Dac un utilizator a configurat navigatorul su s nu afieze imaginile,
este important de a numi fiecare imagine n parte.
Iat cum definim cu Dreamweaver MX workspace textul de nlocuire

Sigla LUMINA BLNDA pentru imaginea sigla.jpg.
1. Selectai imaginea sigla.jpg.
2. n panoul Properties, n zona Alt, introducei textul de

substituie Sigla LUMINA BLNDA (figura 7.50).
Figura 7.50
295
Figura 7.51
Remarc. Citii Conversaia 7, paragraful XHTML Definii un text de nlocuire

(substituie) pentru o imagine (Liviu Dumitracu, (X)HTML, Editura Universitii din
Ploieti, 2003).
Figura 7.52
Aliniai 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. Afiai meniul Align din panoul Properties (figura 7.54).
Figura 7.54
3. Executai 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 vizualizai atributul align cu valoarea top.
9 Citii Conversaia 7, paragraful HTML 4 Aliniai vertical o imagine n raport
cu un text (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti,
2003).
Figura 7.58
Iat cum aliniem vertical (middle) imaginea sigla.jpg n raport cu textul

LUMINA BLND.
2. Afiai meniul Align din panoul Properties.
3. Executai 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 BLND (figura
7.60).
Figura 7.60
Figura 7.61
Remarc. Selectai tag-ul <IMG>, deschidei panoul Reference, utilizai meniul

Description i vizualizai atributul align cu valoarea middle.
Figura 7.62
Iat cum aliniem vertical (bottom) imaginea sigla.jpg n raport cu textul

LUMINA BLND.
299
3. Executai clic pe tipul de aliniere dorit Bottom (figura 7.63).
Figura 7.63
Remarc. Imaginea este aliniat jos n raport cu textul LUMINA BLND (figura 7.64).
Figura 7.64
Figura 7.65

Description i vizualizai atributul align cu valoarea bottom.

300
Figura 7.66
Aplicaie
Aliniai vertical (Baseline, Text Top, Absolute Middle, Absolute Bottom)

imaginea sigla.jpg n raport cu textul LUMINA BLND.
Indicaie. Utilizai meniul derulant Align din panoul Properties.
Dreamweaver MX Aliniai vertical o imagine n raport

workspace cu un text
Pentru a alinia vertical o imagine n raport cu un text, cu Dreamweaver
MX workspace folosii panoul Properties.
Iat cum aliniem vertical (top) imaginea sigla.jpg n raport cu textul

LUMINA BLND.
2. n panoul Properties, n meniul derulant Align, executai clic pe

Top.

301
Figura 7.67
Remarc. Citii Conversaia 7, paragraful XHTML Aliniai vertical o imagine n raport cu

un text (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Figura 7.68
Aplicaii
Aliniai vertical (middle) imaginea sigla.jpg n raport cu textul LUMINA

BLND.
Indicaie. n panoul Properties, n meniul derulant Align, executai clic pe

Middle.
Aliniai vertical (bottom) imaginea sigla.jpg n raport cu textul LUMINA

BLND.
Indicaie. n panoul Properties, n meniul derulant Align, executai clic pe

Bottom.
302
Dreamweaver MX Inserai un spaiu rezervat pentru

workspace o imagine n construcie
Dreamweaver MX workspace v ajut s inserai un spaiu rezervat
pentru o imagine pe care n-o avei n momentul n care dorii s
formatai pagina dumneavoastr Web!
n consecin, putei construi pagina respectnd dimensiunile i

coordonatele de amplasare a imaginii. n momentul n care avei
imaginea, totul este sub control! Folosii panoul Properties (zona Src).
Pentru a insera un spaiu rezervat pentru o imagine cu Dreamweaver MX

workspace , folosii una din metodele prezentate mai jos:
9 Metoda 1 Meniul Insert;
Iat cum procedai pentru a insera un spaiu rezervat pentru imaginea

Kepler (n construcie!).
Metoda 2
1. Executai clic n locul n care dorii s fie plasat imaginea.
2. n subpanoul Common din grupul de panouri Insert, executai
clic pe butonul (Image Placeholder), figura 7.69.
Figura 7.69
Remarc. Se afieaz caseta de dialog Image Placeholder (figura 7.70).
3. n caseta de dialog Image Placeholder, introducei: nume,

lungime, lime, culoare, textul alternativ n zonele
corespunztoare (figura 7.70).
303
Figura 7.70
Figura 7.71
Figura 7.72
304
Dreamweaver 4 Plasai text n jurul unei imagini

workspace
Putei insera o imagine ntr-un text i apoi repartiza acest text n jurul
imaginii. Imaginea (flotant) este plasat fie la stnga, fie la dreapta n
cadrul paragrafului.
Iat cum mbrcm cu acelai text (vezi Liviu Dumitracu, (X)HTML,

Editura Universitii din Ploieti, 2003) colul drept al imaginii sigla.jpg.
3. Executai clic pe Left (tipul de aliniere dorit). Textul se

repartizeaz n jurul imaginii (figura 7.73).
Figura 7.73
Figura 7.74
305
Remarc. Citii Conversaia 7, paragraful HTML 4 Plasai text n jurul unei imagini (Liviu
Figura 7.75
Aplicaii
Deplasai imaginea sigla.jpg n cadrul paragrafului.
mbrcai cu acelai paragraf (vezi HTML) colul stng al imaginii sigla.jpg.
Plasai textul ZIUA N CARE VIN PETII ntre dou imagini follow.jpg.
Indicaie. Folosii tehnica repartizrii unui text ZIUA N CARE VIN PETII n
jurul unei imagini (follow.jpg) aliniere la stnga (mbrcarea colului stng al
imaginii); aliniere la dreapta (mbrcarea colului drept al imaginii). Utilizai
meniul Align din panoul Properties.
ntrerupei mbrcarea cu text a unei imagini.
Indicaie. Cu Dreamweaver putei ntrerupe mbrcarea cu text a unei imagini

tastnd Enter n locul n care dorii ntreruperea liniei de text, dar acest lucru nu
reprezint ntotdeauna ceea ce v-ai dorit!
n consecin, v recomandm s introducei codul surs HTML:
<BR clear = all>
care mut textul de dup ntreruperea de linie dincolo de imagine, pn cnd

ambele margini sunt libere.
Remarc. Citii Conversaia 7, paragraful HTML 4 ntrerupei mbrcarea cu text a

unei imagini (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
306
Dreamweaver MX Plasai text n jurul unei imagini

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

Dreamweaver MX workspace, folosii panoul Properties.
Iat cum mbrcm colul drept al imaginii sigla.jpg cu acelai text pe

care l-am folosit cu Dreamweaver 4 workspace.
1. Selectai imaginea sigla.jpg.
2. n panoul Properties, n meniul derulant Align, executai clic pe

Left.
Figura 7.76
Remarc. Citii Conversaia 7, paragraful XHTML Plasai text n jurul unei imagini (Liviu
Figura 7.77
307
Dreamweaver 4 Adugai mai multe spaii n jurul

workspace unei imagini
Putei modifica cu Dreamweaver spaiul dintre imagine i text.
Iat cum afiai decalat cu 20 de pixeli orizontal i vertical textul

adiacent (acelai cu cel din HTML) imaginii sigla.jpg.
2. n panoul Properties, tastai valoarea 20 (pixeli) n zonele

Vspace (Vertical Spacing in Pixels) i Hspace (Horizontal
Spacing in Pixels), figura 7.78.
Figura 7.78
Remarc. Citii Conversaia 7, paragraful HTML 4 Adugai mai multe spaii n jurul
unei imagini (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Figura 7.79

308
Figura 7.80
Dreamweaver MX Adugai mai multe spaii n jurul

workspace unei imagini
Dac o imagine este nconjurat de un text, putei regla distana care le
separ. Astfel, vei putea pune n valoare imaginile dumneavoastr.
Pentru a detaa o imagine de text, cu Dreamweaver MX workspace,

folosii panoul Properties.
Iat cum adugm 20 de pixeli n jurul imaginii sigla.jpg pentru a o

detaa de acelai text pe care l-ai folosit cu Dreamweaver 4 workspace.
1. Selectai imaginea pe care dorii s o distanai de text.
2. n panoul Properties, n zonele VSpace i HSpace tastai

valoarea 20 (pixeli).

309
Figura 7.81
Figura 7.82
Dreamweaver 4 Aplicai o imagine de background

workspace
Putei aplica pe fundalul paginii dumneavoastr o imagine care se va

repeta (n mozaic) de attea ori ct este necesar pentru a acoperi
ntreaga fereastr a browser-ului.
Iat cum inserai n Dreamweaver 4 workspace o imagine de

background pentru pagina dumneavoastr Web.

310
Remarc. Se afieaz caseta de dialog Page Properties.
2. n caseta de dialog Page Properties executai clic pe butonul

Browse via Background Image (figura 7.83).
Figura 7.83
Remarc. Se afieaz caseta de dialog Select Image Source cu fiierele imagine

disponibile (figura 7.84).

urmtoarele aciuni:
9 Selectai imaginea pe care dorii s-o aplicai pe fundalul

paginii;
9 Executai clic pe butonul OK.
Figura 7.84
311
Numele fiierului selectat (Blue hills) se afieaz 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 ngrijorai dac nu nelegei nimic! V rugm s ne psuii puin!

n continuare vei gsi toate explicaiile!
Figura 7.86
Remarci:
9 Selectai tag-ul <BODY>, deschidei panoul Reference, utilizai meniul
Description i vizualizai atributul background.
9 Citii Conversaia 7, paragraful HTML 4 Aplicai o imagine de background

312
Figura 7.87
Dreamweaver MX Aplicai o imagine de background

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

rmne n spatele altor elemente. Dac imaginea pe care ai gsit-o este
prea mic, ea este repetat n mozaic.
Pentru a aplica o imagine de background cu Dreamweaver MX

workspace, utilizai meniul Modify i nu panoul Properties.
Iat cum procedm pentru a insera cu Dreamweaver MX workspace,

aceeai imagine de background Blue hills.jpg, pe care ai inserat-o cu
2. n caseta de dialog Page Properties, care se afieaz executai

clic pe butonul Browse via Background Image.
313

urmtoarele aciuni:
9 Selectai dosarul care conine imaginea Blue hills.jpg i apoi

executai clic pe aceasta.
Figura 7.88
Figura 7.89
Remarc. Citii Conversaia 7, paragraful XHTML Aplicai o imagine de background


314
Figura 7.90
Aplicaie
Definii marginile paginii.
Indicaie. Cu Dreamweaver MX avei posibilitatea de a indica n fereastra

navigatorului, poziia (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). Executai clic pe Modify
Page Properties i introducei valorile dorite, n cele patru zone din caseta de
dialog Page Properties, care se afieaz.
Dreamweaver 4 Convertii o imagine n legtur

workspace (link)
Iat cum crem cu Dreamweaver 4 workspace o legtur ctre sigla.jpg

(versiunea original) pornind de la versiunea n miniatur siglamin.jpg a
315
acesteia. Cele dou imagini au fost create i comentate n aplicaiile
precedente.
1. Selectai imaginea siglamin.jpg (figura 7.91).
Figura 7.91
2. Executai clic pe icon-ul Browse for File ( ), via Link, din

panoul Properties (figura 7.92).
Figura 7.92
Remarc. Se afieaz caseta de dialog Select File (figura 7.93).
3. n caseta de dialog Select File (figura 7.93) executai

urmtoarele aciuni:
9 Executai clic pe fiierul ctre care se realizeaz legtura;

316
Figura 7.93
Remarc. Imaginea este convertit n legtur hipertext (figura 7.94).
Figura 7.94
Remarc. Nu putei testa legturile n fereastra Document. Pentru verificarea legturii

deschidei pagina ntr-un browser.

317
Figura 7.95
Remarc. Citii Conversaia 7, paragraful HTML 4 Convertii o imagine n legtur (Liviu

Figura 7.96
Aplicaie
ncrcai temporar versiunea n miniatur a imaginii follow.jpg de 15x15

pixeli.
Iat cum procedai pentru a afia mai nti versiunea n miniatur followmin.jpg
(de 15x15 pixeli) n ateptarea ncrcrii imaginii follow.jpg (283x212 pixeli) de
nalt rezoluie.
1. Selectai imaginea principal follow.jpg de nalt rezoluie (283x212

pixeli), figura 7.97.
318
Figura 7.97
2. n panoul Properties, n zona Low Src executai clic pe Browse for File
( ) / Point to File ( ) pentru a identifica imaginea miniatur
followmin.jpg de 15x15 pixeli.
Remarc. Se afieaz caseta de dialog Select Image Source.
3. n caseta de dialog Select Image Source (figura 7.98) executai clic pe

followmin.jpg.
Figura 7.98
Remarc. Se afieaz imaginea de joas rezoluie follow.jpg (15x15 pixeli).

319
Figura 7.99

Description i vizualizai atributul lowsrc.
Figura 7.100
Remarc. Atributul lowsrc nu este standard W3C.

320
Dreamweaver MX Convertii o imagine n legtur

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

siglamin.jpg ntr-o legtur (link) ctre sigla.jpg (versiunea original).
1. Selectai imaginea siglamin.jpg pe care urmeaz s o

transformm n legtur.
2. n panoul Properties, executai clic pe (Browse for file) via

Link.
3. n caseta de dialog Select File, selectai folder-ul care conine

pagina ctre care se realizeaz legtura, iar apoi executai clic
pe fiierul sigla.jpg ctre care se realizeaz legtura (figura
7.101).
Figura 7.101
321
Remarc. Spre deosebire de textele de legtur subliniate i colorate diferit, nimic nu

deosebete o imagine de o legtur, cu excepia numelui zonei Link din panoul
Properties.
Figura 7.102
Figura 7.103
322
Dreamweaver 4 Creai o imagine cu zone reactive

workspace
Putei diversifica site-ul dumneavoastr profitnd de instrumentul Map

din Dreamweaver, asociind legturile diferitelor pri ale unei imagini.
Image-map (n limba lui Shakespeare) sunt imagini pe care putei
delimita zone reactive (cerc, dreptunghi, poligon), care constituie
legturi hipertext.
Iat cum crem cu Dreamweaver 4 workspace o imagine cu zone

reactive, aceeai pe care am creat-o n HTML (Liviu Dumitracu,
1. Verificai dac zonele reactive ale image-map-ului sunt afiate:

View t Visual Aids t Image Maps.
2. Executai clic (n documentul deschis) n locul n care dorii s

inserai imaginea.
3. Inserai imaginea follow.jpg i apoi selectai-o (figura 7.104).
Figura 7.104
323
4. n panoul Properties, n zona Map introducei numele paginii
imaginii map (peti). Este obligatoriu! (figura 7.105).
Figura 7.105
5. Alegei o form de zon reactiv - (figura 7.106).
Figura 7.106
6. Cu instrumentul selectat, trasai o zon pe imagine care devine

o legtur ctre fiierul specificat (figura 7.107).
Figura 7.107
Remarc. Pentru a modifica sau deplasa forma desenat utilizai instrumentul

Pointer Hotspot Tool ( ).
7. n panoul Properties, n zona Link, tastai URL-ul fiierului ctre
care se face legtura (figura 7.108).
324
Figura 7.108
Remarc. Putei utiliza de asemenea butonul Point to File ( ) pentru a selecta

fereastra documentului deschis sau fiierul n folder-ul site-ului sau putei
utiliza butonul Browse for File ( ) pentru a selecta fiierul ctre care se face
legtura.
8. n meniul derulant Target indicai cadrul pe care dorii s-l
utilizai (figura 7.109).
Figura 7.109
9. n zona Alt introducei textul care dorii s apar n bula de help

galben sub pointer, atunci cnd utilizatorul poziioneaz
pointer-ul pe zona reactiv (figura 7.110).
Figura 7.110
10. Repetai paii 5 9 pentru a asocia imaginii alte legturi.

325
Figura 7.111
Remarci:
9 Selectai tag-urile <MAP>, <AREA>, deschidei panoul Reference i citii
9 Citii Conversaia 7, paragraful: Creai o imagine cu zone reactive (Liviu
Figura 7.112
Dreamweaver MX Creai o imagine cu zone reactive

workspace
Iat cum creai cu Dreamweaver MX workspace aceeai imagine

follow.jpg cu zone reactive pe care ai creat-o cu Dreamweaver 4
workspace.
326
1. Executai clic n locul n care dorii s inserai imaginea.
2. Inserai imaginea follow.jpg i apoi selectai-o.
3. n panoul Properties, n zona Map, introducei numele paginii

imaginii map (peti). Este obligatoriu!
4. n panoul Properties, alegei o form de zon reactiv (figura

7.113).
Figura 7.113
5. Cu instrumentul selectat, trasai o zon pe imagine.
6. n panoul Properties, n zona Link, tastai URL-ul fiierului ctre

care se face legtura (figura 7.114).
Figura 7.114
7. n panoul Properties, n meniul derulant Target indicai cadrul

pe care dorii s-l utilizai.
8. n panoul Properties, n zona Alt introducei textul care dorii s

apar n bula de help galben, sub pointer, atunci cnd
utilizatorul poziioneaz pointer-ul pe zona reactiv.
9. Repetai paii 5 8 pentru a asocia imaginii alte legturi.

327
Figura 7.115
Remarc. Citii Conversaia 7, paragraful XHTML Creai o imagine cu zone reactive

Figura 7.116
328
Dreamweaver MX Tem
Testai-v cunotinele
1. Prezentai pe scurt o metod de inserare a unei imagini cu
Dreamweaver 4 workspace i Dreamweaver MX workspace.
2. Cum aliniai orizontal o imagine cu Dreamweaver MX workspace?
3. Care sunt situaiile n care folosii un text de nlocuire (substituie)

pentru o imagine?
4. Descriei procedura Dreamweaver de aliniere vertical a unei imagini

n raport cu un text.
5. Cum aplicai o imagine de background cu Dreamweaver?
6. Descriei pe scurt procedura Dreamweaver de creare a unei imagini cu

zone reactive.
Vizitai site-urile
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
Conversaia 8
Creai legturi cu Dreamweaver MX
f Dreamweaver 4 workspace, MX workspace Creai o legtur hipertext
ctre o alt pagin Web
f Dreamweaver 4 workspace, MX workspace Creai legturi n aceeai
pagin Web
f Dreamweaver 4 workspace, MX workspace Creai o legtur extern
ctre un site Web, avnd ca suport o imagine
extern ctre un site Web
extern ctre o adres e-mail
f Dreamweaver 4 workspace, MX workspace Modificai culoarea
legturilor hipertext
ctre o pagin care se deschide n propria sa fereastr
Dreamweaver 4 Creai o legtur hipertext ctre o

workspace alt pagin Web
Putei crea legturi care faciliteaz deplasarea vizitatorilor n paginile
site-ului dumneavoastr.
330
Pentru a crea o legtur hipertext ctre o pagin Web cu Dreamweaver
4 workspace, folosii una din metodele prezentate mai jos:
9 Metoda 2 Meniul Modify.
Iat cum creai o legtur hipertext din pagina Untitled-2.htm ctre

pagina b.htm. Creai mai nti cele dou pagini n folder-ul My
Documents. Vom utiliza textul de legtur Ziua lung.
Metoda 1
1. Selectai textul de legtur (figura 8.1).
Figura 8.1
2. n inspectorul Properties, via Link, executai clic pe .
Figura 8.2
3. n lista fiierelor care se afieaz n Select File executai clic pe

b.html, iar apoi executai clic pe butonul OK (figura 8.3).
331
Figura 8.3
Remarci:
9 Legtura se afieaz n zona Link din inspectorul Properties.
9 Noua legtur se afieaz colorat n albastru i subliniat (figura 8.4).
Figura 8.4
Figura 8.5
Remarci:
9 Selectai tag-ul <A>, deschidei panoul Reference i citii informaiile care se
afieaz. Utilizai meniul Descripton pentru a vizualiza atributul href.
9 Citii Conversaia 8, paragraful HTML 4 Creai o legtur hipertext ctre o
alt pagin Web (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti,
2003).
332
Figura 8.6
6. Testai legtura hipertext pe care ai creat-o:
9 Executai clic pe Modify t Open Linked Page;
sau,
9 Apsai tasta CTRL i apoi executai dublu clic pe legtur.
Aplicaie
Suprimai legtura hipertext pe care ai creat-o.
1. Selectai textul de legtur Ziua lung.
2. Executai clic pe Modify t Remove Link (figura 8.7).
Figura 8.7
333
Remarc. Legtura Ziua lung este tears (figura 8.8).
Figura 8.8
Metoda 2
Se modific pasul 2 din Metoda 1 dup cum urmeaz:
2. Executai clic pe Modify t Make Link.
Dreamweaver MX Creai o legtur hipertext ctre o

workspace alt pagin Web
Pentru ca vizitatorii (utilizatorii) s se deplaseze cu uurin ntre
paginile site-ului dumneavoastr, creai legturi hipertext.
Pentru a crea o legtur hipertext ctre o alt pagin Web cu

Dreamweaver MX workspace, folosii una din metodele prezentate mai
jos:
9 Metoda 2 Meniul Modify.
Iat cum procedai pentru a crea o legtur hipertext din pagina

test.html ctre pagina b.htm. Vom utiliza textul de legtur Ziua lung.
334
Metoda 1
1. Selectai textul ce urmeaz a fi convertit n legtur.
2. n panoul Properties, via Link, executai clic pe .
3. n lista fiierelor care se afieaz n caseta de dialog Select File,

executai clic pe b.htm, apoi executai clic pe butonul OK (figura
8.9).
Figura 8.9
Remarc. Textul Ziua lung se transform n legtur. Textul se afieaz subliniat i cu

o culoare diferit (figura 8.10).
Figura 8.10
335
Figura 8.11
Remarci:
9 Citii Conversaia 8, paragraf paragraful XHTML 4 Creai o legtur hipertext
ctre o alt pagin Web (Liviu Dumitracu, (X)HTML, Editura Universitii din
Ploieti, 2003).
9 Nu este posibil de a testa o legtur direct n Dreamweaver.
Figura 8.12
6. Testai legtura hipertext pe care ai creat-o:
6.1 Trecei cu mouse-ul peste legtur. Pointer-ul va lua forma
-.
6.2 Executai clic pe legtur pentru a schimba pagina.
336
Dreamweaver 4 Creai legturi n aceeai pagin

workspace Web
Pentru a crea legturi hipertext n cadrul aceleiai pagini, cu
DREAMWEAVER 4 workspace trebuie s creai mai nti o ancor (n
locul dorit!) i apoi o legtur (ctre aceasta) cu una din metodele:
9 Metoda 1 Meniul Insert, via Invisible Tags Named Anchor;
Vom utiliza textul cunoscut din aplicaiile precedente (figura 8.13) n

care cuvntul Bine va fi convertit n legtur ctre cuvintele LUMINA
BLND, care va deveni ancor numit.
Figura 8.13
Iat cum crem cu Dreamweaver 4 ancora (numit) cu numele LUMINA

BLANDA.
Metoda 1
1. Verificai dac opiunea Named Anchors este activat, via Edit

Preferences Category Invisible Elements (figura 8.14).
337
Figura 8.14
2. Verificai dac opiunea Invisible Elements este activat, via

View Visual Aids Invisible Elements (figura 8.15).
Figura 8.15
338
3. Executai clic naintea textului pe care dorii s-l marcai ca
ancor (figura 8.16).
Figura 8.16
4. Executai clic pe Insert Named Anchor (figura 8.17).
Figura 8.17
Remarc. Se afieaz caseta de dialog Named Anchor.
5. n caseta de dialog Named Anchor, introducei n zona Anchor

Name numele ancorei LUMINABLANDA iar apoi executai clic pe
butonul OK (figura 8.18).
339
Figura 8.18
n fereastra Document se afieaz icon-ul de ancor ( ), dar n

fereastra browser-ului ancora rmne n totalitate invizibil (figura 8.19).
Figura 8.19
Remarc. Pentru a modifica numele ancorei, executai clic pe elementul su invizibil i

utilizai inspectorul Properties (figura 8.20).
Figura 8.20
Figura 8.21
340
Remarci:
9 Selectai tag-ul <A>, deschidei panoul Reference, utilizai meniul Description
i vizualizai atributul name.
9 Citii Conversaia 8, paragraful HTML 4 Creai o legtur n aceeai pagin
Figura 8.22
Remarc. n navigator, ancora nu se afieaz.
Metoda 2
4. n panoul Insert, categoria Common, executai clic pe butonul
(Insert Named Anchor), figura 8.23.
Figura 8.23
341
Iat cum crem, n continuare legtura Bine ctre ancora (numit)
LUMINABLANDA pe care am definit-o mai nainte.
1. Selectai textul de legtur (figura 8.24).
Figura 8.24
2. n inspectorul Properties, n zona Link, introducei numele

ancorei LUMINABLANDA, precedat de simbolul diez (#) (figura
8.25).
Figura 8.25
Remarc. Putei folosi de asemenea butonul Point to File ( ).
Remarc. Legtura apare colorat (n albastru) i subliniat (figura 8.26).
Figura 8.26
342
Figura 8.27
Figura 8.28
6. Testai legtura creat:
6.1. Executai clic pe cuvntul Bine (figura 8.29).
Figura 8.29
Zona marcat cu ancora numit (LUMINA BLND) se afieaz la

nceputul ferestrei browser-ului (figura 8.30).
343
Figura 8.30
Aplicaii
Creai o legtur ctre o ancor situat n alt pagin.
Indicaie. Respectai urmtoarea procedur:
1. Selectai textul de legtur.
2. n inspectorul Properties, n zona Link introducei legtura (link-ul) de

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

BLND: 1. Servicii TURISM; 2. Servicii ACADEMICE; 3. Servicii INFORMATICE,
detaliate dup cum urmeaz:
9 Servicii TURISM: Valea Prahovei, Valea Oltului, Valea Domanului, Valea

Arieului, Valea Cernei, Valea Loirei.
9 Servicii ACADEMICE: Organizare expoziii, Organizare simpozioane

naionale, Organizare simpozioane internaionale,
Organizare trg de job-uri, Organizare
work-shop-uri.
9 Servicii INFORMATICE: Training, Service reele de calculatoare, Service

Video Conferine, Pagini Web.
Creai trei ancore: Seciune 1, Seciune 2, Seciune 3 ce corespund celor trei

tipuri de servicii - TURISM, ACADEMICE, INFORMATICE. Creai legturi
hipertext ctre ancorele numite, textele de legtur fiind denumirile serviciilor.
Iat cum crem cu Dreamweaver 4 workspace ancorele (numite) i legturile

corespunztoare.
344
1. Introducei textul aplicaiei.
2. Creai trei ancore numite: Seciune 1, Seciune 2, Seciune 3 ce

corespund celor trei tipuri de servicii Servicii TURISM, Servicii
ACADEMICE, Servicii INFORMATICE.
Metoda 1
2.1 Executai clic naintea textului Servicii TURISM pe care dorii s-l
marcai ca ancor numit - Seciune1.
9 Executai clic pe Insert Invisible Tags Named Anchor.
9 Introducei numele ancorei Seciune1 n zona Anchor Name

(figura 8.31).
Figura 8.31
2.2 Executai clic naintea textului Servicii ACADEMICE pe care

dorii s-l marcai ca ancor numit - Seciune2.

(figura 8.32).
Figura 8.32

345
2.3 Executai clic naintea textului Servicii INFORMATICE pe care
dorii s-l marcai ca ancor numit - Seciune3.

(figura 8.33).
Figura 8.33
3. Creai la nceputul documentului ancora (numit) START (figura 8.34).
Figura 8.34
4. Creai la nceputul documentului un meniu (o list numerotat) pentru

serviciile oferite de societatea LUMINA BLND (figura 8.35).
Figura 8.35
346
5. Organizai textul, pentru fiecare din cele trei servicii (TURISM,
ACADEMICE, INFORMATICE) n liste cu simboluri.
6. Creai legturi ctre ancorele numite: Seciune1, Seciune2,

Seciune3.
6.1 Selectai textul de legtur Servicii TURISM.
9 n inspectorul Properties, n zona Link, introducei numele

ancorei, Seciune1, precedat de simbolul diez (#).
9 Acionai tasta Enter.
6.2 Selectai textul de legtur Servicii ACADEMICE.

6.3 Selectai textul de legtur Servicii INFORMATICE.

7. Creai legturi din fiecare seciune ctre ancora (numit) START.

Textul de legtur ctre ancora START este: Revenire START.
9 Introducei la finele celor trei seciuni textul de legtur

Revenire START.
9 Selectai textul de legtur din cadrul fiecrei seciuni.
9 n inspectorul Properties, n zona Link, introducei pentru

fiecare din cele trei seciuni numele ancorei START, precedat
de simbolul diez (#). Acionai de fiecare dat tasta Enter.

347
Figura 8.36
Remarc. Citii Conversaia 8, paragraful: HTML 4 Creai o legtur hipertext ctre o

alt pagin Web. Aplicaii (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti,
2003).
348
Figura 8.37
10. Verificai legturile hipertext create.

349
Dreamweaver MX Creai legturi n aceeai pagin

workspace Web
Pentru a crea legturi hipertext n cadrul paginii curente, cu
Dreamweaver MX workspace, creai mai nti o ancor i apoi o legtur
ctre aceasta cu una din metodele prezentate mai jos:
9 Metoda 1 Meniul Insert, via Named Anchor;
Creai o ancor numit

Iat cum procedai pentru a crea cu Dreamweaver MX workspace
ancora (numit) cu numele LUMINA BLND. Cuvntul Bine din
paragraful Bine ai venit! va fi convertit n legtur ctre cuvintele
LUMINA BLND, care vor deveni ancor numit, din paragraful
LUMINA BLND este puternic i nu doar att!.
Metoda 2
1. Verificai dac opiunea Named Anchors este activat, via Edit

Preferences Categoria Invisible Elements.
2. Verificai dac opiunea Invisible Elements este activat, via

View Visual Aids Invisible Elements.
3. Executai clic naintea textului pe care dorii s-l marcai ca

ancor: LUMINA BLND este puternic i nu doar att!.
4. n grupul de panouri Insert, subpanoul Common, executai clic
pe butonul (Named Anchor), figura 8.38.

350
Figura 8.38
5. n caseta de dialog care se afieaz Named Anchor, n zona

Anchor Name, introducei numele ancorei LUMINA BLANDA,
iar apoi executai clic pe butonul OK (figura 8.39).
Figura 8.39
Remarc. Icon-ul se afieaz numai n fereastra Document (figura 8.40) nu i n

fereastra browser-ului.
Figura 8.40

351
Figura 8.41
Remarc. Ancora nu se afieaz n navigator.
Creai o legtur ctre ancora numit

Iat cum crem legtura Bine ctre ancora numit LUMINA BLANDA
cu Dreamweaver MX workspace.
2. n panoul Properties, n zona Link, introducei numele ancorei

LUMINA BLANDA, precedat de simbolul diez (#).

352
Figura 8.42
Figura 8.43
6. Testai legtura creat: executai clic pe cuvntul Bine (figura

8.44).
Figura 8.44
353
Aplicaie
Creai cu Dreamweaver MX workspace pagina Web prezentat n figura 8.37.
Indicaie. Folosii procedura descris pentru Dreamweaver 4 workspace.
Creai o legtur extern ctre un

Dreamweaver 4 site Web, avnd ca suport o
workspace
imagine
Putei accesa o pagin Web folosind i o legtur imagine (executnd
clic pe aceasta).
Iat cum crem o legtur imagine, follow.jpg, ctre site-ul

www.upg-ploiesti.ro.
1. Inserai imaginea (follow.jpg) i apoi selectai-o (figura 8.45).
Figura 8.45
2. n inspectorul Properties, n zona Link, creai legtura ctre

site-ul UPG din Ploieti (vezi creare legtur hipertext), figura
8.46.
Figura 8.46
Imaginea follow.jpg a fost convertit n legtur hipertext (vezi figura

8.47).
354
Figura 8.47
Figura 8.48
Remarc. Citii Conversaia 8, paragraful HTML 4 Creai o legtur imagine

Figura 8.49
5. Testai legtura imagine pe care ai creat-o (figura 8.50).

355
Figura 8.50
Aplicaii
Suprimai legtura imagine (n caz de eroare i nu numai!) pe care ai

creat-o.
1. Selectai legtura imagine, executnd clic pe aceasta.
2. Executai clic pe Modify t Remove Link (figura 8.51).
Figura 8.51
Creai o legtur hipertext ctre versiunea original a imaginii sigla.gif,

pornind de la versiunea n miniatur siglamin.gif a acesteia.
356
Iat care este procedura pe care v invitm s o urmai.
1. Selectai siglamin.gif, versiunea n miniatur a imaginii originale

(figura 8.52).
Figura 8.52
2. n inspectorul Properties, n zona Link creai legtura ctre poza.gif,

creaia dumneavoastr (figura 8.53).
Figura 8.53
Figura 8.54
Figura 8.55
357
5. Verificai legtura hipertext pe care ai creat-o.
5.1 Selectai legtura pe care dorii s-o verificai (figura 8.56).
Figura 8.56
5.2 Executai clic pe Modify t Open Linked Page
sau,
5.3 Acionai tasta CTRL i apoi executai dublu clic pe legtur.
Creai o legtur extern ctre un

Dreamweaver MX
workspace
site Web, avnd ca suport o
imagine
Posibilitile de a crea legturi externe de tip imagine, cu Dreamweaver
MX workspace sunt numeroase: butoane (simple), rollovere, imagini cu
zone reactive (image map), bare de navigare etc. De menionat, c
toate aceste imagini care v servesc ca legturi, trebuie mai nti s fie
create!
Iat cum folosim imaginea follow.jpg, ca suport de legtur extern

ctre site-ul www.upg-ploieti.ro.
1. Inserai imaginea i apoi selectai-o.
2. n panoul Properties, n zona Link, creai legtura ctre site-ul

Universitii Petrol-Gaze din Ploieti.
358
Figura 8.57
5. Testai legtura imagine pe care ai creat-o (figura 8.58).
Figura 8.58
Aplicaie
Suprimai legtura imagine pe care ai creat-o.
Indicaie. Folosii meniul Modify, via Remove Link.

359
Dreamweaver 4 Creai o legtur hipertext extern

workspace ctre un site Web
Iat cum creai cu Dreamweaver 4 workspace o legtur hipertext
extern ctre site-ul Universitii Petrol-Gaze din Ploieti
(http://www.upg-ploiesti.ro). Textul de legtur este: UPG din Ploieti.
1. Introducei i apoi selectai textul de legtur (figura 8.59).
Figura 8.59
Remarc. n mod implicit, pagina ctre care facei link-ul se deschide n fereastra
browser-ului, dar, pentru a nu pierde legtura cu pagina dumneavoastr, putei cere
ca aceast pagin (int) s se deschid ntr-o nou fereastr a browser-ului.
2. n inspectorul Properties, n zona Link, introducei URL-ul

complet al site-ului Web ctre care creai legtura hipertext
(figura 8.60).
Figura 8.60
3. Executai clic pe _blank n meniul derulant Target (figura 8.61).
Figura 8.61
Remarc. Legtura hipertext se afieaz colorat (n albastru) i subliniat (figura 8.62).

360
Figura 8.62
Remarc. Nu putei testa legturile n fereastra Document. Pentru a le testa vizualizai

pagina Web ntr-un browser i executai clic pe textul de legtur.
Figura 8.63
Figura 8.64
361
6. Verificai legtura hipertext creat.
Remarc. Dreamweaver 4 workspace nu este n msur s verifice legturile ctre

paginile Web ce aparin site-urilor exterioare.
Dreamweaver MX Creai o legtur hipertext extern

workspace ctre un site Web
Iat cum procedai pentru a crea cu Dreamweaver MX workspace o
legtur hipertext extern ctre site-ul Universitii Petrol Gaze din
Ploieti. Textul de legtur este UPG din Ploieti.
1. Introducei textul de legtur i apoi selectai-l.
2. n panoul Properties, n zona Link introducei URL-ul complet al

site-ului UPG (figura 8.65) i executai clic pe _blank n meniul
derulant Target.
Figura 8.65

362
Figura 8.66
Figura 8.67
5. Testai legtura hipertext pe care ai creat-o.
Aplicaii
Modificai culoarea legturii hipertext pe care ai creat-o.
Indicaie. Folosii Modify Properties Link Color.
Creai o legtur ctre site-ul UPG din Ploieti avnd ca suport un text Flash:
UNIVERSITATE.
Iat care este procedura pe care trebuie s-o aplicai.
1. Executai clic n locul n care dorii s figureze textul Flash.
2. Executai clic pe Insert Interactiv Images Text Flash.
Remarc. Se afieaz caseta de dialog Insert Text Flash.

363
3. n caseta de dialog Insert Text Flash, n zona Text introducei
UNIVERSITATE; n zona Link introducei adresa site-ului Universitii
din Ploieti, iar n final, executai clic pe butonul OK (figura 8.68).
Figura 8.68
4. Acionai tasta F12.
5. Testai legtura pe care ai creat-o (figura 8.69).
Figura 8.69
364
Dreamweaver 4 Creai o legtur hipertext extern

workspace ctre o adres e-mail
Pentru a crea o legtur hipertext extern ctre o adres e-mail cu

Dreamweaver 4, folosii 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 creai cu Dreamweaver 4 workspace, o legtur extern ctre

o adres e-mail ldumitrascu@upg-ploiesti.ro. Textul legturii este
Primii mesajul.
Metoda 1
1. Selectai textul/imaginea de legtur ctre adresa e-mail (figura

8.70).
Figura 8.70
2. Executai clic pe Insert Email Link (figura 8.71).

365
Figura 8.71
Remarc. Se afieaz caseta de dialog Email Link.
3. n caseta de dialog Email Link (figura 8.72), executai

urmtoarele activiti:
9 n zona E-Mail introducei adresa e-mail;
Figura 8.72
Remarc. Legtura hipertext apare colorat n albastru i subliniat (figura 8.73).

366
Figura 8.73
Figura 8.74
Remarc. Citii Conversaia 8, paragraful HTML 4 Creai o legtur extern ctre: o

adres e-mail (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Figura 8.75
Executai clic pe legtura hipertext creat: Primii mesajul. Se deschide

fereastra New Message (figura 8.76). Profitai de aceast adres!
367
Figura 8.76
Remarc. Dreamweaver 4 workspace permite verificarea legturilor pe care le-ai creat

detectnd totodat legturile ntrerupte.
Procedura este urmtoarea:
1. Executai clic pe File Check Links. Dac legturile sunt ntrerupte,
Dreamweaver le afieaz n caseta de dialog Check Links.
Pentru a restabili legturile ntrerupte, procedura este urmtoarea:
1. Executai clic pe fiierul ctre care legtura este ntrerupt.
2. Indicai corect numele fiierului.
Metoda 2
1. Selectai textul/imaginea de legtur ctre adresa e-mail.
2. n panoul Insert, categoria Common executai clic pe butonul
(Insert Email Link), figura 8.77.
Figura 8.77

368
3. n caseta de dialog Email Link (figura 8.78), executai
urmtoarele activiti:
Figura 8.78
Remarc. Legtura hipertext apare colorat n albastru i subliniat.
Metoda 2 modificat
(Insert Email Link).
2. n caseta de dialog Email Link (figura 8.79) executai

urmtoarele aciuni:
9 n zona Text introducei textul de legtur;
Figura 8.79
369
Remarc. Textul de legtur se afieaz n fereastra Document iar n zona Link
din inspectorul Properties adresa e-mail se afieaz cu sufixul mailto (figura
8.80).
Figura 8.80
5. Verificai legtura hipertext.
Metoda 3
1. Selectai textul/imaginea de legtur ctre adresa e-mail.
2. Introducei 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 tastai n zona Link are ca sufix, obligatoriu, mailto!
Legtura hipertext apare colorat n albastru i subliniat (figura 8.82).
Figura 8.82
370
4. Testai legtura hipertext creat.
Aplicaii
Creai o legtur extern (hipertext) ctre un server FTP.
2. n inspectorul Properties, n zona Link introducei ftp://ftp.?, nlocuind

semnul de ntrebare (?) cu calea de acces ctre site.
Creai o legtur hipertext extern ctre un grup de discuii.
2. n inspectorul Properties, n zona Link introducei news://?, nlocuind

semnul de ntrebare (?) cu adresa grupului de discuii.
Dreamweaver MX Creai o legtur hipertext extern

workspace ctre o adres e-mail
Cu Dreamweaver putei crea n documentul dumneavoastr o legtur

hipertext extern ctre o adres e-mail.
Pentru a crea o legtur hipertext extern ctre o adres e-mail, cu

jos:
9 Metoda 1 Meniul Insert;
9 Metoda 3 Panoul Properties.

371
legtur extern ctre adresa e-mail a autorului acestei lucrri:
ldumitrascu@upg-ploiesti.ro. Textul legturii este: Primii mesajul.
Metoda 2
pe butonul (Insert Email Link), figura 8.83.
Figura 8.83
2. n caseta de dialog care se afieaz, Email Link, n zona Text,

introducei textul de legtur Primii mesajul iar n zona E-
mail introducei ldumitrascu@upg-ploiesti.ro (figura 8.84).
Figura 8.84
Remarc. Textul de legtur se afieaz n fereastra Document, iar n zona Link din
panoul Properties adresa e-mail se afieaz cu sufixul mailto: (figura 8.85).
372
Figura 8.85
Aplicaii
Creai o legtur hipertext extern ctre un server FTP.
Creai o legtur hipertext extern ctre un grup de discuii.
Dreamweaver 4 Modificai culoarea legturilor

workspace hipertext
Putei schimba culoarea legturilor pentru a le armoniza cu stilul vizual

al site-ului dumneavoastr.
Iat cum afiai n alb legtura Primii mesajul ctre adresa e-mail
ldumitrascu@upg-ploiesti.ro.
1. Executai clic pe Modify t Page Properties.
Remarc. Se afieaz caseta de dialog Page Properties (figura 8.86).

373
Figura 8.86
2. n caseta de dialog Page Properties, n zona Links executai clic

pe butonul d.
3. n paleta care se afieaz, executai clic cu pipeta pe culoarea

dorit (alb), figura 8.87.
Figura 8.87
Remarc. n browser, culoarea alb este aplicat legturii Primii mesajul (figura 8.88).
374
Figura 8.88
Figura 8.89
Remarc. Selectai tag-ul <BODY>, deschidei panoul Reference, utilizai meniul

Description i vizualizai atributul link.
Figura 8.90
7. Testai legtura. Executai clic pe Primii mesajul.
Aplicaii
Afiai cu verde culoarea legturilor hipertext vizitate, Visited Links.

375
Iat care este procedura pe care trebuie s-o parcurgei.
1. Executai clic pe Modify t Page Properties
2. n caseta de dialog Visited Links executai clic pe butonul d.
3. n paleta de culori care se afieaz, executai clic cu pipeta pe

culoarea dorit (verde).
Figura 8.91
Remarc. Selectai tag-ul <BODY>, deschidei panoul Reference, utilizai meniul

Description i vizualizai atributul vlink.
Figura 8.92
7. Testai culoarea legturilor vizitate.
Schimbai culoarea legturilor hipertext active (nevizitate), Active Links.

376
Dreamweaver MX Modificai culoarea legturilor

workspace hipertext
Dac culorile implicite ale link-urilor generate cu Dreamweaver fac not
discordant cu paginile dumneavoastr Web, putei s le modificai.
Iat cum procedai pentru a afia n alb, cu Dreamweaver MX

(workspace) legtura hipertext extern Primii mesajul ctre adresa
e-mail ldumitrascu@upg-ploiesti.ro.
2. n caseta de dialog Page Properties, care se afieaz n zona

Links, executai clic pe butonul d .
3. Executai clic, cu pipeta pe culoarea alb (#FFFFFF) care se

afieaz n paleta de culori.
Figura 8.93

377
7. Testai legtura.
Aplicaii
Schimbai culoarea legturilor hipertext vizitate (Visited Links).
Schimbai culoarea legturilor hipertext active (Active Links).
Creai o legtur hipertext ctre o

Dreamweaver 4 pagin care se deschide n propria
workspace
sa fereastr
Putei crea o legtur care deschide pagina int ntr-o nou fereastr a
navigatorului.
Iat cum creai cu Dreamweaver 4 workspace o legtur Fereastr

proprie ctre pagina tabel16.htm care se va deschide ntr-o fereastr
nou.
1. Selectai legtura (figura 8.94).
Figura 8.94
2. n inspectorul Properties afiai meniul Target (figura 8.95).
Figura 8.95
378
3. Executai clic pe _blank (figura 8.96).
Figura 8.96
Figura 8.97
Remarc. Selectai tag-ul <A>, deschidei panoul Reference, utilizai meniul

Description i vizualizai atributul target.
Figura 8.98
6. Testai legtura: executai clic pe Fereastr proprie.
Remarc. Pagina int se afieaz ntr-o nou fereastr (figura 8.99).

379
Figura 8.99
Creai o legtur hipertext ctre o

Dreamweaver MX pagin care se deschide n propria
workspace
sa fereastr
n mod implicit, legturile deschid paginile Web n aceeai fereastr.
Pentru a conserva pagina principal care a fost afiat, deschidei
legturile dumneavoastr ntr-o nou fereastr.

legtur hipertext Fereastr proprie ctre pagina tabel16.htm, care
se va deschide ntr-o fereastr nou.
1. Selectai legtura.
2. n panoul Properties, n meniul Target, executai clic pe _blank.

380
Figura 8.100
5. Executai clic pe Fereastr proprie (figura 8.101).
Figura 8.101
Remarc. Pagina int se afieaz ntr-o nou fereastr (figura 8.102).
Figura 8.102
381
Dreamweaver MX Tem
Testai-v cunotinele
1. Descriei pe scurt o metod Dreamweaver MX workspace de creare a
unei legturi hipertext ctre o alt pagin Web.
2. Descriei pe scurt o metod Dreamweaver 4 workspace de creare

legturi hipertext n cadrul aceleiai pagini.
3. Creai o legtur hipertext extern ctre site-ul www.yahoo.com

avnd ca suport imaginea sigla.jpg.
4. Creai o legtur hipertext extern ctre site-ul

www.macromedia.com, folosind textul de legtur Ploieti 2003.
5. Descriei pe scurt o metod Dreamweaver MX de creare a unei

legturi hipertext extern ctre o adres e-mail.
6. Creai o legtur ctre site-ul www.multimania.fr avnd ca suport

textul Flash: INDE PLOIETI.
Vizitai site-urile
9 www.echomedium.com
9 www.opensurf.org
9 www.flashkit.com
9 www.werehere.com
Conversaia 9
Creai tabele cu Dreamweaver MX
f Dreamweaver 4 workspace, MX workspace Creai un tabel
f Dreamweaver 4 workspace, MX workspace Aliniai un tabel
f Dreamweaver 4 workspace, MX workspace Atribuii un titlu tabelului
f Dreamweaver 4 workspace, MX workspace Aplicai o bordur tabelului
f Dreamweaver 4 workspace, MX workspace Aliniai orizontal datele unui
tabel
f Dreamweaver 4 workspace, MX workspace Aliniai vertical datele unui
tabel. Aplicaii
f Dreamweaver 4 workspace, MX workspace Modificai spaiul dintre
celulele unui tabel
f Dreamweaver 4 workspace, MX workspace Modificai dimensiunile
liniilor unui tabel
f Dreamweaver 4 workspace, MX workspace Modificai marginile
interioare ale celulelor unui tabel
f Dreamweaver 4 workspace, MX workspace Extindei o celul pe mai
multe coloane sau linii
f Dreamweaver 4 workspace, MX workspace Aplicai o culoare
elementelor unui tabel
f Dreamweaver 4 workspace, MX workspace Aplicai o imagine de
background unui tabel sau unei celule a tabelului
f Dreamweaver 4 workspace, MX workspace Utilizai un tabel ca un
instrument de punere n pagin
f Dreamweaver 4 workspace, MX workspace Formatai un tabel utiliznd
modele predefinite
f Dreamweaver 4 workspace, MX workspace Creai un tabel n modul
Layout View
384
Dreamweaver 4 Creai un tabel

workspace
Pentru a crea un tabel cu Dreamweaver 4 workspace, folosii una din

9 Metoda 1 Meniul Insert, modul Standard;

9 Metoda 2 Panoul Insert, modul Standard.
Iat cum procedm pentru a crea cu Dreamweaver 4 workspace acelai

tabel (cu patru linii i trei coloane) pe care l-am construit n HTML i
XHTML (vezi Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti,
2003).
Metoda 1
1. Executai clic acolo unde dorii s figureze tabelul (figura 9.1).
Figura 9.1
2. Executai clic pe Insert Table (figura 9.2).
Figura 9.2
385
Remarc. Se afieaz caseta de dialog Insert Table (figura 9.3).
Figura 9.3
3. Introducei n zona Rows numrul de linii (4), figura 9.4.
Figura 9.4
4. Introducei n zona Columns numrul de coloane (3), figura 9.5.
Figura 9.5
5. Introducei n zona Width lungimea tabelului, exprimat n pixeli

(500) sau n procente (figura 9.6).
Figura 9.6
6. Introducei n zona Border limea bordurii, exprimat n pixeli

(10), figura 9.7.
Figura 9.7
7. Executai clic pe butonul OK (figura 9.8).
Figura 9.8
386
Remarc. Dreamweaver 4 workspace insereaz un tabel vid, aliniat (n mod implicit) la
stnga (figura 9.9).
Figura 9.9
Figura 9.10
Remarci:
9 Selectai tag-urile <TABLE>, <TR>, <TD>, deschidei panoul Reference i
citii informaiile care se afieaz.
9 Citii Conversaia 9, paragraful HTML 4 Creai un tabel (Liviu Dumitracu,
9. Executai clic pe oricare din celulele tabelului, iar apoi

introducei datele din prima linie (capul de tabel) i din
urmtoarele trei linii (de date) ale tabelului (figura 9.11)
Figura 9.11
387
Remarc. Dreamweaver 4 workspace adapteaz dimensiunea unei celule n
funcie de coninutul acesteia.
Figura 9.12
Aplicaie
Formatai (bold, centrat) prima linie (capul de tabel) a tabelului.
1. Selectai prima linie.
2. n inspectorul Properties activai opiunea Header (figura 9.13).
Figura 9.13
388
Remarc. Celulele selectate din prima linie a tabelului se afieaz bolduit i centrat
(figura 9.14).
Figura 9.14
Figura 9.15
Remarci:
9 Selectai tag-ul <TH>, deschidei panoul Reference i citii informaiile care se
afieaz. Utilizai meniul derulant Description pentru a vizualiza atributul
Width.
9 Citii Conversaia 9, paragraful HTML 4 Creai un tabel (Liviu Dumitracu,
389
Figura 9.16
Metoda 2
Se modific pasul 2 (Metoda 1), dup cum urmeaz:
2. n panoul Insert, categoria Common, executai clic pe
butonul (Table) figura 9.17.
Figura 9.17
390
Dreamweaver MX Creai un tabel

workspace
Pentru a crea un tabel cu Dreamweaver MX workspace, folosii una din

9 Metoda 1 Meniul Insert, modul Standard;
Iat cum procedm pentru a crea un tabel cu patru linii i trei coloane,
acelai pe care l-ai creat cu Dreamweaver 4 workspace.
Metoda 2
1. Executai clic acolo unde dorii s figureze tabelul.
pe butonul (Table), figura 9.18.
Figura 9.18
Remarc. Se afieaz caseta de dialog Insert Table.
3. n caseta de dialog Insert table (figura 9.19) executai

urmtoarele aciuni:
9 n zonele Rows i Columns introducei numrul de linii (4)

391
respectiv numrul de coloane
(3);
9 n zona Width introducei lungimea tabelului,
exprimat n pixeli (500) sau n
procente;
9 n zona Border introducei limea bordurii (10
pixeli);
Figura 9.19
Remarc. Dreamweaver MX workspace insereaz un tabel vid, aliniat la stnga (figura

9.20).
Figura 9.20
4. Afiai codul XHTML generat (figura 9.21).

392
Figura 9.21
Remarc. Citii Conversaia 9, paragraful XHTML Creai un tabel (Liviu Dumitracu,

5. Executai clic pe oricare din celulele tabelului, iar apoi

introducei datele din prima linie (capul de tabel) i din
urmtoarele trei linii (de date) ale tabelului (figura 9.22).
Figura 9.22

393
Figura 9.23
Aplicaie
Formatai (bold, centrat) prima linie (capul de tabel) a tabelului pe care l-ai
creat anterior.
Indicaie. n panoul Properties, activai opiunea Header. Citii Conversaia 9,

paragraful XHTML Creai un tabel (Liviu Dumitracu, (X)HTML, Editura
Dreamweaver 4 Aliniai un tabel

workspace
Iat cum centrm cu Dreamweaver 4 workspace tabelul pe care l-ai

creat n aplicaia precedent.
394
1. Selectai tabelul folosind una din cele trei metode prezentate n
continuare.
Metoda 1
1.1 Executai clic pe oricare din celulele tabelului.
1.2 Executai 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 Poziionai cursorul n apropierea uneia dintre marginile

exterioare ale tabelului pn cnd acesta se transform
ntr-un cursor n form de sgei ncruciate, iar apoi
executai clic (figura 9.25).
Figura 9.25
395
Metoda 3
1.1 Executai 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. Utilizai inspectorul Properties dup cum urmeaz:
2.1 Afiai meniul Align, figura 9.27.
Figura 9.27
2.2 Executai clic pe Center, figura 9.28.
Figura 9.28
Remarc. Tabelul se afieaz centrat (figura 9.29).
Figura 9.29
3 Analizai codul HTML generat (figura 9.30).

396
Figura 9.30
Remarci:
9 Selectai tag-ul <TABLE>, deschidei panoul Reference. Utilizai meniul
derulant Description pentru a vizualiza atributul align.
9 Citii Conversaia 9, paragraful HTML 4 Aliniai un tabel (Liviu Dumitracu,
4 Vizualizai pagina Web ntr-un browser (figura 9.31).
Figura 9.31
Pentru a alinia la dreapta tabelul, nlocuii punctul 2.2 din procedura

anterioar, dup cum urmeaz.
2.2 n inspectorul Properties, executai clic pe Right, figura 9.32.
Figura 9.32
Remarc. Tabelul se afieaz aliniat la dreapta.

397
Dreamweaver MX
workspace
Aliniai un tabel
Pentru a alinia un tabel cu Dreamweaver MX workspace, folosii panoul

Properties. n meniul derulant Align alegei una din poziiile afiate: left,
center, right.
Iat cum centrm cu Dreamweaver MX workspace tabelul pe care l-ai

creat n aplicaia precedent.
1. Selectai tabelul.
2. n panoul Properties, meniul derulant Align, executai clic pe

Center (figura 9.33).
Figura 9.33
Remarc. Tabelul se afieaz centrat.
3. Analizai codul XHTML generat.
Remarc. Citii Conversaia 9, paragraful XHTML Aliniai un tabel (Liviu Dumitracu,

398
Dreamweaver 4 Atribuii un titlu tabelului

workspace
Pentru a atribui un titlu/legend unui tabel cu Dreamweaver 4

workspace, utilizai un tabel cu dou celule pentru a plasa un
titlu/legend deasupra, dedesubtul unui tabel/imagine.
Iat cum afim cu Dreamweaver 4 workspace deasupra tabelului pe

care l-ai creat, titlul LISTA CURSURILOR DE INFORMATIC.
1. Executai clic n locul n care dorii s figureze tabelul i titlul

indicat.
2. Inserai un tabel fr bordur cu dou linii i o coloan

(lungimea tabelului este 500 pixeli), figura 9.34.
Figura 9.34
3. Executai clic n linia inferioar a tabelului i inserai tabelul

cruia dorii s-i aplicai titlul indicat (de exemplu, via Copy/Cut
Paste), figura 9.35.
399
Figura 9.35
4. Executai clic n linia superioar a tabelului i introducei titlul

tabelului: LISTA CURSURILOR DE INFORMATIC (figura
9.36).
Figura 9.36
5. Centrai i bolduii titlul tabelului (figura 9.37).
Figura 9.37

400
Figura 9.38
Remarc. Citii Conversaia 9, paragraful HTML 4 Atribuii un titlu tabelului (Liviu

Figura 9.39
401
Remarc. Mai exist, evident, i alte metode pe care le putei folosi pentru a atribui un
titlu/legend unui tabel sau unei imagini. Nu ezitai s le folosii.
Aplicaii
Aliniai la dreapta titlul tabelului.
Inserai titlul tabelului la baza acestuia, ca pe o legend.
1. n locul stabilit, inserai un tabel (fr bordur) cu dou linii i o

coloan.
2. Inserai tabelul cu trei coloane i patru linii n linia superioar a

tabelului cu dou linii i o coloan.
3. Executai clic n linia inferioar a tabelului i introducei numele indicat

(legenda).
4. Centrai i bolduii titlul tabelului.
mbrcai tabelul cu urmtorul text: Bine ai venit! Felicitri pentru rbdarea

de a ne fi descoperit! Dorim s ne cunoatem i s rmnem mpreun!
LUMINA BLND este puternic i nu doar att!
2. n inspectorul Properties, afiai meniul Align n care selectai

Left/Right.
Remarc. Textul se afieaz n jurul tabelului (stnga/dreapta), figura 9.40.

402
Figura 9.40
Atribuii imaginii sigla.jpg, legenda LUMINA BLND.
1. Inserai un tabel (fr bordur) cu dou linii i o coloan (figura 9.41).
Figura 9.41
2. Executai clic n linia superioar a tabelului i inserai imaginea

sigla.jpg (figura 9.42).
403
Figura 9.42
3. Executai clic n linia inferioar a tabelului i introducei legenda

(figura 9.43).
Figura 9.43
Figura 9.44
404
Figura 9.45
Plasai legenda alturi de imaginea sigla.jpg.
Indicaie. Utilizai un tabel cu o singur linie i dou celule.
Dreamweaver MX Atribuii un titlu tabelului

workspace
Pentru a atribui un titlu unui tabel cu Dreamweaver MX workspace,

9 Metoda 1 Inserai un tabel (fr 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-ai creat anterior.
405
Metoda 2
1. Executai clic n interiorul tabelului.
2. Afiai codul surs XHTML (figura 9.46).
Figura 9.46
3. Executai clic n codul surs XHTML (figura 9.47) n locul n care

urmeaz s inserai elementul <caption>.
Figura 9.47
406
4. n grupul de panouri Insert, n subpanoul Table, executai clic
pe butonul cap (caption), figura 9.48.
Figura 9.48
Remarc. Semnificaia elementelor din subpanoul Table este urmtoarea:

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> introducei
titlul tabelului (figura 9.50).
Figura 9.50
6. Acionai tasta F5 pentru a actualiza codul XHTML.
Remarc. Citii Conversaia 9, paragraful XHTML Atribuii un titlu tabelului

Figura 9.51
Aplicaie
Inserai titlul tabelului la baza acestuia, ca pe o legend.

408
Dreamweaver 4 Aplicai o bordur tabelului

workspace
Pentru a formata un tabel cu Dreamweaver 4 workspace, folosii

inspectorul Properties.
Iat cum aplicai 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 redefinii lungimea i

limea tabelului, n pixeli sau procente (figura 9.52).
Figura 9.52
3. n zona Border introducei valoarea 10, care reprezint limea

bordurii exterioare a tabelului (figura 9.53).
Figura 9.53
4. n meniul derulant Align selectai Center.
Remarc. Tabelul de dimensiuni 400*200 pixeli i cu o bordur de 10 pixeli se va afia

centrat.
Figura 9.54
409
Remarci:
9 Selectai tag-ul <TABLE> i deschidei panoul Reference. Utilizai meniul
derulant Description pentru a vizualiza atributul align.
9 Citii Conversaia 9, paragraful HTML 4 Aplicai o bordur tabelului (Liviu
Figura 9.55
Aplicaii
Mascai toate bordurile exterioare ale tabelului.
Indicaie. n zona Border introducei valoarea 0.
Afiai numai bordura superioar a tabelului.
Indicaie. Introducei n codul surs HTML: <TABLE border frame=above>.
Mascai toate bordurile interioare ale tabelului.
Indicaie. Introducei n codul surs HTML: <TABLE border rules=none>.
Afiai numai bordurile interioare care separ liniile orizontale ale tabelului.
Indicaie. Introducei n codul surs HTML: <TABLE border rules=rows>.

410
Dreamweaver MX Aplicai o bordur tabelului

workspace
Pentru a formata un tabel cu Dreamweaver MX workspace, folosii

panoul Properties.
Iat cum procedai 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 introducei

valorile: 400, 200 respectiv 10, iar n meniul derulant Align
selectai Center (figura 9.56).
Figura 9.56
Figura 9.57
Remarc. Citii Conversaia 9, paragraful XHTML Aplicai o bordur (Liviu Dumitracu,

411
Dreamweaver 4 Aliniai orizontal datele unui tabel

workspace
Pentru a alinia orizontal datele unui tabel cu Dreamweaver 4 workspace,

folosii inspectorul de proprieti.
Iat cum aliniai (centrai) orizontal datele din toate celulele care aparin
primei linii de date a tabelului.
1. Selectai toate celulele din prima linie de date a tabelului (figura

9.58).
Figura 9.58
2. n inspectorul Properties, indicai poziia orizontal center a

coninutului celulelor din prima linie de date a tabelului, cu
ajutorul meniului derulant Horz (figura 9.59).
Figura 9.59
3. Executai clic pe Center.

412
Remarc. Datele din prima linie de date a tabelului se afieaz centrat (figura 9.60).
Figura 9.60
Figura 9.61
Remarci:
9 Selectai tag-ul <TR> i deschidei panoul Reference. Utilizai meniul derulant
Description pentru a vizualiza atributul align.
9 Citii Conversaia 9, paragraful HTML 4 Aliniai orizontal datele unui tabel

413
Figura 9.62
Aplicaie
Aliniai la dreapta datele din celula de date UTILIZARE PC-uri care aparine
primei linii de date.
1. Selectai celula de date.
1.1 inei apsat tasta CTRL i executai clic pe celula de date

(figura 9.63).
Figura 9.63
2. n inspectorul Properties, indicai poziia orizontal Right a

coninutului celulei de date a tabelului, cu ajutorul meniului derulant
Horz.
3. Executai clic pe Right.

414
Figura 9.64
Figura 9.65
415
Dreamweaver MX Aliniai orizontal datele unui tabel

workspace
Pentru a alinia orizontal coninutul celulelor unui tabel cu Dreamweaver

MX workspace, folosii panoul Properties.
Iat cum aliniai (centrai) orizontal datele din toate celulele care aparin
primei linii de date ale tabelului creat.
1. Selectai toate celulele din prima linie de date a tabelului.
2. n panoul Properies, n zona Horz selectai Center.
3. Executai clic pe Center.
Figura 9.66
Remarc. Citii Conversaia 9, paragraful XHTML Aliniai orizontal datele unui tabel
416
Dreamweaver 4 Aliniai vertical datele unui tabel

workspace
Pentru a alinia vertical datele unui tabel cu Dreamweaver 4 workspace,

folosii inspectorul de proprieti.
Iat cum aliniai vertical la baza celulelor (bottom), datele din toate
celulele care aparin primei linii de date a tabelului.
2. n inspectorul Properties, indicai poziia vertical Bottom a

coninutului celulelor din prima linie de date a tabelului, cu
ajutorul meniului derulant Vert (figura 9.67).
Figura 9.67
3. Executai 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 Citii Conversaia 9, paragraful HTML 4 Aliniai vertical datele unui tabel
Figura 9.70
Aplicaii
Aliniai vertical (middle) datele din toate celulele care aparin primei coloane
a tabelului.
1. Selectai toate celulele din prima coloan a tabelului.

418
Figura 9.71
2. n inspectorul Properties, indicai poziia vertical Middle a

coninutului celulelor din prima coloan a tabelului, cu ajutorul
meniului derulant Vert.
3. Executai clic pe Middle.
Aliniai vertical (top) datele dintr-o singur celul de date: Autocad.
Dreamweaver MX Aliniai vertical datele unui tabel

workspace
Pentru a alinia vertical datele unui tabel cu Dreamweaver MX workspace,

folosii panoul Properties.
Iat cum procedai pentru a alinia vertical, la baza celulelor (bottom),

datele din toate celulele care aparin primei linii de date a tabelului
creat.
2. n panoul Properties, n zona Vert, selectai Bottom.

419
3. Executai clic pe Bottom.
Remarc. Datele din prima linie de date a tabelului se aliniaz vertical, la baza celulelor.
Figura 9.72
Remarc. Citii Conversaia 9, paragraful XHTML Aliniai vertical datele unui tabel (Liviu
Figura 9.73
420
Dreamweaver 4
workspace
Modificai spaiul dintre celulele
unui tabel
Putei modifica cu Dreamweaver 4 workspace spaiul dintre celulele unui
tabel pentru a ajusta n mod corespunztor dimensiunea bordurilor.
Iat cum modificm (10 pixeli) spaiul dintre celulele tabelului pe care
l-ai creat anterior.
2. n inspectorul Properties, n zona Cell Space, introducei

valoarea 10 (figura 9.74).
Figura 9.74
Remarc. Dreamweaver ajusteaz spaiul 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 Citii Conversaia 9, paragraful HTML 4 Modificai spaiul dintre celulele unui
tabel (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Figura 9.77
422
Dreamweaver MX
workspace Modificai spaiul dintre celulele
unui tabel
Pentru a modifica spaiul dintre celulele unui tabel cu Dreamweaver MX

workspace, folosii panoul Properties.
Iat cum procedai pentru a modifica cu 10 pixeli spaiul dintre celulele

tabelului pe care l-ai creat anterior.
2. n panoul Properties, n zona CellSpace, introducei valoarea 10

(figura 9.78).
Figura 9.78
Figura 9.79
423
Remarc. Citii Conversaia 9, paragraful XHTML Modificai spaiul dintre celulele unui
Figura 9.80
Dreamweaver 4 Modificai dimensiunile liniilor

workspace unui tabel
Cu Dreamweaver putei modifica dimensiunile elementelor unui tabel,
fr stres.
Iat cum modificm, cu 60 respectiv 120 de pixeli nlimea primelor

dou linii ale tabelului.
1. Selectai prima linie a tabelului (figura 9.81).

424
Figura 9.81
2. n inspectorul Properties, n zona H, redefinii nlimea primei

linii introducnd valoarea 60.
Remarc. Prima linie a tabelului se afieaz cu nlimea modificat (60 pixeli), figura
9.82.
Figura 9.82
4. Selectai cea de-a doua linie a tabelului.
5. n inspectorul Properties, n zona H, introducei valoarea 120

(pixeli).

425
Figura 9.83
Remarci:
9 Selectai tag-ul <TD> i deschidei panoul Reference. Utilizai meniul derulant
Description pentru a vizualiza atributul height.
9 Citii Conversaia 9, paragraful HTML 4 Modificai dimensiunile liniilor unui
Figura 9.84
Pentru a modifica lungimea primei linii a tabelului (100 pixeli) respectai

paii descrii n continuare.
426
2. n inspectorul Properties, n zona W, redefinii lungimea
tabelului, introducnd valoarea 100 pixeli.
Figura 9.85
Remarc. Selectai tag-ul <TH> i deschidei panoul Reference. Utilizai meniul derulant
Description pentru a vizualiza atributul Width. Citii Conversaia 9, paragraful HTML 4
Modificai dimensiunile liniilor unui tabel (Liviu Dumitracu, (X)HTML, Editura
Figura 9.86
Aplicaii
Redimensionai tabelul LISTA CURSURILOR DE INFORMATIC cu valorile

550 x 350 pixeli.
Indicaie. n inspectorul Properties, n zonele W i H introducei valorile indicate.

427
Modificai lungimea primei coloane (Denumire curs) a aceluiai tabel, cu
valoarea 130 pixeli.
Indicaie. Executai paii listai n cele ce urmeaz.
1. Executai clic n celula Denumire curs.
2. n inspectorul Properties, n zona W, introducei valoarea 130 pixeli.
Modificai nlimea primei celule (Denumire curs) a aceluiai tabel, cu

Indicaie. Executai paii descrii n continuare.
1. Executai clic n celula Denumire curs.
2. n inspectorul Properties, n zona H, introducei valoarea 150 pixeli.
Modificai lungimea celei de-a treia celule de date (50$) a aceluiai tabel, cu
Modificai manual (cu ajutorul mouse-ului) dimensiunile aceluiai tabel cu

300 x 50 pixeli.
Iat care este procedura de urmat.
2. Glisai cele trei puncte (de pe conturul tabelului) n direciile

corespunztoare (figura 9.87).
428
Figura 9.87
Convertii lungimea (300 pixeli) tabelului n procente.
Iat care sunt paii pe care trebuie s-i parcurgei.
2. n inspectorul Properties executai clic pe butonul (Convert Table

Widths to Percent), figura 9.88.
Figura 9.88
sau,
2. Executai clic pe Modify Table Convert Widths to Percent.
Remarc. Folosii butonul (Convert Table Widths to Pixels) din inspectorul Properties
pentru convertirea dimensiunii tabelului n pixeli.
tergei lungimea/limea celulelor unui tabel.
2. n inspectorul Properties executai clic pe butonul (Clear Row
Heights)/ (Clear Column Widths), figura 9.89.

429
Figura 9.89
sau,
2. Executai clic pe Modify Table Clear Row Heights/Clear Column

Widths.
Dreamweaver MX Modificai dimensiunile liniilor

workspace unui tabel
Pentru a modifica dimensiunile liniilor unui tabel cu Dreamweaver MX

workspace, folosii panoul Properties.
Iat cum procedai pentru a modifica nlimea primelor dou linii ale
tabelului creat, cu 60, respectiv 120 de pixeli.
1. Selectai prima linie a tabelului.
2. n panoul Properties, n zona H, introducei valoarea 60 (pixeli).
4. Selectai cea de-a doua linie a tabelului.
5. n panoul Properties, n zona H introducei valoarea 120

(pixeli).

430
Figura 9.90
Figura 9.91
Iat cum procedai pentru a modifica lungimea primei linii a tabelului

(100 pixeli).
2. n panoul Properties, n zona W introducei valoarea 100

(pixeli).

431
Figura 9.92
Remarc. Citii Conversaia 9, paragraful XHTML Modificai dimensiunile liniilor unui

Dreamweaver 4 Modificai marginile interioare ale

workspace celulelor unui tabel
Putei modifica cu Dreamweaver 4 workspace distana dintre coninutul
i marginile interioare ale celulelor unui tabel.
Iat cum modificm (15 pixeli) marginile interioare ale celulelor tabelului
creat.
2. n inspectorul Properties, n zona CellPad, introducei 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 Citii Conversaia 9, paragraful HTML 4 Modificai interioare ale celulelor
unui tabel (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti,
2003).

433
Figura 9.96
Dreamweaver MX Modificai marginile interioare ale

workspace celulelor unui tabel
Pentru a modifica marginile interioare ale celulelor unui tabel cu
Iat cum procedai pentru a modifica (15 pixeli) marginile interioare ale
celulelor tabelului LISTA CURSURILOR DE INFORMATIC.
2. n panoul Properties, n zona CellPad, introducei valoarea 15

(pixeli).

434
Figura 9.97
Remarc. Citii Conversaia 9, paragraful XHTML Modificai marginile

interioare ale celulelor unui tabel (Liviu Dumitracu, (X)HTML, Editura Universitii
din Ploieti, 2003).
Figura 9.98
Dreamweaver 4 Extindei o celul pe mai multe

workspace coloane sau linii
Fuziunea celulelor (orizontal sau vertical) cu Dreamweaver 4 workspace
este o operaie deosebit de simpl.
435
Iat cum adugai n tabel o nou linie de antet: INFORMATICA, care
se extinde pe toate cele trei coloane ale tabelului.
1. Adugai o linie vid deasupra liniei care conine capul de tabel,

folosind una din cele trei metode prezentate n continuare.
Metoda 1
1.1 Executai clic n celula Denumire curs.
1.2 Executai clic pe Modify Table Insert Row.
Remarc. Dreamweaver 4 workspace insereaz o linie vid deasupra liniei care conine
capul de tabel (figura 9.99).
Figura 9.99
Metoda 2
1.1 Executai clic n celula Denumire curs.
1.2 Executai clic pe Modify Table Insert Row or

Columns.
Remarc. Se afieaz caseta de dialog Insert Rows or Columns.
1.3 n caseta de dialog Insert Rows or Columns, executai

9 n zona Insert alegei opiunea Rows;

436
9 n zona Number of Rows alegei 1;
9 n zona Where alegei opiunea Above

the Selection.
Figura 9.100
Metoda 3
1.1 Executai clic cu butonul din dreapta al mouse-ului n

celula Denumire curs. Se afieaz meniul derulant Table,
Paragraph Format, List .
1.2 Executai clic pe Table Insert Row.
Remarc. Pentru a aduga o nou linie la baza tabelului (Metoda 4), executai clic n
ultima celul a tabelului i apoi acionai tasta ' sau n inspectorul Properties, n zona
Rows mrii cu 1 valoarea iniial.
2. Selectai celulele adiacente care dorii s fuzioneze (figura

9.101).
Figura 9.101
437
3. Fuzionai celulele selecionate ntr-una singur, folosind una din
cele dou metode prezentate n continuare.
Metoda 1
3.1 n inspectorul Properties, executai clic pe butonul

(Merge Cells).
Figura 9.102
Remarc. Dreamweaver 4 workspace afieaz cele trei celule ale liniei ntr-una singur
(figura 9.103).
Figura 9.103
Metoda 2
3.1 Executai clic pe Modify Table Merge Cells.
4. Introducei titlul noii linii de antet: INFORMATICA (figura

9.104).
Figura 9.104
438
Remarci:
9 Pentru a mri dimensiunile unei celule fuzionate, executai clic n celula
fuzionat, iar apoi executai clic pe Modify Table Increase Row Span.
9 Pentru a micora dimensiunile unei celule fuzionate, executai clic n celula
fuzionat, iar apoi executai clic pe Modify Table Decrease Row Span.
Figura 9.105
Remarci:
9 Selectai tag-ul <TH> i deschidei panoul Reference. Utilizai meniul derulant
Description pentru a vizualiza atributul colspan.
9 Citii Conversaia 9, paragraful HTML 4 Extindei o celul pe mai multe
coloane sau linii (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti,
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,
parcurgei paii descrii n cele ce urmeaz: selectai celulele adiacente;
fuzionai celulele selecionate ntr-una singur, aplicnd una din cele
dou variante prezentate anterior; analizai codul HTML generat;
vizualizai pagina Web ntr-un browser.
Remarci:
9 Invers, putei fraciona celulele fuzionate (pentru a regsi numrul iniial de
celule).
9 Procedura de fracionare a celulelor fuzionate este urmtoarea:
1. Executai clic ntr-o celul fuzionat.
Metoda 1:
2. Executai clic pe Modify Table Split Cell.
Se afieaz caseta de dialog Split Cell (figura 9.107).
Figura 9.107
3. n funcie de fuziunea iniial, alegei Split Cell Into: Rows sau Split
Cell Into: Columns apoi indicai Number of Columns.
Metoda 2:
Se modific punctul 2, Metoda 1, dup cum urmeaz:
2. n inspectorul Properties, executai clic pe butonul (Splits Cell into
rows or columns).
Dreamweaver MX Extindei 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 procedai pentru a aduga n tabelul pe care l-ai creat cu
Dreamweaver 4 workspace o nou linie de antet: INFORMATICA, care
se extinde pe toate cele trei coloane ale tabelului.
1. Adugai o linie vid deasupra liniei care conine capul de tabel.
2. Selectai celulele adiacente care dorii s fuzioneze.
3. Fuzionai celulele selecionate.
Metoda 2
3.1 n panoul Properties, executai clic pe butonul (Merge

Cells), figura 9.108.
Figura 9.108
Remarc. Dreamweaver MX workspace afieaz cele trei celule ale liniei ntr-una singur.
4. Introducei titlul noii linii de antet: INFORMATICA.
Figura 9.109
441
Remarc. Citii Conversaia 9, paragraful XHTML Extindei o celul pe mai
multe coloane sau linii (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti,
2003).
Figura 9.110
Aplicaii
Extindei prima celul de date UTILIZARE PC-uri pe dou linii.
Fracionai celulele fuzionate.
Indicaie. Pentru a fraciona celulele fuzionate cu Dreamweaver MX workspace,

9 Metoda 1 Meniul Modify, via Table Split Cells;
Dreamweaver 4 Aplicai o culoare elementelor unui

workspace tabel
Cu Dreamweaver 4 workspace putei aplica, fr a v stresa o culoare
celulelor, liniilor sau coloanelor unui tabel.
Iat cum aplicai o culoare (albastru deschis) primei linii a tabelului.

442
2. n inspectorul Properties, executai clic pe butonul (Bg).
Remarc. Se afieaz paleta de culori (figura 9.111).
Figura 9.111
3. Executai clic cu pipeta pe culoarea albastru deschis.
Dreamweaver 4 workspace afieaz 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 Citii Conversaia 9, paragraful HTML 4 Aplicai o culoare elementelor unui
Figura 9.114
Iat cum aplicai aceeai culoare (albastru deschis) primei coloane a

aceluiai tabel.
1. Selectai prima coloan a tabelului (figura 9.115).
Figura 9.115
2. n inspectorul Properties, executai clic pe butonul (Bg).

444
Figura 9.116
Figura 9.117
Dreamweaver MX Aplicai o culoare elementelor unui

workspace tabel
Pentru a aplica o culoare celulelor, liniilor sau coloanelor unui tabel cu
445
Iat cum aplicai o culoare (albastru deschis) primei linii a tabelului
LISTA CURSURILOR DE INFORMATIC.
2. n panoul Properties, executai clic pe butonul (Bg).
Figura 9.118
Remarc. Citii Conversaia 9, paragraful XHTML Aplicai o culoare elementelor unui

Figura 9.119
446
Aplicaii
Aplicai aceeai culoare (albastru deschis) primei coloane a aceluiai tabel.
Colorai n cyan background-ul tabelului. Colorai n aqua linia de antet i n

white a doua linie de date a aceluiai tabel.
Colorai n galben bordura tabelului.
#_________________________________________________________
___________________________________________________________
___________________________________________________________
___________________________________________________________
Aplicai o imagine de background

Dreamweaver 4 unui tabel sau unei celule a
workspace
tabelului
Iat cum plasai pe fundalul tabelului imaginea Blue hills.jpg.
2. n inspectorul Properties, n zona BgImage introducei adresa

imaginii de background (figura 9.120).
Figura 9.120
Remarc. Putei selecta imaginea de background, utiliznd 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 Citii Conversaia 9, paragraful HTML 4 Aplicai o imagine de background
unui tabel sau unei celule a tabelului (Liviu Dumitracu, (X)HTML, Editura
Figura 9.123
448
Pentru a plasa aceeai imagine de background n prima celul de date
(UTILIZARE PC-uri) a tabelului, respectai procedura descris n cele ce
urmeaz.
1. Selectai 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) aplicai 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. Selectai tag-ul <TD> i deschidei panoul Reference. Utilizai meniul derulant
Description pentru a vizualiza atributul BACKGROUND.
Figura 9.128
Aplicai o imagine de background

Dreamweaver MX unui tabel sau unei celule a
workspace
tabelului
Pentru a aplica o imagine de background unui tabel (celule) folosii
panoul Properties.
450
Iat cum procedai pentru a plasa pe fundalul tabelului creat, imaginea
Smokey Light.jpg.
2. n panoul Properties, n zona BgImage, introducei adresa

imaginii de background.
Figura 9.129
Figura 9.130
451
Aplicaie
Plasai imaginea de background Smokey Light.jpg n prima celul de date a

aceluiai tabel.
Dreamweaver 4 Utilizai un tabel ca un instrument

workspace de punere n pagin
Iat cum plasm imaginea Smokey Light.jpg n tabel (figura 9.131).
1. Creai cu Dreamweaver 4 workspace tabelul n care urmeaz s

inserai imaginea (figura 9.131).
Figura 9.131
2. Plasai imaginea n celula din stnga tabelului (tabelul 9.132).
Figura 9.132
452
3. Afiai codul HTML generat (figura 9.133).
Figura 9.133
Remarci:
9 Selectai tag-ul <TD> i deschidei panoul Reference. Utilizai meniul derulant
Description pentru a vizualiza atributul rowspan.
9 Citii Conversaia 9, paragraful HTML 4 Utilizai un tabel ca un instrument de
punere n pagin (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti,
2003).
Figura 9.134
Dreamweaver MX Utilizai un tabel ca un instrument

workspace de punere n pagin
De ce s nu utilizm un tabel pentru a realiza punerea n pagin a
site-ului dumneavoastr? Este o soluie agreat de un numr foarte
mare de webmasters!
453
Iat cum procedm pentru a insera imaginea Smokey Light.jpg n celula
din stnga a tabelului LISTA CURSURILOR DE INFORMATIC.
1. Creai cu Dreamweaver MX workspace tabelul LISTA

CURSURILOR DE INFORMATIC.
2. Plasai imaginea n celula din stnga tabelului.
3. Afiai codul XHTML generat (figura 9.135).
Figura 9.135
Remarc. Citii Conversaia 9, paragraful XHTML Utilizai un tabel ca un instrument de

punere n pagin (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Figura 9.136
454
Dreamweaver 4 Formatai un tabel utiliznd

workspace modele predefinite
Cu Dreamweaver putei s formatai propriul tabel utiliznd diverse
modele predefinite.
Iat cum utilizm modelul Dbl Rows: Orange pentru formatarea tabelului
LISTA CURSURILOR DE INFORMATIC.
2. Executai clic pe Commands Format Table (figura 9.137).
Figura 9.137
Remarc. Se afieaz caseta de dialog Format Table (figura 9.138).

455
Figura 9.138
3. n lista derulant (situat n stnga) alegei modelul predefinit

(Dbl Rows: Orange), figura 9.139.
Figura 9.139
4. n zona Row Colors indicai prima culoare (white) i a doua

culoare (orange) tastnd codul/numele culorii n cele dou
zone: First respectiv Second (figura 9.140).
Figura 9.140
5. n meniul derulant Alternate alegei 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 alegei Center pentru cmpul Align i Bold pentru
cmpul Text Style (figura 9.142).
Remarc. Cei interesai pot completa i cmpurile 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, alegei Left pentru cmpul Align i Italic pentru
cmpul Text Style (figura 9.143).
Figura 9.143
8. n zona Border introducei valoarea 1 (limea bordurii tabelului

exprimat n pixeli), figura 9.144.
Figura 9.144
9. Activai n zona Options opiunea 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 afieaz tabelul formatat cu modelul Dbl Rows: Orange (figura
9.146).
457
Figura 9.146
Figura 9.147

458
Figura 9.148
Aplicaii
Sortai ascendent dup cmpul Denumire curs tabelul LISTA CURSURILOR

DE INFORMATIC.
Iat care este procedura pe care trebuie s-o urmai pentru sortarea tabelului,
dup cheia de sortare indicat Denumire curs.
1. Executai clic n tabel.
2. Executai clic pe Commands Sort Table (figura 9.149).
Figura 9.149
Remarc. Se afieaz caseta de dialog Sort Table (figura 9.150).

459
Figura 9.150
3. n meniul derulant Sort By alegei Column 1, care reprezint coloana

dup care se face sortarea (figura 9.151).
Figura 9.151
4. n meniul derulant Order alegei tipul Alphabetically (ordine

alfabetic) i apoi Ascending (sortare ascendent), figura 9.152.
Figura 9.152
Remarci:
9 n meniul derulant Then By alegei n cazul dublrii primei coloane , a doua
coloan de sortare, indicnd de asemenea tipul de sortare:
alfabetic/numeric, ascendent/descendent.
9 n Dreamweaver 4 workspace sunt admise una sau dou chei de sortare.
9 Activai opiunea Sort Includes First Row dac prima linie a tabelului trebuie
s fie inclus n sortare. n acest caz ea va fi deplasat.
9 Activai opiunea Keep TR Attributes With Sorted Row pentru ca elementele
de formatare ale primei linii s fie deplasate cu aceasta.
Remarc. Dreamweaver 4 workspace afieaz tabelul sortat dup prima coloan (figura
9.153).
460
Figura 9.153
Figura 9.154
Figura 9.155
461
Importai un tabel Excel.
Pentru a importa un tabel creat ntr-o alt aplicaie (Excel, Acces etc.) respectai
procedura descris n continuare.
1. Creai n Excel tabelul corespunztor (figura 9.156).
Figura 9.156
2. n panoul Insert, zona Common, executai clic pe butonul (Insert

Tabular Data),figura 9.157.
Figura 9.157
sau,
2. Executai clic pe File Import Import Tabular Data....
Remarc. Se afieaz caseta de dialog Insert Tabular Data (figura 9.158).

462
Figura 9.158
3. Indicai fiierul de date (extensia .txt) executnd clic pe butonul

Browse... via Data File.
4. n meniul derulant Delimiter alegei delimitatorul de date (figura

9.159):
5. n zona Table Width activai opiunea Set pentru a preciza

dumneavoastr niv lrgimea tabelului n procente sau pixeli (figura
9.159).
6. Utilizai meniul derulant Format Top Row pentru a aplica o formatare

particular datelor din prima linie (figura 9.159).
Figura 9.159
463
7. Definii: marginea interioar a celulelor, spaiul dintre celule, bordura
utiliznd cmpurile Cell Padding, Cell Spacing, Border din caseta de
dialog Insert Tabular Data.
Remarc. Dreamweaver afieaz tabelul importat din Excel (figura 9.160).
Figura 9.160
Figura 9.161

464
Figura 9.162
Exportai n Word tabelul pe care l-ai creat cu Dreamweaver 4 workspace.
1. Executai clic n interiorul tabelului.
2. Executai clic pe File Export Table (figura 9.163).
Figura 9.163
Remarc. Se afieaz caseta de dialog Export Table.

465
3. n caseta de dialog Export Table (figura 9.164) realizai urmtoarele
aciuni:
9 n meniul derulant Delimiter alegei tipul de delimitator;
9 n meniul derulant Line Breaks alegei tipul de salt de linie;
9 executai clic pe butonul Export.
Figura 9.164
4. Afiai n Word tabelul Dreamweaver exportat (figura 9.165).
Figura 9.165
466
Dreamweaver MX Formatai un tabel utiliznd

workspace modele predefinite
Pentru a formata un tabel cu Dreamweaver MX workspace, folosii

meniul Commands, via Format Table (vezi Dreamweaver 4 workspace).
Iat cum formatm tabelul LISTA CURSURILOR DE INFORMATIC

utiliznd modelul Dbl Rows: cyan.
2. Executai clic pe Commands Format Table.
3. n caseta de dialog Format Table care se afieaz (figura 9.166)

9 n lista derulant (situat n stnga casetei) alegei

modelul predefinit Dbl Rows: cyan;
9 n zona Row Colors tastai White (cmpul First) i cyan

(cmpul Second);
9 n meniul derulant Alternate alegei Every Other Row;
9 n zona Top Row alegei Center n cmpul Align i Bold n

cmpul Text Style;
9 n zona Left Col alegei Left n cmpul Align i Regular n

cmpul Text Style;
9 n zona Border introducei valoarea 1;
9 activai opiunea 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
Aplicaii
Sortai ascendent, dup cmpul Denumire curs LISTA CURSURILOR DE

INFORMATIC.
Importai un tabel Excel.
Indicaie. Folosii una din metodele prezentate mai jos:

9 Metoda 2 Meniul File, via Import Import Tabular Data.
Exportai n Word tabelul pe care l-ai creat cu aplicaia precedent.
Indicaie. Folosii meniul File, via Export Table.
Dreamweaver 4 Creai un tabel n modul Layout

workspace View
Cu Dreamweaver 4 workspace putei crea un tabel n dou moduri:
9 Standard View;
9 Layout View.
Pentru a activa modul Layout View cu Dreamweaver 4 workspace folosii

9 Metoda 1 Meniul View, via Table View Layout View;

469
Iat cum crem n modul Layout View tabelul LISTA CURSURILOR DE
INFORMATIC pe care l-ai realizat n modul Standard View. Vom utiliza
Metoda 2.
Metoda 2

(Layout View), figura 9.169.
Figura 9.169
Se afieaz caseta de dialog Getting Started in Layout View (figura

9.170).
Figura 9.170
470
Remarc. Putei, de asemenea, activa modul Layout View executnd clic pe View
Table View Layout View (Metoda 1).
3. n panoul Insert, categoria Common - Layout View executai
clic pe butonul (Draw Layout Table) pentru a trasa un tabel

n modul Layout View (figura 9.171).
Figura 9.171
4. Desenai o zon dreptunghiular care delimiteaz tabelul

dumneavoastr, executnd clic n stnga sus a ferestrei
document i apoi cu butonul stnga al mouse-ului apsat
deplasndu-v n dreapta jos pentru a determina dimensiunile
tabelului (figura 9.172).
Figura 9.172
471
5. Eliberai butonul din stnga al mouse-ului. Dreamweaver
afieaz (n modul Layout View) tabelul n fereastra document
(figura 9.173) indicnd lungimea tabelului exprimat n pixeli.
Figura 9.173
6. Ajustai dimensiunile tabelului acionnd asupra celor trei

puncte de pe conturul tabelului sau utiliznd inspectorul
Properties - zonele Width i Height (figura 9.174).
Figura 9.174
Remarci:
9 Putei indica, de asemenea, n inspectorul Properties: CellPad,
CellSpace, Bg cu semnificaiile cunoscute.
9 Coninutul tabelului nu poate fi editat nc ntruct acesta nu conine
nici o celul!
7. Desenai celulele n tabelul creat (400 x 200 pixeli).
7.1 n panoul Insert, categoria Common Layout View
executai clic pe butonul (Draw Layout Cell),figura

9.175.
472
Figura 9.175
7.2 Trasai prima celul a tabelului (figura 9.176).
Figura 9.176
7.3 Trasai celelalte celule ale tabelului (figura 9.177).
Remarc. Pentru a desena mai multe celule contigue meninei apsat tasta CTRL.
Figura 9.177
473
Remarci:
9 Putei, de asemenea, desena direct prima celul, fr a desena nainte
tabelul. Celula va fi inclus ntr-un tabel care va avea ca lungime dimensiunea
ecranului dumneavoastr de lucru.
9 Putei redimensiona celulele unui tabel fie manual, fie cu inspectorul
Properties (zonele Width i Height).
9 Putei terge o celul meninnd apsat tasta CTRL i executnd clic n celul
i acionnd tasta Delete.
9 Putei desena celulele dumneavoastr utiliznd dou moduri: absolut i
relativ. Modul absolut v permite s indicai valorile n pixeli care sunt fixe;
modul relativ v permite s indicai 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, respectai urmtoarea procedur:
desenai tabelul cu instrumentul Draw Layout Table ( ), care n mod

implicit este n mod Standard View.
n inspectorul Properties executai clic pe opiunea Autostretch.
Dreamweaver deseneaz tabelul n modul relativ; un simbol specific
( ) se afieaz n antet-ul tabelului (figura 9.178).
Figura 9.178
cu instrumentul Draw Layout Cell ( ) desenai prima celul:

coloana corespunztoare este n mod relativ, cealalt coloan
este n mod absolut (figura 9.179).
Figura 9.179
desenai celelalte celule.

474
Figura 9.180
9. Afiai tabelul n modul standard, folosind una din cele dou

metode prezentate mai jos (figura 9.181).
Metoda 1
9.1. Executai clic pe View Table View Standard View.
Metoda 2
9.1. n panoul Insert, categoria Common, executai clic pe

butonul (Standard View).
Figura 9.181

475
Figura 9.182
Dreamweaver MX Creai 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;

Creai tabelul n modul Layout View
Iat cum crem n modul Layout View acelai tabel pe care l-ai creat cu
Dreamweaver 4 workspace n modul Standard View.
Metoda 2
1. n grupul de panouri Insert, n subpanoul Layout, executai clic

pe butonul Layout View (figura 9.183).
Figura 9.183
2. n subpanoul Layout View, executai clic pe butonul (Draw

Layout Table).
3. Desenai o zon dreptunghiular care delimiteaz tabelul

dumneavoastr (figura 9.184).
476
Figura 9.184
Remarc. Dreamweaver afieaz tabelul n modul Layout View indicnd lungimea (n

pixeli).
4. Ajustai dimensiunile tabelului (400 x 200 pixeli).
Indicaie. Utilizai panoul Properties. Introducei valorile corespunztoare

n zonele: Width (400), Height (200), CellPad (0), CellSpace (0).
Desenai celulele tabelului
1. n grupul de panouri Insert, n subpanoul Layout View,
executai clic pe butonul (Draw Layout Cell), figura 9.185.
Figura 9.185
2. Trasai prima celul a tabelului (figura 9.186).
Figura 9.186
3. Trasai celelalte celule ale tabelului.

477
4. Completai tabelul pe care l-ai creat.
5. Afiai 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
Dreamweaver MX Tem
Testai-v cunotinele
1. Descriei 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 extindei cu Dreamweaver MX o celul pe mai multe coloane/
linii?
3. Cum folosii inspectorul de proprieti (Panoul Properties) pentru a
aplica o culoare celulelor, liniilor sau coloanelor unui tabel?
4. Putei utiliza un tabel pentru punerea n pagin a site-ului
dumneavoastr?
5. Cum formatai un tabel utiliznd modelele predefinite?
Vizitai site-urile
9 www.balam.net
9 www.modernmethod.com
9 www.banja.com
Conversaia 10
Creai formulare cu Dreamweaver MX
f Dreamweaver 4 workspace, MX workspace Creai un formular
f Dreamweaver 4 workspace, MX workspace Creai un buton pentru
expedierea (submit) unui formular
f Dreamweaver 4 workspace, MX workspace Creai un buton pentru
resetarea (reset) unui formular
f Dreamweaver 4 workspace, MX workspace Inserai o zon simpl de
text
f Dreamweaver 4 workspace, MX workspace Inserai o zon de text
multilinie
f Dreamweaver 4 workspace, MX workspace Creai o caset de validare
f Dreamweaver 4 workspace, MX workspace Creai un buton radio
f Dreamweaver 4 workspace, MX workspace Creai un meniu derulant
Dreamweaver 4 Creai un formular

workspace
Cu Dreamweaver 4 workspace putei crea un formular adugnd apoi

elementele (obiectele) care l compun.
Pentru a crea un formular cu Dreamweaver 4 workspace, folosii una din

9 Metoda 1 Meniul Insert, via Form;

478
Inserai un formular
Iat cum procedai pentru a insera un formular n pagina
dumneavoastr Web cu Dreamweaver 4 workspace.
Metoda 1
1. Executai clic pe Edit Preferences (figura 10.1).
Figura 10.1
Remarc. Se afieaz caseta de dialog Preferences (figura 10.2).
2. n caseta de dialog Preferences, n zona Category executai clic

pe Invisible Elements (figura 10.2).
479
Figura 10.2
Remarc. Opiunea Form Delimiter trebuie s fie activat (figura 10.2).
3. Verificai dac elementele invizibile sunt afiate, via View

Visual Aids Invisible Elements.
4. Executai clic n zona n care dorii s inserai formularul (figura

10.3).
Figura 10.3
5. Executai clic pe Insert Form (figura 10.4).

480
Figura 10.4
Remarc. Dreamweaver insereaz un dreptunghi discontinuu rou, care materializeaz

limitele formularului (figura 10.5).
Figura 10.5
Figura 10.6
Remarci:
481
9 Selectai tag-ul <FORM>, deschidei panoul Reference i citii informaiile care
se afieaz.
9 Citii Conversaia 10, paragraful: HTML 4 Creai un formular (Liviu
Figura 10.7
Metoda 2
5. n panoul Insert, categoria Forms, executai clic pe butonul

(Insert Form), figura 10.8.
Figura 10.8
Precizai metoda i script-ul utilizate

Unul din parametrii eseniali ai formularului este calea de acces la
script-ul CGI utilizat. El este definit n inspectorul Properties.
482
Iat cum precizm 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 introducei numele formularului (formular);
9 Action introducei calea de acces la script-ul CGI

utilizat;
9 Method alegei POST (purtai o discuie cu

administratorul de reea) din meniul derulant.
Figura 10.9
Figura 10.10
Remarc. Selectai tag-ul <FORM>, deschidei panoul Reference. Utilizai meniul

derulant Description pentru a vizualiza atributul action. Citii Conversaia 10, paragraful
HTML 4 Precizai metoda i script-ul utilizate (Liviu Dumitracu, (X)HTML, Editura
Figura 10.11
483
Dreamweaver MX Creai un formular

workspace
Pentru a crea un formular cu Dreamweaver MX workspace, folosii una

9 Metoda 1 Meniul Insert, via Form;
Inserai un formular
Iat cum procedai pentru a insera cu Dreamweaver MX workspace un
formular n pagina dumneavoastr Web.
Metoda 2
1. Executai clic n zona n care dorii s inserai formularul.
2. n grupul de panouri Insert, n subpanoul Form, executai clic
pe butonul (Insert Form), figura 10.12.
Figura 10.12
Dreamweaver MX workspace insereaz un dreptunghi discontinuu rou, care

materializeaz limitele formularului (figura 10.13).
Figura 10.13
484
Figura 10.14
Precizai metoda i script-ul utilizate

Pentru a expedia informaiile ce aparin formularului creat, folosii
panoul Properties.
Iat cum precizm metoda prin care informaiile sunt comunicate

serverului.
1. n panoul Properties (figura 10.15), n zona:
9 Form Name introducei numele formularului (formular);
9 Action introducei adresa script-ului de prelucrare;
9 Method alegei POST.
Figura 10.15
Remarc. Citii Conversaia 10, paragraful XHTML Precizai metoda i script-ul utilizate

485
Dreamweaver 4 Creai un buton pentru expedierea

workspace (submit) unui formular
Pentru a utiliza formularul trebuie s inserai 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 procedm pentru a insera butonul de tip submit.
Metoda 1
1. Executai clic n zona n care dorii s figureze butonul (figura

10.16).
Figura 10.16
2. Executai clic pe Insert Form Insert Button.
Remarc. Dreamweaver 4 afieaz butonul Submit (figura 10.17).

486
Figura 10.17
Inspectorul Properties v permite parametrizarea acestui obiect, dup

cum urmeaz:
9 n zona Button Name, introducei, eventual, un nume pentru

butonul de expediere a formularului (exp), figura 10.18.
Figura 10.18
9 n zona Label, introducei textul care va figura pe buton

Expediati, figura 10.19.
Figura 10.19
9 n zona Action alegei Submit form, figura 10.20.
Figura 10.20
Figura 10.21
487
Remarci:
9 Selectai tag-ul <INPUT>, deschidei panoul Reference i citii informaiile
care se afieaz. Utilizai meniul derulant Description pentru a vizualiza
atributele: type, cu valoarea submit.
9 Citii Conversaia 10, paragraful HTML 4 Creai un buton pentru expedierea
(submit) unui formular (Liviu Dumitracu, (X)HTML, Editura Universitii din
Ploieti, 2003).
Figura 10.22
Metoda 2

Insert Button.
Aplicaie
Creai un buton imagine pentru expedierea unui formular.
Putei nlocui butonul Submit form printr-o imagine.
1. Executai clic n zona dorit.
2. Executai clic pe Insert Form Insert Image Field.
sau,
2. n panoul Insert, categoria Forms executai clic pe butonul (Insert

Image Field).
Remarc. Se afieaz caseta Select Image Source (figura 10.23).

488
Figura 10.23
3. Selectai imaginea follow.jpg (figura 10.23).
4. n inspectorul Properties parametrizai imaginea ca pe o imagine

clasic (figura 10.24).
Figura 10.24
Figura 10.25
Remarc. Selectai tag-ul <INPUT>, deschidei panoul Reference; utilizai meniul

derulant Description pentru a vizualiza atributele: type, border, src, width, height. Citii
Conversaia 10, paragraful HTML 4 Creai un buton pentru expedierea (submit) unui
formular (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
489
Figura 10.26
Dreamweaver MX Creai un buton pentru expedierea

workspace (submit) unui formular
Pentru ca informaiile din cadrul unui formular s fie transmise
script-ului de prelucrare, trebuie s creai un buton submit n formularul
dumneavoastr.
Pentru inserarea unui buton de tip submit cu Dreamweaver MX

Iat cum procedm pentru a insera n formularul dumneavoastr

butonul de tip submit.
Metoda 2
1. Executai clic n zona n care dorii s fie inserat butonul.
2. n grupul de panouri Insert, subpanoul Form, executai clic pe
butonul (Button), figura 10.27.
Figura 10.27
490
9 Button Name introducei exp;
9 Label introducei Expediai;
9 Action alegei Submit form.
Figura 10.28
Figura 10.29
Remarc. Citii Conversaia 10, paragraful XHTML 4 Creai un buton pentru expedierea
(submit) unui formular (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti,
2003).
Figura 10.30
Aplicaie
Creai un buton imagine pentru expedierea unui formular.

491
Indicaie. Folosii 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 Creai 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, respectai procedura descris n

cele ce urmeaz.
Metoda 1
1. Executai clic n zona n care dorii s figureze butonul.
2. Executai clic pe Insert Form Objects Button (figura 10.31).
Figura 10.31
492
Remarc. Se afieaz butonul Submit (figura 10.32).
Figura 10.32
3. Inspectorul Properties, v permite parametrizarea acestui

obiect, dup cum urmeaz:
9 n zona Button Name, introducei, eventual, un nume pentru

butonul de resetare a formularului (reset), figura 10.33.
Figura 10.33
9 n zona Label, introducei textul care va figura pe buton

tergei iar n zona Action alegei Reset form (figura 10.34).
Figura 10.34
Figura 10.35
493
derulant Description pentru a vizualiza atributul type cu valoarea reset. Citii
Conversaia 10, paragraful HTML 4 Creai un buton pentru resetarea (reset) unui
buton (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Figura 10.36
Metoda 2

(Insert Button), figura 10.37.
Figura 10.37
Dreamweaver MX Creai un buton pentru resetarea

workspace (reset) unui formular
Pentru a insera un buton de tip reset cu Dreamweaver MX (workspace),
494
Iat cum procedm pentru a insera n formularul dumneavoastr

butonul de tip reset.
Metoda 2
1. Executai clic n zona n care dorii s fie inserat butonul.
butonul (Button).
9 Button Name introducei reset;
9 Label introducei tergei;
9 Action alegei Reset Form.
Figura 10.38
Figura 10.39

495
Figura 10.40
Dreamweaver 4 Inserai o zon simpl de text

workspace
Putei insera o zon simpl de text n care s introducei puine

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 inserm n formular numele unui vizitator al site-ului

dumneavoastr.
Metoda 1
1. Executai clic n zona n care dorii s figureze zona simpl de

text.
2. Executai clic pe Insert Form Objects Text Field (figura

10.41).
496
Figura 10.41
Remarc. Dreamweaver 4 workspace insereaz n formular un cmp de text (figura

10.42).
Figura 10.42
Inspectorul Properties v permite s parametrizai aceast zon (cmp)

simpl de text. n mod implicit este activat butonul Single Line (figura
10.43).
9 Text Field introducei nume;

9 Type alegei Single line.
Figura 10.43
497
4. Dup zona de text, introducei 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. Citii Conversaia
10, paragraful HTML 4 Inserai o zon simpl de text (Liviu Dumitracu, (X)HTML,
Editura Universitii din Ploieti, 2003).
Figura 10.46
498
Metoda 2
Modificai pasul 2 (Metoda 1) dup cum urmeaz:

(Insert Text Field).
Aplicaie
Inserai, n continuare, n formular, cea de-a doua coordonat personal a

unui vizitator: prenumele.
Definii mrimea unei zone simple de text

Iat cum definim mrimea celor dou zone de text: nume 30
caractere; prenume 20 caractere.
1. Selectai prima zon de text nume (figura 10.47).
Figura 10.47
2. n inspectorul de proprieti (figura 10.48), n zona:
9 Char Width introducei valoarea 30;
9 Maxchars introducei valoarea 40 (dac este nevoie!).
Figura 10.48
499
3. Selectai cea de-a doua zon de text prenume.
9 Maxchars introducei, dac este nevoie (!) valoarea 30.
Figura 10.49
Remarci:
9 Asigurai-v c n zona Type a fost selectat opiunea Single line.
9 Putei tasta eventual, n zona InitVal o valoare iniial ce va apare n pagina
Web (vizualizat ntr-un browser!).
Figura 10.50

derulant Description pentru a vizualiza atributele size i maxlength. Citii Conversaia
10, paragraful: HTML4 Definii mrimea unei zone de text (Liviu Dumitracu,
6. Vizualizai pagina Web ntr-un browser(figura 10.51).
Figura 10.51
500
Dreamweaver MX Inserai o zon simpl de text

workspace
Pentru inserarea unei zone simple de text cu Dreamweaver MX

Iat cum procedai 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. Executai clic n zona n care dorii s figureze zona simpl de

text.

butonul (Text Field), figura 10.52.
Figura 10.52
9 Text Field introducei nume;
9 Type alegei Single Line.
Figura 10.53
4. Dup zona de text, introducei n continuare eticheta zonei de

text: Nume (figura 10.54).
501
Figura 10.54
Figura 10.55
Remarc. Citii Conversaia 10, paragraful XHTML Inserai o zon simpl de text (Liviu
Figura 10.56
502
Aplicaie
Inserai cea de-a doua coordonat a unui vizitator: prenume.
Definii mrimea unei zone simple de text

Iat cum definim cu Dreamweaver MX workspace mrimea celor dou
zone de text: nume 30 caractere; prenume 20 caractere.
1. Selectai prima zon de text, nume.
9 Max Chars introducei valoarea 40 (dac este nevoie!).
Figura 10.57
3. Selectai cea de-a doua zon de text, prenume.
4. n panoul Properties, n zona:
9 Max Chars introducei valoarea 30 (dac este nevoie!).
Remarc. Asigurai-v c n zona Type a fost selectat opiunea Single Line.

Figura 10.58
503
Figura 10.59
Dreamweaver 4 Inserai o zon de text multilinie

workspace
Pentru inserarea unei zone de text multilinie cu Dreamweaver 4

Iat cum inserm cu Dreamweaver 4 workspace cea de-a treia

coordonat personal a unui vizitator: adresa.
Metoda 1
1. Executai clic n zona n care dorii s figureze zona de text

multilinie.
2. Executai clic pe Insert Form Objects Text Field.
9 Type alegei Multiline;
9 Text Field introducei adresa;
9 Char Width introducei valoarea 30 (numrul de coloane);

504
9 Num Lines introducei valoarea 5 (numrul de linii);
9 Wrap alegei Default (modul n care se va comporta

textul n zona de date).
Figura 10.60
Remarc. Dreamweaver afieaz o zon de text multilinie (figura 10.61).
Figura 10.61
Remarci:
9 Default utilizeaz parametrii definii n mod implicit.
9 Off liniile foarte lungi nu sunt tiate la dreapta; textul continu
pe aceeai linie n zona de introducere date.
9 Virtual liniile foarte lungi sunt tiate la dreapta; textul continu pe
linia urmtoare n zona de introducere date.
9 Physical liniile foarte lungi sunt tiate la dreapta; textul continu pe
linia urmtoare 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 introducei eticheta: Adresa (figura

10.62).
Figura 10.62
505
Figura 10.63
Remarc. Selectai tag-ul <TEXTAREA>, deschidei panoul Reference i citii informaiile

care se afieaz. Utilizai meniul derulant Description pentru a vizualiza atributele: cols
i rows. Citii Conversaia 10, paragraful HTML 4 Inserai o zon de text multilinie
Figura 10.64
Metoda 2

(Insert Text Fields).
506
Aplicaie
Inserai n formular o zon de text pentru password (parol). Cu acest tip de

cmp (password), vizitatorul nu va vedea caracterele pe care le introduce ci
doar asteriscuri.
Indicaie. Inserai o zon simpl de text de tip password (figura 10.65).
Figura 10.65
Dreamweaver MX Inserai o zon de text multilinie

workspace
Pentru inserarea unei zone de text multilinie cu Dreamweaver MX

Iat cum procedai 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. Executai clic n zona n care dorii s figureze zona de text

multilinie.
2. n grupul de panouri Insert, subpanoul Forms, executai clic pe

butonul (Text Field), figura 10.66.
Figura 10.66

507
9 Type alegei Multiline;
9 Text Field introducei adresa;
9 Char Width introducei valoarea 30 (numrul de coloane);
9 Num Lines introducei valoarea 5 (numrul de linii
exprimat n caractere);
9 Wrap alegei Default.
Figura 10.67
4. Dup zona de text multilinie, introducei eticheta: Adresa

(figura 10.68).
Figura 10.68

508
Figura 10.69
Remarc. Citii Conversaia 10, paragraful XHTML Inserai o zon de text multilinie
Figura 10.70
Dreamweaver 4 Creai o caset de validare

workspace
n interfaa grafic obinuit, casetele de validare sunt sinonime cu una

sau mai multe opiuni.
509
Pentru crearea unei casete de validare cu Dreamweaver 4 workspace,
9 Metoda 1 Meniul Insert, via Form Objects CheckBox;

Iat cum crem 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 BLND.
Metoda 1
1. Executai clic n zona n care dorii s figureze prima caset de

validare (figura 10.71).
Figura 10.71
2. Executai clic pe Insert Form Objects Check Box (figura

10.72).
Figura 10.72
510
Remarc. Se afieaz prima caset de validare (figura 10.73).
Figura 10.73
3. Repetai pasul 2 pentru celelalte trei casete de validare pe care

urmeaz s le inserai.
Dreamweaver 4 workspace afieaz celelalte trei casete de validare

(figura 10.74).
Figura 10.74
Remarc. Inspectorul Properties v permite parametrizarea acestui obiect.
4. Executai clic pe prima caset de validare, figura 10.75.
Figura 10.75
511
9 CheckBox introducei numele simbolic C1;
9 Checked Value introducei valoarea Java;
9 Initial State alegei opiunea Checked.
Figura 10.76
6. Executai clic pe a doua caset de validare (figura 10.77).
Figura 10.77
9 Checked Value introducei valoarea Pascal;
9 Initial State alegei opiunea Unchecked.
Figura 10.78
8. Executai clic pe a treia caset de validare.
9. n inspectorul Properties, n zona:
9 Checked Value introducei valoarea Basic;

512
10. Executai clic pe a patra caset de validare.
9 Checked Value introducei valoarea C++;
12. Introducei dup fiecare caset de validare etichetele

corespunztoare: 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. Citii Conversaia 10, paragraful HTML 4 Creai o caset de validare (Liviu

513
Figura 10.81
Metoda 2

(Insert CheckBox).
Dreamweaver MX Creai 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 procedm 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 BLND.
Metoda 2
1. Executai clic n zona n care dorii s figureze prima caset de

validare.

butonul (CheckBok), figura 10.82.
514
Figura 10.82
Remarc. Se afieaz prima caset de validare (figura 10.83).
Figura 10.83
3. Repetai pasul 2 pentru celelalte trei casete de validare pe care

urmeaz s le inserai.
4. Executai clic pe prima caset de validare (figura 10.84).
Figura 10.84
5. n panoul Properties, n zona CheckBox, introducei numele

simbolic C1; n zona Checked Value, introducei valoarea Java;
n zona Initial State alegei opiunea Checked (figura 10.85).
Figura 10.85
515
6. Executai clic pe a doua caset de validare.

9 Checked Value introducei valoarea Pascal;
Figura 10.86
8. Executai clic pe a treia caset de validare.

9 Checked Value introducei valoarea Basic;
10. Executai clic pe a patra caset de validare.

9 Checked Value introducei valoarea C++;
12. Introducei dup fiecare caset de validare etichetele
corespunztoare: Java, Pascal, Basic, C++ (figura 10.87).
Figura 10.87
516
Figura 10.88
Remarc. Citii Conversaia 10, paragraful XHTML Creai o caset de validare (Liviu
Figura 10.89
Dreamweaver 4 Creai un buton radio

workspace
Adugai butoane radio n formularul dumneavoastr atunci cnd nu

dorii s permitei vizitatorilor s aleag mai mult de o opiune dintre
cele propuse.
517
Pentru crearea unui buton radio cu Dreamweaver 4 workspace, folosii
9 Metoda 1 Meniul Insert, via Form Objects Radio Button;
Iat cum definim ntr-un formular patru butoane radio Excelent, Foarte
bine, Bine, Nesatisfctor (pentru vizitatorii care vor s acorde un
calificativ site-ului pe care l-ai realizat) plus nc dou butoane radio
pentru sex (masculin, feminin).
Metoda 1
1. Executai clic n zona n care dorii s figureze butonul radio,

figura 10.90.
Figura 10.90
2. Executai clic pe Insert Form Objects Radio Button (figura

10.91).
518
Figura 10.91
Remarc. Se afieaz primul buton radio (figura 10.92).
Figura 10.92
3. Repetai pasul 2 pentru a insera celelalte trei butoane radio.
Remarc. Dreamweaver afieaz cele trei butoane radio pe care le-ai inserat (figura
10.93).
Figura 10.93
Remarc. Inspectorul Properties v permite parametrizarea acestui buton.

4. Executai clic pe primul buton radio (inserat).
519
9 RadioButton introducei numele simbolic radio;
9 Checked Value introducei valoarea Excelent;
Figura 10.94
6. Executai clic pe cel de-al doilea buton radio (inserat).
9 Checked Value introducei valoarea Foarte bine;
8. Executai clic pe cel de-al treilea buton radio.
9 RadioButton introducei acelai nume simbolic radio;
9 Checked Value introducei valoarea Bine;
10. Executai clic pe cel de-al patrulea buton radio.
9 RadioButton introducei acelai nume simbolic radio;
9 Checked Value introducei valoarea Nesatisfctor;
12. Introducei dup fiecare buton radio (inserat) etichetele

corespunztoare: Excelent, Foarte Bine, Bine, Nesatisfctor
(figura 10.95).
520
Figura 10.95
13. Inserai nc dou butoane radio (pentru sex!), figura 10.96.
Figura 10.96
14. Executai clic pe primul buton radio inserat (pentru sex!), figura
10.97.
Figura 10.97
9 RadioButton introducei numele simbolic, sex;
9 Checked Value introducei valoarea masculin;
Figura 10.98
521
16. Executai clic pe cel de-al doilea buton radio inserat (pentru
sex!).
9 RadioButton introducei numele simbolic, sex;

9 Checked Value introducei valoarea feminin;
18. Introducei dup cele dou butoane radio eticheta
corespunztoare: Sex, figura 10.99.
Figura 10.99
Figura 10.100

derulant Description pentru a vizualiza atributul type cu valoarea radio. Citii
Conversaia 10, paragraful HTML 4 Creai un buton radio (Liviu Dumitracu,

522
Figura 10.101
Metoda 2

(Insert RadioButton).
Dreamweaver MX Creai un buton radio

workspace
Pentru crearea unui buton radio cu Dreamweaver MX workspace, folosii

9 Metoda 1 Meniul Insert, via Form Objects RadioButton;
Iat cum procedm pentru a crea ntr-un formular, cu Dreamweaver MX

workspace patru butoane radio: Excelent, Foarte bine, Bine,
Nesatisfctor (pentru vizitatorii care vor s acorde un calificativ site-ului
pe care l-ai realizat) plus nc dou butoane radio pentru sex (masculin,
feminin).
523
Metoda 2
1. Executai clic n zona n care dorii s figureze butonul radio.
butonul (RadioButton), figura 10.102.
Figura 10.102
Se afieaz primul buton radio (figura 10.103).
Figura 10.103
3. Repetai pasul 2 pentru a insera celelalte trei butoane (figura

10.104).
Figura 10.104
524
4. Executai clic pe primul buton radio.
9 RadioButton introducei numele simbolic, radio;
9 Checked Value introducei valoarea Excelent;
6. Executai clic pe cel de-al doilea buton radio.
9 Checked Value introducei valoarea Foarte bine;
8. Executai clic pe cel de-al treilea buton radio.
9 Checked Value introducei valoarea Bine;
10. Executai clic pe cel de-al patrulea buton radio.
9 Checked Value introducei valoarea Nesatisfctor;
12. Introducei dup fiecare buton radio inserat etichetele

corespunztoare: Excelent, Foarte bine, Bine, Nesatisfctor
(figura 10.105).
525
Figura 10.105
13. Inserai nc dou butoane radio (pentru sex!).
14. Executai clic pe primul buton radio inserat.
9 RadioButton introducei numele simbolic sex;

9 Checked Value introducei valoarea masculin;
16. Executai clic pe cel de-al doilea buton radio inserat.
9 RadioButton introducei numele simbolic sex;

9 Checked Value introducei valoarea feminin;
18. Introducei dup cele dou butoane radio eticheta
corespunztoare: sex (figura 10.106).
Figura 10.106

526
Figura 10.107
Remarc. Citii Conversaia 10, paragraful XHTML Creai un buton radio (Liviu
Figura 10.108
Dreamweaver 4 Creai un meniu derulant

workspace
Un meniu derulant permite vizitatorului s aleag o singur opiune

dintr-o list lung de opiuni.
527
Pentru crearea unui meniu derulant cu Dreamweaver 4 workspace,
9 Metoda 1 Meniul Insert, via Form Objects List/Menu;
Iat cum crem un meniu derulant ce conine o list (simplificat) a

profesiilor: economist, inginer, profesor universitar, profesor liceu,
profesor coal general, avocat, contabil.
Metoda 1
1. Executai clic n zona n care dorii s figureze meniul (figura

10.109).
Figura 10.109
2. Executai 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 parametrizai acest obiect (figura

10.112).
9 List/Menu introducei numele meniului derulant, profesie;
9 Type alegei Menu.
Figura 10.112
4. n inspectorul Properties, executai clic pe List Values pentru

a introduce elementele listei.
Remarc. Se afieaz caseta de dialog List Values (figura 10.113).
Figura 10.113
5. Pentru fiecare element al meniului introducei o etichet (Item

Label) i o valoare (figura 10.114).
529
Figura 10.114
Remarci:
9 Item Label corespunde opiunii din meniul derulant.
9 Pentru a trece rapid de la o zon la alta, utilizai tasta Tab (Tab').
9 Pentru a aduga sau terge un element, utilizai butoanele + - (figura
10.114).
7. n inspectorul Properties, n zona Initially Selected, alegei

elementul care va fi selecionat n mod implicit (n momentul
ncrcrii formularului, naintea interveniei utilizatorului)
executnd clic pe acesta profesor universitar, figura 10.115.
Figura 10.115
8. Introducei o etichet care descrie meniul: Care este profesia

dumneavoastr? (figura 10.116).
Figura 10.116

530
Figura 10.117
Remarci:
9 Selectai tag-urile <SELECT> i <OPTION>, deschidei panoul Reference i
citii informaiile care se afieaz.
9 Citii Conversaia 10, paragraful: HTML 4 Creai un meniu derulant (Liviu
Figura 10.118
Metoda 2

(Insert List/Meniu).
Aplicaii
Creai o list derulant (Transport) cu urmtoarele opiuni: Autobuz, Taxi,

Tramvai, Metrou, Microbuz.
531
Iat care este procedura pe care v invitm s-o urmai pentru a crea lista
derulant Transport.
1. Executai clic n zona n care dorii s figureze lista.
2. Inserai lista derulant (obiectul formularului) urmnd aceeai

procedur (Metoda 1/Metoda 2).
Remarc. Inspectorul Properties v permite s parametrizai acest obiect.
3. n inspectorul Properties, n zona Type alegei List, figura 10.119.
Figura 10.119
4. n zona Height indicai numrul de elemente (3) ale listei care vor fi
vizibile, celelalte (2) nu vor fi vizibile dect utiliznd 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 activai opiunea Allow multiple dac dorii s

oferii vizitatorului posibilitatea s selecteze mai multe elemente ale
listei, figura 10.121.
Figura 10.121
6. n inspectorul de proprieti, executai clic pe List Values....
Remarc. Se afieaz caseta de dialog List Values... (figura 10.122).
Figura 10.122
532
7. Pentru fiecare element al listei introducei o etichet (Item Label) i o
valoare (figura 10.123).
Figura 10.123
9. n zona Initialy Selected alegei elementul (executnd clic pe acesta)

care va fi selecionat n mod implicit, n momentul ncrcrii
formularului, naintea interveniei utilizatorului. Utilizai tasta SHIFT/
CTRL pentru a face o preselecie multipl, figura 10.124.
Figura 10.124
10. Introducei eticheta care descrie lista derulant: Transport, figura

10.125.
Figura 10.125

533
Figura 10.126
Figura 10.127
Creai un cmp de fiier File Field.
Iat care este procedura pe care v invitm s-o urmai pentru a crea o caset
de dialog pentru expedierea unui fiier.
Metoda 1
1. Executai clic n zona n care dorii s figureze caseta de dialog de

deschidere a unui fiier.
2. Executai clic pe Insert Form Objects File Field (figura 10.128).

534
Figura 10.128
Remarc. Dreamweaver 4 afieaz un cmp de text i un buton Browse n formular

(figura 10.129).
Figura 10.129
Remarc. Inspectorul Properties v permite s parametrizai acest obiect.
9 File Field Name introducei numele simbolic, fiier;
9 Char Width introducei valoarea 40 (lungimea cmpului de

text n care se va introduce calea de acces ctre
fiier);
9 Max Chars introducei numrul maxim de caractere.

535
Figura 10.130
4. Introducei eticheta care descrie cmpul inserat: Trimitei fiierul

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
Inserai un cmp ascuns (mascat).
Un cmp ascuns, dup cum spune i numele nu este vizibil n fereastra

browser-ului atunci cnd vizitatorii consult site-ul dumneavoastr.
Cmpurile ascunse pot fi utile pentru site-urile marilor magazine (pentru a

cunoate n orice moment totalul vnzrilor), 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 urmai pentru a crea un cmp
ascuns ntr-un formular.
Metoda 1
1. Executai clic n zona n care dorii s figureze cmpul ascuns

(mascat).
2. Executai clic pe Insert Form Objects Hidden Field (figura

10.135).
537
Figura 10.135
Remarc. Cmpul ascuns se afieaz n fereastra document sub forma unui icon (figura
10.136).
Figura 10.136
Remarc. Inspectorul Properties v permite parametrizarea acestui obiect.
9 Hidden Field introducei cmpinvizibil, numele cmpului ascuns

din formular;
9 Value introducei o valoare corespunztoare cmpului
ascuns.
Figura 10.137
538
Remarci:
9 De foarte multe ori cmpurile ascunse conin informaii de configurare pentru
script.
9 Cmpul ascuns nu apare n pagin dect sub forma unui element invizibil
( ). n momentul n care l selectai, n inspectorul Properties se afieaz
toi parametrii acestuia.
Figura 10.138
Figura 10.139
Metoda 2

(Insert Hidden Field), figura 10.140.
Figura 10.140
539
Creai un script simplu care permite generarea unui adrese e-mail prin
concatenarea prenumelui i numelui introduse n formular de ctre utilizator.
Iat care este procedura pe care trebuie s-o urmai pentru a crea script-ul de
concatenare.
1. Definii variabilele script-ului: nume, prenume, e-mail.
2. n zona <head> ... </head> descriei script-ul (figura 10.141).
Figura 10.141
Remarci:
9 Script-ul nu detecteaz dac cele dou cmpuri nume i prenume sunt efectiv
introduse.
9 n cmpul prenume, adugai codul <input type=text nume=prenume
onBlur=creatmail()>.
9 Cnd utilizatorul prsete acest cmp el declaneaz funcia creatmail() i
concatenarea se realizeaz.
Dreamweaver MX Creai un meniu derulant

workspace
Pentru a crea un meniu derulant cu Dreamweaver MX workspace, folosii

9 Metoda 1 Meniul Insert, via Form Objects List/Meniu;

540
Iat cum crem cu Dreamweaver MX workspace un meniu derulant ce
conine o list (simplificat) a profesiilor: economist, inginer, profesor
universitar, profesor liceu, profesor coal general, avocat, contabil.
Metoda 2
1. Executai clic n zona n care dorii 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. Executai clic pe butonul List/Meniu inserat.
4. n panoul Properties, n zona (figura 10.144):
9 List/Meniu introducei profesie;
9 Type alegei Menu.
Figura 10.144
5. n panoul Properties, executai clic pe List Values pentru a

introduce elementele listei.
541
6. n caseta de dialog List Values care se afieaz, n zona Item
Label, introducei elementul listei iar n zona Value, valoarea
(figura 10.145).
Figura 10.145
8. n panoul Properties, n zona Initially Selected, alegei profesor

universitar elementul care va fi selecionat n mod implicit.
9. Introducei eticheta care descrie meniul: Care este profesia

dumneavoastr?.
Figura 10.146
Remarc. Citii Conversaia 10, paragraful XHTML Creai un meniu derulant (Liviu

542
Figura 10.147
543
Dreamweaver MX Tem
Testai-v cunotinele
1. Descriei pe scurt una din metodele de creare a unui formular cu
Dreamweaver MX.
2. Precizai care este codul surs XHTML pentru crearea unui buton de
tip submit.
3. Descriei pe scurt metoda (Grupul de panouri Insert) Dreamweaver
MX workspace de inserare a unei zone de text multilinie.
4. Cum creai un buton radio sau o caset de validare cu Dreamweaver 4
workspace? Descriei pe scurt una din metodele folosite.
5. Creai cu Dreamweaver 4 workspace un meniu derulant care conine o
list (simplificat) a profesiilor: economist, inginer, profesor
universitar, profesor liceu, profesor coala general, avocat, contabil.
Vizitai site-urile
9 www.fabric8.com
9 www.pcwebopedia.com/TERM/C/CGI.html
Conversaia 11
Inserai obiecte cu Dreamweaver MX
f Dreamweaver 4 workspace, MX workspace Inserai animaii Flash i
Shockwave
f Dreamweaver 4 workspace, MX workspace Inserai un text n format
Flash
f Dreamweaver 4 workspace, MX workspace Creai un buton de navigare
Flash
f Dreamweaver 4 workspace, MX workspace Inserai un obiect Fireworks
i data zilei
f Dreamweaver 4 workspace, MX workspace Inserai un applet Java
f Dreamweaver 4 workspace, MX workspace Inserai obiecte care
necesit un plugin
Dreamweaver 4 Inserai animaii Flash i

workspace Shockwave
Macromedia Flash i Director reprezint, fr ndoial, standarde de

referin pentru animaii Web.
Macromedia Flash permite crearea de animaii vectoriale interactive.

544
Inserai o animaie Flash
Pentru a insera o animaie Flash cu Dreamweaver 4 workspace, folosii
9 Metoda 1 Meniul Insert, via Media Flash;
9 Metoda 2 Panoul Insert, categoria Media.
Iat cum procedai pentru a insera n pagina dumneavoastr Web o

animaie Flash, exemplu.swf.
Metoda 1
1. Executai clic n locul n care dorii s inserai animaia Flash.
2. Executai clic pe Insert Media Flash.
Remarc. Se afieaz caseta de dialog Select File.
3. n caseta de dialog Select File, executai urmtoarele aciuni:
9 selectai fiierul 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, parametrizai animaia Flash ca n figura 11.1.
Figura 11.1

545
Figura 11.2
Remarc. Selectai tag-urile <OBJECT> (implementat n Internet Explorer) i <EMBED>

(implementat n Netscape), deschidei panoul Reference i citii informaiile care se
afieaz.
Figura 11.3
Metoda 2
2. n panoul Insert, categoria Media, executai clic pe butonul

(Flash), figura 11.4.
546
Figura 11.4
Inserai o animaie Shockwave

Pentru a insera o animaie Shockwave cu Dreamweaver 4 workspace,
9 Metoda 1 Meniul Insert, via Media Shockwave;
Metoda 1
1. Executai clic n locul n care dorii s inserai animaia

Shockwave.
2. Executai clic pe Insert Media Shockwave.

9 selectai fiierul lumina.dir;
4. n inspectorul Properties, n zonele: W i H; File; Align; Bg;

Play; Parameters; V Space i H Space, parametrizai animaia
Shockwave n aceeai manier cu parametrizarea animaiei
Flash (figura 11.5).
547
Figura 11.5
Figura 11.6
Figura 11.7
548
Dreamweaver MX Inserai animaii Flash i

workspace Shockwave
Inserai o animaie Flash

Pentru a insera n pagina dumneavoastr Web o animaie Flash cu
jos:
9 Metoda 1 Meniul Insert, via Media Flash;
9 Metoda 2 Grupul de panouri Insert, via subpanoul Media.
Iat cum inserm o animaie Flash, exemplu.swf, n pagina

dumneavoastr Web.
Metoda 2
1. Executai clic n locul n care dorii s inserai animaia Flash.
2. n grupul de panouri Insert, n subpanoul Media, executai clic
pe butonul (Flash), figura 11.8.
Figura 11.8

549
9 selectai fiierul 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,
parametrizai animaia Flash pe care ai inserat-o (vezi
Dreamweaver 4 workspace).
Figura 11.9
Figura 11.10
550
Inserai o animaie Shockwave
Pentru a insera n pagina dumneavoastr Web o animaie Shockwave cu
jos:
9 Metoda 1 Meniul Insert, via Media Shockwave;
9 Metoda 2 Grupul de panouri Insert, via Media, butonul

(Shockwave).
Aplicaie
Inserai n pagina dumneavoastr Web animaia Shockwave: lumina.dir.
Remarci:
9 Citii paragraful: Dreamweaver 4 workspace Inserai o animaie Shockwave.
9 Pentru a parametriza aceast animaie, utilizai panoul Properties n aceeai
manier ca la animaia Flash.
Dreamweaver 4 Inserai un text n format Flash

workspace
Cu Dreamweaver putei insera direct un text n format Flash (.swf).

Desigur, nu putei crea animaii la fel de puternice ca n Flash, dar putei
defini animaii i butoane Flash rezonabile, rmnnd tot timpul n
universul Dreamweaver! i nc ceva! Dreamweaver pune la dispoziia
dumneavoastr o puternic bibliotec de obiecte Flash, ceea ce nu este
deloc puin!
Pentru a insera n pagina dumneavoastr Web un text n format Flash,

cu Dreamweaver 4 workspace, folosii 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 procedai pentru a insera textul LUMINA BLANDA 2003 n
format Flash. Definii efectul de rollover.
Metoda 1
1. Salvai documentul (Dreamweaver) sub numele lumina.htm.
Remarc. Documentul trebuie s fie salvat nainte de a insera un obiect text n

format Flash.
2. Executai clic pe Insert Interactive Images Flash Text.
Remarc. Se afieaz caseta de dialog Insert Flash Text.

3. n caseta de dialog Insert Flash Text executai urmtoarele
9 n zona Font selectai Arial Black, n meniul derulant;
9 n zona Size introducei valoarea 30;
9 activai butonul (Bold);
9 selectai butonul (Center);
9 n zona Color introducei valoarea green (#00FF00)

pentru a defini culoarea inactiv a
textului atunci cnd nu trecei cu
mouse-ul peste text;
9 n zona Rollover Color introducei valoarea blue (#0000FF)

pentru a defini culoarea pe care o capt
textul Flash atunci cnd trecei cu
mouse-ul peste textul inserat;
9 n zona Text introducei textul LUMINA BLANDA

2003;
9 activai opiunea Show Font pentru a

vizualiza textul pe care l-ai introdus;
9 n zona Link introducei numele paginii

(http://www.upg-ploieti.ro) pe care
552
dorii s-o apelai;
9 n zona Target selectai cadrul n care dorii s se

afieze pagina (dac este cazul!);
9 n zona BgColor introducei valoarea #FFFFFF;
9 n zona Save As introducei numele fiierului (cu
extensia .swf), text.swf;
Figura 11.11
Figura 11.12
553
Figura 11.13
6. Verificai efectul Rollover i link-ul creat.
Metoda 2

(Flash Text), figura 11.14.
Figura 11.14
Dreamweaver MX Inserai 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, folosii 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 procedai pentru a insera n pagina dumneavoastr Web textul
n format Flash: LUMINA BLANDA 2003. Utilizai efectul de rollover.
Metoda 2
1. Salvai documentul, n folder-ul Site, sub numele lumina.htm.
pe butonul (Flash Text), figura 11.15.
Figura 11.15
Remarc. Se afieaz caseta de dialog Insert Flash Text.

3. n caseta de dialog Insert Flash Text executai aceleai aciuni
pe care le-ai realizat cu Dreamweaver 4 workspace.
Figura 11.16

555
Figura 11.17
6. Verificai efectul Rollover i link-ul creat.
Dreamweaver 4 Creai un buton de navigare Flash

workspace
Pentru a crea un buton de navigare Flash (format .swf) cu Dreamweaver

4 workspace, folosii una din metodele prezentate mai jos:
9 Metoda 1 Meniul Insert, via Interactive Images Flash

Button;
9 Metoda 2 Panoul Insert, via Media.
Creai butonul de navigare Flash: F.E.S.E (Free European School

Economics din cadrul Universitii Petrol Gaze din Ploieti).
Metoda 1
1. Salvai documentul (Dreamweaver) sub numele buton.htm.
2. Executai clic pe Insert Interactive Images Flash Button.
Remarc. Se afieaz caseta de dialog Insert Flash Button.
3. n caseta de dialog Insert Flash Button (figura 11.18), executai

urmtoarele aciuni:
9 n zona Style selectai tipul de buton pe care l preferai

(Blue Warper) (atenie la zona Sample!);
556
9 n zona Button Text introducei textul care se va
inscripiona pe buton (F.E.S.E.);
9 n zona Size introducei valoarea 12;
9 n zona Font introducei Verdana;
9 n zona Link introducei www.upg-ploiesti.ro;
9 n zona BgColor introducei #FFFFFF;
Figura 11.18
Remarc. Executai 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 Creai un buton de navigare Flash

workspace
Pentru a crea un buton de navigare Flash (format.swf) cu Dreamweaver

MX workspace, folosii 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 procedai pentru a crea butonul de navigare Flash: F.E.S.E.

(Free European School Economics din cadrul Universitii Petrol Gaze
din Ploieti).
Metoda 2
1. Salvai documentul sub numele buton.html.
pe butonul (Flash Button), figura 11.22.
Figura 11.22
Remarc. Se afieaz caseta de dialog Insert Flash Button.
3. n caseta de dialog Insert Flash Button (figura 11.23) executai

aceleai aciuni pe care le-ai realizat cu Dreamweaver 4
workspace.
559
Figura 11.23
Figura 11.24

560
Figura 11.25
Dreamweaver 4 Inserai 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
genernd cod HTML i Java Script.
Inserai 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 inserai n pagina dumneavoastr Web un obiect Fireworks,

little.htm.
1. Executai clic n zona n care dorii s inserai obiectul

Fireworks.
2. Executai clic pe Insert Interactive Images Fireworks

HTML.
561
Remarc. Se afieaz caseta de dialog Insert Fireworks HTML.
3. n caseta de dialog Insert Fireworks HTML (figura 11.26),

9 n zona Fireworks HTML File introducei numele fiierului

(eventual folosii butonul
Browse);
9 n zona Options activai opiunea Delete file
after insertion (pentru a
suprima fiierul 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
Inserai data zilei

Pentru a insera data curent cu Dreamweaver 4 workspace, folosii una
9 Metoda 1 Meniul Insert, via Date;
Iat care este procedura de inserare a datei curente.
Metoda 1
1. Executai clic n zona n care dorii s fie inserat data curent.

563
2. Executai clic pe Insert Date.
Remarc. Se afieaz caseta de dialog Insert Date.

3. n caseta de dialog Insert Date, executai urmtoarele aciuni
(figura 11.30):
9 n fiecare meniu derulant alegei formatul dorit pentru zi,

dat i or;
9 activai caseta de validare Update Automatically on Save,

dac dorii s actualizai data de fiecare dat cnd salvai
documentul;
Figura 11.30
Figura 11.31

564
Figura 11.32
Metoda 2
(Date), figura 11.33.
Figura 11.33
Dreamweaver MX Inserai un obiect Fireworks i

workspace data zilei
Inserai 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. Executai clic n zona n care dorii s inserai obiectul

Fireworks.
2. n grupul de panouri Insert, n subpanoul Common executai
clic pe butonul (figura 11.34).
Figura 11.34
3. n caseta de dialog Insert Fireworks HTML, care se afieaz

9 n zona Fireworks HTML File introducei numele fiierului

(sau folosii butonul Browse);
9 n zona Options activai opiunea Delete for

after insertion;
Figura 11.35

566
Figura 11.36
Inserai data zilei

Pentru a insera n pagina Web data curent cu Dreamweaver MX
9 Metoda 1 Meniul Insert, via Date;
Iat cum procedai pentru a insera data curent.
Metoda 2
1. Executai clic n zona n care dorii s inserai data curent.
2. n grupul de panouri Insert, n subpanoul Common, executai
clic pe butonul (Date).
3. n caseta de dialog Insert Date care se afieaz, completai

informaiile din zonele: Day Format, Date Format, Time Format.
4. n caseta de dialog Insert Date, activai opiunea Update

Automatically on Save, dup care executai clic pe butonul OK.

567
Figura 11.37
Figura 11.38
Dreamweaver 4 Inserai un applet Java

workspace
Limbajul Java definit de Sun, permite crearea de aplicaii (applet, n

limba englez; appliquettes, n limba francez) care pot fi inserate ntr-o
pagin Web. Applet-ul Java este interpretat de Maina 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 inserm n pagina Web, un applet Java care afieaz numrul
de apsri ale unui buton.
Metoda 1
1. Executai clic n locul n care dorii s fie inserat applet-ul Java.
2. Executai clic pe Insert Media Applet.

3. n caseta de dialog Select File, executai urmtoarele aciuni
(figura 11.39):
9 selectai fiierul Test.class;
Figura 11.39
9 Applet Name introducei numele applet-ului;

569
9 W i H introducei valorile 130 respectiv 50 pixeli;
9 Code introducei numele fiierului surs;
9 Base introducei fiierul care conine applet-ul;
9 Align utilizai meniul derulant pentru a alinia
applet-ul;
9 Alt indicai o imagine ca alternativ atunci

cnd browser-ul nu recunoate applet-ul
Java;
9 VSpace, HSpace definii spaiul (n pixeli) din jurul
applet-ului.
Figura 11.40
Figura 11.41
Remarci:
9 Selectai tag-ul <APPLET>, deschidei panoul Reference i citii informaiile
care se afieaz. Utilizai meniul derulant Description pentru a vizualiza
atributul Code.
9 Citii Conversaia 11, paragraful HTML 4 Inserai un applet Java (Liviu

570
Figura 11.42
7. Executai clic pe applet pentru a deschide mini-programul din

spatele butonului.
Metoda 2

(Applet).
Figura 11.43
Dreamweaver MX Inserai 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 inserm n pagina Web un applet Test.class, care afieaz
numrul de apsri ale unui buton.
Metoda 2
1. Executai clic n locul n care dorii s fie inserat applet-ul Java.
pe butonul (Applet), figura 11.44.
Figura 11.44
3. n caseta de dialog Select File executai urmtoarele aciuni:
9 selectai fiierul Test.class;
4. n panoul Properties, n zonele: Applet, W i H, Code, Base,

Align, Sec, VSpace i HSpace, parametrizai applet-ul pe care
l-ai inserat (vezi Dreamweaver 4 workspace).
Figura 11.45

572
Figura 11.46
Remarc. Executai clic pe applet.
Dreamweaver 4 Inserai obiecte care necesit un

workspace plugin
n afar de text i imagini, putei de asemenea insera n paginile
dumneavoastr Web fiiere multimedia (sunet, video, animaie ). Nu
uitai ns c browser-ul nu tie s interpreteze dect 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
su programe speciale cunoscute sub numele de plugin.
Remarc. Dreamweaver 4 workspace conine obiecte multimedia(vezi panoul Insert) pe

care le putei insera n paginile dumneavoastr Web. Nu uitai de site-ul Macromedia
care dispune de obiecte multimedia suplimentare pe care le putei descrca i instala!
Inserai un fiier sunet

Pentru a insera un fiier sunet cu Dreamweaver 4 workspace, folosii
9 Metoda 1 Meniul Insert, via Media Plugin;
9 Metoda 2 Panoul Insert, categoria Media.
Iat cum procedai pentru a insera n pagina dumneavoastr Web, un

fiier sunet, tada.wav (calea C:\Windows\Media).
573
Metoda 1
1. Executai clic n zona n care dorii s fie inserat fiierul sunet.
2. Executai clic pe Insert Media Plugin (fiierul 11.47).
Figura 11.47

3. n caseta de dialog Select File, executai urmtoarele aciuni
(figura 11.48):
9 selectai fiierul audio, tada.wav;
Figura 11.48
574
Remarc. Gsii i alte fiiere de sunet cu care s exersai! Succes!
4. n inspectorul Properties (figura 11.49), parametrizai fiierul,
dup cum urmeaz:
9 n zona Plugin introducei sunet;
9 n zonele W i H introducei valoarea 150;
9 n zona Src introducei calea de acces;
9 n zona PlgURL indicai site-ul Web din care utilizatorii

pot descrca plugin-ul;
9 n zonele Align i VSpace,
HSpace i Border formatai (dup caz!) obiectul plugin;
9 n zona Parameters introducei parametrii LOOP i

PLAYCOUNT cu valoarea 5.
Figura 11.49
Remarci:
9 Oferii vizitatorilor site-ului dumneavoastr controlul privind redarea sau nu a
unui sunet. O pagin Web care conine 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 Selectai tag-ul <EMBED>, deschidei panoul Reference i citii informaiile
care se afieaz.
9 Citii Conversaia 11, paragraful: HTML 4 Inserai un fiier sunet pentru
Internet Explorer (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti,
2003).
6. Vizualizai pagina Web n Internet Explorer (figura 11.51).

Ascultai sunetul muzicii!
Figura 11.51
Metoda 2

(Plugin), figura 11.52.
Figura 11.52
Inserai un fiier video

Pentru a insera un fiier video n pagina dumneavoastr Web cu
576
Dreamweaver 4 workspace, folosii una din metodele cu care ai inserat
un fiier sunet.
Iat cum procedai pentru a insera n pagina dumneavoastr Web, un

fiier video, MrBean.avi.
Metoda 2
1. Executai clic n zona n care dorii s inserai fiierul video.
2. n panoul Insert, categoria Media executai clic pe butonul

(Plugin), figura 11.53.
Figura 11.53

9 selectai fiierul video MrBean.avi;
4. n inspectorul Properties, parametrizai fiierul, ca n figura

11.54.
Figura 11.54

577
Figura 11.55
Remarc. Citii Conversaia 11, paragraful HTML 4 Inserai un fiier video (Liviu
6. Vizualizai pagina Web ntr-un browser (figura 11.56). Cum v

place?
Figura 11.56
Inserai obiecte care necesit un

Dreamweaver MX
workspace plugin
Inserai un fiier sunet

Pentru a insera un fiier sunet n pagina Web cu Dreamweaver MX,
578
Iat cum procedm pentru a insera n pagina Web un fiier sunet,

tada.wav (acelai pe care l-ai inserat cu Dreamweaver 4 workspace) din
folder-ul C:\Windows\Media.
Metoda 2
1. Executai clic n zona n care dorii s fie inserat fiierul sunet.
pe butonul (Plugin).
Figura 11.57
3. n caseta de dialog Select File, selectai fiierul audio tada.wav,

dup care executai clic pe butonul OK.
4. n panoul Properties, parametrizai fiierul ca n figura 11.58.
Figura 11.58

579
Figura 11.59
6. Vizualizai pagina Web n Internet Explorer. Ascultai sunetul

muzicii!
Figura 11.60
Inserai un fiier video

Pentru a insera n pagina Web un fiier video cu Dreamweaver MX
Metoda 2
1. Executai clic n zona n care dorii s fie inserat fiierul video.

580
pe butonul (Plugin).

3. n caseta de dialog Select File selectai fiierul video
MrBean.avi, dup care executai clic pe butonul OK.
4. n inspectorul Properties (vei regsi aceleai atribute ca i n

cazul sunetelor!) completai zonele afiate (figura 11.61) dup
modelul sunetelor.
Figura 11.61
Figura 11.62
581
6. n panoul Properties, executai clic pe butonul
pentru a testa coninutul multimedia.
7. Vizualizai pagina Web ntr-un browser (figura 11.63). Cum v

place?
Figura 11.63
Aplicaii
Creai o legtur hipertext ctre fiierul sunet (audio) extern: tada.wav.

Textul legturii este Ascultai sunetul muzicii!
1. Selectai textul legturii.
9 Link introducei calea de acces ctre fiierul sunet extern;
9 Target alegei n meniul derulant opiunea _blank.

582
Figura 11.64
Figura 11.65
4. Vizualizai pagina Web ntr-un browser (figura 11.66). Ascultai

sunetul muzicii! Cum v place?
Figura 11.66
Remarc. Executai clic pe textul legturii.

Creai o legtur hipertext ctre fiierul video extern: MrBean.avi. Textul
legturii este: Vizionai secvena video.
583
Dreamweaver MX Tem
Testai-v cunotinele
1. Cum inserai animaii Flash i Shockwave cu Dreamweaver?
2. Descriei o metod de inserare a unui text n format Flash cu

Dreamweaver.
3. Cum inserai data zilei cu Dreamweaver?
4. Inserai un applet Java cu Dreamweaver.
5. Descriei pe scurt metodele de inserare a fiierelor sunet i video

(obiecte care necesit un plugin) cu Dreamweaver MX workspace.
Vizitai site-urile
9 www.verisgn.com
9 www.flashkit.com
9 www.werehere.com
Conversaia 12
Creai cadre cu Dreamweaver MX
f Dreamweaver MX Apreciai cadrele Dreamweaver
f Dreamweaver 4 workspace, MX workspace Creai cadre care se
afieaz n coloane
f Dreamweaver 4 workspace, MX workspace Inserai o pagin (X)HTML
ntr-un cadru
f Dreamweaver 4 workspace , MX workspace Creai cadre care se
afieaz n linii
f Dreamweaver 4 workspace, MX workspace Salvai setul de cadre
f Dreamweaver 4 workspace, MX workspace Numii un cadru
f Dreamweaver 4 workspace , MX workspace Creai o legtur (link) ctre
un cadru
f Dreamweaver 4 workspace , MX workspace Formatai bordurile cadrelor
f Dreamweaver 4 workspace , MX workspace Controlai prezena sau
absena barelor de defilare ale cadrelor
Dreamweaver MX Apreciai cadrele Dreamweaver
Cadrele Dreamweaver sunt mult mai uor de construit dect cadrele

(X)HTML.
586
Problema cea mai important (att pentru cadrele (X)HTML ct i pentru
cadrele Dreamweaver) rmne incompatibilitatea acestora cu vechile
navigatoare sau cu navigatoarele care nu afieaz dect text.
Aplicaie
Accesai site-ul: www.ReelDirectory.com (figura 12.1)
Figura 12.1
Analizai modul de structurare al cadrelor i nu doar att!
Remarci:
9 Nu utilizai cadre numai de plcerea de a utiliza cadre.
9 Nu afiai bordurile cadrelor.
9 Nu utilizai cadre atunci cnd tabelele sunt mai indicate.
9 Nu folosii cadre imbricate (nested).
9 Creai o alternativ pentru vizitatorii care posed un browser incapabil s
afieze cadrele. Folosii mesajul Acest site utilizeaz cadre i necesit un
navigator capabil s le afieze.
9 Nu folosii cadrele atunci cnd creai link-uri ctre alte site-uri.
587
Dreamweaver 4 Creai cadre care se afieaz n

workspace coloane
Dreamweaver permite crearea cadrelor prin divizarea ferestrei

navigatorului n ferestre de dimensiuni mai mici, n care se afieaz
pagini Web individuale. Setul de cadre este un fiier HTML care conine
informaiile necesare pentru construcia cadrelor. ntr-un cadru putei s
ncrcai o pagin Web existent sau s creai o nou pagin Web.
Putei diviza (fraciona) fereastra Document n dou pri: stnga-

dreapta (vertical) sau sus-jos (orizontal), ntr-un mod destul de simplu.
Pentru a crea cadre care se afieaz 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 crem dou cadre: unul la stnga, cellalt la dreapta prin
divizarea ferestrei unui navigator n coloane (cadre n coloan).
Metoda 1
2. Executai 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 stnga i altul la dreapta (vezi figura 12.3).
Figura 12.3
Remarci:
9 Coninutul paginii este deplasat (stnga/dreapta) n funcie de comanda
aleas: Split Frame Left / Split Frame Right.
9 Putei continua divizarea cadrelor via Modify Frame Set pentru a obine
cadre imbricate.
9 Putei continua prin a modifica proprietile cadrelor (bordura, dimensiune,
opiuni de defilare i redimensionare etc.)
589
9 Putei continua introducnd: text, imagini, tabele etc. n fiecare din cadrele pe
care le-ai creat.
9 Putei salva fiierul dumneavoastr.
9 Dac ai parcurs aceste etape cu titlu de antrenament, nu salvai deocamdat
setul de cadre pe care l-ai creat. Executai clic pe File Close iar atunci cnd
Dreamweaver v ntreab dac dorii s salvai modificrile efectuate
rspundei prin No.
3. Analizai codul surs HTML generat (figura 12.4).
Figura 12.4
Remarci:
9 Selectai tag-urile <FRAMESET>, <FRAME>, <NOFRAMES>, deschidei
panoul Reference i citii informaiile care se afieaz.
9 Utilizai meniul derulant Description pentru a vizualiza atributul cols al tag-ului
<FRAMESET>.
9 Citii Conversaia 12, paragraful HTML4 Creai cadre care se afieaz n
coloane (fixe, dinamice) (Liviu Dumitracu, (X)HTML, Editura Universitii din
Ploieti, 2003).
Figura 12.5
590
Metoda 2
2. n panoul Insert, alegei categoria Frames (figura 12.6).
Figura 12.6
Remarc. Panoul Frames conine seturi de cadre predefinite pe care le putei insera n
paginile dumneavoastr, adaptndu-le eventual printr-un reglaj fin.
3. Executai clic pe pictograma (Right) sau tragei-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 salvai fiecare fiier n parte (File
Save Frameset).
591
4. Analizai codul surs HTML generat.
5. Vizualizai pagina Web ntr-un browser; comentai rezultatul

obinut.
Metoda 3
2. Executai clic pe Insert Frames Right (figura 12.8).
Figura 12.8
3. Salvai setul de cadre (File Save Frameset).
Remarc. Metoda 3 utilizeaz un set de cadre predefinit.

592
Metoda 4
1. Vizualizai chenarele cadrelor via View Visual Aids Frame

Borders (figura 12.9).
Figura 12.9
Remarc. n jurul paginii Web se afieaz un set de chenare (figura 12.10).
Figura 12.10
593
2. Tragei cu mouse-ul de chenarul cadrului din stnga pentru a
crea cele dou cadre: unul la stnga, altul la dreapta (figura
12.11).
Figura 12.11
3. Salvai setul de cadre.
Dreamweaver MX Creai cadre care se afieaz n

workspace coloane
Pentru a crea cadre care se afieaz n coloane, cu Dreamweaver MX

workspace , folosii una din metodele prezentate mai jos:

594
Iat cum crem cu Dreamweaver MX workspace dou cadre care se
afieaz n coloane (cadre n coloan).
Metoda 2
2. n grupul de panouri Insert, subpanoul Frames, executai clic
pe butonul setului de cadre predefinit (Right Frame), figura

12.12.
Figura 12.12
3. Analizai codul surs XHTML generat (figura 12.13).
Figura 12.13
Remarc. Citii Conversaia 12, paragraful XHTML Creai cadre care se afieaz n
coloane (fixe, dinamice), (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti,
2003).

595
Figura 12.14
Dreamweaver 4 Inserai o pagin HTML ntr-un

workspace cadru
Putei introduce informaii ntr-un cadru deschiznd un document HTML

existent. Dac dorii s introducei text direct de la tastatur, procedai
ca n cazul paginilor tradiionale.
Iat cum adugm n dou cadre (vezi paragraful Creai cadre n

coloane) informaiile din paginile a.html i b.html (vezi aplicaia HTML
Structurai site-ul cu ajutorul cadrelor), (Liviu Dumitracu, (X)HTML,
Editura Universitii din Ploieti, 2003).
1. Executai clic pe Window Others Frames.
Remarc. Se afieaz panoul Frames.
2. n panoul Frames care se afieaz, selectai cadrul din stnga

paginii, executnd clic n interiorul acestuia (figura 12.15).
Figura 12.15
596
Remarc. Proprietile cadrului selectat sunt evideniate n inspectorul Properties.
3. n inspectorul Properties, executai clic pe pictograma Browse

for File ( ), figura 12.16.
Figura 12.16
Remarc. Se afieaz caseta de dialog Select HTML File.
4. n caseta Select HTML File, care se afieaz executai clic pe:
9 a.htm;
9 butonul OK.
Remarc. Dreamweaver afieaz documentul HTML (a.html) n cadrul din stnga paginii.
Figura 12.17
6. Selectai cel de-al doilea cadru (din dreapta paginii).
7. n inspectorul Properties, executai clic pe icon-ul (Browse

for File).
8. n caseta de dialog Select File HTML, executai clic pe:
9 b.htm;
9 butonul OK.
Remarc. Dreamweaver 4 workspace afieaz documentul b.html n cadrul din dreapta

paginii.
597
Figura 12.18
Figura 12.19
Remarci:
9 Folosii comanda Open in Frame (via File) pentru a deschide, n cadrul unde
este localizat cursorul, o pagin Web existent.
9 Atenie la ncrcarea ntr-un cadru a unei pagini Web care conine cadre!
Exist riscul ca aceste cadre s apar prea mici!
Dreamweaver MX Inserai o pagin XHTML ntr-un

workspace cadru
Iat cum inserm cu Dreamweaver MX workspace paginile a.html i
b.html n dou cadre n coloan, aceleai pe care le-ai creat cu
598
1. Executai clic pe Window Others Frames (figura 12.20).
Figura 12.20
2. n panoul Frames care se afieaz, selectai cadrul din stnga

paginii, executnd clic n interiorul acestuia (figura 12.21).
Figura 12.21
599
3. n panoul Properties, executai clic pe pictograma (Browse
for File), figura 12.22.
Figura 12.22
4. n caseta de dialog Select HTML File, care se afieaz executai

9 selectai folder-ul care conine fiierul a.htm;
9 executai clic pe a.htm;
Figura 12.23
600
Remarc. Dreamweaver afieaz documentul HTML (a.html) n cadrul din stnga paginii
(figura 12.24).
Figura 12.24
Figura 12.25
6. Selectai cel de-al doilea cadru (din dreapta paginii).
7. n inspectorul Properties, executai clic pe icon-ul (Browse

for File).
8. n caseta de dialog Select File HTML, executai clic pe:
9 b.htm;
9 butonul OK.
601
Remarc. Dreamweaver MX workspace afieaz fiierul b.html n cadrul din dreapta
paginii.
Figura 12.26
Figura 12.27
Dreamweaver 4 Creai cadre care se afieaz n linii

workspace
Putei de asemenea diviza orizontal fereastra Document pentru a crea

dou cadre (n linii): unul sus i altul jos.
602
Vom folosi aceleai metode pe care le-am aplicat la crearea cadrelor
coloan, dar cu modificrile prezentate mai jos:
Iat cum procedai 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. Executai clic pe Modify FrameSet Split Frame Up.
Metoda 2 Panoul Insert
3. Executai clic pe pictograma (Top) sau tragei-o cu

mouse-ul n Document, pentru a o aplica.
Metoda 3
2. Executai clic pe Insert Frames Top.
Metoda 4
2. Tragei 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 afiate: unul sus, altul jos.
603
Figura 12.28
Remarc. Diferena dintre Split Frame Left i Split Frame Right sau Split Frame Top i
Split Frame Bottom nu apare pentru moment. n consecin, putei alege oricare din
cele dou comenzi.
Dreamweaver MX Creai cadre care se afieaz n linii

workspace
Pentru a crea cadre care se afieaz n linii, cu Dreamweaver MX

workspace, folosii una din metodele prezentate n cadrul paragrafului
Dreamweaver 4 workspace Creai cadre care se afieaz n linii.
Iat cum procedai pentru a crea cu Dreamweaver MX workspace dou

cadre: unul sus altul jos, ntr-o pagin Web vid.
Metoda 1
2. Executai clic pe Modify FrameSet Split Frame Up (figura

12.29).
604
Figura 12.29
Figura 12.30

605
Figura 12.31
Dreamweaver 4 Salvai setul de cadre

workspace
La primul antrenament cu cadre (vezi aplicaiile: Creai cadre care se

afieaz n coloane i Creai cadre care se afieaz n linii) v-am cerut
s nu salvai cele dou cadre (stnga/dreapta i sus/jos) i setul de
cadre corespunztor.
Iat care este procedura de salvare a celor trei fiiere HTML (vezi
paragraful Creai cadre care se afieaz n coloane).
1. Executai clic pe File Save All (figura 12.32).
Figura 12.32
606
Remarci:
9 Se afieaz caseta de dialog Save As.
9 Este prima caset de dialog care se afieaz. Numrul total de casete de
dialog depinde de numrul de cadre definite.
2. Dai un nume fiierului: set_de_cadre.htm (figura 12.33).
Figura 12.33
Remarci:
9 Primul fiier pe care-l salvai reprezint fiierul frameset, adic fiierul care
indic ierarhia cadrelor.
9 Fiierul frameset trebuie s poarte un nume semnificativ (set_de_cadre sau s
etc.) pentru a v reaminti ori de cte ori este nevoie c aceasta este pagina
care conine setul de cadre.
3. Salvai fiierul n folder-ul Site.
Remarc. Fiierul set_de_cadre.html a fost salvat n folder-ul Site i o nou caset de

dialog Save As se afieaz.
4. Dai un nume fiierului: stanga.htm.
Acest fiier identific unul din cadrele (stnga) documentului

dumneavoastr. Putei uor s-l reperai ntruct Dreamweaver l
selecteaz.
5. Executai clic pe Save.
Fiierul cadru (stanga.html) este salvat i o nou caset de dialog se

afieaz.
6. Dai un nume fiierului: dreapta.htm.
7. Executai clic pe Save.
Remarci:
9 Nu uitai s privii documentul n vederea identificrii cadrului pe care
Dreamweaver se pregtete s-l salveze. Conturul su este selectat.
9 Odat cu salvarea n totalitate a cadrelor nici o caset de dialog Save As nu
se va mai afia.
9 Uneori, nu dorii s salvai toate fiierele o singur dat. Pentru a salva un
singur cadru, poziionai cursorul n cadrul respectiv i executai clic pe File
Save Frame As. Dreamweaver nu salveaz dect fiierul cadrului respectiv.
9 Pentru a nu salva dect pagina care definete setul de cadre (pagina de
cadre) selectai toate cadrele executnd clic pe una din borduri, apoi executai
clic pe File Save all frames.
607
9 Nu uitai c pagina de cadre nu se afieaz n nici un cadru: ea se limiteaz la
definirea zonei de afiaj a cadrelor, a poziiei i a dimensiunii acestora.
9 Titlul pe care l vedei n bara de titlu a browser-ului este titlul din pagina care
conine setul de cadre. Pentru a aduga un titlu selectai Page Properties (via
Modify) n timp ce este selectat setul de cadre. Tastai un titlu n caseta de
titlu.
Dreamweaver MX Salvai setul de cadre

workspace
Iat cum procedai pentru a salva setul de cadre (fiierul frameset) i

cele dou cadre coloan (stnga/dreapta) pe care le-ai creat n
paragraful Dreamweaver MX workspace - Creai cadre care se afieaz
n coloane.
1. Selectai setul de cadre.
2. Executai clic pe File Save All.
3. n caseta de dialog Save As, care se afieaz, executai

9 selectai folder-ul (Site) n care urmeaz s salvai cele trei

fiiere;
9 n zona File name introducei set_de cadre.htm.
Figura 12.34
608
Remarc. Fiierul set_de_cadre.htm a fost salvat n folder-ul Site i o nou caset de
dialog Save As se afieaz.
4. n caseta de dialog Save As executai urmtoarele aciuni:
9 n zona File name introducei stanga.htm;

Fiierul cadru (stanga.htm) este salvat i o nou caset de dialog Save

As se afieaz.
5. n caseta de dialog Save As executai urmtoarele aciuni:
9 n zona File name introducei dreapta.htm;
Dreamweaver 4 Numii un cadru

workspace
Dreamweaver numete n mod automat un cadru: leftFrame, topFrame,

mainFrame. Putei, desigur, s pstrai acest nume. Dar, cum
dumneavoastr avei personalitate, este bine s acionai n consecin!
Iat cum procedm pentru a atribui un nume cadrelor. Vom utiliza

fiierul set_de_cadre.htm, pe care l-am creat i salvat n aplicaia
precedent.
1. Deschidei fiierul set_de_cadre.html (figura 12.35).
Figura 12.35
609
2. Afiai panoul Frames, via Window Other Frames (figura
12.36).
Figura 12.36
Remarc. Panoul Frames este o reprezentare n miniatur a paginii care conine cele
dou cadre (verticale).
3. Asigurai-v c inspectorul Properties este deschis (via Window

Properties).
4. Executai clic n interiorul cadrului din dreapta care urmeaz a fi

numit (figura 12.37).
Figura 12.37
Remarci:
9 Inspectorul Properties afieaz proprietile cadrului pe care l-ai selectat.
Panoul Frames permite selectarea unui singur cadru sau a unui singur set de
cadre o dat.
9 Putei modifica numele cadrului (zona Frame Name) i schimba adresa URL
(zona SRC). Putei configura totodat derularea cadrelor i atributele
chenarelor.
5. n inspectorul Properties, n zona Frame Name, introducei:

CadruDreapta (figura 12.38).
Figura 12.38
610
6. Salvai fiecare fiier n parte.
Figura 12.39
Remarc. Putei salva fiecare fiier n parte sau tot setul de cadre.
Dreamweaver MX Numii un cadru

workspace
Iat cum procedm pentru a atribui un nume cadrelor cu Dreamweaver

MX workspace. Vom utiliza fiierul set_de_cadre.htm, pe care l-am creat
i salvat n paragraful Dreamweaver MX workspace Salvai setul de
cadre.
1. Executai clic pe Window Others Frames (figura 12.40).
Figura 12.40
611
2. Executai 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, introducei: Cadru

Dreapta (figura 12.42).
Figura 12.42
Remarc. Numele cadrului apare n panoul Frames.
Figura 12.43
612
Dreamweaver 4 Creai o legtur (link) ctre un

workspace
cadru
n Dreamweaver este foarte simplu s creai o legtur ctre un alt
cadru.
Iat cum crem un link din cadrul din stnga (Pagina 1) ctre Pagina 4
(figura 12.44) care se va deschide n cadrul principal (Pagina 3).
Figura 12.44
Remarc. n cadrul din stnga am adugat text pentru legturile ctre Paginile 4, 5 i 6.
1. Selectai textul Pagina 4 care urmeaz a fi convertit n legtur

(link) ctre Pagina4.html (figura 12.45).
Figura 12.45
613
2. n inspectorul Properties, executai clic pe pictograma n form
de dosar, (Browse for File).
3. Executai dublu clic pe fiierul int: pagina4.html.
Remarc. Numele fiierului se afieaz n inspectorul Properties, n zona Link (figura

12.46).
Figura 12.46
4. n inspectorul Properties, n zona Target, n meniul derulant

(d), alegei mainFrame numele cadrului n care dorii s se
afieze pagina4.html.
Remarci:
9 Dreamweaver listeaz toate cadrele numite. Noi am ales mainFrame.
9 Putei 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 aceeai fereastr sau n acelai cadru care
conine legtur; aceasta este valoarea prestabilit);
_parent (deschide documentul n setul de cadre printe);
_blank (deschide documentul ntr-o nou fereastr a browser-ului).
9 Lista de inte nu este activ dect dac selectai textul de legtur.

614
Figura 12.48
Remarc. Citii Conversaia 12, paragraful HTML4 Creai o legtur (link) ctre un
cadru (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Figura 12.49
Remarc. Dac executai clic pe textul de legtur Pagina 4, se afieaz n cadrul

principal (mainFrame) al setului de cadre pagina HTML: Pagina 4.
615
Dreamweaver MX Creai o legtur (link) ctre un

workspace
cadru
Iat cum crem un link din cadrul din stnga (Pagina 1) ctre Pagina 4,
care se va deschide n cadrul principal (Pagina 3). Vom utiliza setul de
cadre din paragraful Dreamweaver 4 workspace Creai o legtur
(link) ctre un cadru.
1. Selectai Pagina 4 textul care urmeaz a fi convertit n

legtur ctre Pagina4.html.
2. n inspectorul Properties, executai clic pe (Browse for File).
3. n caseta de dialog Select File, care se afieaz, executai

9 selectai folder-ul Site;
9 executai clic pe fiierul int, pagina4.htm;
Figura 12.50
616
4. n panoul Properties, n zona Target, n meniul derulant alegei
mainFrame, numele cadrului unde dorii s se afieze
pagina4.html (figura 12.51).
Figura 12.51
Figura 12.52
Remarc. Citii Conversaia 12, paragraful XHTML Creai o legtur (link) ctre un
cadru (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Figura 12.53
617
Dreamweaver 4 Formatai bordurile cadrelor

workspace
Pentru a deveni performant n utilizarea cadrelor, va trebui s modificai,

nu de puine ori, proprietile cadrelor dumneavoastr.
n acest sens, vei configura atributele de derulare i redimensionare

ale cadrelor, vei configura chenarele cadrelor, vei umbla la culoarea
sau bordura unui cadru etc.
Pentru accesarea tuturor acestor opiuni, utilizai panoul Frames via

Window Frames.
Iat cum modificai grosimea i culoarea chenarului setului de cadre din

aplicaia Creai cadre care se afieaz n coloane.
1. Executai 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 afind atributele setului
de cadre n inspectorul Properties este aceea de selectare a tag-ului <frameset> n
selectorul de tag-uri. Selectorul de tag-uri afieaz tag-ul <frameset> atunci cnd este
selectat un cadru din interiorul setului de cadre.
9 Borders selectai Yes n meniul Borders;

618
9 Border width introducei valoarea 10 (grosimea bordurii);
9 Border Color selectai culoarea Blue (#0000FF).
Figura 12.55
Remarc. n fereastra Document din Dreamweaver, putei vedea imediat modificrile

efectuate.
Figura 12.56
Remarci:
9 Selectai tag-ul <FRAMESET> i deschidei panoul Reference. Utilizai meniul
derulant Description pentru a vizualiza atributul border.
9 Citii Conversaia 12, paragraful HTML4 Formatai bordurile cadrelor (Liviu
Figura 12.57
Aplicaie
Suprimai bordura cadrelor.

619
n inspectorul Properties, n:
9 meniul Borders (via Borders) selectai No.
9 zona Border Width introducei valoarea 0 (zero).
Remarci:
9 Dac nu dorii s se afieze chenarele, asigurai-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
Formatai bordurile cadrelor
Pentru a delimita ct mai bine cadrele, modificai dimensiunea i

culoarea bordurilor.
Iat cum procedai pentru a modifica grosimea (10 pixeli) i culoarea

(blue) bordurii setului de cadre pe care l-ai creat n aplicaia Creai
cadre care se afieaz n coloane (Paragraful Dreamweaver MX
workspace Creai cadre care se afieaz n coloane).
9 Borders executai clic pe i selectai Yes;
9 Border width introducei o valoarea 10 (grosimea

chenarului);
9 Border Color selectai culoarea Blue (#0000FF).
Figura 12.58

620
Figura 12.59
Remarc. Citii Conversaia 12, paragraful XHTML Formatai bordurile cadrelor (Liviu
Figura 12.60
Controlai prezena sau absena

Dreamweaver 4
workspace barelor de defilare ale cadrelor
Cu Dreamweaver 4 workspace putei controla ntr-un mod simplu

prezena/absena barelor de defilare (derulare) orizontale, verticale din
cadrele dumneavoastr.
621
Iat cum configurai atributele de defilare ale cadrului Pagina 2 din
aplicaia Creai cadre care se afieaz n coloane.
1. Selectai cadrul Pagina 2 (figura 12.61).
Figura 12.61
2. n inspectorul Properties, n zona Scroll, executai clic pe

butonul d i selectai Auto n meniul Scroll pentru a activa
barele de defilare n cazul n care coninutul cadrului este mai
mare dect ceea ce se vede n fereastra navigatorului (figura
12.62).
Figura 12.62
Remarci:
9 Atunci cnd este selectat un cadru, inspectorul Properties afieaz patru
opiuni: Yes, No, Auto, Default pentru barele de defilare.
9 Yes activeaz barele de defilare (orizontale, verticale), indiferent de situaie.
9 No dezactiveaz barele de defilare, indiferent de situaie.
9 Auto activeaz numai barele de defilare (orizontale sau verticale) necesare.
Figura 12.63
622
Remarc. Citii Conversaia 12, paragraful HTML4 Controlai prezena sau absena
barelor de defilare (Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003).
Figura 12.64
Aplicaii
mpiedicai redimensionarea unui cadru.
Iat cum procedm pentru a modifica opiunea de redimensionare a unui cadru.
1. Selectai cadrul Pagina 2.
2. n inspectorul Properties, n zona No Resize (fr redimensionare)

selectai 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.
Definii coordonatele spaiului dintre bordura cadrului i coninutul acestuia.
2. n inspectorul Properties, n zonele Margin Width i Margin Height

introducei valoarea 2 pixeli (sugestia noastr!), figura 12.68.
Figura 12.68
Remarci:
9 Cu ajutorul cadrelor putei controla n mod precis dimensiunile imaginii
(spaiul dintre bordura i coninutul cadrului).
9 Dac dorii s suprimai cele dou margini introducei valoarea 0 (zero) n cele
dou zone (Marge Width i Marge Height).
Modificai dimensiunile cadrelor
Iat care este procedura pe care trebuie s-o urmai. Vom apela la aplicaia
Creai cadre n coloane.
1. Executai clic pe bordura unui cadru pentru a selecta setul de cadre

(figura 12.69).
624
Figura 12.69
9 RowCol Selection executai clic pe cadrul Pagina 2;
9 Column via Value introducei valoarea 150;
9 Units selectai Pixels.
Figura 12.70
Remarc. Inspectorul Properties afieaz n zona Units urmtoarele uniti: 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 pn la dimensiunile dorite. Cu
aceast metod putei i suprima un cadru, glisnd bordura pn la marginea ferestrei.
Folosii pentru modificarea dimensiunii cadrelor i celelalte uniti (zona Units
din inspectorul Properties): Percent, Relative.
Dreamweaver MX Controlai prezena sau absena

workspace barelor de defilare ale cadrelor
Iat cum activm barele de defilare (orizontale/verticale) ale cadrului

Pagina 2, pe care l-ai creat n aplicaia Creai cadre care se afieaz n
coloane (Paragraful Dreamweaver MX workspace Creai cadre care
se afieaz n coloane).
1. Selectai cadrul Pagina 2.
2. n inspectorul Properties (figura 12.73), n:
9 zona Scroll executai clic pe butonul d;
9 meniul Scroll selectai Auto.
Figura 12.73

626
Figura 12.74
Remarc. Citii Conversaia 12, paragraful XHTML Controlai prezena sau

absena barelor de defilare (Liviu Dumitracu, (X)HTML, Editura Universitii din
Ploieti, 2003).
Figura 12.75
Aplicaii
Folosii un text de nlocuire (alternativ pentru cadre) Ne pare ru c trebuie

s renunai la cadre! n situaia n care browser-ul dumneavoastr este
incapabil s afieze cadrele!
2. Executai clic pe Modify Frameset Edit Noframes Content.
3. Introducei textul alternativ care urmeaz s se afieze n absena

cadrelor (figura 12.76).
627
Figura 12.76
Modificai opiunea de redimensionare a unui cadru.
Indicaie. n panoul Properties, n zona No Resize, selectai caseta de validare.
Modificai coordonatele (2 pixeli!) spaiului dintre bordura cadrului i

coninutul acestuia.
Indicaie. n panoul Properties, n zonele Margin Width i Margin Height

introducei valoarea 2.
Modificai dimensiunile cadrelor (vezi aceeai aplicaie, paragraful:

Dreamweaver 4 workspace Controlai prezena sau absena barelor de
defilare ale cadrelor).
628
Dreamweaver MX Tem
Testai-v cunotinele
1. Prezentai pe scurt una din metodele Dreamweaver de creare cadre
care se afieaz n coloane/linii.
2. Cum inserai o pagin HTML ntr-un cadru?
3. Descriei pe scurt procedura Dreamweaver de creare a unei legturi

(link) ctre un cadru.
4. Prezentai pe scurt procedura Dreamweaver de formatare a bordurilor

cadrelor.
5. Cum procedai n situaia n care browser-ul dumneavoastr este

incapabil s afieze cadrele.
6. Cum modificai opiunea de redimensionare a unui cadru?
Vizitai site-urile
9 http://metabolicnutrition.com
9 www.terespond.com
9 www.economist.com
9 www.macromedia.com/90/dreamweaver_tutorials
Conversaia 13
Creai straturi cu Dreamweaver MX
f Dreamweaver 4 workspace, MX workspace Creai un strat (layer)
f Dreamweaver 4 workspace, MX workspace Modificai dimensiunile i
poziia unui strat. Aplicaii
f Dreamweaver 4 workspace, MX workspace Modificai vizibilitatea i
ordinea de suprapunere a straturilor. Aplicaii
f Dreamweaver 4 workspace, MX workspace Controlai coninutul unui
strat
f Dreamweaver 4 workspace, MX workspace Creai straturi imbricate
(nested)
Dreamweaver 4
workspace Creai un strat (layer)
Dreamweaver permite crearea ntr-un mod simplu i direct a trei funcii
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 poziionare a obiectelor ntr-o pagin Web (CSS-P pentru
W3C; n prezent ele sunt integrate n CSS 2), care aparin marii familii
CSS (foi de stiluri n cascad).
Straturile permit suprapunerea elementelor unei pagini Web. Ele pot

conine aceleai elemente ca i paginile Web: text, imagini, animaie
Flash etc. ntruct straturile sunt transparente, elementele paginii
rmn, n anumite limite, vizibile.
Poziia 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 poziia orizontal fa de marginea din stnga a

stratului;
y reprezint poziia 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 poziie absolut: stratul este plasat n
raport cu marginile paginii i este poziionat deasupra coninutului
paginii.
Remarci:
9 Pentru a poziiona un strat, folosii dou tipuri de elemente HTML: elementul
<div> recunoscut de browser-e i de standardul W3C; elementul <layer>
specific navigatorului Netscape (recunoscut numai de ctre acesta).
9 Pentru a parametriza elementul HTML <DIV>, utilizai Edit Preference
categoria Layers (figura 13.2).
Figura 13.2
9 n meniul derulant Tag, alegei DIV.

9 n zonele: Visibility, Width, Height, Background Color, Background Image i
Nesting, nu modificai parametrii afiai.
9 n zona Netscape 4 Compatibility, activai opiunea Add Resize Fix when
Inserting Layer (pentru a optimiza paginile care conin straturi).
Pentru a crea un strat (layer) cu Dreamweaver 4 workspace , folosii

9 Metoda 1 Meniul Insert, via Layer;

632
Inserai un strat
Iat cum procedai pentru a insera un strat peste coninutul paginii
existente.
Metoda 1
1. Executai clic n locul n care dorii s fie inserat layer-ul.
2. Executai clic pe Insert Layer.
Remarc. Dreamweaver 4 workspace afieaz un layer deasupra tuturor informaiilor

existente (figura 13.3).
Figura 13.3
3. Selectai stratul, executnd clic pe conturul acestuia (figura

13.4)
Figura 13.4
Remarci:
9 Atunci cnd plasai mouse-ul pe conturul stratului, pointer-ul se transform
ntr-o cruce cu patru sgei.
633
9 Cnd stratul a fost selectat, pe perimetrul acestuia apar opt ptrate negre
(mnere).
4. Tragei de mnerele de redimensionare pentru a obine o

dimensiune aproximativ a stratului.
Figura 13.5
Figura 13.6
Aplicaie
Inserai n stratul pe care l-ai definit sigla societii LUMINA BLND.
634
Metoda 2
(Draw Layer) i tragei cursorul (pointer-ul) n form de

cruce n pagina dumneavoastr pentru a aproxima
dimensiunea dorit a stratului (figura 13.7).
Figura 13.7
Aplicaie
Inserai un strat (layer) peste coninutul paginii existente n care urmeaz s

introducei sigla societii LUMINA BLND.
Dreamweaver MX Creai un strat (layer)

workspace
Pentru a crea un strat (layer) cu Dreamweaver MX workspace, folosii

9 Metoda 1 Meniul Insert, via Layer;
Inserai un strat
Iat cum procedai pentru a insera un strat (layer) peste coninutul
paginii existente (figura 13.8).
635
Metoda 2
1. Executai clic n locul n care dorii s fie inserat layer-ul (figura

13.8).
Figura 13.8
pe butonul (Draw Layer), figura 13.9.
Figura 13.9
3. Executai clic pe conturul stratului, pentru a-l selecta (figura

13.10).
Figura 13.10
636
Remarci:
9 Un icon indic prezena unui strat (figura 13.10).
9 Dac icon-ul nu se afieaz atunci, executai clic pe Edit Preference
Categoria Invisible Elements i activai opiunea Anchor Points for Layers.
9 Stratul este inserat n pagin peste celelalte elemente (figura 13.10).
4. Tragei de mnerele de redimensionare pentru a obine o
dimensiune aproximativ a stratului.
Figura 13.11
637
Inserai o imagine ntr-un strat
Iat care este procedura pe care v invitm s-o urmai pentru a insera
imaginea ce reprezint sigla societii LUMINA BLND n stratul pe care
l-ai creat.
1. Executai clic n interiorul stratului.
2. Executai clic pe Insert Image.
Remarc. Se afieaz caseta de dialog Select Image Source.
3. n caseta de dialog Select Image Source executai urmtoarele

9 n zona LOOK in selectai folder-ul care conine imaginea;
9 File Name introducei sigla.jpg;
Figura 13.12

638
Figura 13.13
Figura 13.14
Dreamweaver 4 Modificai dimensiunile i poziia

workspace unui strat
Putei redimensiona i repoziiona un strat dup bunul dumneavoastr
plac.
Iat cum modificm dimensiunile (Width, Height) stratului pe care l-am

creat n aplicaia precedent (width=300; height=200 n loc de 200
respectiv 115 pixeli).
639
1. Selectai stratul pe care dorii s-l redimensionai.
Remarc. Exist mai multe variante de selectare a unui strat:

1. executai clic pe elementul invizibil ( );
sau,
2. executai clic pe conturul stratului;
sau,
3. cnd punctul de inserie se afl n interiorul stratului, executai clic pe ptratul
( ) aflat n colul din stnga sus al stratului (figura 13.15).
Figura 13.15
sau,
4. cnd stratul nu este activat, acionai i meninei apsat tasta Shift i
executai clic oriunde n interiorul stratului.
sau,
5. n paleta Layers, via Window t Layers, zona Name, executai clic pe numele
stratului (pentru moment, Layer 1).
2. Afiai: panoul Layers, Window Others Layers i

inspectorul Properties, (figura 13.16).
Figura 13.16
640
3. n inspectorul Properties, executai urmtoarele aciuni (figura
13.17).
9 n zona Layer ID introducei numele stratului, Demo;

9 n zona L introducei valoarea 50, care reprezint
distana n pixeli, msurat de la
marginea din stnga a paginii la marginea
din stnga a stratului;
9 n zona T introducei valoarea 30, care reprezint
distana n pixeli, msurat de la
marginea de sus a paginii la marginea
superioar a stratului;
9 n zonele W i H introducei valoarea 300, respectiv 200
pixeli;
9 n zona Z Index lsai 1, valoarea afiat care precizeaz
c stratul se gsete dedesubtul celorlalte
(stratul situat cel mai jos n stiva
straturilor).
Figura 13.17
4. Schimbai poziia stratului executnd clic i apoi deplasnd

ptratul din colul din stnga sus al stratului.
Remarc. Dreamweaver repoziioneaz stratul (figura 13.18).

641
Figura 13.18
Figura 13.19
Figura 13.20
642
Aplicaii
Aliniai 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
Indicaie. Alinierea se face n raport cu stratul (din mijloc) selectat. Executai

clic pe Modify t Align t Left sau Right sau Top sau Bottom.
Remarc. Putei s v aliniai straturile utiliznd comenzile Grid (gril), via View t Grid
t Show Grid i View t Rulers t Show. Putei modifica aspectul grilei utiliznd caseta
de dialog Grid Settings.
Transformai straturile din figura 13.22 ntr-un tabel.
Figura 13.22
643
1. Desenai straturile din figura 13.22.
2. Selectai toate straturile.
3. Executai clic pe Modify t Convert t Layers to Table (figura 13.23).
Figura 13.23
Se afieaz caseta de dialog Convert Layers to Table (figura 13.24) care conine
seciunile: Table Layout (machetare tabel) i Layout Tools (instrumente).
Figura 13.24
644
4. n caseta de dialog Convert Layers to Table, activai butonul radio
Most Accurate (figura 13.25).
Figura 13.25
Remarci:
9 Most Accurate (cel mai precis) permite convertirea fiecrui strat ntr-o celul
de tabel, crend attea celule ct este necesar.
9 Smallest: Collapse Empty Cells (cel mai mic: elimin celulele vide) elimin
liniile sau coloanele vide dac acestea se gsesc la o distan egal cu un
numr stabilit de pixeli n raport co o linie/coloan existent.
9 Use Transparent GIFs (utilizeaz fiiere GIF transparente) completeaz ultimul
rnd 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 Modificai dimensiunile i poziia

workspace unui strat
Iat cum modificm dimensiunile (300 * 200 pixeli n loc de 200 * 115
pixeli) i poziia stratului pe care l-ai creat n aplicaia precedent.
1. Selectai stratul pe care dorii s-l formatai (figura 13.28).
Remarci:
9 Asigurai-v c elementele invizibile ale straturilor sunt activate.
9 n pagin, elementele invizibile i bordurile straturilor trebuie s fie afiate.
9 Pentru selectarea unui strat, folosii una din variantele prezentate (vezi
Dreamweaver 4 workspace).
646
Figura 13.28
2. Afiai panoul Layers (figura 13.29), via Window Other

Layer.
Figura 13.29
3. n panoul Properties, parametrizai stratul ca n figura 13.30

(vezi Dreamweaver 4 workspace).
647
Figura 13.30
4. Schimbai poziia stratului, executnd clic i apoi deplasnd

ptratul din colul din stnga sus al stratului.
Remarc. Dreamweaver MX workspace repoziioneaz stratului.
Figura 13.31

648
Figura 13.32
Dreamweaver 4 Modificai vizibilitatea i ordinea

workspace
de suprapunere a straturilor
Putei configura (fr efort!) alte dou caracteristici puternice ale
straturilor: suprapunerea i vizibilitatea.
Iat care este procedura pe care trebuie s-o urmai pentru a configura
suprapunerea (indicele z) i vizibilitatea a dou straturi: sigla (sigla
societii LUMINA BLND un bec de 10 W!) i text (LUMINA
BLND), figura 13.33.
B
Figura 13.33 LUMINA BLND LUMINA BLND
1. Aranjai cele dou straturi (sigla i text) ntr-o poziie

convenabil utiliznd tehnicile prezentate (figura 13.34).
649
Figura 13.34
2. Afiai panoul Layers, via Window t Others Layers (figura

13.35).
Figura 13.35
Remarci:
9 Panoul Layers afieaz toate straturile dintr-o pagin.
9 Numele (name), vizibilitatea ( ) i indicele z (z) sunt uor accesibile n
acest panou.
9 Pentru a verifica vizibilitatea straturilor executai clic n coloana ( ).
9 Pentru a modifica numele straturilor executai dublu clic pe numele acestuia n
coloana Name.
9 Pentru a modifica ordinea de suprapunere a straturilor, executai dublu clic pe
valoarea corespunztoare n coloana z; putei de asemenea glisa (sus/jos)
numele stratului n fereastra panoului Layers.
3. Schimbai ordinea de suprapunere a straturilor executnd clic

pe numele stratului (text) n panoul Layers i apoi glisndu-l
ctre nceputul sau sfritul listei (acolo unde dorii!) 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 afieaz indicele z n dreapta numelui stratului.
9 Panoul Layers afieaz straturile dup valoarea indicelui z, stratul cel mai de
sus avnd indicele z cel mai mare, iar stratul de jos avnd indicele z cel mai
mic.
9 Indicele z poate fi un numr pozitiv sau negativ.
9 Putei configura indicele z n inspectorul Properties, n zona z-index.
9 Putei schimba cu uurin ordinea de suprapunere a straturilor prin
selectarea numelui stratului (n panoul Layers) urmat de tragerea acestuia
ctre nceputul sau sfritul listei de nume.
651
4. Modificai vizibilitatea stratului sigla, executnd clic pe
pictograma (imaginea unui ochi) n panoul Layers (figura
13.38).
Figura 13.38
Stratul sigla se afieaz ca n figura 13.39.
Figura 13.39
Remarci:
9 Putei configura caracteristicile de vizibilitate ale unui strat [visible (vizibil);
hidden (ascuns); inherit (motenire); default (prestabilit)], selectnd
pictograma n form de ochi din stnga stratului sau utiliznd meniul derulant
Vis, via inspectorul Properties t zona Vis.
9 n panoul Layers, ochiul plasat lng un strat este deschis atunci cnd stratul
este vizibil i este nchis atunci cnd stratul este ascuns.
9 Parametrul Inherit (motenire) 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 motenit n majoritatea
browser-elor).
652
Figura 13.40
Figura 13.41
Aplicaie
Mascai stratul sigla din aplicaia precedent. Utilizai inspectorul Properties,

meniul derulant VIS, opiunea hidden.
Dreamweaver MX Modificai 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 procedai pentru a configura suprapunerea i vizibilitatea a
dou straturi: sigla societii LUMINA BLND (un bec de 10 W!) i
textul LUMINA BLND (vezi Dreamweaver 4 workspace).
Metoda 2
1. Aranjai cele dou straturi ntr-o poziie convenabil (figura

13.42).
Figura 13.42
2. Executai clic pe Window Others Layers (figura 13.43).

654
Figura 13.43
3. n panoul Layers, schimbai ordinea de suprapunere a

straturilor executnd clic pe text (zona Name) i apoi glisndu-l
ctre nceputul sau sfritul listei de nume (zona Name), figura
13.44.
Figura 13.44
655
4. Modificai vizibilitatea stratului sigla, executnd clic pe
pictograma n panoul Layers (figura 13.45).
Figura 13.45
Remarc. Stratul sigla se afieaz ca n figura 13.45.

Figura 13.46
Aplicaii
Aplicai o culoare de fond (background), albastr (blue), stratului pe care

l-ai creat.
Indicaie. Folosii zona BgColor din panoul Properties.
Aplicai o imagine de fond (background) stratului pe care l-ai creat.
Indicaie. Folosii zona BgImage din panoul Properties.

656
Dreamweaver 4 Controlai coninutul unui strat

workspace
Pentru a adapta dimensiunea unui strat la coninutul acestuia,

Dreamweaver v propune mai multe soluii.
n inspectorul Properties, n meniul derulant Overflow, alegei una din
opiunile:
9 visible permite mrirea dimensiunii stratului, astfel nct
ntreg coninutul stratului s poat fi afiat;
9 hidden permite mascarea coninutului stratului care
debordeaz.
9 auto pstreaz dimensiunea curent a stratului, astfel nct
coninutul stratului s nu se poat afia dac este mai
mare dect dimensiunea stratului;
9 scroll permite afiarea barelor de defilare atunci cnd
coninutul stratului este mai mic dect dimensiunea
acestuia;
Iat cum procedai pentru a controla coninutul unui strat folosind
opiunea visible din meniul Overflow.
1. Selectai stratul.
2. n inspectorul de proprieti, n meniul derulant Overflow,
alegei opiunea visible (figura 13.47).
Figura 13.47

657
Figura 13.48
Aplicaie
Controlai coninutul stratului pe care l-ai creat, folosind opiunile: scroll,
auto i hidden din meniul derulant Overflow (inspectorul Properties).
Remarc. n Netscape coninutul stratului nu poate fi dect decupat. Valorile de
decupare sunt: T (top); L (left); R (right); B (bottom). Valorile pe care le introducei n
inspectorul Properties, via clip definesc distana de la marginea stratului, i nu de la
marginea paginii.
Dreamweaver MX Controlai coninutul unui strat

workspace
Pentru a controla coninutul unui strat cu Dreamweaver MX, folosii una

din opiunile: scroll, auto, visible, hidden care se afieaz n meniul
derulant Overflow din panoul Properties.
Iat cum procedai pentru a controla coninutul unui strat folosind
opiunile din meniul Overflow.
Opiunea visible
2. n panoul Properties, n meniul derulant Overflow, alegei

opiunea visible (figura 13.49).
658
Figura 13.49
Figura 13.50

659
Figura 13.51
Opiunea hidden

opiunea hidden.
Figura 13.52

660
Figura 13.53
Opiunea scroll

opiunea scroll.
Figura 13.54

661
Figura 13.55
Opiunea auto

opiunea auto.
Figura 13.56

662
Figura 13.57
Dreamweaver 4 Creai straturi imbricate (nested)

workspace
O alt metod de a plasa straturi pe suprafaa unei pagini este aceea de

a le imbrica. Un strat imbricat (nested) este un strat plasat n interiorul
unui alt strat, pstrnd relaia paternal.
nelegei desigur (sperm) c primul strat devine tatl stratului

imbricat (fiu). Stratul fiu utilizeaz colul superior din stnga al
stratului printe ca punct de orientare pentru poziionare. Dac straturile
se afl n zone diferite ale paginii, relaia cu stratul printe se pstreaz.
Atunci cnd deplasai primul strat n pagin, stratul imbricat se
deplaseaz de asemenea, exact ca n situaia n care stpnul i plimb
cinele inut n les (cinele se deplaseaz independent de stpnul lui,
dar ct l ine lesa!). Un strat poate conine alte straturi imbricate.
Dac tergei stratul printe n mod automat se terg i straturile fiu.
Pentru a crea straturi imbricate cu Dreamweaver 4 workspace, folosii

9 Metoda 1 n mod normal;
9 Metoda 2 n mod automat.
Iat cum crem manual dou straturi (tat i fiu) imbricate.

663
Metoda 1
1. Desenai primul strat pe care-l numii tata (figura 13.58).
2. Desenai cel de-al doilea strat n interiorul primului strat i

numii-l fiu (figura 13.58).
Figura 13.58
3. Afiai 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 printe.
9 n panoul Layers identificai un strat imbricat prin indentarea stratului fiu n
stratul tat i prin simbolul plasat naintea stratului tat. Acest simbol
permite renchiderea indentrii.

664
Figura 13.60
Figura 13.61
Metoda 2
Iat cum crem n mod automat cele dou straturi (tat i fiu) imbricate.
1. Executai clic pe Edit t Preferences.
Remarc. Se afieaz caseta de dialog Preferences.
2. n caseta de dialog Preferences, categoria Layers, executai

9 n zona Nesting activai opiunea Nest When Created
Within a Layer;

665
Figura 13.62
3. Desenai stratul tata.
4. n interiorul acestui strat, desenai stratul fiu.
Stratul fiu este imbricat n stratul tata, n mod automat.
Remarc. Nu uitai s dezactivai opiunea Nest When Created Within a Layer.
Dreamweaver MX Creai straturi imbricate (nested)

workspace
Pentru a crea straturi imbricate cu Dreamweaver MX workspace, folosii

9 Metoda 1 n mod manual;

9 Metoda 2 n mod automat, via Edit Preferences.
666
Iat cum procedai pentru a crea manual dou straturi imbricate: tata i
fiu.
Metoda 1
1. Desenai primul strat (numii-l tata!), figura 13.63.
Figura 13.63
2. Desenai cel de-al doilea strat n interiorul primului strat

(numii-l fiu!), figura 13.64.
Figura 13.64
3. Afiai panoul Layers (figura 13.65).

667
Figura 13.65
Remarc. Identificai n panoul Layers stratul nested prin simbolul plasat naintea
stratului tat.
Figura 13.66
Figura 13.67
668
Metoda 2
1. Executai clic pe Edit Preferences.
Remarc. Se afieaz caseta de dialog Preferences.
2. n caseta de dialog Preferences, categoria Layers, executai

9 n zona Nesting activai opiunea Nest When Created
Within a Layer;
Figura 13.68
3. Desenai stratul tata.
4. n interiorul stratului tata, desenai stratul fiu.
Remarci:
9 Stratul fiu este imbricat n stratul tata, n mod automat.
9 Nu uitai s dezactivai opiunea Nest When Created Within a Layer.
669
5. Analizai codul surs XHTML generat.
Dreamweaver MX Tem
Testai-v cunotinele
1. Care este rolul straturilor ntr-o pagin Web?
2. Descriei pe scurt o metod de creare a unui strat cu Dreamweaver

MX.
3. Descriei pe scurt procedura de modificare a dimensiunilor i a poziiei

unui strat cu Dreamweaver MX.
4. Cum modificai vizibilitatea i ordinea de suprapunere a straturilor cu

Dreamweaver MX?
5. Descriei pe scurt o metod de creare a dou straturi imbricate, cu

Dreamweaver MX.
Vizitai site-urile
9 www.macromedia.com/fr/exchange/dreamweaver
9 www.macromedia.com/exchange/dreamweaver
Conversaia 14
Creai biblioteci cu Dreamweaver MX
f Dreamweaver MX Bibliotecile de obiecte
f Dreamweaver 4 workspace, MX workspace Creai un element de
bibliotec
f Dreamweaver 4 workspace, MX workspace Inserai un element de
bibliotec
f Dreamweaver 4 workspace, MX workspace Modificai un element de
bibliotec. Aplicaii
f Dreamweaver 4 workspace, MX workspace Creai un model de pagin
f Dreamweaver 4 workspace, MX workspace Definii regiunile editabile ale
unui model. Aplicaii
f Dreamweaver MX workspace Utilizai regiunile facultative ale unui
model
f Dreamweaver MX workspace Definii regiunile repetabile ale unui
model. Aplicaii
f Dreamweaver 4 workspace, MX workspace Exportai structuri de date n
format XML
f Dreamweaver MX workspace Tem
Dreamweaver MX Bibliotecile de obiecte
Panoul Assets, o super bibliotec

Dup cum ai putut constata, atunci cnd creai site-uri Web, diverse
elemente revin cu regularitate: imagini, culori, animaii, URL-uri etc.
672
Pentru reutilizarea acestor elemente, putei utiliza, desigur, Copy/Paste,
dar aceast operaie nu este deloc productiv! Utilizai mai degrab,
bibliotecile de obiecte i modelele.
Bibliotecile stocheaz acele elemente din pagina dumneavoastr Web:

imagini, culori, animaii, URL-uri, texte, tabele, formulare ce urmeaz a
fi refolosite n site-ul propriu.
Atunci cnd dorii ca un numr mai mare de pagini s aib acelai

aspect, fr a mai trebui s construii separat coninutul fiecreia de mai
multe ori, utilizai modelele (abloanele).
Remarc. Elementele de bibliotec identific poriuni ale unei pagini, n timp ce un model
reprezint o pagin ntreag. Bibliotecile i modelele sunt asemntoare ntruct
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.
Deschidei biblioteca de obiecte

Iat care este procedura de deschidere a bibliotecii de obiecte
Dreamweaver MX, pe care v invitm s-o aplicai.
1. Executai clic pe Window Assets (figura 14.1).

673
Figura 14.1
Remarc. Se afieaz panoul Assets.
2. n panoul Assets executai clic pe (Library), figura 14.2.
Figura 14.2
674
Remarc. Dreamweaver MX afieaz elementele bibliotecii (figura 14.3).
Figura 14.3
3. Executai clic pe (Templates), figura 14.4.
Figura 14.4
Remarc. Dreamweaver MX afieaz modelele paginilor (figura 14.5).
Figura 14.5
675
4. Executai clic pe (Images), figura 14.6.
Figura 14.6
Remarc. Dreamweaver MX afieaz 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 Creai 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 garanie etc. s
676
fie integrate ntr-o bibliotec. Creai un element de bibliotec, salvai-l i
apoi aplicai-l oricrei 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 procedm pentru a crea n pagina Web lumina.htm elementul

de bibliotec 2003 LUMINA BLND.
Metoda 1
1. n pagina Web lumina.htm selectai textul 2003 LUMINA

BLND, pe care urmeaz s-l definii ca element de bibliotec
(figura 14.8).
Figura 14.8
Remarc. nainte de a crea un element de bibliotec trebuie s definii site-ul Web.

Dreamweaver creeaz folder-ul Library n care stocheaz elementele de bibliotec.
2. Executai 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 fr nume (untitled), figura 14.10.
Figura 14.10
678
3. Atribuii elementului de bibliotec, un nume semnificativ:
copyright (figura 14.11).
Figura 14.11
Remarc. Noul element de bibliotec, copyright este afiat n galben, numai n pagina
Dreamweaver!
5. n pagina dumneavoastr, executai clic pe elementul de

bibliotec i vizualizai informaiile n inspectorul de proprieti
(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 Executai clic pe Window Assets;
2.2 Executai clic pe butonul (Library);
2.3 n meniul local al panoului Assets, alegei opiunea New Library

Item.
Dreamweaver MX Creai 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 procedm pentru a crea elementul de bibliotec 2003

LUMINA BLND.
Metoda 2
1. Selectai n pagina Web (lumina.html) obiectul 2003 LUMINA

BLND, pe care urmeaz s-l definii ca element de bibliotec
(figura 14.15).
Figura 14.15
681
2. Executai clic pe Window Assets.
3. Executai clic pe butonul (Library), figura 14.16.
Remarc. n fereastra de jos a subpanoului Library se afieaz elementele bibliotecii.
Figura 14.16
4. Creai elementul de bibliotec (fr nume) folosind una din

procedurile descrise mai jos:
9 n meniul local al panoului Assets, subpanoul Library ( ),

alegei opiunea New Library Item;
9 executai clic pe butonul (New Library Item);
9 glisai obiectul selectat n fereastra bibliotecii.
5. Atribuii un nume semnificativ, copyright, elementului de

bibliotec.
6. Activai tasta Enter.
7. nchidei subpanoul Library.
8. Executai clic n pagina dumneavoastr Web.

682
9. Vizualizai informaiile n panoul Properties (figura 14.17).
Figura 14.17
Remarc. Src indic numele elementului de bibliotec i calea de acces.
Dreamweaver 4 Inserai un element de bibliotec

workspace
n acest moment suntei n msur s inserai elementul de bibliotec pe

care l-ai creat n pagina dumneavoastr Web.
Iat cum procedai pentru a insera elementul de bibliotec copyright.lbi

n pagina Web servicii.htm.
1. Executai clic n zona n care dorii s inserai elementul de

bibliotec (figura 14.18).
Figura 14.18
2. n panoul Assets, butonul (Library), selectai numele

elementului de bibliotec, copyright, pe care dorii s-l inserai.
683
3. Inserai elementul de bibliotec (copyright) folosind una din
Metoda 1 n subpanoul Library, executai clic pe butonul Insert.
Metoda 2 n meniul local al panoului Assets, subpanoul Library,

alegei opiunea Insert;
Metoda 3 glisai icon-ul obiectului selectat n document.
Figura 14.19
Figura 14.20
684
Dreamweaver MX Inserai un element de bibliotec

workspace
Iat cum procedai pentru a insera elementul de bibliotec copyright.lbi

(elementele de bibliotec se creeaz cu extensia .lbi) n pagina
dumneavoastr Web (servicii.html).
1. Executai clic n zona n care dorii s inserai elementul de

bibliotec (figura 14.21).
Figura 14.21
2. n panoul Assets, butonul (Library) selectai numele

elementului de bibliotec, copyright, pe care dorii s-l inserai
(figura 14.22).
685
Figura 14.22
Remarc. Elementul de bibliotec copyright se afieaz n partea superioar a

subpanoului Library.
3. Inserai elementul de bibliotec (copyright) folosind una din

metodele prezentate mai jos (figura 14.23):
9 executai clic pe butonul (Insert);
9 n meniul local al panoului Assets, subpanoul Library, alegei

opiunea Insert;
9 glisai icon-ul obiectului selectat n document.

686
Figura 14.23
Remarc. Dreamweaver afieaz elementul de bibliotec n fereastra Document (figura

14.24).
Figura 14.24
687
Figura 14.25
Figura 14.26
Aplicaie
Suprimai elementul de bibliotec (copyright) inserat.
Iat care este procedura pe care v invitm s-o aplicai:
1. Selectai n pagina Web elementul pe care trebuie s-l suprimai.
2. Acionai tasta Delete.
Remarc. Elementul de bibliotec este eliminat, dar el rmne (totui) n bibliotec.

688
Dreamweaver 4 Modificai un element de

workspace bibliotec. Aplicaii
Interesul de a utiliza elemente de bibliotec const n dinamismul
acestora n cazul modificrilor; dac modificai un element de bibliotec
atunci toate apariiile acestuia n site sunt actualizate n mod automat.
Iat cum procedai pentru a modifica elementul de bibliotec

(copyright): 2003 LUMINA BLND n 2004 LUMINA BLND.
1. Activai tasta F8 pentru a afia catalogul site-ului.
2. Deschidei, dac este nevoie, folder-ul Library i apoi executai

dublu clic pe fiierul copyright.lbi.
Remarc. Dreamweaver afieaz fereastra elementului de bibliotec, copyright.lbi (figura

14.27).
Figura 14.27
Remarc. Exist mai multe metode pentru afiarea ferestrei <<Library Item>>
(copyright.lbi) (vezi Dreamweaver MX workspace).
3. n fereastra <<Library Item>> [copyright.lbi], efectuai

modificrile necesare (figura 14.28).
Figura 14.28
689
4. Salvai documentul, via File Save.
5. n caseta de dialog Update Library Items, care se afieaz,

Dreamweaver v ntreab: Update library items in these
files?. Executai clic pe butonul Update.
Remarc. Dreamweaver afieaz rezultatul actualizrii (figura 14.29).
Figura 14.29
Aplicaii
Detaai elementul de bibliotec copyright de original.
Indicaie. Vedei paragraful Aplicaii Dreamweaver MX workspace.
Redenumii elementul de bibliotec copyright n dreptautor.
Indicaie. Vedei paragraful: Aplicai Dreamweaver MX workspace.
tergei elementul de bibliotec dreptautor.
Indicaie. Vedei paragraful: Aplicaii Dreamweaver MX workspace.

690
Dreamweaver MX Modificai un element de

workspace bibliotec. Aplicaii
Iat cum procedai pentru a modifica elementul de bibliotec
(copyright): 2003 LUMINA BLND n 2004 LUMINA BLND.
1. Activai tasta F8 pentru a afia catalogul site-ului.
2. Deschidei, dac este nevoie, folder-ul Library i apoi executai

dublu clic pe fiierul copyright.lbi (figura 14.30).
Figura 14.30
3. Executai dublu clic pe fiierul elementului de bibliotec

copyright.lbi.
sau,
3. Selectai elementul de bibliotec copyright.lbi n panoul Assets,
categoria (Library), apoi executai clic pe butonul (Edit).
sau,
3. Deschidei meniul local al panoului Assets , apoi selectai
opiunea Edit.
691
sau,
3. Selectai elementul de bibliotec (copyright.lbi) folosit n
document, iar apoi n panoul Properties, executai clic pe
butonul Open (figura 14.31).
Figura 14.31
Remarc. Dreamweaver deschide fereastra elementului de bibliotec. Atenie la bara de

titlu!
4. n fereastra <<Library Item>> [copyright.lbi], efectuai

modificrile necesare (figura 14.32).
Figura 14.32
5. Executai clic pe File Save.
Remarc. Se afieaz caseta de dialog Update Library Items. Dreamweaver v ntreab

dac dorii s actualizai fiierele care utilizeaz acest element de bibliotec (figura
14.33).
6. n caseta de dialog Update Library Items, executai clic pe

butonul Update (figura 14.33).
Figura 14.33
692
Remarc. Dreamweaver afieaz rezultatul actualizrii n caseta de dialog ilustrat n
figura 14.34.
Figura 14.34
Aplicaii
Detaai un element de bibliotec copyright, de original.
Iat care este procedura pe care v invitm s-o aplicai pentru a suprima
legtura cu elementul de bibliotec (copyright).
1. Selectai elementul de bibliotec, copyright, care urmeaz a fi detaat

de original.
2. n panoul Properties, executai clic pe butonul Detach from original

(figura 14.35).
Figura 14.35
Remarc. Se afieaz caseta de dialog Macromedia Dreamweaver.

3. n caseta de dialog Macromedia Dreamweaver, executai clic pe
butonul OK.
Remarc. Textul 2003 LUMINA BLND nu mai constituie un element de bibliotec,

nu se mai afieaz n galben i este editabil.
693
Actualizai paginile Web folosind elemente de bibliotec.
Putei modifica elementul de bibliotec (copyright, n exemplul nostru) fr a

fora actualizarea documentelor care conin acest element, dac executai clic
pe butonul Dont Update cnd salvai modificrile. n acest caz, va trebui s
actualizai singuri paginile care utilizeaz elementul de bibliotec.
1. Deschidei o pagin care utilizeaz elementul de bibliotec.
2. Executai clic pe Modify Library Update Curent Page/ Update

Pages.
Remarc. Dreamweaver afieaz caseta de dialog Update Pages.

3. n caseta de dialog Update Pages, n meniul derulant Look in, selectai
(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 gsete n meniul derulant din
dreapta).
Figura 14.36
4. n caseta de dialog Update Pages, lsai activate opiunile Library

Items i Show Log.
5. n caseta de dialog Update Pages, executai clic pe butonul Start iar

apoi pe butonul Close.
694
Redenumii elementul de bibliotec copyright n dreptautor.
Iat care este procedura pe care v invitm s-o aplicai n cele ce urmeaz.
1. n panoul Assets, categoria Library, executai clic pe elementul pe

care dorii s-l redenumii (copyright).
2. Deschidei meniul local ( ), apoi executai clic pe Rename.
sau,
2. Executai clic pe numele elementului (este selectat zona numelui).
3. Introducei noul nume, dreptautor, iar apoi acionai tasta Enter.
Remarc. Dreamweaver v ntreab: Update links in the following files?.

4. n caseta de dialog Update Files, executai clic pe Update sau pe Dont
Update (figura 14.37).
Figura 14.37
tergei elementul de bibliotec dreptautor.
1. Selectai elementul de bibliotec dreptautor, n categoria Library din

panoul Assets.
2. Deschidei meniul local , apoi executai clic pe Delete.
sau,
2. Executai clic pe butonul (Delete).
sau,
695
2. Executai un clic cu butonul dreapta al mouse-ului pe elementul de
bibliotec dreptautor, apoi alegei Delete.
3. n caseta de dialog Macromedia Dreamweaver, executai clic pe

butonul Yes pentru a confirma tergerea elementului de bibliotec
(figura 14.38).
Figura 14.38
Recreai un element de bibliotec, dac din greeal l-ai ters.
1. Selectai n documentul Dreamweaver elementul de bibliotec

suprimat.
2. n panoul Properties, executai clic pe butonul Recreate (figura

14.39).
Figura 14.39
Remarc. n mod automat, elementul reprimete numele care i fusese atribuit i i reia
locul n bibliotec.
Dreamweaver 4
workspace
Creai 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 poriune a
acesteia.
696
Putei defini o formatare aplicat unei pagini ntregi ca model pentru a
ctiga timp n momentul crerii paginilor din site-ul propriu. Putei
construi un model de la zero sau salva o pagin existent ca model.
Modelul poate fi folosit i de alte persoane care lucreaz n aceeai

echip cu dumneavoastr; de asemenea, dumneavoastr putei folosi
modelele create de alii.
Pentru a crea un model de pagin cu Dreamweaver 4 workspace, folosii

Metoda 1 Meniul File, via Save As Template;
Metoda 2 Panoul Insert.
Iat cum procedm pentru a crea modelul din figura 14.40 care conine
elementul de bibliotec 2003 LUMINA BLND.
Figura 14.40
Metoda 1
1. Creai pagina Web care v va servi ca model (figura 14.40), sau

deschidei o pagin deja creat care v va servi ca model.
2. Executai 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), executai

urmtoarele aciuni:
9 n zona Site selectai n meniul derulant, site-ul n care

dorii s salvai modelul de pagin.
9 n zona Save As introducei numele modelului, identitate;

698
Figura 14.42
4. Executai clic pe Window Assets.
5. n panoul Assets, executai 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, executai clic pe icon-ul
(Make Template), figura 14.44.
Figura 14.44
Dreamweaver MX Creai un model de pagin

workspace
Dac utilizai tot timpul acelai tip de pagin n site-ul dumneavoastr,

ncepei 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 procedm pentru a crea modelul de pagin din figura 14.45,
care conine elementul de bibliotec 2003 LUMINA BLND.
700
Figura 14.45
Metoda 2
1. Creai pagina Web care v va servi ca model (figura 14.46), sau

deschidei o pagin deja creat care v va servi ca model.
2. n grupul de panouri Insert, subpanoul Templates, executai 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, executai aciunile

ilustrate n figura 14.47.
Figura 14.47
4. Afiai panoul Assets.
5. n panoul Assets, executai clic pe butonul (Templates),

figura 14.48.
Figura 14.48
Remarci:
9 Analizai cele dou ferestre ale subpanoului Templates.
9 Reinei extensia .dwt (identitate.dwt) pentru Dreamweaver template.

702
Figura 14.49
Aplicaie
Afiai folder-ul modelelor.
Indicaie. Acionai tasta F8. Deschidei, dac este cazul folder-ul Templates,
creat de Dreamweaver (figura 14.50).
Figura 14.50
703
Dreamweaver 4 Definii 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, Funcia.
1. n panoul Assets, executai clic pe categoria (Templates).
2. Executai dublu clic pe identitate (numele modelului), pentru a-l

deschide.
3. Selectai prima zon editabil: Nume.
4. Executai clic pe Insert Template Objects Editable Region

(figura 14.51).
704
Figura 14.51
Remarc. Se afieaz caseta New Editable Region.
5. n caseta de dialog New Editable Region, n zona Name

introducei numele primei zone editabile: Nume angajat, iar
6. Repetai paii 3, 4, 5 pentru a defini celelalte regiuni editabile:

Prenume angajat, Funcie angajat (figura 14.52).
Figura 14.52
7. Salvai modelul.
705
Figura 14.53
Figura 14.54
706
Metoda 2
4. n panoul Insert, categoria Templates, executai clic pe icon-ul
(Editable Region), figura 14.55.
Figura 14.55
Dreamweaver MX Definii regiunile editabile ale unui

workspace model. Aplicaii
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, Funcia.
Metoda 2
1. n panoul Assets, executai clic pe categoria (Templates).

707
2. n panoul Assets, categoria Templates, executai dublu clic pe
identitate1 (numele modelului), pentru a-l deschide.
3. Selectai prima zon editabil: Nume (figura 14.56).
Figura 14.56
pe icon-ul (Editable Region) (figura 14.57).
Figura 14.57
Remarc. Se afieaz caseta New Editable Region.

708
5. n caseta de dialog New Editable Region, executai urmtoarele
9 n zona Name introducei numele primei zone editabile:

Nume angajat;
Figura 14.58
Remarc. Dreamweaver MX workspace adaug modelului o regiune editabil. O caset

bleu indic numele su Nume angajat (figura 14.59).
Figura 14.59
6. Repetai paii 3, 4, 5 pentru a defini celelalte regiuni

editabile (figura 14.60).
709
Figura 14.60
7. Salvai modelul (CTRL+S sau, File Save).
Figura 14.61

710
Figura 14.62
Aplicaii
Suprimai o zon editabil (Nume).
Indicaie. Utilizai meniul Modify, via Templates.
Creai un document pornind de la un model (identitate1.dwt).
2. n subpanoul Templates, executai urmtoarele aciuni (figura 14.63):
9 n zona Templates For: selectai site-ul care conine modelul

identitate1.dwt;
9 activai opiunea Update Page when
Template Changes;

711
Figura 14.63
Introducei informaiile corespunztoare n regiunile editabile ale

documentului.
Pentru a introduce informaiile n regiunile editabile ale unui document, folosii

9 Metoda 1 Selectai sau executai clic n zona editabil, apoi

introducei informaiile respective (figura 14.64);
9 Metoda 2 Executai clic pe numele regiunii editabile n meniul Modify

Templates, apoi introducei informaiile respective.
Remarci:
9 Dac ncercai s introducei text ntr-o zon non editabil, vei avea parte de
un semnal sonor!
9 La finele aciunii, salvai documentul (File Save).
712
Figura 14.64
Aplicai un model (identitate1.dwt) unei pagini Web.
1. n subpanoul Assets, executai clic pe categoria (Templates),

figura 14.65.
2. n zona Name, n lista de modele afiat, selectai identitate1, apoi

executai clic pe butonul Apply (figura 14.65).
Figura 14.65
713
sau,
2. Deschidei meniul local , apoi alegei Apply;
sau,
2. Deplasai 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, selectai-le pe cele corespunztoare, apoi

executai clic pe butonul OK (figura 14.67).
Figura 14.67
714
Modificai modelul identitate1 dup cum urmeaz: adugai a patra zon
editabil, E-MAIL.
1. n subpanoul Templates, categoria (Templates), selectai modelul
identitate1, apoi executai clic pe butonul (Edit).
sau,
1. Deschidei meniul local ( ), apoi executai clic pe Edit;
sau,
1. Executai dublu clic pe icon-ul modelului identitate1;
sau,
1. Executai clic pe Window Site, deschidei folder-ul Templates i

executai dublu clic pe identitate1.dwt.
2. Adugai zona editabil E-Mail (figura 14.68).
Figura 14.68
3. Salvai fiierul (File Save).
Remarc. Dreamweaver v ntreab dac dorii s actualizai toate documentele care au

la baz acest model (figura 14.69).
715
Figura 14.69
4. n caseta de dialog Update Template File executai clic pe butonul

Update.
Remarc. Dreamweaver afieaz jurnalul rezultatelor (figura 14.70).
Figura 14.70
Dreamweaver MX Utilizai regiunile facultative ale

workspace unui model
ntr-un model, o regiune facultativ este regiunea pe care
dumneavoastr o putei programa astfel nct 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, folosii una din

9 Metoda 1 Meniul Insert, via Template Objects Optional

Region;
Creai regiuni facultative

Iat cum procedai 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 afieaz caseta de dialog New Optional Region.
2. n caseta de dialog New Optional Region, categoria Basic,

executai urmtoarele aciuni (figura 14.72):
9 n zona Name introducei numele regiunii facultative,

imagine.

717
Figura 14.72
Remarc. Dac alegei opiuni Show by Default, imaginea acestei regiuni facultative va fi
afiat implicit n documentul creat avnd la baz acest model. n caz contrar,
utilizatorul modelului va modifica parametrul (true, pentru a afia aceast regiune
facultativ).
3. Inserai o imagine, sigla.jpg n aceast regiune editabil (figura

14.73).
Figura 14.73
718
4. Pentru a modifica parametrii regiunii facultative, selectai
imaginea i utilizai butonul Edit din panoul Properties (figura
14.74).
Figura 14.74
Figura 14.75
Figura 14.76
719
Utilizai un model cu regiuni facultative
1. Executai clic pe File New Templates Templates For:

Site Web modelul identitate1.
2. Executai clic pe butonul Create.
Remarc. Dumneavoastr nu vedei imaginea n cazul n care nu ai activat opiunea

Show by Default. Valoarea parametrului este deci false.
3. Afiai codul surs XHTML generat (figura 14.77).
Figura 14.77
Remarc. n codul surs XHTML, value=false.
4. Executai clic pe Modify Template Properties.
Remarc. Se afieaz caseta de dialog Template Properties.
5. n caseta de dialog Template Properties, executai urmtoarele

9 selectai linia care corespunde numelui regiunii facultative

imagine (valoarea parametrului devine true);
9 activai opiunea Show imagine;

720
Figura 14.78
6. Afiai codul surs XHTML generat (14.79).
Figura 14.79
Figura 14.80
721
Creai un model cu regiuni facultative multiple
Vom completa n cele ce urmeaz modelul Agenda.dwt (vezi paragraful:
Dreamweaver MX workspace Exportai structuri de date n format
XML).
Iat cum procedai pentru a afia numele documentului: Address Book

sau Carnet adressos, n funcie de parametrul limba: A (englez) sau E
(spaniol).
1. Afiai codul surs al modelului.
2. n zona <head> a documentului, introducei codul parametrului

<!TemplateParam name=limba type=text value=F-->.
3. n locul dorit n document, introducei 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
afiat, ntre TemplateBeginIfClause i TemplateEndIfClause.
4. Afiai pagina n mod Show Design View (figura 14.82).
Figura 14.82
5. Creai un nou document avnd la baz acest model.
Figura 14.83
6. Executai clic pe Modify Template Properties.
7. n caseta de dialog Template Properties, executai urmtoarele

9 pentru parametrul imagine alegei true sau false;

723
9 pentru parametrul limba, n cmpul language introducei A
(una din valorile A/F);
Figura 14.84
Figura 14.85
724
Dreamweaver MX Definii regiunile repetabile ale

workspace unui model. Aplicaii
Dac o regiune trebuie s fie repetat de mai multe ori n cadrul unei
pagini care are la baz un model, va trebui s precizai acest lucru n
zona de creare a modelului.
Pentru a crea regiunile repetabile ale unui model, folosii una din
9 Metoda 1 Meniul Insert, via Template Objects Repeating

Region;
9 Metoda 2 Grupul de panouri Insert, subpanoul Templates.
Creai o regiune repetabil, non editabil

Iat cum procedai pentru a crea n cadrul unui model, o regiune care se
repet, non editabil, E-Mail.
Metoda 2
1. Deschidei modelul identitate1.dwt.
2. Selectai 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, executai

9 n zona Name introducei 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
Creai o regiune repetabil, editabil
Iat cum procedai pentru a crea n cadrul unui model o regiune care se
repet, editabil Funcia angajat.
Metoda 1
1. Executai clic pe subpanoul bleu, Funcie angajat (figura 14.90).
Figura 14.90
2. Executai 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, executai

9 n zona Name introducei numele regiunii repetabile,

Funcia angajat;
Figura 14.92
Remarc. Dreamweaver adaug modelului o regiune care se repet, Repeat: Funcia

angajat care nglobeaz regiunea editabil Funcia (figura 14.93).
Figura 14.93
Utilizai modelul
Iat cum procedai pentru a utiliza modelul pe care l-ai creat n aplicaia
precedent.
1. Creai un nou document bazat pe acest model.

728
2. Introducei primele date (figura 14.94).
Figura 14.94
3. Utilizai butoanele i pentru a aduga sau suprima

regiunile: (Butoanele i permit modificarea
secvenei de introducere a datelor), figura 14.95.
Figura 14.95

729
Figura 14.96
Figura 14.97
730
Aplicaii
Creai 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. Creai un nou model.
2. Executai clic n locul n care dorii s figureze tabelul.
3. n grupul de panouri Insert, subpanoul Templates, executai clic pe
icon-ul (Repeating Table), figura 14.99.
Figura 14.99
Remarc. Dreamweaver afieaz caseta de dialog Insert Repeating Table.

sau,
3. Executai clic pe meniul Insert Template Objects Repeating

Table.
4. n caseta de dialog Insert Repeating Table, executai urmtoarele

aciuni (14.100):
9 n zonele Rows, Columns introducei numrul de linii (4) i

numrul de coloane (3);
9 n zona width introducei valoarea 75%;
9 n zona Repeat rows of the table, n cmpul Starting Row i n
cmpul Ending Row introducei valorile 2 respectiv 3;
9 n zona Region Name introducei date;
731
Figura 14.100
Remarci:
9 Primele opiuni sunt identice cu cele ale unui tabel clasic.
9 Tabelul este inserat n model.
Utilizai modelul.
Iat cum procedai pentru a utiliza modelul pe care l-ai creat n aplicaia
precedent.
1. Creai un document bazat pe acest model.
2. Utilizai butoanele i pentru a aduga sau suprima regiunile i

butoanele i pentru a le sorta (vezi utilizarea acelorai butoane
pentru regiunile care se repet n cadrul unui model), figura 14.101.
Figura 14.101
732
Creai un model imbricat imbricai o regiune editabil (Autor) ntr-o regiune
editabil existent (Titlu).
1. Creai un document care are la baz un model (carte.dwt).
2. Selectai textul regiunii editabile (Titlu) i inserai 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 Putei crea mai multe modele imbricate pornind de la un model de baz.
Dreamweaver 4 Exportai structuri de date n

workspace format XML
ntruct n cadrul unui model, fiecare regiune editabil este unic i
perfect identificat, putei utiliza numele acestor regiuni pentru a genera
tag-uri XML (eXtensible Markup Language; vezi lucrarea L. Dumitracu,
Limbajul XML, Editura Universitii din Ploieti, 2003) n vederea
exportului (importului) de date structurate.
733
Iat cum procedm pentru a crea cu Dreamweaver 4 workspace un
model Agenda.dwt pe care apoi l exportm n format XML.
2. Inserai un tabel cu 5 linii i 4 coloane, n care prima linie

conine numele cmpurilor: Titlu tiinific, Nume, Prenume,
E-mail.
3. Salvai tabelul ca model, Agenda.dwt.
4. Creai regiuni editabile, cu urmtoarele denumiri:
9 {t1}, {t4} pentru titlul tiinific;

9 {n1}, , {n4} pentru nume;
9 {p1}, , {p4} pentru prenume;
9 {em1}, , {em4} pentru e-mail.
5. Salvai modelul.
6. Creai un nou document avnd la baz modelul creat, apoi

introducei datele (figura 14.103).
Figura 14.103
7. Salvai documentul sub numele agendapers.
8. Executai clic pe File Export Template Data as XML.

734
9. n caseta de dialog Export Template Data as XML executai
9 n zona Notation alegei opiunea Use Editable Region

Names as XML tags (vezi modul de afiare
al tag-urilor XML, n zona Sample).
Figura 14.104
10. Numii documentul XML agendapers, apoi deschidei acest

document agendapers.xml.
11. Afiai codul surs XML generat (figura 14.105).
Figura 14.105
735
Dreamweaver MX Exportai structuri de date n

workspace format XML
XML (eXtensible Markup Language) este cel mai nou limbaj dezvoltat de
consoriul W3C.
n viitor, XML-ul va reprezenta cu siguran instrumentul standard

pentru descrierea, manipularea i transmisia datelor (vezi lucrarea L.
Dumitracu, Limbajul XML, Editura Universitii din Ploieti, 2003).
Iat cum procedm pentru a crea un model Agenda.dwt pe care apoi l

exportm n format XML.
2. Inserai un tabel cu 5 linii i 4 coloane; prima linie conine

numele cmpurilor: Titlu tiinific, Nume, Prenume, E-mail
(figura 14.106).
Figura 14.106
3. Salvai tabelul ca model, sub numele agenda.dwt.

736
4. Creai regiuni editabile, cu urmtoarele denumiri (figura
14.107):
9 t pentru titlul tiinific;

9 n pentru nume;
9 p pentru prenume;
9 em pentru e-mail.
Figura 14.107
5. Salvai modelul.
6. Creai un nou document avnd la baz modelul creat, iar apoi

introducei datele (figura 14.108).
Figura 14.108
737
7. Salvai documentul sub numele agendapers.
8. Executai clic pe File Export Template Data as XML (figura

14.109).
Figura 14.109
Remarc. Se afieaz caseta de dialog Export Template Data as XML.
9. n caseta de dialog Export Template Data as XML, executai

9 n zona Notation activai butonul radio Use Standard
Dreamweaver XML tags (vezi modul de

afiare al tag-urilor XML, n zona Sample);

738
Figura 14.110
Remarci:
9 Prima opiune afieaz un tag sub forma: <item name=t1> - </item>.
9 A doua opiune afieaz un tag sub forma: <t1> - </t1>.
10. n caseta de dialog Export Template Data as XML, numii
documentul XML: agendapers iar apoi deschidei acest
document agendapers.xml.
11. Afiai codul surs XML generat (figura 14.111).
Figura 14.111
739
Aplicaie
Importai un document XML ntr-un model cu condiia ca ele s aib aceeai

structur.
Remarc. Trebuie s existe o perfect concordan ntre numele tag-urilor XML i

numrul de nregistrri, ceea ce limiteaz puin importurile.
740
Dreamweaver MX Tem
Testai-v cunotinele
1. Precizai care este deosebirea dintre elementele de bibliotec i
modele.
2. Care sunt butoanele din panoul Assets?
3. Descriei pe scurt o metod de creare a unui element de bibliotec cu

4. Descriei pe scurt o metod de creare a unui model de pagin, cu

Dreamweaver MX.
5. Cum definii regiunile editabile ale unui model?
6. Descriei metodele de creare a regiunilor facultative ntr-un model, cu

7. Cum procedai pentru a exporta structuri de date n format XML?
Vizitai site-urile
9 www.microsoft.com/FRANCE/ssafe
9 www.ics.uci.edu/pub/ietf
Conversaia 15
Creai comportamente cu
Dreamweaver MX
f Dreamweaver MX workspace - Comportamente Dreamweaver
f Dreamweaver 4 workspace, MX workspace Creai comportamentul Open
Browser Window
f Dreamweaver 4 workspace, MX workspace Creai comportamentul
Swap Image
f Dreamweaver 4 workspace, MX workspace Creai comportamentul Set
Text of Status Bar. Aplicaie
f Dreamweaver 4 workspace, MX workspace Creai comportamentul
Validate Form. Aplicaii
Text of Layer. Aplicaii
Text of Frame
Dreamweaver MX Comportamente Dreamweaver

workspace
Creai un comportament
Inserarea unui comportament (behavior, n limba englez) n paginile
dumneavoastr Web are ca efect creterea interactivitii cu vizitatorii.
742
Un comportament are ecuaia:
Comportament=eveniment + aciune.
n general, evenimentul reprezint o aciune a utilizatorului cu mouse-ul:
9 evenimentul onMouseOver se declaneaz atunci cnd vizitatorul

plaseaz mouse-ul deasupra unui
obiect;
9 evenimentul onMouseDown se declaneaz atunci cnd vizitatorul

apas pe butonul mouse-ului;
9 evenimentul onMouseUp se declaneaz atunci cnd vizitatorul

elibereaz butonul mouse-ului;
9 evenimentul onClick se declaneaz atunci cnd vizitatorul

execut clic cu mouse-ul;
9 evenimentul onDblClick se declaneaz atunci cnd vizitatorul

execut dublu clic.
Aciunea este generat de Java Script i permite o schimbare n pagina

dumneavoastr (substituirea unei imagini cu o alt imagine, afiarea
unui mesaj n bara de stare a navigatorului, nlocuirea coninutului unui
strat/cadru cu un text i cu o alt imagine) sau o aciune programat
(verificarea unui calcul ntr-un cmp al formularului etc.).
n concluzie, pentru a defini un comportament trebuie s precizai:

obiectul din pagin, aciunea i evenimentul.
Remarci:
9 De regul, interactivitatea necesit cunotine de programare n Java Script!
Dac utilizai 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.) funcioneaz att n Internet Explorer (versiunea
4.0 sau superior), ct i n Netscape.
743
Alegei navigatorul
Nu toate navigatoarele accept n totalitate comportamentele
Dreamweaver. n consecin, este bine s precizai navigatorul pe care l
vei utiliza pentru a limita lista comportamentelor disponibile.
Iat care este procedura pe care v invitm s-o aplicai pentru a alege
navigatorul corespunztor.
1. n panoul Behaviors, executai clic pe butonul Show

Events For (figura 15.1).
Figura 15.1
2. Executai clic pe navigatorul cu care vei lucra (figura 15.2).

744
Figura 15.2
3. Alegei comportamentul corespunztor (figura 15.3).
Figura 15.3
Remarc. Am selectat comportamentul (aciunea) Open Browser Window.
4. Alegei evenimentul care declaneaz aciunea (figura 15.4).

745
Figura 15.4
Remarc. Am selectat evenimentul onClick.
Creai comportamentul Open

Dreamweaver 4
workspace Browser Window
Comportamentul Open Browser Window din Dreamweaver permite
deschiderea unei pagini ntr-o fereastr pe care o putei personaliza.
Acest comportament este ideal pentru activitatea de marketing,
publicitate etc.
Iat cum procedm pentru a crea comportamentul Open Browser

Window, n care obiectul din pagin este imaginea sigla.jpg (figura
15.5), iar evenimentul care va declana aciunea (deschidei o pagin
ntr-o nou fereastr a browser-ului) este onClick.
Remarc. Pentru a defini un comportament trebuie s precizai urmtoarele trei

elemente:
9 obiectul din pagin;
9 aciunea de efectuat;
9 evenimentul care va declana aciunea.
746
1. Selectai imaginea (figura 15.5), care reprezint obiectul din
pagin.
Figura 15.5
2. Deschidei panoul Behaviors via Window Behaviors;
sau,
2. Panoul Launcher clic pe butonul (Behaviors).
3. n panoul Behaviors, executai clic pe butonul Open

Browser Window.
4. n caseta de dialog Open Browser Window completai zonele

afiate, ca n figura 15.6.
Figura 15.6
747
5. n caseta de dialog Open Browser Window executai clic pe
butonul OK.
6. n panoul Behaviors, n meniul derulant (Events), selectai

evenimentul onClick.
Remarc. n panoul Behaviors, se afieaz evenimentul onClick i comportamentul Open

Browser Window.
7. Analizai codul HTML (Java Script) generat.
Figura 15.7
9. Testai comportamentul Open Browser Window (figura 15.8).
Figura 15.8
Remarc. Executai clic deasupra imaginii. Pagina servicii.htm se deschide ntr-o nou
fereastr a browser-ului.
748
Dreamweaver MX Creai comportamentul Open

workspace
Browser Window
Iat cum procedm pentru a crea comportamentul Open Browser
Window cu Dreamweaver MX workspace. Obiectul din pagin este
sigla.jpg, iar evenimentul care va declana aciunea (deschide o
fereastr a browser-ului) este onClick.
Figura 15.9
Remarc. Pentru a ataa un comportament ntregii pagini, executai clic pe tag-ul

<body> care se afieaz n colul din stnga al ferestrei Dreamweaver (vezi bara de
stare).
2. Executai clic pe Window Behaviors.
sau,
2. Panoul Launcher clic pe butonul (Behaviors), figura

15.10.
Remarc. Se afieaz panoul Behaviors.

749
Figura 15.10
3. n panoul Behaviors, executai clic pe butonul Open

Browser Window (figura 15.11).
Figura 15.11
Remarc. Dreamweaver MX workspace afieaz caseta de dialog Open Browser Window.

750
4. n caseta de dialog Open Browser Window, completai zonele:
URL to Display, Window Width, Window Height, Window Name,
activai opiunile (Meniu Bar, Status Bar) ca n figura 15.12.
Figura 15.12
5. n caseta de dialog Open Browser Window, executai clic pe

butonul OK.
6. n panoul Behaviors, n meniul derulant Events ( ), selectai

evenimentul onClick (figura 15.13).
Figura 15.13
751
Remarc. n panoul Behaviors, se afieaz evenimentul onClick i comportamentul Open
Browser Window (figura 15.14).
Figura 15.14
7. Analizai codul XHTML (Java Script) generat (15.15).
Figura 15.15
Remarc. Este important s vizualizai codul Java Script pe care Dreamweaver MX

workspace l-a generat. Dac nu cunoatei Java Script, acum avei ocazia s ncepei
s nelegei . O lume ntreag nelegea .
752
8. Salvai documentul iar apoi afiai pagina ntr-un browser
(figura 15.16).
Figura 15.16
9. Testai comportamentul (Open Browser Window) executnd clic

deasupra imaginii (figura 15.17).
Figura 15.17
Remarc. Pagina servicii.htm se deschide ntr-o nou fereastr a browser-ului.
Creai comportamentul Swap

Dreamweaver 4
workspace Image
Comportamentul Swap Image din Dreamweaver v permite s nlocuii o
imagine cu alt imagine, n timpul evenimentelor: onMouseOver, onClick
etc.
753
Iat cum procedm 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 declana aciunea (nlocuii o
imagine cu alt imagine) este onMouseOver.
1. Inserai imaginea autumn.jpg n documentul Dreamweaver 4

workspace i selectai-o (figura 15.18).
Figura 15.18
2. n panoul Properties, introducei numele imaginii (buton2).
3. Deschidei panoul Behaviors.
4. n panoul Behaviors, executai clic pe butonul Swap

Image.
5. n caseta de dialog Swap Image, care se afieaz, executai

urmtoarele aciuni:
9 n zona Images selectai image buton2;
9 n zona Set Source to introducei calea de acces a imaginii;
9 activai opiunile Preload Images i
Restore Images onMouseOut;

754
6. Analizai codul HTML (Java Script) generat (figura 15.19).
Figura 15.19
8. Testai rollover-ul, trecnd mouse-ul pe deasupra imaginii

(figura 15.20).
755
Figura 15.20
Dreamweaver MX Creai comportamentul Swap

workspace Image
Folosii Dreamweaver MX workspace pentru a crea comportamentul
Swap Image.
Iat cum procedm 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 declana aciunea (Swap
Image) este onMouseOver.
1. Inserai imaginea autumn.jpg n documentul Dreamweaver MX

workspace i selectai-o.
2. n panoul Properties, introducei numele imaginii, buton2,

pentru a putea fi referit de ctre script-ul comportamentului
(figura 15.21).
756
Figura 15.21
4. n panoul Behaviors, executai clic pe butonul , iar n meniul

derulant, selectai comportamentul Swap Image (figura 15.22).
Figura 15.22
757
Remarc. Se afieaz caseta de dialog Swap Image.
5. n caseta de dialog Swap Image, care se afieaz, executai

9 n zona Images selectai numele imaginii pe care

dorii s-o substituii;
9 n zona Set Source to introducei calea de acces a imaginii
sau, executai clic pe butonul Browse
i selectai imaginea de substituie
azul.jpg;
9 activai opiunile Preload Images i
Restore Images onMouseOut;
Figura 15.23

758
Figura 15.24
8. Testai rollover-ul, trecnd mouse-ul pe deasupra imaginii

(figura 15.25).
759
Figura 15.25
Dreamweaver 4 Creai comportamentul Set Text of

workspace Status Bar
Comportamentul Set Text of Status Bar din Dreamweaver v permite s
afiai un mesaj (asociat unui element din pagina Web) n bara de stare
a navigatorului, n timpul evenimentelor: onClick, onMouseOver etc.
Iat cum procedm pentru a crea comportamentul Set Text of Status

Bar, n care obiectul din pagin este imaginea autumn.jpg creia i
atribuim mesajul nvai s privii dincolo de aparene, iar
evenimentul care va declana aciunea (Set Text of Status Bar) este
onClick.
1. Selectai imaginea autumn.jpg.
2. n panoul Behaviors, selectai comportamentul Set Text of

Status Bar, via Set Text.
3. n caseta de dialog Set Text of Status Bar, n zona Message,

introducei mesajul nvai s privii dincolo de aparene, iar
760
4. Selectai evenimentul onClick.
Figura 15.26
7. Testai comportamentul (executai clic pe imagine!), figura

15.27.
Figura 15.27
Remarc. Mesajul se afieaz n bara de stare a navigatorului.

761
Dreamweaver MX Creai comportamentul Set Text of

workspace Status Bar. Aplicaie
Folosii Dreamweaver MX workspace pentru a crea comportamentul Set
Text of Status Bar.
Iat cum procedm pentru a afia mesajul nvai s privii dincolo de

aparene n bara de stare a navigatorului. Asociai acest mesaj imaginii
autumn.jpg i folosii evenimentul onClick pentru a declana aciunea
Set Text of Status Bar.
1. Selectai imaginea autumn.jpg, care trebuie s afieze mesajul

n bara de stare.
2. n panoul Behaviors, executai clic pe butonul Set Text

Set Text of Status Bar (figura 15.28).
Figura 15.28
762
Remarc. Se afieaz caseta de dialog Set Text of Status Bar.
3. n caseta de dialog Set Text of Status Bar, executai

9 n zona Message introducei mesajul nvai s privii

dincolo de aparene
Figura 15.29
4. Selectai evenimentul onClick (figura 15.30).
Figura 15.30
Remarc. n mod implicit, textul este afiat n timpul evenimentului onMouseOver.

763
5. Analizai codul Java Script generat (figura 15.31).
Figura 15.31
Figura 15.32
764
7. Testai comportamentul (executai clic pe imagine!), figura
15.33.
Figura 15.33
Remarc. Mesajul se afieaz n bara de stare a navigatorului.

Aplicaie
Creai comportamentul Popup Message (mesaj contextual), n care:
9 autumn.jpg reprezint obiectul din pagin cruia i asociem

mesajul nvai s privii dincolo de aparene;
9 Popup Message reprezint aciunea din panoul Behaviors de
executat, care afieaz mesajul ntr-o caset de
dialog de avertizare;
9 onClick reprezint evenimentul care va declana aciunea.
1. Selectai imaginea autumn.jpg, care trebuie s afieze mesajul ntr-o

caset de dialog.
2. n panoul Behaviors, executai clic pe butonul , iar apoi pe Popup

Message.
Remarc. Se afieaz caseta de dialog Popup Message.

765
3. n caseta de dialog Popup Message, executai urmtoarele aciuni
(figura 15.34):
9 n zona Message introducei mesajul "nvai s privii dincolo

de aparene".
Figura 15.34
Remarc. n mod implicit, caseta de dialog este afiat atunci cnd asupra elementului
se execut un clic (onClick).
4. Analizai codul XHTML (Java Script) generat.
5. Vizualizai pagina Web ntr-un browser (figura 15.35) iar apoi testai
comportamentul.
Figura 15.35
Remarc. Se afieaz o caset de avertizare, care afieaz mesajul. Executai clic pe

butonul OK.
766
Dreamweaver 4 Creai comportamentul Validate

workspace Form
Folosii Dreamweaver 4 workspace pentru a valida un formular n
momentul expedierii acestuia.
Iat cum procedm pentru a valida cmpul E-MAIL al unui formular

(figura 15.36) n momentul expedierii acestuia. Folosii evenimentul
onSubmit pentru a declana aciunea Validate Form.
1. Selectai formularul (figura 15.36).
Figura 15.36
2. Afiai panoul Behaviors.
3. n panoul Behaviors, executai clic pe butonul Validate

Form.
4. n caseta de dialog Validate Form: n zona Named Fields,

selectai cmpul text email in form formular; n zona Value,
activai butonul radio Required; n zona Accept, activai butonul
radio Email Address.
767
5. n caseta de dialog Validate Form executai clic pe butonul OK.
Figura 15.37
8. Testai comportamentul (figura 15.38).

768
Figura 15.38
Dreamweaver MX Creai comportamentul Validate

workspace Form
Cu Dreamweaver MX workspace putei efectua verificarea unui formular
atunci cnd vizitatorul completeaz cmpurile unul dup altul sau cnd
execut clic pe butonul de expediere (submit) al formularului.
Iat cum procedm pentru a efectua validarea unui cmpul E-MAIL al

formularului din figura 15.39 n momentul expedierii acestuia. Folosii
evenimentul onSubmit pentru a declana aciunea Validate Form.
1. Selectai formularul (figura 15.39).

769
Figura 15.39
2. Afiai panoul Behaviors (comportamente).
3. n panoul Behaviors, executai clic pe butonul , iar apoi din

meniul derulant alegei comportamentul Validate Form.
Remarc. Se afieaz caseta de dialog Validate Form care repertoriaz toate cmpurile
de tip text ale formularului.
4. n caseta de dialog Validate Form, executai urmtoarele aciuni

(figura 15.40):
9 n zona Named Fields selectai cmpul cruia urmeaz s i

se aplice validarea text email in
form formular;
9 n zona Value activai caseta de validare Required

pentru a interzice o zon vid n
acest cmp;
9 n zona Accept activai butonul radio Email Address;

770
Figura 15.40
Remarc. n panoul Behaviors s-a afiat evenimentul onSubmit. Putei alege, evident, i
un alt eveniment (figura 15.41).
Figura 15.41
5. Analizai codul XHTML (Java Script) generat (figura 15.42).

771
Figura 15.42

772
Figura 15.43
Remarc. n momentul expedierii formularului, dup ce ai introdus date incorecte (email

greit), navigatorul afieaz un mesaj de eroare.
Aplicaii
Vizualizai cmpurile Nume, Prenume care aparin aceluiai formular.
Indicaie. Folosii evenimentul onBlur pentru a declana aciunea Validate Form.
Transmitei un mesaj de mulumire vizitatorilor care au completat formularul

cu impresiile acestora privind site-ul accesat.
Indicaie. Folosii evenimentul OnMouseDown pentru a declana aciunea Set

Text of Text Field.

workspace Layer
Comportamentul Set Text of Layer v permite s nlocuii coninutul i
formatarea unui strat cu un coninut diferit i/sau atribute dedicate.
773
Iat cum procedm pentru a nlocui imaginea sigla.jpg din stratul sigla
cu textul TOAMNA i o alt imagine autumn.jpg. Folosii evenimentul
onMouseOver pentru a declana aciunea (Set Text of Layer).
1. Inserai 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) executai

urmtoarele aciuni:
9 n zona Layer alegei stratul int layer sigla al crui

coninut va fi integral ters;
9 .n zona New HTML tastai textul / codul HTML care trebuie
s se afieze n cadru;
Figura 15.45
774
5. Analizai codul HTML generat (15.46).
Figura 15.46
Figura 15.47
775
Figura 15.48

workspace Layer
Cu Dreamweaver MX workspace putei schimba coninutul i formatarea
unui strat, folosind comportamentul Set Text of Layer.
Iat cum procedm pentru a nlocui coninutul unui strat, imaginea

sigla.jpg cu un text, TOAMNA i o alt imagine, autumn.jpg. Folosii
evenimentul onMouseOver pentru a declana aciunea Set Text of Layer.
1. Inserai imaginea sigla.jpg ntr-un strat.

Set Text of Layer (figura 15.49).
776
Figura 15.49
Remarc. Se afieaz caseta de dialog Set Text of Layer.
4. n caseta de dialog Set Text of Layer, executai urmtoarele

9 n zona Layer alegei stratul int layer sigla al crui

9 .n zona New HTML tastai textul/codul HTML care trebuie
s se afieze n cadru;
Figura 15.50
777
Remarc. n panoul Behaviors, Dreamweaver a completat evenimentul onMouseOver.
Desigur, dumneavoastr putei alege un alt eveniment.
5. Analizai codul XHTML generat (15.51).
Figura 15.51
Figura 15.52
778
Figura 15.53
Remarc. Iniial, stratul coninea o imagine. n timpul evenimentului onMouseOver,

coninutul su este nlocuit cu textul TOAMNA i o alt imagine (autumn.jpg).
Aplicaii
Inserai un fiier sunet n pagina dumneavoastr Web, care va fi declanat

executnd clic pe un buton-imagine sau trecnd cu mouse-ul peste acest buton.
Indicaie. Inserai o imagine-buton pentru a declana sunetul. n panoul

Behaviors alegei comportamentul Play Sound.
Controlai o animaie Flash sau Shockwave cu ajutorul comportamentului

Control Shockwave or Flash.

workspace Frame
Comportamentul Set Text of Frame v permite s nlocuii coninutul
unui cadru cu un coninut diferit i/sau atribute dedicate.
779
Iat cum procedm pentru a nlocui imaginea sigla.jpg din cadrul sus
cu textul TOAMNA i o alt imagine autumn.jpg. Folosii evenimentul
onMouseOver pentru a declana aciunea (Set Text of Frame).
1. Inserai 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, executai urmtoarele

aciuni: n zona Frame, alegei cadrul int frame sus al crui
coninut va fi ters; n zona New HTML introducei textul care
trebuie s se afieze n cadru sau codul HTML (figura 15.55).
Figura 15.55
780
5. Alegei evenimentul onMouseOver sau onClick.
Figura 15.56
Figura 15.57
781
Figura 15.58

workspace Frame
Cu Dreamweaver MX workspace putei schimba coninutul unui cadru,
folosind comportamentul Set Text of Frame.
Iat cum procedm pentru a nlocui coninutul unui cadru, imaginea

sigla.jpg cu textul TOAMNA i o alt imagine autumn.jpg. Folosii
evenimentul onMouseOver pentru a declana aciunea (Set Text of
Frame).
1. Inserai 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 afieaz caseta de dialog Set Text Frame.
4. n caseta de dialog Set Text of Frame (figura 15.61), executai

urmtoarele aciuni:
9 n zona Frame alegei cadrul int frame sus al crui

9 n zona New HTML introducei textul care trebuie s se
afieze n cadru sau codul XHTML
(exemplul nostru);
9 activai opiunea Preserve Background
Color;
Figura 15.61
5. Alegei evenimentul onMouseOver sau onClick.

784
Figura 15.62
Figura 15.63

785
Figura 15.64
Remarc. Iniial, cadrul de sus coninea o imagine. n timpul evenimentului

onMouseOver, coninutul su este nlocuit cu textul TOAMNA i o alt imagine,
autumn.jpg.
786
Dreamweaver MX Tem
Testai-v cunotinele
1. Care este ecuaia unui comportament?
2. Precizai care sunt cele trei elemente necesare pentru a defini un

comportament.
3. Descriei 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.
Vizitai site-urile
9 www.macromedia.com/exchange/dreamweaver
9 www.modernmethod.com
Conversaia 16
Creai scenarii cu Dreamweaver MX
f Dreamweaver MX workspace Creai un scenariu
f Dreamweaver MX workspace Creai o animaie simpl
f Dreamweaver MX workspace Creai o animaie curb. Aplicaie
f Dreamweaver MX workspace Creai o animaie complex. Aplicaii
f Dreamweaver MX workspace Declanai sau oprii un scenariu cu
ajutorul unui comportament
Dreamweaver MX Creai un scenariu

workspace
Puin DHTML
Pentru a da via paginilor dumneavoastr Web utilizai funciile
interactive puse la dispoziie de HTML dinamic (DHTML). V asigur c
DHTML este foarte excitant!
DHTML utilizeaz tehnici de script-are avansate pentru poziionarea

precis a elementelor i crearea unui coninut dinamic, lucru imposibil cu
HTML standard.
788
Remarci:
9 Pentru a crea animaii interactive putei alege i alte tehnologii: Java,
Shockwave i Flash.
9 DHTML permite crearea de animaii interactive direct n Dreamweaver, fr a
fi nevoii s nvai manipularea unui alt program.
Trei sunt funciile puternice ale Dreamweaver-ului care permit crearea

cu uurin a funciilor DHTML:
9 straturile;
9 comportamentele;
9 scenariile.
Remarci:
9 Pentru controlul riguros al poziiei elementelor unei pagini Web, DHTML
utilizeaz straturile (vezi Conversaia 13).
9 Comportamentele au fost prezentate n Conversaia 15, iar scenariile sunt
prezentate n cadrul acestei conversaii.
Inspectorul de scenarii Timelines

Animnd straturile, aa cum vom proceda chiar n cadrul acestei
conversaii, vei reui s evadai din lumea paginilor Web statice. Este
doar o mic provocare!
Funcia Dreamweaver numit scenariu permite crearea de animaii i

modificarea dimensiunii, poziiei, vizibilitii straturilor i a coninutului
acestora pentru o perioad de timp predeterminat.
ntruct codul surs de creare a straturilor animate este foarte

complicat, Dreamweaver l simplific prin interfaa sa prietenoas i
intuitiv. n plus, scenariile sunt uor de integrat n comportamente,
ceea ce nu este deloc puin!
Pentru a crea scenarii cu Dreamweaver MX folosii inspectorul de

scenarii Timelines.
789
Utilizai inspectorul de scenarii Timelines pentru a insera n straturile din
paginile dumneavoastr, rapid, fr stres, animaiile preferate!
Iat cum procedm pentru a afia cu Dreamweaver MX workspace

inspectorul de scenarii, panoul Timelines.
1. Executai clic pe Window Others Timelines (figura 16.1).
Figura 16.1
Remarc. Dreamweaver MX workspace afieaz 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 adugrii de comportamente animaiei
dumneavoastr.
9 Dreptunghiul rou i linia vertical asociat reprezint capul de citire; ele
permit vizualizarea deplasrii stratului n pagin.
9 FPS 15 indic numrul de imagini pe secund (15 imagini/secund reprezint
standardul Web).
9 Canalele de animaie (barele 1, 2, 3 ) permit nregistrarea fiecrei animaii.
Putei avea mai multe animaii ntr-un scenariu. Cnd vei nregistra un traseu
al stratului dumneavoastr, poziiile cheie de nceput i de sfrit vor fi vizibile
datorit imaginilor cheie (cercurile albe) din canalul de animaie.
Dreamweaver MX Creai o animaie simpl

workspace
Cu inspectorul de scenarii (Timelines) putei aduga rapid animaii

simple n paginile dumneavoastr Web.
Iat care este procedura de creare a unei animaii simple utiliznd

imagini cheie (mici cercuri albe), pe care v invitm s-o aplicai.
1. Creai un strat, numii-l (strat) iar apoi umplei-l cu text sau cu

o imagine, sigla.jpg (figura 16.3).
Figura 16.3
791
2. Plasai stratul n locul n care dorii s nceap secvena de
animaie.
3. Executai clic pe Window Others Timelines.
4. Selectai stratul iar apoi n meniul local al panoului Timelines

executai clic pe Add Object.
Remarc. Se afieaz bara de animaie Layer1 cu 15 imagini (figura 16.4).
Figura 16.4
5. Executai clic pe ultima imagine a animaiei (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
sfrit.
6. Deplasai stratul ntr-o nou poziie (figura 16.6).
Figura 16.6
Remarc. Linia din figura 16.6 corespunde traseului stratului.
7. Afiai codul Java Script generat (figura 16.7).

793
Figura 16.7
8. Executai clic n interiorul barei (1) pentru a putea urmri

evoluia animaiei.
sau,
8. Utilizai butoanele i .
sau,
8. Deplasai capul de citire 1.
Remarc. Pentru a vedea desfurarea animaiei, n panoul Timelines executai clic pe

butonul Play. inei apsat butonul Play pentru a putea vedea o micare mai lent.
794
9. Activai opiunea Autoplay (figura 16.8) pentru a demara
animaia odat cu deschiderea paginii Web.
Figura 16.8
Figura 16.9
Remarc. Stratul se deplaseaz de la prima la ultima poziie.

795
Dreamweaver MX
workspace Creai o animaie curb. Aplicaie
Adugnd imagini-cheie n mijlocul animaiei, putei defini alte poziii

ale stratului n afara celor de nceput i de sfrit.
Iat cum procedai pentru a realiza o animaie curb.
1. Realizai o animaie simpl.
2. n panoul Timelines activai opiunea Autoplay pentru a demara

animaia odat cu deschiderea paginii Web.
3. Executai clic pe o imagine-cheie n interiorul barei de

animaie.
4. n panoul Timelines, n meniul local executai clic pe Add

Keyframe (figura 16.10).
796
Figura 16.10
Remarc. n bara de animaie se afieaz o nou imagine-cheie (figura 16.11).
Figura 16.11
5. Deplasai stratul ntr-o alt poziie (figura 16.12).

797
Figura 16.12
6. Analizai codul Java Script generat (figura 16.13).
Figura 16.13
Figura 16.14
798
Remarc. Stratul se deplaseaz de la prima la ultima poziie, trecnd prin poziia
central, urmnd o curb.
Aplicaie
nregistrai un traseu pentru o animaie.
2. Executai clic pe Modify Timeline Record Path of Layer pentru a

nregistra traseul (figura 16.15).
Figura 16.15
Remarc. Dreamweaver MX workspace afieaz panoul Timelines.
3. Desenai traseul.
Remarc. Pe msur ce deplasai stratul, o linie gri se va afia pe ecran. Urmrii cum se
genereaz n mod automat noi imagini cheie reprezentate prin mici cerculee pe bara
de animaie.
799
Dreamweaver MX Creai o animaie complex.

workspace Aplicaii
Nu v mulumii numai cu o simpl traiectorie. Adugai noi bare de
animaie pentru a deplasa stratul n mai multe poziii.
2. n panoul Timelines, activai opiunea Autoplay.
3. Executai clic pe prima imagine-cheie vid dup ultima

imagine-cheie (figura 16.16).
Figura 16.16
5. n panoul Timelines, n meniul local, executai clic pe Add

Object.
800
Remarc. Dreamweaver MX workspace afieaz o nou bar de animaie (figura 16.17).
Figura 16.17
6. Executai clic pe ultima imagine-cheie (figura 16.18).
Figura 16.18
7. Deplasai stratul n ultima sa poziie.

8. Repetai paii 3 la 7 pentru a aduga noi animaii (figura
16.19).
801
Figura 16.19
9. Analizai codul Java Script generat.

10. Acionai tasta F12 pentru a testa animaia n navigator (figura
16.20).
Figura 16.20
Aplicaii
Adugai mai multe animaii n aceeai pagin.
Iat cum procedai pentru a aduga mai multe animaii n interiorul aceleiai
pagini.
2. n panoul Timelines, activai opiunea Autoplay.
3. Inserai un strat (figura 16.21).

802
Figura 16.21
4. n Timelines, n linia 2, executai clic pe imaginea-cheie, unde

trebuie s debuteze animaia.
6. n panoul Timelines, n meniul local, executai clic pe Add Object

(figura 16.22).
Remarc. Dreamweaver MX workspace afieaz o nou bar de animaie Layer2, sub

Layer1.
Figura 16.22
7. Executai clic pe ultima imagine-cheie a animaiei din linia 2 (figura

16.23).
803
Figura 16.23
8. Deplasai stratul din stnga ctre cellalt strat.
10. Acionai tasta F12 pentru a testa animaia n browser (figura 16.24).
Figura 16.24
Remarc. Cele dou animaii funcioneaz simultan.
Modificai fluxul unei animaii.
Indicaie. Viteza unei animaii este determinat de doi parametrii: numrul de

imagini pe secund i numrul de imagini utilizate pentru a se deplasa de la un
punct la altul.
Mascai periodic un strat pentru a-l face s clipeasc.
1. n panoul Timelines, activai opiunile Autoplay i Loop (figura 16.25).

804
Figura 16.25
2. Executai clic pe o imagine-cheie din cadrul barei (1) de animaie.
3. n meniul local, executai clic pe Add Keyframe.
4. Executai clic pe o imagine-cheie din cadrul barei (1) de animaie.
5. n panoul Properties, n meniul derulant, selectai hidden (figura

16.26).
Figura 16.26
Remarc. Stratul va fi mascat.
6. Executai clic pe prima imagine-cheie (bara 1).
Figura 16.27
805
Remarc. ntruct atributul visible conine valoarea inherit, stratul va fi din nou afiat.
Dreamweaver MX Declanai sau oprii un scenariu

workspace cu ajutorul unui comportament
Iat cum procedai pentru a declana o animaie cu ajutorul unui
comportament.
2. n panoul Timelines, dezactivai opiunea Autoplay.
3. Afiai panoul Behaviors.
4. Selectai elementul care urmeaz s declaneze animaia

(figura 16.28).
Figura 16.28
5. n panoul Behaviors, executai clic pe butonul Timeline

Play Timeline (figura 16.29).
806
Figura 16.29
Remarc. Dreamweaver MX workspace afieaz caseta de dialog Play Timeline.
6. n caseta de dialog Play Timeline, executai urmtoarele aciuni

(figura 16.30):
9 n zona Play Timeline selectai scenariul Timeline 1 pe

care urmeaz s-l declanai;
Figura 16.30
7. Afiai pagina Web ntr-un navigator (figura 16.31).

807
Figura 16.31
8. Executai clic pe elementul care declaneaz animaia (figura

16.32).
Figura 16.32
Remarc. Pentru a crea un element care stopeaz animaia, parcurgei etapele 1-7 i
alegei n etapa 5, comanda Stop Timeline.
808
Dreamweaver MX Tem
Testai-v cunotinele
1. Ce este un scenariu Dreamweaver?
2. Descriei pe scurt procedura de creare a unei animaii simple, curbe.
3. Cum creai cu Dreamweaver MX o animaie complex?
4. Descriei pe scurt procedura de declanare a unui scenariu cu ajutorul
unui comportament.
Vizitai site-urile
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 dmarrer 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

Conversaia 2. Creai un site Web cu Dreamweaver MX .............. 29

Conversaia 3. Introducei i formatai caracterele cu

Conversaia 4. Creai i formatai paragrafele cu

Conversaia 5. Inserai i personalizai o linie orizontal cu

Conversaia 6. Creai i utilizai foi de stiluri n cascad cu

Conversaia 7. Inserai imagini cu Dreamweaver MX ................... 273

Conversaia 8. Creai legturi cu Dreamweaver MX ...................... 329

Conversaia 9. Creai tabele cu Dreamweaver MX ........................ 383

Conversaia 10. Creai formulare cu Dreamweaver MX ................ 477

Conversaia 11. Inserai obiecte cu Dreamweaver MX ................. 543

Conversaia 12. Creai cadre cu Dreamweaver MX ....................... 585

Conversaia 13. Creai straturi cu Dreamweaver MX .................... 629

Conversaia 14. Creai biblioteci cu Dreamweaver MX ................. 671

Conversaia 15.Creai comportamente cu Dreamweaver MX ....... 741

Conversaia 16. Creai scenarii cu Dreamweaver MX ................... 787

Bibliografie ....................................................................................... 807

Creai pagini Web cu Dreamweaver MX

Dreamweaver, un editor de tip

Acum, dup ce ai creat mai multe documente (X)HTML i dup ce ai

Macromedia Dreamweaver este unul dintre acestea, la ora actual fiind

n plus, Dreamweaver poate genera i cod D-HTML; recunoate foile de

Macromedia Dreamweaver MX (ultima versiune, dup Dreamweaver 4)

Stabilii obiectivele site-ului

nainte de a v lansa n construcia site-ului dumneavoastr, ncercai s

9 Care sunt obiectivele site-ului dumneavoastr?

La prima privire, Dreamweaver poate prea descurajant! Nu se poate

Deschidei Dreamweaver MX (via Start  Programs  Macromedia 

Sub Windows, Dreamweaver MX v propune dou prezentri:

9 un spaiu de lucru integrat ntr-o singur fereastr care conine

9 un spaiu de lucru flotant care seamn cu cel de la versiunea 4

Atunci cnd lansai Dreamweaver pentru prima dat va trebui s

9 Dreamweaver MX Workspace spaiu de lucru integrat care

9 Dreamweaver MX Workspace, Home Site/Coder-Style acelai

9 Dreamweaver 4 Workspace spaiul de lucru utilizat n

Evident, spaiul de lucru este locul n care dumneavoastr elaborai

Dreamweaver 4 Spaiul de lucru

Pe ecranul monitorului dumneavoastr se afieaz fereastra

Fereastra documentului (o pagin alb al crei cod HTML este

Panoul Insert conine icon-uri pentru crearea elementelor (obiectelor)

Inspectorul de proprieti permite vizualizarea, modificarea

Panoul Launcher conine icon-uri (figura 1.6) care permit accesul

Dreamweaver MX Spaiul de lucru

Revenii la vechea interfa

1. Executai clic pe Edit  Preferences (figura 1.10).

Remarc. Se deschide caseta de dialog Preferences.

2. n caseta de dialog Preferences, n categoria General executai

3. n caseta de dialog care se afieaz (figura 1.12) selectai

Pe ecranul monitorului dumneavoastr, n spaiul de lucru Dreamweaver

9 fereastra documentului (figura 1.13).

9 fereastra Welcome (figura 1.14) care furnizeaz indicaii privind

9 grupul de panouri Insert (figura 1.16).

9 panoul Properties (Inspectorul de proprieti) situat n afara

9 bara de instrumente standard (figura 1.18).

9 grupurile de panouri nchise: Design, Code, Application,

Iat cum descoperii fereastra documentului Dreamweaver MX.

1. Executai clic pe Untitled 2 pentru a schimba pagina (figura

2. Executai clic n interiorul paginii Untitled 2 i introducei: Un

3. Afiai cele dou ferestre n cascad, via Window  Cascade

n figura 1.24 se prezint grupul de panouri Insert pentru sub-panourile

Afiai panoul Answers.

Iat care este procedura pe care v invitm s-o urmai.

1. Executai clic pe Window  Answers.

Deschidei Dreamweaver MX (via Start Programs Macromedia

1. Executai clic pe Edit Preferences (figura 1.10).

3. Afiai cele dou ferestre n cascad, via Window Cascade

1. Executai clic pe Window Answers.

1. Executai clic pe View Toolbars (figura 1.36).

1. Executai clic pe Site New Site.

1. Executai clic pe Site New Site.

1. Executai clic pe Site New Site.