EDSE/EDIT 526: Web Accessibility and Design

Templates and Re-Usable Code

Contents

Introduction

When you create a web page—one web page—the techniques that we have been learning in class are pretty much all that you need to know. You simply start a new file in Dreamweaver, type your content, add your styles, and save the file with a .html

However, most web sites consist of more than one web page. The site might have three pages, or 10,000 pages. Most of the time these pages have certain things in common. For example, in the case study web site ("Abigail's web site"), all of the pages have the same logo in the upper left corner. They also have the same background image at the top (the red balls), and the same main menu items. You could type—or copy and paste—the same code onto every page, but this would be a lot of typing or copying and pasting. Plus there is the problem of updating the site. What happens if you want to change one of the links in the main menu? You would have to change the link on every page by typing the change, or copying and pasting it, or performing a site-wide search and replace. All of these would work, but there are better ways.

There are ways of saving bits of code—parts of web pages—so that you don't have to keep re-typing them, and so that when you edit one of those parts, the changes are reflected on all of the pages that use those parts. The ways of doing this are almost unlimited. I'm going to present only three simple methods here to get you started. These three methods are some of the most common, and are relatively easy to implement:

You should use ONE of these techniques... not all of them. Which one should you use? It honestly doesn't matter. There are strengths and weaknesses of each kind.

Template Technologies
  Dreamweaver Templates (DWT) Server-Side Includes (SS)I PHP Includes

What is it?

Dreamweaver templates are a Dreamweaver-specific method of saving a page as a "template" so that it can be used as a pattern for creating other pages.

