Övning 2. Skapa en hemsida med css i Dreamweaver.

   Öppna filen cssdw.html, om den inte är öppen.
Nu ska vi koppla div-taggarna som vi gjort, till html-dokumentet.
OBS! Se till att muspekaren finns mellan <body> och </body>.

1. Öppna Insert Div Tag. Vid Insert: välj At insertion pont. Vid Id välj container, OK.
Det ska nu stå: Content for id "container" Goes Here.

2. Öppna Insert Div Tag. Vid Insert: välj Before end of tag och <div id="container">. Vid Id välj header, OK.
Det ska nu stå: Content for id "header" Goes Here.

3. Öppna Insert Div Tag. Vid Insert: välj After tag och <div id="header">. Vid Id välj main, OK.
Det ska nu stå: Content for id "main" Goes Here.

4. Öppna Insert Div Tag. Vid Insert: välj After tag och <div id="main">. Vid Id välj footer, OK.
Det ska nu stå: Content for id "footer" Goes Here.

Nu ska vi infoga höjd och färg i div-taggarna.
Ditt ccs fönster bör se ut så här ungefär.
Ta bort alla: Content for id "........" Goes Here.

1. Markera body och byt background-color, välj t.ex #CCCCCC.

2. Markera container och välj Add Property, leta reda på height och välj 500px.

3. Markera header och välj Add Property, leta reda på height och välj 100px
Markera header och välj Add Property, leta reda på background-color och välj t.ex. #999999.

4. Markera main och välj Add Property, leta reda på height och välj 380px
Markera main och välj Add Property, leta reda på background-color och välj t.ex. #666666.

5. Markera footer och välj Add Property, leta reda på height och välj 20px
Markera footer och välj Add Property, leta reda på background-color och välj t.ex. #333333.

Nu skall vi Exportera CSS-formaten vi gjort till en css-fil.

Markera alla boxar (containar) enligt bild.

Högerklicka i markeringen och välj Move CSS Rules... Klicka för: A new style sheet OK.

Leta reda på din mapp cssdw och spara filen som: cssdw.css

Klicka även på Save all och din övning är klar! Det bör se ut så här.

Testa att göra en IFrame och Sprymeny, prova min!