A346 Notes - Page Layouts

 Modified: 

Table
of
Contents


This text is not in a table and is automatically reformatted to fit any size window. The advantage is that the user does not need to scroll to read the text regardless of the resolution of the viewing device. 

The tables below illustrate the difference between fixed width in pixels and width in percent. Text in a table fixed width in pixels cannot be reformatted by the browser and forces user scrolling. Text in a table defined in percentage of window can be reformatted by the browser.

Relative Percent
<table width="100%"> <tr> <td>100%</td> </tr> </table> <table width="100%"> <tr> <td>100%</td> </tr> </table><table width="100%"> <tr> <td>100%</td> </tr> </table><table width="100%"> <tr> <td>100%</td> </tr> </table><table width="100%"> <tr> <td>100%</td> </tr> </table><table width="100%"> <tr> <td>100%</td> </tr> </table><table width="100%"> <tr> <td>100%</td> </tr> </table><table width="100%"> <tr> <td>100%</td> </tr> </table><table width="100%"> <tr> <td>100%</td> </tr> </table><table width="100%"> <tr> <td>100%</td> </tr> </table><table width="100%"> <tr> <td>100%</td> </tr> </table><table width="100%"> <tr> <td>100%</td> </tr> </table><table width="100%"> <tr> <td>100%</td> </tr> </table><table width="100%"> <tr> <td>100%</td> </tr> </table><table width="100%"> <tr> <td>100%</td> </tr> </table><table width="100%"> <tr> <td>100%</td> </tr> </table>
Absolute Pixels
<table width="800"> <tr> <td>800 pixels</td> </tr> </table> <table width="800"> <tr> <td>800 pixels</td> </tr> </table> <table width="800"> <tr> <td>800 pixels</td> </tr> </table> <table width="800"> <tr> <td>800 pixels</td> </tr> </table> <table width="800"> <tr> <td>800 pixels</td> </tr> </table> <table width="800"> <tr> <td>800 pixels</td> </tr> </table> <table width="800"> <tr> <td>800 pixels</td> </tr> </table> <table width="800"> <tr> <td>800 pixels</td> </tr> </table> <table width="800"> <tr> <td>800 pixels</td> </tr> </table> <table width="800"> <tr> <td>800 pixels</td> </tr> </table> <table width="800"> <tr> <td>800 pixels</td> </tr> </table> <table width="800"> <tr> <td>800 pixels</td> </tr> </table> 

   

Page Sizes

How monitor sizes in width and height pixels display an 8.5x11 inch page:

  • 640x480 about 33% tall, 100% wide
  • 800x600 about 50% tall, 120% wide
  • 1024x768 about 66% tall, 175% wide
  • 1280x1024 about 100% tall, 200% wide

Dealing with Screen Size
  • Text - Text is automatically formatted to fit the screen. Try minimizing this page and you'll see that the text above will always fit. This text is not reformatted because it is within a fixed pixel sized table.
  • Tables - The tables above illustrate the difference between fixed width in pixels and relative width in percent. Text in a table fixed width in pixels cannot be reformatted and forces user scrolling right-and-left. Text in a table defined in percentage of window can be reformatted by the browser to fit the window. 
    • Fixed - <table width="800">
    • Relative - <table width="50%">
  • Images - Scaling of images can create distortion. The one at left is defined with width of 40%, distorting the image and corrupting the hotspots. Try each.

<img src="wd4_3.jpg" width="40%">
<img src="wd4_3.jpg" >

  • Relative resizing - Filling the available screen avoids scrolling problems but creates long text lines on high resolution screens and distorts images. 
  • User control - Use relative resizing except when layout is lost such as distorting graphics. 
  • Page Size Reality Check - Decide whether the content is better when filling available space or not. If there is lots of text content, filling available space with relative resizing makes sense. If there is little content, it may be better placed in the center to reduce perception of empty space on the margins.


 

Exercise 0

Relative and Absolute
  1. Create a page in FrontPage with two tables. 
  2. Fill both tables with text by copying this exercise and pasting into each.
  3. Right click on one of the tables and change the Table Properties to specify width in pixels.
  4. Change the pixel width to about 500.
  5. Preview, resize the window and notice how the tables are reformatted.

 

Page Margins

 

 

Setting
  • CSS provide the most general means of setting margins.
  • Margins can be set for top, bottom, left, and right.
  • For example, a relative left margin of 5% of the window for this has been set using the CSS for the <p> tag of:

<p style="margin-left: 5%"> 

Resize the window to see the effect.

  • Most tags can have the margin settings. To define a relative left margin of 5% and a red background for the entire page use the body tag:

<body style="margin-left: 5%; background-color: red">

 

Layouts   

 

 

Header Footer Pages 
  • One application of header-footers are to provide navigation elements. 
  • Can be implemented using frames from Chapter 5 of the text.  
  • Can more easily be implemented using the <Iframe> tag which creates a floating window.

    The following illustrates its use where the text above and below are navigation elements. Test the difference between the top navigation and the bottom navigation behavior.
Homework 1 Homework 2 Homework 3
 

The Syllabus was inserted into the frame by:

<table border="1" width="80%" cellspacing="0" cellpadding="0">
  <tr>
    <td> 
      <map name="FPMap1">
        <area href="Syllabus.htm"
           shape="rect" coords="17, 3, 133, 35">
        <area href="wd8.htm"
          shape="rect" coords="182, 2, 314, 39">
        <area href="wd10.htm"
           shape="rect" coords="358, 1, 506, 39"
                  title="Next chapter">
      </map>
      <img border="0" src="wd9_1.jpg"
        usemap="#FPMap1" width="507" height="44"> 
    </td>
  </tr>
  <tr> 
    <td>  
      <iframe src="Syllabus.htm" width="100%"
         name="floating">
      </iframe>
    </td> 
  </tr>
    <table border="0" width="80%" cellspacing="0"
      cellpadding="0" bgcolor="#C0C0C0">
      <tr>
       <td width="33%"><a href="hw1.htm" target="floating">
              Homework 1</a>
       </td>
       <td width="33%"><a href="hw2.htm" target="floating">
              Homework 2</a>
       </td>
       <td width="34%"><a href="hw3.htm" target="floating">
              Homework 3</a>
       </td>
      </tr>
    </table>
</table>
 

Printing
  • Pages designed for browsing generally are not designed for printing, contains:
    •  navigation
    • interactive elements
    • graphics
    • etc.
    • does not handle pagination or other printer formatting.
  • Pages designed for printing generally are not well-designed for browsing, should not display navigation, interactive elements, etc.
  • Generally should prepare a separate document for printing and pages for browsing.
  • Provide links to special print documents, see the Computer Science program bulletins .

 

Exercise 1

Create a page in FrontPage with a floating window for text and TLB navigation. Use the title element to provide extra assistance on some of the links (pass mouse over Chapter 10 above to see the effect). 

  • Create a 3x3 table then merge the two middle row, right cells.
  • Create the IFRAME as the <TD> </TD> for the merged cells.
  • Define at least two text links on the left navigation. One should open the linked page in the floating window.
  • For the entire page body, define a relative left margin of 10% and a background of your favorite color (e.g. green, red, etc.).
  • Preview.