On this page:

• Copy a template file into the target directory
• Modify the new file
1. Set a title for the page
2. Set the context navigation bar
3. Set the header's departmental logo
4. Set the header's departmental title graphic
5. Set a preliminary subject title for the page
6. Optionally (and rarely) change the font size for the page
• Identify a place on another page or pages to link the new page

Copy a template file into the target directory

The task of creating a new web page file is notionally assigned to a specialist role which we have named "administrator". All standard pages have been established, so when creating a new page, use the _infopage.html template. To create a new web page from a template, the administrator first copies the _infopage.html template file from the _templates directory of the website. This new file is copied to an appropriate departmental directory, and given an appropriate name. The name of the file appears in the browser's page address field, so it should be given a name that is appropriate for public view. For reference purposes, we'll call our notional new page example.html and assume that it has been assigned to the playground department, therefore copied to the play directory.

Therefore the address of the new file would appear as follows in the browser:

http://www.dufferinpark.ca/play/example.html

Tip: To test a web page on the web server before it is published, copy it to the web server, but do not add a link to any other page to access it. Therefore no one will be able to see it, as they will not be able to reach it. To test it, type the full page address into the address field of the browser, and the page will load.

Modify the new file

The administrator then loads the new file into an HTML editor, and makes several modifications:

1. Set a title for the page

The title set in this step appears in several places: in the title bar of the browser, in the user's favourites list if the user bookmarks the page, in the user's history list if the page has been visited by the user, and in an email if the user clicks on one of the contact utilities at the bottom of the web page ("email this page to a friend" or "contact our webmaster").

Near the top of the HTML code, look for this comment and placeholder HTML code:

  <!-- Administrator: set the browser title for the Page here -->. 
  <title>Friends of Dufferin Grove Park: Website - Technical - New Page Creation</title>

Following this comment you will find a title tagset <title></title> with some placeholder text between the tags. Change the text between the tags to an appropriate title for the page. By convention, we begin all page titles with "Friends of Dufferin Grove Park:". The remainder of the title should provide enough information to identify the page in a meaningful way. For our example, we might say: Friends of Dufferin Grove Park: Playground - Web page example. Avoid the use of punctuation or special characters in the title - the browser might choke on them. If special characters are needed, use character entities (see Other components).

2. Set the context navigation bar

The context navigation bar is found at the top right of all website pages. It represents the most direct route to the current web page from the home page, and by implication the context (referencing and departmental) of the current web page. This helps to orient the user, and also provides a convenient way to navigate "upstairs" to gain perspective, or seek alternatives. (Note that each link of the navigation bar -- other than the one at the far right representing the current page -- is an active page link.) The links in this context navigation bar have to be set individually for each page. In order to accomplish this:

In the HTML code, a little below the title referenced in the previous section, find the following comment, followed by some similar placeholder HTML code:

<!-- Administrator: set navigation bar contents below here. Top is left, bottom is right
  The top item should be "Home,../home/dufferinpark.html". 
  The bottom item should be descriptive of the current page.
  Items in between lead from one to the other.
  Format: "<anchor-text>,<URL>" (note the comma separator). URL's are case-sensitive.
-->
<script language="JavaScript" type="text/javascript">
 var navbarlist= [
   "Home,../home/dufferinpark.html",
   "About Us,../aboutus/aboutus.html",
   "Website-Technical,website.html",
   "New Page Creation,nothing"
   ];
</script>

Each item in the list consists of two parts, separated by a comma: the left side is a shortened page name shown to the user; the right side is the relative address used by the browser to find the target page if the user clicks on the link (see Relative addressing on the Files page of this documentation). Modify the list to suit the page you are creating, being careful to maintain the exact same format for each line. As with the title, for each side of each line, avoid using punctuation or special characters. What you are actually doing is modifying a fragment of Javascript code which assigns values to a memory array. This array is used on loading of the page by a Javascript procedure to write the context navigation bar at the top right of the page. In the case of our example, given that example.html is in the same directory as play.html, you would modify the link values to something like:

<script language="JavaScript" type="text/javascript">
 var navbarlist= [
   "Home,../home/dufferinpark.html",
   "Playground,play.html",
   "Example page,nothing"
   ];
</script>

This would generate the following navigation bar at the top right of our notional page:

Home > Playground > Example page

Note that "Home" and "Playground" are clickable links; "Example page" is not.

3. Set the header's departmental logo

The departmental logo appears at the top left of each page, and varies by department. To set the departmental logo, follow these steps:

Find the following comment and HTML placeholder code:

   <!-- Administrator: set departmental logo graphic here -->
   <img class="image-theme-infopage" src="graphics/website_logo.gif" alt="">

Change the value assigned to the src attribute to match the name of the logo file in the graphics sub-directory of the departmental directory that you're in. The logo file will have a suffix of _logo and a file extension of .gif. In the case of our example, you would change the file name to:

   <img class="image-theme-infopage" src="graphics/play_logo.gif" alt="">

4. Set the header's departmental title graphic

The departmental title graphic appears at the top left of each page, to the right of the logo, and underneath the "Friends of Dufferin Grove Park" graphic. To set the departmental title graphic, follow these steps:

Find the following comment and HTML placeholder code:

   <!-- Administrator: set departmental title graphic here -->
   <img id="dept_title_infopage" class="image-pageid" src="graphics/website_title.gif" alt="">

Change the value assigned to the src attribute to match the name of the title graphic file in the graphics sub-directory of the departmental directory that you're in. The title graphic file will have a suffix of _title and a file extension of .gif. In the case of our example, you would change the file name to:

   <img id="dept_title_infopage" class="image-pageid" src="graphics/play_title.gif" alt="">

5. Set a preliminary subject title for the page

The subject title appears under the context navigation bar, and should give the reader a clear sense of the contents of the page. To set the subject title:

Find the following comments and placeholder subject title:

   <!-- ----[Custodian]---- set page subject title here -->
   Website - Technical - Creating a New Page
   <!-- End of ----[Custodian]---- sets page subject title -->

Change the subject title to something appropriate for the page. In our example, this might be:

   <!-- ----[Custodian]---- set page subject title here -->
   Playground Web Page Example
   <!-- End of ----[Custodian]---- sets page subject title -->

The comment is marked for the custodian so that the custodian can comfortably go back and change this title as the intent and wording of the title become clearer during content creation.

6. Optionally (and rarely) change the font size for the page

If the page is going to contain very compact information such as lists, you can make the font size smaller as follows:

Find the following comment and HTML code:

  <!-- Administrator: set class for standard/compact here for page content -->
  <div id="contentdivision" class="division-standard">

To apply a smaller font size to the page, change "standard" to "compact" as follows:

  <div id="contentdivision" class="division-compact">

Identify a place on another page or pages to link the new page

In creating the context navigation bar above, you will already have decided where the main link to the new page should be. Be specific now. It may for example be in the "Related pages:" section of the referring page (see Layout patterns). At the same time review the subject matter of the page and make a determination as to whether there are other pages on the website that should link to the current page for the convenience of the reader. At the same time the new page may want to contain links to other pages on the website.

Finally, make a determination whether the new page should be announced on the "Read the Latest News", "Check Coming Events", or "Neighbourhood News" announcement pages of the home page.