Från PSD till HTML + css3.

För toppmenyn:

position:absolute;
width:[bredd]px;
height:[höjd]px;
top:0px;
margin-left:auto;
margin-right:auto;

Sen för innehållet och sidomenyerna skulle jag först lägga allt i en container-div som också har en specificerad bredd, margin left och right auto för centrering. Sedan kan du göra en div för vänstra menyn som har float:left; en div för innehållet som också har float:left; och sist den högra menyn som har float:right;

boxar, lägg in bg bilder i dem som anpassas sig efter upplösning, likaså på hela sidan, typ det lättaste?
Sen runda boxarnas kanter, border-radius: 10px; tror ja (10px kan ändras)

Du bör göra så mycket som möjligt i CSS, ja. Men bilder krävs nästan alltid för att det ska bli riktigt snyggt.

Sen så borde du lära dig att citera

Tror inte jag ser någonting på den skissen som inte kan göras med 100% CSS3.

Det vore väl i så fall loggan och de diagonala sträcken i footer och header (men jag tror sträcken skulle kunna gå att lösa de med).

Bara köra gradients, box-shadow, border-radius och sen det gamla vanliga med borders och background-color etc.

Kan slänga in ett tips om w3schools. Kanske är värt att kolla igenom.
http://www.w3schools.com/css3/default.asp

Ingen av länkarna du fungerar för mig just nu...

Fimpa så många bilder som möjligt (för att minska laddtiden för sidan).

Med andra ord gör du om sidomenyerna till divar med en border-radius. För att få menyerna "över" loggan använder du t.ex en position:absolut. z-index definierar vilket element som ska renderas överst, så det kan vara bra att komma ihåg iom att content-sektionen ligger över sidomenyerna.

Hojta om du behöver mer hjälp

Det finns ju möjlighet att göra en responsiv design (se Twitter bootstrap eller googla på "css grid system"), eller så använder du procent istället för px/em för att definiera storlekar.
Ex:
.menu {
width: 80%;
height: 60px;
position: absolute;
top: 0;
left: 10%;
}
Den koden gör så att menu-classen alltid är 80% av fönsterbredden, med en höjd på 60px och en absolut position 10% från fönsterkanten. Iofs kan man lika gärna centrera den med margin: 0 auto;

För att illustrera z-index:
<div style="position:absolute;top:0;left:0;width:100px;height:100px;background-color:#000;z-index:100;"></div>
<div style="position:absolute;top:20px;left:20px;width:100px;height:100px;background-color:#333;z-index:80;"></div>
Eller: http://jsfiddle.net/2gkKk/
Prova ändra z-index värdet för att se skillnaden
Kör man utan z-index är det det som kommer sist som hamnar överst, just FYI.

Men gör man en seriös sida i dagsläge är en responsiv design att föredra, och då är väl bootstrap den populäraste lösningen.

Z-index anger hur de positionerade elementen ska ordnas. Har du t.ex. två boxar med position: absolute; kan du m.h.a. z-index bestämma vilken som ska ligga "överst".

Nu har inte jag följt tråden, så jag kanske har missat något...men vad ska du med position: absolute; till?

En sak som kan vara bra att ha i åtanke när man arbetar med css3 och vill göra allt i det är ju kompatibilitet. Du får väga laddtiden av sidan (dvs. användandet av fler bilder) mot faktumet att alla webbläsare inte stödjer alla effekter i css3 än...