Tutorial: Newspond menu on Fireworks - Part 2
This is the second part of the web design tutorial on how to create a website using Fireworks then CSS and XHTML.
A few days ago we published the first part of the tutorial when we designed the page, now in this part we will show you how to go from that image to the webpage, using a CSS and HTML.
STEP 1
First, let's study the layout and set some parameters, like which will be the main regions, so we can structure the html.
STEP 2
To create the html, open you favorite text editor (notepad, dreamweaver, textmate, etc). Here I've used Smultron. What we have to do is now to create the areas following the regions we've set before:
HEADER
<div id="header">
<div class="wrapp"><img src="images/logo.jpg"/></div>
</div>
CONTENT
Here we're using 2 div's for central content because we're using shadows on both sides.
<div id="content">
<div id="main">
</div>
</div>
MENU
<div id="content">
<div id="main">
<div id="menu">
<!-- *** Main menu *** -->
<ul class="nav_left">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Works</a></li>
<li><a href="#" class="last">Contact</a></li>
</ul>
<!-- *** Links right side *** -->
<ul class="nav_right">
<li><a href="#">Login</a></li>
</ul>
</div>
</div>
</div>
SUPPORT BENEATH THE MENU
<div id="content">
<div id="main">
<div id="menu">
<!-- *** Main menu *** -->
<ul class="nav_left">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Works</a></li>
<li><a href="#" class="last">Contact</a></li>
</ul>
<!-- *** Links right side *** -->
<ul class="nav_right">
<li><a href="#">Login</a></li>
</ul>
</div>
<div id="sub_nav">
<span class="tip">Zee is a small studio located in Brazil.</span>
<span class="links"><a href="#">Register</a> | <a href="#">Request Password</a></span>
</div>
</div>
</div>
FULL CODE
<body>
<div id="header">
<div class="wrapp"><img src="images/logo.jpg"/></div>
</div>
<div id="content">
<div id="main">
<div id="menu">
<!-- *** Main menu *** -->
<ul class="nav_left">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Works</a></li>
<li><a href="#" class="last">Contact</a></li>
</ul>
<!-- *** Links right side *** -->
<ul class="nav_right">
<li><a href="#">Login</a></li>
</ul>
</div>
<div id="sub_nav">
<span class="tip">Zee is a small studio located in Brazil.</span>
<span class="links"><a href="#">Register</a> |
<a href="#">Request Password</a></span>
</div>
<!-- *** Round corners for the content *** -->
<div class="center1">
<div class="center2">
<!-- *** Round corners each item *** -->
<div class="item1">
<div class="item2">
<div class="content-item">
<h1>Donec porttitor ligula eu dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Morbi commodo, ipsum sed
pharetra gravida, orci magna rhoncus neque,
id pulvinar odio lorem non turpis. Nullam sit
amet enim. Suspendisse id velit vitae ligula
volutpat condimentum. Aliquam erat volutpat.
Sed quis velit. Nulla facilisi. Nulla libero.
Vivamus pharetra posuere sapien. Nam
consectetuer. Sed aliquam, nunc eget
euismod ullamcorper, lectus nunc ullamcorper
orci, fermentum bibendum enim nibh eget ipsum.
Donec porttitor ligula eu dolor.</p>
</div>
</div>
</div>
<!-- *** Round corners each item *** -->
<div class="item1">
<div class="item2">
<div class="content-item">
<h1>Donec porttitor ligula eu dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Morbi commodo, ipsum sed
pharetra gravida, orci magna rhoncus neque,
id pulvinar odio lorem non turpis. Nullam sit
amet enim. Suspendisse id velit vitae ligula
volutpat condimentum. Aliquam erat volutpat.
Sed quis velit. Nulla facilisi. Nulla libero.
Vivamus pharetra posuere sapien. Nam
consectetuer. Sed aliquam, nunc eget
euismod ullamcorper, lectus nunc ullamcorper
orci, fermentum bibendum enim nibh eget ipsum.
Donec porttitor ligula eu dolor.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="footer"></div>
</body>
Save this file as menu.html.
STEP 3
Now that we have the code ready, let's open the .png file and export the images that we're going to use in our CSS. To do that, we're gonna use the Slice tool, and we will create all the necessary slices with this tool, like we see in the images below:
STEP 4
Save all your images in an images folder, right on the root where the file menu.html is.
STEP 5
With all this images and the code ready, let's start our CSS. I've used CSSEdit to make this, but you may use your editor of choice. To begin, paste the following code inside the "HEAD" on menu.html:
<link rel="stylesheet" type="text/css" href="style.css"/>
STEP 6
We're also using here a file to reset all the tag configurations, what will make the manipulation of objects inside the layout much easier. Download the file "reset.css" (is attached at the end of this tutorial) and drop it on the root with the menu.html file. Open a new css document and save it asstyle.css. In the top of the document, import the reset.css with the following code:
@import url("reset.css");STEP 7
Now we beggin creating the style for our main ID's. Remember how I've told you before that we're going to apply shadows on the sides of #content and #main.
body {
font-family: Arial, Helvetica, Geneva, sans-serif;
color: #000;
background: #595D67;
}
#header {
height: 100px;
background: url(images/bg_header.jpg) left top repeat-x;
position: relative;
}
#content {
width: 844px;
position: relative;
margin: 0 auto;
background: url(images/bg_shadow_left.jpg) left top repeat-y #434752;
}
#main {
background: url(images/bg_shadow_right.jpg) right top repeat-y ;
padding-bottom: 30px;
}
#menu {
height: 30px;
background: url(images/bg_menu.jpg) left top repeat-x;
margin: 0 7px;
}
.wrapp {
width: 844px;
position: relative;
margin: 0 auto;
}
#footer {
height: 100px;
background: url(images/bg_footer.jpg) left top repeat-x;
position: relative;
} Notice that the #content width is 844px, because it's the 700px for the body and another 7px of shadow for each side. It's important to know that we're going to centralize the main content. We're using 3 attributes to place it on the browser center:width, position e margin. Look:
#content {
width: 844px;
position: relative;
margin: 0 auto;
background: url(images/bg_shadow_left.jpg) left top repeat-y #434752;
}
STEP 8
Now, the menu. Take another look on the code we've used to do it. Inside the "ul" is where we're placing all the links. Notice that we've used a class="nav_right" on the second "ul", because we're going to position it on the right side of the menu, that's what we've used here for our Login link.
<div id="menu">
<!-- *** Main menu *** -->
<ul class="nav_left">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Works</a></li>
<li><a href="#" class="last">Contact</a></li>
</ul>
<!-- *** Links on right side *** -->
<ul class="nav_right">
<li><a href="#">Login</a></li>
</ul>
</div>
Now let's position our "ul"s and place the images that go on the menu extremes:
#menu ul.nav_left {
padding-left: 30px;
height: 30px;
background: url(images/bg_leftMenu.jpg) left top no-repeat; /** left image **/
}
#menu ul.nav_right{
position: absolute; /** position the menu on the right side **/
right: 7px;
top: 0;
padding-right: 30px;
height: 30px;
background: url(images/bg_rightMenu.jpg) right top no-repeat; /** right image **/
}We're almost done. Let's a style for our link and check how they will look:
#menu ul li {
float: left; /** precisamos deste float para funcionar no IE **/
background: url(images/divider_menu.jpg) left top no-repeat;
}
#menu ul li a.last { /** add a image to the last element **/
background: url(images/divider_menu.jpg) right top no-repeat;
}
#menu ul li a{
display: block;
float: left;
height: 30px;
padding: 0 18px;
text-decoration: none;
color: #FFF;
font: .96em/28px "Lucida Grande", Lucida, Verdana, sans-serif;
}
#menu ul li a:hover {
background: url(images/bg_menu_active.jpg) left top repeat-x;
}STEP 9
Here we can see how the style will look for the text and support links beneath the menu. This is when we apply the shadow beneath it.
#sub_nav {
height: 50px;
background: url(images/bg_shadow_subNav.jpg) left top no-repeat;
margin: 0 7px;
line-height: 50px;
position: relative;
font-size: .8em;
color: #CCC;
}
#sub_nav span.tip {
left: 30px;
position: absolute;
}
#sub_nav span.links {
right: 30px;
position: absolute;
color: #F90;
}
#sub_nav span.links a{
text-decoration: none;
color: #F90;
}
#sub_nav span.links a:hover {
text-decoration: underline;
}STEP 10
Now you must build the bottom text boxes so we can finish the layout.
We're not getting into details because this step is not our inside our objetive for this tutorial, mas we're going to talk further about round corners e text boxes in another article. But if you download the final files and analise it, you're see that the whole process is really simple.
FINAL RESULT
To see how your layout should be looking like right now, totally tabless and cross-browser, click here to check the final result.
| Anexo | Tamanho |
|---|---|
| zeepond.zip | 17.77 KB |
| menu_slices.png | 193.09 KB |
Author: Fabiano Meneghetti | If you want to write an article and have it published here send it via email to abduzeedo[at]abduzeedo.com
About the author
I'm from Brazil, co-founder of Zee with Fabio. Nowadays I like to play with Fireworks, Photoshop and improve my skills in CSS. If you wanna request some posts, please feel free to contact me or follow on Twitter.
Sponsored Links:
Search
sponsored ads
tutorials
wallpapers
Flickr Group
Participate! Join the Abduzeedos' flickr group.
Follow Us
Hosted by
15 Comments
Great tutorial, but the code breaks your website layout. It also makes it hard to read without copy/pasting. I'd love if you could fix that.
Thanks.
Great tutorial,now i can create my one layout using fireworks. thanks for sharing with us.
This really makes it easier to go from that image to the webpage.
Thanks!
This is great I was looking for a slicing tutorial exactly like this, awesome man keep up the great work!
Awesome! The final result looks great! :)
I suck at HTML/CSS, but now i am going to learn it! :D
Thank you very much!
Did you run out of awesome photoshop tutorial ideas? Are going to start conquering every other design program now?!?!?
Either way, looks great! Keep up the awesome work.
Oh great ! I was searching tuts about fw, thanks fabiano
Greg, sorry I had forgotten to attach the files.
You'll find in the .zip, the entire site, also the reset.css. Take a look and let me know you have any doubt.
Can you explain the "reset.css" a bit more. (step 6) I also do not see it attached at the end of this tutorial. Thanks so much
Wordpress makes so much sense now. Thank you!
Sweetness! css tuts is next!!
Incredible... Very nice follow-up. 5/5 :p
/Simon
Your stuff is always written in just the right way to follow along. Thanks dude.
WOW man i was waiting for this anxiously and finally its out very very nice and really detailed explanation
thanks alot man for sharing your knowledge and skills :)
Post new comment