Date: 1 October 2011Author: Creative Services web teamContact: webdev@brookes.ac.uk Version: 4.0 - 1 October 2011Last updated by: Bryan Day, 25 October 2011

This document should be used in conjunction with the other web branding documentation and design templates available at: www.brookes.ac.uk/about/identity/digital/ Please keep the Creative Services web team up to date with any web staff changes in your department or directorate. Email: webdev@brookes.ac.uk

WEB SUPPORT DOCUMENTATIONUsing the Dreamweaver ‘smart’ template

Contents

1. What is a Dreamweaver ‘smart’ template?

2. What do I need to do before I use the ‘smart’ template?

2.1. Decide on your site structure

2.2. Add your menu to the template

3. How do you create a page from the ‘smart’ template?

3.1. Create a new page and save

3.2. Remove comments

3.3. How to create a section homepage

3.4. How to create a sub-section page

3.5. How to create a three column page

3.6. How to create a two column page

3.7. Adjust Template Parameters

4. Troubleshooting

1. What is a Dreamweaver ‘smart’ template?The ‘smart’ template is a combination of a parameter based menu system and the four different layouts that are used by the university (2 column, 3 column, section home page and sub-section home page). The menu is located inside a non-editable region of the template. The page heading and title can also be added.

Save the smart template into your local site under the folder ‘Templates’ (this must have a capital T), or create a new folder if there isn’t one there already. Dreamweaver will look here for templates.

2. What do I need to do before I use the ‘smart’ template?

2.1 Decide on your site structureBefore you can implement your smart template you will need to have your site structure decided. It will be better to do this first as it may be harder to go back and change this; the template can always be adjusted later. Decide on a unique single word name for each page in the site.

For example your site structure could look something like this:

Department name Department

o About the Department About

o News and Events News

o Courses Courses

Undergraduate Undergraduate

Anthropology Anthropology

Geography Geography

Law Law

Postgraduate Postgraduate

Politics Politics

International Relations International

Sociology Sociology

o Research Research

o Departments Departments

o Staff Staff

o Contact Contact

Or your site structure in a spreadsheet arranged like below:

SectionID Level 1 Level 2 Level 3 UniqueIDDepartment name

Department

About the Department

About

News and Events

News

Courses CoursesUndergraduate Undergraduate

Anthropology AnthropologyGeography GeographyLaw Law

Postgraduate PostgraduatePolitics PoliticsInternational Relations

International

Sociology SociologyResearch ResearchDepartments DepartmentsStaff StaffContact Contact

Note: you may have extra levels i.e. level4, etc

2. 2. Add your menu to the templateWhen you have the structure in place you can then make a nested list in the mainnav menu. Replace the current menu in your template between the first opening and closing unordered list....<ul id="mainnav"> ...</ul>...

Add the SectionID first; this should link to your home page or your section home page. ...<ul id="mainnav"> <li><a class="head" href="/department/index.html">Department name</a></li></ul>...

Add the top level pages (Level1). ...<ul id="mainnav"> <li><a class="head" href="/department/index.html">Department name</a> <ul> <li><a href="/department/about.html">About the Department</a></li> <li><a href="/department/news.html">News and Events</a></li> <li><a href="/department/courses/index.html">Courses</a></li> <li><a href="/department/research.html"> </a></li> <li><a href="/department/departments.html">Departments</a></li> <li><a href="/department/staff.html">Staff</a></li> <li><a href="/department/contact.html ">Contact</a></li> </ul> </li></ul>...

Add the following code and add a uniqueID value (this can include spaces) to each top level menu item: @@(current=="value"?'class="current"':'')@@ Note: This was @@(level1=="value"?'class="current"':'')@@ previous versions.

...<ul id="mainnav"> <li><a class="head" href="/department/index.html">Department name</a> <ul> <li><a href="/department/about.html" @@(current=="About"?'class="current"':'')@@>About the Department</a></li> <li><a href="/department/news.html" @@(current=="News"?'class="current"':'')@@>News and Events</a></li> <li><a href="/department/courses/index.html" @@(current=="Courses"?'class="current"':'')@@>Courses</a></li> <li><a href="/department/research.html" @@(current=="Research"?'class="current"':'')@@>Research</a></li> <li><a href="/department/departments.html" @@(current=="Departments"?'class="current"':'')@@>Departments</a></li> <li><a href="/department/staff.html" @@(current=="Staff"?'class="current"':'')@@>Staff</a></li> <li><a href="/department/contact.html" @@(current=="Contact"?'class="current"':'')@@>Contact</a></li> </ul> </li></ul>...

