PCC Art 198, Spring Semester 2009

Design for the Internet

Week 6 (Starting second 3rd of the semester)

 

Topic

Assignments/Reading:

In Class

Tuesday, March 31

No Class

 

Optional Reading/Resources on CSS Positioning:

Preparing your content for CSS, Stephanie Sullivan (pdf)

No Class

 

 

Thursday, April 2
  • Dreamweaver CS4 Layouts in CSS
  • Work on Newsletter and layouts in class

Assignment:

Understanding Dreamweaver layouts tutorial

 

Finish botanical garden newsletter tutorial if necessary. Get help on Newsletter Assignment. Be sure to have sketch of your proposed design.

Understanding the Dreamweaver layouts-Stephanie Sullivan tutorial

CSS Layouts & Dreamweaver CS3 Video presentation and Presentation slides by Stephanie Sullivan

 

Glossary of Terms (from wikipedia and the book):

Absolute link
A link to access a website that includes the full URL, i.e. http://www.pasadena.edu/studentservices/index.html. Usually used to link to external website files.
Relative links
A link that locates a file in relation to the current document. For example, a link with a file path proceeded by a ../ tells the browser to move up one directory from the current file prior to looking for the linked file location. ../studentservices/index.html
Root-relative links
A link that locates a file in relation to the root of the current website. A link with an initial forward slash tells the browser to start the path to the file from the root of the current website: /studentservices/index.html
Link state

 

  • Link - state before any action has been taken. Default appearance is blue and underlined. (a:link)
  • Visited - the state after having been clicked. Default appearance is purple and underlined. (a:visited)
  • Hover - state when the mouse cursor is over it. Default appearance is not changed by browser, but can be changed by css. (a:hover and a:focus for keyboard activated)
  • Active - state while being clicked.Default appearance is red and underlined. (a:active

JavaScript

JavaScript is a prototype-based scripting language with a syntax loosely based on C. Web technologies are the best-known examples. These are examined first.

One major use of web-based JavaScript is to write functions that are embedded in or included from HTML pages and interact with the Document Object Model (DOM) of the page to perform tasks not possible in HTML alone. Some common examples of this usage follow.

  • Opening or popping up a new window with programmatic control over the size, position and 'look' of the new window (i.e. whether or not the menus, toolbars etc are visible).
  • validation of web form input values to make sure that they will be accepted before they are submitted to the server.
  • Changing images as the mouse cursor moves over them: This effect is often used to draw the user's attention to important links displayed as graphical elements.

Care must always be taken to ensure that the web page degrades gracefully and so is still usable by any user who:

  • has JavaScript execution disabled - for example as a security precaution
  • has a browser that does not understand the JavaScript - for example on a PDA or mobile phone
  • is visually or otherwise disabled and may be using an unusual browser, a speech browser or may have selected extreme text magnification. For more information on this, see the Web Accessibility Initiative

Rollover
refers to a button as created by a web developer or web designer, found within a web page, used to provide interactivity between the user and the page itself. The term rollover in this regard originates from the visual process of "rolling the mouse cursor over the button" causing the button to react (usually visually, by replacing the button's source image with another image), and sometimes resulting in a change in the web page itself.
About Us | Site Map | Privacy Policy | Contact Us