suport_curs_dreamweaver

8/7/2019 suport_curs_dreamweaver

1/61


2/61

Curs WEB DESIGN Modul - DreamWeaver Noiuni introductive

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

2


3/61


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. dectdescrierea 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 oimagine 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 document e 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 tipWYSIWYG) 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 serverului

cum 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 c ontroversat i multe

liste de mail le blocheaz intenionat.

3


4/61


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 detipul WYSIWYG dar n versiunile recente au fost implementate funcii de edit are 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 c rearea cu uurin a paginilor webde 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 modalitide 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 ctre

utilizator. 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.

4


5/61


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.

5


6/61


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 82. clic pe iconita verde din bara cu lansari rapide

3. dublu clic pe desktop, pe iconita verde

6


7/61


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

7


8/61


III. A. Mediul Macromedia

8


9/61


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

Elementele HTML se insereaz in document folosind opiunea Insert din meniul

superior:

9


10/61


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:

10


11/61


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

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

Hyperlink

Emaillink

Numele ancorei

11


12/61


Tabel

Insereaza un TAG div

Insereaza imagini Insereaza oimagine (vezi modulul de Fireworks)

12


13/61


Transforma textul intr-o imagine

Insereaza un script de tip RollOver

Insereaza un fisier Fireworks

13


14/61


Insereaza un script care creeaza meniu din poze

Insereaza obiecte Insereaza obiecte

14


15/61


Insereaza date

Include un Side Server

Insereaza un comentariu

Optiuni Template

15


16/61


Colectia de TAG-uri

16


17/61


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

17


18/61


Insereaza o coloanain stanga coloanei selectate

Insereaza o coloanain dreapta coloanei selectate

Frame-uri - lista de optiuni

Importa Tabulator Data

18


19/61


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:

Codulsursa forma

CurriculumVitae

Nume Prenume

Sex>

Masculin Masculin

Feminin Feminin

Studii

Scoala profesionala

Liceu Facultate

Facultate

19


20/61


Acces Internet

Serviciu

Serviciu

Acasa

Acasa

Net Cafe Net Cafe

Foto

Observatii

cursuri webdesign

curs webdesign

anuleaza

trimite

20


21/61


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

21


22/61


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 inclinat

Paragraf

TAB

Text preformatat

Titlu

Lista cu marcatori

Lista numerotata

Element intr-o lista

Lista definita

Termeni definiti

Descriptori definiti

Abrievieri

Acronime

Caractere speciale

22


23/61


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)

23


24/61


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 dorit2. 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

24


25/61


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)

.

25


26/61


(divizare in blocuri cu anumite proprietati definite)

. Fig.5

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

Fig.4

(tabel)

Fig.7

(imagine)

Fig.9

(caseta aplicat) sau (caseta aplicat independenta)

....

26


27/61


(imparte fereastra in mai multe

subferestre,fiecare continand alt fisier)

Fig.11

(caseta incadrata in corpul paginii in cadrul careia se deschide

automatun alt fisier)

(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

27


28/61


(marcaj de tip ancora)

28


29/61


Alte TAG-uri

>

(trecerela 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.h6cel mai micFig.24

format)

sau text Text inclinat Fig.25

sau textText ingrosat

sau text Text subliniat

text Text taiat

sau

52 52 Indicisuperiori

a2 a2 Indici inferiori

. Indenteaza un bloc spre dreapta fata de marginea

.

stanga a elementului care il contine

1 Textul afisat respecta forma textului scris in sursa (spatii

23 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 dela dreapta la

stanga

29


30/61


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 inimaginile de mai jos

(este facuta o analogie cu capitolul III.A)

Fig.1

Fig.2

Fig.3

Formate de text, titlu

Modele de fonturi

Stiluri definite de fonturi

Marimea textuluiFig.4

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)

30


31/61


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

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 Fig.6 Alinierea in cadrul celulelor

Grosimea bordurii tabelului

Anuleaza latimea impusa tabelului

Converteste 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

31


32/61


Culoarea bordurii tabelului

Aplica clase de stiluri tabelului

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

Fig.7 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

32


33/61


Transforma celulele in cap de tabel

Aplica imagine de fundal celulelor selectate

| Culoarea de fundal celulelor selectate

| Culoarea bordurii celulelor selectate


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

Fig.8 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

33


34/61


| Latimea fiecarei celule selectate

| Inaltimea celulelor selectate

Impedica trecerea pe randul urmator in celule

Transforma celulele in cap de tabel

Aplica imagine de fundal celulelor selectate

| Culoarea de fundal celulelor selectate

| Culoarea bordurii celulelor selectate


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

Fig.9Aplicarea 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

34


35/61


Deseneaza un cerc activ pe poza

Deseneaza un contur inchis, activ pe poza

Spatiul vertial rezervat

Spatiul orizontal rezervat

Locul 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

Numele layer-ului

Distanta fata de marginea din stanga documentului

Distanta fata de marginea de sus a documentului

Latimea layer-ului

Inaltimea layer-ului

Ordinea de suprapunere a straturilorFig.10

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)

