Using CommonSpot to Maintain
Ohio University Web Sites

Table of Contents

• Simple Text Blocks

• Using the Rich Text Editor to Import or Edit Existing Content

• Links

• E-Mail Links

• Marking and Using Jump Destinations

• Image Gallery

• Images

• Image Grids

• Binary Files as Clickable Resources

• Tabular Layout Elements

• Copying and Pasting Whole Elements

• Deleting Elements

• Microsoft Word Document as an HTML Element

• Pop-Up Menus

• Changes that Take Effect Immediately

• Validate Links

• Referring Pages

• Create Page Sets

• Use Page Sets

• Manage Page Sets

• Style Sheets

Simple Text Blocks

See the Rich Text Editor section for a detailed discussion of creation and revision of formatted text blocks. For Simple Text Blocks:

1. Choose "Author" mode from the "View Modes" shortcut, if you are not already in "Author" mode.

2. Click on "Click to insert new element"; if there is no such item, then click on the cell properties icon , and select "Insert/Copy Rows..." from the menu that pops out. Confirm that it is creating an empty row, choose whether to create the empty row before or after the element above which the cell properties icon was located, and then click on the "Finish" button.

3. Click on "Text Elements" to expand that part of the list.

4. Click on "Simple Text Block" to select that choice.

5. Click on "Click here to define the text block header" or on "click here to define the text block".

6. Type different things into the header and text block fields of the resulting dialog box.

7. Click on the "Finish" button.

8. Observe the results.

9. Submit the changes for publication; in class, wait your turn to click on the "OK" button.

Using the Rich Text Editor to Import or Edit Existing Content

The Rich Text Editor is used to create and revise Formatted Text Block elements. As we have already discussed, Simple Text Blocks are elements that will re-wrap to fill the available space, and which are presented on-screen in a uniform type face. Formatted Text Blocks differ in that you can control the layout using standard HTML numbered and unnumbered list structures, forced new lines and paragraph breaks, type choices (face, size, and style), embedded links and images, etc.

You can use the Rich Text Editor directly for composition, or you can copy text from other software and paste it into the editor window. The current version of the Rich Text Editor works only with the Windows version of Microsoft Internet Explorer and with Mozilla-based browsers, such as Firefox, on Windows, Macintosh, and Linux.

1. Go to the page in CommonSpot where you want to include the text, click on "Click to insert new element", and choose a formatted text block from among the "Text Elements" category in the Element Gallery.

2. Your page will now display "Click here to define the textblock header" in larger, darker type, and immediately below that, "Click here to define the textblock" in smaller, paler type. Click on either of those to bring up the Rich Text Editor window.

3. The figure illustrates the Rich Text Editor window:
   
   

   You can enter text into the text block or header by typing or by copying from another window and pasting. If text in the Text Block window has been selected, several of the toolbar buttons that are greyed-out in the illustration above will become active and be displayed with full intensity.

4. Typing new material:
   
   Beware special characters, such as "curly" or "smart" quotes and apostrophes, long dashes, solid bullets, etc. The numerical codes for such characters differ between Windows and Macintosh, so that if the raw character is placed into the text block, it will look fine to you, but will be an entirely different character when viewed by users of the other platform. There are special HTML codes that exhibit the same problem (e.g., "Ӓ" -- where the digits between the "#" and the ";" will depend on the character and platform) while other special HTML codes are platform-agnostic (e.g., "&text;" -- where the text between the "&" and the ";" is case-sensitive and determines the character to be displayed). This problem can also occur with text from any of the methods discussed below.
   
   
5. Copy and paste from a browser window:
   
   If the information you want to include on your page is already available on the Web (e.g., in the previous version of your subsite), then you can examine the page where it is already in place, run the mouse through the text to highlight it, and select "Copy" from the "Edit" menu (or use the equivalent keyboard short-cut). Then go to the page in CommonSpot where you want to include this text, follow steps one and two of this sequence, and then choose "Paste" from the "Edit" menu.

6. Copy and paste raw HTML:

   You can get the raw HTML from a text editor, such as WordPad, if the HTML file is on your computer, or by selecting View Source in your browser. Only select and copy HTML sections that are between the <BODY> and </BODY> tags, not including those tags.

   Before pasting your HTML into the formatted text block entry area, click on the "HTML" tab at the lower-left. Please be aware that some HTML constructs will not survive unchanged when you save and re-edit the text block; one that fails is Definition List structures. (We plan either to expand this item or to put a link here to a discussion of what HTML structures do and don't work, and possible work-arounds for those that don't work.)

