suport curs dream weaver

8/8/2019 Suport Curs Dream Weaver

1/61

Curs WEB DESIGN Modul - DreamWeaver Noiuni introductive

1

MACROMEDIA DREAMWEAVER

Lector SUPURAN RICHARDO


2/61


2

CUPRINS

I. Introducere ..............................................................................................................1

II. Crearea unui document nou/deschiderea unui document existent .......................... 3

III. Inserarea elementelor HTML...................................................................................6

IV. Aplicarea proprietarilor elementelor....................................................................... 24

V. Aplicarea stilurilor in interiorul TAG-urilor sau in antetul documentului..................46

VI. Verificarea compatibilitii cu browsere .................................................................57

VII. Salvarea documentului.......................................................................................... 58

VIII. Publicarea documentului .......................................................................................59


3/61


3

I.A. Ce este HTML?

HyperText Markup Language (HTML) este un limbaj de marcare utilizat pentru

crearea paginilor web ce pot fi afiate ntr-un browser (sau navigator). Scopul HTML este

mai degrab prezentarea informaiilor paragrafe, fonturi, tabele .a.m.d. dect

descrierea semanticii documentului.

Specificaiile HTML sunt dictate de World Wide Web Consortium (W3C).

HTML este o form de marcare orientat ctre prezentarea documentelor text pe o

singura pagin, utiliznd un software de redare specializat, numit agent utilizator HTML,

cel mai bun exemplu de astfel de software fiind browserul web. HTML furnizeaz

mijloacele prin care coninutul unui document poate fi adnotat cu diverse tipuri de

metadate i indicaii de redare. Indicaiile de redare pot varia de la decoraiuni minore ale

textului, cum ar fi specificarea faptului c un anumit cuvnt trebuie subliniat sau c o

imagine trebuie introdus, pn la scripturi sofisticate, hri de imagini i formulare.

Metadatele pot include informaii despre titlul i autorul documentului, informaii structurale

despre cum este mprit documentul n diferite segmente, paragrafe, liste, titluri etc. i

informaii cruciale care permit ca documentul s poat fi legat de alte documente pentru a

forma astfel hiperlink-uri (sau web-ul).

HTML este un format text proiectat pentru a putea fi citit i editat de oameni

utiliznd un editor de text simplu. Totui scrierea i modificarea paginilor n acest fel

solicit cunotine solide de HTML i este consumatoare de timp. Editoarele grafice (de tip

WYSIWYG) cum ar fi Macromedia Dreamweaver, Adobe GoLive sau Microsoft

FrontPage permit ca paginile web sa fie tratate asemntor cu documetele Word, dar cu

observaia c aceste programe genereaz un cod HTML care este de multe ori de proast

calitate.

HTML se poate genera direct utiliznd tehnologii de codare din partea serveruluicum ar fi PHP, JSP sau ASP. Multe aplicaii ca sistemele de gestionare a coninutului,

wiki-uri i forumuri web genereaz pagini HTML.

HTML este de asemenea utilizat n email. Majoritatea aplicaiilor de email folosesc

un editor HTML ncorporat pentru compunerea email-urilor i un motor de prezentare a

email-urilor de acest tip. Folosirea email-urilor HTML este un subiect controversat i multe

liste de mail le blocheaz intenionat.


4/61


4

I.B. Descrierea programului

Macromedia Dreamweaver este o unealt destinat creatorilor de pagini web.

Dreamweaver a fost creat de Macromedia (acum Adobe Systems) i momentan a ajuns la

versiunea 8. Primele versiuni ale produsului serveau doar ca simple editoare HTML de

tipul WYSIWYG dar n versiunile recente au fost implementate funcii de editare avansate

i support pentru alte tehnologii web cum ar fi CSS, JavaScript etc.

Dreamweaver s-a bucurat de un larg succes nc de la sfritul anilor '90 i

momentan deine aproximativ 80% din piaa editoarelor HTML. Produsul poate fi rulat pe

variate platforme software: Mac, Windows, dar suport n acelai timp i platforme UNIX

