Sunteți pe pagina 1din 61

CursWEBDESIGN

ModulDreamWeaver

Noiuniintroductive

MACROMEDIADREAMWEAVER

LectorSUPURANRICHARDO 1

CursWEBDESIGN

ModulDreamWeaver

Noiuniintroductive

CUPRINS

I. Introducere ..............................................................................................................1 II. Creareaunuidocumentnou/deschidereaunuidocumentexistent ..........................3 III. InserareaelementelorHTML ...................................................................................6 IV. Aplicareaproprietarilorelementelor.......................................................................24 V. AplicareastilurilorininteriorulTAGurilorsauinantetuldocumentului..................46 VI. Verificareacompatibilitiicubrowsere .................................................................57 VII. Salvareadocumentului ..........................................................................................58 VIII. Publicareadocumentului .......................................................................................59

CursWEBDESIGN

ModulDreamWeaver I.A.CeesteHTML?

Noiuniintroductive

HyperText Markup Language (HTML) este un limbaj de marcare utilizat pentru creareapaginilorwebcepotfiafiatentrunbrowser(saunavigator).ScopulHTMLeste mai degrab prezentarea informaiilor paragrafe, fonturi, tabele .a.m.d. dect descriereasemanticiidocumentului. SpecificaiileHTMLsuntdictatedeWorldWideWebConsortium(W3C). HTMLesteoformdemarcareorientatctreprezentareadocumentelortextpeo singura pagin, utiliznd un software de redare specializat, numit agent utilizator HTML, cel mai bun exemplu de astfel de software fiind browserul web. HTML furnizeaz mijloacele prin care coninutul unui document poate fi adnotat cu diverse tipuri de metadateiindicaiideredare.Indicaiilederedarepotvariadeladecoraiuniminoreale textului, cum ar fi specificarea faptului c un anumit cuvnt trebuie subliniat sau c o imagine trebuie introdus, pn la scripturi sofisticate, hri de imagini i formulare. Metadatelepotincludeinformaiidespretitluliautoruldocumentului,informaiistructurale despre cum este mprit documentul n diferite segmente, paragrafe, liste, titluri etc. i informaiicrucialecarepermitcadocumentulspoatfilegatdealtedocumentepentrua formaastfelhiperlinkuri(sauwebul). HTML este un format text proiectat pentru a putea fi citit i editat de oameni utiliznd un editor de text simplu. Totui scrierea i modificarea paginilor n acest fel solicitcunotinesolidedeHTMLiesteconsumatoaredetimp.Editoarelegrafice(detip WYSIWYG) cum ar fi Macromedia Dreamweaver, Adobe GoLive sau Microsoft FrontPagepermitcapaginilewebsafietratateasemntorcudocumeteleWord,darcu observaiacacesteprogramegenereazuncodHTMLcareestedemulteorideproast calitate. HTML se poate genera direct utiliznd tehnologii de codare din partea serverului cum ar fi PHP, JSP sau ASP. Multe aplicaii ca sistemele de gestionare a coninutului, wikiuriiforumuriwebgenereazpaginiHTML. HTMLestedeasemeneautilizatnemail.Majoritateaaplicaiilordeemailfolosesc un editor HTML ncorporat pentru compunerea emailurilor i un motor de prezentare a emailurilordeacesttip.FolosireaemailurilorHTMLesteunsubiectcontroversatimulte listedemailleblocheazintenionat.

CursWEBDESIGN

ModulDreamWeaver I.B.Descriereaprogramului

Noiuniintroductive

Macromedia Dreamweaver este o unealt destinat creatorilor de pagini web. DreamweaverafostcreatdeMacromedia(acumAdobeSystems)imomentanaajunsla versiunea 8. Primele versiuni ale produsului serveau doar ca simple editoare HTML de tipulWYSIWYGdarnversiunilerecenteaufostimplementatefunciideeditareavansate isupportpentrualtetehnologiiwebcumarfiCSS,JavaScriptetc. Dreamweaver sa bucurat de un larg succes nc de la sfritul anilor '90 i momentandeineaproximativ80%dinpiaaeditoarelorHTML.Produsulpoatefirulatpe variate platforme software: Mac,Windows, dar suport nacelai timp i platforme UNIX cuajutorulunoremulatoaresoftware,cumarfiWine. Ca orice alt editor WYSIWYG, Dreamweaver poate ascunde detaliile de implementareapaginilorHTML,fcndastfelposibilcreareacuuurinapaginilorweb dectreutilizatoriineexperimentai. Uniicreatoridepaginiwebcriticacestetipurideeditoaredeoareceproducpagini de dimensiuni mult mai mari dect ar fi necesar, ceea ce conduce la o funcionare neperformant a browserelor web. Aceast afirmaie este n mare parte adevarat deoarece paginile web produse folosesc designul pe baz de tabel. n plus, produsul a mai fost criticat n trecut i pentru producerea de coduri care adesea nu erau conform standardelorW3C,daracestaspectafostmultmbuntitnversiunilerecente.Cutoate acestea, Macromedia a crescut suportulpentru tehnologia CSS precum ialte modaliti dedesignfrafinecesarfolosireadesignuluipebazdetabel. Dreamweaver permite folosirea majoritii browserelor instalate pe calculatorul utilizatorului, pentru a previzualiza websiteul creat. De asemenea conine i cteva utilitarepentruadministrareasiteurilor,cumarficelepentruagsiimodificaunparagraf sau o linie de cod, n ntregul web site, pe baza oricror parametri specificai de ctre utilizator. Cu ajutorul panourilor de stare se poate crea cod JavaScript fr a avea cunotinedeprogramare. Odat cu apariia versiunii MX, Macromedia a ncorporat utilitare de generare dinamicaconinutului.Deasemeneaesteoferitsuportpentruconectarealabazededate (cum ar fi MySQL iMicrosoft Access) pentru a filtra iafia coninutulfolosind scripturi degenulPHP,ColdFusion,ActiveServerPages(ASP)iASP.NET,fraaveanevoiede oprealabilexperiennprogramare. 4

