Extreme Website Makeover - Renaming the Slices

Learn How To Rename the Slices in Fireworks

Now, with our next pass to the export process, I want to fix up two things. The first thing is with each one of the slices we have created, it has made us a GIF file. But each one is labeled with a pretty, funny name. It is the name of our original file plus a row and column designated. Now, that can be really confusing especially later on in our website production if we are constantly referring to this image as R2-C7 instead of the gallery button. So, I would like to fix the names up, so they make a lot more sense to us and we could remember which piece is which. Also, very importantly, we got sections of our document where we have GIF images inserted where we are going to want to use HTML texts instead. So, I would like to make those two changes. Let me hide Dreamweaver once again. Now, back here in Fireworks, let us take a look at the properties window. I got a slice selected, that big slice on our right hand content and you will notice one of the first properties I want to deal with is the name property. Each slice has a name and we can put whatever we like to in that fill. Now, Fireworks is automatically generating a name based on the original name of our file and a row and column designator as we talked about before. Now, there are options we will see later to make changes to that specific name. We can have Fireworks generate names if we like, but I found I would like to put my own names in here, so that this webpage makes sense to me when I am making changes in Dreamweaver without the use of the Fireworks program. I will just select the name and then retype a new one that I would like in. I will choose “main content” for this slice. Now, I also choose to use underscores instead of spaces just to make sure that my names are going to work on any platform that I have to publish my website too. You will see that once I use the “Enter” key to confirm the name, the name also appears up here in the slice menu and it makes it much easier for me to find that slice amongst all the other ones that I built into my file. It also appears in the layout itself, identifying the slice right at the top left corner. So, already we are making our file much easier to navigate. The other benefit we are going to get is when we export our page next time, Fireworks will use our names instead of making up those generated names we saw before. So, my GIF image is really much easier to identify in our HTML website. Let us add the names for our other slices. I am just going to use the “B” key to switch over my selection tool and I will do the button slices first. I am going to select the names and I am going to name these slices with the letter BTN at the beginning, so I can identify them clearly as buttons. I will call this btn_crew. We will name the next one. I will double click on the name and I will call this one btn_gallery. Now, the second advantage of this is when we export all of our files, obviously, these buttons will all be located together in my final HTML files, so I can find them easily. Let us do the options button, I will double click and we will call this btn_options. Finally, btn_what_we_do. Let us rename our logo slice. I will just double click and call that one Alien_Auto_logo and I will just name the flame parts Flame01, Flame02, Flame03. That leaves our button baseline and I will just use that as a name and our left content area. Now, we want to take a look at our content areas. Remember, we are not going to want a big image to be inserted. We are going to want this area to be composed of HTML. Now, if I select either one of those slices, the main content or the left content area, I would like to take a look now at the tight selector down in the properties window. We can actually choose between an image or HTML for any given slice. So, I am going to set the main content to HTML. Now, you can see that drops in a big opaque green area that is indicating that we are not going to be getting an image here but Fireworks will also let us control the HTML that is inserted into this area. I can even edit the HTML and add som