University Relations Home

Web Template Instructions, Steps 4-5

Step 4: Fill in placeholders and navigation.

Line numbers ([123]) are approximate.

Dreamweaver


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.

      Modify Template Properties menu

      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.

      Modify template properties


      Template Property Guide

      CopyrightYear Ex. 2007 The year in which the materials on your website are copyright. Usually the current year.
      PageClass Please do not change.
      PageID Please do not change.
      SearchDomain Ex. english.vt.edu The SearchDomain limits the results of Virginia Tech's Google search to your web site. Note that there's no "www".
      SearchText Ex. CLAHS Website This 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".
      UnitName Ex. College of Liberal Arts and Human Sciences This 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.
      UnitURL Ex. 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.
      WebsiteName Ex. Department of English The name of your department of website.
      WebsiteURL Ex. http://www.english.vt.edu/ The URL for your department or website.
    4. 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.

      Navigation editing

    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.

      Subfooter editing in templates

    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.
 

HTML

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
    [12] <title> 
[13] <!-- TemplateBeginEditable name="ChildTitle" -->
[14] <!-- TemplateEndEditable -->
[15] Department of Your Department | Virginia Tech 
[16] </title>
    Site Title After
    [12] <title> 
[13] <!-- TemplateBeginEditable name="ChildTitle" -->
[14] <!-- TemplateEndEditable -->
[15] Department of English | Virginia Tech 
[16] </title>

  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
    [50] <div id="unit-header">
[51] <a href="#" 
[..] title="Return to Unit of Your Unit Website">
[..] <img src="../images/unit_header_screen.jpg" 
[..] alt="Unit of Your Unit" id="unit-header-screen" width="758" height="97" /></a>
[..] <img src="../images/unit_header_print.gif" 
[..] alt="Virginia Tech | Unit of Your Unit" id="unit-header-print" width="670" height="80" /> 
[52] </div>
    Unit Header After
    [50] <div id="unit-header">
[51] <a href="http://www.clahs.vt.edu/" 
[..] title="Return to College of Liberal Arts and Human Sciences Website">
[..] <img src="../images/unit_header_screen.jpg" 
[..] alt="College of Liberal Arts and Human Sciences" id="unit-header-screen" width="758" height="97" /></a>
[..] <img src="../images/unit_header_print.gif" 
[..] alt="Virginia Tech | College of Liberal Arts and Human Sciences" id="unit-header-print" width="670" height="80" /> 
[52] </div>

  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
    [104] <fieldset id="search-entry">
[105] <label for="search-query" class="hide">Enter your search here</label>
[...] <input id="search-query" name="q" type="text" value="Enter your search here" onclick="clearquery('search-query')" size="25" maxlength="50" />
[...] <input name="sitesearch" type="hidden" value="vt.edu" />
[...] <input name="hl" type="hidden" value="en" />
[...] <input name="sa" type="image" src="../assets/img/search_submit.gif" alt="Go" /> 
[106] </fieldset>
    Search After
    [104] <fieldset id="search-entry">
[105] <label for="search-query" class="hide">Enter your search here</label>
[...] <input id="search-query" name="q" type="text" value="Enter your search here" onclick="clearquery('search-query')" size="25" maxlength="50" />
[...] <input name="sitesearch" type="hidden" value="english.vt.edu" />
[...] <input name="hl" type="hidden" value="en" />
[...] <input name="sa" type="image" src="../assets/img/search_submit.gif" alt="Go" /> 
[106] </fieldset>

  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
    [198] <!-- BEGIN SUB HEADER BANNER -->
[199] <a href="#">
[...] <img src="../images/sub_header_large.jpg" 
[...] alt="Department of Your Department" width="566" height="180" />
[...] </a> 
[200] <!-- END SUB HEADER BANNER -->
    Sub Header After
    [198] <!-- BEGIN SUB HEADER BANNER -->
[199] <a href="http://www.english.vt.edu/">
[...] <img src="../images/sub_header_large.jpg" 
[...] alt="Department of English" width="566" height="180" />
[...] </a> 
[200] <!-- END SUB HEADER BANNER -->

  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
    [118] <div id="main-nav-bot">
[119] <ul class="back">
[120-122] <li><a href="http://www.vt.edu/">Virginia Tech Home</a></li>
[123-125] <li><a href="#">Your Unit</a></li>
[126-128] <li><a href="#">Department of Your Department</a></li>
[129] </ul>
[130] <!-- BEGIN SUB NAV -->
...
[134] <div class="sub-nav-bot">
[135] <ul>
[136-138] <li><a href="#">Lorem ipsum</a></li>
[139-141] <li><a href="#">Morbi non lacus</a></li>
[142-144] <li><a href="#">Praesent suscipit</a></li>
[145-147] <li><a href="#">Maecenas commodo</a></li>
[148] </ul>
[149] <ul>
    Navigation After
    [118] <div id="main-nav-bot">
