Clean Web 2.0 Style Web Design From Photoshop

Coding a Clean Web 2.
0 Style Web Design from Photoshop
Six Revisions
Home
All Articles
Tutorials
Freebies
About
Contact
Follow on Twitter
Subscribe: RSS Feed | Email
Coding a Clean Web 2.0 Style Web Design from Photoshop

May 29th, 2009 by Jacob Gube | 89 Comments | Stumble It! Delicious
Sponsors
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.
http://sixrevisions.com/tutorials/web-development-tutorials/coding-a-clean-web-20-style-web-design-from-photoshop/ (1 of 61) [25-10-2009 00:23:08]
Subscribers
Search
Search
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.
Topics
AJAX CSS Design Showcase / Inspiration Flash Freebies Graphic Design JavaScript Photoshop Project Management Resources Tools Tutorials
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.
Usability / Accessibility User Interface Web Applications Web Design Web Development Web Standards WordPress
Setting up the file structure

1 Create a folder in your local machine for our template files and call it web2. This will be
our working directory.
2 Inside the web2 folder, create the following:

img folder will contain all images used in the tutorial. index.html our site template. styles.css our stylesheet. javascript.js this will contain our JavaScript
Recent
Favorites from the Feeds #08 Leafd: 10 Free High-Res Photoshop Leaf Brushes Create a Clean Business Web Template Design in Photoshop 35 Creative Twitter User Profile Designs How to Create Remarkable 3D Text in Photoshop
Friends
1stwebdesigner Blog.SpoonGraphics Burbia Chris Wallace Css Globe Design Bump DesignM.ag fudgegraphics Function InstantShift
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.0source.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.
LaptopLogic.com Naldz Graphics NETTUTS Noupe psdfan.com PSDVIBE [Re]Encoded.com Smashing Apps Smashing Magazine Stylegala Stock Footage - Foto Search Stylized Web TheBestDesigns.com Vandelay Design Walyou Web Designer Help Webdesigner Depot Web Design Ledger WPBeginner
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; }
Implementing the diagonal background

9 Were going to repeat the 20px background we created (body_bg.jpg) horizontally.
Were going to set it as the <body> background.
body { background:#59d3fa url(img/body_bg.jpg) repeat-x 0 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.
Setting up the layouts container div

10 Lets move into some HTML. Well contain our layout in a 1024px wide container div
called #container.
<body> <div id="container">  </div> </body>
11 Well give #container a width of 1024px and center it using the margin property:
#container { width:1024px; margin:0 auto; }
Creating the logo

12 Lets cut up the stuff well need for our header, starting with the logo. Head over to
the Photoshop file. Turn on all the layers. Create a selection around the logo that is exactly 320px and 125px wide using the Rectangular Marquee Tool (M). Use Photoshop Guides (View > Show > Guides) to make this easier and more precise. The reason you have to be exact is due to the diagonal lines in the background, everything has to align properly.
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.
Creating the navigation menu

18 Just like with the logo, create a selection exactly 640px by 125px.
19 Copy the selection (Copy Merged) and then paste it into a new document. 20 Just like in step 14, double the height of the canvas to 250px, Image > Canvas Size
(Ctrl + Alt + C), and dont forget to change the Anchor to top middle. Then again, duplicate Layer 1, and move it down to the bottom using the Move Tool (V).
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.
Coding the Headers HTML markup

23 Lets switch to our HTML/CSS. First, well start with the markup. Inside the
#container div, we use another div to create our header section well call it #header. You may want to use a more structural naming convention though like #branding, thats up to you. If you want to learn more about structural naming conventions, take a breather from our tutorial and read through my article on "Structural Naming Convention in CSS".
For our logo, well use a <h1> heading element. Our navigation will be a standard unordered list item. Each list items <a> element needs an ID for the CSS rollover and because they have different widths.
<div id="container"> <div id="header"> <h1><a href="#">Creativo</a></h1> <ul> <li id="home"><a href="#">Home</a></li> <li id="about"><a href="#">About</a></li> <li id="work"><a href="#">Work</a></li> <li id="contact"><a href="#">Contact</a></li> </ul> </div> </div>
Styling the Logo

24 First, lets style #header. We need to give it a top margin property so that we have
some space at the top of the web page, just like our mockup. Since our content area is 960px, well give #header a width of 960px. This will give us ample room on either side of the layout for scroll bars and so that when the user minimizes the web browser, theres still a bit of margin on the left and rigth and our content is not right at the edges of the view port (making the content hard to read). We also have to center it using the auto for the right and left margins. Below, I used the margin property shorthand, and for beginners, the numbers correspond to top (90px), right (auto), bottom (0), and left (auto) margin.
#header { height:125px; width:960px; margin:90px auto 0 }
auto;
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) text-indent:-10000px; }
no-repeat 0 0;
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%; }
27 To enable the rollover effect, we change the background position of a:hover.

#header h1 a:hover {
background:url(img/logo.jpg) no-repeat 0 -125px; }
Styling the navigation menu

28 Onto the primary navigation. We also need to convert it to a block element and float it
to the right of the logo. Then we set the background to menu.jpg and remove the list item bullets.
#header ul { display:block; float:right; width:640px; height:125px; background:url(img/menu.jpg) no-repeat 0 0; list-style:none; }
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) } #about a:hover { background:url(img/menu.jpg) } #work a:hover { background:url(img/menu.jpg) } #contact a:hover { background:url(img/menu.jpg) }
no-repeat 0 -125px;
no-repeat -160px -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.
Creating the "Featured Area" background

