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 we’ll learn how to realize a valid, standards compliant XHTML and CSS home-page from PSD template. So, now it’s time to write code!
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. Don’t 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 anddown_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 i”mages” 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 ofmain_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="left_container">
<div id="logo">
<a href="#" class="logo_link"></a>
</div>
<div id="featured">
</div>
<div id="down_container">
</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="left_container">
<div id="logo">
<a href="#" class="logo_link"></a>
</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 id="down_container">
</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;
text-decoration: none;
}
#menu ul li a:hover {
color: #f2faff;
text-decoration: none;
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="left_container">
<div id="logo">
<a href="#" class="logo_link"></a>
</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>
<li><a href="#featured-2">2</a></li>
<li><a href="#featured-3">3</a></li>
<li><a href="#featured-4">4</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>
<div id="featured-2" class="featured_content">
<h1>Sport News Pvm - www.sportnewspvm.net</h1>
<div class="feat_left">
<ol>
<li>PhotoShop and Logo Design</li>
<li><strong>WordPress</strong> Theme</li>
<li>Articles for <strong>On-Line Magazine</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/sport.jpg" alt="pvm" /></a>
</div>
</div>
<div id="featured-3" class="featured_content">
<h1>Jazz Musician - www.jazzmusician.com</h1>
<div class="feat_left">
<ol>
<li>PhotoShop Web Layout</li>
<li>Web Layout <strong>(X)HTML/CSS</strong></li>
<li><strong>Joomla</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.05</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/jazz.jpg" alt="pvm" /></a>
</div>
</div>
<div id="featured-4" class="featured_content">
<h1>La Terrazza - www.laterrazzabeb.com</h1>
<div class="feat_left">
<ol>
<li>PhotoShop and Logo Design</li>
<li>Web Layout <strong>(X)HTML/CSS</strong></li>
<li><strong>Joomla</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.05</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/terrazza.jpg" alt="pvm" /></a>
</div>
</div>
</div>
<div id="down_container">
</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;
text-decoration: none;
}
#featured ul li a:hover {
background: url("images/featured_switch_bck_hov.png") no-repeat top left;
padding: 5px 17px 10px 13px;
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;
background: url("images/icon2.png") no-repeat center left;
}
.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;
text-decoration: none;
}
ol.menu_cont li a:hover {
color: #516e75;
border-bottom: 1px dotted #516e75;
}
span.ico1 {
padding: 10px 0 10px 30px;
background: url("images/icon3.png") no-repeat center left;
line-height: 30px;
}
span.ico2 {
padding: 10px 0 10px 34px;
background: url("images/icon4.png") no-repeat center left;
line-height: 30px;
}
span.ico3 {
padding: 10px 0 10px 22px;
background: url("images/icon5.png") no-repeat center left;
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. It’s 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 id="left_container">
<div id="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 {
border: 2px solid #90a1a8;
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. It’s 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>
<div class="side_cont">
<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>
<h3><a href="#">Donec quam felis, ultricies nec, pellentesque eu.</a></h3>
<span class="meta_info">posted by piervix - 12.08</span>
<h3><a href="#">Donec quam felis, ultricies nec, pellentesque eu.</a></h3>
<span class="meta_info">posted by piervix - 12.08</span>
<h3><a href="#">Donec quam felis, ultricies nec, pellentesque eu.</a></h3>
<span class="meta_info">posted by piervix - 12.08</span>
</div>
<div class="side_cont">
<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 {
padding: 10px 10px 10px 25px;
}
.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;
border: 1px solid #93a5a9;
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;
text-decoration: none;
border-bottom: 1px dotted #c4dfe6;
}
Step 11 – Validate and Test
Validate your code and test template in various browsers!
