Web Page Layout

1. Web Page Layout www3 www3

2. 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

3. Café Segovia colspan=“2” Café Segovia del Norte Location Our Coffees Menu Take Out Catering Contact Us 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 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. Café Segovia <table> <tr> <td colspan=“2” bgcolor=“#663300”> <font size=“+2” color=“#ffcc99”> Caf&eacute; 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> <img src=“cup.gif” width=“100” height=“100” alt=“cup”/> </center> Blah blah blah </td> </tr> </table> Location Our Coffees Menu Take Out Catering 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

5. Café Segovia del Norte Control over tables is limited Location Our Coffees Menu Take Out Catering Contact Us 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 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

6. Table Column Width • Table column widths are assigned in proportion to the length of the contents • (Length of the longest line) www3

7. Table Column Width • Table cells expand to accommodate images • Images can be used to force a column or row to be a minimum size www3

8. 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

9. 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” Some attributes can be used in tables, but their support and implementation may vary wildly from browser to browser Table attributes www3

10. www3

11. Slices • Sliced up images spread over many table cells are often used to page layout • Individual images can be clicked for navigation www3

12. Navigation Bars • Navigation bars are often used to at the front door of a site to link to major sections • Section names should be chosen carefully HyperMegaGlobal Corp. Products Services 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 www3

13. HyperMegaGlobal Corp. Products Services Staff Locations Navigation Bars 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 <table width=“400” cellspacing=“0” cellpadding=“0” bgcolor=“#cccc99”> <tr> <td>&nbsp;</td><td>&nbsp;</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 height=“40” /></a></td></tr> <tr><td colspan=“4”>blah blah blah</td></tr> </table> www3

14. 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

15. Server Side Image Maps User • 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 Co-ordinates URL Script figures out what to do www3

16. Client Side Image Maps 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 URL www3

17. Client Side Image Maps • Client side images maps specify the co-ordinates of rectangles, circles, and polygons • And a default www3

18. 65, 120 < area shape=“rect” coords=“65, 120, 106, 171” href=“ireland.html”/> 106, 171 www3

19. < area shape=“circle” coords=“210, 160, 40” href=“n-europe.html”/> 210,160 40 www3

20. < area shape=“poly” coords=“75, 250, 150, 220, 200, 300, 50, 350” href=“iberia.html”/> 150, 220 75, 250 200, 300 www3 50, 350

21. 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

22. Frames • Frames are used to divide the browser into separate areas • Each frame can load a separate HTML document • Each frame scrolls independently www3

23. Frames • One of the frames is usually used as a navigation bar • The content can be loaded in other frames while the navigation bar remains constant www3

24. <html> <head> <title>Frames Test</title> </head> <frameset cols="75,*"> <frame src="frame1.html"> <frame src="frame2.html"> </frameset> <noframes> Sorry! You need a frames-enabled browser to view this page correctly. </noframes> </html> 75 pixels www3

25. <html> <head> <title>Frames Test</title> </head> <frameset rows="50,*"> <frame src="header.html"> <frameset cols=“175,*" > <frame src="trc1.html" name="tapas-list"> <frame src="trc2.html" name="recipe"> </frameset> </frameset> </html> www3

26. <frameset rows="50,*"> <frame src="header.html"> <frameset cols="175,*" > <frame src="trc1.html" name="tapas-list” scrolling=“no”> <frame src="trc2.html" name="recipe"> </frameset> </frameset> www3

27. <html> <head> <title>Frames Test</title> </head> <body bgcolor="#996600" text="#cccc99"> <h3>Tapas</h3><br /> <a href="tortilla.html" target="recipe">Spanish Omlette</a> <br /> Bu&ntilde;uelos de Bacalao<br /> <a href="squid.html" target="recipe">Squid</a> <br /> Pulpo a la Gallega<br /> Baby Eel Tartlets<br /> Chorizo<br /> Links can be targeted to a specific named frame www3