1. www31 Web Page Layout www3

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

3. www33 Café Segovia 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 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 colspan=“2”

4. www34 Café Segovia 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 Café Segovia del Norte Location Our Coffees Menu Take Out Catering Contact Us Blah blah blah

5. www35 Control over tables is limited 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 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

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

7. www37 Table Column Width Table cells expand to accommodate images Images can be used to force a column or row to be a minimum size aaaccccc cccc bbb

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

9. www39 Table attributes 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

10. www310

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

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

13. www313 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 Navigation Bars HyperMegaGlobal Corp. blah blah blah HyperMegaGlobal Corp. ServicesStaffProductsLocations

14. www314 Image Maps Image Maps allow hotspots to be defined on areas of an image file Image maps can be client side and server side

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

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

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

18. www318 65, 120 106, 171

19. www319 210,160 40

20. www320 75, 250 200, 300 50, 350 150, 220

21. www321 Client Side Image Maps

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

23. www323 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

24. www324 Frames Test Sorry! You need a frames-enabled browser to view this page correctly. 75 pixels

25. www325 Frames Test

26. www326

27. www327 Frames Test Tapas Spanish Omlette Buñuelos de Bacalao Squid Pulpo a la Gallega Baby Eel Tartlets Chorizo Links can be targeted to a specific named frame