Tampilan Website Sederhana

How to Code a Clean Minimalist HTML CSS
Website Layout
February 7, 2011
Ayaz Malik
o Designs
o Tutorials
AD
A long time ago, one of our authors named Jillz created a tutorial about Designing a
Minimalist Website Layout in Photoshop. I used that exact PSD file and created an HTML
CSS Layout for our readers so that you can learn some coding lessons or download it and use it
as your own site (naturally free of charge).
As you might have guessed, we are going to start a step by step tutorial for creating a Minimalist
HTML CSS Layout.
This tutorial doesnt require slicing in Photoshop, because it will cover only the most basic topics
and is for beginners.
To start, you will need your favorite HTML/Code editor like Dreamweaver or Notepad ++ and
PSD of this Tutorial.
Final Version Demos

Live Demo
{filelink=15}
Lets Get Started
Lets 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">

</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 frames 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:


<div id="logo">
<img src="images/logo.png" alt="logo" />
</div>


<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>


<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>

</div> 
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;
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;
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>
Live Demo
{filelink=15}
Some End Notes
1. This tutorial is intended for beginners and that is why I have neglected the use of common
CSS classes for multiple divs etc., such as the CSS used for shadows of all the divs that can be
make into one style and can be applied to all the divs with their id CSS.
2. If you get errors on Validation because of possible repetitions of IDs in div, dont worry about
it. It is because we have used same div ids for alike divs like blocks. So instead of making CSS
with different names, I made one common and used it 4 times. (FIXED)
3. Feel free to use this layout in your personal or commercial layouts if you want. A link back to
us will be appreciated though .
4. Waiting for your suggestions and critique in comments!

Tampilan Website Sederhana

Uploaded by

Copyright:

Available Formats

You might also like

Tampilan Website Sederhana

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Tampilan Website Sederhana

Uploaded by

Copyright:

Available Formats

How to Code a Clean Minimalist HTML CSS

Final Version Demos

Lets Get Started

3. Open a blank/new index.html and save it in this primary folder.

Head Area Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

Moving Forward to Body

CSS for Body and Frame Container

html, * {padding:0; margin:0;} //defining 0 margin and padding for all

body {background:url(../images/bg.jpg) no-repeat top center #ada6a0; font-

#frame {width:960px; margin:0 auto;} //Frame Container's CSS

CSS for this Area

/* Logo CSS Starts */

/* Navigation and Search CSS Starts*/

.nav {width:100%;height:45px;background:#fff; -moz-box-shadow:0 0 8px #666;

Its pretty much self explanatory.

Featured Gallery Area

Featured Gallery Area HTML

Featured Gallery Area CSS

Moving to Content Area 4 Blocks

HTML for Blocks

CSS for Blocks

Moving to Welcome Text and Description Box

HTML for Description Box

CSS For Description Box

HTML For Footer

4. Waiting for your suggestions and critique in comments!

You might also like