Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Similar presentations


Presentation on theme: "ECA 228 Internet/Intranet Design I Page Layout with Tables."— 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

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

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

5 ECA 228 Internet/Intranet Design I Layout with tables fixed table width – determine width in pixels based upon common screen resolutions 640 X X X 768

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

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

8 ECA 228 Internet/Intranet Design I Effective tables remove extra white space

9 ECA 228 Internet/Intranet Design I Effective tables center table to adapt to different resolutions January February March April

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

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

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

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

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

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

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

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

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

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

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

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


Download ppt "ECA 228 Internet/Intranet Design I Page Layout with Tables."

Similar presentations


Ads by Google