Server-side includes (SSI) are a method of keeping the reusable parts of web content (e.g. the top of a web page) separate from the unique content on each page (e.g. the page's "main content"). You can then "include" these reusable parts in your web page without having to re-create them.

PHP includes are similar to SSI (at least the method that I'm going to show you here). PHP itself is a powerful programming language created specifically for creating web-based applications. The "includes" functionality is only a small portion of what PHP can do.

Does it work on all servers? Yes: DWTs can be used on all web servers; no special setup required No: The web server must be set up to be able to process server-side includes (Note: The server at portfolios.gmu.edu is already set up for this.) No: The web server must be set up to be able to process PHP (Note: The server at portfolios.gmu.edu is already set up for this.)
Is it easy to update the template on the entire site? Not always: When you update the DWT, you must re-upload all of the files using this template (which means you may have to upload the entire site again). With small sites it is easy. With large sites it is cumbersome. Yes: With SSI pages, you update the files with the "included" portions, and these changes are reflected immediately on every page. Yes: With PHP, you update the files with the "included" portions, and these changes are reflected immediately on every page.
Does the page display fully in Dreamweaver? Yes (both design view and code view): All of the code shows up in the code view in Dreamweaver, plus all of the design shows up in the Design view Yes (design view only): SSI pages display correctly in Dreamweaver as if it were all one page, even though the "included" file is actually a separate file; however, not all the code is visible in the code view (there is just a line of text saying to include the external file) Probably not: PHP pages may not display correctly in Dreamweaver. Dreamweaver is not always sophisticated enough to display the page correctly, even though the page will display correctly in a real web browser.
Do the pages load quickly in a browser? Yes Yes, but not as fast as plain HTML pages (such as Dreamweaver Templates). The server must process and interpret the pages before sending them to the user's browser. Yes, but not as fast as plain HTML pages (such as Dreamweaver Templates). The server must process and interpret the pages before sending them to the user's browser.
Can it do simple "if/then" logic (e.g. IF the user selects a certain menu item THEN highlight that menu item)? No Yes Yes
Is full-fledged programming logic possible? No Partially: SSI Can do some limited programming-type logic, such as setting variables and checking to see which type of browser the user is using, but this is not a full-fledged programming language. Yes: PHP can do powerful programming logic: PHP is a full-fledged programming language for web sites and web applications. You can use PHP to access databases, customize web pages, and do all kinds of other things. You are not limited to including external files.
Do the pages work if you save them to a disk? Yes: Each DWT page can be saved and shared "as is." No server technology is required to view the pages; you can send them in emails, save them to disk, etc. No: SSI pages are fully functional only on the web site. You can't save the file "as is" (but you can go to the web page in the browser, then save it). No: PHP pages are fully functional only on the web site. You can't save the file "as is" (but you can go to the web page in the browser, then save it).
When should use this method? Use this Dreamweaver Templates when the web server does not have more sophisticated technologies available, or when the web page must be saved as a stand-alone file (e.g. when you are created HTML documents to be saved on a CD-ROM or USB drive). Also useful for people who are uncomfortable with anything even slightly resembling "programming" (but SSI isn't too hard. You might want to give that a shot). Use this SSI when the server allows it, and when the type of functionality needed is limited to templates and simple logic. Use PHP when the server allows it, when simple logic is needed, or when sophisticated logic and programming options are needed.

But Which One Should I Use for the Final Project?!?

It might be tempting to use Dreamweaver Templates (and it's ok to use them), but I'm going to encourage you to try SSI, or if you're feeling bold, try PHP. I won't grade you down if you use Dreamweaver Templates. I just want to give you a taste for the more dynamic methods (SSI and PHP). I think you'll see their value as you begin to understand how they work.

Server-Side Includes (SSI)

One of the first things you need to know about server-side includes is that on most servers (such as portfolios.gmu.edu) you have to save the file with a different extension at the end. Instead of saving the file with a .htm or .html extension. You save the file with a .shtml extension. The .shtml extension alerts the server that the page needs to be processed differently, and treated as a server-side include, instead of as a regular HTML page. Once the server knows that it is a server-side include file, it looks for special server-side include codes embedded in the HTML, such as this: 

<!--#include virtual="header.shtml" -->

The above code tells the server to insert the bit of code found in the file called header.shtml. The bit of code will be inserted as if it were a part of the original web page. If the external file is in a subfolder named "includes", the code would look like this;

<!--#include virtual="includes/header.shtml" -->

Note: It is usually good practice to create a folder called "includes" (or something similar) and store all your external included files there.

Here is a basic example of a web page with an external file included into it (I left of the doctype and other important elements for the sake of simplification):

<html>
<head>
<title>This is my document</title>
</head>
<body>
<!--#include virtual="header.shtml" -->
<h1>This is a document with a server-side include</h1>
<p>This is a paragraph</p>
<!--#include virtual="footer.shtml" -->
</body>
</html>

The full code of the first bit of code (header.shtml) is shown below:

<ul>
<li><a href="index.shtml">Home</a></li>
<li><a href="about.shtml">About me</a></li>
</ul>

Note that this is NOT a complete web document. That's the way it's supposed to be. If you included all of the extra codes (<html>, <head>, <body>, etc.) these codes would show up twice—once from the original document, and once from the included document. That would be bad. It would create invalid code, and would probably not display correctly in browsers.

Here is the full code for the second bit of code (footer.shtml):

<p>Copyright 2006 <a href="http://www.gmu.edu">George Mason University</a></p>

The end result of all three files will look like this:

<html>
<head>
<title>This is my document</title>
</head>
<body>
<ul>
<li><a href="index.shtml">Home</a></li>
<li><a href="about.shtml">About me</a></li>
</ul>
<h1>This is a document with a server-side include</h1>
<p>This is a paragraph</p>
<p>Copyright 2006 <a href="http://www.gmu.edu">George Mason University</a></p>
</body>
</html>

In fact, if you open the file in a browser, then view the source code (right click > view page source or View > Page Source in the browser's main menu), you will see the whole document as if it had been created as a single file. You will not see the special "include" codes at all. Those codes are hidden from the end user.

Variables and If/Then Logic in Server-Side Includes

Server-side includes can do more than just insert external content into files. They can also set variables and provide some basic logic. One useful way to employ this functionality is to set a variable that makes your main menu items look "selected" after users click on them.

For example, on the sample site ("Abigail's Portfolio"), the background color of the selected menu items is a dark gray and the text is yellow, as compared to the medium gray background and white text of the menu items that are not selected. In the screenshot below, the "Home" menu item is selected.

This is accomplished with CSS. In the code, the menu item that appears selected is designated as such by setting the class to "selected" (class="selected"). The items that are not selected are given the class of "unselected" (class="unselected"). The styles for these classes are defined in the style sheet.

In order to use this style effectively, we have to make sure that we assign the correct classes to the correct menu items. In the example file, there are 6 possible configurations for the main menu. One configuration is with none of the links selected. The other 5 configurations are with one of the 5 links selected (one each for Home, Resume, Coursework, Portfolio, and About Me). If we make the main menu a server-side include, we would have to account for these 6 possible configurations. One possibility is that we could create 6 separate include files, and then include the appropriate file depending on which file is selected. But that is a bit cumbersome. A more elegant way of solving this problem is to introduce some logic into the included file.

Before looking at the logic, though, let's look at the code for this main menu in its original state (note: the code has been simplified somewhat here to show only the relevant aspects)

<ul id="main_nav">    
<li><a class="unselected" href="/sample_portfolio/">Home</a></li>
<li><a class="unselected" href="/sample_portfolio/sample_site/resume/">Resume</a></li>
<li><a class="unselected" href="/sample_portfolio/sample_site/coursework/">Coursework</a></li>
<li><a class="unselected" href="/sample_portfolio/sample_site/portfolio/">Portfolio</a></li>
<li><a class="unselected" href="/sample_portfolio/about/">About Me</a></li> 
</ul>

In the default state, all of the links are given the "unselected" class.

What we would like to do is set a variable on the main page (not the included file) that essentially says "set the 'Home' link to 'selected' but leave all of the others 'unselected'." Then, in the include file we have to insert some conditional logic that takes this variable into account. The only change we have to make is to change the word "unselected" into "selected". The "un-" prefix, then, is that part that we can make conditional. Here is one way of doing this, showing only the first item in the menu, for the sake of simplicity:

<li><a class="<!--#if expr="$selected != home" -->un<!--#endif -->selected" href="/sample_portfolio/">Home</a></li>

Don't panic! If this looks strange and scary to you, bear with me for a minute or two. I think it will make sense as I explain what it's doing. We've inserted a conditional statement in the middle of our HTML that basically says "if this page is not designated as a 'selected' page, print the 'un' in front of 'selected' so that the menu item will appear 'unselected'." Now let me explain each part of the expression in a little more detail.

The first part of the expression ( <!--#if ) just states that this is going to present an "if" condition to check for. What is it checking for? It is checking to see if the variable called "selected" is NOT equal to "home." The part that says expr= means that the next part is going to be an "expression" which is a computer programmer's way of saying that its a condition, or set of circumstances. The dollar sign in front of the word "selected" means that "selected" is a variable. It's something that can change, but which was set previously. In this example, the variable was set on the main .shtml page (not in the include file). I'll explain this in the next paragraph. The part that says != means "is not equal to." Again, this is a computer programmer's way of writing things. The last part ( !--#endif --> ) is just the closing tag for our conditional statement.

Now I have to go back and explain how the $selected variable was set in the first place. The main .shtml file has two lines of server-side include code:

<!--#set var="selected" value="home"-->
<!--#include virtual="includes/header-home.shtml" -->

The first line sets the variable. The second line includes the external file.

Note: It is important to set the variable BEFORE including the external file. If you don't the external file won't know what to do with the conditional statements. It will see that there is supposed to be a variable called $selected, but it won't find it, so the page will generate an error.

In all, we need to have 5 possible variables—one for each condition, not counting the default condition, which is that everything is "unselected."

With all of the variables accounted for, our include file would look like this:

<ul id="main_nav">
<li><a class="<!--#if expr="$selected != home" -->un<!--#endif -->selected" href="/sample_portfolio/">Home</a></li>
<li><a class="<!--#if expr="$selected != resume" -->un<!--#endif -->selected" href="/sample_portfolio/sample_site/resume/">Resume</a></li>
<li><a class="<!--#if expr="$selected != coursework" -->un<!--#endif -->selected" href="/sample_portfolio/sample_site/coursework/">Coursework</a></li>
<li><a class="<!--#if expr="$selected != coursework" -->un<!--#endif -->selected" href="/sample_portfolio/sample_site/portfolio/">Portfolio</a></li>
<li><a class="<!--#if expr="$selected != about" -->un<!--#endif -->selected" href="/sample_portfolio/about/">About Me</a></li>
</ul>

Creating Server-Side Includes

Now that you have a basic idea of how server-side includes work, how do you make use of them when designing a web site? Usually the work flow goes something like this:

  1. Design a plain HTML page
  2. Add styles in an external style sheet
  3. Save the page again, but this time with a .shtml extension. Keep the original HTML file as a backup.
  4. Decide which parts of the page will be repeated on multiple pages on the site (the logo, perhaps, and/or other items such as the main menu, the footer information at the bottom, etc.)
  5. In the .shtml file, place comments at the beginning and end of each section that you are going to cut out and save as an external file. For example, you could type
    <!-- BEGIN HEADER HERE -->
    before the beginning of the section with the logo and main menu. You could type
    <!-- END HEADER HERE -->
    at the end of this section. Just as a reminder: these comments will be invisible.
  6. Now go to the CODE VIEW and cut out the parts of the page in-between the comments, and save each to a separate file. To do this, you can just open a new file in Dreamweaver, then go to the code view, select everything, delete it, then paste in the content that you cut from the other page.
    NOTE: If you don't plan on having any dynamic elements in the new file (your "include" file), save it with a .htm or .html extension. If you plan on having some dynamic elements in the included file, save it with a .shtml extension. You will most likely want to have dynamic content in your header, but probably not in your footer. I'll explain this a little later.
  7. Repeat this process for all of the portions of code that you are going to save as external files.
  8. You can either leave the comments in the main web page (surrounding the "include" statements) or delete the comments.

Using Server-Side Includes on Multiple Pages

The whole point of creating server-side includes is so that we can use them on multiple pages. You will end up with several files using the same bits of external code. The worst thing you could do would be to create SSI files for every page. That defeats the whole purpose. You want to include the same SSI files in all pages that should include them.

So how do you put the server-side includes in these pages? Here is one way:

  1. Go to File > New in Dreamweaver, make sure that "HTML" is selected as the file type, then click on "Create."
  2. Go into the code view and put the cursor where you want to insert the include statements.
  3. Go to Insert > Server Side Includes in the Dreamweaver menu.
  4. Select the file you want to include

This will work to include an external file. It won't work quite as well for inserting conditional statements, such as the statement that sets the "selected" variable. The easiest way may be simply to copy and paste the code from one file to another.

Another way would be to create a Dreamweaver Snippet with these two lines of code (the two SSI statements). To do it this way,

  1. First create a snippet:
    1. click on the "Snippets" tab (near the "Files" and "Assets" tabs above the list of files)
    2. Click on the "paper plus" icon at the bottom.
    3. Create a new snippet of the "Insert block" type.
    4. Type the two SSI statements in the box
    5. Click "ok"
  2. Second, insert the cursor in the code view where you want to place the SSI statements
  3. Double click on the snippet that you created previously to insert the snippet at the spot where the cursor is
  4. Edit the code as necessary. For example, you may need to change the variable from $home to $portfolio.

PHP Includes

PHP includes work on the exact same principles as server-side includes, but there are differences in how PHP code works. The first major difference is that files must be saved with a .php extension at the end (NOT .htm or .html or .shtml). The second major difference is that PHP tags do not start with <!-- or end with --> as server-side includes do. Most servers are set so that PHP tags start with <? and end with ?>. Here is a simple PHP include statement:

<? include ("header.php"); ?>

Obviously this looks different from the server-side includes, but the concept is the same. However, there is one difference with PHP worth mentioning. The above example will only work if the main file and the external file are in the same folder. Unlike server-side includes, you cannot use relative paths with PHP includes (for example, you could not write <? include ("includes/header.php"); ?> or <? include ("../header.php"); ?>). If the external file is in a different folder, you have to use either the default "includes" folder on that particular server (you would have to ask your server administrator which folder that is), or you would have to write the full path to the file on the server's hard drive.

In the case of the portfolios.gmu.edu server, you do not have access to the default includes folder, so you have to write the full path. The full path on this server is:

/Applications/MAMP/htdocs/portfolios/[your_site]/[the_path_to_the_file]

For example, if your site's name is "sample_site" and the external file is called header.php and it is in the includes folder on your web site, the full PHP include statement would look like this:

<? include ("/Applications/MAMP/htdocs/portfolios/sample_site/includes/header.php"); ?>

Using the example code as before, and the full path to the include file, here is what a simplified web page could look like:

<html>
<head>
<title>This is my document</title>
</head>
<body>
<? include ("/Applications/MAMP/htdocs/portfolios/sample_site/includes/header.php"); ?>
<h1>This is a document with a server-side include</h1>
<p>This is a paragraph</p>
<? include ("/Applications/MAMP/htdocs/portfolios/sample_site/includes/footer.php"); ?>
</body>
</html>

If we include the logic statement which sets the variable, the page looks like this: 

<html>
<head>
<title>This is my document</title>
</head>
<body>
<? $selected="home";
include ("/Applications/MAMP/htdocs/portfolios/sample_site/includes/header.php"); ?>
<h1>This is a document with a server-side include</h1>
<p>This is a paragraph</p>
<? include ("/Applications/MAMP/htdocs/portfolios/sample_site/includes/footer.php"); ?>
</body>
</html>

The external header file with our conditional menu items looks like this:

<ul id="main_nav">
<li><a class="<? if ($selected != "home") { ?>un<? } ?>selected" href="/sample_portfolio/">Home</a></li>
<li><a class="<? if ($selected != "resume") { ?>un<? } ?>selected" href="/sample_portfolio/sample_site/resume/">Resume</a></li>
<li><a class="<? if ($selected != "coursework") { ?>un<? } ?>selected" href="/sample_portfolio/sample_site/coursework/">Coursework</a></li>
<li><a class="<? if ($selected != "portfolio") { ?>un<? } ?>selected" href="/sample_portfolio/sample_site/portfolio/">Portfolio</a></li>
<li><a class="<? if ($selected != "about") { ?>un<? } ?>selected" href="/sample_portfolio/about/">About Me</a></li>
</ul>

Notice that there are parentheses around the conditions, and that there are opening and closing curly brackets around the part that is conditional. Those are all parts of the PHP syntax. There is a lot more that you can do with PHP, but it would go way beyond the scope of this class to get into those details.

Dreamweaver Templates

Quick summary (see the "long explanation" for more details)

How to create Dreamweaver Template

  1. Create a web page in HTML, including text, graphics, and styles
  2. Save it as a template
    1. Go to File > Save as Template in Dreamweaver (note that this is NOT just "Save as" which is a different function)
    2. Give the template a name.
    3. You may see a warning that says that there are no editable regions yet. Click that away.
  3. Create editable regions
    1. Select the parts of the page that you want to make editable, such as the main content and the main navigation (since parts of these elements will change from page to page)
  4. Save the template

How to use a template

  1. Create a new file from a template
    1. Go to File > New
    2. Select the Templates tab
    3. Choose the correct site on the left, then choose the correct template on the right
    4. Click on Create
  2. Edit the editable regions
    1. Type in new content, add images, etc.
    2. Update the menu to reflect the current page
    3. Change the page title
  3. Save the page
  4. Upload the page to the web

The Long Explanation

Create a Template

First create a regular HTML file and save it with a .htm or .html extension. Next, add the styles by creating an external style sheet. Third, save the HTML file as a Dreamweaver template by going to File > Save as Template in the main Dreamweaver menu.

Note: The rest of this text refers to the case study about "Abigail's Web Site."

I gave it the name "sample_site.dwt." Dreamweaver created a folder called "Templates" in my list of files and saved the file there.

Then I had to designate certain areas as editable. I wanted the main content areas to be editable. In my case, I have two main content areas.

Create an editable region

  1. Select a section of the web page. I usually go to the code view to select the parts of the code that I want to be editable, but you can also select things in the Design view. The drawback of using the Design view is that you may or may not be selecting the things that you really want to select. In the Code view you can select exactly what you want.
    screenshot of the area I selected
  2. Go to Insert > Template Objects > Editable region in the main Dreamweaver menu
  3. Give the area a name, such as "main_content" or some other name that is meaningful to you for that area.

That's all you have to do to create an editable region. At this point I repeated the process for the second second block of text, which I named "last_section" and for the main menu, which I named "menu."

Ok, so I've got a template, but what do I do with it? Well, I close it. I'm done creating the template. Now I have to use that template to create a new file.

Create new files using templates

  1. Go to File > New and select the Templates tab
    the 'new from template' dialog box
  2. Select the correct site on the left (there may be only one)
  3. Select the correct template on the right

Now you should have a new page that looks exactly like your template, except that there are light blue lines around the editable regions, with the name of the editable region in the upper left corner of each region

one of the editable regions on the page

Finishing your template-based web pages

Now the only thing you have left to do is:

  1. Type in your new content and add the appropriate illustrations
  2. Save the file
  3. Upload the file to the internet

Now you should be able to type in your web site address and see the pages on the internet.

What if you change the template after creating your web site?

The beauty of Dreamweaver templates is that you can update the template in one place and have all of the pages update themselves automatically. To do this:

  1. Make a change to your template file.
  2. Save the template file
  3. Dreamweaver will ask you if you want to update all of the pages that use this template
    the dialog box for updating files
  4. Choose "Update"
  5. Upload all of the files again to the internet

The last step is kind of important. If you don't upload the files to the internet, nobody will be able to see the changes. You'll have to select all of the files from your list of files and then click on the blue "up arrow" the up arrow. You can select more than one file at a time by holding down the CTRL button. You can also just choose the top folder in the list, which will upload the entire site.

Find out more about this case study

Here are links to the files produced for this case study.