WebTool content management system:
County website authoring
Things you need to know

There is a link to the login screen for WebTool on the For Faculty and Staff page. (Right side
under Quick Tools). The URL for the login page is
https://extensionapps.missouri.edu/WebTool

No software is required to do basic editing on county Web pages; this is a Web-based tool
that you can login to from any Internet-connected computer. It also works on iPads and
other tablets. When you log in, you can edit the pages in your website. The only software
you might need is for resizing photos.

Help text and instructions are embedded in the system. Question mark icons provide
instructions and specific examples for each field.

Web page content is stored in database fields. Pages are assembled on-the-fly as a visitor
requests them. Pages are not stored as HTML files on the server.

Downloadable files such as documents (PDF, DOC, DOCX, PPTX, etc.) and images (JPG, GIF,
PNG) files are stored in county folders on the server. The built-in file manager allows
uploading, renaming, deleting files and adding new folders to organize files.

Site-wide templates have been carefully designed to high standards of usability and
accessibility. MU Extension adheres to the Section 508 of the Americans with Disabilities
Act for accessibility of digital content. As a public entity, we are legally obligated to make
sure all digital content is accessible to all users.

Seven standard pages make up a basic county site.
- Home page, location, faculty and staff, services, plans and reports, county extension
council, donate
- Most content for standard pages is fed from databases, requiring minimal updates.
Additional local programming pages are optional.

