getting started general process: usethe navigation builder to

38
GETTING STARTED The intent of this document is to give you the necessary information to get started with your Web site. As you go through this tutorial, you will notice that this document does not explain all the features that you will find in FWS Professional. For complete instructions on any feature, go to the appropriate Help Manual file. Getting started with this tutorial is an easy 2 step process! GENERAL PROCESS: 1) Using the Navigation Builder, add a page to your site. 2) Once the page is added, click the Detail link next to the page you added. Then select the tool or tools that you will be using for the content on this page. Use this tool or tools to edit the content on the page. USETHE NAVIGATION BUILDER TO ADD A PAGE TO YOUR WEB SITE: 1) Click on the Navigation Builder link on the administration toolbar. 2) The Navigation Builder page will result. This page will display your current Web site map as well as allow you to update any of your current pages. To add a new page, click on the Add Page link at the top of the page. 3) The Add Page screen will result. a. Type in a Navigation Link name. This is the link that will appear in your left side navigation bar. b. Choose a Navigation Type.

Upload: others

Post on 03-Feb-2022

2 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: GETTING STARTED GENERAL PROCESS: USETHE NAVIGATION BUILDER TO

GETTING STARTED

The intent of this document is to give you the necessary information to get started with your Web site. As you go through this tutorial, you will notice that this document does not explain all the features that you will find in FWS Professional. For complete instructions on any feature, go to the appropriate Help Manual file. Getting started with this tutorial is an easy 2 step process! GENERAL PROCESS:

1) Using the Navigation Builder, add a page to your site. 2) Once the page is added, click the Detail link next to the page you

added. Then select the tool or tools that you will be using for the content on this page. Use this tool or tools to edit the content on the page.

USETHE NAVIGATION BUILDER TO ADD A PAGE TO YOUR WEB SITE:

1) Click on the Navigation Builder link on the administration toolbar. 2) The Navigation Builder page will result. This page will display your

current Web site map as well as allow you to update any of your current pages. To add a new page, click on the Add Page link at the top of the page.

3) The Add Page screen will result.

a. Type in a Navigation Link name. This is the link that will appear in your left side navigation bar.

b. Choose a Navigation Type.

Page 2: GETTING STARTED GENERAL PROCESS: USETHE NAVIGATION BUILDER TO

NAVIGATION BUILDER

This tool is used to set up and maintain the navigation links for your Web site. That is, you will use this tool to add, update, delete and move pages within your site. UNDERSTANDING THE NAVIGATION BUILDER HOME:

1) Click on the Navigation Builder link on the administration toolbar. 2) The Navigation Builder Home page will result. This page will display

your current Web site map as well as allow you to update any of your current pages.

3) Each column of this table has a unique function. The items below will

explain these from left to right. a. Lvl (short for Level): 1st level links are the main links that always

appear on your site. In order to view the 2nd level links, users must click on or mouse over the 1st level link above this link. The same is true of 3rd level links.

b. Link Name: This shows how the link will appear in the navigation area. Note that these are indented so that the levels are easy to identify.

c. Page Type: This tells whether the link goes to an Internal Web page (Page), external Web site (Link) or is used to display the sublinks in this section (Opener). This will be explained in greater detail below.

d. Page Detail: This will bring you to the page detail for this individual page. The Main Body link will be used to the edit the content in the

Page 3: GETTING STARTED GENERAL PROCESS: USETHE NAVIGATION BUILDER TO

main body of this page. The Right link will be used to the edit the content in the right side bar of this page.

e. Update: This will allow you to change anything about this page that relates to the navigation itself. (See Adding a Page below).

f. Delete: This will allow you to delete this individual page. You will only be able to delete this page if it is currently empty (This is to ensure that you do NOT delete a page by accident). Therefore, you may need to delete all the page detail prior to deleting the page with this link.

g. Preview: This will open the selected Web page in a new browser window. This is a convenient way to check your work and view a page as a general user will see it.

ADDING A PAGE:

1) Click Add Page at the top of the Navigation Builder Home page. This

will bring up the Add Page utility.

2) Type in a Navigation Link name. This is the link itself that will appear

in your left side navigation bar. a. There may be times that you want to use a graphic link rather than

a text link. (This is not recommended to novice Web site administrators.) To add a graphic link:

i. Click on the “Use Graphic Instead” check box. ii. Click the browse buttons to upload the main graphic link and

its associated rollover. iii. The system will automatically resize the graphics if they are

too large. Be sure that both graphics are the same size as each other prior to uploading.

3) Choose a Page Navigation Type.

Page 4: GETTING STARTED GENERAL PROCESS: USETHE NAVIGATION BUILDER TO

a. Internal Web page: This option will be used for most of your links. By selecting this option, you are dictating that this link will be for a new page within your Web site.

i. Physical File: This is the file name that will be used for this page. Each page must have a unique physical file name. If you choose a name that already exists for another page, a warning message will appear. This file name cannot have any spaces, just letters, numerals and underscores.

ii. Page Title: This is an optional field. The text that you enter into this box will appear in the title area of this page. It is recommended that you include a title for each page.

