CSC
111 - Lessons & Examples
Here are some samples and lessons on important concepts about
web design highlighting JavaScript and other basic concepts. Some
of the examples are relatively simple and are better viewed and
studied because they need little explanation.
Use the "View Source" on your browser or save them
to your hard drive for future reference. Others have more explanation
as may be necessary.
Each lesson provides at least one example designed to show a
concept or idea. Don't miss the point because of its implicit
simplicity. Others have complete explanations as well as examples.
I explained the concepts where important. Some of the more straight
foreword concepts are more "cut and paste", others are
more complete. You must lean at your own pace.
These lessons are in no particular order so you may work on each
individually depending on your needs and your interest.
HTML Lessons
Growing Text -
This is an example of dhtml that shows how it is possible to dramatically
change the size of text through the use of JavaScript, CSS and
an event handler.
Note: Works only in IE 4+ browsers.
Night and Day
- Through JavaScript and the JavaScript date object we create
a page that delivers different content depending whether it is
"night or day."
Day and
Night with Fireworks - Here is the same JavaScript programming
as above except this time we added DHTML fireworks.
Emboss
- Here we have an example of layering text using Cascading Style
Sheets (CSS).
Frames Lesson - Here
we learn how to control frames with JavaScript
Arrays
- This lesson teaches you about JavaScript arrays.
Functions,
Arguments and Forms - This JavaScript lesson teaches you
some fundamentals with examples and more.
Cool
Stuff with Windows - Here, in this lesson, we learn about
windows and how to control the through JavaScript
Transparent
Backgrounds - This Photoshop lesson teaches you about
transparent backgrounds for gif89a images for the web.
Photo
Backgrounds - In this PhotoShop lesson we learn how to
change backgrounds in images.
Background
Example - Example of a tiled background created in PhotoShop.
Text
Change - Example of how to dynamically change text on
the page. Note: Netscape only.
Status
- Example of how to create a status bar message when you use the
mouseover event.
Dynamic
Images - This lesson teaches you how to dynamically change
images for such features as roll overs.
Fun
Stuff - This is an example of dynamic push through the
use of the meta refresh tag.
Table
- This page shows you how to create irregular shaped boxes that
you can size with the width of your page through the use of slice
and dice graphics techniques and borderless tables.
Fading
One and Fading
Two are examples of dynamic text through cross-browser
DHTML.
No
Error - Although the only way you will see this script
is to download it or view it in editor, it does get rid of those
nasty little error messages.
Search
Form - This is the example we made when we learned how
to install a cgi search engine. The image was custom designed
in class to have something better than the standard search box.
CSS
Lesson 1 - This is an example of CSS in action.
Cut
and paste Java - Here is an example of a java fireplace
that we downloaded from codebrain.com
Table
Example - This is an example of how to center a table
both horizontally and vertically in a web page.
Wild
Flowers - This is an example of how css can look differently
form browser to browser. The lesson here is to check your pages
on the widest variety of browsers possible.
Dynamination
- Here is a quick example of dhtml behaviors created in MicroSoft
FrontPage.
This
is my Web Page - Simple example of MS FrontPage dynamination.
Bouncing a Ball - Simple
example showing motion tweening in Flash. Bouncing a Blue Ball.
Cool
DHTML Site - Here is a review of Jeff Rouyer's DHTML Guru
Site and some examples from it.
Return to Top of Page
