Text Only • 
    Home  •  Admin_Page_Builder_Form  •  Rapid Web Designer Administrator Page Builder - Ver 5.05
Admin Builder Form - Header/Footer Links Tab
 Print

Links to Other Key Pages

Links in this page





Header/Footer Links Tab Overview

Summary: The Header Links Bar is located directly between the Header Section and the rest of the sections (the body content, Navigation Sidebar and Information Sidebar) on the web page and it is usually used to contain links to other web content. An exact copy of the Header Links Bar can be activated to display at the very bottom of the web page but this Footer Links Bar can only be an exact copy of the Header Links Bar and can not contain any different links or formatting.

If, in the Page Tab, the Choose Preset Skin field is selected as 'Custom Skin', then the colors and fonts of the header/footer bar is able to be modified by the user, otherwise, the format will be set by the skin chosen

432009_55330_2.png





1) Include Header Bar

Function: This option determines whether or not the page will contain a Header Links Bar below the Header Section. It is possible to have a Header Links Bar and a Footer Links Bar on a single page.




2) Include Footer Bar

Function: This option determines whether or not the page will have a Footer Links Bar.  It can be activated independently of the Header Links Bar but the object itself is an EXACT copy of the Header Links bar (including any defined graphics) so consideration needs to be given to how it will look on the page if you have used graphics in the Header Links Bar as part of your design.

*Tips and Tricks: The Header and Footer Links Bars do not have to contain links at all but can be simply a graphical addition to the page. The bar does not necessarily require links to be present on the web page, and it can serve as a divider between the Header section and the rest of the page; this can be accomplished by inserting a graphic (transparent .gif or any other file you wish) in the first row of the content area to activate the feature. These bars can contain graphics as well as text.






Content - Sub-Tab A

Summary: This section of the Header/Footer Links tab is used to input all the links into the bar(s), and to determine if a link will be displayed using text or a graphical image.

432009_55410_3.png





3) Include "Home" Link  THIS FEATURE HAS BEEN LEFT IN PLACE FOR LEGACY REASONS - WE ENCOURAGE YOU NOT TO USE THIS FEATURE BUT RATHER PLACE A 'HOME' LINK IN A ROW IN THE HEADER LINKS BAR ITSELF.

Function: This will create a link titled "HOME" at the far right of the header/footer bar, which will link to the specified URL or path/filename.




4) Include "BACK" Link THIS FEATURE HAS BEEN LEFT IN PLACE FOR LEGACY REASONS - WE ENCOURAGE YOU NOT TO USE THIS FEATURE BUT RATHER PLACE A 'BACK' LINK IN A ROW IN THE HEADER LINKS BAR ITSELF. USE THE SYNTAX Javascript:history.back(-1); TO ACCOMPLISH THIS.

Function: This check, when activated, will create a link on the Header Links and Footer Links Bars that will take the internet browser back to the web page that they were viewing immediately prior to the current page.




5) Add New Row / Remove Selected Row / Insert New Row - Buttons

Function: These buttons allow you to manage the links that will appear in this section.

Add New Row:  Creates a blank row after the last existing row
Remove Selected Row:  Deletes the rows that is currently selected
Insert New Row: Creates a new row above the currently selected row.  To Insert a row, click in the row below where you want the inserted row to appear and then click on the Insert New Row button.

Note: It may appear that the feature is functioning properly at when you insert rows at first but once you click into the other rows or close the RWD form and re-open it, the rows will appear properly.




6) Top Menu?

Function: This field is used to determine which Links or graphics appear in the Header Links Bar when the page loads.  If you are NOT using the Header Links bar as a drop down menu, you may leave this field unchecked for all rows.  If you wish to have some links only become visible as a drop down when a user hovers their mouse over a specific link, check this field for the link that you wish to be at the top (visible on the bar) all of the time.
All other rows below a row where the Top Menu field is checked will not be visible on the web page until a user hovers over the link that is visible (with this field checked) or clicks on the small icon that denotes the presence of additional links.

For example, the following Images show how the settings in a form will display on the web:

Setting Links in the Builder Form like this:
442009_55525_0.png
Will result in the links on the page appearing like this:
442009_60239_1.png
A) Checking the Top Menu? Field will ensure that the Text in this row will appear on the Header Links Bar at the top
B) Entering text in a row with no link (or the # character, which we prefer) will cause a grouping condition to exist
C) Sets of related links that exist between no-link rows will appear grouped in the menu
D) The next Row with the Top Menu? Field checked will appear beside the last one with the same setting at the top of the menu

