Skip to content. Skip to main navigation.

Website Guidelines

This document provides general information about the setup of Student Affairs websites within Cascade Server. More specifics about your department's site can be found in the /__internal/documentation/ folder of your site. For more on Cascade Server training, see www.uta.edu/oit/cs/training/cms.

Table of Contents


Folder Structure

Resource Folders

Folder names with a leading underscore (“_”) indicate that the folder contains site resources that are used to format and enhance your web pages. These folders should not contain actual web pages.

FolderDescription
__internal Contains assets that are internal to the CMS. Assets in here can be thought of as building blocks for your CMS pages. They are not published to the web server as is, but they are included in pages that are published to the web server.
_css Contains CSS file for your site. In addition to this file, your site also uses a CSS file that is shared among all UTA websites that use the new design template.
_documents
       or
_downloads
This is provided for organizational purposes, so you can put all of your downloadable documents in this location.
_images Contains images used in your website.
_js Contains javascript files used in your website.
_sidebars Contains sidebars that can be placed in the right column of your webpages.

Content Folders

Besides the listed Resource Folders, pretty much every other folder in your website will be a Content Folder. These are folders that contain your web pages, with the actual website content. Note that all Content Folders need to contain a page with a CMS system-name of “index”. The left-navigation menus and the breadcrumbs may be confused and unpredictable if a Content Folder does not have this page.


Pages

Page types

There are five basic webpage types:

  1. Home Page – This page type is only used for your website’s home page, and is not available in the New > Page CMS dropdown menu. It allows placement of a banner image at the top of the page, and selection of up to two sidebars.
  2. Landing Page – These are main pages for each section of your site. Landing pages have a banner image at the top of the page. They should have a CMS system-name of “index”. Landing Pages allow selection of up to two sidebars in the right column.
  3. Secondary Page – This is a “normal” page of your website. It allows selection of up to two sidebars in the right column.
  4. Secondary Page - wide – This is a “normal” page of your website, but it uses the full width of the page for the content area, and does not allow placement of any sidebars in the right column. This is useful for pages with forms or tables.
  5. MachForm Page – This page type can be used to display a MachForm form in your website. It does not allow Sidebar placement, since it uses the full width of the page for the form. See the section below for more information on MachForm.

Fields

These are the fields you will see when editing pages. Some fields are not available on all page types.

  • Title – This is the main title of your page. It is displayed at the top of the page in bold orange text, as well as in the browser’s title bar. It is also used to automatically generate a CMS system-name for your page.
  • Short Title (optional) – If the Title of your page is very long, you may also enter a shorter version in this field. The Short Title will be displayed in navigational items where space is limited, like the left column navigation and breadcrumbs.
  • Description (optional) - The contents of this field will be put in the HTML <meta name="description"> tag for the page. When your page is pulled up as a search result, this content is normally what is displayed. (If you leave this blank, the search engine will normally use some text from the page)
  • Banner Photo (Landing Page only) - This is the banner image to be displayed on a landing page.
  • Banner Alt Text (Landing Page only) - This should be a short description of the Banner Photo, that will be useful to unsighted visitors and those who cannot see the image.
  • Content – This is the main content for your page.
  • Sidebar 1 (recommended) – Sidebar to be placed in the right-column of the page. To select a sidebar, click on the block icon. In the popup window that comes up, navigate to your /_sidebars folder and select a sidebar. Not available on Secondary Page - Wide, or on MachForm page types.
  • Sidebar 2 (optional) – You may choose a second sidebar to be placed below Sidebar 1.
  • Related Links (optional) – These are links that show up in the left-column of your page, underneath the “Browse Student Affairs” box. Related Links may be added to any of the page types, even the home page. If no links are entered, the Related Links section will not show up. You can have multiple Related Links by using the + and – icons for this field.
  • Hide from menu (optional) - This option is found in the Metadata tab while editing a page. Checking this box will cause the selected page to be hidden from the left navigation menu. This option should only be necessary in special circumstances.

Page Names

Proper naming of pages can help your pages to work correctly for all visitors, and also make them easy to find in the future. Page names are set in the "system-name" field in the CMS. This name is then translated to a similar URL when that page is published. The following rules of thumb are recommended when naming pages:

  • When creating a Landing Page, it will automatically be given the system-name of "index". Usually this is what you want.
  • Don't use spaces in your page name, because browsers and servers have to do special translation for space characters.
  • Don't use uppercase in your page name, because then you add the complicating factor of remembering case when typing URL's.
  • Use hyphens "-" to separate words in page names, eg "marketing-material-guidelines".
  • Make page names as short as possible, while still describing the content of the page. Keep in mind that the folder structure also helps describe the content of the page, so your page name can be shorter.

Photos

Landing Page Photos

Landing page banner images are located in the /_images/banners/ folder. Their dimensions are 711 x 202 pixels. You can set the photo for a landing page by choosing it in the "Banner Photo" field when editing the page.

