Creating Web Documents

1
Creating Web Documents

• Cascading Style sheets
• layout
• Preview dynamic HTML
• Homework Project 3, best/worst posting

2
Styles can

• Specify formatting for
• all examples of existing tags,
• H2 text-align center lth1gt.lt/h1gt
• p font normal 14pt "Arial" ltpgt. lt/pgt
• some subset of existing tags
• p.intro text-indent 10pt font italic
• ltp class"intro"gt.lt/pgt
• a new type of tags
• DIV.inserts color red background white
  text-alignleft ltdiv classinsertsgt.lt/divgt

3
Styles can be for...

• an individual instance of a standard tag
• pfirst text-alignleft color blue
• ltp id"first"gtlt/pgt
• an individual instance of a new tag
• divspecial colorcyan font-family Verdana
• ltdiv id"special"gt.lt/divgt
• a class of a new tag
• div.side
• ltdiv class"side"gt lt/divgt

4
Styles for layout

• Can specify position and wrapping (float)
• Position
• absolute means in terms of parent. This could be
  the body tag, in which case it is the window
• relative means in terms of where it would go
  otherwise
• Positioning can cause overlap. The z-index can
  specify what goes on top.

5
Example of flying bird

• newmedia.purchase.edu/Jeanine/movetest.html
• Uses style div tag
• Uses JavaScript
• functions
• setInterval (timed event)
• testing for different environments
• Example of Dynamic HTML
• Preview of Creating Dynamic Web Documents (Spring
  course)

6
One style in head section

• ltstyle type"text/css"gt
• bird position absolute
• top 400px
• left 400px
• lt/stylegt

7
Instance of 'div' in body

• ltbodygt
• ltdiv id"bird"gt
• ltimg src"bird.gif" width100 height100gt lt/divgt
• Need to make it a 'div' in order to refer to its
  style attributes

8
In script section, in head

• Global variables
• var swidth screen.width var sheight
  screen.height
• var iwidth 100 var iheight 100
• var currentx 400 var currenty 400
• var tid var xv 5 var yv -10
• functions
• getObj(name) --more general than needs to be
• move(deltax, deltay)
• startflying()
• stopflying()
• setspeeds(f)
• fly()

All use global data
9
Calling

• 6 different links call the move function 6
  different ways corresponding to up, down, left,
  right, up left, down right
• 1 link calls the startflying function
• startflying
• tid setInterval("fly()", 250)
• fly function calls move(xv, yv)
• 1 link calls stopflying function
• stopflying clearInterval(tid)

10
Code to 'get' the object

• function getObj(name)
• if (document.getElementById)
• this.obj document.getElementById(name)
  
• this.style document.getElementById(nam
  e).style
• else if (document.all)
• this.obj document.allname
• this.style document.allname.style
  
• else if (document.layers)
• this.obj document.layersname
• this.style document.layersname
  
• Uses the trick of checking if a method exists, if
  it does, use it! This is better than checking
  for IE vs Netscape4 vs Netscape 6 but is
  equivalent.

11

• function move(deltax, deltay)
• var x new getObj("bird")
• currentx deltax
• currenty deltay
• x.style.top currenty
• x.style.left currentx
• // Check for going off screen
• // position may change for next move
• if (currentxgtswidth)
• currentx 0
• if (currentygtsheight)
• currenty 0
• if ((currentx iwidth)lt0)
• currentx swidth
• if ((currentyiheight)lt0)
• currenty sheight

12

• function startflying()
• tid setInterval("fly()",250)
• function stopflying ()
• clearInterval(tid)

13
Fly function (which calls move)

• function fly()
• move(xv,yv)

14
setspeeds, which picks up values from form f

• function setspeeds(f)
• xv 1f.hspeed.value
• yv 1f.vspeed.value
• return false

Multiply to turn text into a number!!!
15

• ltdiv id"bird"gt
• ltimg src"bird.gif" width100 height100gt lt/divgt
• lta href"javascriptmove(0,50)"gtMove down lt/agt
  ltbrgt
• lta href"javascriptmove(0,-50)"gtMove up lt/agt
  ltbrgt
• lta href"javascriptmove(50,0)"gtMove right lt/agt
  ltbrgt
• lta href"javascriptmove(-50,0)"gtMove left
  lt/agtltbrgt
• lta href"javascriptmove(50,50)"gtMove down and
  right lt/agt ltbrgt
• lta href"javascriptmove(-50,-50)"gtMove up and
  left lt/agt ltbrgt
• lta href"javascriptstartflying()"gtStart flying
  lt/agt ltbrgt
• lta href"javascriptstopflying()"gtStop flying
  lt/agt ltbrgt
• ltform name"fx" onsubmit "return
  setspeeds(this)" gt
• Horizontal Speed Factorltinput type"text"
  name"hspeed" gt
• Vertical Speed Factor ltinput type"text"
  name"vspeed" gtltbrgt
• ltinput type"submit" value"Set speeds"gt
• lt/formgt

16
Check on-line

• rachel.ns.purchase.edu/Jeanine/jsexamples.html
• move test
• rachel.ns.purchase.edu/Jeanine/movetest.html
• Expanded 'dog' (dog dies if it gets too thin or
  too fat)
• rachel.ns.purchase.edu/Jeanine/pet3.html

17
Best practices

• Your opinion may differ, but read for ideas.
• Jakob Nielsen, http//www.useit.com/
• http//www.iarchitect.com/index.htm
• Review Web Style Guide
• other

18
Homework

• Do as posting find a good and bad web site (in
  terms of design and execution). Say why! Use what
  you have learned. Have your views changed? Be
  articulate.
• Project 3 due on May 6 to show in class (get
  feedback and help). You must ftp to the rachel
  site OR another site send the TA a note by May
  8. This gives Kate and Melissa a chance to update
  the class page (earlier would be nice and give
  you time to check the link).
• Practice quiz will be posted. Final/quiz May 13
  (need to find a room.