Documente Academic
Documente Profesional
Documente Cultură
MACROMEDIA DREAMWEAVER
1
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive
CUPRINS
I. Introducere..............................................................................................................................1
2
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive
3
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive
4
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive
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
6
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive
7
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive
8
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive
9
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive
III. C. Inserarea elementelor folosind butonul TAG Chooser din „Insert Bar”
10
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive
Hyperlink
Emaillink
Numele ancorei
11
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive
Tabel
12
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive
13
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive
14
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive
Insereaza date
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
Tabel
Deseneaza un Layer
Permite comutarea intre modurile de vizualizare: Standard, Expandat si Layout
17
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive
18
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive
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> ;
<td><inputname="Input2" type="reset" value="anuleaza"> anuleaza
</form>
</table>
</body>
</html>
20
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive
21
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive
Text ingrosat
Text inclinat
Text ingrosat
Text inclinat
Paragraf
TAB
Text preformatat
Titlu
Lista cu marcatori
Lista numerotata
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.
23
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive
24
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive
Se poate face manual in fereastra „Code”. Mai jos sunt date ca exemple cele mai
uzuale proprietati, cu exemple
25
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive
<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
26
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive
27
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive
28
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive
Alte TAGuri
29
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive
Fig.1
Fig.2
Fig.3
30
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive
Fig.5
31
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive
32
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive
33
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive
34
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive
Poza alternativa
Grosimea bordurii pozei
Alinierea pozei in raport cu celelalte elemente
Aliniere la stanga
Aliniere la centru
Aliniere la dreapta
Numele layerului
Modul de vizualizare
35
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive
Grosimea bordurii
Inaltimea/latimea frameului in pixeli sau procente
Numele frameului
Fig.13
Fig.14
Numele obiectului
Latimea obiectului
Inaltimea obiectului
36
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive
37
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive
TAGurilor li se mai pot aplica proprietati folosind si „TAG Inspector” din „Panel Groups”.
Este facuta o analogie intre capitolele IIIB, IIIC, IIID
38
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive
39
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive
40
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive
41
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive
42
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive
43
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive
44
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive
Fig. 24 Fig. 25
45
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive
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
In fereastra „Code” se plaseaza cursorulin interiorul unui TAG si se editeaza un stil pentru
TAGul respectiv, ca in tabelul de mai jos:
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
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
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
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
58
Curs WEB DESIGN Modul DreamWeaver Noţiuni introductive
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
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