Download presentation
Presentation is loading. Please wait.
1
Programming the Web using XHTML and JavaScript
Chapter 6 Web Page Design and Layout
2
Many Ways to Design Consistent Web Sites
3 typical “easy” methods Styles using <div> Tables Frames Many other possibilities
3
Layout with “Style”
4
Layout with “Style” Emulate a Magazine style
Set height and width for most current monitors: Height = pixels Width = 600 pixels No scrolling required See Figures 6.1 & 6.2, p Modern Update: Height = 500—600 Width = 800
5
Layout with “Style” Title Image Column 3 Column 1 Column 2 500 pixels
6
Using Style Sheets and Divisions
Layout with Style
7
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
8
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
9
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
10
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
11
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
12
Layout with Style … <style type=“text/css”> div.title {
position:absolute; top:0; left:0; height:60; width:600 } </style> … <div class=“title”> … </div>
13
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
14
Layout with Style - Divisions
Potential Problems Do your math right for div placements Make sure text fits! Ch06-Ex-03b.html
15
Using Tables Layout with Tables
16
Tables Nested tables Insert <table>…</table> within an existing <td>…</td> element
17
Tables <table> <tr> <table> <td> <tr>
18
Tables Plain table Ch06-Ex-04.html Nested table Ch06-Ex-05.html
19
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
20
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
21
Resume 7/16
22
Using Frames Layout with frames
23
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
24
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
25
Frames First define a layout or frameset document:
<html> <head> </head> <frameset> </frameset> </html> Notice: no <body> !
26
Frames Define structure using the frameset element Units are:
rows attribute cols attribute Units are: Percentage of window size Number of pixels Relative value
27
Frames Percentage of window size: Number of pixels:
<frameset rows=“30%, 40%, 30%”> </frameset> Number of pixels: <frameset cols=“80, 160, 50”>
28
Frames Relative value: <frameset cols=“80, *, 80”>
29
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>
30
Frames <frameset> only specifies structure, not content
Content requires a <frame /> tag Each <frame /> tag may have seven attributes
31
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
32
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
33
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
34
Frames <noframes> element in case user’s browser doesn’t support frames: <frameset …> <frame …> <noframes>This Web page … </noframes> </frameset>
35
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.
36
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
37
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
38
Frames Can set target to _top: Ch06-Ex-10
<a href=“…” target=“_top”>…</a> Ch06-Ex-10
39
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
40
Multiple Windows Layout with Style
41
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
42
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
Similar presentations