7. Copy and paste from Word:

   Choosing "formatted" when pasting will preserve as much as possible of the appearance of the original document for those of your audience who look at the page using the Windows version of Microsoft Internet Explorer, but will include Microsoft-specific and Windows-specific codes that will make your information more diffcult to read with other browsers and on other platforms.

8. Font issues:

   If your font is too small, this will render the text unreadable for part of your audience. After pasting, use the mouse to highlight all the new text, and choose a font face that is sans-serif (e.g., "Ohio Default") and a font size of "x-small" or larger. If you choose a serif font, be sure to choose a size of "small" or larger.

   The "Ohio Default" font is actually a comma-separated list of sans-serif faces (which are more easily read at small sizes), one of which is sure to be installed on all Macintosh systems, and another one of which is sure to be installed on all Windows systems. Please be aware that if you choose a face specification that is a list of multiple faces, such as "Ohio Default," the face menu will immediately change to the first one on the list that is installed on your computer. CommonSpot will still generate HTML, when the page is published, that includes the full list.

   The selection of font face and size choices available in CommonSpot may change in the future.

9. When editing a formatted text block in "Normal" mode (not "HTML" mode), use the key combination "Shift-Enter" to create a line break that is not a paragraph break. When editing items in a bulleted list, you can use the "Shift-Enter" key combination two consecutive times to create a multi-paragraph list item, with no bullet for the new paragraph (e.g., see items 4 through 8 of this list).

10. The tool with the chain icon is available when text is highlighted and is used to make that highlighted text link to another location. It will bring up the standard CommonSpot linking dialog box, discussed in the next section.

11. Do not use the "List Properties" tool; it appears to let you change, for example, the starting number of an itemized list, or whether Arabic or Roman numerals are used. Some browsers will not obey those attributes, which means that some people will see your list with Arabic numerals starting at "1" and others will see it as you have specified; hence, any reference to a specific item will mislead part of your audience. For this reason, the "List Properties" tool may be removed from the Rich Text Editor in a future version of CommonSpot.

12. Place your mouse over each of the other tools in the three rows. You will observe the short name for each that is displayed, in case the icon is not sufficiently suggestive.

Links

You can use CommonSpot to make a text or graphic element that is a link, or to make part of the text in a formatted text block element to be a link. Those links can be to other places in the same CommonSpot page (a "jump"), to other CommonSpot pages, to binary documents within CommonSpot (e.g., PDF files or Excel spreadsheets), or to external Web resources that are not part of the CommonSpot content management system. All images can be made to be clickable links; for details, see the Images section.

1. To make a CommonSpot element that is a link, start by navigating to the page on which the link is to appear.

2. Select "Author" mode.

3. Scroll on the page to the place where you want to have the link appear.

4. If there is no "empty" element at that location, click on the cell properties icon , and select "Insert/Copy Rows..." from the menu that pops out. Confirm that it is creating an empty row, choose whether to create the empty row before or after the element above which the cell properties icon was located, and then click on the "Finish" button.

5. Click on "Click to insert new element".

6. Click on "Hyperlink Elements" to expand that portion of the list.

7. Select the type of link you want to create. To create a simple link, click on "Link"; in class, choose "Link."

8. Click on "Click here to define the link".

9. Fill in the "link header" with the text that you want to be the visible, clickable link, and then click on the "next" button.

10. Choose the type of link, (in class, choose "Link to existing page or file"); observe the lower left of the dialog box to see if there is now a check-box for "Open link in new window," and if so, decide whether to leave it clear or to check it.

11. Click on the "next" button.

12. Use the radio button to choose either an internal (CommonSpot) page or document, or an external page or document or internal relative URL. Then select the specific destination:
    • In the former case you will need to browse within CommonSpot; the "Gallery" button works well for finding one of your own pages, or for finding anyone else's page, if you already know the subsite -- observe the check-box to include sub-subsites -- and the "Page Finder" button works well for finding other people's pages when you don't know the URL, but are confident that it is somewhere in CommonSpot. In order to be able to find a page using the Page Gallery or the Page Finder, it must have its page properties set to be available through those methods, as instructed in the last bullet of step 4 in the instructions for creating a new page. A link established through either the Gallery button or the Page Finder button will be updated if the destination page is moved to a different location or is renamed.

      A "Jump" is a link to another location within the same page (using an anchor tag with HREF="#whatever"). That will be possible only if you have already marked that destination location, so that it will be rendered using an anchor tag with NAME="whatever", before starting this link creation process, using the method described in the next section.

    • In the latter case you will need to type the URL into the space provided for an external page or document or internal relative URL.

      If the page in question is not part of CommonSpot, be sure to include the entire URL, starting with the protocol specification (e.g., "http://").

      If the page in question is part of CommonSpot, be careful to include neither the protocol nor the server specifications, so that your link will work unchanged on the test server or on the production server under either of its names. When typing such an internal relative URL, you may use the "../" prefix to navigate among your sub-subsites, but do not use it to change to another subsite than the one containing the current page; instead, use a URL starting with a slash ("/"). Please be aware that using this manual entry technique for CommonSpot pages means that the link is not managed by CommonSpot, and therefore will not be updated automatically for you if the destination page is moved to a different location or is renamed, and so would become a broken link if either of those events were to happen.

      As discussed below, the "internal relative URL" choice can be used to construct a "printer-friendly version" link at a location of your choice, whether or not the template you are using includes a render option to create such a link. This is useful only if the base template is coded to generate a more printer friendly version, and would require manual revision if the page were moved or renamed.

    In class, choose an internal CommonSpot page and use the "Gallery" button to select one of your other /demoX/ pages.

