Sunteți pe pagina 1din 61

Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive

MACROMEDIA DREAMWEAVER

Lector SUPURAN RICHARDO

1
Curs WEB DESIGN Modul DreamWeaver Noţiuni 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 TAGurilor sau in antetul documentului.......................46

VI. Verificarea compatibilităţii cu browsere........................................................................... 57

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

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

2
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive

I.A. Ce este HTML?

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


crearea paginilor web ce pot fi afişate întrun browser (sau navigator). Scopul HTML este
mai degrabă prezentarea informaţiilor – paragrafe, fonturi, tabele ş.a.m.d. – decât
descrierea semanticii documentului.
Specificaţiile HTML sunt dictate de World Wide Web Consortium (W3C).
HTML este o formă de marcare orientată către prezentarea documentelor text pe o
singura pagină, utilizând 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 conţinutul unui document poate fi adnotat cu diverse tipuri de
metadate şi indicaţii de redare. Indicaţiile de redare pot varia de la decoraţiuni minore ale
textului, cum ar fi specificarea faptului că un anumit cuvânt trebuie subliniat sau că o
imagine trebuie introdusă, până la scripturi sofisticate, hărţi de imagini şi formulare.
Metadatele pot include informaţii despre titlul şi autorul documentului, informaţii structurale
despre cum este împărţit documentul în diferite segmente, paragrafe, liste, titluri etc. şi
informaţii cruciale care permit ca documentul să poată fi legat de alte documente pentru a
forma astfel hiperlinkuri (sau webul).
HTML este un format text proiectat pentru a putea fi citit şi editat de oameni
utilizând un editor de text simplu. Totuşi scrierea şi modificarea paginilor în acest fel
solicită cunoştinţe 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 asemănător cu documetele Word, dar cu
observaţia că aceste programe generează un cod HTML care este de multe ori de proastă
calitate.
HTML se poate genera direct utilizând tehnologii de codare din partea serverului
cum ar fi PHP, JSP sau ASP. Multe aplicaţii ca sistemele de gestionare a conţinutului,
wikiuri şi forumuri web generează pagini HTML.
HTML este de asemenea utilizat în email. Majoritatea aplicaţiilor de email folosesc
un editor HTML încorporat pentru compunerea emailurilor şi un motor de prezentare a
emailurilor de acest tip. Folosirea emailurilor HTML este un subiect controversat şi multe
liste de mail le blochează intenţionat.

3
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive

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 funcţii de editare avansate
şi support pentru alte tehnologii web cum ar fi CSS, JavaScript etc.
Dreamweaver sa bucurat de un larg succes încă de la sfârşitul anilor '90 şi
momentan deţine aproximativ 80% din piaţa editoarelor HTML. Produsul poate fi rulat pe
variate platforme software: Mac, Windows, dar suportă în acelaşi 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, făcând astfel posibilă crearea cu uşurinţă a paginilor web
de către utilizatorii neexperimentaţi.
Unii creatori de pagini web critică aceste tipuri de editoare deoarece produc pagini
de dimensiuni mult mai mari decât ar fi necesar, ceea ce conduce la o funcţionare
neperformantă a browserelor web. Această afirmaţie este în mare parte adevarată
deoarece paginile web produse folosesc designul 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 îmbunătăţit în versiunile recente. Cu toate
acestea, Macromedia a crescut suportul pentru tehnologia CSS precum şi alte modalităţi
de design fără a fi necesară folosirea designului pe bază de tabel.
Dreamweaver permite folosirea majorităţii browserelor instalate pe calculatorul
utilizatorului, pentru a previzualiza websiteul creat. De asemenea conţine şi câteva utilitare
pentru administrarea siteurilor, cum ar fi cele pentru a găsi şi modifica un paragraf sau o
linie de cod, în întregul web site, pe baza oricăror parametri specificaţi de către utilizator.
Cu ajutorul panourilor de stare se poate crea cod JavaScript fără a avea cunoştinţe de
programare.
Odată cu apariţia versiunii MX, Macromedia a încorporat utilitare de generare
dinamică a conţinutului. De asemenea este oferit suport pentru conectarea la baze de date
(cum ar fi MySQL şi Microsoft Access) pentru a filtra şi afişa conţinutul folosind scripturi de
genul PHP, ColdFusion, Active Server Pages (ASP) şi ASP.NET, fără a avea nevoie de o
prealabilă experienţă în programare.

