By: Sheri German
Page 1 of 4
If you read the first part of my Teaching Dreamweaver the Web Standards Way series, you may remember that I started the students on their CSS journey by having them do a hybrid CSS/table layout. A couple of semesters ago, I took the plunge. I dispensed with this preliminary step and took a "leap of faith" into the world of pure CSS layouts.
There is a concern among educators that web design is often being taught poorly—even at the college level—and without regard for standards. In some cases it is because the instructor has not updated her skills since the turn of the century. In other cases it is because there is a perception that it is too hard to teach and learn CSS. Yes, it is true that one must go slowly, start simple, and build skills in a systematic way. Still, after some experimentation and a few of my own lessons learned the hard way, I came up with some beginning exercises that seem to instill the essential concepts without overwhelming the students. In this series I would like to share some of these lesson plans with my fellow educators who, like me, would like to start their students out with "best practices".
Each lesson plan includes step-by-step exercises along with the starter and completed example files for each.
This series will culminate in a final site that the students will build over the course of four lessons:
- Lesson one: construct a simple "in the flow" page, float images, and divide a page into sections or divs
- Lesson two: learn to create the look of two columns first by using absolute positioning and then by floating a div
- Lesson three: flesh out the basic layout with design, type, and color; learn to use various kinds of selectors such as descendant selectors, pseudo selectors, and IDs.
- Lesson four: turn the basic layout into a template, create several new pages based on the template, and learn how to extend skills by adding gradient background images, centering the layout, and adding some code to keep the clearing of the image from clearing the floated left column as well.
In this first tutorial in the series, the students will construct a simple page, learn to wrap text around an image, and learn how to divide the page into a series of divs that will later provide the hooks for positioning page areas with CSS.
Tip: It is highly recommended that students learn some basic HTML
before using Dreamweaver's visual view. Because the design of documents now
goes into the CSS, learning HTML is easier than it used to be in the days when
you had to remember how to code all those attributes such as align and bgcolor.
Start with a Simple Page
We start with a very simple page that contains elements that conform to the natural flow of the document. This would be a good moment to discuss the two ways in which browsers render content: as inline or block elements. If you need help in explaining the difference between them, you can read John Gallant and Holly Bergevin's How Inline Elements Work - Part One.
It is assumed that you have taught the basics of the Dreamweaver interface, how to access panels under the Window menu, and how to insert simple elements on the page using Dreamweaver's visual tools.
The image below shows a page with some basic content, some navigation links, and some standard footer information.
Image 1: Start with a simple document
You can either use the simple_page.html file that is included in the tutorial download as a starting point, or you can have the students build it themselves.
Warning: Later, when the students do the positioning exercises, they'll change the order of the content and navigation areas. For now, make sure the navigation list is beneath the content area. There is a specific educational purpose to the initial order.
I try not to distract the students by asking them to provide their own text in a first CSS layout. I use the Lorem and More extension by David Powers to allow students to quickly insert a few paragraphs of a Shakespeare sonnet as the text for the page. I even have the students install the extension themselves to give them the experience.
Once the extension is installed, you can have the students insert 3 or 4 paragraphs of Shakespeare text to a new document. You can have them leave the doctype at the Dreamweaver default: XHTML 1.0 Transitional.
Image 2 : Add a few paragraphs to the page by using the Lorem and More extension
You can then have the students add a first level heading for the name "William Shakespeare", and pull a phrase of text out of the poetry to create a second level heading. After they add some dummy links (each within a paragraph element) and some copyright information, they're ready to go.
The first step-by-step exercise introduces the concept of floating and clearing images, a technique that they will encounter again when they learn to float columns in part two of this series.