Suport Curs Dreamweaver
-
Upload
irina-gageanu -
Category
Documents
-
view
110 -
download
12
description
Transcript of Suport Curs Dreamweaver
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive
1
MACROMEDIA DREAMWEAVER
Lector SUPURAN RICHARDO
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 TAGurilor sau in antetul documentului..................46
VI. Verificarea compatibilităţii cu browsere .................................................................57
VII. Salvarea documentului ..........................................................................................58
VIII. Publicarea documentului .......................................................................................59
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 î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.
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 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.
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive
5
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.
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 ProgrameMacromediaMacromedia Dreamweaver 8
2. clic pe iconita verde din bara cu lansari rapide
3. dublu clic pe desktop, pe iconita verde
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 clicdreapta pe fisierul respectiv, se deschide o lista de optiuni, din
care se alege „Edit With Dreamweaver 8”
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive
8
III. A. Mediul Macromedia
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:
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 CtrlE
3. se foloseste butonul din „Insert bar”
se va deschide o fereastra cu toate TAGurile arajate pe categorii:
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
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive
12
Tabel
Insereaza un TAG „div”
Insereaza imagini Insereaza o imagine (vezi modulul de Fireworks)
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive
13
Transforma textul intro imagine
Insereaza un script de tip RollOver
Insereaza un fisier Fireworks
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive
14
Insereaza un script care creeaza meniu din poze
Insereaza obiecte Insereaza obiecte
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive
15
Insereaza date
Include un Side Server
Insereaza un comentariu
Optiuni Template
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive
16
Colectia de TAGuri
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
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive
18
Insereaza o coloana in stanga coloanei selectate
Insereaza o coloana in dreapta coloanei selectate
Frameuri lista de optiuni
Importa „Tabulator Data”
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>
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>
<td><input name="Input2" type="reset" value="anuleaza"> anuleaza
<input name="Input" type="submit" value="trimite"> trimite
</form>
</table>
</body>
</html>
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive
21
Forumarul de mai sus va arata in browser ca in imaginea de mai jos:
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive
22
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
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)
© ©
€ €
¢ ¢
„ “
” ”
‰ ‰
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 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
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 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" marginheight="0">….</body>
Fig.4
</html>
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
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 albnegru</a>
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/xshockwaveflash"
width="61" height="34" ></embed> Fig.14, 20
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive
29
Alte TAGuri
<!—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 TAGul „table” si
primul TAG „tr”
<marquee>…</marque> Text animat, care se deplaseaza singur de la dreapta la
stanga
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive
30
IV. C. Aplicarea automata a proprietatilor TAGurilor 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
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”)
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive
31
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
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
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 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
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 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
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 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
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 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
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)
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive
36
Fig.11 Bordura 3D intre frameuri
Culoarea bordurii
Grosimea bordurii
Inaltimea/latimea frameului in pixeli sau procente
Fig.12
Numele frameului
Adresa si numele fisierului din frame
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
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
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive
38
IV. D. Aplicarea automata a proprietatilor TAGurilor 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
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive
39
Fig. 4 Fig. 5 Fig. 6
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive
40
Fig. 7 Fig. 8 Fig. 9
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive
41
Fig. 10 Fig. 11 Fig. 12
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive
42
Fig. 15 Fig. 16 Fig. 17
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive
43
Fig. 18 Fig. 19 Fig. 20
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive
44
Fig. 21 Fig. 22 Fig. 23
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive
45
Fig. 24 Fig. 25
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive
46
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 aplica in interiorul TAGului care defineste elementul HTML sau in antetul
documentului.
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive
47
V.A. Varianta in care se introduc manual stilurile in interiorul TAGurilor
In fereastra „Code” se plaseaza cursorul in 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
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=" backgroundimage: url(poza.jpg);background attachment: scroll ”>
background
color
colorrgb
colorhex
colornume transparent
Setează culoarea de fundal a unui element HTML
<td style="backgroundcolor: green"> <body style="backgroundcolor: #999999">
background
image
url
none Setează o imagine pe fundalul elementului HTML
<body style="backgroundimage: 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="backgroundimage: url(poza.jpg);background
position: 3em 2em"> <table style="backgroundimage: url(poza.jpg);background position: right top">
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive
48
bottom center
bottom right
x% y%
xpos ypos
background
repeat
repeat
repeatx repeaty norepeat
Setează modul cum/dacă se repetă o imagine pe fundal
<body style=" backgroundimage: url(poza.jpg);background repeat: repeaty"> <table style=" backgroundimage: url(poza.jpg);background repeat: norepeat">
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">
letterspacing normal
length
Măreşte sau micşorează spaţiul dintre litere
<div style="letterspacing: 5em">
textalign left right center
justify
Aliniază textul dintrun element html
<div style="textalign: justify">
textdecoration none underline overline
linethrough blink
Adaugă „decorări” textului
<div style="textdecoration: overline">
textindent Lungime px
%
Indentează (deplaseaza la stanga sau dreapta) prima linie dintrun
element HTML
<div style="textindent: 3em">
texttransform none capitalize
uppercase lowercase
Controlează modul de afişare a literelor unui text: cu MAJUSCULE
<div style="texttransform: capitalize">
<div style="texttransform: uppercase"> <div style="texttransform: lowercase">
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive
49
wordspacing normal
length
Măreşte sau micşorează spaţiul dintre cuvinte
<div style="wordspacing: 4em">
3. FONT (model alfabet)
font fontstyle
fontvariant
fontweight
fontsize/line
height
fontfamily caption icon menu messagebox
smallcaption statusbar
O proprietate cu care se pot defini întro singură declaraţie toate
proprietăţile fontului
<div style="font: italic smallcaps bolder 2em/3em Arial">
fontfamily familyname
genericfamily
O listă de nume de fonturi care se vor utiliza dacă există pe maşina
pe care rulează browserul în ordinea stabilită
<table style="fontfamily:tahoma,verdana,arial”>
fontsize xxsmall xsmall small
medium large xlarge xxlarge
smaller larger
mărime
%
Setează dimensiunea fontului
<div style="fontsize: large"> <div style="fontsize: 2em">
<div style="fontsize: 11"> <div style="fontsize: 150%">
fontstretch normal wider narrower ultra
Specifică modul de condensare a textului
<em style="fontstretch:extraexpanded">
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive
50
condensed
extra condensed condensed semi condensed
semiexpanded expanded extraexpanded ultraexpanded
fontstyle normal italic oblique
Setează stilul de scriere
<p style="fontstyle: italic">
fontvariant normal smallcaps
Afişează textul cu “CAPITALE MICI” sau normal
<p style="fontvariant: smallcaps">
fontweight normal bold
bolder lighter 100 200
300 400 500 600
700 800 900
Setează grosimea fontului
<p style="fontweight: 400">
<p style="fontweight: lighter">
4. BORDER (borduri)
border borderwidth
borderstyle
bordercolor
O proprietate pentru setarea celor 3 proprietati intro singura linie
<td style="border: thick double red"> <td style="border: red">
borderbottom borderbottom O proprietate pentru setarea intro singura declarare a proprietatilor
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive
51
width
borderstyle
bordercolor
pentru marginea de jos
<table style="borderbottom: thin double #999999"> <td style="borderbottom: 2em ridge gray">
borderbottom
color
Bordercolor Seteaza culoarea marginii de jos
<td style="borderbottomcolor: yellow">
borderbottom
style
Borderstyle Seteaza stilul marginii de jos
<body style="borderbottomstyle: dashed">
borderbottom
width
thin medium
thick
dimensiune
Seteaza grosimea marginii de jos
<table border="1" style="borderbottomwidth: medium">
bordercolor Color Seteaza culoarea celor 4 margini (susdreaptajosstanga)–poate
avea pana la 4 culori
<body style="bordercolor: blue magenta green indigo"> <body style="bordercolor: indigo">
borderleft borderleftwidth
borderstyle
bordercolor
O proprietate pentru setarea tuturor prorpietatilor pentru marginea
din stanga intro singura declarare
<td style="borderleft: thick dotted blue">
borderleftcolor bordercolor Seteaza culoarea marginii din stanga
<td style="borderleftcolor: red">
borderleftstyle borderstyle Seteaza stilul marginii din stanga
<td style="borderleftstyle: outset">
borderleftwidth thin
medium thick
length
Seteaza grosimea marginii din stanga
<td style="borderleftwidth: 3em">
borderright borderright
width
borderstyle
bordercolor
O proprietate pentru setarea tuturor prorpietatilor pentru marginea
din dreapta intro singura declarare
<td style="borderright: thick dotted blue">
borderright
color
bordercolor Seteaza culoarea marginii din dreapta
<td style="borderrightcolor: red">
borderright borderstyle Seteaza stilul marginii din dreapta
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive
52
style <td style="borderrightstyle: outset">
borderright
width
thin medium thick
dimensiune
Seteaza grosimea marginii din dreapta
<td style="borderrightwidth: 3em">
borderstyle none hidden dotted dashed
solid double groove ridge
inset outset
Seteaza stilul celor 4 margini intro singura declaratie (susdreapta
josstanga)
<table border="1" style="borderstyle: double none none none">
bordertop bordertopwidth
borderstyle
bordercolor
O proprietate pentru setarea tuturor prorpietatilor pentru marginea
de sus intro singura declarare
<td style="bordertop: thick dotted blue">
bordertopcolor bordercolor Seteaza culoarea marginii de sus
<td style="bordertopcolor: red">
bordertopstyle borderstyle Seteaza stilul marginii de sus
<td style="bordertopstyle: outset">
bordertopwidth thin medium
thick
dimensiune
Seteaza grosimea marginii de sus
<td style="bordertopwidth: 3em">
borderwidth thin medium
thick
dimensiune
Seteaza grosimea celor 4 margini intro singura declaratie (sus
dreaptajosstanga)
<td style="borderwidth: thin medium 2em 1em">
5. MARGINI
margin margintop
marginright
O proprietate care seteaza cele patru margini intro singura
declarare (susdreaptajosstanga)
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive
53
marginbottom
marginleft
<body style="margin: 2em 1em 3em 4em">
marginbottom auto
dimensiune
%
Seteaza marginea de jos a unui element HTML
<td style="marginbottom: 3em">
marginleft auto
dimensiune
%
Seteaza marginea din stanga a unui element HTML
<td style="marginleft: 3em">
marginright auto
dimensiune
%
Seteaza marginea din dreapta a unui element HTML
<td style="marginright: 3em">
margintop auto
dimensiune
%
Seteaza marginea de sus a unui element HTML
<td style="margintop: 3em">
6. PADDING
padding paddingtop
paddingright
paddingbottom
paddingleft
O proprietate care seteaza intro singura declarare toate distantele
fatade margini ale unui element HTML (susdreaptajosstanga)
<td style="padding: 1em 4em 3em 2em">
paddingbottom dimensiune
%
Seteaza distanta de la marginea de jos a elementului HTML
<td style="paddingbottom: 2em">
paddingleft length
%
Seteaza distantade la marginea din stanga a elementului HTML
<td style="paddingleft: 2em">
paddingright length
%
Seteaza distanta de la marginea din dreapta a elementului HTML
<td style="paddingright: 2em">
paddingtop length
%
Seteaza distanta de la marginea de susa elementului HTML
<td style="paddingtop: 2em">
7. LISTE
liststyle liststyletype
liststyleposition
liststyleimage
O proprietate care steaza intro singura declarare toate cele trei
proprietati
<li style="liststyle: upperroman inside"> <li style="liststyle: url(images.jpg) outside">
liststyleimage none Seteaza ca marcator de list o imagine
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive
54
url <li style="liststyleimage: url(images.jpg)">
liststyleposition inside outside
Stabileste pozitia marcatorului de lista: in interiorul sau exteriorul
acesteia
<ul><li style="liststyleposition: inside">
liststyletype none
disc circle square decimal
decimal leadingzero lowerroman upperroman
loweralpha upperalpha lowergreek lowerlatin
upperlatin hebrew armenian georgian
cjkideographic hiragana katakana hiraganairoha
katakanairoha
Seteaza tipul de marcator
<ul style="liststyletype: loweralpha">
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 mouseul se afla
desupra sa
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive
55
<head> <style type="text/css">
a.negru:linktextdecoration: none; color:#405159; a.negru:visitedtextdecoration: none; color:#405159; a.negru:hovertextdecoration: none; color:black;
</style> </head>
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive
56
V.B. Varianta in care se introduc (automat) stilurile in antetul documentului
1. Intre TAGurile <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
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
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive
58
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…”:
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…” – FtpRDS se scriu datele de comunicare cu serverul
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 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
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive
61
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