Beruflich Dokumente
Kultur Dokumente
In this web development tutorial, youll learn how to build a web page template from a Photoshop
mock-up from a previous tutorial called "How to Create a Clean Web 2.0 Style Web Design in
Photoshop" using HTML/CSS and the jQuery library.
This is the second part of a two-part series that will teach you how to create the layout in Photoshop,
and then how to convert it to a standards-compliant (X)HTML web design.
Final Result
Click on the figure below to see the live demonstration of the web design that youll be creating in this
tutorial.
Download
Jan Cavan, who wrote the first part of this tutorial, has provided us with a Photoshop source file that
well use to build the site template. The following download contains the Photoshop file and all of the
examples that are used in this tutorial.
clean-web-2.0-source.zip (ZIP, 3.4 MB)
Introduction
In this tutorial, well create a fixed-width web layout using some basic coding techniques. Towards the
end, well enhance the design with a bit of jQuery.
Though probably not the most efficient way, for instructional purposes, were going to work our way
from top to bottom that is were going to start from the header all the way down to the footer.
Preview the examples when they are available to make sure that you are keeping up with the progress.
Prepare for a long journey and make sure you have your favorite caffeinated drink handy, because this
tutorial will be a very long one! Lets begin.
3 Open index.html and styles.css in your favorite text editor (well deal with javascript.js later). Also,
open the PSD file in Photoshop; its inside the clean-web-2.0-source.zip archive and its called web2-
mockup-psd.psd.
With our file structure set up and all our files opened, were ready to slice, dice, and code.
Creating the diagonal background
4 In Photoshop, turn off all the layers of web2-mockup-psd except for the bottom two layers, bg and
diagonal lines.
5 Create exactly a 20px wide selection using the Rectangular Marquee Tool (M) starting from the left
side of the canvas, with the selections height spanning the full height of the document.
6 Make sure the diagonal lines layer is active, use Edit > Copy Merged (Ctrl + Shift + C) to copy the
area inside the 20px wide selection. Create a new document and paste (Ctrl + V) the copied selection
into the new document. Save this inside the img folder under the name bg_body.jpg.
Setting up the HTML and CSS files
7 Head over to index.html. The first thing we want to do is reference style.css and javascript.js in the
<head> of our HTML document.
<head>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="javascript.js"></script>
</head>
8 Lets head on over to styles.css and put in some basic style rules. Were going to take a shortcut and
use the Universal Selector margin/padding CSS reset to zero out all the elements margins and
paddings. This works a majority of the time, but its often better to invest some time learning about
more robust CSS Reset techniques. Head on over to my article called "Resetting Your Styles with CSS
Reset" to learn more about CSS Reset.
Here is the style rule declaration for resetting the margins and paddings:
/* CSS Reset */
* { margin:0; padding:0; }
Awesome! Lets preview how the background looks. In Example 1 below, youll see our diagonal
background in action.
Example 1: Diagonal lines set as the body elements background.
11 Well give #container a width of 1024px and center it using the margin property:
#container {
width:1024px;
margin:0 auto;
}
13 Copy Merge (Ctrl + Shift + C) with the highest layer selected, and then paste the logo in a new
document.
14 Were going to make this into a CSS background sprite so that when users hover over it, we can
show them a rollover effect. Increase the canvas size, Image > Canvas Size (Ctrl + Alt + C). Double the
height of the canvas by entering 250px in the height. Change the Anchor to the top middle position.
15 Duplicate Layer 1, then move it down to the bottom using the Move Tool (V).
16 With the duplicated layer active (Layer 1 copy), use Image > Adjustments > Replace Color .
Make sure the Image radio box is selected. Click the Color box to change the selection color, and
sample somewhere towards the bottom portion of the logo (#e2e2e2). Play around with the Hue,
Saturation, and Lightness values until you get an effect that you like. In the following figure, youll see
the settings I used.
17 Save the file for the web, File > Save for Web (Alt + Shift + Ctrl + S) as logo.jpg in our img folder.
From now on, use the same settings for saving these files. I used the JPEG, Very High, but feel free to
change these settings. If you change the default settings, be sure to save it the same way every time to
provide consistency in the images.
21 Follow step 16 to replace the color for the bottom layer. I used the same setting for the selection
color, #e2e2e2.
22 Save the file as menu.jpg inside the img folder.
25 Lets work on the logos style first. We transform our <h1> element into a block element. we float it
to the left so that our logo and menu are side-by-side. We use the logo we created earlier (step 17) as
the background, and finally indent the text to the left where it cant be seen to hide our text. This
method of replacing text with a background image is called CSS Background Image Replacement.
#header h1 {
display:block;
float:left;
width:320px;
height:125px;
background:url(img/logo.jpg) no-repeat 0 0;
text-indent:-10000px;
}
26 To make the logo clickable, we also need the <a> element inside the <h1> element to be a block
element, and give it the same width and height at <h1>
#header h1 a {
display:block;
width:100%;
height:100%;
}
29 For the list items, well make them into block elements as well, then float them to the right so that
they display side by side. Then, just like the logo, we use text-indent to hide the text.
#header ul li {
display:block;
float:left;
height:125px;
text-indent:-10000px;
}
30 We need to set custom widths for each list item so that the clickable area of each menu item will be
accurate.
#home {
width:160px;
}
#about {
width:137px;
}
#work {
width:129px;
}
#contact {
width:210px;
}
31 We set the children <a> elements of our list items to display block with a width and height equal to
their parents.
#header ul li a {
display:block;
width:100%;
height:100%;
}
32Finally, for the hover, we adjust the background-position property of the menu.jpg sprite.
#home a:hover {
background:url(img/menu.jpg) no-repeat 0 -125px;
}
#about a:hover {
background:url(img/menu.jpg) no-repeat -160px -125px ;
}
#work a:hover {
background:url(img/menu.jpg) no-repeat -297px -125px ;
}
#contact a:hover {
background:url(img/menu.jpg) no-repeat -426px -125px ;
}
33 Preview your work in a web browser. Check out Example 2 below to see where we are. Hover over
the logo and the menu items, they should change colors.
Example 2: The header section completed.
34 In the featuredarea folder in the Layers palette, turn off all the layers except for the sub-title and
main-heading layers so that the "Learn More" button and the Apple monitor on the right isnt showing.
35 Create a selection that is exactly 960px by 360px around the "Featured Area" section.
36 Copy this into a new document and then save it as featured_bg.jpg inside the img folder.
Creating the "Featured Area" button
37 Lets slice out the "Learn More" button. Turn on the learnmore folder in the Layers palette; its
inside the taglines folder.
44 Lets style the paragraph, which acts, effectively, as our container. We need to set the position
property to relative so that (later on) our monitor, wholl be absolutely-positioned, will position
itself relative to the #featuredText paragraph and not the body of the web page. We set
featured_bg.jpg as the background and indent the text to the left just like in previous examples.
p#featuredText {
display:block;
position:relative;
float:left;
width:100%;
height:375px;
background:url(img/featured_bg.jpg) no-repeat 0 0;
text-indent:-10000px;
}
45 Next we style the "Learn More" button. We use learnmore.jpg as the background. We declare a
hover style rule so that we can get the CSS rollover effect just like in the logo. Well also absolutely-
position the monitor on the top right of the #featuredText container.
a#learnMoreButton {
display:block;
width:280px;
height:60px;
background:url(img/learnmore.jpg ) no-repeat 0 0;
margin:200px 0 0 132px;
}
a:hover#learnMoreButton {
background-position:0 -60px;
}
#monitor {
position: absolute;
top:0;
right:0;
}
Featured Area is done. Check out the preview of both the header and the Featured Area finished
(Example 3).
Example 3: Header and Featured Area completed.
Creating the rounded corner boxes
46 The next step is creating the rounded corner boxes. The mockup uses a non-web-safe for the font, so
were going to replace it later on with a web-safe font (Verdana). Well cut up each box one at a time.
First, turn off the text layers inside the box, box 2, and box 3 folders in the Layers palette in
Photoshop.
47 Create a selection around the first box that is exactly 320px by 185px. Use Copy Merged, then paste
it into another document. Save it as box1.jpg in the img folder.
48 Repeat 47 for the second box and the third box. Save them inside the img folder as box2.jpg and
box3.jpg, accordingly.
52 Well give #leftCol a width the is equal to the width of the two boxes above to give the design a
bit of symmetry. We have to give it a left margin to align it with the edge of the first box above, a top
margin to give the boxes a bit of room below. Then we give the text inside the column some styles.
#leftCol {
width:640px;
float:left;
margin:20px 0 0 10px;
}
#leftCol h2 {
font:bold 20px/24px Verdana, Geneva, sans-serif;
color:#094e64;
}
#leftCol p {
font:normal 14px/20px Arial, Helvetica, sans-serif;
color:#094e64;
margin-top:10px;
}
Heres a preview of the design with the left column in place (Example 5).
Example 5: left column incorporated into the design.
55 Copy the selection (use Copy Merged), paste it onto a new document. Save it as newsletter_bg.jpg.
56 Create a selection around the Go button, copy it, and then paste it into another document. Save it as
go.jpg.
58 We give the form a relative position so that we can absolutely-position the input and Go button. We
hide the border for the text input #emailInput by giving the border property a value of none. We
give the form a top margin to align the top portion of the form to the left column, and a bottom margin
to give it space from the footer.
#newsletter {
position:relative;
width:320px;
height:110px;
float:left;
background:url(img/newsletter_bg.jpg) no-repeat 0 0;
margin:20px 0 50px 0;
}
#newsletter label {
font:bold 16px Verdana, Geneva, sans-serif;
letter-spacing:-1px;
margin-top:26px;
width:100%;
display:block;
color:#fff;
text-align:center;
}
#emailInput {
position:absolute;
top:51px;
left:5px;
width:200px;
margin:0px 0 0 30px;
font:bold 20px Verdana, Geneva, sans-serif;
color:#999;
border:0;
background-color:transparent;
border:none;
}
#submitButton {
position:absolute;
top:43px;
right:27px;
width:50px;
height:40px;
margin-top:5px;
padding:0;
}
Check your work against Example 6 below to make sure youre still in the same page. Try typing
something in the text field.
Example 6: Newsletter form complete.
61 Lets place the following script inside javascript.js. Read the comments to gain an understanding of
whats going on.
$(document).ready(function(){
// Remove CSS style of hover
$('#header h1 a:hover').css('background','none');
// Bind a mouseenter event to #header > h1 > a element
$('#header h1 a')
.bind('mouseenter',function(){
// Insert a span > a element in DOM that we will fade in
// with class name .logoHover
$(this)
.before('<span class="logoHover"><a href="#">home</a></span>');
// Hide new DOM element immediately, then fade it in
$('.logoHover')
.hide().fadeIn()
// When mouse leaves logoHover, fade out, on complete, remove
// from DOM.
.bind('mouseleave', function(){
$(this).fadeOut('normal', function(){
$(this).remove()
});
});
});
});
Finished!
Congratulations for sticking through this tutorial youre a champ! I hope you learned a few tips and
tricks on converting a design mockup to an HTML template.