Introduction

A standard part of most web pages is a top banner. This is what most people will notice and read first when they come to the page.

In this exercise you will use Fireworks to build a banner for a fictitious restaurant, The Rooftop Restaurant. This banner would be used on the page that describes one or all of their specials.

This exercise will cover the following tools, techniques or topics:

• File naming conventions
• Setting up a simple Web site folder structure
• The color palette
• Creating rectangles, copying them, and setting their color
• Specifying the size and position of a shape.
• Creating and kerning text
• Importing and combining multiple images
• Creating a transparent gif file
• Specifying transparency in a gif file
• What slicing an image means and why it is used
• Slicing an image with Fireworks
• Assigning a URL to a slice
• Setting export options on a per slice basis
• Exporting sliced images along with an html file that has the code needed to reassemble the pieces of the image
• Testing a sliced file's reassemble code

File and Folder Names

It is a good idea to establish, and consistently use, file naming conventions. These are rules that are established to help minimize confusion. When your site grows to dozens, or hundreds, even thousands of files, it is good to name them systematically so that they are easier to identity without needing to open them.

First and foremost in your file naming rules, never have any black spaces in your file or folder names. This is because many servers use the UNIX operating system (instead of Windows or Mac).

UNIX interprets spaces as delineations between things: if there's a space in a folder or file name UNIX assumes that the name of one thing has ended and the next word is the name of something different.

Also, UNIX is "case-sensitive" - meaning it sees an upper case letter as a different character than the lower case of the same letter. If you stick to generally using lower case letters, there is less of a chance for confusion (traditionally, lower case is used).

The most important thing about file naming conventions is to establish rules and then stick to them consistently. Also, use words that will make the file easy to identify without needing to open it to find out what it is.

For example, you will be instructed later in this exercise to save this file. The file name you will be given combines the two words: Special and Page.

Here are a several possibilities for naming a file such as this when using some typical file naming conventions. Note how an underscore ( _ ) can be used to indicate a space and how an upper case letter can be effectively used to indicate the start of a new word:

• specialPage
• SpecialPage
• Special_Page
• SpclPg
• ...etc.

Lay the foundation

Let us now create the folder structure that we will use for our exercise files. This will be a very simple yet sensible folder structure. The way that you name and structure the hierarchy (arrangement) of your folders needs to be easily understood by you and any others who work on your site.

1. Using whatever method you're accustomed to (e.g., on a PC: Windows Explorer or opening My Computer) create a folder named: rooftop.
2. Inside of the new rooftop folder create two new folders. Name one of the folders html and the other one images.

Make the rectangular background shapes

We will now make some decorative rectangles for our banner.

1. Select the Rectangle tool. It is in the Tools panel. It is the tool with the solid white rectangle icon. (see illustration)
   • If you don't see the Tools panel, use the Window menu to select it.
   • If you don't see the Rectangle tool there, either press the letter U on your keyboard repeatedly until you see it, or else click and hold on whatever button is in the Tool panel location illustrated. A menu will appear. Select the Rectangle tool from that menu.
   • NOTE: Be sure not to pick either of the tools that have the dashed line rectangle or light blue rectangle icons.
2. Next, set the Fill color: click the color square to the right of the bucket icon near the bottom of the Tools panel (see illustration).
3. A swatch palette will appear. Set the color to FFCC99 using the same technique you used to set the custom canvas color (background) earlier in this exercise. This color will be very slightly different than our background color.
4. With the rectangle tool selected, make the rectangle: just click and drag over the yellow background you created. It doesn't matter what size is it or where it is located yet. Get a shape roughly like the one pictured here:
    
5. Once you've made the rectangle, select it with the Pointer (black arrow) tool and click-drag it into a position about in the middle of the yellow background.

6. We will now adjust the rectangle's size and position using the Properties panel (see illustration above). If you don't see the Properties panel, in the main menu select: Window -> Properties.
7. Using the Pointer tool, make sure that the rectangle you just made remains selected: when an object is selected there will be little light blue squares on each of its corners.
8. The Properties panel displays the dimensions and location of any selected object. With the rectangle selected, just click in the height and width windows to modify the size. Set it to 215 pixels wide by 80 high. The height is the same as the background's height.
9. Set the position to be y = 0, if it isn't already. This will position the rectangle's top and bottom edges to be flush with the boundaries of the background.
10. In order to maintain the vertical position, use the left or right arrow keys on your keyboard, pressing them repeatedly until you have the rectangle in a position roughly in the middle of the banner. If you press and hold down the Shift key, then each time you press an arrow key the shape will move 10 pixels. Without Shift it will move only 1 pixel per key press.
11. Using the Edit menu, Copy the rectangle and Paste it. The new rectangle will be directly on top of the one you copied, so you won't see it. However, it ought to be selected.
12. Leaving new rectangle selected, set its color using the Fill color chooser that you used before. Select FF9966 in the color palette that opens; this color is probably directly above the color you chose for the other rectangle. Alternatively, you can manually type it in, then press the Return key on your keyboard to set it.
    
