Tutorial Psdtohtmlcss7

Design And Develop A Complete Website (A Tuts+ Mini Series,... http://webdesign.tutsplus.com/tutorials/complete-websites/de...
Design And Develop A Complete Website (A

Tuts+ Mini Series, Pt 3)
Nuruzzaman Sheikh on Aug 17th 2011 with 32 comments
Tutorial Details
Program: Code editor of your choice
Difficulty: Beginner
Estimated completion time: 1.5 - 2 hours
View post on Tuts+ BetaTuts+ Beta is an optimized, mobile-friendly and easy-to-read version of the Tuts+ network.
This entry is part 3 of 3 in the Iconify: A Complete Website Session
Previous
Its been a while coming, but today, during the coding phase of this massive tutorial, were going to begin the HTML conversion of
our theme. Weve already designed the whole thing in Photoshop, so now well look at converting our homepage into a valid HTML
web page.
Throughout our conversion phase well follow best practices, use valid HTML 5 (doctype, though none of the newer spec elements)
and CSS 2.1 for maximum browser support.
The Game Plan

Well use this general process to convert our Photoshop design into HTML in three phases
Phase 1
Create document/folder/site structure.
Define document type.
Inspect the main design and figure out the overall basic markup.
Inspect the specific page sections to get an idea as to how to mark it up.
Insert HTML tags according to our markup ideas and finish the HTML coding.
Phase 2
Reset the default styles of browsers.
Add some default styles for common HTML elements.
Position and design elements sequentially from top to bottom and section by section.
Phase 3
Well check our design in all modern browsers and compensate for IE.
Finally, well add some behavior to our theme with some custom and third party jQuery plugins and scripts.
Our theme is very simple, so we need to slice very few graphics from our design. Those graphics that we do slice will be done as
necessary as we approach the HTML and CSS. Please follow the tutorial from start to finish attentively as Ill discuss each trick only
once.
1 of 44 09/09/2013 03:55 PM
Resources Used For This Project

You can use your own resources if youd like, but heres the full list of the images and icons that Ive used in the tutorial:
Images Lil Rhody Dan, Flickr

Merry Christmas (photo)- from PSDTuts flickr group
Social Icons wefunction
Twitter Bird webtreats
jQuery 1.4.2 JavaScript Library
jQuery prettyPhoto Plugin
jQuery Cycle Plugin
Generally, HTML conversion consists of three separate parts:
Content (HTML/XHTML)
Presentation (CSS) and
Behavior (JS)
Todays three sub-parts are defined below. Feel free to jump back and forth when youre proficient at a certain skill outlined in a
specific section.
Part A Content Creating markup and populating the page With content.
Part B Presentation Positioning and designing content with pure CSS.
Part C Behavior Defining interactions with JavaScript
Lets convert our Photoshop design into a working HTML page!
Step A 1: Creating The Site Structure

Creating a well thought-out folder structure is extremely important for any web development work. With that in mind, well create
our folder structure first. Use the image A 1a as a guideline to create your folder structure.
In the assets folder, well place all our assets images, videos, flash, etc.
In the files folder, there are two subfolders named, codes and images.
The folder named codes is for css (Style Sheet) and js (JavaScript) files.
All our images used for creating this theme will be placed inside the images folder.
Our HTML files will be directly inside the ICONIFY folder.
Step A 2: The First HTML Document

Create a new HTML file and name it index.html. Open the file in your favorite HTML/Code editor. Place the following content inside
your index.html file.
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Nuruzzaman Sheikh(palpaldal)" />
<meta name="description" content="A brief description of this website or your business." />
<meta name="keywords" content="keywords, or phrases, suited with each particular page, are best" />
<title>ICONIFY :: Welcome</title>

<link rel="shortcut icon" href="assets/favicon.ico" />
</head>
<body>
2 of 44 09/09/2013 03:55 PM
</body>
</html>
This is an HTML 5 document and were ensuring this by setting its doctype to . In the head section, were placing some meta tags like-
author, description, keywords these meta tags help search engines to easily find and index our web pages. We are also declaring our
pages title and favicon.
Step A 3: Inspecting The Design
3 of 44 09/09/2013 03:55 PM
By inspecting the homepage design, we find three horizontal sections: #header, #content, and #footer. Two (header, footer) of these
three sections are static, because they are going to be same throught-out the site. So, depending on this preliminary markup idea
from the design, our HTML markup will be:
<body>
<div id="header">
<div class="inner">
header
4 of 44 09/09/2013 03:55 PM
</div>

</div>
<div id="content">
<div class="inner">
content
</div>
<div id="footer">
<div class="inner">
footer
</div>
</body>
</html>
Our three vertical sections are div#header, div#content, and div#footer. Also note that within each section, theres a div.inner element,
this is for the glow effect of every section and well also place all our elements inside these div.inner containers.
In browsers, our document now looks like this image:
Note: every closing tag has an associated comment, which describes the element that is being closed. Its best practice to always
comment out important parts or sections in an HTML document. Well follow this practice today.
Now lets populate our three sections with HTML contents, sequentially from header to footer
Step A 4: Populate the Header

Inspect the design and trace out the HTML parts in the header section. Use the image A 4a as a guideline.
Heres our header design translated into HTML markup:

<div id="header">
<div class="inner">
<ul class="top">
</ul>
<div id="nav">
<div id="logo">
</div>
<ul id="menu">
</ul>
</div>
Were going to slice our first image, the logo, so open the index design in Photoshop. Select the Slice tool from inside the Crop Tool
group. Now use images A 4b and A 4c as a guideline to crop your logo. Then goto File->Save for Web & Devices or press
Alt+Shift+Ctrl+S from key board to call the Save for Web & Devices dialogue box. Select PNG-24 and Transparent then save to our
web roots files->images folder as shown in image A 4d.
5 of 44 09/09/2013 03:55 PM
6 of 44 09/09/2013 03:55 PM
Well use these same techniques/steps for slicing our next images. Only the dimensions will be mentioned from now on.
Lets fill up the #header section with associated contents. Copy the following into your document:
<div id="header">
<div class="inner">
<ul class="top">
<li><a href="#">Downloads</a></li>
<li><a href="#">Newsletter</a></li>
<li><a href="#">Login</a></li>
<li>
<form action="#" method="get">
<fieldset>
<legend>Search Form</legend>
<label for="searchTerm">Search</label>
<input type="text" name="searchTerm" id="searchTerm" size="40" maxlength="150" />
<input type="submit" value="Search" />
</fieldset>
</form>
</li>
<div id="nav">
<div id="logo">
<a href="#"><img src="http://d3pr5r64n04s3o.cloudfront.net/tuts/188_iconify/tutorial-coding-phase/files/images/logo.png" height=
<ul id="menu">
<li class="active"><a href="index.html">Home</a></li>
7 of 44 09/09/2013 03:55 PM
<li class="dropdown"><a href="#">Features</a></li>

<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="blogs.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
Our ul.top is a list element and thus is made up of li elements. The last child of ul.top holds our search form. Inside div#nav, there
are two immediate children: div#logo and ul#menu. ul#menu is a list element and all its children are menu items. Notice that one
menu item has a class li.active and one menu item has a class li.dropdown. Those are to merely indicate active and dropdown
menu items respectively.
Your browser should now render index.html like this
Step A 5: Populate The #content

Inspect the design and trace out the HTML parts in the content section. Use the following image as a guideline.
8 of 44 09/09/2013 03:55 PM
After inspecting the content section in the design, we can plan our HTML sub-sections inside the #content section as shown below.
<div id="content">
<div class="inner">
<div id="slider">
<ul id="cycle">
</ul>
<div id="cyclePager"></div>
</div>
<ul class="promo-col-4">
</ul>
<hr />
<div class="testimonial">
</div>
<div id="recentProjects">
<div class="bar">
</div>
<ul class="">
</ul>
</div>
Now were going to fill up the #content section with some contents, sequentially, from top to bottom. Copy the following code into
your html document.
<div id="slider">
<ul id="cycle">
<li><img src="http://d3pr5r64n04s3o.cloudfront.net/tuts/188_iconify/tutorial-coding-phase/assets/slides/1.jpg" height="336" width="9
9 of 44 09/09/2013 03:55 PM

</ul>
Inside #slider weve three image links, which are our slides. And a div#cyclePager for the pager or slider navigation.
<li class="">
<a href="#" title="Unlimited Columns With 960 Grid">
<img src="http://d3pr5r64n04s3o.cloudfront.net/tuts/188_iconify/tutorial-coding-phase/assets/icons/blueprint.png" height="48" width=
</a>
<h5><a href="#" title="Unlimited Columns With 960 Grid">Unlimited Columns With 960 Grid</a></h5>
</li>
<li class="">
<a href="#" title="Unlimited Colors (Change CSS Hex)">
<img src="http://d3pr5r64n04s3o.cloudfront.net/tuts/188_iconify/tutorial-coding-phase/assets/icons/colouralt.png" height="48" width=
</a>
<h5><a href="#" title="Unlimited Colors (Change CSS Hex)">Unlimited Colors (Change CSS Hex)</a></h5>
</li>
<li class="">
<a href="#" title="Display Images With A Unique Flair">
<img src="http://d3pr5r64n04s3o.cloudfront.net/tuts/188_iconify/tutorial-coding-phase/assets/icons/photos.png" height="48" width="48
</a>
<h5><a href="#" title="Display Images With A Unique Flair">Display Images With A Unique Flair</a></h5>
</li>
<li class="">
<a href="#" title="Supports All Modern Browsers">
<img src="http://d3pr5r64n04s3o.cloudfront.net/tuts/188_iconify/tutorial-coding-phase/assets/icons/safari.png" height="48" width="48
</a>
<h5><a href="#" title="Supports All Modern Browsers">Supports All Modern Browsers</a></h5>
</li>
<hr />
This is a 4 column promotional item named ul.promo-col-4 and well see how to position them according to our design in the CSS
portion. Its structure is pretty simple just place every columns elements inside a li of ul.promo-col-4.
Currently, our page renders in the browser like this
10 of 44 09/09/2013 03:55 PM
<li class="">
<a href="#" title="Using Clone Stamp Tool">
<img src="http://d3pr5r64n04s3o.cloudfront.net/tuts/188_iconify/tutorial-coding-phase/assets/promo/1.jpg" class="border" height=
</a>
<h4><a href="#">Using Clone Stamp Tool</a></h4>
<p>
To use the Clone Stamp tool, you tset a sampling point on the area you want to copy (clone) the pixels from and paint over anoth
</p>
<a href="#" class="btn" title="Read More">Read More</a>
</li>
<li class="">
</a>
<p>
</p>
</li>
<li class="">
</a>
<p>
</p>
</li>
11 of 44 09/09/2013 03:55 PM
This promotional section is the same as ul.promo-col-4, the only difference being that it has 3 columns. And it render in browsers as
follows:
<div class="inner">
<blockquote>
A color management system reconciles color differences among devices so that you can be reasonably certain of the colors your sy
</blockquote>
<span class="arrow"></span>
</div>
<cite>
<strong>Thomas Miller</strong> CEO, envato
</cite>
This is the featured testimonial box in the homepage. Inside the div.testimonial parent element, we place a blockquote element
within a div.inner element. This div.inner element is for the inner darker stroke of the testimonial box. Well use some techniques
in the CSS portion to design the testimonial box.
<div class="bar">
<h5>
Recent Projects
</h5>
<ul class="">
<li class="">
<a href="#" >
<img src="http://d3pr5r64n04s3o.cloudfront.net/tuts/188_iconify/tutorial-coding-phase/assets/rcnt-projects/1.jpg" class="bor
</a>
12 of 44 09/09/2013 03:55 PM
</li>
<li class="">
<a href="#" >
</a>
</li>
<li class="">
<a href="#" >
</a>
</li>
<li class="">
<a href="#" >
</a>
</li>
</ul>
div#recentProjects has two children: div.bar for the heading and a ul element with four li children for the recent projects items.
Check out the browser preview:
Step A 6: Populate the Footer

As usual, inspect the design and trace out the HTML parts in the footer section. Use the image A 6a as a guideline.
13 of 44 09/09/2013 03:55 PM
After inspecting the footer section in the design we can plan our HTML sub-sections inside the #footer section as shown below.
<div id="footer" class="">
<div class="inner">
<div class="top">
</div>
<ul class="content">
</ul>
<div class="bottom">
</div>
Copy the following code into your html document.

<div class="top">
<div id="twitter" class="">

</div>
<ul class="social">
<li><h5>Get Social</h5></li>
<li>
<a href="#" title="RSS">
<img src="http://d3pr5r64n04s3o.cloudfront.net/tuts/188_iconify/tutorial-coding-phase/assets/social-icons/rss.png" height="32" w
</a>
</li>
<li>
<a href="#" title="Flickr">
<img src="http://d3pr5r64n04s3o.cloudfront.net/tuts/188_iconify/tutorial-coding-phase/assets/social-icons/flickr.png" height="32
</a>
</li>
<li>
<a href="#" title="Facebook">
<img src="http://d3pr5r64n04s3o.cloudfront.net/tuts/188_iconify/tutorial-coding-phase/assets/social-icons/facebook.png" height="
</a>
</li>
<li>
<a href="#" title="Twitter">
<img src="http://d3pr5r64n04s3o.cloudfront.net/tuts/188_iconify/tutorial-coding-phase/assets/social-icons/twitter.png" height="3
</a>
</li>
</ul>
There are two immediate children inside div.top:, one for our lovely twitter plugin named div#twitter and another one for our
social links- ul.social.
14 of 44 09/09/2013 03:55 PM
<li class="">
<h5>About ICONIFY</h5>
<p>
Creating themes to give away or sell is great, but not everyone who uses your theme will have a solid understanding of HTML/CSS.
</p>
</li>
<li class="">
<h5>Categories</h5>
<ul class="list">
<li><a href="#" title="Graphics Design">Graphics Design</a></li>
<li><a href="#" title="Web Graphics">Web Graphics</a></li>
<li><a href="#" title="User Interface Designing">User Interface Designing</a></li>
<li><a href="#" title="3D Graphics">3D Graphics</a></li>
<li><a href="#" title="Web Development">Web Development</a></li>
<li><a href="#" title="Programming">Programming</a></li>
<li><a href="#" title="Scripting">Scripting</a></li>
<li><a href="#" title="Wordpress">Wordpress</a></li>
<li><a href="#" title="Cartooning">Cartooning</a></li>
<li><a href="#" title="Object Oriented Development">Object Oriented Development</a></li>
<li><a href="#" title="Information Architecture">Information Architecture</a></li>
</ul>
</li>
<li class="">
<h5>Recent Posts</h5>
<ul class="blogList">
<li>
<a href="#" title=""><img src="http://d3pr5r64n04s3o.cloudfront.net/tuts/188_iconify/tutorial-coding-phase/assets/80x80.jpg" cla
<h5><a href="#">Developing Future Web Apps</a></h5>
<p>
Creating themes to give away or sell is great, everyone who uses your theme will have a solid understanding of HTML/CSS.
</p>
</li>
<li>
<p>
</p>
</li>
</ul>
</li>
The ul.content is a three column section and each li element is a column. Well use some tricks in the CSS portion to properly style
and position them out.
<a href="#" id="toTop" title="Scroll To Top"></a>
<hr />
<p class="copyright">
Copyright © <a href="#" title="ICONIFY">ICONIFY</a> 2011-2015, All Rights Reserved.
<span style="float: right;">
Template By: <a href="http://themeforest.net/user/palpaldal/" title="palpaldal's Themeforest Profile">palpaldal</a>
</span>
</p>
div.bottom should be self explanatory. And this is the browser preview:
15 of 44 09/09/2013 03:55 PM
Final Index Page HTML

<!DOCTYPE HTML>
<head>
</head>
<body>
<div id="header">
<div class="inner">
<ul class="top">
<li><a href="#">Downloads</a></li>
<li><a href="#">Newsletter</a></li>
<li><a href="#">Login</a></li>
<li>
<form action="#" method="get">
<fieldset>
<legend>Search Form</legend>
<label for="searchTerm">Search</label>
<input type="text" name="searchTerm" id="searchTerm" size="40" maxlength="150" />
<input type="submit" value="Search" />
</fieldset>
</form>
16 of 44 09/09/2013 03:55 PM
</li>
<div id="nav">
<div id="logo">
<ul id="menu">
<li class="dropdown"><a href="#">Features</a></li>
<div id="content">
<div class="inner">
<div id="slider">
<ul id="cycle">
</ul>
<li class="">
<a href="#" title="Unlimited Columns With 960 Grid">
<img src="http://d3pr5r64n04s3o.cloudfront.net/tuts/188_iconify/tutorial-coding-phase/assets/icons/blueprint.png" height="48" width=
</a>
<h5><a href="#" title="Unlimited Columns With 960 Grid">Unlimited Columns With 960 Grid</a></h5>
</li>
<li class="">
<a href="#" title="Unlimited Colors (Change CSS Hex)">
<img src="http://d3pr5r64n04s3o.cloudfront.net/tuts/188_iconify/tutorial-coding-phase/assets/icons/colouralt.png" height="48" width=
</a>
<h5><a href="#" title="Unlimited Colors (Change CSS Hex)">Unlimited Colors (Change CSS Hex)</a></h5>
</li>
<li class="">
<a href="#" title="Display Images With A Unique Flair">
<img src="http://d3pr5r64n04s3o.cloudfront.net/tuts/188_iconify/tutorial-coding-phase/assets/icons/photos.png" height="48" width="48
</a>
<h5><a href="#" title="Display Images With A Unique Flair">Display Images With A Unique Flair</a></h5>
</li>
<li class="">
<a href="#" title="Supports All Modern Browsers">
<img src="http://d3pr5r64n04s3o.cloudfront.net/tuts/188_iconify/tutorial-coding-phase/assets/icons/safari.png" height="48" width="48
</a>
<h5><a href="#" title="Supports All Modern Browsers">Supports All Modern Browsers</a></h5>
</li>
<hr />
<li class="">
</a>
<p>
</p>
</li>
<li class="">
</a>
<p>
</p>
</li>
<li class="">
</a>
<p>
</p>
</li>
17 of 44 09/09/2013 03:55 PM
<div class="inner">
<blockquote>
A color management system reconciles color differences among devices so that you can be reasonably certain of the colors your sy
</blockquote>
<span class="arrow"></span>
</div>
<cite>
<strong>Thomas Miller</strong> CEO, envato
</cite>
<div class="bar">
<h5>
Recent Projects
</h5>
<ul class="">
<li class="">
<a href="#" >
</a>
</li>
<li class="">
<a href="#" >
</a>
</li>
<li class="">
<a href="#" >
</a>
</li>
<li class="">
<a href="#" >
</a>
</li>
</ul>
<div id="footer">
<div class="inner">
<div class="top">
<div id="twitter" class="">

<ul class="social">
<li><h5>Get Social</h5></li>
<li>
<a href="#" title="RSS">
<img src="http://d3pr5r64n04s3o.cloudfront.net/tuts/188_iconify/tutorial-coding-phase/assets/social-icons/rss.png" height="32" w
</a>
</li>
<li>
<a href="#" title="Flickr">
<img src="http://d3pr5r64n04s3o.cloudfront.net/tuts/188_iconify/tutorial-coding-phase/assets/social-icons/flickr.png" height="32
</a>
</li>
<li>
<a href="#" title="Facebook">
<img src="http://d3pr5r64n04s3o.cloudfront.net/tuts/188_iconify/tutorial-coding-phase/assets/social-icons/facebook.png" height="
</a>
</li>
<li>
<a href="#" title="Twitter">
<img src="http://d3pr5r64n04s3o.cloudfront.net/tuts/188_iconify/tutorial-coding-phase/assets/social-icons/twitter.png" height="3
</a>
</li>
<li class="">
<h5>About ICONIFY</h5>
<p>
Creating themes to give away or sell is great, but not everyone who uses your theme will have a solid understanding of HTML/CSS.
</p>
</li>
<li class="">
<h5>Categories</h5>
<ul class="list">
<li><a href="#" title="Graphics Design">Graphics Design</a></li>
<li><a href="#" title="Web Graphics">Web Graphics</a></li>
<li><a href="#" title="User Interface Designing">User Interface Designing</a></li>
18 of 44 09/09/2013 03:55 PM
<li><a href="#" title="3D Graphics">3D Graphics</a></li>

<li><a href="#" title="Web Development">Web Development</a></li>
<li><a href="#" title="Programming">Programming</a></li>
<li><a href="#" title="Scripting">Scripting</a></li>
<li><a href="#" title="Wordpress">Wordpress</a></li>
<li><a href="#" title="Cartooning">Cartooning</a></li>
<li><a href="#" title="Object Oriented Development">Object Oriented Development</a></li>
<li><a href="#" title="Information Architecture">Information Architecture</a></li>
</ul>
</li>
<li class="">
<h5>Recent Posts</h5>
<ul class="blogList">
<li>
<p>
</p>
</li>
<li>
<p>
</p>
</li>
</ul>
</li>
<a href="#" id="toTop" title="Scroll To Top"></a>
<hr />
<p class="copyright">
Copyright © <a href="#" title="ICONIFY">ICONIFY</a> 2011-2015, All Rights Reserved.
<span style="float: right;">
Template By: <a href="http://themeforest.net/user/palpaldal/" title="palpaldal's Themeforest Profile">palpaldal</a>
</span>
</p>
</body>
</html>
Part B Presentation
Weve finished the markup portion of this tutorial, lets move on to the CSS.
First, create some blank CSS files inside your css folder. Youll also need to download and link prettyPhoto.css file and 960.css file
from the Nomarginsforerroe and 960 website respectively. Create and link your CSS style sheets from inside your document head as
shown below:
<head>


<link rel="stylesheet" type="text/css" href="files/codes/css/reset.css" media="all" />

<link rel="stylesheet" type="text/css" href="files/codes/css/960.css" media="all" />

<link rel="stylesheet" type="text/css" href="files/codes/css/default.css" media="all" />

<link rel="stylesheet" type="text/css" href="files/codes/css/prettyPhoto.css" media="all" />



</head>
In the bottom portion, weve linked two style sheet documents specifically for IE browsers. Weve placed them inside a conditional
comments block which only IE browsers understand.
19 of 44 09/09/2013 03:55 PM
Step B 1: Resetting Default Styles

You may have noticed by this time, that though we havent applied any CSS style to our document, our contents are not completely
unstyled. These are the default browser styles and theyre applied to every page loaded. To properly position and design our page,
we must apply some basic styles to reset these default styles, thus creating a blank slate to apply our own styles and positioning.
Were going to do that from inside our reset.css document.
Open reset.css document in your text editor. Then copy the following into the document:
@charset "utf-8";
/* CSS Document */
/*
~"~"~ ICONIFY ~"~"~ XHTML Template by palpaldal
TABLE OF CONTENTS ------------------
1. Style resetting codes (using Eric Meyer's resetter)
http://meyerweb.com/eric/tools/css/reset/
v1.0 | 20080212
2. Default styles of some common XHTML tags/elements.
*/
/* ----------------- Resetting browser defaults ------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, button,
table, caption, tbody, tfoot, thead, tr, th, td {
background: transparent;
border: 0;
font-size: 100%;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
}
body{
background: #e7e7e7;
color: #7c7c7c;
font: normal 12px/18px Arial, Helvetica, sans-serif;
}
ol, ul{list-style: none;}
ol li, ul li{
display: inline;
line-height: 0;
}
blockquote, q{quotes: none;}
blockquote:before,
blockquote:after,
q:before,
q:after{
content: '';
content: none;
}
:focus{outline: 0;}
/* ----------------- Applying default styles to common XHTML elements ------------------- */
a{
color: #eaa000;
text-decoration: none;
}
a:hover, a:focus{border-bottom: 1px solid;}
abbr{
border-bottom: 1px dotted;
letter-spacing: 0.2em;
}
acronym{
border-bottom: 1px solid;
letter-spacing: 0.1em;
}
h1, h2, h3, h4, h5, h6{
color: #2e5bc3;
font: bold 100%/1.2 Arial, Helvetica, sans-serif;
margin: 18px 0;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a{color: #2e5bc3;}
h1{font-size: 32px;}
20 of 44 09/09/2013 03:55 PM
h6{
font-size: 13px;
text-transform: uppercase;
}
p{
font-size: 12px;
line-height: 18px;
margin: 18px 0;
}
pre{
font-family: consolas, "Courier New", Courier, monospace;
font-size: 14px;
line-height: 18px;
}
blockquote{
font-size: 12px;
font-style: italic;
line-height: 18px;
margin: 18px 0;
padding-top: 6px;
}
blockquote+blockquote{
background: none;
padding: 0;
text-indent: 0;
}
cite{
display: block;
font-style: normal;
line-height: 18px;
margin: 18px 0;
text-align: right;
}
cite strong{display: block;}
strong,
b{font-weight: bold;}
em,
i{font-style: italic;}
del,
strike{text-decoration: line-through;}
small{font-size: .8em;}
big{font-size: 1.2em;}
code{
font-family: consolas, "Courier New", Courier, monospace;
padding: 2px 4px;
}
input[type="text"],
input[type="password"],
textarea{
border: 1px solid #dbdbdb;
font-size: 12px;
line-height: 12px;
margin: 0;
padding: 8px 10px 7px;
}
input[type="text"]{
color: #666666;
font: normal 12px/1 Arial, Helvetica, sans-serif;
}
input[type="password"]{
color: #666666;
font: normal 12px/1 "Courier New", Courier, monospace;
}
textarea{
color: #666666;
font: normal 12px/18px Arial, Helvetica, sans-serif;
overflow: auto;
}
input[type="text"]:focus,
input[type="text"]:hover,
input[type="password"]:focus,
input[type="password"]:hover,
textarea:focus,
textarea:hover{
background-color: #dedede;
border-color: #bbbbbb;
}
button,
input[type="submit"],
input[type="button"],
input[type="reset"]{
background: #fcfcfc;
border: 1px solid #b6b6b6;
color: #7c7c7c;
21 of 44 09/09/2013 03:55 PM
cursor: pointer;
display: block;
font-size: 12px;
height: 32px;
line-height: 12px;
padding: 0 20px 3px 20px;
}
button:focus,
button:hover,
input[type="submit"]:focus,
input[type="submit"]:hover,
input[type="button"]:focus,
input[type="button"]:hover,
input[type="reset"]:focus,
input[type="reset"]:hover{
background-color: #b6b6b6;
color: #fff;
}
hr{
background: #cdcdcd;
border: none;
border-bottom: 1px solid #f6f6f6;
border-top: 1px solid #f6f6f6;
display: block;
padding-top: 1px; /* Chrome having trouble with height larger than 1px*/
height: 0;
margin: 18px 0;
}
/* tables still need 'cellspacing="0"' in the XHTML markup */
table{
border: 1px solid #cecece;
border-right: none;
border-top: none;
border-collapse: collapse;
border-spacing: 0;
}
table caption{
caption-side: top;
font-style: italic;
padding: 2px;
text-align: right;
}
td,
th{
border: 1px solid #cecece;
border-bottom: none;
border-left: none;
padding: 4px;
}
First, were declaring our character set UTF8 as the same weve used for our HTML.
In the resetting section, were resetting default browsers styles and positioning. Were also applying our default body and text colors
and details to the body selector. Now, if you preview your document in any browser youll notice that our theme is slowly coming to
life with our own colors and some styles were applying from reset.css file.
22 of 44 09/09/2013 03:55 PM
Step B 2: Position And Design Elements

Were going to use the grid960 library for easy positioning. And well use default.css file from now on to design and position our
contents. Make sure you have properly linked 960.css file inside your index.html head section. We dont need to touch the 960.css
file, well just use some classes from the 960.css library to easily position our contents.
Open default.css file in your text editor. Now copy paste the following into your default.css file.
@charset "utf-8";
/* CSS Document */
/*
~"~"~ ICONIFY ~"~"~ XHTML Template by palpaldal
TABLE OF CONTENTS ------------------
1. Common Theme Elements (usually inline elements)
2. Theme Structure
3. Pages Common Content's Styles
a. Header
b. Menu
c. Breadcrumbs
d. Footer
e. Sidebar
f. Pagination
4. Pagewise Styles
a.Home
b. Portfolio
i. Column 2
23 of 44 09/09/2013 03:55 PM
ii. Column 3
iii.Column 4
c. Blog
ii. Comments
iii.Comment Form
d. Contact
i. Contact Form
5. Others
*/
/* <<<<<<<<<< 1. Common Theme Elements (usually inline elements) >>>>>>>>>> */
/* <<<<<<<<<< 2. Theme Structure >>>>>>>>>> */
/* <<<<<<<<<< 3. Pages Common Content's Styles >>>>>>>>>> */
/* <<<<<<<<<< a. Header >>>>>>>>>> */
/* <<<<<<<<<< b. Menu >>>>>>>>>> */
/* <<<<<<<<<< c. Breadcrumbs >>>>>>>>>> */
/* <<<<<<<<<< d. Footer >>>>>>>>>> */
/* <<<<<<<<<< e. Sidebar >>>>>>>>>> */
/* <<<<<<<<<< f. Pagination >>>>>>>>>> */
/* <<<<<<<<<< 4. Pagewise Styles >>>>>>>>>> */
/* <<<<<<<<<< a.Home >>>>>>>>>> */
/* <<<<<<<<<< b. Portfolio >>>>>>>>>> */
/* <<<<<<<<<< a. Column 2 >>>>>>>>>> */
/* <<<<<<<<<< b. Column 3 >>>>>>>>>> */
/* <<<<<<<<<< c. Column 4 >>>>>>>>>> */
/* <<<<<<<<<< c. Blog >>>>>>>>>> */
/* <<<<<<<<<< i. Comments >>>>>>>>>> */
/* <<<<<<<<<< ii. Comment Form >>>>>>>>>> */
/* <<<<<<<<<< d. Contact >>>>>>>>>> */
/* <<<<<<<<<< i. Contact Form >>>>>>>>>> */
/* <<<<<<<<<< 5. Others >>>>>>>>>> */
Step B 2a: Three Main Sections

First, were going to position the three main horizontal sections- #header, #content, and #footer of our theme. Well do this by
applying class .container_16 to every section as shown here:
<div id="header" <strong>class="container_16"</strong>>
<div class="inner">
...
<div id="content" <strong>class="container_16"</strong>>
<div class="inner">
...
<div id="footer" <strong>class="container_16"</strong>>
<div class="inner">
...
Now our three main sections are floating in the center of the page. .container_16 is the grid 16 of grid960. The total width of all our
three sections is now exactly 940px. Our design, however, is 980px wide so were going to apply (left+right: 20+20)px padding around
our sections. Well also apply some other styles to our sections. Type these rules inside your default.css files 2. Theme Structure
section or copy and paste them.
/* <<<<<<<<<< 2. Theme Structure >>>>>>>>>> */
#header{
background: #f1f1f1;
border: 1px solid #cdcdcd;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
border-bottom-right-radius: 10px;
border-top: none;
padding: 0 10px;
margin-bottom: 20px;
}
#header .inner{
border: 1px solid #f9f9f9;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
border-bottom-right-radius: 10px;
border-top: none;
margin: 0 -10px;
24 of 44 09/09/2013 03:55 PM
padding: 0 20px;
}
#content{
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
margin-top: 20px;
padding: 0 10px;
}
#content .inner{
border-radius: 10px;
margin: 0 -10px;
padding: 40px 20px;
}
#footer{
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
border-top-left-radius: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
border-top-right-radius: 10px;
margin-top: 20px;
padding: 0 10px;
}
#footer .inner{
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
border-top-left-radius: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
border-top-right-radius: 10px;
margin: 0 -10px;
padding: 1px 20px;
}
All the rules for these three sections are pretty much the same. To #header, were applying a background color and the outer border
color (get these color values from your design with the eye dropper tool). And .inner elements for the inner white glow. Check your
progress in your browser to make sure everything is being styled appropriately. Here our documents browser preview:
25 of 44 09/09/2013 03:55 PM
Step B 2b: The Header Section

