Lesson 2: Content, Structure, Presentation, and Behavior


Earlier in this course you learned to control the presentation of your web content using Cascading Style Sheets (CSS). In this lesson, you will learn how to control web page presentation using your web authoring software. Some web authoring software provides direct support for CSS, while other products handle presentation in other ways. which may or may not be compliant with web standards. Which category does your web authoring software fall into? How could its support for CSS be improved?

Learner Outcome

At the completion of this exercise, you will be able to:

Examples of Style Techniques in Common Web Authoring Tools

Adobe Dreamweaver CS5.5

CSS is integrated tightly into Dreamweaver, so there are many ways to define and edit styles and assign them to various elements on the page. Here are a few tips:

Snapshot of CSS Styles panel in Dreamweaver CS5


Like Dreamweaver, KompoZer includes a dialog box from which you can create CSS style definitions by selecting values for various properties. As of version 0.8b3, this feature is accessed from the main menu by selecting Tools > CSS Editor.

After you've defined CSS classes, these appear in a dropdown list on the toolbar, so they can easily be assigned to any element just by selecting the element, then choosing the desired class from the toolbar.

Below is a screen shot of the CSS Editor in KompoZer:

Snapshot of CSS Editor in KompoZer

Other Web Authoring Software


All done?

Share your newly stylized portfolio home page with your instructor. Be prepared to explain to the instructor which styles you changed and how, in order to attain the current look and feel of your web page. When you're finished, proceed to the next lesson.