Skip Menu

Return to Skip Menu

Main Content

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.

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.

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.

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" -- >

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.

  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.
  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.

 

Step 4: Fill in placeholders and navigation.

Line numbers ([123]) are approximate.

If you are using the Dreamweaver templates:

  1. Fill in Unit, Department/Website, and Search Information

    1. Go to the Templates folder.
    2. Open the Home, Content, Gateway, or Fluid templates that you would like to use for your website. Please do not open the master templates. It is no longer necessary to modify the master templates to set up your webslte.
    3. For each template, go to Modify > Template Properties.

          Step 4 illustration


      The Template Properies dialogue box will appear. Just click on the template property you'd like to change, and type over the text in the text box near the bottom of the dialogue box. Click OK, and your changes will be applied.

          Step 4 illustration

      Template Property Guide

      CopyrightYearEx. 2007The year in which the materials on your website are copyright. Usually the current year.
      PageClass Please do not change.
      PageID Please do not change.
      SearchDomainEx. english.vt.eduThe SearchDomain limits the results of Virginia Tech's Google search to your web site. Note that there's no "www".
      SearchTextEx. CLAHS WebsiteThis is the text that appears in the search box in the upper left. The text "Search" is already added for you, so the final result will be "Search CLAUS Website".
      UnitNameEx. College of Liberal Arts and Human SciencesThis is the name of the parent unit that you chose in Step 3. If you have any questions about your parent unit, please contact us at webcomm@vt.edu.
      UnitURLEx. http://www.clahs.vt.edu/This is the URL for the website of the parent unit you chose in Step 3. If you have any questions about this URL, please contact us at webcomm@vt.edu.
      VTName Please do not change.
      WebsiteNameEx. Department of EnglishThe name of your department of website.
      WebsiteURLEx. http://www.english.vt.edu/The URL for your department or website.

    5. Save your changes. Dreamweaver may ask if you want to update all the pages that are dependant on the templates you've modified. If you don't want to update the pages right away, just click Cancel.

  2. Fill in Navigation

    1. Open the templates you'd like to modify in design view.
    2. Just click inside the editable regions in the navigation on the top or the left, and modify the text and links as desired. In templates with vertical navigation, you can use the small toolbar labeled "Repeat SubNav" right under the MainNav area on the left. Use the small plus sign to add new sub-sections. Use the minus sign to remove sub-sections. Use the up and down arrows to reorder sub-sections.

          Step 4 illustration

    3. Save your changes. Dreamweaver may ask if you want to update all the pages that are dependant on the templates you've modified. If you don't want to update the pages right away, just click Cancel.

  3. Fill in the SubFooter

    1. Open the templates you'd like to modify in design view.
    2. Just click inside the editable region in the sub-footer near the bottom of the page, and modify the text and links as desired.

          Step 4 illustration

    3. Save your changes. Dreamweaver may ask if you want to update all the pages that are dependant on the templates you've modified. If you don't want to update the pages right away, just click Cancel.

  4. Perform a Site-Wide Template Update

    1. Go to Modify > Templates > Update pages… and perform a site-wide template update. All the templates but the master and all the sample pages should be updated. You should now be ready to build your website.
If you are using the HTML templates:
  1. Open all the sample files.
  2. Make the following changes to each file:

  3. Site Title

    In the title element (<title></title>), replace the "Department of Your Department" placeholder with the name of your department or organization.

    Site Title Before
        Step 4 title before
    Site Title After
        Step 4 title after

  4. Unit Header

    In the unit header division (<div id=”unit-header”>), replace the "Unit of Your Unit" placeholders with the name of the unit that you chose in Step 3. Replace the # placeholder with the web address for the unit that you chose in Step 3.

    Unit Header Before
        Step 4 unit header before
    Unit Header After
        Step 4 unit header after

  5. Search

    In the search division (<div id=”search”>), 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.

    Search Before
        Step 4 search before
    Search After
        Step 4 search after

  6. Sub Header

    In the sub-header division (<div id=”sub-header”>), replace the # placeholder with the web address for your department or organization. Replace the "Department of Your Department" placeholder with the name of your department.

    Sub Header Before
        Step 4 subheader before
    Sub Header After
        Step 4 subheader after

  7. Navigation

    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 (<li></li>), and additional groups of links may be created by adding new lists (<ul><li></li></ul>).

    Navigation Before
        Step 4 navigation before
    Navigation After
        Step 4 navigation after

  8. Sub Footer

    In the sub-footer division (<div id=”sub-footer”>), add links or information that you would like to put at the bottom of every page. Additional links may be created by adding new list items (<li></li>), and additional groups of links may be created by adding new lists (<ul><li></li></ul>).

    Sub Footer Before
        Step 4 subfooter before
    Sub Footer After
        Step 4 subfooter after

  9. Footer

    In the footer division (<div id="footer">), change the "Year" placeholder in the Virginia Tech copyright statement to the current year.

 

