Toolbox Pro Instructions

Toolbox Pro

Toolbox Pro 1

2

3

4

5

Getting Started 1.1

Logging into Toolbox pro

5

1.2

Top Menu

7

Website: An Introduction 2.1

Choosing a Theme and Creating a Home Page

10

2.2

Using the Editor: Adding Textual Content to the Home Page

15

2.3

Web Control Panel: Activating and Previewing Your Site

19

Website: Adding Additional Types of Content 3.1

Adding Hyperlinks

22

3.2

Adding Links to Images

27

3.3

Resources: An Introduction

33

3.4

Resources: Creating and Managing Resources

34

3.5

Resources: Inclusion on the Website

37

Website: Adding Additional Pages and Controlling Navigation 4.1

Adding Additional Pages

42

4.2

Editing the Navigation Bar

45

4.3

Using Page Templates

49

4.4

Adding Additional Links/Features

59

4.5

Managing Website Email

63

Website: Changing Themes, Activating, Allowing "Public" Access 5.1

Changing and Customizing Themes

69

5.2

Activating and Deactivating a Website

78

5.3

How do my students find my website?

80

6

7

8

9

10

11

12

Website: Adding Subpages and Modifying Navigation 6.1

Adding an Additional Page as a Subpage

85

6.2

Editing the Navigation Bar to Create a Subpage

88

Website: Creating and Maintain a Website Guestbook 7.1

Adding the Guest Book Link

93

7.2

Commenting in the Guest Book

96

7.3

Approving Comment and Editing the Guestbook

99

Website; Adding a Website Calendar 8.1

Creating a Calendar with Events

106

8.2

Adding the Calendar Link

111

8.3

Previewing the Calendar

114

Website: Working with Images 9.1

Image Formats and Sizes

117

9.2

Resizing Images in Toolbox PRO

124

Website: Creating and Linking an Image Gallery 10.1 Adding Images for the Gallery

131

10.2 Adding the Image Gallery to Your Website

136

Website: A Talking Character as a Resource 11.1 Creating the Talking Character Resource

145

11.2 Placing the Talking Character on a Page

150

Website: Using Recorded Narration 12.1 Creating the Narration Resource

154

12.2 Placing the Narration on a Page

159

Getting Started

Toolbox Pro - 4

Logging into Toolbox pro All of the functions of Toolbox PRO are accessed through your online account. Whether you are creating a website, blogging or communicating with your students or other teachers, you must log in first.

First Screen

To login to Toolbox Pro, enter www.toolboxpro.com in the address bar of your browser. When the page loads, click on Teachers log in near the upper right corner of the screen. A popup box should now be displayed.

Toolbox Pro - 5

Teacher Login Box

Now enter your login (1) which is, by default, your district e-mail address. After you enter the login, enter your password (2).

Your Toolbox PRO account

Next, click on Go To Your Toolbox PRO Account (1).

Toolbox Pro - 6

Top Menu Once you are logged into your Toolbox PRO account the "main" screen comes up. Most important functions can be accessed from the Top Menu and you will return to it very frequently to begin your next task. THe Top Menu occurs on many different pages. The menu choices re always the same and they always perform the same function The Initial Screen and the Top Menu

You should now be on the General Information (1) or Home screen of Toolbox PRO . Your name should be in the upper left corner (2).

The Help Menu will be in the upper right corner (3).

Home will always bring you to this screen.

My Training will take you to the first screen that appeared after logging in.

Password will allow you to enter a new password. No one can find out your password. GST BOCES can reset it but you will have to wait until they do so to work in Toolbox PRO. DON'T FOGET YOUR PASSWORD! Help brings up an extensive series of videos to answer Toolbox PRO topics from the simplest to the more difficult.

Log off is the correct way to end a session Some Teacher Tools (4) will be displayed in the left column. Try these tools sometime to see how useful they are to you.

Below the tools is your Current Storage (5) out of the 200MB maximum. As you add more and more information to your account, your usage may begin to push this limit.

Toolbox Pro - 7

For now, the most important feature is the Top Menu (6).

Each choice on the Top Menu leads to a series of powerful features. Each of these features has a list of choices to allow you to manage information related to your classes and to communicate with students, parents and other teachers. The first feature we are going to explore is the one that helps teachers to create a website. The website can be accessed by anyone who has access to a computer and the Internet but will be of most use to your students and their parents.

Toolbox Pro - 8

Website: An Introduction

Toolbox Pro - 9

Choosing a Theme and Creating a Home Page You do not have to have a website to use many of Toolbox PRO features. You can have a blog and podcasts and upload them to the special directories that list all of the blogs and podcasts created with Toolbox PRO. What a website does is tie all of the features of Toolbox PRO that you are suing together in one place. Your own students can access special features available only to those who can log in. The general public can use much of the website even if they do not have a Toolbox PRO account.

Website Manager Screen

Click on Website (1) on the Top Menu. The Website Manager Screen (2) should appear. [The screen shot above shows the left half which is more than enough for now!] The Current Title (3) of the website is currently blank. Click on Edit >>. (4)

Toolbox Pro - 10

Naming the Website

Enter a Name (1) that will appear on the home page. Click on Click here to save this name (2) to save the name and return to the Website Manager screen.

Choosing or Creating a Style

Notice that your title now appears next to Current Title (1). Choose a Website Style by clicking on Preview Pre-made Styles >> (2) Notice that you can Create a Custom Styles >> but we will leave this for later.

Toolbox Pro - 11

Choosing a Pre-made Style

The Website Style Chooser Screen (1) should now appear. Choose a Toolbox Pro Theme by clicking on one of the themes below Choose a Theme Group (2). Scroll through the thumbnails of the themes in that group until you find one you like or choose another group. Themes can be changed at any time. Click on Preview this Style (3).

Toolbox Pro - 12

Completing the Choice of Themes

You should now see an example of how the Home of your website will appear. The Name (1) should be in the upper left corner. The current date (2) will be under the Toolbox PRO logo.

Notice that the theme controls the location of the menu (3) but that you will control the choices and order of those choices. The content has been generated so that you can see how the page appears. Take some time to look at the different themes. Once you find a theme that you like, be sure to click on Set My Website to this Style >> (4) to use the style for your website.

Confirming the Choice of Styles

A popup screen announces that the website style has been set. Click on Click Here to close this Window (1) to return to the Website Style Chooser screen. Click on Website on the Top Menu to Toolbox Pro - 13

return to the Website Manager screen.

Toolbox Pro - 14

Using the Editor: Adding Textual Content to the Home Page After you have chosen a style or theme for your website and given it a title a Home page will be created. Initially that home page will be a blank shell. It is now time to use the editor to add content: text, pictures, videos, games. Building a website start with a strong foundation which is the Home page. Building a website can be fun and rewarding but throwing one together without planning usually is not a good idea. Have a blueprint in mind and use this plan to build your website.

Switching to the Editor

Your website now has a theme and a blank home page. Let's add some content. Under Edit Website Content (1) click on Edit My Home Page >>(2)

Toolbox Pro - 15

The Editor Screen and Menu Icons

You will see a text editing box appear on the screen. This box will be used along with the icons across the top to enter content onto your website pages.

The first icon you may want to use is the last icon on the screen Maximize Editor (1). This will toggle between the view you see now and a larger view.

Move your mouse over some of the icons to see the tooltip that explains the icon. Some icons and explanations may seem obvious other may be more cryptic.

Source (2) - shows the HTML code that produces the page you are looking at New page (3) - erases the current content and starts a new page Preview (4) - quickly shows what content will look like Template (5) - three templates are provided but you do not have to use one. Note that choosing a template will erase all content and apply that template.

Toolbox Pro - 16

Adding Text by Typing or Pasting Type in some content or paste in some text from another document. Notice that there are THREE paste icons. This is because pasting from some applications especially MS Word not only imports the text but formatting features only found in that application.

Paste (6) - Pastes text with all formatting options from the source intact Paste as plain text (7) - Pastes only the text and removes all formatting from the source Paste from Word (8) - Pastes text from Word without formatting Controlling the Style of the Text Style the content however you would like using any of the following: (9) Style Format Font Size Bold You may also use the icons for: (10) Underline Italic Strike Through Subscripts Superscripts Text can be lined up using: (11) Justification The color of the text on the page and color "behind" the test can be controlled using: (12) Text Color Background Color Other Important Icons You may also enter Numbered Lists or Bulleted Lists. (13) You may Decrease Indent or Increase Indent (14) of these lists or any text.

You may insert: (15) Horizontal Line Smiley Special Charcaters You should always Checking Spelling (16) and may want to Print (17) your document.

