Följ detta flödesschema.
1. Gör endast html / markup. Använd semantiska element och gör det helt utan tanke på design, utan endast med tanke på vad som är logiskt. Ha en <div> samt ett id per modul, samt omslutare för de olika delarna, exempelvis: <div id="wrapper"><div id="header"></div><div id="content"></div><div id="footer"></div>.
Döp dina "boxar" med logiska och designbefriade namn. Exempel på dåligt namn: #right-to-header. Bättre namn: #information.
Sen med att göra html:en "designbefriad" innebär också en förändring av hur du använder bilder. Alla bilder som är designrelaterade (exempelvis logotypen) kommer du fixa med css. Så gör bara en <h1>Sidnamn</h1>, alltså det du ska använda <img> på är typ, banners, annonser, ja. Sånt som du inte egentligen skulle ändra på ifall du skulle byta design.
2. Nu gör du css, då kommer du ha en utmaning de första gångerna. Du ska nämligen (i den mån du lyckas med) göra hela designen med css. Det kan vara lite jobbigt i början. Och vissa saker kan du vara tvungen att lägga till några små klasser i html-koden i efterhand. Men ju färre sånt du behöver använda, desto bättre. Du kan kolla lite på pseudo-element som typ :after :last-child. Så kan du lösa många problem. Du kan ju dra in nån dean edwards IE js om du vill att IE ska ha stöd med det (cross-browser stöd blir lite jobbigt när man precis börjat med css).
Förövrigt är det FÖRBJUDET att använda designrelaterade taggar såsom <font> etc.
Här finns två "starta-guider" som kanske kan hjälpa, inte så nygjorda men grunden lär du dig bra där.
http://exscale.se/archives/2006/03/2...-website-pt-1/
http://exscale.se/archives/2006/04/0...-website-pt-2/
Hoppas detta hjälpte någonting, mvh