Tutorial Psdtohtmlcss50

WaterColored Portfolio Coded, Free CSS
Template With PSD to HTML Tutorial

(UPDATED)
29 June 2009
Tutorials, Web Design
This post was written exclusively for PV.M Garage by Piervincenzo Madeo
Comments (104)

UPDATED: #down_container, .meta_info, .side_bottom, #sidebar, ol.menu_cont li in style.css.

This is the second part of WaterColored Web Portfolio tutorial. In case you missed the first part of
this tutorial, read Create a Nice Web Portfolio Design with a Watercolored Background in Photoshop to
learn how to make a web layout in PhotoShop. With this post well learn how to realize a valid,
standards compliant XHTML and CSS home-page from PSD template. So, now its time to write code!
Youre reading the second PSD-to-HTML tutorial of PV.M Garage and for this reason Ill skip the
explanation of some basic steps. You can find other information on how to code a PSD template in
DesignSchool Coded, Free CSS Template With PSD to HTML Tutorial.
I suppose you might want to know what our design will look like once finished. Here you can see a
preview image and a live demo.
The Structure
Create a general folder watercolored_portfolio, then insert js and images, and two new files
index.html and style.css.
See the final PhotoShop template, define and mark a clear structure that you will follow.
Step 1 Code the basic structure

Without fear write the markup (edit index.html in your text editor) for the basic structure. Dont
forget the document type declaration, the link type for the stylesheet and meta-tags for description and
keywords.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>WaterColored Portfolio | A free CSS Template | made in PV.M Garage</title>
<meta name="description" content="Watercolored is a free css template released
under Creative Common License by PV.M Garage" />
<meta name="keywords" content="watercolored, web, design, xhtml, css, photoshop" />
<meta name="author" content="Piervincenzo Madeo" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="main_container" class="clear">
<div id="left_container">
<div id="featured">
</div>
<div id="down_container">
</div>
</div>
<div id="sidebar">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
In this web project we use a Strict DocType (and not Transitional) to improve our ability with
(X)HTML code, and also because it is the best recommendation (at the moment, waiting for HTML5).
We use a main_container div that include left_container (logo, menu, featured and down_container),
sidebar and footer.
Background
Step 2 Prepare Background Images
Open your layered PSD template and select the image for the body background as shown. Copy
selection and paste in a new PS document, save it for web (jpg in images folder).
Now isolate the layers for the background of main_container. Copy and paste the image in a new
document holding the transparency.
Save the graphic for web at a high quality, png-24 with transparency selected.
You have the images for a good background.
Step 3 CSS StyleSheet and Background

Open style.css in your text editor, insert the YUI Reset CSS to remove and neutralize the inconsistent
default styling of HTML elements, then write rules for the body and the main_container.
/*CSS Reset by Yahoo!*/
body,div,dl,dt,dd,ul,ol,
li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,
blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}
/* remember to define focus styles! */

:focus {
outline: 0;
}
/*CSS Style for WaterColored Portfolio*/

body {
background: #fff url("images/bck.jpg") repeat-x top; /*gradient background*/
font-family: Lucida Sans Unicode, sans-serif;
font-size: 14px;
color: #516e75;
}
strong {
font-weight: bold;
}
em {
font-style: italic;
}
a {
text-decoration: none;
}
h1{
font-size: 25px;
line-height: 30px;
}
h2 {
color: #e7f1fa;
font-size: 22px;
line-height: 28px;
}
h3 {
color: #c4dfe6;
font-size: 14px;
}
#main_container {
background: url("images/main_cont_bck.png") no-repeat center top; /*painted
background*/
margin: auto;
width: 1000px;
}
.clear:after { /*clear-fix*/
content: "";
display: block;
clear: both;
}
Note: we add the clear class to give a cross browser float clearing solution (the background of
main_container is visible step-by-step with this fix ). We also write the rules for h1, h2, h3, a, strong
and em.
Left Content
In this section we have already included divs featured and down container, but we have other elements:
logo and menu.
Step 4 Logo
From PSD template isolate the logo image, but in this case save two graphics to create a nice hover
effect with css. In the following figure you can see how to save images (save for web, png-24,
transparency selected).
The markup is the following:

