You finished your design in photoshop.
It is a work of art.
Now what?

I convert your original web designs into working websites.
Cheap, fast, and by a human.



Limited time $50/FREE special deal (see offer below).

photoshop (psd) web designs converted to XHTML, CSS, JS

Send me your design docs.
I send you back working-pure-thin-valid-accessible XHTML, CSS, JS for your custom website or ready-to-go templates and themes for blogs like WordPress or sites like Twitter. These are EXACT working versions of your designs.

Contact me today.

I need fresh portfolio material special deal
$50 special deal to first 5 2 people/companies to request deal.
1 layout/design including javascript/jQuery UI interactivity.

Rates

Convert 1 layout/design to XHTML/CSS $100
Pure markup/css template

With javascript/jQuery add $50
Includes rollovers, dynamic menus, and other UI related interactivity

Each layout in same design after first add $50/25
i.e. home layout, section index layout, content layout, etc...
Same design but different layout variants
$50 for 2nd and $25 for 3rd+

Placing and marking up content on same layouts ~$10/page
i.e. (5) pages in same 'section' layout ~$50
Not applicable for the first page of that layout

Fluid layouts add $25.

As WordPress Theme add $200.

Requests for non-framework JS quoted and billed hourly.
Special requests quoted prior to beginning work.
Prices may vary (up or down) depending on quantity and complexity of work but I find these rates cover most circumstances.

Contact me today.

Pre-flight checklist

REMEMBER: If it isn't indicated in the design docs it will not be in the deliverables. While I am a nice guy who will work with you I am ultimately not responsible for adding/creating/interpretting vague or missing design elements.

  • Design docs to send:
    • Original design(s) (layered original copy preferred)
      • PSD
      • AI
      • INDD
      • Aviary files
      • Just about anything that is clean enough to extract art from, but again layered original docs are preferred
    • Flattened mockups and samples of multiple menu/nav/element states and layouts
    • Accompanying text document indicating anything not explicitly shown in PSD
      • Active/hover states, form styling, ambiguous elements
  • What platform/framework are you using?
    • I need to know whether you are using PHP, RUBY, HTML and if there is a framework
    • If there is a framework I will deliver the ouput ready-to-go for your file structure. See File structure for common frameworks on this page
    • If you want a specific file structure different than my defaults (or I have not listed your framework yet) please be specific what your file structure is.
    • For the designers: If you don’t know what this all means then just tell me the ISP you use and what hosting plan you have and I will pick the best option.
  • Are there special layout/functionality concerns?
    • e.g. that swoopy thing needs to be in front of the menu and content on the home page but behind on every other page
  • If this is a WordPress theme...
    • What is the theme name? (e.g. BoB’s theme)
    • include in the PSD or this text file how ALL presentation layout should be handled
    • be explicit about layout for comments, default sidebars, post date/tag/category/meta information
    • anything not indicated will be given layout from the default theme based on "Kubrick" and simply styled to your site
    • If in doubt of what is required consult the Theme Template Files List of standard templates in a WordPress theme (about 3/4 way down the page).
    • I follow the WordPress Codex Theme Development Checklist for best practices as much as possible. Reviewing it might help you help me help you best.
File structure for common frameworks

These default file structures will be used based on my personal preferences for each output package unless you tell me otherwise. Note that I do not create every directory shown in the samples below. I create what is necessary to deliver the files. This is especially true of the frameworks. You will be delivered a minimal file structure so that you can in theory simply copy the entire structure into your installation for immediate use (not responsible for overwritten files).

Specific file names may vary per installation and are shown below only for reference.

Basic html

  • /_assets
    • /images/
    • /javascripts/
    • /stylesheets/
  • /index.html

PHP

  • /_application
    • /classes/
    • /helpers/
  • /_assets
    • /images/
    • /javascripts/
    • /layouts/
    • /stylesheets/
  • /index.php

PHP:CodeIgniter
Note that this filestructure requires modifying Line 43 of index.php from "application" to "../application". See more best practice tips for CodeIgniter.

  • /application
    • /views
      • /_templates/
        • /layouts/
    • /helpers/
    • /libraries/
    • and so on...
  • /assets
    • /images/
    • /js/
    • /css/
  • /system
  • /index.php

RAILS

  • /app
    • /views
      • /layouts/
        • default.html.erb
        • _partials (specify if necessary for your app)
  • /public
    • /errors/
    • /images/
    • /javascripts/
    • /stylesheets/

WordPress Theme

  • /wp-content
    • /themes
      • /your_theme
        • _application/classes/
        • _application/libraries/
        • _assets/images/
        • _assets/javascripts/
        • 404.php
        • footer.php
        • functions.php
        • header.php
        • index.php
        • page.php
        • screenshot.png
        • search.php
        • sidebar.php
        • single.php
        • style.css

Other file structure

If you have a framework not listed here or require a custom framework please create a bullet list like the ones above and be specific.

Why hire me instead of some guy on craigslist?

I like small business.
Honestly I prefer working with small business exclusively.

I have 10 years of experience operating a web and graphic design firm.
I chose to go freelance in order to pursue other projects.

I am creatively motivated, not financially driven.
I charge a reasonable rate working with people and organizations I like.

I do what I do because I enjoy it.
You do too.

Why my rates are so low

I need the money.
And times are tough.

Freelancer partnered with other freelancers. No office. No overhead.

The economy hit me hard like a lot of folks. Many professional decisions in the past few years failed to go as hoped, and now you can benefit from my financial woes with affordable web and graphic design and a variety of new services and sites I am currently building. Heck, if things keep going the way they are I will consider offers to mow lawns and shovel driveways.

And if you don’t think my rates are low consider bartering or sending me your proposal. I am very open to suggestions.