The Undo and Redo (18) icons can help correct mistakes.

Find and Search and Replace (19) are handy Esperanto as page content grows.

Toolbox Pro - 17

Select all (20) highlights all information in the editor box.

Remove Format (21) strips all formatting from the page. Be careful with this one!

Other icons help insert images, links and tables. We will save the other options for later.

Be sure to click on Save Website Homepage (22) when you are done or none of your work will be save! You will now be back at the Website Manager screen.

Toolbox Pro - 18

Web Control Panel: Activating and Previewing Your Site After working on your website for some time, you may wonder what it will look like when a user goes to it. The Preview Your Site option will show you just how your site will appear on the web.

Your site will only be visible to you until you decide to Activate My Website. You can Activate My Website and Deactivate My Website as often as you like without losing or changing the content.

When a user goes to an inactive site a message will indicate the site has been taken down so that it can be worked on. You can work on the site when it is active or inactive.

Web Control Panel Sections

Look at the information under Web Control Panel. (1) You may access these features at any time.

Activate/Inactivate My Website (2) - controls whether or not others can get to your site on the Internet Toolbox Pro - 19

Preview Your Site (3) - shows exactly what others will see when visiting your website on the Internet.

Reset Counter (4) - Toolbox Pro keeps track of how many times your site has been visited.

This button resets that count.

Use Preview Your Site (3) to take a look at what your site looks like at this point.

As you add more features, you will see your Current Storage (5) increase.

Toolbox Pro - 20

Website: Adding Additional Types of Content

Toolbox Pro - 21

Adding Hyperlinks The language behind most website is HTML or Hypertext Markup Language. the Toolbox PRO editor translates what you enter into HTML commands. Markup refers to the fact that once test has been entered "tags" are applied to change the appearance and, in some cases, the function of the text. Hypertext means that text can be "tagged" so that an action is performed when the someone viewing the page clicks on the text.

Inserting the First Link

Click on Website on the Top Menu and then click on Edit My Home Page.

You should now be on the Edit My Website Homepage (1) screen.

Toolbox Pro - 22

Go to the bottom of the content you added previously. Press enter twice to create some room.

Click on the Insert/Edit Link (globe w/ chain) (2) icon. A popup box should appear.

Understanding Link Types and Protocols

In the pop-up box the Link Info tab (1) should be selected.

The Link Type (2) should be URL which refers to the Universal Resource Locator or address of the website. Do not change the Link Type at this point.

The other two Link Types are Link to anchor in this text and E-mail.

Link to anchor in this text causes a jump to another place on the same page.

E-mail creates an E-mail link on the website.

The Protocol (3) should be http:// which is standard for most websites. Do not change the Protocol at this point.

The other Protocols are: https - use for secure websites ftp - used for file transfer sites news - used for news sites other - used for miscellaneous other sites In the empty URL box (4) type www.catskillhiker.net.

Toolbox Pro - 23

Understanding Targets

Click on the Target tab. (1). Target defines how and where the new information will be displayed after a user clicks on the link.

The default value for Target (2) is New Window and the default Target Frame Name (3) is _blank.

Targets work as follows: New Window - information displayed in a new browser window or tab Same Window - new information replaces current information in same window Parent Window - new information displayed in the window that "called" the current window Topmost Window - new information displayed in the first window on screen that was opened popup window - new information displayed in a popup window frame - new information displayed on a frame on the same page as the link not set - new information usually displayed in same window Click OK. (4) You should be back at the Edit My Home Page screen.

Notice that the text for the link is the URL of the website.

Toolbox Pro - 24

Preparing Pre-existing Text to Become a Link

Click on Website on the Top Menu and then click on Edit My Home Page.

You should now be on the Edit My Website Homepage (1) screen.

Go to the bottom of the content you added previously. Press enter twice to create some room.

Type Catskill Hiker (2) and then select (highlight) that text.

Click on the Insert/Edit Link (globe w/ chain) (3) icon. A popup box should appear.

Toolbox Pro - 25

Creating a Link with Pre-existing Text

In the pop-up box leave the Link Type (1) and Protocol (2) as they are.

In the empty URL box (3) type www.catskillhiker.net.

Leave the Target (4) at the default value.

Click OK. (5) You should be back at the Edit My Home Page screen.

Notice that the text for the link is the text you typed.

Save the page and preview it. Be sure to try out the links.

Toolbox Pro - 26

Adding Links to Images One picture may not be worth a thousand words but images draw attention to a page. In some cases, the images are the whole point of creating the webpage and, perhaps, the whole website.

Your pages can link to images on other pages but this is usually considered poor etiquette. A better way to include images is to upload them to Toolbox PRO as Resources and then use them whenever and wherever you wish.

Linking to an Image on Another Website

Click on Website on the Top Menu and then click on Edit My Home Page.

You should now be on the Edit My Website Homepage (1) screen.

Go to the bottom of the content you added. Press enter twice to create some room.

Click on the Insert/Edit Image (mountain w/ sun) icon (2) icon. A popup box should appear.

Toolbox Pro - 27

Understanding the Image Properties: Basic Information

The pop-up box is used to set all the Image Properties (1).

First enter the Image Info (2).

In the empty URL box (3) type http://www.catskillhiker.net/pond.jpg. Click OK. (4) You should see a picture on your home page.

Save the page and preview it. The picture should appear on the page below the links.

Toolbox Pro - 28

Understanding the Image Properties: Setting Alt Text and Image Size

Right click on the image and choose Image Properties from the popup menu.

It is time to investigate the additional Tabs and Fields for the Image Properties. (1) The Alternative Text (2) can be used to supply text that will appear instead of the picture should the image become unavailable.

Enter Launt Pond at Bear Spring State Park into the Alternative Text (2) field.

Width (3) and Height (4) specify the width and height of the image, If you do not specify these numbers, the actual size of the is used.

Click on the circular arrow (5) next to Width and Height. the boxes should fill with the actual width and height of the image.

The lock (6) next the Width and Height locks the sizes. This means that changing one dimension will change the other to keep the same proportions.

Change the Width (3) to 150 to see what happens. The Height (4) should change so that the aspect ratio is the same..

Toolbox Pro - 29

Understanding the Image Properties: Setting Borders, Spacing and Alignment

The last four properties on the Image Info (1) tab control more aspects of the appearance of the image.

The Border (2) field will place a border around the picture.

Enter 5 in the Border (2) field. You should see a border appear around the picture.

HSpace (3) and VSpace (4) add blank space to the left and right and above and below the image respectively.

Enter 10 into both the HSpace (3) and VSpace (4) fields. Notice that there is now space around the picture.

Align (5) controls how the picture and text are placed in relationship to each other.

Use the dropdown arrow (6) to examine the choices. It is easier to try each choice than to read a description of them!

Default - image is on the left with text beginning at the bottom right corner Left - places the picture on the left and allows text to be on the right, next to the image Right - places the picture on the right and allows text to be on the left, next to the image Click OK. (7)

Toolbox Pro - 30

You should see the picture on your home page with the changes you made in the image properties.

Save the page and preview it.

Understanding the Image Properties: Using the Image As a Link

Right click on the image and choose Image Properties from the popup menu.

It is time to investigate the additional Tabs and Fields for the Image Properties. (1) The Link (2) tab can be used to allow the picture to become a link to more information like another website.

Click on the Link (2) tab.

Enter http://www.catskillhiker.net into the blank URL (3) field.

Use the dropdown arrow (4) under Target (5) to choose the location where the new information will be displayed. Try choosing New Window (_blank).

Click OK. (6) You should see that the picture on your home page now has a blue border. When you move your mouse pointer over the image, it changes to a finger. Both of these indicate that the picture is now a link.

Save the page and preview it. Be sure to click on the image to see what happens.

Toolbox Pro - 31

An Alternate Method to Change Image Size

Click on Website on the Top Menu and then click on Edit My Home Page.

You should now be on the Edit My Website Homepage (1) screen.

Left click on the picture (2) to select it. Small white squares (3) should appear in the corners of the picture and on the top and bottom edges.

Left click on one of the corner squares (3) and hold down the mouse button to drag the square.

This will make the picture bigger or smaller and will maintain the original proportions.

Left click on one of the squares on the edges (4) and hold down the mouse button to drag the square. This will make the picture bigger or smaller but will NOT maintain the original proportions.

If you want to keep the changes, click on Save Website Homepage (5). Preview your page.

Toolbox Pro - 32

Resources: An Introduction The procedure we just practiced allows you to reference pictures already published on a website.