4
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive

Un aspect foarte lăudat al Dreamweaverului îl reprezintă arhitectura sa extensibilă.


Extensiile, aşa 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 aducând un spor de performanţă şi funcţionalitate îmbunătăţită
programului. Există o comunitate de dezvoltatori care produc aceste extensii şi le publică
(atât comercial cât şi gratuit) pentru probleme de deyvoltare web, de la simple efecte
rollover până la soluţii complete de vânzare 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 harddisc
• Monitor cu rezolutia de 1024x768 cu placa video pe 16 biti
• DVDROM drive
• Conectare la Internet sau linie telefonica necesara pentru activarea produsului
• Conectare la Internet necesara pentru Adobe Stock Photos sau alte servicii.

5
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive

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 ProgrameMacromediaMacromedia Dreamweaver 8
2. clic pe iconita verde din bara cu lansari rapide
3. dublu clic pe desktop, pe iconita verde

6
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive

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 clicdreapta pe fisierul respectiv, se deschide o lista de optiuni, din
care se alege „Edit With Dreamweaver 8”

7
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive

III. A. Mediul Macromedia

8
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive

III. B. Inserarea elementelor folosind opţiunea „Insert” din meniul superior

Elementele HTML se inserează in document folosind opţiunea „Insert” din meniul


superior:

9
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive

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 CtrlE

3. se foloseste butonul din „Insert bar”


se va deschide o fereastra cu toate TAGurile arajate pe categorii:

10
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive

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
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive

Tabel

Insereaza un TAG „div”

Insereaza imagini Insereaza oimagine (vezi modulul de Fireworks)

12
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive

Transforma textul intro imagine

Insereaza un script de tip RollOver

Insereaza un fisier Fireworks

13
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive

Insereaza un script care creeaza meniu din poze

Insereaza obiecte Insereaza obiecte

14
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive

Insereaza date

Include un Side Server

Insereaza un comentariu

Optiuni Template

15
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive

Colectia de TAGuri

16
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive

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
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive

Insereaza o coloanain stanga coloanei selectate


Insereaza o coloanain dreapta coloanei selectate
Frameuri lista de optiuni

Importa „Tabulator Data”

18
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive

III. D3. Inserarea elementelor din „Insert bar”Document toolbar – Forms

Elementele din formularul unui document se însoţesc de obicei alături de scripturi


(programele, aplicaţii). Mai jos vom folosi un exemplu de inserare a elementelor unui
formular:

Codulsursa forma
<html>
<body>
<table width="340" bgcolor=#CCCCCC>

<formaction="" method="get">
<caption align=left>CurriculumVitae</caption>
<tr>
<td>Nume Prenume
<td><inputname="nume" type="text" value="Supuran Richardo" Supuran Richardo

size="38">
<tr>
<td>Sex>
<td><inputname="sex" type="radio" value="m" checked>Masculin Masculin
<inputtype="radio"name="sex"value="f">Feminin Feminin

<tr>
<td>Studii
<td><selectname="studii"size="1">
<optionvalue="s">Scoala profesionala</option>
<optionvalue="l">Liceu</option> Facultate

<optionvalue="f" selected>Facultate</option>
</select>
<tr>

19
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive

<td>Acces Internet
<td><inputname="Serviciu" type="checkbox"value="s" checked> Serviciu
Serviciu
<inputname="Acasa"type="checkbox" value="a" checked> Acasa
Acasa
<inputname="Net Cafe" type="checkbox"value="n">Net Cafe Net Cafe
<tr>
<td>Foto
<td><inputname="foto"type="file" size="26">
<tr>
<td>Observatii
<td><textareaname="observatii"cols="30" rows="3"> cursuri webdesign

curs webdesign
</textarea>
<tr>
<td>&nbsp;
<td><inputname="Input2" type="reset" value="anuleaza"> anuleaza

<inputname="Input"type="submit" value="trimite"> trimite

</form>
</table>
</body>
</html>

20
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive

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

21
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive

III. D4. Inserarea elementelor din „Insert bar”Document toolbar – Text

Butoanele din document toolbartext 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 intro lista

Lista definita

Termeni definiti

Descriptori definiti

Abrievieri

Acronime

Caractere speciale

22
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive

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;
„ &#8220;
” &#8221;
‰ &#8240;

23
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive

IV. A. Selectarea elementelor HTML, pentru aplicarea ulterioara a proprietăţilor

Exista mai multe modalităţi de selecţie a elementelor HTML:

1. in Fereastra „Design” cu un clic/drag&drop cu mouseul 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

24
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive

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

<HTML></HTML> (defineste inceputul si sfarsitul fisierului web)


<html>
<head>…</head>
<body>…</body>
</html>

<HEAD></HEAD> (antetul paginii html)


<html>
<head>
<title>titlu</title>
<meta httpequiv="ContentType" content="text/html; charset=ISO88592"> Fig.1
<meta name="author" content="numele autorului"> Fig.2
<meta name="keywords" content="cuvinte cheie despartite prin virgula"> Fig.3
<meta name="description" content="descrierea siteului">
</head>
<body>
...
</body>
</html>

<BODY></BODY> (corpul paginii html)


<html>
<body bgcolor="red"text="yellow"leftmargin="0"marginwidth="0"topmargin="0" Fig.4
marginheight="0">….</body>
</html>

25
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive

<DIV></DIV> (divizare in blocuri cu anumite proprietati definite)


<html>
<body>
<div align="center"> …. </div> Fig.5

<FONT></FONT> (specifica atributele unui text:marime,culoare,model)


<html>
<body>
<font color="red"size="+3">…</font> Fig.4

<TABLE></TABLE> (tabel)
<html>
<body>
<table width="200" border="1" align="center" bgcolor="red" cellpadding="0" Fig.6
cellspacing="0" bordercolor="blue">
<trbgcolor="yellow" align="right" bordercolor="blue" valign="top"> Fig.7
<td align="center" bgcolor="green"bordercolor="gray" valign="top" Fig.8
width="150">……</td>
</tr>
</table>

<IMG> (imagine)
<html>
<body>
<img src="poza.jpg" width="1674" height="1205" border="0" align="right"> Fig.9

<LAYER> (caseta aplicată) sau <ILAYER> (caseta aplicată independenta)


<html>
<body>
<layer bgcolor="gray" height="450" left="4" pagex="10" pagey="0" top="10" Fig.10
visibility="show" width="380">....</layer>

26
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive

<FRAMESET><FRAME><FRAME></FRAMESET> (imparte fereastra in mai multe


subferestre, fiecare continand alt fisier)

<frameset cols="200,*"> Fig.11


<frame name="stanga" src="meniu.html" marginwidth="0" marginheight="0"noresize Fig.12
frameborder="no"bordercolor="red">
<frame name="derapta"src="inceput.html" scrolling="yes" marginwidth="0"
marginheight="0"noresize bordercolor="red">
</frameset>

<IFRAME></IFRAME> (caseta incadrata in corpul paginii in cadrul careia se deschide


automat un alt fisier)
<html>
<body>
<iframe height="410" scrolling="auto"src="01.html" width="620" marginheight="0" Fig.4,15
marginwidth="0">
</iframe>

<LI></LI> (liste numerotate sau marcate)


<html>
<body>
<ol>(sau <ul>) Fig.4,16,17
<li>rosu</li> Fig. 18
<li>galben</li>
<li>verde</li>
</ol>(sau </ul>)

<A HREF></A> (marcaj de tip ancora)


<html>
<body> Fig.4,19
<ahref="http://www.google.ro"target="dreapta">poza albnegru</a>

27
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive

<EMBED></EMBED> (marcaj de tip ancora)


<html>
<body>
<embed src="buton.swf" quality="high" type="application/xshockwaveflash" Fig.14,20
width="61" height="34" ></embed>

28
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive

Alte TAGuri

<!—acesta este un comentariu Comentariu (apare doar in sursa, nu si in browser)


