Using SiteBuilder Toolkit
Getting Started
NOTE: You must use Microsoft Internet Explorer browser to edit your pages. Mozilla/Firefox or Netscape have exhibited problems and edits made to your pages may not be reliable. If you have add-in pop-up blockers, like Yahoo Toolbar with pop-up blocker, you must disable the pop-up blocker, and/or remove the toolbar.

The Editing Icons

| Once you have successfully logged in, you will be taken back to the main home page. This page will look just as it did before logging in with the exception of a couple of added icons. On the right side of the screen, you will see a key icon along with the name of the logged in user. The key icon is your logout button. Click it to log yourself out of the editing mode and return to the log in screen. |
 |
|
On the left side of the screen you will see an icon that looks like a group of tools. This icon takes the logged in user into the SiteBuilder2 Toolkit (SBT2).
|
 |
|
As you browse the web site to the pages that you will be responsible for editing, you will see that 3 or 4 more icons appear in between the SBT2 icon and the logout key icon. These icons indicate what rights you have to edit the page you are viewing.
|
 |
 |
The first icon, which looks like a pad and pencil, is the editor icon. Clicking this icon will take you to the page editor and allow you to make changes to that page and either save or publish them.
|
 |
The second icon, which looks like two pages side by side, is the copy icon. This icon will make an exact copy of the page (except with a different page number). |
 |
The third icon is the delete icon. Clicking this icon will delete (and/or purge) the page from the SiteBuilder database. |
|

|
The fourth icon is the ‘new page’ icon. Clicking this icon will create a new page (under the current page in the file tree) and allow the user to edit the various attributes of the page.
|
The SiteBuilder2 Toolkit Environment
The editing icons that appear on the web pages after login are only one part of the SiteBuilder toolkit. The editing icons make it easy to navigate to a page and edit it, but SiteBuilder provides another other way to find, edit and create pages; by using the toolkit.
 |
To enter the toolkit, click on the toolkit icon on any of the web pages. |
The main page of the toolkit is the content library. This is where the various content pages are listed and organized. Well get back to the content pages themselves in a moment, but first, let’s take a look at some of the features of the page.
|
In the upper-right hand corner of the page, as well as on the bottom right hand corner is the now-familiar log out key icon. Click on this anytime to log out of the SiteBuilder toolkit.
|
 |
Along the top of the page are four tabs: pages, applications, reports and files. Of those tabs, the pages tab is the only one of concern.

The ‘files’ tab hosts a file upload application that we have not purchased. The ‘reports’ tab is a reporting tool that logs all page changes with the system with time, date, page number, user and action. The ‘applications’ tab hosts various applications, like the job post and news. Unless you are the administrator of one of these applications, your tab will say “nothing to work with”.
As stated above, the ‘pages’ tab is the main content library and allows the content editor to view all of the pages in his/her area in several different ways. The default view shows all active pages sorted by name and their attributes. In the example below, we have five pages listed: Page 1, Page 2, Page 2-A, Page 3, and Training Page. The page name is a descriptive name that is given to a page when it is created. The page number is the name that is referenced by a browser. For example, to view Training page you could browse to: http://www.lincolnu.edu/pages/772.asp or you could reference it in a link by using 772.asp

The editing icons next to the page are the same as the editing icons discussed above. Only one new icon exists: the one that looks like a magnifying glass over a browser window. This is the ‘view’ icon and it opens up a new window to view the page in question. The red ‘H’ is a page status indicator and means Hidden. We’ll talk more about that in a minute.
Hint: Don’t see all your pages? The default view lists only 10 pages at a time. Click on the numeral ‘10’ where it says 10 per page and change it to any number between 1 and 100!
The default file list only shows pages that you have rights to edit, and does not show inactive or deleted pages. To view inactive or deleted pages, click the appropriate radio button at the top of the screen.

Inactive content is denoted by a red ‘I’ next to the filename; deleted content with a ‘D’. Files don’t disappear when deleted, only when purged. This is a safety feature. A file can be deleted and then later made active again. However, after they are purged, they are gone!
Although SiteBuilder toolkit’s default view for content is by page name, there are two other view that can be helpful. The page number view allows the content editor to view pages by their number. The Treeview view shows content arranged in a tree. This is especially helpful on sites that have multiple levels. As you can see in the example below, the main page has 3 pages directly under it and the ‘Page 2’ page has one page under it. This is also the structure it would have in the left sidebar links of the website.