cu ajutorul unor emulatoare software, cum ar fi Wine.

Ca orice alt editor WYSIWYG, Dreamweaver poate ascunde detaliile de

implementare a paginilor HTML, fcnd astfel posibil crearea cu uurin a paginilor web

de ctre utilizatorii neexperimentai.

Unii creatori de pagini web critic aceste tipuri de editoare deoarece produc pagini

de dimensiuni mult mai mari dect ar fi necesar, ceea ce conduce la o funcionare

neperformant a browserelor web. Aceast afirmaie este n mare parte adevarat

deoarece paginile web produse folosesc design-ul pe baz de tabel. n plus, produsul a

mai fost criticat n trecut i pentru producerea de coduri care adesea nu erau conform

standardelor W3C, dar acest aspect a fost mult mbuntit n versiunile recente. Cu toate

acestea, Macromedia a crescut suportul pentru tehnologia CSS precum i alte modaliti

de design fr a fi necesar folosirea design-ului pe baz de tabel.

Dreamweaver permite folosirea majoritii browserelor instalate pe calculatorul

utilizatorului, pentru a previzualiza website-ul creat. De asemenea conine i cteva

utilitare pentru administrarea site-urilor, cum ar fi cele pentru a gsi i modifica un paragraf

sau o linie de cod, n ntregul web site, pe baza oricror parametri specificai de ctreutilizator. Cu ajutorul panourilor de stare se poate crea cod JavaScript fr a avea

cunotine de programare.

Odat cu apariia versiunii MX, Macromedia a ncorporat utilitare de generare

dinamic a coninutului. De asemenea este oferit suport pentru conectarea la baze de date

(cum ar fi MySQL i Microsoft Access) pentru a filtra i afia coninutul folosind script-uri

de genul PHP, ColdFusion, Active Server Pages (ASP) i ASP.NET, fr a avea nevoie de

o prealabil experien n programare.


5/61


5

Un aspect foarte ludat al Dreamweaver-ului l reprezint arhitectura sa extensibil.

Extensiile, aa cum sunt ele cunoscute, sunt mici programe, pe care orice dezvoltator le

poate scrie (de obicei n HTML i JavaScript) i pe care oricine le poate descarca i

instala, acestea aducnd un spor de performan i funcionalitate mbuntit

programului. Exist o comunitate de dezvoltatori care produc aceste extensii i le public

(att comercial ct i gratuit) pentru probleme de deyvoltare web, de la simple efecte

rollover pn la soluii complete de vnzare online.

Versiuni:

Dreamweaver 1.0 (lansat n decembrie 1997

Dreamweaver 1.2 a urmat n martie 1998)

Dreamweaver 2.0 (lansat n decembrie 1998)


Dreamweaver UltraDev 1.0 (lansat n iunie 2000)


Dreamweaver UltraDev 4.0 (Released decembrie 2000)

Dreamweaver MX (lansat n mai 2002)

Dreamweaver MX 2004 (lansat n 10 septembrie, 2003)

Dreamweaver 8 (lansat n 13 septembrie, 2005)

Dreamweaver 9 (Creative Suite3) (lansat n 27 martie, 2007)

Cerinte de sistem:

Procesor Intel Pentium 4, Intel Centrino, Intel Xeon sau Intel Core Duo (sau compatibil)

Sistem de operare Microsoft Windows XP cu Service Pack 2 sau Windows Vista Home

Premium, Business, Ultimate sau Enterprise (certificat pentru editiile pe 32 de biti)

512 MB de RAM

1 GB de spatiu liber pe hard-disc

Monitor cu rezolutia de 1024x768 cu placa video pe 16 biti

DVD-ROM drive

Conectare la Internet sau linie telefonica necesara pentru activarea produsului

Conectare la Internet necesara pentru Adobe Stock Photos sau alte servicii.


6/61


6

II. A. Crearea unui document HTML cu DreamWeaver

Crearea unui document HTML cu Macromedia DreamWeaver se poate face

folosind una din cele 3 variante:

1. clic pe Start- Programe-Macromedia-Macromedia Dreamweaver 8

