Personalekursus i Dreamweaver 3 Vejledning Velkommen til personalekursus Dreamweaver 3 på RUC Det er ingen hemmelighed, at vi skal nå meget stof på relativ kort tid, så det kan være i vil føle at vi går lidt hurtigt frem i teksten. For at råde bod på det har vi skrevet disse papirer, der dels indeholder en lille vejledning med oplysninger om de emner vi kommer til at beskæftige os med i forbindelse med den 1.kursusgang. Det er tanken at vejledningen skal fungere som en lille igangsætningshåndbog, når i skal til at arbejde med Dreamweaver og HTML alene. Vi har også gjort lidt ud af at finde forslag til anden litteratur om HTML og Dreamweaver. En af de bedste og mest praktiske ressourcer er faktisk internettet selv. På internettet ligger oceaner af materiale om HTML og for dem der er interesserede i at arbejde videre med programmeringen selv (og det vil vi kraftigt anbefale), vil vi ved afslutningen af kurset give et par tips til, hvordan man kommer videre. Kritik af vejledningen imødekommes med glæde! God fornøjelse Med venlig hilsen Jakob og Jens
HTML-dokumentets opbygning Alle opmarkeringer har en startkode <> og en slutkode </>. Eksempelvis angives koden for fed skrift <B></B>. Teksten mellem start- og slutkoden bliver til fed skrift: <B>Denne tekst er fed</b> Sådan her ser ser koden ud for et helt nyt dokument i Dreamweaver: (Bemærkningerne efter bindestregen er vores tilføjelser og vises ikke i dokumentet!) <html> - Fortæller browseren at det er et HTML-dokument <head> - Dokumenthoved <title>untitled Document</title> - Dokumentets titel <meta http-equiv="content-type" content="text/html; charset=iso- 8859-1"> - Metatags </head> - Slukode for dokumenthoved <body bgcolor="#ffffff"> - startkode for body-sektion Mellem body-tagsene indsættes sidens indholde; tekst, billeder, tabeller m.m. </body> - slutkoden for body </html> - Slutkode for HTML-dokumentet Opmarkeringer; tags og metatags Simple tags Bold Itallic Underline Strikethrough Teletype Code Variabel Sample Keyboard Citation Definition <b>bold</b> <i>itallic</i> <u>underline</u> <strike>strikethrough</strike> <tt>teletype</tt> <code>code</code> <var>variabel</var> <samp>sample</samp> <kbd>keyboard</kbd> <cite>citation</cite> <dfn>definition</dfn>
Font Size="-1"; "-2" <p><font size=-1>font Size="-1";</font><font size=-2>"-2"</font> Font Size="+1"; "+2" <p><font size=+1>font Size="+1";</font> <font size=+2>"+2"</font> Superscript sample Subscript sample Blink (kun i Netscape) <p>superscript<sup>sample</sup> <p>subscript<sub>sample</sub> <p><blink>blink</blink> (kun i Netscape) align center <div align="center">align center </div> align right <p align="right">align right</p> align left <p align="left">align left</p> Unordered list (bulletted) <ul> <li>unordered list(bulletted)</li> </ul><ol> 1. Ordered list <ol><li>ordered list</li></ol> Description list Outdent Directory list Menu list Indent font face="arial,helvetica, sans-serif" font color="#ff0000" <dl>description list</dl> <dir><li>directory list</li></dir> <menu><li>menu list</li></menu> <p>outdent <blockquote>indent</blockquote> <font face="arial, Helvetica, sans-serif">font face="arial, Helvetica, sans-serif"</font> <font face="arial, Helvetica, sans-serif"><font
(dvs. RØD i RGB-koder på 256 trin skala) Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6 color="#ff0000">font color="#ff0000"</font> (dvs. RØD i RGB-koder på 256 trin skala)</font> <h1>heading 1</h1> <h2>heading 2</h2> <h3>heading 3</h3> <h4>heading 4</h4> <h5>heading 5</h5> <h6>heading 6</h6> Metatags Metatags indstættes i HTML-dokumentets HEAD-sektion og vises derfor ikke i browservinduet; det er så at sige skjulte oplysninger om dokumentet, som søgemaskiner bruger til at indeksere siderne med. <meta name="author" content="jens Justesen"> <meta name="keywords" content="personalekursus, Dreamweaver"> <meta name="description" content="denne side er "> Programmet Dreamweaver 3 Dreamweaver er HTML-editor et program til konstruktion af websiter til internettet (filer med endelsen.htm). En HTML-editor minder på mange måder om et almindeligt tekstbehandlingsprogram, dvs. man kan skrive tekst med programmet, vælge bestemte skrifttyper, indsætte billeder osv. Dreamweaver er en såkaldt WYSIWYG-editor, hvilket vil sige, at det man ser på skærmen, stort set er det samme som resultatet, når det vises i en browser ( en browser er et program til visning af indholdet af et HTML-dokument m.m. Internet Explorer og Netscape er eksempler på de mest udbredte browsere). Dette har den fordel, at man ikke selv behøver skrive så mange sætninger med besværlig kode. Hovedvinduet i Dreamweaver er dokumentvinduet. Det er her tekst og billeder m.m. indsættes. Hver gang man foretager sig noget i dokumentvinduet, eksempelvis indsætter en tekst, ændrer tekststørrelsen eller laver et lille tekststykke om til et link, så ændrer man samtidig i et bagvedliggende dokument det egentlige HTML-dokument. Dreamweaver sørger simpelthen for at indsætte de rigtige koder, der får tekster og billeder til at fremstå som man gerne vil have det. Kodedokumentet vises på skærmen ved tryk på F10, men det er i dokumentvinduet det meste af arbejdet vil foregå.
De andre vinduer vil blive gennemgået hen af vejen i forbindelse med arbejdet, så der er ingen grund til at bekymre sig om de mange knapper og symboler. Tekst og tekstformatering Brugen af tekst i en HTML-editor adskiller sig ved at man definerer relative tekststørrelser for sin tekst, frem for absolutte punktstørrelser (OBS: tekst kan også derfineres absolut i HTML-editoren, men bliver fremvist i browseren i en slags relativ form) som man kender det fra tekstbehandlingsprogrammer. I Dreamweaver styres stort set alle ændringer og typografiske funktioner på den skrevne tekst i vinduet properties: Window! Properties el. (Ctrl+F3). Ændringer foretages ved at markere teksten i dokumentvinduet og derefter klikke på den ønskede funktion i properties. Billeder og billedformater Billeder indlejres i form af reference til grafik-fil uden for HTML-dokumentet. De to altdominerende billedformater, der bruges på internettet, er gif- og jpeg-formaterne Gif-billeder (8-bit farvedybde; 256 forskellige vilkårlige farver) anvendes fortrinsvis til små simple illustrationer samt animationer. 216 Websikre farver, transparente billeder. Jpeg-billeder (24-bit farvedybde; ca. 16 mio. farver) anvendes til primært til større mere detaljerede billeder såsom fotografier og lignende. Billeder fylder meget og man skal derfor være opmærksom på at billeder har stor indflydelse på hvor hurtigt websiten femkommer i brugerens browser (download-tiden øges jo mere grafik der er på siden). Når man har fundet de billeder man gerne vil ligge på sin website, og har behandlet dem i et billedbehandlingsprogram (eksempelvis Photoshop), er det forholdvis nemt at sætte dem ind i sit HTML-dokument. Man markerer det sted i dokumentet billedet skal placeres vælger i menuen insert! image. Herefter markeres det billede man vil indsætte. Export til GIF-format i Photoshop. Oprettelse af ImageMap i Dreamweaver. Tabeller En tabel består af rækker og kolonner. Man kan bruge tabeller til at strukture indholdet på websiten, udover til præsentation af bestemte typer data såsom en tidsplan eller navneliste. HTML-formatet kender ikke begrebet spalter
I Dreamweaver oprettes tabeller via Insert! Table (Ctrl+Alt+T), hvorefter man selv definerer antallet af rækker og kolonner m.m. i den fremkomne dialogboks. Når tabellen er oprettet kan udseende ændres ved hjælp af træk og slip med musen, og ved hjælp af properties-vinduet. Husk at tabellen skal markeres med musen før den kan ændres. Her er højreklik på musen et stærkt værktøj. Links (lænker, ankre) Både tekst, billeder eller udsnit af billeder (imagemaps) kan laves om til links dvs. referencer til andre HTML-dokumenter. Man skelner mellem fire typer links: 1. Eksterne links (http-protekollen) Henviser til et dokument udenfor webserver hvor nærværende dokument er uploadet. Eksempel: Henvisning til ex.vis Miljø- og energiministeriets side med udgivelser: http://www.mem.dk/publikationer/index.htm 2. Interne links (fil-henvisning) Henviser til et andet dokument på egen website, som ligger i et andet bibliotek Eksempel: Henvisning fra http://www.minwebsite/bilen/motoren/olieskift.htm til http://www.minwebsite/huset/loftet/julepynt.htm ved http://../../huset/loftet/julepynt.htm 3. Dokument-relative links Henviser til et dokument på egen website, som ligger i samme bibliotek. Eksempel: http://www.minwebsite/opskrifter/lasagne.htm. Hvis man har en henvisning på siden lasagne.htm til siden pizza.htm og pizza.htm ligger i samme bibliotek (opskrifter) som lasagne.htm behøver man kun skrive pizza.htm som link. 4. Navngivet sted i et dokument Henviser til et navngivet sted (named anchor #) på et bestemt sted på siden, eller til et bestemt sted på en anden website. Eksempel: http://www.minwebsite.htm#minhund eller http://www.minwebsite.htm/minbrors.htm#brorshund
Placering og navngivning af anker i Dreamweaver: Markøren placeres i dokumentvinduet på det sted man vil indføre sit navngivne anker. I menuen vælges Insert! Named Anchor. I vinduet skriver man navnet anker. Hvis et tekststykke længere oppe i teksten skal henvise til dette sted i dokumentet, markeres teksten, hvorefter man indsætter en havelåge (#) og navnet på ankeret i properties-vinduets Link -felt. Obs! Et billede kan også henvise til et navngivet anker længere nede i dokumentvinduet. Ved indsættelse af links bestemmer man, hvordan referecen skal vises ved hjælp af TARGETattributten. Man kan f.eks. vælge om siden skal vises i et nyt browservindue (_blank) eller om det skal åbnes i det samme vindue som som detforegående (_self). Når man indfører et link skal man først markere den tekst eller det billede, der skal fungere som link. Derefter indsætter man linket i properties-vinduet. Imagemaps er en mulighed for at lave et lille udsnit af et billede om til et link. Man markerer billedet og trykker på map i properties-vinduet. Sitemanager styr på sider, biblioteker og links! Når man har kreeret sin website med alle de HTML-dokumenter, der hører til, kan man let komme ud for at miste det forkromede overblik man kan ikke huske, hvor bestemte sider befinder sig, hvilke biblioteker dokumneterne ligger i, og man kan slet ikke huske, hvordan man har knyttet dokumenterne samme via links. Dette problem kan selvfølgelig minimeres med god planlægning allerede fra starten, eller ved flittig brug af stifinder, men selv med god planlægning kan man komme ud for at glemme, hvordan man i sin tid opbyggede websiten. I Dreamweaver findes et hjælpemiddel, Sitemanageren, der på en nem og overskuelig måde kan hjælpe med til at holde styr på websiten. Sitemanageren står i elektronisk forbindelse til det sted på internettet (server eller harddisk), hvor websiten befinder sig, og kan automatisk opdatere hypertekstreferencerne i relevante HTMLdokumenter i forbindelse med flytning af fil fra en mappe til anden. Sitemanageren minder på mange måder om et lille filhåndteringsprogram á la stifinder i Windows. Man åbner Sitemanageren i menuen Site! Site files eller ved tryk på F5. Skabeloner (templates) Skabeloner benyttes til at standardisere HTML sider, dvs. give siderne et ensartet udseende. Hvis man forestiller sig en række medarbejdere i en virksomhed får frit slag med hensyn til udseende af deres egne hjemmesider vil virksomhedens profil udadtil bære præg af alle medarbejdernes mere eller mindre 'skøre' indslag. Som web-ansvarlig i en virksomhed eller på en institution kan man lave sine egne skabeloner, der er i overensstemmelse med virksomhedens 'ansigt ' på nettet og derefter distribuere skabelonen til alle medarbejderne. Når man laver en skabelon definerer man områder i sit HTML-dokument som andre kan redigere samt områder som andre ikke kan redigere.
Eksempel: Et firma ønsker at alle HTML-sider på deres websted indeholder firmaets logo i øverste højre hjørne. Ved at placere logoet det ønskede sted i skabelon-dokumentet kan man sikre at sider baseret på denne skabelon altid indeholder logoet. Man kan lave en skabelon helt fra bunden eller man kan redigere en eksisterende skabelon og opdatere hele sit websted med de nye ændringer (kun HTML-dokumenter der er baseret på den ændrede skablonen vil blive ændret!!!). Ny side baseret på skabelon Hvis man vil lave en side baseret på en eksisterende skabelon hentes skabelonen først (File! New from Template ) og siden gemmes derefter som et almindeligt HTML-dokument (File -> Save as ). Ny skabelon Man laver en skabelon ligesom et almindeligt HTML-dokument i Dreamweaver. Når dokumentet skal gemmes gemmer man det som en skabelon (File! Save as Template ). Først når dokumentet er gemt som skabelon kan man definere hvilke dele af dokumentet man kan redigere og hvilke man ikke kan. For at definere et redigérbart område klikker man med musen på det sted man ønsker og vælger: Modify! Templates! New Editable Region. Ændre skabelon Hvis man skal redigere en eksisterende skabelon åbnes dokumentet som skabelon (File! Open.dokumenter med endelsen 'dwt'). Flere skabeloner Man er ikke kun begrænset til at arbejde med en bestemt skabelon på sit websted. Man kan sagtens arbejde med flere forskellige skabeloner. I Dreamweaver gemmes skabelonfilerne (*.dwt) i folderen 'templates'). 'Templates'-folderen er placeret samme sted som indexsiden (index.htm). Hver side, der er baseret på en skabelon, får tilført en oplysning i kodedokumentet med oplysninger om skabelonens navn og placering. Konvertering af Word-filer Hvis man har en tekst som er skrevet i Word-format (eller for den sags skyld ved hjælp af et andet tekstbehandlingsprogram) er der mulighed for at gemme sit Word-dokument direkte i HTMLformat. I Word åbner man det dokument man ønsker at konvertere og gemmer det derefter som HTML-dokument (Filer! Save as... vælg herefter filformatet til htm, html.). Word vil desværre tilføje en masse unødvendige koder til dokumentet og det kan være lidt af en jungle at rydde op efter en Wordkonvertering. Tricket er alligevel godt at kende i en håndevending. Alternativt kan man linke direkte til Word-dokumentet i 'properties'-vinduet! Det kræver selvfølgelig at den besøgende på siden, selv har installeret Word (i den rigtige eller nyere version) for at kunne læse dokumentet! Publicering på nettet! Publicering på nettet er det sidste skridt på vejen til at mangfoldiggøre sine sider på nettet. På RUC har vi alle plads (i hvert fald mulighed for plads) på akira-drevet. Index-siden skal placeres i
mappen 'public_html'. Hvis ikke den allerede eksisterer skal mappen oprettes. Browseren søger automatisk efter en index-side (index.html) i denne mappe, når man besøger brugerens akira-drev. Adressen til din afdeling af akiradrevet ser sådan ud: akira.ruc.dk/~dit brugernavn/ Flettede typografiark (Cascading Style Sheets, CSS) Man anvender flettede typografiark (herefter kaldet CSS efter endelsen i filnavnet *.css) til at opnå en bedre kontrol over layoutet på sit websted. Tænk på hvor meget tid man egentlig bruger på at sidde og ændre tekststørrelsen på forskellige overskrifter, ændre skriftfamilie (font), ændre udseendet på sine links osv. Alt dette besvær skal oven i købet gentages hver gang man skal oprette en ny side på sit websted! Med CSS kan man én gang for alle definere typografien på sine sider. Oplysningerne i en CSS-fil indsættes i HTML-dokumentets <HEAD>-sektion. CSS-filen kan indsættes i sin fulde længde (som i eksempel 1) eller indsættes som reference til en ekstern CSS-fil (eksempel 2). Eksempel 1: Indsættelse af style sheet i et HTML-dokument: <html> <head> <title>untitled Document</title> <meta http-equiv="content-type" content="text/html; charset=iso- 8859-1"> <style type="text/css"> h3 { font-family: Arial, Helvetica, sans-serif; font-size: 16pt; font-style: normal} </style> </head> <body bgcolor="#ffffff"> </body> </html> I dette eksempel er der kun defineret en enkelt typografi for et h3-flag. Dvs., at al tekst i Bodysektionen af HTML-dokumentet omsluttet af h3-flaget nu vil blive vist som normal skrift med skrifttypen Arial i punktstørrelse 16: Eksempel 2: Indsættelse af et style sheet som en henvisning i HTML-dokumentet
Ved at have et style sheet som selvstændig kan man nøjes med at rette sit style-sheet ét sted og derefter opdatere alle HTML-dokumenter, der refererer til dette style sheet. <html> <head> <title>untitled Document</title> <meta http-equiv="content-type" content="text/html; charset=iso- 8859-1"> <link rel="stylesheet" href="../css/style1"> </head> <body bgcolor="#ffffff"> </body> </html> I en anden mappe har jeg så placeret min style sheet fil. Filen i ovenstående eksempel hedder Style1.css og den ligger i mappen css. Indholdet af filen ser sådan her ud: <style type="text/css"> h3 { font-family: Arial, Helvetica, sans-serif; font-size: 16pt; font-style: normal} </style> Effekten på HTML-dokumentet, når det vises i en browser, er nøjagtig den samme for de to viste eksempler Dette tekststykke ligger nu bare gemt som en selvstændig fil i en anden mappe! I Dreamweaver kan man definerer typografier for alle mulige tags (ikke kun h3, som vist i eksemplet. Skiftede vi h3 ud med a ville typografien gælde for alle links Man kan definere ligeså mange typografier for tags det skal være og indsætte dem efter hinanden i HTML-dokumentet eller den eksterne css-fil. Jeg kan f.eks. tilføje en ny typografi, som skal gælde for h2 (heading 2) osv. I Dreamweaver 3 indsættes style sheets fra menuen: Text! CSS Styles! Edit Style Sheet... Herefter skal man vælge om man vil indsætte et style sheet direkte i dokumentet (New...) eller som eksternt style sheet (Link...). Billedbehandling Programmer til billedbehandling
Billedets farvedybde Skærmens farver (indstillinger for skærm) Billedformater (fortsat): Gif, Jpeg og PNG Transparente Gif-billeder Konvertering af billedformatet Litteratur og links Bøger Towers, J.T. (1999), Dreamweaver for Windows & Macintosh i serien: Visual Quickstart Guide, Peachpit press. Hæfter fra IDG Books (billige og nemme opslagsværker, ca. 70kr/hæfte): Pedersen, Søren. (2000), Dreamweaver 3 Karboe, Michael B. (1999), Websites lær det selv Karboe, Michael B. (1998), Internet lær det selv Steffensen, Jan B. (1999), Introduktion til HTML Norling, Ivan. (2000), Brugervenlige websider Tittel, E., J.Michael, Stewart & Natanya Pitts (2000), HTML 4 leksikon Links www.info.med.yale.edu/caim/manual - Web Style Guide - Gode råd om design af website. www.komm.ruc.dk/netmedier/tekster/html-40.pdf - Web page design 2, Niels Erik Wille, kan bruges som manual til HTML og CSS www.echoecho.dk - Ressourcer til netdesign og information om nettets brugere og koder. www.useit.com - Jakob Nielsens råd om brugervenlighed ved design af websiter. www.macromedia.com/software/dreamweaver/trial/ - 30 dages demo af Dreamweaver 3. Stones Webwriter Gratis dansk HTML-editor i topkvalitet Paint Shop Pro Shareware tegne/grafik-program
Kursusholderne: Jakob Gudmandsen E-mail: gud@ruc.dk Jens Christian Stenz Justesen E-mail: jensjust@mail.dk Tlf.nr. 43552606