iii. User Side Security: By default, all new pages will be accessible to the general public. If you click on this check box, you will be able to secure this page so that it can only be viewed by Web site members with a username and password. (For more information on these users, see the Families Database Help Manual).

iv. Banner Graphic: Each page of your Web site can have a banner graphic at the top of the page. You can use any number of banner graphics for your site. You can use this tool to select a banner graphic from the Banner Graphic library (See the Banner Graphics Help Manual) or add a new one. Unless you specify otherwise, the default Banner will be used for all new pages.

v. Inside Banner Graphic: Each page of your Web site can have an inside banner graphic. You can use any number of inside banner graphics for your site. You can use this tool to select an inside banner graphic from the Inside Banner Graphic library (See the Inside Banner Graphics Help Manual) or add a new one. Unless you specify otherwise, the default Inside Banner will be used for all new pages.

Page 5: GETTING STARTED GENERAL PROCESS: USETHE NAVIGATION BUILDER TO

b. Web Site link: This option will be used for linking to a specific Web site address. This could link to a Web address on some other external Web site OR it could link to a file within your Web site.

i. Type: Decide whether clicking on this link will bring your Web site users to a new Web site window or keep them within the current window.

ii. URL: Type in the full Web address of the desired destination. Be sure to include the http://. Also, you can save yourself some work by going to the desired address in another browser, copying the Web address out of the address bar and pasting it into this field.

c. Menu Opening link: This option allows you to use your first level links to organize or categorize your links without having to put any content on this page. When a user clicks on one of these links, the level 2 and level 3 links under this link will appear; however, the user will not actually go to a new page. (This option will be used on a very limited capacity.)

4) Choose the Navigation Link status. This will allow you to temporarily make a page inactive. When inactive, the page will still exist but it will not be part of the navigation links on the left side. This will default to “active” for all new pages.

5) Dictate the Navigation Order. Use this drop down to select where in the navigation this link will appear.

6) Select the desired Navigation level. a. Level 1 links are the main links on the left side. b. Level 2 & 3 links are the lower level links that users can get to by

first clicking on a higher level link. c. Notice in the figure above, that lower level links are indented in on

the Web site map. This makes it much easier to read the Web site map.

7) Click Add to add the new page.

Page 6: GETTING STARTED GENERAL PROCESS: USETHE NAVIGATION BUILDER TO

i. Internal Web page: This option will be used for most of your links. By selecting this option, you are dictating that this link will be for a new page within your Web site.

1. Physical File: This is the file name that will be used for this page. Each page must have a unique physical file name. If you choose a name that already exists for another page, a warning message will appear. This file name cannot have any spaces, just letters, numerals and underscores.

2. Page Title: This is an optional field. The text that you enter into this box will appear in the title area of this page. It is recommended that you include a title for each page.

ii. Web Site link: This option will be used for linking to a specific Web site address. This could link to a Web address on some other external Web site OR it could link to a file within your Web site.

1. Type: Decide whether clicking on this link will bring your Web site users to a new Web site window or keep them within the current window.

2. URL: Type in the full Web address of the desired destination. Be sure to include the http://. Also, you can save yourself some work by going to the desired address in another browser, copying the Web address out of the address bar and pasting it in this field.

iii. Menu Opening link: This option allows you to use your first level links to organize or categorize your links without having to put any content on this page. When a user clicks on one of these links, the level 2 and level 3 links under this link will appear; however, the user will not actually go to a new page. (This option will be used on a very limited basis.)

c. Choose the Navigation Link status. This will allow you to temporarily make a page inactive. When inactive, the page will still exist but it will not be part of the navigation links on the left side. This will default to active for all new pages.

d. Dictate the Navigation Order. Use this drop down to select where in the navigation this link will appear.

e. Select the desired Navigation level. i. Level 1 links are the main links on the left side. ii. Level 2 & 3 links are the lower level links that users can get

to by first clicking on a higher level link. iii. Notice in the figure above, that lower level links are indented

in on the Web site map. This makes it much easier to read the Web site map.

f. Click Add to add the new page.

Page 7: GETTING STARTED GENERAL PROCESS: USETHE NAVIGATION BUILDER TO

ADDING CONTENT TO YOUR NEW PAGE:

1) Locate your new Web page in the site map and click on the Main Body detail link. If you prefer, you can click on the link in the left navigation area to get the same results. (If it is a level 2 or 3 link, you will not see this link unless you first select the level 1 link that it belongs to.)

2) The main body detail page for this page will result. This is the area where you will add/update/delete the copy that appears on this page. The first time you go to this detail page, the page will be empty.

3) Select the tool that you would like to use for adding content to this page. Click on the drop-down to select the desired tool.

a. Text/Graphic Editor: This will be the tool that you will use the most often. This gives you an easy to use editor that will allow you to add text and graphics.

b. Calendar of Events: This will allow you to pull the desired categories of events from you main calendar tool. You will need to read the Calendar Help Manual before adding one of these tools.

Page 8: GETTING STARTED GENERAL PROCESS: USETHE NAVIGATION BUILDER TO

c. Faculty List From Faculty Database: This allows you to display any group of teachers and/or staff members in a staff listing. This can also be used as an entrance to staff members’ Web pages.

d. Interactive Forms: This will allow you to add a survey or on-line form to your site.

