Transferring Course Materials to the Web

As an educator or administrator you are always looking for new and exciting ways to communicate with students and others in an easy to use, cost effective, and efficient manner. The World Wide Web satisfies all these criteria and allows almost instant delivery of information, virtually anywhere. An additional benefit of Web sites that support classroom instruction is they allow distributed access to information and can allow for individualized learning styles and comprehension rates with minimal effort. For example, you can create tabular pages to display a calendar of events, or you can create an entire online course with assignments that automatically appear based on a predetermined schedule. FrontPage 2002 allows you to create and maintain these Web pages easily without having to know any HTML.

In this hands-on session, you will learn how to add materials to a course Web site. You will learn how to format content with tables to create your site, and have assignments appear with a feature called scheduled include pages. You will also learn to use hyperlinks, hotspots, and search pages for navigation, and enhance content visually by using dynamic HTML effects and embedded video. In learning to use these tools, you will be able to place your classroom content online and make it easy to find and more interactive. This can help captivate the students' attention and excite them about the information that you are trying to communicate.

What you will do:

Format content with tables

Use scheduled include pages

Use hotspots for navigation

Create a search page

Use hyperlinks

Use Dynamic HTML effects

Embed video in a

Creating a Course Web Site

Before You BeginMicrosoft® FrontPage® is a Web authoring and management program. It has many powerful features, yet it is still easy to master.

FrontPage allows you to create individual Web pages, entire Web sites, or update existing Web pages and sites. Some of the functionality is enabled by server extensions, which must be loaded on the server where the Web content will be published. FrontPage server extensions are available for most popular Web servers. If you want to see the current list, visit www.microsoft.com/frontpage. You can easily test your Web pages by previewing them in your favorite browser. When you are ready to publish your creation to a live Web server, simply click the Publish button and specify the server you want to use.

To have the Web template available for this tutorial, you need to download the crseweb.exe that accompanies this tutorial. You can install it by running the self-extracting zip file. This installation assumes you have installed FrontPage 2002 in the default directory. If you haven’t installed FrontPage 2002 in the default directory, just change the location listed in the dialog box for the zip file. A folder is created under templates/1033/Webs called class.tem and the files are decompressed into it. After installation has completed, the Course Web template will be listed in the Web Site Templates dialog box.

Touring FrontPageBefore you start developing your own Web pages, become familiar with the features of FrontPage 2002. The following illustration shows the Navigation view:

2

Words to know:

Browser—A program that allows you to view HTML formatted documents (like Microsoft Internet Explorer).

HTML—Hypertext Markup Language. The language used to format Web pages.

Microsoft FrontPage 2002—The latest version of Microsoft’s Web authoring and management program used to create and manage Web sites and pages with no knowledge of programming in HTML. Provides seamless integration with the Microsoft Office family of applications.

Microsoft Internet Explorer 6.0—The latest version of Microsoft’s popular Web browser. It allows editing and displaying of Web pages and collaboration on standard office documents through discussions and round tripping.

Dynamic HTML—A Web page feature that allows for animation of elements on a page.

URL—Uniform Resource Locator. The name and location of a file or

Window Sizing Buttons

Using Web Site TemplatesThis section describes how to create a course Web site to deliver course materials and timelines, and to provide a forum for your students to communicate electronically.

You will use Web Site Templates to create your Web site from a template, name it, and then choose the server on which you want to store your Web site.

The following illustration shows the dialog box you use to create a new Web site from a wizard or template:

Views Bar

Views Pane

Web Page

Status Bar

Folder List

Menu BarToolbars

Course Web is a template that is available for download on the Microsoft Web site. The template can be downloaded from http://www.microsoft.com/.

Creating a Course Web Site

To create a Web site with a template1. Start FrontPage.

2. On the File menu, click New, and then click Page or Web. The Page or Web task pane appears.

3. Under the New from template section of the task pane, click Web Site Templates.

4. Click Course Web.

4

You can test your Web site on your computer before you publish it to a Web server. However, anything that requires server functionality will not be available.