<div id="logo">
<a href="#" class="logo_link"></a>
</div>
<div id="featured">
</div>
</div>
</div>
Now, through this css code, the logo with a simple hover effect is ready.
#logo {
margin: 0px;
padding: 0px;
}
.logo_link {
display: block;
background: url("images/logo.png") no-repeat top left;
width: 691px;
height: 131px;
}
.logo_link:hover {
background: url("images/logo_hov.png") no-repeat top left;
display: block;
width: 691px;
height: 131px;
}
Step 5 Menu
Take a copy of the menu background and paste into a new document. Save it as usually.
Below the markup for menu.

<div id="logo">
</div>
<div id="menu">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">services</a></li>
<li><a href="#">projects</a></li>
</ul>
</div>
<div id="featured">
</div>
</div>
</div>
Relational rules in style.css.

#menu {
background: url("images/menu_bck.png") no-repeat top left;
margin: 35px 0 20px 165px;
width: 553px;
height: 50px;
}
#menu ul {
padding: 8px 10px 0 48px;
line-height: 30px;
font-size: 25px;
}
#menu ul li {
display: inline;
padding-right: 18px;
}
#menu ul li a {
color: #d8ebf7;
}
#menu ul li a:hover {
color: #f2faff;
border-bottom: 1px dotted #f2faff;
}
Step 6 Featured
Prepare the indispensable images for featured container: main background, switch button and icons
A little preamble for markup. This featured box expect the use of JavaScript to scroll featured contents
through the switch buttons (1, 2, 3, 4). There are four elements in our purposes, so we must write a
correct XHTML code to prepare document for UI jQuery Tabs.
In the PSD template there is an image on right side and a list on left. Insert two floating divs in which
to put an ordered list (left) and an image (right) to reproduce the original box.
Below you can see the complete markup for featured container.
<div id="logo">
</div>
<div id="menu">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">services</a></li>
<li><a href="#">projects</a></li>
</ul>
</div>
<div id="featured">
<ul>
<li><a href="#featured-1">1</a></li>
</ul>
<div id="featured-1" class="featured_content">

<h1>PV.M Garage blogzine - www.pvmgarage.com</h1>
<div class="feat_left">
<ol>
<li>PhotoShop and Logo Design</li>
<li>Web Layout <strong>(X)HTML/CSS</strong></li>
<li><strong>WordPress</strong> Theme</li>
<li>Web Writing and <strong>Advertise</strong></li>
<li>Search Engine Optimization</li>
<li><strong>Google Adsense</strong> to Monetize</li>
</ol>
<ol class="menu_cont">
<li><span class="ico1">2009.06</span></li>
<li><span class="ico2"><a href="#">comments</a></span></li>
<li><span class="ico3"><a href="#">Tweet!</a></span></li>
</ol>
</div>
<div class="image_cont">
<a href="http://www.pvmgarage.com"><img src="images/pvm.jpg"
alt="pvm" /></a>
</div>
</div>

<h1>Sport News Pvm - www.sportnewspvm.net</h1>
<ol>
<li><strong>WordPress</strong> Theme</li>
<li>Articles for <strong>On-Line Magazine</strong></li>
</ol>
</ol>
</div>
<a href="http://www.pvmgarage.com"><img src="images/sport.jpg"
alt="pvm" /></a>
</div>
</div>

<h1>Jazz Musician - www.jazzmusician.com</h1>
<ol>
<li>PhotoShop Web Layout</li>
<li><strong>Joomla</strong> Theme</li>
</ol>
</ol>
</div>
<a href="http://www.pvmgarage.com"><img src="images/jazz.jpg" alt="pvm"
/></a>
</div>
</div>

