Assignment #2

RCC Fall 2009 CIS-72A XHTML

Web Page Design Using Color, Backgrounds, and Fonts!
Due Wed Sept 23 at start of class
6 Printouts, 100 Points

Part 1: Tutorial 3, Designing a Web Page
2 Printouts, 40 Points

This tutorial focuses using CSS (Cascading Style Sheets) properties to control color, fonts, background images, spacing, borders, and floating. These capabilities allow you to control some of the common creative design elements of Web pages.

Read the and follow along the steps and instructions given within tutorial 3 (pages 121- 184). In doing so, you will be working with several pages from the "Sunny Acres" Web site. You will also be working with an external style sheet file, "farm.css", which will contain formatting styles for the site's pages.

Keep the following instructions in mind as you work through this tutorial.

  1. Within the HTML of the home page, locate the first sentence below the "Welcome" heading, which begins "Welcome to the home page of our family farm...", which can be seen on page 178. Between the words "our" and "family", insert your own full name. For example, if your name is Joe Smith, this sentence should then show up as "Welcome to the home page of our Joe Smith family farm.." when the page is displayed in the browser.
  2. Printout #1: When you reach page 182, after completing the work on the Sunny Acres site, open the home page within the browser. Maximize the browser window so that as much of the page as possible is displaying. Make sure your full name is displaying in the first sentence below the "Welcome" heading as indicated above. Then obtain a "Printscreen" printout of this page displaying in the browser. The result should look as much as possible like the page shown in figure 3-61 on page 182, although the height and width of your monitor will affect the layout of the page including how much of the page will fit onto your printout.
  3. Printout #2: After completing the tutorial and printout #1, open up your external style sheet, "farm.css" in your text editor. Make sure that the top of this style sheet includes the comments shown at the top of page 129, including your own full name as "author" and that the bottom of this style sheet includes the CSS rules shown in figure 3-60 on page 181. Then use your text editor's print command to obtain a printout of this CSS code.

Part 2: Watch Videos and Style a Coffee House Page
3 PrintoutS, 60 Points

