App die bouwplan site, incl. size, margin, padding etc geeft

Hallo,

Voordat ik een website begin te bouwen, maar ik altijd eerst een bouwplan van de site, dus een overzicht van de blokken en daarin alle maten, dus ook de paddings en de margins.

Nou weet ik dat je via Firefox en de extensie webdeveloper de blokken kan outlinen maar dat gaat alleen voor de DIV’s. Ik wil dus eigenlijk een soort overzicht van alle blokelementen, zoals dit plaatje:

http://caad.arch.rwth-aachen.de/lehre/k_html_plus/theorie/files/box-model.gif

Dus: alle blokken in de site gehighlight, daarin bijvoorbeeld gestippeld de margins en de paddings en alle maten erbij.

Zou zo’n programma bestaan?

Het probleem is vaak dat wanneer ik ergens in de CSS een maat verander, ik nog een aantal andere maten moet meeveranderen. Met zo’n programma kan ik meteen zien welke.

IS het niet handiger om dat te doen voor je ook maar 1 letter HTML hebt geschreven, bijvoorbeeld door een layer in Photoshop over een mockup heen?

Zo'n programma lijkt me wel wat :?