Download Economic and Computational Efficient Algorithms for a

Layout with Style
Layout with Tables
Frames and Multiple Windows
CSCE 102 - General Applications
Programming
By
Benito Mendoza
Department of
Computer Science & Engineering
2017/5/23
Benito Mendoza
CSCE 102 – Chapter 6 (Web Design and Layout)
1
Layout with Style
Layout with Tables
Frames and Multiple Windows
The goal of this chapter is to learn how to
segment content in the browser window.
Three different methods exist:
style rules,
tables, and
frames.
All can be used to create complex layouts
like the often-used magazine-style
configuration.
2017/5/23
Benito Mendoza
CSCE 102 – Chapter 6 (Web Design and Layout)
2
Layout with Style
Layout with Tables
Frames and Multiple Windows
Curiously, tables, are used by many web
designers to organize information on the
page because of their near universal
support.
The concept of frames is introduced
which allows more than one document to
be loaded and viewed in the browser
window at the same time.
Finally, we show how to open new
document windows.
2017/5/23
Benito Mendoza
CSCE 102 – Chapter 6 (Web Design and Layout)
3
Layout with Style
Layout with Tables
Frames and Multiple Windows
Normal flow
Creating an Internal Style Sheet
Experimenting with Colors
Changing the Alignment
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
Benito Mendoza
CSCE 102 – Chapter 6 (Web Design and Layout)
4
Layout with Style
Layout with Tables
Frames and Multiple Windows
Layout with Style
Creating an Internal Style Sheet
Experimenting with Colors
Changing the Alignment
<style type=”text/css”>
img.tower {position:absolute; top:75;
left:150}
</style>
…
<img class=“tower” src=“eiffel.jpg” />
…
Benito Mendoza
CSCE 102 – Chapter 6 (Web Design and Layout)
5
Layout with Style
Layout with Tables
Frames and Multiple Windows
Creating an Internal Style Sheet
Experimenting with Colors
Changing the Alignment
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!
Benito Mendoza
CSCE 102 – Chapter 6 (Web Design and Layout)
6
Layout with Style
Layout with Tables
Frames and Multiple Windows
Magazine style
Creating an Internal Style Sheet
Experimenting with Colors
Changing the Alignment
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
Benito Mendoza
CSCE 102 – Chapter 6 (Web Design and Layout)
7
Layout with Style
Layout with Tables
Frames and Multiple Windows
Creating an Internal Style Sheet
Experimenting with Colors
Changing the Alignment
Title
Image
Column 3
Column 1
500
pixels
Column 2
600 pixels
Benito Mendoza
CSCE 102 – Chapter 6 (Web Design and Layout)
8
Layout with Style
Layout with Tables
Frames and Multiple Windows
Using <div>
Creating an Internal Style Sheet
Experimenting with Colors
Changing the Alignment
Use <div> element
Define a custom block-level element for
each section of the layout
Benito Mendoza
CSCE 102 – Chapter 6 (Web Design and Layout)
9
Layout with Style
Layout with Tables
Frames and Multiple Windows
Layout with Style
Creating an Internal Style Sheet
Experimenting with Colors
Changing the Alignment
<style type=“text/css”>
div.title {…}
div.image {…}
div.col1 {…}
div.col2 {…}
div.col3 {…}
</style>
Benito Mendoza
CSCE 102 – Chapter 6 (Web Design and Layout)
10
Layout with Style
Layout with Tables
Frames and Multiple Windows
Layout with Style
Creating an Internal Style Sheet
Experimenting with Colors
Changing the Alignment
<style type=“text/css”>
div.title {position:absolute;
top:0; left:0; height:60;
width:600
}
</style>
…
<div class=“title”> … </div>
…
Benito Mendoza
CSCE 102 – Chapter 6 (Web Design and Layout)
11
Layout with Style
Layout with Tables
Frames and Multiple Windows
Creating an Internal Style Sheet
Experimenting with Colors
Changing the Alignment
Padding and Overflow
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
Benito Mendoza
CSCE 102 – Chapter 6 (Web Design and Layout)
12
Layout with Style
Layout with Tables
Frames and Multiple Windows
Nested Tables
Insert <table>…</table> within an
existing <td>…</td> element
<table>
<tr>
<td>
</td>
<td>
</td>
</tr>
</table>
Benito Mendoza
<table>
<tr>
<td>
</td>
<td>
</td>
</tr>
</table>
CSCE 102 – Chapter 6 (Web Design and Layout)
13
Layout with Style
Layout with Tables
Frames and Multiple Windows
Tables
Plain table
Ch06-Ex-05.html
Nested table
Ch06-Ex-06.html
Benito Mendoza
CSCE 102 – Chapter 6 (Web Design and Layout)
14
Layout with Style
Layout with Tables
Frames and Multiple Windows
Frames
Multiple Windows
Divide window into separate sections like
<div>
Each section displays the contents of a
separate HTML document
Frames may:
Have scroll bars
Be resized
Benito Mendoza
CSCE 102 – Chapter 6 (Web Design and Layout)
15
Layout with Style
Layout with Tables
Frames and Multiple Windows
Frames
Multiple Windows
Frames
First define a layout or frameset document:
<html>
<head>
</head>
<frameset>
</frameset>
</html>
Benito Mendoza
CSCE 102 – Chapter 6 (Web Design and Layout)
16
Layout with Style
Layout with Tables
Frames and Multiple Windows
Frames
Multiple Windows
Define structure using the frameset
element
rows attribute
cols attribute
Units are:
Percentage of window size
Number of pixels
Relative value
Benito Mendoza
CSCE 102 – Chapter 6 (Web Design and Layout)
17
Layout with Style
Layout with Tables
Frames and Multiple Windows
Frames
Multiple Windows
Frames
Percentage of window size:
<frameset rows=“30%, 40%, 30%”>
</frameset>
Number of pixels:
<frameset cols=“80, 160, 50”>
</frameset>
Benito Mendoza
CSCE 102 – Chapter 6 (Web Design and Layout)
18
Layout with Style
Layout with Tables
Frames and Multiple Windows
Frames
Multiple Windows
Relative value:
<frameset cols=“80, *, 80”>
</frameset>
Benito Mendoza
CSCE 102 – Chapter 6 (Web Design and Layout)
19
Layout with Style
Layout with Tables
Frames and Multiple Windows
Frames
Multiple Windows
Frames can be nested
<frameset cols=“50%, 50%”>
<frameset rows=“50%, 50%”>
</frameset>
<frameset rows=“33%, 33%, 33%”>
</frameset>
</frameset>
Benito Mendoza
CSCE 102 – Chapter 6 (Web Design and Layout)
20
Layout with Style
Layout with Tables
Frames and Multiple Windows
Frames
Multiple Windows
<frameset> only specifies structure, not
content
Content requires a <frame /> tag
Each <frame /> tag may have seven
attributes
Benito Mendoza
CSCE 102 – Chapter 6 (Web Design and Layout)
21
Layout with Style
Layout with Tables
Frames and Multiple Windows
Frames
Multiple Windows
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
Benito Mendoza
CSCE 102 – Chapter 6 (Web Design and Layout)
22
Layout with Style
Layout with Tables
Frames and Multiple Windows
Frames
Multiple Windows
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
Benito Mendoza
CSCE 102 – Chapter 6 (Web Design and Layout)
23
Layout with Style
Layout with Tables
Frames and Multiple Windows
Frames
Multiple Windows
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
Benito Mendoza
CSCE 102 – Chapter 6 (Web Design and Layout)
24
Layout with Style
Layout with Tables
Frames and Multiple Windows
Frames
Multiple Windows
<noframes> element in case user’s
browser doesn’t support frames:
<frameset …>
<frame …>
<noframes>This Web page … </noframes>
</frameset>
Benito Mendoza
CSCE 102 – Chapter 6 (Web Design and Layout)
25
Layout with Style
Layout with Tables
Frames and Multiple Windows
Frames
Multiple Windows
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.
Benito Mendoza
CSCE 102 – Chapter 6 (Web Design and Layout)
26
Layout with Style
Layout with Tables
Frames and Multiple Windows
Frames
Multiple Windows
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
Benito Mendoza
CSCE 102 – Chapter 6 (Web Design and Layout)
27
Layout with Style
Layout with Tables
Frames and Multiple Windows
Frames
Multiple Windows
Eliminating frames
Frameset hierarchy
Browser tracks framesets
Browser window is at the “top”
First <frameset> defined is “down” one level …
Browser window
1st frameset
Benito Mendoza
CSCE 102 – Chapter 6 (Web Design and Layout)
28
Layout with Style
Layout with Tables
Frames and Multiple Windows
Frames
Multiple Windows
Can set target to _top:
<a href=“…” target=“_top”>…</a>
Ch06-Ex-10
Benito Mendoza
CSCE 102 – Chapter 6 (Web Design and Layout)
29
Layout with Style
Layout with Tables
Frames and Multiple Windows
Frames
Multiple Windows
Multiple Windows
Just like specifying what frame in which to
display a document:
<a href=“…” target=“fred”> … </a>
Ch06-Ex-11
Benito Mendoza
CSCE 102 – Chapter 6 (Web Design and Layout)
30