Digital Design for the Arts and Humanities website

Digital Design homepageDaily Readings for Digitial Design courseDigital Design Course syllabusE-Mail Digital Design StudentsTechnology, Arts, and Media Program homepageSewall Academic Program homepageCU-Boulder homepage

Learning to use Javascript

Assignment for Friday: Assignment for Friday: Using Dan Harris' Typefaces that work well together and Typeface Selection System website and Clear Ink's Color Scheme Generator , and Color Scheme Generator 2 create a webpage that uses contrasting type and colors to create emphasis.(See txt.con and fantxt for a simple example)

Assignment: (Do after Class)

Assignment: Come to class on Friday, March 10, with a short description of the larger goal and focus of your next website.

4.  Adding Javascript using Dreamweaver

  1. Use the javascripts from Codelifter: Javascript code, Library, Library
    Free JavaScripts
    Nick's Javascript Page

  2. Most of this javascript code will go just before the

    </head> tag or just below the <body> tag.

  3. Using Dreamweaver, look at the HTML
    code for this webpage.  See where the

    <head> ... </head>  and <body> ... </body> tags are.

  4. Also locate the HTML code for your page's links.  They shouldlook like this:

    <a href="">Test links</a>

  5. Using Internet Explorer, select "View" and then "Source" to view the source code for a page.

  6. You can often figure out the javascript effect a
    page uses by studying its "source code."

  7. In Dreamweaver,  go to the "html" version of a page  and then go to the "source code" for the javascript effect you want to use and copy and paste this "code" from the javascript website into the html code for your page.

  8. Before you save your webpage in "Dreamweaver" go back to the "Javascript Effects" website  and read the specific instructions to make sure that you copied the right code and pasted it in the right place on your webpage.

  9. If these javascript effects don't work, go back to the "Free Javascript Effects" and see if you followed the instructions correctly.

  10. Remember most of the javascript effects code will be contained within these tags:

    <script> ..... </script>

  11. Be patient when copying HTML source code.  Strong attention to detail is very important in getting this to work.

5. If you are interested in exploring additional javascript
  then go to these useful sites:  The Javascript
, Nick's Javascript Page

Assignment: Come to class on Friday, March 10, with a short description of the larger goal and focus of your next website.

1. See Will Harris Web Design Gallery

2. Site of the Week

3. The 2005 Webby Award Winners

4. See Designing a Better Site: Web Design Basics

3. Image websites are due March 24

  1. Use images to focus the larger story of the
    Image  website

  2. How do images provide "focal points" and
    interest to your pages?

  3. Select captions, text, and color schemes that
    reinforce and reflect the larger story that
    your image is telling.

  4. Study your "good design" notebooks to get ideas
    about  how to use images in your image websites.

  5. What do powerful images add to your websites?

  6. What do they mean when they say:
    "A picture is worth a thousand words."

2.  On the First Glance of a webpage--"the First Glance Test"

    "By just reading the link, a person should be able to
       figure out where they will go when they click it."
                 Vincent Flanders

      " A reader should never have to try
to figure out what  is happening on the
page--the focus, the organization of
material, the purpose, the flow of
information, all should be recognized
instantly with a single glance.   And
along the way, it doesn't hurt to make it

                        Robin Williams

. Look at issue of "Colorado Daily" for example of
using Type to layout a page.

4 . Masking Text

  1. See Sewall Nights and Starry Nights

  2. In Fireworks, put an image on layer 1. Then
    type text over it in layer 2.

  3. Now select both the image layer and the
    text layer and go to "Modify" and select
    "Mask" and then chose "Group as Mask."

  4. This will cause the text to be embedded in
    your background layer.

  5. You can modify the layer Mask by de-selecting
    the lock option. This allows you to move the
    text over the image or the image over the
    text to change what areas are masked.

  6. You can now copy this text and use it as
    an image in a Html file.
    See Masktest.gif


5. Understanding Basic HTML code 

  1. Make sure that you know where tags open and close:

    <script> ....</script>


    <head> .... </head>

    <a href= "index.htm">Home Page </a>

 6. Reading and Copying HTML Source Code

  1. Example of Link change and underline on mouseover

  2. Code for link change effect:

    <STYLE TYPE="text/css">
    a:hover {text-decoration: underline }

  3. Put this code just below you page title in the
    head tag section:


    <title> Digital Photography</title>

    <STYLE TYPE="text/css">
    a:hover {text-decoration: underline }

  4. Light 'Em Up Multi-Color Interactive Mouse-Over Links

  5. Multi-Color Mouse-over link example page

  6. Mouse-over example page 2

  7. Mouse-over example page 3

  8. Dynamic Link Highlighter script

  9. Dynamic Link Highlighter example

  10. Basic No-Right Click Trick code

  11. No Right-Click Trick example page

  12. Better No-right click Trick script

  13. Example of Advanced No-Right Click

  14. Example of No-Right click Trick
    with Altered text warning

  15. Password Protection javascript

  16. Password-protected webpage

    name: cclewis
    password: sewall

  17. Encrypted Password javacript code

  18. Encrypted Password page for lewis.htm.
    The password is "lewis"

  19. See Basic Example of Error in Javascript
    with the message "error in page."

  20. Javascript Pop-up Information Box

  21. Javascript Last-Updated Box

  22. Slider Applet for image slideshow

8. Macromedia Dreamweaver Exchange

  1. Dreamweaver Exchange: Download
    javascript behaviors

  2. You can download and manage
    Dreamweaver Extensions by using
    Macromedia Extensions Manager

  3. If you have Macromedia Extensions
    Manager installed on your computer,
    when you download an extension
    it should automatically be installed.

  4. Use the Behaviors Tool window to
    add Javascript Effects

  5. Under the Behaviors Tool window, you
    can select "Get more Behaviors" to
    go to Macromedia Dreamweaver Exchange"
  6. Many of these Dreamweaver Behavior
    Tools are automated versions of the
    javascript code found in the above
    javascript libraries.

8. Using Javascript code in the Snippets Window

  1. You can also get more Javascript code in
    Dreamweaver by going to Windows and
    opening the 'Snippets Window."

  2. You can select various javascript code
    by selecting the "snippet" that goes
    a long with it.

  3. For example, under "Snippets" select
    "Javascript" and then select 'Browser
    Functions" and then select "Disable
    Right Click."

  4. These "Snippets" just contain code and
    should only be put in the "code" view of
    the page.

  5. "Snippets" are designed to be used by
    "Coders" who are using Dreamweaver
    and periodically want to insert their
    own pieces of code.

  6. Dreamweaver uses Behaviors and
    Snippets to allow you to add basic
    Javascript effects.


9. Using a Codelifter Program to borrow the

  1. CodeLifter 5 Pagecode Ripper

9. Adding more than one Javascript Effect to a page

  1. Adding more than one javascript trick to a page

  2. One event handler, many javascript actions

  3. JavaScript Tutorials

  4. Adding more than one Javascript effect to
    a page

  5. One Event Handler and many Actions

  6. Javascript Q and A Master list

















Good Web Design Sites
Award-winning Web Designs
Great Web Design Books
Sewall Class Web Designs

| Home Page  | Readings | Syllabus | Web Resources | Top of Page |

Number of Visitors to this site: 
7672      by Chris H. Lewis, Ph.D.

© 2000 by Chris H.  Lewis, Ph.D.
Sewall Academic Program; University of Colorado at Boulder
Created 1 June 2000:  Last Modified: 10 March, 2006

Digital Design Course homepage