HCI 201 Week 6

Client Side Image Maps

Introduction to CSS

Agenda

Image Maps

Image maps are used extensively on the World Wide Web.

Each hot spot in a Web image map takes you to a different Web page.

An image map is a visually oriented navigation table. For instance you have a picture of a bowl of fruit.

When you click on each fruit type the embedded link takes you to a page that gives you all of the nutritional info on that fruit as well as swerving suggestions and places to buy that kind of fruit.

Each picture/piece of fruit has its own page.

Image Maps

Image maps can be server or client side Server side means that all of the info is kept on the

server- requires a CGI program (common gateway interface) and is not the method we will be using.

Client side image maps rely on html, and the x and y info of geometry.

The x axis is the horizontal axis and the y axis is the vertical axis.

The client side map is much more efficient than the server side.

This is the type we will be working with

Image Maps

To make an image map you need All of the URLs you want to link to

Do they need to be relative or absolute?

An image large enough to house all the links A image mapping program

http://www.boutell.com/mapedit/ this one is $10

OR an image editing program that can assist you with determining x and y coordinates

http://www.jasc.com/download_4.asp? This one has a free trial period

Image Map

The map is a series or grid of points You determine what kind of shape you want

placed on the image to create the boundaries of the link- do you want a circular area? Rectangular? Polygon? You use the map program to assist you with setting

up the points for the links

<img src="world-nav1.gif" width="280" height="300" align="middle" usemap="#Map" border="0">

<map name="Map"><area shape="rect" coords="112,48,186,73" href="aboutus.html">

<area shape="rect" coords="116,235,212,263" href="prices.html">

<area shape="rect" coords="108,46,109,55" href="#"></map>

Taken from this examplehttp://condor.depaul.edu/~sberger/hci201/imagemap/iindex.html

Coordinates

<map name="Map"><area shape="rect" coords="112,48,186,73"href="aboutus.html"></map>

Map name denotes that the coordinates belong to the map

AREA denotes that this is a new section of the map. SHAPE denoted the shape you used. The map

program will tell you all this. HREF denotes the URL this section points to. /MAP closes the image map

Image Map Resources

http://www.webcom.com/html/tutor/imagemaps.shtml

http://www.ihip.com/cside.html http://htmlgoodies.earthweb.com/tutors/cs

_imap.html

CSS

From Webopedia.com Short for Cascading Style Sheets, a new feature being added

to HTML that gives both Web site developers and users more control over how pages

are displayed. With CSS, designers can create style sheets that define how

different elements, such as headers and links, appear. These style sheets can then be applied to any Web page. The term cascading derives from the fact that multiple style

sheets can be applied to the same Web page. CSS was developed by the W3C.

Cascading Style Sheets

Why? More precise than html Able to create one coded document and

effect countless other WebPages with it Compatibility across browsers and platforms

(sometimes) Less code Smaller pages Faster download times

Cascading Style Sheets

They separate form and structure Precise control of layout

example Smaller faster pages Update pages much faster Ideally is browser friendly

CSS vs. HTML HTML defines structure and function of elements- it

allows the browsers to determine the appearance This is a lack of control that many designers do not like

CSS defines the form and appearance You can control things like exact font size in terms of

measured heights You use less code than in HTML You don’t need crazy tables to position exactly as you

would like Less code means smaller pages and faster download

times

CSS Benefits

You can control the layout of an entire website, be it a five page site or 500 page site with one CSS document Instead of updating each page individually-

update the single CSS page and all the subsidiary html pages “point” to the CSS page

CSS Consists Of

Rules- these are statements that control layout. They consist of Selectors and declarations Selectors = the htl that the styles are attached

to Declarations defines wha the style actually

consists of . Declarations consist of Properties(for instance “color” and values (for instance “green”)

Ways to Apply CSS

Embed a style sheet in the head of the HTML document (what you will do for hw 5) All the stylesheets information lives at the top of the

HTML document, separated from the <BODY> of the HTML code.

Using the embedded format means that browsers honor them for the length of the HTML page.

You embed when you want to control the look of one page at a time

Ways to Apply CSS Link to an external style sheet from the HTML- This is the most powerful type of stylesheet This is the type that lets you control an entire site of

unlimited size with one document You can change the font size in the stylesheets file

and all of your pages will instantly reflect that change.

If you maintain a large site, this feature for you. If you use the linking method you cannot use the

other methods

Ways to Apply CSS

Import an external style sheet into the html Importing an external stylesheet works

similarly to linking. The difference is you can combine

importing with other methods.

Ways to Apply CSS

Add styles inline in the html You can also add styles inline, This means inserting stylesheets rules right in

the middle of all your HTML. You don’t put stylesheets code in the head

section. This application requires that you input the CSS

code every time you want to affect a change- not very efficient in terms of workload.

The Code

<HTML><HEAD><TITLE>My First Stylesheet</TITLE> <STYLE TYPE="text/css"><!--H1 { color: blue; font-size: 37px; font-family: impact }P { text-indent: 2cm; background: yellow; font-family: courier }--></STYLE>

</HEAD><BODY><H1>Stylesheets: You need to learn this</H1><P>You can do it!</P></BODY></HTML>

What It Means This is a rule H1 { color: blue; font-size: 37px; font-family:

impact } H1 is the selector -It's the HTML tag that the style is being

attached to. Any HTML tag can be used as a selector. The declaration defines what the style actually is, and it

also consists of two parts: the property - color and the value –blue Since HTML tag can be used as a selector you can

attach stylesheet information to any kind of element, from normal <P> text to <CODE> and <TABLE> content.

What It Means

Inheritance- this means that if you have one thing bundled within another, both sets of elements will be treated the same unless you specify otherwise. What happens to the parent happens to the child

Ex: you have specified that all italic code must be red, and then within an italicized section you have underlined text, the underlined text will also be red.

I { color: red } <I>Don’t cut yourself on that copy of <U>Catcher in the

Rye .</U></I>

Don’t cut yourself on that copy of Catcher in the Rye.Is how the line would appear

Classes

You can create separate categories- or ways of presenting the same type of information- for instance instead of all things with the <p> tag looking one way you can

have several different styles P.first { color: green }

P.second { color: purple }P.third { color: gray }

<P CLASS="first">The first paragraph, with a class name of "first."</P><P CLASS="second">The second paragraph, with a class name of "second."</P><P CLASS="third">The third paragraph, with a class name of "third."</P>

The first paragraph, with a class name of "first.“ The second paragraph, with a class name of "second.“ The third paragraph, with a class name of "third."

CSS Resources

http://hotwired.lycos.com/webmonkey/reference/stylesheet_guide/

http://www.w3schools.com/css/css_examples.asp

http://css.nu/examples/index.html