Dreamweaver tutorials

Sådan laver du et website i Dreamweaver, som i tidens ånd tager udgangspunkt i CSS og uden anvendelse af tabeller.

Beskrivelsen og screenshots er fra Dreamweaver CS4, men brugerfladen er indstillet på 'classic', så den ligner tidligere udgaver til forveksling.

Der tages udgangspunkt i et fiktivt site SideTwo, som omhandler ekstrem sport, men du kan selv vælge om du vil anvende dette emne og disse filer eller dit eget projekt. Hvis du anvender dine egne billeder, skal du sørge for at de har samme størrelse, dvs. 950x100 pixels for banneren og 300x300 pixels for de øvrige billeder.

Hvis du anvender andre størrelser, skal du ændre på størrelsen på de Div tags, billederne placeres i. Hvis du er helt ny i div tags, anbefales det, at du i første omgang anvender projektfilerne, så fokus er på Dreamweaver.

Hvis du er nysgerrig om, hvordan banneren er lavet i Photoshop, kan du følge denne videotutorial:

>> Lav en banner i Photoshop

Websitet er valideret uden fejl i CSS og HTML, og er desuden checket i IE7, Firefox og Safari.

Det første du skal gøre er at oprette et nyt site. Et site er en forkortelse af website(på dansk: websted), som er en samling af webpages (på dansk: websider). Du skal altid oprette et website – ellers kan du ikke lægge dine websider ud på www.

1. Opret en mappe ’sidetwo’, hvor du vil gemme dine websider. F.eks. på skrivebordet. Inde i mappen ’sidetwo’ skal du oprette en mappe, som hedder ’images’ til dine billeder.
2. Start Dreamweaver.
3. Opret et nyt site: Site > New Site > 'Advanced' tab
4. Skriv navnet på dit website i feltet ud for ’Site name’
5. Klik på den gule mappe ud for ’Local root folder’ og vælg den mappe, du oprettede før.
6. Klik på den gule mappe ud for ’Default images folder’ og vælg mappen ’images’, du oprettede før.
7. Nu går du ud af ’site definition’. Du vil kunne se i dit files panel i højre side, at du har oprettet et site med mappen  ’images'.

Typisk vil alle dine websider have nogenlunde samme udseende, hvor flere elementer går igen på alle sider. Derfor er det en god ide at lave en template (skabelon). Fordelen ved dette er:

• Alle websiderne får samme udseende
• Du sparer tid, da du kun skal lave de elementer, der går igen, én gang
• Hvis du laver ændringer på en template, træder ændringerne i kraft på alle websider, der er lavet ud fra templaten.

En dreamweaver template slutter på .dwt og lægges automatisk i en mappe ’Templates’

1. Opret en template:  File > New
2. Her vælges ’Blank  Template’ > Template Type: HTML Template > Layout: <none>
   
   
   
   
3. Gem din template: File > Save. Hvis der kommer en dialogboks frem om manglende ’editable regions’ skal du blot klikke ’OK. Gem din skabelon som ’sidetwo’. Den vil nu blive gemt som sidetwo.dwt i mappen ’Templates’

 

Et style sheet er en fil med oplysninger om, hvordan dine websider skal se ud. I stedet for at definere det på alle sider, er det meget bedre at gøre det i et style sheet. Hvis du vil lave om på udseendet på alle dine websider, f.eks. fonte, størrelser og farver, kan du blot gøre det i dit style sheet. Du kan læse meget mere om  style sheets under webteknologier > CSS.

Øverst til højre ser du dit CSS panel. Hvis det ikke er fremme, vælg Window > CSS styles. I de næste skridt oprettes et nyt style sheet og den første tag ’body’ defineres i style sheet’et:

1. Klik på ikonet ’New CSS-rule’
2. Dialogboksen ser lidt forskellig ud i CS4 i forhold til tidligere versioner, men der er samme indhold. Her vælges Selector Type: Tag, Selector name: body, Rule definition define in: (New style sheet file). Klik ‘OK’
   
   
   
   
3. Du kalder dit style sheet for ‘sidetwo’ og gemmer.
4. Nu skal din body-tag defineres. I ’CSS rule definition’ dialogboksen vælges
   • Category: Box. Padding og Margin skal begge stå på 0 for både Top, Right, Bottom og Left. Dette gør bl.a. at der ikke bliver margin i toppen af dine websider.
     
     
     
     
     
     
   • Category: Type. Font-family: Verdana, Geneva, Sans-serif.  Font size: 10 px. Så er din standard skrift I body defineret.
     
     
     
     
