User Services. WebCT Specialty Area: Preparing Documents OBJECTIVES

User Services Spring 2005 OBJECTIVES Identify different methods of content delivery for a WebCT course. Investigate file management within WebCT. Create PDF files from Microsoft Word, Excel and PowerPoint files. Save Microsoft Word, Excel and PowerPoint files as HTML documents. Integrate content into a WebCT course. WebCT Specialty Area: Preparing Documents Any type of file can be uploaded to your WebCT course. Viewing the files is dependent upon students having the software used to create the files. HTML and image (.gif or.jpg) files are viewed in WebCT with no additional software. PDF files can usually be viewed in WebCT with a free program called Adobe Acrobat Reader. Other files require the program they are created in to view. When uploading files to WebCT they cannot have spaces in their names. If a space is needed, use an underscore (e.g. MSU101_test.ppt). Most faculty members have materials already developed for a course in programs such as Microsoft Word, PowerPoint and/or Excel. In this workshop, participants will learn non-technical, practical ways of quickly preparing these materials for WebCT.) Getting Help The ITS Help Desk, located in 108 Allen Hall, is a service provided to all Mississippi State University students, staff, and faculty. The ITS consultants are available to help with various computer-related problems as well as provide answers to computer and technologyrelated questions. Visit the Web site at www.its.msstate.edu for handouts and resolutions to common computer problems. If you cannot find an anwer to your question on the Web or you do not have access to the Internet, please call at 325-0631 (7:30 a.m. to 5:00 p.m. Monday through Friday). You may also contact the ITS Help Desk by email at helpdesk@msstate.edu. Instructors Kimberley Logan kpou@its.msstate.edu Tina Green tgreen@its.msstate.edu

Contents Contents Managing WebCT Files... 3 File Structure... 3 Naming Conventions... 4 Zipping Files... 5 Deleting a File... 6 Copying a File... 7 Renaming a File... 8 Creating a Folder... 8 Moving a File... 10 Adobe Acrobat and PDF Files... 11 Creating PDF Files... 12 Creating PDF Files Using PDFWriter... 13 Converting an Image to a PDF File... 15 Converting a Web Page to a PDF file... 16 PowerPoint and WebCT... 18 PowerPoint: Save as a Web Page... 19 Exporting PowerPoint to Word and Saving as HTML... 23 Word and WebCT... 26 Typing Guidelines for the Web... 27 Saving Word Files as HTML... 28 HTML Cleanup and WebCT... 29 Clean Up Microsoft HTML... 30 Excel and WebCT... 32 Saving Excel Files as HTML... 33 Saving an Internet Image... 34 Uploading and Zipping Files... 35 Zipping Files... 35 Uploading a File... 37 UnZipping a File... 37 Adding Files to WebCT Pages... 39 2

File Structure Managing WebCT Files Within the Manage Files are two default folders: My-Files and WebCT-Files. The My-Files folder is your work area and the WebCT-Files folder as the WebCT default files that come with each course. You cannot save, delete or edit any of the files within the WebCT-Files folders. All of your files will go in the My-Files area in the folders you create and name yourself. Manage Files is intended to be the storage space for your course files. You should organize these files into meaningful folders so you can easily locate them. WebCT is not a document editor therefore it is recommended that all content and/or file editing is done off line, and then uploading into My-Files. If a file has already been uploaded, when uploading it again, you will simply overwrite the earlier version of that file, unless the file name is changed before uploading. In order to keep a sense or order and organization it is recommended that you maintain the same file structure that you create inside WebCT on the hard drive of your personal computer. WebCT will allow you to upload any file type to your My-Files folder. However, WebCT does not support any file type for viewing online. What type of files can or cannot be seen in WebCT is dependent upon the WebCT server, your computer, and the web browser configuration. It is a good rule of thumb, to assume that your students will be able to view HTML (.htm or html), text (.txt or.rtf), image (.gif or.jpg) and PDF (.pdf) files. Many file types such as RealAudio, Quicktime, and Shockwave files can be viewed online through WebCT, however students will need to download and install a plug-in. A plug-in is a piece of software that is needed to allow certain files to be viewed over the Internet. Below is a list of common plug-ins that are available to download: Adobe Acrobat www.adobe.com/products/acrobat/readstep2.html Apple Quicktime www.apple.com/quicktime/download/ Flash www.macromedia.com/shockwave/download/index.cgi?p1_prod_version=shockwaveflash PowerPoint Viewer office.microsoft.com/downloads/9798/ppview97.aspx RealOne www.real.com/realoneplayer.html Windows Media windowsupdate.microsoft.com Word Viewer office.microsoft.com/downloads/2000/wd97vwr32.aspx 3

