Du ska först göra de nödvändiga förberedelserna för att sätta upp webbplatsen. Skapa den önskade katalogstrukturen. Denna kan till exempel se ut så här:
redovisningskonsult
---bilder
---css
Detta är en helt typisk katalogstruktur. På huvudnivån lägger man HTML-sidorna. CSS-filerna hamnar i css-katalogen, medan man sparar alla bilder i bilder-katalogen. Lägg till alla bilder som du tidigare har klippt ut från layouten i bilder-katalogen.
Bygg upp grundstrukturen
Skapa en ny CSS-fil inuti css-katalogen. Denna fil inkluderar du sedan i din HTML-fil. (I mitt exempel kommer HTML-filen att heta index.html). Denna fil är härmed navet för kommande handledningar.
Lägg först till den redan kända HTML-strukturen i index.html.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Din redovisningskonsult</title> <link href="css/styles.css" rel="stylesheet" type="text/css"> </head> <body> </body> </html>
Se också till att du omedelbart inkluderar stilmallen. Och nu kan vi börja.
Då yttre elementet utgör en div-container.
<div class="main-container"> </div>
Detta element kan du också omedelbart formatera med CSS-syntax.
.main-container {
width: 100%;
float: left;
}
Huvudcontainern ges en bredd på 100 procent och floatar till vänster. Fördelen med den inställda bredden på 100 procent är att du till exempel kan infoga en bakgrundsbild med färgton. Denna bakgrund skulle då sträcka sig över hela skärmbredden.
Jag skapar två ytterligare div-element inuti main-container.
<div class="main-container"> <div class="container"> <div class="sida"> </div> </div> </div>
Även dessa element formateras. Det faktiska innehållsområdet får en bredd på 1000 pixel. Genom att ange margin: 0px auto; uppnås även en horisontell centrerad justering av elementet.
.container {
width: 1000px;
margin: 0px auto;
}
Fortsätt med att formatera sidelementet.
.sida {
width: 1000px;
float: left;
padding: 40px 0px 0px 0px;
}
Detta element utgör den faktiska innehållsdelen av sidan. Här placeras alla andra element. Detta element får också en fast bredd på 1000 pixel. Padding-angivelsen definierar innermarginalerna. Den övre innermarginalen sätts till 40 pixel medan de andra sidornas innermarginaler sätts till 0 pixel.
Med detta har vi redan implementerat den (relativt) grova strukturen för layouten.
Nu handlar det om att fylla denna struktur med innehåll. SIdan delas in i tre rader i början.
• top
• innehåll
• fot
För detta definierar vi tre ytterligare div-områden.
<div class="top"> </div> <div class="content"> </div> <div class="bottom"> </div>
Dessa tre områden formateras naturligtvis också 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 olika områdena utformas ytterligare.
Låt oss först titta på sidhuvuddelen av sidan. Den består återigen av flera element:
• Logotyp/titel
• övre meny
• stor bild
Dessa tre element definieras inuti top.
<div class="top"> <div class="header"> <div class="header-top"> <h1>Din redovisningskonsult</h1> </div> <div class="topmenu"> Den övre menyn </div> <div class="header-img"> </div> </div>
Detta är grundstrukturen för sidhuvuddelen. Den kommer nu naturligtvis att formateras 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;
}
Syntaxen innehåller två "särdrag". Först, titta på innehållet i klassen topmenu. Här märker du två uppgifter om bakgrundsbildet.
bakgrundsbild: url(../images/menue.jpg); bakgrundsupprepning: repeat-x;
Den enpixelgrafiken menue.jpg är integrerad. Detta representerar färgändringen i det övre menyn. Genom att ange bakgrundsupprepning: repeat-x; upprepas grafiken horisontellt tills elementet är helt ifyllt.
Dela upp innehållsområdet
Nästa steg är att titta på sidans område där innehållet till slut visas. Det görs inom div-elementet content. Detta område är uppdelat i olika element. Först och främst finns det en liten teaserbild och en välkomsthälsning.
Den tillhörande HTML-syntaxen ser ut så här:
<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">Välkommen till vår webbplats</h1> <p>Här kommer en välkomstext</p> </div> </div>
Detta område är också uppdelat i två delar. Till vänster visas bilden, bredvid den välkomsthälsningen. Avgörande här är klassen content-image.
.content-image {
bredd: 739px;
float: vänster;
padding-botten: 10px;
marginalbotten: 10px;
kantbotten-bredd: 1px;
kantbotten-stil: solid;
kantbotten-färg: #eee;
}
Denna klass innehåller både bilden och hälsningen. Inom innehållsbild finns det återigen ytterligare två områden.
<div class="img"><img src="images/teaser.jpg" alt="" height="101" width="157"></div> <div class="slogan">Välkommen</div>
Om du istället för denna uppdelning bara vill visa en stor bild eller något annat, kan du samla dessa två områden till ett div-element. CSS-syntaxen för tvåelementvaraktningen ser emellertid ut så här:
.img {
float: vänster;
}
.slogan {
bredd: 560px;
float: höger;
}Resultatet bör nu visas på följande sätt i webbläsaren:
Fortsätt med tre andra element:
• en vänster textbox,
• en höger textbox,
• den högra menyn.
HTML-syntaxen ser ut så här i detta fall:
<div class="teaser"> <div class="left"> Behållare för text till vänster </div> <div class="right"> Behållare för text till höger </div> </div> </div> <div class="content-right"> Den högra menyn </div> </div>
Och även här, naturligtvis, CSS-syntaxen:
.teaser {
bredd: 737px;
höjd: 216px;
float: vänster;
kant: solid 1px #eee;
}
.left {
bredd: 330px;
höjd: 180px;
float: vänster;
padding: 20px;
}
.right {
bredd: 327px;
höjd: 180px;
float: vänster;
padding: 20px;
}
.content-right {
bredd: 210px;
float: höger;
padding-höger: 20px;
marginal-topp: 20px;
kant: 1px solid #eee;
}Vid slutet av den här handledningen är grundstrukturen för vår webbplats klar.
Denna grundstruktur måste nu fyllas med motsvarande innehåll. Det kommer att göras i nästa handledning.