Lets call the part of the mockup with the monitor screen, text that says "Web build websites", and "Learn More" button "Featured Area".
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.
38 Create a selection around the button thats exactly 280px by 60px.
39 Copy the selection to a new document. Were going to make a rollover CSS sprite for
this one as well. Double the height of the canvas, duplicate Layer 1, move the duplicate down to the bottom, just like in steps 14 through 17. For the selection color, I used:
#0a72a6. The only Replacement value I changed was the Hue setting, and I set that to +10. Save it as learnmore.jpg inside the, you guessed it, the img folder.
Creating the Monitor image

40 The monitor on the right of the layout will just be an image. The more industrious
individuals reading this tutorial will try to use that monitor as a cool little slideshow where the monitor changes content were not going to cover that here today. Turn on the rest of the featuredarea folder.
41 Create a selection around the monitor, exactly 375px by 370px.
42 Copy it to a new document, then save it as monitor.jpg.

Coding the "Featured Area"

Now, were going to work on the "Featured Area" HTML and CSS. So head on over to index.html.
43 For the "Featured Area", were going to use a block-displayed <p> element. You can
certainly use a div for this, but I chose to go with a paragraph. The "Learn More" button is an <a> element, and the monitor screen is just an image inside the paragraph. Heres the markup:
<p id="featuredText"> We build websites that blow you away[...] <a href="#" id="learnMoreButton">learn more.</a> <img id="monitor" src="img/monitor.jpg" width="375" height="370" alt="scrn" /> </p>
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 absolutelypositioned, 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.
Coding the boxes

49 Head over to index.html. We will create a containing div for the boxes called
#boxContainer. Inside this div, well create three boxes with a class of .box. So that we can set the appropriate CSS background, we double-declare the class property of the boxes with .client, .work, and .book. Here is the markup:
<div id="boxContainer"> <div class="box client"> <h2>Client list</h2> <p>We have a wide range of clients from [...]<p> </div> <div class="box work"> <h2>Our work</h2> <p>Check out the work we have done for our various [...]</p> </div> <div class="box book"> <h2>Book now!</h2> <p>[...] Click here to get a <strong>free quote</strong>!</p> </div>
Styling the boxes

