Dreamweaver MX

Lecia 1 Noiuni introductive

a) Interfaa Dreamweaver
Dreamweaver reprezint un mediu complet de dezvoltare a paginilor Web,
permind crearea i gestionarea acestor pagini.
Elementele ferestrei Dreamweaver sunt:
Bara Standard Bara de instrumente Bara de inserri

Bara de stare Fereastra Property

Grupul de panouri

Fereastra Document

Bara de instrumente ofer un acces rapid la comenzi importante. Astfel fereastra

document poate fi vizualizat n trei moduri:
- modul Code care permite vizualizarea codului HTML
- modul Design care permite vizualizarea design-ului
- modul Code i Design n care ecranul este mprit n dou pri, permind
afiarea paginii n cele dou moduri.
La afiarea n modul Code, butonul Refresh determin actualizarea n modul
Design a modificrilor fcute n modul Code.

b) Crearea unei pagini Web de baz cu text

Crearea unei noi pagini

Web se face prin comanda File din
meniul New. Fereastra New
Document permite alegerea tipului
de document din cele de baz
propuse.

!!

ntotdeauna pagina de pornire este denumit index.html sau

default.html.
Un document o dat creat se poate aduga textul.
Fereastra Property permite:
- alinierea textului
- formatarea textului
- transformarea textului n liste prin folosirea butoanelor Unordered List i
Ordered List
- indentarea textului prin folosirea butoanelor de indentare.
Nivelul de prioritate a unui titlu se poate stabili din H1, H2, H3 ale barei Text.
Aspectul paginii Web poate fi stabilit din fereastra Page Properties afiat
astfel:
Modify Page Properties
Meniul local al documentului
Se pot stabili:
- un titlu pentru document
- imaginea sau culoarea de fundal
- distanele de margine
- culoarea legturilor.

Metaetichetele ofer informaii suplimentare despre pagin, care nu apar n

browser, dar sunt folosite de motoarele de cutare pentru identificare coninutului paginii
i pentru a oferi rezumate ale acesteia cnd motorul afieaz rezultatele cutrii.
Pentru a defini cuvinte cheie pentru o pagin deschis:
- se alege Insert Head Tags Description
- n caseta de dialog Keywords se introduc cuvintele cheie desprite prin virgule.

ntr-o pagin Web se poate aduga un separator sub forma unei linii orizontale cu
ajutorul butonului Horizontal Rule din bara Common. Barei i se poate aduga limea W,
nlimea H exprimate n pixeli sau procente, respectiv o aliniere sau o umbr din
fereastra Property.
Pagina creat poate fi previzualizat prin:
File --> Preview in Browser.
Butonul Preview in Browser din bara de instrumente

Browser-ul poate fi configurat

alegnd Edit Browser List din meniul File
sau din meniul butonului Preview in
Browser. Astfel va fi afiat fereastra
Preferences care permite adugarea unui
nou browser n list, stabilirea unui
browser primar i a unui browser
secundar.

Procesul crerii unui site Dreamweaver are trei pri de baz:

Adunarea fiierelor HTML ntr-un dosar FISIERE, respectiv a fiierelor imagine

ntr-un alt dosar IMAGINI;

Organizarea fiierelor ntr-un site web local;

ncrcarea fiierelor pe un site aflat la distan i testarea lor.

Paginile Web create vor forma un site. Definirea site-ului din panoul Site, cu
dosarele i fiierele sale, permite o mai uoar gestionare a paginilor Web care-l compun,
fr a folosi comanda Open.

Pentru definirea unui site:

- Se alege comanda New Site astfel:

File --> New Site

Din panoul Site --> New File

Clic dreapta pe panoul Site --> din meniul local se alege New File
- n fia Advanced se specific:
o Local Root Folder dosarul unde vor fi pstrate fiierele,
o Default Images Folder dosarul unde vor fi pstrate imaginile.

Aplicaie: s se creeze un site numit

MAGAZIN ONLINE.

Obs. Fereastra Site poate fi deschis prin

apsarea tastei F8.