[119] <ul class="back">
[120-122] <li><a href="http://www.vt.edu/">Virginia Tech Home</a></li>
[123-125] <li><a href="http://www.clahs.vt.edu/">College of Liberal Arts and Human Sciences</a></li>
[126-128] <li><a href="http://www.english.vt.edu/">Department of English</a></li>
[129] </ul>
[130] <!-- BEGIN SUB NAV -->
...
[134] <div class="sub-nav-bot">
[135] <ul>
[136-138] <li><a href="../faculty.html">Faculty</a></li>
[139-141] <li><a href="../students.html">Students</a></li>
[142] </ul>
[143] <ul>
[144-146] <li><a href="../programs.html">Programs</a></li>
[147-149] <li><a href="../organizations.html">Organizations</a></li>
[150] </ul>
[151] <ul>

  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
    [434] <div id="sub-footer-inside">
[435] <ul>
[436-438] <li><a href="#">Proin risus</a></li>
[439-441] <li><a href="#">Cras mauris lorem</a></li>
[442-444] <li><a href="#">Tempus non</a></li>
[445] </ul>
[446] </div>
    Sub Footer After
    [434] <div id="sub-footer-inside">
[435] <ul>
[436-438] <li><a href="../employment.html">Employment</a></li>
[439-441] <li><a href="../eo.html">Equal Opportunity</a></li>
[442-444] <li><a href="../privacy.html">Privacy</a></li>
[445-447] <li><a href="../contact_us.html">Contact Us</a></li>
[448] </ul>
[449] </div>

  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.

Dreamweaver

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.

      New page from Template

    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.
 

HTML

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
      [14-15] <title> 
[16-18] Page Title | Department of English | Virginia Tech 
   [19] </title>
...
[207-209] <div id="page-title"><h1>Page Title</h1></div>
      Page Title After
      [14-15] <title> 
[16-18] Faculty | Department of English | Virginia Tech 
   [19] </title>
...
[207-209] <div id="page-title"><h1>Faculty</h1></div>

    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: 

      [208-209] <div id="main-content">
    [210] <div id="intro">
          Inside Content
[224-226] </div>
    [227] <!-- BEGIN COLUMN GROUP [You can repeat this entire group as often as desired.] -->

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

      [27-28] <script type="text/javascript" src="assets/js/widgets.js"></script> 
[29-31] <link rel="stylesheet" href="assets/css/sub-content.css" type="text/css" media="screen" />
   [32] <!-- [Begin Editing Here] -->
...
[51-54] <li><a href="#skipto-main-content">Skip to Main Content</a></li>
[55-59] <li><a href="#skipto-sub-content">Skip to Featured Content</a></li>
[60-62] <li><a href="#skipto-footer">Skip to Footer</a></li>
...
[605-606] <!-- END MAIN CONTENT -->
    [607] <!-- BEGIN SUB-CONTENT -->
          Inside Content
[661-662] <!-- END SUB-CONTENT -->
    [663] <!-- BEGIN SUB-FOOTER -->

      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: 

      [607-610] <!-- BEGIN SUB-CONTENT -->
    [611] <div id="sub-content">
[612-613] <!-- BEGIN SUB-SECTION [You can repeat this division as often as desired.] -->
    [614] <div class="sub-section">
[615-622] <h2><!-- [Begin Editing Here] -->Heading 2<!-- [End Editing Here] --></h2> 
    [623] <!-- [Begin Editing Here] -->
[624-626] <p>Proin lobortis. <a href="#">Suspendisse mi justo</a>, venenatis a, accumsan ut, ornare vel, purus. Vestibulum semper metus sed libero.</p>
[627-629] <p>Aliquam pede. <strong> Sed ac arcu. </strong> Praesent semper, risus eu feugiat porta, libero ligula molestie enim, eu egestas est nibh quis diam.</p>
    [630] <!-- [End Editing Here] -->
    [631] </div>
    [632] <!-- END SUB-SECTION -->
[633-634] <!-- BEGIN SUB-SECTION [You can repeat this division as often as desired.] -->
    [635] <div class="sub-section">
[636-637] <h2><!-- [Begin Editing Here] -->Heading 2<!-- [End Editing Here] --></h2> 
    [638] <!-- [Begin Editing Here] -->
[639-640] <p>Proin lobortis. <a href="#">Suspendisse mi justo</a>, venenatis a, accumsan ut, ornare vel, purus. Vestibulum semper metus sed libero.</p>
[641-642] <p>Aliquam pede. <strong> Sed ac arcu. </strong> Praesent semper, risus eu feugiat porta, libero ligula molestie enim, eu egestas est nibh quis diam.</p>
    [643] <!-- [End Editing Here] -->
    [644] </div>
    [645] <!-- END SUB-SECTION -->
    [633] </div>
    [634] <!-- END SUB-CONTENT -->

      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.
 
 

< Previous Page | Change Log >