50 We float the .box divs to the left so that theyre displayed next to each other. We give
the <h2> element an uppercase value for its text-transform property so that it is in all caps, just like the mock-up. Then for the .client, .work, and .book style rules, we set the appropriate background for each of the boxes.
.box { width:320px; height:185px; float:left; } .box h2 { font:bold 20px Verdana, Geneva, sans-serif; color:#0f83bc; text-transform:uppercase; margin:35px 0 0 140px; } .box p { font:normal 12px/18px Verdana, Geneva, sans-serif; color:#0c3b4a; margin:0 30px 0 140px; } .client { background:url(img/box1.jpg) no-repeat 0 0; } .work { background:url(img/box2.jpg) no-repeat 0 0; } .book { background:url(img/box3.jpg) no-repeat 0 0; }
Preview your work in the browser. It should look like Example 4. Example 4: Boxes completed
Coding and Styling the left column

51 Below the boxes, theres a content area that has a heading of "Need we say more?".
Well call this "left column", and put that text inside a div called #leftCol. Heres the markup:
<div id="leftCol"> <h2>Need us say more?</h2> <p>Creativo is a Web Design and Development[...]</p> </div>
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.
Creating the Newsletter web form

53 In Photoshop, turn off all the layers inside the more folder except for the layers that
show the background, the "Go" button, and the input field.
54 Create a selection around the newsletter area using the Rectangular Marquee Tool (M)
that is exactly 320px by 110px.
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.
Coding the Newsletter web form

57 For the web form, we use a <form> element, a label for the text, a text input, and a
submit button.
<form id="newsletter" action="" method="get"> <label for="emailInput">Sign Up for Our Monthly Newsletter: </label> <input id="emailInput" name="emailInput" type="text" /> <input id="submitButton" name="submitButton" value="Go" type="image" src="img/go.jpg" /> </form>
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.
Coding the footer

Were going to reduce the footer content from the mockup by not including the telephone number image on the right hand side. Our footer will be pure HTML and CSS. Heres the markup for the footer:
<div id="footer"> <p>Creativo Design © 2009. All Rights Reserved. </p> </div>
Here is the CSS:
#footer { clear:both; width:940px; border-top:1px } #footer p { margin:15px 0; font:bold 12px color:#094e64; }
dashed #094e64;
Arial, Helvetica, sans-serif;
Example 7: Footer compleste.
Some jQuery Goodness

Were going to add a JavaScript-based animation effect for the logos rollover using the jQuery library. Well use the Google AJAX Libraries API web service to do the heavy-lifting and use their infrastructure to serve the jQuery library. Were going to give the logo (#header h1 a) a cool fade in and out effect. Were going to manipulate the DOM to insert a span > a element with a class of logoHover which will have the rollover state as its background. When the user hovers over the logo, we will insert logoHover inside header h1 and then fade it in. When the user hover out, we fade out logoHover and then remove it from the DOM. You can apply this to other elements in the web design but Ill get you started with the logo.
59 To start, include the jQuery Library and javascript.js in the head of the HTML
document.
<head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="javascript.js"></script> </head>
60 Lets place the following styles in our styles.css:

span.logoHover { display:block; width:100%; height:100%; background:#ccc url(img/logo.jpg) no-repeat 0 -125px; } span.logoHover a { display:block; width:100%; height:100%; }
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.
The "Clean Web 2.0 Style Web Design" Series

This article is part two of a two-part series that shows you how to create a design in Photoshop, then how to code it into a valid (X)HTML web design. If youre interested in more tutorials like this, you should definitely subscribe to the RSS feed.

Part 1: How to Create a Clean Web 2.0 Style Web Design in Photoshop Part 2: Coding a Clean Web 2.0 Style Web Design from Photoshop
Credit The awesome icons used in the web layout (and which have been mentioned in the first part of this two-part series) are from Wilson Ink on DeviantArt the icon set is called the Green and Blue Icon Set.
Questions?
Please feel free to ask questions in the comments. I, along with the passionate and experienced readers of Six Revisions, will try to help you as best as we can. Also, please share your thoughts, opinions, and mistakes that you find in the tutorial.
Related content

Create a Slick and Accessible Slideshow Using jQuery How to Create a Worn Paper Web Layout Using Photoshop How to Create a Slick and Clean Button in Photoshop Using XAMPP for Local WordPress Theme Development Related categories: Tutorials and Web Development
People whove helped improve this tutorial
Dean Duncan Jones: Suggests to use a #container width of 1000px to avoid horizontal scrolling for some smaller monitors, instead of 1024px in step 11.
keyser soze: notes that in step 11, there was an error in the height of the menus li, which was correct in the example. Dave Read: Caught a mistake on step 23 where the id should be on the parent li and not in the a elements (it was correct in the example, but not in the tutorial). He also noted that the style rule for the monitor wasnt shown in the tutorial, which Ive added on step 45.
89 Comments
Roseli A. Bakar
May 29th, 2009
This is an awesome post Jacob. Thanks for sharing.
Kawsar Ali
May 29th, 2009
Nicely coded. I like the big web 2.0 buttons
mary
May 29th, 2009
Awesome, just skimmed through and this looks like a great walk through, thoroughly explained. Cant wait to work through it!!
Matthew Heidenreich
May 29th, 2009
great tutorial, thanks!
pavs
May 29th, 2009
Can someone explain to me what does web 2.0 style mean? I mean I actually like this portfolio design and I appreciate the effort that went to making the design possible. But what constitutes a web 2.0 style design? The way I understand web 2.0 is the concept of user-generated collaboration. How does portfolio design fit into user generated collaboration? Thanks http://en.wikipedia.org/wiki/Web_2.0
Jacob Gube
May 29th, 2009
Thanks for the feedback everyone! @mary: Awesome, when youre done with the walkthrough be sure to post your thoughts afterward (and any questions or parts of the text that were confusing), Im looking for feedback because were trying to improve the tutorials you see here on Six Revisions and all of you are very important in this process of improvement! General questions Id like to ask those that have read the tutorial: 1) What can we do to improve this format? 2) What do you think about the length and detail? Need more, too much, or just right? 3) For longer tutorials should we paginate them (split them up into multiple pages), or is it better to have the entire tutorial in one page? 4) Syntax highlighting for code: My intention for not using syntax-coloring is to force you to read the code more carefully. I highlight the important parts of the code in green for things you should really pay attention to. I got the inspiration from IBM developerWorks where I had to read the code listings more carefully because I didnt
get the help of syntax colorization. Did I achieve this intent? Any and all feedback appreciated, thanks guys!
Jacob Gube
May 29th, 2009
@pavs: First of all, Jan and I both know what Web 2.0 means. What we refer to is the general, newer design themes that the second generation of web applications embodied: simpler, slicker, more intuitive layouts, gradients and drop-shadows, glossy text, weird names like Flickr and YouTube. Along with concepts such as responsive applications empowered by a better understanding of client-side/server-side asynchronous communication, collaborative content creation, user-driven content, networking theres also a general theme, a general style, to what we consider a Web 2.0 app. Look at this collection of Web 2.0 sites, youd be lying if you said you couldnt discern a stylistic pattern there: http://www.go2web20.net/
Dean Duncan Jones

May 29th, 2009
Great tutorial. One thing I noticed though is that youre building your container div width: 1024px;. For a 1024768 resolution (or bigger) build youll want to use a max width of 1000px. If you dont, youll get that annoying little horizontal scroll bar that slides the page back and forth at 1024by766 resolution. Youre not accounting for the vertical scroll bar width or the window borders in your dimension. Your live demo shows what I mean. Resize your window to 1024 by 768 and youll see the horizontal scroll. 1000px will keep you good for most browsers and user settings.
Cisco
May 29th, 2009
@pavs I think what people mean when they use Web 2.0, in terms of design style, I believe that it ties into the trend of the more user-centered friendly style of interface. Some of what you see are the clean layout, big type, chunky buttons, fun colors, gradients, textured backgrounds, and the ever-popular reflective surface. There are many more characteristics. Those are just a few.
Dean Duncan Jones

