210 likes | 215 Views
ECA 228 Internet/Intranet Design I. Page Layout with Tables. Layout with tables. relative or fixed width factors in deciding content limit line length to enhance readability multi-columns precision designer preference. Layout with tables. relative table width
E N D
ECA 228 Internet/Intranet Design I Page Layout with Tables
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
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
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
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
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
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
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
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
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
Effective tables ECA 228 Internet/Intranet Design I
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
Effective tables ECA 228 Internet/Intranet Design I
Creating templates page banner nav featured article ads news 1 news 2 ECA 228 Internet/Intranet Design I
Creating templates • how many columns? • how many rows? • which are colspan? • which are rowspan? ECA 228 Internet/Intranet Design I
Basic templates • 2 column ECA 228 Internet/Intranet Design I
Basic templates • 2 column with banner ECA 228 Internet/Intranet Design I
Basic templates • 3 column ECA 228 Internet/Intranet Design I
Basic templates • 3 column with banner ECA 228 Internet/Intranet Design I
Basic templates • 3 column sectioned ECA 228 Internet/Intranet Design I
Basic templates • 3 column main sectioned ECA 228 Internet/Intranet Design I