Slice and save the headers divider horizontal ruler graphic from your index.psd file. Use the following image as a guideline and use
image slicing techniques as described in the Step A 4. Well use this bdr-bg.png image in numerous places throughout our theme.
26 of 44 09/09/2013 03:55 PM
/* <<<<<<<<<< a. Header >>>>>>>>>> */

#header .top{
background: transparent url(../../images/bdr-bg.png) left bottom repeat-x;
overflow: hidden;
padding: 10px 0 13px 552px;
}
#header .top li{
color: #ababab;
display: block;
float: left;
line-height: 24px;
margin-right: 10px;
}
#header .top li a{
border: none;
border-left: 1px solid #d0d0d0;
color: #ababab;
padding: 0 0 0 10px;
}
#header .top li:last-child{margin: 0;}
#header .top li:first-child a{border: none; padding:0;}
#header .top li a:focus,
#header .top li a:hover{color: #eaa000;}
#header .top form{
margin-left: 10px;
position: relative;
}
#header .top legend{display: none;}
#header .top input[type="text"]{
background: #d8d8d8;
border: 1px solid #bdbdbd;
height: 14px;
width: 160px;
padding: 4px;
font-size: 12px;
line-height: 12px;
}
#header .top label{
27 of 44 09/09/2013 03:55 PM
display: none;
left: 8px;
position: absolute;
top: 0px;
}
#header .top input[type="submit"]{
background: transparent url(../../images/srch-btn.png) 0 0 no-repeat;
border: none;
display: block;
font-size: 0;
height: 15px;
padding: 0;
position: absolute;
right: 4px;
text-indent: -999px; /* some browser shows 1px height texts like Safari even with font-size: 0 */
top: 4px;
width: 19px;
}
#header .top input[type="submit"]:focus,
#header .top input[type="submit"]:hover{background-position: -19px 0;}
#nav{padding: 20px 0;}
#logo a{border: none;}
Heres our recently styled header section:
OK, a summary of the most important code blocks or tricks, sequentially from top to bottom.
#header .top were using this element to apply the divider image.
#header .top li this applies a different text color for this block. And its large line-height will help our text stay in the middle of
the block.
#header .top li a overriding the default link elements styling and applying a unique style for this block.
#header .top li:last-child selecting the last child of #header .top element and zeroing out its margin for perfect positioning.
#header .top li:first-child a overriding the styling of #header .top first child.
#header .top form setting forms position to relative for its label to float appropriately .
#header .top legend hiding legend element from displaying
#header .top label were positioning the label to act like a field value for visitors to easily define why this field is for. By
default were hiding it, but well display it using JS.
#header .top input[type="submit"] for this button please slice and save our magnifier icon with the guideline shown in
image B 2bb.
28 of 44 09/09/2013 03:55 PM
Step B 2c The Menu

