Ministerul Educaiei al Republicii Moldova

Colegiul de Informatic din Chiinu

Curs de lecii
Dreamweaver MX-2004
Cuprins:
Tema 1.Interfaa aplicaiei Dreamweaver..................................................................3
1.1.PANOURI I INSPECTORI.............................................................................................6
Tema 2. Defnirea unui site......................................................................................9
2.1.DESCHIDEREA UNUI SITE DEFINIT...............................................................................11
Tema 3. Formatarea textului..................................................................................15
3.1. PALET DE CULORI..................................................................................................17
3.2.CREAREA LISTELOR.................................................................................................17
Tema 4. Stiluri CSS(Cascading Style Sheets)...........................................................18
Tema 5. Crearea tabelelor......................................................................................24
5.1.INSERAREA UNUI TABEL............................................................................................25
5.2. SELECTAREA ELEMENTELOR NTR-UN TABEL................................................................26
5.3.FORMATAREA UNUI TABEL.........................................................................................26
5.4.SCHIMBAREA DIMENSIUNILOR TABELULUI I ALE CELULELOR..........................................27
5.5.ADUGAREA, TERGEREA RNDURILOR I COLOANELOR................................................27
5.6.MBINAREA I DIVIZAREA CELULELOR..........................................................................29
Tema 6. Stabilirea Link-urilor web..........................................................................31
6.1.FORMATUL LINK-ULUI...............................................................................................32
6.2.LINK LA UN E-MAIL...................................................................................................32
Tema 7. Inserarea Imaginilor................................................................................34
7.1.INTRODUCEREA UNEI IMAGINI.....................................................................................34
7.2.SCHIMBAREA DIMENSIUNII IMAGINII.............................................................................35
7.3.INTRODUCEREA IMAGINILOR ROLLOVER.......................................................................36
7.4.BUTOANE FLASH......................................................................................................37
7.5.FLASH TEXT............................................................................................................38
7.6.BARA DE NAVIGARE..................................................................................................38
Tema 8. Utilizarea Frame-urilor (cadrelor)..............................................................40
8.1.CREAREA DE FRAME-URI...........................................................................................41
8.2.SELECTAREA FRAME-URILOR......................................................................................42
8.3.SALVAREA FRAME-URILOR.........................................................................................42
8.4.CONFIGURAREA FRAME-URILOR..................................................................................42
8.5.CONINUTUL FRAME-URILOR......................................................................................43
Tema 9. Formulare Interactive...............................................................................45
Tema10. Utilizarea abloanelor (Templates) n Dreamweaver...................................48
10.1.CREAREA ABLOANELOR.........................................................................................48
10.2.ZONE EDITABILE....................................................................................................49
10.3.UTILIZAREA TEMPLATE-URILOR.................................................................................51
Tema 11. Lucrul cu straturi...................................................................................53
2
11.1.INSERAREA UNUI STRAT...........................................................................................54
11.2.LAYER FORMAT......................................................................................................54
Bibliografe:...........................................................................................................56
Cunoaterea este o
aventur nesfrit la marginea
incertitudinii.
(Jacob Bronowski)
Tema 1.Interfaa aplicaiei Dreamweaver.
Dup lansarea aplicaiei Dreamweaver la ecran apare o fereastr cu
urmtoarele componentele fundamentale:
Bara de titlu
Conine numele programului (Marcromedia Dreamweaver MX
2004) precum !i numele documentului care va aprea "n #rowser$ul we# !i
"ntre parante%e locaia acestora precum !i numele fi!ierului "n format
3
&'M() (a marginea din dreapta pe #ara de titlu sunt #utoanele de
minimi%are ma*imi%are+restaurare !i a "nc,idere a fereastrei aplicaiei)
Bara de meniuri
Conine o list de meniuri fiecare din care conine o list de opiuni
legate logic de numele meniului) De e*emplu fc"nd un clic pe -nserare
vom vedea operaiunile legate de diferite elemente care pot fi inserate in
Dreamweaver)
Bara de instrumente Standard
Conine pictograme pentru a e*ecuta "ntr$o form imediat unele
dintre cele mai des e*ecutate operaii cum ar fi .pen /ave etc)
Bara de instrumente Document
Conine pictograme pentru a e*ecuta rapid unele operaiuni pe
care #ara de instrumente /tandard nu le include) 0ceste operaiuni permit
sc,im#area regimului de vi%uali%are al documentului &'M()
Design View
1egimul Design view permite lucrul rapid cu editorul vi%ual) 2ste
regimul predefinit "n Dreamweaver !i cel mai de utili%at)
4
Code View
1egimul Code view este utili%at pentru a putea lucra "n totalitate
cu codiul &'M() 0cesta nu permite s avem direct o referin vi%ual a
modului "n care este modificat codul)
Split view
1egimul Split permite s "mparim fereastra "n dou %one) 3ona
superioar arat codul surs !i cea inferioar editorul vi%ual) 0tunci c4nd o
sc,im#are se face "ntr$una din %one aceast sc,im#are se aplic direct pe
cealalt parte)
5
1.1.Panouri i inspectori
Dreamweaver foloseste ferestre plutitoare similare cu #arele de
instrumente care sunt cunoscute ca panouri sau inspectori) Diferena dintre
panou !i inspector este c aspectul !i opiunile din inspector pot fi
specificate "n funcie de o#iectul selectat) 5rin opiunile meniului 6indow
din #ara de meniuri este posi#il de a afi!a sau a ascunde fiecare din
panourile sau inspectorii ferestrei aplicaiei Dreamwever) (e vom precuta
pe cele mai importante)
Inspectorul de proprieti
0rat !i ne permite s modificm proprietile cele mai frecvente
care sunt folosite pentru elemente selectate) De e*emplu "n ca%ul "n care
elementul selectat este te*tul "n acesta va arta tipul de surs aliniere fie
c e vor#a de litere italice sau aldine etc) Dac facem clic pe #utonul
se desfasoar panoul cu mai multe opiuni) 0cesta va fi cu siguran
instrumentul cel mai des utili%at "n Dreamweaver)
Bara de instrumente INS!T sau panoul de o"iecte.
5ermite
s
introducem diferite elemente "ntr$un document fr a fi necesar s utili%m
meniul) 2lemente sunt clasificate "n funcie de categoria lor: ta#ele te*t
forma etc)
6
#anourile verticale interactive ale aplicaiei Dreamweaver $%&''(.
/unt aplsate de regul "n partea dreapt a ferestrei aplicaiei "n
care permit accesul la un !ir de funcii ale aplicaiei Dreamweaver)
)ncercai*
+devrat,-als
7) 5aginile 6e# sunt fi!iere cu e*tensia )&'M()
2) &osting$uri gratuite g%duiesc numai 5aginile 6e# ale companiilor
comerciale)
8) 9n -nternet pot e*ista pagini 6e# cu acela!i nume dar cu un coninut
diferit)
4) 0plicaia Dreamweaver nu permite utili%area com#inaiilor de taste)
:) ;utoanele de minimi%are !i ma*imi%are a ferestrei aplicaiei
Dreamweaver sunt pe #ara de instrumente -</21')
=) Modul de vi%uali%are a documentului poate fi sc,im#at din panoul
5roperties)
>) ?ila ?avorites "n #ara de instrumente -nsert poate fi personali%at
pentru a arta orice icoane)
@) ;ara de instrumente este flotant)
A) 1egimul de vi%uali%are !i opiunile din -nspectorul de proprieti se pot
modifica "n funcie de o#iectul selectat.
+legei rspunsul corect*
1.Butonul .n aplicaia Dreamweaver este folosit pentru a ...
a) Desc,ide o pagin 6e# e*istent
#) 0 crea o pagin 6e# nou
c) 0 "nc,ide pagina 6e# curent
&. Iconia aplicaia Dreamweaver este folosit pentru a ...
a) Desc,ide o pagin 6e# e*istent
#) 0 crea o pagin 6e# nou
c) 0 "nc,ide pagina 6e# curent
7
/. Iconia aplicaia Dreamweaver este folosit pentru a ...
a) Desc,ide o pagin 6e# e*istent
#) 0 crea o pagin 6e# nou
c) 0 "nc,ide pagina 6e# curent
(. Butonul N0 din "ara de instrumente a aplicaiei Dreamweaver
permite*
a) 0pariia unui nou document curat direct pe ecran)
#) 0pariia unei ferestre "n care vom alege tipul de document 6e#
pe care dorim s$l crem)
c) .ricare dintre cele dou variante de mai sus)
d) <ici una din variantele de mai sus)
1. #ictograma a aplicaiei Dreamweaver permite salvarea *
a) 'uturor documentelor 6e# modificate !i cele noi create)
#) Doar a documentelor noi create)
c) Doar a documentelor modificate)
d) <ici una din variantele de mai sus)
2. Com"inaia de taste Ctrl 3 4 .n aplicaia Dreamweaver este folosit
pentru a ....
a) Crea un nou document)
#) Desc,ide un document e*istent)
c) .ricare dintre cele dou variante de mai sus)
d) <ici una din variantele de mai sus)
5. #anourile 6i Inspectorul de proprieti pot fi afi6ate sau ascunse
prin meniul ...
a) -nsert
#) Command
c) 6indow
7. #rin "ara de instrumente Insert sau panoul de o"iecte ...
a) este posi#il pentru a sc,im#a modul de vi%uali%are al
documentului)
#) #utoanele sunt clasificate "n funcie de categoria lor)
c) proprietile o#iectului selectat pot fi configurate)
8. )n Dreamweaver o pagin 0e" va fi creat cu editorul vi9ual .n
modul de vi9uali9are ...
a) design
#) code
c) am#ele rspunsurile anterioare sunt corecte)
1'. #ictograma a aplicaiei Dreamweaver este folosit
pentru a:
a) trece "n regimul de lucru "n cod
#) trece "n regimul de lucru vi%ual)
c) se introduce o imagine)
8
11. !egimul design view ...
a) este vi%uali%area implicit a paginilor 6e# "n Dreamweaver)
#) este cel mai frecvent utili%ate mod de vi%uali%are a paginilor 6e#
"n Dreamweaver)
c) 0m#ele rspunsuri anterioare sunt corecte)
d) 'oate cele trei rspunsurile anterioare sunt incorecte)
Tema &. Definirea unui site
9n aceast seciune vom vedea ce repre%int un site we" cum s
crem !i s gestionm un site we# cum s modificm proprietile unui
document &'M()
Bn site we# este o mulime organi%at de pagini 6e#; legate unele de
altelei cu un design similar !i un o#iectiv comun) 2ste necesar de a ela#ora
!i de a planifica site$ul we# "nainte de a crea paginile 6e# care vor fi
cuprinse "n acest site)
9n mod tradiional pentru a ela#ora un site este necesar de a crea
un dosar pe discul local. Documente &'M( sunt de o#icei create "n acest
dosar care pot s conin imagini animaii foi de stil etc) 0lte dosare noi
"n cadrul acestuia urmea% s fie create cu o#iectivul de a avea o mai
#una organi%are paginilor 6e# timpul lucrului)
2ste convena#il ca pagina de start a site$ului s se numeasc
inde<.=tm sau inde<.=tml; pentru
c #rowserele cut"nd o pagin cu
acest nume va "ncerca s accese%e
un B1( generic)
De e*emplu dac am scris
=ttp*,,www.>a=oo.com "n #rowser
acesta va "ncerca s "ncarce pagina
=ttp*,,www.>a=oo.com,inde<.=tm
!i va afi!a eroare "n ca%ul c"nd
pagina cu numele inde<.=tm nu
e*ist)
.dat ce folderele "n care
se va forma un site local sunt create
este posi#il s se defineasc site$ul
"n Dreamweaver)
5entru aceasta este necesar de a selecta meniul SIT; apoi
opiunea $anage Sites...)
9
5rin intermediul panoului de fi!iere apoi fila -I?S; este posi#il de
a accesa fiecare dintre site$urile create !i opiunea $anage Sites
9n ca%ul "n care am selectat opiunea $anage sites; apare o
fereastr care conine lista de site$uri locale definite anterior)
Desigur pot e*ista mai multe site$uri locale definite pe acela!i
calculator)
Dac este aleas opiunea New sau "n ca%ul "n care este aleas
opiunea dit se va afi!a aceea!i fereastr ca "n ca%ul "n care
caracteristicile site$ului vor fi definite)
Caracteristicile site$ului sunt grupate "n diferite categorii care apar
pe st4nga)
5entru a vi%uali%a caracteristicile unei Categor> tre#uie doar s o
selectm fc4nd clic pe ea)
/ vedem datele pentru a edita categoria ?ocal Info.
Site name este numele site$ului definit iar ?ocal root folder este
locul unde vei gsi site$ul pe ,ard disCul local)
0poi dac este necesar prin intermediul categoriei Site $ap
?a>out poate fi definit pagina de pornire a site$ului de care va depinde
restul de documente &'M( din interiorul site$ului "n ca%ul "n folderul
rdcin a site$ului e*ist o pagin cu numele: inde*),tm sau inde*),tml
Dreamweaver o va selecta)
0ceste trei caracteristici sunt eseniale atunci c4nd va fi definit un
site local) Dup completarea tuturor datelor facem clicC pe #utonul .D
pentru a desc,ide site$ului)
10
2.1.Deschiderea unui site definit.
5entru a desc,ide un site definit anterior pe calculatorul local tre#uie sa
mergeti la meniul SIT; selectai opiunea $anage Sites...) !i selectai
site$ul din lista de site$uri apoi clicC pe #utonul Done.
0m putea s utili%m de
asemenea panoul -iles apoi s
selectmi site$ul pentru a desc,ide "n
meniul derulant din fila ?iles)
2ste posi#il de a vi%uali%a un site "n
panoul ?iles sau "ntr$o fereastr)
5anoul -iles poate fi desc,is prin meniul 0indow; apoi opiunea
-iles sau aps4nd -7.
5entru a sc,im#a regimul de vi%uali%are tre#uie s apsm #utton
situat "n partea de sus a panoului)
9n acela!i timp putem vi%uali%a site$ul local serverul de testare de
la distan sau ,arta site$ului)
9n aceast imagine este o vi%uali%are a ,arii site$ului si a site$ului
local)
9n acest ca% documentele test1.=tm !i test&.=tm sunt legate la
documentul inde<.=tm; deoarece aceasta a fost definit ca pagina de
pornire a site$ului !i coninutul linC$ul acesta la celelalte dou)
11
Dac fi!ierele vor fi mutate "n alte dosare sau i!i vor sc,im#a
numele paginile nu vor fi corect afi!ate) <u vor fi vi%uali%ate imaginile linC$
urile nu vor funciona etc )
Dac aceste modificri sunt efectuate "n interiorul Dreamweaver
sau prin intermediul site$ului avem posi#ilitatea s actuali%m paginile "n
mod automat pentru c "n ca%ul "n care se face referire la un o#iect care sa
sc,im#at putem evita erori)
12
C4nd modificm un o#iect la care se face referire de un alt
document se vor pre%enta "ntr$o fereastr similar cu acesta ce indic
documentele care fac referiri la acest o#iect !i poate fi actuali%ate pentru a
evita erorile) 're#uie doar sa facem clic pe @pdate.
2ste recomanda#il s se defineasc site$uri omogene astfel "nc"t toate
paginile unui site s ai# acela!i format la fel aceea!i culoare de fundal cu
acela!i font etc ))
5utem defini fiecare format de pagina prin #age properties; pe
care o putem desc,ide "n trei moduri diferite:
0ps4nd tastele Ctrl 3A.
?c"nd clicC pe meniul $odif> !i select"nd opiunea #age
#roperties.
?pc"nd clic dreapta pe partea de Eos a paginii la sf4r!itul
meniului conte*tual va aprea opiunea #age #roperties. Fi
aceasta fereastra de dialog va aprea)
5roprietile sunt organi%ate prin intermediul unor categorii:
Title* 0cesta este titlul documentului) 2ste scris "n titlu #rowser$
ului !i "n fereastra documentului din Dreamweaver)
-n categoria 0ppearance a!a cum ai v%ut "n imaginea precedent vom
gsi proprieti:
BacBground image * 5ermite specificarea unei imagini de
fundal pentru documentul &'M() 0ceast imagine apare "n mo%aic) 9n
momentul selecrii imagini de fundal este important s o#servmi c "n
conformitate cu imaginea de culori va fi necesar s se sta#ileasc anumite
13
culori specifice pentru te*t)) Fi nu este recomenda#il s fie un G-? animat
ca un fundal)
BacBground color * 5ermite specificarea unei culoari de fundal
pentru documentul &'M( dar aceast culoare se va afi!a numai "n ca% de
un fond de culoare care nu au fost "nc sta#ilit)
Si9e* 2ste folosit pentru a defini dimensiunea fontului)
Te<t color * este culoarea fontului)
$argins * 5ermite sta#ilirea marginilor "n document) Marginile
de st4nga !i de sus vor funciona numai lucr"nd cu Microsoft -nternet
2*plorer "n timp ce marginile de lime !i "nlime vor lucra numai cu
<etscape <avigator) <ici unul dintre aceste margini nu sunt "n fereastra
documentului "n Dreamweaver acestea sunt doar "n #rowser)
9n (inCs vom gsi proprieti:
?inB color* este culoarea linC$ului care aEut utili%atorii s fac
distincia "ntre te*t normal !i linC$uri conectate la alte pagini)
Visited linBs* este culoarea linC$ul ui vi%itat care permite
utili%atorului s deose#easc linC$uri vi%itate precum !i nevi%itate)
+ctive linBs* este culoarea linC$ului activ)
@nderline st>le* 0tunci c4nd avem un te*t legat te*tul este
su#liniat cu aceast opiune putem folosi un alt tip de stil de e*emplu
pentru a nu su#linia cuv4ntul)
9n categoria 'racing image vom gsi urmtoarele proprieti:
Tracing image* <e permite s sta#ilim o imagine ca imagine de
fundal a documentului dar acesta va aprea doar "n fereastra documentul
14
Dreamweaver !i niciodat ca imagine "n #rowser) 2ste folosit ca un element
grafic !a#lon pentru a crea documentul)
Transparenc>* 5ermite s se sta#ileasc opacitate pentru
imaginea de urmrire)
)ncercai*
+devrat,-als
7) Hi%uali%area fi!ierelor unui site se reali%ea% prin panoul /ite sau "ntr$o
fereastr)
2);utonul serve!te la comutarea modului de vi%uali%are paginilor 6e#
ale site$ului)
8) ;utonul serve!te pentru a vedea ,arta (structura) site$ului)
4) 9n ca%ul "n care paginile 6e# ale unui site definit se mut dintr$un dosar
"n altul "n afara celui definit "n Dreamweaver 5aginile 6e# din acest site
oricum se vor afi!a corect)
:) (a ela#orarea unui site nu contea% volumul paginilor 6e# !i spaiul de
memorie ocupat de ele)
=) 2ste #ine dac toate paginile 6e# ale unui site vor avea acela!i format
!i stil)
+legei rspunsul corect*
1. 4 imagine de urmrire CtracBingD este folosit pentru a ...
a) Crea un meniu
#) /ta#ili o imagine de fundal care nu vor aprea la vi%uali%area "n
#rowser
c) Cuta imagini pe internet atunci c4nd facem clic pe ea)
&. Butonul a aplicaiei Dreamweaver serve6te la ...
a) Crearea unui site nou)
#) Comutarea modului de vi%uali%are a site$ului)
c) 0legerea unei culori pentru un element din pagina 6e#)
/. Culorile care respect anumite condiii ergonomice pe we" sunt ...
a) culori care nu afectea% sntatea oc,ilor)
#) imagini de fundal pentru pagini)
c) sunt pre%entate "n acela!i mod "n Microsoft -nternet 2*plorer si
<etscape <avigator)
d) <ici una din variantele de mai sus)
(. Culorile .. . .
a) sunt repre%entate cu un numr "n format ,e*a%ecimal)
#) poate fi definite prin nume )
c) 0m#ele opiuni de mai sus sunt adevrate)
d) <ici una din opiunile de mai sus)
15
Tema /. -ormatarea te<tului
-ormatul pentru un te*t selectat poate fi definit prin meniul Te<t;
precum !i prin intermediul inspectoru Iui de proprieti. Hom vedea
alternativele oferite de ctre inspectorul de proprieti; de!i acestea sunt
mai mici dec4t ofertele meniul Te<t.
-ormat*
'itlurile sunt utili%ate pentru a sta#ili titlurile "n interiorul unui
document) ?ormatele preformatate fac ca te*tul s apar cum aceasta a
fost scris) De e*emplu dac "ntre dou cuvinte pe care le introducem sunt
mai multe spaii este considerat doar unul singur doar atunci c4nd sta#ilii
formatul preformatate spaiile nu vor fi sc,im#ate)
-ont* permite s selectm un
set de fonturi) 2*ist seturi de fonturi "n loc
de unul singur pentru c este posi#il ca "n
ca%ul "n care ai setat doar un font
utili%atorul nu ar fi putut avea acel font "n
5C$ul lor) Deci dac selectm un set de
fonturi "n ca%ul "n care utili%atorul nu are un
font altul se aplic din setul selectat ) De
e*emplu dac vom alege Arial, Helvetica,
sans-serif, vom vedea te*t cu Arial font
dar "n ca%ul "n care nu e*ist vom vedea te*tul din Helvetica.
Si9e* 5ermite s modificm dimensiunea te*tului)
5utem indica dimensiunea "ntr$o varietate de uniti cum ar fi pi*eli
centimetri etc)
Color* 5ermite s selectm culoarea fontului
ignor4nd culoarea definit "n proprietile paginii) 9n ca%ul "n care nici o
culoare nu a fost sta#ilit aici sau "n proprietile paginii te*tul va fi de
culoare neagr "n mod implicit)
St>le* 0ceste #utoane permit s sta#ilim dac te*tul va fi
aldin sau cursiv) 5rin meniul Te<t avem posi#ilitatea s su#liniem te*t !i s
facem multe alte lucruri) 0ceast opiune nu este "n panoul 5roperties)
2ste rar folosit deoarece "n pagina 6e# linC$urile sunt su#liniate !i
su#liniind te*tul normal ar putea face utili%atorii s cread c este un linC)
16
+lign* +linierea* 5rin intermediul acestor #utoane
este posi#il s se sta#ileasc alinierea te*tului "n patru moduri diferite:
st4nga centru dreapta !i Eustificate)
?ist* ?ista* 0ceste #utoane v permit s creai liste cu
marcatori sau enumerate)
Te<t indent* 0ceste dou #utoane ne permit s identm
un te*t sau s anulm identarea) -dentarea te*tului este un fel de margine
care este sta#ilit pe am#ele laturi ale unui te*t)
3.1. Palet de culori.
5entru a asocia culorile avem nevoie de a
desf!ura o o astfel de palet de culori)
C4nd selectai o culoare din paleta de
culori valoarea ,e*a%ecimal a culorii este
afi!at "n colul din st4nga sus)
5aleta de culori Dreamweaver
conine 2:= culori pentru we#) 0cestea
sunt culorile "n Microsoft -nternet 2*plorer !i
"n <etscape <avigatorpe platforme
6indows !i Macintos,)
0vem posi#ilitatea s particulari%mi culori prin intermediul #utton din
colul din dreapta sus al paletei)
(a fel avem posi#ilitatea s atri#uim culori prin #utonul )
0ceste #utoane apar "n inspectorul de proprieti ale multor o#iecte !i
de asemenea "n mai multe ferestre care ne permit s specificam proprieti (te*t
sau ta#ele) la fel ca #age properties.
Culoarea poate fi inserat "n dou moduri) Bnul dintre aceste metode este
fc4nd clic pe ta#$ul gri pentru a afi!a paleta de culori. 0lt mod este prin
introducerea numrului ,e*a%ecimal al culorii direct "n fila al#) De e*emplu dac "n
paleta de culori; care este "n aceast pagin am selecte culoarea al#astru cu E
//88-- valoare culorii ar fi a!a: )
17
3.2.Crearea Listelor
5utei insera te*t su# form de list !i aceast list poate fi
enumerate sau cu marcatori)
5entru a crea o list dintr$un te*t introdus anterior "n document
tre#uie doar sa selectm te*tul !i clic pe opiunea lista adecvat prin
intermediul inspectorului de proprieti; sau prin intermediul meniului
Te<t ))
(ista #ullet (neordonate cu marcatori) este selectat prin intermediul
#utonului "n timp ce lista ordonat este selectat prin intermediul
#utonului )
<emplu de list enumerat CordonatD*
Bn sistem informatic include:
7) &ardware:
7) placa de #a%a
2) procesor
8) memorie
4) ,arddisC
2) /oftware:
o (inu*
o 6indows
o ./+2
o Bni*
2. /oftware de aplicatie:
HisualCII
Java
/K(
CorelDraw
<emplu de list cu marcatori
CneordonatD*
C4ine
5isic
5asari
o Canar
o 5apagal
&amster
5entru a sta#ili o list im#ricat in interiorul altei liste cum ar fi e*emplele
anterioare avem nevoie s adm o liniu te*t (identare) la elementele din
lista din care dorim s fac parte lista im#ricat)
5rin meniul Te<t; apoi opiunea list; este posi#il de a accesa
proprietile listei selectate) 2ste necesar de a selecta "n preala#il lista de
te*t sau fi*m cursorul "n orice parte a listei pentru a activa acest
su#meniu)
9n fereastra de proprieti a listei putem specifica tipurile de list
(cu numere sau marcatori) tipul de numere sau marcatori
18
Tema (. Stiluri CSSCCascading St>le S=eetsD
9n meniul Te<t !i apoi opiunea de St>le; e*ist un set de stiluri predefinite
care pot fi aplicate la te*tul selectat)
5utem defini un alt set de stiluri aplica#ile la paragrafe sau cuvinte
selectate) 0ceste noi stiluri numite Stiluri CSS; sunt folosite pentru a
com#ina un set de atri#ute ale te*tului $ pot fi culoarea sau dimensiunea
a!a c nu este necesar o atri#uire de fiecare dat c4nd dorim s repetm
atri#uirea acestor valori identice sau altor pri ale te*tului) Multe dintre
aceste opiuni pot fi folosite la fel !i pentru a defini atri#utele imaginilor alte
caracteristici nu ne permit s definim stiluri &'M( cum ar fi culoarea de
fundal pentru te*t etc)
/tilurile C// sunt "n mod automat actuali%ate "n foile de stil (numite
!i foi de stil "n cascad) sunt utili%ate pentru a com#ina un set de atri#ute
de te*t ca de e*emplu culoarea sau dimensiunea deci nu este necesar s
se atri#uie aceste atri#ute unul c4te unul de fiecare dat c"nd dorim s
repetm atri#uirea valorilor identice sau altor pri ale te*tului) Multe dintre
aceste opiuni pot fi folosite precum !i pentru a defini atri#ute ale imaginilor
alte caracteristici nu v permit s definii stiluri &'M( cum ar fi culoarea de
fundal pentru te*t etc
2ste posi#il s aplicm un stil "n toate etic,etele &'M( de acela!i
tip de e*emplu etic,eta a =ref; care corespunde cu ,LperlinC$urilor) 9n
acest fel toate ,LperlinC$urile ar avea un aspect definit "n acest stil)
Bn stil C// este nu mai mult dec"t un set de reguli are controlea%
aspectul coninutului unui site we#) /tilurile C// dau fle*i#ilitate si control la
vi%uali%area o pagin de la po%iia e*act a elementelor pentru tipurile de
font !i stiluri specificate)
Bnul dintre marile avantaEe ale stilurilor C// este faptul c acestea
au o capacitate de actuali%are atunci c4nd se actuali%ea% un stil C//
formatul tuturor documentelor cu acest stil sunt actuali%ate automat)
19
De%avantaEul de a lucra cu foi de stil este c unele #rowsere nu le pot
susine aceste #rowsere sunt de o#icei cu versiuni mai vec,i dar acest
lucru se va "nt4mpla foarte rar)
Cu Dreamweaver MX 2004 mai nou este faptul c caracteristicile
care se aplic la un te*t creea% automat stiluri C// care sunt incluse "n
documentul de la po%iia curent)
/ vedem c:
#entru a crea un Stil CSS personali9at*
7) 9n document selectm te*tul pe care dorii s se aplice
caracteristicile specifice)
2) 9n inspectorul de proprieti va tre#ui s modificm toate
proprietile formatului de te*t !i de a sta#ili atri#utele fontului pentru
paragraful dorit)
Dreamweaver va crea automat un nou stil cu numele stLle7 sau /tLle2 sau
/tLle8 ))) "n funcie de numele create !i stiluri)
0cesta va aprea cu numele: st>le1 "n fereastra inspectorului de
proprieti)
Avem posibilitatea, de asemenea, de a sc,im#a numele stilului este
preferabil ca stilul s aib un nume care se refer la tipul de tet la
care aceasta va fi aplicat! "entru a face acest lucru, vom desf#ura
lista de stiluri #i selectm op$iunea de modificare) % fereastra de dialo&
va aprea pentru a introduce noul nume ca 'n ima&inea de mai (os!
5utem apoi scrie noul nume fr spaii goale) 9n acest ca%:
redst>le.
20
C4nd facem clic pe .D vom vedea un panou cu re%ultatele)
9nc,idei aceast fereastr)
9n acest fel putem crea un stil !i aduga la un document)
?iecare stil nou care este creat se adaug la lista de stiluri !i le
putem accesa rapid prin meniul Te<t apoi opiunea CSS St>les.
9n panoul Design putem s verificm c noul stil a fost adugat "n mod
automat)
#entru a aplica un Stil CSS personali9at*
9n document selectm te*tul la care dorim s se aplice un stil
C// sau plasm mouse$ul pe paragraful unde tre#uie aplicat stilul) Dac
selectm un #loc de te*t din interiorul unui paragraf stilul CSS va afecta
numai #locul selectat)
9n -nspectorul de 5roprieti$v s selectai stilul create de noi din
lista care apare atunci c4nd se desf!ura fereastra /tLle)
/tilurile create sunt grupate "n stiluri situate "n acela!i document
nostru dar am putea folosi !i stiluri situate "n fi!iere e*terne pentru
document) 0ceasta este o particularitate util atunci c4nd proiectm un site
we# cu mai multe pagini pentru a permite s definim o foaie de stiluri
utili%at "n toate paginile site$ului)
/ vedem cum funcionea% stilurile
prin intermediul panoului Design fila CSS
st>les care poate fi desc,is prin meniul
0indow; opiunea CSS st>les) De asemenea
prin apsarea S=ift 3 -11.
5entru a simplifica e*plicaiile vom
apela panoul C// stLles "n panoul Design)
)n acest panou &sim stilurile
asociate documentului, #i foile de stil,
21
precum #i butoanele din partea inferioar care ne permit a
face modificri 'n stiluri!
5entru a utili%a stilurile dintr$o foaie de stiluri va tre#ui s ata!m foaia
de stilulri la document) 5entru a face acest lucru facei clic pe #utonul )
Ha fi afi!at urmtoarea fereastr:
9n ?ile + B1($ul tre#uie s specificm calea !i numele foii de stiluri)
5utem selecta linC$ul sau s importm foaia de stiluri)
Dac alegem opiunea (inC foaia nu va fi inserat dar se va aduga
o referin la pagin astfel "nc4t atunci c4nd se face o sc,im#are acest
lucru se va vedea automat "n toate paginile care utili%ea% aceast foaie)
Dac alegem de import foaie este inclus "n pagin)
Dup ce facem clic pe .D foaia de stiluri va fi "n panoul C//
/tLles)
5entru a crea un stil nou "n interiorul unei foi vom selecta panoul
cu /tiluri !i clic pe #utonul care este folosit pentru a crea un nou stil "n
foaia de stiluri selectat sau "ntr$una no)
?ereastr care apare este:
9n aceast fereastr pute specifica numeleCNameD stilului (fr
spaii !i "ncep4nd cu un punct))
22
5rin Class avem posi#ilitatea s specificm dac stilul va fi unul
personal) 5rin Tag avem posi#ilitatea s modificm o etic,et a unui atri#ut
e*istent !i "n numele &'M( lista de etic,ete care pot fi redefinite cum ar fi
organism un forma masa etc avansata ne permite s redefineasc
formatul de o com#inaie etic,ete M)
5rin Define in* este determinat dac stilul este adugat la foaia de
stil a documentului (',is document onlL) dac o foaie de noi stiluri se
adaug (<ew /tLles /,eets ?ile) sau "n ca%ul c"nd foaia de stiluri selectat
este adugat)
Dup ce facem clic pe #utonul 4F; vom avea o fereastr ca
aceasta prin care vom defini stilul:
5rin selectarea diferitor categorii avem posi#ilitatea s specificm
proprieti diferite a!a cum multe din ele nu ar fi putut fi selectate prin
panoul 5roperties) De e*emplu prin intermediul categoriei BacBground;
avem posi#ilitatea s specificm culoarea de fundal pentru un paragraf de
te*t sau pentru "ntreaga pagin)
5entru a modifica un stil creat anterior este necesar s selectm stilul
de modificat "n lista de stiluri de a panoului !i facem clic pe #utonul !i
fereastra deEa descris va fi desc,is)
5utem desc,ide de asemenea aceast fereastr prin clicC$dreapta "n stilul
"n panoul CCS St>les; select"nd drop$down panel !i select4nd opiunea
dit.
C4nd dorim s !tergem un stil din foaia de stiluri selectm stilul de pe
lista din panou !i facem clic pe #utonul )
23
)ncercai*
+devrat,-als
7) Caracteristicile te*tului nu pot fi modificat prin inspectorul de proprieti)
2) 'e*tul "ntr$o pagin 6e# poate fi aliniat)
8) ;utonul din -nspectorul de proprieti face ca te*tul s apar cu
litere aldine ("ngro!ate))
4) Modul de enumerare sau marcatorii unei liste pot fi modificate)
:) 0ctuali%area automat a stilurilor C// ata!ate unei pagini 6e# nu este
posi#il)
=) 'oate #rowserele accept foi de stiluri C//)
+legei rspunsul corect*
1. CGnd selectm un font ...
a) apare un grup de fonturi "n loc de unul singur)
#) fontul tre#uie s fie descrcat de pe -nternet)
c) tre#uie s fie un font Macromedia
&. Butonul din Inspectorul de proprieti a aplicaiei Dreamweaver
serve6te la ...
a) crearea unei liste ordonate)
#) crearea unei liste neordonate)
c) se aplic liniua de te*t)
/. Stilurile CSS ...
a) sunt aplica#ile doar pentru paragrafe)
#) sunt aplica#ile "n ca%ul cuvintelor selectate)
c) 0m#ele variante de mai sus)
d) <ici una din variantele de mai sus)
(. -oile de stiluri CSS .. . .
a) nu sunt actuali%ate automat)
#) permit s se aplice un stil pe toate etic,etele de acela!i tip)
c) 0m#ele variante de mai sus)
d) <ici una din variante de mai sus)