e. Links: This tool is ideal for creating an organized list of Web site resources.

f. Photo Gallery: This tool will allow you to add photo albums with unlimited photos to your page.

g. Profiles: With this tool, you can display your staff members with their name, email address, biography, photo and more.

h. Resources / News: This tool is perfect for uploading your newsletter, linking out to a great article on another Web site or creating your own quick news flash.

i. Slide Show: This tool will allow you to make your own timed slide show. This is a great way of showing a variety of photos on your homepage.

4) With this detail page, you are able to add as many tools as you need. For example, you can add 2 text/graphic editor items and a calendar all on the same page. When doing so, you can order these by selecting the appropriate location from the drop-down box after the tool selection drop-down.

Page 9: GETTING STARTED GENERAL PROCESS: USETHE NAVIGATION BUILDER TO

PAGE DETAIL – TEXT / GRAPHIC EDITOR

Once a page has been created, a Text/Editor tool can be added to the page. This is the tool that you will use for a large majority of your Web site pages. This tool allows you to add text, links, bulleted lists, horizontal lines, graphics and other items found on a typical Web site page. ADD A TEXT / GRAPHIC EDITOR TOOL TO A PAGE:

1) Click on the Navigation Builder Home link on the administration toolbar

to open the Navigation Builder. 2) Find the page to which you want to add the Text / Graphic Editor tool.

Click the Detail link for this page. The Page Detail page will appear.

3) Choose Text / Graphic Editor from the tools drop-down box and click

the Go button. A Text / Graphic Editor page will appear. (Note: This Text / Graphic Editor detail item can be added to a page that already contains content.)

4) Use the supplied editor to enter your copy onto this page. Note: This editor works best with Internet Explorer on a Windows machine and Firefox on a MAC.

Page 10: GETTING STARTED GENERAL PROCESS: USETHE NAVIGATION BUILDER TO

a. Source: Click on this button see the HTML view of your copy. More advanced Web site administrators can use this to work with the HTML code. Click this button again to go back to regular text view.

b. Save icon: You can click on this to save the copy entered. It is recommended that you click on the Add button at the bottom of the page instead.

c. Preview icon: By clicking on this, this page will open in a new browser window.

d. Cut / Copy / Paste icons: These icons work the same way they do in any other program. You can also use the short cut keys of Control X, Control C and Control V.

e. Paste as plain text icon: Use this icon to paste text from another program without taking on any of the formatting. That is, if copy bold text from Word or another program and click on this icon, they text will appear without the bolding.

f. Paste from Word icon: Use this icon to paste text that is coming from Microsoft Word. This will maintain the formatting given to it in Word. If you use a normal paste instead of this icon, the text copied may be different than what you saw in Word.

g. Print icon: This will print the contents entered in the editor. h. Undo / Redo icons: These tools do not work properly with the

current version of this editor. i. Find icon: Use this to find a desired string of text. j. Select All icon: Use this to select all the text in the editor. k. Remove Format icon: Use this to remove all formatting from the

highlighted text. l. B / I / U icons: Use these to bold, italicize or Underline the

highlighted text. m. Strike Through / Subscript / Superscript icons: Use these to format

the highlighted text accordingly. n. Numbered / Bulleted List icon: Use this icon to create a bulleted of

numbered list. o. Indent Right / Indent Left icons: Use these to indent text to the right

or left. p. Left / Center / Right / Block Justification icons: Use these icons to

specify the justification for text. q. Insert / Edit Image icon: It is recommended that you do NOT use

this icon. Another graphic tool is described below. r. Insert / Edit table icon: Use this to create and edit an HTML table. s. Insert Horizontal Line icon: Use this to enter a horizontal line. This

is helpful when separating text. t. Insert Special Characters icon: Use this to enter special characters. u. Text Color icon: Use this to change the color of the highlighted text. v. Background Color icon: Use this to change the color behind the

highlighted text. w. Style drop down: Use this to change the size of the text.

Page 11: GETTING STARTED GENERAL PROCESS: USETHE NAVIGATION BUILDER TO

x. Font drop down: Use this to change the font style of the text. 5) Other notes about this editor:

a. Click Shift and Enter together to enter a line break. This will bring you to the next line of the editor.

b. Click the Enter key to enter a paragraph break. This will put in a blank line.

c. To enter a link to a Web address, simply type in the full Web address.

d. To enter a link to an email address, simply type in the full email address.

6) Graphic Upload: Each Text / Graphic item can include one graphic. (If

you want more than one graphic in the body of this page, you will simply add a new Text / Editor item for each graphic needed.) a. Click the Browse button to find the desired graphic on your

computer. b. When uploading the graphic, the editor will automatically resize and

optimize the graphic for you. 7) Graphic Justification:

a. Left: Choose this option to have the picture on the left side of the body with the text warping to the right of the picture. This is not a good option to use if the picture Width is large.

b. Right: Choose this option to have the picture on the right side of the body with the text warping to the left of the picture. This is not a good option to use if the picture Width is large.

c. Above: Choose this option to have the picture completely above the text in the editor.

d. Below: Choose this option to have the picture completely below the text in the editor.

8) Image Width: a. Choose any of the image widths or you can customize the picture