Important Note for this feature:  When using drop down menus, the alignment of your Header Links Bar links can ONLY be set to left and right, centering is not supported.  Due to the nature of the object being used to accomplish drop down menus, setting the alignment of the links to right will reverse the order that the links appear in on the bar in the web page.  If you wish to use a right alignment, you will have to build your menu in reverse order to how you wish it to appear on the web.
See the alignment control reference below for more information





7) Icon or Bullet Path/File Name

Function: These fields will insert the specified graphic (uploaded to the images folder of your site) at the front of the selected link in the Header Links /Footer Links Bar(s).




8) Link Display Text

Function: This field is used as the actual text of the link in the Header Links /Footer Links Bar(s). The Icon/Bullet will go to the left of it.




9) Link To

Function: This field is URL that will be reached when a web user clicks on the selected link.





10) Open in New Window

Function: This option will determine whether the page specified in the link will open in a new browser window, leaving the original page open, or if the link will open in the same window.




11) Special Format
452011_105112_0.png
02052011_33740_0.jpgThe order of these options has been changed so that the more common formats are nearer the top of the list.



Function: This feature allows you to call a variety of other types of content to display in your web page without having to use any special syntax.  Using the Special Formats available, you can display FirstClass containers (conferences, folders and calendars) without having to use the special parameters that are required for these objects.  With this feature, you simply type the name of the folder, conference or calendar you want to open (preceded by the path to that object if it is not in the same container as the page containing the link).  You can show Calendars in any of three default views - Month view, Week View or Current Day View.  Conferences and Folders can be viewed
If you want to allow users to log right in to FirstClass via the web but would like them to be able to keep their web page navigation elements as well as the graphical layout you have built in RWD, you can use another new template that will do just that called FC Templates

Select the appropriate item from the list to set the link to open the way you want:
Setting
Purpose /Effect
None (RWD Page)
The default value which is used for all links that are NOT FirstClass container objects (calendars, folders, conferences, etc) unless the conference or folder being opened contains a web page.  Links to other pages in the site, markers in pages, or other, external websites should be set to none.  This is BY FAR the most common setting
Message Blog
This setting displays the contents of a folder or conference in a Blog view.  The container being opened must have the Preview feature activated to operate fully.
DO NOT OPEN ANY LINKS WITH THIS SETTING IN A NEW WINDOW (leave checkbox unchecked)
Calendar (Month)
Use this setting to open a calendar in a Month view inside a frame that will replace the page body content of the current page. Users can switch between views when viewing the calendar on the web.   DO NOT OPEN ANY LINKS WITH THIS SETTING IN A NEW WINDOW (leave checkbox unchecked)
Calendar (Week)
Use this setting to open a calendar in a Week view inside a frame that will replace the page body content of the current page.  DO NOT OPEN ANY LINKS WITH THIS SETTING IN A NEW WINDOW (leave checkbox unchecked)
Calendar (Day)
Use this setting to open a calendar in a Month view inside a frame that will replace the page body content of the current page.  DO NOT OPEN ANY LINKS WITH THIS SETTING IN A NEW WINDOW (leave checkbox unchecked)
Calendar (List)
Use this setting to open a calendar in a list view that shows events as a list of items.  DO NOT OPEN ANY LINKS WITH THIS SETTING IN A NEW WINDOW (leave checkbox unchecked)
File Container (Fixed Height)
Similar to the FC Templates and RWD Nav left and Top settings, this setting  forces the framed area to remain 600 pixels high, regardless of how many or how few items are in the conference or folder that you are opening.  This rectifies a problem faced when a list of documents was opened with only a few items in the list.  It also fixes the problem some users experienced when opening PDF or Word files inside the frame where the document would open in a very short window.
DO NOT OPEN ANY LINKS WITH THIS SETTING IN A NEW WINDOW (leave checkbox unchecked)
Podcast
FirstClass Podcasts have been added to the pickers in RWD and if you wish to have a link to a Podcast, use this setting as the special format for the link.
DO NOT OPEN ANY LINKS WITH THIS SETTING IN A NEW WINDOW (leave checkbox unchecked)
FirstClass Object
Use FirstClass Object to open folders or conferences in a list view.  DO NOT use this setting to open a web page itself because this setting causes a frame to be created that is meant to be filled with FirstClass documents of messages.  You could use this setting if you wanted to display an external website in the Page Body area of your RWD page however.
DO NOT OPEN ANY LINKS WITH THIS SETTING IN A NEW WINDOW (leave checkbox unchecked)
RWD Nav Left
Almost exactly the same as the FirstClass Object setting, use this to open folders or conferences in a list view.  The difference with this setting is that any subconferences or subfolders in the container being opened up will appear down the left side of the frame as opposed to at the top of the frame.

