Transferring Course Materials to the Web

Creating a Web Site With a Template To create a Web site with a template 1.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. 5.Type the address of your Web server in the Specify the location of the new web box ( 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. Creating a Web Site With a Template

Creating a New Page To create a new page 1.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. 5.Type a brief synopsis at the top of the page that describes the calendar and the information that it entails. Creating a New Page

Applying a Theme To apply a theme 1.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. 3.Click OK to save your changes to the theme. Applying a Theme

Using Tables 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. Using Tables To use Tables cont. 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. 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.

Changing Table Properties To change table properties 1.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. Changing Table Properties

Applying Dynamic HTML Effects To apply dynamic HTML effects 1.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 then 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. 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 3 rd 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. Applying Dynamic HTML Effects

Embedding Graphics and Multimedia To embed graphics and multimedia 1.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.

Using Hyperlinks and Bookmarks To use hyperlinks and bookmarks 1.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. 4.In the Insert Hyperlink dialog box, scroll down and then click homework.htm. This will place the page in the Address box. 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. Using Hyperlinks and Bookmarks To use hyperlinks and bookmarks cont. 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.

Creating Hotspots on Images To create hotspots on images 1.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. 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.

Using Scheduled Include Pages To use scheduled include pages 1.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. 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. 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.

Creating a Search Page To create a search page 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. 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. Creating a Search Page