PPT - Personal Web Pages

Download Report

Transcript PPT - Personal Web Pages 

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