WWWOptions, WebOPAC, and Stylesheets

1
WWWOptions, WebOPAC, and Stylesheets

• Presented by Don Zhou
• William Mitchell College of Law
• Fall 2003

2
WWWOptions

• a set of system options that control the display
  parameters, record display, buttons and functions
  of search results in the Web OPAC.

3
WWWOptions---Tricks

• You can get other libraries WWWOption files by
  using the following command
• http//thelibrary/screens/wwwoptions

4
WWWOptions---Tricks Example

• To get St. Olafs WWWOption
• http//library.stolaf.edu/screens/wwwoptions
• To get Carletons WWWOption
• http//muse.library.carleton.edu/screens/wwwoption
  s
• To get CLICs WWWOption
• http//clicnet.clic.edu/screens/wwwoptions
• And so on..

5
WWWOptions---Tricks Saving

• Do not print or save from the web browser screen
• Click on View Source on the web browser and
  either save or print from the editor that is used
  by the web browser

6
WWWOptionsView Source
7
(No Transcript)
8
WWWOptionsDisplay Parameters

• Search results and record displays are dynamic.
  The parameters are controlled by settings in the
  WWWOptions file

9
TOPLOGO_at_screens/wmtoplogo.html
SUPPRESS_OPTIONSHOWSIM
OFFER_HISTORYtrue
DROP_DOWNatdXc
10
SORT_BROWSErYEARtTITLEaAUTHORnCALL
NUMBERmMATERIAL TYPE
11
WWWOptions--Repeat

• TOPLOGO_at_screens/wmtoplogo.html
• SUPPRESS_OPTIONSHOWSIM
• The buttons name can be located at manual
  102169
• OFFER_HISTORYtrue
• DROP_DOWNatdXc

12
WWWOptionsGeneral Display ltbodygt tag

• Normal html code
• ltBODY bgcolorFFFFFF" text"red" link"yellow"
  alink"orange" vlink"white"gt
• In WWWOptions
• BODYPARAMBGCOLORFFFFFF leftmargin"0"
  topmargin"0" marginwidth"0" marginheight"0

13
WWWOptionsGeneral Display ltbodygt tag --II

• Any attributes used with ltbodygt tags can be used
  here
• Some examples

14
Javascript and body tag

• You can even add javascript in the body tag
• onLoad"MM_preloadImages('/screens/muses2.jpg')
  Carleton example
• To get the cursor in the first search box
  onLoad"document.forms0.SEARCH.focus()
  document.forms0.SEARCH.select()

15
Browse Table Borders?
TABLEPARAM_BROWSEltscreengtltsearchgtltlistgtltsaveju
mpgt
16
Browse Table example

• TABLEPARAM_BROWSEBORDER0 CELLSPACING0BORDER0
  CELLSPACING0 CELLPADDING0BORDER0 WIDTH92
  CELLSPACING0 CELLPADDING0BORDER0
  CELLSPACING0 CELLPADDING0

17
No border browse display
18
Browse Headers

• BROWSE_HEADERSltSelectgtltFormatgtltNumbergt
• Default browse header example (CLIC)

19
WWWOptionsBrowse Headers

• Carleton
• BROWSE_HEADERSMark for SaveMaterial TypeEntry

20
WWWOptionsbrief and extended

• BROWSE_itag
• EXTENDED
• By default, WebOpac displays the browse screen in
  brief mode, which is one liner.
• BROWSE controls the first line.
• EXTENDED controls the second line.

21
BROWSE

• The BROWSE options specify the subfields that
  display on the first line of a two-line Index
  Browse and Record Browse display
• It does not decide what fields to display
• BRIEF controls what other fields to display on
  the first line

22
Browse Syntax

• Syntax
• marctag/clickablesubfs/regularsubfs
• Examples
• BROWSE245/a-d/ef
• For MARC 245 fields, the 'a' through 'd'
  subfields display as hotlinks and subfields 'e'
  and 'f' display as regular text. No other
  subfields from this field display.from
  Innovative manual

23
Browse--Brief

• To add additional fields to the first line of
  browse display.