There is an optional disaster recovery page that may be turned on when there is a disaster
affecting your county. This can be customized to include local emergency contact
information and services.
WebTool instructions, updated June 2014, page 1
Important concepts
Navigation menu
The first six links on the county website navigation menu are the same for every county.
The Local programming portion of the menu has two levels:
menu items and submenu items.
In this example, the 4-H menu item has one submenu item under
it (Awards and forms). Submenu items are only visible to
visitors when they are viewing the menu item page. The 4-H
page is the parent page for Clubs, Awards and Events. Clubs,
Awards and Events are the child pages of the 4-H page.
Understanding this structure will help when you are creating
the associations that will determine your menu hierarchy.
Breadcrumbs
Breadcrumbs, like Hansel and Gretel’s trail, lead website visitors back to where they came from. It
is a visual representation of the structure of your website, with links to parent pages.
Breadcrumbs are created dynamically by the programming built into our page templates, based
upon the associations you establish between your pages. In the example above, the FoodFest page
is associated with the Missouri Grown page, which is a “Local programming” menu page; both of
them are in the Adair County website.
So the template finds the “parent” of the current page (in this case Missouri Grown) and knows
that it’s part of the Adair site, so it can then construct the breadcrumbs.
Login
Address: http://extension.missouri.edu/WebTool
Use your MU PawPrint information.
Um-users is the correct domain for most MU
Extension employees.
Permissions are assigned manually for each person, so
if you find you cannot log in, contact Kate Akers for
assistance.
If you are a volunteer logging in with your MU Extension “passport”, the domain is irrelevant, so
you don’t need to change it.
WebTool instructions, updated June 2014, page 2
Below “Manage website,” select your website.
A second menu bar will appear at the top.
Menu bar options in the county website control panel
Home Page
This link opens the county website home page for editing.
Subpages
Here you create, manage and edit your optional local content pages. As you create new pages, they
will be added to this list. If you configured the page properties so that they are part of the “Local
programming” navigation, they will be grouped on this page in the same way.
You can choose to add these to the left-hand navigation under “Local programming,” or you can
link to them directly from the home page or other page within your site.
Click the edit link next to a page to open it for editing.
It is important to configure the fields on the Page properties tab when you first create your page.
These are the most important fields:
Title (used as the link on the menu, breadcrumbs and in the browser titlebar)
Friendly URL (like a file name: i.e. 4h or agriculture; .aspx will automatically be appended when
the page is displayed, so do not type it at the end.)
Page template (determines the layout for your page)
Banner image (if you have one customized for your county)
Display on Web (must be checked for anyone else to view the page)
Display as local programming menu item and the other questions in the box.
This is where you set the associations that will build your Local programming navigation
and breadcrumbs.
All the other fields are optional.
Specialty Pages
On each specialty page, you have the option to select a banner image for the top of the page. If you
don’t have one yet for your office, send a photo of your office or local landmark to the Web Team,
and we will create one or more banners for you.
Services
You may choose from a list of 20+ services with pre-written descriptions. The ones you
choose will appear on your county Services page, so they should accurately represent the
WebTool instructions, updated June 2014, page 3
services offered in your county. Once you add services to your list, you may click “Edit” next
to the name of the service to add local details to the general description. These additional
notes might include fee or scheduling information.
You can also reorder the services so the most important ones are at the top.
Location
The Location pages provide all the information a customer needs to contact or visit your
office. Most of the data is populated from the offices database, but you should add the office
hours, check that the map location is correct, and optionally add extra instructions that
may help someone locate your office or know where to park.
If your map is incorrect, contact the Web Team for assistance with correcting the link.
If your county office moves and your address changes, contact Diane Dews in MU Extension
HR with changes. She will change the address in the central database. Office addresses for
locations and individual employee listings on the website are all pulled from the central
data.
Council Pages
The County council page is populated from the council member reporting system. You can
add a sentence or two describing when and where council meetings are held.
Important! Use the council information system to update your council member lists after
each election (January). This system also provides tools for the election process, including
candidate lists and ballots. Contact Paula Hudson at ETCS for get access to the council
information system.
Faculty and staff
This page is entirely populated from our personnel data, so on this screen you can only
change the banner images for the top of the page in WebTool.
Employees can edit their directory information in WebApps to add professional and
educational background, areas of expertise and links to related programmatic websites.
http://extension.missouri.edu/webapps Go to Planning  Edit your directory information
If someone appears on your employee list that should not be there, or if someone is
missing, contact Diane Dews in HR. She can also correct titles and office addresses.
WebTool instructions, updated June 2014, page 4
Plans and reports
Upload and link to your annual reports and plans of work here. Browse… will launch the
file manager, which allows you to upload a file or locate a one already on the server, then
double-click the file name to pull the address into the field.
Only the plans and reports marked with a check next to “Display on Web” will be displayed
on the page. You may take the check out of Display on Web to keep them as an archive, but
not display them on the page.
Detailed, step-by-step instructions for posting plans and reports:
http://extension.missouri.edu/staff/communications/posting_reports.aspx
Video: How to post your annual report: mms://etcs.ext.missouri.edu/webteam/postannual-report.wmv
Donate
If your county has established an endowment and/or a spendable gift fund, this page
provides direct links to the MU Extension donation shopping cart with your county
accounts. In WebTool, you can write a customized description of the goals and priorities
your county council has set for the funds in the endowment and gift accounts. Writing a
clear and compelling statement about the local priorities can influence a potential donor to
give. Learn more about county giving:
http://extension.missouri.edu/extcouncil/donor-education.aspx
and
http://extension.missouri.edu/extcouncil/giving-online.aspx
Disaster recovery
This is an optional page that can be turned on quickly if there is a need. If flooding or severe
storms have affected your community, you can turn this page on and customize it with
contact information for local service providers. The page has links to statewide MU
Extension emergency management resources and FEMA assistance links built into the
template.
File manager
The file manager lets you upload document files and images to the Web server so they can be
linked or displayed in your pages. You can also create subfolders to organize your files, and you
can delete old files. In the Documents section, there is a Shared Documents folder that can be used
to share documents such as PDF newsletter files with other counties. You may upload files into the
subfolder for your region, then other counties in your region will see them in that folder and will
be able to link to them. Similarly, in the Images file manager, there is a Shared Images folder that
WebTool instructions, updated June 2014, page 5
has some graphics that all counties may use — several 4-H clovers, the Master Naturalist graphic,
etc.
Video: Using the file manager in WebTool
mms://etcs.ext.missouri.edu/webteam/screencast-using-file-manager.wmv
File manager tips
Click the + next to the folder names in the right-hand column of the file manager to expand and
show the contents of the folders
When uploading a new document, be sure you are looking at the contents of the destination folder
in the right panel of the file manager; otherwise, the file may land in the parent folder. I.E. if you
are uploading an annual report, expand your folder list and click on the name of the folder:
“plansreports” so that the right side of the screen shows the contents of the folder. Now click
“Upload” and select your file. It will be added to the “plansreports” folder.
If you upload a file to the wrong folder, delete it (right-click on the file name, then click delete),
then click on the correct folder and upload the file again. You cannot move files from one folder to
another.
Editing pages
Tabs
There are several tabs across the top of the editing area for the home page and subpages.
Switching between these tabs gives you access to edit different aspects of your page, plus quick
reference access to the MU Extension style guide and list of links to other pages in your site.
You will not lose changes if you switch tabs, but always remember to save your work before
leaving the page or closing your browser.
Page properties tab: The settings for your page. You need to configure these when you first
create your page. They will rarely need to be changed after that. If you are unsure what any
one of the fields is for, read the inline instructions accessed through with the blue question
mark buttons.
Web content tab: This is where you edit the content of your page. This content will fill in the
main column of your page template. When editing, you only see the content you can edit, in
the editor. To see how it will look, click Save, then click Preview page. This will open your
page in a new browser window so you can see how your page will look.
WebTool instructions, updated June 2014, page 6
CKEditor is a basic HTML editor that we’ve incorporated into this application. See the
itemized descriptions of the toolbar buttons at the end of this document.
Users tab: Displays the list of people who are authorized to edit pages in the website. If there
are limited-access users, you can grant them access to individual pages. They do not need
access to edit the home page in order to edit a subpage. Limited access users may be
volunteers who have an Extension Passport account, such as a Master Gardener volunteer
who has offered to update the county MG club page.
Page index tab: Displays a list of all pages currently in your website, with their URLs. This is
useful when you need to create a link to another page within your site. You can quickly find
the URL of another page, copy it, switch back to the content tab, open the link tool (Ctrl-K) and
paste it in the URL box.
Sharing tab: Displays options for sharing a page with another site. Before using this feature,
please read the Detailed Explanation of Page Sharing, available here:
http://extension.missouri.edu/webteam/
Page sharing is intended to reduce maintenance tasks by sharing content between two or
more sites. For example, if one 4-H specialist covers three counties and has one newsletter or
one page of summer camp information that is the same for all three, they can use a shared
page to just maintain that information in one place, rather than in all three county websites.
Style guide tab: Displays the MU Extension editorial style and usage guide for your
reference.
Save and Preview page
Save does just what it says – it saves your changes to the content and properties of your page to
the database. When you save your page, the changes are committed and a visitor will get the new
version when they load the page.
Preview allows you to preview your changes BEFORE you save, for the home page and subpages.
Changes must be saved for specialty pages such as the Donate page before previewing. If you
preview your home page or a subpage and you are happy with the changes, save the page right
away.
If you leave the page without saving, your changes will be lost, even if you saw them in the
preview.
WebTool instructions, updated June 2014, page 7
Pasting text from other documents
When pasting text to a page from other documents, particularly Word docs, Outlook email or other
Microsoft applications, you may get a pop-up alert asking you if you would like to clean the text
before pasting. Always say OK to this.
It will remove Microsoft-specific formatting code that is embedded in your text. By removing it,
the text will adhere to the default styles set for your page.
Leaving the Microsoft-specific formatting in your page can make the page display incorrectly. If
you preview your page or look at it in the browser and the fonts are wrong, sections are missing,
there are weird characters instead of punctuation, or unexpected images appear, it’s probably
because you didn’t clean the text when you pasted it. To fix it, try deleting the content from the
page and paste it again, being sure to say OK when prompted to clean the text.
Heading styles
Heading styles are predefined and consistent across the whole MU
Extension website. Here are a few tips for using them:
The first text on your page should always be Heading 1 style. The
headline for your page should exactly match the text for the link on the
navigation (defined in the Title property for your page). So if you created
a subpage and gave it a title of “4-H”, then the headline on the top of your
page should be “4-H” not “Youth development and 4-H.” Having your link
text and headline text match is important for usability and accessibility.
Think of the link as a road sign before a highway exit. If the sign says the
next exit is Providence Road, you expect to see a sign that says
Providence Road, once you take the exit.
Only use Heading 1 style for the headline of your page. Do not use it again on the page.
WebTool instructions, updated June 2014, page 8
Heading 2 and 3 are the same size; heading three is gold. You can use these as subheads in a long
page, breaking it into sections so readers can quickly find important parts. Heading 4 is slightly
smaller. It can be used as a tertiary heading or a label for a diagram, data table or other illustrative
content.
Why use headings in hierarchical order?
People who have vision or mobility impairments rely on adaptive technology to navigate Web
pages. It’s often very tedious for them to go through a Web page because they can’t quickly scan
and click. Providing hierarchical headings on pages gives them shortcuts to get to sections of the
page that they are interested in. Screen readers will read the list of headings on the page, as an
outline with one easy command. Voice command software recognizes commands to jump to
section headers.
Additionally, for all users, hierarchical sections of a page with clearly defined headings increases
usability of your pages for all users. Headings are intuitive indicator of content organization.
Maximize/minimize editor window
A cautionary note
The toolbar has a handy option that allows you to maximize the size of the editor window so you
can see more of the content area. It’s fine to do this, but when the editor is maximized, you cannot
see the “Save” link. Before leaving your page, you must use the same toolbar icon to revert the
editor window to its original size and click “Save.” If you don’t do this before you close your
browser, your changes will be lost.
Important tips