2. clic pe iconita verde din bara cu lansari rapide

3. dublu clic pe desktop, pe iconita verde


7/61


7

II. B. Deschiderea unui document HTML cu DreamWeaver

Deschiderea unui document HTML se poate face parcurgand urmatorii pasi:

1. se deschide directorul in care se gaseste fisierul care ne intereseaza

2. se da clic-dreapta pe fisierul respectiv, se deschide o lista de optiuni, din

care se alege Edit With Dreamweaver 8


8/61


8

III. A. Mediul Macromedia


9/61


9

III. B. Inserarea elementelor folosind opiunea Insert din meniul superior

Elementele HTML se insereaz in document folosind opiunea Insert din meniul

superior:


10/61


10

III. C. Inserarea elementelor folosind butonul TAG Chooser din Insert Bar

In cazul in care o varianta din cele de mai jos:

1. se alege Insert din meniul superior, si prima optiune,

2. se tasteaza Ctrl-E

3. se foloseste butonul din Insert bar

se va deschide o fereastra cu toate TAG-urile arajate pe categorii:


11/61


11

III. D. Inserarea elementelor folosind optiunile si butoanele din Insert bar

III. D1. Inserarea elementelor din Insert bar-Document toolbar Common

Hyperlink

Email link

Numele ancorei


12/61


12

Tabel

Insereaza un TAG div

Insereaza imagini Insereaza o imagine (vezi modulul de Fireworks)


13/61


13

Transforma textul intr-o imagine

Insereaza un script de tip RollOver

Insereaza un fisier Fireworks


14/61


14

Insereaza un script care creeaza meniu din poze

Insereaza obiecte Insereaza obiecte


15/61


15

Insereaza date

Include un Side Server

Insereaza un comentariu

Optiuni Template


16/61


16

Colectia de TAG-uri


17/61


17

III. D2. Inserarea elementelor din Insert bar-Document toolbar Layout

Tabel

Insereaza un TAG div

Deseneaza un Layer

Permite comutarea intre modurile de vizualizare: Standard, Expandat si Layout

Tabelul Layout (activ doar in modul Layout)

Deseneaza o celula Lyout

Insereaza un rand deasupra randului selectat

Insereaza un rand sub randul selectat


18/61


18

Insereaza o coloana in stanga coloanei selectate

Insereaza o coloana in dreapta coloanei selectate

Frame-uri - lista de optiuni

Importa Tabulator Data


19/61


19

III. D3. Inserarea elementelor din Insert bar-Document toolbar Forms

Elementele din formularul unui document se nsoesc de obicei alturi de scripturi

(programele, aplicaii). Mai jos vom folosi un exemplu de inserare a elementelor unui

formular:

Codul sursa forma

Curriculum Vitae

Nume Prenume

Supuran Richardo

Sex>

Masculin

Feminin

Masculin

Feminin

Studii

Scoala profesionala

Liceu

Facultate

Facultate


20/61


20

Acces Internet

Serviciu

Serviciu

Acasa

Acasa

Net Cafe Net Cafe

Foto

Observatii

curs webdesign

cursuri w ebdesign

&nbsp

anuleaza

trimite


21/61


21

Forumarul de mai sus va arata in browser ca in imaginea de mai jos:


22/61


22

III. D4. Inserarea elementelor din Insert bar-Document toolbar Text

Butoanele din document toolbar-text permit modificarea proprietatilor textului:

Deschide o fereastra de editare a fonturilor

Text ingrosat

Text inclinat

Text ingrosat

Text inclinatParagraf

TAB

Text preformatat

Titlu

Lista cu marcatori

Lista numerotata

Element intr-o lista

Lista definita

Termeni definiti

Descriptori definiti

Abrievieri

Acronime

Caractere speciale


23/61


23

III. E. Inserarea elementelor folosind ferestrele Code si Design din Document toolbar

Folosind Butonul Split se pot insera manual elementele HTML direct in fereastra

cu codul sursa de sus, iar textul se poate insera si in fereastra de design de jos.