You submit your design

  • Photoshop
  • Illustrator
  • Aviary files
  • Any uncompressed full color image format

You Specify

I deliver

  • Valid XTHML template(s)
  • W3C Valid XHTML 1.0 Transitional doctype (unless you specify otherwise)
  • External CSS stylesheet(s)
  • External unobtrusive JS
  • Includes/Partials to work for your platform
  • Cross browser compatibility with IE 6+, Firefox, Safari, Chrome, Opera
  • SEO friendly layout

Contact me today.

61-zoe-0-zoe-9
619-630-9639

email

facebook
twitter
stumbleupon

PSD to CSS examples

Compare the original psd to the markup code and rendered source.

Tristan Kallas Photogrpahy
Site design by Ty Adler of ROCKHEAVY.
PSD to XTHML/CSS/JS/PHP

Comparison of psd to html/css output
tristankallas.com/index.php
View markup
<?php
    $head_title = 'Tristan Kallas Photography';
    $head_meta_description = '';
    $head_meta_keywords = '';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <?php include $_SERVER['DOCUMENT_ROOT'] . '/_application/_layouts/_head.php'; ?>
</head>

<body>

<div id="doc" class="home">
<?php include $_SERVER['DOCUMENT_ROOT'] . '/_application/_layouts/_hd.php'; ?>
<div id="bd">
    
    <div class="scrollables home_scrollable">
        <!-- <div class="scrollables_header"></div> -->
        <div class="scrollables_scrollable"> 
            <div class="scroll_items"> 
                <div class='scroll_item'><img src="/_assets/images/layouts/home/slideshow-bw-swimsuit.jpg" alt="" /></div>
                <div class='scroll_item'><img src="/_assets/images/layouts/home/slideshow-turquoise-lingerie-swimsuit.jpg" alt="" /></div>
                <div class='scroll_item'><img src="/_assets/images/layouts/home/slideshow-bw-jean-bolero.jpg" alt="" /></div>
            </div>
        </div>
        <!-- <div class="scrollables_nav"></div> -->
        <div class="scrollables_next" title="Scroll next">»</div>
        <div class="scrollables_previous" title="Scroll previous">«</div>
        <!-- <div class="scrollables_footer"></div> -->
    </div>
    
</div>
<?php include $_SERVER['DOCUMENT_ROOT'] . '/_application/_layouts/_ft.php'; ?>
</div>

</body>
</html>
View rendered source
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"  />
<meta content="" name="description" />
<meta content="" name="keywords" />

<title>Tristan Kallas Photography</title>

<link rel="stylesheet" media="all" type="text/css" href="/_assets/stylesheets/style.css" />
<!--[if lte IE 8]>
<link rel='stylesheet' id='style_ie6-7-css'  href='/_assets/stylesheets/style_ie.css?ver=0.0.1' type='text/css' media='' />
<![endif]-->


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type='text/javascript' src='/_assets/javascripts/jquery/jquery.tools.min.js?ver=0.1'></script>
<script type='text/javascript' src='/_assets/javascripts/jquery/jquery.fancybox-1.3.0.pack.js?ver=1.3'></script>
<script type="text/javascript" src="/_assets/javascripts/application.js"></script>
</head>

<body>

<div id="doc" class="home">
<div id="hd">
    <ul id="hd_nav">
        <li class="home"><a href="/" title="Home"> </a></li>
        <li class="about"><a href="/about" title="About Tristan Kallas Photography" class="home"> </a></li>

        <li class="portfolio"><a href="/portfolio" title="Portfolio of Tristan Kallas"> </a></li>
        <li class="clients"><a href="/clients" title="Client list of Tristan Kallas Photography"> </a></li>
        <li class="contact"><a href="/contact" title="Contact and book Tristan Kallas Photography"> </a></li>
    </ul>
</div>
<div id="bd">
    
    <div class="scrollables home_scrollable">
        <!-- <div class="scrollables_header"></div> -->
        <div class="scrollables_scrollable"> 
            <div class="scroll_items"> 
                <div class='scroll_item'><img src="/_assets/images/layouts/home/slideshow-bw-swimsuit.jpg" alt="" /></div>

                <div class='scroll_item'><img src="/_assets/images/layouts/home/slideshow-turquoise-lingerie-swimsuit.jpg" alt="" /></div>
                <div class='scroll_item'><img src="/_assets/images/layouts/home/slideshow-bw-jean-bolero.jpg" alt="" /></div>
            </div>
        </div>
        <!-- <div class="scrollables_nav"></div> -->
        <div class="scrollables_next" title="Scroll next">»</div>
        <div class="scrollables_previous" title="Scroll previous">«</div>
        <!-- <div class="scrollables_footer"></div> -->
    </div>

    
</div>
<div id="ft">
    Copyright © 2010, Tristan Kallas All Rights Reserved<br />
    <a href="http://rockheavylifestyle.com/">Design by Ty Adler of ROCKHEAVY</a><br />
    <a href="http://beingzoe.com/">psd to xhtml/css/js/php by zoe somebody</a>.
</div>
</div>

</body>
</html>

ROCKHEAVY Lifestyle Clothing Company
Site design by Ty Adler of ROCKHEAVY. PSD to XTHML/CSS/WPtheme.
Custom shortcodes and functions for controlling media uploads, featured content, slideshows.

Comparison of psd to html/css output
rockheavylifestyle.com/home.php
View markup
<?php
/**
 * @package WordPress
 * @subpackage rockheavy_theme
 * 
 * Template Name: Home
 */

get_header(); 
?>

<div id="bd">

