1 / 21

ECA 228 Internet/Intranet Design I

Learn how to create effective table layouts for internet and intranet design, including factors in deciding content and limiting line length for readability. Explore the use of relative or fixed table widths and multi-column designs to enhance user experience.

kellyjohnson
Download Presentation

ECA 228 Internet/Intranet Design I

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. ECA 228 Internet/Intranet Design I Page Layout with Tables

  2. Layout with tables • relative or fixed width • factors in deciding • content • limit line length to enhance readability • multi-columns • precision • designer preference ECA 228 Internet/Intranet Design I

  3. Layout with tables • relative table width • set width as percentage using “width” attribute • table resizes itself based upon size of browser window • more compatible across different browser window sizes < table width=“90%” > ECA 228 Internet/Intranet Design I

  4. Layout with tables • fixed table width • set width as pixel value using “width” attribute • table width remains constant despite size of browser window • if table is wider than window user must horizontal scroll < table width=“750px” > ECA 228 Internet/Intranet Design I

  5. Layout with tables • fixed table width • determine width in pixels based upon common screen resolutions • 640 X 480 • 800 X 600 • 1024 X 768 ECA 228 Internet/Intranet Design I

  6. Layout with tables • fixed table width • Rule Of Thumb: when designing for specific resolution, account for margins and scrollbars • Left margin: 10px • Right margin: 20px • Scrollbar: 20px width of table = resolution width - 50 ECA 228 Internet/Intranet Design I

  7. Effective tables • indent - write code that is easy to read <table> <tr> <td> 1st quarter </td> <td> 2nd quarter </td> <td> 3rd quarter </td> <td> 4th quarter </td> </tr></table> ECA 228 Internet/Intranet Design I

  8. Effective tables • remove extra white space <table> <tr> <td><img src=‘halle.jpg’ alt=‘Halle’> </td> <td><img src=‘boo.jpg’ alt=‘Boo’></td> </tr></table> ECA 228 Internet/Intranet Design I

  9. Effective tables • center table to adapt to different resolutions <table align=‘center’> <tr> <td>January</td> <td>February</td> <td>March</td> <td>April</td> </tr></table> ECA 228 Internet/Intranet Design I

  10. Effective tables • stack tables for quicker downloading • browsers must read all table code before displaying table • long tables may increase download time • use several small tables instead of one large table ECA 228 Internet/Intranet Design I

  11. Effective tables ECA 228 Internet/Intranet Design I

  12. Effective tables • nest table for complex designs • a smaller table may be nested within the <td> tags of a larger table • browsers must read all table code before displaying tables • nested tables may increase download time ECA 228 Internet/Intranet Design I

  13. Effective tables ECA 228 Internet/Intranet Design I

  14. Creating templates page banner nav featured article ads news 1 news 2 ECA 228 Internet/Intranet Design I

  15. Creating templates • how many columns? • how many rows? • which are colspan? • which are rowspan? ECA 228 Internet/Intranet Design I

  16. Basic templates • 2 column ECA 228 Internet/Intranet Design I

  17. Basic templates • 2 column with banner ECA 228 Internet/Intranet Design I

  18. Basic templates • 3 column ECA 228 Internet/Intranet Design I

  19. Basic templates • 3 column with banner ECA 228 Internet/Intranet Design I

  20. Basic templates • 3 column sectioned ECA 228 Internet/Intranet Design I

  21. Basic templates • 3 column main sectioned ECA 228 Internet/Intranet Design I

More Related