Dreamweaver iconWeb-design og Dreamweaver CS4

Dag 2 i emnet web-, design og publisering. Uke 5, 2010

1. Last ned og pakk ut oppgaven

Klikk på denne lenken og pakk ut zip-fila >>

Flytt folderen “www.isklar” til “dokumenter” på maskinen din. Åpne Dreamweaver og sett det i “Classic” Workspace:

Classic Workspace
Knapp nr. fire fra venstre lar deg administrere siten
Her endrer du ”workspace”. Velg Classic hvis det alt er valgt.
Med disse knappene kan du sett inn det meste av det du trenger på en web-side. Fanene over gir deg flere …

2. Opprett en “New Site”

Klikk på knappen btnNewSite og velg “New Site …”, sett vinduet i “Advanced” modus. Gi det “Site name: Isklar” og klikk på folderene til venstre for å finne fram til www.isklar på maskinen din og folderen images inne i den under “Default images folder” Klikk “OK” og Dreamweaver er klar. Både til å administrere siten “Isklar” og å lage sider.

Screendump

3. Lag en HTML-side

Opprett en ny HTML-side: File > New … (Cmd+N). Velg “Blank Page”, “Page Type” HTML og “Layout” <none>. Lagre til www.isklar som index.html. Skriv Isklart norsk brevann i “Title”-feltet.

Screendump

4. Lag en ny CSS-side

Opprett en ny CSS-side på samme måten som ovenfor, men velg “Page Type” CSS (nr. seks på lista, ovenfra). Lagre til www.isklar med navnet “stilark.css”.

Screendump

5. Kople sammen de to dokumentene.

ScreendumpNederst på panelet “CSS Styles” finner du denne knappen: Attach Klikk på den og finn fram til “stilark.css”. Sett media til “All”.

Når du lar avmerkingen stå i “Add as: Link” vil du kunn skrive til stilarket som lagres utenfor selve HTML-dokumentet. Når du så lager flere sider kopler du alle sidene til ett, og samme stilark. Dette sparer deg for arbeid – og gjør filene dine mindre; raskere nedlasting.

6. Vi nuller bodytaggen først

Siden mange av de grunnleggende HTML-taggene har vært med siden tidenes morgen, og ikke alle browsere håndterer disse likt er CSS en mulighet til å nullstille det første elementet på siden din; nemlig <body>-taggen. Bruk knappen New CSS Rule nederst i CSS Styles-panelet. Velg “Tag” fra “Selector type”. Siden du ikke har skrevet noe enda står det nå “Body” i “Selector name”. Hvis ikke skriver du det, eller velger fra drop-down-menyen til venstre for feltet.

I dette panelet kan du betjene alle de vanlige CSS-reglene, men du kan også følge på hva som skjer på stilarket ditt. Se egen fane i Dreamweaver. Dette er verdiene du skal endre på:

  • Type: Sett Font-family til ”Verdana, Geneva, sans-serif”. Sett Font-size til 100%. Dette siste er for å definere et utgangspunkt for senere endringer i størrelse.
  • Block: Sett Text-align til “Center” – siden vi skal lage et midtstilt layout.
  • Box: Sett all Padding og Margin til “0” – disse avstandene definerer vi senere, og for hver enkelt regel.

Koden din på stilarket skal nå se sånn ut:

body {
font-family: Verdana, Geneva, sans-serif;
font-size: 100%;
text-align: center;
}
Screendump
Browsers

Grunnen til at vi nuller <body>-taggen er først og fremst på grunn av MSI Explorer, som ikke respekterer basic HTML.

7. Sett inn en “Wrapper”

Det er ikke uvanlig å lage en DIV som holder alle de andre DIV'ene på plass. Denne kaller vi en wrapper. Bruk Attach-knappen til å opprette en wrapper med disse deklarasjonene:

#wrapper {
text-align: left;
width: 750px;
margin-right: auto;
margin-left: auto;
background-color: #FFF;
}

Bruk Insert CSS Rule-knappen øverst på siden til å sette inn DIV'en: “Insert: After start of tag: <body>”, “ID; wrapper”. Teksten “Content for id "wrapper" Goes Here” Kan godt fjernes med en gang.

Screendump

Her finner du de ulike deklarasjonene for #wrapper i “CSS Rule definition”-panelet:

  • Background: Background-color: "FFF
  • Block: Text-align: Left
  • Box: Width: 750 px, Margin: Right/Left: Auto.

MagnifyingBruk alltid liten forbokstav i CSS-regler. Aldri ordmellomrom, tall eller bokstaver som æ, ø, å.

 

8. Sett inn en top-DIV for bilde og logo

Gå fram på samme måte som ovenfor: Opprett en ny CSS-regel for #top – og sett den inn med Insert CSS Rule-knappen. Denne gangen bruker du “Insert: After start of tag: <div id="wrapper">”. Denne DIV'en skal ha en definert høyde på 137px.

#top {
height: 137px;
}

9. Sett inn en DIV for navigasjonsbaren

Samme måte: Denne gangen skal DIV'en ha en høyde på 24px. Også skal de ha en lys blå bakgrunnsfarge; #7b96d6. Gi den navnet navBar. Og sett inn på HTML-siden med Insert CSS Rule-knappen. “Insert After tag: <div id="top">.

#navBar {
height: 24px;
background-color: #7b96d6;
}

10. Sett inn en DIV for ingress

Høyde: 139px. Her skal vi definere et bakgrunnsbilde i stedet for en farge: images/banner.jpg. Kall DIV'en ingress, sett inn etter navBar. Dette forutsetter at du har lagret HTML og CSS-filene i folderen utenfor images, og at banner.jpg ligger inne i images …

#ingress {
background-image: url(images/banner.jpg);
height: 139px;
}

Kurset fortsetter på neste side: 1 | 2 | 3