Understand the Template Structure
- docs – pdfs and word docs
- gallery – images for the photo gallery (optional)
- images – images and graphics for your site
- includes – RESERVED! only for include files that are part of the template
- you will need to modify nav.html to create/edit your site navigation
- you will need to modify footer.html to modify your site contact email address and contact information page url
- resources – RESERVED! only for resources that are part of the template
- filetypeicons – RESERVED! these are images used to display file types
- rsv- RESERVED! your css and layout images are here – do not change or add
- source – RESERVED! the photoshop source file for your banner is here
- custom.css – modify this to add your own css
- banner940x89.jpg – this is the banner image shown at the top of your site, modify by starting with resources/source/banner940x89.psd and then save as a .jpg file.
- slideshow – images for the slideshow (optional)
- Templates – RESERVED! Dreamweaver templates (layouts) Please do not modify these.
Note that if you have an existing site built on an older template, it may be rather complex to convert this to the new template. We can help with this – contact us at email@example.com .
Change Pathnames and Default Information
- Go to https://bitbucket.org/wwuweb/template
- Select (download) towards bottom of box in area to right of screen.
- Save File into your web server’s main folder
- Double-click to expand the zip file
- In Dreamweaver use Edit, Find and Replace to change all instances of /western_template/ to /your_directory_name/ . For instance if you’re setting up a new share on Campusweb called mynewsite you would Find / Replace /western_template/ to /mynewsite/. Be sure to select the options shown below in order to catch all occurrences of the string:
- Using the same options as above, change all instances of DepartmentName to yourdepartmentname . This is used to pre-fill the webpage titles with your department name.
- Change all instances of firstname.lastname@example.org to the email address of your own webmaster. This gives a reliable place for people to report broken links, etc.
Start Your New Site
To create new pages use Dreamweaver and go to File, New…, Page From Template and choose one of the provided templates (one, two or three column, or a right sidebar)
Add Contact page
In the footer there is a link called Contact Us. This links to a page called contact.shtml. This can be a form to send email to your site maintainer or you can simply put the contact information for your entire department there. You may even wish to include a map or other information about where you are located. If you wish to have a custom link to your building on the interactive Campus Map contact webhelp
Put your navigation links in /includes/nav.html
See our page on how to add Search after your site is established to get added to the search engine on campus
Modifying the banner
If you do not have experience with Photoshop, please let us know and we will make a banner for you. If you do not own the Avenir font, please let us know and we will make the banner for you. If you are comfortable with Photoshop and have access to the Avenir font (or use Google Muli font), please follow these conventions:
- The source for the banner is in /resources/source/banner940x89.psd . Layers are already set up for the department name and other useful layers. Conventions are a right-justified Avenir-font department name, and a full-color banner image of a detail that pertains to your department. A banner 89 pixels high is NOT a good candidate for a group photo, a building photo, or other highly detailed photo. Choose something simple and appealing
- The visible banner is /resources/banner940x89.jpg so save-as jpg in this location when you are finished with your changes.
Images, CSS, and all that
Keep your CSS separate from the Template’s CSS. Cultivate good CSS habits and use /resources/custom.css to store any custom css that you wish to use on your site. Please do not modify any of the CSS in /resources/rsv as it will make it difficult for us to assist you (or your group in your absence) if things go sideways.
Also see Using the jQuery Extras to learn more about using our Gallery, Slideshow, Call-out Boxes and Accordions.
If you have images you wish to use on your web site, use Adobe Photoshop to edit the images for the web before you begin. See Photoshop Tutorial.