Tutorial 3 Notes

In the first session, students will import an existing Web page into a Web site and insert an Office 2000 document in a Web page. They will also create definition, bulleted, numbered, and nested lists.

The second session guides students through the creation of bookmarks and associated hyperlinks. Students will learn to create hyperlinks to other Web pages as well as hyperlinks that contain an e-mail address. They will also convert a JPEG picture to a Gif format. Make the GIF format transparent, and create a hotspot on the picture. They will test hyperlinks within a Web page, between Web pages, and to an e-mail hyperlink. Finally, they will view a Web site in Hyperlinks view and print it.

The third and final session uses the tasks list to manage a Web site's development. The student will add, modify, reassign, complete, and delete tasks. The last part of this session will show students how to view HTML code that implements the features of the Employment Web page.

Lecture Topics	Page #
Session 3.1	FP 3.02
Importing a Web Page into a Web Site	FP 3.02
Specifying a Common Background	FP 3.04
Inserting a File in a Web Page	FP 3.06
Creating Lists	FP 3.08
Session 3.2	FP 3.13
Creating Bookmarks and Hyperlinks to Bookmarks	FP 3.13
Linking to Other Web Pages	FP 3.21
Creating a Hyperlink Using Drag and Drop	FP 3.23
Creating a Hyperlink to an E-Mail Address	FP 3.26
Converting a Picture to a Different Format	FP 3.28
Changing a Color in a Picture to Transparent	FP 3.30
Creating Picture Hotspots	FP 3.32
Viewing Hyperlinks	FP 3.35
Printing Hyperlinks View	FP 3.38
Session 3.3	FP 3.40
Managing a Web Site's Development Using a Tasks List	FP 3.40
Viewing HTML Code	FP 3.50

Make sure students do not miss the paragraph on FP3.05 and FP3.06 which states that it is a good and common practice to make all Web pages within a site similar in appearance. Explain that this gives a visual identification and unity to the site. If you know of some sites where the backgrounds and color change from page to page you could demonstrate how this makes the site appear to be disjointed. Then you should also take them to a site with common appearance among the pages to allow them to see the difference.

As students add the definition for the defined term, MIS, have them click in the other job descriptions and titles. They should notice that the job title and their descriptions are also in the defined term style.

It would be helpful to demonstrate some sites that use bookmarks to move around on their pages. Explain that bookmarks make it easier for a user to see the portion of the page that they want to rather than having to scroll through a large amount of text. Compare bookmarks to turning down the corner of a page in a book so that you can easily go to that page when you want to. The hyperlink to the bookmark also makes it easy to "jump" to particular place in a document. Be sure students are familiar with the term "internal hyperlink" which means that the link is within the same page. Finally, explain that, as in the example page, often you want multiple links to the same bookmark.

Students should understand that a hyperlink is simply a directive to go to another location. In the case of the bookmark they simply went to a location with the page. Linking to another Web page is exactly the same concept only the link is to another page rather than within the same page. Students might not immediately realize that they can link to any page on the Internet not just pages within their own site.

Students might have a little difficulty with the "drag and drop" method of creating a link. It would be helpful if they read through all the instructions on Pages FP3.24 – FP3.25 before they begin. The will need to hold their mouse button down throughout the process of "drag and drop" in order to create the requested link.

Note: There is a little "glitch" in FrontPage when creating new pages and a link to it at the same time. Sometimes the links are not created correctly. Caution students to carefully review the links to make sure they are correct. If they find the link is not correct they should edit the properties of the link so that it is correct. Also, later in the text they will learn to repair all links that are "broken".

You should stress the important of keeping picture files (images) as small as possible in order to decrease the loading time. The concept of interlacing is briefly mentioned on FP3.30. Consider demonstrating the concept with a large picture file, which illustrates how it loads in IE with increasing clarity as it makes passes through the file.

Explain that graphics (images) can be used to create a site map, which allows user to click on a portion of the picture and link to another location on that site. Often Web masters will create a graphic image with various parts of the graphic representing different pages within or outside the site. This is an effective way to create visual reference to your pages in the site.

Point out that in the hyperlinks view, one page is the focus of the hyperlinks and that the view shows all links to other pages, picture files, and sound files. Make sure students understand that arrows in the hyperlinks view indicate a link to another page and that those that end in a bullet link to a multimedia file.

Students may not have any experience with printing the screen. You will probably want to demonstrate this process before they try to do it themselves. The text has the student "drop" the screen into WordPad but they can also drop it into a picture editor of their choice. By using a picture editor they could alter the image if desired (i.e., crop the picture or change a color, etc.).

Depending on the printer being used, students may need to print the hyperlinks view in landscape in order to get it on one page.

The tasks list is a very effective tool for managing what remains to be done in the development of a Web site. However, if the tasks list is not maintained (kept up to date) it will simply become a burden. Encourage students to be disciplined about setting up the tasks list and then returning to the tasks list as they develop the site. Explain that this would be a good way for a Webmaster to keep up with the tasks each member on the team has been assigned and the status of the various tasks.

Encourage students to check the hyperlinks view often for any broken hyperlinks. When their Web site is actually posted they should be sure that all broken hyperlinks have been repaired. Using the hyperlinks view will ensure that all hyperlinks are correct.

The text has the students look at just a view of the tags in the HTML view. Consider spending a little more time going through the various tags in the HTML code.

Front Page Tutorial III Notes (This page is Using the "Artsy" Theme)