As with most scripts, stlye sheets are normally called for in the HEADING of you document. You may find it easiest to develop one style sheet and call it by its name using the <link rel=stylesheet type="text/css" href="nameoffile.css"> method. A style sheet must be ASCII text without HTML commands.
You may use any name you wish as long as you use the .css extension.
<STYLE TYPE="text/css">
<!--
BODY {font-size: 12pt;
font-family: "Times New Roman";
line-height: 16pt}
margin-top: 0px;
margin-left: 0px;
margin-bottom: 0px
H1 {font-size: 20pt;
font-family: Arial;
}
H3 {font-size: 14pt;
font-family: Arial}
font-family: "Arial";
font-weight: bold;
line-height: 0pt;
}
H2 {font-size: 15pt;
font-family: "Arial";
font-weight: bold;
line-height: 0pt;
margin-top: 30pt;
color: 9966cc}
P {font-size: 12pt;
font-family: "Times New Roman";
line-height: 16pt;
text-indent: 12pt;
margin-top: 6pt}
PRE {font-size: 10pt;
font-family: "Courier";
line-height: 14pt;
color: red}
A {text-decoration: none}
-->
</STYLE>
YOUR DHTML STYLE SHEET
Now that you have a style sheet to work with, you need to know what each section does and why it is necessary to include it.
The style sheet opens with:
<STYLE TYPE="text/css">
As far as we know this is the only way to tell the browser that your page is using a style sheet. All of the commands in your style sheet are included between the style sheet tag pair
(<STYLE TYPE="text/css"> and the </STYLE>).
Also included with the style sheet is the comment tag pair.
The comment section looks like this:
<!--
By adding the comment tag pair you hide your script from older browsers. It isn't required to use the comment tag, but your visitors with older browsers will appreciate it when you do. So make it your practice to include it. The complete comment tag comes after your style sheet opening tag and before your closing tag and looks like this
(<!-- and the -->).
Thus far your style sheet would have:
Your command content and attributes will fall in between the comment tag pair.
The BODY section instructs the browser how to render <BODY> tag in the pages included with your HTML. It only effects this section of the document. The commands and attributes that fall between the curly braces ({ and }) are executed once the browser detects the opening BODY tag.
BODY {font-size: 12pt;
font-family: "Times New Roman";
line-height: 16pt}
margin-top: 0px;
margin-left: 0px;
margin-bottom: 0px;
}
Our first command and attribute specification is:
BODY {font-size: 12pt;
It is important to recognize that this DHTML differs from HTML by including a hyphen between the font and size. The attribute specifies the point size of the text that will be rendered. Also notice the curly brace is used to begin the instruction. Be sure to use it.
Our next command and attribute specification is:
font-family: "Times New Roman";
Again this specification instructs the browser to use a specific font, you may include additional font type by adding a comma between the names of the fonts.
line-height: 16pt}
Sets the height of the lines of text.
margin-top: 0px;
Sets the margin at the top of the page
margin-left: 0px;
Sets the margin at the left of the page
margin-bottom: 0px
Sets the margin at the bottom of the page
}
Ends the first instruction of the browser.
Your command content and attributes will fall in between the comment tag pair.
YOUR DHTML STYLE SHEET
Our HEADING section looks like this:
By now you understand that this section is instructing the browser how to render <H1> and <H3> heading tags in your HTML. Of course you could of specified H2 or any of the other heading commands. But with this example the commands and attributes allow you to set aside other headings to suit your purpose later.
Our first instruction to the browser is the font-family and we use it in both heading levels:
font-family: Arial
This font will be used if the font is resident on the users system. Otherwise the default font will be used.
Then we call for the color of the heading:
color: 9966cc}
Here we can use any hexadecimal font color or the sixteen preset color choices that are available to us as web page designers. Specifying one color again helps to keep our work consistent.
Additional commands in the H3 section
font-weight: bold;
In the H3 section of the code we threw in twist. Of course it is simple to understand that it will add pixels to the text within the H3 mark-up, which is not necessary within the H1 heading.
line-height: 0pt;
This is the second time we have used the line height command, but this time we are ordering that nothing be added to the height of the lines.
Finally we come to color again. This could of been a different color since it is a new section. That completes the heading section.
You are probably familiar with the <P></P> commands the begin and end your paragraphs. DHTML gives you control over the rendering, including the font, font-family, indent of the first sentence, and margins.
Our paragraph section of the script looks like this:
P {font-size: 12pt;
font-family: "Times New Roman";
line-height: 16pt;
text-indent: 12pt;
margin-top: 6pt}
ELEMENT & DECLARTION
The element in the code above is the <P> tag pair. What we have done is declared in our code that each time the browser encounters the <P> tag it will render the text as declared in the DHTML script. The same was true of all of the code before, but we felt throwing in too much jargon at the beginning would make learning DHTML more difficult. For now understanding elements (the code that is to be effected) and declarations (the rendering instructions) is sufficient.
HTML gave us little controlover white space in a document with the exception of the PRE tag pair, which for the most part would display additionalv word spacing (2 character spaces are the norm) and multiple line spaces.
Our PRE section of the script looks like this:
PRE {font-size: 10pt;
font-family: "Courier";
line-height: 14pt;
color: red}
Not much new here but we are specifying the text color display and the Courier font, instead of the standard typewriter text that is the default for the PRE tag pair.
EXAMPLES
STANDARD PRE TEXT TYPE
PRE USING STYLE SHEET
The examples above give you a nice visual to compare of how the rendering will make a difference in your document and some of the power DHTML gives you over your typography.
The Last part of our DHTML script deals with how the links will be rendered.
Our A(nchor) section of the script looks like this:
A {text-decoration: none}
This instruction tells the browser whether to include the standard underlining or not. You may also choose to have your links change color, underline when the link has the mouse over it (mouseover) or a combination of elements and declarations. This is what we chose for our navigation menu:
SAMPLE FROM OUR MENU
A {text-decoration: none;
color: #0000ff;}
A:hover {text-decoration: underline;
color: #ff0000;}
By adding the hover to your style sheet you will be able to show link changes without having to do a JavaScript image swap. Thereby speeding the display and making your web page more dynamic.
COMPLETING AND
USING DHTML STYLE SHEETS
Something like the example below will work fine:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
<TITLE>YOUR DOCUMENTS TITLE</TITLE>
<META NAME="Author"CONTENT="YOUR NAME, you@yourserver.com">
<META NAME="Copyright" CONTENT="YOUR NAME AGAIN">
<META NAME="keywords" CONTENT="THE KEYWORDS THAT RELATE TO YOUR WEB PAGE">
<meta name ="description" content="THE DESCRIPTION THAT RELATES TO YOUR WEB PAGE">
<meta name="resource-type content=""document">
<meta name="distribution" content="global">
<link rel=stylesheet type="text/css" href="yourstylesheet.css">
</HEAD>
<BODY>
<H1>YOUR OPENING HEADING</H1>
<P>YOUR TEXT</P>
<H3>YOUR SECOND HEADING</H3>
<P>SOME MORE TEXT</P>
<A HREF="yourfavoritesite.com">THE NAME OF YOUR LINK</A>
</BODY>
</HTML>
<Div> & <Span>
In DHTML, you manipulate elements. An element is any group of HTML tags. An element could be a link, an image, some text, or a mixture of all three. You group an element with the <div> or <span> HTML tags. The <div> tag is used for a block style element, such as a paragraph of text or an image. The <span> tag is used for inline elements, such as a certain word, or a link.
To create a page which has an image appear, who's position is defined in pixels from the edge of the screen.
This is called absolute positioning. The source is shown below (the line numbers are for illustration only:
As you can see, this uses the <div> HTML tag on line 03. Use of the <span> tag is very limited when using absolute positioning. It can be used, but is generally bad programming practice.
The above programming actually uses no DHTML at all; it just uses a mixture of HTML and CSS. Below is an example of using DHTML. (REMEMBER: This will only work in IE4 or above)
This example has a button which will display a piece of text on the screen when clicked.
Line 03 to 05.
These lines create an element containing the text "Hello!". The properties inside the <div> tag describe how the element will behave. The id property gives the element the name "hideme". The id allows the JavaScript to manipulate the element. This is the basis of DHTML. The contents of the style property sets the element's position as (25,25), and the visibility: hidden part makes it invisible.
Line 07:
This line designs the button. It uses the onClick event to execute the command document.all.hideme.style.visibility="visible". This is how Internet Explorer 4.0+ manipulates elements in its version of JavaScript/DHTML. The syntax is as follows:
document.all.id.style.attribute
replacing id with the id of the element, and replacing attribute with the attribute you wish to affect. We will have a more in-depth look at this later in the tutorial. As you know, in CSS2 (the most modern form of style sheets) you can use the visibility attribute to make the element invisible. This line sets the element's display attribute to "visible", making it appear when the button is clicked.
Using DHTML to position elements
The main use of DHTML is to control where HTML elements are placed. The method used to make the heading slide in from the right hand side is implemented using DHTML on this page. To do this:
<script>
<!--
position_left = 800;
function moveLeft(){
if(position_left > 10){
position_left -= 10;
document.all.heading.style.left = position_left;
setTimeout("moveLeft()",1);
}
}
//-->
</script>
</head>
<body onLoad='moveLeft();'>
<div id="heading" style="position: absolute; top: auto; left: 800;">
Hello
</div>
<!-- ... -->
The heading "Hello" starts on the right hand side of the screen, 800 pixels from the left hand side. Once the page has loaded, the moveLeft() function is called. This checks to see how many pixels the heading is from the left of the screen, which is stored in the position_left variable. If it is more than 10 pixels from the left hand side, then the function takes 10 from the position_left variable. It then places the heading at position_left pixels from the left hand side of the screen. This again uses Internet Explorer's syntax for manipulating elements:
document.all.id.style.attribute
In this case, the id is heading, refering to the element in the <div id="heading"></div> tags, and attribute is left, which is the CSS notation for how many pixels to the left of the screen.
If you want to use DHTML for your website, these attributes will become almost as familiar as the <div> and <span> tags. Put simply, these are used with absolute positioning, to put an element in its place.
The top refers to the number of pixels to the top of the page from the element. (Note: if you have frames in your site, Top refers to the top of the frame, not the browser window). Left refers to the number of pixels from the element to the left hand side of the page/frame. They are used when the element is absolutely positioned; i.e. with the position: absolute style inside the style tags.
For example, if you had a dynamically positioned element with the id "chicken", and if you wanted to place it 20 pixels from the left, and 100 pixels from the top using DHTML, you would write:
document.all.chicken.style.top = 100;
<!--
position_left = 800;
function moveItemLeft(){
if (position_left >= 10;){
document.all.head.style.left = position_left;
position_left -= 10;
setTimeout("moveItemLeft()",1);
}
}
//-->
</script>
<!-- rest of page here -->
<div id="head" style="position: absolute; top: auto; left: 800;">
Heading Goes Here
</div>
To start the animation, call the function moveItemLeft();
Image Rollovers Using DHTML
Create A Light Up Menu
An image "rollover" is where you swap two images based on an event. The event we are going to use is based on when the mouse pointer enters the image.
Images in DHTML are accessed using the following syntax:
document.images['imagename'].src
where imagename is the name specified in the <img> tag, as follows:
<img src="myimage.gif" name="imagename">
One of the most popular uses of image rollovers is in a menu, highlighting the menu item passed over.
The code for this is shown below:
<p><img name="item1" src="item1w.gif" alt="Item 1"
onMouseover='document.images["item1"].src="item1o.gif";'
onMouseout='document.images["item1"].src="item1w.gif";'>
<br>
<img name="item2" src="item2w.gif" alt="Item 2"
onMouseover='document.images["item2"].src="item2o.gif";'
onMouseout='document.images["item2"].src="item2w.gif";'>
The events used are onMouseover and onMouseout, which are called when the mouse pointer enters the image or leaves the image respectively. The event calls one line of DHTML code, which accesses the image using the document object model, and changes the src property. (The SRC property is the location of the image file).
<html>
<head>
<title>Javascript Popups</title>
<link rel=stylesheet href="scripts.css" type="text/css">
</head><body onLoad= "window.defaultStatus ='';">
<table width="80%">
<tr>
<td>
<div ID="topdeck" style="position:absolute; visibility:hide;">
</div>
<script language="JavaScript">
<!-- Javascript Popup Routine by Mike McGrath (C)1999 - Email to : mikem@clara.net -->
<!-- Runs NAV4 & IE4. Free private use but keep this header information. Thank you -->
var count = 0;
var hand = 0;
nav = (document.layers) ? true : false;
ie = (document.all) ? true : false;
if (nav)
skin = document.topdeck;
if (ie)
skin = topdeck.style;
document.onmousemove = sustain;
if (nav) document.captureEvents(Event.MOUSEMOVE);
function pop(orientation,msg) {
content="<table width=130 border=0 cellpadding=2 cellspacing=0 bgcolor=navy><tr><td>"
+ "<table width=100% border=0 cellpadding=0 cellspacing=0><tr><td><center><font color="
+ "beige size=2><b>Javascript Popup</b></font></center></td></tr></table><table width="
+ "100% border=0 cellpadding=2 cellspacing=0 bgcolor=beige><tr><td><font color=black "
+ "size=2><center>" + msg + "</center></font></td></tr></table></td></tr></table>";
if (nav) {
var canvas = document.topdeck.document;
canvas.write(content);
canvas.close();
skin.visibility = "show";
}
else if (ie) {
document.all("topdeck").innerHTML = content;
skin.visibility = "visible";}
hand = orientation;
}
function sustain(e) {
var x = (nav) ? e.pageX : event.x;
var y = (nav) ? e.pageY : event.y;
switch(hand) {
case 0 :
kill();
break;
case 1 :
skin.left = x+10, skin.top = y+10;
window.status = "Left Popup";
break;
case 2 :
skin.left = x-60, skin.top = y+20;
window.status = "Center Popup";
break;
case 3 :
skin.left = x-135, skin.top = y+10;
window.status = "Right Popup";
break;
default:
skin.left = x+10, skin.top = y+10;
break;
}
}
function kill() {
if (count >= 1 )
var always=true;
if (always == true) {
hand = 0;
skin.visibility = (nav) ? "hide" : "hidden";
}
else
count++;
}
</script>
<table width="75%" border=0 align=right><tr>
<td width="33%" align="left" nowrap>
<a href="#" onMouseOver="pop(1,'Now Left');" onMouseOut="kill();">Left</a></td>
<td width="34%" align="center" nowrap>
<a href="#" onMouseOver="pop(2,'Central ');" onMouseOut="kill();">Center</a></td>
<td width="33%" align="right" nowrap>
<a href="#" onMouseOver="pop(3,'On Right');" onMouseOut="kill();">Right</a></td>
</td></tr></table>
</td></tr></table>