c) Stabilirea hiperlegturilor
Hiperlegtura permite utilizatorului s treac la o alt pagin Web, la o alt
seciune a paginii Web curente sau s lanseze o aplicaie de pot electronic.
Legtura poate fi specificat n mod absolut sau n mod relativ n caseta Link din
fereastra Property.
n cazul hiperlegturii ctre o alt pagin web, indicarea paginii la care se face
trimitere poate fi realizat :
cu ajutorul butonului Point to File
prin tastarea numelui de fiier sau a adresei URL dorite
prin alegerea fiierului dorit cu ajutorul butonului Browse for File.
n cazul paginilor foarte lungi se folosesc ancorele cu nume:
- Iniial se selecteaz textul sau locul care va constitui ancora i se alege comanda
Named Anchor:
fie din meniul Insert
fie din butonul Named Anchor a barei Common.
- n caseta Named Anchor se d un nume ancorei
- Se selecteaz textul care va face trimitere la ancor
- n caseta Link a ferestrei Property se tasteaz numele ancorei definite anterior,
nume precedat de simbolul #.
Un text poate face trimitere ctre o adres de mail:
- Se selecteaz textul
- Se alege comanda Email Link:
Fie din meniul Insert
Fie din butonul Email Link a barei Common
- n caseta Email Link se specific adresa de mail la care textul va face trimitere.

O

bservaie: modul n care este afiat codul surs poate fi stabilit alegnd din meniul
View comanda Code View Options cu urmtoarele opiuni:
Word Wrap grupeaz liniile codului astfel nct s poat fi vizibil n ntregime fr
a folosi bara de derulare pe orizontal.
Line Numbers afieaz numrul de linie n marginea din stnga.
Highlight Invalid HTML activeaz evidenierea codului care nu este valid.
Syntax Coloring coloreaz codul pentru ca elementele s fie mai uor de distins.
Auto Indent face automat indentarea codului.

Concluzii:

Site-urile Web conin numeroase fiiere i numeroase tipuri de fiiere. n plus fa

de fiierele paginilor Web n HTML, acestea mai conin fiiere cu imagini, fiiere
cu materiale media, fiiere cu scripturi.
Fereastra Site este una din cele mai importante pri ale programului
Dreamweaver, fiind locul unde se creeaz, se terg, se denumesc i se gestioneaz
fiierele din site.
Fereastra Site se poate deschide din meniul Window sau cu tasta F8.
Fereastra Properties permite stabilirea fontului, culorii i dimensiunii pentru un
text selectat.
Se poate alinia textul la stnga, la dreapta centrat sau la ambele margini, se poate
indenta sau se pot realiza liste ordonate sau neordonate.
Pe msur ce se stabilesc proprietile textului, Dreamweaver genereaz codul
HTML n fundal. Codul poate fi vzut sau editat n vizualizarea Source Code.
Se pot extinde opiunile de formatare a textului folosind foile de stiluri n cascad.

Lecia 2 Adugarea de imagini i fiiere

multimedia
a) Adugarea imaginilor n cadrul unei pagini
Imaginile sunt fiiere separate care apar ntr-o pagin Web.
Astfel imaginile nu sunt parte a fiierului HTML, ele rmn fiiere separate care sunt
inserate de browser la vizualizarea paginii Web.
Inserarea unei imagini se face:
Din meniul Insert Image
Butonul Image din bara Common
La inserarea imaginii, n caseta src a ferestrei Property va fi afiat calea de la
dosarul rdcin a site-ului la fiierul imagine inserat.

bservaie: Dreamweaver completeaz automat dimensiunile imaginii. Imaginea

poate fi redimensionat din punctele de manevrare. La redimensionare, pentru a
pstra proporiile, se apas tasta Shift.
Dar o dat imaginea redimensionat n Dreamweaver, dimensiunea fiierului
imagine nu se reduce. Dac este nevoie de un fiier mai mic, acesta va fi prelucrat n
Fireworks i apoi adus n Dreamweaver.
Alinierea unei imagini la text se face prin meniul derulant Align, meniu care
conine urmtoarele opiuni:

Browser Default aliniaz de obicei la linia de baz, dar depinde de browser.

Baseline aliniaz partea de jos a imaginii la partea de jos a elementului.

Top aliniaz imaginea la elementul cel mai de sus i alte linii de text vor fi grupate
sub imagine.

Middle aliniaz elementul la mijlocul imaginii i alte linii de text vor fi grupate sub
imagine.

Bottom aliniaz elementul n partea de jos a imaginii ca i Baseline.

TextTop aliniaz imaginea cu textul cel mai de sus (nu elementul cel mai de sus ca
n opiunea Top) i alte linii de text vor fi grupate sub imagine.

Absolute Bottom aliniaz partea de jos a elementului cel mai de sus la partea de jos
a imaginii.

Left aliniaz imaginea la stnga altor elemente.

