The Templates Kit Folders and Files
If you make changes to the custom.css or to the templates (.dwt) you are acting GLOBALLY – in other words all pages made from the templates will reflect these changes.
If you make a change to an actual .html page you are acting LOCALLY – and the changes only affect that page.
- In the above image we can see the Templates folder that contains our templates. The two that we use to create pages are called ‘subsite_home_07.dwt’ (.dwt dreamweaver template) to make the homepage (index.html) and ‘subsite_content_07.dwt’ for making the content pages of our website.
- We can also see the templates-assets folder but we never touch this folder.
- The third folder, templates-assets-custom contains an ‘07’ folder and inside this folder two more folders named ‘includes’ and ‘styles’.
- The ‘includes’ folder contains the ‘branding_space.html’ file to obviously change the name of your site and also the ‘menu.html’ to change the left hand menu in the content pages.
- Please DO NOT get confused and use the i_branding_space.html or the i_menu.html.
- The ‘styles’ folder contains the ‘custom.css’ (the customisable cascading style sheet – think of a style as you would in Microsoft Word – Times New Roman, 16, orange – this is a style!) that allows you to customise the accent colour at the top of the page and the two lines of colour at the bottom of the page, add new banner images and home page icons (after they have been made in Photoshop) and new sections to the homepage (index.html) that are controlled by the custom.css style sheet.
To Change the Accent Colour and the Top and Bottom Border Line Colour
- Double click on the custom.css inside the /templates-assets-custom/styles/ folder to open it.
- Change the hexadecimal numbers to the colour/number that you need. Leave the # symbol and use 6 numbers in all three locations. Save the custom.css and then open a template by double clicking on one to check the changes.
- This is a global change and affects both templates and any pages made from those templates. Who has authority to change this colour is important – who are the stakeholders involved in such as decision?
The ‘subsite_home_07.dwt’ template
- The banner image and the home page icons can be changed through the custom.css after the new images have been made in Photoshop and saved into your images folder inside your local webfolder.
- See wiki.webcentre.unimelb.edu.au/doku.php/templates/dreamweaver/customising for banner and home page image Photoshop master files.
- Generic text and links are present in this template. Change these links in a page made from this template not in the template itself (see below on how to make pages from templates). If you do change the template you can save it as another name by going File > Save As > ‘abp_home_07.dwt’ for example, and then make a page from this new template. It is always good to keep an unchanged version of both templates for later use.
- To add new text sections next to the icons hit the Enter button and a new text section appears. To delete a text section highlight the section so that you can see a blue line and hit the delete button twice.
- You can add footer and page title information in both templates so that you only ever have to enter this information twice. All pages then made from the templates will already have this information present. The same applies for the metadata placed in the head code of both templates.
- Footer information should be entered inside the green boxes. Do not delete the green boxes or place the information outside of the boxes. This is important. These fields will not work and will cause problems when making pages from the templates if the information is not inserted correctly.
- Page title. The correct way to title university pages is ‘Page Title : Site Title : The University of Melbourne’. You can fill in all of the information in ‘subsite_home_07.dwt’ template, and everything but the page name in the ‘subsite_content_07.dwt’ template.
- This information has to be entered only twice – it is a global change and all pages made from these templates will reflect these changes. When you make pages from the ‘content’ template all you will have to do is change the generic page name ‘Page Title’. The rest will already have been filled in.
The ‘subsite_content_07.dwt’ template
- You can change the menu though the ‘menu.html’ inside the ‘templates-assets-custom/07/includes’ folder.
- The side image is missing when you download the templates kit. Highlight the missing image by clicking on it and hit the delete button. Then enter a new GLOBAL side image for you site by inserting a new image using the ‘image button’ in the toolbar. The new side image should have already been made in Photoshop at a size of 160 pixels wide by 215 pixels high and saved (File > Save for Web) as a .jpg into you images folder inside your local web folder. Put in the alt text that is required and change the Caption below. These are global changes and any page made from this template will automatically have this image inserted.
NB. The side image is turned off by default in the .html pages made from the template and physically has to be turned on by going ‘Modify > Template Properties > turn side image on’ in the html page (see image below).
Making a Page From a Template
To make pages from a template go:- File > New > Page from Template from the left hand menu.
- Choose the site definition that you want to use the templates from. You may have more than one site definition as you may be working on more than one site (see image below).
- Click on the template that you want to make a page from. You may have more than the normal three templates as you may have saved the templates under another name (in the image below saved as benvs).
- Click Create.
We can see how critical setting up a site definition is. Not only is it important for uploading and downloading files to the server (FTP), it is critical as we can only make pages from a template if:
- the site definition is visible; and
- the templates are stored in the Templates folder
Saving an html page in Dreamweaver CS3
Go File > Save As > and save the page into your local web folder as an .html page
Previewing Pages in Dreamweaver CS3
- Turn the Options checkbox on in the Preferences so that your local html files that you are working on, on your local computer, can be previewed properly in Dreamweaver CS3 before uploading. Do this by going Edit > Preferences > Preview in Browser (in the left hand menu) and checking the options box (see image below).
- The local files when previewed are called ‘temporary’ or TMP files. Only Dreamweaver CS3 files will preview these files correctly. Dreamweaver 8 will preview these files at about 70% and Dreamweaver MX is incompatible with the University templates
- Go to the world button as indicated in the image below and select the browser that you would like the file to be previewed in.
Please note that Dreamweaver Training Notes are supplied by Dr Marcus Bunyan August 2008
<<Back | Contents |>>