First copy the following into your menu section. You can see whats changed by whats been highlighted:
<div id="nav" class="container_16 clearfix">

<div id="logo" class="grid_5 alpha">
<ul id="menu" class="grid_11 omega">
<li class="dropdown"><a href="#">Features</a>
<ul>
<li><a href="#">Home Pages</a></li>
<li><a href="#">Portfolio Pages </a> <span>»</span>
<ul>
<li><a href="portfolio.html">Column 2</a></li>
<li><a href="portfolio-col-3.html">Column 3</a></li>
<li><a href="portfolio-col-4.html">Column 4</a></li>
</ul>
</li>
<li><a href="#">Blog Pages</a> <span>»</span>
<ul>
<li><a href="blogs.html">Blog List</a></li>
<li><a href="blog-page.html">Blog</a></li>
</ul>
</li>
<li><a href="#">Fake Link 1</a></li>
</ul>
</li>
Were applying class names container_16 and clearfix to the div#nav element to properly position our #logo and #menu. Were
applying .grid_5 and .alpha to div#logo to give it a space equal to 5 grids and removing its left margins with the class .alpha. Were
also applying .grid_11 and .omega to the ul#menu to give it a space equal to 11 grids and removing its right margins with the class
.omega. Finally, we take care of the dropdown or multi-level menus. Well design and position menu and multi-level menus with CSS.
29 of 44 09/09/2013 03:55 PM
Now slice and save your dropdown menu items arrow inside your files->images folder as shown in image B 2ca
Copy or type the following code inside your default.css files menu section.
/* <<<<<<<<<< b. Menu >>>>>>>>>> */
#menu{
padding: 16px 0 0 290px;
width: 350px;
z-index: 999;
}
#menu li{
color: #0f5193;
font-size: 14px;
font-weight: bold;
margin-left: 14px;
position: relative;
}
#menu li.active a,
#menu li a:focus,
#menu li a:hover{border-bottom: 1px solid #88afd5;}
#menu>li.dropdown>a{
border: none;
background: transparent url(../../images/drop-arrow.png) right center no-repeat;
padding-right: 10px;
}
#menu>li.dropdown.active>a{border-bottom: 1px solid #88afd5;}
#menu li a{color: #0f5193;}
#menu ul{
border: 1px solid #b7b7b7;
border-radius: 4px;
position: absolute;
top: -999px;
margin: 0;
padding: 1px 11px;
left: 0;
width: 100px;
z-index: 999;
}
#menu ul li{
background: #d5d5d5;
display: block;
font-size: 12px;
font-weight: normal;
line-height: 1.6;
margin: 0 -10px;
padding: 4px 10px 0;
}
30 of 44 09/09/2013 03:55 PM
#menu ul li span{font-size: 14px;}