Right - aliniaz imaginea la dreapta altor elemente.
Distana dintre imagine i alte elemente se stabilete din valorile V Space i H
Space a ferestrei Property.
Unei imagini i se poate asocia un text alternativ care va constitui un text
descriptiv pentru imaginea pe care o reprezint. Textul se introduce n caseta Alt a
ferestrei Property.
La o imagine se poate aduga o hiperlegtur prin caseta Link a ferestrei
Property. Specificarea hiperlegturii se poate face:
Prin tastatrea adresei URL.

 Prin adugarea fiierului ctre care se face trimitere cu ajutorul butonului

Browse for File.
Prin tragerea pictogramei Point-to-File peste fiierul dorit n panoul Site.
Principalele formate standard de imagine acceptate de majoritatea browserelor
sunt GIF, JPEG, PNG:

Formatul GIF este mai bun pentru imaginile care au zone de culoare continu, de
obicei desene.

Formatul JPEG este mai bun pentru imaginile fotografice i imaginile care nu au zone
continue de culoare, de exemplu imaginile care conin un gradient de culoare.

Formatul PNG este un nlocuitor pentru formatul GIF.
Editarea unei imagini inserate se face comanda Edit din meniul local al
imaginii, cu editorul de imagine configurat (de obicei Fireworks).
Configurarea unui editor de imagine se face din fereastra Preferences din meniul
Edit. Pentru fiecare tip de fiier se specific editorul de imagine dorit.

n lipsa unei imagini, se poate folosi un nlocuitor al acesteia, adic o Image

Placeholders, pentru care se poate da un nume, o dimensiune i un text alternativ.
Pentru inserarea unui nlocuitor de imagine se poate alege:
Meniul Insert Image Placeholder
Butonul Image Placeholder din bara Common.

Dreamweaver permite crearea efectului de rollover prin folosirea obiectului

Rollover Image:
Din meniul Insert Interactive Image Rollover Image.
Butonul Rollover Image din bara Common.

Pentru aceasta sunt necesare dou imagini cu exact aceleai dimensiuni.

Pentru crearea unei imagini rollover:
Se d clic n locul unde se dorete inserarea imaginii rollover;
Se selecteaz obiectul Rollover Image --> n caseta de dialog Insert Rollover Image se
d un nume imaginii obiect;
Se alege imaginea iniial;
Se alege imaginea rollover;
Se specific opional un text alternativ;
Se nchide caseta de dialog prin ok.

efectul rollover va putea fi previzualizat n browser. Iniial este afiat

Observaie:
imaginea iniial, iar la poziionarea cursorului de mouse peste imagine iniial, va fi
afiat a doua imagine aleas.

Aplicaie: n fiierul cadouri.html s se insereze trei imagini aliniate diferit fa de text i

o imagine de tip rollover.

b) Utilizarea lui Fireworks pentru crearea de imagini

Fireworks este un instrument de creare i optimizare a imaginilor.
Dreamweaver i Fireworks sunt strns integrate. Se pot deschide fiiere
Fireworks n Dreamweaver, se pot face modificri, se pot vizualiza modificrile n
fiierul iniial din Fireworks. Se pot exporta direct n Dreamweaver tabele, imagini
rollover i cod HTML creat n Fireworks.
Aplicaie:
- Avnd important imaginea Bobita si calculatorul.gif s se optimizeze la cea mai mic
dimensiune ca i fiier bobita.jpeg.

- Cu ajutorul butonului Slice, s se fragmenteze imaginea n dou felii.

- Cu ajutorul butonului Quick Export, se va exporta fiierul bobita.jpeg n
Dreamweaver.
Un fiier o dat exportat, poate fi importat n Dreamweaver:
- Se alege comanda Fireworks HTML:
Din meniul Insert Interactive Image Fireworks HTML
Butonul Fireworks HTML din bara Common.
- n caseta de dialog Insert Fireworks HTML, prin butonul Browse, se alege fiierul
HTML exportat anterior

- Tabelul HTML i imaginile sunt inserate n fereastra document din Dreamweaver

bservaie: la selectarea tabelului sau imaginilor, fereastra Property arat c tabelul

sau imaginea provine din Fireworks. Butonul Edit determin deschiderea
programului Fireworks prin care se poate face orice editare.

c) Crearea hrilor de imagini

