Skapa div och id
Så skapar du ett div-element och tilldelar det ett id i Dreamweaver
Skapa ett div-element
- Öppna upp den webbsida som du skapade tidigare.
- Titta i källkoden (se till att du markerat "Split View" i menyn uppe till vänster) och se och hitta taggarna <body> och </body>
Lägg till nedanstående kod mellan body-taggarna på webbsidan:
<div>
<div>Navigation / sidhuvud </div>
<div>Huvudtext</div>
<div>Sidfot</div>
</div>
Om du tar dig en titt i "Split view" igen så ser du att det har skapats 3 stycken områden som är separerade från varandra. I design-vyn illustreras begränsningsytorna med streckade linjer. Div-elementen har inga marginaler eller padding eftersom vi tog bort dessa när vi skapade stilmallen. Ett fjärde område omsluter de andra, men det går än så länge inte att se.
Förklaringar till ovanstående kod
- Det första div-elementet omsluter de andra div-elementen och kallas för en wrapper.Wrappern används oftast till att centrera de andra elementen I övrigt så kan du formatera wrappern som vilket annat element som helst med CSS. Kantlinjer, bakgrundsbilder, padding är några saker. Du kommer att ha tid att experimentera mer själv senare.
- Det andra div-elementet ska innehålla menyn. Jämför med den här sidans toppmeny.
- Det tredje elementet innehåller huvudtexten. Det är den text som du läser nu.
- Det fjärde elementet är en sidfot som kan vara bra att ha. På den här sidan är sidfoten i skrivande stund bara den lilla texten "kontakta mig på Webbdesigna.se". En bra grej att lägga i sidfoten är kontaktinfo, men inte minst ett anmälningsformulär för ett nyhetsbrev så att du kan locka tillbaka dina besökare till din sida då och då.
Tilldela div-element ett ID
Eftersom du troligtvis inte vill att menyn ska se likadan ut som själva huvudtexten, eller att huvudtexten, liksom sidfoten, ska ha en grå bakgrund, så är det bra att du ger CSS-filen en möjlighet att kunna peka ut ett visst div-element och sätta speciella regler för hur det ska formateras. Det gör du genom att ge dessa div-element varsitt namn, ett ID. Ett ID är unikt och samma ID kan inte förekomma på flera ställen på samma webbsida.
Lägg till denna kod till den tidigare och spara filen sedan:
<div id="wrapper">
<div id="sidhuvud">Navigation / sidhuvud </div>
<div id="huvudtext">Huvudtext</div>
<div id="sidfot">Sidfot</div>
</div>
Så här bör din webbsida se ut nu: HTML-version
Filer för nedladdning: HTML (.txt) CSS (.txt)
Nu har du skapat ett sätt att välja ut vissa element från CSS-filen och kan därför sätta igång med att positionera div-elementen med CSS.
Nästa artikel: Positionering och formatering
