Først og fremmest bør I træffe de nødvendige forberedelser til opsætning af hjemmesiden. Opret den ønskede mappestruktur. Denne kan for eksempel se sådan ud:
skattekonsulent
---billeder
---css
Dette er en ganske typisk mappestruktur. På hovedniveau placeres HTML-siderne. CSS-filerne placeres i css-mappen, mens alle billeder gemmes i images-mappen. Så tilføj alle de billeder til images-mappen, som I tidligere har klippet ud af layoutet.
Opbyg basiskonstruktionen
Opret en ny CSS-fil inden for css-mappen. Denne tilføjer I derefter til jeres HTML-fil. (I mit eksempel vil HTML-filen have navnet index.html). Denne fil er fra nu af omdrejningspunktet for de følgende trin.
Først og fremmest tilføjer I det velkendte HTML-basisskel i index.html.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Din skattekonsulent</title> <link href="css/styles.css" rel="stylesheet" type="text/css"> </head> <body> </body> </html>
Vær også opmærksom på at tilføje stylesheatet. Og så kan I begynde.
Det ydre element udgør en div-container.
<div class="main-container"> </div>
Denne container kan I også formaterer med CSS-syntaksen.
.main-container {
width: 100%;
float: left;
}
Hovedcontaineren udstyres med en bredde på 100 procent og flyder til venstre. Fordelen ved at sætte en bredde på 100 procent er, at I for eksempel kan indsætte et baggrundsbillede med farvegradient. Denne baggrund vil derefter strække sig over hele skærmbredden.
Jeg opretter to yderligere div-elementer inden for main-containeren.
<div class="main-container"> <div class="container"> <div class="page"> </div> </div> </div>
Også disse elementer formateres. Den faktiske indholdssektion får en bredde på 1000 pixel. Ved at angive margin: 0px auto; opnås der også en vandret centreret placering af elementet.
.container {
width: 1000px;
margin: 0px auto;
}
Lad os fortsætte med at formatere page-elementet.
.page {
width: 1000px;
float: left;
padding: 40px 0px 0px 0px;
}
Dette element er den faktiske indholdssektion på siden. Alle andre elementer placeres heri. Dette element får også en fast bredde på 1000 pixel. Padding-angivelsen definerer indvendige margener. Her sættes den øverste indvendige margen til 40 pixel, mens de andre sider sættes til 0 pixel.
Så har vi allerede implementeret den (meget) overordnede struktur af layoutet.
Nu drejer det sig om at udfylde denne struktur med indhold. Siden deles først i tre rækker.
• Top
• Indhold
• Bund
Til dette defineres tre yderligere div-områder.
<div class="top"> </div> <div class="content"> </div> <div class="bottom"> </div>
Også disse tre områder formateres selvfølgelig igen med CSS.
.top {
background-color: #f6f7f7;
width: 980px;
float: left;
padding: 0px 10px 10px 10px;
}
.content {
width: 980px;
float: left;
padding-top: 8px;
}
.bottom {
text-align: center;
width: 1000px;
height: 110px;
float: left;
}
Nu kan de enkelte områder styles yderligere.
Lad os først se på topdelen af siden. Den består igen af flere elementer:
• Logo/Titel
• øverste menu
• stort billede
Disse tre elementer defineres inden for top-området.
<div class="top"> <div class="header"> <div class="header-top"> <h1>Din skattekonsulent</h1> </div> <div class="topmenu"> Den øverste menu </div> <div class="header-img"> </div> </div>
Dette er grundstrukturen af topdelen af siden. Også denne formateres nu selvfølgelig med CSS.
.header {
width: 980px;
float: left;
}
.header-top {
width: 980px;
height: 87px;
float: left;
}
.topmenu {
background-image: url(../images/menue.jpg);
background-repeat: repeat-x;
width: 978px;
height: 37px;
float: left;
}
.header-img {
background-image: url(../images/header.jpg);
background-repeat: no-repeat;
background-position: left top;
width: 980px;
height: 213px;
float: left;
}
Syntaksen indeholder to "særlige" punkter. Først kig på indholdet af klassen topmenu. Her bemærker vi to oplysninger om baggrundsbilledet.
background-image: url(../images/menue.jpg); background-repeat: repeat-x;
Den ene pixelgrafik menue.jpg. bliver inkluderet. Denne repræsenterer den farvegradient, I kender, i den øverste menu. Ved at angive background-repeat: repeat-x; vil grafikken blive gentaget vandret, indtil elementet er fuldt udfyldt.
Opdeling af indholdsområdet
Næste skridt er området på siden, hvor indholdet til sidst vises. Det sker inden for div-elementet content. Dette område er opdelt i forskellige elementer. Først er der et lille teaserbillede og en velkomsthilsen.
Den tilhørende HTML-syntaks ser sådan ud:
<div class="content-left"> <div class="content-image"> <div class="img"><img src="images/img.jpg" alt="" height="100" width="160"></div> <div class="slogan"> <h1 class="title">Velkommen til vores hjemmeside</h1> <p>Her følger en velkomsttekst</p> </div> </div>
Dette område er også delt i to. Billedet vises til venstre, velkomsthilsen til højre. Det afgørende her er klassen content-image.
.content-image {
width: 739px;
float: left;
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #eee;
}
Denne klasse omslutter både billedet og hilsenen. Inden for content-image er der igen to andre områder.
<div class="img"><img src="images/teaser.jpg" alt="" height="101" width="157"></div> <div class="slogan">Velkommen</div>
Hvis I i stedet for denne opdeling kun vil vise ét stort billede eller lignende, skal I samle disse to områder i et div-element. CSS-syntaksen for to-element-varianten ser i stedet sådan ud:
.img {
float: left;
}
.slogan {
width: 560px;
float: right;
}Resultatet bør nu vises i browseren på følgende måde:
Næste trin omhandler tre andre elementer:
• en venstre tekstboks,
• en højre tekstboks,
• den højre menu.
HTML-syntaksen vil i dette tilfælde se sådan ud:
<div class="teaser"> <div class="left"> Beholder for tekst til venstre </div> <div class="right"> Beholder for tekst til højre </div> </div> </div> <div class="content-right"> Den højre menu </div> </div>
Og selvfølgelig CSS-syntaksen her:
.teaser {
width: 737px;
height: 216px;
float: left;
border: solid 1px #eee;
}
.left {
width: 330px;
height: 180px;
float: left;
padding: 20px;
}
.right {
width: 327px;
height: 180px;
float: left;
padding: 20px;
}
.content-right {
width: 210px;
float: right;
padding-right: 20px;
margin-top: 20px;
border: 1px solid #eee;
}Ved afslutningen af denne vejledning har vi grundstrukturen på vores hjemmeside på plads.
Denne grundstruktur skal selvfølgelig stadig udfyldes med passende indhold. Dette vil vi tage fat på i den næste vejledning.