CursWEBDESIGN

ModulDreamWeaver

Noiuniintroductive

UnaspectfoarteludatalDreamweaveruluilreprezintarhitecturasaextensibil. Extensiile, aa cum sunt ele cunoscute, sunt miciprograme, pe care orice dezvoltatorle poate scrie (de obicei n HTML i JavaScript) i pe care oricine le poate descarca i instala, acestea aducnd un spor de performan i funcionalitate mbuntit programului.Existocomunitatededezvoltatoricareproducacesteextensiiilepublic (att comercial ct i gratuit) pentru probleme de deyvoltare web, de la simple efecte rolloverpnlasoluiicompletedevnzareonline.

Versiuni:
Dreamweaver1.0(lansatndecembrie1997 Dreamweaver1.2aurmatnmartie1998) Dreamweaver2.0(lansatndecembrie1998) Dreamweaver3.0(lansatndecembrie1999) DreamweaverUltraDev1.0(lansatniunie2000) Dreamweaver4.0(lansatndecembrie2000) DreamweaverUltraDev4.0(Releaseddecembrie2000) DreamweaverMX(lansatnmai2002) DreamweaverMX2004(lansatn10septembrie,2003) Dreamweaver8(lansatn13septembrie,2005) Dreamweaver9(CreativeSuite3)(lansatn27martie,2007)

Cerintedesistem:
ProcesorIntelPentium4,IntelCentrino,IntelXeonsauIntelCoreDuo(saucompatibil) SistemdeoperareMicrosoftWindowsXPcuServicePack2sauWindowsVistaHome Premium,Business,UltimatesauEnterprise(certificatpentrueditiilepe32debiti) 512MBdeRAM 1GBdespatiuliberpeharddisc Monitorcurezolutiade1024x768cuplacavideope16biti DVDROMdrive ConectarelaInternetsaulinietelefonicanecesarapentruactivareaprodusului ConectarelaInternetnecesarapentruAdobeStockPhotossaualteservicii.

CursWEBDESIGN

ModulDreamWeaver

Noiuniintroductive

II.A.CreareaunuidocumentHTMLcuDreamWeaver

CreareaunuidocumentHTMLcuMacromediaDreamWeaversepoateface folosindunadincele3variante: 1. clicpeStartProgrameMacromediaMacromediaDreamweaver8 2. clicpeiconitaverdedinbaraculansarirapide 3. dubluclicpedesktop,peiconitaverde

CursWEBDESIGN

ModulDreamWeaver

Noiuniintroductive

II.B.DeschidereaunuidocumentHTMLcuDreamWeaver

DeschidereaunuidocumentHTMLsepoatefaceparcurgandurmatoriipasi: 1. sedeschidedirectorulincaresegasestefisierulcareneintereseaza 2. sedaclicdreaptapefisierulrespectiv,sedeschideolistadeoptiuni,din caresealegeEditWithDreamweaver8

CursWEBDESIGN

ModulDreamWeaver III.A.MediulMacromedia

Noiuniintroductive

CursWEBDESIGN

ModulDreamWeaver

Noiuniintroductive

III.B.InserareaelementelorfolosindopiuneaInsertdinmeniulsuperior

ElementeleHTMLseinsereazindocumentfolosindopiuneaInsertdinmeniul superior:

CursWEBDESIGN

ModulDreamWeaver

Noiuniintroductive

III.C.InserareaelementelorfolosindbutonulTAGChooserdinInsertBar

Incazulincareovariantadinceledemaijos:

1. sealegeInsertdinmeniulsuperior,siprimaoptiune, 2. setasteazaCtrlE 3. sefolosestebutonul dinInsertbar

sevadeschideofereastracutoateTAGurilearajatepecategorii:

10

CursWEBDESIGN

ModulDreamWeaver

Noiuniintroductive

III.D.InserareaelementelorfolosindoptiunilesibutoaneledinInsertbar

III.D1.InserareaelementelordinInsertbarDocumenttoolbarCommon

Hyperlink

Emaillink

Numeleancorei

11

CursWEBDESIGN

ModulDreamWeaver

Noiuniintroductive

Tabel

InsereazaunTAGdiv

Insereazaimagini

Insereazao imagine(vezimodululdeFireworks)

12

CursWEBDESIGN

ModulDreamWeaver

Noiuniintroductive

Transformatextulintroimagine

InsereazaunscriptdetipRollOver

InsereazaunfisierFireworks

13

CursWEBDESIGN

ModulDreamWeaver

Noiuniintroductive