35


36/61


Fig.11

Bordura 3D intre frame-uri

Culoarea bordurii

Grosimea bordurii

Inaltimea/latimea frame-ului in pixeli sau procente

Numele frame-ului

Adresa si numele fisierului din frame Fig.12

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

36


37/61


38/61


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

38


39/61



39


40/61



40


41/61


Fig. 10 Fig. 11 Fig. 12

41


42/61


Fig. 15 Fig. 16 Fig. 17

42


43/61


Fig. 18 Fig. 19 Fig. 20

43


44/61


Fig. 21 Fig. 22 Fig. 23

44


45/61


Fig. 24 Fig. 25

45


46/61


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 aplicain interiorul TAG-ului care defineste elementul HTML sau

in antetul documentului.

46


47/61


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

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

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

Proprietate

Valoare

Scurtdescriere

1. BACKGROUND(fundal)

background background- Oproprietatecucaresepotsetatoatevaloriledebackground

color

background-

image

background-

repeat

background-

attachment

background-

position

background- scroll Stabiletefaptulcopozdepefundalrmnefixsausemic

attachment fixed odatconinutul


48/61


bottomcenter

bottomright

x-% y-%

x-pos y-pos

background-

repeat

Seteazmodulcum/dacserepetoimaginepefundal

repeat repeat-x

no-repeat

2. TEXT

color color Seteazculoareaunuitext

direction

ltr

Seteazdireciadescriere:ltr=stngaladreaptasirtl=dreaptala

rtl stnga

letter-spacing normal Mretesaumicoreazspaiuldintrelitere

length

text-align left Aliniaztextuldintr-unelementhtml

right

center

justify

text-decoration none Adaugdecorritextului

underline

overline

line-through

blink

text-indent Lungime px Indenteaz(deplaseazalastangasaudreapta)primaliniedintr-u

%elementHTML

text-transform none Controleazmoduldeafiarealiterelorunuitext:cuMAJUSCULE

capitalize

uppercase

lowercase

48


49/61


word-spacing normal Mretesaumicoreazspaiuldintrecuvinte

length

3. FONT(modelalfabet)

font font-style Oproprietatecucaresepotdefinintr-osingurdeclaraietoate

font-variant

proprietilefontului

font-weight

font-size/line-

height

font-family

caption

icon

menu

message-box

small-caption

status-bar

font-family family-name Olistdenumedefonturicaresevorutilizadacexistpemaina

generic-family pecareruleazbrowserulnordineastabilit


50/61


condensed

extra-

condensed

condensed

semi-

condensed

semi-expanded

expanded

extra-expanded

ultra-expanded

font-style normal Seteazstiluldescriere

italic

oblique

font-variant normal AfieaztextulcuCAPITALEMICIsaunormal

small-caps

font-weight normal Seteazgrosimeafontului

bold

bolder

lighter

100

200

300

400

500

600

700

800

900

4. BORDER(borduri)

border border-width Oproprietatepentrusetareacelor3proprietatiintr-osinguralinie

border-style

border-color

border-bottom border-bottom- Oproprietatepentrusetareaintr-osinguradeclarareaproprietatilor

50


51/61


width pentrumargineadejos

border-style

border-color

border-bottom- Border-color Seteazaculoareamarginiidejos

color

border-bottom- Border-style Seteazastilulmarginiidejos

style

border-bottom- thin Seteazagrosimeamarginiidejos

width medium

thick

dimensiune

