Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download PPT - Personal Web Pages
Document related concepts
Transcript
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 3
Column 1
Column 2
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 rows=“50%, 50%”>
</frameset>
<frameset rows=“33%, 33%, 33%”>
</frameset>
</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
