Suport Curs Dreamweaver

61
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive 1 MACROMEDIA DREAMWEAVER Lector SUPURAN RICHARDO

description

Suport Curs Dreamweaver

Transcript of Suport Curs Dreamweaver

Page 1: Suport Curs Dreamweaver

Curs WEB DESIGN Modul ­ DreamWeaver Noţiuni introductive

1

MACROMEDIA DREAMWEAVER

Lector SUPURAN RICHARDO

Page 2: Suport Curs Dreamweaver

Curs WEB DESIGN Modul ­ DreamWeaver Noţiuni 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 compatibilităţii cu browsere .................................................................57

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

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

Page 3: Suport Curs Dreamweaver

Curs WEB DESIGN Modul ­ DreamWeaver Noţiuni introductive

3

I.A. Ce este HTML?

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

crearea paginilor web ce pot fi afişate într­un 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 hiperlink­uri (sau web­ul).

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,

wiki­uri ş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 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ă intenţionat.

Page 4: Suport Curs Dreamweaver

Curs WEB DESIGN Modul ­ DreamWeaver Noţiuni 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 funcţii 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 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 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 î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 design­ului pe bază de tabel.

Dreamweaver permite folosirea majorităţii browserelor instalate pe calculatorul

utilizatorului, pentru a previzualiza website­ul creat. De asemenea conţine şi câteva

utilitare pentru administrarea site­urilor, 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 script­uri

de genul PHP, ColdFusion, Active Server Pages (ASP) şi ASP.NET, fără a avea nevoie de

o prealabilă experienţă în programare.

Page 5: Suport Curs Dreamweaver

Curs WEB DESIGN Modul ­ DreamWeaver Noţiuni introductive

5

Un aspect foarte lăudat al Dreamweaver­ului î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 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.

Page 6: Suport Curs Dreamweaver

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

Page 7: Suport Curs Dreamweaver

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

Page 8: Suport Curs Dreamweaver

Curs WEB DESIGN Modul ­ DreamWeaver Noţiuni introductive

8

III. A. Mediul Macromedia

Page 9: Suport Curs Dreamweaver

Curs WEB DESIGN Modul ­ DreamWeaver Noţiuni introductive

9

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

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

superior:

Page 10: Suport Curs Dreamweaver

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

Page 11: Suport Curs Dreamweaver

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

Page 12: Suport Curs Dreamweaver

Curs WEB DESIGN Modul ­ DreamWeaver Noţiuni introductive

12

Tabel

Insereaza un TAG „div”

Insereaza imagini Insereaza o imagine (vezi modulul de Fireworks)

Page 13: Suport Curs Dreamweaver

Curs WEB DESIGN Modul ­ DreamWeaver Noţiuni introductive

13

Transforma textul intr­o imagine

Insereaza un script de tip RollOver

Insereaza un fisier Fireworks

Page 14: Suport Curs Dreamweaver

Curs WEB DESIGN Modul ­ DreamWeaver Noţiuni introductive

14

Insereaza un script care creeaza meniu din poze

Insereaza obiecte Insereaza obiecte

Page 15: Suport Curs Dreamweaver

Curs WEB DESIGN Modul ­ DreamWeaver Noţiuni introductive

15

Insereaza date

Include un Side Server

Insereaza un comentariu

Optiuni Template

Page 16: Suport Curs Dreamweaver

Curs WEB DESIGN Modul ­ DreamWeaver Noţiuni introductive

16

Colectia de TAG­uri

Page 17: Suport Curs Dreamweaver

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

Page 18: Suport Curs Dreamweaver

Curs WEB DESIGN Modul ­ DreamWeaver Noţiuni introductive

18

Insereaza o coloana in stanga coloanei selectate

Insereaza o coloana in dreapta coloanei selectate

Frame­uri ­ lista de optiuni

Importa „Tabulator Data”

Page 19: Suport Curs Dreamweaver

Curs WEB DESIGN Modul ­ DreamWeaver Noţiuni introductive

19

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:

Codul sursa forma

<html>

<body>

<table width="340" bgcolor=#CCCCCC>

<formaction="" method="get">

<caption align=left>Curriculum Vitae</caption>

<tr>

<td>Nume Prenume

<td><input name="nume" type="text" value="Supuran Richardo"

size="38">

