Links to Other Key Pages
Links in this page
NOTE: All fields on the builder form are shown in the screen images below unless otherwise noted - fields on actual form may be hidden depending settings in other fields on the form.
Header Tab Overview
Summary: The Header section is located at the top of the web page and it spans across the entire width of the page (above the Header Links Bar, Navigation Sidebar, The Page Body and the Information Sidebar), and can be used in a variety of ways. This section can contain a Page Title, Subtitle, a Logo, a Banner Image that displays across the top of the page, up to two Scrolling Messages, and a number of custom links. The Header section can be formatted to have a different background color or image than the rest of the page if desired, and it can be switched off completely so that it does not appear on the web page at all if desired. The image below illustrates the various
components included in the Header Section of an RWD form as seen on the web page.
Generally, the Header section is where you would put your organization's logo and also the Titles for the page itself. Titles in this section can be created using text or can display graphical images that you have uploaded to your site as in the above image.
[Image:Header_Tab.
1)Header Section Master Switch
Function: This checkbox simply switches the Header Section on and off. If you don't want a header section on your page, leave this box unchecked and the entire Header Section will disappear from your web page. Checking the box again restores the section to the web page. Like most features in RWD, even if switched ON, the Header Section will only look right when content is entered to fill it and the section will shrink or expand based on that content.
Tips & Tricks: You can experiment with the Header section to see how it can best be used for your purposes. Removing the header section can be useful in some cases when you want to get the most real-estate for your page body.
Title and Subtitle - Content and Formatting - SubTab A
Summary: The Title and Subtitle - Content and formatting SubTab (A) is used to create and set the format for your page Title and Subtitle (usually, the Title should match the page subject that was set in the Page Tab of the RWD form). If you wish, you may substitute a graphical image instead of text. To do so, check the Use Image checkbox and enter a valid path and file name to the image you wish to use. If you created an images folder in your site as suggested, you must first upload the image you wish to use to this folder and then set the path and graphical file name in the Path/Filename field.
(Fields 4-7 below were formerly on Section Format Tab in RWD version 4)
1) Title (note - items 1-3 apply in exactly the same fashion to both the Title and Subtitle fields)
Function: This will be the title of the page which will be displayed in the Header section (not to be confused with the Page Name and / or the Subject).
2) Font
Function: This will alter the font type of the Title. Remember, for a font to display properly on a user's computer, that user must have the font you used installed on their computer! Don't use unusual fonts for Titles! If you really want a special font, use a graphics editor to create your Title or Subtitle as a graphics file, then upload it to your site and use the graphic instead of text.
If using text, Verdana, Arial, or Times New Roman are recommended for maximum compatibility across browsers.
Color
Function: This will alter the Title's font color. Make sure your font color contrasts well with your header section background color or background image and try to be consistent throughout your site.
Size
Function: This will alter the font size of the title. Test in multiple resolutions to make sure your Title doesn't wrap to the next line on the lowest resolution systems (usually, building your page to be viewed at 800 x 600 is still best).
Style
Function: This will alter the text style of the title to bold, italic, etc.
Alignment
Function: This will set the alignment of the title within the header section (works with text or graphics) - you can set the title to show on the left of the page, in the middle, or at the right of the page. Depending on what other objects you use in the Header (such as a logo image or other features available in RWD), setting your Title to center, will not necessarily place the title in the center of the web page but rather will place it in the center of the area available for the Title. For instance, if you had a logo image that was unusually wide and you placed that image on the left hand side of the page, the area left for titles in your page would be 'squished' towards the right side of the page. Setting the text or graphical image to center in this case would center it in the space left
over for the titles.
OR (the Underscored OR in RWD indicates an either/or choice of features)
2) Use Image
Function: This will substitute a graphic in place of the Title or Subtitle text. You must have a valid path and file name in the Path/File Name field that points to an image that has been uploaded to your site. It is very important that your image be of basically the same size (real size, not scaled in the browser) as your text title would be. If you point to a large image, the Header section will enlarge itself to fit the graphic - this may produce some unexpected results (which may not always be bad!). You can not have both text and a graphical image in either the Title or Subtitle field at the same time, however you can have an image in either the Title or Subtitle and text in the other section.
Path/File Name
Function: If the Use Image checkbox is activated, this field shows the path to the graphic that is used instead of the text title. For Help with images and setting paths, read the RWD Images and Paths Help document
3) Link Title (on click)
Function: If you wish, you can create a link to take the web user to a different page, or a specific place on the existing page. Use this field to set the link
 The following controls were previously situated on another tab in this section called the "Section Format" tab. They have been moved to the current tab to simplify the complexity of the form. These controls let you format the background of the Header section as it appears on the web. You can use either a solid color (usually white but not necessarily) or you can use a tiled image. Additionally, you may rearrange the order
