Assignment #2

RCC Fall 2009 CIS/CAT-76B Dreamweaver
Dreamweaver CS4

50 Points
Due Tue Sept 22 at start of class

Before you attempt this assignment, you are required to have read and understood the information contained within the Assignment #0 document, which is available from the class web site. To avoid unnecessary point loss, make sure that you turn in all of the required printouts and staple them together in the order indicated within this document.

Part 1: Lesson 3: Adding Text & Images (And Links)

From lesson 3 of our textbook, read and perform all exercise steps on pages 67 to 92. In doing so you will gain skills in adding images, links, and lists to your pages. When you finish your work with this lesson and have the "events" and "products" pages done, then you are ready to follow the additional steps below to complete your work in part 1 and produce your printouts to turn in.

1. On the events page, replace the word "OrganicUtopia" in the h1 page heading with your own full name, as in "Joe Student Events".
2. On the events page, change the unordered list to an ordered (numbered) list.
3. To the end of that ordered list on the events page, add a 5th item, "Organic Chili Cookoff".
4. Below that ordered list, but above the "Rent Our Facility!" heading, add one reasonably sized image (larger than 200x200 pixels but smaller than 300x300 pixels) that is closely related to one of the listed events (cheese, wine, chili, etc.) Note you can use Google Image search to find a suitable image, right-click the image and save it into your folder that contains the other images used in this assignment. Use Dreamweaver to insert it onto an otherwise blank paragraph on your page and then use Dreamweaver's image tools to resize it as needed.
5. Just above the copyright area at the bottom of this events page, add an appropriate "Contact Us" h2 heading and then add the following bulleted list below that:
   • Phone: 951-354-9570
   • Fax: 951-356-8742
   • Email: customerservice@organics.com
6. Make the email address above be a link that will attempt to send email to that same address when clicked in the browser.
7. Using a new CSS style rule, change the appearance of all h2 headings to have a "Courier New, Courier, monospace" font list. If you are unclear as to how to accomplish this, you might take a look at the short lesson 3 video on the CD that comes with the book. Once the CSS rule is in place, these headings will take on a unique look as shown in the sample screen shot below.
8. Printout #1: Save the events page changes you've made and preview in the browser. Use a browser other than Internet Explorer, such as Firefox. Use the browser's File menu to print your resultant page. Before printing, the page should look similar to the sample shown below.
   
   
9. Printout #2: Close the browser and return to Dreamweaver. With your page open in Dreamweaver, use Dreamweaver's "File" menu to activate the "Print Code" command. After your document's HTML code prints, find and then underline (or highlight) each of the following items on your printout separately: 1) The CSS font change rule for h2, 2) Your name within the h1 heading, 3) The code for the image you added, and 4) the code for the email address link.
   

Part 2: "Create A Favorite Links Page"

1. Open Dreamweaver and create and save a new page, giving it a document title and h1 page heading of "Joe Student's Favorite Links" (substitute in your own full name for "Joe Student") and a filename of "links.html".
2. Below are the general guidelines for the links you need to set up on this page:
   • Keep in mind that you should avoid using the same link categories and URL's as shown in the sample printscreen (or as shown on another student's page).
   • Organize your favorite links into categories, which can be somewhat general or very specific if you prefer:
     • You can use very specific categories such as "Star Wars Sites", "Online Gaming", or "MP3 Downloads" if you like
     • You can also use one or two very generic categories such as "Miscellaneous", or "Highly Recommended"
     • Each category needs to have at least 2 links (the sample page has 3 in each)
     • You need to have at least 4 categories total (this includes the required "Contact Me" category -- the sample page has 5)
     • You need to have at least 10 favorite links total (not including the "Contact Me" link -- the sample page has 12)
   • The last category should be "Contact Me". Within this section include:
     • A brief description of why someone might want to contact you or what they could send you
     • Create a mailto link to your own (or made up) email address to facilitate the email communication -- use your RCC email address if you know what it is
   • The category names themselves should be formatted as level 2 headings
   • Each link should be accompanied by a brief description which explains why you like the site or what makes this site unique
   • Within each category, the links and the descriptions of them should stand out from each other in a consistent manner:
     • In the sample, the links and descriptions within each category are organized into a definition list (which isn't covered in the book.)
     • You can use some other form of formatting, but each link and its description should be on separate lines -- for example, you could use line breaks to separate each link from its description and a paragraph separating each link & description pair from the next pair.
3. Use Dreamweaver's "Check Spelling" feature (from the "Commands" menu) to help you correct any misspellings that you might have.
4. Display your page in the browser and test all of these links to make sure they are functioning properly. Make any corrections as needed.
5. Printout #3: When you get the page looking and working the way you want, create a printscreen of the page displaying in the browser at 1024x768 resolution. See the sample printout below for more explanations and for an idea of what it should look like.
6. Printout #4: Because it is so hard to grade a links page by looking at just a picture of the page displaying, you are asked to create a code printout. To obtain this printout, use the "Print Code" option on Dreamweaver's File menu. Circle your name on the resulting code printout. Turn in all pages of code that print for your document (it could be more than one). Try to keep these pages in their proper order when you turn in your printouts.

Sample Printscreen

Sample printout #3, created within the browser at 1024x768 resolution, scrolled to the top of the document, showing as much of the document as possible. Your name should appear in the document heading and title. Note that this is just a sample and in this case yours should have different headings and links while looking similar in structure. A background image is not required. Note that because it is impossible for the instructor to know for sure just from looking at this printscreen exactly where each link leads to (and what is on the rest of your page), you are asked to create a "code printout" of this page too.

What To Turn In

Modify your coversheet document from assignment 1 (or create a new one) as follows. Use either Dreamweaver or a word processor to create a document that contains the following information: Your full name, the class "CIS/CAT 76B Dreamweaver", your instructor "Scott McLeod", and the assignment number "Assignment #2", each on its own line in a large font, centered across the page (make it look decent). Then turn in the following items, stapled together in this order:

1. The cover sheet (as indicated above)
2. Printout #1, a printout of the "events" page printed from the browser's file menu
3. Printout #2, a code printout of the same events page printed from Dreamweaver's file menu with proper code areas marked
4. Printout #3, a printscreen of your "favorite links" page in the browser using at least 1024x768 resolution (scrolled to top). Do not use your browser's file menu for this printout.
5. Printout #4, a code printout of your "favorite links" page, with your name circled.

Back-Up Your Work

Don't forget that it is important to back-up all of your work from this assignment. Some of these files may end up being needed on a later assignment, so copy them all onto a second disk, just in case.