To include your own pictures requires a slightly different procedure. Any pictures, documents, videos, tests, activities of your own that you want to use on your website are considered Resources and must be added as resources before they can be used. These may seem like extra and unnecessary steps but they keep your information organized as the website continues to grow.

The Resources Tab

Click on Resources (1) on the Top Menu. A news screen should appear showing your folders and the Resources they contain.

Adding the First Resources Folder

Now you will be able to see Your Complete Resource List (1).

The Folder name and Description are shown.

There are also columns for each type of Resource that you can create. Notice that Toolbox PRO has a rich variety or different Resources that you can create and use with your students.

There should be no folders since you have not yet created any. When actually planning out a website, some thought should be given to organizing your material. For now that is not necessary.

Click on Add Folder (2). A new screen should appear which will allow you to Create a New Folder.

Toolbox Pro - 33

Resources: Creating and Managing Resources Toolbox PRO allows you to create as many resources folders as you want. Each folder can hold a variety of different types of Resources from images and audio clips to test and games. How you name and set up these folders is up to you but, as always, thought and planning are important.

Resource folders are important to keep your Resources organized as your use of Toolbox PRO grows.

Entering the Information to Create a New Folder

Type in First Folder for the folder name (1). Type in My First Resource Folder for the description (2). Click on Click here to create the folder (3) to create the folder.

This should return you to the previous screen which shows you Your Complete Resource List.

Understanding Your Complete Resource List

You should now see Actions (1) with icons to Edit (2) or Delete (3) the folder. The folder must be emptied of resources to delete it.

Each folder has a Folder name, Description and the different types of resources it contains.

Notice all the resources show 0. This makes sense as you have not yet added resources!

Click on the Edit (2) icon or the folder name.

Toolbox Pro - 34

Adding the First Resource to a Folder

You should now see the Resources in folder (1) screen. Each type of Resources is listed but no resources are listed under each heading.

Click on the Add (2) icon next to Images (3) and a new screen will appear.

Entering Information to Create a New Image Resource

Thes is the Create A New Resource (1) screen.

Since we want to simply add ONE picture, you can ignore upload multiple images (2) for now.

Type My First Picture for the Resource Name (3) and A new resource for my website for the Description (4).

Toolbox Pro - 35

For now you may ignore the middle section (5) which only pertains to shared resources.

Next click on Browse (6) to locate the image to upload. Use the File Upload box to find to a picture somewhere on your computer Once you have found the picture you want click on Click here to add this resource (7).

Understanding a Resource Listing

You should be back at the Resource folders screen for First Folder.

Under Images (1) you should see the resource name (2), a description (3), whether or not it is Shared (4) and an Edit (5) and Delete (6) icon.

Click on Resources on the Top Menu. The Your Complete Resource List should show one folder of resources with one image in that folder.

Toolbox Pro - 36

Resources: Inclusion on the Website Once a Resource has been uploaded and stored in a Resource folder it can be included on your website. THe same resource may be used one different pages and in many other ways. Starting with images may be the easiest way to examine how this works.

Preparing to Add an Image Resource to a Webpage

Click on Website on the top menu. Click on Edit My Home Page.

You should now be on the Edit My Website Homepage (1) screen.

Go to the bottom of the content you added. Press enter twice to create some room.

Click on the Insert/Edit Image (mountain w/ sun) icon (2) icon. A popup box should appear.

Toolbox Pro - 37

Using Image Properties to Browse for the Image

In the pop-up box click on the Upload/Create/Browse (1) button. Another popup box should now appear.

Toolbox Pro - 38

Selecting an Image from an Existing Resource Folder

On the Folders (1) drop down list choose First Folder (2). You should see the name My First Picture (3).

Click on the name of the picture. The picture should appear in the preview box (4).

The lower section (5) is an alternative way to add images as Resources once you have created Resource folders.

Click on Use selected image (6).

Toolbox Pro - 39

Setting Image Properties

You should be back at the Image Properties (1) box.

Adjust the size of the image so that the Width (2) is no more than 400 pixels. The Height (3) should "automatically" change.

Adjust any other properties you learned about. (4) Click OK. (5).

You should see a picture on your home page.

Save the page and preview it.

Toolbox Pro - 40

Website: Adding Additional Pages and Controlling Navigation

Toolbox Pro - 41

Adding Additional Pages The Menu on your home page has only one item so far , Home. Clicking on this item has no effect since you are always on the Home page. Toolbox PRO allows you to add additional pages to your website to contain any information you want. These pages main even have sub pages. In addition, you may add links to external websites and links to other special features within Toolbox Pro. Toolbox PRO also allows you to have full control of whether or not these links appear on the main menu and in what order they appear.

Choosing to Add Additional Website Pages

Click Website on the Top Menu.

Click on Add and Edit Additional Website Pages >> (1).

The Add Pages to My Website screen should appear.

Toolbox Pro - 42

Adding an Additional Page

On the The Add Pages to My Website screen you should see the message You don't have any additional pages linked to your website. (The screenshot above shows several new pages have been added.)

Click on Add a Page to Your Website >> (2). The editor screen should appear.

Using the Editor to Create an Additional Page

Notice that the editor on the Add a New Page screen (1) is identical to the dioxide on the Edit MY Home Page screen.

Toolbox Pro - 43

Type the words Second Page for the Page Title (2).

In the editor window (3) type This is my second page for the content.

Click Add this page (4). You should be back at the Add Pages to My website screen.

Understanding the Additional Website Pages Screen and Options

On the Add Pages to My website (1) screen notice the page you just made is Hidden (2).

Preview your website to see that it is indeed invisible! The link to this pages does not show up on the Menu.

Go back to the Add Pages to My website screen and click on Show Page (3). Preview your website to see that it is indeed now visible!

Go back to the Add Pages to My website screen.

Repeat this entire procedure to create another page similar to the last one.

Use First Page instead of Second Page as the Page Title for this page. Change the content appropriately.

Adding Another Additional Page

On the Add Pages to My website (1) screen notice you now have two new pages (2).

Now when you preview the site you will have THREE pages Home, Second and First.

The problem is that this order doesn't make any sense. The pages Second Page and First Page are in the wrong order.

Toolbox Pro - 44

Editing the Navigation Bar Toolbox PRO automatically adds links to additional pages, external websites and Toolbox PRO special features to the navigation bar or menu. The menu items are placed in the menu in the order that they were created. Toolbox PRO allows you to Show or Hide these menu items. It also provides a facility for putting the menu items in any order you want.

Choosing to Edit the Navigation Bar (Menu)

Click on Website on the Top Menu. in the Edit Website Navigation section (1), click on Edit the Navigation Bar >> (2).

The Edit Website Navigation screen should appear.

Toolbox Pro - 45

Reordering Menu Items

On the Edit Website Navigation (1) screen you should see a Features Palette (2) section and a Navigation Menu Items section (3).

In the Navigation Menu Items section (3) you should see Second Page (4) and First Page (5) with some arrows in the Order (6) column to the left.

Click the down arrow (7) to the left of Second Page (5) to move Second Page below First Page where it belongs!

You should see the pages switch position so that First Page is now first.

Note that you could also have clicked on the up arrow (8) next to First Page to achieve the same result.

The last arrow in the group (9) can be used to move a page all the way to the top of the menu with one click.

This method can be used to rearrange the menu items at any time without losing or interchanging page content.

Toolbox Pro - 46

Understanding the Edit Website Navigation Screen

Before leaving this screen, let's examine several of the other items and features.

In the Navigation Menu Items (1) section, notice that each Menu Item has a column for: Hits (2) - records the number of times this page has been visited Type (3) - shows whether the Menu Item is a: Linked Page - a page you have added to the website other than the Home page External Site - a link to another website Feature Link - a link to a special Toolbox PRO feature like the Guestbook Sub Menu (4) - contains the words Add Sub or a green arrow to show the page IS a subpage Actions (5) - three options listed for each Menu Item are: Edit Page Text (6) - opens the page in the editor so that you can make changes Hide/Show Link (7) - removes the link from the menu but leaves it in the Navigation Menu Items (1) section Remove Page (8) - removes the page from the Navigation Menu Items (1) section but DOES

Toolbox Pro - 47

NOT delete it Click on Add a Link to an External Website >> (9). The Add a Link to an External Site screen should appear.

Toolbox Pro - 48

Using Page Templates Typing content onto a page and then rearranging it to accommodate images is one way to mold your page the way you want it. Another way to format your pages so that they are consistent is to use page tempaltes. Templates are set up, for example, to have a picture in the right corner with a title in the larger print in the upper left corner and text underneath the title and to the left of the picture. Toolbox PRO has a few of these templates you might want to try out. A template should be applied BEFORE any content is added since applying a template erases any previous content!