13. After specifying or selecting the link's destination, click on the "Finish" button.

14. If you click on the link while in "Author" or "Edit" mode, you will be able to revise the link; if you click on the link while in "Read" or "Preview" mode, you will be taken to the destination you have specified.

E-mail Links

If in step 10 of the above sequence, you choose "E-Mail Link," then the following steps will provide you with the opportunity to type in the e-mail address. You have two choices:

• Type an ordinary e-mail address, such as "webteam@ohio.edu" (without the quotes).

• Type an ordinary e-mail address followed by a subject specification, in the format shown here:   "webteam@ohio.edu?subject=whatever subject you choose" (again, without the quotes).

When a subject specification is included (which we do suggest should usually be the case), the e-mail address you type must contain no spaces until after the first character following the "?subject=" (i.e., after the "w" of "whatever" in the example above). The subject text may contain the slash character ("/") with no special coding required. Often the path and filename part of the URL of the page the link is on will be an appropriate subject. Most browsers and e-mail software will place the subject you specified into the e-mail address and then provide the user the opportunity to revise it, if he or she wants to.

Marking and Using Jump Destinations

You can mark any particular page element so that CommonSpot will precede it with an anchor tag including NAME="whatever", to make it possible to select it as a jump destination:

1. Navigate to the page with the element you wish to mark, and confirm that you are in "Author" mode.

2. Scroll down to that element.

3. Click on the element properties icon for the existing element that you want to mark.

4. Select "Element Name..." from the menu that pops out.

5. The name you give the element must have no special characters (periods, hyphens, and underscores should be OK, but not spaces or question marks, etc.). The name you give will be the visible text in the Jump destination selection menu, in step 12, above, when building the link, and it may also be the last part of the URL for the jump.

6. Click on the "Finish" button.

If the jump is to go to a place within the interior of a Formatted Text Block, you can use the "bookmark" tool in the Rich Text Editor, or you can use the HTML view to place the anchor tag (<A NAME="label"></A> -- be sure that the label you give does not duplicate one used anywhere else in the same page, and that it has no spaces or punctuation marks). A future version of CommonSpot may include tools to create jumps to bookmarked locations within a Formatted Text Block, but for now, you must create the jump manually (as discussed in step 3, below).

Once the element is named, you can build a link that will take your reader directly to that element:

1. Navigate to the page that is to contain the jump to the element you just marked. It can be the same page, or a different page.

2. Click on an existing link to edit it (or create a new one).

3. If the jump is to go to a different page, first create (or edit) the link to go to the correct page, using either the Gallery or Page Finder dialog. Then click on the "Jump" button to pop-up the set of choices. Observe that the name you gave your element is now available as a choice, and choose it.

   If the jump is to go to a different place within the same page, create (or edit) the link, ensuring that it does not go to a different page (you can choose the "No Link" option if necessary, to cancel an existing link to another page, and then re-edit), and then click on the "Jump" button to pop-up the set of choices. Observe that the name you gave your element is now available as a choice, and choose it.

   If the jump is to go to a place within the interior of a Formatted Text Block on the same page, you will manually type the internal relative URL as "#label" (without the quotes, first erasing the "http://" that is already there) specifying exactly the label you used with the NAME attribute in the anchor tag or the name you gave for the bookmark. Browsers match the label in the link with the NAME attribute using a case-sensitive comparison.

   If the jump is to go to a place within the interior of a Formatted Text Block on a different CommonSpot page, you will manually type the internal relative URL to get to that page (first erasing the "http://" that is already there), appending "#label"; for example, "index.cfm#credits" -- again, without the quotes.

4. Finish the link editing process.

5. Submit the change for publication; in class, wait your turn to click on the "OK" button.

