Using Fireworks Slices and CSS to Make a Website
In this tutorial, we are going to learn how to go from a design in fireworks to a fully working web page built with xhtml and css. Here is what the final product will look like.
Getting the Image File Ready
- Download the Yeah! Web Design .png file
- Save to a new folder inside of your web-design folder called "yeah-web-design"
- Open up My Documents > web-design > yeah-web-design > yeah-webdesign.zip. Right click and select Extract All to unzip the file. Go through the process until you have unzipped the file.
- Open Fireworks and open the yeah-webdesign.png file.
Download the Yeah! Web Design .png file.
Create the Slices
- Select the Slice Tool
- Draw slices around a section of the background, the header, the exclamation mark, and one of the bullets.
- You should have something like the screenshot below.
- Select the black pointer tool in the upper left hand corner of the screen and click on one of the green slices.
- In the property menu at the bottom of the screen you can give each of the slices a name.
- Give them the following names: bg, header, logo, bullet.
Exporting the Slices
- To get the images ready for using in with the html and css we need to export the slices as individual images.
- Go to File > Export
- Create a new folder called images inside of the yeah-web-design folder.
- For Export, select Images only.
Creating the HTML portion of the site
Here is what we want the site to look like, html wise.
In order to make this site we will need four sections:
- header
- navigation
- main_content
- footer
Lets take a look at the html for this.
First, change the title of the page to "Yeah! Web Design"
Next we are going to create a division with an id called "wrapper". We will put all of our content inside of this division.
<div id="wrapper">
</div>
Next we are going to make the divisions for the header. It must go inside of the wrapper division.
<div id="header">
<img src="images/header.gif" alt="Header" />
</div>
The next thing to go on our page will be the navigation. We will use an unsorted list to make the main navigation. Because we will also have a list explaining what makes Yeah! Web Design so special, we will assign a special id called "navigation" to the navigation list.
<ul id="navigation">
<li><a href="#">about us</a></li>
<li><a href="#">our work</a></li>
<li><a href="#">contact</a></li>
</ul>
Directly below the navigation insert the exclamation point logo. We will assign an id to the logo called "logo"
<img id="logo" src="images/exclamation.gif" alt="Yeah! Web Design Logo" />
The next section of our site is the main content. The division for the main content should go direction below the navigation and the logo.
<div id="main_content">
<p>We make websites, and we <span class="love">love</span> what we do.<br />
That is what the exclamation point is all about.</p>
<p>Why We're Special:</p>
<ul id="info">
<li>Rock Star Designs</li>
<li>Quick Turn Around</li>
<li>Great Prices</li>
</ul>
<p>Swing by 7th period to set up a meeting</p>
</div>
Ok, we're almost there! The last thing we are going to do is add the footer. Usually we would create a separate division for the footer. However, since we only have one line in our footer, it would be extraneous code to create a division for one line of text. Instead, we are going to just assign a footer id to a paragraph element.
<p id="footer">justemailus@yeahwebdesign.com | ©2007 Yeah! Web Design</p>
Alright! That's that. Here is what your whole page should look like.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Yeah! Web Design</title>
<link href="yeah.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<img src="images/header.gif" alt="Yeah! Web Design" />
</div>
<ul id="navigation">
<li><a href="#">about us</a></li>
<li><a href="#">our work</a></li>
<li><a href="#">contact</a></li>
</ul>
<img id="logo" src="images/exclamation.gif" alt="Yeah! Web Design Logo" />
<div id="main_content">
<p>We make websites, and we <span class="love">love</span> what we do.<br />
That is what the exclamation point is all about.</p>
<p>Why We're Special:</p>
<ul id="info">
<li>Rock Star Designs</li>
<li>Quick Turn Around</li>
<li>Great Prices</li>
</ul>
<p>Swing by 7th period to set up a meeting</p>
</div>
<p id="footer">justemailus@yeahwebdesign.com | ©2007 Yeah! Web Design</p>
</div>
</body>
</html>
Styling the page with css
Now that we have the slices and the html done, we can style the page with css.
Create a new folder in your yeah-web-design folder and call it styles. Inside of that styles folder create a new css document and call it "yeah.css"
In the top of the css document we are going to add a comment explaining that this style sheet is for the yeah! web design site.
Add a comment like the one below into the top of the css document.
/* CSS For Yeah! Web Design Site */
Next we are going to link the html document to the css document that we just created. To do this we will insert the following code into the html of our index.html file. Insert the code between the title tag and the closing of the head tag.
<link href="styles/yeah.css" rel="stylesheet" type="text/css" />
Now that the style sheet and html document and linked together we can add the styling to the css document and it will affect the html document.
The first style we will add is to the body of the html document. Here is what we want to accomplish for styling the body:
- Insert the background image so that it repeats across the page from left to right, and change the background color of the page to match the tan color in the fireworks document.
- Change the font color
- Increase the font size
- Reset any margins or padding that web browsers made add that could mess up our design.
Here is what the css would look like to accomplish these four goals.
body {
background: #FFFBE7 url(images/bg.gif) repeat-x;
color: #2C1B15;
font-size: 150%;
margin: 0;
padding: 0;
}
Take a look at the html document in the web browser. Not quite there yet!
Now we are going to use a very common css technique that centers our content in the middle of the page. We accomplish this by setting a width to the wrapper id and setting the left and right margins to auto. Here is what that looks like.
#wrapper {
width: 800px;
margin: 0 auto;
}
Now we are going to set up the css for our navigation. On this website we have two different unsorted lists that we want to look display very differently from one another. That is why we applied ids to the two lists. To style the navigation list we will use the css selector ul#navigation. This ensures that the style will not apply to all unsorted lists, only ones with the id navigation.
Here is the entirety of the navigation css.
ul#navigation {
margin: 5px 0;
padding: 0;
color: #FFFBE7;
font-size: 115%;
height: 50px;
}
ul#navigation li {
display: inline;
margin: 0 10px 0 5px;
}
The problem now is that our links aren't the color that we had originally planned. The reason for this is that although we have set the style for text on the page, web browsers apply default colors to links that override the styling we assigned to the text. The default colors are blue for unvisited links and purple for visited links. Lets change that. There are three states of the links that we are going to change. They have to go in a specific order, as well - a:link, a:visited, and a:hover.
#navigation a:link {
color: #FFFBE7;
text-decoration: none;
}
#navigation a:visited {
color: #FFFBE7;
text-decoration: none;
}
#navigation a:hover {
color: #FFFBE7;
text-decoration: underline;
}
Take a look at your html document now. The content should center, the background should repeat and then stay tan, the header should appear, and the navigation should display properly.
Now we can style the main content of the page. However, before we get there, we have to make the logo image float to the right of the page. To do this we will assign some float and clear properties to the image with id logo.
img#logo {
float: right;
clear: none;
margin-right: 100px
}
Now we can style the main_content division. All we are going to do here is apply some margin to the top to separate it from the navigation bar.
#main_content {
margin-top: 20px;
}
The next little bit of style we want to add is to make the word love appear in red. This is a great time to introduce a few css concepts. These concepts are inline and block. Content that is inline can display on the same line with other content. Content that is block will clear itself onto a new line and force other content above or below it. A good example is what we did with the the navigation menu. Normally lists are block level elements, meaning that each line item appears on its own line. However, when we set the display css element to inline, the list items appear all on the same line.
If you look back at the html mark up for the word love, you will notice that we used the markup span instead of div. The difference between a div and a span is that a div is block level by default and span is inline.
So, lets mark up the span with the class love to display in red (and we'll throw in some bold just for extra emphasis).
.love {
color: #BA2A0A;
font-weight: bold;
}
Notice that we did not have to include the word span in the css. All we did was assign the values to the class love. If we had used a div, though, we would have to set the div to inline. Using span instead saves us from having to do this extra work.
Take a look at your html document now. Looks pretty good, no? We could stop here, but we want to add tow more bits of styles. We want to add custom bullets to our list of why we are so great, and we are going to add some style to the footer of the page.
First, lets do the list. Like with the menu navigation, we want to make sure that we apply the styles to the unsorted list with the id assigned info.
What we want to do is set the list style image to use the bullet that we exported from Fireworks. Then we will set a little extra padding and margins to the list to get it to look just right.
ul#info {
list-style-image: url(../images/bullet.gif);
}
ul#info li{
margin-top: 15px;
padding-left: 10px;
}
Notice that in the link to the bullet image we use two periods and a forward slash before the images/bullet.gif. What the ../ does is move us back on level in our file directory. We have to do this because the css file is in the style folder. To get from the style folder we have to go back up one level and then enter into the images folder and find the image.
Our last step here is to style the footer. In general, we will add a brown background color, light font color, and add some margin to the top of the footer. Here is what it will look like.
p#footer {
width: 740px;
float: left;
clear: both;
margin-top: 20px;
padding: 20px;
background: #2C1B15;
color: #FFFBE7;
font-size: 70%;
}
Often times folks use a div tag to set apart the footer from the rest of the document. However, because we only have a one line footer, we can use a paragraph tag. This saves us from adding extra markup into our html file.
Ok, now we have our fully styled Yeah! Web Design page. Congratulations! Now you know how to take an image from Fireworks and transform it into a full, working web page.