In the example above, notice that the editing icons are only available for the pages with which the user has editing rights. In Treeview, you will see all of the content pages on the site, but you can only edit yours. You will also notice that even inactive and deleted pages show up in Treeview.
The Page Editor
To enter the page editor, select the page you wish to edit and click on the edit icon. 
The page editing window has two main parts; the page properties links and the page editing window. At the top of the page, directly under the tabs are the page property links. Each of these links brings up a window that contains information about how your page is displayed on the web. Let’s take a look at the property links first, and then come back and explore the editing window.

The Page Navigation link has information pertaining to how your page should look in the automatically generated navigation links. The page status radio buttons allow you to change the status of your page to inactive or deleted. As you are working on a page, you may want to hide it from the world by making all of the automatic links inactive. This removes the links from the sidebar, but still allows you to edit and save the content. When you are ready, simply change the link to active and your page’s link appears!
The next three text fields deal with what name you page should display. The first text field is the text that will appear at the top of the browser. The second text field is the text that will appear in the automatically generated links in the left sidebar and in the cookie crumbs. The last text field is the text that will be displayed when your link is hovered over by a cursor. This is important as this is the text that will be read by screen readers for the visually impaired.

The position sequence text area at the bottom of the page tells SiteBuilder how it should handle your link. If the number for this page is:
| -1 |
page is hidden (H) status and won’t show up in the navigation links |
| 1 or 2 or 3… |
page is displayed in numerical order |
| 99 |
page is displayed in alphabetical order by name |
| 101 or higher |
page is displayed last in the listing |
Hint: If you have more that 8 or 10 pages in any one area of your site, it might become difficult for your visitors to find the page they are looking for in the navigation links. In this case, you might make all of those pages ‘hidden’ in the navigation links and create a separate page with the links to these pages organized in the body of the document.
The Page Control link has information pertaining to the look of your page when viewed on the web. The first dropdown box has the name of the template(s) that you may use with your pages. At this time, all content pages use the Content Pages template.
The ‘Will this page contain other pages’ buttons allow you to manipulate the tree of your pages, creating some pages that will have other pages underneath them and some pages that are ‘end pages’, only containing content. The main difference here is the icon in the navigation bar. Pages that contain other pages show up with an arrow (>) icon while ‘end pages’ have a dot (.).
If you want your pages to open (from the navigation links) in a new window, select the yes option to the question. However, be aware that your pages may not open on some browsers that block popup windows.
The last two date fields allow you to schedule a time for a page to start and stop displaying.

The Page Location link shows you where in the website structure tree your pages exist. Pages to which you have no access appear in red. You may not place pages under pages to which you do not have access.

The Search Engine Information link contains information pertaining to how your pages show up in the Site Search utility that is on each page of the site. Although it is not necessary to fill in these fields (your pages will show up on the search regardless), the descriptions of your pages may be better than the text that is displayed.

The Left Sidebar link allows you to append, prepend or overwrite the information in the automatically generated left sidebar. I do not recommend overwriting, because your pages will lose the flow of navigation that SiteBuilder provides.

The Right Sidebar link is not used at this site, as our templates are based on a two column setup rather than a three column setup.
At the bottom of each editor window link page are a number of buttons: Save, Publish, Back To Website, Reset, and Close. The Close button will close the editor window and take you back to the SiteBuilder toolkit window (page listing). The Back to Website button will take you back to the website page that you were editing, but you will still remain logged in to SiteBuilder. The Reset button will reset any changes that you made since the last save. For instance, if you open the editor and insert a graphic, but you realize that you made a mistake and want to insert it in a different area, click to reset button to put the page back to its original setting.

