:: tutorials ::


bookThe textbook for the class has a lot of great information. Dreamweaver CS4 Digital Classroom (Paperback) by Jeremy Osborn, ISBN: 0470410922.

Tutorials

Click on the links below to download files needed to complete the tutorials. For tutorials in your text books, only the files are provided; you will still need your book to know what to do.

xhtml coding

> xhtml 1: Introduction (main headings, text, images) (156k)
> xhtml 2: Linking, file management and tables (108k)
> xhtml 3: Cascading style sheets (672k)

CSS

Below are some examples of useful CSS. To see the style sheets embedded in the code, view the source code in your browser (usually in the menu at the top of the browse: "view > page source").

wrapping text: frequently, you may want to have body text flow around an image with a caption beneath it. By creating a class that contains the attributes "position" and "float"
> view html

navigation rollovers: when you hover over a link, the background changes. To see the style sheet, view the source code in your browser (under the view menu).
> view html for background color change
> view html for background image change

styling text sample file of how to style text in a box using css.
> view basic css styling (view source code to see style)
> view advanced css styling | view style sheet

Adjusting attributes of an ordered list: sample file uses CSS to make the numbers of an ordered list bold and a different color.

> view html (style is in the head of the document)

LAYOUT WITH CSS
Sample files that use id selectors to create a layout, instead of using tables.

simple version:
> see the 2-column layout | see the style
> see the 3-column layout | see the style

2-column layout with an expandable sidebar:
> see the layout | see the style

complex version:
> see the layout without the style
> see the the layout with the style
> see the style

Confining scrolling in a container to the y-axis only.
> css is in the head of the document (view source code)

Styling a scrollbar for Internet Explorer
> css is in the head of the document (view source code)
> web site that explains how

Shadows for containers
Here's a way to add a subtle shadow to a container, using CSS instead of Photoshop.
> See the page (view the source code for the style, which is in the head of the document)

Semi-transparent window for Quicktime Movies
Here's a way to load a quicktime movie onto your page with a semi-transparent window that covers the rest of your content. It uses javascript and css.
> See the page
> See the tutorial that explains how to do it