<h1>La Terrazza - www.laterrazzabeb.com</h1>
<ol>
<li><strong>Joomla</strong> Theme</li>
</ol>
</ol>
</div>
<a href="http://www.pvmgarage.com"><img src="images/terrazza.jpg"
alt="pvm" /></a>
</div>
</div>
</div>
</div>
</div>
After markup update the style.

#featured {
background: url("images/featured_bck.png") no-repeat top left;
margin: 50px 0 20px 0;
width: 719px;
height: 326px;
}
#featured h1 {
background: url("images/icon1.png") no-repeat center left;
padding-left: 50px;
margin-bottom: 10px;
}
#featured ul {
padding: 34px 0 0 20px;
}
#featured ul li {
display: inline;
}
#featured ul li a {
background: url("images/featured_switch_bck.png") no-repeat top left;
padding: 5px 17px 10px 13px;
margin-left: 2px;
color: #536f77;
font-weight: bold;
}
#featured ul li a:hover {
background: url("images/featured_switch_bck_hov.png") no-repeat top left;
margin-left: 2px;
color: #516e75;
}
.featured_content {
margin: 13px 0 0 15px;
}
.feat_left {
float:left;
}
.featured_content ol {
margin: 7px 10px 0 50px;
width: 250px;
}
.featured_content ol li {
padding: 5px 0 5px 20px;
}
.image_cont {
float: left;
}
.image_cont img {
border: 3px solid #90a1a8;
}
ol.menu_cont {
padding: 0;
}
ol.menu_cont li {
padding: 0;
display: inline;
background: transparent;
font-size: 10px; /*updated*/
color: #8cbbc5;
}
ol.menu_cont li a {
border-bottom: 1px dotted #8cbbc5;
color: #8cbbc5;
}
ol.menu_cont li a:hover {
color: #516e75;
border-bottom: 1px dotted #516e75;
}
span.ico1 {
line-height: 30px;
}
span.ico2 {
line-height: 30px;
}
span.ico3 {
line-height: 30px;
}
Step 7 UI jQuery Tabs for Featured Container

Now test the power of jQuery.
Download the minified package of the framework from the official download page and download also
the UI package (select UI Core, Tabs and Effects Core).
Copy the two files (jquery-1.3.2.min.js and jquery-ui-1.7.2.custom.min.js) in js folder. To use the
power of jQuery in WaterColored Portfolio template call the library from the index.html with the
following lines of code between head tags:
<head>
[...]
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-
1.7.2.custom.min.js"></script>
[...]
</head>
Place this code in index.html (after <body>) to activate tabs:

<script type="text/javascript">
$(function() {
$("#featured").tabs({ fx: { height: 'toggle', opacity:
'toggle' } }); });
</script>
and this in css style file:

.ui-tabs .ui-tabs-hide { display: none !important; }
Done. Its very simple. This is the power of jQuery Library!

Below the result (you can see the demo to test it).
Step 8 Down Container

The valid markup to create down container.
<div class="down_1">
<h1>Great Design</h1>
<a href="#"><img src="images/line25.jpg" alt="line25" /></a>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo
inventore. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue.</p>
</div>
<div class="down_2">
<h1>Cicero</h1>
<a href="#"><img src="images/cowboy.jpg" alt="line25" /></a>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui
blanditiis praesentium voluptatum deleniti atque corrupti quos dolores. Maecenas
tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet
adipiscing sem neque sed ipsum.</p>
</div>
</div>
</div>
Update the style as shown.

#down_container {
margin-top: 10px;
min-height: 220px; /*updated*/
}
#down_container img {
margin: 10px 0;
}
.down_1, .down_2 {
display: inline;
float: left;
margin-left: 25px;
margin-right: 0px;
width: 300px;
}
.down_1 {
border-right: 1px dotted #90a1a8;
padding-right: 25px;
}
Sidebar
Step 9 Code Sidebar
Export three images from PSD for sidebar design: first for content, second for bottom and the icon for
post title. Its clear that you need to insert new div for the bottom of sidebar.
The valid markup for sidebar.

