dynamic HTML : 

Dynamic HTML (DHTML) is the general term for a suite of new HTML features available in the 4.0 and later web browsers. These features enable the web designer to control the web page layout and formatting, to a greater degree than was possible with previous versions of HTML. This control includes:

• The definition of formatting styles that can be applied anywhere in a web site
• When a style is updated, the changes take affect throughout the web site
• Elements on the web page can be positioned with pixel accuracy on the page
• Elements on the web page can be hidden and shown interactively
• Elements on the web page can be animated

CSS - style definitions applied across a document or entire site

Cascading Style Sheets (CSS) are definitions that can revise the style of an existing tag, or define a new style that can be applied to other tags, with complete control over text format. A style sheet can be inside a web page, or it can be an external file which all the pages in a web site link to. This linking is very powerful, because it enables the web designer to revise the external style sheet and see the changes automatically reflected across the entire site.

a way to position content on a page

Layers are boxes that can be positioned anywhere on the page, and contain anything that can be put in a normal web page. Layers can

• Be positioned with pixel accuracy, in relation to the upper left hand corner of the web page, or in relation to another layer.
• Contain anything, including text, links, gifs, animated gifs, and jpegs.
• Have a stacking order, so that elements in a layer can be in front of, or behind elements in another layer.
• Can be shown or hidden.
• Can have their position changed over time.

JavaScript is a programming language that is interpreted by the browser. This language can control elements on the page, and respond interactively to the user. JavaScript is a computer programming language, and is beyond the scope of this course. Fortunately, applications like Dreamweaver can automatically write JavaScript for you. Some things that can be done with JavaScript are:

• Perform rollover image replacement for buttons.
• Validate data being entered in a form, before the form is sent to the server.
• Show and hide layers.
• Animate layers

Cascading Style Sheets (CSS) are part of DHTML (Dynamic HTML) introduced in the 4.0 browsers. They enable the web designer to create text styles with characteristics such as font, size, and color. For example, the following text is enclosed in a new style class called "coolstyle" which has the following characteristics defined: font, size, bold, text color, background color, and underline.

Another example is on this page, which shows how the <A> tag for links has been redefined using css to have no underline.

Link to Apple article on problems with CSS in Microsoft IE

Cascading Style Sheets are style definitions that can revise the style of an existing tag, or define a new style that can be applied to other tags, with complete control over text format. A style sheet can be inside a web page, or it can be an external file which all the pages in a web site link to. This linking is very powerful, because it enables the web designer to revise the external style sheet and see the changes automatically reflected across the entire site.

• Styles Sheets can redefine existing tags. For example, the <p> tag could be made to use the Trebuchet font with a 12 pixel height (this is the case for the paragraphs on this page).
• Style Sheets can define new styles which can be applied to any text selection. This is the case with the <span class="coolstyle"> tag above, where the font, text color, background color, and underline are defined with a single style.
• The attributes of Style Sheets goes beyond the normal styling of HTML to include line height, leading, indent, background color or image for the styled selection, text weight, borders, and even page breaks for printing (but not all of these features are supported in all browsers).
• Many of the styles defined in the CSS1 specification are not displayed properly inside Dreamweaver, and must be viewed in Netscape or Explorer.
• And of course, several of the style attributes display differently in Netscape and Explorer, or do not display at all in any browser.

The definition in the <head> section for coolstyle is:

One method for applying the style to text is:

<span class="coolstyle">text to be be styled</span>

1. Select TEXT>CSS STYLES>EDIT STYLE SHEET...
2. To create a linked style style sheet in an external file, do the following, otherwise, skip to number 3 below
   1. Select LINK
   2. Give the new external style sheet a name, and use the .CSS suffix
   3. Select OK
   4. The linked style sheet will appear in the list of styles
   5. Double click on the new external sheet to open the styles for it
   6. Continue with #3 below
3. Select NEW
4. To redefine an existing tag, select REDEFINE HTML TAG, and select the tag from the pull down menu
5. To create a new tag, select MAKE CUSTOM STYLE, and give the new tag a name using the following rules:
   1. it should begin with a period
   2. the case of the characters is ignored
   3. it can contain only the characters A-Z, a-z, 0-9, and the dash "-"
   4. the underscore "_" and space " " characters are not allowed
   5. style names not following these rules will be ignored in some browsers
   6. for more information see http://www.w3.org/TR/REC-CSS2/syndata.html#q4
6. Select OK, and a dialog box will open with a series of formatting settings for TYPE, BACKGROUND, BOX, BORDER, etc. More information about each of these Style Definitions is available in the Dreamweaver Help.
7. Use the APPLY button to see how your style will look in your document (assuming the style is already applied somewhere)
8. Select OK from the Styles dialog box
9. Select SAVE if you are editing an external style sheet, or select DONE to complete the editing process

1. If you've modified a standard HTML tag with a new style, the style will automatically apply, and there is nothing to do beyond setting that tag in the normal way.
2. If you've created a new style, then:
3. Open the CSS STYLES window
4. Select the text you want to apply the style to and:
   1. Click on the desired style in the CSS STYLES window
   2. OR, you can do this by selecting TEXT>CSS STYLES>style
   3. OR, you can do this by using a right-clicking (pc) or control-click (mac) and selecting CSS STYLES>style

Note: CSS styles may not apply as expected to text inside of tables. You should preview in both Netscape and Explorer to verify that the text is formatting correctly. If not, you may have to apply the style to the table or the text within the table.

Note also that you can convert (in most cases) a web page with style sheets to traditional, HTML 3.0 compatible format by selecting FILE>CONVERT>3.0 BROWSER COMPATIBLE, and selecting CSS STYLES TO HTML MARKUP. Dreamweaver will create a new page that is as close as possible as the original, but that uses only HTML markup. Note that some CSS formatting (such as leading) cannot be converted to standard HTML.

Many websites now use links that display no underline, but when the user rolls over the link, the underline shows. This is achieved using the "hover" feature of CSS.

1. Select TEXT>CSS STYLES>EDIT STYLE SHEET...
2. Select NEW
3. Select USE CSS SELECTOR
4. Select SELECTOR>a:hover
5. Select OK and then select text decoration>underline or whatever changes you want in the hover state.

An interesting alternative to the underline is to set the hover state to have a dotted underline. To do this, don't use text decoration>underline, instead:

1. Go to the BORDER section
2. Uncheck all the SAME FOR ALL
3. Set the bottom border style to dotted, width 1 pixel, and color to your choice.

all materials on this web site © copyright 2003, Philip van Allen