Web Page Layout www3 www3 1 1
Advanced Tables Tables are usually required if you want to apply a complex layout to a webpage You have to be confident with colspan and rowspan to make it work Proper planning on paper is important. Boxed paper is very handy www3 2 2
Café Segovia colspan= 2 Café Segovia del Norte Café Segovia del Norte Location Location Our Coffees Our Coffees Menu Take Out Catering Contact Us Hola! Blah blah blah blah blah blah blah los cafes mejores del mundo blah blah blah blah blah blah blah blah blah blah blah blah Menu Take Out Catering Contact Us Hola! Blah blah blah blah blah blah blah los cafes mejores del mundo blah blah blah blah blah blah blah blah blah blah blah blah www3 3 3
<table> <tr> <td colspan= 2 bgcolor= #663300 > <font size= +2 color= #ffcc99 > Café Segovia del Norte </font></td> </tr> <tr> <td bgcolor= #996600 > <font color= #cccc99 >Location<br /> Our Coffees<br /> Menu<br />Take Out <br />Catering<br />Contact Us </font></td> <td bgcolor= #cccc99 ><center> Café Segovia Location Our Coffees Menu Take Out <img src= cup.gif width= 100 height= 100 alt= cup /> Catering </center> Blah blah blah </td> </tr> </table> Contact Us Café Segovia del Norte Hola! Blah blah blah blah blah blah blah los cafes mejores del mundo blah blah blah blah blah blah blah blah blah blah blah blah www3 4 4
Café Segovia del Norte Control over tables is limited Café Segovia del Norte Location Our Coffees Menu Take Out Catering Contact Us Hola! Blah blah blah blah blah blah blah los cafes mejores del mundo blah blah blah blah blah blah blah blah blah blah blah blah Location Our Coffees Menu Take Out Catering Contact Us Hola! Blah blah blah blah blah blah blah los cafes mejores del mundo blah blah blah blah blah blah blah blah blah blah blah blah www3 5 5
Table Column Width aaa bbb ccccccccc Table column widths are assigned in proportion to the length of the contents (Length of the longest line) www3 6 6
Table Column Width aaa bbb ccccc cccc Table cells expand to accommodate images Images can be used to force a column or row to be a minimum size www3 7 7
Notorious OPG Many web page designers use One Pixel GIFs to create space on a page Very small Same colour as background or transparent Resized dynamically www3 8 8
Table attributes Some attributes can be used in tables, but their support and implementation may vary wildly from browser to browser table width= 500 table 500 pixels table width = 50% half the window width td width = 200 tr height = 100 td bgcolor= #ff00fff tr background= pattern.gif www3 9 9
www3 10 10
Slices Sliced up images spread over many table cells are often used to page layout Individual images can be clicked for navigation www3 11 11
Navigation Bars Products Services HyperMegaGlobal Corp. Staff Locations Fh fhdfdsfjh dff fd jhg f jhg fjkg fhg ueydfg ewrhti5u35 dfgfgd f ert fdfg oiutyfdlkjsd ugher ui4sdf dfgoiq3 jkg fhg ueydfg ewrhti5 u35 dfgfgd f ert fdfg oiutyfdlkjsd ugher ui4sdf dfgoiq3 jg jhg fjkg fhg ueydfg ew rhti5u35 dfgfgd f ert fdfg oiutyfd jhg fjkg fhg ueydfg ewrhti5u35 dfgfgd f ert fdfg oiutyfdlkjsd ugher ui4sdf dfgoiq3 lkjsd ugher ui4sdf dfg oiq3 iug Navigation bars are often used to at the front door of a site to link to major sections Section names should be chosen carefully www3 12 12
Products Services HyperMegaGlobal Corp. Staff Locations Fh fhdfdsfjh dff fd jhg f jhg fjkg fhg ueydfg ewrhti5u35 dfgfgd f ert fdfg oiutyfdlkjsd ugher ui4sdf dfgoiq3 jkg fhg ueydfg ewrhti5 u35 dfgfgd f ert fdfg oiutyfdlkjsd ugher ui4sdf dfgoiq3 jg jhg fjkg fhg ueydfg ew Navigation Bars <table width= 400 cellspacing= 0 cellpadding= 0 bgcolor= #cccc99 > <tr> <td> </td><td> </td> <td colspan= 2 >HyperMegaGlobal Corp.</td></tr> <tr> <td width= 100 ><a href= products.html ><img src= prod.jpg width= 100 height= 40 /></a></td> <td width= 100 ><a href= services.html ><img src= serv.jpg width= 100 height= 40 /></a></td> <td width= 100 ><a href= staff.html ><img src= staf.jpg width= 100 height= 40 /></a></td> <td width= 100 ><a href= locations.html ><img src= loca.jpg width= 100 www3 13 13
Image Maps Image Maps allow hotspots to be defined on areas of an image file Image maps can be client side and server side www3 14 14
Server Side Image Maps Co-ordinates User URL User clicks on image Co-ordinates of click are sent by browser to the server Server determines what URL send user This requires a special script to be running on the server. Many web-hosting companies are cautious about user-defined code Script figures out what to do www3 15 15
Client Side Image Maps URL User User clicks on image The browser executes code that determines if the location clicked is a hot spot it follows the link No special interaction with the server is required. The client (browser) does all the work www3 16 16
Client Side Image Maps Client side images maps specify the co-ordinates of rectangles, circles, and polygons And a default www3 17 17
65, 120 < area shape= rect coords= 65, 120, 106, 171 href= ireland.html /> 106, 171 www3 18 18
< area shape= circle coords= 210, 160, 40 href= n-europe.html /> 210,160 40 www3 19 19
< area shape= poly coords= 75, 250, 150, 220, 200, 300, 50, 350 href= iberia.html /> 150, 220 75, 250 200, 300 50, 350 www3 20 20
Client Side Image Maps <head> <map name= euro-night > <area shape= rect coords= 65, 120, 106, 171 href= ireland.html /> <area shape= circle coords= 210, 160, 40 href= n-europe.html /> <area shape= poly coords= 75, 250, 150, 220, 200, 300, 50, 350 href= iberia.html /> </map> </head> <img usemap= #euro-night src= nasa-europe-night.jpg /> www3 21 21