Assignment #4

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

50 Points
Due TUE Oct 13 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.

Note: 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 5 "Creating Page Layouts with CSS"

Follow the steps below to learn about CSS layouts (from lesson 5 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 127 - 158 and perform all lesson steps on those pages. When you complete the entire lesson and have reached the bottom of page 158, you are ready to continue to the next step below.
2. After completing the entire lesson 5, and with your "layout.html" still open in Dreamweaver, you are going to make the necessary changes with the goal in mind to change the layout and formatting of the page to match the printscreen shown below as closely as possible. There are notes in the step below to help you make these changes.
   
   
   
3. Change the text in the main heading to read "organic utopia by Joe Student" where you fill in your own full name (or, if your full name won't fit on one line, try first initial and last name such as J. Student.) Change the background color of the body element to a deep dark purple (#480048). All style changes should be made so that "styles.css" is being affected. No styles should be placed directly within "layout.html".
4. In the header area (top of the page), adjust the position of the background image so it displays on the left instead of the right and then adjust the text alignment of the header area to be to the right so that the "organic utopia" image will align to the right instead of the left. Move the "Global Nav" div so that it appears above the "organic utopia" image as shown.
5. In the content area of the page, drag the "main" and "sidebar" absolutely positioned divs so that their positions are interchanged -- the sidebar becomes the left-hand column and the main content becomes the right-hand column. Tweak the positions of these two columns to achieve the desired effect shown in the screen shot above (I had to move the sidebar down a bit to get it to line up the text more nicely.) Test in the browser.
6. Printout #1: With your "layout.html" Web page in the browser and name displaying in the heading, obtain a printscreen printout. Your result should closely resemble the screen shot above, though may vary slightly depending on your screen resolution, which should be at least 1024x768.
7. 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";
   
   /* A4P1 Organic Utopia by Joe Student */
   
   
8. Printout #2: With your style sheet ready to go, use Dreamweaver's "File" menu and its "Print Code" command to print the 2 pages of CSS coding. After it prints, mark the code printouts as follows. Circle the comment that includes your name. Circle the purple background color change you made. Circle the style rule for the "GlobalNav". Circle the style rule for the "sidebar".
9. After obtaining the printouts, you can close all files in Dreamweaver, that concludes this part of the assignment.

Part 2: "Tea Cloud Layout"

1. Take a look at the layout you are trying to achieve below.
   
   
   
   
2. To begin, you must first obtain the starter files that include all of the images and text that you see on the above site. To get it, you must download the zip file below and then unzip it to reveal the files within. You can click the a4p2 link below to start the process.
   
   a4p2.zip
   
3. Once you have downloaded the zipped folder, you must unzip it to reveal its contents. Use a program capable of unzipping the folder to gain access to all the files within this a4p2 folder.
4. Once the folder has been unzipped, launch Dreamweaver and define your site to point to this unzipped folder
5. With your site properly defined, your files panel should contain 6 image files, 2 html files, and one style sheet file.
6. Begin by opening up "index.html" in design view. Enter your name into the title area of the document instead of the existing "Firstname Lastname". Then open "tea_styles.css" and create a comment toward the top identical to that in part 1 of this assignment. All styles you create for this page should go in this external style sheet. It should already be attached to your index.html page.
7. Next you will begin the layout process by creating AP Divs to contain each page element. Your goal is to build a design that matches the one shown as much as possible. Use the suggested names for each AP Div you create (the suggested names appear in quotes when that div is discussed in the steps below.)
8. Start by creating the "container" AP Div (later you'll create the smaller AP Divs on top of it.) The container div should be made to be centered across the page using the same technique introduced in part 1. Make the width of your container div about 850 pixels and its height about 450 pixels so you can make your layout match the above sample.
9. With the container div created and centered, you'll be creating 4 AP Divs inside it, each div to hold its own content. The "logo" div will contain the logo image centered within it, the "nav" div will hold the 4 link images (About Us, About Tea, Our Products, and Brewing Tea") centered across within it, the "text" div will contain the text for the page, and the "hands" div will contain the "Welcome to teacloud" hands image. The logo and the nav divs should have identical heights and tops so that they line up nicely. Approximate their positioning to match the sample above. The text itself can be pasted into that "text" div from the "page-text.html" file. Add your name into the bottom of that text area in place of "Joe Student". Set appropriate background colors for 4 separate areas -- the logo and nav backgrounds should match the sample but the page's body and container background colors can vary to your taste.
10. Tweak as needed to get the layout shown above, as close as possible.
11. Printout #3: Obtain a printscreen printout of your resulting teacloud page as it displays in the browser at 1024x768 resolution. Your name must show up in the browser's title bar and in the last line of text.
12. Printout #4: Obtain a code printout of your tea_styles.css style sheet file. But first, make sure your name appears in a comment toward the top of the file, and that all of your page's styles appear in this file (no styles appear in the code of "index.html".) If there are styles in the html file, properly export them out into the style sheet, test your page to make sure it still works, then obtain your printout. After it prints, circle your name within the comment area. Then circle all the style properties for the AP Div that holds the main text area on the page.
    
13. Save the final version of your page, close it, exit Dreamweaver, and grab a refreshing beverage to quench your thirst.

What To Turn In

Modify your cover sheet document from assignment 3 (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 #4", 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 of the "layout.html" page displaying in a browser at 1024.768 resolution.
3. Printout #2, a printout of the associated style sheet for the layout.html page. Mark off the proper areas on the printout.
4. Printout #3, a printscreen of your "index.html" page in a browser using 1024 x 768 resolution.
5. Printout #4, a code printout of "tea_styles.css" style sheet file with proper areas of the printout marked off.

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 containing the files you worked on in this assignment.