However, if you hit the save button, the changes you make are saved to the database and cannot be reset. Hitting the save button will not publish your changes to the web site, it only saves them to the database. You can make edits and save them and come back and work on them later without publishing half completed work. The Publish button will save the content to the database and will publish it to the website as well.
Hint: If you make changes to any of the properties of your page, hit the save or publish button before selecting another property window link. If you don’t save each property window’s settings before selecting another link or closing the window, you will lose your changes.
Now, let’s go back and look at the page editing window. The page editing window can be selected by clicking on the Main Content navigation link.
For people who are accustomed to using Microsoft Word, the page editing window is simple to use. For the sake of brevity, I won’t cover each icon and its use, but rather will spend time on the ones that are web editing specific. If at anytime you have a question regarding what one of the icons does, simply roll your mouse over the button and a pop out explanation will appear (see the example below). For a more detailed explanation, click on the ‘open help’ button.

Just to get us all on the same page, I will name the buttons starting on the top row, moving left to right: cut, copy, paste, delete, find, undo, redo, insert horizontal bar, insert picture, insert hyperlink, insert anchor, break hyperlink, insert special character, spell check, open help, align left, align center, align right, numerical list, bulleted list, out-dent, indent, text style dropdown, bold, italic, underline, superscript, subscript, text color, text background color, insert table, insert cell, delete cell, insert row, delete row, insert column, delete column, split cell, merge cells, cell properties.
| As I said earlier, most of these functions are fairly straight forward, so I won’t waste time discussing them. The two I want to look at more in depth are the insert picture and insert hyperlink buttons. There are also four buttons at the bottom of the editing window that are |
| editor specific and I will deal with each of them. They are code view, code sweeper, show hidden table, and toggle details. |
 |
 |
To inert a hyperlink into a page, highlight the text or graphic that you want to make into a hyperlink and click on the insert hyperlink button (that looks like the link of a chain). When the hyperlink properties box opens, type the URL of the link into the ‘URL:’ text field. If the link is pointing to one of the pages on the Lincoln University site, simply type the page number with the .asp extension. For example, if the link is to page number 348, type 348.asp in the ‘URL:’ text field.
The target text field can be populated with an underscore new ( _new ) to open the link in a new browser window. This should always be done when linking to a URL that is not on the Lincoln University site.
|
The Class and Style fields can be ignored at this point. Click on the OK button to create the hyperlink.
To insert an image into your page, click on the insert image icon (looks like a little picture in a frame). The Image Information dialog box will appear. If you know the image information, you can enter it in the fields, but generally it is better to browse for a file that has already been uploaded to the server. To browse the images on the server, click on the open folder icon in the upper right hand corner.

Clicking on the open folder icon will open a dialog box with all of the images on the server listed. Each department or area should have their own folder which is located in the left column. If the
folders aren’t listed, click on the plus sign (+) next to the top folder icon to show all the folders, then click on the folder for your department. At this point, you can either select a file that is already on the server, or upload a new file to the server. To insert a file that is already on the server, simply select the file and click the ‘open’ button.

To upload a new image to the server, select the upload button from the tools at the top of the window. The upload image dialog box will open.
When the image upload dialog button opens, click on the browse button and browse our hard drive to find the file that you wish to upload. Select the file and click ‘OK’ then select OK on the upload image dialog box. Do not check the ‘insert image into the editor’ checkbox. After clicking ‘OK’, select the file you uploaded from the Open Image dialog box and click the ‘Open’ box. The image information will be populated into the image properties box. Click ‘OK’ to insert the image into your page.

Several content editors may wish to upload Adobe .pdf files. If you want a PDF uploaded to your site, attach it to an email and sent it to webmaster@lincolnu.edu. I will place the file on the server and email the link back to you. Just create a hyperlink where ever you want it to appear and paste the link in the email into the URL textbox of the hyperlink properties dialog box.
| When finished editing content in SiteBuilder, remember to click the ‘log off’ key icon to end your session. |
 |
Good luck with your content editing and I look forward to seeing what the Lincoln University site will become with everyone contributing. Remember, if you have any questions or need help with SiteBuilder, feel free to call x5950 or email webmaster@lincolnu.edu.
To log in to SiteBuilder toolkit, go to the login page. [To keep the site secure, the login address is not being provided. If you don't know the URL for the login page, contact the webmaster to obtain this address.] and enter your userID and password in the appropriate textboxes.
|