May 29th, 2009
Oh, sorry, one more thing. In step eight you show the star selector hack to reset padding and margins in your css. If youre really going to teach about web 2.0, you should enforce standards and promote the usage of a reset.css file which will reset all html elements to baseline and keep your code valid (the star selector hack isnt valid CSS code). Eric Meyers came up with the original if you want to search his latest version or you can download my slightly modified version here: http://www.tmprod.com/styles/reset. css But again, great article for beginners.
Jacob Gube
May 29th, 2009
@Dean Duncan Jones: RE: CSS Reset, I chose to take a shortcut for the sake of brevity. This tutorial covers, Photoshop, HTML/CSS, and jQuery so I tried to be as terse as possible. I did say and encourage the use of a more robust CSS Reset solution when I say: 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.
The article I linked to (which I also wrote) is a big discussion on CSS Reset, and those that would like to learn more, can swap out the Universal margin/padding reset to a more robust one. I dont want to drown people with too much information; but I did offer an alternative to those that are interested to learn more (and have more time to invest in this tutorial).
fred
May 29th, 2009
Awesome tut, Jacob! Really nice design, well done on the coding as well. Nothing else to say except keep em coming!!
Musice
May 29th, 2009
OMG, its pretty well explained but it looks too hard for me :( Ill try to follow it when I end my exams, thank you.
Jesse
May 29th, 2009
Thanks for the commented jquery explanation, that helps. Sprites are fun! My only qualm is what happens when images are disabled oops, there goes the website! but thats another story. Jacob, Id have to say the level of detail is just right, so keep at it. :)
Jacob Gube
May 29th, 2009
@Jesse: Glad you liked it and thanks for the feedback. About CSS images disabled, Ill be covering that in an upcoming tutorial: progressively-enhanced navigation bar that
takes into account text-based > CSS on/images off > CSS on/images on > and JS on. I hope you stick around for that! Ive been working on that tutorial on and off for about a month, hope to finish it soon.
Megastarmedia
May 29th, 2009
this is a great idea for quick and simple landing pages. for larger sites, you should code in Dreamweaver. this is a very clean and easy to use tutorial btw. thanks so much sandy
Jan
May 29th, 2009
Very thoroughly explained, Jacob! Thank you :)
Zach Stowell
May 29th, 2009
Great article series! Great design, great transfer to a working site. One question though when youre saving off the logo/nav/etc images, you keep the blue background as a part of all of them. Wouldnt saving the images with transparent backgrounds be better for future refreshes of the design? You could then simply reuse the images you have and be able to reposition them anywhere in the design and not worry about background issues with the gradients/diagonals. Other than that little thing, I think its a great set of articles and many people can learn from these techniques. Keep them coming!
Tips for Website Design

