The University Website User Interface Elements
While generating your TeamSite content, it may be helpful to have an idea of what different elements will look like to the end user. The screen shots below provide illustrations of the different elements that you can employ in the CMS. More details on creating and editing a page in the CMS will be provided in another tutorial.
You may also visit the "Sample Elements" page to see all of the elements in the exact areas in which they would be displayed when utilized in an actual web site.
When building your website you will be unable to alter the university logo and links at the top of the website. They are included on every page created in the CMS. The navigation on the left hand side of your site can be modified within the CMS to include the appropriate navigation for your site.
Content Body Elements
The body of a webpage is the center area where the bulk of the information will be displayed.
A FAQ organizes frequently asked questions and their answers. Visitors will click on the "question" and the webpage will link down to the "answer". After reading the answer the visitor will have the option to click on the "back to top" link to return to the list of questions, or they can continue reading answers. In the image below the list of "questions" is outlined in red, and the "answers" are outlined in green.
Profiles provide CMS users with an easy to read layout to display staff information. You can create profiles for each of the employees in your department.
Personnel Listings
A personnel listing allows you to summarize contact information for the employees in your department.
Image Galleries
Image Galleries can be used to display up to three pictures at a time with captions. There is also an option to include only one image. The caption area is outlined in red in the picture below.
Categorized Links
When you want your links to stand out, you should use a "Categorized Link" block. It also allows you to organize your links into columns (not shown in the image below). If you're looking for a more simple presentation for your list of links, there is also an option to simply list links, without all the extra color.
Text Areas
Text areas are simply areas to display large (or small) amounts of information with typical Word formatting options (bold, italicized, etc.). These areas also give you the option to include hyperlinks and images.
Due to the fact HTML areas are not seen directly by a visitor to the live site, this element and its potential uses are covered in the "Using the HTML Element" section.
Breadcrumb Trails
Breadcrumbs are displayed at the top of each page created in the CMS. This feature allows users to easily back track through a website to review information. A sample of what the breadcrumb trail will look like to users is shown outlined in red in the image below. Breadcrumb trails cannot be removed from a page.
RSS Feeds can be used to show multiple news entries pulled from different pages, such as blogs. There is also an option to have a feed that does not scroll. There are a few different options for what type of RSS Feed you can place on your page. There are horizontally scrolling RSS Feeds, and vertically scrolling RSS Feeds.
Examples of Static RSS Feeds:
Examples of Scrolling RSS Feeds:
You can obtain a feed of information from a blog located at http://blogs.umflint.edu.
The Flash Video Component can be used to add flash videos to your page. Add in the information as shown in the picture below to insert a flash video. You have to import a thumbnail image of the video as well as the video itself.
Side Bar Elements
In addition to the content in the body of the web page, you can also include some items on the edge of your TeamSite. This feature is particularly useful for highlighting important information, links, or images that you want the user to notice. The side bar area is outlined in red in the image below.
In addition to categorized links and link blocks in the body of your site, you can also include links in the sidebar area. This position is perfect for bookmarks to spots on the current page, or to other pages in your site.
Text Area
You can also highlight important announcements or contact information in text areas that are displayed in the sidebar on the right side of pages in the CMS.
Images can also be displayed in the sidebar, but when displayed in this manner they will not have a caption area.
Themes
The UM-Flint CMS provides users with the option to select a theme for new pages created for TeamSites. Each theme slightly alters the default settings of the CMS. Here are a few TeamSites in the CMS that utilize different themes:
Thompson Center for Learning and Teaching (Maize Theme)
Academic Advising and Career Center (Maize Theme)
The maize theme changes the background colors for sidebars to maize, as well as altering the categorized link backgrounds to yellow. Here are a few examples of what the maize theme will make your TeamSite look like.
Border Theme
The border theme will remove most background colors from your TeamSite. For example, the links will not be outlined by blue or maize, and neither will the images.