Insereazaunscriptcarecreeazameniudinpoze

Insereazaobiecte

Insereazaobiecte

14

CursWEBDESIGN

ModulDreamWeaver

Noiuniintroductive

Insereazadate

IncludeunSideServer

Insereazauncomentariu

OptiuniTemplate

15

CursWEBDESIGN

ModulDreamWeaver

Noiuniintroductive

ColectiadeTAGuri

16

CursWEBDESIGN

ModulDreamWeaver

Noiuniintroductive

III.D2.InserareaelementelordinInsertbarDocumenttoolbarLayout

Tabel

InsereazaunTAGdiv

DeseneazaunLayer Permitecomutareaintremoduriledevizualizare:Standard,ExpandatsiLayout TabelulLayout(activdoarinmodulLayout) DeseneazaocelulaLyout Insereazaunranddeasupraranduluiselectat Insereazaunrandsubrandulselectat 17

CursWEBDESIGN

ModulDreamWeaver

Noiuniintroductive

Insereazaocoloanainstangacoloaneiselectate Insereazaocoloanaindreaptacoloaneiselectate Frameuri listadeoptiuni

ImportaTabulatorData

18

CursWEBDESIGN

ModulDreamWeaver

Noiuniintroductive

III.D3.InserareaelementelordinInsertbarDocumenttoolbarForms

Elementeledinformularulunuidocumentsensoescdeobiceialturidescripturi (programele,aplicaii).Maijosvomfolosiunexempludeinserareaelementelorunui formular:

Codulsursa <html> <body> <tablewidth="340"bgcolor=#CCCCCC> <form action=""method="get"> <captionalign=left>CurriculumVitae</caption> <tr> <td>NumePrenume <td><input name="nume" type="text" value="SupuranRichardo" size="38"> <tr> <td>Sex> <td><input name="sex" type="radio" value="m"checked>Masculin <input type="radio" name="sex"value="f">Feminin <tr> <td>Studii <td><select name="studii"size="1"> <option value="s">Scoalaprofesionala</option> <option value="l">Liceu</option> <option value="f" selected>Facultate</option> </select> <tr>

forma

SupuranRichardo

Masculin Feminin

Facultate

19

CursWEBDESIGN <td>AccesInternet

ModulDreamWeaver

Noiuniintroductive

<td><input name="Serviciu" type="checkbox" value="s" checked> Serviciu <input name="Acasa" type="checkbox" value="a" checked> Acasa <input name="NetCafe" type="checkbox" value="n"> NetCafe <tr> <td>Foto <td><input name="foto" type="file" size="26"> <tr> <td>Observatii <td><textarea name="observatii"cols="30"rows="3"> curswebdesign </textarea> <tr> <td>&nbsp <td><input name="Input2" type="reset" value="anuleaza"> <input name="Input" type="submit" value="trimite"> </form> </table> </body> </html>

Serviciu

Acasa

NetCafe

cursuriw ebdesign

anuleaza

trimite

20

CursWEBDESIGN

ModulDreamWeaver

Noiuniintroductive

Forumaruldemaisusvaaratainbrowsercainimagineademaijos:

21

CursWEBDESIGN

ModulDreamWeaver

Noiuniintroductive

III.D4.InserareaelementelordinInsertbarDocumenttoolbarText

Butoaneledindocumenttoolbartextpermitmodificareaproprietatilortextului: Deschideofereastradeeditareafonturilor Textingrosat Textinclinat Textingrosat Textinclinat Paragraf TAB Textpreformatat Titlu Listacumarcatori Listanumerotata Elementintrolista Listadefinita Termenidefiniti Descriptoridefiniti Abrievieri Acronime Caracterespeciale

22

CursWEBDESIGN

ModulDreamWeaver

Noiuniintroductive

III.E.InserareaelementelorfolosindferestreleCodesiDesigndinDocumenttoolbar

FolosindButonulSplitsepotinseramanualelementeleHTMLdirectinfereastra cucodulsursadesus,iartextulsepoateinserasiinfereastradedesigndejos. ElementeleHTMLsuntprezentateincapitolulIII.B,impreunacuproprietatilelor.

CaracterespecialeinHTML (spatiuliber) &nbsp &copy &euro &cent &#8220 &#8221 &#8240 23

CursWEBDESIGN

ModulDreamWeaver

Noiuniintroductive

IV.A.SelectareaelementelorHTML,pentruaplicareaulterioaraaproprietilor

ExistamaimultemodalitideselecieaelementelorHTML:

1. inFereastraDesigncuunclic/drag&dropcumouseulpeelementuldorit 2. infereastraCodecudrag&drop 3. inTagSelectorclicpeelementuldorit 4. pentruelementeledinantetuldocumentuluisealegeoptiuneaHeaderContentsi butoaneledelanr.5

24

CursWEBDESIGN

ModulDreamWeaver

Noiuniintroductive

IV.B.AplicareamanualaaproprietatilorelementelorHTML

SepoatefacemanualinfereastraCode.Maijossuntdatecaexemplecelemai uzualeproprietati,cuexemple

<HTML></HTML> <html>

(definesteinceputulsisfarsitulfisieruluiweb)

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

<HEAD></HEAD> <html> <head>

(antetulpaginiihtml)