May 30th, 2009
Thanks for a fantastic tutorial. Its very clearly written and easy to follow. Im looking forward to your navigation bar tutorial, it sounds interesting.
keyser soze
May 30th, 2009
Ive reached Example 2 after 33 steps and the menu isnt working (the blocks are a bit moved). After going through the code step-by-step, I adjusted the CSS in step 29: I made the height 125px (instead of 95) and deleted the margin entry. This is what you have in the added style sheet.
Jacob Gube
May 30th, 2009
@Zach Stowell: If you dont care about IE6 and below, you can save them as transparent PNGs (or install a PNG fix for alpha transparency support for legacy browsers).
deb
May 30th, 2009
Thanks for the JQuery part specifically. Though i understood after sometime with the help of comments, a lil bit of more explanation would not hurt :) PS: The last blue color box can have that .book class written for it in CSS. As you have asked for suggestions: I feel the Javascript parts can come with a bit more explanation in future. Any any tut longer than this one can be in 2/3 pages, though either ways does not bother me much.
I like the way the code is shown as of now, readable, i do not need syntax highlighting. Cant suggest anything else, you are a better blogger than me :)
Jacob Gube
May 30th, 2009
@keyser soze: You rock, thanks for noticing that! I updated the code for the example but failed to do it in the tutorials text. If you notice, the previous code listing (step 28), the style rule for the ul has the height at 125px and no margins. In any event, I fixed step 29, thanks! @deb: Thank you for your wonderful insight, very helpful feedback. With regards to the JavaScript explanation, Ill keep that in mind, looking at this now, I did skim through the last section (jQuery Goodness). The only reason was at that point, I was at the 9th hour of writing this tutorial and I was so tired that I just wanted to finish it. I will, sometime, update that section to provide a better explanation of whats going on, more than in the comments of the code.
Rahul
May 30th, 2009
Great work man. Really appreciate it.
Dave Read
May 30th, 2009
Loved loved loved the tutorial I learned a lot about CSS & element interactions just by tweaking the code as I went. Kudos for a great learning experience! Two small errors in the tutoral which could potentially be frustrating for the novice: Part 2 (Coding), Step 23: those ID tags should be in the tag, not in the <a> tag (this is
correct in the actual .css document, but incorrect on the page here. i.e.: Part 2 (Coding), Step 45: the .css code for including the monitor graphic is not mentioned in the tutorial, although it exists in the sample .css file. add to step 45: #monitor { position: absolute; top:0; right:0; } It took me six hours to put this all together (all my graphics were sized differently from the example, which meant lots of integer tweaking), but it was exactly what I was looking for to get me off WYSIWYG site building and into hand-building. Thanks so much! Keep them coming!
Dave Read
May 30th, 2009
rrrrr no tags in comments step 23 needs the id tag in the li tag, not the a tag loved the length & detail, and having a large part of the tut all on one page is great no clicking back through history to check previous steps. the code commenting was awesome, too the green color means an important piece of code to be noticed very useful convention. keep up the awesome work!
Maverick
May 31st, 2009
wooooooooooooow, it is so very well explained. great tutorial. thanks a ton Jacob.
gaus surahman
May 31st, 2009
Mostly relied on images is only perfect for portfolio or company profile, I guess. Yet a very comprehensive tutorial Ive read about web 2.0 style, thanks.
Jake
May 31st, 2009
Amazing tutorial, definitely useful for anybody beginning web design and needing to learn about how to create one from start to finish. I have created a post similar to this, creating a web 2.0 template-seller mockup in Photoshop similar to Template Monster.
Penelope Else
May 31st, 2009
Looks fantastic! Havent worked through it yet, but youre helping me to understand things that go over my head when reading reference pages. Am working on a new website soon I think itll be using lots of the things in here!
Jaan
June 1st, 2009
Fantabulous job jacob. This is the kind of articles the users expect..
Jacob Gube
June 1st, 2009
@Dave Read: You are amazing, thank you so much for catching those! Ive updated the tutorial. Im also adding a section called People whove helped improve this tutorial and linking to all of your wonderful comments because you guys and gals truly help me improve stuff here on Six Revisions.
Designer
June 1st, 2009
There are many tutorials out their. But, this is something else, some thing professional.
LyskeSpark
June 1st, 2009
This is a great tutorial. I have one question though. When I click on the buttons in demopage, it will show a border from the left side and around the button I click. How do you avoid this? It completly ruins the design!
Jacob Gube
June 1st, 2009
@LyskeSpark: One way to remove it is using outline: none; in steps 25 and 26 (for the logo and menu). This, however, makes it hard to see what is the focused element is when users use the Tab key to navigate through the web page.
Sarah
June 1st, 2009

Thank you so much for this- Im a complete beginner, with minimal experience with Photoshop and zero experience with coding, but I still made it through this tutorial. The only trouble Im having right now is with the alignment of the newsletter box. Its aligning on the left side, underneath the Need us say more? part rather than next to it. I dont know code well enough to find where the problem is.
Sarah
June 1st, 2009
Also, when Im looking at it in IE, the whole page aligns to the left side. Why does it do that in IE but not in Firefox or Chrome?
Jack Rugile
June 1st, 2009
Jacob, Ah, finally finished and it was a success! I have been wanting to get into PSD to xhtml for a long time now, and this was a great tutorial to help me get started. The tutorial for the most part was easy to follow, however there are a few things that threw me off : - I think that everything in the final product that you link to should be included in the tutorial. That includes the DOCTYPE declaration and the title tag for the page. When beginners (me!) see code in the source of the final that is not in the tutorial it can sometimes be confusing. - I had the guides and snapping on in the Photoshop document, but they would consistently snap to about 1 pixel off when I was selecting the particular elements. Dont know if there is a fix for this, but just wanted to point it out. - The closing tag for the boxContainer div is missing in the tutorial text.
- I found it strange that all the content of the site was contained in the header div. Why not make a separate content container that also has a width of 960px? - I know that this is just a mockup, but I felt that you should have included the links that the three boxes would have. Maybe just a color change effect with CSS on the box titles (client list, our work, book now). - The width for leftCol is 630px in the final product, but it says 640px in the tutorial which causes the newsletter to wrap. - The icon for book now! has the wrong icon in the final product. Ok, I think that is it :) Thank you for your time and thanks for this awesome tutorial. Looking forward to more of them. - Jack Rugile
Nick
June 1st, 2009
Why would you change fonts? Couldnt you leave the font as-is and just render the round-corner boxes as jpgs, preserving the fonts within the image? Im learning and just want to understand, thanks!
djaka
June 2nd, 2009
great tutorial!. step 52 #leftCol { width -> should be 630px instead of 640px as the newsletter box would be forced to go below the text. thank you :)
Jacob Gube
June 2nd, 2009
@Jack Rugile: First, Im so happy the end-result was a success: both tutorials took Jan and I a very long time to write, and if it helps even just 1 person, that time is more than worth it. Second: Ill be updating the tutorial based on your corrections, thank you (Ill of course place you under the people whove made the tutorial better section). @Nick: You could leave them as-is, but thatd make the entire web page just a Photoshop file sliced up. I believe in using plain text on content thats long. I dont mind quite as much with headings that are CSS image text replaced, but for anything thats a paragraph or so, Id go with just HTML. @djaka: Ah great catch,@Jack Rugile caught that too Ill update the tutorial with both of your corrections. Thank you!
Matt Read
June 5th, 2009
Well Im up to about step 45Spent many many hours on this. Im a complete beginner (well, pretty much) and doing this for one of my internet class assignments. This is my pretty much finished Photoshop http://tinyurl.com/mattie47site (and Im aware I spelt tutorials wrong) Just cant wait to get it done! Ill post back here when Ive finished it and uploaded it online =) Ill just add that your tutorial is pretty easy to follow but since Im not following it completely (having changed stuff) Ive found it quite hard :-/ ..anyhow =)
Jacob Gube
June 5th, 2009
@Matt Read: Wonderful! Its getting there, Im excited to see the final product and I hope this tutorial enhances your knowledge in how HTML/CSS works!
flashfs
June 5th, 2009
Thanks for this step-by-step tutorial. Is it possible to use jQuerys hover() instead of bind(mouseenter)?
Jacob Gube
June 6th, 2009
@flashfs: I havent tried it or anything, but yes, it should work with the .hover() method instead of .bind().
Matt Read
June 7th, 2009
Many hours later, Im still working on the front page ;-) This is my progress thus far http://tinyurl.com/mattie47testsite Its 3am NZDT so time for bed =) Also, Im not related to the Dave Read in the comments above although my father does share the same name ;-)
Mike
June 9th, 2009
Jacob, I cant imagine how long this tutorial must have taken you to write. This is absolutely awesome. Great job buddy! mike
John Arthur Gurondiano