• Use BRIEF

24
Carleton Example

• BRIEFH

25
Extended Display number

• EXTENDED0 Title and Year of Publication
• EXTENDED1 Title, Year, and Location
• EXTENDED2 Title, Year, and Call Number
• EXTENDED3 Title, Year, Location, and Call
  Number
• .

26
Extended Display code

•   U  Title. Display only the title. Note that if
  the search is performed in the Title index, the
  system does not display the title in the 2-line
  browse.
•  T  Both the LOCATION and STATUS from the item
  record. Note that this must not be used together
  with the L or S values.
•   A  Author. Note that if the search was in the
  Author index, then the author will not display in
  the two-line browse.
• . Page 102168 has a complete list

27
CLIC Example

• EXTENDEDUAT

28
Extended Display

• INDEX_EXT
• This option forces browse screens for particular
  indexes to default to the extended (two-line)
  browse format rather than brief browse format.
• Example
• INDEX_EXTc ---for call number

29
Relations between extend and index_ext

• Extend determines what show on the second line
• Index_ext shows the second line for certain index
  tag a library chooses

30
Examples--Carleton

• EXTENDED3
• EXTENDED_wBC
• EXTENDED_aBC
• EXTENDED_tBC
• EXTENDED_dBC

31
Minneapolis Public Library

• EXTENDED_dCB
• EXTENDED_aCB
• EXTENDED_tCB
• EXTENDED3
• INDEX_EXTc,g
• Try for yourself at http//mplwebcat.mpls.lib.mn.
  us/search

32
CLIC Example

• EXTENDEDUAT
• INDEX_EXTmcoi

33
Record Browse Display

• TABLEPARAM_BRIEFCITY
• We will talk about this later on in the html
  section.
• Once this is set to Y, it means the record
  display and superkeyword search will always use
  this format.

34
Other parameters

• BOTLOGO (Same as TOPLOGO)
• HOLDINGS_POS (What shows up on top of the
  holdings)
• MARC (Marc display button)
• RECORDFRAME (frames?)
• LINK856TEXT (governs what is text for the link)
• SHOWOREC (how to show order records)

35
Complete listing of the parameters

• http//csdirect.iii.com/faq/woptions.shtml

36
Part I WWWOptions
Done!
37
Part II WebOPAC
38
HTML pages

• Two kinds of html pages
• Static vs dynamic

39
Static Pages

• Mainmenu.html----- /
• Opacmenu.html-----/search
• All searchhelp pages----srchhelp_.html

40
Static Pages

• Mainmenu.html and opacmenu.html
• If your library does not need a separate library
  homepage, make these two pages identical.
• Things to consider
• http//yourlibrary and http//yourlibrary/search
  will look the same
• STARTOVER/ or /search will be the same too

41
Examples of mainmenu.html

• Things to consider
• Consistent look with the dynamic page, i.e.,
  logos, font size, etc.

42
Examples of mainmenu.html

• St. olaf and William Mitchell same
• Minneapolis Public, Carleton and Clic are not
• Test for yourself
• http//mplwebcat.mpls.lib.mn.us/
• http//muse.library.carleton.edu/search
• http//sage.stolaf.edu/
• http//clicnet.clic.edu/
• http//library.wmitchell.edu

43
TOPLOGO

• If you want to use more customizable header, you
  have to use TOPLOGO AND BOTLOGO

44
TOPLOGO II

• Two ways you can do it
• Minneapolis Public Library example

45
Minneapolis Example
TOPLOGOltCENTERgtltIMG SRC"/screens/toplogo2001feat
.jpg" ALT"" BORDER"0" usemap"feature"gtltmap
name"feature"gtltarea href"http//www.mplib.org/ca
talog/features.asp" shape"rect" coords"480, 15,
590, 65" ALT"New Features"gtlt/mapgtlt/CENTERgt
46
Caution

• In your static page, you have to input the same
  code to make it look consistent
• ltCENTERgtltIMG SRC"/screens/toplogo2001feat.jpg"
  ALT"" BORDER"0" usemap"feature"gtltmap
  name"feature"gtltarea href"http//www.mplib.org/ca
  talog/features.asp" shape"rect" coords"480, 15,
  590, 65" ALT"New Features"gtlt/mapgtlt/CENTERgt