Sidebar Photos

Sidebar photos are located in the /_sidebars/images folder. They should be one of the following dimensions:

  • 200 x 150 pixels
  • 200 x 112 pixels

In-Page Photos

In-page photos are located in the /_images folder. When possible, sidebar photos should be used instead of in-page photos. In-page photos can be the following dimensions:

  • Landing or Secondary page – up to 400 pixels wide
  • MachForm or Secondary-Wide – up to 672 pixels wide

Sidebars

Sidebars are “teaser” right-column elements that can go in your pages. They can be used, for example, to promote related pages on your site, or to call attention to certain information on a page.

You can select up to two sidebars per page, and it’s generally recommended that you have at least one sidebar on pages that allow it; otherwise you will simply have a blank right column that looks like it’s missing something.

How to Add

To create a sidebar, navigate to the /_sidebars folder in your CMS site. From the CMS “New” dropdown menu, select New > Sidebars > Local Sidebar. (you may have other sidebar types available in the dropdown menu, but the others are more advanced types)

You can enter a title, image, your sidebar content, and any links you would like displayed at the bottom of the sidebar. If you enter an image, please also enter a brief description of the image in the “Image Alt Text” field, to ensure accessibility for unsighted visitors and visitors who cannot see the images.

Reports

Each Student Affairs CMS site has a “Sidebar Report” page, which will show detailed information on what sidebars are used on what page. The Sidebar Report page is located here:

  • /__internal/documentation/sidebar-report

MachForms

Some websites have web forms that are setup and managed in a separate application called MachForm. MachForm allows you to easily create and manage your own web forms, which can then be embedded into your website in the CMS. You can view form entries or create new forms by logging in to MachForm with your UTA NetID at this location: https://www.uta.edu/php-lib/machform/

(If you need access to MachForm, please email Daniel Evilsizor, Assistant Director of Online Communications, at daniel.e@uta.edu)

Adding a New Form

1. Create the form in MachForm

Log in to MachForm and choose “Create new form”. Create your form and save it. Now you will need to find the “id” of your new form. Currently this is not straightforward, but if you edit your form, then look up in the URL bar of your browser, it will say something like “edit_form.php?id=15”. This id number is what you are looking for.

2. Create a MachForm page in the CMS

Navigate to the folder in the CMS where you’d like to add your form. Select New > Pages MachForm from the CMS drop-down menu. Complete the normal page fields like Title, etc. Then, at the bottom, enter your MachForm ID in the field provided. Don’t use or worry about the Custom Review Page field, this is an advanced-use field that is rarely needed.

Now publish your new page to the web server, and you should see your form! (The form won’t actually show up in the CMS due to the mechanics of how the form is displayed)


Publishing

Publishing is the act of moving your files from the CMS to the actual web server. Remember, your pages in the CMS are separate entities from the pages on the web server.

If you are making minor changes to your website, you can simply publish the individual page you might have changed (once you are done editing). However keep in mind that even some small changes may affect other parts of your website (for example changing a page name will affect the navigation menus on other pages).

If you’d like to publish your entire website, you can simply select the “Base Folder” in the CMS, and choose the Publish tab from there.

Destinations

When you publish from the CMS, it lets you choose what Destination(s) to publish to. These Destinations represent the web servers.

There are three main web servers available to most CMS sites. You're probably familiar with the Production web server, located at www.uta.edu, but there are also other web servers available for testing and previewing web content.

  • Production (PROD) – This is the actual “live” web server, located at www.uta.edu/yoursite/
  • Development (DEVEL) – This is a testing web server, located at www-devel.uta.edu/yoursite/
  • Test (TEST) – This is a testing web server, located at www-test.uta.edu/yoursite/

Keep in Mind

When deleting or renaming a page or file, always remember to unpublish it first before you rename or delete it. This ensures that you don't end up with any "leftover" pages on the web server, which can become confusing.


Style Guide

Headers

Correct usage of headers is important for page organization and accessibility. There are four header styles available for use in the content area.

Heading 2

This is used only for the page title at the top of the page, and should not be used anywhere else.

Heading 3

This is a Level 3 heading, used for major page sections.

Heading 4

This is a level 4 heading, used for page subsections.
Heading 5
This is a level 5 heading, used for page subsections.

If you find that your page makes significant use of the Heading 5 element, you may want to consider breaking your page up into multiple pages.

Tables

Tables are automatically “striped”, where every other row is given a light-tan background color. Table headers should be used when appropriate, and these will have a blue background color.

Column HeaderColumn Header
cell cell
cell cell
cell cell

Links

The CMS allows you to create links to other webpages and documents. There are two types of links

  • Internal – These are links to documents or pages within your CMS website. You can create these links by choosing a page or document in your CMS site.
  • External – These are links to documents, pages or sites that are not in your CMS website. This could be another UTA website or webpage, or any other webpage on the internet.