to any width in pixels.

Page 12: GETTING STARTED GENERAL PROCESS: USETHE NAVIGATION BUILDER TO

b. This feature is used to downsize images. If the image you are uploading is smaller than the width you select, the picture will remain the original size. That is, it will NOT make picture larger.

9) Alt Text: You can enter text that you want to appear when a site visitor puts their mouse on the image. This is optional.

10) Link Graphic To: This allows you to make your uploaded graphic a hot link to a Web address. This is optional. Be sure to include the full destination Web address.

11) Graphic Link Type: If you choose to link your graphic to a Web site, you will need to choose whether the resulting page will open in a window or in the existing window.

12) Click the Add button at the bottom of the page to save all your text and to upload your graphic. The resulting Text / Graphic Detail will appear.

13) To add additional Text / Graphic items to this page, repeat steps 3-10. UPDATE A TEXT / GRAPHIC ITEM:

1) Click on the Navigation Builder Home link on the administration toolbar to open the Navigation Builder.

2) Find the page to which you want to edit the Text / Graphic item. Click the Detail link for this page.

3) Locate the Text / Graphic Editor Detail item. 4) Links related to this detail item include:

a. Update Text / Graphic Editor: Click on this link to update any of the text or graphics on this page.

Page 13: GETTING STARTED GENERAL PROCESS: USETHE NAVIGATION BUILDER TO

b. Preview: Click on this link to open the user side of this page. This is helpful for verifying your work. (Note: Each Editor Detail item has its own anchor. You can use this if you want to create a target link to a specific location on a page with a lot of text.)

c. Delete: Click on this link to delete this detail item.

Page 14: GETTING STARTED GENERAL PROCESS: USETHE NAVIGATION BUILDER TO

PAGE DETAIL – LINKS

Once a page has been created, a Links tool can be added to the page. This will allow you to build and maintain a formatted list of links to other Web sites. ADD A LINKS TOOL TO A PAGE:

1) Click on the Navigation Builder Home link on the administration toolbar

to open the Navigation Builder. 2) Find the page to which you want to add the Links tool. Click the Detail

link for this page. The Page Detail page will appear.

3) Choose Links from the tools drop-down box and click the Go button. A

Links detail item will appear. (Note: This Links detail item can be added to a page that already contains content.)

ADD LINKS:

1) Click the “Add Link” link at the top of the page. The Add Link page will

appear.

Page 15: GETTING STARTED GENERAL PROCESS: USETHE NAVIGATION BUILDER TO

2) Enter the desired information in the supplied fields.

a. Position After: Using the drop-down box, you can dictate the order in which your links are listed.

b. Link Name: This is a descriptive name that you give to the destination Web page. This could be the name of the company or Web site. This is a required field.

c. Web Address: Enter the destination Web address. You can type this in or you can open the desired Web site in another browser window, copy the address and paste it in this field. This is a required field.

d. Upload Photo: This allows you to upload a logo graphic that relates to this link. When uploading a graphic with this tool, the system will automatically resize and optimize the graphic. This is optional.

e. Description: Use this editor to explain how this link is useful or what the destination Web site is all about.

3) Click on the Add button at the bottom of the page. 4) To add more links, repeat steps 1-3.

UPDATING LINKS:

1) Click on the Navigation Builder Home link on the administration toolbar to open the Navigation Builder.

2) Find the page to which you want to edit the Links tool. Click the Detail link for this page.

3) Locate the Links Detail item.

Page 16: GETTING STARTED GENERAL PROCESS: USETHE NAVIGATION BUILDER TO

4) Links within the table include: a. Photo: This will display the logo or graphic that was uploaded. b. Link / Web Address: This will display the Link name and the Web

address. c. Update: Click on this link to change the link’s name, Web address,

order, description and/or logo. d. Delete: Click on this link to delete the link from the list.

5) Links related to the entire Links tool include: (below the table) a. Preview: Click on this link to open the user side of this page. This

is helpful for verifying your work. b. Delete: Click on this link to delete the entire links tool, not just an

individual link. Do not click this link unless you are trying to clean off the page.

Page 17: GETTING STARTED GENERAL PROCESS: USETHE NAVIGATION BUILDER TO

PAGE DETAIL – RESOURCES / NEWS

Once a page has been created, a Resources / News tool can be added to the page. This will allow you to post newsletters and other uploaded files, link to news articles and resources on other Web sites and post your own HTML news article. ADD A RESOURCES / NEWS TOOL TO A PAGE:

1) Click on the Navigation Builder Home link on the administration toolbar

to open the Navigation Builder. 2) Find the page to which you want to add the Resources / News tool.

Click the Detail link for this page. The Page Detail page will appear.

3) Choose Resources / News from the tools drop-down box and click the

Go button. A Resources / News detail item will appear. (Note: This Resources / News detail item can be added to a page that already contains content.)

ADD RESOURCES / NEWS ITEMS:

1) Click the “Add News Item” link at the top of the page. The Add News

Item page will appear.

Page 18: GETTING STARTED GENERAL PROCESS: USETHE NAVIGATION BUILDER TO

2) Enter the desired information in the supplied fields.

a. Link Name: This is the name of the News article or resource. This is a required field.