The Template Icon

Since Second Page doesn't have much on it let's apply a template to it to see what happens.

Click Website on the Top Menu. Click on Add and Edit Additional Website Pages >> . Click on Toolbox Pro - 49

Edit to the right of Second Page.

You should now be on the Edit Website Page (1) screen.

Click on the Templates (fourth from the left on the top row) (2) icon. A popup box should appear.

Choosing a Template: Image and Title

You should now be seeing the Content Templates (1) pop up.

The first choice is Image and Title (2).

This template puts a picture in the upper left corner, a larger title in the upper right and warps text below the title and around the picture.

Click on the Image and Title template to apply it to your page.

Toolbox Pro - 50

Image and Title Template: Before

Here you can see the Edit Website Page (1) with the blank Image and Title template displayed.

There are three distinct areas.

The first area (2) is for an image. Try placing an image here from your one of your Resources folders.

The second area (3) is for a title. Type some text here by erasing the template text and typing or highlighting the text and typing. Type something now.

The third area (4) is the one for the main body text. Either type something here or copy and paste from somewhere else.

Toolbox Pro - 51

Image and Title Template: After

Here you see what the completed Image and Title template might look like.

Do not save the page unless you really want to!

Toolbox Pro - 52

Choosing a Template: Strange Template

Click on the Templates (fourth from the left on the top row) icon again. A popup box should appear.

You should now be seeing the Content Templates (1) pop up.

The second choice is Strange Template (2).

This template creates a two colunm layout in which each column has a title. Below the two columns there is an area for additional text.

Click on the Strange Template to apply it to your page.

Toolbox Pro - 53

Strange Template: Before

Here you can see the Edit Website Page (1) with the blank Strange Template displayed.

There are three distinct areas.

The first area (1) in each column is for a title. Type some text here by erasing the template text and typing or highlighting the text and typing. Type something now.

The second area (3) is for text in each column. Type some text here by erasing the template text and typing or highlighting the text and typing. Type something now.

The third area (4) is the one for additional text. Either type something here or copy and paste from somewhere else.

Toolbox Pro - 54

Strange Template: After

Here you see what the completed Strange Template might look like.

Do not save the page unless you really want to!

Toolbox Pro - 55

Choosing a Template: Text and Table

Click on the Templates (fourth from the left on the top row) icon again. A popup box should appear.

You should now be seeing the Content Templates (1) pop up.

The second choice is Text and Table (2).

This template has a title area. Below that is an area for text and a table. The table has an area for the table title and then has three columns and four rows.

The area and table can be resized with the mouse.

Try right-clicking on the table to add or delete rows or columns.

Click on the Text and Table template to apply it to your page.

Toolbox Pro - 56

Text and Table: Before

Here you can see the Edit Website Page (1) with the blank Strange Template displayed.

There are three distinct areas.

The first area (1) is for a title. Type some text here by erasing the template text and typing or highlighting the text and typing. Type something now.

The second area (3) is for the main body text. Type some text here by erasing the template text and typing or highlighting the text and typing. Type something now.

The third area (4) is the table. You may type something into each cell on the table. Remember you can right-click to add or delete rows or columns. Either type something here or copy and paste from somewhere else.

Toolbox Pro - 57

Text and Table: After

Here you see what the completed Strange Template might look like.

Do not save the page unless you really want to!

Toolbox Pro - 58

Adding Additional Links/Features Toolbox PRO provides a way to link to external websites and to put those links in the Navigation Bar. Toolbox PRO also includes many special features like a guestbook and Wikis. Some of these must be created elsewhere first and then a link is created to that feature. Other Toolbox PRO features can be created on the Edit Navigation Bar screen.

Adding an External Link to the Navigation Bar

On the Add a Link to an External Site (1) screen enter http://www.catskillhiker.net into the URL box (2) and Catskill Hiker in the text display box (3).

Click on Add this External Link to the Navigation (4). You should be back at the on the Edit Website Navigation screen.

Toolbox Pro - 59

Making the External Link "Active"

On the Edit Website Navigation (1) screen the link (2) should be at the bottom of the menu.

Remember to make it visible by clicking on Show Link (3).

Toolbox Pro - 60

Understanding the Features Palette by Adding an Email Me Link

Before leaving the Edit Website Navigation screen, click on Expand the Features Palette (1) to get an idea of some other possibilities for your website!

Toolbox Pro - 61

Read the descriptions (2) of each feature. All of these features will be discussed later.

To get an idea of how these features work, let's add an Email Me Link (3) to the website.

Click on Add this Link (4) to the right of Email Me Link (3).

When a check mark appears the link has been added to the menu.

Preview your website and click on the link to see how it works.

Understanding the Email Me Feature

When a user clicks on the Email Me Link. a form (1) pops up for them to fill in.

This methods hides your email address from "bots'" that troll the Internet to collect unprotected emails. The default address used is the school email address on file with GST BOCES. In addition, a message (2) tells the user that they must enter their name (3) and email address (4) and that their IP address will be recorded.

Entering Your Message Subject (5) and, of course, Your Message Text (6) would be a good idea Before the message can be sent, the user must enter some random text (7) in the box.

To try this, enter all the required information and the click on Send This Mesage (8).

Toolbox Pro - 62

Managing Website Email Website email in Toolbox PRO takes on may forms including Teacher to Teacher, Teacher to Student, Student to Teacher and even Student to Student. Toolbox PRO also includes a way for visitors to the website to email the teacher. All of this is under the strict control of the teacher.

Email addresses are hidden from "bots" using a form rather than a typical "mailto" link.

The Message Center

The email from your website will be sent, by default, to your district email address.

The email will also be recorded in the Messages section of Toolbox PRO. Click on Messages on the Top Menu.

The Message Center (1) screen should appear. in Your Inbox (2), the first three sections show the types of email communications possible through Toolbox PRO. Teacher Email (3) Class/Student Email (4) Student to Student Email (5)

Toolbox Pro - 63

The last choice, Website Email (6) , is where messages sent through the Email Me Link on the website are stored.

Click on View Email from Your Web Site>> (7).

Examining the Mail from Your Classroom Website Screen

On the View Email from Your Web Site screen you will see the Mail from Your Classroom Website (1).

Notice the first two choices at the top of the screen.

Disable Website Email (2) - turns "off" the ability for visitors to send email to the website Disable Copy Email to District Account (3) - allows you to have messages from your website sent ONLY to the Toolbox PRO Inbox Under Your Received Messages (4) you will find: Status (5)- closed envelope for Unread, open envelope for Read From (6) - the email address of the sender of each message Date and Time Received (7) - date and time sender sent you the email Subject (8) - whatever the sender put in their subject field.

Actions (9) View Message (10) - displays the message and marks it as Read Save to archive (11) - saves the message to the archive and removes it from the Inbox Delete Message (12) - deletes the message Click on the View Message icon (10).

Toolbox Pro - 64

Viewing Received Messages

After clicking on the View Message icon, the Viewing Received Message (1) screen appears.

Under Action (2), clicking on the first icon will allow you to Reply to this message (3).

You may also choose to Save to Archive (4) or Delete Message (5).

You may also click on any of the four actions at the bottom of the screen (6).

Toolbox Pro - 65

Replying to Messages

After clicking on the Reply to this message icon, the Reply to Message from Your Website (1) screen appears.

You may type a reply below the Original message (2) and then click on Send Your Reply (3).

You may also click on any of the four actions (4) at the bottom of the screen.

Toolbox Pro - 66

Examining Sent Email Responses

Once you Send Your Reply, you should be on the Your Responses to Mail from Your Website (1) screen.

You may now use the icons on the right to View Message (2) or Delete Message (3).

You may also click on any of the three actions at the bottom of the screen (4).

Toolbox Pro - 67

Website: Changing Themes, Activating, Allowing "Public" Access

Toolbox Pro - 68

Changing and Customizing Themes Themes in Toolbox PRO make websites have a consistent "look and feel" from page to page.

Themes can be changed whenever you wish without losing content. For example, you could change themes for seasons or holidays. There are many Pre-made Styles to choose from or you may customize your own style using background images and colors.

Reviewing Pre-made Styles

Click on Website on the Top Menu.

The Choose a Website Style screen should appear.

Click on Preview Pre-made Styles >> (1).

Toolbox Pro - 69

Choosing a Pre-made Style

The Website Style Chooser Screen (1) should now appear.

Choose a Toolbox Pro Theme by clicking on one of the themes below Choose a Theme Group Toolbox Pro - 70

(2).