6. Choose "Read" mode and click on the link to test it. Examine the URL in the browser display. If the element you marked is too close to the bottom of the page, it may not have scrolled up to the top of the window; if necessary, re-size the window to convince yourself that it is working as it should.

Image Gallery

CommonSpot maintains a database of images that are available for placement on your pages. There are two groups of images:

• those that are available to all CommonSpot content contributors and pagemasters, and

• those that are available to you alone.

You can add images to the database. Depending on your account permissions in CommonSpot, you may be able to set any of your images to be available to all CommonSpot users. Even if you have permission to designate images as public images, remember that doing so will increase the number of images that you and everyone else has to wade through while choosing images from the public gallery to use on their pages. To see the available images and upload new ones:

1. Click the "Knowledge Maps" icon to display the menu, and then click "Image Gallery...".

2. In the resulting dialog box, make your selections to prune the list of images that you will see, and select the layout of the display.

3. Click on the "show images" button for "Public Images" or for "My Images" to see either gallery.

4. When you are done looking at the existing images, click on the text link at the upper right for "Image Search" or click on the "Image Gallery Search" button at the lower left. This will return you to the same dialog box you used in step 2.

5. To add a new image to the gallery, from your computer's disk drive, first verify that the document is in a file whose name contains no spaces or punctuation marks, except perhaps hyphen ("-") or underscore ("_") characters, and whose name ends with the conventional file extension for that type of file (e.g., ".gif", ".jpg", or ".jpeg"), and then click on "Click here to add a new image."

6. Click on the "browse" button to navigate on your computer's disk drives to find the image file you want to upload. In class, choose drive C:, then folder "Public," then folder "Dick," then choose a specific image file. Click on the "Open" button to select it.

7. Modify the other characteristics, as appropriate, and then click on the "OK" button.

8. Observe that the graphic you have just uploaded is now included in the count of "My Images."

9. When you are looking at the gallery of "My Images", you will see an "X" icon below each one. Clicking on that icon will delete the image.

Images

1. Choose "Author" mode from the "View Modes" shortcut, if you are not already in "Author" mode.

2. Click on "Click to insert new element"; if there is no such item, then click on the cell properties icon , and select "Insert/Copy Rows..." from the menu that pops out. Confirm that it is creating an empty row, choose whether to create the empty row before or after the element above which the cell properties icon was located, and then click on the "Finish" button.

3. The Element Gallery will appear; click to expand all or click to expand just the image elements. Then click on the appropriate type of image element; in class, choose "Single Image".

4. Click on the image placeholder cartoon to select the actual image you will use.

5. Click on the "Gallery..." button to select an existing image, or the "New" button to upload a new image. See the discussion of the Image Gallery, above. In class, use the "Gallery" button next to "Image" to bring up the Image Gallery.

6. Click on the "Show Images..." button next to "My Images" to access an image that you have already uploaded.

7. Click on the image you want to use, and then click on the "OK" button.

8. Type appropriate "flyover text" into the box; this text will be displayed while the image is loading; will be displayed by non-graphic browsers at the location where the image would otherwise appear; and will be annunciated by the text-to-speech software of browsers used by visually impaired readers. If the image is a space-filler or should otherwise not be presented to visually impaired readers, leave the "flyover text" blank. We anticipate that a future version of CommonSpot will generate an ALT="" attribute inside the IMG tag in such cases, concealing the presence of the graphic in text-based browsers.

9. If you want to have this image be a clickable link, then click on the "Edit" button in the Link section, to the right and just below the flyover text box, towards the bottom of the dialog box.

10. Click the "Finish" button when done.

11. When ready, click on the yellow work-in-progress icon to publish the change; in class, wait your turn to click on the "OK" button.

12. If you want to change the location of the "image header", click on the Element Properties icon for the image element, and select "Layout Properties..."; the resulting dialog will display the various choices; click the "Finish" button when you have made your selection. The change takes effect immediately, and is therefore not recorded in the Version History.

Image Grids

An image grid consists of a set of images that are grouped together on a page, either horizontally or vertically. An image grid is typically used as a navigational tool, so that each image is linked (to a specific place on the current page, to another page, to send E-mail, etc.). Because the image grid is a single element, you can copy and paste the whole collection of linked images in one step to save time. You might do this, for example, if you want to have those navigational choices at both the top and bottom of your page. Using an image grid instead of a table of individual images will improve system performance going into "Author" or "Edit" mode by reducing the number of CommonSpot tool icon menus that have to be constructed.

1. Select "Author" mode if you are not already in "Author" mode.

2. Select "Click to insert new element".

3. Click on the downward orange triangle beside "Image Elements" to expand the available options.

4. Click on "Image Grid".

5. Click on "Click here to define the image grid"