<div class="scrollables home_scrollable">
    <!-- <div class="scrollables_header"></div> -->
    <div class="scrollables_scrollable"> 
        <div class="scroll_items"> 
            <?php
            $slideshow_home = get_post( $post_id = get_option( 'rh_slideshow_home_page_id', '0' ), 'object' );
            echo $slideshow_home->post_content;
            ?>
        </div>
    </div>
    <!-- <div class="scrollables_nav"></div> -->
    <div class="scrollables_next" title="Scroll next">»</div>
    <div class="scrollables_previous" title="Scroll previous">«</div>
    <!-- <div class="scrollables_footer"></div> -->
    </div>

<div id="promo_column">
    <div id="feature_product" class="featured_box">
        <div class="header"></div>
        <div class="content">
            <?php
            $featured_product = get_post( $post_id = get_option( 'rh_featured_product_home_page_id', '0' ), 'object' );
            echo $featured_product->post_content;
            ?>
        </div>
    </div>
    <div id="feature_media" class="featured_box">
        <div class="header"></div>
        <div class="content recent_thumbs">
            <?php echo recent_attachments( get_option( 'rh_new_media_page_id', '0' ), '2', 'Thumb Home', 'lightbox', '', ''); ?>
        </div>
    </div>
    <div id="feature_blog" class="featured_box">
        <div class="header"></div>
        <div class="content">
            <ul>
                <?php wp_get_archives('title_li=&type=postbypost&limit=10'); ?>
            </ul>
        </div>
    </div>
</div>

<div id="info_column">
    <div id="feature_twitter_feed" class="featured_box">
        <div class="header"></div>
        <div class="content">
            <ul id="twitter_update_list">
                <li>Getting tweets!</li>
            </ul>
        </div>
    </div>
    <div class="featured_box">
        <img src="<?php bloginfo('template_url'); ?>/_assets/images/ads/shop-online-home.jpg" alt="" id="shoponlinehome" usemap="#m_shoponlinehome" alt="" />
        <map name="m_shoponlinehome" id="m_shoponlinehome">
            <area shape="rect" coords="106,0,391,362" href="http://rockheavylifestyle.com/shop/" title="BUY ROCKHEAVY apparel online" alt="BUY ROCKHEAVY apparel online" />
            <area shape="rect" coords="0,0,99,362" href="http://rockheavylifestyle.com/shop/index.php?main_page=index&cPath=4" title="Buy ONE OF A KIND ROCKHEAVY" alt="Buy ONE OF A KIND ROCKHEAVY" />
        </map>
    </div>
</div>

<div class="clear"> </div>

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php the_content('<p class="serif">Read the rest of this page »</p>'); ?>
<?php endwhile; endif; ?>

</div>

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>     
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/rockh3avy.json?callback=twitterCallback2&count=15"></script>
<?php get_footer(); ?>
View rendered source
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head profile="http://gmpg.org/xfn/11">

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="Home. One of a kind" />
<meta name="keywords" content="" />

<title> ROCKHEAVY "Don't be different.. Be ONE OF A KIND."</title>

<link rel="pingback" href="http://rockheavylifestyle.com/t20x9/xmlrpc.php" />
<link rel="alternate" type="application/rss+xml" title="ROCKHEAVY "Don't be different.. Be ONE OF A KIND." » Feed" href="http://rockheavylifestyle.com/t20x9/feed/" />
<link rel="alternate" type="application/rss+xml" title="ROCKHEAVY "Don't be different.. Be ONE OF A KIND." » Comments Feed" href="http://rockheavylifestyle.com/t20x9/comments/feed/" />
<link rel="alternate" type="application/rss+xml" title="ROCKHEAVY "Don't be different.. Be ONE OF A KIND." » Home Comments Feed" href="http://rockheavylifestyle.com/t20x9/feed/" />
<link rel='stylesheet' id='style-css'  href='http://rockheavylifestyle.com/t20x9/wp-content/themes/rockheavy/style.css?ver=0.1' type='text/css' media='all' />
<!--[if lte IE 7]>
<link rel='stylesheet' id='style_ie6-7-css'  href='http://rockheavylifestyle.com/t20x9/wp-content/themes/rockheavy/style_ie6-7.css?ver=2.9.2' type='text/css' media='' />
<![endif]-->

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=2.9.2'></script>
<script type='text/javascript' src='http://rockheavylifestyle.com/t20x9/wp-content/themes/rockheavy/_assets/javascripts/jquery/jquery.tools.min.js?ver=0.1'></script>
<script type='text/javascript' src='http://rockheavylifestyle.com/t20x9/wp-content/themes/rockheavy/_assets/javascripts/jquery/jquery.fancybox-1.3.0.pack.js?ver=1.3'></script>
<script type='text/javascript' src='http://rockheavylifestyle.com/t20x9/wp-content/themes/rockheavy/_assets/javascripts/application.js?ver=0.1'></script>
<link rel='index' title='ROCKHEAVY "Don't be different.. Be ONE OF A KIND."' href='http://rockheavylifestyle.com/t20x9' />
<link rel='canonical' href='http://rockheavylifestyle.com/t20x9' />
	<style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style>



</head>

<body class="home page page-id-3 page-parent page-template page-template-template_home-php logged-in">

<div id="doc" class="home clearfix">
<div id="hd">
    <!--
<h1><a href="http://rockheavylifestyle.com/t20x9/" title="Home">ROCKHEAVY "Don't be different.. Be ONE OF A KIND."</a></h1>
<p>One of a kind</p>
<a href="http://rockheavylifestyle.com/t20x9/" title="Home"><img src="http://rockheavylifestyle.com/t20x9/wp-content/themes/rockheavy/_assets/images/transparent.png" alt="" /></a>
	<li class="cat-item cat-item-1"><a href="http://rockheavylifestyle.com/t20x9/category/uncategorized/" title="View all posts filed under Uncategorized">Uncategorized</a>