#menu ul li:first-child{padding-top: 8px;}
#menu ul li:last-child{padding-bottom: 6px;}
#menu li:hover ul{top: 16px;}
#menu li:hover li ul,
#menu li li:hover li ul,
#menu li li li:hover li ul,
#menu li li li li:hover li ul{top: -999px;}
#menu li li:hover ul,
#menu li li li:hover ul,
#menu li li li li:hover ul,
#menu li li li li li:hover ul{
left: 121px;
top: -2px;
}
#menu li li:hover ul{margin-left: 37px;}
#menu li li li:hover ul,
#menu li li li li:hover ul,
#menu li li li li li:hover ul{margin-left: 21px;}
#menu li li:hover>a{border-bottom: 1px solid #88afd5;}
What have we done here?
#menu extra padding to push menu items to the right.

#menu li setting its position to relative to properly position the multi-level menus.
#menu>li.dropdown>a applying the multilevel menus arrow and giving its some extra padding for arrow graphic to fit
perfectly inside the menu item.
#menu>li.dropdown.active>a applying a fixed border to the .active multi-level menu item.
#menu ul this is the actual multi-level menu element. So, were applying some styles to decoration and position our
multi-level menu items.
#menu ul li its background color is showing as the actual background color of the multi-level menu.
#menu ul li span giving it a larger text size as the arrows look a little odd with 12px.
Note: our multi-level menus have extra margins on their left. Everything will be fine when we apply the superfish jQuery dropdown
menu plugin a little later.
Step B 2d: The Content Area