Elementele HTML sunt prezentate in capitolul III.B, impreuna cu proprietatile lor.

Caractere speciale in HTML(spatiu liber) &nbsp

&copy

&euro

&cent


24/61


24

IV. A. Selectarea elementelor HTML, pentru aplicarea ulterioara a proprietilor

Exista mai multe modaliti de selecie a elementelor HTML:

1. in Fereastra Design cu un clic/drag&drop cu mouse-ul pe elementul dorit

2. in fereastra Code cu drag&drop

3. in Tag Selector clic pe elementul dorit

4. pentru elementele din antetul documentului se alege optiunea Header Content si

butoanele de la nr.5


25/61


25

IV. B. Aplicarea manuala a proprietatilor elementelor HTML

Se poate face manual in fereastra Code. Mai jos sunt date ca exemple cele mai

uzuale proprietati, cu exemple

(defineste inceputul si sfarsitul fisierului web)

(antetul paginii html)

titlu

Fig.1

Fig.2

Fig.3

...

(corpul paginii html)

.

Fig.4


26/61


26

(divizare in blocuri cu anumite proprietati definite)

. Fig.5

(specifica atributele unui text:marime,culoare,model)

Fig.4

(tabel)

Fig.6

Fig.7

Fig.8

(imagine)

Fig.9

(caseta aplicat) sau (caseta aplicat independenta)

....

Fig.10


27/61


27

(imparte fereastra in mai multe subferestre,

fiecare continand alt fisier)

Fig.11

Fig.12

(caseta incadrata in corpul paginii in cadrul careia se deschide automat

un alt fisier)

Fig.4,15

(liste numerotate sau marcate)

(sau ) Fig.4,16,17

rosu Fig. 18

galben

verde

(sau )

(marcaj de tip ancora)

Fig.4,19

poza alb-negru


28/61


28

(marcaj de tip ancora)

Fig.14, 20


29/61


29

Alte TAG-uri

>

Comentariu (apare doar in sursa, nu si in browser)

(trecere la rand nou) Fig. 21

(linie orizontala) Fig.13,22
Lasa o distanta intre randurile marcate cu p Fig.23
Format titlu (h1 cel mai mare format.h6 cel mai mic

format)

Fig.24

sau text Text inclinat Fig.25 sau

text Text ingrosat

sau text Text subliniat

sau

text Text taiat

52 52 Indici superiori

a2 a2 Indici inferiori.

.

Indenteaza un bloc spre dreapta fata de marginea

stanga a elementului care il contine

1

23

Textul afisat respecta forma textului scris in sursa (spatii

libere, trecere pe alt rand)

Previne trecerea la randul urmator la capatul liniei

Titlul tabelului, daca e plasat intre TAG-ul table si

primul TAG tr

Text animat, care se deplaseaza singur de la dreapta la

stanga


30/61


30

IV. C. Aplicarea automata a proprietatilor TAG-urilor folosind Property Inspector

se face, folosind Property Inspector:

1. se selecteaza elementul la care dorim sa-i aplicam o proprietate

2. se apasa butonul din Property Inspector care corespunde proprietatii dorite, ca in

imaginile de mai jos

(este facuta o analogie cu capitolul III.A)

Fig.1

Fig.2

Fig.3

Fig.4

Formate de text, titlu

Modele de fonturi

Stiluri definite de fonturi

Marimea textului

Deschide Panels Group pentru scripturi css

Defineste un stil css pt colorarea textului

Text ingrosat sau

Text inclinat sau

Aliniere la stanga (align=left)

Aliniere la centru (align=center)

Aliniere la dreapta (align=right)


31/61


31

Aliniere la stanga-stanga (align=justify)

Lista cu marcatori:

Lista numerotata:

Indent Reducere indent:

Ancora, link:

Locul in care se deschide urmatoarea pagina

Deschide o fereastra care creeaza stilul paginii

Fig.5

Fig.6

Numarul de randuri in tabel

Numarul de coloane in tabel

Latimea in pixeli a tabelului

Inaltimea in pixeli a tabelului

Distanta de la continutul celulelor la borduri

