Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
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.