47
TOPLOGO III

• Chunk of HTML
• First in WWWOPTONS
• TOPLOGO_at_screens/wmtoplogo.html

48
Actual Code

• ltdiv align"center"gt lt!-- Begin Header for
  Library Catalog --gt
• lttable height"96" border"0" cellspacing"0"
  cellpadding"0"gt
• lttrgt lttd width"180" height"96" rowspan"3"gt
  
• lta href"http//www.wmitchell.edu/index.html"gt
  
• ltimg src"/screens/wmirtopleftlogo.gif"
  alt"William Mitchell College of Law" border"0"
  width"180" height"96"gtlt/agtlt/tdgt
• .bunch of other codes.
• lt/tdgt lt/trgt lt/tablegt
• lt!-- End Header for Library Catalog --gt
• lt/divgtltdiv class"wmtd"gt
• Notice the end tag in the box!
• Also remember to save this chunk as XXXXX.html
  and include the same code in your other static
  pages

49
(No Transcript)
50
BOTLOGO

• TOPLOGO usually works hand in hand with BOTLOGO.
• In TOPOLOGO, I have the tag ltdiv class"wmtd"gt
• In BOTLOGO, I close this tag lt/divgt
• Carleton Example
• TOPLOGO_at_screens/musetop.html
• BOTLOGOlt/blockquotegt

51
Search help pages

• There is one search help page for each index tag,
  i.e.
• srchhelp_a.html, srchhelp_d.html
• There is also a search help page for record
  number, srchhelp_,.html
• This is very useful when you want to build direct
  link to your webopac using the record number

52
Dynamic and customizable pages

• Search results page, i.e., index and record
  browse results. These are already controlled by
  the parameters in the WWWOptions

53
Customizable Forms Page

• For a complete listing of these pages
  http//csdirect.iii.com/faq/custform.shtml
• My Millennium Page
• Command link /patroninfo
• Form name pverify_web.html

54
(No Transcript)
55
Codes

• lt!--toplogo--gt
• ltSTRONGgtCHECK YOUR PATRON RECORDlt/STRONGgt
• ltform methodpostgt
• lt!--iferrmsg--gt
• ltfont colorredgt
• lt!--errmsg--gt
• lt/fontgtltbrgtltbrgt
• lt!--xif--gt
• lt!--ifneedpatronname--gt
• Your Last Name followed by First Name i.e.
  Burger, Warren ltbrgt
• lt!--name--gt
• lt!--xif--gt

56
Codes II

• ltbrgtltbrgt
• lt!--ifneedpatronverify--gt
• Your barcode (14 digits, for instance,
  25117000000000)ltbrgt
• lt!--barcode--gt
• lt!--xif--gt
• ltbrgt
• ltbrgt
• lt!--submit--gt
• lt/formgt
• lt!--startover--gt
• lt!--botlogo--gt

57
lt!--xif--gt lt!--ifneedpatronname--gt Your Last
Name followed by First Name i.e. Burger, Warren
ltbrgt lt!--name--gt lt!--xif--gt
lt!--submit--gt
lt!--ifneedpatronverify--gt Your barcode (14
digits, for instance, 25117000000000)ltbrgt lt!--ba
rcode--gt lt!--xif--gt
58
Brief Citation Form

• This form will determine how the record browse
  will look once you create the page and set it in
  WWWOptions
• briefcit.html---name
• TABLEPARAM_BRIEFCITltbooleangtlttableparamsgt

59
Comparison of Screen Shotsregular record browse
display
60
Comparison of Screen Shotsregular record browse
display
61
Example codes

• For more detailed discussion, see manual Page
  105276

62
Basic Tokens for Brief

• Basic tokens
• lt!--fieldspecfieldspec--gt or
  lt!--linkfieldspecfieldspec--gtlt!--entrynum-
  -gtlt!--mark--gtlt!--holdingsmsg--gtlt!--ifbooka
  ble--gtlt!--bookingmsg--gtlt!--xif--gtlt!--medi
  a--gtlt!--ifhasbookjacket--gtlt!--bookjacket--gt
  lt!--xif--gt