Distanta intre celule

Alinierea in cadrul celulelor

Grosimea bordurii tabelului

Anuleaza latimea impusa tabeluluiConverteste latimea actuala a tabelului in pixeli

Converteste latimea actuala a tabelului in procente

Anuleaza inaltmea impusa tabelului

Converteste inaltimea actuala a tabelului in pixeli

Converteste inaltimea actuala a tabelului in procente

Culoarea de fundal a tabelului

Aplica o imagine ca fundal al tabelului


32/61


32

Culoarea bordurii tabelului

Aplica clase de stiluri tabelului

Fig.7

Formate de text, titlu continutului randului selectat

Modele de fonturi aplicate randului selectat

Stiluri definite de fonturi din randul selectat

Marimea textului din randul selectat


| Culoarea textului din randul selectat

Text ingrosat sau in randul selectat

Text inclinat sau in randul selectat

Aliniere la stanga in randul selectat

Aliniere la centru in randul selectat

Aliniere la dreapta in randul selectat

Aliniere la stanga-stanga in randul selectat

Lista cu marcatori: in randul selectat

Lista numerotata: in randul selectat

Indent in randul selectat

Reducere indent: in randul selectat

Transforma randul selectat in ancora, link


Uneste celulele selectate

Deschide fereastra care divide celulele selectate

Alinierea pe orizontala a continutului celulelor

Alinierea pe verticala a continutului celulelor

| Latimea fiecarei celule selectate

| Inaltimea celulelor selectate

Impedica trecerea pe randul urmator in celule


33/61


33

Transforma celulele in cap de tabel

Aplica imagine de fundal celulelor selectate

| Culoarea de fundal celulelor selectate

| Culoarea bordurii celulelor selectateDeschide o fereastra care creeaza stilul paginii

Fig.8

Formate de text, titlu continutului coloanei selectate

Modele de fonturi aplicate coloanei selectate

Stiluri definite de fonturi din coloana selectate

Marimea textului din coloana selectata


| Culoarea textului din coloana selectata

Text ingrosat sau in coloana selectata

Text inclinat sau in coloana selectata

Aliniere la stanga in coloana selectata

Aliniere la centru in coloana selectata

Aliniere la dreapta in coloana selectata

Aliniere la stanga-stanga in coloana selectata

Lista cu marcatori: in coloana selectata

Lista numerotata: in coloana selectata

Indent in coloana selectata

Reducere indent: in coloana selectata

Transforma randul selectat in ancora, link


Uneste celulele selectate

Deschide fereastra care divide celulele selectate

Alinierea pe orizontala a continutului celulelor

Alinierea pe verticala a continutului celulelor


34/61


34

| Latimea fiecarei celule selectate

| Inaltimea celulelor selectate

Impedica trecerea pe randul urmator in celule

Transforma celulele in cap de tabelAplica imagine de fundal celulelor selectate

| Culoarea de fundal celulelor selectate

| Culoarea bordurii celulelor selectate

Deschide o fereastra care creeaza stilul paginii

Fig.9

Numele pozei (poate diferi de numele fisierului)

Latimea impusa pozei

Inaltimea impusa pozei

Preia dimensiunile in pixeli ale pozei, in cazul in care

ele nu sunt definite

Locul in care se gaseste fisierul (poza)

Textul alternativ

Aplicarea unei clase

Transforma poza intr-o ancora, link

Deschide Fireworks pentru editarea pozei

Optimizeaza poza in Fireworks

Decupeaza o portiune din poza

Reface poza

Modifica luminozitatea si contrastul pozei

Intareste conturul imaginii din poza

Numele hartii aplicate pozei

Activeaza/dezactiveaza uneltele sagetii active

Deseneaza un dreptunghi activ pe poza


35/61


35

Deseneaza un cerc activ pe poza

Deseneaza un contur inchis, activ pe poza

Spatiul vertial rezervat

Spatiul orizontal rezervatLocul unde se deschide pagina la un clic pe poza

Poza alternativa

Grosimea bordurii pozei

Alinierea pozei in raport cu celelalte elemente