Scroll through the thumbnails of the themes in that group until you find one you like or choose another group. Themes can be changed at any time. Click on Preview this Style (3).

Previewing a Pre-made Style

You should now see an example of how the Home of your website will appear. The Name (1) should be in the upper left corner. The current date (2) will be under the Toolbox PRO logo.

Notice that the theme controls the location of the menu (3) but that you will control the choices

Toolbox Pro - 71

and order of those choices. The content has been generated so that you can see how the page appears. Take some time to look at the different themes. Once you find a theme that you like, be sure to click on Set My Website to this Style >> (4) to use the style for your website.

Confining a Style Choice

A popup screen announces that the website style has been set. Click on Click Here to close this Window (1) to return to the Website Style Chooser screen. Click on Website on the Top Menu to return to the Website Manager screen.

Creating a Custom Style: First Steps

It is possible to customize a style for your website rather than use a Pre-made Style.

Click on Website on the Top Menu.

The Choose a Website Style (1) screen should appear.

Click on Create a Custom Style >> (2). The Create a Custom Style screen should appear.

Toolbox Pro - 72

Creating a Custom Style: Notes on Background Images

On the Create a Custom Style (1) screen click on View Notes on Background Images > (2) to read about some suggestions for the four places background images may appear on the website.

Page Content area Header Footer Notice the comment You haven't defined any Custom Styles yet (3). Once you have defined some Custom Styles, this area will list those styles.

Now click on Create a Custom Style >>. (4) The Create a Custom Style screen should appear.

Toolbox Pro - 73

Creating a Custom Style: Setting Background Images and Choosing Colors

The Create a Custom Style (1) screen allows you to control: Background images (2) for: Toolbox Pro - 74

Page Content area Header Footer Colors (3) for almost every element of the website Menu Position (4) on the left or right Enter a Style Name (5) in the box provided.

Click on the arrow buttons (6) next to each feature to Choose a color or to Upload a background Image.

Click on the arrow button next to Switch Menu Position (4) from Left to Right to "toggle" the position of the menu from left to right and right to left.

When you are finished be sure to click on the Save this Custom Style (7) button.

Choosing Color by RGB

There are the three ways to choose the colors you want to use.

The first is by RGB which stands for Red-Green-Blue. When you move your mouse a color block, the RGB number will be displayed in hexadecimal. You don't really have to know much about how this works, just click on the color you like!

Choosing Color by Color Name

The second way to pick a color is by Named Colors. When you move your mouse a color block, the official web name of the color will be displayed. Just click on the color you like.

Toolbox Pro - 75

Choosing Color by Color Slider

The third way to pick a color is by using the Color slider. Left click on hold the mouse button down to move the sliders to get just the right amount of Red, Green and Blue. This may be the most versatile method since it allows you to create your own color. In theory, you can create 16,777,216 different color. Once you have the color you want, just click on the color bar at the bottom.

Previewing and Using the New Style

The Creating a Custom Style (1) screen now has your style listed and some actions you can take: Toolbox Pro - 76

Preview Style (2) - shows what your Home page might look like with this style applied Edit Style (3) - takes you back to the previous screen to make changes Delete Style (4) - if you don't like what you did Set Website to this Style (5) - to use this new style on your website Click on Set Website to this Style (5).

Preview your website to see your creative genius in action. If your creation needs work, set your style back to one of the Pre-made Styles.

Toolbox Pro - 77

Activating and Deactivating a Website Websites remain invisible to the outside world on the Web until activated by the teacher. Websites may be Activated or Inactivated at any time without losing or changing content.

Reviewing the Web Control Panel

Once you are satisfied that you want "the world" to look at your website it is time to Activate it.

Remember that individual links can be hidden on the menu when the website is active.

Sometimes you may want to inactivate the website when you are making major changes in Toolbox Pro - 78

content or format. Remember that inactivating a website only remove sit from public view.

Nothing is deleted and you can still work on the site and preview it.

Click on Website on the Top Menu.

Look at the information under Web Control Panel. (1) You may access these features at any time.

Activate/Inactivate My Website (2) - controls whether or not others can get to your site on the Internet Preview Your Site (3) - shows exactly what others will see when visiting your website on the Internet.

Reset Counter (4) - Toolbox Pro keeps track of how many times your site has been visited.

This button resets that count.

Use Preview Your Site (3) to take a look at what your site looks like at this point.

As you add more features, you will see your Current Storage (5) increase.

Click on Activate My Website (2) to make your site visible to the "public".

Toolbox Pro - 79

How do my students find my website?

Once a teacher Activates the their website, they will want their students and other to visit the site.

They may even want feedback about what they have done. Toolbox PRO offers at least three ways that teachers can "spread the word" about their site.

Three Ways to Get on Your Website

There are several ways that your students, other teachers in your district, friends and realtives an access your site.

You may email the direct address of the site to those you want to access it. You get this address by previewing the site, clicking on the browser address bar and copying the address found there.

The address of the site will look something like: http://www.toolboxpro.org/classrooms/template.cfm?ID=4399 This is your unique user ID assigned by Toolbox PRO. When you Preview Your Site the address is followed by &Preview=1. Remove this, if it exists, before distributing the address.

Another way of getting your website seen by others is to have the webmaster at your school link your website to the school website. Most schools have a set of links somewhere for Teacher pages.

Toolbox Pro - 80

The final way to get people to your site is to have them got to the Toolbox Pro website by using www.toolboxpro.com. No one has to "log in" to see your website and use many of the features.

Click on Teacher Websites (1). The Online Classrooms screen should appear.

Accessing the Website Through Online Classrooms at Toolbox PRO

Click on the letter of the alphabet (1) that begins the name of the school system where you are employed.

Toolbox Pro - 81

Choosing a School District

Click on the name of the district (1).

Choosing a School Building

Click on the name of the school building (1).

Toolbox Pro - 82

Choosing a Website by Teacher's Name, Subject or Grade Level

Click on the teacher's name, grade level, content area or whatever identifies the website (1).

The full website will then be displayed.

Toolbox Pro - 83

Website: Adding Subpages and Modifying Navigation

Toolbox Pro - 84

Adding an Additional Page as a Subpage As more and more options re added to menus , they can get longer and longer. LOng menus are hard for the user to navigate. There are many strategies to solve this problem and improve navigation. One method is to have a main menu choice that links to another page that has a list of links. Another choice that Toolbox PRO gives you is to create pages which are subpages. The inks to subpages only appear on the main menu when the mouse pointer is placed over the main menu choice.

Choosing to Add Additional Website Pages

Click Website on the Top Menu.

Click on Add and Edit Additional Website Pages >> (1).

The Add Pages to My Website screen should appear.

Toolbox Pro - 85

Adding an Additional Page

On the The Add Pages to My Website screen you should see the message You don't have any additional pages linked to your website. (The screenshot above shows several new pages have been added.)

Click on Add a Page to Your Website >> (2). The editor screen should appear.

Using the Editor to Create an Additional Page

Notice that the editor on the Add a New Page screen (1) is identical to the dioxide on the Edit MY Home Page screen.

Toolbox Pro - 86

Type the words New Subpage for the Page Title (2).

In the editor window (3) type This page will be a subpage of page1.

Click Add this page (4). You should be back at the Add Pages to My website screen.

Previewing the New Subpage: Before Editing Navigation

You should now be back at the Add Pages to My Website (1) screen.

New Page (2) should be at the bottom of your pages list and it should be hidden (3).

Click on Show Page (4) to make it visible.

Preview your website and take a close look at the menu.

The Main Menu: Before Editing Navigation

New Subpage (1) appears at the bottom of the menu as a main menu choice.

Go back to Toolbox PRO.

Toolbox Pro - 87

Editing the Navigation Bar to Create a Subpage Choosing to Edit the Navigation Bar (Menu)

Click on Website on the Top Menu.

In the Edit Website Navigation section (1), click on Edit the Navigation Bar >> (2).

The Edit Website Navigation screen should appear.

Toolbox Pro - 88

Changing the Order of the Menu

On the Edit Website Navigation (1) screen New Subpage (2) will appear Ta the bottom of the list.

Click the up arrow (3) to the left of New Subpage (2) until it moves up directly under First Page

Toolbox Pro - 89

(4).

Now click on Add Subpage (5).

Making a Subpage and the Main Menu Afterwards

A green arrow (1) will appear to the right of New Subpage (2) to show that it is a subpage of First Page (3).

Toolbox Pro - 90

Preview your website.

Notice that New Subpage is no longer on the main menu.

Notice that First Page now has a small arrow next to it indicating that it has one or more subpages.

Move the cursor over First Page.

