University of Missouri Outreach and Extension
Extension Web Support

County Web Site Walk-through

MU Extension county web sites were designed so they

  • are visually consistent
  • are navigationally consistent
  • require minimal regular maintenance and updates
  • are flexible enough to allow for expansion and frequent updates
  • take advantage of statewide data sources such as the personnel directory
  • incorporate re-usable content pieces that can be updated once to affect many pages

Dynamic Web application pages

Microsoft FrontPage is the supported software for editing the basic HTML pages but it is important to understand that not all "pages" in county sites can be edited through FrontPage.  The links on all county pages called "Calendar," "Staff," and "County extension council" are dynamic pages that display information from databases. Each of these items have separate ways of updating their content.

Re-usable content pieces

Some sections of content on the county office web sites are repeated on many pages. For example, the block at the bottom of each page (the footeR) with the MU Extension logo and local contact information is repeated on each page in the county site.  The search tool appears on every page in the MU Extension Web site.  These blocks of re-usable content are called server side includes (SSI). They are stored as individual files with the small piece of content (such as the footer) and then included or built into typical HTML pages so they display as part of those pages.  In this way, information can be updated easily across all the pages that use those includes.  In the case of the county footer, if the county e-mail address changes, that is updated in the footer file and it automatically changes on all the pages in the county site.  In the case of the search box, if we make a change to the search tool, we change it in one file at the state level and it is updated instantly on over 10,000 pages on our server that use it.

When you edit your county Web pages in MS FrontPage, you will see some of the included files, like the footer, but others will only display as an icon, letting you know there is an included file there.  There may be a comment next to it such as "Search form included here. Do not delete."

On the topic pages such as Agriculture and Home and Garden,  you can add local content above the regional include. For example, you may want to publish your local agriculture newsletter as a PDF file on the county office Web site and link to it there on the ag page.  It's perfectly fine to do that; just be careful not to delete the anchor points for the server side includes.

You will not be able to edit the content in the SSI includes, except for the county footer.

Pages that use SSI content pieces are:

  • Search tool include appears on all pages that use the standard templates.
  • All the subject-matter pages (Ag, Business and Workforce, etc.)
  • Services page. If you do not offer certain services at your office, you can delete the anchor point for the service that you do not offer (i.e. canner gauge testing).
Templates

In your county site you will find a "templates" folder that should contain two files -- basic-page-template.html and two-column-template.html.  You can use these to create new pages that have the standard layout, graphics, fonts, colors and search form.  Just open the page then "save as" a new file name and make your changes.

If you have a document that requires a layout different from the templates provided, contact Kate Akers, akersk@missouri.edu  for assistance.

Organization & file naming

Keep files organized as new content is added. Graphics and photos (.GIF and .JPG files) should be stored in the images folder. If you have more than 2 pages for a specific topic (i.e. ag related, or 4-H), make a new folder for storing those files together.  Newsletter files should be stored in a separate folder, with article or issue files named consistently.  You might want to use dates in the file names to make it easy to clear out old items down the road.

Guidelines for naming files and folders:

  • DO NOT USE SPACES in file or folder names.
    Some browsers do not interpret spaces in URLs correctly, and when a URL with a space is pasted into an e-mail or other document, often everything after a space is not interpreted as part of the URL. Some browsers will substitute "%20" for spaces in a URL, 
  • Use lowercase letters in file and folder names. 
    Files and folders in lowercase are standard in the web community. Some web servers are case sensitive while others are not. Our server is case sensitive, so agriculture.html is not the same as Agriculture.html - they could be two separate files. But if you are reading the URL to someone and forget to specify the capital A, they will get to the wrong file or get an error message.

Always Use Paste options when importing text from other sources

See pasting instructions for FP2003

When transferring content from MS Word documents to the web, you can copy-paste from Word to FrontPage but if you just simply Ctrl-V or choose "paste" when placing your content in FrontPage, it will bring in a lot of formatting information that is unnecessary and in some cases will really mess up your pages and the template layout and fonts. 

If you will use the paste option "Keep text only", your text will take on the standard colors and fonts used throughout the site.

Fonts

We have pre-set all the fonts in the new templates to sans-serif fonts that are clean and easy to read. Please don't change the font faces. If you paste text into your page and the font looks wrong, highlight the section of text and hit Ctrl-spacebar to revert the text to the defaults for the page.

You can increase the size of a font and/or make it bold to draw attention to a section. 

To make a font a heading, we've pre-set a few special styles to use. In the pull-down box on the far right side of your formatting toolbar, the default setting is "normal". if you pull that menu down, you can set a section of text to H1, H2, H3 or H4. These styles will be larger and color coordinated with the templates. 

This is H1 style

This is H2 style

This is H3 style

This is H4 style

Table Size

The county pages use tables to control the width of the entire page, restricting it to 640 pixels wide.  It's designed this way so that the pages will display the same on all monitor sizes and resolutions, without having to scroll left-to-right on low-resolution screens.  Additionally, 640 pixels is approximately 7 inches wide when printed, so the width setting insures that your pages will print nicely.

It's easy to identify if the table width setting has accidentally been changed because the red title bar at the top may wrap if the browser is open wider than 640 pixels. 

Another reason this may happen is if you have some content element in your page that is wider than 640 pixels. For example, two photos that are each 350 pixels wide set next to each other will force the table to expand to 700 pixels wide to enclose them. To solve this, put one picture below the other or resize the photos to be 320 pixels wide or fewer.

Example: if you see the header bar repeat like this, the outer table width is wrong or some content in your page is too wide.

 

Further reading:

Instructions for customizing county site front page
http://extension.missouri.edu/webteam/conversion/customize-front.html

Content link suggestions for county sites: http://extension.missouri.edu/webteam/conversion/county-links.html

Logos and graphics: http://extension.missouri.edu/webteam/style/graphics.html

 

Return to the main Web Support page
Outreach and Extension Kate Akers  akersk@missouri.edu
Last revised: 12/12/06		 Find an Office