To start, you will need your favorite HTML/Code editor like Dreamweaver or Notepad ++ and PSD of this Tutorial.
FINAL VERSION DEMOS
Live Demo
[Lets Get Started
Let’s start by making a new folder and a directory structure as mentioned below within this folder.
1. Create a Folder called “Images”, which will contain all our images
2. Create a Folder called “styles”, which will contain style.css – or if you prefer to move it to the images folder, feel free to do so.
3. Open a blank/new index.html and save it in this primary folder.
4. Open a blank/new css file, name it as style.css and save it in styles folder.
Head Area Code
Now I am going to show you the obvious HTML head area of index.html with the attached CSS.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Designzzz's Minimalist Website Layout</title>
<link rel="stylesheet" type="text/css" href="styles/style.css" media="screen" />
</head>
Moving Forward to Body
I am defining the width of the web page as 960px and the main container div would be called ‘frame’. This is how our body structure will look like :
<body> <div id="frame"> <!-- All the Body Area Code --> </div> </body>
CSS for Body and Frame Container
html, * {padding:0; margin:0;} //defining 0 margin and padding for all elements
body {background:url(../images/bg.jpg) no-repeat top center #ada6a0; font-family:Arial,Verdana,Helvetica,sans-serif; font-size:12px;}
a {color:#000;text-decoration:none;}
a:hover{text-decoration:underline;}
#frame {width:960px; margin:0 auto;} //Frame Container's CSS
This chunk of CSS defines the basic element styling, a background image to the page and frame’s width and margins.
Logo, Navigation and Search Area
As you can see in the demo, the top center area is defined for logo, below lies the navigation and the search box. This is the HTML for these sections:
<!-- Logo Area Starts --> <div id="logo"> <img src="images/logo.png" alt="logo" /> </div> <!-- Logo Area Ends--> <!-- Navigation Starts--> <div class="nav"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact</a></li> </ul> <!-- Navigation Ends --> <!-- Search Area Starts --> <div id="search"> <input type="text" id="s" name="s" onclick="this.value='';" value="Site Search" /> <input type="image" class="btn" id="searchsubmit" value="Search" src="images/search.jpg" name="" /> </div> <!-- Search Area Ends --> </div> <!-- Navigation Div Ends -->
CSS for this Area
/* Logo CSS Starts */
#logo {width:200px; height:80px; margin:15px auto;}
/* Logo CSS ENDS*/
/* Navigation and Search CSS Starts*/
.nav {width:100%;height:45px;background:#fff; -moz-box-shadow:0 0 8px #666; -webkit-box-shadow:0 0 8px #666; box-shadow:0 0 8px #666;}
.nav ul {list-style:none;}
.nav ul li {float:left;font-size:16px; margin:13px 22px;}
.nav div {float:right;}
.nav p {margin:15px; float:left;}
#search {float:right;border:none;}
#search input {
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
border: 1px solid #CCCCCC;
float: left;
padding: 8px;
width: 285px;
margin:5px;
}
#search input.btn {
background: none repeat scroll 0 0 transparent;
border: 0 none;
margin: 10px 0 0 -40px;
padding: 0;
width: auto;
}
/* Navigation and Search CSS Ends */
Its pretty much self explanatory.
Featured Gallery Area
This would be the area where featured images will rotate or have a previous/next button. Since we are only working on the design view, we will not work on any jQuery or flash for this area, thus only show it via a static image.
Featured Gallery Area HTML
<div id="gallery"> <img src="images/gallery.jpg" alt="gallery" /> </div>
Featured Gallery Area CSS
/* Gallery Area */
#gallery { //css for gallery div
width:960px;
height:370px;
margin:20px auto;
text-align:center;
background:#fff; -moz-box-shadow:0 0 8px #666;
-webkit-box-shadow:0 0 8px #666;
box-shadow:0 0 8px #666;
}
#gallery img {padding:10px 0;} //css for img with in the gallery
Moving to Content Area 4 Blocks
There are 4 blocks which represents content in a beautiful manner. Since all four of these blocks are visually the same, they will use one common CSS. Below i will show code of 1 block.
HTML for Blocks
<div class="blocks"> <img src="images/thumb1.jpg" alt="thumb" /> <p>Lorem ipsum dolor sit amet, uer uer Duis autem vel eum iriure Duis autemvel eum iriure dolor. ipsum dolor sit amet, consectetuer Duis autem vel Lorem ipsum Lorem ipsum dolor sit amet, uer uer Duis autem vel eum iriure Duis autemvel eum iriure dolor. ipsum dolor sit amet, consectetuer </p> <p><a href="#" class="more">more...</a></p> </div>
CSS for Blocks
/* Content Blocks */
.blocks {width:200px;
float:left;
margin-right:26px;
padding:10px;
height:350px;
background:#fff;
-moz-box-shadow:0 0 8px #666;
-webkit-box-shadow:0 0 8px #666;
box-shadow:0 0 8px #666;
text-align:justify;
margin-bottom:15px;
}
.blocks img {margin-bottom:5px;}
.more {font-size:12px; float:right; color:#000; margin-top:7px; text-decoration:underline;}
Moving to Welcome Text and Description Box
This area will contain 4 small thumbnails and some welcome or introduction message as a text.
HTML for Description Box
<div id="desc-box"> <div class="thumbnails-div"><img src="images/small-thumb1.jpg" alt="smallthumb" /> <img src="images/small-thumb2.jpg" alt="smallthumb" /> <img src="images/small-thumb1.jpg" alt="smallthumb" /> <img src="images/small-thumb2.jpg" alt="smallthumb" /></div> <div class="description"><h3>Welcome to the Site.</h3> <p> Lorem ipsum dolor sit amet, uer uer Duis autem vel eum iriure Duis autemvel eum iriure dolor. ipsum dolor sit amet, consectetuer Duis autem vel Lorem ipsum Lorem ipsum dolor sit amet, uer uer Duis autem vel eum iriure Duis autemvel eum iriure dolor. ipsum dolor sit amet, consectetuer Lorem ipsum dolor sit amet, uer uer Duis autem vel eum iriure Duis autemvel eum iriure dolor. ipsum dolor sit amet, consectetuer Duis autem vel Lorem ipsum Lorem ipsum dolor sit amet, uer uer Duis autem vel eum iriure Duis autemvel eum iriure dolor. ipsum dolor sit amet, consectetuer Lorem ipsum dolor sit amet, uer uer Duis autem vel eum iriure Duis autemvel eum iriure dolor. ipsum dolor sit amet, sectetuer.</p><p><a href="#" class="more">more...</a></p></div> </div>
CSS For Description Box
/* Welcome Text Box */
#desc-box {
height:160px;
margin:10px auto;
text-align:center;
background:#fff;
-moz-box-shadow:0 0 8px #666;
-webkit-box-shadow:0 0 8px #666;
box-shadow:0 0 8px #666;
overflow:hidden;
padding:10px;
}
.thumbnails-div {
width:200px;
float:left;
}
.thumbnails-div img {
margin:4px;
}
.description {
float:right;
width:710px;
padding:10px;
text-align:justify;
}
.description h3{margin:5px 0;}
Footer Area
Our Navigation area and footer area are alike, so I made a common CSS for both of them. See the code below:
HTML For Footer
<div class="nav">
<p>
<a href="#">Terms of Service</a>
</p>
<p>
<a href="#">Privacy Policy</a>
</p>
<p>© 2009 <a href="http://www.designzzz.com/">Designzzz</a> </p>
<div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
