Web Publishing

Using the templates in the CMS

The web templates are crafted to automate many processes in the CMS. They provide a good basis for an accessible and usable website.

Downloading the files

The files are in a zip package that you can download.

Simply expand the contents to a location on your computer that suits you.

The CMS templates are a completely different package from the Dreamweaver templates.

Preparing your site

In creating your design, there are different types of files that need to be created and uploaded in different ways.

We recommend you create a folder to contain all the files you will use for this process. Don’t create this folder in your actual site asset. If you have a Designs folder, create it in there. From now on, this folder will simply be called your design folder.

Nested content files

Several simple pages must be created for the template to refer to.

In your design folder, create a New Child ⇒ Pages ⇒ Standard Page. Call it branding Space or something appropriate to your needs. Edit Content for this page, changing the properties for the Content DIV to Style Information = Raw HTML and Content Type = Raw HTML. After changing these properties the div area turns blue and you must save before continuing. This step is important!

Next, you can copy and paste the code below into the page as a starting point:

<span>Department name</span><a href="/" accesskey="1">Site Title</a>
If your site title has no parent department information, you should use this code instead:
<a href="/" accesskey="1" class="no-dept">Site Title</a>
The extra class pushes the text up a few pixels so it’s nicely centred in the banner.

rinse and repeat!

Repeat the process for two more files using the code below:
contact link:
<a href="http://www.unimelb.edu.au/contact/">Website feedback</a>
...altering the href to point to your site’s feedback form. 
<ul>
	<li><a href="http://www.unimelb.edu.au/az/faculties.html" accesskey="f">Faculties</a></li>
	<li><a href="http://www.unimelb.edu.au/az/">A-Z Directory</a></li>
	<li class="last-item"><a href="http://www.lib.unimelb.edu.au/" accesskey="l">Library</a></li>
</ul>

... again, altering the quicklinks to suit your local site needs if required.

(Note: if you are removing the faculty or library quicklinks, remove the accesskey attributes as well)

Uploading parse files

In your design folder, create a New Child ⇒ Design ⇒ Design with an appropriate name for the standard content template (eg:content-07). From the details screen of this new design asset, browse to and upload the appropriate parse file and the Associated File editing.css.

 Repeat this for each parse file you wish to use in your site.

Before you can use the new design asset, you must create a customisation for each parse file.

Create a Customisation

Right click on the new design asset you created and select Customisations, check the checkbox to create a new customisation for your design. If your site will have more than one customisation, you can choose a more imaginative name than the default.

In the details screen of the newly created customisation, check the checkboxes to customise design areas for:

On the same screen, browse to upload the Associated file:

and finally, Save the changes.

Customise

Enter the Site configuration custom area and populate the maintainer name and email fields.

Enter the branding space nested content area and use the file browser to locate the branding space page you created earlier. Repeat for the other two nested assets, contact and quicklinks.

From the Edit File screen of the custom.css or custom-home.css asset, you can change the colour scheme, banner graphic and home page icons for your site.

accent colour

Use the class accent to change the colour band below the top blue band of the page.

.accent {
	background-color: #466aa1; /* <-- change to your colour */
}

Make sure that the chosen colour has sufficient contrast with the quicklinks.

You can also optionally change the borders on the metalinks at the foot of the page to match or complement your accent colour.

#metalinks
{
	border-bottom-color: #ccc;
	border-top-color: #ccc;
}

banner graphics

Use the #top background to change the banner image for your site.

#top
{
	background-image: url("http://cms.unimelb.edu.au/__data/assets/image/0005/56741/001.jpg");
}

Use this gallery of banner images to find one for your site.

banner graphics

The home page icons are controlled by the custom-home.css.

The sections of links on the home page are each identified with a class - by default this is just section1, section2 etc. but you can use more descriptive class names, it does not matter. In the custom-home.css you then simply associate these sections with icon files for backgrounds.
 

#nav div.section1 {
	background-image: url("http://cms.unimelb.edu.au/__data/assets/image/0006/56526/001.jpg");
}

There are many premade icons you can use at the icon gallery page.

Creating your own graphics

You can create your own graphics using the photoshop banner master file and photoshop icon master file.

When you have created banners or icons, you can upload them to the gallery which will give you a stable URL for use in your css. 

Example

In the end, you should end up with a design folder that looks something like this screen grab.

design folder example 

Try it out!

When you have completed all the steps above, you should make your design folder live, cascading the changes through all the assets you have created in the process.

What are you waiting for? Apply the appropriate customisation to your site, or sections of it, from the settings screen of the asset.

Problems

There will be problems... there always are!

Most standard html will translate very smoothly, but where presentational code appears in the content of a page it may conflict with the styles applied using CSS. Usually, it’s just a matter of removing the presentational code and allowing the style sheets to do their stuff.

Home page

Nowhere is the problem of presentational content more apparent than on the home page of a site. The home page on the old blue template is a mess of nested tables and will break in dramatic fashion. The same issue affects Dreamweaver migration, so refer to the dreamweaver ‘guide to upgrading home pages’ for more information.

heading 1 and heading 2

For those migrating sites from the old template to the new template, there is an issue with mismatched heading levels. A detailed explanation and solution to the H1 problem is available.

top of page