New Subpage should appear. Click on New Subpage to see it in action

Toolbox Pro - 91

Website: Creating and Maintain a Website Guestbook

Toolbox Pro - 92

Adding the Guest Book Link The more interactive a website is the more likely the users will become engaged with the content.

Static websites can be useful to present material but interactive websites keep the users returning. A guestbook is a relatively simple way to allow users to comment on your site, offer suggestions and interact with each other. This method is not as sophisticated as a blog but is much easier to implement and maintain.

Choosing to Edit the Navigation Bar

Click Website on the Top Menu. The Website Manager (1) screen should appear.

Click on Edit the Navigation Bar (2).

Toolbox Pro - 93

Adding the Guest Book through the Features Palette

The Edit Website Navigation (1) screen should appear.

Click on Expand the Features Palette (2).

Toolbox Pro - 94

Click on Add this Link (3) to the right of Add Guest Book (4).

A check mark should appear to indicate this link has been added to the main menu.

Preview you website to see the link.

Toolbox Pro - 95

Commenting in the Guest Book Once the guestbook is created it is easy for the user to click on the link and leave a message. The user must supply their name and location. In addition, the users email and IP address are recorded to discourage abuse of the guestbook. The user must repeat a series of random characters to assure a human being is completing the form. Once the user is finished the comment will not be posted until the webmaster (you) approve the comment. You may choose to approve the comment "as is" or edit it before including it in the guestbook.

Choosing the Guestbook Link

Click on the Guest Book Link (1) on your website.

Notice the comment (2) indicating there are no posts in the Guestbook.

Click on Sign the Guestbook> (3)

Toolbox Pro - 96

Filling in the Guestbook Form

Note the instructions (1) to people who would use the Guestbook.

Their information will be recorded.

Posts will not be included in the Guestbook until you approve them.

Fill in the information on the form (2).

The random text (3) which must be entered correctly attempts to block "bots" from filling in the form automatically.

Click on the Add My Comments to the Guestbook (4) button.

Toolbox Pro - 97

Completing a Guestbook Entry

Notice the comment to the user (1).

Toolbox Pro - 98

Approving Comment and Editing the Guestbook If you are going to implement the guestbook, it is up to you to maintain it by editing and approving comments. Users will grow impatient if you do not review and approve (or disapprove) of comments on a regular schedule.

Choosing to Edit the Guestbook

Click on Website on the Top Menu.

The Website Manager (1) screen should now appear.

Toolbox Pro - 99

Click on Edit the Guestbook (2).

Choices in Editing your Website Guestbook

The Edit Your Guestbook (1) screen should appear.

Notice the message (2) that indicates there are posts to approve (or disapprove).

Look at the post. It should match what you enter ed on the Guestbook screen.

You have three choices: Approve this Entry (3) Remove this Entry (4) Edit this entry (5) Simply approving the entry is too easy!

Click on Edit this Entry (5)

Toolbox Pro - 100

Editing a Guestbook Entry Before Approving

The Edit a Guest Book Entry (1) screen should appear.

Below the comment, add your own information (2). Indicating that it is from the webmaster is a courtesy.)

Click on Save the Edits to this Entry (3).

Toolbox Pro - 101

Approving the Guestbook Entry

Back on the Edit your Website Guest Book (1) screen you should see the message with your changes (2).

This time click on Approve this Entry (3). Confirm your answer by clicking OK in the pop up.

Toolbox Pro - 102

After Approving a Guestbook Entry

This message has now been posted to your Guestbook.

Notice that you still can: Remove this Entry (1) Edit this entry (2) You can also see that there are no other messages that need to be approved. (3)

Toolbox Pro - 103

Updated Guestbook on Your Website

Preview your website and click on Guestbook (1) in the main menu.

Here you can see that the message (2) has been posted to the website with your edit (3).

Toolbox Pro - 104

Website; Adding a Website Calendar

Toolbox Pro - 105

Creating a Calendar with Events Visual calendars help people see what events are scheduled for a certain day or month. A website may have one public calendar. Each class may have its own calendar, Choosing to Add/Edit Website Calendar

Click Website on the Top Menu. The Website Manager (1) screen should appear.

Click on Add and Edit the Calendar (2).

Toolbox Pro - 106

The Website Calendar Screen

The Website Calendar Screen (1) should now appear.

Below the header is a box showing Class Calendars To Show On Website (2). You may have one general calendar and a separate calendar for each class.

You may print get a hardcopy of your calendar by clicking on the Print Calendar Month (3) icon.

The calendar for current month (4) will be displayed.

Below the calendar is a list of events (5) for the month.

Below the events are the buttons (6) to move between months and years.

Toolbox Pro - 107

Adding an Event to the Calendar

To add an event to the calendar click on the starting day on the calendar.

The Add a New Event (1) box should now be populated with the date (2).

If this event is to occur on more than one day, place the additional number of days in the Date Range (3) box.

Enter the Event Title (4) and the Event Description (5).

When you are done, click on the button to Add This Event to My Website Calendar (6).

Toolbox Pro - 108

Events Displayed on the Calendar and in the List

Once you have added an event, it should show up on the calendar as indicated by the date turning yellow (1).

Toolbox Pro - 109

In addition, the event will be listed (2) below the calendar.

Notice that you have the options to Edit Event Info (3) or Delete Event (4).

You may now add other events on the same date or on others.

Toolbox Pro - 110

Adding the Calendar Link Once the calendar has been created the link to it will still not appear on the main menu of your website. like all other features, this one must be added by editing the navigation bar.

Choosing to Edit the Navigation Bar

Click Website on the Top Menu. The Website Manager (1) screen should appear.

Click on Edit the Navigation Bar (2).

Toolbox Pro - 111

Adding the Calendar through the Features Palette

The Edit Website Navigation (1) screen should appear.

Click on Expand the Features Palette (2).

Click on Add this Link (3) to the right of Calendar Link (4).

Toolbox Pro - 112

A check mark should appear to indicate this link has been added to the main menu.

Toolbox Pro - 113

Previewing the Calendar Clicking on the Calendar Link on the menu will display the information on events in the current month.

Preview your website.

Notice that a menu choice for Calendar (1) has been added to the menu.

Click on this choice.

Toolbox Pro - 114

The calendar for the current month (1) will be displayed on the screen.

The events list (2) will also be displayed.

Notice that there is also a list of Activities/Homework for the month (3) The buttons (4) below the list can be used to move from month to month or year to year.

Toolbox Pro - 115

Website: Working with Images

Toolbox Pro - 116

Image Formats and Sizes Although discussing image formats and image manipulation is "boring" and understanding of this information will improve your website. Knowing the different formats and studying some tips will help your images load faster and make them appear more pleasing on the website.

The Formats BMP or bit mapped format was one of the first image formats. It saves every bit of information in an uncompressed format. A 4000 by 3000 image may take as much as 40 megabytes of storage.

JPG is a common format that stores images in a format that compresses the image. Some resolution is lost but the 4000 by 3000 image may take only 4 megabytes of storage.

PNG is another format used for web images. Since the JPG format is actually NOT a public domain format, some people prefer this format.

GIF format is another compressed format that is often used for animated images. GIFs can also have transparent background which can be an advantage when displaying them on a web page.

RAW format is used by some high-end cameras but is not appropriate for images on the web.

Image Sizes Images taken by most point-and-shoot cameras today are in the JPG format. They are much larger than are needed for display on web pages. A 4000 by 3000 pixel image may occupy 4 megabytes of space and is entirely too large to display on any computer monitor. Reducing the size of the image to just 720 by 540 pixels means that it will occupy only I megabyte of storage and will load much faster.

It is probably easiest to reduce the size of the images before importing them into Toolbox PRO. There are many free programs which will reduce the size of one image at a time or will handle an entire folder of images. Once the images are reduced in size they will be ready for use on web pages.

Toolbox PRO does have the ability to reduce the size of images and make other adjustments once the images are imported as resources. CAUTION: Keep a copy of your original image somewhere on your computer since once the alterations are saved they CANNOT be recovered in Toolbox PRO. Other programs may or may not keep a backup of your images so making copies is always a good idea.

Toolbox Pro - 117

Using Toolbox PRO to Resize Images: Choosing the Resource Folder

Click on the Resources on the top menu.

The Your Complete Resource List (1) screen should now be showing.

Click on the name of a resource folder (2) that has some images (3).

Toolbox Pro - 118

Using Toolbox PRO to Resize Images: Choosing the Image

The Resources in folder (1) screen should be displayed with the name of the folder (2) and all the resources listed.

Under Images (3), click on the name of an image (4) you want to edit.

