Suport Curs Dream Weaver
-
Upload
supuran-richardo -
Category
Documents
-
view
237 -
download
1
Transcript of 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
-
8/8/2019 Suport Curs Dream Weaver
2/61
Curs WEB DESIGN Modul - DreamWeaver Noiuni introductive
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
-
8/8/2019 Suport Curs Dream Weaver
3/61
Curs WEB DESIGN Modul - DreamWeaver Noiuni introductive
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.
-
8/8/2019 Suport Curs Dream Weaver
4/61
Curs WEB DESIGN Modul - DreamWeaver Noiuni introductive
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.
-
8/8/2019 Suport Curs Dream Weaver
5/61
Curs WEB DESIGN Modul - DreamWeaver Noiuni introductive
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 3.0 (lansat n decembrie 1999)
Dreamweaver UltraDev 1.0 (lansat n iunie 2000)
Dreamweaver 4.0 (lansat n decembrie 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.
-
8/8/2019 Suport Curs Dream Weaver
6/61
Curs WEB DESIGN Modul - DreamWeaver Noiuni introductive
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
-
8/8/2019 Suport Curs Dream Weaver
7/61
Curs WEB DESIGN Modul - DreamWeaver Noiuni introductive
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/8/2019 Suport Curs Dream Weaver
8/61
Curs WEB DESIGN Modul - DreamWeaver Noiuni introductive
8
III. A. Mediul Macromedia
-
8/8/2019 Suport Curs Dream Weaver
9/61
Curs WEB DESIGN Modul - DreamWeaver Noiuni introductive
9
III. B. Inserarea elementelor folosind opiunea Insert din meniul superior
Elementele HTML se insereaz in document folosind opiunea Insert din meniul
superior:
-
8/8/2019 Suport Curs Dream Weaver
10/61
Curs WEB DESIGN Modul - DreamWeaver Noiuni introductive
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:
-
8/8/2019 Suport Curs Dream Weaver
11/61
Curs WEB DESIGN Modul - DreamWeaver Noiuni introductive
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
-
8/8/2019 Suport Curs Dream Weaver
12/61
Curs WEB DESIGN Modul - DreamWeaver Noiuni introductive
12
Tabel
Insereaza un TAG div
Insereaza imagini Insereaza o imagine (vezi modulul de Fireworks)
-
8/8/2019 Suport Curs Dream Weaver
13/61
Curs WEB DESIGN Modul - DreamWeaver Noiuni introductive
13
Transforma textul intr-o imagine
Insereaza un script de tip RollOver
Insereaza un fisier Fireworks
-
8/8/2019 Suport Curs Dream Weaver
14/61
Curs WEB DESIGN Modul - DreamWeaver Noiuni introductive
14
Insereaza un script care creeaza meniu din poze
Insereaza obiecte Insereaza obiecte
-
8/8/2019 Suport Curs Dream Weaver
15/61
Curs WEB DESIGN Modul - DreamWeaver Noiuni introductive
15
Insereaza date
Include un Side Server
Insereaza un comentariu
Optiuni Template
-
8/8/2019 Suport Curs Dream Weaver
16/61
Curs WEB DESIGN Modul - DreamWeaver Noiuni introductive
16
Colectia de TAG-uri
-
8/8/2019 Suport Curs Dream Weaver
17/61
Curs WEB DESIGN Modul - DreamWeaver Noiuni introductive
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
-
8/8/2019 Suport Curs Dream Weaver
18/61
Curs WEB DESIGN Modul - DreamWeaver Noiuni introductive
18
Insereaza o coloana in stanga coloanei selectate
Insereaza o coloana in dreapta coloanei selectate
Frame-uri - lista de optiuni
Importa Tabulator Data
-
8/8/2019 Suport Curs Dream Weaver
19/61
Curs WEB DESIGN Modul - DreamWeaver Noiuni introductive
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
-
8/8/2019 Suport Curs Dream Weaver
20/61
Curs WEB DESIGN Modul - DreamWeaver Noiuni introductive
20
Acces Internet
Serviciu
Serviciu
Acasa
Acasa
Net Cafe Net Cafe
Foto
Observatii
curs webdesign
cursuri w ebdesign
 
anuleaza
trimite
-
8/8/2019 Suport Curs Dream Weaver
21/61
Curs WEB DESIGN Modul - DreamWeaver Noiuni introductive
21
Forumarul de mai sus va arata in browser ca in imaginea de mai jos:
-
8/8/2019 Suport Curs Dream Weaver
22/61
Curs WEB DESIGN Modul - DreamWeaver Noiuni introductive
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
-
8/8/2019 Suport Curs Dream Weaver
23/61
Curs WEB DESIGN Modul - DreamWeaver Noiuni introductive
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)  
©
&euro
¢
-
8/8/2019 Suport Curs Dream Weaver
24/61
Curs WEB DESIGN Modul - DreamWeaver Noiuni introductive
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
-
8/8/2019 Suport Curs Dream Weaver
25/61
Curs WEB DESIGN Modul - DreamWeaver Noiuni introductive
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
-
8/8/2019 Suport Curs Dream Weaver
26/61
Curs WEB DESIGN Modul - DreamWeaver Noiuni introductive
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
-
8/8/2019 Suport Curs Dream Weaver
27/61
Curs WEB DESIGN Modul - DreamWeaver Noiuni introductive
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
-
8/8/2019 Suport Curs Dream Weaver
28/61
Curs WEB DESIGN Modul - DreamWeaver Noiuni introductive
28
(marcaj de tip ancora)
Fig.14, 20
-
8/8/2019 Suport Curs Dream Weaver
29/61
Curs WEB DESIGN Modul - DreamWeaver Noiuni introductive
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.23Format 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
-
8/8/2019 Suport Curs Dream Weaver
30/61
Curs WEB DESIGN Modul - DreamWeaver Noiuni introductive
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)
-
8/8/2019 Suport Curs Dream Weaver
31/61
Curs WEB DESIGN Modul - DreamWeaver Noiuni introductive
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
-
8/8/2019 Suport Curs Dream Weaver
32/61
Curs WEB DESIGN Modul - DreamWeaver Noiuni introductive
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
Deschide Panels Group pentru scripturi css
| 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
Locul in care se deschide urmatoarea pagina
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
-
8/8/2019 Suport Curs Dream Weaver
33/61
Curs WEB DESIGN Modul - DreamWeaver Noiuni introductive
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
Deschide Panels Group pentru scripturi css
| 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
Locul in care se deschide urmatoarea pagina
Uneste celulele selectate
Deschide fereastra care divide celulele selectate
Alinierea pe orizontala a continutului celulelor
Alinierea pe verticala a continutului celulelor
-
8/8/2019 Suport Curs Dream Weaver
34/61
Curs WEB DESIGN Modul - DreamWeaver Noiuni introductive
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
-
8/8/2019 Suport Curs Dream Weaver
35/61
Curs WEB DESIGN Modul - DreamWeaver Noiuni introductive
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)
-
8/8/2019 Suport Curs Dream Weaver
36/61
Curs WEB DESIGN Modul - DreamWeaver Noiuni introductive
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
-
8/8/2019 Suport Curs Dream Weaver
37/61
Curs WEB DESIGN Modul - DreamWeaver Noiuni introductive
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
-
8/8/2019 Suport Curs Dream Weaver
38/61
Curs WEB DESIGN Modul - DreamWeaver Noiuni introductive
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
-
8/8/2019 Suport Curs Dream Weaver
39/61
Curs WEB DESIGN Modul - DreamWeaver Noiuni introductive
39
Fig. 4 Fig. 5 Fig. 6
-
8/8/2019 Suport Curs Dream Weaver
40/61
Curs WEB DESIGN Modul - DreamWeaver Noiuni introductive
40
Fig. 7 Fig. 8 Fig. 9
-
8/8/2019 Suport Curs Dream Weaver
41/61
Curs WEB DESIGN Modul - DreamWeaver Noiuni introductive
41
Fig. 10 Fig. 11 Fig. 12
-
8/8/2019 Suport Curs Dream Weaver
42/61
Curs WEB DESIGN Modul - DreamWeaver Noiuni introductive
42
Fig. 15 Fig. 16 Fig. 17
-
8/8/2019 Suport Curs Dream Weaver
43/61
Curs WEB DESIGN Modul - DreamWeaver Noiuni introductive
43
Fig. 18 Fig. 19 Fig. 20
-
8/8/2019 Suport Curs Dream Weaver
44/61
Curs WEB DESIGN Modul - DreamWeaver Noiuni introductive
44
Fig. 21 Fig. 22 Fig. 23
-
8/8/2019 Suport Curs Dream Weaver
45/61
Curs WEB DESIGN Modul - DreamWeaver Noiuni introductive
45
Fig. 24 Fig. 25
-
8/8/2019 Suport Curs Dream Weaver
46/61
Curs WEB DESIGN Modul - DreamWeaver Noiuni introductive
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.
-
8/8/2019 Suport Curs Dream Weaver
47/61
Curs WEB DESIGN Modul - DreamWeaver Noiuni introductive
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
-
8/8/2019 Suport Curs Dream Weaver
48/61
Curs WEB DESIGN Modul - DreamWeaver Noiuni introductive
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
-
8/8/2019 Suport Curs Dream Weaver
49/61
Curs WEB DESIGN Modul - DreamWeaver Noiuni introductive
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
-
8/8/2019 Suport Curs Dream Weaver
50/61
Curs WEB DESIGN Modul - DreamWeaver Noiuni introductive
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
-
8/8/2019 Suport Curs Dream Weaver
51/61
Curs WEB DESIGN Modul - DreamWeaver Noiuni introductive
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
O proprietate pentru setarea tuturor prorpietatilor pentru marginea
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
-
8/8/2019 Suport Curs Dream Weaver
52/61
Curs WEB DESIGN Modul - DreamWeaver Noiuni introductive
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
O proprietate pentru setarea tuturor prorpietatilor pentru marginea
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)
-
8/8/2019 Suport Curs Dream Weaver
53/61
Curs WEB DESIGN Modul - DreamWeaver Noiuni introductive
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
-
8/8/2019 Suport Curs Dream Weaver
54/61
Curs WEB DESIGN Modul - DreamWeaver Noiuni introductive
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
-
8/8/2019 Suport Curs Dream Weaver
55/61
Curs WEB DESIGN Modul - DreamWeaver Noiuni introductive
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}
-
8/8/2019 Suport Curs Dream Weaver
56/61
Curs WEB DESIGN Modul - DreamWeaver Noiuni introductive
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
-
8/8/2019 Suport Curs Dream Weaver
57/61
Curs WEB DESIGN Modul - DreamWeaver Noiuni introductive
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
-
8/8/2019 Suport Curs Dream Weaver
58/61
Curs WEB DESIGN Modul - DreamWeaver Noiuni introductive
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:
-
8/8/2019 Suport Curs Dream Weaver
59/61
Curs WEB DESIGN Modul - DreamWeaver Noiuni introductive
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/ -
8/8/2019 Suport Curs Dream Weaver
60/61
Curs WEB DESIGN Modul - DreamWeaver Noiuni introductive
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
-
8/8/2019 Suport Curs Dream Weaver
61/61
Curs WEB DESIGN Modul - DreamWeaver Noiuni introductive
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