Lesson 3. Creating the Presentation Layer

In the past, when designers were developing static HTML pages, they would often copy and paste several pages of plain text into Dreamweaver, and then go about the task of marking it up to make it presentable. In other words, roughing out the content preceded much of the design work, which came only at the end of the process.

In a way, that workflow is turned on its head when working with dynamic Web sites. The content that users see when they visit your site is often added to the HTML pages in the split second between the request for the page and its appearance in the browser. That means that you have to create your designs with placeholder content. In the dynamic Web site development workflow, then, you deal with design and presentation issues up front, and let the server model (ASP, ColdFusion, etc.) pour the right content into it.

Use the improved CSS Styles panel to manage all your CSS styles, whether they're redefined HTML tags or custom CSS classes.

graphics/03fig01.gif

After completing this lesson's tasks, you'll have specified nearly all of the stylistic and design information used in the Newland site. A few issues will come up during the application development stagesthey always dobut by and large you'll nail down the main graphic design decisions by the end of this lesson. The most important task is to create and apply a cascading style sheet, which controls most of the presentation issues in the site. In a related exercise, you'll also create an all-purpose page template that you can use as the basis for any new pages that you'll need to add to the site.

WHAT YOU WILL LEARN

In this lesson, you will:

  • Create and apply a cascading style sheet to the site

  • Build a reusable template for all new pages added to the site

  • Enhance each page's accessibility with a hidden navigation layer

APPROXIMATE TIME

This lesson takes approximately one hour and 15 minutes to complete.

LESSON FILES

Starting Files:

Lesson03/Start/newland/about.htm

Lesson03/Start/newland/contact.htm

Lesson03/Start/newland/index.htm

Lesson03/Start/newland/profiles.htm

Lesson03/Start/newland/tours.htm

Completed Files:

Lesson03/Complete/newland/about.htm

Lesson03/Complete/newland/contact.htm

Lesson03/Complete/newland/index.htm

Lesson03/Complete/newland/generic_template.htm

Lesson03/Complete/newland/profiles.htm

Lesson03/Complete/newland/tours.htm

Lesson03/Complete/newland/css/newland.css