University of Missouri Outreach and Extension
Extension Web Support

Tips and Cautions for Working with County Web Pages

Server Side Includes

When you first start editing your newly converted pages, you might ask "Why do I see a comment like "Search form included here. Do not delete." when I edit my page, rather than seeing the search form?"

The answer is because we are using a device called "server side includes" (SSI) to combine content from different places in the Extension web site to build these pages.  The reason for doing this is to reduce the amount of day-to-day maintenance needed on the county "topic" pages (ie Ag, Business, Home & Garden, etc) and to make it easy to change sections across all our county sites at once.  For example, there might come a point when we change to a different search engine software, and the code to make the search box work would need to be changed. Instead of going to every page in every county site, it can just be changed in the one SSI that is housed in a central location.

This is very similar to how we have been implementing footers with the FrontPage Includes, but the difference is that the search include, services descriptions, topic page introductions, and statewide resources sections are all housed centrally at the state level and maintained by the extension web team (webmaster, communications folks and program leaders).  The "regional resources" sections of the topic pages are maintained at the regional level and the files reside in the regional web directory. 

FrontPage includes are limited to including files that are within the same FrontPage Web (ie the same county site), so we are implementing these Server Side Includes using a different method that FrontPage isn't able to display in the editor.

Pages with Server Side Includes must be named with the .shtml ending in order for the SSIs to appear when the page is viewed in a web browser.

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@umsystem.edu for assistance.

You can also use these Newsletter templates.

 Table Size

The new format 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.

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 (ie 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

More References:

Extension Web Publishing Policies http://extension.missouri.edu/webteam/docs/policy.html

Acceptable Use Agreement and New Account Request
http://extension.missouri.edu/webteam/docs/acceptable_use_agreement.html

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