Server-Side Authentication

Click the "Join the Mailing List" image on the main page to see this. I used my .htaccess file from the in-class exercise and it allows my DCE username and dan/409.

Server-Side Includes

The date the page was modified is inserted on the bottom of every page. I included a "bottom.txt".

CSS

There are two stylesheets: one for Macintosh IE and the other for Windows IE/Mozilla and Netscape Mozilla. They are virtually the same with a few alignment changes.

JavaScript

I incorporated my own JavaScript file with various scripts that I wrote for the mouseover buttons, the pop-up form, and validation on the form.

DHTML Component

I used one on my main page to shake the "Join the Mailing List" image. I borrowed the code from Dynamic Drive and incorporated it in my CSS and JavaScript files.

Contact Form

When you click the "Join the Mailing List" image on the main page, the form is brought up. I used JavaScript authentication for the "name" field and the CGI I made in class.

Netscape 4

The user's browser prompts them and redirects them to mozilla.org if they are using Netscape 4.

This line controls the position of the DHTML image.

.shakeimage{ position:relative; }

This line sets the active link style to size 10pt/12pt verdana sans serif, the color to red and underlined.

a:active { font: 10pt/12pt verdana, sans-serif;color:#990000; text-decoration:underline; }

This line sets the hover link style to size 10pt/12pt verdana sans serif, the color to black.

a:hover { font: 10pt/12pt verdana, sans-serif;color:#000000; text-decoration:none; }

This line sets the link style to size 10pt/12pt verdana sans serif, the color to black and underlined.

a:link { font: 10pt/12pt verdana, sans-serif;color:#000000; text-decoration:underline; }

This line sets the visited link style to size 10pt/12pt verdana sans serif, the color to red and underlined.

a:visited { font: 10pt/12pt verdana, sans-serif;color:#990000; text-decoration:underline; }

This line sets the body position to absolute with no margins, sets the width to 100%, sets the padding to 0, centers the text inside of it, and makes the background blue.

body { position: absolute; margin:0px 0px; width: 100%; padding:0px; text-align:center; background-color: #006699;}

This line defines a new ID for the top table that has relative positioning, a width of 100%, a height of 100 pixels, no top space, auto margins, a black background, no padding, and centered text.

#top { position: relative; width: 100%; height: 100px; top: 0px; margin:auto; background-color: #000000; padding:0px; text-align:center;}

This line defines a new ID for the nav table that has relative positioning, a width of 100%, 15 pixels of space on the top, a 40 pixel height, 15 pixels of space on the bottom, a blue background, and no padding.

#nav { position: relative; width: 100%; top:15px; height: 40px; bottom:15px; background-color: #006699; padding:0px;}

This line defines a new ID for the content table where all the text is. It has relative positioning, 25 pixels of space on the top, a width of 100%, a height of 400 pixels, auto margins, a white background, a 3 pixel solid black border, no padding, an auto overflow for a scrollbar, centered text, and a colored scrollbar.

#content { position: relative; top:25px; width: 100%; height: 400px; margin:auto; background-color: #FFFFFF; border:3px solid black; padding: 0px; overflow: auto; text-align:center; scrollbar-face-color: #004A6E; scrollbar-shadow-color: #000000; scrollbar-highlight-color: #3399CC; scrollbar-3dlight-color: #3399CC; scrollbar-darkshadow-color:#003366; scrollbar-track-color: #000000; scrollbar-arrow-color: #FFFFFF;}

This line defines a new ID for the bottom table. It is relative positioned, has 12 pixel/14pixel verdana text, black color, 30 pixels of space on the top, a 700 pixel width, a 75 pixel height, auto margins, and no padding

#bottom { position: relative; font: 12px/14px verdana, sans-serif;color:#000000; top:30px; width: 700px; height: 75px; margin:auto; padding: 0px;}

This line defines a new ID for the text that is in the content table. It is relatively positioned, has 12 pixel/14 pixel verdana text, black color, auto margined, 20 pixel padding, and all text is alinged left.

#text { position: relative; font: 12px/14px verdana, sans-serif;color:#000000; margin:auto; padding: 20px; text-align:left;}

This line redefines the HTML h1 tag. It sets it to 30 pixel bold verdana, aligned left with no padding.

h1 { font: 30px/30px verdana, sans-serif;font-weight: bold;color:#000000; padding: 0px; text-align: left;}

This line redefines the HTML li tag. It changes the list type to square.

li { list-style-type: square; }

This line defines a new style class for large text that is 14 pixel bold verdana with 10 pixels of padding.

.large { font: 14px/18px verdana, sans-serif; font-weight:bold; padding-right: 10px; }

This line defines a new image class which pads everything it contains 20 pixels on the right.

.image { padding-right: 20px;}

This line defines a new photos class which aligns everything to the center that it contains.

.photos { text-align:center; }

This line defines a new class which adds 5 pixel margins to everything it contains.

.image2 { margin: 5px 5px 5px 5px; }

This line defines a new ID which positions the first item on the shop page.

#item1 { position:absolute; top: 50px; left: 85px; text-align:center; }

This line defines a new ID which positions the second item on the shop page.

#item2 { position:absolute;top: 50px; left: 285px; text-align:center; }

This line defines a new ID which positions the third item on the shop page.

#item3 { position:absolute;top: 50px; left: 435px; text-align:center; }