in which the elements of the Header Section appear from the top of the page.
4) Header Section Background Color
Function: This field will set the background of the header to the specified color UNLESS you have checked the Use Image checkbox - you can't have both a color and an image as a background to your Header section.
Note: This feature is overridden if the Use Image checkbox is checked (below)
OR
5)Use Image
Function: This checkbox will determine whether or not the header will have an image as a background. This setting must be used in conjunction with a valid path and filename of an image (below). This feature overrides the Header Section Background Color feature.
6)Image Path/File Name
Function: This is the path and file name of the graphic which will be used for the header background IF the Use Image checkbox is activated. Small, very low intensity, nondescript patterns make the best background images.
7) Layout of Objects (top down)
Function: This field lets you change the order of the Elements that make up the top of the web page. By selecting one of the options (all possible options are listed, you can choose to display in any order (listed from the top of the page down), the Banner Image, Header Section (Title Section), Header Links Bar, and Scrolling Message.
Tips & Tricks: Make sure to use a common font if using text for your Titles and Subtitles (Verdana is the most common across platforms). If you use a font that is not on the web user's computer, their browser will substitute a font for the one you used and this can produce unexpected results. If you are using a graphic instead of a title, make sure the graphic fits the page properly (and try different screen resolutions to test this).
Logo - SubTab B
Summary: This tab provides a way for you to insert graphical image(s) in your Header Section - usually a logo. From here you can tell RWD what image to display, where to display it, how big to make it and where a user will be taken if they click on it. You can also set multiple logos to display randomly on page refresh, or sequentially in a slide show.
1) Placement of Logo
Function: This field gives you the option of placing the logo image in one of several places; On the Left side of the Header section of the web page, on the Right, centered above the title, centered below the subtitle. Selecting No logo will hide any image that has been entered in the path/Filename field and remove the logo from the web page. Removing the logo will cause the other objects in the Header Section to reposition themselves, for instance, a Title that is centered will shift to the left if a logo that was on the left is removed.
2) Logo Path/File Name
Function: This is the path to, and name of, whatever graphic file you wish to have displayed. See RWD Images and Paths Help for more information on images in RWD.
RWD now supports the random display of multiple images. If you would like to have more than one image display, enter the path and file names of all images separated by a semicolon as follows:
path/image1.jpg;path/image2.gif;path/image3.png - etc.
The more images used, the more likely it is that the image will change each time the page is refreshed or visited.
Note: See Slide Show feature (item 6) for more information
3) Scale Image (% of orig)
Function: This is the size of the logo on the page. 100% means that the image will be displayed at full size. Increasing or decreasing the scale will enlarge or reduce the image as displayed on the page. Remember, it is best to use images at their full size (we like 150 x 150 pixels or so) instead of using the Scale to change the displayed size on the web page. Very often people use very large images that are scaled down on the web - this can really slow your page down because the full size image must be downloaded to the viewer's browser and then shrunk. Conversely, using very small images and scaling them up, while making the site faster to load, can lead to a poor image quality when viewed on the web.
One issue we found is that .gif files that are animated don't scale well at all - each time the gif repeats its animation, the scaling is applied to the image. The result is that the image either blows up to gigantic proportions (if scaling is greater than 100%) or shrinks to nothing (if less than 100%).
Basically, this is a bad feature but we can't take it away from RWD as people out there may be using it!
4) Link Logo to (on click)
Function: Enter a valid page name or marker name, or internet URL in this field and web users will be taken to the destination when they click on the logo when viewing the page with a web browser. Again, for logos, we recommend that you link your logo to your home page and be consistent with this throughout the site.
5) Open in
Function: This determines whether the link will open in a new window in the web browser (while keeping the existing browser window open, the same window (replacing the content with the new page). We generally recommend that you use the new window option when linking to other sites (thereby keeping you site open - and not forgotten), and the same window option when linking to other pages and places within your site (to avoid too many windows opening up).
6) Slide Show
Function: This field activates the slide show feature for the main logo and, when checked, reveals the related fields that govern the behavior of the feature. You MUST have multiple images listed in the Logo Path/Filename field for this feature to work.
Use the syntax path/image1.jpg;path/image2.gif;path/image3.png - etc. for your image listings.
Pause
Function: Checking this field will make the slide show pause when a web user hovers their mouse over the image that is currently being displayed in the browser.
Speed
Function: Set the number of seconds between image changes - the default is 4 seconds if no other value is entered.
7) Second Logo
Function: This feature operates exactly as the first logo and allows for the use of a second graphical image in the Header Section. Useful for a variety of purposes, the second logo can be set to appear in a number of places within the section. Functionality is exactly as the corresponding fields in the first logo (items 1-6 above).
Tips & Tricks: The logo doesn't have to be your company logo, it can simply be another picture that you would like to have in your banner. If creating a link on the logo, it is common for that link to be the same on each page in the site and for it to return the user to the site home page.
The second logo is very useful if you want to create sites that scale with the user's screen resolution ('squishy' sites). Putting part of an image on the left (logo 1) and part of an image on the right (logo 2) with a background that blends with the inside edge of both images creates a scalable page that looks excellent - experimentation is key.
Scrolling Message - SubTab C
Summary: The scrolling message feature allows you to put text into your header that constantly scrolls along the leftmost third of your web page, at the bottom of the Header section. You can turn the scrolling on or off entirely, include up to two different messages - each with a unique link, determine how links open up and format the font used. The second message (B) functions exactly as the first so descriptions of the fields and their functions is only given for the first message.
Fields 14-21 below are new for RWD 5
1) Include Scrolling Message(s) in Header Section
Function: This will determine whether or not the header will actually include the scrolling messages.
Tip: You can also use this field to gain a little bit of space on your header bar even if you don't want a scrolling message - simply use a font color that is the same as your Header section background color, select the font size that is as tall as the amount of space you wish to gain, and type a single letter in the first message field. This will create an invisible "message" but it will look in your browser like you have additional space in your Header section.
2) Scrolling Width (%)
Function: This field determines how much of the page width is used up by the scrolling message. Starting from the left hand side of the web page, as the number in the setting increases, so does the width of the scrolling message.
3) Format Messages
Function: This field will alter the appearance of the text used in the scrolling messages. All of the rules that were mentioned earlier (in the Title and Subtitle Font section) regarding the use of fonts, font sizes, and colors applies to this section as well.
4) Open Links In
Function: This determines whether the link will open in a new window in the browser or the the same window. See the [Link]logo section above for more on this.
5/5b) Message A (and Message B)
Function: This is the content text of the message. You can have up to two distinct messages in RWD, each with separate links but both will adopt the same formatting and link opening behavior.
You can also include images in the message line using the special tag right inline with any text that you enter in the message field: [img=path/imagefilename]
eg. [img=/siteImages/dance.gif]...We are having a dance next Saturday night!
This tag will refer to an image that you have uploaded to your sites SiteImages folder
6/6b) Message A Link (and Message B Link)
Function: This is the URL of the destination page or page location that the browser will jump to when the scrolling message is clicked by the web user. As always, it can be a local link to a marker in the existing page, another page in your site, or another site on the internet (in which case you should use the full internet syntax: http://www.sitename.com/pagename)
7/7b) Tooltips (and Message B Tooltips)
Function: Tooltips allow for extra content to be displayed when a user hovers their mouse over top of a particular message. If no content is present in the Tooltips field, the content of the message itself will pop-up when the scrolling message is hovered over but the Tooltips allows for a completely different message to be displayed (for example, a more descriptive summary of the link that will result in a click on the scrolling message)
8) Use Custom Attributes
Function: Makes visible the controls needed to set various attributes of the scrolling message that override the default settings for this feature.
9) Scroll Direction
Function: Sets the direction of the scrolling message. Normally, the message scrolls from right to left; this control allows you to change that to a left to right direction.
10) Loop
Function: Allows you to set the number of times the scrolling message will repeat itself. The default is continuous which means the message will continue to scroll indefinitely.
11) Bounce
Function: Checking this field makes the scrolling message 'bounce' back and forth instead of entering on one side and exiting on the other.
12) Scrolling Speed
Function: Determines the amount (in pixels) of movement of the message between screen refreshes. This gives the impression of movement. Higher values equate to a faster scrolling message.
13) Scrolling Refresh / Delay
Function: Sets the refresh rate for the scrolling message (in milliseconds). The higher the number, the slower the scrolling message will appear to move.
The following controls are new for RWD. These fields allow you to define a color or graphical background image for the Scrolling Message area, as well as both left and right side 'bookend' images. Previously, if no content was entered into the scrolling message field on the form, the section would not display. In RWD 5, the same behavior exists, except where images are defined, in which case the section will stay open to
display the images, even if no message is present.
14) Use Color for Scrolling Message Background (Checkbox)
Function: Sets the preference to display a color for the background area of the Scrolling Message and displays the Color Selector (Field 15 below). Checking this field also hides the fields used in setting a background image for this area (fields 17-19 below).
15) Scrolling Message Background Color Selector
Function: Sets the color that will display behind the Scrolling Message
16) Use Image for Scrolling Message Background
Function: Sets the preference to display an image for the background area of the Scrolling Message and displays the related fields (Field 16-19 below) while hiding the Color Selector field (15 above).
17) Scrolling Message Background Image Path and File Name
Function: Sets path and file name of the image you wish to display behind the Scrolling Message
18) Scrolling Message Background Image Tiling Options
Function: Sets the preference for tiling of the Background Image identified in the Image Path and File Name field above.
Options include:
Tile - the image will be repeated in both the horizontal and vertical axis
Tile only Horizontal - the image will be repeated in only the horizontal axis
No Tiling - Single Image - the image will be represented only once in the section
19) Scrolling Message Background Image Alignment
Function: Sets the alignment of the background image to left, center, or right within the section
20) Scrolling Message Section, Left Image
Function: Sets the path and file name of an image that will display at the leftmost edge of the page in the Scrolling Message section
21) Scrolling Message Section, Right Image
Function: Sets the path and file name of an image that will display at the rightmost edge of the page in the Scrolling Message section
Tips & Tricks: The scrolling message is an effective method for displaying urgent messages (such as emergency bulletins) due to their movement on a mainly static page. Also, the moving text is a good eye catcher for interesting information in a site.
Banner Image - SubTab D
Banner Images Sub-SubTab
Summary: This SubTab lets you format the background of the Header section as it appears on the web. You can use either a solid color (usually white but not necessarily) or you can use a tiled image. You can also include a banner graphic (and now a second one) that will display across the very top of the web page.
1) Banner Selector
Function: This field has three functions;
1) Do not include a Banner
2) Include a graphical Banner (Image) or Banner Text
3) Include Flash (swf) in the Banner
Depending on the selection you make, the appropriate fields will become visible for you to fill out.
2) Slide Show
Function: This field activates the slide show feature for the main logo and, when checked, reveals the related fields that govern the behavior of the feature. You MUST have multiple images listed in the Logo Path/Filename field for this feature to work.
Use the syntax path/image1.jpg;path/image2.gif;path/image3.png - etc. for your image listings.
Pause
Function: Checking this field will make the slide show pause when a web user hovers their mouse over the image that is currently being displayed in the browser.
Speed
Function: Set the number of seconds between image changes - the default is 4 seconds if no other value is entered.
3) Banner Alignment
Function: Set the Banner image(s) to display on the left, center or right hand edge of the web page as needed. This control affects both the first and second banner or search field (if one of these is present). The second image will always appear opposite to the first; If the first image is set left, the second will appear on the opposite side of the page on the right. If set to center, the second will appear center and beneath the first.
4) Banner Image Path/File Name (or Flash File Path/File Name)
Function: This is the place where you enter the path and file name* of the graphics file or Flash file / URL which will be used as a banner image. Generally, use a banner that is wide enough to at least span the 800 pixels of the common browser window in 800x600 resolution. Banner images are not usually very tall (20-50 pixels or so) but there are no restrictions made by RWD. You can scale the image using the fields provided (see 7-8 below) however, we recommend that you try to size the image before uploading it to your site images folder.
Note: If a banner image is wider than the browser window, it will extend beyond the edge of the window and a scroll bar will be created at the bottom of the browser window. Also, if you selected a page width that is less than full (In the Page Tab), the banner image will not respect this scaling but will appear at full width.
RWD supports the random display of multiple images or page refresh or the sequential display of the included images in a slide show. If you would like to have more than one image display, enter the path and file names of all images separated by a semicolon as follows:
path1/image1.jpg;path2/image2.gif;path3/image3.png - etc.
The more images used, the more likely it is that the image will change each time the page is refreshed or visited.
note: Due to the increased capabilities of spyware and adware detection software, you should not name your banner image(s) using the word 'banner' as many systems will block the images. We use the name 'bnr_lft.jpg' often and have had little trouble.
5) Banner Link To
Function: Enter an URL that will be opened when a user clicks on the banner. This feature is particularly useful when a central authority (such as a district) wants to use a banner to carry a brand throughout a website and wants a common link back to the central authority's website.
6) Link Open Behavior
Function: This setting determines if the link followed when a web user clicks on the image will open in the same (existing) window of the browser or if it will open a new window. Generally, if the link targets a page in your own site, you would set this control to open in the Same window.
7) Banner Tooltips
Function: Tooltips allow for extra content to be displayed when a user hovers their mouse over top of the banner image. (for example, a summary of where the user will be taken if they click on the banner image (which will open the URL in the Banner Link To field).
8) Banner Image File/ Flash File Width Definition
Function: While it will scale the image, this setting is generally not used for Banner Images but is required when using Flash in the banner. This field is used in conjunction with the Height Definition field below.
Banner Image File/ Flash File Height Definition
Function: While it will scale the image, this setting is generally not used for Banner Images but is required when using Flash in the banner. This field is used in conjunction with the Width Definition field above.
9) Use Background Color
Function: This setting will create a background color wash upon which both graphical banner images will sit. Un-checking this field will reveal another field that will allow you to define an image for this purpose instead.
10/11) Use Background Image
Function: A background image can be set behind the banner images instead of a solid color if desired. This background image will automatically tile to fill the space available. You must check the CHECKBOX with the label Use Image (10) in order for the field to appear (11) in which you will enter the path and filename for your background image.
12) Second Banner Image or Search field
Function: A second banner image can now be added to your page to augment the first or to create special effects (particularly the 'squishy' scalable web pages that are popular). If a second image is not needed, you may also set the control to display a search field that will appear in exactly the same place as the second image would. All other controls in this second image section function exactly as the related control for the first image.
Banner Text Sub-SubTab
Summary: This SubTab introduced in RWD 5 allows for text to be entered either instead of, or in addition to any graphical banner images you define.
1) Banner Text
Function: This field accepts the text that will be displayed in the Banner Section
2) Banner Text Formatting Options
Function: These fields determine the Font Style, Color, Size, Font Attributes, and Alignment of the Banner Text content. Alignments of text when also using a Banner Image(s) should be experimented with for best results.
3) Banner Text Link To
Function: Accepts the URL that will be activated when a Web Visitor clicks on the Banner Text
Tips & Tricks: The Banner Image is a good way to tie all your pages together with a consistent look. It can also be used in place of the Title Field if you want a graphical title that extends right across the entire page.
Formatting the Background of your Header section is very useful for making more interesting pages but try not to let the background colors or image conflict with the page background.
| 
Help Site Home Page