June 9th, 2009
Very nice!!!
I would like to ask what kind of software that are used in creating the final valid xhtml and css codes? Thank you and more power!!!
PF
June 10th, 2009
Very nice tutorial. Thank you for spending your time building something like this.
Jon Edwards
June 11th, 2009
Absolutely fantastic tutorial, I am essentially a PHP coder at heart, and anything graphics or CSS related generally sends shivers up my spine, to such an extent that for the past almost five years my website has been surviving on tweaked, free web templates as can probably be seen this is the first time I have seen a tutorial that goes in small enough steps, and covers graphics in photoshop as well as CSS and web design (I didnt know you could make rollovers that way really clever) I cant imagine how long it took you to create this. But I think it was well worth the effort, I am actually thinking about putting my own template together for my site as a result of this tutorial, I hope you write many more of them in this type of style. Yes I was caught out by the leftCol width as well 640px causes the form to drop below the text but 630px as in the CSS file works fine, please keep up the great work Jacob. Thank you for introducing me to graphics in a gentle baby steps way, I have learned so much, just from this one tutorial
Jon Edwards
June 11th, 2009
Oh I forgot to mention I have uploaded my attempt at your tutorial to http://www.euadvantage.com/w2tut I hope I have done it justice.
Juan Gmez
June 12th, 2009
Hmmm those looks like my icons. A little credit would be good ?
Juan Gmez
June 12th, 2009
Sorry i just saw the other post! :) thanks :D
Jacob Gube
June 12th, 2009
@Juan Gmez: Oops Im sorry about that, that was my oversight. Yes, the credit is on the other post and I am very strict about giving credit to designers who release stuff for free. I am updating this post as well, to note that we are using your beautiful icons.
John Arthur Gurondiano

June 15th, 2009
I would like to ask for some tips can you give at least one example of content management system for this tutorial? Thank you and God bless!!!
sonnydesign
June 15th, 2009
another excellent tutorial. Im looking forward for joomla template tutorial soon. Like how to convert psd to joomla template. Thank you again
Flux
June 25th, 2009
Great tutorial. My main reason for stopping by was to see how (a man of your exceptional skill) codes the newsletter subscription form, im still unsure how it works, where does the email address entered go? I wanted to add this simple but useful feature to my site but never sure what is the best/securest way of doing it.
Flux
June 25th, 2009
Also, thought id mention, this tut has inspired me to start trying the sprite route instead of seperate images, it has previously seemed far too complicated but now it all makes perfect sense.
Simukis
June 26th, 2009
i have to tell that some images like body_bg.jpg is better to save as .GIF . it takes less space and quality is better.
Matt
June 27th, 2009
First, I have to admit that I am a newbie at all of this; while I have been working with websites for over 10 years now, I have generally stuck with templates and tweaked what I needed. This was my first attempt at doing everything from scratch. Also a Photoshop newbie as well, so hopefully that sets the tone (though I do pick things up
pretty easily). I did what the tutorial said (though it does seem to miss a few things, so filled in the blanks as best I could) and got everything all sliced, diced and coded. My site looks fine in Firefox, but not in IE. The logo seems to disappear (except when hovered over) and the boxes all disappear. Granted the sizes of everything I did came out different, but I adjusted in the css/html to compensate. Would anybody mind taking a quick look and see what the problem might be? I do see the demo page works fine, so must just be something I did wrong http://www.upliftinghost.com Thanks! And THANKS for such an awesome tutorial. I made it through everything in about 10 hours or so and now feel a little more daring to try some original designs. P.S. Was there ever anything to do with #boxContainer? I see it in the HTML code, but nothing in the CSS for it.
Matt
June 27th, 2009
Ill probably try playing around with jQuery Stylish Select as well to clean up how the domain TLD select box looks across each OS/browser: http://www.scottdarby.com/2009/05/jquery-plugin-stylish-select-unobstrusive-selectbox-replacement/
Joel
June 28th, 2009
Hey thanks for an awesome tutorial, helped me finally put together my website. It worked great, except I used this menu technique (with some slightly different images), and I retooled it a
little bit to just make separate images for the regular menu and the hover menu, and it doesnt seem to work. The list items arent clickable for me, although if I take out the doctype header (thus invoking quirks mode or something I believe) it works on Safari. As far as I can tell I did this exactly like the tutorial but my images arent clickable. Can anyone help me? Thanks a lot.
Jacob Gube
June 28th, 2009
@Joel: Any chance we can see a live demo? Are your list items structured so that theyre links? i.e. <li> <a>.
Joel
June 28th, 2009
Great thanks for responding. Yeslive demo is at http://www.joelstranscription.com/test. The menu shows up but its not clickable and the items dont change when I hover. Weird.
Jacob Gube
June 28th, 2009
@Joel: OK, first: you should use pixel units on your widths. For example,
#home { width:144; } Should be:
#home {
width:144px; } Second, because of CSSs top-down order, this:
#menu ul li a { display:block; width:100%; height:100%; } Should be below the #home, #contact, etc. so that the 100% width will equal to the widths that you declare. I tested these changes and it worked on my end.
Joel
June 29th, 2009
Awesome! That worked perfectly, thank you for the help. I knew order mattered in HTML but had no idea it made a difference in CSS. Thanks for the help.
George L Smyth
July 1st, 2009
Very good article, well explained and presented. Thanks so much, I learned a few things.
Romain
July 1st, 2009
Humm, I need one more tutorial for jQuery. I think a word is missing step 52: Well give #leftCol a width the is equal to the width Why do you choose not to use the css documents of 960.gs?
Jacob Gube
July 1st, 2009
@Romain: I didnt want to complicate the tutorial by introducing the 960 Grid System though in the future, I think it would be a great tutorial to have (a practical tutorial on using the Grid System by doing a PSD -> HTML series centered around 960. GS). Thanks for the note.
Elizabeth
July 7th, 2009
Thanks for this awesome tutorial. Im still a newbie in the web design and thanks to this tut Ive managed to see a perfect final result. There is a mistake in step 29: you are saying that we will float the list elements RIGHT and youre writing in the code LEFT. Can you please fix that? :) I have a question regarding the jQuery: when I open the final result with Firefox, the logo fades in and out just as youve described, but when I open it with Internet Explorer and I go with the mouse over the logo the faded logo appears beneath the original logo(so Im seeing two logos). Can you please tell me how can I fix that? Many thanks in advance. Im looking forward to more tuts like this. They are really helpful. :) BR, Elizabeth
Jay
July 8th, 2009

