University Relations Home

Web Template Instructions, Steps 1-3

Before you begin

A website redesign is an opportunity to update content, rethink structure, and improve design. If you haven’t already, please review our Web Guidelines and Procedures, Web Development Best Practices, and Content Recommendations so you can make the suggested changes as part of creating or migrating content for your new website.

Though we’ve made every effort to make the templates simple and easy to use, basic knowledge of HTML, Photoshop, and Dreamweaver (if you use the Dreamweaver templates) is needed to set up your website. For assistance with HTML, Photoshop, and Dreamweaver, please contact the New Media Center: 1140 Torgerson Hall, (540) 231-4826, http://www.nmc.vt.edu/.

Step 1: Decide whether you would like to use Dreamweaver or HTML templates.

Dreamweaver

Use Dreamweaver templates 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 want to create a website for others to edit in Contribute.
 

HTML

Use HTML templates 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.

Line numbers ([123]) are approximate.

Dreamweaver

If you are using the Dreamweaver templates:

  1. Download and unzip the vtweb_dreamweaver_x.x.zip file. The most recent version is available from the downloads page.
  2. Set up a Site on your computer in Dreamweaver.
  3. Copy all the files inside the vtweb_dreamweaver_x.x folder into the main or root directory of your new site.
  4. If you are using a server side scripting language such as php, asp, or jsp:
    1. Change the file extension of each template from .dwt.html to .dwt.php, or .dwt.jsp etc. You may also want to change the extension of each sample file from .html to .php, or .jsp etc.

    2. In every template 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.

      Opening Template Tag Before
      [3] <!-- InstanceBegin template="/Templates/master.dwt.html" codeOutsideHTMLIsLocked="true" -->
      Opening Template Tag After
      [3] <!-- InstanceBegin template="/Templates/master.dwt.php" codeOutsideHTMLIsLocked="true" -->
 

HTML

If you are using the HTML templates:

  1. Download and unzip the vtweb_html_x.x.zip file. The most recent version is available from the downloads page.
  2. 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.
  3. If you are using a server side scripting language such as php, asp, or jsp, change the file extension of each sample file from .html to .php, or .jsp etc.
 
 

Step 3: Replace the Unit Header and Sub Header images.

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.

    (Note: Unit Header treatment is reserved for colleges and primary administrative units. A list of primary administrative units is available in Appendix B of the Web Guidelines. For more information, please contact Web Communications.)

  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. Your new files will overwrite the existing placeholder files in the images folder.
 

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 “Department of 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. Your new files will overwrite the existing placeholder files in the images folder.
 
 

< Previous Page | Next Page >