6. In the resulting dialog box, click on "Click here to add a new entry"

7. Start the process of picking the image by clicking on the "Gallery" button.

8. Choose the image.

9. In the "Image Properties" dialog box, type some appropriate text into the box, "Alternate Image Text (Flyover Text)". You can also control the white space around the image, although some browsers may not obey those commands. If you encounter that problem, please contact the Web Team by e-mail to webteam@ohio.edu or calling 3-1017 on campus.

10. Click on the "Edit" button for the link and set up the link appropriately.

11. Click on the "Finish" button.

12. Go back to step 5 if you want to add more images to the grid; otherwise, click on the "OK" button.

13. Once you have one or more images in the grid, then you can jump to step 5, above, in order to add more images, by clicking on any of those images while viewing the page in "Author" or "Edit" mode.

14. Choose "Layout Properties" from the Image Grid's "Element Properties" menu in order to select vertical or horizontal alignment.

Binary Files as Clickable Resources

Add a binary (PDF, MS Word, MS Excel, MS PowerPoint, etc.) file as a clickable resource:

1. Verify that the document is in a file whose name contains no spaces or punctuation marks, except perhaps hyphen ("-") or underscore ("_") characters, and whose name ends with the conventional file extension for that type of file (e.g., ".doc", ".pdf", or ".xls", etc.).

2. Click on "Click to insert new element"; if there is no such item, then click on the cell properties icon , and select "Insert/Copy Rows..." from the menu that pops out. Confirm that it is creating an empty row, choose whether to create the empty row before or after the element above which the cell properties icon was located, and then click on the "Finish" button.

3. Click on "Hyperlink Elements" to expand that part of the list, and select, for example, "Link."

4. Click on the link element to define it.

5. When you specify the "link header," it is kind to include, if the surrounding text does not, some indication of the type and size of the file.

6. Click on the "Next" button.

7. Choose "Link to Existing Page or File." (You could also choose "Link to New Uploaded File," but only if the binary document is not yet in CommonSpot).

8. Click on the "Next" button.

9. Select the radio button for "Internal page or document," and then, if the document is already in CommonSpot, skip to step 15.

10. The document needs to be uploaded, so click on the "Page finder" button.

11. Click on the "Upload new document" link at the upper right.

12. Click on the "Browse" button and select your document file. In class, choose drive C:, then folder "Public," then folder "Dick," then file "Elements.doc"; click on the "Open" button to select the file.

13. Once selected, choose the category (typically "Other Document"), give it a title (in class, "DemoX-Elements"), and click on the orange down-arrow to pre-fill the other fields.

14. Click on the "Next" button, and then click on the "Close" button for the Page Finder dialog box.

15. Click on the "Gallery" button and select your document, which should now be listed.

16. Click on the "Finish" button of the Link dialog.

17. When ready, click on the yellow work-in-progress icon to publish the change; in class, wait your turn to click on the "OK" button.

People using Internet Explorer on Windows may find that the Word document opens within the browser window. Others will find that it downloads the file and then launches Word to open the document. Still others will have to select whether to save or open the file. These variations are likely to be consistent for any one user (depending on their software versions and configuration settings), so they should not be taken by surprise, but it is impossible for you to predict what will happen for all your users, so be careful to choose a wording that will apply to any of these variations.

Tabular Layout Elements

1. Select "Author" mode, if you are not already in "Author" mode.

2. Click on "Click to insert new element."

