The most common type of document is a "page". In this section, you will learn how to create, name, and add common features to a page.

Creation Methods

"Add Content" Method


Note: If you do not see your website in the "Add Content" menu, or if you do see your website yet don't see the particular document type you want to create, then you can ask ITWeb to set that up for you. If you do not want to have this set up for you, you may use the "Copy Blank Page" method below.

  1. Navigate to and open your website's folder through the Site Content panel
  2. In the top-left corner of the page, select:
    Add Content > _Responsive > Page
  3. Name the page and choose a placement folder
  4. Click the "Submit" button

add-content.png

When to use the "Add Content" method: You will use the "Add Content" method because it is the easiest and quickest way to create a page, as long as ITWeb has already configured the appropriate options for you to do so.

"Copy Blank Page" Method


In this method, you copy an existing "_blank-page" document within your website's "_content" folder, creating a new page elsewhere on your website.

  1. Navigate to the "_content" folder you want to create a page in
  2. Right-click on "_blank-page"
    • If you do not have a "_blank-page" file, contact itweb@jmu.edu, and they will set it up for you
  3. Click "Copy"
  4. Name the page and choose the placement folder
  5. Click the "Copy" button
copy-existing.png

When to use the "Copy Blank Page" method: You will use this method if you would like to set up several different page templates (for example, if your site has different footers on each page). In this case, you would create multiple "_blank-page" files rather than ITWeb creating a new "_blank-page" for you each time you want to create a new template.

Naming a Page

Page Name: The "Page Name" is the title that will appear in your "Site Content" panel. You will want this title to be specific yet concise so you can easily navigate to the page without cluttering the panel with extra text. 

  • Note: Your Page Name does not have to be the same name as the Display Name or Title. In this example, the Page Name is "index," even though the content on the page is related to page creation. See "Index Pages" below to learn more about naming your page "index".
  • Note: When the page is published, a ".shtml" extension is put on the end. For example, if your page name is "index", that page will be "index.shtml" on the webserver. In other words, you do not need to name your page "index.shtml" because then the URL would appear as "index.shtml.shtml"
page-name.png

Display Name: The "Display Name" is the title that appears in your Sitemap or Breadcrumbs. If you are using Breadcrumbs or if your website has a Sitemap, then the page's Display Name should be shorter than the page's "Title", like the example to the right. If your Display Name were the same length as your Title, then it will clutter your Breadcrumbs and make your Sitemap redundant.

display-name.png

Title: The "Title" is the name that will actually appear at the top of your webpage. You will want to be even more specific when creating your Title so that viewers know exactly what content they are reading on the page.

page-title.png

Index pages


When you create the first page within a folder, you will want to get in the habit of naming it "index." Here is an example of an index page:

https://www.jmu.edu/cob/accounting/index.shtml

Index pages have two primary functions:

1. Index pages display automatically for a folder when users do not specify a particular page. For example, if users wanted to go to the Accounting page within COB's website but did not type "https://www.jmu.edu/accounting/index.shtml" and only typed "https://www.jmu.edu/cob/accounting", then the server would automatically display the index page in the cob/accounting folder even though they did not specify the "index.shtml" page at the end of the url.

If you do not have an index page and the user does not specify the page to which they want to go, the server will end up showing an ugly page like this:

index-page-error.png

This page will display all the contents within that folder, including ones you may not want users to know about, like test pages, or pages you are still working on. Therefore, users would be able to view content that you were not intending them to see!  If you always have an "index" page in every folder, this ugly listing will never show.

2. Index pages allows users to use Breadcrumbs to navigate through your website. Each link within Breadcrumbs links to each level of folders in your site; therefore, if you do not have an index page within each folder and users click on a link within the Breadcrumbs that isn't an index page, then that "Index of" page displayed above will appear, showing all the files and folders within the folder link they clicked on.  Having a page named "index" in each folder will make sure these breadcrumb links go to nice-looking pages rather than that ugly page listing.

breadcrumbs.png

Placement folders


Placing your page into folders help you keep them organized and quickly accessible, but it is easy to accidentally misplace pages and other files. Be sure to place your page in your website's foler and then the appropriate subsequent folder(s) by browsing through Cascade's files if the placement folder is not already in your recent searches.

Note: Although how websites are organized will vary, new pages should NOT be placed in "_content" folders since those folders are reserved for content blocks only.

placement-folder.png

Pro-tip: When you are browsing through folders, click the folder icon to open its subsequent folders. To select a placement folder, be sure to click the cirlce icon next to the folder; otherwise, Cascade will place your page into the folder icon you selected.

selecting-icons-when-browsing.png

Adding Page Features

Adding feature images


Feature images are full-width images that appear at the top of a webpage, like in the example below:

feature.png

To insert a feature image to a page, follow these steps: 

  1. On a page, click "Edit" in the top toolbar
  2. Check the "Yes" box under "Use a feature image?"
  3. Click "Choose File"
  4. Upload an image
    • Option 1: upload an image that is 820px wide by 273px high with a resolution of 72dpi (recommended file format is .jpg with a quality of 8)
    • Option 2: browse _images/_features
  5. Click "Ok" and submit changes

Note: If there is a slideshow on the page, you will have to remove the slideshow to display the feature image. If you want a slideshow, see adding and editing Slideshows

Feature/Profile Image Sizing Chart:

STANDARD width height
Feature 820 273
Profile 200 200

 

Adding "Go to top" icon


"Go to top" icons are useful for pages with a lot of content. Follow these steps to add a "Go To Top" icon:

  1. Click "Edit" in the top bar of a page
  2. In the "Content" tab, scroll down and check "Yes" to apply a "Go To Top" icon

Note: This icon appears automatically on long pages at mobile screen sizes

go-to-top-icon.png

Displaying your departmental footer


Your departmental footer displays your department's information.  This footer will be set up for you by ITWeb, however you can hide or show this gray footer on your pages by following these steps:

  1. Click "Edit" in the top toolbar of a page
  2. In the "Content" tab, scroll down and check or uncheck the "Use in-page-footer" box

The gray footer containing your contact information will appear at the bottom of the page if it is checked:

footer-inpage.png

If a departmental footer is displaying incorrect or generic information, contact itweb@jmu.edu for assistance.

Back to Top