Again, DO NOT use this setting to open a web page itself because this setting causes a frame to be created that is meant to be filled with FirstClass documents of messages.  You could use this setting if you wanted to display an external website in the Page Body area of your RWD page however.
DO NOT OPEN ANY LINKS WITH THIS SETTING IN A NEW WINDOW (leave checkbox unchecked)
RWD Nav Top
This setting currently functions exactly in the same way as the FirstClass Object setting but may change a little in a future release of RWD.  Essentially it is only slightly different than the RWD Nav Left setting because in the RWD Nav Top setting, subfolders and conferences and calendars are all listed horizontally above the list view of the conference being opened
DO NOT OPEN ANY LINKS WITH THIS SETTING IN A NEW WINDOW (leave checkbox unchecked)
FC Templates
These templates access the full FirstClass templates.  This link is generally only used with the '/login' link to enable you to allow users to log in to FirstClass without leaving your RWD site.  Instead of opening a new browser window and effectively 'leaving' the RWD site, using this template produces the result that whatever object you open (folder, conference, calendar, or your FirstClass desktop) will open with the full FirstClass templates in a frame on the current page.  
DO NOT OPEN ANY LINKS WITH THIS SETTING IN A NEW WINDOW (leave checkbox unchecked)
FC Templates (600px height)
These templates access the full FirstClass templates.  This link is generally only used with the '/login' link to enable you to allow users to log in to FirstClass without leaving your RWD site.  Instead of opening a new browser window and effectively 'leaving' the RWD site, using this template produces the result that whatever object you open (folder, conference, calendar, or your FirstClass desktop) will open with the full FirstClass templates in a frame on the current page.  
DO NOT OPEN ANY LINKS WITH THIS SETTING IN A NEW WINDOW (leave checkbox unchecked)
Launch OTSW
If you have OTSW installed on your FirstClass server, you can enter the URL of the login page in the link field and set this option as the special format to take the user to the OTSW login page in a new browser window.   If you call the
URL from an authenticated page (one which required a login to see), OTSW will open up to your Home Screen with your login credentials passed automatically across to the OTSW site.

Super Important Feature!:  Release 4.5 of RWD introduced a feature that is very useful.  

The situation up until this release was that if a builder made a link to a calendar or conference or folder (an object) using the special formats above, the object would open up in a frame in the current page. While this was not a significant problem for end node sites such as a teacher site, it could be very confusing if the link was put in the RWD Site Administrators Form (.sitepref) where the link would appear on all pages.   The confusing part is that a visitor to the website could be on a page that was called 'athletics' for example but if they clicked on a link to the district calendar or district news, these objects would just open up.  Unless the web visitor was aware of what had happened, they might believe that, because the page name and title was 'Athletics', that they were looking at the Athletics News or Athletics Calendar.

The remedy for this was some significantly complex code that had to be put in the Link field in the RWD form in order to take the web visitor to another page, say a page called 'Calendar' and then open the object.  

Now the good news:  

Using the new syntax, you can tell RWD to open an object (Calendar, Conference or folder) using any of the above special formats that are appropriate:

FirstClass Object
Calendar Monthly View
Calendar Weekly View
Calendar Daily View
RWD Nav Left
RWD Nav Top
FC Templates - use at your own risk - test lots
Message Blog
Fixed Height
Podcast

Syntax for opening an object on a different page than the current page:

Object path and name:Page path and name        -  Set one of the special formats above in the special format field

Example:  to open a monthly calendar called "District_Calendar", located in the root of the site in a special calendar title page called "Calendars", also in the root of the site, the syntax would be:

/District_Calendar:/Calendars    (and the special format would be set to 'Calendar Monthly View')

In the RWD form (.sitepref or the page builder form, Navigation Sidebar or Header Links Bar), the link above would look like:

9222009_53013_1.png
Navigation Sidebar Tab Shown in above example





*Tips and Tricks: If you wish to have a just a graphical bar with no links, you can either include a graphic in the bar or, if you wish to use a solid color you must do the following:  Create a link in the bar to the top of the page (#verytop) that is set to open in the same window (so the user does not leave your page if they inadvertently click on the link).  Set the font color of the link in the Modify Colors and Fonts Sub-tab to the same color as the Header Links Bar Background Color.  Set the font size of the link in the Modify Colors and Fonts Sub-tab to whatever size you wish - you must do this in order to display a solid color Header or Footer Links Bar as the bar takes its height from the font size setting and a link must exist for the bar to appear at all.

Use the left and right graphics in the Header Links bar to augment the design of this section but remember that anything you put in the Header Links Bar will appear both at the top AND the bottom of the page if you check the Include Footer Bar checkbox (see 2 above)


The Icon or Bullet Path/File Name can be used to insert a graphic into the header/footer bar, with or without a link. As such, it can function as a graphical addition to your page.

When linking to another page of the same site, generally Open in New Window is not desired, however a link to another web site, usually a new browser window is desired so as not to ' lose' the user.






Modify Colors and Fonts - Sub-tab B

Summary: This section is used to alter the look of the different links of the header/footer bar, as well as the bar itself.


3112008_34339_0.png



1) Alignment