Step 5: Build website.

Line numbers ([123]) are approximate.

If you are using the Dreamweaver templates:

  1. Create Pages

    1. Go to File > New on the main menu.
    2. Make sure the Templates tab is selected.

          Step 5 illustration
    3. Select the Home, Gateway, Content or Fluid template that you'd like to use. (Don't use the master template!) Click the "Create" button. A new file will appear.
    4. Save the file with name and location desired. The home page of your website should be named index.html or index.php etc.

  2. Customize Pages

    1. Make sure you are editing in design view.
    2. Change the following as needed:

    3. Page Title

      (Available in all but the Home page templates.)

      Go to Modify > Template Properties... The Template Properties dialogue box will appear. Select the PageTitle property from the list, change the placeholder text to the title of your new page, and click "OK". The page title will be changed in both the browser title bar and the body of your new page.

    4. Optional Regions

      You can customize your pages by removing certain areas using optional regions in Dreamweaver. For example, to remove the Featured Content area on the right:

      Go to Modify > Template Properties... Select the FeaturedContent property from the list and uncheck the "Show FeaturedContent" box. The Featured Content area on the right will disappear. You can show the Featured Content area again by checking the "Show FeaturedContent" box.

      The easiest way to find out what optional regions are available on a page is to open the Template Properties dialogue box. Optional regions available in different templates:

      • FeaturedContent (Available in all but the Home Horizontal and Fluid templates.)
      • Intro (Available in the Home and Gateway templates.)
      • Postlude (Available in the Home and Gateway templates.)
      • RelatedLinks (Available in the Home templates.)
      • PageTitleInPage (Available in the Fluid templates.)
      • SearchBox (Available in the Fluid templates.)

    5. Repeating Regions

      You can customize your pages by repeating certain areas using repeating regions in Dreamweaver. For example, to add new sub-sections to the Featured Content area on the right:

      Go to the small toolbar labeled "Repeat SubSection" at the top of the Featured Content area on the right. Use the small plus sign to add new sub-sections. Use the minus sign to remove sub-sections. Use the up and down arrows to reorder sub-sections.

      Repeating regions available in different templates:

       

      • SubSection (Available in all but the Home Horizontal and Fluid templates.)
      • ColumnGroup (Available in the Home and Gateway templates.)

  3. Add Content

    1. Make sure you are editing in design view.
    2. Add text and images as desired to the editable regions of the page (outlined in blue).

  4. Repeat Process

    1. Repeat the process of creating, customizing, and adding content to your pages until your entire website is built.

If you are using the HTML templates:

  1. Create Pages

    1. Copy the sample file that you would like to use and save it with the name and location desired. The home page of your website should be named index.html or index.php etc.

  2. Customize Pages

    1. Open your new file.
    2. Change the following as needed.

    3. Page Title

      (Available in all but the Home page templates.)

      Replace the "Page Title" placeholders in the title element (<title></title>) and the h1 element (<h1></h1>).

      Page Title Before
          Step 5 title before
      Page Title After
          Step 5 title after

    4. Optional Regions

      You can customize your pages by removing certain regions. For example, to remove the Intro area on a Home or Gateway page, delete the Intro area code as shown:

          Step 5 intro

      To remove the Featured Content area, you will need to delete several lines of code throughout your page as shown:

          Step 5 featured content

      Optional regions available in different templates:

      • FeaturedContent (Available in all but the Home Horizontal and Fluid templates.)
      • Intro (Available in the Home and Gateway templates.)
      • Postlude (Available in the Home and Gateway templates.)
      • RelatedLinks (Available in the Home templates.)

    5. Repeating Regions

      You can customize your pages by repeating certain regions. For example, to add new sub-sections to the Featured Content area, repeat the sub-section code as shown:

          Step 5 subsection

      Repeating regions available in different templates:

      • SubSection (Available in all but the Home Horizontal and Fluid templates.)
      • ColumnGroup (Available in the Home and Gateway templates.)

  3. Add Content

    1. Add text and images to your page as desired. HTML comments have been included in the code to indicate where you can safely add content.

  4. Repeat Process

    1. Repeat the process of creating, customizing, and adding content to your pages until your entire website is built.