>
<br> (trecerela rand nou) Fig. 21
<hr> (linie orizontala) Fig.13,22
<p>…</p> Lasa o distanta intre randurile marcate cu „p” Fig.23
<h1>…</h1> Format titlu (h1 cel mai mare format….h6cel mai mic Fig.24
format)
<i>…</i> sau <em>…</em> text Text inclinat Fig.25
<b>…</b> sau text Text ingrosat
<strong>…</strong>
<u>…</u> sau <ins>…</ins> text Text subliniat
<del>…</del> text Text taiat
sau<strike>…</strike>
2
5<sup>2</sup> 5 Indicisuperiori
a<sub>2</sub> a2 Indici inferiori
<blockquote>….</blockquote> Indenteaza un bloc spre dreapta fata de marginea
…. stanga a elementului care il contine
<pre>…</pre> 1 Textul afisat respecta forma textului scris in sursa (spatii
23 libere, trecere pe alt rand…)
<nobr></nobr> Previne trecerea la randul urmator la capatul liniei
<caption>…</caption> Titlul tabelului, daca e plasat intre TAGul „table” si
primul TAG „tr”
<marquee>…</marque> Text animat, care se deplaseaza singur dela dreapta la
stanga

29
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive

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

se face, folosind „Property Inspector”:


1. se selecteaza elementul la care dorim sai 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

Formate de text, titlu


Modele de fonturi
Stiluri definite de fonturi
Marimea textului
Fig.4
Deschide „Panels Group” pentru scripturi css
Defineste un stil css pt colorarea textului
Text ingrosat <strong> sau <b>
Text inclinat <em> sau <i>
Aliniere la stanga (align=”left”)
Aliniere la centru (align=”center”)
Aliniere la dreapta (align=”right”)

30
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive

Aliniere la stangastanga (align=”justify”)


Lista cu marcatori: <ul><li>
Lista numerotata: <ol><li>
Indent <blockquote>
Reducere indent: <\blockquote>
Ancora, link: <a href="www.ajofm.ro">
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
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive

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
Deschide „Panels Group” pentru scripturi css

| Culoarea textului din randul selectat

Text ingrosat <strong> sau <b> in randul selectat


Text inclinat <em> sau <i> 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 stangastanga in randul selectat
Lista cu marcatori: <ul><li> in randul selectat
Lista numerotata: <ol><li> in randul selectat
Indent <blockquote> in randul selectat
Reducere indent: <\blockquote> 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

32
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive

Transforma celulele in cap de tabel


Aplica imagine de fundal celulelor selectate
| Culoarea de fundal celulelor selectate
| Culoarea bordurii celulelor selectate
Deschide o fereastra care creeaza stilul paginii

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 <strong> sau <b> in coloana selectata


Text inclinat <em> sau <i> 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 stangastanga in coloana selectata
Lista cu marcatori: <ul><li> in coloana selectata
Lista numerotata: <ol><li> in coloana selectata
Indent <blockquote> in coloana selectata
Reducere indent: <\blockquote> 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

33
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive

| 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
Deschide o fereastra care creeaza stilul paginii

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.9
Aplicarea unei clase

Transforma poza intro 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
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive

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 layerului

Distanta fata de marginea din stanga documentului


Distanta fata de marginea de sus a documentului
Latimea layerului
Inaltimea layerului
Ordinea de suprapunere a straturilor
Fig.10
Modul de vizibilitate

Imaginea de fundal a layerului


Culoarea de fundal a layerului

Clasa de proprietati din care face parte layerul

Modul de vizualizare

Clip rectangle left (optional)


clip rectangle right (optional)
Clip rectangle top (optional)
Clip rectangle bottom (optional)

35
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive

Bordura 3D intre frameuri


Fig.11
Culoarea bordurii

Grosimea bordurii
Inaltimea/latimea frameului in pixeli sau procente

Numele frameului

Adresa si numele fisierului din frame


Fig.12
afisarea/ascunderea barii de navigare verticale
Permite/nu permite redimensionarea frameului
Bordura frameului

Culoarea bordurii frameului


Marginea latimii frameului
Marginea inatimii frameului

Fig.13

Fig.14
Numele obiectului

Latimea obiectului
Inaltimea obiectului

36
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive

Numele si adresa fisierului SWF


Numele ferestrei
Editeaza obiectul
Reseteaza diensiunile obiectului
Aplica 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