When you are editing your home page or subpages, refer to the Style guide tab when you
are uncertain exactly how to format something like a time and date, academic title, file type,
etc. The Style guide is there to help you make your pages appear professional and
consistent.
WebTool has a lot of built-in help, explanations and examples to guide you. Be sure to look
at the help if you don’t understand what a field is for or what input is expected.
Make sure you give your subpages friendly file names. Keep them short but recognizable.
Make the link text, the title in the page properties and the title in the body of your subpages
all match.
WebTool instructions, updated June 2014, page 9
Most needed how-to’s
Create a link to another page within your site
1. On the page, position your cursor where the link will
go. Type the text that the visitor will click on. This
should be meaningful (not “click here” or “read more”)
and should match the title of the page you are linking
to. (Remember the road sign analogy?)
2. Switch to the “Page index” tab and look for the page
you are going to link to. Highlight and copy the URL
(Ctrl-C). Switch back to the Web content tab.
3. Highlight the text you just typed on the page that will
be the link.
4. Click the Link icon on the toolbar, or hit Ctrl-L on the
keyboard. This opens the Link dialogue box.
5. Paste the URL for the destination page into URL field.
6. Click OK.
7. Preview your page and test the link. Save your page.
Create a link to a page on an external website
When linking to a website outside of MU Extension, it is our style to open that link in a new
browser tab/window so that the visitor still has our website open in the original browser
tab/window. For this purpose, opening in a new window is the same as opening in a new tab. Tab
vs. window is defined by the browser settings, not the Web page link.
1. On the page, position your cursor where the link will go. Type the text that the visitor will
click on. This should be meaningful (not “click here”) and should match the title of the page
you are linking to. (Remember the road sign analogy?) You may want to specify the
organization or website to which you are linking.
Example:
Basic Mushrooming, Missouri Department of
Conservation
2. Highlight the text you just typed on the page that will
be the link.
3. Click the Link icon on the toolbar, or hit Ctrl-L on the
keyboard. This opens the Link dialogue box.
4. Paste the URL for the destination page into URL field.
5. Click on the Target tab in the Link dialogue box
6. Choose “New window (_blank)” from the pulldown list.
7. Click OK. Test your link and Save the page.
WebTool instructions, updated June 2014, page 10
Create an email link on your page
1. On the page, position your cursor where the link
will go.
2. Paste or type the email address.
3. Highlight the email address and click Ctrl-L (or click
the link icon)
4. Choose “E-mail” in the Link Type pulldown box.
5. Paste or type the email address into the E-mail
address field. Subject and Message Body are
optional fields and not typically needed.
6. Click OK. Test your link and Save the page.
Link to a document such as a PDF newsletter
1. Use the file manager to upload your finished document to the website. Be sure to place it in
a folder with similar files (i.e. 4H folder for all 4H documents). PDF format is preferred over
Word Docs, as PDFs are viewable in all modern browsers. Do not upload a MS Publisher file
for website display. Few visitors will be able to view it.
2. On the page, position your cursor where the link will go.
3. Type the text that the visitor will click on. This should be meaningful and should match the
title of the document you are linking to.
4. At the end of the link text type (PDF) if it’s a PDF file. If it is a downloadable file, you must
indicate that by showing the file type in parenthesis at the end of the link. For more
detailed instructions, see the Style guide under “File format and linking to documents”.
5. Highlight the title and file type label, then click the link icon or Ctrl-L.
6. In the Link dialogue box, click “Browse server”.
7. Use the file manager to locate your file and double-click on it. This will bring the URL for
the file into the URL field.
8. Click OK. Test your link and save your page.
Tips about posting PDFs and Word documents
PDFs and Word docs are quick and easy ways to post content, but they can be slow to download
than a Web page. If you want them to be helpful to visitors, not frustrating, follow these tips:
1. On the page where you post the link, give a little more information along with the link.
Example: Instead of just saying “Farm tour flyer (PDF), give the time and date of the event,
location, cost and other pertinent details before or after the link. If someone spends 3
minutes downloading a flyer to find out the event is on a weekday when they will be at
work, you have wasted their time (and maybe their data plan).
Example:
Farm Tour
9 a.m. to 4 p.m. Fri., May 1. $40 fee per person. Lunch and transportation included.
Registration deadline is April 20.
Farm tour schedule and registration form (PDF)
WebTool instructions, updated June 2014, page 11
2. Do not use a graphic in your PDF to convey information. If you create the flyer in a graphics
program and save it out as a graphic (JPG, PNG, GIF, etc), then convert it to a PDF, then the
PDF is just a graphic, not text. Without the text, your PDF is not searchable (Google will
ignore it), it will take longer to load, and it’s completely inaccessible to anyone using
adaptive technology.
Working with photos
WebTool does not include any tool for resizing photos so that the file size is reduced. It can specify
a smaller display size, but this just “squishes” the image, it does not reduce the file size. If you
upload a 2Meg photo to your site but just display it as a thumbnail, the visitor still has to wait to
download that 2 Meg file before they will see the thumbnail.
You must reduce your photos before you upload them to the server. There are many tools
available to do this.
Already installed on your computer are two image editing tools: Gimp and Microsoft Picture
Manager. On the Web Team support page: http://extension.missouri.edu/webteam/ I’ve linked to
a tutorial for resizing images with Gimp. It’s not the easiest program to us.
There are many free online tools for resizing images. These are easy to use, but you have to upload
your image to the service, then use their editing tools, then download the resized file. It’s fine to
use these services if you just have a few images to resize. One of the best sites is
http://www.resizeimage.org
People pages
Individual directory pages are prominently linked in county sites and other places throughout the
MU Extension website. It is important that everyone review their profile page and make sure your
information is accurate and up to date, including your photo. It is particularly helpful to visitors
for faculty members to enrich their personal profile with professional areas of expertise and
interest, academic background and related links to programmatic Web pages.
You may edit your directory information in WebApps. Detailed instructions are here:
http://extension.missouri.edu/webteam/2009/EditDirectoryInformation_0409.pdf
If you want to provide a new photo, send a JPG file as an email attachment to Kate Akers.
County resources
County resources are visible on the MU Extension main site when you localize (choose a county on
the right side) and go to a category page from the brown arch (i.e. Lawn and garden). If a county
has created resources for a given category, they will appear in a tab in the right column.
These resources are akin to Google sidebar ads — they are a way to advertise and provide a link to
information about local programming side by side with statewide content.
WebTool instructions, updated June 2014, page 12
A good example of a resource:
Adair Master Gardener Training begins in February. Sign up today! (link to your MG page with
course and enrollment information)
To create and manage resources, use the “Manage county resources” tool in WebAdmin.
For detailed instructions, see http://extension.missouri.edu/webteam/
WebTool instructions, updated June 2014, page 13
WebTool content editor (CK Editor)
Toolbar functions
View or edit the document HTML source code (for advanced users).
Cut, copy and paste the highlighted text to the clipboard.
Paste the data copied to the clipboard as plain text with no formatting.
Paste content copied from Microsoft Word or similar applications. This will prompt you to clean up the
pasted content by removing formatting code embedded by MS Word or other MS Office applications.
Spell check the text in the document.
Turn on and configure Spellcheck As You Type.
Undo or redo the most recent action taken.
Find a word or phrase within the document.
Find and replace a word or phrase within the document.
Select the entire text in the document.
Remove the formatting from the highlighted text.
Applies bold, italic, underscore or strikethrough formatting to the highlighted text.
Superscript or subscript the highlighted text.
Creates numbered or bulleted lists.
Increase or decrease the text indentation.
Format a block of text to identify quotations
Sets the text alignment (left, centered, right or justified).
Converts or removes the text in hyperlinks. It may also by used to manage file uploads and links to files
on the Web server.
Inserts or modifies a link anchor.
Inserts images into the document.
Creates a table with the defined number of columns and rows.
Inserts a divider line (horizontal rule).
WebTool instructions, updated June 2014, page 14
Inserts symbols & special characters (accented characters, trademark, currency symbol, etc.).
Styles & formatting apply predefined formatting options to sections of your page. You may use the drop
down boxes to apply styles, set the font, its size, etc. To remove the applied style select the style name
again.
Maximizes the editor size inside the browser.
Shows where the block elements boundaries in the text.
Shows information about the CKeditor.
WebTool instructions, updated June 2014, page 15