web viewthe right side of the screen will display up to seven function tabs and default to...

26
Cascade CMS Tutorial Document Last Modified 22 July 2009 COLA WEB: CMS GUIDE Table of Contents 1. CMS 2. LOG ON 3. YOUR CONTENT 4. VIEW tab 5. EDIT tab 6. FUNCTION tabs: COPY, PUBLISH, DELETE 7. ADVANCED tab 8. FOLDER VIEW 9. CREATE NEW CONTENT 10. COMMON EDITING COMMANDS a. New Paragraph b. New Line c. Bullets and Numbering d. Format drop-down Menu e. Insert Link f. Insert Email g. Remove Link h. Insert Image i. Upload Image i. Link to Document i. Upload Document ii. Update Document 11. ADVANCED EDITING a. Anchors b. Horizontal Bars c. Tables i. Insert a Table ii. Add cells, columns, rows to Table 1

Upload: lethu

Post on 26-Feb-2018

214 views

Category:

Documents


2 download

TRANSCRIPT

Page 1: Web viewThe right side of the screen will display up to seven function tabs and default to "View" each time you select ... Pages (crop, full-masthead, plain) have three fields in addition

Cascade CMS Tutorial DocumentLast Modified 22 July 2009

COLA WEB: CMS GUIDE

Table of Contents1. CMS

2. LOG ON

3. YOUR CONTENT

4. VIEW tab

5. EDIT tab

6. FUNCTION tabs: COPY, PUBLISH, DELETE

7. ADVANCED tab

8. FOLDER VIEW

9. CREATE NEW CONTENT

10. COMMON EDITING COMMANDS

a. New Paragraph

b. New Line

c. Bullets and Numbering

d. Format drop-down Menu

e. Insert Link

f. Insert Email

g. Remove Link

h. Insert Image

i. Upload Image

i. Link to Document

i. Upload Document

ii. Update Document

11. ADVANCED EDITING

a. Anchors

b. Horizontal Bars

c. Tables

i. Insert a Table

ii. Add cells, columns, rows to Table

12. PUBLISHING

13. ODD THINGS TO REMEMBER

1

Page 2: Web viewThe right side of the screen will display up to seven function tabs and default to "View" each time you select ... Pages (crop, full-masthead, plain) have three fields in addition

Cascade CMS Tutorial DocumentLast Modified 22 July 2009

Introduction

This tutorial is designed to assist users in the College of Liberal Arts to become familiar with and

appropriately use the Cascade CMS.

Any questions or comments about this tutorial and/or its contents may be directed to Kate Grazzini

([email protected]).

1. CMS = Content management system. i. We're using Cascade (5.2.4). Due to support issues for Safari, we strongly recommend using

Firefox or IE when logged in to the CMS.

ii. There is a good Knowledge Base available on the Cascade website containing instructions and