b. Short Description: Use this to further describe the news item. This can be helpful for users so that they now a little bit about the news item or resource without having to open the full article. This is an optional field.

c. Navigation Type: Choose one of the following three options as a way of displaying the news item.

i. Internal Web Page: Use this option if you want to use the text / graphic editor to create a new Web page for the article. This is helpful to post a temporary news item. With this option, you will need to enter a Page Title. (After completing this news item, you can click on the News Detail link to create this article.)

ii. Web site Link: Use this option to link to a Web address on some outside Web site. You can type in the desired Web address or copy an address from another Web site and paste it in the URL field. You will also need to dictate whether this link will open the Web address in a new window or the existing window.

iii. Link to a File: Use this option to link to an uploaded file. This is helpful for uploading .pdf files or other files that might be useful for posting a newsletter, article or other resource.

d. Status: Select whether this news item will be posted right away or will be inactive for the time being.

3) Click the Add button on the bottom of the page.

Page 19: GETTING STARTED GENERAL PROCESS: USETHE NAVIGATION BUILDER TO

4) To add more News Items, repeat steps 1-3. UPDATE NEWS ITEMS:

1) Click on the Navigation Builder Home link on the administration toolbar to open the Navigation Builder.

2) Find the page to which you want to edit the Resources / News tool. Click the Detail link for this page.

3) Locate the Resources / News Detail item.

4) Links within the table include: a. News Type: This will display the type of News item this is. If it is an

Internal Web Page, you can click on this link to edit the online news item.

b. Insert Before: Click on this link to add a new News Item and have it appear directly before this news item in the list.

c. Up / Down: Click on these links to reorder the News items. d. Update: Click on this link to change the News Item’s name, short

description, type and/or status. e. Delete: Click on this link to delete the news item from the list. f. Preview: Click on this link to see the behavior of clicking on this

news item. 5) Links related to the entire Links tool include: (below the table)

a. Preview: Click on this link to open the user side of this page. This is helpful for verifying your work.

b. Delete: Click on this link to delete the entire Resource / News

tool, not just an individual news item. Do not click this link unless you are trying to clean off the page.

Page 20: GETTING STARTED GENERAL PROCESS: USETHE NAVIGATION BUILDER TO

PAGE DETAIL – PHOTO GALLERY

Once a page has been created, a Photo Gallery tool can be added to the page. This tool makes it simple to add, organize and maintain all your Web site photos. ADD A PHOTO GALLERY TO A PAGE:

1) Click on the Navigation Builder Home link on the administration toolbar

to open the Navigation Builder. 2) Find the page to which you want to add the Photo Gallery. Click the

Detail link for this page. The Page Detail page will appear.

3) Choose Photo Gallery from the tools drop-down box and click the Go

button. A Photo Gallery detail item will appear. (Note: This Photo Gallery detail item can be added to a page that already contains content.)

ADD ALBUMS:

1) Click the “Add Album” link at the top of the page. The Add Album page

will appear. An album is a collection of similar photos. Albums are a way of categorizing and organizing your photos.

2) Enter the desired information in the supplied fields.

Page 21: GETTING STARTED GENERAL PROCESS: USETHE NAVIGATION BUILDER TO

a. Position After: Using the drop-down box, you can dictate the order

in which your albums are listed. b. Album Title: This is a descriptive name that you give to this album.

This is a required field. c. Full Album Description: This is a long description that describes this

album in detail. This description will appear below the photo for all photos in a gallery.

3) Click on the Add button at the bottom of the page. 4) To add more albums, repeat steps 1-3.

UPDATE PHOTO GALLERY ITEMS:

1) Click on the Navigation Builder Home link on the administration toolbar to open the Navigation Builder.

2) Find the page to which you want to edit the Photo Gallery. Click the Detail link for this page.

3) Locate the Photo Gallery’s Detail item.

Page 22: GETTING STARTED GENERAL PROCESS: USETHE NAVIGATION BUILDER TO

4) Links within the table include: a. Photo: Click on this link to add/update/delete photos for this album. b. Update: Click on this link to change the album’s name, order of

albums, album overview and/or full album description. c. Delete: Click on this link to delete the album from the list.

5) Links related to the entire Photo Gallery tool include: (below the table) a. Preview: Click on this link to open the user side of this page. This

is helpful for verifying your work. b. Delete: Click on this link to delete the entire Photo Gallery tool,

not just an individual album or photo. Do not click this link unless you are trying to clean off the page.

ADDING PHOTOS TO AN ALBUM:

1) Click on the Navigation Builder Home link on the administration toolbar

to open the Navigation Builder. 2) Find the page with the Photo Gallery that you want to administrate.

Click the Detail link for this page. The Page Detail page will appear.

3) Click the Photos link next to the album that you wish to work with. The

Photo administrative page will appear.

Page 23: GETTING STARTED GENERAL PROCESS: USETHE NAVIGATION BUILDER TO

4) Use the drop down to select the number of photos you wish to add to your photo album at this time and click the GO button.

5) Enter the desired information in the supplied fields.

a. Photo Title: This is the name given to this individual photo. b. Photo: Click on the browse button and locate the desired photo on

your local computer. When uploading a photo, the system will automatically resize and optimize the photo.

