Web Page Layout

www3 1

Web Page LayoutWeb Page Layout

www3www3

www3 2

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 3

Café Segovia

Location

Our Coffees

Menu

Take Out

Catering

Contact Us

Café Segovia del Norte

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

Contact Us

Café Segovia del Norte

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

colspan=“2”

www3 4

Café Segovia

Location

Our Coffees

Menu

Take Out

Catering

Contact Us

Café Segovia del Norte

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

<table><tr><td colspan=“2” bgcolor=“#663300”><font size=“+2” color=“#ffcc99”>Caf&eacute; Segovia del Norte</font></td></tr><tr><td bgcolor=“#996600”><font color=“#cccc99”>Location<br />Our Coffees<br /> Menu<br />Take Out<br />Catering<br />Contact Us</font></td><td bgcolor=“#cccc99”><center><img src=“cup.gif” width=“100” height=“100” alt=“cup”/></center>Blah blah blah</td></tr></table>

www3 5

Control over tables is limited

Location

Our Coffees

Menu

Take Out

Catering

Contact Us

Café Segovia del Norte

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

Contact Us

Café Segovia del Norte

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

www3 6

Table Column Width

• Table column widths are assigned in proportion to the length of the contents

• (Length of the longest line)

aaa ccccccccc

bbb

www3 7

Table Column Width

• Table cells expand to accommodate images

• Images can be used to force a column or row to be a minimum size

aaa ccccccccc

bbb

www3 8

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 9

Table attributes

• 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”

• Some attributes can be used in tables, but their support and implementation may vary wildly from browser to browser

www3 10

www3 11

Slices

• Sliced up images spread over many table cells are often used to page layout

• Individual images can be clicked for navigation

www3 12

HyperMegaGlobal Corp.Services StaffProducts Locations

Fh fhdfdsfjh dff fd jhg f jhg fjkg fhg ueydfg ewrhti5u35 dfgfgdf ert fdfg oiutyfdlkjsd ugher ui4sdf dfgoiq3 jkg fhg ueydfg ewrhti5u35 dfgfgdf ert fdfg oiutyfdlkjsd ugher ui4sdf dfgoiq3 jg jhg fjkg fhg ueydfg ewrhti5u35 dfgfgdf ert fdfg oiutyfd jhg fjkg fhg ueydfg ewrhti5u35 dfgfgdf ert fdfg oiutyfdlkjsd ugher ui4sdf dfgoiq3 lkjsd ugher ui4sdf dfg

oiq3 iug

Navigation Bars

• Navigation bars are often used to at the front door of a site to link to major sections

• Section names should be chosen carefully

www3 13

Fh fhdfdsfjh dff fd jhg f jhg fjkg fhg ueydfg ewrhti5u35 dfgfgdf ert fdfg oiutyfdlkjsd ugher ui4sdf dfgoiq3 jkg fhg ueydfg ewrhti5u35 dfgfgdf ert fdfg oiutyfdlkjsd ugher ui4sdf dfgoiq3 jg jhg fjkg fhg ueydfg ewrhti5u35 dfgfgd

Navigation Bars

<table width=“400” cellspacing=“0” cellpadding=“0” bgcolor=“#cccc99”><tr><td>&nbsp;</td><td>&nbsp;</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 height=“40” /></a></td></tr><tr><td colspan=“4”>blah blah blah</td></tr></table>

HyperMegaGlobal Corp.Services StaffProducts Locations

www3 14

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 15

Server Side Image Maps• 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

Co-ordinates

Script figuresout what to do

User

URL

www3 16

Client Side Image Maps

• 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

User

URL

www3 17

Client Side Image Maps

• Client side images maps specify the co-ordinates of rectangles, circles, and polygons

• And a default

www3 18

< area shape=“rect” coords=“65, 120, 106, 171” href=“ireland.html”/>

65, 120

106, 171

www3 19

< area shape=“circle” coords=“210, 160, 40” href=“n-europe.html”/>

210,160 40

www3 20

< area shape=“poly” coords=“75, 250, 150, 220, 200, 300, 50, 350” href=“iberia.html”/>

75, 250

200, 300

50, 350

150, 220

www3 21

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 22

Frames

• Frames are used to divide the browser into separate areas

• Each frame can load a separate HTML document

• Each frame scrolls independently

www3 23

Frames

• One of the frames is usually used as a navigation bar

• The content can be loaded in other frames while the navigation bar remains constant

www3 24

<html>

<head>

<title>Frames Test</title>

</head>

<frameset cols="75,*">

<frame src="frame1.html">

<frame src="frame2.html">

</frameset>

<noframes>

Sorry! You need a frames-enabled browser to view this page correctly.

</noframes>

</html>

75 pixels

www3 25

<html><head><title>Frames Test</title></head><frameset rows="50,*"><frame src="header.html"><frameset cols=“175,*" ><frame src="trc1.html" name="tapas-

list"><frame src="trc2.html"

name="recipe"></frameset></frameset></html>

www3 26

<frameset rows="50,*"><frame src="header.html"><frameset cols="175,*" ><frame src="trc1.html" name="tapas-list” scrolling=“no”><frame src="trc2.html" name="recipe"></frameset></frameset>

www3 27

<html>

<head>

<title>Frames Test</title>

</head>

<body bgcolor="#996600" text="#cccc99">

<h3>Tapas</h3><br />

<a href="tortilla.html" target="recipe">Spanish Omlette</a>

<br />

Bu&ntilde;uelos de Bacalao<br />

<a href="squid.html" target="recipe">Squid</a>

<br />

Pulpo a la Gallega<br />

Baby Eel Tartlets<br />

Chorizo<br />

Links can be targeted to a specific named frame