Aliniere la stanga

Aliniere la centru

Aliniere la dreapta

Fig.10

Numele layer-ului

Distanta fata de marginea din stanga documentului

Distanta fata de marginea de sus a documentuluiLatimea layer-ului

Inaltimea layer-ului

Ordinea de suprapunere a straturilor

Modul de vizibilitate

Imaginea de fundal a layer-ului

Culoarea de fundal a layer-ului

Clasa de proprietati din care face parte layer-ul

Modul de vizualizare

Clip rectangle left (optional)

clip rectangle right (optional)

Clip rectangle top (optional)

Clip rectangle bottom (optional)


36/61


36

Fig.11 Bordura 3D intre frame-uri

Culoarea bordurii

Grosimea bordurii

Inaltimea/latimea frame-ului in pixeli sau procente

Fig.12

Numele frame-ului

Adresa si numele fisierului din frame

afisarea/ascunderea barii de navigare verticale

Permite/nu permite redimensionarea frame-ului

Bordura frame-ului

Culoarea bordurii frame-ului

Marginea latimii frame-ului

Marginea inatimii frame-ului

Fig.13

Fig.14Numele obiectului

Latimea obiectului

Inaltimea obiectului


37/61


37

Numele si adresa fisierului SWF

Numele ferestrei

Editeaza obiectul

Reseteaza diensiunile obiectuluiAplica o clasa de proprietati

Aduce pointerul pe pozitia 0 dupa animatie

Ruleaza animatia automat

Spatiul pe verticala

Spatiul pe orizontala

Calitatea cu care se incarca obiectul in pagina

Scalarea obiectului

Alinierea

Culoarea de fundal

Previzualizarea animatiei

Editeaza parametrii obiectului


38/61


38

IV. D. Aplicarea automata a proprietatilor TAG-urilor folosind TAG Inspector

TAG-urilor li se mai pot aplica proprietati folosind si TAG Inspector din Panel Groups.

Este facuta o analogie intre capitolele IIIB, IIIC, IIID

Fig. 1 Fig. 2 Fig. 3


39/61


39



40/61


40



41/61


41

Fig. 10 Fig. 11 Fig. 12


42/61


42

Fig. 15 Fig. 16 Fig. 17


43/61


43

Fig. 18 Fig. 19 Fig. 20


44/61


44

Fig. 21 Fig. 22 Fig. 23


45/61


45

Fig. 24 Fig. 25


46/61


46

V. Stilurile celor mai uzuale TAG-uri din HTML

Daca nu va sunt suficiente proprietatile pe care vi le ofera TAG-urile sau daca doriti o

personalizare pentru toate elementele HTML din eeasi categorie de elemente, puteti aplica colectii

de stiluri.

Stilurile se pot aplica in interiorul TAG-ului care defineste elementul HTML sau in antetul

documentului.


47/61


47

V.A. Varianta in care se introduc manual stilurile in interiorul TAG-urilor

In fereastra Code se plaseaza cursorul in interiorul unui TAG si se editeaza un stil pentru

TAG-ul respectiv, ca in tabelul de mai jos:

Proprietate Valoare Scurt descriere

1. BACKGROUND (fundal)

background background-

color

background-

image

background-

repeat

background-

attachment

background-

position

O proprietate cu care se pot seta toate valorile de background

background-

attachment

scroll

fixed

Stabilete faptul c o poz de pe fundal rmne fix sau se mic

odat coninutul


48/61


48

bottom center

bottom right

x-% y-%

x-pos y-pos

background-

repeat

repeat

repeat-x

repeat-y

no-repeat

Seteaz modul cum/dac se repet o imagine pe fundal

2. TEXT

color color Seteaz culoarea unui text

direction ltr

rtl

Seteaz direcia de scriere: ltr=stnga la dreapta si rtl=dreapta la

stnga

letter-spacing normal

length

Mrete sau micoreaz spaiuldintre litere

text-align left

right

center

justify

Aliniaz textul dintr-un element html

text-decoration none

underline

overline

line-through

blink

