HCI 201 Week 6

1. HCI 201 Week 6 Client Side Image Maps Introduction to CSS

2. Agenda

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

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

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

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

7. Taken from this examplehttp://condor.depaul.edu/~sberger/hci201/imagemap/iindex.html <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>

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

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

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

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

12. Cascading Style Sheets • They separate form and structure • Precise control of layout • example • Smaller faster pages • Update pages much faster • Ideally is browser friendly

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

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

15. 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”)

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

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

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

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

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

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

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

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

24. CSS Resources • http://hotwired.lycos.com/webmonkey/reference/stylesheet_guide/ • http://www.w3schools.com/css/css_examples.asp • http://css.nu/examples/index.html