CoE Coding Tutorial

Getting to the HTML code

You want to login to Collage as usual, but when you are planning

on editing the code, you do

not

want to go to the

Contribution

section. You want to stay in the

Deploy Folders

section. This is

where you will be accessing and editing the .html files. These

files (.html) are the ones that have all the code in them.

I don’t believe you will be editing the layout of the pages, but you

may need to change the navigation links from time to time when

new pages are created or removed from the site. In order to edit

the navigation, you want to get to the root of your site. The root

is known as the beginning or first folder you will come across. In

this case it is the

coe folder

. Just click on the folder and you will

be at the root of your site.

The files you want to edit should have

nav

or

navigation

in its name. When you click on the name, a

new window should appear in Collage with the HTML

code visible. In order to edit most of the .html files,

you will need to have a HTML editor installed on the

computer you will be using (i.e. Dream weaver).

Editing the Code

Click on the file and the HTML editing program will automatically launch and open the file you

want to edit. In the file, you will see all of the HTML code the page uses to display information.

Almost all of the navigation code used throughout Collage is arranged in lists.

When you want to edit or create a location, you need to find the HTML tags that look like

<ul>

and

</ul>

. These tags indicate the start of a new list. The HTML tags found in between the

<ul> and </ul> are where you want to edit, create, delete the list items. These tags are denoted

by

<li>

and

</li>

. Everything in between these tags indicates that actual list item.

The next sections will illustrate how to

add a new list to the navigation

,

delete a navigation

item or list

and

Edit a current list

.

Edit a current list

When you want to edit a current list, you find the navigation list you want to edit (i.e.

Departments, About, etc.). You want to look for the titles in between the

li

tags. You will know

these are navigation lists because there will be an

ul

tag on the next line instead of another li tag.

In the above example, I placed a new item in the

Departments

navigation list. What you need to

do is create a new line where you want the item to appear (all list items appear in order on the

page, so

Departments Home

will always be the first item in the list). Create the

list item

tab

(<li>), and then we need to provide a link to the page we are going to direct users to. To do this

we type in:

<a href=”/coe/

if the page will be located within the College of Education site.

After the

coe/

, you want to list the folder and finally end with the page you want the uses to

arrive at. In this example, the file is located within the College of Education site, inside a folder

called

newfolder

and the page is called

index.xml

. When the linked tag is closed, you can name

the item whatever you want. Then just put

</a></li>

at the end of the line to end the new list

item. Save your document and when the site is deployed, the changes will appear online.

Deleting a list item from the navigation

To delete an old or obsolete item

from the navigation is very easy.

You need to find the list item

inside the HTML code you want to get rid of. Highlight the entire line the list item appears on

and hit the

delete key

. This will delete the item from the list.

If you want to delete an entire navigation structure, you will want to

highlight all of the list items tags as well as the

<li>

,

</li>

,

<ul>

,

</ul>

tags containing all of the list items you want to delete.

Save your document and when the site is deployed, the changes will

appear online.

Add a new list to the navigation

Unlike the Contribution lists, when you use HTML, you can have as many nested lists as you

want. When you want to create a new navigation list, you first need to make a new list item in

the

original

list.

You can see the original list starts on

line 1. From there, all the list items

are displayed inside the

li

tags. To

make a new

navigation list

, start by

creating a new list item. In the

example to the right, you can see my

new navigation list is called

New

List

and I have a link to the index

page in the newlist folder [on line

11]. From there, I close the link tag

(using </a>) then proceed to start a

new list which will contain all the

navigation links.

On line 12, I start the new list using the

<ul>

tag. This tells the web page to get ready and start a

new list. On each consecutive line after that [<ul> tag], I have placed the new list items as well

as links to their respective pages. When you have all of the list items in the list, you need to

close the new list using the

</ul>

tag and then close the new navigation list with the

</li>

tag.

Save your document and when the site is deployed, the changes will appear online.

Checking in your Document

Once you have the document saved, you still need to check it in. Go back to Collage and you

will want to click on the

icon

in the

Version

column (if you just made your page you should see

a 1). Clicking the icon will tell the software to accept the latest version with all the changes. All

versions of a page are saved in Collage so if you ever need go back to a pervious version, contact

the webmaster and the web team will do their best to help you.

When the icon is gone, your newest version of the document was accepted and will be displayed

when Collage updates the site.