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 http://www.boutell.com/mapedit/ 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 http://www.jasc.com/download_4.asp

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 example http://condor.depaul.edu/~sberger/hci201/imagemap/ii ndex.html http://condor.depaul.edu/~sberger/hci201/imagemap/

8. Coordinates 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/image maps.shtml http://www.webcom.com/html/tutor/image maps.shtml http://www.ihip.com/cside.html http://htmlgoodies.earthweb.com/tutors/cs _imap.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 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 My First Stylesheet Stylesheets: You need to learn this You can do it!

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 text to and 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 } Don’t cut yourself on that copy of Catcher in the Rye. 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 tag looking one way you can have several different styles P.first { color: green } P.second { color: purple } P.third { color: gray } 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." 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/refe rence/stylesheet_guide/ http://hotwired.lycos.com/webmonkey/refe rence/stylesheet_guide/ http://www.w3schools.com/css/css_examp les.asp http://www.w3schools.com/css/css_examp les.asp http://css.nu/examples/index.html