Assignment #3

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

50 Points
Due TuE Oct 6 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 4: Styling Your Pages With CSS"

Follow the steps below to learn about "Cascading Style Sheets" (from lesson 4 of our textbook) and to produce the correct printouts. Be careful to read all of the steps below before so you can obtain the correct printouts.

Read pages 95-125 and perform all steps within this lesson on those pages.
After you have completed all work on the lesson 4 files (including events.html, products.html, mystyles.css, and morestyles.css), then continue on to make the changes suggested below and create your printouts.
On the events page, modify the h1 heading by replacing the word "OrganicUtopia" with your own last name. For example, if your name is Joe Student, the h1 heading should read "Joe Student Events".
Make sure that both events.html and products.html both are attached only to "mystyles.css" for their styles and not to "morestyles.css". Delete "morestyles.css". The background color for both pages should be light green and not yellow.
With the events page open and the CSS panel open, adjust the existing "body" styles in mystyles.css so that the page's horizontal margins are increased from 15% to 25%.
With the events page and CSS panel still open, locate the existing #footer rule and delete it. (To do so, use the "All" button instead of the "Current" button to show all rules, then select the #footer rule, then click the trash can icon in the lower-right hand corner of the CSS panel). Some footer area formatting should be removed from the page display.
On the events page, make sure that the last 2 paragraphs on the page (containing copyright information) have a class name of "copyright" (from your work on pages 108 - 110). Then locate that .copyright style in the CSS panel (the actual rule is in mystyles.css). Modify that style rule so that it uses a monospace font, such as Courier New or Courier instead of the current font of "Verdana, Geneva, sans-serif"). In addition, modify its background color style from "FFF" (white) to be #EFE (a very light green).
Modify the existing h2 rule to include an 18 pixel solid left border of color #060. Add left padding of 9 pixels to this h2 rule to give the heading some spacing between the text and its new thick border.
On the events page, adjust the text "Rent Our Facility!" to be an "h2" heading if it is not already (using the property inspector.) The new left border should show up on both the "Spring Events" and "Rent Our Facility!" headings (as shown in the screen shot below.)
Save all files and preview in the browser. Your result should resemble the screen shot shown below. If so, you are now ready to create your printouts.
Printout #1: With your events page in the browser, name displaying in the main heading, and copyright info displaying toward the bottom of the browser window, you are ready obtain a printscreen printout. It should look much like the sample above.
Open "mystyles.css" in Dreamweaver. Below the existing first line and above the existing second line, insert a new line with the following comment typed on it (replace "Joe Student" with your own full name.)

/* A3P1 by Joe Student */
Printout #2: With your "mystyles.css" page open in Dreamweaver, use Dreamweaver's "File" menu to activate the "Print Code" command. After your document prints circle your name on the 2nd line of the document.
After obtaining printout #2 as indicated above, save and close all open files.

Part 2: "Style Up your Favorite Links Page "

In this part, you will take your favorite links page from assignment 2 and, using the techniques demonstrated within lesson 4, format it using CSS. The guidelines for doing so appear below. (If you did not do assignment #2, you should create a favorite links page similar to that required for the assignment to use as a starting point for this part.)

Create a folder called "Lastname Personal Site" (where your own last name appears at the beginning of the folder name) and copy your "favorite links" page from assignment 2 into that folder. Open Dreamweaver and define your site as follows: use your own full name as the site name and choose that newly created "Personal Site" folder to be the site's root folder. Fill out all other site definition choices appropriately.
With your personal site defined in Dreamweaver, open your favorite links page.
Next, create a new CSS style, define it in a new style sheet file, and name that file personal.css. The new style should set the "body" of the page to use a sans-serif font list (such as one including Arial or Verdana), a font-size of 95%, a light colored non-white background color, and a dark non-black text color (with sufficient contrast between them for high readability). Lastly, set 10% left and right page margins.
Based on your background and text colors, set appropriate colors for all 4 link states (link, visited, rollover, and active). Create these 4 style rules in the order in which they are listed in the previous sentence (order can have an effect.) Make your style (color) choices so that your page's links are easy to find on the page, so that unvisited and visited links are clearly distinguishable, and so that a hovered link is clearly emphasized. Links should always be easy to read, regardless of what state they are in.

Note that sometimes browsers will appear not to support your visited link styles but this usually means there is a security setting that is forcing it to forget about its history of visited pages -- once that setting is cleared, the browser should acknowledge its history and render your visited link styles just fine.

Ok these settings, save the page, preview it in the browser, and test out all of the new formatting, especially the various link states. As needed, return to the page properties to tweak your settings.
To further emphasize your links, create new CSS rules for "a:hover" (rollover) that sets up a "reverse video" effect (switch foreground and background colors) when links are moused over. For example, if your normal paragraph text on your page is blue text on a yellow background, then whenever a link is hovered it should be yellow text on a blue background.
Below the "Contact Me" section at the bottom of the page, create a new paragraph containing copyright information such as:

Copyright 2008 Joe Student Industries, all rights reserved.

This paragraph should include your name (not Joe Student's). After completing it, create a new CSS style using an "id selector" of "#copyright" and set the following styles: font-size of 90%, text-alignment of center, a margin on the top of 25 pixels, and a text color that is noticeably lighter than the standard text color yet still dark enough to be reasonably readable. These changes should have the effect of separating and de-emphasizing this copyright area. Apply this "copyright" id to the actual paragraph.
Again save your changes and preview in a browser, testing your latest hover and active link background colors as well as checking out your new copyright area. As needed, return to Dreamweaver to tweak your settings. When all is looking good in the browser, you are ready to create your printout as indicated below.
Printout #3: Your browser should be maximized at a resolution of 1024x768 or higher. Have your favorite links page scrolled down to a point where the copyright paragraph is visible at the bottom of the browser window and as much of the rest of page as is possible is visible above it. Make sure that at least one visited link and at least two unvisited links are visible. Hold your mouse over one of the unvisited links (so the rollover effect can be seen) and then obtain a printscreen printout of this page. To obtain full credit, your printscreen must be displaying at least one normal link, at least one visited link, and one hovered link. After it prints, circle on your printout one of each of these kinds of links and write next to it "visited", "unvisited", or "hover".
If it is not already open, open the "personal.css" file you just created in the previous step. Toward the top of the page (starting on line 2), create 2 new "CSS" comment lines containing your name and the assignment and part numbers as shown below. Note that CSS comments begin with the symbols /* and end with the symbols */.

/* Styles created by Joe Student */
/* Assignment 3, Part 2 */
Printout #4: With your newly created comments at the top, print all of the code for this style sheet. After it prints circle all the CSS style rules for hovered links and for the copyright area. Be sure that you are not printing the favorite links html page, but are printing the style sheet.

What To Turn In

Modify your coversheet document from assignment 2 (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 #3", 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:

The cover sheet (as indicated above)
Printout #1, a browser printscreen of the "Events" page with your name visible in the page's heading.
Printout #2, a code printout of the "mystyles.css" style sheet, including a comment on line 2 containing your name. Make sure this is not a printout of the events page html code.
Printout #3, a browser printscreen of the "favorite links" page with your copyright area and several links visible, with mouse hovering over a link. Three links should be marked up on printout.
Printout #4, a code printout of the "personal.css" style sheet file, including a comment on line 2 containing your name. Make sure this is not a printout of the favorite links page html code.

Back-Up Your Work