Now were going to deal with our #content sections contents.
The image slider (jQuery.cycle plugin)

Position, slice and save your image sliders radios inside your files->images folder as shown in image B 2da
31 of 44 09/09/2013 03:55 PM
Copy the following to your default.css files a.Home subsection.

/* <<<<<<<<<< a.Home >>>>>>>>>> */
#slider{
background: #b5b5b5;
height: 336px;
margin-top: 10px;
padding: 1px;
width: 936px;
overflow: hidden;
position: relative;
}
#cyclePager{
position: absolute;
height: 18px;
overflow: hidden;
right: 20px;
bottom: 20px;
z-index: 99;
}
#cyclePager a{
background: transparent url(../../images/cycle-pager.png) 0 0 no-repeat;
display: block;
float: left;
height: 18px;
margin-left: 10px;
text-indent: -9999px;
width: 18px;
}
#cyclePager a:hover,
#cyclePager a.activeSlide{background-position: -18px 0;}
The styles are very simple. #sliders background color needs to be shown as the dark inner glow color. Well achieve this by applying
a 1px padding inside the #slider element. We apply position: relative to our #cyclePager so that it floats inside the #slider and on top
of the slides. a.activeSlide is a class of current active slide, jQuery cycle plugin will automatically apply this class.
The 4 Column Promotional Items

