Upload
kyros
View
111
Download
1
Tags:
Embed Size (px)
DESCRIPTION
Web Page Layout. www3. 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. Café Segovia. colspan=“2”. - PowerPoint PPT Presentation
Citation preview
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é 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> </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 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ñ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