5. Klik ’OK’ og gem både din template og style sheet med File > Save All. Så forsvinder den lille stjerne ved filnavnene i de enkelte faner, som indikerer at de seneste ændringer ikke er gemt.

For at se indholdet af dit style sheet, kan du klikke på fanen ’sidetwo.css’. Som du kan se er det de definitioner, vi netop har lavet.

Nu skal vi have indhold på vores template. Når vi arbejder med vores sider, er det bedst at stå i Split mode, så vi både kan se designet og sidens kode.

Vi vil opbygge vores side med Div Tags, som er bokse, du kan putte indhold på. En Div tag kan f.eks. være banneren, menubaren, hovedindholdet, osv.  Vi vil dog starte med at lave en Div tag til at rumme alle de andre Div tags. På den måde kan vi lettere styre deres indbyrdes placering. F.eks. hvis alle skal venstrejusteres, kan vi blot venstrejustere denne Div tag. Vi kalder den for ’wrapper’.

1. Vælg Insert > Layout Object > Div Tag
2. I vinduet skrives ‘wrapper’ ud for ID
3. Klik på ’New CSS Rule’
4. I det næste vindue vælges Selector Type: ID, Selector Name: #wrapper, Rule definition: sidetwo.css. På den måde vil CSS-reglen for wrapper blive lagt i sidetwo.css i stedet for på siden selv.
   
   
   
   
5. I CSS rule window Definition vælges
   • Category: Box. Width: 950 pixels. Margin top og bottom: 0 pixels, left og right: auto. Så bliver wrapperen (med alle de andre bokse i) centreret på siden.
     
     
     
     
   • Category: Boarder. Style top: none, right, bottom, left: dotted. Width: right, bottom og left: 1 px. Vi får så en stiplet streg rundt om wrapperen, undtagen for oven. Klik ‘OK’ 2 gange.
     
     

Nu vil vi lave den øverste Div tag til logo og navn. Denne Div tag kaldes typisk for ’header’.

1. Sørg for at teksten ‘Content for id "wrapper" Goes Here’ er markeret så vi kan erstatte den med den nye Div tag.
2. Vælg Insert > Layout Object > Div Tag
3. I vinduet skrives ‘header’ ud for ID. Insert: ’Wrap around selection’
4. Klik på ’New CSS Rule’
5. I det næste vindue vælges Selector Type: ID, Selector Name: #header, Rule definition: sidetwo.css.
6. I CSS rule window Definition vælges Category: Box. Height: 100 pixels. Padding og Margin: alle 0 pixels. Klik ‘OK’ 2 gange.
   
   
   
   
7. Teksten ‘Content for id "wrapper" Goes Here’ slettes, og der indsættes en banner. Insert > Image > vælg ’header.jpg’ og klik ’OK’. Som alternativ tekst skrives ’banner’. Det er hvis modtageren ikke kan se billeder, så kan han se denne tekst. Ikke så vigtigt, men god skik.
8. Gem dine sider med File > Save All, og klik på F12 for at se din template i en browser. Du kan også vælge File > Preview in Browser og vælge en anden browser end standard.
   
   

Nu skal du have din menu, som i denne tutorial vil være tekstbaseret. Det ser pænt og minimalistisk ud frem for store knapper, og desuden er det let at udvide, hvis du skal have flere sider.

1. Klik efter den afsluttende header div-tag i din kode. (pilen ved nedenstående billede).På den måde sørger vi for, at menuen ikke bliver blandet sammen med header’en.
   
   
   
   
2. Vælg Insert > Layout Object > Div Tag
3. I vinduet skrives ‘menu’ ud for ID. Insert: ’At insertion point’
4. Klik på ’New CSS Rule’
5. I det næste vindue vælges Selector Type: ID, Selector Name: #menu, Rule definition: sidetwo.css.
6. I CSS rule window Definition vælges
1. Category: Box. Width: 930 pixels. Padding: top og bottom: 5 px left og right: 10 px. Margin: alle 0 pixels. Grunden til de 930 pixels er, at man skal lægge padding til bredden, dvs. 930 + 10 (left) + 10 (right) = 950 pixels, som var bredden på wrapperen. Padding er afstand til kanterne inde i Div tag’en.
2. Category: Background. Klik på baggrundsfarven og med pipetten vælges farven i ’Two’ i banneren. På den måde bruger vi de farver, vi allerede har på siden. Klik ‘OK’ 2 gange.
   
   
   
   
7. Slet teksten ”Content…” og skriv i stedet:
   Hjem | Mountainbiking | Skateboarding | Snowboarding | Klatring | Kontakt
   (for at få den lodrette streg, skal du holde ’Alt Gr’ nede og klikke på tasten til venstre for backspace).