Apply these class names to your .promo-col-4 element and its children:
<ul class="promo-col-4 <strong>container_16 clearfix</strong>">
<li <strong>class="grid_4 alpha"</strong>>
...
32 of 44 09/09/2013 03:55 PM
</li>
<li <strong>class="grid_4"</strong>>
...
</li>
...
</li>
<li <strong>class="grid_4 omega"</strong>>
...
</li>
Here were applying a width to every column equal to grid 4 and clearing the floating bug with the class clearfix.
Copy or type the following styles after your #slider code inside the a.Home section.
.promo-col-4{margin: 30px 0 40px;}
.promo-col-4 li{
display: block;
overflow: hidden;
}
.promo-col-4 li img{
display: block;
float: left;
margin-right: 10px;
}
.promo-col-4 li h5{margin: 4px 0;}
At this point your document should to render in browsers like the image shown below:
The 3 Column Promotional Items

Apply these class names to your .promo-col-3 element and its children:
<ul class="promo-col-3 <strong>container_12 clearfix</strong>">
...
</li>
...
</li>
...
</li>
..and copy this CSS rule after your #promo-col-4 codes inside a.Home section.
.promo-col-3{margin: 40px 0;}
We have two borders in our images: an inner glow and a darker border. We can apply these styles directly from Photoshop but its
far more flexible to achive the effect using CSS. Well apply the inner glow from Photoshop and apply a class of .border to our
images for those two borders. As an example, follow these guidelines on how I slice, apply the styles, then save them.
33 of 44 09/09/2013 03:55 PM
Our .promo-col-3 images dimensions are 300140. Well start by creating a new document in Photoshop measuring 298x138px
(were leaving 1px from around image to fill those 1px with CSS). Now place your image, reduce its size by using transform. Hit
Ctrl+A to select the entire canvas, goto Image->Crop. Now copy the layer styles from any one of our images, now apply that layer style
to this new image. After doing all that all you should see the glow effect. Now save your image in your assets folder. Apply the same
techniques for our future images using the following image as a reference.
Now apply a class of .border to the images, and paste this code inside your default.css files 1. Common Theme Elements (usually
inline elements) section.
.border{border: 1px solid #b9b9b9;}
The Testimonial
Slice and save testi-arrow.png image inside your files->images folder as shown in image B 2db.
Paste the following code after your #promo-col-3 codes inside the a.Home section.
.testimonial{margin: 40px 0;}
#content .testimonial .inner{
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
padding: 0;
position: relative;
margin: 0;
}
.testimonial blockquote{
34 of 44 09/09/2013 03:55 PM
border: 1px solid #d9d9d9;

margin: 0;
padding: 20px;
}
.testimonial .arrow{
background: transparent url(../../images/testi-arrow.png) 0 0 no-repeat;
bottom: -10px;
display: block;
height: 12px;
position: absolute;
right: 20px;
width: 16px;
}
Here we are..
#content .testimonial .inner overriding some styles of .inner element.
>.testimonial blockquote setting the background and inner border color of the testimonial box.
>.testimonial .arrow linking testi-arrow.png image and positioning it appropriately.
Lets again check how things are rendering in the browser:
The Recent Projects Box