63
Basic Tokens for Brief

• lt!--reslink--gtlt!--request--gtlt!--avsrelevanc
  e--gtlt!--year--gtlt!--tofullrecord--gtlt!--856
  link--gtlt!--ifmulti856--gtlt!--more856--gtlt!--
  xif--gtlt!--962link--gtlt!--ifmulti962--gtlt!--
  more962--gtlt!--xif--gtlt!--nohitmsg--gt

64
My briefcit.html---1

• ltTR CLASS"briefCitRow"gt
• ltTDgt
• ltTABLE WIDTH"100"gt
• ltTRgt
• ltTD ALIGN"center" VALIGN"top" WIDTH"5"
  CLASS"browseEntryNum"gt
• ltSTRONGgt
• lt!--entrynum--gt
• lt/STRONGgt
• ltBRgt
• lt!--avsrelevance--gt
• ltBRgt
• ltSPAN CLASS"browseEntryMark"gtMarklt/SPANgt
• ltBRgt
• lt!--mark--gt
• lt/TDgt

65
My briefcit.html -- 2

• ltTD ALIGN"left" VALIGN"top" WIDTH"55"
  CLASS"browseEntryData"gt
• lt!--nohitmsg--gt
• lt!--fieldspecVbc--gt
• lt!--fieldspecVbm--gt
• ltbrgt
• lt!--linkfieldspecVbT--gt (note this for
  Best Title.. tfirst title)
• ltbrgtLocationnbsp
• lt!--fieldspecFb026--gt
• nbspnbsp
• ltBRgt
• lt!--fieldspecVba--gt
• ltBRgt
• lt!--fieldspecVbp--gt
• ltBRgt
• lt/TDgt..other codes omited ending with lt/TRgt

66
lt!--entrynum--gt
ltSPAN CLASS"browseEntryMark"gtSavelt/SPANgtltBRgt lt!--
mark--gt
lt!--fieldspecVbc--gt lt!--fieldspecVbm--gt ltbrgt
lt!--year--gt
lt!--linkfieldspecVbT--gt
lt!--tofullrecord--gt
lt!--fieldspecVba--gt
lt!--fieldspecVbp--gt
ltbrgtLocationnbsp lt!--fieldspecFb026--gt nbsp
nbsp
67
Another ExampleCarleton
68
Additonal Note

• You do not have to restart the webserver to test
  your briefcit.html.
• Just change the form and reload the search

69
Part II WebOPAC
Done
70
Part III Stylesheets

• Style sheets with tags and classes.
• Tags are common such as body, font, a vlink, etc
• Classes are defined by Innovative
• You can also define your own local class

71
Define the Style sheet

• STYLESHEET/screens/XXXXX.css
• You can create or transfer or edit style sheet(s)
  on Innovative.

72
Tags

• You can define individual tag
• P font-family garamond, bookman, times, serif
  
• Syntax tag xxxxxxxxxxxx
• Or you can lump a bunch of tags and/or attributes
  together

73
Minneapolis Public Example-one attribute, many
tags

• BODY, P, TD, LI, SELECT, OPTION, TABLE, INPUT,
  H1, H2, H3, H4, H5, H6 font-family Verdana,
  Arial, Sans Serif

74
One tag, many attributes

• P font-family "Times New Roman", times, serif
  font-size 20px
• color 4F4F4F font-weight normal
  line-height100

75
Multiple tags, multiple attributes

• alink, avisited color 990000
  line-height100 text-decorationnone
• ahover text-decorationunderline

76
Complete listing of stylesheets attributes

• http//msdn.microsoft.com/library/default.asp?url
  /workshop/author/css/reference/attributes.asp

77
Classes

• You can define your own classes for styles
• .wmtd padding-left25 padding-right 2
  text-alignleft width100
• This is one of the classes we defined for our
  webopac
• How do you use the defined class?

78
In TOPLOGO AND OTHER STATIC PAGES