</li>
-->
<form id="mailing_list_signup" action="/t20x9/mailing-list/" method="post">
    <input type="image" id="subscribe_submit" src="http://rockheavylifestyle.com/t20x9/wp-content/themes/rockheavy/_assets/images/layouts/form.submit-small.png" />    
    <input type="text" id="subscribe_email" name="subscribe_email" value="" />
    <input type="hidden" id="subscribe_or" name="subscribe_or" value="SUBSCRIBE" />
    
</form>
<div id="hd_xtra_action">
    <img name="btnhdxtraaction2" src="http://rockheavylifestyle.com/t20x9/wp-content/themes/rockheavy/_assets/images/layouts/btn.hd.xtra-action2.png" id="btnhdxtraaction2" usemap="#m_btnhdxtraaction2" alt="ROCKHEAVY" />

    <map name="m_btnhdxtraaction2" id="m_btnhdxtraaction2">
        <area shape="rect" coords="27,122,170,149" href="/t20x9/media/" title="ROCKHEAVY art and lifestyle" alt="ROCKHEAVY art and lifestyle" />
        <area shape="rect" coords="52,89,170,116" href="/t20x9/retail-locations" title="Buy ROCKHEAVY at NO FEAR and other retail stores" alt="Buy ROCKHEAVY at NO FEAR and other retail stores" />
        <area shape="rect" coords="122,53,170,84" href="/t20x9/blog" alt="" />
        <area shape="rect" coords="9,10,46,46" href="http://rockheavylifestyle.com/t20x9/feed/" alt="SUBSCRIBE to ROCKHEAVY" />
        <area shape="rect" coords="134,10,170,46" href="http://myspace.com/rockh3avy" title="Check the ROCKHEAVY Lifestyle scene at MySpace" alt="Check the ROCKHEAVY Lifestyle scene at MySpace" />
        <area shape="rect" coords="93,10,129,46" href="#fb" title="Become a fan of ROCKHEAVY Lifestyle at Facebook" alt="Become a fan of ROCKHEAVY Lifestyle at Facebook" />
        <area shape="rect" coords="52,10,88,46" href="http://twitter.com/rockh3avy" title="Follow ROCKHEAVY Lifestyle on Twitter" alt="Follow ROCKHEAVY Lifestyle on Twitter" />
    </map>

</div>
<ul id="nav">
    <li class="home"><a href="http://rockheavylifestyle.com/t20x9/"></a></li>
    <li class="shop"><a href="/shop/"></a></li>
    <li class="visionaries"><a href="http://rockheavylifestyle.com/t20x9/visionaries"></a></li>
    <li class="about"><a href="http://rockheavylifestyle.com/t20x9/about"></a></li>
    <li class="media"><a href="http://rockheavylifestyle.com/t20x9/media"></a></li>
    <li class="contact"><a href="http://rockheavylifestyle.com/t20x9/contact"></a></li>
</ul>
</div>

<div id="bd">

<div class="scrollables home_scrollable">
    <!-- <div class="scrollables_header"></div> -->
    <div class="scrollables_scrollable"> 
        <div class="scroll_items"> 
            <div class='scroll_item'><img src="http://rockheavylifestyle.com/t20x9/wp-content/uploads/2010/06/RH-AVA-NOFEAR1.jpg" alt="" title="RH-AVA-NOFEAR1" width="750" height="350" class="alignnone size-full wp-image-58" /></div>
<div class='scroll_item'><a href="http://twitter.com/ROCKH3AVY" target="_blank"><img src="http://rockheavylifestyle.com/t20x9/wp-content/uploads/2010/06/RH-twitad1-HM.jpg" alt="" title="RH-twitad1-HM" width="750" height="350" class="alignnone size-full wp-image-59" /></a></div>
<div class='scroll_item'><img src="http://rockheavylifestyle.com/t20x9/wp-content/uploads/2010/06/RH-LESSTLKad1-HM.jpg" alt="" title="RH-LESSTLKad1-HM" width="750" height="350" class="alignnone size-full wp-image-63" /></div>
<div class='scroll_item'><img src="http://rockheavylifestyle.com/t20x9/wp-content/uploads/2010/06/RH-DODad1-HM.jpg" alt="" title="RH-DODad1-HM" width="750" height="350" class="alignnone size-full wp-image-64" /></div>        </div>
    </div>
    <!-- <div class="scrollables_nav"></div> -->

    <div class="scrollables_next" title="Scroll next">»</div>
    <div class="scrollables_previous" title="Scroll previous">«</div>
    <!-- <div class="scrollables_footer"></div> -->
    </div>

<div id="promo_column">
    <div id="feature_product" class="featured_box">
        <div class="header"></div>
        <div class="content">
            <a href="http://rockheavylifestyle.com/shop/index.php?main_page=product_info&products_id=10"><img class="alignnone size-full wp-image-86" title="FT-10k-1" src="http://rockheavylifestyle.com/t20x9/wp-content/uploads/2010/06/FT-10k-1.jpg" alt="" width="512" height="240" /></a>        </div>

    </div>
    <div id="feature_media" class="featured_box">
        <div class="header"></div>
        <div class="content recent_thumbs">
            <a href="http://rockheavylifestyle.com/t20x9/wp-content/uploads/2010/06/RH-tymansion.jpg" class="lightboxed" rel="gallery"><img width="225" height="225" src="http://rockheavylifestyle.com/t20x9/wp-content/uploads/2010/06/RH-tymansion-225x225.jpg" class="attachment-Thumb Home" alt="" title="RH-tymansion" /></a><a href="http://rockheavylifestyle.com/t20x9/wp-content/uploads/2010/06/RHvanessa1.1.jpg" class="lightboxed" rel="gallery"><img width="225" height="225" src="http://rockheavylifestyle.com/t20x9/wp-content/uploads/2010/06/RHvanessa1.1-225x225.jpg" class="attachment-Thumb Home" alt="" title="RHvanessa1.1" /></a>        </div>
    </div>
    <div id="feature_blog" class="featured_box">
        <div class="header"></div>

        <div class="content">
            <ul>
                	<li><a href='http://rockheavylifestyle.com/t20x9/2010/06/14/rockheavy-at-nofear/' title='ROCKHEAVY AT NOFEAR'>ROCKHEAVY AT NOFEAR</a></li>
	<li><a href='http://rockheavylifestyle.com/t20x9/2010/06/14/welcome/' title='WELCOME!'>WELCOME!</a></li>
            </ul>
        </div>
    </div>
