Links to Other Key Pages
Links in this Page:
Special Content Overview
Summary: This tab in the RWD Page Builder form is used when you wish to display content in a special way - content that is not in the Page Body of the form itself. When The Special Content Selector field is set to "Display FirstClass Document Body (Default)", no other controls in the Special Content Field are visible.
Selecting either "Use Graphics Gallery Layout" or "Portal Mashup" reveals the sub-tabs required to use Special Content.
Graphics Gallery Layout Overview
Summary: This feature is used to display images in the body of the web page instead of the body content.The graphics will be organized into rows and columns, in a table. Each graphic can be supplied with a caption, which you can alter in appearance to suit your need.
The original functionality of this feature required that images needed to be uploaded to a container in the site and a path and file name for each graphic had to be specifically entered into the form in order to render it on the web.
While this functionality has been preserved, in the current version of the Graphics Gallery you do not have to the enter any information about the images in the form but instead simply have to name the container where all images are stored. Checking (or un-checking) the Use Container field hides the fields that are no longer required in the new functionality.
Note: In order to use the Graphics Gallery, the Special Content Selector field must be set to "Use Graphics Gallery Layout"
Use Container Setting
By far the easiest way to use the Graphics Gallery is to display all of the images inside a container (as opposed to entering information about each image in the form itself). RWD comes with a special container (and associated Container Group) called, appropriately enough, "Graphics Gallery". This container has a layout that is conducive to storing images and the fields in the container are labeled for that purpose. Simply uploading images to a graphics gallery container and setting the path to that container in the form (field 3 in the image below) will result in the graphics being displayed on the web page.
Note: A related setting exists for Web Site Administrators that allows them to set the maximum image size allowed to be displayed on a page in a Graphics Gallery before the system automatically thumbnails the image.
1) Use Graphics Gallery Layout
Function: This is the master switch for the Graphics Gallery. Checking it will tell RWD to replace the data entered into the Page Body with the Graphics Gallery. All other elements of RWD (Header Section, Navigation Sidebar, etc.) will function normally. The Graphics Gallery layout is a table that you can define to best display your graphics.
2) Use Container
Function: This checkbox determines the modality that will be used for the Graphics Gallery. Checked (default) means that RWD will display all of the images that are in the container that is identified in the Container Path field (3). When this field is Un-checked, all of the fields required to display only specific images from the container will become visible.
3) Container Path
Function: When displaying all of the images in a container, enter the path to that container and its name in this field. In the RWD template picker, there is included a Graphics Gallery that is a container with the appropriate buttons and layout that also contains a Home Page that has been configured to be a Graphics Gallery Page. In this page, the path to the images is the same as the page itself so the path is: ../
4) Scale / Constrain Images (Width)
Function: This field works in conjunction with the Height Field (5 - below). If left set at "original", this field has no effect on the way images display in the web page. If set to any value however AND the Height field is set to "original", RWD will scale the images up or down to display at the width (in pixels) set in the field and aspect ratio will be preserved. If the Height field is changed as well, the image will be sized to the two dimensions given in the two fields and aspect ratio will not be preserved.
5) Scale / Constrain Images (Height)
Function: This field works in conjunction with the Width Field (4 - above). If left set at "original", this field has no effect on the way images display in the web page. If set to any value however AND the Width field is set to "original", RWD will scale the images up or down to display at the height (in pixels) set in the field and aspect ratio will be preserved. If the Width field is changed as well, the image will be sized to the two dimensions given in the two fields and aspect ratio will not be preserved.
6) Include Frames
Function: Checking this field causes a frame to be put around each image on the web page
7) Caption Style
Function: These fields collectively determine the style of the captions for images
Define Individual Files Setting (Legacy Feature - Not Recommended for use)
Legacy behavior of the Graphics Gallery is supported. By un-checking the Use Container field, the fields required to individually identify images that will be displayed in the web page will become visible (see image below).
:Gallery Tab.
8) Show (#) Graphics each Row
Function: This will set the number of columns in the graphics gallery, or the number of graphics in each horizontal row.
*Tips and Tricks: A web page will be more difficult to view if the graphics gallery extends beyond the horizontal view of the browser window. This section can be used to avoid that problem.
The Show (#) Graphics Each Row field can help you avoid a side-scrolling browser window; If you assume that your web page will be rendered in an 800x600 pixel window (most common), and if you have a Navigation Sidebar on your page that is roughly 150 pixels wide, then you should have about 650 pixels left over for graphics display. If your images are 200 pixels wide, then you could fit 3 abreast on the page without extending the section and forcing the browser to create a horizontal scroll bar. If your Images are 400 pixels wide, you would only be able to have 1 image in each row.
9) Add/Remove Rows
Summary: These buttons will add new rows or remove the selected row. Each new row can contain a graphic path and file to display.
List of Graphics to be Displayed
Summary: This section is used to define the image files you wish to have displayed on your page, the caption and the link information for each image. Each graphic can have a unique link and scrolling or non-scrolling caption.
10) Include Image
Function: This check box will determine if the graphic supplied will actually be displayed in its cell. This feature can be used to temporarily turn an image off without having to remove it from the table.
11) Graphic Path/File Name
Function: This field contains the path and file name of the graphic that you wish to have appear on the web page. Images must be uploaded to a folder or conference or be available on the web from a central image store. If linking to images out on the web, make sure to use the full web syntax (http://...).
12) Caption For Image
Function: This field is the text that will be displayed at the bottom of the graphic as caption. If your caption is long or descriptive, use the Scrolling field (below) to set the caption as a marquee instead of a static text field.
13) Scrolling
Function: This check box will determine whether the caption will be a scrolling caption, or a static one.
14) Caption Link to
Function: Each image on your page can contain a link to another page in your site or anywhere. The link is activated when the web user clicks on the caption for the image. Enter your destination URL in this field.
15) Open Link In
Function: This determines whether the link of each graphic will open the destination in a new browser window, or in current browser window.
Mashup Overview
Summary: A mashup is a collection of content from various sources that is all brought together on a single page. Using a mashup, you can bring content from sources within your site and outside your site into one place. This feature is particularly useful in education where a school or district home page can contain bits and pieces of information from a wide range of sources; athletics, school news, local weather and a Principal's or Superintendent's message are all examples of content that is very useful on a home page.
Corporate websites can benefit from having key departmental information aggregated in one page with links to the various departmental sections of the website.
Columns and Content
1) Special Content Selector Field
Function: This is the master switch for the Mashup. Checking it will tell RWD to replace the data entered into the Page Body with the Mashup content that you define in the form. All other elements of RWD (Header Section, Navigation Sidebar, etc.) will function normally.
2) Column Selector Tabs
Function: You can use up to 3 columns in your mashup. Each column functions exactly like the other two columns so only one column will be discussed here. If you use a fixed width page of 800 pixels or so, two columns is likely as much as you can use. Mashup columns will adjust to changes in screen size and are designed to best fit the content in them.
3) Add New Row or Remove a Row
Function: Just like all other sections in RWD, you can add or remove rows of content from the column you are working in. Columns can have as many rows as you wish, however, it is best to try to keep your content visible on the page without the web visitor having to scroll down to see it. Rows in the Mashup generally take up much more space vertically than Navigation Sidebar rows so you may find that only 2-3 rows fit on a normal page.
4) Column Width
Function: This setting allows you to constrain a column to a specific width. Generally speaking however, it is best to leave this setting at 'auto' so that RWD can re-size the columns to best fit the content. As with many features of RWD, it will require some experimentation to set things exactly as you want them
5) Remove Border if Single Panel
Function: RWD Mashups can feature multiple rows grouped into a singe panel on the web page, delineated by tabs. The tab group contains a graphical frame around the group. If you have a row that is not part of a group, you can remove the grouping frame from that object so that the content appears to float right on the page with no visual boundary.
6) Group
Function: This checkbox provides a means by which to group successive rows of content into tabbed panels. In any column, you can have as many panels from top to bottom as you wish. If the Group field in row one is checked, it will be grouped with the item in row two only if the Group field in that row is in the same state (checked). Contiguous rows will be grouped until a row has the Group field in a different state (unchecked). That row will then start a new grouping until the Group field in a subsequent row is set to the other state (back to checked). If you wish to have four different rows stay ungrouped, each row must have an alternating value in the Group field.
7) Tab Display Text
Function: Each tab in a panel can have it's own caption. Enter the caption/title for the row in this field. Try to keep the caption (Tab Display Text) quite short and to the point; long titles can cause some difficulties with the way tabs render on the page.
8) Link To
Function: Enter the URL of the content you wish to display in the panel. It can be a conference, a calendar, a web page from within your site, a document, an outside web page or Flash (using iframes), an image or other web content - essentially anything you can view in a browser can be linked to in the Mashup. See the table below for a summary of how to link to the various types of content.
9) Special Format
Function: Depending on the nature of the content you wish to display in any given row, you need to tell RWD how to display the URL. The following table illustrates the current options and outlines when to use which option.
Note: RWD employs special tags or parameters in some cases to avoid creating a new field on the already crowded RWD form. These tags give functionality that is not deemed to be used by enough people to require a field. Parameters are passed to RWD in the same string that defines the object being opened. When a conference (for example) is being opened in a mashup page, depending on the special formatting used, parameters associated with that format can be passed as follows:
Normal path to an object as entered into the RWD form field:
Sample_Conference (for this example, we'll say that the special format is "Preview Container Listing"
Path with a parameter to change the number of conference items displayed from the default of 3 items to n (where n is any number of items):
Sample_Conference?displaynumber=n
Path with a second Parameter (in this case, a tag that displays the conference item's date)
Sample_Conference?displaynumber=n&msgdate
Setting |
Purpose / Type of Content |
Notes / Comments about Target URL |
Tags that can be used for this Format |
Other Format |
The catch-all setting, use this setting for all content that is not outlined elsewhere in this table. |
You may have to include certain code in the URL of the target to produce the results you wish to display. We can't think of anything particularly helpful to add here - this setting basically leaves the job of getting the URL to display properly up to you.. |
|
Calendar Today's Events |
Use this setting to display a FirstClass calendar in a list view that will show only the current day's events. Generally this is only for busy calendars where there is usually at least one event per day. If no events are present on a given day, the object will display "No Events Today". Clicking on an event will cause RWD to replace the Mashup content with the Event View of the Calendar to the specific event that was clicked on. The user must use the BACK link (either in the Browser or one that you have coded into RWD) to return the content of the page to the Mashup |
Must be a FirstClass Calendar |
|
Calendar Monthly View |
This setting will display a FirstClass calendar in a monthly view. Hovering the mouse over a specific day in the month will pop up a listing of events on that day and clicking on a day will cause RWD to replace the Mashup content with the Day View of the Calendar for that day (or a specific event if the event is clicked on when the pop up listing is visible). The user must use the BACK link (either in the Browser or one that you have coded into RWD) to return the content of the page to the Mashup |
Must be a FirstClass Calendar |
|
FC Documents |
This setting is used to display the content only, without any wrapper or Header information, of a variety of FirstClass Document types. Documents, messages, RWD pages within your site, etc can all be viewed stripped of the Envelope or Header information in your Mashup. The prevents, for example, another RWD page in your site from displaying as a complete web page in the mashup but rather shows only the Page Body content. |
Can be a message, a document, a personal web page, or an RWD Web Page. |
|
FC Documents iFrame |
This setting is very similar to the FC Documents setting above except that instead of displaying the document with no controls in the mashup, it creates a frame in which to display the document in the mashup and, if the document is longer than the height of the Mashup Panel allows, a scroll bar is displayed to allow the web user to read the entire content in the document. |
Make sure to set the height of any row in the mashup that is using this setting and make sure that the target is a valid FirstClass document (RWD Web Page, FirstClass Web page, FirstClass Document or FirstClass Message) |
|
Static Container List |
To display a static (not scrolling) list of documents or messages in a folder or Conference, use this setting. The 6 most recent items in the container will be displayed in a panel in the mashup with a symbol at the bottom right (... ...)that will open the container itself to view all of the items if there are more than 6. Clicking on any item will cause RWD to replace the mashup content with the container itself, viewed in the Message Blog view. The user must use the BACK link (either in the Browser or one that you have coded into RWD) to return the content of the page to the Mashup. |
Conferences or Folders Calendars also work however the effect is the same as the Month view |
|
Scrolling Container List |
This feature works exactly like the Container List setting except that, instead of a static list of 6 items, the entire contents of the container are displayed in a scrolling format (scrolling from bottom to top with most recent items at the top) THIS FEATURE ONLY WORKS PROPERLY WHEN IT IS USED IN A STANDALONE PANEL - IF THE CONTENT IS ACCESSED BY A TAB, THE SCROLLING ACTION WILL NOT WORK, the list will appear as though it was a static list instead. |
Conferences or Folders - SINGLE PANEL (UNGROUPED) ONLY
|
You can adjust the speed of the scroll with the following syntax:
container path and name?speed=200 The higher the number, the SLOWER the scroll speed. |
Preview Container List |
While the static Container listing will list the most recent 6 items that have been posted to the target conference, only the subject of the message is displayed in the mashup. The Preview Container listing only displays the 3 most recent items posted to the target conference, but in addition to the subject of the message being displayed, a preview of the content of the message will also be displayed. If a picture is pasted into the image field of the message form, the image will be displayed (scaled to 100 pixels wide) alongside of the subject and preview. |
Images used in messages should be 100 x 100 pixels in size before being pasted into the message for posting
|
Tags: displaynumber=x overrides the default 'number of items listed (3) and msgdate will display the date of the item in the preview. example syntax for Mashup Preview Container object that will show 2 items in the list as well as the date of each item: container path and name?displaynumber=2&msgdate |
Image |
While you could insert an image into a FirstClass Document and use the FC Documents setting to display the image in the Mashup, this setting will display the image itself directly. It also has the advantage of allowing the image to have a URL associated with it so that a link can be followed when the user clicks on the image in the Mashup. |
Image files only. |
|
iframe |
There are a number of advantages to using iframes. They allow you to structure the content you wish to display in any fashion you wish. They also allow you to display content that is not supported directly by FirstClass - Flash, Video Files, web plugins, etc, can all be rendered using iframes |
Flash files, any web URL, YouTube Videos, Streaming media, RWD Web Pages, FirstClass documents etc.. |
|
Special Format Selection |
Paramaters / Tags |
Notes |
displaynumber |
msgdate |
displaythumbnail |
speed |
Scrolling Container |
No Effect Always rotates through all items in the container |
No Effect
|
No Effect
|
Changes the list scrolling speed |
The HIGHER number used with the speed parameter, the SLOWER the scrolling speed. Default speed is 250 (milliseconds) |
Static Container |
Overrides the default "6" |
No Effect
|
Will display the thumbnail if one exsits for the posting / message being displayed |
No Effect |
Image thumbnail is NOT displayed unless the displaynumber parameter is used. |
Preview Container |
Overrides the default "3" |
Displays Post Date |
No Effect Always displays thumbnail |
No effect |
|
Rotating Preview |
|
|
|
|
|
Preview Slider |
|
|
|
|
|
Slideshow
|
No Effect |
No Effect |
No Effect |
Changes the image refresh rate |
The HIGHER number used with the speed parameter, the LONGER pictures will stay displayed before the next is shown Default speed is 4 (seconds) |
Parameter Syntax Examples: (for examples, Link = the path and file name of the object you are linking to as typed in the Link To field of the mashup) |
displaynumber
msgdate
displaythumbnail
speed
combined tags example |
Link?displaynumber=n (where n is the number of items to display)
Link?msgdate (no variables are required for this parameter - it's presence in the URL activates the feature)
Link?displaythumbnail (no variables are required for this parameter - as above)
Link?speed=x (where x is the number of milliseconds - or seconds, depending on the object being used)
Link?displaynumber=n&msgdate (in some cases, more than one parameter can be used - join them with &)
|
10) Height
Function: This feature gives you the ability to set a particular item's height in the Mashup panel. Normally RWD will resize content to best fit however there are certain kinds of content for which this is not possible; iframes need to have their height pre-defined if you wish the content to entirely visible.
11) Object Link To
Function: This field is only currently available for images because most other objects can contain links right inside them. The URL entered here will be followed when a web user clicks on the panel in the web page.
Modify Colors and Fonts
1) Tab Graphic Style
Function: You can choose to set a variety of visual appearances for your tabs / panels. Either you can choose a non-graphical style where you can set the colors for your tabs or you can choose from a few pre-made tabs that are graphics. With graphic tabs, you can still set the font and font attributes for the captions but you can't set the color of the tabs or panel itself (see 6) below).
2) Setup Mashup Style
Function: Checking this field reveals the fields required to customize the appearance of the Mashup.
3) Background Color
Function: You can assign a color to the areas around the panels of the mashup - the equivalent of the Page Body background color in a normal RWD Page. This color affects all areas in the Mashup EXCEPT the Panels of content themselves.
4) Background Image Path and Filename
Function: You may opt to use an image instead of a color for the background - if so, enter the path and filename of the image here.
5) Background Image Tiling
Function: If using an image that is a repeating pattern, you can create a wallpaper effect by tiling the image. Alternatively, you can place a single image in any of the regions of the page in the list of options. If the image does not fill the entire area of the mashup, the Background Color setting above will be displayed wherever the image is not.
6) Tab Font and Background settings
Function: Collectively, the controls in this section govern the font face, color, size and attributes for text used to label the panel tabs in the mashup.
The background color of the tabs can also be set here UNLESS you are using a graphical image for the tabs in which case the tabs take on the graphical appearance as selected (see 1) above).
7) Special Object Font and Background settings
Function: The display of the special objects created for the Mashup can be modified by settings in this area. Again, this item is a collection of settings to give you the ability to match the conference listings, calendars, etc to the rest of your site. Experiment with the settings to determine the best combination for your purposes.
8) Use Custom Border Style
Function: The display of the special objects created for the Mashup can be modified by settings in this area. Again, this item is a collection of settings to give you the ability to match the conference listings, calendars, etc to the rest of your site. Experiment with the settings to determine the best combination for your purposes.
9) Panel Border Color and Thickness
Function: The display of the special objects created for the Mashup can be modified by settings in this area. Again, this item is a collection of settings to give you the ability to match the conference listings, calendars, etc to the rest of your site. Experiment with the settings to determine the best combination for your purposes.
| 
Help Site Home Page