Hi, I was wondering how I can move the text in the rounded corner boxes to the left? or right? This is because I made the icon small and it has a space in-between. Thank you.
kidk
July 12th, 2009
This tutorial is rubbish.. I am a begginner and it has taught me nothing except how to parrot your instructions. There is no explanation of why you enter this code and the effect it has.
nadia
July 14th, 2009
Have you guys tried sitegrinder?
Alex
July 17th, 2009
Hi, nice tutorial, but I havent been able to cross the first obstacle yet! :( FOr some reason my background image bg_body.jpg is not loading, I have followed the instructions word for word. Anyone know why? Thanks!
Mihai
July 28th, 2009
Isnt this menu consider by Google Spam ? I mean the text-indent:-10000px; is Spam and is Ban for your website :).Replay me on twitter at @mihaicoman and please correct me if i am wrong. although this is a great tutorial. Thanks!
Haakon
August 6th, 2009

Great two-series tutorial. Ive experienced some challenges when using the 960.gs when I, just as in your example from part 1, aligned my boxes to the grid but the drop shadow is in the col margin. My problem is how to style the margin of each col with a background-image? On my site, I ended up hacking and chopping the 960.gs, making that cols width +20px and removing the margins of that col with -20px. However, there must be an easier way rather than hacking the 960.gs?
Jacob Gube
August 6th, 2009
@Haakon: The biggest downside of CSS frameworks is that youre confined to a set way of doing things. For server-side/client-side scripting, thats alright because its complicated and there are certain things you want to standardize, but in my opinion, CSS frameworks are too restrictive because youre supposed to be working with styling. Typically, I would advise never to modify framework source files or else it makes them harder to maintain so the proper way would be to create another stylesheet (say, for example, custom.css), include it at the bottom of your 960.gs stylesheet reference so that your custom.css takes precedence, and then write styles that overwrite the styles that you need to modify in the 960.gs stylesheet. Hope that helps does my suggestion make sense? Let me know.
Haakon
August 6th, 2009
Thanks for the quick reply Jacob. Yea you absolutley makes sense. I actually did it by using new classes only for the specific divs I had to alter, so I didnt touch the 960.gs stylesheet.
I was a bit vague in my problem description, let me rephrase. In the first series of this tutorial you used the 960 grid when designing the website in Photoshop. You aligned one the call-to-action box (http://images.sixrevisions.com/2009/05/1732_clean_web2_design_13.jpg) with the grid however, the drop shadow of the box was outside the grid (in terms of the 960 css, the drop shadow was in the margin of the 4th column). What I couldnt figure out was how to put the shadow in the column margin area without removing the margin, and adding width respectivley. The reason for me doing it this way is, afaik, that you cant bleed the background (where the shadow starts) outside the div and I couldnt figure out any other smarter way to achieve it. However, there has to be a way to achieve this drop shadow without overriding the rules of the 960gs? Do you have any idea? But I sure agree with you, css frameworks are too restrictive and should be limited to prototyping (http://net.tutsplus.com/tutorials/html-css-techniques/prototyping-withthe-grid-960-css-framework/)
Fla
Hi,
August 10th, 2009
Brilliant tutorial, thanks a million for putting it together. Ive played around with it to make a new site for myself but ive hit a big snag & was wondering if you could help. I cant get the featured_bg & monitor to line up properly. Been playing around with it but couldnt get it working.
Also, some other things are not centering for me. A demo can be found here: http://www.thesprayartist.com/Clean_Web-TEMP/index. html Thanks in advance, Fla.
Fla
Hi,
August 12th, 2009
I managed to fix the problem i was having where featured_bg & monitor did not line up. I had a few s where they shouldnt have been. I still have 3 problems though. If you can help it would be great. 1-featured_bg is now blank & i want to have a text box with featured_bg as the background. 2-My social links buttons at the bottom are slightly misaligned. 3-I need my copyright notice at the bottom to be centered. Any help or suggestions you can give will be much appreciated. Fla.
Charley
Hi
August 13th, 2009
In http://sixrevisions.com/demo/web2_layout/index.html youve set twice.
Matti V
August 21st, 2009
Hmm! A good layout indeed, but funny that you dont make any comment on the diagonal body background which is unimplementable, and even in the final result here is not shown correctly Too proud and friendly to confess that maybe the .psd phase wasnt really thought through? ;) A typical example of what happens when the graphic designer doesnt think about the tech constraints. A minor detail, but being a tutorial, it would add value to point it out. It is made for learning anyway, and not showing off mad skillz. Of course making the background image hugely wide would be an option, but then comes the question is it worth the bandwidth.
Fla
August 24th, 2009
So theres no way to write text over the featured_bg area?
Marion
September 2nd, 2009
Very good! Im a designer relatively new to coding but tutorials like this are really helpful. Can you do an all inclusive tutorial psd to html with jquery slider? Something that shows how to use javascript in a project from scratch. thanks!
Meinecke
Thanks Champ! Very helpful.
September 3rd, 2009
worpler
September 8th, 2009
enjoyed following this through. Had trouble aligning the bottom two rows with the top row. I think the problem is that the container is a different width to the top nav bar which everything else is to be aligned toso just had to bumb .boxcontainer etc across a little. Not sure if this is an ideal solution though
adam
September 12th, 2009
Cool tut. I have been using Fireworks to slice my mockups, but decided to try it out in PS. Seems to work well though lacks some of the precision of FW, whose properties panel enables you to be very exact. To anyone thinking about using the FW export CSS & Images feature, think twice. Adobe CSS is as messy as it gets. Dont get me talking about the export to html & images. The result is close to criminal :) One suggestion for the tut. For beginners, the business of creating new psd files for the slices can be confusing. They need to understand that any new file should be either created with a transparent bg, or trimmed to top left pixel. Else, they will be looking at a mess when they call the file via css and look at the result in a browser.
liberty
September 15th, 2009
I v learned so much as im new in css and ps.Thanks a lot.Very good tutorial.
tomsson
October 5th, 2009
First of all- thanks for the tutorial. Ive learned some cool tricks and techniques :)
There is a problem with JQuery logo in IE 6. When You hover your mouse over it- 2 logos are showing. Simply adding overflow: hidden for #header h1 solves this problem.
Leave a Comment
Name (required)
email (will not be published) used for Gravatars (required)
Website
Subscribe to the comments on this article.
Submit Comment
2009 Six Revisions. All Rights Reserved. Theme Design by Jacob Gube. Six Revisions mobile version by Mobify.

