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).
pg_0002
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
.
pg_0003
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.
pg_0004
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.