Adaug decorri textului

text-indent Lungime px

%

Indenteaz (deplaseaza la stanga sau dreapta) prima linie dintr-un

element HTML

text-transform none

capitalize

uppercase

lowercase

Controleaz modul de afiare a literelor unui text: cu MAJUSCULE


49/61


49

word-spacing normal

length

Mrete sau micoreaz spaiul dintre cuvinte

3. FONT (model alfabet)

font font-style

font-variant

font-weight

font-size/line-

height

font-family

caption

icon

menu

message-box

small-caption

status-bar

O proprietate cu care se pot defini ntr-o singur declaraie toate

proprietile fontului

font-family family-name

generic-family

O list de nume de fonturi care se vor utiliza dac exist pe maina

pe care ruleaz browserul n ordinea stabilit


50/61


50

condensed

extra-

condensed

condensed

semi-

condensed

semi-expanded

expanded

extra-expanded

ultra-expanded

font-style normal

italic

oblique

Seteaz stilul de scriere

font-variant normal

small-caps

Afieaz textul cu CAPITALE MICI sau normal

font-weight normal

bold

bolder

lighter

100

200

300

400

500

600

700

800

900

Seteaz grosimea fontului

4. BORDER (borduri)

border border-width

border-style

border-color

O proprietate pentru setarea celor 3 proprietati intr-o singura linie

border-bottom border-bottom- O proprietate pentru setarea intr-o singura declarare a proprietatilor


51/61


51

width

border-style

border-color

pentru marginea de jos

border-bottom-

color

Border-color Seteaza culoarea marginii de jos

border-bottom-

style

Border-style Seteaza stilul marginii de jos

border-bottom-

width

thin

medium

thick

dimensiune

Seteaza grosimea marginii de jos

border-color Color Seteaza culoarea celor 4 margini (sus-dreapta-jos-stanga) poate

avea pana la 4 culori

border-left border-left-width

border-style

border-color

O proprietate pentru setarea tuturor prorpietatilor pentru marginea

din stanga intr-o singura declarare

border-left-color border-color Seteaza culoarea marginii din stanga

border-left-style border-style Seteaza stilul marginii din stanga

border-left-width thin

medium

thick

length

Seteaza grosimea marginii din stanga

border-right border-right-

width

border-style

border-color


din dreapta intr-o singura declarare

border-right-

color

border-color Seteaza culoarea marginii din dreapta

border-right- border-style Seteaza stilul marginii din dreapta


52/61


52

style

border-right-

width

thin

medium

thick

dimensiune

Seteaza grosimea marginii din dreapta

border-style none

hidden

dotted

dashed

solid

double

groove

ridge

inset

outset

Seteaza stilul celor 4 margini intr-o singura declaratie (sus-dreapta-

jos-stanga)

border-top border-top-width

border-style

border-color


de sus intr-o singura declarare

border-top-color border-color Seteaza culoarea marginii de sus

border-top-style border-style Seteaza stilul marginii de sus

border-top-width thin

medium

thick

dimensiune

Seteaza grosimea marginii de sus

border-width thin

medium

thick

dimensiune

Seteaza grosimea celor 4 margini intr-o singura declaratie (sus-

dreapta-jos-stanga)

5. MARGINI

margin margin-top

margin-right

O proprietate care seteaza cele patru margini intr-o singura

declarare (sus-dreapta-jos-stanga)


53/61


53

margin-bottom

margin-left

margin-bottom auto

dimensiune

%

Seteaza marginea de jos a unui element HTML

margin-left auto

dimensiune

%

Seteaza marginea din stanga a unui element HTML

margin-right auto

dimensiune

%

Seteaza marginea din dreapta a unui element HTML

margin-top auto

dimensiune

%

Seteaza marginea de sus a unui element HTML

6. PADDING

padding padding-top

padding-right

padding-bottom

padding-left

O proprietate care seteaza intr-o singura declarare toate distantele

fata de margini ale unui element HTML (sus-dreapta-jos-stanga)

padding-bottom dimensiune

%

Seteaza distanta de la marginea de jos a elementului HTML