37
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive

IV. D. Aplicarea automata a proprietatilor TAG urilor folosind „TAG Inspector”

TAGurilor 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
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive

Fig. 4 Fig. 5 Fig. 6

39
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive

Fig. 7 Fig. 8 Fig. 9

40
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive

Fig. 10 Fig. 11 Fig. 12

41
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive

Fig. 15 Fig. 16 Fig. 17

42
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive

Fig. 18 Fig. 19 Fig. 20

43
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive

Fig. 21 Fig. 22 Fig. 23

44
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive

Fig. 24 Fig. 25

45
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive

V. Stilurile celor mai uzuale TAGuri din HTML

Daca nu va sunt suficiente proprietatile pe care vi le ofera TAGurile sau daca doriti
o personalizare pentru toate elementele HTML din eeasi categorie de elemente, puteti
aplica colectii de stiluri.
Stilurile se pot aplicain interiorul TAGului care defineste elementul HTML sau in
antetul documentului.

46
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive

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
TAGul respectiv, ca in tabelul de mai jos:

Proprietate Valoare Scurtădescriere


1. BACKGROUND(fundal)
background background Oproprietatecucaresepotsetatoatevaloriledebackground
color <bodystyle="background:url(poza.jpg)fixedlefttop">
background <tablestyle="background:blue">
image
background
repeat
background
attachment
background
position
background scroll Stabileştefaptulcăopozădepefundalrămânefixăsausemişcă
attachment fixed odatăconţinutul
<bodystyle="backgroundimage:url(poza.jpg);background
attachment:scroll”>
background colorrgb SeteazăculoareadefundalaunuielementHTML
color colorhex <tdstyle="backgroundcolor:green">
colornume <bodystyle="backgroundcolor:#999999">
transparent
background url SeteazăoimaginepefundalulelementuluiHTML
image none <bodystyle="backgroundimage:url(poza.jpg)">
background topleft Seteazăloculdeundeîncepepoziţionareapozeidepefundal
position topcenter <bodystyle="backgroundimage:url(poza.jpg);background
topright position:3em2em">
centerleft <tablestyle="backgroundimage:url(poza.jpg);background
centercenter position:righttop">
centerright
bottomleft

47
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive

bottomcenter
bottomright
x% y%
xpos ypos
background repeat Seteazămodulcum/dacăserepetăoimaginepefundal
repeat repeatx <bodystyle="backgroundimage:url(poza.jpg);background
repeaty repeat:repeaty">
norepeat <tablestyle="backgroundimage:url(poza.jpg);background
repeat:norepeat">
2. TEXT
color color Seteazăculoareaunuitext
<bodystyle="color:red">
direction ltr Seteazădirecţiadescriere:ltr=stângaladreaptasirtl=dreaptala
rtl stânga
<bodystyle="direction:rtl">
letterspacing normal Măreştesaumicşoreazăspaţiuldintrelitere
length <divstyle="letterspacing:5em">
textalign left Aliniazătextuldintrunelementhtml
right <divstyle="textalign:justify">
center
justify
textdecoration none Adaugă„decorări”textului
underline <divstyle="textdecoration:overline">
overline
linethrough
blink
textindent Lungime px Indentează(deplaseazalastangasaudreapta)primaliniedintrun
% elementHTML
<divstyle="textindent:3em">
texttransform none Controleazămoduldeafişarealiterelorunuitext:cuMAJUSCULE
capitalize <divstyle="texttransform:capitalize">
uppercase <divstyle="texttransform:uppercase">
lowercase <divstyle="texttransform:lowercase">

48
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive

wordspacing normal Măreştesaumicşoreazăspaţiuldintrecuvinte


