Professional Documents
Culture Documents
Tutorial Psdtohtmlcss11
Tutorial Psdtohtmlcss11
Website Layout
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
[Download Source]
</div>
</body>
a {color:#000;text-decoration:none;}
a:hover{text-decoration:underline;}
This chunk of CSS defines the basic element styling, a background image to the page and frames
width and margins.
#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 */
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.
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.
This area will contain 4 small thumbnails and some welcome or introduction message as a text.
Footer Area
Our Navigation area and footer area are alike, so I made a common CSS for both of them. See the code
below:
Live Demo
[Download Source]