Working with the Text Class User Interface
From DLXS Documentation
(→Customizing Text Class UI Layout) |
|||
Line 62: | Line 62: | ||
==Customizing Text Class UI Layout== | ==Customizing Text Class UI Layout== | ||
+ | |||
+ | ===CSS Files=== | ||
+ | <p>Text Class HTML utilizes two CSS files for controlling most | ||
+ | font and color characteristics: <span class="command">textclass.css</span> and <span class="command">textclass-specific.css</span>. | ||
+ | <span class="command">textclass.css</span> is stored in at | ||
+ | the <code>$DLXSROOT/web/t/text/</code> path | ||
+ | and contains all the default style declarations. <span class="command">textclass-specific.css</span> is | ||
+ | created for each individual collection and stored at the <code>$DLXSROOT/web/c/coll/</code> path. | ||
+ | References to both stylesheets are as follows:</p> | ||
+ | |||
+ | <link rel="stylesheet" href="/t/text/textclass.css" type="text/css"> | ||
+ | <link rel="stylesheet" href="<CSS_PATH filename=textclass-specific.css" type="text/css"> | ||
+ | |||
+ | <p>The <span class="command"><?CSS_PATH?> </span>processing | ||
+ | instruction resolves to the relevant path for the stylesheet | ||
+ | file indicated by the filename attribute. Because <span class="command">textclass-specific.css</span> is | ||
+ | referenced after <span class="command">textclass.css</span>, | ||
+ | any style declarations that appear in <span class="command">textclass-specific.css</span> will | ||
+ | effectively override matching declarations in <span class="command">textclass.css</span>. | ||
+ | This is how fonts and background colors are varied for each | ||
+ | collection. See the [[full text of textclass.css]]</p> | ||
+ | |||
+ | ===Graphics=== | ||
+ | |||
+ | <p>Default text class XSL stylesheets create HTML that employs | ||
+ | a variety of relatively generic graphics that can be referenced | ||
+ | by all collection instances. A <a href="graphics.html">table | ||
+ | of shared files</a> shows | ||
+ | those files that are stored in the <code>$DLXSROOT/web/t/text/graphics/</code> directory. | ||
+ | Any alternative graphics by identical names may be stored | ||
+ | in individual collections' | ||
+ | <code>graphics</code> directories to replace the default | ||
+ | class graphics for that particular collection. Any files | ||
+ | not stored in collection graphics directories, but referenced | ||
+ | in the HTML, will be found in the class graphics | ||
+ | directory via the <a href="../../../13/ui/xsl.html#templatesfallback">fallback</a> mechanism. | ||
+ | Graphics files that are likely to be unique to each collection | ||
+ | are discussed in the section on <a href="#background">header | ||
+ | background colors and graphics</a>. </p> | ||
+ | |||
+ | <br/> | ||
+ | |||
+ | ===Header characteristics=== | ||
+ | <p>The header of each HTML page includes that area in the top | ||
+ | 75 pixels of the page containing those elements associated | ||
+ | with unique collection identity: main collection title, global | ||
+ | links, if any, and the main navigation bar. The templates | ||
+ | accommodate inclusion of background colors or graphics to | ||
+ | provide some flexibility in creating unique appearances for | ||
+ | different collections. </p> | ||
+ | |||
+ | ===Background color and graphics=== | ||
+ | <p>Main background color for the header area of the HTML | ||
+ | page is provided at three different levels: default | ||
+ | background colors for table cells specified in the<code> | ||
+ | bgcolor</code> attribute, style declarations in the <span class="command">textclass-specific.css</span> file, | ||
+ | and table cell background graphics referenced by the | ||
+ | <code>background</code> attribute. <b>Figure 3</b> illustrates | ||
+ | how these characteristics are specified in <code>td</code> opening | ||
+ | tags in the <em>Voltaire électronique</em> collection.</p> | ||
+ | |||
+ | <p/> | ||
+ | <p/> | ||
+ | <p/> | ||
+ | <table border="0" cellpadding="0" cellspacing="2"> | ||
+ | <tr> | ||
+ | <td> | ||
+ | <img alt="text-hdr-layout.gif" height="91" | ||
+ | src="graphics/text-hdr-layout.gif" | ||
+ | style="border: 1px solid 000000" width="633"/> | ||
+ | </td> | ||
+ | |||
+ | </tr> | ||
+ | <tr> | ||
+ | <td> | ||
+ | <b>Figure 3</b>: Header cell color and graphics.</td> | ||
+ | </tr> | ||
+ | </table> | ||
+ | <p>The two top cells each have CSS class associations and background graphic | ||
+ | references to files in the local collection graphics directory. The | ||
+ | <code>hdrcolor</code> style is set locally in the textclass-specific.css | ||
+ | style sheet as</p> | ||
+ | |||
+ | |||
+ | <code>.hdrcolor { background-color: #FFFFF1 } </code> | ||
+ | |||
+ | <p>The background graphics files, <span class="command">hdr-bg1.gif</span> and <span class="command">hdr-bg2.gif</span>, are, in fact, | ||
+ | laying "over" the background color specified by the CSS style--the | ||
+ | order of precedence for CSS capable browsers is<code> background</code>, | ||
+ | <code>class</code>, <code>bgcolor</code>--but you see the CSS style colors | ||
+ | because the gifs are transparent. The lower cell has a <code>bgcolor</code> | ||
+ | |||
+ | value and a CSS style, <code>navcolor</code>, set again in the local | ||
+ | textclass-specific.css as</p> | ||
+ | |||
+ | <code>.navcolor { background-color: #F3E098 }</code><br/> | ||
+ | |||
+ | <p> | ||
+ | |||
+ | <b>Figure 4</b> illustrates the appearance of another header based on the | ||
+ | same template using non-transparent background gifs that integrate with the | ||
+ | collection title gif and the CSS style for <code>navcolor.</code> | ||
+ | </p> | ||
+ | <table border="0" cellpadding="0" cellspacing="2" width="75%"> | ||
+ | <tr> | ||
+ | <td> | ||
+ | <img alt="umr-hdr.gif" height="78" src="graphics/umr-hdr.gif" | ||
+ | style="border: 1px solid 000000" width="625"/> | ||
+ | |||
+ | </td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td> | ||
+ | <table border="0" cellpadding="10" cellspacing="0" width="100%"> | ||
+ | <tr> | ||
+ | <td valign="TOP"> | ||
+ | <p> | ||
+ | |||
+ | <img alt="umtr-combined.gif" height="51" | ||
+ | src="graphics/umtr-combined.gif" | ||
+ | style="border: 1px solid 000000" width="333"/> | ||
+ | </p> | ||
+ | <p>collection title gif</p> | ||
+ | </td> | ||
+ | <td class="stuff"> | ||
+ | <img alt="bgmat.gif" height="91" | ||
+ | src="graphics/bgmat.gif" | ||
+ | style="left-margin: 5px; right-margin: 5px; border: 1px solid 000000" | ||
+ | width="100"/>hdr-bg1.gif and hdr-bg2.gif provide background.</td> | ||
+ | </tr> | ||
+ | |||
+ | </table> | ||
+ | </td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td> | ||
+ | <b>Figure 4:</b> component files for a header portion of UM | ||
+ | Technical Reports templates.</td> | ||
+ | </tr> | ||
+ | |||
+ | </table> | ||
+ | <br/> | ||
+ | <br/> | ||
+ | |||
+ | |||
+ | ===Title name or graphic=== | ||
+ | <p>Collection title name is provided in the XML files via | ||
+ | the<code> <?TITLE | ||
+ | mode="complex"?></code> processing instruction. | ||
+ | The PI will resolve to a text string or a graphic file | ||
+ | as specified in the <code>[[Working with the Collection Manager|colldb]].</code> | ||
+ | |||
+ | When rendered as text, titles are by default wrapped | ||
+ | in H3 tags by the XSL with CSS style | ||
+ | <code>topheadlink</code> so that collection title font | ||
+ | can be specified.</p> | ||
+ | <br/> | ||
+ | |||
+ | |||
+ | ===Navigation fonts and tabs=== | ||
+ | <p>Color for navitation tabs is controlled by CSS styles, as are the border | ||
+ | colors that surround and underline the tabs. Tab color is, in the | ||
+ | "backgrounded" state, set by the <code>navcolor</code> style. The | ||
+ | tab "foreground" state color is specified with the | ||
+ | <code>navhicolor</code> style. Border and underline colors are set | ||
+ | with<code> navdivision</code> and <code>navhrcolor</code> styles | ||
+ | respectively. </p> | ||
+ | |||
+ | <p>Font settings for tabs are also CSS controlled. Relative style declarations | ||
+ | for fonts are as below:</p> | ||
+ | <blockquote> | ||
+ | <p> | ||
+ | <code>/* nav bar fonts */<br/> .navlinks { font-family: Arial, | ||
+ | Helvetica, sans-serif; <br/> font-size: 12px; <br/> font-weight: | ||
+ | bold; <br/> color: #666666; <br/> text-decoration: none<br/> }</code> | ||
+ | |||
+ | </p> | ||
+ | <p> | ||
+ | <code>/* nav link characteristics */<br/> A:hover { text-decoration: | ||
+ | underline }<br/> A.nav { color: #FFFFFF; <br/> text-decoration: none | ||
+ | <br/> }<br/> | ||
+ | <br/> A.nav:hover { color : #FFCC33; <br/> text-decoration: | ||
+ | underline <br/> }</code> | ||
+ | |||
+ | </p> | ||
+ | </blockquote> | ||
+ | <p>These styles set the default, "closed" tab state | ||
+ | for all navigation fonts.</p> | ||
+ | <p>Beginning in release 12, the navigation menu is contained | ||
+ | in a single, separate chunk of XML, <span class="command">navheader.xml</span>, | ||
+ | that is "chunked into" all main XML pages. The <span class="command">navheader.xsl</span> XSL | ||
+ | stylesheet checks the current URL parameters (via some | ||
+ | global XML that is emitted for all runs of the cgi program) | ||
+ | and determines what kind of page this is, and therefore | ||
+ | which nav tab should be "open" and which should be "closed", | ||
+ | using the corresponding css styles for each tab. </p> | ||
+ | |||
+ | <blockquote><p> </p> | ||
+ | </blockquote> | ||
+ | <p>The result is as is shown in <strong>Figure 5 </strong> below.</p> | ||
+ | <p/> | ||
+ | <table border="0" cellpadding="0" cellspacing="2"> | ||
+ | <tr> | ||
+ | |||
+ | <td> | ||
+ | [[Image:amversesearch.gif]] | ||
+ | </td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td> | ||
+ | <strong>Figure 5 </strong>: Search page for | ||
+ | American Verse.</td> | ||
+ | </tr> | ||
+ | |||
+ | </table> | ||
+ | <p> </p> | ||
+ | <p><strong>Note</strong>: Navigation pop-up submenus are | ||
+ | gone as of Release 12 as part of our attempt to reduce, | ||
+ | as much as possible, the reliance on JavaScript. In a | ||
+ | previous release of the DLXS Text Class design, multiple | ||
+ | search options were grouped under a single "Search" tab | ||
+ | as a static sub-menu. <strong>Figure 6</strong> illustrates | ||
+ | this design as implemented by the ACLS History E-book | ||
+ | collection.</p> | ||
+ | <table border="0" cellpadding="0" cellspacing="2" width="389"> | ||
+ | |||
+ | <tr> | ||
+ | <td> | ||
+ | [[Image:acls-nav.gif]] | ||
+ | </td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td> | ||
+ | <b>Figure 6 </b>: The ACLS navigation bar | ||
+ | showing static search sub-menu.</td> | ||
+ | |||
+ | </tr> | ||
+ | </table> | ||
+ | <p>Beginning with release 10 a new DHTML "pull-down" menu triggered by Javascript | ||
+ | <code>onmouseover</code> events became the default behavior. | ||
+ | This menu, as delivered in HTML, is shown in <strong>Figure 8</strong>.</p> | ||
+ | |||
+ | <table border="0" cellpadding="0" cellspacing="2" width="455"> | ||
+ | <tr> | ||
+ | <td> | ||
+ | [[Image:amverse-nav.gif]] | ||
+ | </td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td> | ||
+ | |||
+ | <b>Figure 8</b>: The American Verse navigation bar showing the | ||
+ | "pull-down" menu.</td> | ||
+ | </tr> | ||
+ | </table> | ||
+ | <p/> | ||
+ | <p>The pull-down menu technique is a modified implementation of the | ||
+ | [http://projectseven.com Project Seven] positioned dropped | ||
+ | down menus design, utilizing Project Seven extensions to | ||
+ | [http://www.macromedia.com/software/dreamweaver Macromedia | ||
+ | Dreamweaver]. The elements of the pull-down menu, as they appear | ||
+ | in the navhaeder.chnk template file, are shown in <b>Figure 9</b>.</p> | ||
+ | |||
+ | |||
+ | <table border="0" cellpadding="0" cellspacing="2"> | ||
+ | <tr> | ||
+ | <td>[[Image:nav-dmenu-layout.gif]] | ||
+ | </td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td><b>Figure 9</b> | ||
+ | :"close-up" of the navigation bar, showing main DHTML menu components.</td> | ||
+ | |||
+ | </tr> | ||
+ | </table> | ||
+ | |||
+ | <p>HTML from <code>navheader.chnk</code> file is shown below; included here are | ||
+ | the two layers that constitute the hidden pull-down search menu, and the portion | ||
+ | of the navigation bar that triggers the menu (in highlighted colors). Since | ||
+ | the only portion of the menu that comes from the CGI are the search type link | ||
+ | hrefs, changing the look or shape of the menu is simply a matter of editing | ||
+ | the menu HTML. (Well, almost: the "closer" layer, which lays under | ||
+ | the drop down menu layer, should always be top-alligned with the menu layer, | ||
+ | but sufficiently wide and deep enough to provide a margin outside the left, | ||
+ | bottom, and right edges of the menu layer.) The javascript invoked by the search | ||
+ | link (in green below) opens the pull menu "snapped" to the image with | ||
+ | ID="menuanchor" (shown in red). This means that so long as menuanchor | ||
+ | is present in relation to the search tab, the pull-down menu will always appear | ||
+ | in relation to the navigation bar. The javascript functions that execute the | ||
+ | menu behavior are contained in the <code>jsheader.chnk</code> template, and | ||
+ | are imported into the page at load time.</p> | ||
+ | |||
+ | <blockquote> | ||
+ | <span style="font-family: courier; font-size:11px"> | ||
+ | <td id="sep1" width="1"> | ||
+ | <br/> | ||
+ | <span style="color:red"> | ||
+ | < | ||
+ | img src="/t/text/graphics/plug.gif" width="1" height="23" border="0" vspace="0" hspace="0" name="menuanchor" id="menuanchor" alt="design graphic | ||
+ | " | ||
+ | > | ||
+ | </span></td> | ||
+ | |||
+ | <br/> | ||
+ | <!-- search --> | ||
+ | <br/><!-- this nav bar tab is conditionally included by the cgi --> | ||
+ | <br/><?INCLUDE_SEARCH_TAB> | ||
+ | <br/><td id="searchtab" width="90" height="23" align="center" nowrap> | ||
+ | |||
+ | <br/><span class="navlinks"> | ||
+ | |||
+ | <br/> | ||
+ | |||
+ | <span style="color:009900"> | ||
+ | < | ||
+ | a id="searchlink" href="<?SIMPLE_SEARCH_LINK>" class="nav" onMouseOver="P7_Snap('menuanchor','closer',-70,25,'menuanchor','ddsearchmenu',-50,25);P7_autoLayers(0,'ddsearchmenu','closer')"> | ||
+ | </span>Search<img name="navmenuarrow" src="/t/text/graphics/navdwnarrow.gif" alt="design graphic" width="16" height="8" border="0"></a></span> | ||
+ | |||
+ | <br/></td> | ||
+ | <br/><td id="sep2" width="1"><img src="/t/text/graphics/plug.gif" width="1" height="1" border="0" alt="design graphic"> | ||
+ | </td> | ||
+ | <br/> | ||
+ | <br/><div style="position:absolute; left:15px; top:70px; width:420px; height:22px; | ||
+ | z-index:3; visibility: hidden;" id="ddsearchmenu"> | ||
+ | <table width="420" border="0" cellspacing="0" cellpadding="0"> | ||
+ | |||
+ | <tr> | ||
+ | <td bgcolor="#666666"> | ||
+ | <br/><table width="100%" border="0" cellspacing="1" cellpadding="0"> | ||
+ | <br/> | ||
+ | <tr> | ||
+ | <br/> | ||
+ | |||
+ | <td class="mencellup" height="22" bgcolor="#E5E5E5" nowrap> | ||
+ | <br/> | ||
+ | |||
+ | |||
+ | <span class="smallformfont"><a class="menunav" href="<?SIMPLE_SEARCH_LINK>">Basic</a></span> | ||
+ | |||
+ | <br/> | ||
+ | |||
+ | |||
+ | | | ||
+ | <br/> | ||
+ | |||
+ | <span class="smallformfont"><a class="menunav" href="<?BOOLEAN_SEARCH_LINK>">Boolean</a></span> | ||
+ | |||
+ | <br/> | ||
+ | |||
+ | |||
+ | | | ||
+ | <br/> | ||
+ | |||
+ | <span class="smallformfont"><a class="menunav" href="<?PROXIMITY_SEARCH_LINK>">Proximity</a></span> | ||
+ | <br/> | ||
+ | |||
+ | |||
+ | | | ||
+ | <br/> | ||
+ | |||
+ | |||
+ | <span class="smallformfont"><a class="menunav" href="<?SEARCH_HISTORY_LINK>">Search | ||
+ | History</a></span> | ||
+ | <br/> | ||
+ | |||
+ | </td> | ||
+ | <br/> | ||
+ | </tr> | ||
+ | |||
+ | <br/></table></td> | ||
+ | </tr> | ||
+ | </table> | ||
+ | </div> | ||
+ | <br/> | ||
+ | <div id="closer" style="position:absolute; left:3px; top:70px; width:460px; | ||
+ | height:50px; z-index:2; visibility: hidden;"><a href="javascript:;" onMouseOver="P7_autoLayers(0)"><img | ||
+ | src="/t/text/graphics/plug.gif" name="Image1" width="460" height="50" hspace="0" vspace="0" border="0" id="Image1" alt="design | ||
+ | graphic"></a></div> | ||
+ | |||
+ | <br/><!-- end menu divs --></span> | ||
+ | </blockquote> | ||
+ | |||
+ | |||
+ | <p>The Project Seven implementation is very reliable, working | ||
+ | effectively for Netscape 4.7 and up, and for Internet Explorer 5 and up (and | ||
+ | most other browsers) for the PC and Mac platforms. Even so, the search page | ||
+ | design offers static link alternatives for all menu options. </p> | ||
+ | <p>(<strong>Note:</strong> The implementation of the pull-down menu, however, is | ||
+ | not tied to the cgi since the cgi only provides the<code> HREF</code> values | ||
+ | for the various links in the menu. Alternative markup for the earlier design | ||
+ | is available, and will be supplied in the distribution.)</p> | ||
+ | |||
+ | <p>Modifying the appearance of the pull-down menu background colors and font | ||
+ | characteristics is accessible through CSS class declarations, shown below.</p> | ||
+ | <blockquote> | ||
+ | <p> | ||
+ | <code>A.menunav { color: #000000; text-decoration: none }<br/> | ||
+ | A.menunav:hover { color : #FF6633; text-decoration: underline }<br/> | ||
+ | <br/> /* the color of popup menu cells in the up state - #BABCEA | ||
+ | */<br/> .mencellup { background-color: #E5E5E5; }<br/> | ||
+ | |||
+ | <br/> /* the color of the bground table cell for the menu nav i.e., | ||
+ | the border color for nav cells */<br/> .menucellground { | ||
+ | background-color: #666666; }</code> | ||
+ | </p> | ||
+ | </blockquote> | ||
+ | <p>The font style of the menu labels themselves is controlled by the | ||
+ | <code>smallformfont</code> class.</p> | ||
==Text Class XML Template Files== | ==Text Class XML Template Files== |
Revision as of 11:29, 23 September 2007
Main Page > Mounting Collections: Class-specific Steps > Mounting a Text Class Collection > Working with the Text Class User Interface
Contents |
Overview: Text Class General Page Layout and Color
Default page delivery in Text Class is done via class-level XSL
stylesheets that are shared by all instances of the class, though
the middleware also supports collection-specific XSL stylesheets
for any or all page-based behavior within the class. All default
Text Class stylesheets are based on the same layout approach,
building tables (along with transparent spacer gifs) for
all positioning and general color or graphic appearance. General
layout of the XSLT-generated HTML is shown in Figure
1
, which shows top-level tables with borders showing,
and using the color scheme for the Voltaire électronique collection.
All table cells for header and navigation bar content at this
level have default values for the
bgcolor
attribute for browsers that are not CSS-capable.
Each header and navigation cell also has a default CSS class
value and default background image specified in the background
attribute.
The background colors created by class and gif allow for flexibility
to change appearances for different collections based on the
same XSL. For more on specifiying individual collection
appearance, see Customizing Text Class UI Layout.
Figure 1 : top-level table structure of a typical page. |
Figure 2 shows the simple search page for The American Verse collection as it appears normally. Navigation bar labels, page text header markup (not header text content, e.g., "Basic Search"), instruction text and footer text are included in the XSL, and thus identical across all collections. All other content is specified per collection by <a href="pis.html">processing instructions</a>.
<p/>
Figure 2 : Search page for American Verse. |
Customizing Text Class UI Layout
CSS Files
Text Class HTML utilizes two CSS files for controlling most
font and color characteristics: textclass.css and textclass-specific.css.
textclass.css is stored in at
the $DLXSROOT/web/t/text/
path
and contains all the default style declarations. textclass-specific.css is
created for each individual collection and stored at the $DLXSROOT/web/c/coll/
path.
References to both stylesheets are as follows:
<link rel="stylesheet" href="/t/text/textclass.css" type="text/css"> <link rel="stylesheet" href="<CSS_PATH filename=textclass-specific.css" type="text/css">
The <?CSS_PATH?> processing instruction resolves to the relevant path for the stylesheet file indicated by the filename attribute. Because textclass-specific.css is referenced after textclass.css, any style declarations that appear in textclass-specific.css will effectively override matching declarations in textclass.css. This is how fonts and background colors are varied for each collection. See the full text of textclass.css
Graphics
Default text class XSL stylesheets create HTML that employs
a variety of relatively generic graphics that can be referenced
by all collection instances. A <a href="graphics.html">table
of shared files</a> shows
those files that are stored in the $DLXSROOT/web/t/text/graphics/
directory.
Any alternative graphics by identical names may be stored
in individual collections'
graphics
directories to replace the default
class graphics for that particular collection. Any files
not stored in collection graphics directories, but referenced
in the HTML, will be found in the class graphics
directory via the <a href="../../../13/ui/xsl.html#templatesfallback">fallback</a> mechanism.
Graphics files that are likely to be unique to each collection
are discussed in the section on <a href="#background">header
background colors and graphics</a>.
Header characteristics
The header of each HTML page includes that area in the top 75 pixels of the page containing those elements associated with unique collection identity: main collection title, global links, if any, and the main navigation bar. The templates accommodate inclusion of background colors or graphics to provide some flexibility in creating unique appearances for different collections.
Background color and graphics
Main background color for the header area of the HTML
page is provided at three different levels: default
background colors for table cells specified in the
bgcolor
attribute, style declarations in the textclass-specific.css file,
and table cell background graphics referenced by the
background
attribute. Figure 3 illustrates
how these characteristics are specified in td
opening
tags in the Voltaire électronique collection.
<p/> <p/> <p/>
<img alt="text-hdr-layout.gif" height="91" src="graphics/text-hdr-layout.gif" style="border: 1px solid 000000" width="633"/> |
Figure 3: Header cell color and graphics. |
The two top cells each have CSS class associations and background graphic
references to files in the local collection graphics directory. The
hdrcolor
style is set locally in the textclass-specific.css
style sheet as
.hdrcolor { background-color: #FFFFF1 }
The background graphics files, hdr-bg1.gif and hdr-bg2.gif, are, in fact,
laying "over" the background color specified by the CSS style--the
order of precedence for CSS capable browsers is background
,
class
, bgcolor
--but you see the CSS style colors
because the gifs are transparent. The lower cell has a bgcolor
value and a CSS style, navcolor
, set again in the local
textclass-specific.css as
.navcolor { background-color: #F3E098 }
Figure 4 illustrates the appearance of another header based on the
same template using non-transparent background gifs that integrate with the
collection title gif and the CSS style for navcolor.
<img alt="umr-hdr.gif" height="78" src="graphics/umr-hdr.gif" style="border: 1px solid 000000" width="625"/> |
||
|
||
Figure 4: component files for a header portion of UMTechnical Reports templates. |
Title name or graphic
Collection title name is provided in the XML files via
the <?TITLE
mode="complex"?>
processing instruction.
The PI will resolve to a text string or a graphic file
as specified in the colldb.
When rendered as text, titles are by default wrapped
in H3 tags by the XSL with CSS style
topheadlink
so that collection title font
can be specified.
Navigation fonts and tabs
Color for navitation tabs is controlled by CSS styles, as are the border
colors that surround and underline the tabs. Tab color is, in the
"backgrounded" state, set by the navcolor
style. The
tab "foreground" state color is specified with the
navhicolor
style. Border and underline colors are set
with navdivision
and navhrcolor
styles
respectively.
Font settings for tabs are also CSS controlled. Relative style declarations for fonts are as below:
/* nav bar fonts */
.navlinks { font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #666666;
text-decoration: none
}
/* nav link characteristics */
A:hover { text-decoration: underline }
A.nav { color: #FFFFFF;
text-decoration: none
}
A.nav:hover { color : #FFCC33;
text-decoration: underline
}
These styles set the default, "closed" tab state for all navigation fonts.
Beginning in release 12, the navigation menu is contained in a single, separate chunk of XML, navheader.xml, that is "chunked into" all main XML pages. The navheader.xsl XSL stylesheet checks the current URL parameters (via some global XML that is emitted for all runs of the cgi program) and determines what kind of page this is, and therefore which nav tab should be "open" and which should be "closed", using the corresponding css styles for each tab.
The result is as is shown in Figure 5 below.
<p/>
|
Figure 5 : Search page forAmerican Verse. |
Note: Navigation pop-up submenus are gone as of Release 12 as part of our attempt to reduce, as much as possible, the reliance on JavaScript. In a previous release of the DLXS Text Class design, multiple search options were grouped under a single "Search" tab as a static sub-menu. Figure 6 illustrates this design as implemented by the ACLS History E-book collection.
|
Figure 6 : The ACLS navigation barshowing static search sub-menu. |
Beginning with release 10 a new DHTML "pull-down" menu triggered by Javascript
onmouseover
events became the default behavior.
This menu, as delivered in HTML, is shown in Figure 8.
|
Figure 8: The American Verse navigation bar showing the"pull-down" menu. |
<p/>
The pull-down menu technique is a modified implementation of the Project Seven positioned dropped down menus design, utilizing Project Seven extensions to [http://www.macromedia.com/software/dreamweaver Macromedia Dreamweaver]. The elements of the pull-down menu, as they appear in the navhaeder.chnk template file, are shown in Figure 9.
Figure 9 :"close-up" of the navigation bar, showing main DHTML menu components. |
HTML from navheader.chnk
file is shown below; included here are
the two layers that constitute the hidden pull-down search menu, and the portion
of the navigation bar that triggers the menu (in highlighted colors). Since
the only portion of the menu that comes from the CGI are the search type link
hrefs, changing the look or shape of the menu is simply a matter of editing
the menu HTML. (Well, almost: the "closer" layer, which lays under
the drop down menu layer, should always be top-alligned with the menu layer,
but sufficiently wide and deep enough to provide a margin outside the left,
bottom, and right edges of the menu layer.) The javascript invoked by the search
link (in green below) opens the pull menu "snapped" to the image with
ID="menuanchor" (shown in red). This means that so long as menuanchor
is present in relation to the search tab, the pull-down menu will always appear
in relation to the navigation bar. The javascript functions that execute the
menu behavior are contained in the jsheader.chnk
template, and
are imported into the page at load time.
<td id="sep1" width="1">
< img src="/t/text/graphics/plug.gif" width="1" height="23" border="0" vspace="0" hspace="0" name="menuanchor" id="menuanchor" alt="design graphic " > </td>
<!-- search -->
<!-- this nav bar tab is conditionally included by the cgi -->
<?INCLUDE_SEARCH_TAB>
<td id="searchtab" width="90" height="23" align="center" nowrap>
<span class="navlinks">
< a id="searchlink" href="<?SIMPLE_SEARCH_LINK>" class="nav" onMouseOver="P7_Snap('menuanchor','closer',-70,25,'menuanchor','ddsearchmenu',-50,25);P7_autoLayers(0,'ddsearchmenu','closer')"> Search<img name="navmenuarrow" src="/t/text/graphics/navdwnarrow.gif" alt="design graphic" width="16" height="8" border="0"></a></span>
</td>
<td id="sep2" width="1"><img src="/t/text/graphics/plug.gif" width="1" height="1" border="0" alt="design graphic"> </td>
<div style="position:absolute; left:15px; top:70px; width:420px; height:22px; z-index:3; visibility: hidden;" id="ddsearchmenu"> <table width="420" border="0" cellspacing="0" cellpadding="0"> <tr> <td bgcolor="#666666">
<table width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
<td class="mencellup" height="22" bgcolor="#E5E5E5" nowrap>
<span class="smallformfont"><a class="menunav" href="<?SIMPLE_SEARCH_LINK>">Basic</a></span>
|
<span class="smallformfont"><a class="menunav" href="<?BOOLEAN_SEARCH_LINK>">Boolean</a></span>
|
<span class="smallformfont"><a class="menunav" href="<?PROXIMITY_SEARCH_LINK>">Proximity</a></span>
|
<span class="smallformfont"><a class="menunav" href="<?SEARCH_HISTORY_LINK>">Search History</a></span>
</td>
</tr>
</table></td> </tr> </table> </div>
<div id="closer" style="position:absolute; left:3px; top:70px; width:460px; height:50px; z-index:2; visibility: hidden;"><a href="javascript:;" onMouseOver="P7_autoLayers(0)"><img src="/t/text/graphics/plug.gif" name="Image1" width="460" height="50" hspace="0" vspace="0" border="0" id="Image1" alt="design graphic"></a></div>
<!-- end menu divs -->
The Project Seven implementation is very reliable, working effectively for Netscape 4.7 and up, and for Internet Explorer 5 and up (and most other browsers) for the PC and Mac platforms. Even so, the search page design offers static link alternatives for all menu options.
(Note: The implementation of the pull-down menu, however, is
not tied to the cgi since the cgi only provides the HREF
values
for the various links in the menu. Alternative markup for the earlier design
is available, and will be supplied in the distribution.)
Modifying the appearance of the pull-down menu background colors and font characteristics is accessible through CSS class declarations, shown below.
A.menunav { color: #000000; text-decoration: none }
A.menunav:hover { color : #FF6633; text-decoration: underline }
/* the color of popup menu cells in the up state - #BABCEA */
.mencellup { background-color: #E5E5E5; }
/* the color of the bground table cell for the menu nav i.e., the border color for nav cells */
.menucellground { background-color: #666666; }
The font style of the menu labels themselves is controlled by the
smallformfont
class.