8. Gem og preview din side, som gerne skulle se således ud:
   
   

Nu vil vi lave vores div tags til tekst og billede. For at gøre det simpelt, vil alle siderne indeholde tekst i venstre side og et billede på 300x300 pixels i højre side. På den måde har vi samme udseende på alle sider – selvfølgelig med forskellig tekst og billeder.

Vi får brug for lidt matematik her. Den samlede bredde på hele websiden er 950 pixels. Dette deler vi op i tekst 550 pixels og billede 400 pixels. I tekst-boksen skal der være padding på 20 px til alle sider, så der bliver lidt luft. Dvs. width=510. Height defineres ikke, da vi ikke kan vide hvor meget tekst, der bliver.

1. Klik efter den afsluttende menu div-tag i din kode (ligesom du gjorde i forrige afsnit, blot med header div-tag’en).
2. Vælg Insert > Layout Object > Div Tag
3. I vinduet skrives ‘tekst’ ud for ID. Insert: ’At insertion point’
4. Klik på ’New CSS Rule’
5. I det næste vindue vælges Selector Type: ID, Selector Name: #tekst, Rule definition: sidetwo.css.
6. I CSS rule window Definition vælges Category: Box. Width: 510 pixels. Padding: 20 px på alle sider. Så bliver der lidt luft på alle sider. Float: left. Da der skal være en Div tag mere på samme linie. Klik ‘OK’ 2 gange.

Nu skal vi lave vores billede div tag. Som sagt har denne en samlet bredde på 400 pixels. Men her vi vi have en padding på 50 px på alle sider, dvs. en width på 300 px.

1. Klik efter den afsluttende tekst div-tag i din kode.
2. Vælg Insert > Layout Object > Div Tag
3. I vinduet skrives ‘billede’ ud for ID. Insert: ’At insertion point’
4. Klik på ’New CSS Rule’
5. I det næste vindue vælges Selector Type: ID, Selector Name: #billede, Rule definition: sidetwo.css.
6. I CSS rule window Definition vælges Category: Box. Width: 300 pixels. Padding: 50 px på alle sider. Så bliver der lidt luft på alle sider. Float: right. Da den skal justeres til højre. Klik ‘OK’ 2 gange.

Gem din template og css, og check siden i en browser med F12. Vi har ikke meget indhold på siden, men det får vi snart. Indtil videre ser den sådan ud:

Nu skal vi have den sidste div tag, nemlig bjælken i bunden af siden. Denne kaldes typisk for footeren. Her kan du have oplysninger, som skal gå igen på alle sider. Jeg laver blot en copyright meddelelse.

1. Klik efter den afsluttende billede div-tag i din kode.
2. Vælg Insert > Layout Object > Div Tag
3. I vinduet skrives ‘footer’ ud for ID. Insert: ’At insertion point’
4. Klik på ’New CSS Rule’
5. I det næste vindue vælges Selector Type: ID, Selector Name: #footer, Rule definition: sidetwo.css.
6. I CSS rule window Definition vælges:
1. Category: Type. Font-size:9 px
2. Category: Background. Med pipette vælges same background color som menuen.
3. Category: Block. Text align: center, for at få teksten centreret I footeren.
4. Category: Box. Clear: Both. For at få footeren på en linie for sig selv.
5. Klik ’OK’ 2 gange
7. Ændre standardteksten i footeren til ©opyright 2009 - www.sidetwo.dk
   (© kan du finde i den øverste værktøjslinie under Text > Characters.)
8. Gem din template og css, og check siden i en browser med F12. Hvis du bruger Dreamweaver CS4 kan du også bare klikke på ’Live View’, som er en indbygget browser.

 

Vi skal sørge for, at der er nogle områder på vores template, der kan redigeres på de enkelte websider, som laves på baggrund af skabelonen. Disse områder kaldes for ’editable regions’, og det skal være tekstindholdet og billedet.

