The look and function of our website is based on layers of design and content. Design styles are applied to each page automatically through a design template. Then, local editors select predefined styles through a content management interface, and workarounds are applied by directly editing the source HTML by advanced users. First, let's get acquainted with the elements of a standard page as shown in the example below:
The three main sections of a page, vertically, are the header, body, and footer. The header and footer are designed in conjunction with the USFSP web group. At the bottom of the header is a library-specific navigational pulldown menu, which is managed by the library's web committee. The footer is also an area where both library and USFSP sections reside. The system footer at the very bottom under the yellow line, and the USFSP quicklinks at the very top of the header are institution-wide standards. The library footer, directly above the yellow line in the footer is also managed by the library and we can add/remove links as necessary.
Horizontally, our pages either contain a single box with all content, or more frequently have two sets of content boxes, with the left 25% as one column, and the remaining 75% as the right column. Page navigation can be selected to be at the top of the page or on the right. As you can see from the example below, content managers can edit all of the horizontal sections, add a 100% section across the top or bottom (below the header or above the footer) as well as add profiles, page navigation, and content in the right box:
In order to edit a page, you must first be able to log on through the link at the bottom of any managed page, Login to LibApps, which signs you into the library's web instance. Next, enter the Graphical User Interface (GUI) editor for the content box associated with your content. In the example above, you would click on the bottom right of the content box, and then choose if you want to edit through the GUI or edit HTML directly (blue box on right of example, above).
Once inside the editor, there are predefined styles for you to choose from to format the headings, paragraphs, and other items of the page. Some styles are selected automatically, such as the Title font, the profile items, and the breadcrumb navigational elements.
In this example, the main heading item is being edited, which should be Heading 4 paragraph Format, which creates an <H4> tag surrounding it in the HTML code:
Below is a listing of each of the editable areas and the fonts and sizes to be used:
|Area Name||Style Name||HTML Code|
|Main Heading||Heading 4||<H4>|
|Sub Headings||Heading 5||<H5>|
|Emphasized Content||Special Container||multiple|
Note that the editor is unlocked, and so you should only use the styles mentioned above and not from the Font List, or the pages will have conflicting styles. Also notice that while in the GUI, some items may not reflect their actual size. Always view the end result through the browser to see how the fonts will look on the finished, published page.
The USFSP library website uses a collection of colors and styles are are a subset of the styles approved for use by USF Marketing & Communications. Note that Library Research & Instruction LibGuides predate the web site and use different standard colors recognized within the library LibGuides community.
|Color Name||Web Hex Value||Usage|
|USF Green||#006747||Header & Footer Background, Active Links|
|Apple||#9ccb3b||LibGuides Header, Submit Button Background|
|USF Gold||#CFC493||Dividing Line|
|Sky||#249eba||Icons, hover or Mouseover Color|
|Sea Glass||#80B0A6||Special Attention, Emphasis Color|
|Light Gray||#e8e8e8||Emphasis Box Background|
|Slate Gray||#466069||Emphasis Box Border|
Library guidelines for use of icons, items to appear on pages, Departmental Landing Pages vs. Standard Web Pages vs. LibGuides, are found in the listings below.
Web page navigational styles are selected by the content manager, and consist of either a tab layout on the top of the page, or as a sidebar with buttons. Which method is best should be based on how many related subpages exist and how they should be organized. To select a navigational style, open the GUI for the page in question and select Guide Navigation Layout from the Navigation Icon (highlighted in yellow in the following example below:
Layouts are predetermined, and consist of the following types: Top Navigation, Side Navigation, and sizes of 25%:75%, or 100%.
Below is a listing of all of the existing Layout Styles Available to select:
Exceptions to these layouts are the main page and the Departmental Landing Pages, which have Icons to promote areas and varied navigation.
All pages should have the following minimal informational elements, dictated by a design template.
Departmental Landing pages should have the following minimal elements, in the same locations:
Create A Web Page
The process of creating a new web page or course guide, step by step.
https://usffl.service-now.com (Select Nelson Poynter Library from Location dropdown)
Submit a USFSP library helpdesk ticket to request training through Systems for one-to-one introductions for content managers. Content Managers may also submit a ticket to the USFSP library helpdesk to answer questions related to web tasks. Systems can help be sure pages are editable by content managers, and assist in any design issues.
SpringShare's LibGuides v2 Training Section on their website reviews all of the major functions of page building.
Northwestern has a set of handy, limited topic tutorials that are specifically written for use by content managers.