Toolbox Pro - 119

Using Toolbox PRO to Resize Images: Choosing to Edit the Image

The Edit Resource (1) screen should appear and show a scaled view of your image.

Notice that you can : Change the resource name (2) Change the description for this resource (3) Change folder location (4) The actual URL (5) of the image is also given.

We want to resize the image so click on Click here to reszize/rotate/label the image (6).

Toolbox Pro - 120

Using Toolbox PRO to Resize Images: Editing the Image

The screen that appears allows you to carry out basic image manipulations with Toolbox PRO. To change the size of the image requires basic knowledge of percentages and, perhaps, a calculator.

Since we usually want to make pictures smaller, type 50 in the Change Size (1) box.

The image looks properly oriented so leave the Rotate Image (2) box blank.

To see how the labeling work type a label or caption in the Add label box (3).

Choose a Label Position (4).

Click on the color palette (5) next to Label Background Color (6) and then click on a color in the palette that appears. The characters that appear in the box are the code for the color you chose.

Do the same for Label Text Color (7). The X (8) next to each choice will reset that color.

When you are done, click on Resize the original image (9). NOTE: this will NOT actually change the original image. This allows you to "play" some before making a final decision.

Toolbox Pro - 121

Using Toolbox PRO to Resize Images: Saving the Image

After you click on Resize the original image, another screen will appear. Click through this screen to see the results of what you did.

The editing screen appears again but this time it displays the edited image (1) above the original image.

You may now re-enter information to change the size or label of the image (2).

When you feel you are done, click on Save this image (3).

A message will appear confirming that the changes were made. Click through this screen

Toolbox Pro - 122

Using Toolbox PRO to Resize Images: Final Touches

The Edit Resources (1) screen will appear.

Click on Click here to save your changes (2) to save all the change you made.

The Resources in folder screen will appear.

You may choose the edit other resources in the same folder, edit resources in another folder or perform any other action.

Toolbox Pro - 123

Resizing Images in Toolbox PRO Reducing the size of images makes them fit better into a webpage layout. It will also allow the images to load faster.

Using Toolbox PRO to Resize Images: Choosing the Resource Folder

Click on the Resources on the top menu.

The Your Complete Resource List (1) screen should now be showing.

Click on the name of a resource folder (2) that has some images (3).

Toolbox Pro - 124

Using Toolbox PRO to Resize Images: Choosing the Image

The Resources in folder (1) screen should be displayed with the name of the folder (2) and all the resources listed.

Under Images (3), click on the name of an image (4) you want to edit.

Toolbox Pro - 125

Using Toolbox PRO to Resize Images: Choosing to Edit the Image

The Edit Resource (1) screen should appear and show a scaled view of your image.

Notice that you can : Change the resource name (2) Change the description for this resource (3) Change folder location (4) The actual URL (5) of the image is also given.

We want to resize the image so click on Click here to reszize/rotate/label the image (6).

Toolbox Pro - 126

Using Toolbox PRO to Resize Images: Editing the Image

The screen that appears allows you to carry out basic image manipulations with Toolbox PRO. To change the size of the image requires basic knowledge of percentages and, perhaps, a calculator.

Since we usually want to make pictures smaller, type 50 in the Change Size (1) box.

The image looks properly oriented so leave the Rotate Image (2) box blank.

To see how the labeling work type a label or caption in the Add label box (3).

Choose a Label Position (4).

Click on the color palette (5) next to Label Background Color (6) and then click on a color in the palette that appears. The characters that appear in the box are the code for the color you chose.

Do the same for Label Text Color (7). The X (8) next to each choice will reset that color.

When you are done, click on Resize the original image (9). NOTE: this will NOT actually change the original image. This allows you to "play" some before making a final decision.

Toolbox Pro - 127

Using Toolbox PRO to Resize Images: Saving the Image

After you click on Resize the original image, another screen will appear. Click through this screen to see the results of what you did.

The editing screen appears again but this time it displays the edited image (1) above the original image.

You may now re-enter information to change the size or label of the image (2).

When you feel you are done, click on Save this image (3).

A message will appear confirming that the changes were made. Click through this screen

Toolbox Pro - 128

Using Toolbox PRO to Resize Images: Final Touches

The Edit Resources (1) screen will appear.

Click on Click here to save your changes (2) to save all the change you made.

The Resources in folder screen will appear.

You may choose the edit other resources in the same folder, edit resources in another folder or perform any other action.

Toolbox Pro - 129

Website: Creating and Linking an Image Gallery

Toolbox Pro - 130

Adding Images for the Gallery Adding images to pages in addition to text helps to engage the reader and to illustrate your information. An image gallery is a series of related pictures with titles and description that can play as a slideshow and/or allow the user to click through them. Remember that images are considered resources and must be added as such before they can be used anywhere on your site including an image gallery.

Preparing to Add an Image Gallery To prepare for adding an image gallery, collect 5 to 10 images and place copies of them all in a folder on your computer. Name the folder Image Gallery 1. Image galleries usually look best then most of the images are the same size. Using an external editing program is usually faster than trying to use Toolbox PRO to edit the images. Remember that many cameras take images which are HUGE and much too large to display in their entirety on a computer screen. An image that is 4000 pixels by 3000 pixels will take up 12 megapixels of storage. Reducing the size of that image to 400 by 300 pixels will allow it to fit on the screen and will reduce the storage requirements and loading time.

Creating a New Resources Folder: First Steps

Click on Resources on the top menu.

The Your Complete Resource List (1) screen should appear.

Click on Add Folder (2).

Toolbox Pro - 131

Creating a New Resources Folder: Naming and Describing the Folder

The Create a New Folder Screen (1) should appear.

Enter Image Gallery 1 for the folder name (2).

Enter Images for My First Image Gallery for the description (3).

Click on Click here to create the folder (4).

Creating a New Resource Folder: The Results

The Your Complete Resource List (1) screen should appear.

Notice that the name of the new folder (2) now appears in the list.

Notice that there are no resources (3) in the foider.

Click on the name of the folder (2).

Toolbox Pro - 132

Populating the New Folder with Images

The Resources in folder (1) screen should appear.

Click on the Add icon (2) next to the Images (3).

Toolbox Pro - 133

Populating the New Folder with Images: Preparing to Upload Multiple Images

The Create a New Resource Screen (1) should appear.

Since we want to upload, at least five images for the gallery, click on Click here to upload multiple images! >> (2) Populating the New Folder with Images: Uploading Multiple Images

The Multiple File Upload (1) screen should appear.

Browse (2) to each image in the Image Gallery 1 folder on your computer.

Toolbox Pro - 134

Enter a Title (3) and a Description (4) for each image.

Click on Upload Files (5) when you are done.

Uploading files can take some time but wait until the upload has completed to continue.

Populating the New Folder with Images: Uploading Completed

You will know the upload is done when the Resources in folder (1) screen appears.

Notice that the images you uploaded (2) are now listed under Images (3).

Toolbox Pro - 135

Adding the Image Gallery to Your Website Once you have created a new resource folder and uploaded all your images for the image gallery it is time to activate the gallery on your website.

Adding the Image Gallery: First Steps

Click on Website on the top menu.

When the Website Manager (1) screen appears click on Edit Image Galleries (2).

Toolbox Pro - 136

Adding the Image Gallery: Starting a New Gallery

The Your Website Image Galleries (1) screen should appear.

The message (2) indicates there are no Image Galleries at this time.

Click on Add a New Gallery (3).

Adding the Image Gallery: Blank Galleries

A "blank" gallery (1) has now been created.

Click on Edit Gallery (2) to set up your new image gallery.

Toolbox Pro - 137

Adding the Image Gallery: Editing Gallery Properties

The Edit Gallery (1) screen appears.

Click on Edit Gallery Properties (2).

Adding the Image Gallery: Naming and Describing a Gallery

Enter a Gallery Name (1).

Enter a Gallery Description (2).

Change the Page Bkgnd (3) color by clicking on the arrow (4) and then clicking on a color in the

Toolbox Pro - 138

palette that pops up.

Change the Text Color (5) color by clicking on the arrow (6) and then clicking on a color in the palette that pops up.

When you are satisfied, click on Save my Edits (7).

Adding the Image Gallery: Beginning to Add Images

Now that the Gallery Properties have been edited, click on Add An Image to this Gallery (1) to start adding images.

Toolbox Pro - 139

Adding the Image Gallery: Adding an Image to the Gallery

The Edit Gallery - Add an Image (1) screen appears.

We are going to use images that we have already uploaded to our resources folder.

Use the Select a folder (2) dropdown list to choose Image Gallery 1.

