Post on 31-Mar-2015
transcript
ECA 228 Internet/Intranet Design I
Page Layout with Tables
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
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
stacked table 1
stacked table 2
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
table 1
nested table
ECA 228 Internet/Intranet Design I
Creating templates
page banner
nav adsfeatured article
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