Now that we have seen how our page is going to be assembled by Fireworks, we want to go ahead and draw some other slices and set this up so that we have all the graphics that we are going to need to build our webpage.

Now, I got my slice tool selected, so I am ready to go ahead and make more slices. I am going to make one for the logo at the top first. I am going to stretch it all around the whole logo graphic that we have created.

Now, I probably am going to want that as a single graphic because it is very customary in a webpage to set up the logo or the branding element as a link back to the starting or homepage of the website. I also want to make sure that all of our border elements are included as well.

Now, you can break things up however you like. I am going to take the flames and I am going to create them as three separate slices. One to fit next to our branding element and our logo design at the top; one to snap in and fit in to the row with the rest of our buttons.

And down at the bottom, I want a special slice to make sure I include the entire flame element. Now, wherever we can find too in any of our slices, we need to just by going back to the selection tool. I can toggle back to the selection tool from any tool I currently have by just using the “Command” key or the “Ctrl” key on the PC.

You will see that we can go in and make modifications to our slices wherever we need them to change. Now, very specifically, I am also designing this slice for the bottom end of our border flames not to go all the way down to the bottom of the page.

I am doing that because even though we have designed our page up to fit an 800x600 screen, specifically, we know that some pages are going to be a little bit taller and we might even have a lot more content on some pages which will extend them a lot further down. And I just want to make sure that we got an additional slice down here to be able to expand and fill up the difference in a taller page.

Now, let us make one more slice that is going to contain all of those gray bars. Remember, anything that is graphic in the background, we are going to have to build into some kind of a slice, otherwise, it will not appear on our HTML page.

I will draw a slice right across the bottom bar but you will notice, it is a little bit close to the header, and let us zoom in on that area. I am just going to use “Command+plus” and you can see that I need to have slice big enough to accommodate the cap on the top of our left content site but it is going to start cutting into the title bar here.

Now, we are going to make some adjustments and we can always go back in and edit the rest of the contents of our page especially when we are trying to design a nice clean table that does not have any overlap and does not have excessive rows and columns anymore than it needs to.

Now, is a good point to go and take a look at where these slices are being added to our project files, specifically. You might have noticed that over in the layers area, we got the entire area where all of my slices are being dropped right on top of all the graphic content that we had before.

In fact, if I scroll this up just a little bit, you can see that we have a special web layer that they have been inserted into. Fireworks makes this web layer automatically and that is where all the slices go. As a matter of fact, you cannot even drag a slice out and into the other elements. It just pops right back up into the web layer.

Now, this layer works just like any other layer. You can hide it and you can lock it which is going to be very helpful when you start to work with other files. If I unlock this once again, by clicking on that lock column and unhide it by clicking in the eyeball column, you will notice that with my selection tool active, I will just hold the “Ctrl” key down. I am always going to select the slice and not the elements underneath it.

In this case, I want to make a couple of changes to that cap we built into the background and maybe even move my title around just so I can get this web slice nice and cleanly right