CMS Manual

 

Introduction

Definition & Objective: 

 Cascade is web design, editing, & managing system used by the Texas A&M University System, & is the program which has made the new web pages for the TAMUG campus. The main purpose of using the Cascade system is to consolidate web information, update & edit, & present a unified brand for the TAMUG campus.


Getting Started & Access:

To be involved in the Cascade System for TAMUG, you will need to identify which website you’re interested in editing before access can be granted. Choosing a website to manage examples:

  • As a student, you would be able to edit pages of affiliated club or campus organization.

  • As a staff member, you could help edit your department’s website.

  • If you are faculty, then you may require a website for your lab or learning center.

Once you know what website you’re interested in managing, then you need to request access to that site(s) by emailing cms@tamug.edu.


Help & Assistance:

There are many people on campus here to help you work through websites, website management, and updating information on the web. The best way to get answers, get help, or find assistance, please email

cascadeusers@tamug.edu for the fastest response from Cascade editors or publishers. For the fastest way to get your updated page(s) published email cms@tamug.edu.

Questions, Comments, and other Concerns please click cms@tamug.edu to email the CMS Team.


Editing & Managing A Website: The Basics

The basic elements of editing a website include creating, editing, and publishing pages, files, & organizing elements.

     {TOP}


A. Login to CMS

1. Open the internet an in the URL enter: https://cas.tamu.edu/cas/login?service=https%3a%2f%2fcms.tamu.edu%2f

2. Enter your NetID & Password, then click "Login."

login to cms

 

3. Make sure at the top of the page to select WWW.TAMUG.EDU

www.tamug.edu up at the top

 

4. Once Selected, you will see all of the system folders. You will only have access to your group's website folder.

dashboard

5. Go to "My Settings" located at the top right hand corner of your screen.


My Settings

6. A new window will appear, locate at the bottom of the window where it says "Default Site" and then click the little blue page looking icon.

default before

7. Another window will appear, look to the left hand side and you will see where it says "WWW.TAMUG.EDU" select that and then confirm.

select tamug

8. Click "Submit" and now you should have a default setting, so you will not have to repeat step 3.

new default

     {TOP}




B. Add a Folder

This is going to be a folder within your website folder, often used for organization (both seen, or could be hidden).

1. Click on new button, located in the top blue bar of CMS.

 new 

2. Hover the mouse over the folder ou want to create the folder in.

3. Select "Standard Folder"

 drop down

NOTE: All new folders will have a security default called Workflows, which require you to contact cms@tamug.edu to be able to add or edit content.

4. Give the folder a "System Name." The System Name is only going to be seen within Cascade.

 System Name

5. The Parent Folder illustrates the potential location for your newly made folder. To change the location, click on the blue words in the brackets and search for the best place within Cascade.

6. Give the folder a "Display Name." This is the name that will appear in the left menu.

Display Name

7. Allow in Menu? You can allow this folder to be seen on the web, or used only within Cascade by selecting Yes, or No.

8. Once decided, click "Submit" and the folder will be created.

Submit

     {TOP}


C. Add a Webpage

1. Click on new button in the top blue bar of CMS.

2. Hover the mouse over the page you want to create.

select page type

3. Select the type of page you want to create from the four templates available.

Template Examples are below:

Standard Page

Standard Page

Standard-2BoxH-Page

Standard-2BoxH-Page

 Standard-3Box Page

Standard-3Box Page

4. Give the page a "System Name." This name appears in Cascade to identify the page, and will not be seen by the public.

system name

5. Give the page a "Display Name." This is the name that will appear in the left menu.

6. The "Title" is an optimal place to identify the page, and will be seen in the Tab of the webpage.

display and title

a. Example of Website Tab from TAMUG's home page.

example

7. Add content to the large box that looks like a Word doc.

WYSIWYG

8. Click "Submit" and the page will be created.

submit

9. After submitting you will be automatically redirected to what the page should look like once it has been published. If there is anything that needs to be edited, or added to the page, at the top there is an “Edit” tab at the top; select this and you will be brought back to the working page.

{TOP}


D. Adding Hyperlinks

1. Click on "Edit."

2. Highlight the text you want to hyperlink to be associated within the WYSIWYG.

3. Click on the chain link icon, or right click on the test and select “insert/edit link.”

I. Add An Internal Hyperlink

4. Select “Internal” if the page you are linking to is within Cascade.

5. Click on the brackets next to the blue page icon. This will allow you to browse through Cascade and target the link desired.

internal hyperlink


II. Add an External Hyperlink

4. Select “External” if the page you are linking is NOT within Cascade (i.e. outside links)

5. Enter the URL of the external hyperlink in the “Link” box.

6. Once your link is in place, you have a “Target” option for the location of your link to be either within the “Same Window,” or “New Window.”

 new window      {TOP}


E. Upload an Image, or File

1. Click on the new button.

2. Hover the mouse over your group’s folder. Make sure that you are directing your image to the correct folder/location.

NOTE: If you upload an image to the wrong location, you can move the file around to the proper one at any time.

upload an image

3. Select "Standard File."

4. Once selected, you will be directed to a new window. Here you will input what you will call your file under “System Name.” Be sure to label your file accordingly for easy findings later.

NOTE: If uploading a jpg title your image with .jpg after the title, if it is a pdf add .pdf after the file name. If this is not done, then your jpg image or pdf will NOT show up properly and you will have an X indicating the file cannot be viewed live. (Examples: .png, .pdf, .jpg, .doc)

