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."