Web-based Application Development Lecture 7 January 31, 2006 Anita Raja.
Web-based Application Development Lecture 9 February 7, 2006 Anita Raja.
32
Web-based Application Development Lecture 9 February 7, 2006 Anita Raja
-
date post
19-Dec-2015 -
Category
Documents
-
view
214 -
download
0
Transcript of Web-based Application Development Lecture 9 February 7, 2006 Anita Raja.
Web-based Application Development
Lecture 9
February 7, 2006
Anita Raja
Programming the Web using XHTML and JavaScript
Chapter 6
Web Page Design and Layout
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
<style type=”text/css”>
img.tower {position:absolute; top:75;
left:150}
</style>
Layout with Style
…
<img class=“img.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 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
Title
Image
Column 1 Column 2
Column 3
600 pixels
500 pixels
Layout with Style Use <div> element Define a custom block-level element for
each section of the layout
Layout with Style
<style type=“text/css”> div.title {…} div.image {…} div.col1 {…} div.col2 {…} div.col3 {…}</style>
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 Ch06-Ex-03.html padding – number of pixels between
border and text (padding n or padding x y) overflow – whether or not text outside the
borders is visible hidden visible
Ch06-Ex-03a.html
Tables Nested tables Insert <table>…</table> within an
existing <td>…</td> element
Tables<table>
<tr> <td> </td> <td> </td>
</tr></table>
<table><tr>
<td> </td> <td> </td>
</tr></table>
Tables Plain table
Ch06-Ex-04.html
Nested table Ch06-Ex-05.html
Frames Divide window into separate sections
like <div> Each section displays the contents of a
separate HTML document Frames may:
Have scroll bars Be resized
Frames First define a layout or frameset document:
<html>
<head>
</head>
<frameset>
</frameset>
</html>
Frames Define structure using the frameset
element rows attribute cols attribute
Units are: Percentage of window size Number of pixels Relative value
Frames Percentage of window size:
<frameset rows=“30%, 40%, 30%”>
</frameset> Number of pixels:
<frameset cols=“80, 160, 50”>
</frameset>
Frames Relative value:
<frameset cols=“80, *, 80”>
</frameset>
Frames Frames can be nested
<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 Include 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: 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:
<a href=“…” target=“_top”>…</a>
Ch06-Ex-10
Multiple Windows Just like specifying what frame in which
to display a document:
<a href=“…” target=“fred”> … </a>
Ch06-Ex-11
Assignment Debugging Exercise, p. 174 Correct errors Post corrected document to your Web
space as “Lagerstrom-Ch-6.html” Grade based on:
Appearance Technical correctness of code