Supuran Richardo

<tr>

<td>Sex>

<td><input name="sex" type="radio" value="m" checked>Masculin

<input type="radio"name="sex" value="f">Feminin Masculin

Feminin

<tr>

<td>Studii

<td><select name="studii" size="1">

<option value="s">Scoala profesionala</option>

<option value="l">Liceu</option>

<option value="f" selected>Facultate</option>

</select>

Facultate

<tr>

Page 20: Suport Curs Dreamweaver

Curs WEB DESIGN Modul ­ DreamWeaver Noţiuni introductive

20

<td>Acces Internet

<td><input name="Serviciu" type="checkbox" value="s" checked>

Serviciu Serviciu

<input name="Acasa" type="checkbox" value="a" checked>

Acasa Acasa

<input name="Net Cafe" type="checkbox" value="n">Net Cafe Net Cafe

<tr>

<td>Foto

<td><input name="foto" type="file" size="26">

<tr>

<td>Observatii

<td><textareaname="observatii" cols="30" rows="3">

curs webdesign

</textarea>

cursuri w ebdesign

<tr>

<td>&nbsp;

<td><input name="Input2" type="reset" value="anuleaza"> anuleaza

<input name="Input" type="submit" value="trimite"> trimite

</form>

</table>

</body>

</html>

Page 21: Suport Curs Dreamweaver

Curs WEB DESIGN Modul ­ DreamWeaver Noţiuni introductive

21

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

Page 22: Suport Curs Dreamweaver

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

Page 23: Suport Curs Dreamweaver

Curs WEB DESIGN Modul ­ DreamWeaver Noţiuni 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) &nbsp;

© &copy;

€ &euro;

¢ &cent;

„ &#8220;

” &#8221;

‰ &#8240;

Page 24: Suport Curs Dreamweaver

Curs WEB DESIGN Modul ­ DreamWeaver Noţiuni introductive

24

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

Page 25: Suport Curs Dreamweaver

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

<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 http­equiv="Content­Type" content="text/html; charset=ISO­8859­2"> 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 site­ului">

</head>

<body>

...

</body>

</html>

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

<html>

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

Fig.4

</html>

Page 26: Suport Curs Dreamweaver

Curs WEB DESIGN Modul ­ DreamWeaver Noţiuni introductive

26

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

<tablewidth="200" border="1" align="center" bgcolor="red" cellpadding="0"

cellspacing="0" bordercolor="blue">

Fig.6

<tr bgcolor="yellow" align="right" bordercolor="blue" valign="top"> Fig.7

<td align="center" bgcolor="green" bordercolor="gray" valign="top" width="150">……</td>

Fig.8

</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" visibility="show" width="380">....</layer>

Fig.10

Page 27: Suport Curs Dreamweaver

Curs WEB DESIGN Modul ­ DreamWeaver Noţiuni introductive

27

<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

frameborder="no" bordercolor="red">

Fig.12

<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"

marginwidth="0">

Fig.4,15

</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

<a href="http://www.google.ro" target="dreapta">poza alb­negru</a>

Page 28: Suport Curs Dreamweaver

Curs WEB DESIGN Modul ­ DreamWeaver Noţiuni introductive

28

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

<html>

<body>

<embed src="buton.swf" quality="high" type="application/x­shockwave­flash"

width="61" height="34" ></embed> Fig.14, 20

Page 29: Suport Curs Dreamweaver

Curs WEB DESIGN Modul ­ DreamWeaver Noţiuni introductive

29

Alte TAG­uri

<!—acesta este un comentariu­­

>

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

<br> (trecere la 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….h6 cel mai mic

format)

Fig.24

<i>…</i> sau <em>…</em> text Text inclinat Fig.25

<b>…</b> sau

<strong>…</strong>

text Text ingrosat

<u>…</u> sau <ins>…</ins> text Text subliniat

<del>…</del>

sau<strike>…</strike>

text Text taiat

5<sup>2</sup> 5 2 Indici superiori

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

23

Textul afisat respecta forma textului scris in sursa (spatii

libere, trecere pe alt rand…)

<nobr></nobr> Previne trecerea la randul urmator la capatul liniei

<caption>…</caption> Titlul tabelului, daca e plasat intre TAG­ul „table” si

primul TAG „tr”

