42 Part 3 (modified 10/20/09) Part 3 will demonstrate navigation options on a web page. This exercise will demonstrate using plain text links, Flash Text, Flash Buttons, swap images, an image map and Spry menus. You will have to use PhotoShop to complete this exercise using layers to create the buttons (swap images) and the image map. You should already have the beginning for your button images from the photo editing assignment. Remember to use the file you saved in PhotoShop’s native file format to create the remaining buttons. Links • WWW Images and Tables = wwwimagesandtables.html • WWW Navigation = wwwnavigation.html • Resume = resume.pdf • Home = index.html • MSU = http://www.msu.edu 1. Copy the pdf version of your corrected resume to the web\wwwexercises folder. 2. Open Dreamweaver CS3. If you’ve opened Dreamweaver CS3 for the first time, 1) check to see that the Insert, Properties and Files and CSS Styles panels are on, 2) turn the ruler and grid, 3) turn on the Insert, Document, Standard and Coding toolbars, 4) set your screen up in split mode and 5) import your site map created in class that defines your web folder as a site. This exercise will use the same folder "wwwexercises" on your AFS space under the web folder that you used for the Good and Bad Web Sites. 3. In the Files Panel, right click in your “wwwexercises” folder and create a New Page. Save this webpage on your P: drive in your web\wwwexercises folder as wwwnavigation.html. Please ensure you are saving this file in the wwwexercises subfolder! Apply the styles.css style file, and enter the following information on the new untitled page: • A page title (e.g., TSM/ACR 251 WWW Navigation Options - Date) • Body text describing the content (e.g., Luke Reese's Web Navigation Options) • “This web page provides examples of www page navigation options. This page is being stored as wwwnavigation.html and will automatically load when the URL www.msu.edu/~NetID/wwwexercises/ wwwnavigation.html is used. Design principles for the pages were studied in Williams, R. & Tollett, J. (2006). The Non-Designer’s Web Book, third edition. Berkeley, CA: PeachPit Press. This page contains hyperlinks menu options using plain text links, Flash Text, Flash Buttons, swap images, an image map and Spry menus. Multiple tables are used to control the screen width plus organization and alignment of images to text. Alt tags have been inserted on all images to confirm to disabilities standards. A site specific CSS style sheet is used to create uniformity of design.” • Your contact information, last revision date, etc. 5. Below your text, insert a table with 1 row, 1 column, border=0, width=600 pixels and cell padding =1. Inside this table, insert a table with 4 rows, 5 columns, border=0, width=100% and cell padding=0. Select43 the last 4 cells in the first column and merge them together. 6. In the second row, add text links with links to the appropriate files/sites for: Home, WWW Images/Tables, WWW Navig., Resume and MSU (one link per cell). Note: Create a marker for the page you are on but do not create a link. Save the file. 7. In the third row, add Flash Text with links to the appropriate files/sites for: Home, WWW Images/Tables, WWW Navig., Resume and MSU (one link per cell). Note: Create a marker for the page you are on but do not create a link. Save the file. 8. In the fourth row, add Flash Button with links to the appropriate files/sites for: Home, WWW Images/Tables, WWW Navig., Resume and MSU (one link per cell). Note: Create a marker for the page you are on but do not create a link. Save the file. 9. Use Internet Explorer to browse the TSM/ACR 251 photo gallery page at https://www.msu.edu/course/tsm/251/PhotoGallery2008/webalbum/index.htm. Select one original image that would make a good image map (Do not save the thumbnail, you want the original image). Save the file on your P: Drive in your web\wwwexercise folder. Remember web file naming rules. If you are not sure how, please review your class notes from Internet Publishing or ask your instructor. 10. Open Photoshop CS3 and open the image you saved in step 6. Either by cropping or resizing the image, reduce the horizontal dimension to 450 pixels. You will want to maintain a consistent contrast area to add your text. Add the following text to the image so you can create four links in Dreamweaver using the image mapping tools: Home, WWW Images/Tables, WWW Navig., Resume and MSU. Save the image. 11. Use Photoshop CS3 and your button file created in the photoediting assignment to create normal, light and dark 150 x 50 pixel buttons for: Home, WWW Images/Tables, WWW Navig., Resume and MSU. Use a filenaming syntax that you can remember (e.g., home.jpg, homelight.jpg, homedark.jpg). When finished creating your 15 buttons, remember to save the file (Save As) in Photoshop's native file format else you will have to start over if you need to make button corrections. 12. Return to Dreamweaver and wwwnavigation.html. In the first row, second column (now 4 merged cells) inserts your modified image. Using the image mapping tools, specify the links to the appropriate files/sites for Home, WWW Images/Tables, WWW Navig., Resume and MSU. Note: Do not create a link to the page you are on. Save the file. 13. In the first column of the first row insert your first rollover image and enter the corresponding swap image and link. Repeat the process for your other four buttons. If you want to single space your buttons, use <Shift-Enter> to insert a line break versus a paragraph.44 Note: Do not create a link to the page you are on. Instead of a swap image for the page you are on use a single image. This is where you would use the darker image to indicate which page the user is on. Save the file. 14. Create a Spry horizontal pop up menu for navigation to wwwimagesandtables.html, wwwnavigation.html, index.html and MSU . 15. Select one of the navigational options that you created and add that navigation option to wwwimagesandtables.html and index.html. Save the files. Note: Do not create a link to the page you are on; simply create a static marker. 16. Create a memo regarding Parts 1, 2 and 3 of this assignment addressed to your instructor with the correct URL of the index file. Include in your memo a complete description of what you learned and accomplished with Dreamweaver CS3. Convert your memo to a pdf file.