<title>titlu</title> <metahttpequiv="ContentType"content="text/htmlcharset=ISO88592"> <metaname="author"content="numeleautorului"> <metaname="keywords"content="cuvintecheiedespartiteprinvirgula"> <metaname="description"content="descriereasiteului"> </head> <body> ... </body> </html> Fig.1 Fig.2 Fig.3

<BODY></BODY> <html>

(corpulpaginiihtml)

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

Fig.4

25

CursWEBDESIGN <DIV></DIV> <html> <body> <div align="center"> . </div>

ModulDreamWeaver

Noiuniintroductive

(divizareinblocuricuanumiteproprietatidefinite)

Fig.5

<FONT></FONT> <html> <body>

(specificaatributeleunuitext:marime,culoare,model)

<font color="red" size="+3"></font>

Fig.4

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

<IMG> <html>

(imagine)

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

<LAYER> (casetaaplicat)sau <ILAYER> (casetaaplicatindependenta) <html> <body> <layer bgcolor="gray"height="450"left="4"pagex="10"pagey="0"top="10" visibility="show"width="380">....</layer> Fig.10

26

CursWEBDESIGN

ModulDreamWeaver

Noiuniintroductive

<FRAMESET><FRAME><FRAME></FRAMESET> fiecarecontinandaltfisier) <frameset cols="200,*">

(impartefereastrainmaimultesubferestre,

Fig.11 Fig.12

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

<IFRAME></IFRAME> unaltfisier) <html> <body>

