1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
H O M E
  Quick CSS Review

 

Why stylesheets?

Stylesheet locations

Linked, embedded and inline

Stylesheet syntax

Selector, declaration, properties and values

Redefining tags vs classes

Units in CSS

Pixels or percentages

Text properties

text-indent, text-align, line-height, vertical-align, word-spacing, letter-spacing, text-transform, text-decoration

Font properties

font, font-family, font-weight, font-size, font-style, font-variant

Background properties

background, background-color, background-image, background-repeat, background-attachment, background-position

Box properties

Margins

margin, margin-top, margin-right, margin-left, margin-bottom

Padding

padding, padding-top, padding-right, padding-left, padding-bottom

Borders

border, border-top, border-right, border-left, border-bottom, border-color, border-style, border-width, border-collapse

Classification properties

display, white-space, list-style-type, list-style-image, list-style-position,

 

  Quiz

 

And the secret URL is...
  Dissection

 

All Look Same

http://www.alllooksame.com

Dissected version

Source
  Dreamweaver Flash Text

 

Sample

On the "Media" palette.

Dreamweaver uses the Flash Player to playback .swf movies you can create and control:

 
  Basic JavaScript (really basic)

No Way We Can Cover

It is well beyond the confines of this class to teach JavaScript, but if you want to learn it, try these tutorial sites:

hotwired webmonkey

page resource

html goodies

 

What is javaScript?

Another @$%*&! language

Where does it live?

Similar to CSS. External file, embedded in the header and inline in the body.

What doe is Look Like?

Ugly


<script language="JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

//-->
</script>

Yeouch!

How does it Work?

Mostly for our purposes, it defines what will happen when event occurs and tells the browser what to do as a result of that event.

What Can It Do?

Rollovers

Popup menus

Detect the type of browser the user is using

Insert, delete, position, move, show, hide, and format elements on a page

Swap out stylesheets

Form validation

Math

Build really slow games

 

  The Document Model

How JS speaks to the browser

JavaScript speaks to the page with the keyword “document” and uses “dot” notation to speak to specific parts of the page.

document.this.elementID;

document.body.leftMargin = 15;

document.images[3]=imageObject;

 
  The Event Model

How JS knows when something is happening

JavaScript recieves "events" from the browser when certain things happen:

onMouseOver(doSomething);

onMouseOut(doSomething);

onLoad(doSomething);

 
 

Animated Gifs

Definition

A series of images in one image, plus some fancy compression based on "frame differencing"

Frame 1
Frame 2
Frame Difference

 

Timing

In 100ths of a second.

Each frame can have its own timing value

You can set the number of times to loop from 1 to forever

 
  Fireworks Button

 

Demo

Source

Create a symbol in Fireworks

Add rollOver states

Export
  Animated Gifs in Fireworks

Wretched UI

Sample

Each layer becomes an object in each frame

You can take one layer and distribute it across all frames by double clicking it.

Best way to animate is with copy-paste-move

Each time you create a layer, it’s created in all frames, but left blank until you paste something in it.

Export as Animated Gif

Set timing on export
  Animated Gifs in Flash

Even Worse

 
  Animated Gifs in Photoshop

I've no Idea

Let's see if I can figure it out at break...
  Exercises

 

Let's go back to those tables