1. Slet ’Content for ….’ I tekst Div tag’en og vælg Insert > Template objects > Editable Region.
2. Name: tekst, klik ’OK’
3. Slet ’Content for ….’ I billede Div tag’en og vælg Insert > Template objects > Editable Region.
4. Name: billede, klik ’OK’
5. Gem din template. Nu har du 2 redigerbare områder, resten vil være låst, når du laver websider af din template.

 

Vi vil style vores website en smule, således, at vi har en pæn overskrift på hver side og nogle links med en mouse-over effekt. Først overskriften, som kaldes H1:

1. Vælg New CSS-rule. Selector Type: Tag (som bruges til at redefinere en HTML tag). Selector Name: H1. Rule definition: sidetwo.css.
2. I Category: Type vælges Font-size: 18px og ud for Color vælges med pipetten en mørkegrøn nuance fra banneren. Klik ’OK’
3. I den editable region til venstre klikker du et sted på ordet ’tekst’ og vælger i properties i bunden Format: Heading 1. Du vil nu kunne se din nye style.

Nu laves udseendet på links’ene, først a-tag’et som er udseende for et link, og dernæst a:hover, når du bevæger musen henover linket:

1. Først markeres ’Hjem’ i menuen. I properties i bunden laves en havelåge (SHIFT+3), som indikerer at det er et link. Det samme gøres med de andre links.
   
   
   
   
2. Vælg New CSS-rule. Selector Type: Tag (som bruges til at redefinere en HTML tag). Selector Name: a (som er udseendet på et link). Rule definition: sidetwo.css.
   
3. I Category: Type vælges Color: sort, Text-decoration: none (så du undgår den grimme understregning af links). Klik ’OK’
4. Vælg igen CSS-rule. Selector Type: Compound (I Dreamweaver CS4) eller ID (I tidligere versioner af Dreamweaver).  Selector name: a:hover. Rule Definition: sidetwo.css
   
   
   
   
5. I Category: Type under Color vælges med pipetten en grøn fra midten af banneren. Text-decoration: none (så du undgår den grimme understregning af links). Klik ’OK’
6. Til sidst gemmer du din template og css og checker siden i browseren. Du vil nu kunne se, at links’ene har en roll-over effekt.

Nu skal du lave alle dine websider ud fra din template. Du kan senere lave ændringer i din template, som vil påvirke websiderne, så vi venter med links’ene til vi har lavet siderne.

1. Vælge File > New > Page from Template. Site: Sidetwo. Klik ‘Create’.
   
   
   
   
2. Du ændrer overskriften til ‘Velkommen’.
3. Siden gemmes. File > Save As “index.html”
4. Du gentager nu step 1-3 og laver siderne mountainbiking.html, skateboarding.html, snowboarding.html, klatring.html, kontakt.html med hver deres overskrift og filnavn.

Nu har vi alle vores websider. Nu skal de linkes sammen. Dette gøres fra templaten, og når den så gemmes, vil links’ene virke på alle sider.

1. Klik på din template sidetwo.dwt
2. Klik på ’Hjem’ i menuen
3. I Link i properties vælges index.html, enten ved at klikke på den gule mappe, eller ved at trække fra sigtekornet op til index.html i Files panel i højre side.
   
   
   
   
4. Det samme gøres med de andre ord i menuen, så de alle sammen bliver til links. Dvs. ’Mountainbiking’ skal linke til mountainbiking.html, osv.
5. Nu gemmes din template. Du bliver spurgt om du vil opdatere dine websider, og du klikker ‘Update’, og bagefter ’Close’, når siderne er opdateret.
6. Til sidst vælger du File > Save All og klikker på index.html for at previewe siden i en browser. Klik mellem siderne for at teste, at det virker.
   

Nu skal vi blot have indhold på websiderne, dvs. tekst i venstre side og billeder i højre side. Vi starter med teksten.

1. Gå ind på Sideone.dk->Multimedie->Tekst->Lorem Ipsum og generer 3 afsnit mumletekst. Klik på ’marker tekst’, som automatisk lægger det i udklipsholderen.
2. Går over i Dreamweaver på index.html og klik efter sidste bogstav i din overskrift. Tryk på ENTER og sæt din tekst ind på CTRL+V.
3. Dette gøres også på de resterende sider. Du kan altid ændre teksten.