uploading image

5. Under “Data” you will see the “Browse” button; here you will upload your image or pdf. Browse through your computer to the item you wish to upload.
Once the file you want to have uploaded has been selected and located double check the images width and height.

NOTE: Maximum size for an image is a recommended 200KB, and no more than 400KB.

banner

sizes

6. Review the parent folder for where your image will be housed in, if it is not your desired location simply click the blue lettering next to “Parent Folder” and redirect where to put the file.

7. Click “Submit” and your image is now available in Cascade.

{TOP}


F. Add an Image and Inline the Image

1. Determine and navigate to the page you want to add an image to.

adding inline images

2. Select the Edit tab once you have selected the page you want to add an image to.

edit

3. Scroll down to the WYSIWYG area and place the cursor where you want to place the image.

placing cursor

4. (Refer to Image below) inserting

5. A new window will pop open; click the file button next to where it says Image.

file button

6. Once this has been selected another window will appear. As this window opens you will navigate to the image you have uploaded.

upload

7. Select the photo you wish to upload and then press confirm. 

confirm

8. There will be one last pop up window. This window will show the dimensions and path of the file. In the Alternate Text box write a brief description of the image that was selected.

alternate text

NOTE: If you want to make your image smaller, only enter the width. CMS is designed to proportionally change an images size. If both height and width are changed simultaneously, the image will appear distorted.

9.  Before clicking Insert, observe the Advanced tab in the window and select.

advanced

10. Determine the justification of alignment you wish to have the image at on the page. If the Default is left selected, then the text will not wrap around the image.

alignment

11. Vertical and Horizontal spacing are placed to create a buffer between the text and the image being put inserted. It is recommended that a number between 5 and 10 is selected for each field.

spacing

12. Click Insert to add image on the page.

insert

13. If the image is still too large for the page, you can still click the photo and resize to fit accordingly.

fits

14. Remember that this is still Edit mode, so click Submit at the bottom of the page to save your changes and view your results.

submitting to save

     {TOP}


G. Add A Banner

Note: Banner Images are uploaded the same as other image files. The only difference is the location/where to insert the image. Banners must be 750 pixels wide by 250 pixels high.

1. Go into "Edit" mode on your page.

2. Locate where your page says "Image List."

Banner

3. From here locate: (Refer to Image Below) image

4. Browse for the banner you created and select the one you wish to put up.

5. Once the image is selected click "confirm."

Note: You can add more than one banner picture by clicking the [+] symbol in the top left corner of the "Image List."

scrolling banner

     {TOP}


H. Adding Anchors

Once you have created your web page and inserted all of your information into your page you might find yourself wanting to link images, words, questions and answers, etc. and you can!

anchor 1

1. You will first need to identify the content/information that you plan on linking in your page.  

anchor 2

2. Once you have highlighted your word(s), or image make sure to select the anchor icon located up in the top of your WYSIWYG tool bar.      

anchor 3

3. A small window will come up and prompt you to name your anchor. It is always easiest to copy what you have named your anchor for later, if not it is important to remember what you named your anchor. 

anchor 4

4. Press “Insert”, you will see a little {anchor} appear where you had your cursor, or next to the word(s) or image. Note: Once published the little anchor will not be seen, it will only be visible in edit mode.

5. Now select the word(s) or image and click the “Link” icon.

anchor 5

6. A new window will appear again and read down till you locate where it says Anchor. Here you will input the name you gave your anchor in step 3.

anchor 6

7. Press “Insert.”

8. The word(s) or image you selected will now appear as a linked text.

anchor 7

9. Click “Submit” to save your anchors and changes.

{TOP}


I. Add and Edit Tables

Tables are useful for displaying content and information in a clean grid form

1. Go to your desired page where you would like to insert your table. Make sure you are under the Edit mode.

2. Place your cursor where you would like to place your table and then click on the table button {Table button} located in the WYSIWYG toolbar.

table 1

3. The Insert/Modify table window will appear after clicking the table button. You can set the alignment of your table, width, the number of Columns (vertical) and Rows (horizontal) that you want to have.

table 2 table 3

table 4

NOTE: When setting your width make sure that you have it set to 100%. You can align your table to sit in the center, left, or right of your page. Cellpadding will dictate the amount of space around the content you input; Cellspacing refers to the space between the cells; Border refers to the thickness of the boarder around the table itself.

4. Also, you can set a class to your table as to what the lettering will look like.  

table 5

NOTE: Skip, Accordion, ui-accordion-header and parent class do not work.

5. Under the Advanced tab you have more options to add to your table.

table 6

6. Under this tab look to where it says “Frame” here you can set the limits of your table’s frame as far as where you would want your lines to be shown, or hidden.

table 7

7. Border color and Background color

table 8 table 9

When Selecting either Border or Background you will be prompted with the image below in order to select any color you would like.

table 10

8. Click “insert” to have your table show up in your WYSIWYG window. To look at your tables properties right click on the sides of your table.

table 11

9. Once you have your table complete press “submit” at the end of the page and view what you have created. 

table 12

{TOP}


 J.  Styles

NOTE: Styles will only work in the Firefox web browser!! Styles are not necessary when creating your page, but they are fun and help make things stand out more where you need them to. You will have to highlight your text first before selecting your desired style.

1. Locate your WYSIWYG box while in Edit mode and find the drop down menu where it says “styles.”

style 1

2. Click the drop down menu and note the various options that are given.

style 2

STYLE EXAMPLES

style 3

style 4

     {TOP}