Assignment #5

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

50 Points
Due Tue Oct 20 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.

IMPORTANT NOTE: Part 2, The Collection Table, will end up being used as part of your eventual final project. So make sure you do that part and that you save it somewhere and make a back up copy for later use.

Part 1: Lesson 6: "Working With Tables"

Follow the steps below to learn about "tables" (from lesson 6 of our textbook) and to produce the correct printouts. Be careful to read all of the steps below before you begin your work.

  1. Read pages 161 - 185 and perform all lesson steps on those pages. When you complete the entire lesson and have reached the bottom of page 185, you are ready to continue to the next step below.
  2. After completing the entire lesson 6, and with your "tips.html" open in the Dreamweaver, make the following change. In the 1st row of the top table, replace the words "with Average Min. Temperatures" with the word "by" followed by your full name. For example, if your name is Joe Student, the text across that row would be "Us Temperate Zones by Joe Student".
  3. Next, make the necessary CSS change of background colors in your "mystyles" style sheet so that the "odd rows" have a background color of white (instead of the light blue) and a "styled table" has an overall background color of #EAF1F4 (light blue instead of white). This should reverse the alternating row background colors in the "temperate zones" table from what they use to be.
  4. Then save your page and preview it in the browser. Maximize your browser. It should be at least at a resolution of 1024x768. Now you are ready to produce your first printout.
  5. Printout #1: With "tips.html" in the browser as described above with your name displaying in the top table's 1st row, scroll your page down as shown in the sample screen shot shown below so that the entire "Temperate Zones" table is displaying in its entirety and as much as possible of the "Best months to plant vegetables" table below it is also displaying. Use your browser's "View" menu as needed to eliminate toolbars, status bars, etc. to enable more of the tables to display. When you get things looking at least as good as the sample printscreen, obtain your own printscreen printout. It must show the top table's alternating background colors in the rows (although they do not have to show up in color.)

    Tips.html tables screen shot
  6. After obtaining the printout, return to Dreamweaver, close the tips.html file, and then open your completed veggie_names.html file. The notes below indicate what to do with the veggie names page to prepare it for the next printout.
  7. In the veggie_names.html page's main heading (at the top of the page), replace "OrganicUtopia" with your own full name. For example, if your name is Joe Student, the heading would read "Joe Student's Gardening Tips".
  8. Next, within this page's table, insert 2 new table rows in the right places (to keep the alphabetization in proper sorting order) and then enter the appropriate information into the correct columns for these 2 vegetables:

    Common name: Eggplant, Latin name: Solanum melongena, Family name: Solanaceae
    Common name: Okra, Latin name: Abelmoschus esculentus, Family name: Malvaceae
  9. After entering these 2 new vegetables (rows), give the appropriate class name to the appropriate new row to keep the alternating background color pattern intact. See the sample screen shot below to help you see what the final result should be. Then save and preview it in the browser at 1024x768 resolution, with your name showing up in the main page heading. At that point you are ready to create your second printout, described below.
  10. Printout #2: With "veggie_names.html" in the browser as described above with your name displaying in the page's main heading, as shown in the sample screen shot shown below, obtain your own printscreen printout. It must show the table's alternating background colors in the rows (although they do not need to show up in color). Compare yours to the sample shown below.

    Veggie Names table screen shot

  11. After obtaining the printout, return to Dreamweaver, close the file, and continue working toward your last printout in the steps below.
  12. Back in Dreamweaver with your "styles.css" file open, insert a comment into line 3 of your style sheet so that the resulting first 4 lines look like the ones shown below (lines 2 and 4 should be blank lines). Notice the /* starting characters and the */ ending characters used to begin and end the comment. Replace "Joe Student" with your own full name.

    @charset "UTF-8";

    /* A5P1 Organic Utopia by Joe Student */

  13. Printout #3: With your style sheet ready to go, use Dreamweaver's "File" menu and its "Print Code" command to print the CSS code rules. After it prints, mark the code printouts as follows. Circle the comment that includes your name. Circle the styled table and odd row background color changes you made. Lastly, circle the background image setting for table headers.
  14. After obtaining this style sheet code printout and marking the appropriate areas, you can close all files in Dreamweaver, that concludes this part of the assignment.

Part 2: "Collection Table Page"

