The "How to Create a Tutorial" Tutorial
Computing Resources >> Tutorials >> Getting Started >> How to Create a Tutorial

Introduction

The Outline

The Handout

The Website

The Video

Uploading Your Files

Evaluate this tutorial

PDF Handout

 

The Website

Once your content and graphics have been created, creating the website will be easy, provided you do a little planning ahead of time.* First, download the template and related files, which can be found in the ~labstaff account (ask another labstaff member if you need help locating these files). The current version is called Tutorial Template 2005, and consists of a templates folder (contains the template), an images folder (contains images for the media players, and is where you will store any additional images you create), and a CSS stylesheet (this stylesheet is already linked, so don't move it).

First, rename the folder that contains these files - this folder name will become part of the url for your site. Follow standard filenaming conventions: all lowercase, no spaces, short and simple. Here are some examples:
account (How to Use Your School of Information Account)
ppt03 (How to Use Powerpoint 2003)
dwmx2004 (How to Use Dreamweaver MX 2004)
mozillanav (Intro to Mozilla Navigator)

You get the idea. Now, change the name of the template file located in the Templates folder. Make this name the same name as your folder (later, if you need to update your pages using the template, this will come in handy).

Now that's done, you will need to create a site using Dreamweaver's Site Management function. This is an easy way to keep track of your files. (Remember, if you're using a computer in the lab that requires a login, you will need to set up this site each time you log into the computer.) Open Dreamweaver and select Site > Manage Sites from the top menu. A wizard will appear to guide you through the rest of the process. Select New > Site and then enter the name of your tutorial and click Next. Then choose “No, I do not want to use server technology” and click Next. Choose to “Edit local copies on my machine” and choose the folder that contains the template files, then click Next. When asked how you connect to your server, select “None” from the drop down menu and click Next. On the next screen click Done. Now your site is set up.

The files should appear on the righthand side of your screen, under the Files tab. Here's what it should look like:

Open up the template file in the Templates folder by clicking on the file name under the Files tab. This is the time to make the most of the template. Your template consists of editable regions and uneditable regions.There are some items that will be the same on every page. Since most of these occur in editable regions to allow for full use of CSS, it’s important to have the template looking as close to finished as possible before applying it to new html pages.

1. Change the title of the tutorial (located along the toolbar at the top of your screen). The title will be the name of your tutorial, followed by a space, followed by two colons, followed by a space, followed by your name. Example:

2. Change "Getting Started With..." to the name of your tutorial.

3. Change the links along the top navbar of the page (Computing Resources >> Tutorials >> Insert Section Here >> Insert Name of Tutorial Here). Make sure the links are correct (the Computing Resources and Tutorials pages recently changed from .html pages to .php pages, so make sure the links reflect the new urls). Example:

Make sure your tutorial is in the appropriate section. The available sections are: Getting Started, Internet & Security, Graphics & Multimedia, Email & Voicemail, Office Suite, and Web Development. More sections can be added as needed.

4. Add in the copyright information at the bottom of the page. It should be the copyright symbol, followed by a space, the year, another space, your name, and a space. Example:

5. Change the name of the image for the video (in the template, it's dw.jpg). Later, you will make an animated gif for this section, but go ahead and link it now, so you won't have to do it later to all of your pages. You should name your animated gif the same name as your template. Examples: mozillanav.gif, dwmx2004.gif.

6. Link the video files for the entire tutorial. We've finally developed some filenaming conventions, based on the way that Camtasia (the software we use to create the video content) names the files. You'll learn more about the different files that are created in the Video section of this tutorial; for now, all you really need to know are the file names, as linking them now will save you some time later. In the template, you will only add the links to the videos that contain the entire tutorial, as these will be the same for each page (the links under the Entire Tutorial heading, in the graphic below). For your reference, here is what your righthand sidebar should look like, with all of the correct elements:

Linking to RealPlayer and Windows Media files
The RealPlayer and Windows Media files are housed on a server called cobra. RealPlayer files have the extension "rm" and Windows Media files have the extension "wmv." Broadband files have "bb" in their filenames, to differentiate them from the dial-up files. Here are some examples of the links for the video files for the entire tutorial:
dial-up RealPlayer file: http://cobra.ischool.utexas.edu:8080/ramgen/Content2/labstaff/2005/dwmx2004/dwmx2004full.rm
broadband RealPlayer file: http://cobra.ischool.utexas.edu:8080/ramgen/Content2/labstaff/2005/dwmx2004/dwmx2004fullbb.rm
dial-up Windows Media file: http://cobra.ischool.utexas.edu:8080/asxgen/Content2/labstaff/2005/dwmx2004/dwmx2004full.wmv
broadband Windows Media file: http://cobra.ischool.utexas.edu:8080/asxgen/Content2/labstaff/2005/dwmx2004/dwmx2004fullbb.wmv

You will be replacing the bolded elements - "dwmx2004" - with the name of your own tutorial. Notice that the word "full" is contained in every file name, as we are linking to the full tutorial (later, when you link the individual segments of the tutorials, you will notice that numbers are used to differentiate between sections).

Linking to QuickTime files
The QuickTime files will also be housed on the cobra server; however, for reasons I will never fully understand, we cannot link directly to them. Instead, we will be linking to a file that directs the user to the cobra server (you will be creating this file in the next section). Here are examples for the links to the entire tutorial files:
dial-up QuickTime file: http://www.ischool.utexas.edu/technology/tutorials/webdev/dwmx2004/qtl/dwmx2004full.qtl
broadband QuickTime file: http://www.ischool.utexas.edu/technology/tutorials/webdev/dwmx2004/qtl/dwmx2004fullbb.qtl

The changes you will make are the same as above (the bolded elements) - change the "dwmx2004" to your tutorial name.

Linking to Flash files
Unlike the other video files, your flash files will live on the same server as all of your html files, so it will be a relative link. They will be housed in a folder called "swf" and are played through the web browser, and not through a media player. Here is an example of the link to the Flash video file for the entire tutorial:
swf/dwmx2004full.html
As above, change the bolded element - "dwmx2004" - to the name of your tutorial.

7. Create the links on the lefthand navbar. These are links to all of the pages on your site, as well as a link to the pdf handout and an online evaluation form. To do this, you first need to decide how many pages you need, and what they will be called (both the file name of the html page, as well as the text that links to it). Refer to your original outline here, to decide what sections will be needed.

Your first page, the introduction, will be called index.html. Each page after that will be given a number (starting with 02), followed by an underscore, followed by a descriptive word. Example:
index.html (Objectives)
02_site.html (Getting Started)
03_connect.html (Connecting to Your Server Space)
04_create.html (Creating Your Page)

All of the "Evaluate this tutorial" links will be the same, except for the last two numbers (http://sentra.ischool.utexas.edu/technology/tutorials/survey/index.php?TutorialID=XX). The webmaster for the iSchool maintains a list of all the tutorial ID numbers, and assigns new ones as necessary. The list of current tutorial IDs is located here.

For the pdf handout, go ahead and create a link, using the name of your template. When you're sure you won't need to make any more changes to your content, convert your Microsoft Word handout into a PDF. Examples: mozillanav.pdf, dwmx2004.pdf.

Using the Template

Now that you've adapted your template, you're ready to apply it to your new pages. Select File > New from the top menu and create a Basic HTML page. Once you have a new document, select Modify > Templates > Apply Template to Page, then select your template. Now you have a well developed page to modify. Since we did all the grunt work on the template itself, you only have a few steps to fill in.

  • Side nav: Highlight the link for the page you are creating and select “nav_selected” from the “style:” dropdown in the Properties window or change the code, whatever your pleasure. Just make sure the user knows what page s/he is on.
  • Section Title and Content: Simply change the section title and content .
  • Next Section: Make sure “next section” links to the correct page.

The stylesheet contains the "styles" for the side navigation bar.

Each link should be blue and not underlined (nav). Example:

When hovered over, they should be orange and underlined. Example:

The link that reflects the current page should be orange and unlinked (nav_selected). Example:

Linking the Video Files on Each Page

In the template file, you created links to the entire video file. Now, you'll need to create links for each individual section of the video, on each page. Note that at this point, you should have a good idea of which pages will need video files (for the Introduction to Dreamweaver MX2004 tutorial, I did not include a video on the last page, which is just a list of additional resources), so that you can link appropriately.

Linking to RealPlayer and Windows Media Files
The RealPlayer and Windows Media files are housed on a server called cobra. RealPlayer files have the extension "rm" and Windows Media files have the extension "wmv." Broadband files have "bb" in their filenames as well as the number of the video, while dial-up files simply have the number of the video in it. Here are some examples of the links for the video files for each page:
dial-up RealPlayer file: http://cobra.ischool.utexas.edu:8080/ramgen/Content2/labstaff/2005/dwmx2004/dwmx2004-0.rm
broadband RealPlayer file: http://cobra.ischool.utexas.edu:8080/ramgen/Content2/labstaff/2005/dwmx2004/dwmx2004bb-0.rm
dial-up Windows Media file: http://cobra.ischool.utexas.edu:8080/asxgen/Content2/labstaff/2005/dwmx2004/dwmx2004-0.wmv
broadband Windows Media file: http://cobra.ischool.utexas.edu:8080/asxgen/Content2/labstaff/2005/dwmx2004/dwmx2004bb-0.wmv

Before creating these links, check with Quinn to make sure the file path is still the same. Then, duplicate the paths above, changing the bolded elements. "dwmx2004" will be changed to the name of your tutorial (the same name as your template). Your first video will be the number 0 - Camtasia automatically names the files, beginning with zero. Your second file will be 2, your third file 3, etc. This can get a little confusing, as the number of your video will not match the number of your html page - be sure to remember that as you're linking.

Linking to QuickTime Files
The QuickTime files will also be housed on the cobra server; however, for reasons I will never fully understand, we cannot link directly to them. Instead, we will be linking to a file that directs the user to the cobra server (you will create this file in the next section). Here are some examples of the links for the individual video files:
dial-up QuickTime file: http://www.ischool.utexas.edu/technology/tutorials/webdev/dwmx2004/qtl/dwmx2004-0.qtl
broadband QuickTime file: http://www.ischool.utexas.edu/technology/tutorials/webdev/dwmx2004/qtl/dwmx2004bb-0.qtl

The changes you will make are the same as above (the bolded elements) - change the "dwmx2004" to your tutorial name, and, for the video segments, add in the correct number, starting with 0.

Linking to Flash Files
Unlike the other video files, your flash files will live on the same server as all of your html files, so it will be a relative link. They will be housed in a folder called "swf" and are played through the web browser, and not through a media player. Here is an example of the link to the Flash video files for each page:
swf/dwmx2004-0.html
As above, change the bolded element - "dwmx2004" - to the name of your tutorial. Also change the number listed, starting with 0.

Linking to the HTML Transcript
The html transcript links to a text transcript of your video files, for each section. You will have a different transcript for each page. Unlike the video files, the names of these files will match your html tutorial pages. Follow this naming convention:
01_transcript.txt (index page)
02_transcript.txt (second page)
03_transcript.txt (third page), etc.

Then save your page with the file name you chose for it when creating the side nav on the template in your local folder. Make sure to save your pages within your site (in your original folder, it will live outside the Templates and images folder, on the same hierarchy as your stylesheet). Example:

Repeat for each page, adding the content you've created. Before cutting and pasting your text from Microsoft Word into Dreamweaver, first convert your document into a text-only document. This removes all of the formatting that Microsoft Word adds - occasionally, when you paste directly from Word into Dreamweaver, some things don't get translated (curly quotes, em and en dashes, etc.). Removing all this formatting means you will need to reformat things like bulleted lists, but also means you don't have to read the text word for word in order to fix any weird formatting, which most likely won't surface until your site has been uploaded to the server.

The Review Process:
When you've finished adding your content, upload your pages to your own server space, and ask someone to review it for you. Do all the links work? Are the images clear and easy to read? Are the pages consistent with tutorial guidelines?

Remember that at this point, you have two versions of your tutorial: the web version and the print version. When you make a change on the web version, you must also make the change on the print version.

* Content adapted from Libby Peterek's guidelines on Using the Tutorial template in Dreamweaver.


next section >
 
© 2005 Sara Fuchs | iSchool | UT Austin | webmaster