border-color Color Seteazaculoareacelor4margini (sus-dreapta-jos-stanga)poate

aveapanala4culori

border-left border-left-width Oproprietatepentrusetareatuturorprorpietatilorpentrumargine

border-style dinstangaintr-osinguradeclarare

border-color

border-left-color border-color Seteazaculoareamarginiidinstanga

border-left-style border-style Seteazastilulmarginiidinstanga

border-left-width thin Seteazagrosimeamarginiidinstanga

medium

thick

length

border-right border-right- Oproprietatepentrusetareatuturorprorpietatilorpentrumargine

widthdindreaptaintr-osinguradeclarare

border-style

border-color

border-right- border-color Seteazaculoareamarginiidindreapta

color

border-right- border-style Seteazastilulmarginiidindreapta

51


52/61


style

border-right- thin Seteazagrosimeamarginiidindreapta

width medium

thick

dimensiune

border-style none Seteazastilulcelor4marginiintr-osinguradeclaratie(sus-dreapta-

hidden jos-stanga)

dotted

dashed

solid

double

groove

ridge

inset

outset

border-top border-top-width Oproprietatepentrusetareatuturorprorpietatilorpentrumargine

border-style desusintr-osinguradeclarare

border-color

border-top-color border-color Seteazaculoareamarginiidesus

border-top-style border-style Seteazastilulmarginiidesus

border-top-width thin Seteazagrosimeamarginiidesus

medium

thick

dimensiune

border-width thin Seteazagrosimeacelor4marginiintr-osinguradeclaratie(sus-

medium dreapta-jos-stanga)

thick

dimensiune

5. MARGINI

margin margin-top Oproprietatecareseteazacelepatrumarginiintr-osingura

margin-right declarare(sus-dreapta-jos-stanga)

52


53/61


margin-bottom

margin-left

margin-bottom auto SeteazamargineadejosaunuielementHTML

dimensiune

%

margin-left auto SeteazamargineadinstangaaunuielementHTML

dimensiune

%

margin-right auto SeteazamargineadindreaptaaunuielementHTML

dimensiune

%

margin-top auto SeteazamargineadesusaunuielementHTML

dimensiune

%

6. PADDING

padding padding-top Oproprietatecareseteazaintr-osinguradeclararetoatedistantele

padding-right fatademarginialeunuielementHTML (sus-dreapta-jos-stanga)

padding-bottom

padding-left

padding-bottom dimensiune SeteazadistantadelamargineadejosaelementuluiHTML

%

padding-left length SeteazadistantadelamargineadinstangaaelementuluiHTML

%

padding-right length SeteazadistantadelamargineadindreaptaaelementuluiHTML

%

padding-top length SeteazadistantadelamargineadesusaelementuluiHTML

%

7. LISTE

list-style list-style-type Oproprietatecaresteazaintrosinguradeclararetoateceletrei

list-style-position proprietati

list-style-image

list-style-image none Seteazacamarcatordelistoimagine

53


54/61


url

list-style-position inside Stabilestepozitiamarcatoruluidelista:ininteriorulsauexteriorul

outside acesteia

list-style-type

none

Seteazatipuldemarcator

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

8. A(ANCORE)

A Active activeAdaugaunstilspecialunuilinkselectat

Hover linkAdaugaunstilspecialunuilinknevizitat

Link visitedAdaugaunstilspecialunuilinksvizitat

Visited hoverAdaugaunstilspecialunuilinkcandmouse-ulseafla

desuprasa

54


55/61


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

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

55


56/61


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

1.IntreTAG-uriledindocumentsescrie:

2. InloculundeaparpunctelesescriucatevaelementeHTMLdinurmatoarele: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,cainimagineademaijos

3. SepozitioneazacursorulpeunelementHTML,cainimagineadejossisedeschidedinPanelGroup

sectiuneaCSS

4. Seactiveazamoduldevizualizare astilurilorpecategorii,folosindbutonul

4.PefiecareelementHTML,inparte,sepotaplicastilurileposibilepentruelementulrespectiv


57/61


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

57


58/61


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:

58


59/61


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

59


60/61


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

60


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

Date post:	09-Apr-2018
Category:	Documents
Upload:	grecu-anamaria
View:	220 times
Download:	0 times

suport_curs_dreamweaver

Documents