Class 08

Class 08 –Topics
Review Web Typography
CSS: The Cascade & Inherited Styles
Integrating Flash
In-class lab time

Assignment: Continue work on your midterm project. Please post you research and competitive analysis observations on your process blog and complete the initial design for the 2 pages. When you’ve completed the HTML and CSS for your project, please upload your midterm project to the class server before our next class on Thursday, April 29.

Reading completed for this week:
Working with Complex Functionality (pages 233-258) from Web ReDesign 2.0

Questions to discuss:
Name a few common examples of complex functionalities.
What is a Functional Spec?
Why is focusing on requirements so important to accessing complex functionality?

Reading completed for last week:
Starting the creative process, Defining Smart Design, Reviewing Site Goals, Developing Concepts, Design for your audience, Presenting Design and Gathering Feedback, Confirming Flow and Functionality, Testing Functionality, Designers as Problem Solvers, Creating Graphic Templates, Creating a Design Style Guide (pages 118- 140) from Web ReDesign 2.0

Questions to discuss:
What is Smart Design and how do you practice it?
How does the development of the “look and feel” of a site start?
What is the difference between a “look and feel” and a graphic template?

Video Demonstration: Two-column div structure using Dreamweaver

I demonstrate how to build a 2-column structure in Dreamweaver, use a combination of absolute and relative positioning, and use compound selectors for styling a web page . You can download the entire demonstration in one m4v movie file you can play in QuickTime (128MB). (You can right-click to download to your desktop). The video is large and easy to watch. In order to view this file, you’ll need the QuickTime Player installed on your computer. You can download the free QuickTime Player on the Apple site.

It’s a whopping 128 MB because it is 40 minutes, so you will need a fast connection speed to download.

Midterm Project: Due April 29

You should have the following completed by our class today Thursday, April 22:

  • Research & competitive analysis for midterm project. Please post this to your process blog.
  • Design completed for your 2 pages. Please bring in your Photoshop files to our class.

The midterm project web site specifications are:

  • home page and landing page for a major section of the site.
  • A clear navigation system.
  • A successful sub navigation system.
  • A strong visual design and concept.
  • A theme and visual concept that carries through the site.
  • A design that works well on 1024×728 displays (i.e. navigation & primary content inside 990×560).
  • You must use mostly html text in the site.
  • You must use a column div structure. (Do not build your site completely in tables or completely with AP divs!)
  • You must use an external CSS file.
  • Completion of a site map.
  • Your research and competitive analysis for this project must be posted to your process blog.
More CSS
The Cascade

Charlie”s Simple Cascade Summary
(From our textbook on page 58)

  • Rule 1: Selectors with IDs override selectors with classes, these in turn, override selectors with only tags.
  • Rule 2: If the same property for the same tag is defined in more than one location in the Cascade — inline styles override styles embedded into head, which override style sheet styles. Rule 2 loses out to Rule 1 though– if the selector is more specific, it overrides, wherever it is.
  • Rule 3: Defined styles override inherited styles, regardless of specificity.

Huh? …. I bet you’re a bit confused. This is tough stuff to wrap your head around — but it WILL  get easier with more experience.

Inline: To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a paragraph:

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

Generally speaking we can say that all the styles will “cascade” into a new “virtual” style sheet by the following rules, where number four has the highest priority:

  1. Browser default
  2. External style sheet
  3. Internal style sheet (in the head section)
  4. Inline style (inside an HTML element)

Now, let’s look at specificity:
Moving from top to bottom, we move from low specificity to high specificity.

body p#largetext
body p#largetext ul.mylist
body p#largetext ul.mylist li
Inherited Styles in Nested Tags

(From our textbook page 79)
Nested elements inherit properties from the elements they are nested within.

For example:

<div id="quotes">
<p>“My husband and I always wanted to visit Roy’s in Downtown LA. Specials offered this week gave us a
good excuse. The filet with  lobster...”<span>READ MORE</span></p>
#quotes p {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.8em;
color: #94cfe3;
line-height: 1.5em;

.more {
font-size: 1.0em;
color: #000;
font-weight: bold;

So therefore, if you have one element’s font-size defined as 1.8 ems and the nested element’s font-size defined as 1.0 ems — the actual size will be displayed as 1.8em x 1em = 1.8em.

If you want the “.more” class text to display at 1.0 em, you need to define it the font-size as .55em (1.0 divided by 1.8=.55em.)  Oddly enough, .55em will actually display as 1.0 em.***

*** This may seem like a bit of a hack…we will continue to run into these kind of issues, especially when creating navigation using the list <li> tag. So these issues aren’t going away. We need to talk about child-selectors and other more advanced issues.

Here’s more information on CSS inheritance.

A note about line-spacing using ems
If line-height is set with relative unit (like em or percentage), line-height is always computed from the element’s font-size, whether the sizing is explicitly specified for the given element or simply inherited by a cascade.

For example:
font-size: 12 px
line-height: 16 px

If one’s attempt is to set the 16px leading, then she should divide the 16px with the 12px font size. That simple calculation would result in 1.333em (or 133.3%).

Above information from our textbook Stylin' With CSS and

Embedding swf file (Flash movie) into HTML page
How to insert a SWF file

1) Define your site by going to Site > Manage Site (or New Site) and defining the local root folder by selecting the folder where your local files live. (See notes below.*)

2) In the Design view of the Document window, place the insertion point where you want to insert the content, then do one of the following:

  • In the Common category of the Insert panel, select Media and click the SWF icon .
  • Select Insert > Media > SWF.

3) In the dialog box that appears, select a SWF file (.swf).
A SWF file placeholder appears in the Document window.

4) Save the file.

Important Notes:
Dreamweaver informs you that two dependent files, expressInstall.swf and swfobject_modified.js, are being saved to a Scripts folder in your site. Don’t forget to upload these files when you upload the SWF file to your web server. Browsers can’t display the SWF file properly unless you have also uploaded these dependent files.

* To ensure your Scripts folder gets saved to your local files, be sure to define your site using Site > Manage Site. By defining your local files, Dreamweaver will know where the files live on your computer. If you define your site, your Scripts folder, and the links to the expressInstall.swf and swfobject_modified.js in your HTML file, will be saved correctly.


Sorry, but comments are currently closed.

About Author


Instructor for Graphic Design 67