How to Convert a Slick PSD Design to XHTML/CSS
The Result
The below picture is what our final homepage code looks like, underneath the picture is the final code for the HTML. Go ahead and check it against yours.
<!DOCTYPE html> <html lang="en"> <head> <!-- Site Title --> <title>PSD to HTML: A Photography Site</title> <!-- Meta Data --> <meta charset="UTF-8" /> <meta name="keywords" content="photography, commercials, exposure videos, senior pictures"> <meta name="description" content="Your company description."> <meta name="author" content="TutToaster.com/authors/CodyRobertson"> <meta name="copyright" content="Copyright 2010 TutToaster.com"> <meta name="robots" content="follow, index"> <!-- Site Theme Styling --> <link rel="stylesheet" href="style/reset.css" /> <link rel="stylesheet" href="style/global.css" /> <!--[if lt IE 9]> <script type="text/javascript" src="javascript/HTML5-Shiv.js"></script> <![endif] --> </head> <body> <div id="header"> <div class="container"> <!-- Logo --> <h1 id="logo">YourSite Title</h1> <!-- Navigation Menu --> <ul id="menu"> <li class="active"><a href="#">HOME</a></li> <li><a href="#">PHOTOGRAPHY</a></li> <li><a href="#">COMMERCIALS</a></li> <li><a href="#">SPORTS</a></li> <li><a href="#">EXPOSURE VIDEOS</a></li> <li><a href="#">CONTACT</a></li> </ul> </div> </div> <div id="featured"> <div class="container"> <!-- Welcome Text/Site Welcome --> <div id="welcome"> <h2>Welcome</h2> <p>Welcome to Johnny Waller Productions! We are a full service production company, and are a one-stop shop for your production needs. We love interacting with people and have a passion for creating a product that wows! As a husband and wife team and graduates of Specs Howard School of Broadcast Arts, we love to learn new things and are continually striving to perfect our craft.</p> <p>Whether it be Family Photographs, a College Sports Exposure Video, Senior Pictures, or Video Editing, we do it all! Thanks for stopping by and feel free to look around!!!</p> </div> <!-- Nivo-Slider --> <div id="slider"> <div id="frame"> </div> <ul class="slides"> <li><img src="style/images/slider-placeholder.png" /></li> <li><img src="style/images/slider-placeholder2.png" /></li> </ul> </div> </div> </div> <div id="content"> <!-- Working Status --> <div id="status"> <div class="container"> <span id="avalibility">I am currently accepting new projects/appointmentsat this time.</span> <button>Hire Me</button> </div> </div> <div class="container" id="main"> <!-- About Us/What They Say --> <div id="about_us"> <h3>A little about us...</h3> <p>We are a full service production companel that company that is your one stop needs, weither it be family photographs, a college sport exposure video, senior pictures or.</p> </div> <div id="others_say"> <h3>What others think...</h3> <p>When I first came to Johnny for a first time job I was a bit nervous n how the service would be, but after the first job and how smooth it went i’ll never go anywhere else. <br /><cite>- Cody Robertson (<a href="#">Website</a>)</cite> </p> </div> <!-- Clear Fix --> <br class="clear" /> <!-- Services --> <ul id="services"> <!-- Photography --> <li> <img src="style/images/service_preview_1.gif" alt="placeholder" /> <h4>Photography</h4> <p>Praesent imperdiet nulla at tortor. Phasellus non lectus eget massa rhoncus consequat. Donec lectus ligula, posuere vel, semper a, posuere in, orci. Praesent imperdiet nulla at tortor. Phasellus non lectus eget massa rhoncus consequat. Donec lectus ligula, posuere vel.</p> </li> <!-- Commercials --> <li> <img src="style/images/service_preview_2.gif" alt="placeholder" /> <h4>Commercials</h4> <p>Praesent imperdiet nulla at tortor. Phasellus non lectus eget massa rhoncus consequat. Donec lectus ligula, posuere vel, semper a, posuere in, orci. Praesent imperdiet nulla at tortor. Phasellus non lectus eget massa rhoncus consequat. Donec lectus ligula, posuere vel.</p> </li> <!-- Sports --> <li> <img src="style/images/service_preview_3.gif" alt="plceholder" /> <h4>Sports</h4> <p>Praesent imperdiet nulla at tortor. Phasellus non lectus eget massa rhoncus consequat. Donec lectus ligula, posuere vel, semper a, posuere in, orci. Praesent imperdiet nulla at tortor. Phasellus non lectus eget massa rhoncus consequat. Donec lectus ligula, posuere vel.</p> </li> <!-- Exposure Videos --> <li> <img src="style/images/service_preview_1.gif" alt="placeholder" /> <h4>Exposure Videos</h4> <p>Praesent imperdiet nulla at tortor. Phasellus non lectus eget massa rhoncus consequat. Donec lectus ligula, posuere vel, semper a, posuere in, orci. Praesent imperdiet nulla at tortor. Phasellus non lectus eget massa rhoncus consequat. Donec lectus ligula, posuere vel.</p> </li> </ul> </div> </div> <div id="footer"> <div class="container"> <!-- Footer Widgets --> <ul id="footer-widgets"> <li> <h5>Contact Us</h5> <ul> <li>3352 Streetname rd.</li> <li>Commerce Township, MI, 48382.</li> <li> </li> <li>Tell: (248)838-9823</li> <li>Fax: (248)942-2342</li> <li>Email: johnnywaller@me.com</li> </ul> </li> <li> <h5>Services</h5> <ul> <li><a href="#">Home</a></li> <li><a href="#">Photography</a></li> <li><a href="#">Commercials</a></li> <li><a href="#">Sports</a></li> <li><a href="#">Exposure Videos</a></li> <li><a href="#">Contact</a></li> </ul> </li> <li> <h5>About Johnny</h5> <p>Hey, my name is Johnny, this is a quick little one or two sentences about how im awesome and you should pay me money to do stuff for you!</p> </li> <li> <h5>About Amber</h5> <p>Hey, my name is Amber, this is a quick little one or two sentences about how im awesome and you should pay me money to do stuff for you!</p> </li> </ul> <!-- Positioning Fix --> <br class="clear" /> <br /><br /> <!-- Copyright --> <div id="copyright"> <span>© Copywright 2010 TutToaster.com. All Rights Reserved.</span> <a href="#">Back to top</a> </div> </div> </div> <!-- jQuery and Nivo Slider --> <script type="text/javascript" src="javascript/jQuery-1.4.2.min.js"></script> <script type="text/javascript" src="javascript/Nivo-Slider.min.js"></script> </body> </html>
Pages: 1 2 3 4 5 6 7 8 9 10 11 12 13 14
This entry was posted on Thursday, September 16th, 2010 at 07:06 and is filed under Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
Wow) this is a great tutorial!
Brilliant tutorial I will have to try it out asap.
Thanks alot ^^
Awesome Tutorial.
Thanks you for share.
Good tutorial for beginner like me, thank you 🙂
Very good tutorial, It covered a lot of things, thanks
Nice Tut 🙂
Dude, charset before title. 🙂
i’m going to have to take time on this one.thanks for sharing
Thanks you for share, great tutorial!
useful info. thanks..soon:)