Presentation is loading. Please wait.

Presentation is loading. Please wait.

ECA 228 Internet/Intranet Design I

Similar presentations


Presentation on theme: "ECA 228 Internet/Intranet Design I"— Presentation transcript:

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

2 ECA 228 Internet/Intranet Design I
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 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

4 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

5 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

6 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

7 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

8 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

9 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

10 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

11 ECA 228 Internet/Intranet Design I
Effective tables stacked table 1 stacked table 2 ECA 228 Internet/Intranet Design I

12 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

13 ECA 228 Internet/Intranet Design I
Effective tables table 1 nested table ECA 228 Internet/Intranet Design I

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

15 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

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

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

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

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

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

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


Download ppt "ECA 228 Internet/Intranet Design I"

Similar presentations


Ads by Google