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
ltimg src"world-nav1.gif" width"280"
height"300" align"middle" usemap"Map"
border"0"gt ltmap name"Map"gtltarea shape"rect"
coords"112,48,186,73" href"aboutus.html"gt ltarea
shape"rect" coords"116,235,212,263"
href"prices.html"gt ltarea shape"rect"
coords"108,46,109,55" href""gtlt/mapgt
8
Coordinates

• ltmap name"Map"gtltarea shape"rect"
  coords"112,48,186,73"href"aboutus.html"gtlt/mapgt
  
• 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.htm
  l

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 dont 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 ltBODYgt
  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 dont 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

• ltHTMLgtltHEADgtltTITLEgtMy First Stylesheetlt/TITLEgt
  ltSTYLE TYPE"text/css"gtlt!--H1 color blue
  font-size 37px font-family impact P
  text-indent 2cm background yellow
  font-family courier --gtlt/STYLEgt
• lt/HEADgtltBODYgtltH1gtStylesheets You need to learn
  thislt/H1gtltPgtYou can do it!lt/Pgtlt/BODYgtlt/HTMLgt

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 ltPgt text to ltCODEgt and
  ltTABLEgt 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
• ltIgtDont cut yourself on that copy of ltUgtCatcher
  in the Rye .lt/Ugtlt/Igt
• Dont 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 ltpgt
  tag looking one way you can have several
  different styles
• P.first color green P.second color purple
  P.third color gray
• ltP CLASS"first"gtThe first paragraph, with a
  class name of "first."lt/PgtltP CLASS"second"gtThe
  second paragraph, with a class name of
  "second."lt/PgtltP CLASS"third"gtThe third
  paragraph, with a class name of "third."lt/Pgt
• 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/styl
  esheet_guide/
• http//www.w3schools.com/css/css_examples.asp
• http//css.nu/examples/index.html