Hrile de imagini reprezint seturi de zone fierbini (hotspot) pe care se
poate executa clic n cadrul unei imagini, aciune care are ca efect deschiderea unui fiier
HTML.
Definirea zonelor fierbini se face cu ajutorul celor trei instrumente hotspot n
form de dreptunghi, oval sau poligon.
Pentru crearea unei hri de imagini:
- se selecteaz imaginea
- se deseneaz zona fierbinte
- se introduce un URL sau se utilizeaz pictograma Point-to-File i se adaug un text
alternativ n caseta Alt.
Destinaia ferestrei unde duce legtura se poate specifica alegnd una din valorile
listei derulante Target:
_blank deschide documentul legat ntr-o nou fereastr de browser.
_parent deschide documentul legat n acelai cadru din setul de cadre, n care
se afl fereastra printe.
_self deschide documentul n fereastra curent, nlocuind-o.
_top deschide documentul legat n fereastra curent a browser-ului, nlocuind
toate cadrele.

Concluzii:
Dreamweaver aeaz imaginile n pagin, imagini de obicei de format GIF,
JPEG sau PNG.
Imaginile dintr-o pagin Web reprezint fiiere separate. Dreamweaver reine
locul n care sunt stocate aceste fiiere i pstreaz integritatea legturilor
dintre aceste fiiere i pagin, ct timp se lucreaz ntr-un site definit n
Dreamweaver.
Se poate alinia textul fa de imagine prin opiunile de aliniere a imaginii.
Spaierea imaginilor mbuntete felul n care apar imaginile i felul n care
arat n pagin. Spaierea se stabilete n panoul Properties.
Textul Alt (alternativ) apar n browser cnd utilizatorul trece cursorul mouseului peste imagine.
Legturile pot fi atribuite oricrui text sau oricrei imagini de pe pagin.
Legturile imagine sau cele text sunt definite din fereastra Properties.
Se pot crea zone fierbini pe care se poate efectua clic n cadrul unei imagini,
iar fiecare dintre acestea poate avea propria int.
Se poate folosi lista derulant Target din fereastra Properties atunci cnd se
dorete deschiderea unei legturi ntr-o nou fereastr de browser (opiunea
_blank).

Lecia 3 Tabele i straturi

Tabelele ofer posibilitatea prezentrii logice a datelor n
coloane i rnduri, precum i controlarea locului n care apar obiectelor
n pagin.
a) Crearea unui tabel
Un tabel poate fi inserat n modul Design View sau n modul Code folosind
limbajul HTML:
Meniul Insert Table
Butonul Table din bara Table

bs: Butonul Table ca i opiunea Table din meniul Insert, sunt active numai pentru
modul de vizualizare standard: View Table View Standard View.

n fereastra Properties se pot specifica:

Cell padding spaiul dintre coninutul unei celule i marginea ei.

Cell Spacing spaiul dintre celule.

Width limea tabelului n pixeli sau n procente din limea browser-ului.

Border grosimea chenarului din jurul tabelului.

Background color culoarea de fundal.

Bords Color culoarea chenarului tabelului.

Background Image Imaginea de fundal care se repet (tile) pentru a umple
tabelul.

Rows numrul de linii.

Cols numrul de coloane.

Align alinierea tabelului, cu valorile Left, Center, Right, Default (aliniere
fcut pe baza paragrafelor anterioare).

ntr-un tabel celulele pot fi lipite sau o celul poate fi spart n mai multe celule
astfel:
- Modify Table Merge Cells
- Modify Table Split Cell

b) Importarea i exportarea datelor n Dreamweaver

Pentru a importa date ntr-un tabel Dreamweaver, acestea ar trebui s se afle ntrun fiier text (exemplu Microsoft Word) cu coloanele separate prin tab-uri:
- Se alege din meniul Insert Table Objects Import Tabular Data.
- Cu ajutorul butonului Browse se selecteaz fiierul.
- n caseta de dialog Import Tabular Data se specific opiunile.

bs: unui tabel i se poate aduga o etichet (Caption), alegnd Insert Table Object
Caption.

Exportul datelor dintr-un tabel HTML se poate face ntr-o aplicaie de foi de
calcul, baze de date sau orice alt aplicaie care are capacitatea de a prelucra date
delimitate astfel:
- Se selecteaz tabelul.
- Din meniul File se alege Export Export Table.

c) Adugarea i sortarea datelor

ntr-un tabel, ordonarea datelor se poate face alfabetic sau numeric astfel:
- Se selecteaz tabelul.
- Din meniul Commands se alege Sort Table.
- n caseta de dialog Sort Table se specific prioritile de sortare.

d) Aezarea pe straturi
Straturile permit aezarea unui obiect oriunde n pagin. ntr-un strat se poate
introduce text sau imagine. Textul poate fi tastat sau se poate insera prin copy-paste.
Stratul poate fi redimensionat sau poate fi mutat din punctele de selecie.
Pentru a crea un strat:
- se alege comanda Layer:
o din meniul Insert
o butonul Draw Layer din bara Common

