HTML & CSS Skapa en första Layout
Som nybörjare är det ju inte så kul att börja pyssla med sin första webbsida om man inte har en aaaning om hur det går till att skapa den allra enklaste layout...
Man vill ju att det ska se nåt ut för världen så fort som möjligt! 
Det är ju till exempel vanligt att på webbsidor ha en kolumn med själva innehållet och sedan till vänster om den en annan där man skriver in sidans länkar - sin länkmeny.
Här beskrivs hur man skapar en första väldigt enkel layout med två kolumner. Guiden vänder sig till absoluta nybörjare och bygger vidare på grunden som skapades under rubriken: En första Sida & Stilmall.
Det finns mycket att lära när det gäller att skapa sin webbsidas layout. Hur det går till mer utförligt får man sedan utforska närmare i de fortsatta guiderna. En förutsättning är dock att man kan grunderna i både HTML och CSS.
Inledning
Innan CSS var uppfunnet skapades ofta webbsidors layout i själva HTML-koden med hjälp av tabeller. Sidorna blev visserligen snygga - men det ställde till en hel del problem för dem med funktionshinder som fick mycket svårare att tillägna sig innehållet på sidan.
Numer när i stort sett alla har tillgång till datorer styrs snart hela vårt samhälle via webben. Alltså har det blivit mycket viktigt att alla kan ta del av webben på samma sätt!
Tabell-layouter är fortfarande det som är det vanligaste på webben men vill man göra sin sida användarvänlig ska man skapa sin layout med CSS i en Extern Stilmall!
Att skapa layuoter med CSS kan vara lite trixigt när man är nybörjare så här presenteras också en enkel tabell-layout. Men välj helst CSS-layouten - så lär du dig rätt redan från början!
Grunden
Oavsett vilken metod du använder utgår guiden från webbsida.html och stilmall.css som skapades tidigare under rubriken: En första Sida & Stilmall - med nya Teckensnitt & Färger och de Metataggar som skrevs in på föregående sida.
Så här ser HTML-dokumentet ut:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="sv"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <title>MIN WEBBSIDA</title> <meta name="author" content="Namn"> <meta name="description" content="Beskrivning."> <meta name="keywords" content="nyckelord, en fras, nyckelord"> <link rel="stylesheet" href="stilmall.css" type="text/css"> </head> <body> <h1>Huvudrubrik</h1> <p>Lorem...</p> <p>Lorem...</p> </body> </html> |
Och så här ser stilmallen ut:
body {
padding: 0; margin: 0;
margin-top: 20px; margin-left: 30px;
font-size: 100%;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
background-color: #FFFFFF;
background-image: url();
background-repeat: repeat;
}
h1 {
font-family: Georgia, "Times New Roman", serif;
color: #000000;
}
|
Här kan du testa hur sidan ser ut - öppnas i ett nytt fönster!
Sidans struktur
Den här sidan ska innehålla två kolumner:
- SIDE - Kolumn för t.ex. sidans meny
- MAIN - Kolumn för sidans huvidinnehåll
Det optimala när man skapar en layout är att sidans huvudinnehåll hamnar så tidigt som möjligt i HTML-koden. I layouterna nedan placeras alltså kolumnen main före kolumnen side i koden. Men på sidan kommer kolumnen side att visas till vänster om main.
För att kunna bestämma utseendet och placeringen av de olika delarna ska tre s.k. ID-selektorer skrivas in i stilmallen:
body {
padding: 0; margin: 0;
margin-top: 20px; margin-left: 30px;
font-size: 100%;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
background-color: #FFFFFF;
background-image: url();
background-repeat: repeat;
}
h1 {
font-family: Georgia, "Times New Roman", serif;
color: #000000;
}
#layout { }
#side { }
#main { }
|
Namnen: layout, side och main - är namn som jag hittat på. De kunde lika gärna varit: tjorven, pelle och melker. Bara man använder samma namn när man anropar koden från HTML-dokumentet och undviker Å Ä Ö. Skrållan funkar alltså inte. 
Som du ser finns det ännu inte något innehåll mellan klamrarna i de nya koderna. De olika egenskaperna som ska skrivas in ser nämligen lite olika ut beroende på vilken metod man använder! Läs vidare!
Skapa en enkel Tabell-layout
Först och främst måste själva tabellen skrivas in på sidan: webbsida.html. Det är en enkel tabell som består av en rad med två celler. Komplicerade tabell-strukturer är inte att rekommendera för design!
Det är också viktigt att ange att själva tabellen är till för just design och ingenting annat! Det anges med: summary="design" i tabellens startagg.
Förändringarna skrivs in mellan <body> och </body> - för övrigt ser HTML-dokumentet ut som tidigare!
Så här ser HTML-dokumentet ut:
<body> <table summary="design" cellspacing="0"> <tr> <td> </td> <td rowspan="2"> <h1>Huvudrubrik</h1> <p>Lorem...</p> <p>Lorem...</p></td> </tr> <tr> <td> <p>Här finns plats...</p></td> </tr> </table> </body> |
Så här funkar det:
| HTML | Förklaring |
|---|---|
<table summary="design" cellspacing="0"> |
Öppnar tabellen och den första tabell-raden. |
<td> </td> |
Skapar en tom tabell-cell |
<td rowspan="2"> |
Öppnar tabell-cellen: main. |
<h1>Huvudrubrik</h1> |
Innehållet i main. |
</td> |
Avslutar tabell-cellen: main. |
</tr> |
Stänger den första tabell-raden och öppnar den andra tabell-raden. |
<td> |
Öppnar tabell-cellen: side. |
<p>Här finns plats...</p> |
Innehållet i side. |
</td> |
Avslutar tabell-cellen: side. |
</tr> |
Avslutar den andra tabellraden och hela tabellen. |
För att sidan ska kunna stajlas i stilmallen får de olika delarna egna identiteter. De ska ha samma namn som id-selektorerna som skrevs in i stilmallen tidigare.
Så här:
<body> <table id="layout" summary="design" cellspacing="0"> <tr> <td> </td> <td id="main" rowspan="2"> <h1>Huvudrubrik</h1> <p>Lorem...</p> <p>Lorem...</p></td> </tr> <tr> <td id="side"> <p>Här finns plats...</p></td> </tr> </table> </body> |
Så här stajlas de olika delarna i stilmallen:
| CSS |
|---|
#layout { width: 98%; }
#side {
width: 22%;
vertical-align: top;
padding: 0.5em 0.5em 0.5em 0.5em;
}
#main {
vertical-align: top;
padding: 0.5em 0.5em 0.5em 0.5em;
}
|
| Förklaring: |
|
#layout
#side
#main
|
Paddingen anges här med enheten em och kommer att anpassa sig efter storleken på texten.
Här kan du testa hur sidan ser ut - med en kant runt delarna för syns skull.
Öppnas i ett nytt fönster!
Och här kan du testa - utan kant - öppnas i ett nytt fönster!
Här kan du läsa mer om hur tabeller fungerar och vad man ska tänka på om man använder tabeller för layout: HTML / Tabeller.
Skapa en enkel CSS-layout
När man skapar en CSS-layout måste man till att börja med dela in sidan i olika block. Ett block skapas med taggen <div> och dess slut-tagg: <div>. Blocken skrivs in på HTML-sidan: webbsida.html.
Förändringarna skrivs in mellan <body> och </body> - för övrigt ser HTML-dokumentet ut som tidigare!
Så här ser HTML-dokumentet ut:
<body> <div> <div> <h1>Huvudrubrik</h1> <p>Lorem...</p> <p>Lorem...</p> </div> <div> <p>Här finns plats...</p> </div> </div> </body> |
För att sidan ska kunna stajlas i stilmallen får de olika blocken egna identiteter. De ska ha samma namn som id-selektorerna som skrevs in i stilmallen tidigare.
Så här:
<body> <div id="layout"> <div id="main"> <h1>Huvudrubrik</h1> <p>Lorem...</p> <p>Lorem...</p> </div> <div id="side"> <p>Här finns plats...</p> </div> </div> </body> |
Så här funkar det:
| HTML | Förklaring |
|---|---|
<div id="layout"> |
Öppnar blocket: layout. |
<div id="main"> |
Öppnar blocket: main. |
<h1>Huvudrubrik</h1> |
Innehållet i main. |
</div> |
Avslutar blocket: main. |
<div id="side"> |
Öppnar blocket: side. |
<p>Här finns plats...</p> |
Innehållet i side. |
</div> |
Avslutar blocket: side. |
</div> |
Avslutar blocket: layout. |
Så här stajlas de olika delarna i stilmallen:
| CSS |
|---|
#layout { width: 98%; }
#side {
width: 22%;
float: left;
padding-top: 4em;
}
#main {
width: 75%;
float: right;
}
|
| Förklaring: |
|
#layout
#side
#main
|
Här behöver man inte ange padding! Utrymmet mellan blocken skapas av att de inte tar upp 100% tillsammans och att det ena justeras åt vänster och det andra åt höger.
Paddingen 4 em anger utrymmet över själva innehållet i kolumnen: side. Det gör att texten placeras lite längre ner - i linje med textinnehållet i kolumnen: main. Den anges här med enheten em och kommer att anpassa sig efter storleken på texten. Justera värdet så att det passar på din sida!
Lite till...
För att layouten ska fungera på samma sätt i alla webbläsare infogas en radbrytning i HTML-koden med taggen <br> - som också får en klass som skrivs in i stilmallen.
Radbrytningen skrivs in direkt under kolumnerna side och main.
Så här:
<body> <div id="layout"> <div id="main"> <h1>Huvudrubrik</h1> <p>Lorem...</p> <p>Lorem...</p> </div> <div id="side"> <p>Här finns plats...</p> </div> <br class="clear"> </div> </body> |
Den nya klassen skrivs in i stilmallen så här:
| CSS |
|---|
.clear { clear: both; }
|
Här kan du testa hur sidan ser ut - med en kant runt delarna för syns skull.
Öppnas i ett nytt fönster!
Och är kan du testa - utan kant - öppnas i ett nytt fönster!
Avslutningsvis
Grattis! Du har just skapat din första layout!
Här hittar du koderna i sin helhet - öppnas i ett nytt fönster!
Vandra vidare i guiderna under rubriken HTML & CSS!
På nästa sida beskrivs hur man skapar en första enkel länk-meny.
Under rubriken: LAYOUT & DESIGN kan man läsa mer om vad som gäller när man skapar sidans layout! Där finns också guider om hur det går till att skapa lite mer avancerade layouter!
