Comm 244: Design for the World Wide Web

Week 3

Notes

Homework

Reading

Required Reading

Don't Make Me Think: Chapters 1-3

Learning Web Design:

  • Read Chapter 11: pages 246-260: From "The Big Concepts" to the end of chapter
    • This section covers a lot of big CSS concepts. Don't worry if it doesn't all sink in right away.
  • Read Chapter 12:
    • pages 261-263: Chapter 12 start through "Font Limitations"
    • pages 266-277: Start at "Generic Font Families" and stop at "Advanced Typography With CSS3"
    • pages 280-282: Start at "Changing Text Colors" and stop at "ID Selectors"
    • pages 287-294: Start at "Text Line Adjustments" and stop at Exercise 12-6
  • Read Chapter 13:
    • pages 303-313: Chapter 13 start through "Background Color"
Supplemental

Here are links to the w3schools.com site that go over some of the CSS properties we learned. These pages include explanations and demonstrations of the CSS properties. You are not required to read them, but if you find yourself needing more explanations, be sure to look at these pages.

Exercises

Make sure to review the notes from class posted above in the notes section.

Class Website

Experiment With CSS

Experiment more with all of the CSS properties listed in the CSS Basic Properties. Use the HTML Page for CSS Testing to practice on. Press Option when you click the link to download the file. You can also view the source of the page and copy all of the HTML and paste it into a new file.

  • Add the HTML Page for CSS Testing to your website
  • Make a heading for Week 3 on your class website
  • Create a link under the Week 3 heading to your new HTML Page for CSS Testing

I understand that there are a lot of properties here. The goal is not to memorize the properties, but to get a good feel for how to use them. For example, don't worry so much about remembering that the CSS declaration text-transform: uppercase; will cause everything to be uppercase. Remember instead that there exists some CSS property that will do that.

Update Your Class Website
  1. Update the content of your class website.
    You should be updating it each week. See the Class Website Example for a demonstration of the expected structure.
  2. Add a clear navigation system to each page. Your navigation should include links to the following pages:

    • Home (Your class website home)
    • About (about me page from week 1 homework)
    • Recipe Book (link to the index page of the recipe book website)
    • (optional) Blog (a listing of your blog posts)

    Make sure your navigation is in a list (you can choose ul or ol). You may use the following CSS rule to make your list appear on one line: nav li {display: inline-block;}

  3. Attach an external style sheet to each of your class website pages. Use some of the CSS properties you've learned to make your class website more visually appealing. The end result is up to you, but make sure it is both usable and readable.
Recipe Book Website
  1. Create an external style sheet file for the Recipe Book website. Create a new folder called css inside your recipe-book folder. Save the style sheet inside the css folder.
  2. Attach the CSS file you just created to all of the HTML pages in the Recipe Book website as an external style sheet.
  3. Test to make sure your CSS is working by setting the background color of your pages.
    Since you're using an external style sheet, the background color of every single page in your recipe book should change as well.

Blog Assignment

Read the handout from Don't Make Me Think.

Choose two major websites to look at. Spend some time browsing each site. Think about the following things while looking at the site:

  • What is the objective of the site?
  • Who is the target audience of the site?
  • What type of content is on the site?
  • How does the design of the website facilitate the website objective?
  • Is the site intuitive to use?

In your blog post, write about the answers to these questions. Also think about how you used the site.

  • Were you able to easily navigate the site?
  • Did you get lost?
  • How did you know where you were in the site?

Be sure to include links to both sites that you review in your blog post.