INP 170

1
INP 170

• Lists, lines, and cursor effects
• Review of frames

2
Midterm approaching

• The midterm is approaching in two weeks!
• Start reviewing material covered
• Bring in questions about midterm next week

3
Assignment 3 due

• Please sign in and include URL to your course page

4
More feedback from assignments ...
5
Objectives

• Controlling list appearance
• Controlling line appearance
• Altering the default cursor

6
list-style-type

• list-style-type
• Purpose set type of list (for both ordered and
  unordered)
• Values disc circle square decimal
  lower-roman upper-roman lower-alpha
  upper-alpha none
• Example ul li ul li list-style-type circle
• Recommendations
• I prefer the list-style shorthand.
• Netscape 4 has extremely limited support
• Try ul li instead of just ul (same for ol)

7
list-style-position

• list-style-position
• Purpose Specify if bullet appears inside text
  space or outside
• Values outside (default), inside
• Example li list-style-positioninside
• Recommendations
• Not terribly useful most designers will stick
  to margin
• Try both out!
• Netscape 4 will safely ignore

8
list-style-image

• list-style-image
• Purpose Used to insert a graphical image as the
  bullet point.
• Example ul list-style-image url(bullet.gif)
• Recommendations
• Netscape 4 will revert to the default bullet
• Browsers will position the image differently, so
  test!

9
list-style

• list-style
• Purpose Controls all previously introduced
  properties
• Format ltlist-style-typegt ltlist-style-positiongt
  ltlist-style-imagegt
• Example ul li list-style disc inside
• Recommendations
• Usually used as a short form of list-style-type

10
Controlling Line Appearance

• border-top, border-right, border-bottom,
  border-left
• Purpose Applying borders to block-level elements
• Values pixel values
• Example div border-left 2px dashed 000
  border-right 2px dotted 000 border-top 1px
  solid ccc border-bottom 4px double ccc
• Recommendations
• Netscape 4 will fail to show the line
• Add nbsp as content (control using font-size)

11
cursor

• cursor
• Purpose Modifying the cursor
• Values crosshair default hand help move
  text n-resize s-resize e-resize
  w-resize nw-resize ne-resize sw-resize
  se-resize wait
• Example div cursor move
• Recommendations
• Not supported by Netscape 4
• Potentially disorienting, so use discretion

12
More with cursors

• ltpgtHTTP is a stateless protocol used by user
  agents, servers, ltspan style"border-bottom 1px
  dashed 000 cursor help"gtlta title"A proxy is
  a user agent acting on the behalf of another user
  agent, usually to make requests or even cache
  files"gtproxieslt/agtlt/spangt, gateways, etc.lt/pgt

13
Practice break ...
14
Frames review

• What are Frames?
• Creating a Frameset
• Additional Attributes for the ltframesetgt tag
• Additional Attributes for the ltframe /gt tag
• Link Targeting and Frames
• Supporting the User with Frames Support
  Disabled/Not Present
• Accessibility and Frames

15
What are Frames?

• Frames are a way of separating parts of a site
  into window panes
• Each pane is a separate (X)HTML document
• The frames are held together using a frameset
• You can create scrollable and non-scrollable
  frames

16
DOCTYPEs and frames

• The frameset uses the frameset DOCTYPE
• lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
  Frameset//EN" "http//www.w3.org/TR/html4/frameset
  .dtd"gt
• The above does two things
• States that a document is a frameset, meaning
  ltframesetgt replaces ltbodygt
• Has the same effect as HTML 4 Transitional
• The frame pages use transitional or strict

17
Rows vs. cols

• You can break your page into rows or cols
• row10
• col50px
• Can use absolute (pixel) values, relative
  (percentage) values, or '', which fills the rest
  of the available space
• If a specified size does not fill the remaining
  space, the browser will ignore the specified size

18
frame

• Within the ltframesetgtlt/framesetgt tags, ltframe /gt
  tags are used to specify frames
