Home Calendar | Syllabus | Projects | Contact | Links  

English 413, Electronic Documents and Publications -- Dr. Jablonski -- UNLV -- Course Website Link to UNLV home page

Calendar

Old
Announcements

Syllabus

Online
PDF

Projects

Webzine Project
Doc Re-Purposing
Web Site Evaluation
E-Portfolio

Lab Assignments

Lab #1
Lab #2
Lab #3
Lab #4
Lab #5
Lab #6

Lab #4: Designing with Cascading Stylesheets

Download PDF version

What You Need to Complete this Lab

  1. HTML editing software, preferably Dreamweaver MX
  2. UNLV Student Computing Resources SCR account. http://ccs.unlv.edu/scr/support/display.asp?crumb=2&typeid=2
  3. A basic understanding of how the Internet works and how Web pages are made
  4. Knowledge of the readings assigned for today:

Lab Assignment

For this lab, you will practice utilizing Cascading Style Sheets (CSS) in your Web pages. Web designers use cascading stylesheets because CSS offers better control of Web page elements, particularly text elements, but also elements like page layout. CSS makes “leaner” code, which increases download times and makes Web pages more accessible to visually impaired users. Perhaps most importantly, by linking to an external CSS, designers can create, maintain, and update a uniform design across multiple pages of a Web site.

As Mulder explains in his “Stylesheets Tutorial,” Creating CSS is as simple as adding new code within the <head> tags of a Web page. It’s a little tricky learning how to add CSS in Dreamweaver, but once you get the hang of it, all you really need is to remember which declarations you want to achieve and which selectors are best for achieving them. (Don’t recall the difference between a selector and a declaration? You better go back and review Mulder’s tutorial, particularly lesson 1.)

For lab #4, you must re-create a new version of the Web site you created for lab #3, only this time you must use only CSS to achieve the same design, including layout and text elements. You cannot use any borderless tables to achieve the two column layout.

To make it a little more challenging, your page must include the following:

  • Stylesheet: Your page must be controlled by an external stylesheet!
    • Note: You must add a link to your external stylesheet from your page so it can be downloaded. Make it the first link in your Navbar.

  • Header: Keep the same header you created for lab #3 (upper-left photo image plus upper-right text banner). But remember: no tables allowed! You must layout your page using only CSS!

  • Navbar: Include a text-based navigation bar in the same location as lab #3. Do not use the navbar image you created in lab #3! However, the dimensions (150 pixels wide by 400 pixels high) and color (#FFFF33) of the navbar should be the same as lab #3.

    • The text links in the navigation bar must include the following decorations:
      • a:link = Verdana, 16 pt., red, no underline
      • a:visited = Verdana, 16 pt., green, no underline
      • a:hover = Verdana, 18 pt., bold, red, no underline. Try to include a box/border rollover effect (see Macromedia’s Online CSS Seminar, linked below)
      • a:active = same as above
      • NOTE: your first link should be named “stylesheet” and be a working link to your *.CSS file.

  • Text: Your body text should be in Verdana, 10 pt. and should include leading of 1.5 lines. Don’t forget to include some padding from other elements, like the navbar and content image.

  • Headings: You should also include at least one section heading in your content space that is Geneva, bold, 16 pt., uppercase.

  • Content Image: You will keep the same large photo you used in the content space of lab #3, in the same location (right of the content text).

  • Bonus: Try to achieve the same black border around either the whole navbar (hard) or each button of the navbar (harder).

The first step to completing lab #4 is to learn how to use CSS in Dreamweaver. If your computer has IE 6.0 and a fast connection, the best way to learn about CSS in Dreamweaver is to view the Macromedia Online Seminar (first bullet below). If you can’t view the demo, read the “How to Create an External Cascading Style Sheet” tutorial (second bullet below). The Online Seminar is very good, just remember that the online seminar discusses Dreamweaver MX 2004, but only MX (not MX 2004) is installed in CBC C309.

The second step is to build the page using:

  1. your knowledge of CSS (Mulder and the tutorial resources cited in this lab)
  2. the layout and graphics you used in lab #3.

But remember: no tables allowed!

top

Home Calendar | Syllabus | Projects | Contact | Links