(casetaincadrataincorpulpaginiiincadrulcareiasedeschideautomat

<iframe height="410"scrolling="auto"src="01.html"width="620"marginheight="0" marginwidth="0"> </iframe>

Fig.4,15

<LI></LI> <html> <body>

(listenumerotatesaumarcate)

<ol>(sau<ul>) <li>rosu</li> <li>galben</li> <li>verde</li> </ol>(sau</ul>)

Fig.4,16,17 Fig.18

<AHREF></A> <html> <body>

(marcajdetipancora)

Fig.4,19

<a href="http://www.google.ro" target="dreapta">pozaalbnegru</a>

27

CursWEBDESIGN <EMBED></EMBED> <html> <body>

ModulDreamWeaver (marcajdetipancora)

Noiuniintroductive

<embed src="buton.swf"quality="high"type="application/xshockwaveflash" width="61"height="34"></embed>

Fig.14,20

28

CursWEBDESIGN

ModulDreamWeaver AlteTAGuri

Noiuniintroductive

<!acestaesteuncomentariu > <br> <hr> <p></p> <h1></h1>

Comentariu(aparedoarinsursa,nusiinbrowser)

(trecerelarandnou) (linieorizontala) Lasaodistantaintrerandurilemarcatecup

Fig.21 Fig.13,22 Fig.23

Formattitlu(h1celmaimareformat.h6 celmaimic Fig.24 format)

<i></i>sau<em></em> <b></b>sau <strong></strong>

text Textinclinat text Textingrosat

Fig.25

<u></u>sau<ins></ins> text Textsubliniat <del></del> sau<strike></strike> 5<sup>2</sup> a<sub>2</sub> <blockquote>.</blockquote>


2 5

text Texttaiat

Indici superiori Indiciinferiori Indenteazaunblocspredreaptafatademarginea

a2

. stangaaelementuluicareilcontine <pre></pre> 1 Textulafisatrespectaformatextuluiscrisinsursa(spatii

23 libere,trecerepealtrand) <nobr></nobr> <caption></caption> Previnetrecerealarandulurmatorlacapatulliniei Titlultabelului,dacaeplasatintreTAGultablesi primulTAGtr <marquee></marque> Textanimat,caresedeplaseazasingurdeladreaptala stanga

29

CursWEBDESIGN

ModulDreamWeaver

Noiuniintroductive

IV.C.AplicareaautomataaproprietatilorTAGurilorfolosindPropertyInspector

seface,folosindPropertyInspector: 1. seselecteazaelementullacaredorimsaiaplicamoproprietate 2. seapasabutonuldinPropertyInspectorcarecorespundeproprietatiidorite,cain imaginiledemaijos (estefacutaoanalogiecucapitolulIII.A)

Fig.1

Fig.2

Fig.3

Formatedetext,titlu Modeledefonturi Stiluridefinitedefonturi Fig.4 Marimeatextului DeschidePanelsGrouppentruscripturicss Definesteunstilcssptcolorareatextului Textingrosat<strong>sau<b> Textinclinat<em>sau<i> Alinierelastanga(align=left) Alinierelacentru(align=center) Aliniereladreapta(align=right)

30

CursWEBDESIGN

ModulDreamWeaver

Noiuniintroductive

Alinierelastangastanga(align=justify) Listacumarcatori:<ul><li> Listanumerotata:<ol><li> Indent<blockquote> Reducereindent:<\blockquote> Ancora,link:<ahref="www.ajofm.ro"> Loculincaresedeschideurmatoareapagina Deschideofereastracarecreeazastilulpaginii

Fig.5

Numarulderanduriintabel Numaruldecoloaneintabel Latimeainpixeliatabelului Inaltimeainpixeliatabelului Distantadelacontinutulcelulelorlaborduri Distantaintrecelule Fig.6 Aliniereaincadrulcelulelor Grosimeaborduriitabelului Anuleazalatimeaimpusatabelului Convertestelatimeaactualaatabeluluiinpixeli Convertestelatimeaactualaatabeluluiinprocente Anuleazainaltmeaimpusatabelului Convertesteinaltimeaactualaatabeluluiinpixeli Convertesteinaltimeaactualaatabeluluiinprocente Culoareadefundalatabelului Aplicaoimaginecafundalaltabelului 31

CursWEBDESIGN

ModulDreamWeaver Culoareaborduriitabelului Aplicaclasedestiluritabelului

Noiuniintroductive

Formatedetext,titlucontinutuluiranduluiselectat Modeledefonturiaplicateranduluiselectat Stiluridefinitedefonturidinrandulselectat Marimeatextuluidinrandulselectat DeschidePanelsGrouppentruscripturicss | Culoareatextuluidinrandulselectat Textingrosat<strong>sau<b>inrandulselectat Textinclinat<em>sau<i>inrandulselectat Alinierelastangainrandulselectat Alinierelacentruinrandulselectat Fig.7 Aliniereladreaptainrandulselectat Alinierelastangastangainrandulselectat Listacumarcatori:<ul><li>inrandulselectat Listanumerotata:<ol><li>inrandulselectat Indent<blockquote>inrandulselectat Reducereindent:<\blockquote>inrandulselectat Transformarandulselectatinancora,link Loculincaresedeschideurmatoareapagina Unesteceluleleselectate Deschidefereastracaredivideceluleleselectate Aliniereapeorizontalaacontinutuluicelulelor Aliniereapeverticalaacontinutuluicelulelor | | Latimeafiecareiceluleselectate Inaltimeacelulelorselectate Impedicatrecereaperandulurmatorincelule 32

CursWEBDESIGN

ModulDreamWeaver

Noiuniintroductive

Transformaceluleleincapdetabel Aplicaimaginedefundalcelulelorselectate | | Culoareadefundalcelulelorselectate Culoareaborduriicelulelorselectate Deschideofereastracarecreeazastilulpaginii

Formatedetext,titlucontinutuluicoloaneiselectate Modeledefonturiaplicatecoloaneiselectate Stiluridefinitedefonturidincoloanaselectate Marimeatextuluidincoloanaselectata DeschidePanelsGrouppentruscripturicss | Culoareatextuluidincoloanaselectata Textingrosat<strong>sau<b>incoloanaselectata Textinclinat<em>sau<i>incoloanaselectata Alinierelastangaincoloanaselectata Fig.8 Alinierelacentruincoloanaselectata Aliniereladreaptaincoloanaselectata Alinierelastangastangaincoloanaselectata Listacumarcatori:<ul><li>incoloanaselectata Listanumerotata:<ol><li>incoloanaselectata Indent<blockquote>incoloanaselectata Reducereindent:<\blockquote>incoloanaselectata Transformarandulselectatinancora,link Loculincaresedeschideurmatoareapagina Unesteceluleleselectate Deschidefereastracaredivideceluleleselectate Aliniereapeorizontalaacontinutuluicelulelor Aliniereapeverticalaacontinutuluicelulelor 33

CursWEBDESIGN | |

ModulDreamWeaver Latimeafiecareiceluleselectate Inaltimeacelulelorselectate

Noiuniintroductive

Impedicatrecereaperandulurmatorincelule Transformaceluleleincapdetabel Aplicaimaginedefundalcelulelorselectate | | Culoareadefundalcelulelorselectate Culoareaborduriicelulelorselectate Deschideofereastracarecreeazastilulpaginii

Numelepozei(poatediferidenumelefisierului)

Latimeaimpusapozei Inaltimeaimpusapozei Preiadimensiunileinpixelialepozei,incazulincare elenusuntdefinite Loculincaresegasestefisierul(poza) Fig.9 Textulalternativ Aplicareauneiclase Transformapozaintroancora,link DeschideFireworkspentrueditareapozei OptimizeazapozainFireworks Decupeazaoportiunedinpoza Refacepoza Modificaluminozitateasicontrastulpozei Intaresteconturulimaginiidinpoza Numelehartiiaplicatepozei Activeaza/dezactiveazauneltelesagetiiactive Deseneazaundreptunghiactivpepoza 34

CursWEBDESIGN

ModulDreamWeaver

Noiuniintroductive

Deseneazauncercactivpepoza Deseneazaunconturinchis,activpepoza Spatiulvertialrezervat Spatiulorizontalrezervat Loculundesedeschidepaginalaunclicpepoza Pozaalternativa Grosimeaborduriipozei Aliniereapozeiinraportcucelelalteelemente Alinierelastanga Alinierelacentru Aliniereladreapta

Numelelayerului Distantafatademargineadinstangadocumentului Distantafatademargineadesusadocumentului Latimealayerului Inaltimealayerului Ordineadesuprapunereastraturilor Fig.10 Moduldevizibilitate Imagineadefundalalayerului Culoareadefundalalayerului Clasadeproprietatidincarefacepartelayerul Moduldevizualizare Cliprectangleleft(optional) cliprectangleright(optional) Cliprectangletop(optional) Cliprectanglebottom(optional)

35

CursWEBDESIGN

ModulDreamWeaver

Noiuniintroductive

Fig.11

Bordura3Dintreframeuri Culoareabordurii Grosimeabordurii Inaltimea/latimeaframeuluiinpixelisauprocente

Numeleframeului Adresasinumelefisieruluidinframe Fig.12 afisarea/ascundereabariidenavigareverticale Permite/nupermiteredimensionareaframeului Borduraframeului Culoareaborduriiframeului Marginealatimiiframeului Margineainatimiiframeului

Fig.13

Fig.14 Numeleobiectului Latimeaobiectului Inaltimeaobiectului 36

CursWEBDESIGN

ModulDreamWeaver

Noiuniintroductive

NumelesiadresafisieruluiSWF Numeleferestrei Editeazaobiectul Reseteazadiensiunileobiectului Aplicaoclasadeproprietati Aducepointerulpepozitia0dupaanimatie Ruleazaanimatiaautomat Spatiulpeverticala Spatiulpeorizontala Calitateacucareseincarcaobiectulinpagina Scalareaobiectului Alinierea Culoareadefundal Previzualizareaanimatiei Editeazaparametriiobiectului

37

CursWEBDESIGN

ModulDreamWeaver

Noiuniintroductive

IV.D.AplicareaautomataaproprietatilorTAGurilorfolosindTAGInspector

TAGurilorlisemaipotaplicaproprietatifolosindsiTAGInspectordinPanelGroups. EstefacutaoanalogieintrecapitoleleIIIB,IIIC,IIID

Fig.1

Fig.2Fig.3

38

CursWEBDESIGN

ModulDreamWeaver

Noiuniintroductive

Fig.4Fig.5

Fig.6

39

CursWEBDESIGN

ModulDreamWeaver

Noiuniintroductive

Fig.7Fig.8Fig.9

40

CursWEBDESIGN

ModulDreamWeaver

Noiuniintroductive

Fig.10Fig.11Fig.12

41

CursWEBDESIGN

ModulDreamWeaver

Noiuniintroductive

Fig. 15Fig.16Fig.17

42

CursWEBDESIGN

ModulDreamWeaver

Noiuniintroductive

Fig.18

Fig.19

Fig.20

43

CursWEBDESIGN

ModulDreamWeaver

Noiuniintroductive

Fig.21Fig.22

Fig.23

44

CursWEBDESIGN

ModulDreamWeaver

Noiuniintroductive

Fig.24

Fig.25

45

CursWEBDESIGN

ModulDreamWeaver

Noiuniintroductive

V.StilurilecelormaiuzualeTAGuridinHTML

DacanuvasuntsuficienteproprietatilepecarevileoferaTAGurilesaudacadoritio personalizarepentrutoateelementeleHTMLdineeasicategoriedeelemente,putetiaplicacolectii destiluri. StilurilesepotaplicaininteriorulTAGuluicaredefinesteelementulHTMLsauinantetul documentului.

46

CursWEBDESIGN

ModulDreamWeaver

Noiuniintroductive

V.A.VariantaincareseintroducmanualstilurileininteriorulTAGurilor

InfereastraCodeseplaseazacursorulininteriorulunuiTAGsiseediteazaunstilpentru TAGulrespectiv,caintabeluldemaijos: Proprietate Valoare Scurtdescriere

1. BACKGROUND(fundal) background background color background image background repeat background attachment background position background attachment scroll fixed Stabiletefaptulcopozdepefundalrmnefixsausemic odatconinutul <bodystyle="backgroundimage:url(poza.jpg) background attachment:scroll> background color colorrgb colorhex colornume transparent background image background position url none topleft topcenter topright centerleft centercenter centerright bottomleft 47 SeteazoimaginepefundalulelementuluiHTML <bodystyle="backgroundimage:url(poza.jpg)"> Seteazloculdeundencepepoziionareapozeidepefundal <bodystyle="backgroundimage:url(poza.jpg) background position:3em2em"> <tablestyle="backgroundimage:url(poza.jpg) background position:righttop"> SeteazculoareadefundalaunuielementHTML <tdstyle="backgroundcolor:green"> <bodystyle="backgroundcolor:#999999"> Oproprietatecucaresepotsetatoatevaloriledebackground <bodystyle="background:url(poza.jpg)fixedlefttop"> <tablestyle="background:blue">

CursWEBDESIGN bottomcenter bottomright x%y% xposypos background repeat repeat repeatx repeaty norepeat

ModulDreamWeaver

Noiuniintroductive

Seteazmodulcum/dacserepetoimaginepefundal <bodystyle="backgroundimage:url(poza.jpg) background repeat:repeaty"> <tablestyle="backgroundimage:url(poza.jpg) background repeat:norepeat">

2. TEXT color color Seteazculoareaunuitext <bodystyle="color:red"> direction ltr rtl Seteazdireciadescriere: ltr=stngaladreaptasi rtl=dreaptala stnga <bodystyle="direction:rtl"> letterspacing normal length textalign left right center justify textdecoration none underline overline linethrough blink textindent Lungimepx % Indenteaz(deplaseazalastangasaudreapta)primaliniedintrun elementHTML <divstyle="textindent:3em"> texttransform none capitalize uppercase lowercase Controleazmoduldeafiarealiterelorunuitext:cuMAJUSCULE <divstyle="texttransform:capitalize"> <divstyle="texttransform:uppercase"> <divstyle="texttransform:lowercase"> 48 Adaugdecorritextului <divstyle="textdecoration:overline"> Mretesaumicoreazspaiul dintrelitere <divstyle="letterspacing:5em"> Aliniaztextuldintrunelementhtml <divstyle="textalign:justify">

CursWEBDESIGN wordspacing normal length 3. FONT(modelalfabet) font fontstyle fontvariant fontweight fontsize/line height fontfamily caption icon menu messagebox smallcaption statusbar fontfamily familyname genericfamily

ModulDreamWeaver

Noiuniintroductive

Mretesaumicoreazspaiuldintrecuvinte <divstyle="wordspacing:4em">

Oproprietatecucaresepotdefinintrosingurdeclaraietoate proprietilefontului <divstyle="font:italicsmallcapsbolder2em/3emArial">

Olistdenumedefonturicaresevorutilizadacexistpemaina pecareruleazbrowserulnordineastabilit <tablestyle="fontfamily:tahoma,verdana,arial>

fontsize

xxsmall xsmall small medium large xlarge xxlarge smaller larger mrime %

Seteazdimensiuneafontului <divstyle="fontsize:large"> <divstyle="fontsize:2em"> <divstyle="fontsize:11"> <divstyle="fontsize:150%">

fontstretch

normal wider narrower ultra

Specificmoduldecondensareatextului <emstyle="fontstretch: extraexpanded">

49

CursWEBDESIGN condensed extra condensed condensed semi condensed semiexpanded expanded extraexpanded ultraexpanded fontstyle normal italic oblique fontvariant normal smallcaps fontweight normal bold bolder lighter 100 200 300 400 500 600 700 800 900 4. BORDER(borduri) border borderwidth borderstyle bordercolor borderbottom borderbottom

ModulDreamWeaver

Noiuniintroductive

Seteazstilul descriere <pstyle="fontstyle:italic">

AfieaztextulcuCAPITALEMICIsaunormal <pstyle="fontvariant:smallcaps"> Seteazgrosimeafontului <pstyle="fontweight:400"> <pstyle="fontweight:lighter">

Oproprietatepentrusetareacelor3proprietatiintrosinguralinie <tdstyle="border:thickdoublered"> <tdstyle="border:red"> Oproprietatepentrusetareaintrosinguradeclarareaproprietatilor 50

CursWEBDESIGN width borderstyle bordercolor borderbottom color borderbottom style borderbottom width thin medium thick dimensiune bordercolor Color Borderstyle Bordercolor

ModulDreamWeaver pentrumargineadejos

Noiuniintroductive

<tablestyle="borderbottom:thindouble#999999"> <tdstyle="borderbottom:2emridgegray"> Seteazaculoareamarginiidejos <tdstyle="borderbottomcolor:yellow"> Seteazastilulmarginiidejos <bodystyle="borderbottomstyle:dashed"> Seteazagrosimeamarginiidejos <tableborder="1"style="borderbottomwidth:medium">

Seteazaculoareacelor4margini(susdreaptajosstanga) poate aveapanala4culori <bodystyle="bordercolor:bluemagentagreenindigo"> <bodystyle="bordercolor:indigo">

borderleft

borderleftwidth Oproprietatepentrusetareatuturorprorpietatilorpentrumarginea borderstyle bordercolor dinstangaintrosinguradeclarare <tdstyle="borderleft:thickdottedblue"> Seteazaculoareamarginiidinstanga <tdstyle="borderleftcolor:red">

borderleftcolor bordercolor

borderleftstyle

borderstyle

Seteazastilulmarginiidinstanga <tdstyle="borderleftstyle:outset">

borderleftwidth thin medium thick length borderright borderright width borderstyle bordercolor borderright color borderright borderstyle bordercolor

Seteazagrosimeamarginiidinstanga <tdstyle="borderleftwidth:3em">

Oproprietatepentrusetareatuturorprorpietatilorpentrumarginea dindreaptaintrosinguradeclarare <tdstyle="borderright:thickdottedblue">

Seteazaculoareamarginiidindreapta <tdstyle="borderrightcolor:red"> Seteazastilulmarginiidindreapta 51

CursWEBDESIGN style borderright width thin medium thick dimensiune borderstyle none hidden dotted dashed solid double groove ridge inset outset bordertop

ModulDreamWeaver <tdstyle="borderrightstyle:outset"> Seteazagrosimeamarginiidindreapta <tdstyle="borderrightwidth:3em">

Noiuniintroductive

Seteazastilulcelor4marginiintrosinguradeclaratie(susdreapta josstanga) <tableborder="1"style="borderstyle:doublenonenonenone">

bordertopwidth Oproprietatepentrusetareatuturorprorpietatilorpentrumarginea borderstyle bordercolor desusintrosinguradeclarare <tdstyle="bordertop:thickdottedblue"> Seteazaculoareamarginiidesus <tdstyle="bordertopcolor:red">

bordertopcolor bordercolor

bordertopstyle borderstyle

Seteazastilulmarginiidesus <tdstyle="bordertopstyle:outset">

bordertopwidth thin medium thick dimensiune borderwidth thin medium thick dimensiune 5. MARGINI margin margintop marginright

Seteazagrosimeamarginiidesus <tdstyle="bordertopwidth:3em">

Seteazagrosimeacelor4marginiintrosinguradeclaratie(sus dreaptajosstanga) <tdstyle="borderwidth:thinmedium2em1em">

Oproprietatecareseteazacelepatrumarginiintrosingura declarare(susdreaptajosstanga) 52

CursWEBDESIGN marginbottom marginleft marginbottom auto dimensiune % marginleft auto dimensiune % marginright auto dimensiune % margintop auto dimensiune % 6. PADDING padding paddingtop paddingright paddingbottom paddingleft paddingbottom dimensiune % paddingleft length % paddingright length % paddingtop length % 7. LISTE liststyle liststyletype

ModulDreamWeaver

Noiuniintroductive

<bodystyle="margin:2em1em3em4em">

SeteazamargineadejosaunuielementHTML <tdstyle="marginbottom:3em">

SeteazamargineadinstangaaunuielementHTML <tdstyle="marginleft:3em">

SeteazamargineadindreaptaaunuielementHTML <tdstyle="marginright: 3em">

SeteazamargineadesusaunuielementHTML <tdstyle="margintop:3em">

Oproprietatecareseteazaintrosinguradeclararetoatedistantele fata demarginialeunuielementHTML(susdreaptajosstanga) <tdstyle="padding:1em4em3em2em">

SeteazadistantadelamargineadejosaelementuluiHTML <tdstyle="paddingbottom:2em"> Seteazadistanta delamargineadinstangaaelementuluiHTML <tdstyle="paddingleft:2em"> SeteazadistantadelamargineadindreaptaaelementuluiHTML <tdstyle="paddingright:2em"> Seteazadistantadelamargineadesus aelementuluiHTML <tdstyle="paddingtop:2em">

Oproprietatecaresteazaintrosinguradeclararetoateceletrei

liststyleposition proprietati liststyleimage <listyle="liststyle:upperromaninside"> <listyle="liststyle:url(images.jpg)outside"> liststyleimage none Seteazacamarcatordelistoimagine 53

CursWEBDESIGN url liststyleposition inside outside

ModulDreamWeaver

Noiuniintroductive

<listyle="liststyleimage:url(images.jpg)"> Stabilestepozitiamarcatoruluidelista:ininteriorulsauexteriorul acesteia <ul><listyle="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

Seteazatipuldemarcator <ulstyle="liststyletype:loweralpha">

8. A(ANCORE) A Active Hover Link Visited active Adaugaunstilspecialunuilinkselectat link Adaugaunstilspecialunuilinknevizitat visited Adaugaunstilspecialunuilinksvizitat hover Adaugaunstilspecialunuilinkcandmouseulseafla desuprasa

54

CursWEBDESIGN

ModulDreamWeaver

Noiuniintroductive

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

55

CursWEBDESIGN

ModulDreamWeaver

Noiuniintroductive

V.B.Variantaincareseintroduc(automat)stilurileinantetuldocumentului

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,cainimagineadejossisedeschidedinPanelGroup sectiuneaCSS 4.Seactiveazamoduldevizualizareastilurilorpecategorii,folosindbutonul 4.PefiecareelementHTML,inparte,sepotaplicastilurileposibilepentruelementulrespectiv

56

CursWEBDESIGN

ModulDreamWeaver

Noiuniintroductive

VI.Verificareacompatibilitiicubrowserele Indocumenttoolbarsefolosestebutonul pentruverificareaerorilorde

compatibilitatecubrowserelesioptiuneaCheckBrowserSupport:

Erorilesevorafisainparteadejosaecranului(incazulnostrualign=left),iarin codulsursaelevorfisubliniataculinierosie

57

CursWEBDESIGN

ModulDreamWeaver VII.Salvareaipublicareadocumentului

Noiuniintroductive

Dacasedorestedoarsalvareasiteuluipestatiadelucru(decinupublicareaeipe server),seutilizeazadinmeniulFile,optiuneaSavesauSaveAs:

58

CursWEBDESIGN

ModulDreamWeaver VIII.Publicareadocumentului

Noiuniintroductive

Incazulincareexistaundomeniucreat(ex:www.ajofm.ro)siesteconfigurataocale detransfer(FTP)peserver,sepoatefacepublicareadocumentului(salvarealuidirectpe server)parcurgandurmatoriipasi:

1. dinPanelGroupssealegesectiuneaFiles,iardinsectiuneaFilessealegeoptiunea Files 2. Butonul Manage Sites va deschide o fereastra pentru definirea coordonatelor serverului 3. cubutonulNewFtpRDSsescriudateledecomunicarecuserverul

59

CursWEBDESIGN

ModulDreamWeaver

Noiuniintroductive

4. Secompleteazaperanddatele 5. SetesteazacubutonulTestconexiunea,cainfigurademaijos

6. Dacaaparemesajulcainimagineademaijos,inseamnacasastabilitcusucces conexiuneacuserverul

7. ApasampebutonulOK,OK 8. InfereastraManageSitesapasampebutonulDone 9. Asteptamindreaptasaaparastructuradefolderesifisieredepeserver

60

CursWEBDESIGN

ModulDreamWeaver

Noiuniintroductive

Publicareasefaceacumaproapecaosalvaresimpla:inmeniulsuperiorclicpeFileSave toRemoteServersisealegedirectorulincaresevafacesalvarea,dupacaresedaclic pebutonulSave

61