Skapa webbplats med Dreamweaver CS3 - demoserie

Jag har gjort en serie som beskriver hur man steg för steg bygger upp grunden till en enkel webbplats (den blir inte klar, men en bra bit på väg). Materialet förutsätter att du vet grunderna i hur css och html fungerar och är lite bekant med Dreamweaver. Men det är en mycket handfast steg-för-steg-genomgång av hur man bygger grundelement till en webbplats med hjälp av Dreamweaver. Du kommer snabbt igång.

I första delen finns redan div-taggar i dokumentet. (Det finns en video som visar hur man lägger in div-taggar.) Här följer innehållet i de olika videorna:

DEMO 1 - Koppla CSS-formatmallen till html-dokumentet och lägg till regler för de olika divtaggarna. Lägg in bakgrundsfärg (att använda vid layouten).

DEMO 2 - Lägg till text (Lorem Ipsum) i main, klistra in special, rubrik, lägg till bild på olika sätt, skriv in alt-text

DEMO 3 - Bestäm bredd på webbplatsen (wrapper), centrera webbplatsen (margin right,left: auto)

DEMO 4 - Lägg in bakgrundsbild. (Grafik från Photoshop kan användas som bakgrundsbild.)

DEMO 5 - Skapa länkar.

DEMO 6 - Formatera länkar. Visa som blockelement, ta bort understryking, byt färg, storlek och teckensnitt... Padding (utfyllnad) för att ge utrymme runt länkarna.

DEMO 7 - Bestäm bredd på länkmenyn. Gör menyn flytande (float). Marginal på huvudinnehåll för att gå fri från menyn. Ta bort marginal på h1 (rubrik).

DEMO 8 - Mouseover-effekt på länk, a:hover (pseudoklass), t.ex. ändra färg eller gör en kant. Även hur man kan ändra färg på ett smidigt sätt.

DEMO 9 - lägg till bakgrundsfärg i body. Använd pipett för att hämta färg från en bild. Använd färgväljaren.

DEMO 10 - Ta bort marginal i bodytaggen.

DEMO 11 - Lägg till padding (utfyllnad/"luft") runt text.

DEMO 12 - Skapa en klass. Lägg till klass i html-koden. Gör en ram runt bild. 

DEMO 13 - Flyt bild med klass, skapa marginal. Tillämpa två klasser samtidigt.

DEMO 14 - Ändra ordning på reglerna i Dreamweaver (för att få lättare att hålla reda på reglerna).

DEMO 15 -  Lite om typsnitt. Lägg till egna typsnitt till Dreamweavers typsnittslista.

DEMO 16 - Lägg till typsnitt. Em som enhet för typsnitt. Radavstånd.

DEMO 17 - Justera bildhöjd till radhöjd.