AILA Style Guide
Using the Template
Before you begin
Though we've made every effort to ensure that the templates are simple and easy to use, basic knowledge of HTML, Photoshop, and Dreamweaver (if you use the Dreamweaver templates) is needed to perform the required steps for setting up your pages.
Step 1: Decide whether you would like to use Dreamweaver or HTML templates. Dreamweaver templates are ideal if: * You are new to Web design. * You would like to take advantage of Dreamweaver features such as regions and site-wide template updates. * You don't want to bother with hand coding HTML. * You want to create a website for others to edit in Contribute. HTML templates are ideal if: * You are familiar with standards-compliant XHTML and you prefer not to use Dreamweaver. * You intend to incorporate the templates into an alternate templating system, such as one used for a content management system. * You intend to incorporate the templates into a Web application. Step 2: Download and copy template files. 1. Download and unzip the template archive file for the set of templates you would like to use: * The template archive file for the Dreamweaver templates is vtweb_dreamweaver_x.x.zip. * The template archive file for the HTML templates is vtweb_html_x.x.zip. * The template archive files are available from the downloads page. 2. If you are using the Dreamweaver templates, set up a "Site" on your computer in Dreamweaver, and then copy all the files inside the vtweb_dreamweaver_x.x folder into the main or root directory of that site. 3. If you are using the HTML templates, copy all the files inside the vtweb_html_x.x folder into the main or root directory of your website on the server. If you prefer to work offline before uploading the files, then you can copy the files to a folder on your computer. 4. If you are using a server side scripting language such as php, asp, or jsp, change the file extension of the templates from .dwt.html to .dwt.php, or .dwt.asp etc. In every template file but the master, change "master.dwt.html" in the opening template tag (near the top of the page), to "master.dwt.php" or "master.dwt.jsp" etc. Step 3: Replace the unit headers and sub-headers. Unit headers 1. Download and unzip the vtweb_unit_headers_x.x.zip file. The unit headers file is available from the downloads page. 2. Find the headers for your organizational unit. 3. Rename the screen header to unit_header_screen.jpg. Rename the print header to unit_header_print.gif. 4. Copy both files into the images folder in the main or root directory of your new website, overwriting the unit header placeholder files. Sub-headers 1. Download and unzip the vtweb_sub_headers_x.x.zip file. The sub headers file is available from the downloads page. 2. Copy the files inside the vtweb_sub_headers_x.x folder to your computer. 3. Open the files with Photoshop. 4. Change the "Your Department" placeholders to the name of your department. 5. Choose and place a new background photo into the file. Photographs of the university may be found in the University Relations Photo Library. 6. Go to File > Save for Web. The compression settings for each file have already been adjusted, so there's no need to change them if you don't want to. 7. Save the sub-headers as sub_header_large.jpg and sub_header_small.jpg respectively. 8. Copy both files into the images folder in the main or root directory of your new website, overwriting the sub-header placeholder files. Step 4: Fill in placeholders and navigation. The following steps must be followed for every template that you plan to use on your website. If you are using the Dreamweaver templates: 1. Go to the Templates folder. 2. Open master.dwt.html. 3. Make sure you are editing in code view. 4. In the master template (master.dwt.html): 1. In the unit header division (
), change the "Unit of Your Unit" placeholders to the name of the unit that you chose in the previous step. Change the link href to the URL of the website for the unit that you chose in the previous step. 2. Go to Modify > Templates > Update pages. and perform a site-wide template update. 5. In each child template: 1. Go to Modify > Template Properties. Select the SiteTitle property and change the "Your Department" placeholder to the name of your department. (Do not delete "Virginia Tech" or the pipes!) 2. In the search division (
), change the value of the sitesearch input from vt.edu to (yourdomain).vt.edu. (Do not include the "www".) This change will limit search results to pages on your site. 3. In the navigation division (div id="nav"), change the text and links to reflect the name of your unit, the name of your department, and the navigation of your website. Additional links may be created by adding new list items ( ), and additional groups of links may be created by adding new lists (
), change the link href to the URL of your website. Change the "Your Department" placeholder in the alt attribute for the image to the name of your department. 5. In the sub-footer division (