Web Page Layout

Web Page Layout
www3
www3
1
1
Advanced Tables
• Tables are usually required if you want
to apply a complex layout to a webpage
• You have to be confident with colspan
and rowspan to make it work
• Proper planning on paper is important.
Boxed paper is very handy
www3
2
2
Café Segovia
colspan=“2”
Café Segovia del
Norte
Café Segovia del
Norte
Location
Location
Our Coffees
Our Coffees
Menu
Menu
Take Out
Catering
Contact Us
Hola!
Blah blah blah blah blah
blah blah los cafes
mejores del mundo blah
blah blah blah blah blah
blah blah blah blah blah
blah
Take Out
Catering
Contact Us
www3
Hola!
Blah blah blah blah blah
blah blah los cafes
mejores del mundo blah
blah blah blah blah blah
blah blah blah blah blah
blah
3
3
Café Segovia
<table>
<tr>
<td colspan=“2” bgcolor=“#663300”>
<font size=“+2” color=“#ffcc99”>
Café Segovia del Norte
Café Segovia del
</font></td>
Norte
</tr>
<tr>
<td bgcolor=“#996600”>
<font color=“#cccc99”>Location<br />
Location
Our Coffees<br /> Menu<br />Take Out
Our Coffees
<br />Catering<br />Contact Us
Menu
</font></td>
Hola!
Take Out
<td bgcolor=“#cccc99”><center>
Blah blah blah blah blah
Catering
<img src=“cup.gif” width=“100” height=“100” alt=“cup”/>
blah blah los cafes
Contact Us
</center>
mejores del mundo blah
Blah blah blah
blah blah blah blah blah
</td>
blah blah blah blah blah
blah
</tr>
</table>
www3
4
4
Café Segovia
del Norte
Control over tables is
limited
Café Segovia del
Norte
Location
Our
Coffees
Menu
Take
Out
Catering
Contact
Us
Hola!
Blah blah
blah blah
blah blah
blah los
cafes
mejores del
mundo blah
blah blah
blah blah
blah blah
blah blah
blah blah
blah
Location
Our Coffees
Menu
Take Out
Catering
Hola!
Blah blah blah blah blah blah blah los cafes
mejores del mundo blah blah blah blah blah blah
blah blah blah blah blah blah
Contact Us
www3
5
5
Table Column Width
aaa
ccccccccc
bbb
• Table column
widths are
assigned in
proportion to the
length of the
contents
•
www3
(Length of the longest line)
6
6
Table Column Width
aaa
ccccc
cccc
bbb
• Table cells expand
to accommodate
images
• Images can be
used to force a
column or row to
be a minimum size
www3
7
7
Notorious OPG
• Many web page
designers use One
Pixel GIFs to create
space on a page
• Very small
• Same colour as
background or
transparent
• Resized dynamically
www3
8
8
Table attributes
• Some attributes can be used in tables, but
their support and implementation may vary
wildly from browser to browser
•
•
•
•
•
•
table width=“500” table 500 pixels
table width =“50%” half the window width
td width = “200”
tr height = “100”
td bgcolor=“#ff00fff”
tr background=“pattern.gif”
www3
9
9
www3
10
10
Slices
• Sliced up images
spread over many
table cells are often
used to page layout
• Individual images can
be clicked for
navigation
www3
11
11
Navigation Bars
HyperMegaGlobal Corp
Products
Services
Staff
Locations
Fh fhdfdsfjh dff fd jhg f jhg fjkg fhg ueydfg ewrhti5u35 dfgfgd
f ert fdfg oiutyfdlkjsd ugher ui4sdf dfgoiq3 jkg fhg ueydfg ewrhti5
u35 dfgfgd
f ert fdfg oiutyfdlkjsd ugher ui4sdf dfgoiq3 jg jhg fjkg fhg ueydfg ew
rhti5u35 dfgfgd
f ert fdfg oiutyfd jhg fjkg fhg ueydfg ewrhti5u35 dfgfgd
f ert fdfg oiutyfdlkjsd ugher ui4sdf dfgoiq3 lkjsd ugher ui4sdf dfg
.
• Navigation bars are
often used to at the
front door of a site to
link to major sections
• Section names
should be chosen
carefully
oiq3 iug
www3
12
12
HyperMegaGlobal Corp
Products
Services
Staff
Locations
Fh fhdfdsfjh dff fd jhg f jhg fjkg fhg ueydfg ewrhti5u35 dfgfgd
f ert fdfg oiutyfdlkjsd ugher ui4sdf dfgoiq3 jkg fhg ueydfg ewrhti5
u35 dfgfgd
f ert fdfg oiutyfdlkjsd ugher ui4sdf dfgoiq3 jg jhg fjkg fhg ueydfg ew
.
Navigation
Bars
<table width=“400” cellspacing=“0” cellpadding=“0” bgcolor=“#cccc99”>
<tr>
<td> </td><td> </td>
<td colspan=“2”>HyperMegaGlobal Corp.</td></tr>
<tr>
<td width=“100”><a href=“products.html”><img src=“prod.jpg”width=“100
height=“40” /></a></td>
<td width=“100”><a href=“services.html”><img src=“serv.jpg”width=“100
height=“40” /></a></td>
<td width=“100”><a href=“staff.html”><img src=“staf.jpg”width=“100
height=“40” /></a></td>
<td width=“100”><a href=“locations.html”><img src=“loca.jpg”width=“100
www3
13
13
Image Maps
• Image Maps allow
hotspots to be
defined on areas
of an image file
• Image maps can
be client side and
server side
www3
14
14
Server Side Image Maps
User
•
•
•
Co-ordinates
URL
•
User clicks on image
Co-ordinates of click are sent
by browser to the server
Server determines what URL
send user
This requires a special script to
be running on the server. Many
web-hosting companies are
cautious about user-defined
code
Script figures
out what to do
www3
15
15
Client Side Image Maps
URL
User • User clicks on image
• The browser executes
code that determines if
the location clicked is a
hot spot
• it follows the link
• No special interaction with
the server is required. The
client (browser) does all
the work
www3
16
16
Client Side Image Maps
• Client side images
maps specify the
co-ordinates of
rectangles, circles,
and polygons
• And a default
www3
17
17
65, 120
< area shape=“rect” coords=“65,
120, 106, 171”
href=“ireland.html”/>
106, 171
www3
18
18
< area shape=“circle” coords=“210, 160,
40” href=“n-europe.html”/>
210,160
40
www3
19
19
< area shape=“poly” coords=“75, 250, 150,
220, 200, 300, 50, 350” href=“iberia.html”/>
150, 220
75, 250
200, 300
50, 350
www3
20
20
Client Side Image Maps
•
•
•
•
•
•
•
<head>
<map name=“euro-night”>
<area shape=“rect” coords=“65, 120,
106, 171” href=“ireland.html”/>
<area shape=“circle” coords=“210, 160,
40” href=“n-europe.html”/>
<area shape=“poly” coords=“75, 250,
150, 220, 200, 300, 50, 350”
href=“iberia.html”/>
</map>
</head>
<img usemap=“#euro-night” src=“nasa-europe-night.jpg”/>
www3
21
21