Managing WebCT Files Naming Conventions In WebCT, files and folders must be named so that Web browsers and servers can recognize them correctly. When uploading files to WebCT, be careful to follow the naming conventions below: ` 1. Most importantly, WebCT does not allow for spaces in file names. For example: msu 101.ppt is illegal msu101.ppt is legal 2. The following characters are acceptable or legal in WebCT: -dash _ underscore For example, msu_101.ppt is legal and will upload to WebCT 3. The following characters are not acceptable or illegal in WebCT: ~! @ # $ % ^ & * ( ) + = { }[ ] \ : ; < >,? / For example, msu%101.ppt is illegal and will not load into WebCT. 4. It is best to only use alphabetical characters, numbers, dashes and underscores in your file names. 4

Managing WebCT Files Naming Conventions (cont.) Tips: Use all lowercase characters for file names and upper case for folder names. This will help to distinguish between the two. For files, make sure you use the proper file extension. The file extension (e.g..htm or.gif) is what tells WebCT and the Web browser how to view the file. Use.html rather than.htm. For files, use the 8.3 naming scheme whenever possible. Eight characters for the filename and 3 characters for the extension. For folders, use 8 characters. Zipping Files WebCT s Manage Files system allows you to upload only one file at a time. To avoid the back-andforth of uploading files as you build your course you can use a zipping program. If you have taken the time to catalog your resource materials (digitized text, pictures, audio, video, etc.) you can upload them all at once using Manage Files and a compression utility such as WinZip or Power Archiver. Packaging (file data compression) groups of files not only saves you from redundant tasks, but also saves you time and file space. There are several file compression programs available across a variety of operating systems. WebCT supports the standard ZIP format only and even uses it to backup courses. Popular ZIP programs that work well with WebCT are listed below. For this exercise, WinZip will be used to compress files. It is a three step process, first zip the files, next upload the zip file to WebCT and finally unzip the files in WebCT. Program Operating System Web Site Power Archiver Windows powerarchiver.efront.com/ WinZip Windows /www.winzip.com/ pkz204g MS-DOS ftp://ftp.msstate.edu/pub/pc/zips/ MacZip Macintosh members.sitec.net/maczip/ Zip/Unzip Unix Installed on Ra and Archive Cool Zippi Linux datasync.linux.tucows.com/x11html/fil_compression.html This section will provide a quick and basic overview on file management of the My-Files in WebCT. Uploading and Zipping files will be covered at the end of this workshop. 5

Deleting a file Managing WebCT Files 1. Log into WebCT and go to your training course entitled, WebCT Training- Docs (there will be a number, everyone has a different number). From the left, above the Course Menu, click on the Control Panel button. 2. The Basic Control Panel page will appear. Click on the Mange Files button. The Manage Files page will appear. Under the My-Files section, select the file dorman.gif by clicking in the check box to the left. 3. In the Actions frame under Options: File, click the Delete button. 4. The Delete Files page will appear giving the option to confirm the file to be deleted. Confirm the file is correct and click the Delete button. 5. The Manage Files page will reappear and the file will be deleted. 6. Congratulations, you have successfully deleted a WebCT file. 6

Copying a file Managing WebCT Files 1. From the Manage Files page, select the file Syllabus.pdf by clicking in the check box to the left. In the Actions frame, under Options: File click the Copy button. 2. The Copy Files page will appear giving the option to confirm the file to be copied and determine the location for the copy. Verify the file is correct. From the Copy the selected files to pull-down menu, select Unit 1 and click the Copy button. 3. The Manage Files page will reappear and the file will be copied into the Unit1 folder. Note: To expand the folder click on the folder. 4. Congratulations, you have successfully copied a WebCT file. 7

Renaming a file Managing WebCT Files 1. From the Manage Files page, select the file bully.jpg by clicking in the check box to the left. In the Actions frame, under Options: Files click the Rename button. 2. The Rename file page will appear. In the New name field enter the new desired named. Remember the WebCT naming convention still applies. For this example, change the name to bulldog.jpg. Finally, click the Rename button. 3. The Manage Files page will reappear and the file will be renamed. 4. Congratulations, you now know how to rename a WebCT file. Creating a folder 1. To create a folder, in the Actions frame under Options: Folder click the Create folder button. 2. The Create Folder page will appear. Name the folder Images and click the Create button. 3. The Manage Files page will reappear and the folder will be created. 4. Congratulations, you have successfully created a folder in WebCT. 8

Moving a file Managing WebCT Files 1. From the Manage Files page, select the file bulldog.jpg by clicking in the check box to the left. In the Actions frame, under Options: File click the Move button. 2. The Move Files page will appear. From the Move the selected files to pull-down menu, select the folder location for the file. For this example, select Images. Finally, click the Move button. 3. The Manage Files page will reappear and the file will be moved into the new location. 4. Congratulations, you have successfully moved a WebCT file. 9

Adobe Acrobat and PDF Files Adobe Acrobat is a program that creates PDF (Portable Document Format) files from any application and platform. A PDF file is a universal file format that preserves all formatting, colors, graphics and fonts of the document and allows anyone to view the file as it was intended. PDF files solve many commonly encountered problems when sharing and distributing files electronically. Problems such as: Formatting such as fonts and graphics are lost due to software version and/or platform. Documents do not print correctly. Recipients cannot view the file because they do not have the application used to create the document. Anyone can view a pdf file; however viewing requires Adobe Acrobat Reader. This software is available for free at the Adobe Acrobat Reader s Download Page www.adobe.com/products/acrobat/readstep2.html One limitation to the PDF files is that they tend to lack accessibility for visually disabled users whose screen reader software is not compatible with Adobe Acrobat Reader. To learn how to convert PDF documents into either HTML or ASCII visit the Adobe Online conversion tools for Adobe PDF Documents site at: access.adobe.com./tools.html If you plan to use PDF files in your WebCT course it is advisable to provide links to the download and conversion tools sites for your students. The Adobe Acrobat section of this workshop will walk through the steps of creating PDF files from Word, PowerPoint, Excel, an image and a Web page. 10

Creating PDF Files Using PDFWriter Creating PDF Files Using the PDFWriter with Microsoft Excel, Word and PowerPoint 2000 1. Open the program Microsoft Excel 2003. 2. Open the file MSU101grades.xls from the Temp folder on your Desktop. 3. Convert this file to PDF format by printing the file to Adobe PDF From the File pull-down menu, select the option Print. 4. In the Print dialog box, select Acrobat PDF as the printer. To select, click on the Name pull-down menu. A list of available printers will appear. Select Adobe PDF and click the OK button. 11

Creating PDF Files Using PDFWriter 5. The Save PDF File As box will appear. The file can be saved anywhere on your computer. Save the file to the Temp folder on your Desktop. Click the Save button. 6. Congratulations, you have created a PDF file. You may now close Microsoft Excel and Adobe Acrobat. 7. Repeat steps 3-6 of converting a file to PDF format. Only this time open the program Microsoft Word 2003 and open the file SyllabusMSU101.doc from the Temp folder on your Desktop. Print to Adobe Acrobat PDF. Save the PDF file to the Temp Folder on your Desktop. Name it SyllabusMSU101.pdf. Close Microsoft Word. 12

Creating PDF Files Using PDFWriter 8. Repeat the steps 3-6 of converting a file to PDF format. Only this time open the program Microsoft PowerPoint 2003 and open the file MSU101.ppt from your Temp folder on your Desktop. Print to Adobe PDF. Save the PDF file to the Temp folder on your Desktop. Name the file MSU101.pdf. Note that in the Print dialog box. In the Print what section, choose Outline View before clicking the OK button. 9. Congratulations, you have coverted a Microsoft Power Point file into a PDF file. You may now close Microsoft PowerPoint and Adobe Acrobat. 13

Creating PDF Files Converting an Image into a PDF File Now you will convert an image (a scan) file into a PDF. 1. Open the program Adobe Acrobat 6.0 from the Novell-delivered Applications Window. Double-click on Adobe Acrobat 6.0. 2. Open the file named idcard.jpg (an image file) from the Temp folder on your Desktop. To open, select the File pull-down menu and select Open. The Open dialog box will appear, choose the file idcard.jpg and click Open. If the file does not appear, select the option Image Files from the Files of Type pull-down menu. 14

Creating PDF Files 3. The image file will now appear in Acrobat and can be saved as a pdf. The image may look fuzzy, if so check the magnification level. If the level is not set at 100%, change the level to 100%. 4. Save the file as idcard.pdf. To save, select the File pull-down menu and select Save. The Save dialog box will appear, choose the location (Temp folder on Desktop), name the file idcard.pdf and click the Save button. 5. The image has been converted into a PDF file. Now close the file by choosing Close from the File pull-down menu. 6. Congratulations, you have converted an image file into a pdf file. Converting a Web Page to a PDF file 1. You will now convert a Web page (http:// www.its.msstate.edu/) into a PDF file. In Adobe Acrobat, choose the File, Create PDF From Web Page. 2. The Create PDF from Web Page dialog box appears. In the URL field, type the URL, http://www.its.msstate.edu/, and click the Create button. 15

Creating PDF Files 3. The Download Status dialog box will appear indicating the download status of the Web page. 4. Finally, the Web page will appear in Acrobat. Save the new PDF document as its.pdf. From the File pull-down menu, select Save. The Save As dialog box will appear. Name the file its.pdf and click the Save button. 5. Congratulations, you have successfully converted a web page into a PDF file. 16

PowerPoint and WebCT PowerPoint presentations can be incorporated into WebCT courses a variety of ways. They are as follows: 1. Saved as a PDF file 2. Put in the course in the original document 3. Saved as HTML and uploaded to the course 4. Exporting to Word and Saving as HTML If the PowerPoint presentation is placed in WebCT as is, the downfall is that students may not have the software need to view the file. If they do have the software, they may not have the correct version. Since instructors cannot be certain that students have access to the software needed to view a PowerPoint presentation, it is a good practice to provide students with the URL to download PowerPoint s free plug-in, PowerPoint viewer. This viewer, allows users to view the PowerPoint file but not make any changes to the presentation or print. The PowerPoint Viewer can be downloaded at: office.microsoft.com/downloads/2002/ppview97.aspx An alternative to placing a PDF and/or original file into WebCT is saving the PowerPoint Presentation as HTML. The process to convert PowerPoint to HTML can be done easily however the conversions options vary with each version of PowerPoint. Advantages of Saving PowerPoint as HTML Built in, simple to use feature of PowerPoint 2000 It does not take much time to convert Do not need to know HTML code to convert The HTML is fast loading on the Internet Disadvantages of Saving PowerPoint as HTML Note: What is HTML? HTML stands for Hypertext Markup Language and is the basic language for the Internet. It is used to build Web pages. HTML code is in frames Generates numerous files, usually 4 or more per slide Will not convert embedded objects such as sounds or movie clips Converting animation and transitions is not recommended so they are typically lost for the Web version Microsoft places a lot of extra code in its HTML and may not be displayed the same in all browsers In this section, step-by-step instructions for saving PowerPoint 2000 as HTML and Exporting to Word will be provided. 17

PowerPoint: Save As a Web Page 1. To make sure your presentation looks the way you want it in your Web browser, preview the presentation as a Web page. Open the file MSU101.ppt from the Temp folder on the Desktop. Go to the File pull-down menu and select Web Page Preview. 2. The presentation will open in the default Web browser and will look like this on the Web. Close the Web browser to return to PowerPoint. 3. Return to the PowerPoint Presentation. On the File pull-down menu select Save As Web Page. 18

PowerPoint: Save As a Web Page 4. The Save As dialog box will appear. Save the Web page to the Temp Folder on your Desktop. It is a good practice to save the Web page files into a separate folder. To create a new folder click the Create New Folder button. The New folder dialog box will appear. Name the folder Unit1ppt and click the OK button. 5. To change the Web page title (the text that appears in the title bar of your Web browser), click the Change Title button, type the new title in the Set Page Title dialog box and then click the OK button. 19

6. Click the Publish button and the Publish As Web Page dialog box appears. Under Publish What? section, select Complete Presentation and Under Browser Support section, select All Browsers Listed Above. Then check Open Published Web Page in Browser. PowerPoint: Save As a Web Page This dialog box will allow you to change the Page Title of your presentation as well as check the path for saving the presentation as a Web page in the Publish a copy as section. 7. Click the Web Options button. The Web Options dialog box appears. In the General tab, select all three options: Add Slide Navigation Controls, Show Slide Show Animation While Browsing and Resize Graphics to Fit Browser Window. For the Colors pull-down menu, select Presentation Colors. When completed, click the OK button. 20

PowerPoint: Save As a Web Page 8. The Publish as Web Page dialog box appears. Click the Publish button. 9. The presentation will open in a Web browser and will contain the colors from the presentation. 10. Congratulations, you can now publish a PowerPoint presentation as a Web page. 21

Exporting PowerPoint to Word Exporting PowerPoint to Word and Saving as HTML 1. Return to PowerPoint. Select the File pull-down menu and choose the options Send to and Microsoft Office Word. 2. The Write up dialog box will appear. Select the Option Outline Only and click the OK button. 3. Word will open with the outline of the presentation. 22

Exporting PowerPoint to Word 4. Now the outline can be saved as HTML easily. In Word select the File pull-down menu and choose the option Save as Web Page. The Save As dialog box will appear, select a location to save the file (Temp Folder on the Desktop). Word will automatically assign a file name with the extension.htm. You can change this name, name this file MSU101Outline.html. After the location is selected and the file name is entered click the Save button. 5. The file is now saved as HTML and Word will display the file in Web Layout view. Word and PowerPoint can both be closed. Now it is time to view the HTML document. Open Netscape. In the Netscape window, select the File pull-down menu and choose the option Open Web Location. Note: This example is done in Netscape. Internet Explorer can be used as well, however, the steps will be similar but not identical. 6. The Open Web Location dialog box will appear. Select the Choose File button to find the file to open. 23

Exporting PowerPoint to Word 7. The Open dialog box will appear. Find the file and click the Open button. 8. The Open Page dialog box will once again appear, the file location will be entered in the location box. Click the Open button. The file will open in Netscape. Note: This file can be edited as any other HTML file using a text editor or HTML editor. 24

Word and WebCT Word documents can be incorporated into WebCT courses a variety of ways. There are as follows: 1. Saved as a PDF file 2. Put in the course in the original document 3. Saved as HTML and uploaded to the course If the Word file is placed in WebCT as is, the downfall is that students may not have the software need to view the file. If they do have the software, they may not have the correct version. Since instructors cannot be certain that students have access to the software needed to view a Word document, it is a good practice to provide students with the URL to download Word s free plug-in, Word viewer. This viewer allows users to view the file but not make any changes or print. The Word Viewer can be downloaded at: office.microsoft.com/downloads/9798/wdvw9716.aspx An alternative to placing a PDF and/or original file into WebCT is saving the Word document as HTML. The process to convert Word to HTML can be done easily. Advantages of Saving Word as HTML Built in, simple to use feature of Word 2000 It does not take much time to convert Do not need to know HTML code to convert The HTML is fast loading on the Internet Disadvantages of Saving Word as HTML Conversion is not exact, the HTML document is not converted to exactly look like the Word document No tabs they do not convert to HTML Special fonts and characters do not always convert properly Microsoft places a lot of extra code in its HTML and may not be displayed the same in all browsers In this section, step-by-step instructions for saving Word 2000 as HTML will be provided. Note: What is HTML? HTML stands for Hypertext Markup Language and is the basic language for the Internet. It is used to build Web pages. 25

Typing Guidelines for the Web On the Web formatting does not have the same stability that it has on paper. The appearance of a single Web page can change from computer to computer and browser to browser due to HTML, browser versions and computer platforms. When a word processing program such as Microsoft Word is used to create Web pages, there are some general guidelines to remember when typing and formatting the page. Guidelines Do not use Tabs tabs will not convert to HTML. If text and objects need to be aligned use a table. Do not use the newspaper columns feature of the word processor, as it will not convert properly. Once again use tables to format. Use bullets and numbers instead of wingdings (a font type) or an image to signify a new item in a list. Use lists they read better over the Internet then paragraphs. Break long paragraphs into smaller paragraphs or bullets. Avoid unusual fonts; browsers rely on the client s computer and the fonts that are installed. If the viewer does not have the font used the page will not display properly. Good Web fonts are: Arial, Courier, Helvetica, and Times New Roman Don t use underline Underlining on the Web indicates hyperlinks. Using underlining for formatting as well can confuse viewers of your page. Use Bold or Italics to emphasis instead. Don t use too much bold. If the entire Web page is bolded, then the emphasis is lost and the page is harder to read. Only use images and clipart that have meaning. For example, Watermarks look great on printed media, however,it does not convert well for the Web. Color use color that is easy to read. The background and text color should have high contrast such as white backgrounds with black text. Try to avoid pastels and don t use dark colors on dark colors. 26

Saving Word files as HTML 1. In Microsoft Word, open the file Assignment.doc from the Temp folder on the Desktop. 2. Once the file appears, it can be saved as HTML. From the File pull-down menu select the Save as Web Page option. 3. The Save As dialog box will appear. Save the file as assignment.html on the Temp folder on the Desktop. Finally, click the Save button. 4. The file is now saved as HTML and being displayed in Word in Web Layout View. 5. Congratulations, you successfully saved a Word document as HTML. 27

HTML Clean Up and WebCT As indicated in early sections, when Microsoft creates HTML files from the Save as Web Page feature, it adds many unnecessary Microsoft-specific tags. These tags can result in the page appearing differently depending on the browser and version being used. It is recommended that before uploading Word and Excel files saved as HTML to WebCT that the HTML document be cleaned up. There are three ways in which this can be done. 1. Download the HTML filter provided by Microsoft that provides an option to save as HTML without the Microsoft specific tags. The filter can be downloaded at: office.microsoft.com/downloads/2000/msohtmf2.aspx 2. Use a freeware or shareware program that cleans up HTML such as HTML Tidy. The HTML Tidy page is: tidy.sourceforge.net/ 3. Use a WYSIWYG (what you see is what you get) editor such as Dreamweaver. Dreamweaver has an option built into it that will clean up HTML. It is strongly encouraged that before HTML files created with Word or Excel are uploaded to WebCT, they are cleaned up using one of the listed options. For this workshop, the Clean Up HTML option of Dreamweaver will be discussed and walked through. 28

Clean Up Microsoft HTML 1. In the Novell-delivered Applications window, double click to open Macromedia DreamwaverMX 2004. 2. Open the file assignment.html. From the File pull-down menu select Open. The Open dialog box will appear. Find the file assignment.html, it is located in the Temp folder on the Desktop. Select the file and click the Open button. 3. The file will appear in Dreamweaver. To clean up the Word HTML go to the Commands pull-down menu and select Clean Up Word HTML. Note: Microsoft HTML created in Excel or PowerPoint also contains unnecessary codes. It can be cleaned up by selecting the Clean Up HTML option and following the same instructions. 29

Clean Up Microsoft HTML 4. The Clean Up Word HTML dialog box will appear. Verify that all options are selected. Finally click the OK button. 5. The Summary Log will appear indicating what was done to the HTML. View the results and click the OK button. 6. Finally save the file. From the File pull-down menu select Save. Once the file is saved, Dreamweaver can be closed. 7. Congratulations, you now know how to clean up Microsoft HTML in Dreamweaver. 30

Excel and WebCT Excel files can be incorporated into WebCT courses a variety of ways. They are as follows: 1. Saved as a PDF file. 2. Put in the course in the original document 3. Saved as HTML and uploaded to the course An alternative to placing a PDF and/or original file into WebCT is saving the Excel file as HTML. The process to convert Excel to HTML can be done easily. Advantages of Saving Excel as HTML Built in, simple to use feature of Excel 2000 It does not take much time to convert Do not need to know HTML code to convert The HTML is fast loading on the Internet The Web page will look very similar to the actual document Excel Save as HTML feature has many advanced options that include such things as interactivity Disadvantages of Saving Excel as HTML Special fonts and characters do not always convert properly Microsoft places a lot of extra code in its HTML and may not be displayed the same in all browsers In this section, step-by-step instructions for saving Excel 2000 as HTML will be provided. Note: What is HTML? HTML stands for Hypertext Markup Language and is the basic language for the Internet. It is used to build Web pages. 31

Saving Excel files as HTML 1. In Microsoft Excel, open the file MSU101grades.xls from the Temp folder on the Desktop. 2. Once the file appears, it can be saved as HTML. From the File pull-down menu select the Save as Web Page option. 3. The Save As dialog box will appear. Save the file as MSU101grades.html on the Temp folder on the Desktop. Finally, click the Save button. 4. The file is now saved as HTML. To view the file open it in a web browser (e.g. Netscape or Internet Explorer). Note: It is a good practice to clean up all Microsoft HTML files with a program such as Dreamweaver. Follow the steps on pages 39-41 to clean up the Excel HTML. 5. Congratulations, you have successfully saved an Excel document as HTML. 32

Saving an image from the Internet Saving an Internet Image Many times images and graphics can be found on the Internet that would be a good resource for a WebCT course. The instructions below will demonstrate how to save an image file from the Internet. 1. Open your browser and find an image that you want to save. 2. Position your mouse over the image and perform a Right-Click. A menu will appear, choose the option Save Image As. 3. The Save As dialog box will appear where you can tell the computer where to save the file. In class, you can save the image to your Images in the Temp Folder on the Desktop. Find the location, name the file if necessary and click the Save button. 4. Congratulations, you have successfully saved an image from the Web. 33

Uploading and Zipping Files Now that you know how to create files for your WebCT course, it is time to upload and place the files in your course. Below are step-by-step instructions on uploading and placing files into a WebCT course. Zipping Files 1. WebCT only allows one file to be uploaded at a time. A practical example of uploading files is to use a file compression program to zip all files allowing the files to be uploaded all at once (Zipping was discussed on page 16. For this example, WinZip is used. The file will be named mywebctfiles.zip. 2. In the Novell-delivered Applications window, double click on WinZip to open it. 3. The WinZip program will open and appear. From the File pull-down menu, select New Archive. 4. The New Archive dialog box will appear. Place the zip file in the Temp Folder on the Desktop and name it mywebctfiles. zip. Click the OK button. 5. The Add dialog box will appear. (If the Add dialog box does not appear, click the Add button.) From this screen, you need to select the files to be zipped. All the files are located in the Temp folder on the Desktop. Select the first file assignment.html and hold down the keyboard Shift key, next select the file SyllabusMSU101.pdf. This allows all the files in between to become selected. Finally, click the Add button. 34

Uploading and Zipping Files 6. All the files were added to the zip file, however the folders, assignment_files, MSU101grades_files and Unit1ppt were not added. To add the folder, click the Add button. 7. The Add dialog box will appear. Select the folders, assignment_files, MSU101grades_ files and Unit1ppt. Under the folder section, make sure that ONLY Include subfolders is selected. Finally, click the Add with wildcards button. 8. The WinZip menu will reappear showing all the files. Close WinZip by clicking on the X in the upper right corner. Congratulations, you have successfully zipped files together. 35

Uploading a file Uploading and Zipping Files 1. Return to WebCT and the Manage Files page. In the Actions frame, under Options: Files click the Upload button. 2. The Upload File page will appear. Select the Browse button to find the file, mywebctfiles.zip, which is located in the Temp Folder on the Desktop. 3. Once you have located the file, click the Upload button. 4. Congratulations, you have multiple files in WebCT by using a zip program. The file now appears on your Folder and Files listing. 36

Uploading and Zipping Files 1. Next, the file needs to be unzipped so all the files can be used in WebCT. Select the file (mywebctfiles.zip) and from Actions frame, under Options: Files click the Unzip button. 2. At the Unzip File page, click the Unzip button. 3. At the Manage Files page, scroll and locate the unpacked files to confirm. You should see all the files you zipped. 4. Congratulations, you have unzipped the files into WebCT and they are now ready to use in your course. 37

Adding Files to WebCT Pages Once the files are in My-Files of WebCT, they are in WebCT but not available for students to view. Instructor s must place the files in the course. Now it is time to add all the content to your WebCT course. WebCT allows the course designer to present content in a variety of ways, which can (if designed properly) aid in the viewing ease of that content. There are two primary methods of content presentation that WebCT readily supports: organized icons and content modules. Organized icons allow simple design for an uncluttered delivery. Content modules support outlined, non-linear content often used by tutorial designs and courses that fully complement printed texts. For this example, we will demonstrate using organized icons to bring in a number of different file formats that you created today. There are three types of organized icons: Single Pages, Organizer Pages and URLS. Below is a description of each: Single Pages Any file brought into WebCT and displayed on an Organizer Page. Files can be HTML, Word, PDF, etc. Organizer Pages Pages that allow designers to organize their content in the course. URLS Links to Internet pages at related to the course. URL icons are placed on Organizer Pages. Follow the instructions below to bring all the files into WebCT. Adding an Organizer Page 1. Go to the Units page located on the Course Content and Related Materials page. Click on the Control Panel button located above the Course Menu. The Basic Control Panel page appears. Click the Add Page or Tool button. On the Add Page or Tool page, click the link, Organizer Page. 38

Adding Files to WebCT Pages 2. At the Add Organizer Page, type Unit 4 into the Enter a title for the page field. Select the On an Organizer Page checkbox. Be sure to choose Units from the pull-down list because this is the current WebCT page in which the new organizer page will be added. Make sure the options, Link shows title and Link shows icon are selected. At this point you may opt to use the WebCT Browser to pick another icon. Otherwise, use the default icon. For this example, simply use the default icon. Click the Add button to confirm your choices for the creation of this organizer page. This page will now serve as a container for your content elements to be added later. 3. The Organizer Page, Units will appear with the new Organizer page, Unit 4. In the Actions frame, under Options: Links, click the Add Page or Tool button to begin adding pages. 5. Next Under the Pages section, select Single Page. We will now add content. 39

Adding Files to WebCT Pages 6. On the Add Single Page page, use ID Card Diagram as your title for the field Enter a title for the page. The file is one of the files we uploaded earlier. We must now go find the file. Click Browse for the field Page filename. The WebCT browser window will appear, locate the file idcard.pdf and select it. Finally, click the Add Selected button. 7. Select On an Organizer Pager and choose Unit 4 from the pull-down list. This is where the pdf file will be placed for students to view. Make sure the options Link shows title and Link shows icon are selected. Also select Default Icon. Click the Add button to continue, placing this graphic image inside your organizer page. 40

Adding Files to WebCT Pages 8. The ID Card Diagram appear on the page. Next add the remaining content: assignment. html (the Word file saved as HTML), MSU101Outline.html (the PowerPoint Outline saved as HTML) and MSU101.htm (the PowerPoint Presentation saved as HTML) Note: This file is inside the Unit1ppt folder. All the files have already been uploaded. Simply follow steps 4-7 to add the three remaining files. Title the files as indicated to the right. Filename assignment.html MSU101Outline.html MSU101.htm Title Unit 4 Assignment PowerPoint Outline PowerPoint Presentation (HTML) 9. After the content items are successfully added, click on the View tab to see your progress. Your page should look like the image below. 10. Congratulations, you have successfully added content to a WebCT course. 41

Notes 42

Notes 43

A publication of ITS, a division of Information Technology Services, Mississippi State University Mississippi State Univesity does not discriminate on the basis of race, color, religion, national orign, sex, age, disability, or veteran status.