Function: This option will determine the alignment of the links on the Header / Footer Links bar.  Setting the alignment to left will set the first link on the bar as far left as possible - either at the left of the page or, If a Left Image is used, just to the right of that image.  Conversely, setting the alignment to right will align the links on the bar as far to the right of the page as possible - just left of the Right Image if one is used.  Centering the links will put them in the center of the space between the left and right edges of the page, or, if one or both of the Left and Right Images are used, between those images.

Note:  When using drop down menus, ONLY left and right alignment will be respected, centering drop down menus is not possible with RWD.  Also, if right alignment is chosen and drop down menus are used, the order from left to right that the links appear on the page will be reversed from the way they appear on the form.


*Tips and Tricks: Use either transparent or non-transparent images in the left and right fields to adjust where the links in the bar appear - a wide left image that is invisible can make it appear that the links are aligned in some other way than simply left, right or center





2) Background Color

Function: This option will determine the background color of the header/footer bar. Besides the provided colors, the user can fine tune the shades of the color they desire by using the Other...>Define Custom Colors tab provided.




3) Use Image

Function: This option will disable the background color field and replace the background with the image resolved by the path and file name in the related field.




4) Pick from list or enter Path/File Name

Function: If the Use Image option is selected, this field can either be used to select a pre-made header bar from the list by clicking the drop down menu, or to select a user-supplied image by clicking the field and typing in the path/file name of a custom image.  Images to be used for this purpose should be approx 20 pixels high.




5) Left Image

Function: This field allows you to insert a graphical image on the left end of the Header (and Footer) Links bar.  This image can be used either as a self-standing image, in conjunction with other image parts in the adjacent sections of the Header Section (as part of a larger image to create a visual flow through the Header Section), or as a spacer to open the Header Links Bar to a specific height.  

Note: The alignment of the Header Links Bar (field 1) is affected by images in the Left and Right ends.  It is recommended that, if you use a Left Image, you also insert a Right Image.  You can use transparent images (even very small, single pixel images) to accomplish various alignment effects.




6) Right Image

Function: This field allows you to insert a graphical image on the right end of the Header (and Footer) Links bar.  This image can be used either as a self-standing image, in conjunction with other image parts in the adjacent sections of the Header Section (as part of a larger image to create a visual flow through the Header Section), or as a spacer to open the Header Links Bar to a specific height.

Note: The alignment of the Header Links Bar (field 1) is affected by images in the Left and Right ends.  It is recommended that, if you use a Right Image, you also insert a Left Image.  You can use transparent images (even very small, single pixel images) to accomplish various alignment effects.




7) Format Font

Function: These options will alter the font, size, and style (bold, underline, or italic) of the text links in the header bar.




8) Hover Format (Font)

Function: These options will alter the font, size, and style (bold, underline, or italic) of a particular text links in the header bar when a user hovers their mouse over that particular link.




9) Use Customized Item Separator

Function: The default item separator in the Header Links Bar is the pipe Character (|) however, you can customize this and use either an image or any other character or string of characters.  Checking this checkbox reveals the fields needed to define a custom separator.




10) Use Image

Function: If you wish to use a graphical image to separate items in the Header Links Bar instead of a character or string of characters, check this box and then enter a path and file name to your uploaded image in the next field.




11) Image Path and Filename OR Text Character

Function: This field serves two purposes, depending on the state of the 'Use Image' checkbox.  If the 'Use Image' field is checked, this field is meant to contain the path and filename of the image you want to use to separate the links in the Header Links bar.  If the 'Use Image' field is unchecked, this field should contain the text character or characters that you wish to use as a separator.




12) Character Font Color

Function: If using a character instead of an image as a custom separator, this field will determine the color of the character(s) you use.





*Tips and Tricks:

The background color may be a perfect replica of a color from another area by using a simple paint program such as MS Paint to check the RGB values of that color, and then manually inputting them into the Define Custom Colors fields provided.

The Format Font field is useful to ensure the legibility of the links in the Header/Footer Links Bar. Most text links, should be either a dark color on a light background, or a light color on a dark background, to ensure that the web user can clearly read the links. When using a Hover format that is different than the regular format, choose a font, font color and font size that are complimentary.


















Last Modified: May 16, 2011
 

Copyright (c) 2009, FirstClass Depot