5. Type the address of your Web server in the Specify the location of the new web box (http://Webserver/myclass. for example), and then click OK. In this workshop, type in C:\my Webs or a folder that you’ve chosen on your hard drive to store the results of your Web development efforts. After the site is created, you are in Page view.

6. On the Views menu, click Navigation.

The organizational structure of your new Web site is shown in the Views pane. You can now add your own information to the pages created by the template and even create additional pages as necessary. In the workshop entitled Creating a Course Web Site, you can learn how to add a Threaded Discussion page to your site to encourage student collaboration.

To create a new page1. Make sure you can see Course Handouts in the Navigation

pane.

2. Right-click on the Course Handouts page in Navigation view, point to New, and then click Page.

3. Right-click on the new page, click Rename, and then type Schedule in the page title box. Press Enter to save your changes.

4. Double-click on the Schedule page in the Navigation pane to change to Page view.

Creating a Course Web Site

5. Type a brief synopsis at the top of the page that describes the calendar and the information that it entails.

Using ThemesThe Course Web template uses a theme, or a standard design, for all the pages included in your site. Themes make it easy to format the appearance of an entire Web site. Themes change the fonts, colors, buttons, and background into a single page or site-wide format. By using themes, you won’t have to make formatting changes on each individual page. Just choose the theme you want from the list to change the entire look of your site. Note that individualized page formatting that has been done will be overwritten with the new theme. Therefore, the general rule of thumb is to choose a theme first and then modify individual pages to suit your needs. If you like, you can choose a different theme to apply to your course Web site.

To apply a theme1. On the Format menu, click Theme. In Apply Theme to, click

either the Selected page(s) or All pages option button, based on your preference.

2. Scroll through the list of themes in the Sample of Theme list to select the individual themes you want to display. After you have selected one, click OK to accept the changes and close the list.

If you want to change the components of a theme, click the Modify button, and then click the area you want to change (Color, Graphics, or Text). You can then make your changes in the resulting dialog boxes.

6

You can use Themes to format your Web pages automatically for a consistent look and feel for colors, graphics, and text.

Any modifications to an existing theme will be saved as another name. This makes the stock themes that com with FrontPage 2002 exactly the same

3. Click OK to save your changes to the theme.

Creating a Course Web Site

Formatting Content on Web PagesWhen creating Web pages, formatting the content on the page is an important task. Generally you cannot place information on the page where you’d like it due to the way HTML describes the content on the page. In other cases, information needs to be presented in a more active way. Graphics and movie clips should be placed on the page to communicate your topic visually to the viewer. These are just some of the areas that the Web page author must consider when generating course materials for the Web. With FrontPage 2002, you can use the embedded functionality to assist you in this endeavor.

FrontPage contains tables, dynamic HTML, and the ability to embed graphic and multimedia into your Web site. Tables can be used to divide the page discreetly into an organized series of cells. These cells can contain textual or graphical information. Dynamic HTML can be used to spruce things up a bit by animating objects on the page. Graphic items can be inserted to make the site more visually appealing and most certainly to accommodate visual learners. Video clips can be embedded as well to captivate the attention of the student and illustrate complex topics and ideas. These techniques are not difficult to use, but you must know the rules by which they operate. We’ll investigate the procedures for using these tools in the text to follow. Incorporating these techniques will allow you to produce well-organized and visually stimulating content to supplement or take the place of specific areas of classroom instruction.

8

The ease of Web page creation is enabled by FrontPage Server Extensions on the Web server. If you do not want to use these features, you can disable them by using Page Options on the Tools menu.

are 32 individual pictures with slight differences that pass by your eyes every second in the average video. This rapid progression appears to you as motion. As you might expect, this is a considerable amount of information to transmit over an internet connection. Something must be done to reduce the amount of information being transmitted in the video without reducing the visual clarity. To learn how to accomplish this, please review the tutorial Windows Media Technologies 7 at http://www.microsoft.com/education/?ID=TutorialPacks.

To use Tables

1. In Page view, click the Center alignment tool on the toolbar, and then type Class Schedule.

2. Press Enter. On the Table menu, point to Insert, and then click Table.

3. In the Size area, change Rows to 6 and Columns to 7, and then click OK.

4. If the Table toolbar is not visible, on the View menu, point to Toolbars, and then click Tables.

5. Click the Eraser tool on the toolbar. We’ll use this to erase some lines in the table.

6. Click in the upper-left cell, hold the cursor down and drag to the upper right cell. You should see the lines in red that you are going to erase.

7. Release the mouse button and the lines should disappear, leaving you with one large cell at the top.

8. Click the Center alignment tool, and then type Week 1.

Creating a Course Web Site

9. Type in abbreviations for Monday through Sunday in the cells in the second row. You realize that you need additional lines in your table because you really wanted 6 classes or periods to be represented.

10. Click Draw Table tool on the toolbar, and then click in the lower-left cell.

11. While holding down the left mouse button, drag the cursor to the bottom right cell and release. A dashed line appears in the middle of the cells, and the row will split in two.

12. Repeat step 11 again to create an additional row. Now you should have 6 rows.

Note: You can repeat this as many times as need be to create more columns or rows. Even individual cells can be split by using this method.

13. You’ll also need another column, so drag from the left edge of the cell with Mon in it to the last row, and then release the mouse button.

14. Click the Draw Table tool to return to selection mode, and then type Period1 through Period5 in the far left column. You’ll need to click in each cell to type the text in the appropriate place. Finish the table by typing in the details for each cell.

10

a worksheet can be created to display content in a tabular format. The area can then be copied to the clipboard and pasted in accordingly. For more information, review the tutorial entitled Analyzing Data with Excel at http://www.microsoft.com/education/?ID=TutorialPacks.

To change table properties1. Right-click in the cell at the top of the table that contains

Week 1.

2. Click Cell Properties from the menu to open the Cell Properties dialog box.

3. In Borders, click the Color drop-down menu to select a specific color.

4. In Background, click the Color drop-down menu to select a specific color. Click OK to close the dialog box.

Note: Notice that you can change a number of settings on the particular cell from this dialog box. If you want to change the thickness of a border or some other table-wide setting, right-click anywhere in the table, and then click Table Properties.

Creating a Course Web Site

To apply dynamic HTML effects1. On the Schedule page that you created earlier, click below

the table, and then press Enter.

2. Type a sentence to remind the students of an upcoming event and select the sentence.

3. On the Format menu, click Dynamic HTML Effects. The appropriate toolbar appears.

4. Select the event that you want. You have four events to choose from, including Click, Double click, Mouse over, and Page load.

Note: If you have students using Netscape Navigator, you must select Page Load. Netscape won’t handle the other three events resulting in the inability to see your animations.

5. After choosing the event, select the effect that you want. Based on the effect you choose, you may have to specify the direction. The direction is specified in the 3rd box from the left and is only enabled if the effect you’ve chosen demands it.

6. After the effect is applied, the object is highlighted in light blue. To preview the effect, click the Preview tab.

12

Dynamic HTML effects can be used to draw student’s attention to a particular area or just to make the page more visually engaging.

To embed graphics and multimedia1. Click in the bottom of the table so that your cursor is

blinking just below it, but above the text on which the dynamic HTML effect has been applied.

2. On the Insert menu, point to Picture, and then click Clip Art.

3. In the task pane, type snowflake in the Search text box, and then click Search.

4. After the search brings up the clip, click it to paste it on to the Web page. You can insert as many images as you want in this way.

Notice that while the image is selected, the Pictures toolbar is active. A number of different tasks can be accomplished by using this toolbar. The images can be reordered, grouped, or rotated. Modifications can be made to contrast and brightness as well. One very handy feature allows the absolute positioning of an image instead of it having to follow the location of text. This is similar to placing an image in a text box in Microsoft Word.

Inserting video is accomplished in the same manner, but on the Insert menu, you point to Pictures, and then click Video.

Pictures that have been scanned, captured from a Web site, or downloaded from a digital camera may be inserted into the page by using the Picture option on the Insert menu. Make sure to watch the size of the images that you are incorporating into your Web site. If they are too large,

To keep track of the time it will take to download your Web page, make sure to pay attention to the Estimated Time to Download section at the bottom right corner of the page you are editing.

Creating a Course Web Site

Linking to Additional ContentOne of the great features of the Web is the ability to link to or reference other content regardless of where the information resides on the Internet. Hyperlinks are the means by which Web sites allow an individual to move from page to page and from site to site. With properly placed hyperlinks in your course Web site, you can create a more experiential learning environment. The student doesn’t just have the course materials to go through. Learning is expanded by the judicious use of links on the course Web site. Hyperlinks also make self-directed learning possible and more probable, as well as bringing a more multi-sensory approach to the scholastic effort.

There are three basic types of links. Links to Web documents are commonly called hyperlinks. Links to predefined marks on a page are called bookmarks. Images that have certain areas defined and then each area links to either a bookmark or a Web page are called hotspots. The combination of these three linking tools allows a varied and multifaceted approach to navigation within a Web site and to pointing to other Web sites that augment the materials on the course Web. We’ll examine using all three in the steps below.

14

To use hyperlinks and bookmarks1. On the Schedule page, click to the right of the last line of

text on the page, and then press Enter 10 times. Type Back to top.

2. Scroll back up to the top and in the cell for Period1 on Tuesday type Assignment, and then double-click on the word to select it.

3. Right-click Assignment, and then click Hyperlink-or-Click Insert, and then click Hyperlink.Alternatively, click the Insert Hyperlink button from the toolbar.

4. In the Insert Hyperlink dialog box, scroll down and then click homework.htm. This will place the page in the Address box.

Note: If you want to incorporate a URL to a Web page, type the address in the box provided. If you are unsure of the Web address, you can click one of the four buttons in the left pane of the dialog box. These buttons link you to an existing file or Web page, a place in this document, a new page that you will create, and an e-mail address.

5. Click OK to close the dialog box and return to the Page view. Assignments will be underlined which indicates a hyperlink.

6. Test the link by holding down the CTRL key while clicking on Assignments. Notice that you are now looking at the Assignments page.

7. Click Window, and then click schedule.htm to return to the Schedule page.

Creating a Course Web Site

8. Double-click Class Schedule at the top of the Schedule page to select the text, and on the Insert menu, click Bookmark.

9. Click OK. A dashed line appears under the text in question, which indicates a bookmark has been placed at that location.

10. Scroll down to see the text that was typed at the bottom of the page, and then select Back to top.

11. Right-click on the selected text, and then click Hyperlink from the menu.

12. Click the Bookmark button, point to Class Schedule, and then click OK. Click OK a second time to close the Insert Hyperlink dialog box.

The words Back to top are now linked to the bookmark at the top of the page, allowing the student to click the link and immediately return to the top of the page.

Bookmarks are used in this way to link portions of text on the same page. This technique works well on pages that display a list of information at the top and a lengthy discussion of each item in the list below. Frequently asked questions pages and a table of contents are such constructs that come to mind.

16

To create hotspots on images1. Select the snowflake that was pasted from the clip art

gallery earlier.

2. Click the Rectangular Hotspot tool from the Pictures toolbar, and then draw a box around the portion of the graphic that points north.

Note: To draw the box you must click in one corner, hold the mouse button down and drag to the opposite corner. Release the mouse button at the second corner and the Create Hyperlink dialog box appears.

3. Locate the Discussions page in the window and select it. This will place the page in the Address box. Click OK.

4. Repeat step 3 but go through the steps for the box pointing south this time.

5. Find the News page, and select it. The northern portion of the graphic is now linked to the Discussions page, and the southern portion to the News page.

By hot spotting an image in this manner, you can create powerful ways of visually navigating your Web site. For instance, your students might be studying Europe. A map of Europe would have hotspots around each country and clicking on a country would take the student to the appropriate page. Once on the country page, clicking on a city would take the student to that city. This can be done as many times as need be. Students that are more visually oriented will find this

Creating a Course Web Site

feature intuitive. Learning should be fun and interactive—hotspots help to attain this goal.

18

Automating display and access to content

One of the challenging aspects of putting class information up on the Internet is displaying it at the right time and providing the methods to locate it as well. Assignments are a perfect example. Do you create all the assignments now and post them to the Web, or do you update the Web site with the assignments on a daily basis? In addition to this dilemma, giving the students the ability to search the Web site for the information they are looking for by creating a search engine would seem to be a daunting task. FrontPage can solve these problems quickly and easily with two items, scheduled include pages and the search page.

Why might you not want to have all of your assignments up on your course Web site at the beginning? Some enterprising students may complete all the assignments early even if they don’t turn them in. By doing so, they don’t get the opportunity to solidify the subject matter through the exercises that have been assigned for that purpose. Also, the students might not be as inclined to return to the Web site as often which might hamper your ability to communicate with the student and take away the sense of community that is fostered by a good course Web site. Let’s use these features in scheduling our own assignments and creating our own search page.

To use scheduled include pages1. Click below the animated text to position the cursor at the

bottom of the Schedule page.

2. On the Insert menu, point to Web Component, and then click Included Content. Click Page Based On Schedule, and then click Finish. This displays the Scheduled Include Page Properties dialog box.

3. Click the Browse button, click the hw1.htm page, and then click OK.

Images can be scheduled in addition to pages. Just select Scheduled Picture on the Insert menu, and then click Component. Images that are time-sensitive based on season, holiday, or some other function can appear and disappear based on the same rules that apply to scheduled include

Creating a Course Web Site

4. Adjust the Starting and Ending times for your content. Times can be scheduled down to the second. A page can be scheduled to appear before and after the scheduled page as well. Click OK.

Note: The pages in which you want to schedule content, in addition to the pages that provide the scheduled content, must exist before you undertake the scheduling process. As a recommendation, name the pages to reflect their respective roles.

5. The page appears in the window if the beginning date is before today. Double-click the scheduled page to view the Scheduled Include Page Properties screen. Change the ending date to be before today's date, and then click OK to view your changes.

Scheduled include pages allow for assignments, tests, lessons, and the like to be created and available on the class Web site. However, instead of having all the information up at one time, it automatically appears in the appropriate space during the appointed dates. If the items you want to schedule should appear and then stay visible for the duration of the course, just make sure the ending date in the schedule is after the end of the course. As a general rule, place the pages that will be scheduled in a subfolder in your Web site. This enables you to see all the main pages for your Web site in the folder list and all the content that might be scheduled into those pages in a separate location.

20

To create a search pageCreating a search page sounds like it might be complicated, but FrontPage makes it extremely easy. Key-wording of pages is not necessary. Every element of text on all pages in the Web site is searched by the tool.

1. On the File menu, point to New, and then click Page or Web. This displays the New Page or Web task pane.

2. Click Page Templates under New from template to open the Page Templates dialog box.

3. Click Search Page, and then click OK. You will see the new page in Page view.

At this point the search page exists, but it is not reflected in any navigational structure. In other words, the page exists, but your students won’t know it’s available.

4. On the File menu, click Save As, and type search in the File name box to name your search page file. Click Save.

5. Switch to Navigation view and drag search.htm to the organizational structure directly to the left of the Announcements page.

6. Right-click the page, click Rename, and then change the page name to Search. Press Enter.

navigation. Students can use the index just like they would use indexes in books. Pages are listed based on the type of content they contain, instead of the hierarchal format that a table of contents provides. Visit the tutorial entitled Creating a Course Web Site at http://www.microsoft.com/education/?ID=TutorialPacks to obtain the

Creating a Course Web Site

You have created a fully function search page which will allow your students to search the entire contents of your Web site for particular words and the engine will display links to the appropriate pages in the result.

Getting HelpYou can get help from the box in the top right of the screen that says “Type a question for help”. If you prefer the animated Office Assistant click the FrontPage Help button on the Standard toolbar. To open Help, on the Help menu, click Microsoft FrontPage Help. If you have an Internet connection, you can also point to Office on the Web on the Help menu and choose from several resources that may be of interest to you, such as Product News, Frequently Asked Questions, and Online Support. Don’t forget to go to http://www.microsoft.com/frontpage for all the latest information.

Information in this document, including URL and other Internet Web site references, is subject to change without notice. Companies, names, and data used in examples herein are fictitious unless otherwise noted.

© 2001 Microsoft Corporation. All rights reserved.

Microsoft Corporation retains sole ownership of all published In and Out of the Classroom materials. Microsoft grants permission for educational institutions and Microsoft OEMS and Solution Partners to reproduce these materials for staff development purposes (only). Altering materials or reselling materials is strictly prohibited.

Microsoft, BackOffice, FrontPage, Microsoft Internet Explorer, and the Microsoft Internet Explorer logo, the Microsoft Office logo, NetMeeting, Outlook, PowerPoint, Where do you want to go today?, Windows NT, Windows, the Windows logo, and the Windows Start logo are either registered trademarks or trademarks of Microsoft Corporation in the United States and/or other countries.

Other product and company names mentioned herein may be the trademarks of their respective owners.

Acknowledgments

This workshop was created in partnership with Scott Sample and S&T Consulting, an information design and development firm: www.sakson.com.

22