Apply these class names to your #recentProjects elements children:
<div class="bar">
...
<ul <strong>class="container_16 clearfix"</strong>>
...
</li>
...
</li>
...
</li>
...
</li>
</ul>
Copy the following rules after your .testimonial codes inside a.Home section.
#recentProjects .bar{
border: 1px solid #e5e5e5;
35 of 44 09/09/2013 03:55 PM
margin: 0 0 18px 0;
}
#recentProjects h5{
color: #7c7c7c;
margin: 0;
height: 38px;
text-align: center;
font-size: 14px;
line-height: 36px;
}
Weve just finished designing and positioning our #content sections elements. In the browser our #recentProjects element should
to render perfectly as shown below.
Step B 2e: The Footer Area

Lets tackle the footer..
The #footers .top Portion

Apply these class names to your .top element and its children:
<div class="top <strong>container_12 clearfix</strong>">
<div id="twitter" <strong>class="grid_8 alpha"</strong>>
...
<ul class="social <strong>grid_4 omega</strong>">
...
Paste the following code inside your default.css files d. Footer subsection.
/* <<<<<<<<<< d. Footer >>>>>>>>>> */
#footer .top{
background: transparent url(../../images/bdr-bg.png) left bottom repeat-x;
overflow: hidden;
padding-bottom: 33px;
width: 940px;
}
#twitter{
background: transparent url(../../images/twitter-bird.png) 0 center no-repeat;
margin-top: 30px;
padding-left: 50px;
width: 570px;
}
#twitter h2,
#twitter .profileLink{display: none;}
#twitter li{
display: block;
36 of 44 09/09/2013 03:55 PM
line-height: 18px;
}
.social{
background: transparent url(../../images/v-bdr-bg.png) 1px 0 repeat-y;
height: 32px;
margin: 30px 0 0 0;
padding: 0 0 0 10px;
overflow: hidden;
}
.social li{
display: block;
float: left;
line-height: 18px;
margin-right: 10px;
}
.social li:last-child{margin-right: 0;}
.social h5{
color: #7c7c7c;
font-size: 14px;
font-weight: normal;
line-height: 32px;
margin: 0 0 0 62px;
width: 70px;
}
.social a{border: none;}
Here we are..
#footer .top using its background property to apply our border.

#twitter applying our twitter bird as a background image. Were also overriding some styles and hiding them (our twitter
jQuery plugin will append them in our document).
.social were applying vertical border with this element. For your vertical border, slice and save this graphic from our
index.psd file as shown in image B 2ea.
At this point our document should to render as follows. Please note that our twitter section is empty as weve not applied any scripts
to our document.
37 of 44 09/09/2013 03:55 PM
The #footers .content Portion

Apply these class names to your .content element and its children:
<ul class="content <strong>container_12</strong>">
...
</li>
...
</li>
...
</li>
Paste the following code after your .top rules inside d. Footer section.
#footer .content{
margin-top: 30px;
width: 940px;
overflow: hidden;
}
#footer .content .grid_4{
background: transparent url(../../images/v-bdr-bg.png) right top repeat-y;
width: 287px;
padding-bottom: 500px;
padding-right: 20px;
margin-bottom: -500px;
}
#footer .content li:last-child{
padding-right: 0;
background: none;
width: 286px;
}
#footer .content h5{
color: #7c7c7c;
margin-top: 0;
}
#footer .blogList li{
display: block;
line-height: 18px;
}
#footer .blogList li:last-child{margin: 0;}
#footer .blogList img{
display: block;
float: left;
margin: 0 10px 4px 0;
}
#footer .blogList h5{
38 of 44 09/09/2013 03:55 PM
color: #2e5bc3;
margin: 0;
}
#footer .blogList p{margin: 10px 0;}
#toTop{
background: transparent url(../../images/to-top.png) 0 0 no-repeat;
border: none;
cursor: pointer;
display: block;
height: 10px;
margin: 20px auto;
width: 11px;
}
#toTop:focus,
#toTop:hover{background-position: -11px 0;}
#footer .content .grid_4 overrides the default .grid_4 width and applies some other styles.
For #toTops arrow slice, save the arrow from our Photoshop file as shown in image B 2eb.
Copy the following code inside your default.css files 1. Common Theme Elements (usually inline elements) section.
.border{border: 1px solid #b9b9b9;}
.list{margin: 18px 0;}
.list li{
display: block;
line-height: 18px;
margin-bottom: 4px;
}
.list li a{color: #7c7c7c;}
.list li a:focus,
.list li a:hover{color: #eaa000;}
.btn{line-height: 18px;}
You may have noticed that weve applied a class of .list to our Categories item inside .content section. This .list is a common inline
class and we can use it to display other list items in any other pages. And our final footer element looks like this:
39 of 44 09/09/2013 03:55 PM
Final Touches
Weve successfully designed our homepage, and our theme works fine in all the modern browsers except IE. For IE, we need some
special CSS since they dont support some CSS pseudo classes. Were going to write some IE specific code to handle these issues.
If you preview your document by this point in IE8 then youll find this misrendering:
40 of 44 09/09/2013 03:55 PM
To solve these misrenderings copy or type the following rules inside your ie8.css file.
/* as IE8 having trouble supporting CSS pseudo class ":last-child" */
#header .top li+li+li+li{margin: 0;}
#footer .inner .content li+li+li{
padding-right: 0;
background: none;
width: 286px;
}
.social li+li+li+li+li{margin-right: 0;}
.popularPost ul li+li{margin-right: 0;}
If you preview your document in IE7 youll find some browser misrenderings as in IE8 + more
To solve these please copy or type the following rules inside your ie7.css file.
/* as IE7 having trouble supporting CSS pseudo class ":last-child" */
#header .top li+li+li+li{margin: 0;}
#footer .inner .content li+li+li{
padding-right: 0;
background: none;
width: 286px;
}
.social li+li+li+li+li{margin-right: 0;}
#menu ul li:last-child{padding-bottom: 6px;}
#footer .content .grid_4{
padding-bottom: 0;
margin-bottom: 0;
}
hr{
background: #cdcdcd;
border: none;
border-bottom: 1px solid #f6f6f6;
border-top: 1px solid #f6f6f6;
display: block;
padding: 0;
height: 3px;
margin: 18px 0;
}
.popularPost ul li+li{margin-right: 0;}
#commentForm input[type="text"],
#commentForm textarea,
#contactForm input[type="text"],
#contactForm textarea{margin-left: -80px;}
Note: were targeting some elements which dont exist, yet. Well use these selectors/elements later.
41 of 44 09/09/2013 03:55 PM
Step C Defining Interactions with JavaScript

Download and link these JavaScript libraries. jQuery JavaScript Library v1.4.2, jQuery.prettyPhoto v-2.5.6, and jQuery.cycle v-2.80.
<head>