</div>

<div id="info_column">
    <div id="feature_twitter_feed" class="featured_box">
        <div class="header"></div>
        <div class="content">
            <ul id="twitter_update_list">
                <li>Getting tweets!</li>
            </ul>
        </div>

    </div>
    <div class="featured_box">
        <img src="http://rockheavylifestyle.com/t20x9/wp-content/themes/rockheavy/_assets/images/ads/shop-online-home.jpg" alt="" id="shoponlinehome" usemap="#m_shoponlinehome" alt="" />
        <map name="m_shoponlinehome" id="m_shoponlinehome">
            <area shape="rect" coords="106,0,391,362" href="http://rockheavylifestyle.com/shop/" title="BUY ROCKHEAVY apparel online" alt="BUY ROCKHEAVY apparel online" />
            <area shape="rect" coords="0,0,99,362" href="http://rockheavylifestyle.com/shop/index.php?main_page=index&cPath=4" title="Buy ONE OF A KIND ROCKHEAVY" alt="Buy ONE OF A KIND ROCKHEAVY" />
        </map>
    </div>
</div>

<div class="clear"> </div>


</div>

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>     
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/rockh3avy.json?callback=twitterCallback2&count=15"></script>
<div id="ft">
    <div>
    Copyright © 2010, ROCKHEAVY All Rights Reserved<br />

    Design by Ty Adler. <a href="http://beingzoe.com/">WordPress Theme by zoe somebody</a>.
</div>

    </div><!-- close #ft -->
</div><!-- close #doc -->

</body>
</html>

Seniors' Choice Handyman Service
Site design by Jordan & Jordan Marketing. Exact PSD to XHTML/CSS/WPtheme.
Custom functions for creating Menu/submenus and footer links.

Comparison of psd to html/css output
seniorschoicehandyman.com/home.php
View markup
MARKUP NOTE: The home page was actually an empty WP template 
to give the site owners flexibility later if they decided
they wanted a different home page. The markup below includes
the html provided to launch the site. It's just an image map
so nothing special happening here but showing the original 
markup didn't make much sense if I were simply to show you 
a WP LOOP ;)
<?php
/*
Template Name: home_page
*/

get_header(); 
?>

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>


<div class="align_center">
<img src="wp-content/themes/seniors_choice/images/splash.seniors-choice-big-buttons.jpg" usemap="#big_button" alt="" /><map name="big_button" id="big_button">
<area shape="rect" coords="578,166,853,308" href="#CONTACT_LINK" alt="Contact Seniors' Choice handyman service" title="Contact Seniors' Choice handyman service" />
<area shape="rect" coords="578,7,853,150" href="#RESOURCES_LINK" alt="Get helpful handy home maintenance tips and information from Seniors' Choice" title="Get helpful handy home maintenance tips and information from Seniors' Choice" />
<area shape="rect" coords="289,165,565,308" href="#WHATS_NEW_BLOG_LINK" alt="Read the latest news and happenings with Seniors' Choice handyman service." title="Read the latest news and happenings with Seniors' Choice handyman service." />
<area shape="rect" coords="289,7,565,150" href="#WHY_CHOOSE_US_LINK" alt="With so many handyman services out there how do you know who to trust" title="With so many handyman services out there how do you know who to trust" />
<area shape="rect" coords="0,165,276,307" href="#QA_LINK" alt="Get answers to commonly asked questions about maintaining and fixing up your home." title="Get answers to commonly asked questions about maintaining and fixing up your home." />
<area shape="rect" coords="0,9,275,150" href="#FIX_IT_SERVICES_LINK" alt="See a rundown of our fix-it handyman services" title="See a rundown of our fix-it handyman services" />
</map>
</div>


<?php endwhile; endif; ?>

<?php get_footer(); ?>
View rendered source
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head profile="http://gmpg.org/xfn/11">

<title>Seniors' Choice Handyman Services</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="Home Page. " />
<meta name="keywords" content="" />

<link rel="stylesheet" href="http://seniorschoicehandyman.com/wp-content/themes/seniors_choice/style.css" type="text/css" media="all" />
<!--[if IE 7]>
	<link rel="stylesheet" type="text/css" href="http://seniorschoicehandyman.com/wp-content/themes/seniors_choice/ie7.css" media="all" />
<![endif]-->

<link rel="pingback" href="http://seniorschoicehandyman.com/xmlrpc.php" />
<link rel="alternate" type="application/rss+xml" title="Seniors' Choice Handyman » Feed" href="http://seniorschoicehandyman.com/feed/" />
<link rel="alternate" type="application/rss+xml" title="Seniors' Choice Handyman » Comments Feed" href="http://seniorschoicehandyman.com/comments/feed/" />

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=2.9.2'></script>
<script type='text/javascript' src='http://seniorschoicehandyman.com/wp-content/themes/seniors_choice/javascripts/application.js?ver=0.1'></script>
<link rel='index' title='Seniors' Choice Handyman' href='http://seniorschoicehandyman.com' />