- se deseneaz stratul prin tragere cu mouse-ul  n punctul de inserare va aprea o

pictogram ancor specific Layer.

Selectarea stratului se poate face fie prin clic pe chenarul stratului, fie prin clic pe
pictograma ancor specific.
Avnd stratul selectat, din fereastra Properties se pot specifica proprietile
stratului:

Cmpul Layer ID atribuie un nume care este folosit n aplicaii avansate,
cum sunt JavaScript-urile. Numele stratului nu trebuie s conin spaii sau
caractere care nu sunt litere sau cifre pentru a evita conflictele cu limbajele de
scriptare.

Bg Color definete o culoare de fundal.

Bg Image definete o imagine de fundal.

L i T specific poziia stratului n document prin valorile pentru distana de
la marginea din stnga (L), respectiv distana de la marginea de sus (T).

W (lime) i H (nlime) pentru o dimensionare exact a stratului.

Overflow controleaz modul n care este manipulat textul dintr-un strat n
browser i poate avea valorile:
o Visible extinde stratul pentru a afia tot textul.
o Hidden ascunde tot textul care nu ncape.
o Scroll ofer bare de derulare tot timpul.
o Auto afieaz bare de derulare numai dac este necesar.

Viz specific dac un strat este vizibil sau nu.

bs: ancora specific poate fi ascuns din fereastra Preferences din meniul Edit i
deselectnd opiunea Anchor Points for Layers din categoria Invisible Elements.

bs: opiunea Visual Aids din meniul View permite afiarea sau ascunderea
diferitelor elemente: chenar la strat (Layer Border), chenar la tabel (Table Border)
sau chenar la cadru (Frame Border).
e) Convertirea straturilor n tabele
Convertirea straturilor n tabele rezolv orice probleme de compatibilitate cu
browser-ul, deoarece tabelele sunt suportate chiar i de versiunile mai vechi de browser.
Pentru ca straturile s fie convertite n tabele este necesar ca aceste straturi s nu
se suprapun. Pentru a verifica suprapunerea straturilor:

Din meniul Window, opiunea Others se alege Layers  n partea
dreapt va fi afiat panoul Layers.

n panoul Layers se selecteaz caseta de validare Prevent Overlaps.
Pentru a converti straturile n tabele:

Din meniul Modify se alege Convert Layers to Table  va fi afiat
fereastra de dialog Convert Layers to Table:

n fereastra Convert Layers to Table se poate alege:

Smallest: Collapse Empty Cells specific o dimensiune minim a
celulei exprimat n pixeli.

Use Transparent GIFs creeaz n mod automat imagini invizibile
pentru ultima linie din tabel, pentru a evita redimensionarea tabelului n
browser.

Center on Page centreaz n pagin tabelul generat (implicit este la
stnga).
Dup nchiderea ferestrei de convertire a stratului n tabel pot s apar mesaje de
eroare datorit urmtoarelor probleme:

Straturile se suprapun, caz n care straturile trebuie identificate i mutate.

Straturile sunt imbricate, caz n care trebuie identificat stratul aflat n
interiorul altuia i mutat.

f) Suprapunerea straturilor n stiv

Straturile pot fi folosite pentru a suprapune obiectele ntr-o stiv.
Ordinea n stiv este definit, pentru fiecare strat, de valoarea Z-Index. Cu ct
aceasta este mai mare, cu att obiectul este mai sus n stiv. Astfel un obiect care are
valoarea Z-Index egal cu 2 va fi aezat deasupra altui obiect care are valoarea Z-Index
egal cu 1.
Dac un strat aflat mai sus nu are o imagine sau o culoare de fundal, atunci
coninutul su va aprea deasupra coninutului straturilor aflate dedesubt.

Concluzii:

Tabelele reprezint cea mai sigur i larg utilizat modalitate de a plasa obiectele ntro pagin web.
Pentru definirea unui tabel se alege Insert Table i se specific dimensiunea
tabelului, liniile i coloanele.
Tabelele pot avea culori de fundal i imagini de fundal particularizate.
n cadrul unui tabel celulele pot fi formatate de sine stttor. Dac exist un conflict
ntre formatarea celulelor i formatarea tabelului, formatarea celulei are prioritate )de
exemplu culoarea de fundal).
Celulele pot fi lipite sau pot fi scindate, pentru a crea aezri asimetrice n pagin.
Tabelele sunt utilizate de obicei pentru a oferi o gril pentru aezarea n pagin a
obiectelor, dar mai pot fi afiate i pentru a afia date.
Dreamweaver genereaz n mod automat un tabel din date importate.
Straturile reprezint o modalitate simpl de a proiecta aezarea n pagin, dar nu sunt
suportate corect de toate browser-ele.
Se poate realiza p aezare n pagin folosind straturi, apoi acestea pot fi convertite n
tabele, pentru o afiare ct mai corect a paginii n browser.
Dac urmeaz a se converti straturi n tabele, straturile nu trebuie s se suprapun.