<marquee>…</marque> Text animat, care se deplaseaza singur de la dreapta la

stanga

Page 30: Suport Curs Dreamweaver

Curs WEB DESIGN Modul ­ DreamWeaver Noţiuni 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 <strong> sau <b>

Text inclinat <em> sau <i>

Aliniere la stanga (align=”left”)

Aliniere la centru (align=”center”)

Aliniere la dreapta (align=”right”)

Page 31: Suport Curs Dreamweaver

Curs WEB DESIGN Modul ­ DreamWeaver Noţiuni introductive

31

Aliniere la stanga­stanga (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

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

Page 32: Suport Curs Dreamweaver

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

Aliniere la dreapta in randul selectat

Aliniere la stanga­stanga 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

Page 33: Suport Curs Dreamweaver

Curs WEB DESIGN Modul ­ DreamWeaver Noţiuni introductive

33

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

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

Text inclinat <em> sau <i> 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: <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

Page 34: Suport Curs Dreamweaver

Curs WEB DESIGN Modul ­ DreamWeaver Noţiuni introductive

34

| 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

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

Page 35: Suport Curs Dreamweaver

Curs WEB DESIGN Modul ­ DreamWeaver Noţiuni introductive

35

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

Fig.10

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 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)

Page 36: Suport Curs Dreamweaver

Curs WEB DESIGN Modul ­ DreamWeaver Noţiuni 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.14 Numele obiectului

Latimea obiectului

Inaltimea obiectului

Page 37: Suport Curs Dreamweaver

Curs WEB DESIGN Modul ­ DreamWeaver Noţiuni introductive

37

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

Page 38: Suport Curs Dreamweaver

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

Page 39: Suport Curs Dreamweaver

Curs WEB DESIGN Modul ­ DreamWeaver Noţiuni introductive

39

Fig. 4 Fig. 5 Fig. 6

Page 40: Suport Curs Dreamweaver

Curs WEB DESIGN Modul ­ DreamWeaver Noţiuni introductive

40

Fig. 7 Fig. 8 Fig. 9

Page 41: Suport Curs Dreamweaver

Curs WEB DESIGN Modul ­ DreamWeaver Noţiuni introductive

41

Fig. 10 Fig. 11 Fig. 12

Page 42: Suport Curs Dreamweaver

Curs WEB DESIGN Modul ­ DreamWeaver Noţiuni introductive

42

Fig. 15 Fig. 16 Fig. 17

Page 43: Suport Curs Dreamweaver

Curs WEB DESIGN Modul ­ DreamWeaver Noţiuni introductive

43

Fig. 18 Fig. 19 Fig. 20

Page 44: Suport Curs Dreamweaver

Curs WEB DESIGN Modul ­ DreamWeaver Noţiuni introductive

44

Fig. 21 Fig. 22 Fig. 23

Page 45: Suport Curs Dreamweaver

Curs WEB DESIGN Modul ­ DreamWeaver Noţiuni introductive

45

Fig. 24 Fig. 25

Page 46: Suport Curs Dreamweaver

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

Page 47: Suport Curs Dreamweaver

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

<body style="background: url(poza.jpg) fixed left top"> <table style="background: blue">

background­

attachment

scroll

fixed Stabileşte faptul că o poză de pe fundal rămâne fixă sau se mişcă

odată conţinutul

<body style=" background­image: url(poza.jpg);background­ attachment: scroll ”>

background­

color

color­rgb

color­hex

color­nume transparent

Setează culoarea de fundal a unui element HTML

<td style="background­color: green"> <body style="background­color: #999999">

background­

image

url

none Setează o imagine pe fundalul elementului HTML

<body style="background­image: url(poza.jpg)">

background­

position

top left top center

top right center left center center center right

bottom left

Setează locul de unde începe poziţionarea pozei de pe fundal

<body style="background­image: url(poza.jpg);background­

position: 3em 2em"> <table style="background­image: url(poza.jpg);background­ position: right top">

Page 48: Suport Curs Dreamweaver

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

<body style=" background­image: url(poza.jpg);background­ repeat: repeat­y"> <table style=" background­image: url(poza.jpg);background­ repeat: no­repeat">

2. TEXT

color color Setează culoarea unui text

<body style="color: red">

direction ltr rtl

Setează direcţia de scriere: ltr=stânga la dreapta si rtl=dreapta la