13. Using the arrow keys on your keyboard, move the new rectangle to a position slightly to the left or right of the first rectangle. The exact positions of the rectangles are not critical. You can reposition them later.
14. Now you should have two rectangles with slightly different colors.
15. Take a moment to save this file in Fireworks' default format .png, saving it in your images folder. Name it: SpecialsBanner. The .png extension gets added automatically (png stands for portable network graphics).

Making the text

1. Set your magnification to 100% by clicking on Ctrl-1 (that's a one). It is not a good idea to judge the appearance of text at anything other than 100%.
2. Select the Text Tool. It is the button with the A icon on it in the Tools panel (see illustration of Tools panel above).
3. Click anywhere in the image area.
4. Type the words: Today's Special.
5. Make sure that the text you just created is selected.
6. In the Text menu select Editor.
7. The Text Editor dialog box opens up.

8. Click-drag over the text to select it all.
9. Select any font you like and set it to italic and about 60 points (height). You can use any font you like because it will be embedded in the image, therefore you are not relying on the client's available fonts.
10. Continuing in the Text Editor, find the drop down menu that controls text aliasing. It's probably set to No Anti-Alias. Change this to an anti-alias setting that you think makes the text look the best.
11. Use the color box in the Text Editor to set its color to one similar to the color above (which is #660000). Don't close the text box yet, there's more to do with it next.

Kerning

To kern means to increase or reduce the gap between selected letters to make words look better. This is important to do with large text such as what you have created. The Text Editor allows you to do this.

1. First click in the gap you want to adjust. You might want to try adjusting the gap between the "y" and the apostrophe - which may have too wide a gap.
2. Look in the Text Editor on the left side underneath the font name for the following characters: A\V.
3. To the right of these letters, click on the downward pointing arrow next to the percentage selection box.
4. Use the slider that appears to make the adjustment until it meets your approval: NOTE! Oddly, you won't see the gap between the characters change in the Text Editor, but you should see interactive change in the text of the actual file. A setting of only -2 or so may be all that you need.
5. Click OK and then use the black arrow tool to select and position the entire block of text approximately where you want it. You can refer to the completed example further down this page for a position.

Top

The GIF image file format allows you to select one or more of the colors in its image and remove them. This permits a color background to be seen through those areas. We want the yellow color of our banner's background to come through behind a graphic image of the sun when we place the sun on top of it.

1. Save the LEFT image of the sun above by right clicking on it and save it in your new rooftop "images" folder. When you save it, use its current name, SunBefore.gif
2. In Fireworks, open the file that you just saved.
3. Then, go to: File -> Export Preview
4. In the Export Preview dialog box that opens, in the upper left section, from top to bottom make these settings if needed:
1. Format: GIF
2. Palette: Websnap Adaptive
5. Then, underneath the color palette area, select: Index Transparency.

Fireworks assumes that we want to make only the white color transparent, because it's the predominant color. Therefore, initially only the white area becomes transparent. Transparency is traditionally represented in programs such as Fireworks by a gray and white checkerboard pattern.

Look at the area on the left side of the dialog box that has little gray color swatches. These are the colors that the image consists of. If you look closely you will notice that the swatch for white has become a gray and white checkerboard pattern. You will also see the gray and white checkerboard behind the sun in the image preview area on the right side of the dialog box.

There is a problem however with setting only the white area to be transparent. When the image is placed against the yellow background a fringe is visible (see middle illustration above). It consists of the light gray colors that remained in the image.

We need to select more of the colors that are used in the image to be made transparent. The colors we want to remove are the light grays that the fringe consists of.

6. Use the "+" eyedropper tool on the left side of the Export Preview dialog box to select (by clicking on them) all but the two darkest colors in the group of gray color swatches. The gray swatches should be in the area above the eyedroppers.
• This step will make the gray colors that get clicked on transparent.
• This is being done because removing the lighter grays by converting them to being transparent will prevent the fringe of light pixels from being seen when we put this image on top of the banner's background.
• All but the two darkest grays ought to be transparent now.
7. Luckily for you, this file is already the exact size for the height of the banner: 80 pixels, so you needn't worry about the size.
8. Click on the Export button.
9. Name the file: Sun. The .gif file extension will be added automatically: save the file in your images folder.

Put the sun on your banner

1. Open the file you just made Sun.gif in Fireworks using File -> Open.
2. Position your banner so that both it and the Sun.gif file are visible.
3. Select the image of the sun by clicking on it with your Pointer tool. A thin light blue borderline indicates that it's selected.
4. Then use the Edit menu to copy it and then paste it anywhere on your banner-in-progress. Use the black arrow tool to put it on the far left side of the yellow background, as far left as it will go and remain visible.

Add another picture

1. Now download and save the file above (asparagus.jpg) in your images folder.
2. Open it in Fireworks.
3. Then select the image by clicking on it with the Pointer tool. It should have a thin, light blue borderline around it indicating that it is selected.
4. Use the Edit menu to copy and paste it anywhere on top of the yellow background.
5. Use the arrow tool to drag it to a point adjacent and just to the right of the the sun image.Try to somewhat mimic what you see in the image below.
6. Now position the rectangles and text until you're happy with them.
   
7. If you want to readjust the stacking order (make one object appear closer than others), select the part you want to change and use Modify -> Arrange.
8. Now save it. It should look something like the image below (but larger).

Slicing the banner up to add a link and help the files load faster

We will now prepare this banner for future use at a Web site by slicing it and adding a test link to one of the slices.

Slicing is used for a few reasons:

• It divides up an image in order to add links to part of it.
• It is used to optimize (adjust the file size) of different parts of the image at different settings.
• It also tends to help the overall image appear to load faster.

Slicing divides up the image into several smaller image files. It also generates an html file with code instructions on how the slices are to be reassembled by using an html table.

A table is a set of rows and columns created by html that you can use to put images, text, or other objects in. Each compartment of it is called a cell (similarly to Excel). A table can be very useful for positioning objects.

There are three table tags: <table>, <tr> (for each table row), and <td>, which stands officially for table data, but means a cell. The entire table, code and images, can then be used in another, larger, html page if so desired. That's what might be done in a situation such as this.

1. The first step is to select the slicing tool on the Toolbar (see illustration).
2. Next, click-drag over the sun from its upper left corner down to where it meets the bottom left edge of the image of the basket of  food.
   
3. The image area over the sun ought to now be a transparent green, indicating that it has been set for slicing and also making it available as a hot spot for linking to another web page.
4. Select the green using the Pointer tool. The green area should have a light blue borderline if it's selected (see illustration).
5. Look at your Properties panel (if you don't see it, go to Window -> Properties). Check that the slice is 80 pixels high (H) and also in position X=0 and Y=0. If not, then enter those numbers.
6. To create a link, enter into the Link field in the Properties panel the web address of an actual web site so that we can test the link, being sure to include the prefix: http:// (Note: typically this part of a web page would usually provide a link to the site's home page).
7. Set the Target to _blank (this will cause the link to open in a new window).
8. Next, with the slicing tool selected, click and drag over the photo of the basket of food. Now you should have a second green area over the photo of the kitchen items indicating that the photo will be a separate slice. We will optimize the photo as a jpeg and the other slices as GIF files in a moment.
9. Finally click and drag over the remainder of the banner, which will be the entire area to the right of the photo. Now you should have a total of three green slices.
10. Set the optimize settings using the Optimize panel. If you don't see it, go to the Window menu and select Optimize.
• Using the black arrow tool, click on each sliced section, one at a time, and check its settings.
• Set the photo of the basket to jpeg, 80% quality.
• Set the other two slices (the sun and the text sections) to GIF, Web Adaptive, no transparency.
• Leave the other settings as you found them.
11. Once that's done, go to File -> Export. In the export dialog box, make the following settings (and don't save the file until you're told to do so):
• Save In:
  • Create a new folder in your images folder.
  • Name the new folder slices.
  • Then open the slices folder so that you will save the exported files in it
• File name: BNR_yourlastname (you don't need to add an extension - Fireworks will do it for you).
• HTML: Export HTML File
• Slices: Export Slices
• The checkbox for Include Areas without Slices ought to be checked.
12. Click on Save.
13. Remembering where you exported it to, open the html file that was created in your browser, using the browser's menu: File -> Open.
14. You should see it all perfectly reassembled and the link ought to work. The area outside of the banner will probably be colored the same as the banner's background color. This is normal. In cases such as this, the table containing the banner is all that would be imported into Dreamweaver's html file.
15. Online students: send me the html file only, by drop box. It should be named BNR_yourlastname.html

Congratulations, you did it!