3. In the Element Gallery, click on "Layout Elements" to expand that list. (The "Multi-section" layout element essentially just gives you a formatted text block with header, so we won't pay any further attention to that choice.)

4. Click on "Tabular Layout" and observe that your page now has a new object on it, a short, wide box with the text "Click here to define the layout."

5. Click there to define the layout. You will have control of all the usual HTML table attributes. Be aware that using a table makes the display of your page more browser-dependent. Specifying table or cell widths in pixels may make it impossible to print in portrait mode without cropping for some of your audience, and may force the browser to wrap text within the cells differently for some of your audience than others. In class, select two rows and two columns, and specify small non-zero border, cellpadding, and cellspacing values.

6. Click on the "OK" button when you are done.

7. Observe the new "Click to insert new element" choices, one in each table cell.

8. You will be able to use the element properties icon to revise the layout properties later. If you specify table background colors that are different from the page background, bear in mind that the oldest graphical browsers ignore table cell background colors. Whenever you use tables for layout, bear in mind that text browsers, such as are often used by visually impaired people, may ignore table tags, and consequently may display items with no separation that you think of as separated.

Copying and Pasting Whole Elements

Sometimes you will want to have two pages, or two places on one page, with very similar elements. If you create one of them first, you can then copy the whole element and paste it into the other location. Any changes that you make after copying and pasting will affect only the element that you edit, not the other copy. One possible use for this technique is the boilerplate, where only the filename and date might be different from one page to the next.

1. Navigate to the page with the existing element that you want to copy.

2. Select "Author" mode.

3. Click on the element properties icon for the existing element that you want to copy.

4. Select "Copy Element" from the pop-out menu. Your screen may "flicker" but nothing else visible is likely to happen to confirm that you have copied the element.

5. If the page where you want to paste the copied element is a different page, then select "Read" mode on this page before you navigate to the page where you want to paste the copied element.

6. Select "Author" mode on the receiving page if it is not already selected.

7. Find the place on the page where you want to place the copied element. If there is no "empty" element, click on the cell properties icon , and select "Insert/Copy Rows..." from the menu that pops out. Confirm that it is creating an empty row, choose whether to create the empty row before or after the element above which the cell properties icon was located, and then click on the "Finish" button.

8. Click on "Click to insert new element". Observe that above the regular list of element categories, there is a choice "Paste Element: insert copied element". Take that choice.

9. Observe the replica element; you may now revise it as appropriate.

10. When ready, click on the yellow work-in-progress icon to publish the change; in class, wait your turn to click on the "OK" button.

Deleting Elements

1. Navigate to the page where you want to delete an element.

2. Click on the "View Modes" icon and select "Author" from the menu.

3. Click on the element properties icon from the existing element that you want to delete.

4. Select "Delete Element" from the pop-out menu.

5. A dialog box prompts for confirmation.

6. Click "Yes" to delete the selected element.

7. Click on the yellow "Work-in progress" icon to publish the change.

8. Select "Submit entire page for publication."

9. Type the comments in the dialog box.

10. In class, wait your turn to click on the "OK" button.

Microsoft Word Document as an HTML Element

From time to time you will want to put information on the Web that is already in machine-readable form as part of a Microsoft Word document. We have already discussed the method for making it available as a downloadable Word .doc file; often, however, you will want it to be a regular Web page, visible to all readers, instead of being visible only to readers with Microsoft Word installed on the computer they are using. In that case, CommonSpot provides two choices: copy-and-paste from Word into a "Formatted Text Block," using the Rich Text Editor, as discussed previously, or direct import into CommonSpot, which will render it out as HTML, as discussed in this section.

1. Verify that the Word document is in a file whose name ends with ".doc" and whose name contains no spaces or punctuation marks, except perhaps hyphen ("-") or underscore ("_") characters.

2. Navigate in your browser to the page that you want to have include the content of that Word document, and locate the place on the page where you want it to appear. If there is not already a "Click to insert new element" at that location, then click on the cell properties icon , and select "Insert/Copy Rows..." from the menu that pops out. Confirm that it is creating an empty row, choose whether to create the empty row before or after the element above which the cell properties icon was located, and then click on the "Finish" button.

3. Click on the "Click to insert new element" and then click to expand the "Miscellaneous elements" section. Choose "Microsoft Word".

4. Click on "Click here to upload a document to embed as HTML."

5. Click on the "Browse" button and navigate to your Word document. (In class, choose drive C:, then folder "Public," then folder "Dick," then file "terminology.doc".) Click on the "Open" button to select the file.

6. Click on the "Finish" button.

7. CommonSpot will attempt to clean up the HTML using the "Tidy" software package. It may well generate some error messages. Usually the appropriate choice is "Continue." If it fails with a "location 26" or other numerical error, please contact the Web Team, by E-mail to webteam@ohio.edu, or phone to 593-1017.

8. When ready, click on the yellow work-in-progress icon to publish the change; in class, wait your turn to click on the "OK" button.

9. After you have uploaded the document, you can revise it by clicking on it while in "Author" mode. You will have the choices
   • of editing the original document in Word;

   • of using the Rich Text Editor to edit the embedded HTML (see the next section); or

   • of uploading a replacement version.

Pop-Up Menus

Pop-up menus and drop-down link lists are both multiple choices that appear ("pop-up") when the mouse is clicked on a specific location. Both of these menus are implemented with Javascript, and thus will work only with browsers that have the Javascript capability, and have that feature turned on. Pop-up Menus as currently implemented in CommonSpot generate choices on-screen whose default type face is extremely difficult to read when viewed with some browsers (e.g., Macintosh Netscape 4.8), so if you do decide to use pop-up menus, be sure to set the type face, as discussed in steps 9-11, below. Both Pop-up Menus and Drop-down lists are created and used within the context of a single page; if you will want to use the same pop-up menu on multiple pages, those pages should share a template, and the pop-up menu should be constructed in that template. Drop-down link lists are a specific choice from the Hyperlink section of the Element Gallery, which you will find works quite similarly to the Pop-up Menus as discussed in detail next.

Pop-up Menus will not work with the Lynx browser, nor with any modern browser whose user has decided not to trust scripting. You should therefore not use them on any page intended for viewing by a general audience, unless you also provide conventional links that lead to the same destinations, either directly or by way of an intermediate navigational page. They may be appropriate to use in cases where you know that everyone looking at your page will be using Internet Explorer (e.g., students in a specific teaching lab where personal assistance is available for visually impaired students). A future version of CommonSpot may be enhanced so that non-scripting browsers will have a functioning link to the first choice in the pop-up menu. Once that is in place, you can, if you haven't already done so, place the navigational page with links to other choices as the first choice in the menu, and not need to have any other link to that page.

1. Click on the "View Modes" shortcut icon and select "Author" mode.

2. Click the "Page & Template Management" icon , and select "Manage Pop-Up Menus..."

3. Click on "start a new menu" and specify a menu name. If you know what you want, you can change the other characteristics at this time; if not, then you can edit them later.

4. Click on the "Finish" button.

5. Click on the pencil icon for the menu you just created, and select "add menu item".

6. Complete the information in the "new menu item" window: the "item text" will be the visible choice for that item on the menu.

7. Click on the "Edit" button to establish the link destination for that item; as usual, you may link to an existing page, a newly uploaded document, etc.; in class, link choice A to existing page "sampleA.cfm," etc.

8. Click on the "Finish" button when you are done working on that item.

9. Repeat steps 5 through 8 as needed to include as many choices in the pop-up menu as you want to at this time. You will be able to add choices later, and when you do, they will appear "immediately" in all places on this page where that pop-up menu is linked.

10. Click on the element properties icon above and to the left of the menu (or list of menus), and then select "Page-Level Menu Properties" from the pop-out menu.

11. Toward the top of the Page-Level Menu Properties dialog box you will find the opportunity to specify the "Separator Color"; type in "#000000" (without the qoutes; that is a pound sign, which is required, followed by six zeros, with no spaces). This works around a bug in Internet Explorer 6.

12. About halfway down the Page-Level Menu Properties dialog box you will find "Font, Size & Attributes"; select "Ohio Default" for Font, a size of "x-small" or larger, and clear the bold and italic check-boxes if they are already checked.

13. Click on "Finish."

14. Click on any of the yellow work-in-progress icons and submit the entire page for publication; in class, wait your turn to click on the "OK" button.

15. Click on the "Close" button for the "Manage Pop-Up Menus" dialog box.

16. Go to the place on the page where you want to have the pop-up menu appear, and click on "Click to insert new element" (if that choice is not available, you may have to add a row or column).

17. Choose Hyperlink from the Element Gallery, and then choose "Link" as the page element type.

18. Click on "Click to define the link"; fill in the Link Header (the text to be linked); and click "Next".

19. In the Link Action dialog box, choose "Link to Pop-Up Menu" and choose the pop-up menu you want to use there from the list of available choices; then click "Finish" to create a link to the pop-up menu.

20. Click on the yellow work-in-progress icon to "Submit entire page for publication"; in class, wait your turn to click on the "OK" button.

21. Go to "Read" mode and click on the link to display the pop-up menu options.

If the CommonSpot tool icon menus fail to collapse when you move the mouse off of the gray block, just use the browser's "Refresh Page" function.

Changes that Take Effect Immediately

Some changes do not require approval for "Publication," and are not recorded in the Version History. They must therefore be un-done or re-created by hand, if necessary. In particular, at the present time those changes include the following:

1. Page Background Color.

2. Page Primary Table Width -- from layout properties on the page, or with some base templates, from the render options.

3. Render Options choices.

4. Image layout and header location.

5. Element inheritance security restrictions.

Validate Links

1. Click the "Knowledge Maps" icon to display the menu, and then select "Validate Links".

2. CommonSpot will scan the page checking for the reachability of links and images, and will report on what it finds.

3. Remember that CommonSpot can only tell you whether a page was found, or not. It cannot tell you whether the intended page was found!

Referring Pages

1. Click the "Knowledge Maps" icon to display the menu, and then click "Referring Pages".

2. You will see a list of all those CommonSpot pages that contain a link to the current page, where the link was constructed by using the "Page Gallery" or the "Page Finder" mechanism. Links that were created by manually typing in the relative URL are not managed by CommonSpot, and so will not result in the referring page being listed by this mechanism.

3. You can select some or all of those pages, by clicking in the corresponding check-box, and then change the destination of the existing link to the current page, so that the link goes instead to some other page. After using, for example, the Page Gallery or the Page Finder, to specify the new destination of the links that used to lead to the current page, you must click on the "save" button to make those changes effective.

   At first glance this CommonSpot feature appears to raise a security issue -- you linking from your page to some other CommonSpot page gives the author of that page the ability to change your page. However, the only thing that other person can change is the destination of a link on your page, and so if a CommonSpot subsite has a major re-organization, the various links in to it from CommonSpot pages can be fixed more rapidly.

Create Page Sets

CommonSpot provides tools for managing groups of pages, known as "Page Sets." This is most likely to be useful when a group of pages share related content. Such Page Sets are first defined by identifying the pages that are members of the set, and then in those pages or in other pages, you can add page elements that provide a Table of Contents, an Index, or Navigational links to the members of the page set. The Navigation links are "Previous," "Top," and "Next," implementing the conventional "wagon wheel" scheme, with the first page in the page set acting as the "hub" of the wheel.

Before building a new page set, it is essential that at least one of the pages to be included in the page set already exist, so that you can create the page set. You can add pages to the set, and change the ordering of the pages in the set after it has been created, and after links are already in place on one or more pages -- those links will be updated appropriately as you add pages to the page set. The next section discusses the technique for managing existing page sets.

1. First create one or more of the pages that you plan to include in the page set.

2. Click the "Page & Template Management" icon , and select "Create New Page Set".

3. Select the appropriate subsite and click "Next".

4. Enter the category, name, title, description, and keywords for the page set. A future version of CommonSpot may provide for limited-scope page sets, but in the current version of CommonSpot, all page sets are visible to all page authors, so you must choose a name that will not collide with any other existing page set name.

5. Click on the "Next" button.

6. Observe the "Edit Current Page Set" Window.

7. Click on "Click here to add a new Page Set member".

8. Choose the site, category, and particular item; repeat as needed. The list of pages to be added to the page set will include all those meeting the criteria you have specified, except that the list will not include any of the pages that are already in the page set. In class, add the "index" page first.

9. Click on the pencil icon next to the page set member in order to change the sequence or to insert a new page at a particular location in the sequence, or to remove that member from the page set.

10. Click on the "Close" button.

Use Page Sets

1. Go to a page where you want to have links to the pages in the page set, either a member of the set in which you want to have navigational links for the set, or a page in which you want to have an index or a table of contents for the page set.

2. Change to "Author" mode.

3. If there is no "Click to insert new element" at the location where you want to have the links for the page set, create a new row or column as discussed previously.

4. Click on "Click to insert new element".

5. In the Element Gallery, expand the category of "page set elements", and make your choice (in class, choose "page set contents," not index or navigation links).

6. Click on "Click here to define the Page Set Table of Contents" (or whatever type you chose in the previous step).

7. Choose "selected page set" and then select from the pop-up that appears.

8. Click on the "OK" button.

9. When ready, click on the yellow work-in-progress icon to publish the change; in class, wait your turn to click on the "OK" button.

If you have placed Page Set navigational, contents, or index links on any of your pages, and one or more members of the page set are moved, that is, relocated to a different sub-subsite, CommonSpot will automatically update the links to reach the page in its new location.

Manage Page Sets

After building a page set, you can come back and add or remove members, or change the ordering of the pages in the set.

1. Click on the "Page & Template Management" icon , and select "Manage Page Sets".

2. Click on the plus-sign [+] to expand the list of page sets, and navigate to your page set.

3. Click on the pencil icon for your page set to bring up the "Edit Current Page Set" Window.

4. Click on the pencil icon next to the appropriate page to adjust the sequence or to add or remove pages.

5. Click on the "Close" button when finished with the "Edit Current Page Set" Window.

6. Click on the "Close" button when finished with the "Manage Page Sets" Window.

Style Sheets

Style sheets are a mechanism to exercise consistent control of several features (e.g., type face, type color, type size for plain text and each level of header), overriding the browser's defaults, within a page or group of pages. Style sheets can be included in the HEAD section of the HTML for each page, or stored in separate files. Unfortunately, style sheets are platform- and browser-specific, and some combinations of location (e.g., external file) and browser will render your page utterly unreadable. Because you will usually have no control, and very limited knowledge, of the platform and browser used by your audience, we urge that you not use style sheets beyond what is created automatically on your behalf by CommonSpot. Instead, we suggest that you put your effort into keeping the content of your pages complete and up to date.

Dick Piccard revised this file (http://www.ohiou.edu/pagemasters/commonspot/contrib/building.html) on December 4, 2007.

Please E-Mail comments or suggestions to "webteam@ohio.edu".