To be brutally frank (am I ever anything but) those are what I like to call “non-viable for the web” layouts – it REEKS of being designed for print, not the web.
UNFORTUNATELY thanks to the varying layouts on every page you’re going to be blowing tons of CSS and from all the massive images wasting tons of bandwidth – again, time to kick the PSD jockey where it hurts and explain that the web is NOT print.
That said, your looking at a few extra div for the formatting, but on the whole there’s no reason you can’t have simple semantic markup for that as long as you practice separation of presentation from content.
I mean, if I was to try to turn the first image you have into a layout, the markup would probably go something like this (+/- 5%)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
lang="en"
xml:lang="en"
><head>
<meta
http-equiv="Content-Type"
content="text/html; charset=utf-8"
/>
<meta
http-equiv="Content-Language"
content="en"
/>
<link
type="text/css"
rel="stylesheet"
href="screen.css"
media="screen,projection,tv"
/>
<title>
Elite Energy
</title>
</head><body>
<div id="pageWrapper">
<h1>
<span>
Elite Energy
<span>For Business</span>
</span>
<small>Providing Green Energy Solutions</small>
<b><!-- image replacement --></b>
</h1>
<a href="#" class="topLink">View Website for Home Customers</a>
<ul id="mainMenu">
<li class="home"><a href="#">Home<span></span></a></li>
<li><a href="#">Solar Energy</a></li>
<li><a href="#">Solar Heating</a></li>
<li><a href="#">Case Studies</a></li>
<li><a href="#">FREE Consultation</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<div id="stupidBannerCrapIdProbablyDelete"></div>
<ul id="tabbedMenu">
<li><a href="#">The Solar Package</a></li>
<li><a href="#">Instant Benefits</a></li>
<li><a href="#">Minimal Sun Needed</a></li>
</ul>
<h2>How will my business benefit from an Elite Energy Installation</h2>
<p class="standout">
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
</p>
<div class="leadingBar handout">
<h2>Get Paid for Using Electricity with FiT</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<!-- .leadingBar --></div>
<div class="trailingSection">
<div class="stacksOfCash">
<h2>Get Paid for Selling Electricity with Export Tariff</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<!-- .stacksOfCash --></div>
<h2>Tax Free Wrapper for Profits</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<!-- .trailingSection --></div>
<div class="columnWrapper">
<div class="subSection">
<h2>Slash Operating Costs</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<!-- .subSection --></div>
<div class="subSection">
<h2>Slash Operating Costs</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<!-- .subSection --></div>
<div class="subSection">
<h2>Slash Operating Costs</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<!-- .subSection --></div>
<!-- .columnWrapper --></div>
<!-- #pageWrapper --></div>
<div id="footer">
<div class="elite">
Elite Energy
<small>Providing Green Energy Solutions</small>
<!-- .elite --></div>
<div class="linkList">
<h2>For Home</h2>
<ul>
<li><a href="#">Solar Electricity</a></li>
<li><a href="#">Solar Heating</a></li>
<li><a href="#">Case Studies</a></li>
</ul>
<!-- .linkList --></div>
<div class="linkList">
<h2>For Business</h2>
<ul>
<li><a href="#">Solar Electricity</a></li>
<li><a href="#">Solar Heating</a></li>
<li><a href="#">L.E.D. Lighting</a></li>
<li><a href="#">Case Studies</a></li>
</ul>
<!-- .linkList --></div>
<ul class="standalones">
<li><a href="#">Free Consultation</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<!-- #footer --></div>
</body></html>
Which yes, has a lot of div, but they’re all necessary and at 6k before links, there’s no reason for it to break the 10k mark once the proper content and links are filled in. It’s laughably small even with the comments to clearly show what’s being closed and the full indentation. (part of why I say comment and white-space stripping for deployment is usually just used to cover up bad/flawed code)
Though I’ve said it a billion times – if you have some goofy picture slapped together by a PSD jockey before you have semantic markup, your ENTIRE approach to building a website is backwards… Semantic markup of the content, layout in CSS, THEN you boot up the paint program to hang graphics on it. Slapping together a picture before you even have a logical document structure is just putting the cart before the horse – and leads you into the trap of “but I can do it in photoshop”.
Seriously, whoever came up with this “draw a pretty picture that has NOTHING to do with a working website” nonsense meets me in a dark alleyway, bad things will happen.