The "How to Create a Tutorial" Tutorial
Computing Resources >> Tutorials >> Getting Started >> How to Create a Tutorial
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:
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
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 changes you will make are the same as above (the bolded elements) - change the "dwmx2004" to your tutorial name.
Linking to Flash files
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:
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.
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
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 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
Linking to the HTML Transcript
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:
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.