stânga

<body style="direction: rtl">

letter­spacing normal

length

Măreşte sau micşorează spaţiul dintre litere

<div style="letter­spacing: 5em">

text­align left right center

justify

Aliniază textul dintr­un element html

<div style="text­align: justify">

text­decoration none underline overline

line­through blink

Adaugă „decorări” textului

<div style="text­decoration: overline">

text­indent Lungime px

%

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

element HTML

<div style="text­indent: 3em">

text­transform none capitalize

uppercase lowercase

Controlează modul de afişare a literelor unui text: cu MAJUSCULE

<div style="text­transform: capitalize">

<div style="text­transform: uppercase"> <div style="text­transform: lowercase">

Page 49: Suport Curs Dreamweaver

Curs WEB DESIGN Modul ­ DreamWeaver Noţiuni introductive

49

word­spacing normal

length

Măreşte sau micşorează spaţiul dintre cuvinte

<div style="word­spacing: 4em">

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ă declaraţie toate

proprietăţile fontului

<div style="font: italic small­caps bolder 2em/3em Arial">

font­family family­name

generic­family

O listă de nume de fonturi care se vor utiliza dacă există pe maşina

pe care rulează browserul în ordinea stabilită

<table style="font­family:tahoma,verdana,arial”>

font­size xx­small x­small small

medium large x­large xx­large

smaller larger

mărime

%

Setează dimensiunea fontului

<div style="font­size: large"> <div style="font­size: 2em">

<div style="font­size: 11"> <div style="font­size: 150%">

font­stretch normal wider narrower ultra­

Specifică modul de condensare a textului

<em style="font­stretch:extra­expanded">

Page 50: Suport Curs Dreamweaver

Curs WEB DESIGN Modul ­ DreamWeaver Noţiuni introductive

50

condensed

extra­ condensed condensed semi­ condensed

semi­expanded expanded extra­expanded ultra­expanded

font­style normal italic oblique

Setează stilul de scriere

<p style="font­style: italic">

font­variant normal small­caps

Afişează textul cu “CAPITALE MICI” sau normal

<p style="font­variant: small­caps">

font­weight normal bold

bolder lighter 100 200

300 400 500 600

700 800 900

Setează grosimea fontului

<p style="font­weight: 400">

<p style="font­weight: lighter">

4. BORDER (borduri)

border border­width

border­style

border­color

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

<td style="border: thick double red"> <td style="border: red">

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

Page 51: Suport Curs Dreamweaver

Curs WEB DESIGN Modul ­ DreamWeaver Noţiuni introductive

51

width

border­style

border­color

pentru marginea de jos

<table style="border­bottom: thin double #999999"> <td style="border­bottom: 2em ridge gray">

border­bottom­

color

Border­color Seteaza culoarea marginii de jos

<td style="border­bottom­color: yellow">

border­bottom­

style

Border­style Seteaza stilul marginii de jos

<body style="border­bottom­style: dashed">

border­bottom­

width

thin medium

thick

dimensiune

Seteaza grosimea marginii de jos

<table border="1" style="border­bottom­width: medium">

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

avea pana la 4 culori

<body style="border­color: blue magenta green indigo"> <body style="border­color: indigo">

border­left border­left­width

border­style

border­color

O proprietate pentru setarea tuturor prorpietatilor pentru marginea

din stanga intr­o singura declarare

<td style="border­left: thick dotted blue">

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

<td style="border­left­color: red">

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

<td style="border­left­style: outset">

border­left­width thin

medium thick

length

Seteaza grosimea marginii din stanga

<td style="border­left­width: 3em">

border­right border­right­

width

border­style

border­color

O proprietate pentru setarea tuturor prorpietatilor pentru marginea

din dreapta intr­o singura declarare

<td style="border­right: thick dotted blue">

border­right­

color

border­color Seteaza culoarea marginii din dreapta

<td style="border­right­color: red">

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

Page 52: Suport Curs Dreamweaver

Curs WEB DESIGN Modul ­ DreamWeaver Noţiuni introductive

52

style <td style="border­right­style: outset">

border­right­

width

thin medium thick

dimensiune

Seteaza grosimea marginii din dreapta

<td style="border­right­width: 3em">

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)

<table border="1" style="border­style: double none none none">

border­top border­top­width