c. Description: This is the caption or description that is related to this individual photo. This is optional at the top of the page.

5) Click on the Add button at the bottom of the page. 6) To add more albums, repeat steps 4-5.

UPDATING PHOTOS:

1) Click on the Navigation Builder Home link on the administration toolbar to open the Navigation Builder.

2) Find the page to which you want to edit the Photo Gallery. Click the Detail link for this page.

3) Locate the Photo Gallery’s Detail item. 4) Click on the Photos link next to desired Photo Album. The Photo

Administration page will appear.

Page 24: GETTING STARTED GENERAL PROCESS: USETHE NAVIGATION BUILDER TO

6) Links within the table include:

a. Up: Click on this to reorder this photo. By clicking the Up link, this photo will move up in list of links.

b. Down: Click on this to reorder this photo. By clicking the Down link, this photo will move down in list of links.

c. Update: Click on this link to change the photo’s title, graphic file and/or photo description.

d. Delete: Click on this link to delete the photo from the list.

Page 25: GETTING STARTED GENERAL PROCESS: USETHE NAVIGATION BUILDER TO

PAGE DETAIL – SLIDE SHOW

Once a page has been created, a Slide Show tool can be added to the page. This tool makes it simple to add, organize and maintain a Slide Show to any page. ADD A SLIDE SHOW TO A PAGE:

1) Click on the Navigation Builder Home link on the administration toolbar

to open the Navigation Builder. 2) Find the page to which you want to add the Slide Show. Click the

Detail link for this page. The Page Detail page will appear.

3) Choose Slide Show from the tools drop-down box and click the Go

button. A Slide Shows detail item will appear. (Note: This Slide Show detail item can be added to a page that already contains content.)

4) Choose the Slide Show Order.

a. Order in which photos are listed: With this option, photos will appear in the slide show in the order they are listed in the database.

b. Random order: With this option, photos will appear in the slide show in random order.

5) Seconds between slides: With this option, you can indicate the time that each photo will stay be displayed prior to advancing to the next photo.

6) Click the Update button at the bottom of the page to add the Slide Show.

ADD A SLIDE SHOW PHOTO:

Page 26: GETTING STARTED GENERAL PROCESS: USETHE NAVIGATION BUILDER TO

1) Use the drop down to select the number of pictures you wish to add to your slide show and click the GO button.

2) Enter the desired information in the supplied fields.

a. Position After: Using the drop-down box, you can dictate the order

in which your Slide Show Photos are listed. b. Photo: Click on the browse button and locate the desired photo on

your local computer. When uploading a photo, the system will automatically resize and optimize the photo.

c. Alt Text: This is the text that will appear when your users put their mouse on this photo. This is also helpful for users with vision impairments. This is optional.

d. Description: This is a large text area that you can use to enter a description that relates to this photo. On the user side, this will appear below the photo.

3) Click on the Add button at the bottom of the page. 4) To add more albums, repeat steps 1-3.

UPDATE A SLIDE SHOW:

1) Click on the Navigation Builder Home link on the administration toolbar to open the Navigation Builder.

2) Find the page to which you want to edit the Slide Show. Click the Detail link for this page.

3) Locate the Slide Show’s Detail item.

Page 27: GETTING STARTED GENERAL PROCESS: USETHE NAVIGATION BUILDER TO

7) Links within the table include: a. Update: Click on this link to change the Slide Show’s photo,

description and/or order. b. Delete: Click on this link to delete the Slide Show Photo from the

list. 8) Links related to the entire Slide Show tool include: (below the table)

a. Slide Show Properties (at the top of the tool): Click on this list to change the Slide Show play style or the time interval that each photo will be displayed.

b. Preview: Click on this link to open the user side of this page. This is helpful for verifying your work.

c. Delete: Click on this link to delete the entire Slide Show tool, not

just an individual Slide Show Photo. Do not click this link unless you are trying to clean off the page.

9) If you want to add more pictures to an existing slide show, use the drop down to select the number of pictures you wish to add to your slide show and click the GO button.

Page 28: GETTING STARTED GENERAL PROCESS: USETHE NAVIGATION BUILDER TO

PAGE DETAIL – RIGHT SIDE BAR

Once a page has been created, you can create a right side bar. A right side bar can contain upcoming events (which are pulled from the calendar) and/or headline items. ADD A RIGHT SIDE BAR TO A PAGE:

1) Click on the Navigation Builder Home link on the administration toolbar

to open the Navigation Builder. 2) Find the page to which you want to add the Right Side Bar.

3) Click the Right link for the Page Detail for this page. The Right Side

Bar tool will appear. 4) You can add a Right Side Text / Graphic, Upcoming Events and/or a

Slide Show to the right side of this page. 5) To add a Right Side Text / Graphic:

a. Choose the Right Side Text / Graphic from the drop-down and click the Go button.

b. The Add a Right Side Item screen will appear.

Page 29: GETTING STARTED GENERAL PROCESS: USETHE NAVIGATION BUILDER TO

i. Graphic: Use this field to include a graphic in the right side bar. Click the Browse button and locate the graphic on your computer. The system will automatically resize and optimize the graphic to fit in the right side bar.