The videos focus on using CSS (Cascading Style Sheets) properties to control color, background images, spacing, and font changes. These capabilities allow you to control some of the common creative design elements of Web pages. Follow the directions below carefully so you understand what you need to do with these 2 videos and create the proper printouts to maximize your score.

  1. Watch the video, Intro to CSS, which introduces the correct way of using an external style sheet to create formatting changes. Note that this video is in QuickTime (.mov) format, so you'll need the QuickTime player to view it (a free copy is available at Apple.com.) Links to this video and its data files are given below, although the data files are not required since you are only asked to watch the video.

    Link to the data files: Data files for "Intro to CSS" Video (28K .zip file)

    Link to the QuickTime video: Intro to CSS Video (28MB .mov file, 9 min 53 sec video)
  2. Now that you have seen how to correctly use an external style sheet file, you are ready to begin working on a page from a coffee house Web site. Follow the directions below carefully to obtain the proper printouts and maximize your points.
    1. First obtain the hybrid video #3 data files from the link below and unzip them. These files represent the starting point for the hybrid video #3.

      Link to the data files: Data files for Hybrid Video #3 (6K .zip file)

    2. With the files unzipped, locate and open up the "coffee_house.htm" page in your HTML editor (such as Notepad) and replace all 4 occurrences of "Joe Student" with your own full name. Then, below the "title" tag, notice the existing comment area and enter in appropriate author, class, and assignment information. Then save and preview in a browser to confirm that your changes were made correctly.
    3. Next read the textbook section entitled "Working With Metadata" beginning on page 103 and ending on page 106. Then add the following 3 meta tags to your coffee house page. Add appropriate "author", "keywords", and "description" meta tags for this page. By appropriate, it is meant that your own full name should be in the author meta tag and that information appropriate for the coffee house page should be used for the description and keywords, as if you were preparing the page for an actual business interested in good search engine results. For example keywords would be words or word combinations that appear within this page's text already and are possible words or word combinations that users might type into a search engine when searching for pages like this one. See the examples of these tags shown in the middle of page 105 (or view the HTML code for some of your favorite Web sites) for details. Place these 3 meta tags just below the "title" tag -- and just above the opening comment marker. Each meta tag should appear on its own line. Save your file and leave it open in your editor.
    4. With these meta tags in place, it is now time to prepare for making some CSS style changes. Begin by creating a new text file in your text editor and saving the file as "coffee.css" in the same folder as the other coffee house files. In this style sheet file, begin by adding a CSS comment at the top that includes your full name as "author" and "assignment 2 part 2" as the "assignment". To see an example of a CSS comment area, refer to figure 3-5 on page 129 of your textbook (but yours does not need to contain so much info.) Save your style sheet file and leave it open.
    5. Next you need to have your coffee_house.htm document open in your editor and add the necessary "link" tag within the "head" section of the page so that this page will know to get its styles from your "coffee.css" style sheet file. This was demonstrated in the "Intro to CSS" video and there is also an example of a "link" tag within figure 3-6 on page 130 of your textbook. Your link tag should look exactly like the one shown in the book except for the filename. You can also place yours just above the closing "head" tag as shown in the book. Save your Web page.
    6. Before we go any further, let's make sure your "cofee_house.htm" Web page is properly linked to your "coffee.css" style sheet file and that the two files are working together as expected. To do so, carefully enter (or better yet copy and paste) the following style rule into your style sheet file below the existing comment area:

      body { color: black; background-color: #FFFFDE; }

      Then save your style sheet file and reload your coffee_house.htm Web page in the browser. If all is ok, you should see that your Web page now has a tan background color. If not, carefully check all of the code related changes you have been asked to do to these 2 files so far and compare the code with other examples to help you find where the problem might be. Reread the above directions carefully as needed. Seek help from others as needed. When you successfully see the correct result, continue on to the next step.
    7. Now it is time to make some more style changes. The goal here is to make the same design changes that are demonstrated within the hybrid video #3, but to make the changes by using your separate "coffee.css" style sheet file as demonstrated in the above steps (and in the "Intro to CSS" video) instead of making them within "style" attributes of the HTML tags themselves as is done in the hybrid video #3. To see what style changes are needed, watch the hybrid video. To start it, use one of the links below, stopping it after each style change is shown and making the equivalent changes using your "coffee.css" style sheet file). Further helpful notes appear in the following steps.

      Link to the Windows Media video: Hybrid Video #3 (14.2MB .wmv file, 55 min 53 sec video)

      Link to the Flash version of this video: Flash Hybrid Video #3

    8. The first change shown in the video appears during the 9th and 10th minutes and involves the "body" tag. As you will see, we have already made the analogous style change when we added that first "body" style rule into our style sheet that adjusted the background color of our page. So that one is done for you. Continue watching the video and making the appropriate style changes to match those done in the video. Your goal is to have a Web page that looks identical in the browser to the one in the video but is achieved by using the external style sheet file to contain all the style rules. For example, the next change you need to make is to add the font related changes discussed during the 11th and 12th minute to your existing body style rule. Always save your style sheet file and refresh your Web page file in the browser to confirm your changes are taking effect like they should be before continuing on any further.
    9. After you make the style changes to your h1 heading to match the video's styling, you will see in the video in the 16th and 17th minutes, changes are being made to the links paragraph. Because this links paragraph needs to be formatted unlike any other paragraph on the page, you cannot just use "p" as the selector for this style rule (using "p" will make all paragraphs look this way instead of just the links paragraph.) In a case like this, you must insert an "id" into the "p" tag itself (such as id="links" or id="nav") and then write a rule in your style sheet using an "id" based selector, such as #links or #nav. For further explanation and an example usage of such an "id", see page 134 in your textbook, and read the short section entitled "Applying a Style to a Specific ID". Then make the appropriate changes to both "coffee_house.htm" and "coffee.css" to apply the styles to the links area. Choose an appropriate name for the id. Test in the browser to make sure the intended styles are in effect only in that area of the page.

      If you find that you are having trouble getting the id's to work right you, try carefully watching the first 5 minutes of this video which contains similar id styles to your page's styles:

      Link to the optional video: ID's and Classes Video (22MB .mov file, 9 min video)
    10. Continue on to add the rest of the styles shown in the hybrid video in this fashion, either using tag based selectors (such as "body", "h1", and "ul") if you can, or instead using id based selectors when necessary to uniquely format a specific tag unlike any other. When using ID's, choose meaningful names, such as "links" or "nav" for the link area.
  3. After completing your work on the coffee house page and its style sheet, you are now ready to create your 3 printouts as indicated below.

    Printout #3: Turn in a printscreen of the completed coffee house "About Us" page as it displays in the browser at a resolution of 1024x768. Using this resolution your entire page should fit within the browser and show up on your printscreen printout.

    Note: Assignment #0 shows you how to adjust the resolution of your monitor. If for some reason your screen cannot display as large as 1024x768, then make 2 printscreens at 800x600, the first showing the top half of the page and the second showing the bottom half.)

    Printout #4: Turn in a printout of the HTML code for this same coffee house "About Us" page, printed from within your text editor (such as Notepad). Make sure your name appears in the code as instructed.

    Printout #5: Turn in a printout of the CSS code for the "coffee.css" file, printed from within your text editor (such as Notepad). Make sure your name is appearing within a comment toward the top of your style sheet.


Part 3: Cover Sheet
1 Printout, 0 Points

For your last printout, you will make a quick adjustment to your assignment 1 cover sheet and then print it for use as assignment 2's cover sheet. First make sure that your cover sheet contains all of the 5 lines of needed information: name, class, time and day it meets, instructor, and assignment. Then make this tiny modification:

Printout #6: Turn in a printout of the updated cover sheet document. Staple this cover sheet printout to the front of your other printouts. Arrange the rest of your printouts in the order in which they were numbered in this handout.