Straturile funcioneaz ca nite mici ferestre n browser i pot avea propriile fundaluri
i bare de derulare.
Straturile pot fi suprapuse n stive pentru a crea diferite efecte. Valoarea Z-Index din
fereastra de proprieti determin care strat este afiat deasupra altuia: o valoare ZIndex mai mare mut stratul deasupra celor cu valori Z-Index mai mici.

Lecia 4 Stiluri
Foile de stiluri externe Cascading Style Sheets CSS sunt
folosite pentru a defini elemente de formatare cum ar fi
dimensiunea, culoarea i tipul fontului pentru text, aceste formatri putnd fi ulterior
aplicate la nivel global pentru tot site-ul.
Foile de stiluri externe sunt denumite foi de stiluri n cascad deoarece reprezint
trei niveluri elementare de formatare:

Formatare local aplicat pe o anumit pagin textului selectat i are prioritate
fa de celelalte formatri.

Formatare la nivel de pagin aplicat unei ntregi pagini i are prioritate fa de
formatarea aplicat unui ntreg site.

Formatare la nivelul site-ului (prin intermediul unui fiier foaie de stiluri
externe), nu are prioritate fa de nici o formatare local sau la nivel de pagin
aplicate.

bs: cnd toate tipurile de stiluri sunt aplicate, au prioritate stilurile definite local
(denumite stiluri inline). n continuare au prioritate stilurile la nivel de pagin. i
numai dac nu exist stiluri inline i la nivel de pagin care s fie contradictorii, textului
i sunt aplicate atributele unei foi de stiluri externe.
Stilurile HTML reprezint setul de ase stiluri de titluri (Heading 1, Heading 2,)
i stilurile de paragraf care implicit sunt accesibile n lista derulant Format din fereastra
Properties.
Dac se dorete aplicarea unei formatri de pagin sau a unui stil extern, este
necesar eliminarea formatrii locale inline, dac aceasta a fost realizat anterior.
Pentru eliminarea formatrii locale:
- Se selecteaz textul din ntreaga pagin alegnd Edit Select All.
- Din fereastra Properties:
o Din lista Font se alege Default Font
o Din lista derulant Size se alege None.
o Din paleta de culori Color se alege Default Color.
o Se terg atributele de tipul Bold sau Italic acolo unde au fost aplicate.

a) Crearea stilurilor de pagin

Stilurile de pagin se definesc astfel:
- Se deschide o pagin document
- Se alege Modify Page Properties
- Se alege o culoare de fundal, o culoare
pentru text, culori pentru legturi (pentru
strile normal, vizitat, activ).

b) Crearea foilor de stiluri externe

Foile de stil externe sunt fiiere care sunt salvate n dosarul rdcin a site-ului cu
extensia css .

~ Crearea unui nou stil HTML ~

Stilurile HTML sunt cele corespunztoare nivelurilor de titlu.
Pentru crearea unui nou stil HTML:
- Se deschide o pagin Web n fereastra Document
- Se afieaz panoul CSS Styles din meniul Window dac acesta este ascuns.
- n partea dreapt a panoului CSS Style se d clic pe pictograma New CSS Style

- Va fi afiat fereastra New

Style n care se alege:
o Tag se alege h1
pentru Heading 1.
o Type se alege
Redefine HTML Tag.
o Define In New Style
Sheet File.
- Se d clic pe butonul Ok
pentru a nchide fereastra.

- Va fi afiat fereastra Save Style Sheet File As n care se salveaz fiierul n dosarul
rdcin a site-ului i se denumete cu extensia css i se d clic pe butonul Save.

- Va fi afiat fereastra CSS Style Definition for h 1 in style css unde se definete tipul
de font, culoarea, dimensiunea pentru Heading 1.

- Se d clic din nou pe pictograma New Style din panoul CSS Style i se repet paii
pentru celelalte nivele de titluri.

~ Definirea stilurilor pentru strile legturilor ~