ii. Include an Arrow: Click this check box to include an arrow in front of the Text. This can be helpful to differentiate between items in your right side bar.

iii. Text: Use this editor to enter the text that you want included in the right side bar.

iv. URL: If you want the graphic from step c above to link to a Web site, you simply enter the Web address in this field. Leave this blank if you do NOT want to create such a link. Note: a graphic in step c is required for this link to be active.

v. Type: Use this to specify if the link will open a new window. c. Click the Submit Right Side Item button at the bottom of the page.

6) To add Upcoming Events: a. Choose the Upcoming Events from the drop-down and click the Go

button. b. The Add Upcoming Events screen will appear.

i. Header Text: Use this to create the desired heading for the upcoming events. This will be defaulted to Upcoming Events but you can change this to whatever you want.

ii. Show the next…days worth of events. You can use this to specify the number of days to be displayed. If you select 7, then the upcoming events will show 7 days of events starting with today’s date as the first day. Once a day has passed, these events will automatically drop off the list.

Page 30: GETTING STARTED GENERAL PROCESS: USETHE NAVIGATION BUILDER TO

iii. Calendar Categories: Check the categories of events that you want to display.

c. Click the Add button at the bottom of the page. 7) To add a slide show:

a. Choose the Slide Show Order. i. Order in which photos are listed: With this option, photos will

appear in the slide show in the order they are listed in the database.

ii. Random order: With this option, photos will appear in the slide show in random order.

b. Seconds between slides: With this option, you can indicate the time that each photo will stay be displayed prior to advancing to the next photo.

c. Click the Update button at the bottom of the page to add the Slide Show.

d. Select the number of pictures to add to your slide show and click GO.

8) To add an announcements tool: a. Choose the Announcements tool and click Go. b. Check the announcements that you would like to display on this

page. Note: these will only appear between the specified start and end date / time.

c. Click the Update button. d. Note: You can click update by this detail item at any time in the

future to add new announcements to this page. 9) You can more than one item to a right side bar. For example, a page

could contain an Upcoming Events list and several Right Side Text items.

UPDATE A RIGHT SIDE BAR:

1) Repeat steps 1-3 from above. 2) Click the Update link next associated with the desired Right Side item. 3) Make the desired edits and click the Update link at the bottom of the

page.

Page 31: GETTING STARTED GENERAL PROCESS: USETHE NAVIGATION BUILDER TO

CALENDAR

This tool is used to add/update/delete events for your organization’s calendar. With FWS Professional, you are able to have many different calendars on your Web site; however, all events will be administrated from this one master calendar. EDIT CATEGORIES:

1) Click on the Calendar Admin link on the administration toolbar to open the Calendar administration tool.

2) Click on the Edit Categories link to open the Calendar Categories

page. It is strongly recommended that you get these categories set up for your ministry before you actually add events to your calendars. For a school, possible categories could be Academics, Athletics, Fine Arts, etc. If you are not sure what categories you will need, just enter a general category to get started. a. Click Add Category to add a new category to the list.

i. Type in the desired name for your new category and click Add.

b. Click the update link to change the name of a category. c. Click the delete link to eliminate a category. If you have events tied

to this category, the delete option will not be available. EDIT LOCATIONS:

1) Click on the Edit Locations link at the top of the Calendar

administration page to edit locations. For each event in your calendar, you have the ability to optionally attach a location for the event. By entering a location one time, all attached events will have a link for driving directions to this location. a. Click Add Location to add a new location to the list.

i. Type in the name of the location and enter its address, city, state and zip code. Click the add button.

Page 32: GETTING STARTED GENERAL PROCESS: USETHE NAVIGATION BUILDER TO

b. Click the update link to update any part of a location. c. Click the delete link to eliminate a location. By deleting this

location, all events that are attached to this location will no longer have a location attached to it.

EDIT A WEEKLY EMAIL INTRO PARAGRAPH:

1) Click on the Weekly Email Settings link at the top of the Calendar

administration page. Every Thursday night at midnight, the system will run a scheduled task that will email all families in your database with a valid email address. This email will contain a calendar with the next 10 days worth of events from the main calendar. The “Weekly Email Intro Paragraph” is some text that will be at the top of each of these emails. You can use this utility to change the intro paragraph as needed.

2) Use the supplied editor to update the Intro Paragraph. 3) Click the Update button at the bottom of the screen.

ADD EVENTS TO A CALENDAR: 1) Click on the Calendar Admin link on the administration toolbar to open

the Calendar administration tool.

2) Click on the date to which you want to add an event (see example above).

3) The New Event page will appear. Enter the desired information into the fields as labeled.

Page 33: GETTING STARTED GENERAL PROCESS: USETHE NAVIGATION BUILDER TO

a. Event Title: This is the text that will appear on the calendar describing the event. While this is not a required field, most of the time you will want to fill in this field with a descriptive value. Try to keep the title concise.

b. Category: This is the calendar category that this event will belong to. (See Edit Categories above) This will be your only means of organizing all your events; therefore, we strongly recommend that you have these categories set up prior to adding events to your calendar.

c. Date: This is the first day of this event. You will not be able to edit this when you initially add an event; however, this can be done when updating an event.