Nu skal vi have sat billeder ind. Billederne kan du downloade sammen med alle øvrige filer øverst på denne webside.

1. Vælg index.html og slet ordet billede i den højre editable region.
2. Vælg Insert > Image > paragliding.jpg . Klik på ‘OK’. Som alternativ tekst skriv ’paragliding’ og klik ’OK’. Hvis Dreamweaver spørger om den skal kopiere filen over i din mappe, klikker du bare ’OK’.
3. Du går nu igennem step 1-2 for de øvrige sider med billederne mountainbiking.jpg, skateboarding.jpg, snowboarding.jpg, climbing.jpg og kontakt.jpg
4. Du skal også lige give alle sider en titel, som kommer til at stå øverst i browservinduet. I Title-feltet skriver du ’SideTwo – ekstrem sport’. Dette skrives på alle sider.
5. Til sidst vælger du File > Save All og klikker på index.html for at previewe siderne i en browser. Der er lige 2 små korrektioner: menuen og banneren.
6. Menuen skal flugte med teksten nedenunder, dvs. den skal rykkes lidt til højre. Klik på #menu i CSS styles panelet i højre side og nedenunder: vælg padding-left: 20 px og width: 920 px (da de 10 px der er lagt til i padding skal trækkes fra et andet sted). På den måde kan du altid rette i dine CSS rules og se ændringerne på alle sider.
7. Lige nu er al tekst (i banner, menu og indhold) placeret i venstre side, mens billeder (i banner og indhold) er placeret i højre side. For at gøre siden mere ligevægtig, kan bannerens indhold byttes om, så tekst er i venstre side og billede i højre. Det er gjort i header2.jpg, så derfor skal du skifte header ud i din template. Marker billedet i header og i properties klikker du på den gule mappe ud for Src og finder header2.jpg.
8. Når du gemmer din template, bliver du spurgt om du vil opdatere dine websider, og du klikker ’OK’. Ligesom ved CSS er dette et eksempel på, at du altid kan rette i din template, og det påvirker alle sider.
9. Gem dit CSS og preview. Du har nu lavet et pænt og enkelt website og mangler kun at uploade det.

Til sidst skal websitet ud på WWW. Til det skal du have en udbyder og finde oplysninger om FTP host, brugernavn og password. Der er et indbygget FTP-program i Dreamweaver. FTP står for File Transfer Protocol og er det sprog på nettet, som bruges til at overføre filer med.

1. Dobbeltklik på Sidetwo mappen øverst i Files panelet
2. Vælg Category: Remote Info. Access: FTP
   Skriv nu oplysningerne om FTP-host, Login og password, som du har fået af din udbyder. Klik på ’Test’ for at se om der er forbindelse. Hvis ikke kan det skyldes at din firewall blokerer, og du må fjerne denne blokering. Klik ’OK’ 2 gange.
   
   
   
   
3. Nu skal filerne overføres. Klik på hhv. connect-knappen (til venstre) og expand-knappen (til højre for at lave forbindelse og se både local og remote files.
4. Du kan nu blot klikke på den øverste linie i Local files og derefter den blå pil for ’Put Files’ – så bliver filerne overført til webserveren
   
   

Dette var en tutorial i, hvordan du laver et lille website med tekst, billeder og links. Men dit nye erhverv som webdesigner stopper forhåbentlig ikke her. Sitet kan udvides ud i det uendelige, f.eks:

• Flere sider – der laves flere sider af templaten, og templaten tilføjes nye links i menuen
• Videoklip – oplagt ved ekstrem sport.
• En kontaktformular, som kunden kan udfylde.
• En flashbanner.
• En nedtonet baggrund bag ved teksten på hver side.
• En sidebar med links og flere oplysninger
• Muligheder for at sende billeder ind.
• Osv.

Med lidt idéudvikling kan du sikkert finde på en masse forslag. Men du skal også tænke på, hvad det skal bruges til. Det er bedre at holde det simpelt og overskueligt. Men husk: minimalisme er ikke det samme som kedeligt design – så der må gerne være f.eks. en flash banner eller video som understøtter budskabet og liver lidt op på siderne. En side om skateboarding med 1700 linier tekst og ikke andet spiller bare ikke,-).
Først skal du dog have lidt meningsfuld tekst på siderne – husk at læse korrektur på al din tekst!

>>Læs mere om godt webdesign her