length <divstyle="wordspacing:4em">
3. FONT(modelalfabet)
font fontstyle Oproprietatecucaresepotdefiniîntrosingurădeclaraţietoate
fontvariant proprietăţilefontului
fontweight <divstyle="font:italicsmallcapsbolder2em/3emArial">
fontsize/line
height
fontfamily
caption
icon
menu
messagebox
smallcaption
statusbar
fontfamily familyname Olistădenumedefonturicaresevorutilizadacăexistăpemaşina
genericfamily pecareruleazăbrowserulînordineastabilită
<tablestyle="fontfamily:tahoma,verdana,arial”>
fontsize xxsmall Seteazădimensiuneafontului
xsmall <divstyle="fontsize:large">
small <divstyle="fontsize:2em">
medium <divstyle="fontsize:11">
large <divstyle="fontsize:150%">
xlarge
xxlarge
smaller
larger
mărime
%
fontstretch normal Specificămoduldecondensareatextului
wider <emstyle="fontstretch:extraexpanded">
narrower
ultra

49
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive

condensed
extra
condensed
condensed
semi
condensed
semiexpanded
expanded
extraexpanded
ultraexpanded
fontstyle normal Seteazăstiluldescriere
italic <pstyle="fontstyle:italic">
oblique
fontvariant normal Afişeazătextulcu“CAPITALEMICI”saunormal
smallcaps <pstyle="fontvariant:smallcaps">
fontweight normal Seteazăgrosimeafontului
bold <pstyle="fontweight:400">
bolder <pstyle="fontweight:lighter">
lighter
100
200
300
400
500
600
700
800
900
4. BORDER(borduri)
border borderwidth Oproprietatepentrusetareacelor3proprietatiintrosinguralinie
borderstyle <tdstyle="border:thickdoublered">
bordercolor <tdstyle="border:red">
borderbottom borderbottom Oproprietatepentrusetareaintrosinguradeclarareaproprietatilor

50
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive

width pentrumargineadejos
borderstyle <tablestyle="borderbottom:thindouble#999999">
bordercolor <tdstyle="borderbottom:2emridgegray">
borderbottom Bordercolor Seteazaculoareamarginiidejos
color <tdstyle="borderbottomcolor:yellow">
borderbottom Borderstyle Seteazastilulmarginiidejos
style <bodystyle="borderbottomstyle:dashed">
borderbottom thin Seteazagrosimeamarginiidejos
width medium <tableborder="1"style="borderbottomwidth:medium">
thick
dimensiune
bordercolor Color Seteazaculoareacelor4margini(susdreaptajosstanga)–poate
aveapanala4culori
<bodystyle="bordercolor:bluemagentagreenindigo">
<bodystyle="bordercolor:indigo">
borderleft borderleftwidth Oproprietatepentrusetareatuturorprorpietatilorpentrumarginea
borderstyle dinstangaintrosinguradeclarare
bordercolor <tdstyle="borderleft:thickdottedblue">
borderleftcolor bordercolor Seteazaculoareamarginiidinstanga
<tdstyle="borderleftcolor:red">
borderleftstyle borderstyle Seteazastilulmarginiidinstanga
<tdstyle="borderleftstyle:outset">
borderleftwidth thin Seteazagrosimeamarginiidinstanga
medium <tdstyle="borderleftwidth:3em">
thick
length
borderright borderright Oproprietatepentrusetareatuturorprorpietatilorpentrumarginea
width dindreaptaintrosinguradeclarare
borderstyle <tdstyle="borderright:thickdottedblue">
bordercolor
borderright bordercolor Seteazaculoareamarginiidindreapta
color <tdstyle="borderrightcolor:red">
borderright borderstyle Seteazastilulmarginiidindreapta

51
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive

style <tdstyle="borderrightstyle:outset">
borderright thin Seteazagrosimeamarginiidindreapta
width medium <tdstyle="borderrightwidth:3em">
thick
dimensiune
borderstyle none Seteazastilulcelor4marginiintrosinguradeclaratie(susdreapta
hidden josstanga)
dotted <tableborder="1"style="borderstyle:doublenonenonenone">
dashed
solid
double
groove
ridge
inset
outset
bordertop bordertopwidth Oproprietatepentrusetareatuturorprorpietatilorpentrumarginea
borderstyle desusintrosinguradeclarare
bordercolor <tdstyle="bordertop:thickdottedblue">
bordertopcolor bordercolor Seteazaculoareamarginiidesus
<tdstyle="bordertopcolor:red">
bordertopstyle borderstyle Seteazastilulmarginiidesus
<tdstyle="bordertopstyle:outset">
bordertopwidth thin Seteazagrosimeamarginiidesus
medium <tdstyle="bordertopwidth:3em">
thick
dimensiune
borderwidth thin Seteazagrosimeacelor4marginiintrosinguradeclaratie(sus
medium dreaptajosstanga)
thick <tdstyle="borderwidth:thinmedium2em1em">
dimensiune
5. MARGINI
margin margintop Oproprietatecareseteazacelepatrumarginiintrosingura
marginright declarare(susdreaptajosstanga)