border­style

border­color

O proprietate pentru setarea tuturor prorpietatilor pentru marginea

de sus intr­o singura declarare

<td style="border­top: thick dotted blue">

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

<td style="border­top­color: red">

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

<td style="border­top­style: outset">

border­top­width thin medium

thick

dimensiune

Seteaza grosimea marginii de sus

<td style="border­top­width: 3em">

border­width thin medium

thick

dimensiune

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

dreapta­jos­stanga)

<td style="border­width: thin medium 2em 1em">

5. MARGINI

margin margin­top

margin­right

O proprietate care seteaza cele patru margini intr­o singura

declarare (sus­dreapta­jos­stanga)

Page 53: Suport Curs Dreamweaver

Curs WEB DESIGN Modul ­ DreamWeaver Noţiuni introductive

53

margin­bottom

margin­left

<body style="margin: 2em 1em 3em 4em">

margin­bottom auto

dimensiune

%

Seteaza marginea de jos a unui element HTML

<td style="margin­bottom: 3em">

margin­left auto

dimensiune

%

Seteaza marginea din stanga a unui element HTML

<td style="margin­left: 3em">

margin­right auto

dimensiune

%

Seteaza marginea din dreapta a unui element HTML

<td style="margin­right: 3em">

margin­top auto

dimensiune

%

Seteaza marginea de sus a unui element HTML

<td style="margin­top: 3em">

6. PADDING

padding padding­top

padding­right

padding­bottom

padding­left

O proprietate care seteaza intr­o singura declarare toate distantele

fatade margini ale unui element HTML (sus­dreapta­jos­stanga)

<td style="padding: 1em 4em 3em 2em">

padding­bottom dimensiune

%

Seteaza distanta de la marginea de jos a elementului HTML

<td style="padding­bottom: 2em">

padding­left length

%

Seteaza distantade la marginea din stanga a elementului HTML

<td style="padding­left: 2em">

padding­right length

%

Seteaza distanta de la marginea din dreapta a elementului HTML

<td style="padding­right: 2em">

padding­top length

%

Seteaza distanta de la marginea de susa elementului HTML

<td style="padding­top: 2em">

7. LISTE

list­style list­style­type

list­style­position

list­style­image

O proprietate care steaza intro singura declarare toate cele trei

proprietati

<li style="list­style: upper­roman inside"> <li style="list­style: url(images.jpg) outside">

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

Page 54: Suport Curs Dreamweaver

Curs WEB DESIGN Modul ­ DreamWeaver Noţiuni introductive

54

url <li style="list­style­image: url(images.jpg)">

list­style­position inside outside

Stabileste pozitia marcatorului de lista: in interiorul sau exteriorul

acesteia

<ul><li style="list­style­position: inside">

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

<ul style="list­style­type: lower­alpha">

8. A (ANCORE)

A Active

Hover

Link

Visited

activeAdauga un stil special unui link selectat linkAdauga un stil special unui link nevizitat

visitedAdauga un stil special unui link svizitat hoverAdauga un stil special unui link cand mouse­ul se afla

desupra sa

Page 55: Suport Curs Dreamweaver

Curs WEB DESIGN Modul ­ DreamWeaver Noţiuni introductive

55

<head> <style type="text/css">

a.negru:linktext­decoration: none; color:#405159; a.negru:visitedtext­decoration: none; color:#405159; a.negru:hovertext­decoration: none; color:black;

</style> </head>

Page 56: Suport Curs Dreamweaver

Curs WEB DESIGN Modul ­ DreamWeaver Noţiuni introductive

56

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

1. Intre TAG­urile <head> </head>din document se scrie: <style type="text/css"></style>

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 butonul

4. Pe fiecare element HTML, in parte, se pot aplica stilurile posibile pentru elementul respectiv

Page 57: Suport Curs Dreamweaver

Curs WEB DESIGN Modul ­ DreamWeaver Noţiuni introductive

57

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

Page 58: Suport Curs Dreamweaver

Curs WEB DESIGN Modul ­ DreamWeaver Noţiuni 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…”:

Page 59: Suport Curs Dreamweaver

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

Page 60: Suport Curs Dreamweaver

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

Page 61: Suport Curs Dreamweaver

Curs WEB DESIGN Modul ­ DreamWeaver Noţiuni introductive

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