padding-left length

%

Seteaza distantade la marginea din stanga a elementului HTML

padding-right length

%

Seteaza distanta de la marginea din dreapta a elementului HTML

padding-top length

%

Seteaza distanta de la marginea de susa elementului HTML

7. LISTE

list-style list-style-type

list-style-position

list-style-image

O proprietate care steaza intro singura declarare toate cele trei

proprietati

list-style-image none Seteaza ca marcator de list o imagine


54/61


54

url

list-style-position inside

outside

Stabileste pozitia marcatorului de lista: in interiorul sau exteriorul

acesteia

list-style-type none

disc

circle

square

decimal

decimal-

leading-zero

lower-roman

upper-roman

lower-alpha

upper-alpha

lower-greek

lower-latin

upper-latin

hebrew

armenian

georgian

cjk-ideographic

hiragana

katakana

hiragana-iroha

katakana-iroha

Seteaza tipul de marcator

8. A (ANCORE)

A Active

Hover

Link

Visited

active Adauga un stil special unui link selectat

link Adauga un stil special unui link nevizitat

visited Adauga un stil special unui link svizitat

hoverAdauga un stil special unui link cand mouse-ul se afla

desupra sa


55/61


55

a.negru:link{text-decoration: none color:#405159}

a.negru:visited{text-decoration: none color:#405159}a.negru:hover{text-decoration: none color:black}


56/61


56

V.B. Varianta in care se introduc (automat) stilurile in antetul documentului

1. Intre TAG-urile din document se scrie:

2. In locul unde apar punctele se scriu cateva elemente HTML din urmatoarele: a, b, big, blockquote, body,

br, caption, div, em, font, frame, frameset, h1, h2, h3, h4, h5, h6, head, hr, html, i, img, li, ol, p, pre, small,

strong, table, td, tr, u, ul, ca in imaginea de mai jos

3. Se pozitioneaza cursorul pe un element HTML, ca in imaginea de jos si se deschide din Panel Group

sectiunea CSS

4. Se activeaza modul de vizualizare a stilurilor pe categorii, folosind butonul4. Pe fiecare element HTML, in parte, se pot aplica stilurile posibile pentru elementul respectiv


57/61


57

VI. Verificarea compatibilitii cu browserele

In document toolbar se foloseste butonul pentru verificarea erorilor de

compatibilitate cu browserele si optiunea Check Browser Support:

Erorile se vor afisa in partea de jos a ecranului (in cazul nostru align=left), iar in

codul sursa ele vor fi subliniata cu linie rosie


58/61


58

VII. Salvarea i publicarea documentului

Daca se doreste doar salvarea site-ului pe statia de lucru (deci nu publicarea ei pe

server), se utilizeaza din meniul File, optiunea Save sau Save As:


59/61


59

VIII. Publicarea documentului

In cazul in care exista un domeniu creat (ex: www.ajofm.ro) si este configurata o cale

de transfer (FTP) pe server, se poate face publicarea documentului (salvarea lui direct pe

server) parcurgand urmatorii pasi:

1. din Panel Groups se alege sectiunea Files, iar din sectiunea Files se alege optiunea

Files

2. Butonul Manage Sites va deschide o fereastra pentru definirea coordonatelor

serverului

3. cu butonul New Ftp-RDS se scriu datele de comunicare cu serverul
http://www.ajofm.ro/


60/61


60

4. Se completeaza pe rand datele

5. Se testeaza cu butonul Test conexiunea, ca in figura de mai jos

6. Daca apare mesajul ca in imaginea de mai jos, inseamna ca s-a stabilit cu succes

conexiunea cu serverul

7. Apasam pe butonul OK, OK

8. In fereastra Manage Sites apasam pe butonul Done

9. Asteptam in dreapta sa apara structura de foldere si fisiere de pe server


61/61


Publicarea se face acum aproape ca o salvare simpla: in meniul superior clic pe File-Save

to Remote Server si se alege directorul in care se va face salvarea, dupa care se da clic

pe butonul Save

suport curs dream weaver

Documents