suport curs dreamweaver

Click here to load reader

Post on 15-Feb-2015

88 views

Category:

Documents

8 download

Embed Size (px)

DESCRIPTION

Suport Curs Dreamweaver

TRANSCRIPT

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

2

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.

3

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.

5

CursWEBDESIGN

ModulDreamWeaver

Noiuniintroductive

II.A.CreareaunuidocumentHTMLcuDreamWeaver

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

6

CursWEBDESIGN

ModulDreamWeaver

Noiuniintroductive

II.B.DeschidereaunuidocumentHTMLcuDreamWeaver

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

7

CursWEBDESIGN

ModulDreamWeaver III.A.MediulMacromedia

Noiuniintroductive

8

CursWEBDESIGN

ModulDreamWeaver

Noiuniintroductive

III.B.InserareaelementelorfolosindopiuneaInsertdinmeniulsuperior

ElementeleHTMLseinsereazindocumentfolosindopiuneaInsertdinmeniul superior:

9

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 Permitecomutareaintremoduriledevizualiz