Use the Select a resource (3) dropdown to select one of the images you uploaded.

As soon as you make these selections, Toolbox PRO will display the full-sized image in a pop-up.

Click Close WIndow.

You may also Add a name (4) for the image or simply use the image name displayed.

You may also Add a description (5) for the image or simply use the image description displayed.

Click Add This Image to the Gallery (6) after making your choices.

You will return to the Edit Gallery Page.

Repeat this process until you have added all the images you want.

Toolbox Pro - 140

Adding the Image Gallery: Removing and Reordering Images

Notice that you may Remove this Image (1).

Removing the image simply takes it out of the gallery.

Removing the images does NOT delete it from the resources folder.

You may reorder the images by clicking on the arrows to the left (2) of each image name.

Click on Back to Edit Galleries (2) to return to the main Your Website Image Galleries screen.

Toolbox Pro - 141

Adding the Image Gallery: Making the Gallery Visible and adding the Link

Your Image Gallery will not show up on the menu until you add the link to the menu and make each gallery visible.

To add the Image Gallery link to the website main menu, click on Add the Image Gallery Link (1).

To make the individual galleries visible, click on Show (2).

Adding the Image Gallery: Review the Website with an Image Gallery

Preview your website.

Click on Image Gallery (1) on the menu.The Image Galleries (2) screen appears and list the Toolbox Pro - 142

names of all your galleries (3).

Click on View Gallery (4).

Toolbox Pro - 143

Website: A Talking Character as a Resource

Toolbox Pro - 144

Creating the Talking Character Resource A talking character can be created on your website to "read" directions or call special attention to something very important. You can type in what the character is to say and use one of the available voices or you may record your own voice. You may also choose the appearance of the character. Each time you want the character to say something different you will have to recreate the resource. For longer "speeches" it is better to create a Narration reource.

Choosing a Resource Folder

Click on Resources on the top line menu.

This will bring you to the Resource Manager screen with Your Complete Resource List (1) Add a new folder by clicking on Add Folder (2) or click on the name of a folder (3)

Toolbox Pro - 145

Choosing a Digital Character

You will now be at the Resources in folder: Super Folder (1) Click on the Add icon next to Digital Characters (2)

Toolbox Pro - 146

Choosing the Source of the Speech

The next screen is the Create a New Resource (1) screen Fill in a the new resource name (2) and description (3) in the top two boxes Click on Text to Speech (4) or Record/Upload Your Voice (5) To Record Your Voice (5) you will need to use Internet Explorer since an Active X control must be installed. You will be led through this process.

To Upload Your Voice (5) you may record your voice using a microphone and any software such as Audacity. the file must be saved as a .WAV file!

For now click on Text to Speech (4) since it is the easiest choice.

Toolbox Pro - 147

Customizing and Adding the Digital Character

Once you have made the choice to use Text to Speech a digital character will appear on the left of the screen.

To the right of the digital character (1) is the information that you can customize (2) and a box for the text the character will speak (3).

Character (4) controls the appearance of the character on the left (1). The choices include male and female and a full figure or a "talking head".

TTS Vendor (5) will only effect users who have devices for the hearing impaired.

Voice (6) controls whether the voice is male or female and their native language.

Spanish sounds better when you choose a Spanish voice and so on.

After making all you customization choices, type the text into the box (3)

Toolbox Pro - 148

Before adding the resource click on Speak (7) and listen to the character. Edit the text if necessary.

When you are satisfied with your choices, click on Click here to add this resource (8) Digital Character Completion

You will now be back at the Resources in folder (1) screen You will see the name of the character you added (2) under the Digital Charcater (3) heading Click Website on the top menu to put this character somewhere on your website.

Toolbox Pro - 149

Placing the Talking Character on a Page The "hard work" in using digital characters is in creating them. Once the digital character is created and stored as a resource it is easy to add them to any existing page or to create a new page and include them, there.

Creating a Link to a Digital Character: Set Up

Once you click on Website on the top menu, you will be back at Website Manager screen.

If you want to include your character on your Home page, click on Edit My Home Page >> If you want to include your character on another page or add another page, click on Add and Edit Additional Website Pages >> Once you are on the editor page (1), place your cursor where you want the character to appear.

Click on the third icon from the left on the bottom row (2). This is the Insert/Record

Toolbox Pro - 150

Audio/Video/Digital Character (2) icon The Insert Narration/Digital Character (3) pop up will appear Click on the Upload/Create/Browse (4) button.

Creating a Link to a Digital Character: Choosing a Resource Folder

This pop up box allows you to either choose a resource you have already created or create a resource at this time.

Creating a resource ahead of time is the best idea and that is what we did.

Use the Change Resource Folder (1) drop down list to choose the name of the folder with your digital character Creating a Link to a Digital Character: Choosing a Resource

When you choose the folder, the available resources will be listed (1) Click on the name of the resource you want (2) The resource will be displayed on the right (3) Click on Use selected narration (4) and then OK on the next box to complete the insertion of the

Toolbox Pro - 151

digital character on your page It is likely that the charcater will not immediately display in the edit box Save the page Preview your website.

When you navigate to the page, you should see and hear your character

Toolbox Pro - 152

Website: Using Recorded Narration

Toolbox Pro - 153

Creating the Narration Resource Narration consists of you reading information and having the computer record your voice or your voice and your image. To do this you need a microphone and a video camera. These are built into most laptops but these sources may not produce the quality audio and video you want. You will have to experiment.

Choosing a Resource Folder

Click on Resources on the top line menu.

This will bring you to the Resource Manager screen with Your Complete Resource List (1) Add a new folder by clicking on Add Folder (2) or click on the name of a folder (3)

Toolbox Pro - 154

Choosing a Narration

You will now be at the Resources in folder: Super Folder (1) Click on the Add icon next to Narration (2)

Toolbox Pro - 155

Choosing the Source of the Speech

The next screen is the Create a New Resource (1) screen Fill in a the new resource name (2) and description (3) in the top two boxes Click on Audio Only (4) or Audio & Video (5) but be sure you have a microphone and/or webcam set up.

Flash may pop up a box requesting access to the devices. Click on OK.

Toolbox Pro - 156

Recording the Narration

Once you have made the choice a new screen will appear with the words Record (1) and Play (2).

If you choose Audio & Video a small screen (3) will appear over Record to show you the Live feed. Another small screen (4) will appear over Play to show you the video that was recorded Press Record (1) to begin the recording. The word Record will change to Stop. When you are done recording, Press Stop.

Press Play (2) to view what was recorded.

You may repeat this procedure until you are satisfied with the recording When you are satisfied with your choices, click on Click here to add this resource (5) Toolbox Pro - 157

Narration Completion

You will now be back at the Resources in folder (1) screen You will see the name of the narration you added (2) under the Narration (3) heading Click Website on the top menu to put this narration somewhere on your website.

Toolbox Pro - 158

Placing the Narration on a Page The "hard work" in using narrations is in creating them. Once the narration is created and stored as a resource it is easy to add it to any existing page or to create a new page and include it there.

Creating a Link to a Narration: Set Up

Once you click on Website on the top menu, you will be back at Website Manager screen.

If you want to include your narration on your Home page, click on Edit My Home Page >> If you want to include your narration on another page or add another page, click on Add and Edit Additional Website Pages >> Once you are on the editor page (1), place your cursor where you want the Narration to appear.

Click on the third icon from the left on the bottom row (2). This is the Insert/Record

Toolbox Pro - 159

Audio/Video/Digital Character (2) icon The Insert Narration/Digital Character (3) pop up will appear Click on the Upload/Create/Browse (4) button.

Creating a Link to a Narration: Choosing a Resource Folder

This pop up box allows you to either choose a resource you have already created or create a resource at this time.

Creating a resource ahead of time is the best idea and that is what we did.

Use the Change Resource Folder (1) drop down list to choose the name of the folder with your narration Creating a Link to a Narration: Choosing a Resource

When you choose the folder, the available resources will be listed (1) Click on the name of the resource you want (2) The resource will be displayed on the right (3) A audio/video narration will have the Press Play to View (4) screen

Toolbox Pro - 160

An audio narration will simply have a line of text that says Status Message Both types of narrations will have the three control buttons (5) Click on Use selected narration (6) and then OK on the next box to complete the insertion of the narration on your page It is likely that the narration controls will not immediately display in the edit box Save the page Preview your website.

When you navigate to the page, you should see the narration controls on the webpage.

A audio/video narration will have the Press Play to View screen An audio narration will simply have a line of text that says Status Message Both types of narrations will have the three control buttons

Toolbox Pro - 161