dynamic HTML/CSS : 

Dynamic HTML (DHTML) is the general term for a suite of 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, border, 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.

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>NEW...
2. To create a linked style style sheet in an external file, do the following, otherwise, skip to number 3 below
   1. Select DEFINE IN... (NEW STYLE SHEET). When you say OKAY, you will be taken to a file dialog where you will define the external style sheet. Name this file with a ".css" suffix.
3. OR, select DEFINE IN...THIS DOCUMENT ONLY
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 it will now be available in the property inspector under the STYLE pull-down. To apply the style, select the text you want in that style and pull down the the style and pick the one you want.
3. To Edit a style that you've made, open the CSS Styles palette, and select the style you want to edit, and click on the pencil icon at the bottom right of the palette.

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.

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>NEW...
2. Redefine the A tag to have Text Decoration set to None
3. Then TEXT>CSS STYLES>NEW... again
4. Select ADVANCED
5. Select SELECTOR>a:hover
6. 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, follow the above instructions but 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.

Create a simple two page web site that has an external style sheet, and uses the CSS styles in both web pages.

1. Create two pages with a variety of text: headers, body text, links, etc.
2. The first page should be a menu page for your account on the Academy web site.
3. The second page should be a simple resume.
4. Create a new external style sheet with a suffix of ".css"
5. Modify some standard HTML tags, e.g. change the <a> tag to create links without any underlines.
6. Create some new css styles
7. Be sure both pages are linked to the external style sheet
8. Apply the styles to text within the pages
9. Preview the pages in browsers
10. Then change the styles to in the style sheet, and preview in a browser to verify that both pages update with the new styles
11. Upload the web site to your account on the Academy server. Don't forget to upload the external CSS file as well.

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