<!-- All in One SEO Pack 1.6.10.2 by Michael Torbert of Semper Fi Web Design[-1,-1] -->
<meta name="description" content="Seniors' Choice Handyman Services offers plumbing, electrical, safety ramps, stairlifts, grab bars, painting, drywall and general handyman work." />
<meta name="keywords" content="Seniors Choice Handyman, caryn leventhal, plumbing, oceanside, carlsbad, san diego, encinitas, solana beach, ca, california, la jolla, vista, san marcos, escondido, poway" />
<link rel="canonical" href="http://seniorschoicehandyman.com" />
<!-- /all in one seo pack -->

</head>
<body class="home page page-id-43 page-template page-template-home_page-php">

<div id="doc">
<div id="hd">

    <div id="header">
        <a href="http://seniorschoicehandyman.com/" title="Return to the home page of Senior"s Choice handyman services"><img src="http://seniorschoicehandyman.com/wp-content/themes/seniors_choice/images/bg-masthead.png" alt="Seniors CHOICE professional handyman services" /></a>
    </div>
<div class='menu clearfix'>
<ul>
<li id='page_link_8'>
<a href='http://seniorschoicehandyman.com/?page_id=3'>"Fix It" Services</a>
<ul class='submenu'><li><a href='http://seniorschoicehandyman.com/fix-it-services/plumbing/'>Plumbing</a></li></ul></li>
<li id='page_link_9'>
<a href='http://seniorschoicehandyman.com/?page_id=4'>Why Choose Us?</a>

<ul class='submenu'><li><a href='http://seniorschoicehandyman.com/why-choose-us/our-story/'>Our Story</a></li><li><a href='http://seniorschoicehandyman.com/why-choose-us/client-profiles/'>Client Profiles</a></li><li><a href='http://seniorschoicehandyman.com/why-choose-us/testimonials/'>Testimonials</a></li><li><a href='http://seniorschoicehandyman.com/why-choose-us/photo-gallery/'>Photo Gallery</a></li></ul></li>
<li id='page_link_10'>
<a href='http://seniorschoicehandyman.com/?page_id=10'>Q & A</a>
</li>
<li id='page_link_11'>
<a href='http://seniorschoicehandyman.com/?page_id=11'>Resources</a>
<ul class='submenu'><li><a href='http://seniorschoicehandyman.com/resources/for-seniors/'>For Seniors</a></li><li><a href='http://seniorschoicehandyman.com/resources/safety-tips/'>Safety Tips</a></li><li><a href='http://seniorschoicehandyman.com/resources/our-friends/'>Our Friends</a></li></ul></li>

<li id='page_link_12'>
<a href='http://seniorschoicehandyman.com/?page_id=12'>What's New?</a>
</li>
<li id='page_link_13'>
<a href='http://seniorschoicehandyman.com/?page_id=14'>Corporate</a>
<ul class='submenu'><li><a href='http://seniorschoicehandyman.com/corporate/c-l-maintenance/'>C & L Maintenance</a></li><li><a href='http://seniorschoicehandyman.com/corporate/business-opportunities/'>Business Opportunities</a></li><li><a href='http://seniorschoicehandyman.com/corporate/our-partners/'>Our Partners</a></li></ul></li>
<li id='page_link_14'>
<a href='http://seniorschoicehandyman.com/?page_id=17'>Contact Us</a>
</li>

</ul>
</div>
</div>
<div id="bd">

<div class="align_center">
<img src="wp-content/themes/seniors_choice/images/splash.seniors-choice-big-buttons.jpg" usemap="#big_button" alt="" /><br />
<map name="big_button" id="big_button">
<area shape="rect" coords="578,166,853,308" href="?page_id=17" alt="Contact Seniors' Choice handyman service" title="Contact Seniors' Choice handyman service" />
<area shape="rect" coords="578,7,853,150" href="?page_id=11" alt="Get helpful handy home maintenance tips and information from Seniors' Choice" title="Get helpful handy home maintenance tips and information from Seniors' Choice" />
<area shape="rect" coords="289,165,565,308" href="?page_id=12" alt="Read the latest news and happenings with Seniors' Choice handyman service." title="Read the latest news and happenings with Seniors' Choice handyman service." />
<area shape="rect" coords="289,7,565,150" href="?page_id=4" alt="With so many handyman services out there how do you know who to trust" title="With so many handyman services out there how do you know who to trust" />
<area shape="rect" coords="0,165,276,307" href="?page_id=10" alt="Get answers to commonly asked questions about maintaining and fixing up your home." title="Get answers to commonly asked questions about maintaining and fixing up your home." />
<area shape="rect" coords="0,9,275,150" href="?page_id=3" alt="See a rundown of our fix-it handyman services" title="See a rundown of our fix-it handyman services" />
</map>
</div>

