Step 3 - Customize the Dreamweaver template(s)
- Once you have set up your new site in Dreamweaver, go to the "Files" panel on the right side of your screen.
Clicking on the "Templates" folder, you'll see three templates:
template1.dwt: Two column layout (with top department photo, left navigation and right content column)
template2.dwt: Two column layout (with left navigation and right column containing department photo and content )
template3.dwt: Three column layout (with left navigation, middle column containing department photo and content, and right column for highlighting specific programs, services or events.)
- Modify the templates as show below.
Click here to see a detailed outline of a template.
URI Masthead uniquely and consistently identifying the University on all URI web pages.
Department Content determined and designed by site owners.
URI Footer listing copyright, disclaimer and contact information for the University.
Instructions and screenshots for how to modify a template are listed below. The process is similar for all three templates, so we will use Template 2 for our example.
"Edit Area A" - Enter "description", "keywords" and other meta information for search engines. This section must be modified in the Code window of Dreamweaver.
Click on the image to enlarge it.
"Edit Area B" - Enter a unique page title. This title appears on top of your browser window and is used by most search engines to index your page. This section can be modified in the Design window of Dreamweaver. Click on the image to enlarge it.
"Edit Area C" - Can be used to display either breadcrumb links or a second set of navigation links. Edit the breakcrumb links as below. Click on the image to enlarge it.
- Once you are done editing the templates, go to File > Save as Template and name your templates appropriately (using either the same file name or a different one).
"Edit Area C" - Edit second set of navigation on the top as below. Click on image to enlarge.
Sample page layout that uses second set of navigation instead of breadcrumb links
"Edit Area D" - Enter main site navigation that links to major sections of your site. You may enter up to 3 levels of extendable menus. Click on the image to enlarge it.
The next image demonstrates what the extendable menu system looks like. Notice the 3 levels that are contained in the menu system. Click on the image to enlarge it.
Main Menu: Modify the main menu in the Design view of Dreamweaver.
Click on the image to enlarge it.
Level 2 Extendable Menu: Modify the level 2 extendable menu in the Code view of Dreamweaver. Click here for more information on HTML lists. Click on the image to enlarge it.
An image of a modified level 2 extendable menu. Click on the image to enlarge it.
Level 3 Extendable Menu: Modify the level 3 extendable menu in the Code view of Dreamweaver. Click here for more information on HTML lists. Click on the image to enlarge it.
An image of a modified level 3 extendable menu. Click on the image to enlarge it.
View sample Level 1 menu code | Level 2 menu code | Level 3 menu code
"Edit Area E" - Enter department contact information. Click on the image to enlarge it.
"Edit Area F" - Enter feature image. Limit the image width to 608 pixels. Click on the image to enlarge it.
"Edit Area G" - Enter your local site name. This can be the name of your college or department. Click on the image to enlarge it.
"Edit Area H" - Enter main page content and/or image. Click on the image to enlarge it.
Proceed to Step 4 - Create new pages based on the revised Dreamweaver template