d. Date Description: You can use this if you want to give a written description to the date or dates that this event is held. This will be used very seldom.

e. Begin Time: Enter the Hours, Minutes, and AM/PM for when this event begins. This is optional.

f. End Time: Enter the Hours, Minutes, and AM/PM for when this event ends. This is optional.

g. Description: Use this field to provide further clarification for an event. For example: you can enter the main contact for the event with her email address, you can enter an article that promotes the event or any other information that might be helpful for your users. To view this description, Web site users will need to click on the event on the calendar. Note: If the Event Title field is left blank, the Description will appear in the body of the calendar instead. This is useful for entering a Hot Lunch Menu.

Page 34: GETTING STARTED GENERAL PROCESS: USETHE NAVIGATION BUILDER TO

4) Location: Choose the appropriate location for this event from the drop-down box. If the location does not appear in the drop-down, click on the New Location button to add the new location to the database. By selecting a location, users will be able to click on a link to open driving directions to this location.

5) Extra Location Text: Use this text area to enter written directions to an event.

6) Recurrence: Use this option if you want to have this event occur multiple times on your calendar. If you select the Daily, Weekly or Monthly recurrence, you will need to enter an Ending Date.

7) Allow to RSVP: Check this box if you want your Web site users to be able to email an RSVP for this event. If you check this box, you will need to enter an email address for where these RSVPs will be sent.

8) When all the desired fields have been entered, click the Submit New Event button at the bottom of the page.

UPDATE AN EVENT: 1) Click on the Calendar link on the administration toolbar to open the

Calendar administration tool. 2) Click on the event on the calendar that you want to update. This will

bring up the Update Event screen for this event. 3) Make the appropriate modifications to the fields for this event. 4) If this is a recurring event, you will need to check the boxes next to the

events that this change needs to apply to. 5) Click the Update Event button at the bottom of the page.

DELETE AN EVENT:

Page 35: GETTING STARTED GENERAL PROCESS: USETHE NAVIGATION BUILDER TO

1) Click on the Calendar link on the administration toolbar to open the

Calendar administration tool. 2) Click on the event on the calendar that you want to delete. This will

bring up the Update Event screen for this event. 3) If this is a recurring event, you will need to check the boxes next to the

events that need to be deleted. 4) Click the Delete Event button at the bottom of the page.

VIEW EVENTS ON YOUR WEB SITE: 1) The Calendar link on the administration toolbar is used for adding, editing

and deleting events only. 2) To view events, you will need to add a Calendar of Events to the page

detail of a Web site page (See the Page Detail – Calendar of Events Help Manual).

Page 36: GETTING STARTED GENERAL PROCESS: USETHE NAVIGATION BUILDER TO

PAGE DETAIL – CALENDAR OF EVENTS

Once a page has been created, a Calendar of Events can be added to the page. This calendar will display the desired events from the main master calendar. ADD A CALENDAR OF EVENTS TO A PAGE:

1) Click on the Navigation Builder Home link on the administration toolbar

to open the Navigation Builder. 2) Find the page to which you want to add a calendar. Click the Detail

link for this page. The Page Detail page will appear.

3) Choose Calendar of Events from the tools drop-down box and click the

Go button. The Edit Calendar page will appear.

4) Choose the options to obtain the desired calendar.

a. Default View: Choose either Calendar View of List View as the view that your Web site users will see.

i. Calendar View: This view shows a monthly view of the calendar.

ii. List View: This view will display the events with one event per row.

b. Default Date Range: This will allow you to dictate how many events appear on the screen at one time. Since the Calendar view will always show exactly one month, this only applies to List View.

Page 37: GETTING STARTED GENERAL PROCESS: USETHE NAVIGATION BUILDER TO

i. Current Month: The calendar will show only events for the current month.

ii. All Events: The calendar will show all past, present and future events in the calendar. This is useful for an athletics schedule.

iii. Date Range: The calendar will show all the events between the specified dates.

c. Calendar Categories: Check all the categories of events that you want to pull from the master calendar. You can select any number of categories.

5) Once all the fields have been filled out properly, click on the Update button at the bottom of the page.

6) To verify that the calendar was set up properly, click on the Preview link at the bottom of the page.

7) Remember, you can add additional Detail items to this page. (See the Getting Started Help Manual)

EDIT A CALENDAR OF EVENTS:

1) Click on the Navigation Builder Home link on the administration toolbar

to open the Navigation Builder. 2) Find the page containing the calendar of events that you want to

update. Click the Detail link for this page to see the Calendar of Events Detail (this is assuming that you already added a Calendar of Events to this page.)

3) Edit This Detail’s Properties: Click on this link to change the Default View, Default Date Range and/or Calendar Categories.

4) Calendars: Click on this link to go to the master calendar that is found in the administrative toolbar. You will need to Add/Update/Delete events from the master calendar. (See the Calendar Help Manual)

5) Edit Locations: Click on this link to add/update/delete locations. 6) Edit Categories: Click on this link to add/update/delete categories.

Page 38: GETTING STARTED GENERAL PROCESS: USETHE NAVIGATION BUILDER TO

7) Preview: Click on this link to see open a new browser to the user side of this page.

8) Delete: Click on this link to erase this calendar off the current page.