Skip to content..
Skip to left column..
Skip to right column..
Sutter County Seal - Click to go to the home page.
Sutter County website banner General Website Help
Sutter County website banner Help & Info Channel
Sutter County website banner Sutter Buttes - the smallest mountain range Sutter Buttes - the smallest mountain range Sutter County website banner


 

spacer
Web Page Layout
To help explain the various components of the new Sutter County web pages, a page layout or map is provided. The image below identifies the primary components of the page with a number. Following the image is an usage section describing each numbered element.

You can hover over the numbers with your mouse to view the name of each element. Clicking on the number image will position you to the description.

Current category banner
Current channel banner
Navigation bar or bread crumbsHandy tools
Main menu - channel list
Page contentCurrent channel links
Popular links
Channel link icons
Right gutter region
Left gutter region

Usage
  1. Main Page Banner
    The main page banner identifies the current category for a given website channel or department name if within the government channel.
  2. Channel Banner
    Identifies the current channel. The channels are color coded for easier identification and corresponds to the channel icons explained below.
  3. Navigation Bar
    Sometimes referred as bread crumbs, the navigation bar identifies where you are located within the website for the current page. If you choose, you can click on any of the navigation bar nodes (links) to access the default page for that node.
  4. Main Menu
    The main menu provides access to the various website channels as well as to a general website help and information section. NOTE: The menus can be opened or closed by clicking on the arrow image on the menu title if Javascript is enabled on your browser.
  5. Popular Links
    Quick access to numerous popular destinations on the Sutter County website can be achieved by clicking on any of these links. Note that the links with a solid right pointing arrow next to it indicated a menu item that can be opened to reveal additional selections by clicking on it.
  6. [Back to page layout image]

  7. Current Channel Links
    This box displays category links for the current channel. The links will vary depending upon the channel.
  8. Channel Link Icons
    On the various portal pages for each channel, links are listed for additional information. Beside each link is a color coded icon that represents the channel on which the linked page resides. By noting these icons, a user can be aware of any channel change if they click on the link. Further explanation of these channel icons can be found by clicking on the Channel Link Icon item in the Help & Info Links box to the right.
  9. Handy Tools
    Some shortcut icons are provided to: open a printer friendly page for nicely formatted printing, bookmark the current page, to contact the webmaster and view the current Sutter County weather. If a weather advisory is in effect for the region, then a link can also be seen here.
  10. Page Content Region
    This is the main region of the webpage that provides the specific content and is bounded by the banner on top, the left gutter region, the right gutter region and the bottom bar.
  11. Left Gutter Region
    Contained within the left gutter region are three boxes: Site Search, Main Menu and Popular Links. These three items remain static (do not change) throughout the website and are accessible from almost every page (printer friendly pages only include the content and not the page template).
  12. Right Gutter Region
    In contrast to the left gutter region, with the exception of the Handy Tools section at the top of the region, the right gutter is dynamic in that the contents will vary based on the current page and channel being displayed. For example, the front page only shows the current news briefs, while the Information Technology Department page will show the IT Links box, the Government Channel Links box and the County Department Links box.
  13. [Back to page layout image]

.filler
.filler