complete explanations (just make sure you're looking at the 5.x base;

http://www.hannonhill.com/new-kb/past-versions/5.x/index.html) but for most of what you'll

need to do, this document will suffice.

iii. For reference, pieces of content are called "assets" in the Cascade lingo. In this document,

"pages" will refer to individual page assets (indicated by a blue page icon), "folders" will refer

to folder assets (indicated by a yellow folder icon), and "files" will refer to uploaded

documents or images (indicated by square orange icons).

2. LOG ON i. Log on to https://cms.la.utexas.edu

ii. The system will default to "Home" view.

a. On left, the file structure can be expanded.

b. On right, you'll see a series of common items or functionalities.

c. You can change your password by clicking on your EID at the top right.

3. YOUR CONTENTi. To see your content, click the "www" folder to expand it and reveal the folders below. The “www”

folder houses all of the web content for COLA. It will only show those folders to which you

have access permissions.

ii. Click to expand your office or department node. Each division has a similar set-up.

a. _admin:  This folder contains the codes needed for certain functions (web forms and

individual style sheets, for example) to work.

b. _blocks: This folder may or may not be present. It houses 'blocks' of functionality like the

header block (branding text for all pages in the administrative divisions). You should not

need to modify anything in this folder.

2

Page 3: Web viewThe right side of the screen will display up to seven function tabs and default to "View" each time you select ... Pages (crop, full-masthead, plain) have three fields in addition

Cascade CMS Tutorial DocumentLast Modified 22 July 2009

c. _files: This folder is where uploaded images and documents (.gif, .jpg, PDFs, DOCs, etc)

are stored. There are two subfolders, one to store images and one to store PDFs and

other documents. You can create folders within "images" or "pdf" to organize your

uploaded documents, if necessary. (In some cases, this has already been done.)

d. index: This is the splash page for your division. It should be the only editable index page for your section; while creating a new folder will create a new index page specific

to that folder, those pages are not editable.

e. About and Staff/Contacts: Are at the top (Order) across all administrative divisions for

standard consistency. "About" is generally for your division mission statement;

"Staff/Contacts" will display a list of staff contacts in your office (to be drawn automatically

from the database).

f. Faculty, Staff, About: Are in most to all departments for standard consistency. Faculty

and Staff folders contain database-generated lists of faculty and staff members within a

department. About folder typically contains pages describing the mission, history, and

contact information for the department. 

g. Other pages and folders: This is the content specific to your area.

3

Page 4: Web viewThe right side of the screen will display up to seven function tabs and default to "View" each time you select ... Pages (crop, full-masthead, plain) have three fields in addition

Cascade CMS Tutorial DocumentLast Modified 22 July 2009

4. VIEW tabi. Click on your "index" page. The right side of the screen will display up to seven function tabs and

default to "View" each time you select an asset.

a. For page assets, the CMS tab defaults to "View>Layout," displaying the page as it is

rendered by the CMS. Block placeholders appear in "Layout" but will not appear on the

page when it is published to the web.

ii. You'll notice that the navigation bar on the left side of the web page does not appear to be

complete; this is normal. The navigation is built and controlled separately from the page.

iii. Clicking "Preview" will display the page as it is seen from the web, without block placeholders.

iv. You can view the properties of a given page by clicking "Properties." Properties include:

a. System Metadata (information about control of the page within the CMS)

b. User Metadata (information about the page input by users)

c. Custom Metadata (which controls how the page works and displays)

d. Access Rights (who can see [Read] and edit [Write] the page)

v. "Lock" and "Configurations" you'll probably never need to use.

a. "Lock" is a function for the Workflow, which we don't anticipate implementing at the

moment; if you were to lock a page, no one else could edit that page while you were

working on it. Since each area only has one or two people who will be in charge of editing

the web content, this shouldn't be a problem.

b. "Configurations" displays the blocks used in the selected page asset -- which pieces of

code and templates affect how the page looks and interacts with the system. This

functionality is currently controlled by LAITS admins.

4

Page 5: Web viewThe right side of the screen will display up to seven function tabs and default to "View" each time you select ... Pages (crop, full-masthead, plain) have three fields in addition

Cascade CMS Tutorial DocumentLast Modified 22 July 2009

5. EDIT tabStill using the index page, click on the "Edit” tab – the right-side view should display the Edit screen.

There are four options under Edit: Content, Metadata, System, and Configurations.

i. “Content". This is where you'll spend most of your time.

ii. For division index page:

a. Masthead (administration only) is the marquee image at the top of the splash page.

b. Welcome Title appears at the top of the left-most content column.

c. Welcome banner will insert an image at the top of the left-most column, under the

Welcome title.

d. Welcome Message is the content for the left-most column.

e. Attention Box appears at the top of the far-right column.

f. Link Box appears at the bottom of the far-right column.

iii. For all other pages:

a. (Inline Metadata) Display Name controls what label appears in the left-hand navigation on

the website; often this will be the same as the label that appears in the file structure on

the left side of the CMS interface. This label should be short, wherever possible, so that it

displays appropriately on the web. For the index page, this field is hidden.

b. Each page has a Page Title. Page Title appears at the top of the page and as the title in

the top of the web browser. This can be a longer title than the Display Name, but should

be the name of the page or information on that page -- Recent Award Winners, Staff

Contacts, or About Academic Affairs, for example.

c. Each page should have a Main Content field, which will appear as the main or central

block of text on the page.

d. There are two page templates in place for administrative offices: page with sidebar, and

page without sidebar. For pages with sidebar, two additional boxes will display on the

"Edit>Content" screen: Attention Box and Link Box. In the right-hand sidebar of the

webpage, the Attention box appears at the top, and the Link box below.

i. Business Affairs has an additional template for the Procedures Guide called

manual page; this page has four fields in addition to the Main Content field: How

It Works, Links, Contacts, Tips or FAQs. These fields correspond in order to the

fields displayed on Procedures Guide pages, each automatically displaying its

appropriate title.

ii. Departments have a number of possible page templates: alternate homepage,

crop page, crop page no sidebar, full-masthead page, full-masthead page no

sidebar, feature, page, page no sidebar. The classification of the department

internally will dictate which page template options are available. Alternate

homepage contains the same fields as the division index page. Pages (crop, full-

5

Page 6: Web viewThe right side of the screen will display up to seven function tabs and default to "View" each time you select ... Pages (crop, full-masthead, plain) have three fields in addition

Cascade CMS Tutorial DocumentLast Modified 22 July 2009

masthead, plain) have three fields in addition to the titles: Main Content, Attention

box, Link box. Pages without sidebars lack the Attention and Link boxes that form

the right-hand sidebar.

iv. For any page:

a. The content fields are for the text, images, etc on a page. All fields are WYSIWYG (what

you see is what you get) boxes; what you type and format in these fields should appear

that way on the web.

i. NOTE: Content here is affected by the overarching style sheets, so be aware that

small discrepancies may occur.

i. “Metadata”. This pane displays the User Metadata options and the Custom Metadata options.

User Metadata contains the Page Title (as set by the “Edit>Content” Page Title field) and any

keywords associated to the selected page asset. At this time, we are NOT using page

keywords.

v. “System”. This pane lets you change the System Name for a page or folder -- the label for the

page/folder within the CMS. Spaces should be replaced by hyphens ( - ) or underscores ( _ )

in this field.

a. NOTE: if you want to change the label displayed in the web navigation, remember that

that field is in "Edit>Content" under Inline Metadata.

vi. “Configurations”. This pane allows editing of the blocks used in the selected page asset. This

functionality is currently controlled by LAITS admins.

6

Page 7: Web viewThe right side of the screen will display up to seven function tabs and default to "View" each time you select ... Pages (crop, full-masthead, plain) have three fields in addition

Cascade CMS Tutorial DocumentLast Modified 22 July 2009

6. FUNCTION tabs: COPY, PUBLISH, DELETEi. “Copy”. This tabs lets you make a copy of an asset and place it in a different location.

a. “System Name” is the name of the asset copy.

b. “Parent Folder” is the destination of the copy. To modify the location, click on the folder

icon OR the location address. A pop-up box will let you navigate through the file structure

to the appropriate folder. Click the name of this folder to select, then click “Confirm”. The

new location will appear as the location address for “Parent Folder”.

c. “Bypass Workflow”. This option lets you make the change immediately, regardless of

Workflow controls. Since we are not currently implementing the Workflow controls, make

sure this box is checked.

d. “Submit” will commit the changes. “Cancel” will return to the previous screen.

ii. “Publish”. Allows you to publish the asset to the web.

a. “Destination” should read DEV PHP (until August 1, 2009).

b. “Publish Report” messages will appear in your CMS message inbox (visible from “Home”

view). These confirm asset publication, and report any errors that occurred.

c. “Publish Mode”. To publish an asset to the web, make sure “Publish” is selected. To

remove an asset from the web without deleting it, choose “Unpublish.”

vii. "Workflows". Where turned on, allows for workflow control of pages and publishing. 

a. "Workflow options". Settings for current asset controls: "None required", "Inherit from

parent folder" (containing current asset), "Do not inherit". Current settings can also "Apply

to child folders" (those contained under/within current asset).

b. "Add workflow". Will add asset to an existing workflow specification. 

viii. “Delete”. Removes assets from the CMS.

a. Most assets can be removed from the web (unpublished) at the same time as deletion. If

you are deleting an asset, make sure to unpublish it from the web, so that the content on

the COLA website is the most up-to-date version at all times.

b. “Confirm”. Bypass Workflow will ignore the Workflow controls and immediately remove

the asset; since we are not currently implementing the Workflow controls, make sure this

box is checked. “Submit” will delete the asset, “Cancel” will return to the previous screen.

7

Page 8: Web viewThe right side of the screen will display up to seven function tabs and default to "View" each time you select ... Pages (crop, full-masthead, plain) have three fields in addition

Cascade CMS Tutorial DocumentLast Modified 22 July 2009

7. ADVANCED tabi. “Access”. Displays access permissions for the selected asset, by “User”, “Group”, or “All”.

a. “Unassigned” users have not yet been assigned permissions for the selected asset.

b. Users assigned to “Read” can view, but not edit, the selected asset.

c. Users assigned to “Write” can view and edit the selected asset.

ii. “Audits”. Contains the change control information for the selected asset. Search options are by

date range and audit type.

iii. “Reference”. Creates a placeholder for the selected asset in another location.

a. “System Name” is the name of the reference.

b. “Parent Folder” is the destination of the reference. To modify the location, click on the

folder icon OR the location address. A pop-up box will let you navigate through the file

structure to the appropriate folder. Click the name of this folder to select, then click

“Confirm”. The new location will appear as the location address for “Parent Folder”.

c. “Submit” will commit the changes. “Cancel” will return to the previous screen.

iv. “Versions”. A list of Publish dates for the selected asset, in reverse chronological order. Contains

asset file path, last modification date, last modification user, and any comments.

8

Page 9: Web viewThe right side of the screen will display up to seven function tabs and default to "View" each time you select ... Pages (crop, full-masthead, plain) have three fields in addition

Cascade CMS Tutorial DocumentLast Modified 22 July 2009

8. FOLDER VIEWTo view the contents of a folder, click the folder name in the file structure. The right-side will display the

contents as a list, with the asset “Name”, “Order”, “Last Modified” date, “Last Modified By” user, and

“Actions” that can be taken.

i. You can sort the folder by Name, Order, modified date, or user by clicking the appropriate column

title at the top. The folder view defaults to your last chosen sort method for any folder; if none,

the CMS will display the assets sorted by name.

ii. “Order” controls the order in which the assets appear in the left-hand navigation on the website,

with 1 at the top of the division section.

a. NOTE: Index pages for subfolders (NOT the splash page at the division-folder level) are

set to output nothing; this means that these pages automatically redirect to the #2 asset.

Make sure the first page you want to display on the web is at the #2 position. b. NOTE: Currently the CMS redirects to the first page asset in order. If you have a folder at

#2 position, and a page at #3, the website will display the page first when that folder link

is clicked, though the displayed order will be correct for the navigation. We are current

working around this feature by including a page asset at the #2 position in subfolders.

iii. The first four Action buttons move assets within a folder: “Move to Top”, “Move Up”, “Move

Down”, “Move to Bottom”. You can also drag an asset within a folder to change the order --

make sure to sort by Order first.

iv. The other two Action buttons are “Edit” and “Delete”. (See sections 5 and 6 for explanations.) Be

very careful about deleting assets.

a. NOTE: For those assets to which you have Read (view) access but not Write (edit)

access, the only permitted actions are the "Copy" and "Publish" tabs.

v. “With Selected” drop-down menu is dependent on permissions; some or all of the following

actions may display.

a. “Copy”, “Publish”, “Delete” will present the same screens as described above (section 6).

b. “Move”. If you need to move a page from one folder to another, click the folder where the

page is currently stored.

i. Select (checkbox) the asset/s you want to move from that folder.

ii. In the “With Selected” drop-down, choose "Move".

iii. The right-side pane will ask you to choose the “Parent Folder”. Click on the folder

icon OR the location address. A pop-up box will let you navigate through the file

structure to the appropriate folder. Click the name of this folder to select, then

click “Confirm”. The new location will appear as the location address for “Parent

Folder”.

iv. "Submit" will commit the move, “Cancel” will return to the previous screen.

9

Page 10: Web viewThe right side of the screen will display up to seven function tabs and default to "View" each time you select ... Pages (crop, full-masthead, plain) have three fields in addition

Cascade CMS Tutorial DocumentLast Modified 22 July 2009

v. After submitting, the right-side pane will return to the folder view, and a

confirmation notice of the move will appear at the top of the screen.

vi. You can move multiple assets at once; simply check the boxes of all appropriate

items before selecting “Move”.

10

Page 11: Web viewThe right side of the screen will display up to seven function tabs and default to "View" each time you select ... Pages (crop, full-masthead, plain) have three fields in addition

Cascade CMS Tutorial DocumentLast Modified 22 July 2009

9. CREATE NEW CONTENTi. To create a new page: make sure that the folder where you want the new page to go (or any

page within that folder) is highlighted on the left. Administrative users should click

"New>dean>(office)". Department users should click “New>targeted” or “New>standard”

depending on department classification (only one should appear).

a. Select the appropriate page template.

b. The right-side of the screen will look similar to the "Edit>Content" pane; enter a unique

“Display Name” (this will become the “System Name” for that asset) and then add content

to “Page Title” and the content areas. When you are finished, click "Submit". The new

page will appear in the refreshed file structure.

ii. To create a new subfolder: make sure the file structure highlights the folder within which you

want a subfolder. Click “New>folder” ("New>dean>folder" for administrative users). Enter a

unique Display Name (it will automatically change the System Name) and click "Submit". The

new subfolder will appear in the refreshed file structure. New folders automatically have a

redirecting index page; remember that these index pages are not editable. You must create a new page (at #2 position) for the folder to appear in the website navigation, since

the CMS interprets these folders to be empty (no content to display on redirect).

11

Page 12: Web viewThe right side of the screen will display up to seven function tabs and default to "View" each time you select ... Pages (crop, full-masthead, plain) have three fields in addition

Cascade CMS Tutorial DocumentLast Modified 22 July 2009

10. COMMON EDITING COMMANDS There are a lot of buttons for the content fields. Mostly, only a few will be used; many of the pages are just

text, or text and pictures.

Under each command below, I have included an explanation for the corresponding HTML tags. There is

an HTML button for each content box (reads HTML in tiny letters). This button opens a pop-up window

with the raw HTML code for the selected WYSIWYG. If something odd occurs when you Submit your

changes, check the HTML to see if a tag is missing or duplicated; this is often the explanation for the

CMS doing unexpected things to your page content.

Many of the buttons should look familiar, just like in a word processor: sub- and super-script; bold, italic,

underline; left, center, right, and justified alignment; cut, copy, paste; find/replace; spell check; indent

(blockquote); undo and redo.

i. To insert a new paragraph (below one line of white space), hit "Enter" or "Return" on your

keyboard. This will wrap the text in HTML tags to mark the text as “Paragraph” format.

a. The HTML tags are <p> to start paragraph, </p> to end.

ii. To insert a break (no white space, just a new line), hit "Shift + Enter/Return" on the keyboard.

a. The HTML tag for a break is <br />.

iii. Bullet and Numbering buttons. Select separated lines of text that you'd like to make into bullet

points or a numbered list, and then click the appropriate button. (To end a list, hit "Enter"

twice or highlight text and select "Paragraph" from the Format drop-down.)

a. The HTML tags for bullet lists are: <ul> to start a list, <li> for to start a list item, </li> to

end a list item, and </ul> to end the list. So a simple bullet list would read:

<ul>

<li>Item 1</li>

<li>Item 2</li>

</ul>

Item 1

Item 2

b. The HTML tags for numbered lists are: <ol> to start a list, <li> to start a list item, </li> to

end a list item, and </ol> to end the list. So a simple numbered list would read:

<ol>

<li>Item 1</li>

<li>Item 2</li>

</ol>

1. Item 1

2. Item 2

iv. “Format” drop-down menu. This lets you change the format tags of selected text. Mostly you'll

want "Paragraph" format, but this is also how to change regular text into headers. Headers

decrease in size as the header number increases -- Header 1 is biggest, Header 6 is

smallest.

a. The HTML tags for header formats are <h#> to start, </h#> to end, where # is the header

number (1-6).

12

Page 13: Web viewThe right side of the screen will display up to seven function tabs and default to "View" each time you select ... Pages (crop, full-masthead, plain) have three fields in addition

Cascade CMS Tutorial DocumentLast Modified 22 July 2009

v. To insert a link: select text and then click the interlocked chain button. A small pop-up box

appears with two options: Internal links and External links.

a. If the page you want to link to is not within the COLA website, select "External" and either

type or paste the http:// address into the Link field and click "Insert".

b. If the page you want to link to is within the COLA website, click "Internal" and then the

small page icon. This opens another window that lets you navigate through the file

structure to the page you want to link. Click "Confirm" to select the page, and then click

"Insert".

i. PLEASE NOTE: Internal links CANNOT be combined with bookmark anchor

references. Adding the "#identifier" to the end of an Internal link path will break

the link. To direct a link to a bookmark anchor on another page in the COLA

CMS, please use an External link with the full published path of the COLA page.

Example:

http://www.utexas.edu/cola/business-affairs/manual/purchases/APSPBS.php#ho

witworks

c. You now have a link! The text should appear as a blue hyperlink in the page layout.

d. The HTML for a hyperlink is part of the anchor tag: <a> start, </a> end. Anchors can link

to a different page, or to a bookmark (anchor) on the page. (For Anchors, see section 10.

Advanced Editing below.)

i. EXAMPLE: Wrap your link text with the <a> start and </a> end tags.

<a>Example Link Text</a>

Inside the <a> start tag, the HTTP address is marked as hypertext reference

(href=). The HTTP address should be placed inside quotation marks; if the linked

page is outside the CMS, make sure the address starts with http://.

<a href=”http://www.utexas.edu/”>Example Link Text</a>

vi. To insert an email link, enter mailto:[email protected] into the External Link field, where

[email protected] is the full email address. Do not put spaces between the mailto: command

and the address.

a. To send an email to multiple addresses, separate addresses with a comma (no space):

mailto:[email protected],[email protected]

b. It is possible to add pre-populated fields to the email message. To pre-populate these

fields, add ? after email address/es and use the following commands:

i. cc= > Cc: [email protected]

ii. bcc= > Bcc: [email protected]

iii. subject= > Subject: Test Email

iv. body= > body text (This is a test email.)

13

Page 14: Web viewThe right side of the screen will display up to seven function tabs and default to "View" each time you select ... Pages (crop, full-masthead, plain) have three fields in addition

Cascade CMS Tutorial DocumentLast Modified 22 July 2009

c. Link fields with an ampersand (&): subject=Test%20Email&body=This%20is%20a

%20test%20email.

d. Note that spaces are coded by '%20'.

e. Line breaks in the body text are coded by '%20%0D%0A': ?body=Name:%20%0D

%0AJob Title:%20%0D%0AEmail Address:All of the above commands in a Link >

External field would look like this: mailto:[email protected],[email protected]?

[email protected]&[email protected]&subject=Test%20Email&body=Name:%20%0D

%0ARank:%20%0D%0ASerial%20Number:

vii. To remove a link: select the link text and click the broken chain button. This will remove the

hyperlink tags automatically from the text (it will no longer be blue, and the <a></a> tags will

be gone from the HTML).

viii. To insert an image: click the tiny picture of a tree (image icon). A pop-up box will appear.

Clicking the orange square (file icon) opens the window that lets you navigate through the file

structure and select an image.

a. In the "Please choose a File" pop-up window, navigate to your /_files/images folder,

select the image you want, and click "Confirm". This will close the second pop-up and

return you to the "Insert/Edit Image" window.

b. You must enter alternate text before clicking "Insert"; this should be the title of the image,

or a short description of the image content.

c. If the image size is large, you can modify the width/height of its display from this window

as well; the width and height are in pixels. It may take some modifying before you find the

right size. If you set either the width or the height, the other dimension will change in

proportion -- so if you know you want the image to be 100 px wide, set that size and the

height of the image will change accordingly.

d. NOTE: Remember that your images should be stored in the “_files/images/” folder for

your division, and that you will need to upload images before inserting them. (Make sure

to "Submit" or "Save Draft" of the asset you are modifying BEFORE navigating away to

upload an image; otherwise, any changes you've made will be lost.)

i. To upload an image: navigate to your _files/images/ folder in the file structure.

Click "New>Image". An upload form will appear on the right side of the screen.

Click "Browse" to pop-up a window of your local machine; select the image file

you want to upload and click "Open". The path to that file will appear in the field

next to the Browse button. When finished, click "Submit" to upload the image.

You can now insert the image into the page.

ii. You can also upload a file when you insert it. From the "Please choose a File"

pop-up window, navigate to your /_files/images folder. Select "Upload" from the

buttons across the top. Click "Browse" to select the file from your local machine,

14

Page 15: Web viewThe right side of the screen will display up to seven function tabs and default to "View" each time you select ... Pages (crop, full-masthead, plain) have three fields in addition

Cascade CMS Tutorial DocumentLast Modified 22 July 2009

and click "Upload" to upload the image to the "images" folder. Select the

uploaded image, and click "Confirm".

e. The HTML for images is the <img /> tag. Each image tag needs a source – a place where

the image file may be found – inside the image tag, set by src=”http://address”. The http://

address should be the file path directly to the image itself:

<img src=” http://www.utexas.edu/wc/first_level/graphics/wordmark.jpg”>

The <img> tag can also control the width and height:

<img src=”http://address” width=”#” height=”#”> where # is the number of pixels

ix. To link to a document: upload the document to the “_files/pdf/” folder for your division, and

insert an INTERNAL link in the page asset to the document.

a. Upload a document: i. Navigate to your _files/pdf/ folder in the file structure.

ii. Click “New>File”. An upload form will appear on the right side of the screen.

iii. Click “Browse” to pop-up a window of your local machine; select the document

file you want to upload and click “Open”. The path to that file will appear in the

field next to the Browse button.

iv. When finished, click “Submit” to upload the document.

v. You can now insert the document into a page as an INTERNAL link.

b. Update a document: If the online version of a document needs to be updated, it is

possible to edit this document and replace the associated file. This is better than deleting

the document and uploading a new one, since that method would delete all links to that

document. By editing the file, the links remain intact -- the file name does not change,

even though the document contained under that name does.

i. Navigate to your _files/pdf/ folder in the file structure.

ii. Select the file you wish to update.

iii. Click "Edit".

iv. Delete any text in the “Text” field. Click "Browse" to pop-up a window of your

local machine; select the new version of the document file you want to update

and click "Open". The path to that file will appear in the window next to the

Browse button.

v. When finished, click "Submit" to update the document.

15

Page 16: Web viewThe right side of the screen will display up to seven function tabs and default to "View" each time you select ... Pages (crop, full-masthead, plain) have three fields in addition

Cascade CMS Tutorial DocumentLast Modified 22 July 2009

11. ADVANCED EDITING For most pages, the buttons and text formatting will be all you'll need.

Anchor tags (the little anchor button) are used for bookmark hyperlinks within a given page. Let's say

you want a list of sections on the page to appear at the top -- kind of like a mini Table of Contents. This is

very helpful for pages that are quite long, with content in defined sections.

a. NOTE: In the CMS, anchor tags DO NOT WORK on pages with a sidebar. ii. To do this, you would set an anchor at the top of each section that you want to list, then link to

those anchors from the top of the page.

a. Highlight the text at an anchor point (often a header), click the anchor button, and insert a

unique identifier. Click “Submit”. A small anchor image will appear in the WYSIWYG box.

b. To link to this anchor at the top of the page, create an EXTERNAL link; for the “Link

Address”, put # and then the unique identifier you set as the anchor (#example). Clicking

this link will now take you to the anchor farther down the page. (This is also how "Back to

top" links work on most web pages; an anchor is set at the top of the page, and the link

references that anchor.)

i. The HTML for anchors is the <a> tag (used above for hyperlinks). The CMS

anchors use: id=”” name=”” title=”” to mark the bookmarked destination. (The

repetition is nothing to worry about; the W3C standard is name=””.)

Horizontal bars (small bar button between HTML and the eraser) inserts a horizontal bar into the page.

a. With the cursor on a new line, click that button. A pop-up will ask you to set the width and

height for the bar. “Width” here can be in px or in a percentage of the main content width.

“Height” ranges from 1-5 px tall. “No Shadow” will remove a shadow from under the line.

b. NOTE: Many lines that are currently in place are 500px wide, Normal height, with

shadow.

i. The HTML for horizontal bars is <hr />. Width is set by width=”#” where # is the

number of pixels. Height is set to Normal by default; set Size by size=”#” where #

is 1-6. To remove the default shadow, set noshade="noshade".

Tables. Text in table cells can be edited from the WYSIWYG. Simply treat the text within the cell as

normal text.

a. To insert a table: you need to edit the HTML for the table using the HTML button.

i. Tables start with the <table> tag, and end with </table>.

ii. Each row is wrapped by <tr> to start, </tr> to end. Any content between the <tr>

</tr> tags is a single row.

1. NOTE: This means that the table is organized by ROW, not by column. If

you have five columns, each <tr> section will have five <td></td> cells

before the row end tag </tr>.

iii. Each cell is wrapped by <td> to start, </td> to end. Any content within the <td>

16

Page 17: Web viewThe right side of the screen will display up to seven function tabs and default to "View" each time you select ... Pages (crop, full-masthead, plain) have three fields in addition

Cascade CMS Tutorial DocumentLast Modified 22 July 2009

</td> tags will display as one cell.

iv. An example table would be:

<table>

<tr> <td>cell1 column1</td> <td>cell1 column2</td> </tr>

<tr> <td>cell2 column1</td> <td>cell2 column2</td> </tr>

</table>

cell1 column1 cell1 column2

cell2 column1 cell2 column2

v. NOTE: Cells can span rows (rowspan=”#”) or columns (colspan=”#”).

1. Example: your table has three columns. The first cell is associated to

three rows in columns two and three – <td rowspan=”3”>. The

subsequent rows will be short one cell – imagine the spanning cell to be

there, but do not code for it.

Your table would look like this:

<table>

<tr><td rowspan=”3”>cell1 col1</td><td>c1c2</td><td>c1c3</td></tr>

<tr><td>c2c2</td><td>c2c3</td></tr>

<tr><td>c3c2</td><td>c3c3</td></tr>

</table>

cell1 col1 c1c2 c1c3

c2c2 c2c3

c3c2 c3c3

b. To insert new cells, columns, or rows, insert the appropriate tags into the table HTML.

c. Those using IE: you may be able to right-click in the WYSIWYG box and select

“Insert/edit a table” from the contextual menu. This is option is not available to all

browsers, however.

17

Page 18: Web viewThe right side of the screen will display up to seven function tabs and default to "View" each time you select ... Pages (crop, full-masthead, plain) have three fields in addition

Cascade CMS Tutorial DocumentLast Modified 22 July 2009

12. PUBLISHINGWhen your edits, creations, and moves are complete, you can Publish any items that have been

created/modified from the CMS to the web. Any items NOT published will NOT appear in the website,

though the most current version will be visible in the CMS interface. (The exception to this rule is that

some publishing routines automatically publish content, but you should not rely on this method. Publish

your finished work.)

i. To Publish from the page view, click the Publish tab at the top. Click “Submit”. This will publish

only that page.

a. If accessible, to Publish from the folder view you may select (checkbox) the assets you

want to publish, and select "Publish" from the drop-down. Click “Submit”. This will publish

all selected assets.

ii. To Publish an entire folder, you can click the Publish tab at the top from the folder view. Click

“Submit”. This will publish the folder and all of its current contents.

iii. To monitor the publishing progress, click "Tools>Publisher>Active Jobs". The right-side will

display a list of assets currently publishing and those in the queue to be published.

18

Page 19: Web viewThe right side of the screen will display up to seven function tabs and default to "View" each time you select ... Pages (crop, full-masthead, plain) have three fields in addition

Cascade CMS Tutorial DocumentLast Modified 22 July 2009

13. ODD THINGS TO REMEMBERi. The COLA website only goes four levels deep – administrative folders are the first level,

departmental folders are on the second. This means you should only ever have one to two more levels of subfolders (the pages within the 3rd level subfolder are considered the 4th

level content). This makes for a flatter structure, and better navigation for the user.

ii. Internal links to the index page of a subfolder will render a blank page in the CMS editor -- it

doesn't know to automatically redirect. On the website, however, links to subfolder index

pages WILL redirect to the #2 page. This makes your link to a redirect index page dependent

on the content remaining in the same order in the area to which you're linking. It is best to link

directly to the information wherever possible.

a. Linking to indexes for to other departments/offices or to features such as the Policies

Guide in Business Affairs, however, may be sensible -- so long as you are linking to an

area, not a specific piece of information.

iii. The navigation is built from the file structure -- all folders and pages that you create WILL appear

in the navigation for the website. Organize your content accordingly. Also, make sure any

display names ("Edit>Content>Inline Metadata") appear in the CMS editor exactly as you

want them to appear on the web.

iv. Make sure that NONE of the links that you build (particularly before August 1, 2009) reference the

old COLA website (http://www.utexas.edu/cola/); the CMS site will replace it on that date.

v. Remember that no file or asset should have a space in its name. All spaces should be replaced

with dashes (-) or underscores (_). When creating a new asset, however, the CMS will

automatically convert spaces in the "Display Name" to the appropriate form.

19