Download 4-28-14-Ch-6-Nav-Bar-TEST

Web Design
Chapter 6
Nav Bar Test
4-28-14
OBJECTIVES Tested:
 Alternative text on an image
 Align, resize and resample images
 Create a button symbol in Fireworks with three states: Up, Over, and Down
 Export HTML from Fireworks
 Use an exported HTML in Dreamweaver
Create a folder in your H: drive named ### last name, Nav Bar Test
Create a web site named Nav Bar Test in Dreamweaver
Add a folder in the site named images
Add 3 pages to the site. They should be named:
index.htm
photos.htm
schools.htm
Each page should have a table with two columns and as many rows as necessary. Each photo should have either
a link with alternative text or just alternative text. This is very IMPORTANT!!!
You are going to create the Nav Bar using Fireworks and then you are going to export it to each of the pages
and then you will make sure that the down image for each of the pages is showing for the appropriate page.
Directions for completing the Nav Bar in Fireworks are on page 3 of this document.
Below are general directions for each of the three pages that are to be created in Dreamweaver before the Nav
Bar is completed and exported.
index.htm
Create the table as shown
Edit background to be an appropriate color
Add a photo from your photos page and from your school page to the index page.
Turn each of these photos into a link to those pages and make sure each has appropriate Alt text.
This is what your index page will look like when complete:
photos.htm
This is what your photos.htm should look like when complete:
All photos must include alternative text.
schools.htm
This is what your schools.htm page should look like when complete:
At least one of these photos must link to an actual website and all photos must contain alternative text!
Open Fireworks and create a new document with a width of 660 pixels, a height of 100 pixels, a resolution of
72 pixels / inch, and a transparent canvas.
Save the document in your H: drive but outside of any Web site folder naming it navbartest.png.
Create a button symbol as follows:
1. Draw a rectangle with a width of 160 pixels and a height of 36 pixels.
2. Apply a fill color and a transparent stroke color to the rectangle.
3. Create a text box with the text button and format the text as Verdana font, 24 points in size, center aligned,
and #FFFFFF in color.
4. Select both the rectangle and the text block and align them horizontally and vertically.
5. With both the rectangle and text block selected, convert them to a button symbol named: button
Create instances of the button symbol and modify them as follows:
1. Create two more instances of the button symbol on the canvas and then position all three instances next to
each other.
2. Change the properties of each instance, from left to right, as follows:
Text
Link
Alt
Home
index.htm
Link to Home Page.
Photos
photos.htm
Link to Photos Page.
Schools
schools.htm
Link to Schools Page.
Your buttons should look similar to:
h) Double-click any instance to display the button symbol in the Button Editor.
Edit the states of the button symbol as follows:
1. Edit the Over state to be identical to the Up state except change the text color to something appropriate
2. Edit the Down state to be identical to the Over state except change the rectangle fill color to something
appropriate
3. Edit the Over While Down state to be identical to the Down state.
i) Finish and save the navigation bar as follows:
1. Modify the canvas to exactly fit the buttons.
2. Save the modified navbartest.png
3. Use the Export Wizard to export an HTML file named navbartest.htm to the folder in your H:drive named
### last name, Nav Bar Test
Make sure the images are exported as GIF files, with Index Transparency, to the images folder.
Add the Nav Bar to the three web pages in the second row as shown in the examples.