<div id="ft" role="contentinfo">
    <div class="menu">
        <a href='http://seniorschoicehandyman.com/?page_id=3'>"Fix It" Services</a>
 | <a href='http://seniorschoicehandyman.com/?page_id=4'>Why Choose Us?</a>
 | <a href='http://seniorschoicehandyman.com/?page_id=10'>Q & A</a>

 | <a href='http://seniorschoicehandyman.com/?page_id=11'>Resources</a>
 | <a href='http://seniorschoicehandyman.com/?page_id=12'>What's New?</a>
 | <a href='http://seniorschoicehandyman.com/?page_id=14'>Corporate</a>
 | <a href='http://seniorschoicehandyman.com/?page_id=17'>Contact Us</a>

    </div>
    <div id="credit_cards">
        <img src="http://seniorschoicehandyman.com/wp-content/themes/seniors_choice/images/icon-credit-cards.png" alt="Seniors CHOICE handyman service accepts visa, mastercard, discover, and american express credit cards" />
    </div>
    <div>
        <a href="http://www.linkedin.com/pub/caryn-leventhal/5/546/7a1" title="Connect with Seniors Choice handyman service on LinkedIn"><img src="http://seniorschoicehandyman.com/wp-content/themes/seniors_choice/images/icon-socialized-linkedin.png" alt="Linked in" /></a>
        <a href="http://twitter.com/seniorschoice" title="Follow Seniors Choice handyman service on Twitter"><img src="http://seniorschoicehandyman.com/wp-content/themes/seniors_choice/images/icon-socialized-twitter.png" alt="Twitter" /></a>
        <a href="http://www.youtube.com/user/SeniorsChoiceHndyman" title="Watch Seniors Choice household maintenance tips at YouTube"><img src="http://seniorschoicehandyman.com/wp-content/themes/seniors_choice/images/icon-socialized-youtube.png" alt="YouTube" /></a>
        <a href="http://www.facebook.com/pages/Seniors-Choice-Professional-Handyman-Service/124472500896267?ref=ts" title="Become a fan of Seniors Choice handyman service at Facebook"><img src="http://seniorschoicehandyman.com/wp-content/themes/seniors_choice/images/icon-socialized-facebook.png" alt="Facebook" /></a>

    </div>
    <div>
        Copyright © 2010, C & L Maintenance Solutions, Inc.<br />
        All Rights Reserved
    </div>
</div><!-- close #ft -->
</div><!-- close #bd -->
</div><!-- close #doc -->