• name attribute used to identify the frame
• src attribute used to link the file to the frame

19
Frameset with three rows

• ltframeset rows"100,,100"gt
• ltframe name"navbar" src"nav.html" /gt
• ltframe name"content" src"main.html" /gt
• ltframe name"side" src"blank.html" /gt
• lt/framesetgt

20
Frameset with three columns

• ltframeset cols"20,70,10"gt
• ltframe name"navbar" src"nav.html" /gt
• ltframe name"content" src"main.html" /gt
• ltframe name"side" src"blank.html" /gt
• lt/framesetgt

21
Three rows, two columns

• ltframeset rows"100,,100" cols"70,30"gt
• ltframe name"navbar" src"nav.html" /gt
• ltframe name"navbar2" src"nav2.html" /gt
• ltframe name"content" src"main.html" /gt
• ltframe name"content2" src"main2.html" /gt
• ltframe name"side" src"blank.html" /gt
• ltframe name"side2" src"blank2.html" /gt
• lt/framesetgt

22
Frameset attributes

• frameborder
• bordercolor
• border/framespacing

23
Enabling border

• frameborder
• Purpose Turns on frame borders for every frame
• Values True False 1 0
• Suggestions
• Not a valid member of (X)HTML frameset

24
Frameset bordercolor

• bordercolor
• Purpose change color of border for all frames
• Values predefined color or hexadecimal values
• Example ltframeset bordercolorccc ...gt
• Suggestions
• Not a valid member of (X)HTML frameset

25
border/framespacing

• border/framespacing
• Purpose Sets border size (border is for
  Netscape framespacing is for IE)
• Values border width in pixels
• Suggestions
• Set to 0 to disable borders
• Not a valid member of (X)HTML frameset

26
Frame attributes

• marginwidth
• marginheight
• scrolling
• bordercolor
• noresize

27
marginwidth

• marginwidth
• Purpose set left and right margins on a
  particular frame
• Values pixel values

28
marginheight

• marginheight
• Purpose set top and bottom margins of a
  particular frame
• Values pixel values

29
scrolling

• scrolling
• Purpose Control whether or not scroll bar
  appears
• Values auto (default) yes no
• Suggestions
• IE is buggy when it comes to this attribute

30
bordercolor

• bordercolor
• Purpose Set border color of a particular frame
• Values predefined colors or hexadecimal value

31
noresize

• noresize
• Purpose Normally, a user can resize a frame by
  dragging on the border. This disables this
  feature.
• Values noresize
• Example ltframe noresizenoresize ... /gt

32
Link targeting and frames

• The name attribute is used to control which pages
  open in which frames
• Say we a have a frame called main
• To open a link in main, we'd use lta
  hrefpage.html targetmaingt...lt/agt
• So, as you can see, the only thing that is added
  in the regular (i.e., non-frameset) (x)HTML is
  the target attribute in links!

33
_self

• If a target is not specified, then the target
  will open in the same frame
• That is because the default target is _self

34
Four standard target values

• _blank
• Linked file opens in new window
• _self
• Opens in same window/frame
• _top
• Opens in same window, but frameset is replaced by
  entire page
• _parent
• Linked file replaces a nested frame

35
noframes

• ltnoframesgtlt/noframesgt
• Where Go within the ltframesetgtlt/framesetgt tags
• How Put ltbodygtlt/bodygt within the noframes tags,
  and type a message stating that the site requires
  frames.

36
longdesc

• longdesc
• Purpose Textual description of content of
  frames, especially useful for screen readers
• Values Textual description
• Example ltframe longdescThis page contains
  information about last year's participants, such
  as referrals and contact information ... /gt

37
Only link to web pages

• Only link to (X)HTML pages within frames
• Alt tags are disabled when images are directly
  linked using a ltframe /gt
• Instead, create a page to hold the image, then
  link to that

38
Practice break ...
39
For next week ...

• Homework 4
• Bring in questions about midterm