In this part, you will create a new page for your personal Web site (to go along with your favorite links page from a previous assignment.) Most people have something that they collect, either formally or informally. Some examples include music, games, baseball cards, action figures, ring tones, avatars, screen savers, movies, software, books, comic books, shoes, stamps, coins, pins, rocks, tee shirts, posters, coffee mugs, etc. It really doesn't matter what type of items you choose, but it should be something you actually have around, so that you can include actual information about each item in your table. If you have more than one item that you collect, pick one that will be more fun for you and others to see. You are given quite a bit of creative freedom with this one, but, as usual, there are some guidelines to follow for full credit. They are listed below, along with the printscreen instructions.

  1. You may choose any reasonable type of collection except for a music collection. The reason for this is that it was already used in the sample display below which you can refer to as a sample of the general idea of what you are trying to accomplish.
  2. Open Dreamweaver and make sure the Site window is showing (in the Files panel) and that your personal site is selected (or redefine the site if necessary.) Create a new page and include your last name in the title of the document along with the word "Collection".
  3. Place an appropriate h1 heading including your name at the top of the page, such as "Joe Student's Ring Tone Collection". Also include your name into the title. Then create an introductory paragraph explaining some general information about your collection, such as what exactly you collect, why you like (to collect) these items, how long you've been collecting them, about how many are in your collection, some details about your favorite item in your collection, etc. This introductory paragraph can include made up or actual information. It should consist of several sentences taking up several lines in the browser (see sample below).
  4. Find a small image of the kind of items you collect and insert it at the beginning of the introductory paragraph, floated (using CSS) to the left or right (so that several lines of the paragraph text sit to the side of the image). This can just be a generic image of the kind of things you collect, it does not have to be a specific item that you actually have in your collection table. See the example shown below to see what is expected.
  5. Below that introductory paragraph should be your table. Initially, create an 11 row by 5 column table with headings across the top row and an appropriate table summary. Choose a border width of 1 pixels, cell spacing of zero and a cell padding between 5 and 10 pixels (your choice). Leave the width of the table undefined for now.
  6. The table's first row should contain the appropriate 5 headings for the collectible information that will appear in each column. The next step clarifies the requirements for these columns.
  7. The rest of the table (below the first row of headings) should consist of at least 10 rows of collectable items (which would fill up the 11 row table). Each of these rows has at least 5 columns (fields) of information about each item. For example, if you collect music CDs, your table data for each CD might contain 5 of the following fields: Artist, Title, Label, Genre, Producer, Release Date, Cost, Minutes, Skew #, etc. Whatever fields you choose to include, at least one of them must be text-based data and at least one must be numerical based data. In the sample CD table, the Minutes would be numeric (numbers) and the Artist, Title, Label, and Genre would be text-based (characters).
  8. After the data has been entered into all rows and columns of the table, work on the formatting of the table. Use appropriate alignment choices for your headings and table data. Align all numeric fields (columns) to the right. You must also include at least one column appropriately aligned to the left and another that looks good when centered (so all 3 types of alignment must be used).
  9. Next format the row of headings uniquely (for example use a unique font, font-size, boldness, text color, and/or background color.) Each heading should be aligned the same as the data within that same column (all centered, all right-aligned, or all left-aligned.)
  10. Then format the 10 rows below the headings of your table with some kind of appealing alternating background color combination to achieve an attractive effect while maintaining easy readability of your table's data. Do so by first setting a background color for the overall table and then creating an "oddrow" or an "evenrow" CSS class and defining a background color for it. Next, apply this class appropriately to the alternating rows. Sometimes just subtle differences in table row alternating colors works best. Test your page in a browser and decide at this point whether the table looks better with or without borders, and make any necessary changes. The heading row can either have its own colors or can simply follow the alternating row color scheme, whichever you prefer (but it still needs it own unique text formatting). Adjust the widths of your table cells (and/or table itself) as needed to enhance its appearance in the browser.
  11. Save your page. Then sort your table's data (but not the heading row) based on whatever data is in column 1, in ascending order. If column 1 does not contain unique entries, use the 2nd column as the second sorting field (ascending). Be careful not to check any of the checkbox options within the "sort table" dialog box so that the table's headings and its background color formatting do not get jumbled up by the sort. And remember you can always undo a sort if it doesn't work right, or just revert back to your saved page by closing and reopening your page.
  12. Adjust the page's "page properties". In particular, set specific non-default choices for background color, text color, margins, headings, and page font properties so as to achieve an overall coordinated design for your page. Your settings should work well with the existing table formatting. See the sample design below for an example of this coordination. Save and preview.
  13. Printout #4: When you get the page looking good, you might read through the above guidelines again to make sure you did not leave out any required elements that might needlessly cost you points. Then, when your page is ready to go, adjust your browser to make sure that it will show page and table backgrounds (in IE 6 and 7, check the appropriate option from the dialog box obtained from "Tools, Options, Advanced, Printing".) Then use the browser's File menu to obtain a printout of your entire page. Note that if your table is too wide to look good, you should use a printscreen at a resolution of more than 1024x768 (and use 2 or more print screens to get the top and bottom of the page as needed.) All of the required items must show up on the printouts (page heading, introductory paragraph, first row of table headings, and at least 10 collectable item rows with at least 5 columns). Make sure your name shows up in the title bar of the browser.

Sample Collection Table

Below is a sample of what your collection table page might look like if you had a CD collection. Of course now that you see this, you are not allowed to have a CD collection!

printscreen of collection table page

What To Turn In

Modify your cover sheet document from assignment 4 (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 #5", 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 printscreen printout of tips.html
  3. Printout #2, a printscreen printout of veggie_names.html
  4. Printout #3, a code printout of mystyles.css
  5. Printout #4, a browser File menu printout of the collection table page in the browser. The printout must show background colors and the whole page must show up.

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. The easiest thing to do is just copy the local root folders for the two sites you worked on in this assignment.