Add the next level menu items. Add a uniqueID value to each ul, this will be the value for the list item above it (‘Courses’ in this example) and will hide the menu items when not used. @@(level1=="value"?'':'class="hidenav"')@@ ...<ul id="mainnav"> <li><a class="head" href="/department/index.html">Department name</a> <ul> <li><a href="/department/about.html" @@(current=="About"?'class="current"':'')@@>About the Department</a></li> <li><a href="/department/news.html" @@(current=="News"?'class="current"':'')@@>>News and Events</a></li> <li><a href="/department/courses/index.html" @@(current=="Courses"?'class="current"':'')@@>>Courses</a> <ul @@(level1=="Courses"?'':'class="hidenav"')@@> <li><a href="/department/courses/undergraduate/index.html">Undergraduate</a></li> <li><a href="/department/courses/postgraduate/index.html">Postgraduate</a></li> </ul> </li> <li><a href="/department/research.html" @@(current=="Research"?'class="current"':'')@@>Research</a></li> <li><a href="/department/departments.html" @@(current=="Departments"?'class="current"':'')@@>Departments</a></li> <li><a href="/department/staff.html" @@(current=="Staff"?'class="current"':'')@@>Staff</a></li> <li><a href="/department/contact.html" @@(current=="Contact"?'class="current"':'')@@>Contact</a></li> </ul> </li></ul>...

Add the next menu items. Add a uniqueID value to each menu: @@(current=="value"?'class="current"':'')@@...<ul id="mainnav"> <li><a class="head" href="/department/index.html">Department name</a> <ul> <li><a href="/department/about.html" @@(current=="About"?'class="current"':'')@@>About the Department</a></li>

<li><a href="/department/news.html" @@(current=="News"?'class="current"':'')@@>>News and Events</a></li> <li><a href="/department/courses/index.html" @@(current=="Courses"?'class="current"':'')@@>>Courses</a> <ul @@(level1=="Courses"?'':'class="hidenav"')@@> <li><a href="/department/courses/undergraduate/index.html" @@(current=="Undergraduate"?'class="current"':'')@@>Undergraduate</a> <ul> <li><a href="/department/courses/undergraduate/anthropology.html">Anthropology</a></li> <li><a href="/department/courses/undergraduate/geography.html">Geography</a></li> <li><a href="/department/courses/undergraduate/law.html">Law</a></li> </ul> </li> <li><a href="/department/courses/postgraduate/index.html" @@(current=="Postgraduate"?'class="current"':'')@@>Postgraduate</a> <ul> <li><a href="/department/courses/postgraduate/politics.html">Politics</a></li> <li><a href="/department/courses/postgraduate/international_relations.html">International Relations</a></li> <li><a href="/department/courses/postgraduate/sociology.html">Sociology</a></li> </ul> </li> <li><a href="/department/research.html" @@(level1=="Research"?'class="current"':'')@@>Research</a></li> <li><a href="/department/departments.html" @@(level1=="Departments"?'class="current"':'')@@>Departments</a></li> <li><a href="/department/staff.html" @@(level1=="Staff"?'class="current"':'')@@>Staff</a></li> <li><a href="/department/contact.html" @@(level1=="Contact"?'class="current"':'')@@>Contact</a></li> </ul> </li> </ul> </li></ul>...

Add a uniqueID value to each ul, this will be the value for the item above it (‘Undergraduate and Postgraduate’ in this example) and will hide the menu items when not used. @@(level2=="value"?'':'class="hidenav"')@@ ...<ul id="mainnav"> <li><a class="head" href="/department/index.html">Department name</a> <ul> <li><a href="/department/about.html" @@(current=="About"?'class="current"':'')@@>About the Department</a></li> <li><a href="/department/news.html" @@(current=="News"?'class="current"':'')@@>>News and Events</a></li> <li><a href="/department/courses/index.html" @@(current=="Courses"?'class="current"':'')@@>>Courses</a> <ul @@(level1=="Courses"?'':'class="hidenav"')@@> <li><a href="/department/courses/undergraduate/index.html" @@(current=="Undergraduate"?'class="current"':'')@@>Undergraduate</a> <ul @@(level2=="Undergraduate"?'':'class="hidenav"')@@> <li><a href="/department/courses/undergraduate/anthropology.html">Anthropology</a></li> <li><a href="/department/courses/undergraduate/geography.html">Geography</a></li> <li><a href="/department/courses/undergraduate/law.html">Law</a></li> </ul> </li> </ul> </li>