<link rel="stylesheet" type="text/css" href="files/codes/css/reset.css" media="all" />

<link rel="stylesheet" type="text/css" href="files/codes/css/960.css" media="all" />

<link rel="stylesheet" type="text/css" href="files/codes/css/default.css" media="all" />

<link rel="stylesheet" type="text/css" href="files/codes/css/prettyPhoto.css" media="all" />


<script src="http://d3pr5r64n04s3o.cloudfront.net/tuts/188_iconify/tutorial-coding-phase/files/codes/js/jquery-1.4.2.min.js"></script>

<script src="http://d3pr5r64n04s3o.cloudfront.net/tuts/188_iconify/tutorial-coding-phase/files/codes/js/jquery.cycle.all.min.js"></script>

<script src="http://d3pr5r64n04s3o.cloudfront.net/tuts/188_iconify/tutorial-coding-phase/files/codes/js/jquery.prettyPhoto.js"></script>

<script src="http://d3pr5r64n04s3o.cloudfront.net/tuts/188_iconify/tutorial-coding-phase/files/codes/js/init.js"></script>



</head>
Now open your init.js file and copy the source from the following plugins:
jQuery.easing plugin
jQuery.scrollTo plugin
jQuery.supersubs dropdown menu plugin
jQuery.superfish dropdown menu plugin
jQuery.twitter plugin
jQuery.scrollToTop plugin
custom jQuery.tinyValidator validates form fields
Theme Script initialization function/codes
All the above libraries are third party. Were combining them into a single file for fewer HTTP requests. Among them tinyValidator
is a mini validation plugin which Ive developed. Now were going to actually start/initialize our scripts. Copy the following code
inside your init.js files Site Initialization JavaScript Codes section.
/* <<<<<<<< Site Initialization JavaScript Codes >>>>>>>> */
;(function($){
$(document).ready(function(){
$('.border').parent('a').css('border', 'none');
});
/* jQuery ScrollToTop plugin */
$(function() { $("#toTop").scrollToTop({speed:1000,ease:"easeInOutQuad",start:600}); });
/* cycle plugin function declarations using 'cycle.js' jquery plugin */
if ($('#cycle').length > 0){
$('#cycle').cycle({
fx: 'scrollLeft',
speed: 500,
timeout: 8000,
randomizeEffects: false,
easing: 'easeInOutQuad', //jquery.easing library/plugin is required for this functionality
next: '',
prev: '',
pager: '#cyclePager',
cleartypeNoBg: true
});
}
});
/* altering search form label and using it's label as field's value */
42 of 44 09/09/2013 03:55 PM
var $searchTerm = $('#searchTerm');

if($searchTerm.val() == ''){
$('label', '#header').css('display', 'inline');
}
$searchTerm.focus(function(){
$searchTerm.siblings('label').hide();
})
.blur(function(){
if($searchTerm.val() == ''){
$searchTerm.siblings('label').show();
}
});
});
/*
* dropdown menu function using 'superfish.js' and 'supersubs.js' jquery plugin
*/
if(jQuery.browser.msie && parseInt(jQuery.browser.version, 10) < 7){
$('ul', '#nav').superfish({
delay: 1000,
animation: {opacity: 'show'},
speed: 800,
autoArrows: false
})
}
else{
$('ul', '#nav').supersubs({
minWidth: 8,
maxWidth: 10,
extraWidth: 0
}).superfish({
delay: 1000,
animation: {opacity: 'show'},
speed: 800,
autoArrows: false
})
}
});
/*
* initializting twitter plugin
* change 'userName' variable with yours and you are done.
* you can also alter other settings as you need them.
*/
$(document).ready(function() {
$("#twitter").getTwitter({
userName: "jquery",
numTweets: 1,
loaderText: "Loading tweets...",
slideIn: true,
slideDuration: 750,
showHeading: true,
headingText: "",
showProfileLink: true,
showTimestamp: true
});
});
})(jQuery);
Were placing all our site initialization codes inside an anonymous function.
In the first block were removing hover state border from images with a class .border.
Initializing jQuery scrollToTop plugin with our #toTop element.
Making sure #cycle is available and then initializing the cycle plugin.
Altering search form label and using its label as fields value.
Initializing dropdown menu function using superfish.js and supersubs.js jquery plugin
Initializing twitter plugin. You can show your tweet by only changing the userName variable.
Conclusion
Phew! Weve finsihed the most substantial part of our coding phase. You may notice that some practices or techniques have been
exaggerated, but these were only for demonstration purposes and little else. Well work on finishing up this theme in the next part.
Thank you so much for reading!
Tags: iconifymarkupweb design
By Nuruzzaman Sheikh
43 of 44 09/09/2013 03:55 PM
This author has yet to write their bio.
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
44 of 44 09/09/2013 03:55 PM

Tutorial Psdtohtmlcss7

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Tutorial Psdtohtmlcss7

Diunggah oleh

Hak Cipta:

Format Tersedia

Design And Develop A Complete Website (A Tuts+ Mini Series,... http://webdesign.tutsplus.com/tutorials/complete-websites/de...

Design And Develop A Complete Website (A

The Game Plan

Resources Used For This Project

Images Lil Rhody Dan, Flickr

Generally, HTML conversion consists of three separate parts:

Lets convert our Photoshop design into a working HTML page!

Step A 1: Creating The Site Structure

Step A 2: The First HTML Document

Step A 3: Inspecting The Design

</div>

In browsers, our document now looks like this image:

Step A 4: Populate the Header

Heres our header design translated into HTML markup:

<li class="dropdown"><a href="#">Features</a></li>

Your browser should now render index.html like this

Step A 5: Populate The #content

<li><img src="http://d3pr5r64n04s3o.cloudfront.net/tuts/188_iconify/tutorial-coding-phase/assets/slides/2.jpg" height="336" width="9

Currently, our page renders in the browser like this

Step A 6: Populate the Footer

Copy the following code into your html document.

div.bottom should be self explanatory. And this is the browser preview:

Final Index Page HTML

<li><a href="#" title="3D Graphics">3D Graphics</a></li>

Step B 1: Resetting Default Styles

Step B 2: Position And Design Elements

Step B 2a: Three Main Sections

Step B 2b: The Header Section

/* <<<<<<<<<< a. Header >>>>>>>>>> */

Heres our recently styled header section:

Step B 2c The Menu

<div id="nav" class="container_16 clearfix">

#menu ul li span{font-size: 14px;}

What have we done here?

#menu extra padding to push menu items to the right.

Step B 2d: The Content Area

The image slider (jQuery.cycle plugin)

Copy the following to your default.css files a.Home subsection.

The 4 Column Promotional Items

The 3 Column Promotional Items

border: 1px solid #d9d9d9;

#content .testimonial .inner overriding some styles of .inner element.

>.testimonial .arrow linking testi-arrow.png image and positioning it appropriately.

Lets again check how things are rendering in the browser:

The Recent Projects Box

Step B 2e: The Footer Area

The #footers .top Portion

#footer .top using its background property to apply our border.

The #footers .content Portion

Step C Defining Interactions with JavaScript

var $searchTerm = $('#searchTerm');

Tags: iconifymarkupweb design

This author has yet to write their bio.

Anda mungkin juga menyukai