Navigation as concept neatly follows Sitemap as concept, in that the skeletal organization defined by the sitemap (and implemented by the directory structure) serves as the essential source for the site's Navigation components. You can't devise Navigation till you have your Sitemap (or directory structure). Conversely, once you do have your Sitemap/directory structure, then—at least with this site build system—arguably you then also have your Navigation!
That is, all site Navigation is built automatically, from a pair of (relatively) straightforward XML data files: NAV1.xml and NAV2.xml. These are processed, respectively, by one straightforward XSL transformation (NAV1.xslt), and one admittedly complex one (NAV2.xslt). The latter in fact handles Navigation levels 2 and also 3 (and, in a limited sense, level 4).
Page Headers . In addition to the Nav1 (the horizontal navigation bar up in the Site Header), and the "Nav2+3" (the vertical navigation bar on the left side of the screen), there is an additional page component built by this same system of XML + XSLT. These are the "Page Headers" (to be distinguished from the single "Site Header" that tops the entire web page). The Page Headers "top" the body content of the page, and they vary by site section (Level 1) and they vary further by site sub-section (Level 2). Since their content is driven by site section-related information, they too are candidates for processing from out of the NAV2.xml, and in fact that is how they are auto-generated.
Javascript Pre-Cache . One further artifact comes from NAV2.xml and NAV2.xslt processing: Though not visible on the page, an important snippet of Javascript code is generated for each website page. It is the list of graphics filenames that the browser will be instructed to download and "pre-cache" so that rollovers work smoothly. Without this, either a browser would go all the way back to the server to obtain the "rollover" state graphic for a Nav2 button (unacceptably slow), OR, the site would need to pre-cache all the Nav2 buttons for all site sections, in all their states. This could amount to several hundred kilobytes (a prohibitive download). What's needed is the intelligent listing of those Nav2 graphics that are needed for a given page—a download more on the order of perhaps thirty kilobytes or less. This is another benefit of the Nav2.xml file's automated processing.
As seen in the figure below, the mlnmdev/BusinessML/NAV1.xml source data file has a fairly straightforward content model. For each Site Section (Level 1), the minimal descriptive information is captured here: for the label, the text (even though the Nav1 label is a graphic) and "alt"ernative text for the label; the directory name; the filename (default index.asp); and the three-letter code abbreviation used for image file-naming ("imgabbrev").
The design intention is that to add a new Nav1 item is kept to as reduced a work effort as possible here in the NAV1.xml authoring, and that the system then automatically generate as much as possible of the required code from this bare information.
17 Modules of HTML snippets for "Nav1" 16 for Nav2 level pages (and all beneath them); 1 for Home Page.
For the Nav1 navigation bar, this is relatively simple: the list of eight Level 1 choices are written out in the necessary permutations of some seventeen (17) different Nav1 Module HTML snippets, to cover all eight site sections in the on or off states, plus one more for the Home Page (all site sections off).
![[Tip]](images/tip.png) | Tip |
|---|---|
Yes, rollover states are also always available, but they do not figure into calculating the number of permutations of HTML snippets that must be coded to represent the initial presentation of each Navigation Module—be they Nav1, Nav2, or Nav3. | |
These output Modules are written to /mlnmdev/SiteHTML/Navs with names like Nav1_1abt_i.html and Nav1_1abt_non_i.html, where the "abt" signifies the "About Millennium" section, the "_i" signifies the "index" page for that section, and the "_non_i" signifies all other pages in that section other than the "index" page. The distinctions largely concern whether or not a button is to be rendered "clickable" (an <a href>), and whether the graphic is to be in the on state or not (e.g. NAV1_1abt_on.gif or NAV1_1abt_off.gif). Finally, there is the Home Page version of the Nav1 Module, named: Nav1_1home.html
NAV1.xml in Source XML, "Visual" DTD, and Tree
Spacer. Note also a "presentation-related" data item (something of an unavoidable work-around; however, depending how you think about it, arguably a required piece of "information about the information," an example of "presentational metadata"). We're referring to the <NavItem type="spacer"> as seen in the example. Look at the Nav1 navigation bar itself (seen above)—the extra black space after "Careers" and before "Patients," as well as the extra blue space after "Clinicians" are both controlled by this mechanism. The Nav1.xslt code of course handles the writing of the <img src="shim.gif"> etc., with the appropriate width, height, background color for the table data cell.
Note that the Nav2 file (mlnmdev/BusinessML/NAV2.xml) contains the information for not only Nav2 but also Nav3 (and, in a limited sense, Nav4). This section of the documentation addresses the Nav2 level issues; the section following addresses Nav3 (& 4).
169 Modules of HTML snippets for "Nav2": 57 for Nav2 level pages; 56 for Nav3 level pages; also 56 for Nav4 level pages.
The content model for NAV2.xml closely mimics that of NAV1.xml, except of course it has a deeper level of hierarchy (/Nav2s/Nav2/NavItem vs. simply /Nav1/NavItem). Also, note that the element <filename> is not used at this level. (The default filename must be index.asp. This in fact is the approach the NAV1.xml probably could have also adopted.) Note that the constraint created by this assumption—an attempt at ensuring rigorous information architecture design—did prove a little limiting when a couple of unanticipated exceptions occurred late in development.
As with Nav1, for each Site Sub-Section (Level 2), the minimal descriptive information is captured here: again, for the label, the text (even though the Nav2 label is a graphic) and "alt"ernative text for the label; the directory name; (no filename (default is index.asp)); and the three-letter code abbreviation used for image file-naming ("imgabbrev").
As with Nav1, the design intention is that to add a new Nav2 item is kept to as reduced a work effort as possible here in the NAV2.xml authoring, and that the system then automatically generate as much as possible of the required code from this bare information.
For the Nav2 navigation bar (horizontal, on the left), this is comparatively straightforward: for each of the eight Site Sections (Level 1), the several "children" Nav2 (Level 2) choices (ranging from two ("Products") to eleven ("Investors")) are written out in all necessary permutations. These add up to some fifty-seven (57) different Nav2 Module HTML snippets, to cover all variations of the on or off graphics visual states, as well as the clickable or non-clickable graphics link states. Additionally, at the Nav2 level there is an in graphics visual state (not applicable to Nav1), which signifies you are on a page "in" (down within) a particular Nav2 sub-section. (e.g. The page at /rd/cardiovascular/discovery/index.asp has a Nav2 HTML snippet with a Nav2 graphical button for "Cardiovascular" that is in the in state. This is because the "Discovery Research" page is (down) in the Cardiovascular section.)
These output Modules are written to /mlnmdev/SiteHTML/Navs with names like Nav2_1rad_i.html, where the "rad" signifies the "Research & Development" section, the "_i" signifies the "index" page for that section; and Nav2_1rad_2crd_i.html, where the "_2crd" signifies the "Cardiovascular" (Level 2) section, and again the "_i" signifies the "index" page in that section. The distinctions largely concern whether or not a button is to be rendered "clickable" (an <a href>), and whether the graphic is to be in the on, off or in state (e.g. NAV2_1rad_2crd_on.gif, NAV2_1rad_2crd_off.gif, or NAV2_1rad_2crd_in.gif). Finally, note that for the site Home Page, there is no Nav2!
NAV2.xml in Source XML, "Visual" DTD, and Tree
As described in the "Exceptions" section, there are some Modules that have their source data in Modules in the SiteHTML directory instead of in the /BusinessML/NAV2.xml data file.
SiteHTML/Navs/Nav2_1car_2sea_usandnon.html (Careers, Job Search, U.S. Jobs and also Non-U.S. Jobs pages)
SiteHTML/Navs/Nav2_1inv_i.html (Investors index page)
As mentioned above, note that the Nav2 file (mlnmdev/BusinessML/NAV2.xml) contains the information for Nav3 (and, in a limited sense, Nav4). This section of the documentation addresses the Nav3 level issues; the previous section addresses Nav2.
(As above) 169 Modules of HTML snippets for "Nav2": 57 for Nav2 level pages; 56 for Nav3 level pages; also 56 for Nav4 level pages.
With Nav3, we continue exploring the content model for NAV2.xml, which continues to closely mimic that of NAV1.xml (see figure below). The hierarchy now goes one level deeper: Nav3 = /Nav2s/Nav2/NavItem/Nav3/NavItem (vs. Nav2 = /Nav2s/Nav2/NavItem and vs. Nav1 = /Nav1/NavItem). Here (as opposed to for Nav2), note that the element <filename> is once again used at this level (like it is in Nav1). (The usual filename used is index.asp, but at the Nav3 level you may opt to create a "leaf-node" page instead of creating a new directory to hold an index.asp page. As noted above, it is probably to be preferred to more rigorously adopt the "index.asp" approach even down at the Nav3 level.)
As with Nav1 and Nav2, for each Site Sub-Sub-Section (Level 3), the minimal descriptive information is captured here: again, for the label, the text (note that the Nav3 label is text in this site implementation (the "Build" system can also support Nav3s as Graphics; see the XSLT) and "alt"ernative text for the label (though not used when the label is text). Something new at the Nav3 level is that the directory name reflects the parent directory (for Nav2 level), while the new element directory_subsubsection is the name of the directory that will hold the Nav3 file. (This area of code good candidate for review and re-factoring.) Following is the filename element, as discussed just above (preferred default index.asp); and finally, as with the other Nav sections, the three-letter code abbreviation used for image file-naming ("imgabbrev").
As with both Nav1 and Nav2, the design intention is that to add a new Nav3 item is kept to as reduced a work effort as possible here in the NAV2.xml authoring, and that the system then automatically generate as much as possible of the required code from this bare information. In fact, with Nav3 implemented as text (vs. graphically), it is even easier to add Nav3 level items.
For the Nav3 portion of the ("Nav2") navigation bar, this is fairly straightforward: for each of the forty (40) Site Sub-Sections (Level 2), the several "children" Nav3 (Level 3) choices (ranging from zero ("Patients, Cancer") to nine ("Careers, Benefits")) are written out in all necessary permutations. These add up to some fifty-six (56) different Nav3 permutations; these are coded in "Nav2" Module HTML snippets, to cover all variations of the on or off text visual states (using CSS), as well as the clickable or non-clickable text link states. Additionally, (as at the Nav2 level) there is for the Nav3 level an in text visual state (again, not applicable to Nav1), which signifies you are on a page "in" (down within) a particular Nav3 sub-section. (e.g. The page at /rd/cardiovascular/candidates/mln519.asp has a Nav2 HTML snippet with a Nav3 text button for "Development Candidates" that is in the in state. This is because the "MLN519" page is (down) in the Development Candidates section.)
These output Modules are written to /mlnmdev/SiteHTML/Navs with names like Nav2_1rad_2crd_3can_i.html, where the "rad" signifies the "Research & Development" section, "crd" signifies the "Cardiovascular" sub-section, "can" signifies the "Development Candidates" sub-sub-section, and the "_i" signifies the "index" page for that section. Another filenaming example (where we finally encounter the "Nav4"-level information): Nav2_1rad_2crd_3can_level4.html, where the final "_level4" is meant to signify that this Nav2 Module HTML snippet should be used for any and all "Level 4" pages found down below this particular Nav3 sub-sub-section. That is, by the time we are down to Level 4, there is actually no impact on the Nav2 (and its Nav3) Module. The same Module can be used for any and all pages ("Level 4") further down below.
As above, the distinctions in all these Module permutations are largely concerned with whether or not a navigation label (text "button" for Nav3) is to be rendered "clickable" (an <a href>), and whether the navigation label (text "button" for Nav3) is to be in the on, off or in state (as achieved with CSS, not graphics). Finally, again note that for the site Home Page, there would be no Nav3!
Nav3 in NAV2.xml in Source XML, "Visual" DTD, and Tree
As noted above, the Page Headers consist of information directly derivable from Navigation: Nav1 (Level 1) plus Nav2 (Level 2) label information. The same NAV2.xslt processes output files (from the same NAV2.xml) of simple HTML tables to hold the necessary graphics to create them.
The HTML snippet filenaming convention is like so:
/mlnmdev/SiteHTML/PgHdrs/pghdr_1abt_i.html
/mlnmdev/SiteHTML/PgHdrs/pghdr_1abt_2his.html
![[Note]](images/note.png) | Note |
|---|---|
Exceptions to the rule of auto-generated Page Headers. These utility pages fall outside the basic hierarchical structure of "Level 1, Level 2," and therefore do not have entries in the NAV2.xml file. Their "Page Header" Modules are like a few other exception cases in the system, and have their source version in the SiteHTML subdirectory:
| |
The graphics filenaming convention for the component images is like so:
/mlnmdev/htdocs/images/pghdrs/pghdr_1abt.gif
/mlnmdev/htdocs/images/pghdrs/pghdr_1abt_photos.jpg
/mlnmdev/htdocs/images/pghdrs/pgsubhdr_1abt_2his.gif
/mlnmdev/htdocs/images/pghdrs/pgsubhdr_1xxx_2none.gif (blank white)
| Note |
|---|---|
As corollary to the "Note" above, the filenaming "convention" for the graphics for the non-auto-generated Page Header Modules is shown below:
| |
| Tip |
|---|---|
The subdirectory htdocs/images/pghdrs/ does not use "ProperCasing" as it will become part of a URL (or URI, more correctly), and lowercasing all characters is a safer approach for site maintenance in URLs. By contrast, the /SiteHTML/PgHdrs/ subdirectory for the HTML snippets can take advantage of the visual distinction that ProperCasing provides, as it is a "behind-the-scenes," utility subdirectory—used only in processing site artifacts, not rendering URLs. | |
Nine Javascript snippets are auto-generated:
One (for Nav1 graphics): Nav1_1rollovers.js, by /mlnmdev/xsl/NAV1_rollover.xslt
This pre-cache script is used on all site pages: <script src="/js/Nav1_1rollovers.js" type="text/javascript"></script>
Eight (for eight Level 2 Site Sections Nav2 graphics): e.g., /mlnmdev/htdocs/js/Nav2_1abt_rollover.js
These pre-cache scripts are dynamically loaded by another Javascript function 'Loader()', in /mlnmdev/htdocs/js/css.js: <script language="JavaScript" src="/js/css.js" type="text/javascript"></script>
Here are the contents of one script: /mlnmdev/htdocs/js/Nav2_1abt_rollover.js
devmachine (~/Millennium/mlnmdev/htdocs/js) > cat Nav2_1abt_rollover.js
var imgsleftnav = new Array();
imgsleftnav["NAV2_1abt_2per"] ="/images/nav/NAV2_1abt_2per_off.gif";
imgsleftnav["NAV2_1abt_2per_on"] ="/images/nav/NAV2_1abt_2per_on.gif";
imgsleftnav["NAV2_1abt_2his"] ="/images/nav/NAV2_1abt_2his_off.gif";
imgsleftnav["NAV2_1abt_2his_on"] ="/images/nav/NAV2_1abt_2his_on.gif";
imgsleftnav["NAV2_1abt_2val"] ="/images/nav/NAV2_1abt_2val_off.gif";
imgsleftnav["NAV2_1abt_2val_on"] ="/images/nav/NAV2_1abt_2val_on.gif";
function ImgCacherLeft()
{var cacheImagesleft=new Array();
for (i=0; i < imgsleftnav.length; i++)
{cacheImagesleft[i] = new Image();
cacheImagesleft[i].src = imgsleftnav[i];
}
}
function rolloverleft(imgName)
{if(imgName.indexOf("_on") != -1)
{imgName = imgName.slice(0,-3);
document.images[imgName].src = imgsleftnav[imgName + "_on"];
}else{
document.images[imgName].src = imgsleftnav[imgName];
}
}
ImgCacherLeft();
devmachine (~/Millennium/mlnmdev/htdocs/js) >
The figure below is fairly self-explanatory, combining into a sequence a series of partial screenshots (of Navigation) as seen in "drilling down" into one site section ("Research & Development"). The graphic is annotated with key (tiny) snippets of URLs, code, and naming conventions.
Millennium Website System
Three-letter codes for Level 1 "Site Sections", Level 2 "Nav2", and Level 3 "Nav3".
| Note |
|---|---|
Three letter code values need not be globally unique. They must however be unique amongst immediate siblings. Some consistency in use of codes is recommended (e.g. "onc" means "oncology" throughout the site). | |
| Tip |
|---|---|
The markup for this bulleted list (NAV2_3-lettercodesDocBook.xml) was produced by running the XSLT NAV2_3-lettercodesDocBook.xslt against the XML NAV2.xml. C:\mlnmdev> java org.apache.xalan.xslt.Process -IN BusinessML\NAV2.xml -XSL xsl\NAV2_3-lettercodesDocBook.xslt -OUT NAV2_3-lettercodesDocBook.xml From this DocBook XML, you can then process to HTML. Note: You may also generate HTML directly: C:\mlnmdev> java org.apache.xalan.xslt.Process -IN BusinessML\NAV2.xml -XSL xsl\NAV2_3-lettercodesHTML.xslt -OUT NAV2_3-lettercodesHTML.html Note: Both XSLTs included in .ZIP file with this final documentation. | |
abt = about
No Nav2 "imgabbrev" (Is only O.K. for INDEX page) = No Nav2 "directory" (Is only O.K. for INDEX page)
per = personalized
his = history
val = values
prd = products
No Nav2 "imgabbrev" (Is only O.K. for INDEX page) = No Nav2 "directory" (Is only O.K. for INDEX page)
int = integrilin
cam = campath
rad = rd
No Nav2 "imgabbrev" (Is only O.K. for INDEX page) = No Nav2 "directory" (Is only O.K. for INDEX page)
pip = pipeline
eng = engine
exp = No Nav3 "directory_subsubsection" (This can be O.K. for any Nav3 Level page - it means it is a "leaf" node page)
pla = No Nav3 "directory_subsubsection" (This can be O.K. for any Nav3 Level page - it means it is a "leaf" node page)
pub = No Nav3 "directory_subsubsection" (This can be O.K. for any Nav3 Level page - it means it is a "leaf" node page)
crd = cardiovascular
int = integrilin
ovr = No Nav3 "directory_subsubsection" (This can be O.K. for any Nav3 Level page - it means it is a "leaf" node page)
can = candidates
dis = discovery
all = alliances
tea = team
onc = oncology
vel = velcade
tre = treatment
can = candidates
dis = discovery
all = alliances
tea = team
inf = inflammation
ovr = No Nav3 "directory_subsubsection" (This can be O.K. for any Nav3 Level page - it means it is a "leaf" node page)
can = candidates
dis = discovery
all = alliances
tea = team
met = metabolic
ovr = No Nav3 "directory_subsubsection" (This can be O.K. for any Nav3 Level page - it means it is a "leaf" node page)
can = candidates
dis = discovery
all = alliances
tea = team
| Note |
|---|---|
"Investors" is entirely commented out in NAV2.xml. (Why? Because the NAV2s are maintained at CCBN.com, and the /investors/index.asp NAV2, hosted at Millennium, is no longer auto-generated from NAV2.xml, but instead is maintained as a finished SiteHTML module.) Therefore, the list below of 3-letter codes for Investors was only created because the comments were temporarily removed. | |
inv = investors
No Nav2 "imgabbrev" (Is only O.K. for INDEX page) = No Nav2 "directory" (Is only O.K. for INDEX page)
inv = overview
sch = chart
sto = stock
sec = sec
ana = analyst
ann = annualreport
spe = calendar
ear = earnings
pre = presentations
con = contacts
ema = email
med = media
No Nav2 "imgabbrev" (Is only O.K. for INDEX page) = No Nav2 "directory" (Is only O.K. for INDEX page)
new = news
2003 = 2003
2002 = 2002
bio = bios
kit = kit
con = contacts
bus = strategy
car = careers
No Nav2 "imgabbrev" (Is only O.K. for INDEX page) = No Nav2 "directory" (Is only O.K. for INDEX page)
sea = search
sel = selection
ben = benefits
car = receptions
vid = video
pat = patients
No Nav2 "imgabbrev" (Is only O.K. for INDEX page) = No Nav2 "directory" (Is only O.K. for INDEX page)
crd = cardiovascular
ccr = cancer
inf = inflammation
met = metabolic
cli = clinicians
No Nav2 "imgabbrev" (Is only O.K. for INDEX page) = No Nav2 "directory" (Is only O.K. for INDEX page)
crd = cardiovascular
int = integrilin
cru = crusade
pgy = pathology
rad = rd
tri = trials
res = resources
onc = oncology
ovr = No Nav3 "directory_subsubsection" (This can be O.K. for any Nav3 Level page - it means it is a "leaf" node page)
cam = campath
pro = proteasome
rad = rd
tri = trials
res = resources
inf = inflammation
ovr = No Nav3 "directory_subsubsection" (This can be O.K. for any Nav3 Level page - it means it is a "leaf" node page)
rad = rd
tri = trials
res = resources
met = metabolic
ovr = No Nav3 "directory_subsubsection" (This can be O.K. for any Nav3 Level page - it means it is a "leaf" node page)
tri = trials
res = resources