39 WWW Exercises (40 points total) Due: ___________________ Memorandum Date: September 3, 2009 To: TSM/ACR 251 Students From: Dr. Reese RE: WWW Exercises Part 1 Part 1 is an exercise to create a homepage or Table of Contents (e.g., a sample digital portfolio homepage). 1. 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. 2. In the Files Panel, right click in your “wwwexercises” folder and create a New Page entering the following information on the new untitled pag e: • A page title (e.g., TS M/ACR 251 Web Design Skills ‐ Date) • Body text describing the content (e.g., Luke Reese's Web Design Skills....) o “This web page provides examples and links to examples of my web site design skills. Often called the default or index page, this page is being stored as index.html and will automatically load when the URL www.msu.edu/~NetID/wwwexercises/ 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 both Relative and Absolute hyperlinks and a mailto: link. The additional links will take you to pages demonstrating additional www design skills.” • A link to your Good and Bad web sites page with the text “Examples of Good and Not‐So‐Good Web Sites” • A link to the MSU site describing your major and the courses that you will take. • Your contact information, last revision date, etc. 3. Save this web page on your P: drive in your web\wwwexercises folder as index.html. Please ensure you are saving this file in the wwwexercises subfolder! 4. Using Page Properties and the CSS Styles Panel we will create a cascading style sheet to be used on all pages. Click on the Page Properties on the Properties Inspector. Set the Page font family to be used. 40 Set the font size and font color. Set the Links font, color, visited links color, active links color and underline style. In the CSS Styles Panel, select the All tab. Select all rules and right click. Select Move CCS Rules and when asked we will store the rules in a file called styles.css in the wwwexercises folder. Add a New CSS Rule to this style sheet for the <h1> tag. Save all files. 4. Open the goodandbadwwwsites.html file. Apply the styles.css style file. Save the file. 5. Access the Angel drop box, WWW Exercise 1, and submit the URL for the index file. Part 2 Part 2 will demonstrate use of tables and images on a web page. This exercise will use thumbnails images, image links, horizontal lines and tables for organization and alignment. 1. 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. 2. In the Files Panel, right click in your “wwwexercises” folder and create a New Page, apply the styles.css style file, and enter the following information on the new untitled page: • A page title (e.g., TS M/ACR 251 WWW Images and Tables ‐ Date) • Body text describing the content (e.g., Luke Reese's Web Design Skills using Tables, Images and Horizontal Lines) • “This web page provides examples of table and image use. This page is being stored as wwwimagesandtables.html and will automatically load when the URL www.msu.edu/~NetID/wwwexercises/ wwwimagesandtables.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 thumbnail images which use hyperlinks to load pages with the original images. Tables are used to control the screen width plus organization and alignment of images to text. Table cells have been merged to insert Horizontal Rules for presentation. Alt tags have been inserted on all images to confirm to disabilities standards.” • Your contact information, last revision date, etc. 2. Save the file on your P: drive in your web\wwwexercises folder as wwwimagesandtables.html. Please ensure you are saving this file in the wwwexercises subfolder! 3. Use Internet Explorer to browse the class web page (www.msu.edu/course/tsm/251) and save the header image on your P: Drive in your web\wwwexercises folder. If you are not sure how, please review your class notes from Internet Publishing or ask your instructor. Insert this image into your wwwimagesandtables.html file at the top of the document. 41 4. Use Internet Explorer to browse the TSM/ACR 251 photo gallery page (https://www.msu.edu/course/tsm/251/PhotoGallery2009/index.htm). Select a total of 5 thumbnails and their corresponding original images and save all ten files on your P: Drive in your web\wwwexercises folder. Remember web file naming rules and use a file naming pattern that makes good organizational sense. If you are not sure how, please review your class notes from Internet Publishing or ask your instructor. 5. After the introductory text from step one about, insert a table with 1 row and 1 column with a width of 400 pixels and border =1. Inside this table enter the text, "Click on the thumbnail to see the full size photo." Under this text (inside the first table) insert a second table with 5 rows, 2 columns and borders=0. In the first column insert one thumbnail image in each of the five cells from the TSM/ACR 251 thumbnails. Add an ALT tag for each image. In the second column, write a caption for each corresponding thumbnail image. Make the captions vertically align to the bottom of the cell. Remember to use spell check. 6. Insert a new row between each thumbnail. Select both cells