<li><a href="/department/courses/postgraduate/index.html" @@(current=="Postgraduate"?'class="current"':'')@@>Postgraduate</a> <ul @@(level2=="Postgraduate"?'':'class="hidenav"')@@> <li><a href="/department/courses/postgraduate/politics.html">Politics</a></li> <li><a href="/department/courses/postgraduate/international_relations.html">International Relations</a></li> <li><a href="/department/courses/postgraduate/sociology.html">Sociology</a></li> </ul> </li> </ul> </li> <li><a href="/department/research.html" @@(current=="Research"?'class="current"':'')@@>Research</a></li> <li><a href="/department/departments.html" @@(current=="Departments"?'class="current"':'')@@>Departments</a></li> <li><a href="/department/staff.html" @@(current=="Staff"?'class="current"':'')@@>Staff</a></li> <li><a href="/department/contact.html" @@(current=="Contact"?'class="current"':'')@@>Contact</a></li></ul>...

Add a uniqueID value to each level 3 menu item @@(current=="value"?'class="current"':'')@@...<ul id="mainnav"> <li><a class="head" href="/department/index.html">Department name</a> <ul> <li><a href="/department/about.html" @@(current=="About"?'class="current"':'')@@>About the Department</a></li> <li><a href="/department/news.html" @@(current=="News"?'class="current"':'')@@>>News and Events</a></li> <li><a href="/department/courses/index.html" @@(current=="Courses"?'class="current"':'')@@>>Courses</a> <ul @@(level1=="Courses"?'':'class="hidenav"')@@> <li><a href="/department/courses/undergraduate/index.html" @@(current=="Undergraduate"?'class="current"':'')@@>Undergraduate</a> <ul @@(level2=="Undergraduate"?'':'class="hidenav"')@@> <li><a href="/department/courses/undergraduate/anthropology.html" @@(current=="Anthropology"?'class="current"':'')@@>Anthropology</a></li> <li><a href="/department/courses/undergraduate/geography.html" @@(current=="Geography"?'class="current"':'')@@>Geography</a></li> <li><a href="/department/courses/undergraduate/law.html" @@(current=="Law"?'class="current"':'')@@>Law</a></li> </ul> </li> </ul> </li> <li><a href="/department/courses/postgraduate/index.html" @@(current=="Postgraduate"?'class="current"':'')@@>Postgraduate</a> <ul @@(level2=="Postgraduate"?'':'class="hidenav"')@@> <li><a href="/department/courses/postgraduate/politics.html" @@(current=="Politics"?'class="current"':'')@@>Politics</a></li> <li><a href="/department/courses/postgraduate/international_relations.html" @@(current=="International"?'class="current"':'')@@>International Relations</a></li> <li><a href="/department/courses/postgraduate/sociology.html" @@(current=="Sociology"?'class="current"':'')@@>Sociology</a></li> </ul> </li> </ul> </li> <li><a href="/department/research.html" @@(current=="Research"?'class="current"':'')@@>Research</a></li>

<li><a href="/department/departments.html" @@(current=="Departments"?'class="current"':'')@@>Departments</a></li> <li><a href="/department/staff.html" @@(current=="Staff"?'class="current"':'')@@>Staff</a></li> <li><a href="/department/contact.html" @@(current=="Contact"?'class="current"':'')@@>Contact</a></li></ul>...Note: Other levels can be added, each time adding a new level i.e. the next level would be ‘level4’.

3. How do you create a page from the ‘smart’ template?

3.1. Create a new page and save

Go to File > New then click the ‘Page from Templates’ tab. Choose your site under ‘Templates for:’ then pick the smart template (smart_template_x_x.dwt) from under the ‘Site (whatever your department, directorate, etc. is called)’ then click the ‘Create’ button. Make sure that the box ‘Update page when template changes’ is checked. Save your untitled page as a real page now.

3.2. Remove comments

Take a quick look at the page in Code view, you will see that there are greyed out sections and sections in colour. The greyed out sections are regions that are not editable and comments which need to be deleted so they don’t show up in the source of the page. The coloured sections are editable.At the top of the page you will see the start of a comment:

<!-- ###################### DELETE THIS COMMENT ######################Under this you will see instructions for creating a page from the 4 different layouts.You can delete this now as you have the instructions below.Delete all the instructions to the end of the closing comment:###################### DELETE THIS COMMENT AND EVERYTHING ABOVE ###################### -->

3.3. How to create a section homepage

1. Remove commented areas SUB-SECTION PAGE START and TWO COLUMN PAGE START in the "screen_css" Editable Region2. Change BODYCLASS to “section-homepage” from the <body> element [1]

3. Remove commented SUB-SECTION PAGE BANNER START from "content" Editable Region4. Remove commented SUB-SECTION PAGE CONTENT START, THREE COLUMN PAGE START and TWO COLUMN PAGE START from "content" Editable Region5. Save page6. Go to Modify > Templates > Update Current Page7. Save page again and view in browser (F12)

3.4. How to create a sub-section page

