Del 1: Lag en nettside i CSS 2.0 og XHTML uten bruk av tabeller
Av: Øyvind A. Isaksen
Dette er første del av WebRessurs.no sitt CSS kurs som viser hvordan man utvikler en komplett nettside uten bruk av tabeller! Nettsiden består av en topp, undermeny, venstre kolonne, innholdsdel og bunn. Vi bygger et solid rammeverk der både XHTML og CSS validerer hos w3.org. Nettsiden vises likt i IE6, IE7, IE8, Firefox, Opera og Safari (Mac). God fornøyelse!
Summary: Free training / tutorial, build a website in CSS 2.0 and XHTML without use of tables.
Grunnleggende struktur
Når man skal lage rammeverket til en nettside i CSS benytter man <DIV> tagger for å holde på innholdet. Man kan nesten sammenligne en DIV tagg med en boks. Hver boks er fyllt med innhold. På denne måten bygger man opp nettsiden som en side full av bokser. Den største boksen er den ytterste DIV taggen (grid), denne holder på hele nettsidens innhold. Innholdet i denne boksen er med andre ord toppen, undermeny, venstre kolonne, innhold og bunnen.
Kort oppsummert er nettsiden bygget opp på følgende måte:
<div id="grid">
<div id="banner">Topp</div>
<div id="bar">Meny</div>
<div id="colWrapper">
<div id="colA">Venstre</div>
<div id="colB">Innhold</div>
</div>
<div id="footer">Bunn</div>
</div>
Opprette HTML side og legge inn innhold
Nå som vi har sett litt på hvordan strukturen på siden skal bygges opp er det på tide å begynne den morsomme jobben! Det første vi skal gjøre er å opprette en ny HTML fil (eller asp, asp.net, php eller det du møtte ønske).
Legg inn følgende kode i filen og lagre den som index.html:
Last ned hele koden som tekstfil her:
http://www.webressurs.no/kurs/css/del1/index.html.txt
Legg merke til at strukturen på DIV elementene er nøyaktig den somme som vist i innledningen. I tillegg er det også lagt inn litt kode i toppen av dokumentet som forteller nettleseren hva slags dokument type vi lager (DOCTYPE), hvordan innholdstype det er (Content-Type), hvordan karaktersett vi benytter (charset) og referanser til vårt stilsett (style.css). Det er meget viktig at dette blir korrekt for at nettsiden skal vises slik vi ønsker!
Opprette stilsettet for nettsiden vår (style.css)
Om du nå forsøker å åpne nettsiden din vil du se at den er langt fra det resultatet vi er ute etter. Grunnen er at vi ikke har laget stilsettet som forteller hvordan siden skal se ut. Her bestemmes alt fra fonter, farger, størrelser og plassering av elementer på siden.
Opprett en css fil med navnvet "style.css". Legg inn følgende kode i fila:
Last ned hele koden som tekstfil her:
http://www.webressurs.no/kurs/css/del1/style.css.txt
Pass på at CSS filen ligger på riktig plassering i forhold til referansen som er som er satt i toppen av nettsiden. I dette tilfellet skal style.css fila ligge på samme nivå som index.html fila!
Vi tester nettsiden
Lagre HTML filen og CSS filen om du ikke allerede har gjort det. Åpne så html filen i nettleseren din. Om du har gjort alt korrekt skal nettsiden nå se slik ut:
Oppsummering
Det første vi gjorde var å se på hvordan man ved hjelp av DIV tagger bygger opp strukturen på nettsiden vår. Deretter la vi inn nødvendig informasjon i toppen av vår HTML fil slik at innholdet på siden blir vist korrekt etter ønskede standarder og egne stilsett. Til slutt lagde vi stilsettet som forteller hvordan elementenen på siden skal vises for å oppnå ønsket resultat.
|