Clean Web 2.0 Style Web Design From Photoshop

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Clean Web 2.0 Style Web Design From Photoshop

Hochgeladen von

Copyright:

Verfügbare Formate

Coding a Clean Web 2.

0 Style Web Design from Photoshop

Subscribe: RSS Feed | Email

Coding a Clean Web 2.0 Style Web Design from Photoshop

Coding a Clean Web 2.0 Style Web Design from Photoshop

clean-web-2.0-source.zip (ZIP, 3.4 MB)

Coding a Clean Web 2.0 Style Web Design from Photoshop

Setting up the file structure

2 Inside the web2 folder, create the following:

Creating the diagonal background

Coding a Clean Web 2.0 Style Web Design from Photoshop

http://sixrevisions.com/tutorials/web-development-tutorials/coding-a-clean-web-20-style-web-design-from-photoshop/ (4 of 61) [25-10-2009 00:23:08]

Coding a Clean Web 2.0 Style Web Design from Photoshop

http://sixrevisions.com/tutorials/web-development-tutorials/coding-a-clean-web-20-style-web-design-from-photoshop/ (5 of 61) [25-10-2009 00:23:08]

Coding a Clean Web 2.0 Style Web Design from Photoshop

Setting up the HTML and CSS files

Coding a Clean Web 2.0 Style Web Design from Photoshop

/* CSS Reset */ * { margin:0; padding:0; }

Implementing the diagonal background

body { background:#59d3fa url(img/body_bg.jpg) repeat-x 0 0; }

Setting up the layouts container div

Coding a Clean Web 2.0 Style Web Design from Photoshop

Creating the logo

http://sixrevisions.com/tutorials/web-development-tutorials/coding-a-clean-web-20-style-web-design-from-photoshop/ (8 of 61) [25-10-2009 00:23:08]

Coding a Clean Web 2.0 Style Web Design from Photoshop

Coding a Clean Web 2.0 Style Web Design from Photoshop

Coding a Clean Web 2.0 Style Web Design from Photoshop

Creating the navigation menu

http://sixrevisions.com/tutorials/web-development-tutorials/coding-a-clean-web-20-style-web-design-from-photoshop/ (11 of 61) [25-10-2009 00:23:08]

Coding a Clean Web 2.0 Style Web Design from Photoshop

22 Save the file as menu.jpg inside the img folder.

Coding the Headers HTML markup

Coding a Clean Web 2.0 Style Web Design from Photoshop

Styling the Logo

#header { height:125px; width:960px; margin:90px auto 0 }

Coding a Clean Web 2.0 Style Web Design from Photoshop

image is called CSS Background Image Replacement.

#header h1 { display:block; float:left; width:320px; height:125px; background:url(img/logo.jpg) text-indent:-10000px; }

#header h1 a { display:block; width:100%; height:100%; }

27 To enable the rollover effect, we change the background position of a:hover.

Coding a Clean Web 2.0 Style Web Design from Photoshop

background:url(img/logo.jpg) no-repeat 0 -125px; }

Styling the navigation menu

#header ul { display:block; float:right; width:640px; height:125px; background:url(img/menu.jpg) no-repeat 0 0; list-style:none; }

#header ul li { display:block; float:left; height:125px; text-indent:-10000px; }

#home { width:160px; } #about { width:137px; } #work { width:129px; } #contact {

Coding a Clean Web 2.0 Style Web Design from Photoshop

#header ul li a { display:block; width:100%; height:100%; }

no-repeat -160px -125px;

no-repeat -297px -125px;

no-repeat -426px -125px;

Creating the "Featured Area" background

http://sixrevisions.com/tutorials/web-development-tutorials/coding-a-clean-web-20-style-web-design-from-photoshop/ (16 of 61) [25-10-2009 00:23:08]

Coding a Clean Web 2.0 Style Web Design from Photoshop

http://sixrevisions.com/tutorials/web-development-tutorials/coding-a-clean-web-20-style-web-design-from-photoshop/ (17 of 61) [25-10-2009 00:23:08]

Coding a Clean Web 2.0 Style Web Design from Photoshop

http://sixrevisions.com/tutorials/web-development-tutorials/coding-a-clean-web-20-style-web-design-from-photoshop/ (18 of 61) [25-10-2009 00:23:08]

Coding a Clean Web 2.0 Style Web Design from Photoshop

Creating the "Featured Area" button

38 Create a selection around the button thats exactly 280px by 60px.

Coding a Clean Web 2.0 Style Web Design from Photoshop

Creating the Monitor image

41 Create a selection around the monitor, exactly 375px by 370px.

42 Copy it to a new document, then save it as monitor.jpg.

/* CSS Reset / { margin:0; padding:0; }