Legturile din browser-e pot fi afiate n patru stri: ridicat (normal), cu mouse-ul
peste legtur (hover), activ (apsat) i vizitat.
Implicit culorile legturilor sunt: legturile sub form de text subliniat cu albastru,
cele vizitate cu violet, cele active cu rou.

Pentru a defini stiluri pentru legturi:

- se d clic pe pictograma New Style din panoul CSS Style.
- se alege:
o Selector a:link (pentru
legturi normale).
o Type Use CSS
Selector
o Define In New Style
Sheet File.
- Se nchide fereastra prin OK.

- se salveaz fiierul cu extensia css

- n fereastra CSS Style

Definition for a:active in style
link.css se specific opiunile de
font, dimensiune, culoare.

~ Definirea stilurilor personalizate ~

Stilurile personalizate nu sunt stiluri standard, sunt stiluri proprii aplicate peste
atributele definite de celelalte stiluri.
Definirea unui stil propriu se face asemantor cu celelalte stiluri, parcurgand
paii corespunztori:
- se alege New CSS Style din
panoul CSS Styles

- se salveaz stilul propriu ntr-un fiier cu extensia css.

- se aleg opiunile de font, dimensiune, culoare.

n final s-au obinut trei fiiere corespunztoare stilurilor externe, pentru legturi
i particularizate afiate n panoul CSS Styles:

bs: Pe msur ce sunt adugate stiluri noi ntr-un fiier creat, Macromedia
resalveaz n mod automat fiierul css cu noile definiii de stiluri.

c) Aplicarea unei foi de stiluri externe asupra paginilor Web

Odat ce stilurile au fost definite, pot fi aplicate tuturor paginilor din site, dup ce
formatrile locale au fost eliminate dac existau.
Astfel:
- Se deschide pagina Web.
- Din lista derulant Format se aleg nivelurile de titlu dorite pentru textele selectate.
- Se d clic pe pictograma Attach Style Sheet, fiind afiat fereastra Link External
Style Sheet n care prin butonul Browse se alege fiierul extern css care va fi asociat
paginii Web:

d) Editarea i actualizarea stilurilor

Stilurile o dat create pot fi actualizate (reeditate), schimbrile fiind aplicate la
toate paginile la care este ataat fiierul css .
Pentru editarea stilurilor:
- n panoul CSS Styles se alege
butonul radio Edit Styles.
- Se d dublu-clic pe fiierul css ale
crui stiluri se doresc a fi
modificate, fiind afiat fereastra
style.css
- Se selecteaz stilul ce trebuie
modificat i se d clic pe butonul
Edit

- n fereastra CSS Style Definition se fac modificrile dorite.

Concluzii

Foile de stiluri externe sunt o metod puternic de formatare global a textului, la

nivelul ntregului site.
Formatarea textului poate fi aplicat unei pagini n trei moduri: cu ajutorul formatrii
locale (prin selectarea textului), al formatrii paginii i cu ajutorul stilurilor externe.
Dac s-a aplicat formatarea local unui text (fontul, dimensiunea, culoarea), atunci
stilurile externe nu vor avea nici un efect asupra textului, pentru c formatarea
local are prioritate fa de stilurile externe.
Dup ataarea unui fiier css la o pagin Web, pagina adopt formatrile specificate
n fiierul css.

Lecia 5 Cadre
Cadrele reprezint seturi de ferestre deschise simultan n
fereastra browser-ului folosite ca structur de navigare pentru un site.
Fiecare set de cadre este format din cel puin trei fiiere HTML, dintre care unul
definete structura setului de cadre. De obicei acesta este folosit ca prim pagin (pagin
de home) la deschiderea site-ului.
De obicei, la crearea unui set de cadre este mai eficient s se creeze cadrele
(fiierele) componente i apoi fiierul setului de cadre.
Aplicaie:
- s se creeze un site de turism numit AG DE TURISM care s conin dou subdosare:
FISIERE i IMAGINI
- n dosarul FISIERE s se creeze dou fiiere numite cadrul1.html, cadrul2.htm
- s se creeze un fiier nou n care se va crea setul de cadre i care va constitui fiierul
index.html.
a) Definirea unui fiier HTML set de cadre
Fiierul index.html poate fi definit ca fiier set de cadre prin parcurgerea urmtorilor
pai:
- se deschide fiierul index.html
- din meniul Modify se alege comanda Frameset care permite inserarea unui set de
cadre separate printr-o linie despritoare n diferite poziii ale ecranului:
Split Frame Left
Split Frame Right
Split Frame Up
Split Frame Down
- Se selecteaz cadrul din stnga i se insereaz fiierul cadrul1.html astfel:

Din meniul File se alege Open in Frame

Din fereastra Open se deschide fiierul cadrul1.html
- Similar se selecteaz cadrul din dreapta i folosind File Open in Frame, se
integreaz fiierul cadrul2.html.

bs: la salvarea unui set de cadre, sunt salvate modificrile fcute fiecrui fiier
HTML din cadrul setului de cadre. La alegerea comenzii File Save All Frames se
cere de fapt salvarea unul cte unul a fiecrui fiier din setul de cadre.
O dat cu specificarea cadrelor, acestea trebuie denumite:
- se afieaz panoul Frames alegnd: Window Others Frames
- se selecteaz cadrul din stnga fie prin clic pe acesta n fereastra Document, fie prin
clic pe cadrul din stnga din panoul Frames.
- n fereastra Properties, n caseta Frame Name se d un nume cadrului din stnga
(cuprins)

- similar se procedeaz cu cadrul din dreapta care se denumete (principal)

bs: nu trebuie confundat numele unui cadru cu numele de fiier al cadrului. Numele
cadrelor sunt definite n panoul Frames i sunt folosite pentru a defini intele
legturilor. Dei s-au asociat cadrelor nume de fiiere, tot mai este necesar s li se
asocieze i nume.

b) Definirea legturilor pentru cadre

Pentru a asocia inta unei legturi dintr-un cadru de navigare care se va deschide
ntr-un cadru principal se procedeaz astfel:
- Se d clic pe textul sau imaginea din cadrul cruia se dorete asocierea legturii.
- n fereastra Properties, n caseta Link se specific fiierul HTML la care duce
legtura, specificare fcut fie cu ajutorul butonului Browse for File, fie cu ajutorul
butonului Point to File.

- n caseta Target se specific unde s fie afiat fiierul din caseta Link.

c) Formatarea cadrelor
Aspectul cadrelor poate fi mbuntit. Astfel cadrele pot fi afiate cu chenare
groase sau colorate sau fr chenare, cu sau fr posibilitatea redimensionrii, cu sau fr
bare de derulare.

~ Aplicarea chenarelor ~
- se selecteaz ntreg setul de cadre prin clic pe marginea exterioar a setului din panoul
Frames (ntreg setul va fi nconjurat de o line punctat).
- n caseta Border Width se alege o dimensiune pentru chenar, n caseta Border Color
se alege o culoare pentru chenar, n caseta Borders se alege una din valorile Yes, No
sau Default.

~ Ascunderea sau afiarea barelor de defilare ~

- se selecteaz un cadru n panoul Frames, nu un set de cadre ca n cazul aplicrii
chenarelor.
- Se selecteaz caseta de validare No Resize dac se dorete mpiedicarea utilizatorului
s redimensioneze cadrul.
- Lista derulant Scroll permite afiarea sau nu a barelor de defilare prin alegerea uneia
dintre valorile: Yes (afieaz n permanen), No (nu afieaz niciodat), Auto
(afieaz numai atunci cnd este necesar), Default (similar cu Auto).

bs: toate modificrile fcute n fiierul setului de cadre trebuie salvate File Save
All. Astfel vor fi salvate modificrile fcute att n fiierul setului de cadre, ct i n
fiierele cadrelor.

Concluzii:

Cadrele sunt un mod eficient de a furniza seciunile de navigaie ale site-ului.

O metod uoar de a realiza cadre este de a proiecta nti paginile care vor fi folosite
n interiorul uni cadru i apoi definirea setului de cadre.
Legturile dintr-un cadru de navigare ar trebui s se deschid aproape ntotdeauna
ntr-un alt cadru (pagina principal).

Lecia 6 Utilizarea panoului Assets

Panoul Assets constituie o alternativ la fereastra Site pentru
gestionarea fiierelor.
Obiectele din panoul Assets sunt organizate n urmtoarele
categorii:

Images imagini.

Colors culori cu care se pot crea seturi de culori.

URLs URL-uri, adrese folosite n site, att legturile interne, ct i cele
externe site-ului.

Flash movies filme Flash.

Shockwave file fiiere Shockwave.

Movies filme, altele dect Flash.

Scripts Scripturi (JavaScript)

Templates - abloane.

Library intrri de bibliotec. Atunci cnd obiectele de acest tip sunt
introduse ntr-o pagin, nu pot fi editate direct din pagin. Ele ns se editeaz
dintr-o versiune special a ferestrei Document, iar dup ce s-a modificat un
obiect din bibliotec, acel obiect este actualizat n fiecare pagin.