<div id="sidebar">
<div class="side_cont">
<h2>Services</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus.</p>
</div>
<h2>Recent Posts</h2>
<h3><a href="#">Donec quam felis, ultricies nec, pellentesque eu.</a></h3>
<span class="meta_info">posted by piervix - 12.08</span>
</div>
<h2>Working on...</h2>
<p>Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
<a href="#"><img src="images/designschool.jpg" alt="design" /></a>
</div>
</div>
<div class="side_bottom">
</div>
The style for sidebar.

#sidebar {
width: 240px;
background: url("images/sidebar_bck.png") repeat-y center top;
color: #c4dfe6;
float: right; /*updated*/
margin-right: 5px; /*updated*/
}
.side_bottom {
background: url("images/side_bot.png") no-repeat bottom center;
height: 85px;
width: 240px;
float: right; /*updated*/
margin-right: 5px; /*updated*/
}
.side_cont {
}
.side_cont h2 {
background: url("images/side_tit_bot.png") no-repeat bottom left;
}
.side_cont p {
line-height: 14px;
letter-spacing: 1px;
margin-top: 5px;
}
.side_cont h3 {
padding-left: 35px;
margin-top: 20px;
background: url("images/icon6.png") no-repeat top left;
}
.side_cont img {
border: 2px solid #d6e7f1;
margin: 10px 0;
}
.side_cont h3 a {
color: #c4dfe6;
}
.side_cont h3 a:hover {
border-bottom: 1px dotted #c4dfe6;
}
.meta_info {
font-size: 10px; /*updated*/
color: #293e43;
padding: 0 35px 8px 35px;
background: url("images/post_sep.png") no-repeat bottom center;
}
Footer and Validation

Step 10 Code Footer
In this last step the loop is the same. First export image for background.
XHTML markup.
<div class="clear_sep"></div>
<div id="footer">
<p><strong>WATERCOLORED PORTFOLIO 2009</strong> - <em>Creative Common
License.</em> It's a free tamplate for you!<br />
a PV.M GARAGE PRODUCTION - <a href="http://validator.w3.org/check?
uri=referer">valid (X)HTML</a> and <a href="http://jigsaw.w3.org/css-
validator/check/referer">valid CSS</a></p>
</div>
CSS style.
.clear_sep {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
#footer {
background: url("images/foot_bck.png") repeat-x top left;
display: block;
width: 992px;
margin-bottom: 15px;
height: 48px;
}
#footer p {
font-size: 12px;
color: #c4dfe6;
text-align: center;
padding: 10px;
}
#footer p a {
color: #c4dfe6;
border-bottom: 1px dotted #c4dfe6;
}
Step 11 Validate and Test

Validate your code and test template in various browsers!

Tutorial Psdtohtmlcss50

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Tutorial Psdtohtmlcss50

Hochgeladen von

Copyright:

Verfügbare Formate

WaterColored Portfolio Coded, Free CSS

Template With PSD to HTML Tutorial

UPDATED: #down_container, .meta_info, .side_bottom, #sidebar, ol.menu_cont li in style.css.

Step 1 Code the basic structure

You have the images for a good background.

Step 3 CSS StyleSheet and Background

/* remember to define focus styles! */

/*CSS Style for WaterColored Portfolio*/

The markup is the following:

Below the markup for menu.

Relational rules in style.css.

<div id="featured-1" class="featured_content">

<div id="featured-2" class="featured_content">

<div id="featured-3" class="featured_content">

<div id="featured-4" class="featured_content">

After markup update the style.

Step 7 UI jQuery Tabs for Featured Container

Place this code in index.html (after <body>) to activate tabs:

and this in css style file:

Done. Its very simple. This is the power of jQuery Library!

Step 8 Down Container

Update the style as shown.

The valid markup for sidebar.

The style for sidebar.

Footer and Validation

Step 11 Validate and Test

Das könnte Ihnen auch gefallen

/CSS Style for WaterColored Portfolio/