</body>
</html>
Comparison of psd to html/css output
http://seniorschoicehandyman.com/?page_id=12
View markup
MARKUP NOTE: I've got to think of another way to show this.
As above I am left showing a basically empty template and
the WordPress Loop, but I don't want to show every included 
template on these. This will do for now. :(
<?php
/**
 * @package WordPress
 * @subpackage seniors_choice
 */

get_header(); 

?>

<div id="content">
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
		<div class="post" id="post-<?php the_ID(); ?>">
		<h2><?php the_title(); ?></h2>
			<div class="entry">
				<?php the_content('<p class="serif">Read the rest of this page »</p>'); ?>

				<?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>

			</div>
		</div>
		<?php endwhile; endif; ?>
	<?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?>

</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
View rendered source
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head profile="http://gmpg.org/xfn/11">

<title>What’s New? | Seniors' Choice Handyman</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />

<link rel="stylesheet" href="http://seniorschoicehandyman.com/wp-content/themes/seniors_choice/style.css" type="text/css" media="all" />
<!--[if IE 7]>
	<link rel="stylesheet" type="text/css" href="http://seniorschoicehandyman.com/wp-content/themes/seniors_choice/ie7.css" media="all" />
<![endif]-->

<link rel="pingback" href="http://seniorschoicehandyman.com/xmlrpc.php" />
<link rel="alternate" type="application/rss+xml" title="Seniors' Choice Handyman » Feed" href="http://seniorschoicehandyman.com/feed/" />
<link rel="alternate" type="application/rss+xml" title="Seniors' Choice Handyman » Comments Feed" href="http://seniorschoicehandyman.com/comments/feed/" />

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=2.9.2'></script>
<script type='text/javascript' src='http://seniorschoicehandyman.com/wp-content/themes/seniors_choice/javascripts/application.js?ver=0.1'></script>
<link rel='index' title='Seniors' Choice Handyman' href='http://seniorschoicehandyman.com' />

<!-- All in One SEO Pack 1.6.10.2 by Michael Torbert of Semper Fi Web Design[-1,-1] -->

<link rel="canonical" href="http://seniorschoicehandyman.com/whats-new/" />
<!-- /all in one seo pack -->

</head>
<body class="blog">

<div id="doc">
<div id="hd">
    <div id="header">

        <a href="http://seniorschoicehandyman.com/" title="Return to the home page of Senior"s Choice handyman services"><img src="http://seniorschoicehandyman.com/wp-content/themes/seniors_choice/images/bg-masthead.png" alt="Seniors CHOICE professional handyman services" /></a>
    </div>
<div class='menu clearfix'>
<ul>
<li id='page_link_8'>
<a href='http://seniorschoicehandyman.com/?page_id=3'>"Fix It" Services</a>
<ul class='submenu'><li><a href='http://seniorschoicehandyman.com/fix-it-services/plumbing/'>Plumbing</a></li></ul></li>
<li id='page_link_9'>
<a href='http://seniorschoicehandyman.com/?page_id=4'>Why Choose Us?</a>
<ul class='submenu'><li><a href='http://seniorschoicehandyman.com/why-choose-us/our-story/'>Our Story</a></li><li><a href='http://seniorschoicehandyman.com/why-choose-us/client-profiles/'>Client Profiles</a></li><li><a href='http://seniorschoicehandyman.com/why-choose-us/testimonials/'>Testimonials</a></li><li><a href='http://seniorschoicehandyman.com/why-choose-us/photo-gallery/'>Photo Gallery</a></li></ul></li>

<li id='page_link_10'>
<a href='http://seniorschoicehandyman.com/?page_id=10'>Q & A</a>
</li>
<li id='page_link_11'>
<a href='http://seniorschoicehandyman.com/?page_id=11'>Resources</a>
<ul class='submenu'><li><a href='http://seniorschoicehandyman.com/resources/for-seniors/'>For Seniors</a></li><li><a href='http://seniorschoicehandyman.com/resources/safety-tips/'>Safety Tips</a></li><li><a href='http://seniorschoicehandyman.com/resources/our-friends/'>Our Friends</a></li></ul></li>
<li id='page_link_12'>
<a href='http://seniorschoicehandyman.com/?page_id=12'>What's New?</a>

</li>
<li id='page_link_13'>
<a href='http://seniorschoicehandyman.com/?page_id=14'>Corporate</a>
<ul class='submenu'><li><a href='http://seniorschoicehandyman.com/corporate/c-l-maintenance/'>C & L Maintenance</a></li><li><a href='http://seniorschoicehandyman.com/corporate/business-opportunities/'>Business Opportunities</a></li><li><a href='http://seniorschoicehandyman.com/corporate/our-partners/'>Our Partners</a></li></ul></li>
<li id='page_link_14'>
<a href='http://seniorschoicehandyman.com/?page_id=17'>Contact Us</a>
</li>
</ul>
</div>
</div>
<div id="bd">

<div id="content">
            <div class="post-1 post hentry category-uncategorized" id="post-1">
                <h2>
                    <a href="http://seniorschoicehandyman.com/uncategorized/hello-world/" rel="bookmark" title="Permanent Link to Our new website">Our new website</a>
                </h2>
                <small>May 24th, 2010 <!-- by Caryn Leventhal --></small>

                <div class="entry">

                    <p>We are so very excited and grateful for our new wordpress site.</p>
<p>We are in the process of adding content… so be sure to check back often.</p>
<p>Let us know what you think so far!</p>
<p><a href="http://seniorschoicehandyman.com/wp-content/uploads/2010/05/100108-SrsChoice-WEB-MockUp-03-HOME.jpg"><img class="size-medium wp-image-83 alignnone" title="100108-SrsChoice-WEB-MockUp-03-HOME" src="http://seniorschoicehandyman.com/wp-content/uploads/2010/05/100108-SrsChoice-WEB-MockUp-03-HOME-e1274910379396-300x245.jpg" alt="" width="300" height="245" /></a></p>
                </div>

                <p class="postmetadata">
                     Posted in <a href="http://seniorschoicehandyman.com/category/uncategorized/" title="View all posts in Uncategorized" rel="category tag">Uncategorized</a> |   <a href="http://seniorschoicehandyman.com/uncategorized/hello-world/#respond" title="Comment on Our new website">No Comments »</a>                </p>

            </div>
            
        
        <div class="navigation">
            <div class="alignleft"></div>
            <div class="alignright"></div>
        </div>

  
</div>
<div id="sidebar" role="complementary">
    <h2>More Information</h2>

    <hr />
    <ul>
        <li id="search-3" class="widget widget_search"><form role="search" method="get" id="searchform" action="http://seniorschoicehandyman.com/" >
	<div><label class="screen-reader-text" for="s">Search for:</label>
	<input type="text" value="" name="s" id="s" />
	<input type="submit" id="searchsubmit" value="Search" />
	</div>
	</form></li><li id="categories-3" class="widget widget_categories">Categories		<ul>

	<li class="cat-item cat-item-1"><a href="http://seniorschoicehandyman.com/category/uncategorized/" title="View all posts filed under Uncategorized">Uncategorized</a>
</li>
		</ul>
</li>		<li id="recent-posts-3" class="widget widget_recent_entries">		Recent Posts		<ul>
				<li><a href="http://seniorschoicehandyman.com/uncategorized/hello-world/" title="Our new website">Our new website </a></li>
				</ul>
		</li>    </ul>

</div>

<div id="ft" role="contentinfo">
    <div class="menu">
        <a href='http://seniorschoicehandyman.com/?page_id=3'>"Fix It" Services</a>
 | <a href='http://seniorschoicehandyman.com/?page_id=4'>Why Choose Us?</a>
 | <a href='http://seniorschoicehandyman.com/?page_id=10'>Q & A</a>

 | <a href='http://seniorschoicehandyman.com/?page_id=11'>Resources</a>
 | <a href='http://seniorschoicehandyman.com/?page_id=12'>What's New?</a>
 | <a href='http://seniorschoicehandyman.com/?page_id=14'>Corporate</a>
 | <a href='http://seniorschoicehandyman.com/?page_id=17'>Contact Us</a>

    </div>
    <div id="credit_cards">
        <img src="http://seniorschoicehandyman.com/wp-content/themes/seniors_choice/images/icon-credit-cards.png" alt="Seniors CHOICE handyman service accepts visa, mastercard, discover, and american express credit cards" />
    </div>
    <div>
        <a href="http://www.linkedin.com/pub/caryn-leventhal/5/546/7a1" title="Connect with Seniors Choice handyman service on LinkedIn"><img src="http://seniorschoicehandyman.com/wp-content/themes/seniors_choice/images/icon-socialized-linkedin.png" alt="Linked in" /></a>
        <a href="http://twitter.com/seniorschoice" title="Follow Seniors Choice handyman service on Twitter"><img src="http://seniorschoicehandyman.com/wp-content/themes/seniors_choice/images/icon-socialized-twitter.png" alt="Twitter" /></a>
        <a href="http://www.youtube.com/user/SeniorsChoiceHndyman" title="Watch Seniors Choice household maintenance tips at YouTube"><img src="http://seniorschoicehandyman.com/wp-content/themes/seniors_choice/images/icon-socialized-youtube.png" alt="YouTube" /></a>
        <a href="http://www.facebook.com/pages/Seniors-Choice-Professional-Handyman-Service/124472500896267?ref=ts" title="Become a fan of Seniors Choice handyman service at Facebook"><img src="http://seniorschoicehandyman.com/wp-content/themes/seniors_choice/images/icon-socialized-facebook.png" alt="Facebook" /></a>

    </div>
    <div>
        Copyright © 2010, C & L Maintenance Solutions, Inc.<br />
        All Rights Reserved
    </div>
</div><!-- close #ft -->
</div><!-- close #bd -->
</div><!-- close #doc -->


</body>
</html>
-->
Creative Commons License
zoe somebody
beingzoe