Programming the Web using XHTML and JavaScript Chapter 6 Web Page Design and Layout
Many Ways to Design Consistent Web Sites 3 typical “easy” methods Styles using <div> Tables Frames Many other possibilities
Layout with “Style”
Layout with “Style” Emulate a Magazine style Set height and width for most current monitors: Height = 400-500 pixels Width = 600 pixels No scrolling required See Figures 6.1 & 6.2, p. 144-145 Modern Update: Height = 500—600 Width = 800
Layout with “Style” Title Image Column 3 Column 1 Column 2 500 pixels
Using Style Sheets and Divisions Layout with Style
Layout with Style Normal flow Page elements are interpreted: Top to bottom Left to right Can control some placement with float property or align attribute position property of style sheets provides specific placement information
Layout with Style - Positioning <style type=”text/css”> img.tower {position:absolute; top:75; left:150} </style> … <img class=“tower” src=“eiffel.jpg” /> … Ch06-Ex-01.html
Layout with Style Placement is relative to containing block Could place image inside a paragraph that was itself positioned at some absolute set of coordinates Caution – using position removes the image from the normal flow but not anything else! Ch06-Ex-02.html
Layout with Style Use <div> element Define a custom block-level element for each section of the layout Create a class for each layout element
Layout with Style Set up classes <style type=“text/css”> div.title {…} div.image {…} div.col1 {…} div.col2 {…} div.col3 {…} </style> Set up classes 1 for each physical division Use them to create basic layout
Layout with Style … <style type=“text/css”> div.title { position:absolute; top:0; left:0; height:60; width:600 } </style> … <div class=“title”> … </div>
Layout with Style Example with problem: To Fix: Ch06-Ex-03a.html Ch06-Ex-03.html To Fix: padding – number of pixels between border and text padding: n Up to 4 sides padding: a b c d overflow – whether or not text outside the borders is visible hidden visible Ch06-Ex-03a.html Note difference between IE and Firefox for this example
Layout with Style - Divisions Potential Problems Do your math right for div placements Make sure text fits! Ch06-Ex-03b.html
Using Tables Layout with Tables
Tables Nested tables Insert <table>…</table> within an existing <td>…</td> element
Tables <table> <tr> <table> <td> <tr>
Tables Plain table Ch06-Ex-04.html Nested table Ch06-Ex-05.html
Tables Plain table Nested table Ch06-Ex-04.html Variations on table and cell width: Ch06-Ex-04a.html Ch06-Ex-04b.html Ch06-Ex-04c.html Nested table Ch06-Ex-05.html
Layout with Style - Tables Potential Problems Do your math right for table sizing Make sure text fits! Alignment problems may occur if contents overflow cell size Careful use of absolute cell size vs. proportional sizes
Resume 7/16
Using Frames Layout with frames
Frames Brilliant extension? - Or - Evil plot? Neutral Aren't frames bad? Frames - good or bad? - Or - Evil plot? Why Frames Suck (Most of the Time) Frames: Good or Bad? Why are frames so evil? Neutral The Pros and Cons of Frames
Frames Divide window into separate sections like <div> Except: Each section displays the contents of a separate HTML document Frames may be enabled to: Have scroll bars Be resized
Frames First define a layout or frameset document: <html> <head> </head> <frameset> </frameset> </html> Notice: no <body> !
Frames Define structure using the frameset element Units are: rows attribute cols attribute Units are: Percentage of window size Number of pixels Relative value
Frames Percentage of window size: Number of pixels: <frameset rows=“30%, 40%, 30%”> </frameset> Number of pixels: <frameset cols=“80, 160, 50”>
Frames Relative value: <frameset cols=“80, *, 80”>
Frames Frames can be nested Ch06-Ex-06.html <frameset cols=“50%, 50%”> </frameset> <frameset rows=“50%, 50%”> </frameset> <frameset rows=“33%, 33%, 33%”> </frameset>
Frames <frameset> only specifies structure, not content Content requires a <frame /> tag Each <frame /> tag may have seven attributes
Frames src – The URL of the HTML document that will appear in the frame id – Assigns a name to the frame so it can be referenced by links in other frames marginwidth and marginheight – The size in pixels of the frame’s margins
Frames scrolling yes – The frame will always have scroll bars no – The frame will never have scroll bars auto – The frame lets the browser decide noresize – The user cannot drag the frame edges to resize the frame frameborder=0 – hides the frame’s borders
Frames Define one <frame> tag for each frame: <frameset rows=“50%, 50%”> <frame id=“upper” src=“fred.html” /> <frame id=“lower” src=“sam.html”/> </frameset> Ch06-Ex-07.html
Frames <noframes> element in case user’s browser doesn’t support frames: <frameset …> <frame …> <noframes>This Web page … </noframes> </frameset>
Frames Refresh/Reload button: Reloads frame(s) contents but Does not reload the layout (<frameset>) document To reload a <frameset> have to use menu: File, Open, etc.
Frames Linking between frames: Add target attribute to <a> tag: Click link in one frame See result in another frame Add target attribute to <a> tag: <a href=“…” target=“left_frame”> Click here to … </a> Otherwise content appears in current frame Ch06-Ex-08
Frames Eliminating frames Frameset hierarchy Browser tracks framesets Browser window is at the “top” First <frameset> defined is “down” one level … Browser window 1st frameset
Frames Can set target to _top: Ch06-Ex-10 <a href=“…” target=“_top”>…</a> Ch06-Ex-10
Frames In summary Frames are controversial Frames can be tricky to build and maintain In some (rare) situations Frames are the best (or only) solution
Multiple Windows Layout with Style
Multiple Windows Just like specifying what frame in which to display a document: <a href=“…” target=“fred”> … </a> Opens a new window internally named “fred” If a window is open with the name “fred” that window is used Ch06-Ex-11
Assignment Choose one of the Lab Exercises 6.1 – Using Styles 6.2 – Using Tables 6.3 – Using Frames See Assignment Web Page for Details Grade based on: Appearance Technical correctness of code