• At the end of the TOPLOGO page
• lt!-- End Header for Library Catalog
  --gtlt/divgtltdiv class"wmtd"gt
• In other static pages
• lt!-- End Header for Library Catalog --gt
• lt/divgt
• lttable border"0" cellspacing"0" width"690"gt
• lttrgt
• lttd class"wmtd"gt
• lttable border"0" cellpadding"3"
  cellspacing"0" width"688"gt
• lttrgt
• lttd valign"top" width"138"gt

79
Innovative Defined Classes

• For a complete list Manual Page 105262
• If you want to find which class governs which
  cell,
• Set the parameter in WWWOptions
  STYLESHEET/screens/xxx.css
• Do a search
• View the source

80
(No Transcript)
81
table.browselist
Free float, no class defined
CLASS"browseWidgit"
CLASS"browsePager"
CLASS"browseSaveJump"
82
In Html code

• ltTABLE BORDER0 WIDTH92 CELLSPACING0
  CELLPADDING0 CLASS"browseList"gt
• ltTABLE BORDER0 CELLSPACING0 CELLPADDING0
  CLASS"browseWidgit"gt
• ltTR CLASS"browsePager"gt
• ltTD ALIGNCENTER COLSPAN5 CLASS"browsePager"gt
• ltTD COLSPAN5 CLASS"browseSaveJump"gt
• ltTABLE BORDER0 CELLSPACING0 CELLPADDING0
  CLASS"browseSaveJump"gtltTRgtltTDgt

83
Style Sheet

• table.browseSaveJumpt
• height 9px background-position -15px size
  7px text-align left
• td.browseSaveJump
• text-align leftcolor 000000 font-family
  Verdana,
• sans-serif font-size 12px font-style normal
  font-weight normal
• padding 16px 8px 2px 8px white-space nowrap

84
browse classes
CLASS"browseHeaderNum"
CLASS"browseHeaderEntries"
CLASS"browseHeaderMark"
CLASS"browseHeaderData"
ltTR CLASS"browseHeader"gt
CLASS"browseHeaderYear"
85
Browse Classes II
CLASS"browseEntryData"
CLASS"browseEntryYear"
CLASS"browseEntryMark"
CLASS"browseEntryEntries"
CLASS"browseEntryNum"
CLASS"browseEntry"
86
Html Codes

• ltTR CLASS"browseEntry"gt
• ltTD ALIGNRIGHT CLASS"browseEntryNum"gt
• ltTD ALIGNCENTER ROWSPAN1 CLASS"browseEntryMark"
  gt
• ltTD CLASS"browseEntryData"gt
• ltTD ALIGNLEFT CLASS"browseEntryYear"gt
• ltTD ALIGNRIGHT LASS"browseEntryEntries"gt

87
Style Sheet

• td.browseEntryData font-size 12px
  border-left1px solid FFFFFF border-bottom1px
  solid FFFFFF

88
Style Sheet

• td.browseEntryMark, td.browseEntryMedia,
  td.browseEntryNum, td.browseEntryRelevance,
  td.browseEntryYear
• border-left1px solid FFFFFF border-bottom
  1px solid FFFFFF font-family Verdana,
  sans-serif font-size 10px
• font-style normal font-weight normal color
  000000 text-align left

89
Browse Classes For extended Display

• Add a sub in the classes, such as
• td.browseSubEntryData, td.browseSubEntryYear
• background EFEFEF border-left1px solid
  FFFFFF
• All other rules apply

90
Tricks

• Change of style sheet does not require a
  restarting of the server
• You can use your test port to test the style
  sheet
• The book to read A book on netlibrary
  Cascading Style Sheets Complete by Busch, David
  D. Olsen, J. W.

91
Part III Style Sheet
Done!
92
Phase 3 pureFTPusername and password
93
Iiiftp in Limit Network Acces
94
Set it up in Innovative

• The ip you gave has to be static
• Now config your ftp.

95
Set up the client
96
Port number
97
Ready to Click

• When the client has been configured, you can
  start to use the client the way you always do.

98
Thoughts, Discussions, Questions?