52
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive

marginbottom <bodystyle="margin:2em1em3em4em">
marginleft
marginbottom auto SeteazamargineadejosaunuielementHTML
dimensiune <tdstyle="marginbottom:3em">
%
marginleft auto SeteazamargineadinstangaaunuielementHTML
dimensiune <tdstyle="marginleft:3em">
%
marginright auto SeteazamargineadindreaptaaunuielementHTML
dimensiune <tdstyle="marginright:3em">
%
margintop auto SeteazamargineadesusaunuielementHTML
dimensiune <tdstyle="margintop:3em">
%
6. PADDING
padding paddingtop Oproprietatecareseteazaintrosinguradeclararetoatedistantele
paddingright fatademarginialeunuielementHTML(susdreaptajosstanga)
paddingbottom <tdstyle="padding:1em4em3em2em">
paddingleft
paddingbottom dimensiune SeteazadistantadelamargineadejosaelementuluiHTML
% <tdstyle="paddingbottom:2em">
paddingleft length SeteazadistantadelamargineadinstangaaelementuluiHTML
% <tdstyle="paddingleft:2em">
paddingright length SeteazadistantadelamargineadindreaptaaelementuluiHTML
% <tdstyle="paddingright:2em">
paddingtop length SeteazadistantadelamargineadesusaelementuluiHTML
% <tdstyle="paddingtop:2em">
7. LISTE
liststyle liststyletype Oproprietatecaresteazaintrosinguradeclararetoateceletrei
liststyleposition proprietati
liststyleimage <listyle="liststyle:upperromaninside">
<listyle="liststyle:url(images.jpg)outside">
liststyleimage none Seteazacamarcatordelistoimagine

53
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive

url <listyle="liststyleimage:url(images.jpg)">
liststyleposition inside Stabilestepozitiamarcatoruluidelista:ininteriorulsauexteriorul
outside acesteia
<ul><listyle="liststyleposition:inside">
liststyletype none Seteazatipuldemarcator
disc <ulstyle="liststyletype:loweralpha">
circle
square
decimal
decimal
leadingzero
lowerroman
upperroman
loweralpha
upperalpha
lowergreek
lowerlatin
upperlatin
hebrew
armenian
georgian
cjkideographic
hiragana
katakana
hiraganairoha
katakanairoha
8. A(ANCORE)
A Active activeAdaugaunstilspecialunuilinkselectat
Hover linkAdaugaunstilspecialunuilinknevizitat
Link visitedAdaugaunstilspecialunuilinksvizitat
Visited hoverAdaugaunstilspecialunuilinkcandmouseulseafla
desuprasa

54
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive

<head>
<styletype="text/css">
a.negru:link{textdecoration:none;color:#405159;}
a.negru:visited{textdecoration:none;color:#405159;}
a.negru:hover{textdecoration:none;color:black;}
</style>
</head>

55
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive

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

1.IntreTAGurile<head></head>dindocumentsescrie:<styletype="text/css"></style>

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,cainimagineadejossisedeschidedin„PanelGroup”
sectiuneaCSS

4.Seactiveazamoduldevizualizare astilurilorpecategorii,folosindbutonul
4.PefiecareelementHTML,inparte,sepotaplicastilurileposibilepentruelementulrespectiv
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive

VI. Verificarea compatibilităţii 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
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive

VII. Salvarea şi publicarea documentului

Daca se doreste doar salvarea siteului pe statia de lucru (deci nu publicarea ei pe


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

58
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive

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…” – FtpRDS se scriu datele de comunicare cu serverul

59
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive

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 sa 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
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive

Publicarea se face acum aproape ca o salvare simpla: in meniul superior clic pe FileSave
to Remote Server si se alege directorul in care se va face salvarea, dupa care se da clic
pe butonul Save

61