Creating Web Documents Cascading Style sheets layout Preview: dynamic HTML Homework: Project 3, best/worst posting
Styles can Specify formatting for all examples of existing tags, H2 {text-align: center} <h1>….</h1> p {font: normal 14pt "Arial"} <p>…. </p> some subset of existing tags p.intro {text-indent: 10pt; font: italic} <p class="intro">….</p> a new type of tags DIV.inserts {color: red; background: white; text-align:left} <div class=inserts>….</div>
Styles can be for... an individual instance of a standard tag p#first {text-align:left; color: blue} <p id="first">…</p> an individual instance of a new tag div#special {color:cyan; font-family: Verdana} <div id="special">….</div> a class of a new tag div.side { } <div class="side"> </div>
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.
Example of flying bird Uses style div tag Uses JavaScript 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)
One style in head section <style type="text/css"> #bird {position: absolute; top: 400px; left: 400px; } </style>
Instance of 'div' in body <body> <div id="bird"> <img src="bird.gif" width=100 height=100> </div> Need to make it a 'div' in order to refer to its style attributes
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
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);
Code to 'get' the object function getObj(name) { if (document.getElementById) {this.obj = document.getElementById(name); this.style = document.getElementById(name).style; } else if (document.all) { this.obj = document.all[name]; this.style = document.all[name].style; } else if (document.layers) { this.obj = document.layers[name]; this.style = document.layers[name]; } } 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.
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 (currentx>swidth) { currentx = 0; } if (currenty>sheight) { currenty = 0;} if ((currentx + iwidth)<0) { currentx = swidth; } if ((currenty+iheight)<0) { currenty = sheight;} }
function startflying() { tid = setInterval("fly();",250); } function stopflying () { clearInterval(tid);
Fly function (which calls move) function fly(){ move(xv,yv); }
setspeeds, which picks up values from form f function setspeeds(f) { xv = 1*f.hspeed.value; yv = 1*f.vspeed.value; return false; } Multiply to turn text into a number!!!
<div id="bird"> <img src="bird.gif" width=100 height=100> </div> <a href="javascript:move(0,50);">Move down </a> <br> <a href="javascript:move(0,-50);">Move up </a> <br> <a href="javascript:move(50,0);">Move right </a> <br> <a href="javascript:move(-50,0);">Move left </a><br> <a href="javascript:move(50,50);">Move down and right </a> <br> <a href="javascript:move(-50,-50);">Move up and left </a> <br> <a href="javascript:startflying();">Start flying </a> <br> <a href="javascript:stopflying();">Stop flying </a> <br> <form name="fx" onsubmit= "return setspeeds(this);" > Horizontal Speed Factor<input type="text" name="hspeed" > Vertical Speed Factor <input type="text" name="vspeed" ><br> <input type="submit" value="Set speeds"> </form>
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
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 Try to find other sources on best practices. Consider what they say: use it to help you articulate your own ideas.
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. Don’t change your mind based on any of the readings.