1. Remove commented areas SECTION HOMEPAGE START and TWO COLUMN PAGE START in the "screen_css" Editable Region2. Change BODYCLASS to sub-section-page from the <body> element [1]

3. Remove commented SECTION HOMEPAGE BANNER START from "content" Editable Region4. Remove commented SECTION HOMEPAGE CONTENT START, THREE COLUMN PAGE START and TWO COLUMN PAGE START from "content" Editable Region5. Save page6. Go to Modify > Templates > Update Current Page

7. Save page again and view in browser (F12)

3.5. How to create a three column page

1. Remove commented areas SECTION HOMEPAGE START and SUB-SECTION PAGE START and TWO COLUMN PAGE START in the "screen_css" Editable Region2. Change BODYCLASS to three-col-page from the <body> element [1]

3. Remove commented SECTION HOMEPAGE BANNER START and SUB-SECTION PAGE BANNER START to from "content" Editable Region4. Remove commented SECTION HOMEPAGE CONTENT START, SUB-SECTION PAGE CONTENT START and TWO COLUMN PAGE START from "content" Editable Region5. Save page6. Go to Modify > Templates > Update Current Page7. Save page again and view in browser (F12)

3.6. How to create a two column page

1. Remove commented areas SECTION HOMEPAGE START and SUB-SECTION PAGE START in the "screen_css" Editable Region2. Change BODYCLASS to two-col-page from the <body> element [1]

3. Remove commented SECTION HOMEPAGE BANNER START and SUB-SECTION PAGE BANNER START from "content" Editable Region4. Remove commented SECTION HOMEPAGE CONTENT START, SUB-SECTION PAGE CONTENT START and THREE COLUMN PAGE START from "content" Editable Region5. Remove div with id="portal-column-two"6. Save page7. Go to Modify > Templates > Update Current Page8. Save page again and view in browser (F12)

[1] Make sure you leave your department style after the class. For example if it is ‘library’:...<body id="@@(BODYID)@@" class="@@(BODYCLASS)@@ library">...

If you haven’t already done this add a unique department class to the body. Remember to add space before the department. This can be called anything you want but must be used in the declaration for the SectionID above i.e. body.department #mainnav li a.head

...<body id="@@(BODYID)@@" class="@@(BODYCLASS)@@ department">...

3.7. Adjust Template Parameters

Go to Modify > Template Properties and edit the values for each parameter. You can edit these values in code view.

Available BODYID values default (Leave this as is)

Available BODYCLASS values section-homepage

sub-section-page

three-col-page

two-col-page

3.8 pageTitle

Change the pageTitle parameter for your page. This will change the page title in the page you’ve created from the template. So if you’ve already added ‘– Oxford Brookes University’ to the template and change the pageTitle to ‘Library’ it will change to ‘Library – Oxford Brookes University’ in your page....<!-- TemplateParam name="BODYID" type="text" value="default" --><!-- TemplateParam name="BODYCLASS" type="text" value="section-homepage" --><!-- TemplateParam name="pageTitle" type="text" value="Courses – Postgraduate - Sociology" --><!-- TemplateParam name="current" type="text" value="Sociology" --><!-- TemplateParam name="level1" type="text" value="Courses" --><!-- TemplateParam name="level2" type="text" value="Postgraduate" --><!-- TemplateParam name="level3" type="text" value="Sociology" -->...

Note: If you want only top level 1 to show remember to leave level 2 and level 3 fields emptyi.e. Fig. 2a (see corresponding image below)pageTitle = Coursescurrent = CoursesLevel1 = CoursesLevel2 = Level3 =

Fig. 2b (see corresponding image below)pageTitle = Courses - Postgraduate current = PostgraduateLevel1 = CoursesLevel2 = PostgraduateLevel3 =

Fig. 2c (see corresponding image below)pageTitle = Courses – Postgraduate - Sociology current = SociologyLevel1 = CoursesLevel2 = PostgraduateLevel3 = SociologyRemember to do the following after changing the properties:Modify > Templates > Update Current PageThen Save page

Fig. 2a Courses Fig. 2b Courses, Postgraduate Fig. 2c Courses, Postgraduate, Sociology

4. Troubleshooting

The menu is always open on every pageMake sure you have the ‘hidenav’ class in your style sheet.

How do I change the footer date?Change the year to the current one and save the template. This will update every page using the smart template! Remember to upload every page to your server afterwards.

This document should be used in conjunction with the other web branding documentation and design templates available at: www.brookes.ac.uk/about/identity/digital/

This document should be used in conjunction with the other web branding documentation and design templates available at: www.brookes.ac.uk/about/identity/digital/

Please keep the Creative Services web team up to date with any web staff changes in your school or directorate. Email: webdev@brookes.ac.uk