Instruction
Lecture Notes - Week 1
Lecture Notes - Week 2
Lecture Notes - Week 3
Lecture Notes - Week 4
Web Site Critiques
What you learned in DW MX 2004 HOT Chapter 3 Site Control.
What you learned in DW MX 2004 HOT Chapter 4 Basics.
What you will learn in DW MX 2004 HOT Chapter 5 Linking .
What you will learn in DW MX 2004 HOT Chapter 9 Cascading Style Sheets.
After the semester, this is what you should have learned in Web Page Design I Class.
Examples/Demos
Project Examples
Project 1 - Fame and Fortune (Framework) This incomplete example is from an in-class demonstration. It is really just a beginning to Project 1 without any concern for relevant content. This demonstrates that achieving the graded technical objectives for Project 1 may not necessarily line up with the arrangement of your selected content.
Previous Semester's (different from your Project 1) Project 1 - Resume (Ok, I used CSS. I can't help it!)
Project 2 - Link List Example 1 (This is like a mini web site.)
Project 2 - Link List Example 2
Project 2 - Link List Example 3
Get my Project #4 product images from this link.
Project 4 - E-commerce Site (see the file listing) Fall 2005 (Friday class. Currently, in progress.)
Project 4 - E-commerce Site (see the file listing) Fall 2005 (Saturday class. Currently, in progress.)
Project 4 - E-commerce Site From Spring 2005
If you are having trouble finding product images. You can use the product images I have on the E-commerce Project 4 Website (except for the banner image with the store name).
Below is a good starter for you index.asp page for Project #4.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>:: The GGB Store ::</title>
<link href="stylesheets/styles.css" rel="stylesheet" type="text/css" />
</head><body class="body-style-01">
<!--#include file="banner.inc.html" -->
<!--#include file="nav2.inc.html" -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top"><!--#include file="nav1.inc.html" --></td>
<td valign="top"><img src="images/salesposter.png" alt="sales poster" /></td>
</tr>
</table>
<!--#include file="footer.inc.html" -->
</body>
</html>
CSS Demo
Styled Page (index.html)Image Demo
Un-styled Page Version 1 (index-unstyled-v01.html)
Un-styled Page Version 2 (index-unstyled-v02.html)
Racing Stripe Background Image
CSS Style Sheet (style-sheet.css)
CSS Inspirational sites:
css.maxdesign.com.au for CSS, list, menu tutorials
CSS Zen Garden www.csszengarden.com
Sample Image
Demo of Flash Text, Image Transparency and Washed Out Background Image
Example Dreamweaver Generated Web Photo Gallery
Dreamweaver Generated Web Photo GallerySpecial Characters
Dreamweaver Generated Web Photo Gallery containing odd sized images
You can insert special characters by doing any of the following two methods.
Menu: Insert > HTML > Special Characters > [Choose a Special Character]
Insert Bar > Text (Category) > [At the end of the bar is a drop down list of special characters. Choose a Special Character]
Examples of special characters are copyright symbol, trademark symbol, left quote and right quote. There are other special characters.
Examples: “Left and Right Quote”, €, ©, ®, Java™
Marquee (News Ticker)
The scrolling text below was done using the <marquee> tag.Ways to Repeat Page Elements on Multiple Pages
<marquee>Hello Web Page Design Class</marquee>
You have a few options to repeat elements on multiple pages. Here is a list:
Frames
Server Side Includes
Dreamweaver Library Items
Dreamweaver Templates
Hard Coding
Server Side Include
This file has a Server Side Include for the copyright footer.Greeking (Lorem Ipsum)
<!--#include file="footer.inc" -->
See http://www.lipsum.com/ for an explanation of Lorem Ipsum or Greeking.
Accessibility
Web Content Accessibility Guidelines 1.0 http://www.w3.org/TR/WCAG10/
Techniques for Web Content Accessibility Guidelines 1.0 http://www.w3.org/TR/WCAG10-TECHS/
CSS Techniques for Web Content Accessibility Guidelines 1.0 http://www.w3.org/TR/WCAG10-CSS-TECHS/
HTML Techniques for Web Content Accessibility Guidelines 1.0 http://www.w3.org/TR/WCAG10-HTML-TECHS/
MS Office
MS Word Save As Web Page Result - fancy.html
MS Word Save As Web Page Result after clean up in Dreamweaver - fancy.html
Image of the Clean Up Word HTML Dialog Box in Dreamweaver
MS Excel Document saved as HTML
MS PowerPoint Document saved as a Web Page
Tables
Demo of Tables
Java
Java is a Programming language that can be placed on a web page and run using a plug-in. See www.java.com
Here is a web page that contains a Java program that creates abstract art images.
Students - Fall 2005
Students - Spring 2005