Tema 1. Crearea ta"elelor
9n aceast tem vom vedea cum s lucrm cu ta"ele. Hom afla cum s
introducei ta#ele "m#inm celule insera r4nduri sau coloane !i cum s
modificmi dimensiunea #ordurilor)
-mplicit toate o#iectele sunt aliniate pe partea stanga a paginii 6e#) Dar
datorit ta#elor este posi#il s distri#uim te*tul "n cadrul paginii pune imagini
l4ng un #loc de te*t !i multe alte lucruri care nu se pot face fr e*istena
ta#elelor) 9n pre%ent cele mai multe site$uri we# sunt #a%ate pe ta#ele iar acest
lucru se datorea% faptului c ele sunt foarte utile la momentul de "m#untire
a opiunilor de proiectare)
24
'a#elele sunt formate dintr$un set de celule ce sunt distri#uite "n
r4nduri !i coloane) Mai Eos avem un e*emplu de ta#el:
5.1.Inserarea unui tabel
5entru a insera un ta#el vom accesa meniul Insert; apoi opiunea
Ta"le.
9n fereastra nou va tre#ui s specificm numrul de rGnduri C!owsD !i
coloaneCColumnsD; !i limea a ta#elului)
?imea poate fi definit "n pi<eli sau ca procent. Diferena dintre
acestea este faptul c limea in pi<eli este "ntotdeauna acela!i indiferent
de dimensiunea ferestrei #rowser$ului "n care sunt vi%uali%ate paginile "n
$atematica Informatica +lteDiscipline
0lge#ra
Geometrie
(ogica
5rogramare
'ur#o5ascal
o ?ilosofia
o 5si,ologia
;orlandDelp,i>
(im#aEul C
(im#aEul CII
(im#aEul Java
-nformatica'eoretica
Metode<umerice
'eoriaGrafurilor
0lgoritmica/i5rogramare
5roiectare 6e#
;a%e de Date
Grafica pe
calculator
25
timp ce limea "n #rocente arat dimensiunea "n procente din fereastra
#rowser$ului care va fi ocupat de ta#el !i se aEustea% la dimensiunea
ferestrei #rowserului)
Border t=icBness indic grosimea frontierei (#ordurii) ta#elului "n
pi*eli) -t is assigned a one (7) #L defect) 9i este atri#uit implicit valoarea (7))
Cell #adding indic spaiul dintre coninutul celulelor !i a #ordurilor
lor)
Cell Spacing indic spaiul dintre celulele ta#elului)
0ntetul pentru ta#el poate fi sta#ilit de asemenea si este
recomanda#il a se folosi la "n ca%ul utili%atorilot care utili%ea% cititoare de
ecran) Cititoare de ecran citiesc antetele !i aEut utili%atorii s urmreasc
informaiile ta#el) Dac vrem s inlcudem un titlu vom indica acest lucru "n
opiunea Caption N titlul care va fi afi!at "n afara ta#elului) 9n +lign
caption vom indic alinierea titlului fa de ta#el)
5.2. Selectarea elementelor ntr!un tabel.
2*ist multe modaliti de a selecta un ta"el. Bna dintre acestea este prin
meniul $odif>; prin plasarea indicatorul "n ta#el sau prin desf!urarea
meniul conte<tual din ta#le fc4nd clic dreapta pe ea) 9n am#ele ca%uri
vei vedea opiunea Ta"le; prin care putem selecta opiunea Select ta"le)
5.3."ormatarea unui tabel
5roprietile ta#elului sunt specificate prin intermediul inspectorului de
proprieti)
26
5rin inspectorul de proprieti putem modifica valorile specificate
c4nd introducem un ta#el) 9n acela!i timp putem indica !i altele cum ar fi
valoarea lui +lign (care permite s se alinie%e ta#elul la st4nga miEloc sau
la dreapta) culoarea de fundal "acBgroundl; sau pe imaginea de fundal)
Dac selectm o celul sau un set de celule "n inspectorul de proprieti
vom putea preci%a alte culori)
9n partea de sus a inspectorului de proprieti "n acest ca% este
posi#il de a specifica proprietile te*tului care va fi inserat "n celula
selectat (sau celulele selectate)) 5artea inferioara este folosit pentru a
specifica valori pentru fiecare celul cum ar fi culoarea sau imaginea de
fundal culoare #ordurii etc) Dou opiuni care ar putea fi necesar eventual
de a se folosi frecvent vor fi Hor9 !i Vert; care definesc coninutul celulei "n
form ori%ontal sau vertical)
5.#.Schimbarea dimensiunilor tabelului i ale celulelor
Dup cum !tim limea unui ta#el poate fi definit "n pi<eli sau "n
procente. Mrimea ta#elului utili%"nd inspectorul de proprieti va fi
specificate de ctre valorile de 0 (lime) !i H (inaltime)) 9n mod normal
doar limea este specificat nu !i "nlimea)
Halorile 0 si H a unei celule sunt "ntotdeauna specificate "n pi<eli.
Dimensiunile ta#elului !i celulelor pot fi specificate nu numai prin
inspectorul de proprieti; dar !i prin glisarea mouse$ului apsat pe orice
frontier !i trg4nd$o "n po%iia dorit)
27
5.5.$du%area& ter%erea r'ndurilor i coloanelor
2*ist multe modaliti de adugare !i de 6tergere a r4ndurilor !i
coloanelor unui ta#el)
5rimul lucru care tre#uie fcut este s plasm mouse$ul "ntr$o
celul sau s selectm mai multe celule !i desf!urm meniul conte<tual
fc4nd clic dreapta sau putem accesesa meniul $odif>. 9n am#ele ca%uri
vom vedea opiunea Ta"le. 9n funcie de celulele selectate unele dintre
opiunile Ta"le vor putea fi utili%ate iar altele nu)
5entru a insera un r4nd sau o coloan vom face un clic pe una din
opiunile Insert row sau Insert column.
5utem conta de asemenea pe opiunile Insert rows sau Insert columns
C4nd selectm aceast opiune vom vedea o nou fereastr "n care putem
specific ace vom insera: r4nduri sau coloane numrul acestora precum !i
po%iia lor)
28
5entru a !terge un r4nd sau o coloan doar plasm mouse$ului "n r4ndul
sau coloana pe care dorii s o !tergem selectm Delete row or Delete
column din meniul Ta"le)
De
asemenea putem selecta r4ndul sau coloana pe care dorim s o !tergem
!i apsm tasta D?)
29
5.(.)mbinarea i di*i+area celulelor
2ste posi#il s se insere%e ta#ele "n alte ta#ele)) 0cest lucru se nume!te
ta#ele Nest Cta"ele im"ricateD. 5entru a crea ta#ele im#ricate tre#uie
doar sa plase%e mouse$ului "n celula "n care dorim s inserm ta#elul nou
!i inserm ta#elul)
)m"inarea de celule const din conversia a & sau mai multe
celule .ntrIuna singur. 0ceasta va !terge frontiera de separare "ntre
celulele !i ele vor deveni una) 0cest lucru poate fi util utili%"nd primul r4nd
pentru a scrie titlul ta#elului) 9n acest ca% va tre#ui s "m#inm toate
celulele din primul r4nd "ntr$una singur)
Bna dintre modalitile de divi9are !i .m"inare a celulelor este
utili%"nd inspectorul de proprietile.
9n ca%ul "n care sunt alese mai multe celule ele pot fi .m"inate
fc4nd clic pe #utonul din inspectorul de proprieti sau select"nd
opiunea $erge cells din opiunea Ta"le) (a care se poate aEunge prin
meniul conte<tual al ta#elului !i prin meniul $odif>.
5entru a divi9a o celul tre#uie s facem clic pe #utonul din
inspectorul de proprieti; sau pe Split cell din su#meniul Ta"le.
9n am#ele ca%uri vom vedea o fereastr ca aceasta "n care tre#uie
s preci%m dac celula va fi "mpri "n ctre r4nduri sau coloane !i
numrullor)
)ncercai*
+devrat,-als
7) 'a#elele sunt formate dintr$un set de celule !i distri#uite "n r4nduri !i
coloane)
2) (imea unui ta#el nu poate fi definit "n procente)
8) Bn ta#el poate fi aliniat la st4nga dreapta sau la centrul unei pagini
6e#)
4) Coninutul unei celule poate fi aliniat "n acela!i timp pe ori%ontal !i pe
vertical.
:) <u este posi#il de a insera ta#ele "n interiorul unei celule din alt ta#el)
=) Modul e*tins de ta#ele este utili%at pentru a defini pagini cu un coninut
30
voluminos)
+legei rspunsul corect*
1. Butonul din Inspectorul de proprieti serve6te la ...
a)))) inserarea unei coloane)
#) ))) divi%area celulelor)
c) ))) "m#inarea celulelelor)
&. )m"inarea celulelor ...
a) 2ste posi#il doar a celulele adiacente)
#) D ca re%ultat o celul)
c) 0m#ele opiuni de mai sus)
/. Inserarea rGndurilor are loc ...
a) ))) numai su# selecie)
#) ))) numai la dreapta de selecie)
c) 0m#ele variante de mai sus)
d) <ici una din variantele de mai sus)
(. Coloanele unui ta"el ...
a) nu pot fi eliminate)
#) sunt formate din celule)
c) 0m#ele variante de mai sus
d) <ici una din variantele de mai sus
Tema 2. Sta"ilirea ?inBIurilor we".
Hom precuta acum pentru linBIuri we" unde sunt folosite !i
pentru cum le crem deoarece acestea sunt un element esenial pentru
orice site we#)
Bn ,LperlinC sau linC$ul este doar o cone*iune care ne
direcionea% la o alt pagin sau un fi!ier atunci c4nd facem clic pe el)
0vem posi#ilitatea s atri#uim unui linC un te*t o imagine sau o
parte a unei imagini)
2*ist diferite ci de acces atunci c4nd se define!te un linC)
!eferine a"solute* <e conduce la o locaie e*tern a site$ului "n
ca%ul "n care dosarul este) locaie este "n internet de e*emplu:
J=ttp*,,www.google.comJ.
!eferine relative la un site* <e conduce la un dosar situat "n
interiorul site$ului fa de locaia fi!ierului real)
!eferine relative la un fi6ier* <e conduce la un fi!ier situat "n
interiorul acela!i site la un document de real dar "ncep4nd cu directorul "n
care este situate fi!ierul)
+ncore* <e conduce la o ancora "n interiorul unui fi!ier care
poate fi un curent sau oricare alta) 5entru a face acest lucru linC$ul ar putea
fi M nameKofKfile.e<tensionEnameKofKanc=or MJ. 0ncora este definit "n
interiorul unui fi!ier prin meniul Insert; apoi opiunea Named +nc=or)
31
Cel mai u!or mod de a crea un linC este prin inspectorul de
proprieti. 5entru a reali%a acest lucru tre#uie s selectm te*tul sau
o#iectul care va fi folosit ca un linC !i accesm opiunea ?inB in
inspectorul de proprieti) De e*emplu aici e*ist un linC ctre
www.elpais.es; care este o referin a#solut deci va conine HTT#* , , O
. alt modalitate de a crea un linC este prin meniul Insert; apoi
opiunea H>perlinB.
2ste posi#il s se cree%e linBIuri goale; acestea pot fi utile atunci
c4nd utili%ai comportamente (#e,aviours) etc 're#uie doar s scrie "n ?inB
numai cu sim#olul P ))
(inC$ul int determin "n care fereastr pagina legat se va desc,ide ea
se poate modifica "n funcie de cadrele CframeD pre%ente in site)
2a poate fi specificat "n inspectorul de proprieti prin Target;
sau prin meniul Insert apoi opiunea H>perlinB.
K"lanB* ?i!ierul legat se desc,ide "ntr$o fereastr nou a
#rowser$ului)
Kparent* ?fi!ierul legat se desc,ide "n fereastra cadru care
conine linC$ul sau setul de cadre mam)
Kself* 2ste opiunea presta#ilit) ?i!ierul legat se desc,ide "n
acela!i cadru adic "ntr$o fereastr cu linC$ul)
Ktop* Documentul legat se desc,ide "n fereastra "ntreag a
#rowser$ului)
<u tre#uie s ne facem griEi dac nu "nelegem complet funciile
de fiecare dintre aceste opiuni de destin le vom verifica din nou "n tema
-rame.
(.1."ormatul lin,!ului
9n general o legtur asociat apare ca un te*t su#liniat "n cadrul
unei pagini 6e#) 9n acela!i timp legtura poate avea pe trei culori diferite
iar acestea pot fi specificate prin intermediul opiunii #age properties)
0ceste trei culori diferite sunt desemnate ca culoarea iniial a linC$ului
linC$ul activ !i linC$ul vi%itat)
9n ca%ul "n care linC$ul este definit cu o imagine putem vedea un
set de puncte de pe marginea ei atunci c4nd facem clic pe ea) 9n ca%ul "n
32
care linC$ul este definit printr$o %on de imagine (,arta) putem vedea
conturul %onei)
C"mpul Border c4mp ne permite s adugm un c,enar la o imagine
indiferent dac acesta va fi un linC sau nu)
Dac alegem %ero (0) nu vomi vedea nici de frontier pentru c acest
lucru indic faptul c liniile de dimensiunea care alctuiesc ptratul este
egal cu %ero (0)) 5utem face un ptrat mai mare prin cre!terea valoarii
c4mpului Border)
Dac linC$ul este asociat este un te*t sau o imagine indicatorul va
modifica forma sa atunci c4nd cursorul este plasat pe linC) 2l va lua forma
unei m4ni "ndreptate)
(.2.Lin, la un e!mail
5utem specifica de asemenea linC$uri ctre adrese de e$mail) 0cest lucru
este util atunci c4nd dorim ca utili%atorii we# s ne contacte%e) /inta*a
linC$ului "n acest ca% este mailto* eImailaddress.
-t can #e defined t,roug, t,e ?inB option of t,e properties inspector
,aving previouslL selected t,e desired linCed te*t or image) 0cesta poate fi
definit prin opiunea ?inB din inspectorul de proprieti; care au fost
selectate anterior pentru a fi legate de te*t sau imagine)
2ste posi#il de asemenea prin meniul Insert; apoi opiunea mail linB. 9n
acest ca% nu este posi#il s se atri#uie un linC la o imagine doar ne
permite de a introduce te*tul care va contine linC$ul de e$mail)
)ncercai*
+devrat,-als
33
7) 1ferina mai poate fi numit linC we# sau ,LperlinC)
2) 2ste posi#il s se atri#uie un linC unui fragment din imagine
8) 9ntr$o pagin 6e# nu pot e*ista linC$uri vide)
4) 5agina 6e# ata!at unui linC poate fi desc,is "ntr$o fereastr nou de #rowser)
:) 9n Dreamweaver nu este posi#il de a ata!a unui linC o adres de po!t
electronic)
=) (a suprapunerea mouse$ului peste un linC cursorul "!i modific forma.
>) 'e*tul linC$ului apare "ntotdeauna su#liniat)
+legei rspunsul corect*
1. )n ca9ul .n care linBIul este o imagine.
a) -maginea devine al#astr
#) . serie de puncte de mici apar pe margine atunci c4nd facem clic
pe ea)
c) Bn contur al#astru apare "ntotdeauna "n Eurul imaginii)
&. @n linB gol este ...
a) nu e*ist linC$uri goale)
#) are un format diferit de restul linC$urilor
c) este necesar s includem sim#olul P "n c"mpul (inC)
d) linC$ul care nu are ata!at nimic
/. +plicaia Dreamweaver permite s se preci9e9e culoarea...
a) 'uturor linC$urilor)
#) (inC$urilor active)
c) (inC$urilor vi%itate)
d) 'oate variantele de mai sus)
Tema 5. Inserarea Imaginilor.
9n continuare vom vedea cum se inserea9t imagini "ntr$un
document) De asemenea vom vedea modul de creare a unor imagini
speciale; cum ar fi ca%ul !ollovers !i "utoane flas=; care contri#uie la
"m#untirea aspectului paginii we#)
'oate site$urile we# au un anumit numr de pagini care ne permit s
"m#untim aspectul lor sau doar pentru a aduga mai multe informaii
vi%uale)
2*ist un set de mai multe formate recomanda#ile s fie introduse "ntr$un
we# site)
-.1.Introducerea unei ima%ini
34
5entru a insera o imagine accesm meniul Insert; apoi opiunea Image.
Dup aceasta este posi#il s selectm o imagine dintr$o fereastr nou)
Dac dintr$un anumit motiv avem nevoie s introducem o imagine
;M5 acesta nu va aprea dac nu "l selectm "n T>pe; +ll t=e files.
9n opiunea !elative to avem posi#ilitatea s specificm dac
imaginea va fi relativ la document sau "n folderul rdcin a site$ului) 2ste
mai #ine s fie relativ la document; deoarece dac mutm site$ul "ntr$o
locaie diferit nu vom putea vedea imaginiile ele vor fi cutate "n locaia
anterioar) 0cela!i lucru se produce !i atunci c4nd selectm un document
pentru a crea un linC)
Calea ctre imagine va fi specificat "n c4mpul @!?Iul din
fereastr !i "n domeniul Src al inspectorului de proprietati; "n
dependen dac acesta a fost introdus ca relativ la folderul rdcin al
site$ului sau a documentului)
De e*emplu imaginai$v c folderul cu imagini !i documentul "n
care dorim s inserm imaginea se afl "n interiorul folderului rdcin a
site$ului) -maginea DSC''1/1Kresi9e.Lpg se afl "n interiorul folderului
imagini) 9n ca%ul inserrii imaginii ca fiind relativ la document; calea ar fi:
imagini , DSC''1/1Kresi9e.Lpg; iar "n ca%ul c"nd este introdus relativ la
rdcina SiteIului calea ar fi: ,imagini, DSC''1/1Kresi9e.Lpg 2ste de
dorit ca atunci c4nd crem un ,LperlinC ctre un fi!ier s fie legat relativ
de document sau de folderul rdcin a site$ului)
35
Dac inserm o imagine ;M5 "ntr$un document aceasta nu va fi afi!at "n
Dreamweaver se va afi!a doar "n #rowser) 9n Dreamweaver acesta va fi
artat astfel:
0ceasta imagine apare in Dreamweaver atunci c4nd o imagine
inserat nu este gsit) 0cest lucru se poate "nt4mpla dac am modificat
numele imaginii sau dac am mutat$o "n alt director fr Dreamweaver) 9n
acest ca% imaginea care va fi afi!at de #rowser va arta astfel:
2ste un ptrat gol cu un % de culoare ro!ie alturi fiind numele
imaginii sau a coninutului c4mpului +lt din inspectorul de proprieti.
-.2.Schimbarea dimensiunii ima%inii
Dreamweaver permite modificarea dimensiunilor imaginilor)
/c,im#area dimensiune nu se aplic direct "n fi!ierul cu imagine dar
sc,im#rile se vor vedea interiorul paginii 6e#)
2ste foarte pro#a#il c calitatea imaginii va fi mai Eoas dec4t
dac vom modifica imaginea cu un editor e*tern cum ar fi ?ireworCs)
De e*emplu vom vedea ce se "nt4mpl dac am insera o imagine
care repre%inta pictograma Dreamweaver si vom modifica dimensiunea ei
"n mai multe moduri:
imagine original imaginea cu dimensiunea modificat
5utem vedea calitatea re%ultatului) Dar oca%ional poate fi util modificarea
dimensiunii unor imagini de!i acest lucru implic pierderea de calitate)
2*ist dou modaliti de a modifica dimensiunea)
5rima dintre acestea este de a selecta imaginea !i glism CdragD unul
dintre ptrate negre care sunt "n Eurul imaginii cu mouse$ul)
36
. alt modalitate este prin intermediul inspectorului de proprieti; prin
sc,im#area domeniilor W (wide) sau H ("nlime)) 0ceste c4mpuri vor fi
afi!ate "n inspector atunci c4nd o imagine este selectat)
/ ne amintim c atunci c4nd sc,im#m alinierea vom apela
op4iunea +lign din inspectorul de proprieti. 0linierea imaginii ofer
posi#ilitati mai vaste dec4t ale te*tului: partea de sus de miEloc de miEloc
a#solut de valorile iniiale etc )
0vem posi#ilitatea s crem linC$uri !i #e,aviors "n unele pri ale unei
imagini "n loc de imagine complet) 0cest lucru este cunoscut su# numele
de Image mapC =arta imaginiiD.
-.3.Introducerea ima%inilor .ollo*er.
Bn rollover este o imagine care o "nlocuie!te pe alta atunci c4nd este
selectat (pointerul mouse$ului este suprapus)) 0cest tip de imagine este
folosit "n meniuri !i #utoane de trecere la alte pagini 6e#)
0cesta este un e*emplu de rollover)
Dac dorim s inserm un rollover tre#uie s mergem la meniul
Insert; Image o"Lects; precum !i opiunea !ollover Image) ) 9n fereastra
nou vom specifica imaginea original !i opiunile respective)
2ste de preferat ca imaginea rollover )ncrcat s fie activ)
Dac este activ imaginea rollover se va "ncrca atunci c4nd se "ncarc
pagina 6e# astfel ca am evita "nt4r%ierea "ncrcrii imaginii)
+lternate Te<t este te*tul pe care "l vom vedea c4nd plasm
cursorul peste imagine sau te*tul care va aprea atunci c4nd imaginea nu
poate fi afi!at "n #rowser) 'e*tul alternativ poate fi atri#uit tuturor
imaginilor nu numai pentru a rollovers5utem face acest lucru prin opiunea
+lt din inspectorul de proprieti ale imaginii selectate)
-.#./utoane flash
37
2*ist un alt set de imagini speciale similar cu rollovers care sunt
utili%ate pentru a crea meniuri acestea sunt "utoanele -las=. 5entru a
insera un #uton flas, vom accesa meniul Insert opiunea $edia apoi
-las= Button iar la ecran va apare urmtoarea fereastr:
5rin St>le putem selecta unul din formatele de #uton oferite de
Dreamweaver) -n aceasta fereastra tre#uie s specificm te*tul care va fi
pre%entat "n #uton (#uton de te*t:) numele te*tului de salvat (/ave as:)
precum !i linC$ul asociate ((inC: !i 'arget:))
2ste mai #ine pentru a salva "utoane -las= "n acela!i director cu
fi!ierele &'M( "n loc de folderul alocat pentru imagini) Dac nu facei acest
lucru este posi#il ca Dreamweaver s nu permit salvarea #utonului cu
acest linC "ntr$o locaie diferit de fi!ierul numit) ;utoanele vor fi salvate cu
o e*tensie S0-.
5rin inspectorul de properieti a #utonului flas, putem edita
atri#utele sale din nou:
38
?ereastra de dialog poate fi desc,is fc4nd clic pe #utonul dit;
!i prin #utonul #la> putem verifica starea #utonul din Dreamweaver prin
desc,iderea paginii unui #rowser) Dup testarea statutului ?las, #uton
tre#uie s facei clic din nou pe #utonul #la> (care va fi sc,im#at pentru
#utonul Stop ) ) )
-.5."lash te0t
'e*tul ?las, este ca un rollover dar "n loc de imagini se sc,im#
culoarea te*tului)
'o insert a flas, te*t Lou need to go to t,e Insert menu $edia and
-las= Te<t. 5entru a insera un te*t flas, accesm meniul Insert; opiunea
$edia; !i -las= Te<t. 9n fereastra aprut alturi de te*t linC$ul precum !i
numele cu care te*tul va fi salvat tre#uie s specificm culoarea original
precum !i culoarea rollover)
Inspectorul de proprieti pentru te*tul ?las, este aceea!i ca !i
pentru #utoane flas,)
-.(./ara de na*i%are
. "ar de navigare este un set de imagini care sunt folosite ca
opiuni de meniu pentru a naviga "n cadrul unui site 6e#) . singur pagin
de we# poate conine doar o singur #ar de navigare) 5entru a insera o
#ar de navigare vom accesa meniul Insert; Image 4"Lects; precum !i
Navigation Bar. 9n fereastra nou avem posi#ilitatea s specificmi patru
39
imagini diferite pentru fiecare #uton precum !i linC$ul pentru fiecare dintre
ele etc
5rin intermediul #utoanelor din partea de sus a ferestrei se pot crea
sau !terge #utoanele din #ara de navigare) Cu avem posi#ilitatea s
cremi un #uton nou cu putem !terge #utonul selectat precum !i cu
putem modifica po%iia #utonului selectat)
Mai Eos avem pre%enat un e*emplu de #ar de navigare) 5entru a o
crea pot fi folosite acelea!i imagini pentru toate #utoanele dar dup cum
putem vedea #utonul din miEloc are o imagine diferit de celelalte dou)
0ceasta se datorea% faptului c optiunea S=ow JDown imageJ iniial a
fost activat pentru acest #uton)
2*ist patru imagini diferite astfel "nc4t s putem identifica care linC
este activat ceva ce nu putem face cu un rollover) 5rin opiunea Insert este
posi#il s se specifice dac #utoanele vor fi amplasate ori%ontal sau
vertical "n pagin)
40
)ncercai*
+devrat,-als
7) Btili%"nd aplicaia Dreamweaver la crearea unei pagini 6e# putem
modifica dimensiunea unei imagini
2) 5ot fi create linC$uri !i comportamente pe diferite seciuni ale unei
imagini.
8) 0tunci c4nd o imagine ;M5 se introduce "ntr$o pagin 6e# apare
imaginea )
4) ;utoanele ?las, se recomand a fi salvate "n acela!i director cu
documente &'M()
:) 1ollovers sunt imagini cu e*tensii /6?)
=) 0plicaia Dreamweaver permite inserarea #utoanelor ?las, "n paginile
6e#)
+legei rspunsul corect*
1. ?a accesarea opiuneii J#reload rollover imageJ se recomand*
a) 0ceast opiune nu e*ist)
#) De a fi lsat unc,ecCed)
c) De a fi lsat c,ecCed)
&. -las= te<tul ...
a) 2ste ca o imagine rollover)
#) ?ace ca culoarea te*tului s se sc,im#e)
c) 0m#ele variante de de mai sus)
/. Bara de navigare .ntrIun site 0e" ...
a)))) tre#uie s fie construit din #utoane ?las,)
#)))) nu permite o s se identifice care dintre linC$uri este activ)
c) 0m#ele variante de mai sus)
d) <ici una dintre variantele de mai sus)
(. Butoanele din Bara de navigare a unui site 0e". . .
a) 5ot fi plasate vertical)
#) 5ot fi plasate ori%ontal)
c) 0m#ele variante de mai sus)
d) <ici una din cele de mai sus
Tema 7. @tili9area -rameIurilor CcadrelorD.
Cadrele sunt folosite pentru a distri#ui datele "ntr$un site 6e#) 2le permit
meninerea permanent "n fereastra #rowse$rului a unor elemente cum ar fi
sigla !i meniul "n timp ce altele se poate sc,im#a) 9n plus ele
41
"m#untesc aspectul site$ului 6e#) 2ste posi#il s editm pagina 6e#
direct "n cadrul din pagina ce conine setul de cadre) ',is simplifies t,e
worC as it is easier to figure w,at t,e final page is going to looC liCe)',is is
somet,ing t,at Lou cannot do if Lou edit eac, file t,at ,as a frame
individualL) 0cest lucru simplific munca deoarece este mai u!or s
vi%uali%m ce pagina 6e# o#inem la final dec"t s editm fiecare pagin
"ntr$o fereastr separat
(ucrul cu frame$uri poate fi un pic complicat dar mai mult la
"nceput)
1.1.Crearea de frame!uri
2*ist mai multe modaliti de a crea un cadru) Hom precuta doar
unul)
5entru a crea un cadru tre#uie
mai "nt4i s desc,idem un fi!ier) 0cesta
poate fi nou sau e*istent)
Dup aceasta tre#uie s
mergei la meniul Insert; HT$?; 6i
-rames. 5rin aceast opiune putem
selecta tipul de cadru pe care dorim s
"l crem)
Hom precuta cadrul din st4nga) Dac
facem clicC pe ?eft un nou cadru va fi
creat "n partea st4ng a fi!ierului real)
Dup cum putem vedea "n imagine e*ist o
linie de divi%area document) Documentul a fost
"nceput ca un nou fi!ier)
9n acest ca% vom avea trei fi!iere: unul din
st4nga cel din dreapta !i unul care este setul de
cadre) Cadrul drept este fi!ierul pe care l$am avut de
la "nceput cu numele $ain -rame.
5entru a selecta fi!ierul care are set de cadre
tre#uie s facem clicC pe linia care desparte frame$urile) ',is is onlL
possi#le in case of not ,aving #een previouslL saved) 0cest lucru este
posi#il doar "n ca%ul "n care nu a fost salvat anterior)
42
9n ca%ul inserrii unui cadru la dreapta "n loc de un cadru la st4nga
cadrul gol va fi afi!at "n partea dreapt a fi!ierului original)
1.2.Selectarea frame!urilor
Dac dorim s selectm cadrele unui document tre#uie sa
mergem la panoul -rames care poate fi desc,is prin meniul 0indow.
5utem desc,ide de asemenea panoul de -rame aps4nd com#inaia
S=ift 3 -&.
Cadrele care sunt "n documentul divi%at "n cadre pot fi gsite "n
panoul -ame; !i putem merge prin ele fc4nd clic pe cadru "n panoul
-rame) 0vem posi#ilitatea s selectm de asemenea setul cadre pagin
fc4nd clic pe #ordure din Eurul cadrelor)
<u este necesar de a selecta cadrul pentru a edita documentul de
care acesta "l poate conine)
2ste necesar a selecta cadrele pentru a specifica proprietile
specifice ale fiecruia dintre ele)
1.3.Sal*area frame!urilor
'oate documentele care au cadre tre#uie s ai# o cite pagin 6e#
"n interiorul fiecaruia dintre ele) 0cesta este motivul pentru atunci c4nd
creai un cadru paginile noi sunt "ncrcate eronat "n fiecare dintre ele "n
afar de cadrul care are pagina original)
0ceste pagini noi pot fi "nlocuite ulterior cu alte pagini e*istente)
2ste necesar de a salva pagina ce conine setul de cadre !i de asemenea
fiecare dintre paginile incluse "n cadre)
<u este recomanda#il a se salva cadrele pentru prima dat cu
#utonul Save all pentru c putem face gre!eli atunci c4nd denumim
fi!ierele noi)
5entru a salva un fi!ier care are un
set de cadre tre#uie s "l selectm
anterior)
5entru a salva fiecare dintre
paginile din cadre tre#uie doar sa
plasm mouse$ul peste ele !i facem
clicC pe #utonul Save)
1.#.Confi%urarea frame!urilor
Dup selectarea unui cadru prin panoul -rame; proprietile lui pot
fi sta#ilite prin inspectorul de proprieti.
43
?iecare cadru are un nume atri#uit care poate fi sc,im#at prin
opiunea -rame name. <umele nu poate avea spaii goale)
Src este numele fi!ierului &'M( care este "ncrcat "n acest cadru)
Borders permite sta#ilirea unui c,enar cadrului care s$l separe de
restul cadrelor)
Border color permite sta#ilirea unei culori pentru #ordure cadrului
iar 0idt= sta#ile!te limea #ordurii)
Scroll indic dac #ara de derulare s se deplase%e sau nu atunci
c4nd fi!ierul "ncrcat "n cadru nu poate fi complet v%ut)
.piunea No resi9e activat indic faptul c utili%atorii nu vor fi
capa#ili s modifice dimensiunea cadrului "n #rowser)
$argin widt= !i $argin =eig=t indic separarea "ntre coninutul
cadrului #ordure din st"nga sau de sus a cadrului)
Dac selectm tot setul de cadre atunci Inspectorul de
#roprieti este diferit)
5rin Borders putem selecta o linie care desparte cadrul restul
cadrelor) 9n ca%ul "n care vrem o culoare pentru #ordur acest lucru poate
fi specificat Border color. 5utem sta#ili de asemenea o lime de #ordur
prin opiunea 0idt=)
.piunile Column (sau !ow ) sunt pentru a pentru a preci%a
dimensiunea cadrului care poate fi "n pi<eli; procente (de la dimensiunea
fereastrei) sau relativ (proporional cu restul cadrelor))
1.5.Con2inutul frame!urilor
Din cele e*puse mai sus o#servm c coninutul cadrului poate fi
sta#ilit prin campul Src din inspectorul de proprieti.
44
C4nd lucrm cu cadre vrem s "ncrcm fi!iere diferite "n fiecare
dintre ele) Bnele din ele tre#uie s fie fi*e "n timp ce altele s se poat
sc,im#a)
5rin opiunea Src din inspectorul de proprieti; este posi#il doar
de a specifica fi!ierul care va fi "ncrcat "n cadru dar putem sc,im#a acest
fi!ier prin linC$uri)
9n tema ,LperlinC$uri am aflat destinaiile posi#ile ale linC$urilor)
0cestea pot fi K"lanB Kparent Kself and Ktop ) 0cum !tind cum putem
lucra cu cadre !i ele vor fi mai u!or de "neles)
K"lanB* Desc,ide fi!ierul legat "ntr$o fereastr nou de #rowser)
Kparent* Desc,ide fi!ierul legat "n fereastra cadrului care are linC$ul sau
setul de cadre principale) Cadrul principal este cadrul "n care se afl
fi!ieurl iniial !i "n care restul de cadre s$au introdus)
Kself* 2ste opiunea presta#ilit) 2a desc,ide fi!ierul legat "n acela!i
cadru cu fereastra linC$ului)
Desc,iderea fi!ierului legat de linC "n fereastra #rowser$ului "ntreg
"nseamn c cadrele vor disprea atunci c4nd desc,idem linC$ul din ea)
5utem aduga toate aceste destinaii oricrui element din pagin
care are o legtur acesta poate fi un te*t o imagine o ,art imagini un
element de flas, etc)
)ncercai*
+devrat,-als
7) Cadrele sunt utili%ate pentru a distri#ui mai #ine coninutul paginilor
6e#)
2) Cadrele nu permit de a "m#unti funcionalitatea !i nici aspectul
paginilor 6e#)
8) ?iecare cadru conine un document &'M( individual)
4) 2ste posi#il de a edita documentele coninute "n cadrele unei pagini
6e# direct "n frameset)
:) 'oate paginile 6e# care conin frame$uri tre#uie s ai# c"te o pagin "n
fiecare dintre ele)
=) ?iecare cadru are atri#uit un nume care nu se poate sc,im#a)
+legei rspunsul corect*
1. @n frameset ...
45
a) ))) este pagina din cadru)
#) ))) este cadrul in care avem inserate alte cadre)
c) 2ste "ntotdeauna cadrul din partea st4ng)
&. Butonul din "ara de instrumente ...
a) este doar pentru a salva documentele "n interiorul frame$urilor)
#) nu ne permite s salvm documentele din interiorul frame$urilor)
c) nu este #un pentru salvarea frame$urilor pentru prima dat)
/. Dac opiunea J Same si9e J este selectat ...
a)))) specigic faptul c cadre diferite din pagin au aceea!i
dimensiune)
#)))) specific faptul c utili%atorii nu vor avea posi#ilitatea de a
modifica dimensiunea cadrului "n #rowser$ul we#)
c)))) indic faptul c pagina cu cadre va fi vi%uali%at "n #rowser$ul
we# cu aceea!i mrime ca !i cel pre%entat "n Dreamweaver)
d) <ici una din variantele de mai sus)
(. #entru fiecare din cadre ...
a) poate fi selectat dac #ara de derulare + roll#ar va aprea sau "n
ca%ul "n care documentul nu poate fi complet afi!at)
#) poate fi selectat o culoare diferit de frontier)
c) 0m#ele variante de mai sus)
d) <ici una din variantele de mai sus)
Tema 8. -ormulare Interactive.
9n acest capitol vom precuta ce este o form necesitatea de a fi
utili%at "n cadrul unui site 6e# cum s inserm un formular ce elemente
de control poate s conin !i cum pot fi validate datele unui formlular)
?ormularele sunt folosite pentru a o#ine
date de la utili%atoril ele pot fi de
asemenea folosite pentru a crea un
sondaE pentru a cunoa!te opiniile
utili%atorilor despre diferite evenimete etc)
.dat ce utili%atorul a completat
formularul cu date !i a fcut clicC pe
#utonul de trimitere a datelor din formular
un program va prelua !i va trimite datele
din formular "ntr$un fi!ier te*t e$mail #a%
de date etc)
0ici vom vedea cum crem un formular (insera !i #utoane "n
formular) dar nu !i prelucrarea datelor din formular pentru c avem nevoie
de cunostinte "n programare 6e# 5&5 H;/cript "n Java/cript acest
lucru nu este o#iectivul pre%entului curs)
9n partea dreapta avei un e*emplu de formular)
46
Bn formular poate avea etic,ete c4mpuri de te*t meniuri derulante !i
#utoane)
2lementele de control ale unui formular pot fi inserate "ntr$o pagin 6e#
prin meniul Insert !i apoi opiunea -orm)
5rin aceast opiune putem accesa lista tuturor o#iectelor posi#ile
dintr$un formular care pot fi inserate "ntr$o pagin 6e#)
Te<t -ield* 5ermite s adugm o caset te*t "ntr$o singur linie
"n timp ce Te<t +rea permite scrierea "n mai multe linii) 2ste de asemenea
posi#il de a defini o parolCpasswordD; este identic cu c4mpul de te*t dar
te*tul introdus de utili%ator este "nlocuit de un sim#ol) Mai Eos avem
e*emple cu fiecare dintre tipurile pre%entate)
'e*t ?ield
QQQQQQQQ
',roug, t,e propierties inspector itRs possi#le assign t,e widt, of t,e te*t
#o* t,e top num#er of lines or c,aracters and t,e initial value of t,e #o*)
5rin propierties inspectorului este posi#il atri#uie limea casetei te*t
numrul de linii de sus sau de caractere iar valoarea iniial a cutiei)
Button* 5oate avea ata!ate 2 opiuni: Su"mit form !eset
form. 5utem sc,im#a de asemenea etic,eta #utonului de te*t prin
opiunea ?a"el din inspectorul de proprieti.
C=ecB"o<* 2ste un ptrat mic care poate fi activat sau
de%activat:
De e*emplu:Hreau s primeasc informaii
0ceasta poate fi atri#uit "n starea iniial ca C=ecBed sau @nc=ecBed )
!adio "utton * 2ste un #uton mic circlular care poate fi selectat
sau deselectat) Dac e*ist mai multe astfel de #utoane "n aceea!i form
numai unul poate fi activat) C4nd activm unul altele sunt "n mod automat
de%activate)
0l#
<egru
?ist $enu* . list sau un meniu este un element al formularului
asociat la o lista de optiuni)
47
2lemente sunt adugate prin intermediul ?ist Values din
inspectorul de proprieti.
?a"el* 2ste folosit pentru a denumi elementele formularului
astfel "nc4t utili%atorul s !tie ce date s introduc "n fiecare dintre ele)
Dup ce am creat formularul
acesta va fi pre%entat "n fereastra
Dreamweaver ca o caset cu un
c,enar ro!u similar cu acesta din
imagine)
2ste recomanda#il de a folosi ta#ele pentru o mai #un organi%are
a elementelor unui formularelor) Hom o#ine o mai #un distri#uie a
elementelor formularului folosind ta#ele iar acest lucru face mai u!oar
"nelegerea acestuia !i "m#untirea aspectului formularului)
)ncercai*
+devrat,-als
7) ?ormularele nu pot fi folosite pentru a cunoa!te opiniile sau orice alte
date de la !i despre utili%atori)
2) Ca o form s funcione%e corect este necesar un program scris "ntr$un
lim#aE de programare 6e# ca de e*emplu H; /cript 5&5 etc)
8) 3ona de te*t ('e*tarea) ne permite s scriem mai multe linii de te*t)
4) Casetele de selecie (c,ecC#o*) tre#uie s fie "ntotdeauna iniial cu
atri#utul unc,ecCed)
:) 2tic,etele sunt folosite pentru a da nume tuturor elementelor
formularului)
=) <u se recomand folosirea ta#elelor pentru organi%area elementelor de
control ale formularelor)
+legei rspunsul corect*
1. #rin cGmpuri de tip te<t ...
a)))) se permite s se scrie doar o singur linie)
#) ))) poate fi definit ca o parola)
c) 0m#ele variante de mai sus)
&. Dac e<ist mai multe "utoane radio .n aceea6i form ...
48
a) ele vor fi denumite c,ecC#o*es)
#) numai unul poate avea atri#utul c,ecCed)
c) ?iecare dintre ele va avea o culoare diferit)
/. @n "uton al unui formular...
a) )))poate avea atri#utul JSu"mit formJ selectat)
#) )))poate avea o atri#utul J!eset formJ selectat)
c) 0m#ele variante de mai sus)
d) <ici una din variantele de mai sus)
(. Validarea formularului .. . .
a) /emnific validarea valorilor introduse "n formular "nainte de a fi
trimis)
#) Herific dac etic,etele corespund elementelor adecvate)
c) 0m#ele variante de mai sus)
d) <ici una din variantele de mai sus)
Tema1'. @tili9area 6a"loanelor CTemplatesD .n Dreamweaver.
De fiecare dat c4nd dorim s crem un site we# tre#uie s urme%e un
model uniform) De cele mai multe ori se fac copii ale fi!ierelor create
anterior !i se lucrea% pe aceste copii prin sc,im#area coninutul lor)
0cesta este cel mai simplu mod de a avea o pagin cu o structur creat
anterior)
Ma"loanele CTemplatesD sunt o copie a paginii pe care va fi #a%at
restul site$ului ele ofer posi#ilitatea de a sta#ili %one edita#ile "n timp ce
alte %one nu pot fi modificate) <u este posi#il de a modifica proprietile
unei pagini care se #a%ea% pe un !a#lon "n afar de titlu) C4nd dorim
pagini cu o alt culoare de fundal avem nevoie s crem un alt !a#lon cu
diferite culori iar paginile #a%ate pe !a#lon depind "n funcie de culoarea
#acCgorund dorim pentru fiecare dintre ele)
C4nd modificm proiectarea unui !a#lon putem actuali%a toate
paginile #a%ate pe acesta)
Fa#loanele sunt fi!iere cu e*te#sia D0T salvat "n site$ul we# "n
interiorul unui folder numit Tempolates.
13.1.Crearea abloanelor
Fa#loanele pot fi create de la %ero sau
pornind de la o pagin 6e# e*istent)
49
. modalitate de a crea template$uri de la %ero este prin intermediul
panoului +ssets)
5anoul +ssets poate fi desc,is prin meniul 0indow !i apoi opiunea
+ssets ) De asemenea tast"nd -11.
Dup ce am desc,is panoul de care avem nevoie selectm #utonul
9n acest fel putei lucra cu !a#loane)
;utoanele panoului Templates +ssets sunt similare celor din
panoul de CSS St>les )
<umai primul #uton este diferit folosit "n acest ca% pentru a actuali%a
lista restul ne permite s crem un nou !a#lon s editm un !a#lon
selectat din list sau s o !tergem)
5entru a crea un nou !a#lon tre#uie s facem clicC pe #utonul
(dac nu este activat facei clic dreapta !i selectai New Template). C4nd
apsm #utonul vom crea un fi!ier nou "n lista de template$uri) 5utem
sc,im#a de asemenea numele lui. 5entru a modifica un !a#lon "l vom
selecta din lista apoi un clic pe #utonul ) 5entru a !terge un !a#lon la
fel "l vom selecta din list !i apoi clicC pe #utonul )
Fa#loanele sunt salvate "n site$ul curent "n interiorul folderului
Templates; care este creat automat)
5entru a crea un !a#lon dintr$un fi!ier e*istent avem nevoie s desc,idem
fi!ierul apoi "l salvm ca !a#lon prin meniul -ile; !i Save as template.
C4nd selectm opiunea vom vedea o fereastr ca cea din dreapta)
2ste necesar s se specifice numele cu care dorim s salvm !a#lonul prin
c"mpul Save as apoi selectm SiteIul "n care acesta va fi salvat din lista
de site$uri)
13.2.4one editabile.
'oate elementele unui !a#lon sunt #locate implicit !i prin urmare ele nu
pot fi modificate)
50
2ste necesar s se sta#ileasc %onele care pot fi editate "n paginile
#a%ate pe acest !a#lon)
5entru a edita un !a#lon tre#uie s$l desc,idem "n Dreamweaver) 0
waL to open it is t,roug, t,e panel #L dou#le$clicCing on it or #L selecting it
and clicCing on t,e . modalitate de a desc,ide acesta este prin intermediul
panoului +ssets fc"nd du#lu$clic pe ea sau prin selectarea acesteia !i
fc4nd clic pe #uttonul )
.dat ce !a#lonul este desc,is este posi#il s se sta#ileasc
proprietile sale prin opiunea #age properties. 0ceasta poate desc,is
astfel:
0ps"nd com#inaia de taste Ctrl 3 A.
ClicC pe meniul $odif> !i select"nd opiunea #age properties.
ClicC dreapta pe fi!ierul desc,is "n Dreamweaver !i din meniul conte*tual
selectm opiunea #age properties.
5entru a insera o %on edita#il de care avem nevoie plasmi mouse$ul "n
locul "n care dorii s inserm
apoi mergem la meniul Insert
opiunea Templates o"Lects !i
apoi dita"le 9one sau apsm
com#inaia de taste Ctrl 3 +lt 3
V)
9n fereastra nou avem
nevoie s sta#ilim un nume pentru %ona edita#il)
<u pot fi dou %one edita#ile "n interiorul unui !a#lon cu acela!i
nume)
Dup aceasta putem modifica numele prin inspectorul de
proprieti a %onei edita#ile)
. %on edita#il este
repre%entat "n
Dreamweaver ca o fereastr
cu o etic,et de culoare
al#astr) <umele %onei
edita#ile apare "n etic,et)
0vem posi#ilitatea
s introducem o#iecte "n
interiorul ferestrei !i ele vor
fi aprea implicit "n paginile
51
#a%ate pe !a#loane) .#iectele "n interiorul %onei pot fi editate !i pot fi
modificate)
'oate o#iectele din aceste %one vor fi "n site dar ele nu vor putea
s fie sc,im#ate)
9n acest ca% sigla ar fi "n toate site$urile #a%ate pe acest !a#lon "n
timp ce tot ceea ce se introduce "n interiorul %onei de mail-orm nu)
13.3.5tili+area template!urilor
Btili%area de template$uri poate fi un pic complicat la "nceput) Hom
vedea cum la #a%a un site poate fi un !a#lon curat fapt ce face lucrul cu el
mai u!or) Dup ce sa desc,is fi!ierulvom accesa meniul $odif>
Ma"loane; Templates +ppl> template to #age.
9nainte de a face acest lucru este prefera#il s fim siguri c dosarul
desc,is "n Dreamwaver este acela!i cu care vom lucra "n care !a#lon este
c vrem s$l pe
#a%)
Dup ce
facei clic pe
opiunea +ppl>; "n
Template to #age
vom vedea o
fereastr ca cea din
dreapta "n care vom selecta unul din !a#loanele din lista de templateIuri
ale site$ului)
/e recomand a activa opiunea @pdate page w=en template
c=anges "n scopul de a da start fie actuali%ate automat paginile #a%ate pe
!a#lonul modificat)
Ca s nu lucrm cu un fi!ier gol e posi#il ca atunci c4nd se aplic !a#lonul
"n care apar numele s nu e*ist regiuni care coincide "ntre documentul
necompletat !i !a#lon) 9n acest ca% o fereastra ca aceasta este afi!at)
52

)n aceast fereastr va tre#ui s sta#ilim o coresponden "ntre
numele regiunii ale fi!ierului nou precum !i numele regiunii din orice
!a#lon) 9n acest e*emplu regiunea din fi!ier care nu coincide cu nici o
regiune din !a#lon a fost corpul documentului.
9n $ove content to t=e new region antetul regiunii din !a#lon a
fost selectat pentru a se sta#ili corespondena necesar)
Dup sta#ilirea corespondenei !a#lonul este descrcat "n fi!ierul curat)
9n ca% c nu este posi#il de a sc,im#a culoarea de fond a
!a#lonului putem modifica "n continuare toate elementele din ta#ele !i
forme ele fiind "ntr$o %on edita#il a !a#lonului) 9n acest ca% putem
modifica fontul culoarea celulelor "m#inarea lor etc) Dac dorim ca o
pagin s nu mai fie #a%at pe un !a#lon tre#uie s mergem la meniul
$odif> meniu apoi opiunea Templates; !i Separe template.
C4nd separm o pagin dintr$un !a#lon coninutul paginii este "n
continuare la fel ca atunci c4nd a fost #a%ea% pe un !a#lon dar fr
restricii sta#ilite de !a#lon)
53
)ncercai*
+devrat,-als
7) Fa#loanele sunt fi!iere cu e*tensia D6' salvate "n site$ul 6e#)
2) C"nd design$ul unui !a#lon este modificat toate paginile #a%ate pe
aceasta nu mai pot fi actuali%ate)
8) <u este posi#il de a modifica proprietile paginii care se #a%ea% pe un
!a#lon cu e*cepia titlului)
4) Fa#loanele pot fi create doar de la %ero)
:) . modalitate de a crea un !a#lon de la %ero este prin intermediul
panoului 0ssets)
=) 'oate elementele din coninutul unui !a#lon sunt #locate "n mod implicit)
+legei rspunsul corect*
1. Butonul din panoul +ssets serve6te la ...
a)))) desc,iderea tuturor !a#loanelor "n Dreamweaver)
#) )))alege template$uri ca imagine de fundal)
c) )))crearea unui nou !a#lon ) )
&. Butonul din panoul +ssets serve6te la ...
a) ))) gestionarea !a#loanelor "n cadrul panoului +ssets)
#) ))) inserarea unei regiuni edita#ile "n !a#lon)
c) ))) desc,iderea panoului +ssets)
/. !egiunile edita"ile ale unui 6a"lon...
a) ))) pot conine o#iecte care vor aprea "n mod implicit "n
documentele care se #a%ea% pe !a#lon)
#) ))) nu pot avea acela!i nume ca !i alte %one edita#ile din !a#lon)
c) 0m#ele variante de mai sus)
d) <ici una din variantele de mai sus)
(. CGnd modificm un 6a"lon ...
a) paginile care se #a%ea% pe acesta nu se vor actuali%a "n mod
automat)
#) paginile care se #a%ea% pe acesta se vor actuali%a "n mod
automat)
c) 0m#ele variante de mai sus)
d) <ici una din variantele de mai sus)
Tema 11. ?ucrul cu straturi
/traturile sunt patrate care pot fi plasate oriunde dorim "n pagina 6e#
poate insera coninut &'M( "n ele) 0ceste straturi pot fi ascunse !i suprapuse "ntre
ele) 0cest lucru v ofer varietate deopiuni de
proiectare)
54
/traturile pot fi mutat de la po%iia lor iniial printr$un clicC pe ptrat de culoare al#
!i "n acela!i timp pstr"n mouse$ul pe ea o glism "ntr$o nou po%iie)
2le pot de asemenea pot fi redimensionate fc4nd clic pe ptratele negre
!i trg4ndu$le p4n c"nd dimensiunea dorit este atins)
5utem insera te*t ta#ele imagini animatii flas, "n interiorul ptratului
stratului !i de asemenea toate elementele pe care un fi!ier &'M( lear putea
conine)
/traturile nu sunt numai repre%entate de ptratul precedent) -maginea
apare "n documentul atunci c4nd este desc,is Dreamweaver)
',is icon is used to select t,e laLer w,en Lou clicC on it and w,en Lou clear it Lou
are also clearing t,e laLer) 0ceast pictogram este folosit pentru a selecta stratul
atunci c4nd facem clic pe el !i atunci c4nd "l !tergem de asemenea se !terge
stratul)
11.1.Inserarea unui strat
/traturile pot fi inserat "ntr$o pagin prin meniul Insert; apoi opiunea
Design o"Lect; !i ?a>er.
.dat ce stratul este introdus putem edita atri#utele sale prin selectarea
acestuia)
0vem posi#ilitatea s selectm straturi prin mai multe moduri diferite) Bna
dintre acestea este un clicC pe pictograma ) 0cest lucru nu este util atunci c4nd
e*ist mai multe straturi "n acela!i fi!ier deoarece toate straturile au o imagine ca
aceasta asociat !i este foarte u!or a o selecta gre!it)
0tunci c4nd e*ist mai multe straturi "n acela!i fi!ier este recomanda#il a
le selecta prin fila ?a>ers "n panoul Design care poate fi desc,is prin opiunea
0indow; !i apoi opiunea ?a>ers) De asemenea aceasta poate fi desc,is doar
aps4nd -&.
9n panoul ?a>ers sunt numele tuturor straturilor e*istente !i tre#uie doar s
facem clic pe numele panoului pentru a selecta unul din ele)
11.2.La6er format
5roprietile stratului sunt afi!ate prin intermediul inspectorului de
proprieti
?a>er ID este numele unui strat) 0vem posi#ilitatea s modificm prin
intermediul panoului de straturi !i du#lu$clic pe el)
? !i T indic distana "n pi*eli dintre limitele st4nga !i partea de sus a
fi!ierului !i a stratului)
0 !i H indic limea !i "nlimea stratului)
NIinde< este numrul de ordine a stratului) 0ceast valoare poate fi
sc,im#at prin intermediul panoului de ?a>ers. Bn strat va fi suprapus de altele cu
un indice 3 mai mare)
Vis indic aspectul iniial al stratului) 0spectul poate fi de patru tipuri)
55
Default (;rowser view)
In=erit (stratul a paginii care este afi!at )
Visi"le (arat stratul pe pagin de!i nu este v%ut)
Hidden (stratul este ascuns))
5utem sc,im#a de asemenea aspectul prin panoul ?a>ers fc4nd clic pe
imaginea oc,iului) .c,iul desc,is indic stratul Vsi"le; iar oc,iul "nc,is indic
Hidden.
5rin Bg Image and Color putem indica o imagine sau o culoare de fundal
pentru strat)
.verflow controlea% modul "n care straturile apar "ntr$un #rowser "n ca%ul
"n care coninutul dep!e!te dimensiunea specificat a stratului)
Hisi#le indic faptul c coninutul suplimentar este "n strat !i c acest lucru
este amplificat pentru a se potrivi)
&idden preci%ea% c coninutul suplimentar nu va fi afi!at "n #rowser)
/croll specific faptul c #rowser$ul poate s adauge #are de defilare "n
strat de!i acestea sunt sau nu sunt necesare)
0uto face ca #rowser$ul s arate #ara de defilare c4nd acestea sunt
necesare ("n ca%ul "n care coninutul de strat este mai mare dec4t limita acestuia))
)ncercai*
+devrat,-als
7) /traturile pot fi amplasate oriunde "n pagina 6e#)
2) 2ste posi#il de a introduce te*t !i imagini "n aceea!i caseta de strat
(laLer #o*))
8) /traturile nu pot fi supralipite de ele "ns!i)
4) 5ictograma este folosit pentru a insera un strat)
:) -D$ul (aLer$ului specific numele stratului)
+legei rspunsul corect*
1. Inde<ul IN este utili9at pentru a ...
a)))) indica ordinea "n care straturile au fost introduse)
#) ))) indica numrul de ordine a po%iionrii straturilor)
c) ))) indica numrul de straturi care sunt "ntr$un document)
&. Hidden view indic ...
a)))) c stratul este vi%i#il)
#)))) c stratul este vi%i#il c,iar dac alt strat este peste el)
c)))) c stratul este ascuns)
/. Straturile ...
a) ))) pot avea culori de fundal)
#) ))) nu pot avea o imagine de fundal)
c) ))) nu pot fi ascunse)
(. Cu aLutorul panoului ?a>ers ...
a) ))) vi%i#ilitatea stratului poate fi sc,im#at)
#)))) inde*ul 3 al stratului poate fi sc,im#at)
56
c) 0m#ele variante de mai sus)
d) <ici una din variantele de mai sus)
1. @n strat ...
a) ))) nu poate conine animatii ?las,)
#) ))) se va suprapune aceste straturilor al cror indice N3 este mai
mare dec4t al lor)
c) 0m#ele variante de mai sus)
d) <ici unul din variantele de mai sus)
Bi"liografie*
DEanin 6orner) /usana Gardner$ Dreamweaver MX 2004 STU VWXYZ[\])
^ZWT_[`Z[W 2004$848 p)
,ttp:++www)ado#e)com+designcenter+dreamweaver+articles+drwcs8agolivemi
gration),tmlP
57