bp_cis_2003 - Authoring instructions, style configuration guidelines
2/11/04 – New solution for target specification for volume page links 12/15/03 – Allow for no links on the volume page; Allow target specification for volume page links. 10/20/2003 – Added info in Part View, #4 and updated screenshot for inclusion of chapter title in content header. Stylesheet contents also updated. 6/4/2003 – Original
Table of Contents bp_cis_2003 - Authoring instructions, style configuration guidelines...... 1 Table of Contents...... 1 Volume View...... 1 Configuring the links (for the navigation frames)...... 3 Configuring the links (for the volume page)...... 4 HTML code for a Volume Page link...... 6 Configuring the tab images...... 9 Part View...... 9 Image Lookup...... 10 Style Images (which can be overridden)...... 11 Content Hierarchy...... 12 Creating the Shared Content...... 13 Customization via the stylesheet...... 14 Customization of the javascript...... 16
Volume View When the volume is displayed: 1. the top navigation frame (top nav) shows links in the upper right corner. See Configuring the links (for the navigation frames) for configuration information. 2. the middle navigation frame (middle nav) does not show a dropdown menu. 3. the left navigation frame (left nav) shows each part represented by a button. See the Image Lookup section for more information. 4. the left nav shows links under the part buttons. See Configuring the links (for the navigation frames) for configuration information. 5. the content frame shows the volume splash page. 6. the content frame shows links on the right side. See Configuring the links (for the volume page) for configuration information. Links are optional on the right side of the volume page. See #8 in the screenshot on the next page. 7. the middle nav shows tab images for student downloads and instructor downloads. See Configuring the tab images for configuration information. bp_cis_2003 Authoring Instructions
2 bp_cis_2003 Authoring Instructions
Configuring the links (for the navigation frames) Items 1, 4 and 6 above are lists of links that are configurable in the authoring environment. Since they are configurable the order can be changed and links can be added removed or changed without requiring a change to the style. Configuring the links for the top nav (1) and the left nav (4) are described below. To configure the links for the volume page (6) see Configuring the links (for the volume page)
In the volume, create 2 resource components titled: topnav_links leftnav_links
Within each resource component, create a destinations module (the title is not significant). In the destinations component, create a web destination for each link to be shown.
If the link is to reference an external URL: 1. enter the URL in the URL field. 2. enter the link text in the Link Text field.
Special URLs are those for which the link and target are coded in the style. The Special URLs include Tech Support, Technical Support, Home, Search, Profile, and Browser Tuneup. If the link is to reference a special URL: 1. leave the URL field blank.
3 bp_cis_2003 Authoring Instructions
2. enter the link text in the Link Text field.
In the left nav the link text will be used to look up the image to be displayed. See the Image Lookup section for more information.
The destinations component used for the screenshot above:
Configuring the links (for the volume page) Item 8 in the screenshot above shows the volume page without any links. Skip this step if you do not want links on the volume page.
Item 6 in the screenshot above shows the links on the volume page.
To configure these links create a resource component in the volume titled: volume_page_links
Within the resource component, create a destinations module (the title is not significant).
Create a web destination for each link to be shown.
If you want the link to target a new browser window:
1. in the URL field: enter the external url (e.g., http://www.google.com) or Qualified Media Library URL (e.g., /wps/media/objects/1234/567890/filename.ext) for the link. *
* This style does not support the use of Link to Content (e.g., xml123456) links in the volume_page_links resource.
4 bp_cis_2003 Authoring Instructions
2. in the Link Text field: enter the name of the image in the media library to be shown for the link. These images (e.g. link_careers.gif) should be uploaded to the _style folder in the volume’s media library if you want to change them. If you don’t intend to change them the default images are stored in the style’s medial library. See section Style Images (which can be overridden) for more information. 3. in the Brief Description field: enter the text to be shown under the image.
The link be created with target=”_blank” to always open a new browser window.
If you want to use a different target for the link (or want to add image swapping javascript or additional html):
1. leave the URL field empty. 2. in the Link Text field: enter the html for the link. The style code uses 3 table rows for each link. The code for a single link is shown in the next section, HTML code for a Volume Page link. This code can be cut and pasted into an appropriate editor and modified for the particular links, images and text descriptions to be presented. The links for the images should be obtained via the Build URL button in the media library window. Important: before pasting the modified HTML into the Link Text field all line break characters must be removed. This will cause the WPS authoring interface page to stretch as wide as the content of the Link Text field requiring use of the horizontal scroll bar to access the buttons on the screen. 3. leave the Brief Description field empty.
The destinations component used for the screenshot above is shown below. The first link uses custom HTML to specify a different target. The remainder of the links target a new window. Note: This effect only applies to destinations links in the volume_page_links resource in this style.
5 bp_cis_2003 Authoring Instructions
HTML code for a Volume Page link The code below represents the style’s default code for rendering a single volume page link. The items in bold are (in order): 1. the URL for the link, 2. the link target, 3. the path to the image in the volume’s media library, Note: this path should be obtained via Build URL. The number in the path, the object id, will differ between volumes. 4. the path to ‘space.gif’ in the volume’s media library, Note: this is a 1x1 pixel transparent gif. It should be uploaded to the _style folder in the volume’s medialib. A copy of this image can be obtained from Style Services. Make sure that you've remembered to update BOTH occurrences of space.gif. 5. the text for the link, 6. (same as #4)
6 bp_cis_2003 Authoring Instructions
Information Technology resources for the discerning instructor.
The same code with the line breaks removed (as required for input in Link Text field):
The href, target, or other hyperlink parameters can vary to include media library files, link to content links, or external URLs, and can include JavaScript. The following are additional examples, showing several different case studies:
A. Media Library File Targeted to a New Window:
The default behavior of this style is that a Qualified Media Library URL entered into the URL field will target a new window. You should not need to use any custom code to do this. If, however, you opt to enter such code into the Link Text field, it would look like this:
B. External URL Targeting to the Content Frame:
7 bp_cis_2003 Authoring Instructions
C. Qualified Media Library URL Targeting the Content Frame
D. External Link Targeting Javascripted Window Using In-Line JS
E. Qualified Media Library URL Targeting Javascripted Window Using In-Line Javascript
8 bp_cis_2003 Authoring Instructions
F. External Link Targeting Javascripted Window Using External Javascript:
Then customize openBG() in bp_cis_2003.js to look something like this:
// Example pop-up window function for volume page links var bWin = null; function openBG () { var url = 'http://www.google.com'; if (!bWin || bWin.closed) { bWin = window.open(url, 'BGwin', 'width=800,height=600,' + 'toolbar=yes,location=yes,resizable=yes,scrollbars=yes'); } else { bWin.location = url; bWin.focus(); } }
G. Qualified Media Library URL Targeting Javascripted Window Using External JS
9 bp_cis_2003 Authoring Instructions
Then customize openBG() in bp_cis_2003.js to look something like this:
// Example pop-up window function for volume page links var bWin = null; function openBG () { var url = '/wps/media/objects/123/456789/filename.ext'; if (!bWin || bWin.closed) { bWin = window.open(url, 'BGwin', 'width=800,height=600,' + 'toolbar=yes,location=yes,resizable=yes,scrollbars=yes'); } else { bWin.location = url; bWin.focus(); } }
* Note that this will require a Qualified URL; a regular Build URL will not work.
Note: The JavaScript functions for the last two examples are included in the default JavaScript file for the style, bp_cis_2003.js and shown in Customization of the javascript)
H. Link To Content (xml/######) Targeting Javascripted Window, External JS
It is not possible to use a Link to Content (xml/######) link in the WPS Media Library.
I. Link To Content (xml/######) Targeting Javascripted Window, In-Line JS
It is not possible to use a Link to Content (xml/######) link in this particular instance. The code for converting the xml/ reference to something usable would likely not work within these fields, nor would this be compatible with the style-based shared content code this style requires.
Configuring the tab images Within the volume, create two resources titled (the case is not significant): student downloads instructor downloads
Within each resource create a module. This can be any type of module (basic, destinations, etc). The content for the first module found in the resource will be displayed in the content frame when the image is clicked. See Style Images (which can be overridden) for image information.
Part View When a part button is clicked the part view is displayed: 1. The middle nav shows the chapters for the part. To set up chapters for parts see section Creating the Shared Content. 2. The part is expanded to show the modules in the first chapter of the part. The images shown are based on the titles of the modules. See the Image Lookup section for more information. 3. The breadcrumbs show the hierarchy of the module displayed, minus the actual part, since the chapter name shows the name of the part.
10 bp_cis_2003 Authoring Instructions
4. The chapter title and module title are displayed as the ‘content header’. The fonts and colors of the content header can be changed. The vertical space above and below can be changed. The vertical space between the chapter title and module title can be changed. For more information see Customization via the stylesheet. 5. The module’s content is displayed.
Image Lookup All of the images are stored in the media library and looked up via the navigation mechanism. This mechanism uses a file titled navigation.xml in the media library folder .navigation
All of the images must be uploaded to the .navigation folder in the media library.
The contents of the navigation.xml file follow. The actual file should be obtained from CMG Style Services to avoid cut and paste errors.
11 bp_cis_2003 Authoring Instructions
Style Images (which can be overridden) The following images can be overridden by creating a folder in the media library titled _style and uploading images with the same names to this folder. Image width and height in pixels are provided in parenthesis, after the file name.
1. top_background.jpg 8. student_a.gif, student_b.gif (142 x 20) 2. mid_background.gif 9. instructor_a.gif, instructor_b.gif (159 x 20) 3. left_background.gif 10. link_ITRs.gif (215 x 17) 4. separator.gif (162 x 8) 11. link_TOCs.gif (215 x 17) 5. cover.gif (109 x 119) 12. link_MOS.gif (215 x 17) 6. bluefade.gif 13. link_Careers.gif (215 x 17) 7. feedback_a.gif, feedback_b.gif (105 x 14. link_BG.gif (215 x 17) 27)
12 bp_cis_2003 Authoring Instructions
Content Hierarchy Each volume using this style represents a Series.
Within the volume are parts, representing Books within the Series.
Virtually, each Book contains chapters but since chapters need to be shared within books, each part contains a destinations module which contains pointers to the actual chapters.
The actual chapters are stored in a part titled shared content.
Within the chapters are modules.
The following components are not directly rendered in this style: Introduction, Chapter, Appendix, Resource. This means that even though chapters are used they can not be previewed in the authoring environment. To preview the contents of a chapter either start at the containing part or drill down to the individual modules.
Creating the Shared Content Create a part titled shared content within the volume.
Within the shared content part create all of the chapters and modules for all of the books.
13 bp_cis_2003 Authoring Instructions
Within the volume create the parts for the books.
Within each part, create a destinations module titled chapters. (The title is significant but the case is not significant).
Within the chapters destination module create a web destination for each chapter in the book. Each web destination should contain, in the URL field, the object id (preceded with ‘xml/’) for the actual chapter.
The object id is shown at the top of the page when authoring the chapter:
Rather than navigating to each chapter to obtain the object id the development site map can be utilized. First, within the shared content part, create a basic module titled dev_site_map. Then simply preview the module. The object ids for the chapters can be cut and pasted from this page.
14 bp_cis_2003 Authoring Instructions
Customization via the stylesheet The cascading stylesheet (bp_cis_2003.css ) controls all of the fonts used in the style. It can be uploaded to the media library (in the _style folder) to override the css residing in the style.
Fonts, colors, vertical spacing and horizontal spacing can be controlled by altering certain items in the stylesheet.
/* stylesheet for bp_cis_2003 style */
/* Top navigation frame links in upper right */ .toplinks { font-size: 10px; font-family: Helvetica; font-weight: bold; color: #FFFFFF; text-decoration: none; cursor: hand; }
/* Top navigation frame dropdown menu */ .dropdown { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }
/* Volume page: descriptive text for links */ .description { font-size: 12px; font-family: Arial, Helvetica, sans-serif; color: #000000; }
/* Volume page: left side indent for content */ .splash_indent { margin-left: 8px; }
/* Content frame: left side indent for content */ .content_indent { margin-left: 24px; }
15 bp_cis_2003 Authoring Instructions
/* Content frame: breadcrumb area background color and spacing above and below text. */ .breadcrumb_above { background-color: #ffffff; font-family: Arial, Helvetica, sans-serif; font-size:4px; } .breadcrumb_below { background-color: #ffffff; font-family: Arial, Helvetica, sans-serif; font-size:4px; }
/* Content frame: breadcrumb text. Text color, background color, and text size significant */ .breadcrumb { color:#333333; background-color: #ffffff; font-family: Helvetica, sans-serif; font-size:11px; }
/* Content frame: breadcrumb text when text is a link. Text color and size should match that above. */ a.breadcrumb { color:#333333; font-family: Helvetica, sans-serif; font-size:11px; text-decoration: none; cursor: hand; } a.breadcrumb:active { color:#333333; font-family: Helvetica, sans-serif; font-size:11px; text-decoration: none; cursor: hand; } a.breadcrumb:visited { color:#333333; font-family: Helvetica, sans-serif; font-size:11px; text-decoration: none; cursor: hand; } a.breadcrumb:visited:hover { color:#333333; font-family: Helvetica, sans-serif; font-size:11px; text-decoration: none; cursor: hand; }
/* Content frame: vertical space above and below content header and between primary and secondary header lines */ .content_hdr_above { background-color: #ffffff; font-family: Arial, Helvetica, sans-serif; font-size:24px; } .content_hdr_below { background-color: #ffffff; font-family: Arial, Helvetica, sans-serif; font-size:20px; } .content_hdr_between { background-color: #ffffff; font-family: Arial, Helvetica, sans-serif; font-size: 1px; }
/* Content header and secondary content header. Color and font attributes are significant */ .content_hdr { color:#29406A; font-family: Arial, Helvetica, sans-serif; font- size: 11pt; font-weight: bold; } .content_hdr2 { color:#000000; font-family: Arial, Helvetica, sans-serif; font- size: 13pt; font-weight: bold; }
/* Bottom frame: copyright text and links */ .copyright { font-size: 11px; font-family: Arial, Helvetica, sans-serif; font- weight: 300; text-align: center; color: #FFFFFF; text-decoration: none; cursor: hand; }
/* Profile pop-up */ .profheader { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14pt; font-weight: normal; } .profsubheader { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; font-weight: bold; } .small { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt;}
/* Content - for the authors to decide upon */ body, div, p, th, td, li, dd { color:#000000; font-family: Arial, Helvetica, sans-serif; font-size: 10pt; }
16 bp_cis_2003 Authoring Instructions
Customization of the javascript The javascript file (bp_cis_2003.js ) contains code for certain functions used in the style. It can be uploaded to the media library (in the _style folder) to override the file residing in the style.
Tuning can be done to things such as pop-up window dimensions. New functions can be added and called from content modules.
The file contents:
// Content-side included javascript for bp_cis_2003 style
// Pop-up window function for Profile var pWin = null; function openProfile (url) { if (!pWin || pWin.closed) { pWin = window.open(url, 'Profile', 'width=600,height=625,' + 'toolbar=no,location=no,resizable=yes,scrollbars=yes'); } else { //pWin.location = url; // don't reload since it's a form pWin.focus(); } }
// Example pop-up window function for volume page links var xWin = null; function openPopup (url, w, h) { if (!xWin || xWin.closed) { xWin = window.open(url, 'popup', 'width=' + w + ',height=' + h + ',toolbar=no,location=no,resizable=yes,scrollbars=yes'); } else { xWin.location = url; xWin.focus(); } }
// Example pop-up window function for volume page links var bWin = null; function openBG () { var url = 'http://www.google.com'; if (!bWin || bWin.closed) { bWin = window.open(url, 'BGwin', 'width=800,height=600,' + 'toolbar=yes,location=yes,resizable=yes,scrollbars=yes'); } else { bWin.location = url; bWin.focus(); } }
17