The first time I went on the Internet, what I thought would only be a one-hour browsing session lasted four hours. I began by looking for information on graphic development. I did a Web search for related pages. The search returned thousands of pages, so I picked one that sounded promising. Once I got to the site, I went deeper into areas that were more relevant to the topics in which I was interested. Each site led me to another. It was like having a huge library in my living room.
Links and bookmarks are what give Web pages this level of interactivity. Without them, you cannot easily enable people to see what it is on your site or to find other sites with similar information. With links and bookmarks, a user can simply click a mouse on text or a graphic to navigate to all types of pages, download files, find newsgroups, and send e-mail.
There is no doubt about it-it takes some planning to create a good Web site. Before you start designing your pages, think about what you want to accomplish with your site and how the content should be organized. Most Web sites focus on one or more topics of interest. Each topic is organized in a group of pages that make up one section of a web. If you are working on a personal Web site, what do you want to focus on?
That is an important question. It is one of the first obstacles that you have to face. Once you hear that you have 1, 5, or even 25 megabytes of space to store pages on your server, you are in a quandary over what to fill them with. Your home page typically welcomes people to your site and explains what it is about, but you can use it as a gateway to much else. If you cannot think of anything more than filling your site with pictures of your kids and pets, here are some ideas:
| TIP |
If you do not have a scanner or access to one, but do have a CD-ROM drive, ask your photo shop to put your photographs on a photo CD. Many shareware and commercial graphics programs support the Photo-CD format. |
| TIP |
MIDI files, which contain note and instrument data for MIDI-compatible instruments and sound cards, are generally much smaller than WAV files. The disadvantage to using MIDI files is that they can sound quite different, depending on the instrument or sound card that the user has. WAV files are digital recordings of sound or music. The advantage to using them is that the file will sound the same from system to system. However, file sizes can become quite large. Many sound-editing programs offer ways to compress WAV files without too much loss in quality. |
Once you have the basic idea for your Web site, think about how you want to organize the information. Make it easy for visitors to find their way around your site.
Figure 8.1 shows an example of an initial idea. The home page is linked to two main areas, which contain pages that discuss the person's areas of interest-white water rafting and myths and mysteries. It is a good idea to provide navigation links on each page so that users can return to other pages easily. For example, all the pages on white water rafting should include links back to the main page of the section, which in turn should contain a link back to the home page. Likewise, there should be links to navigate between the pages on rafting.
Figure 8.1: Plan your information before you start building your Web site.
Compare this to the hierarchical linking diagram shown in Figure 8.2. A structure like it might be good for an online book. The lack of links to other sections, however, means that users can quickly get lost, especially if the navigation is several levels deep. Provide a means for users to get around so that they do not have to backtrack through several levels to get to other areas of interest. The home page should provide links to the sections in the book-that is, the second level. Every second-level page should contain navigational links to the home page, the other second-level pages, and each of its third-level pages. Links to the preceding chapter should appear at the beginning of each chapter, and links to the following chapter should appear at the end of each chapter-just where people are most likely to need them.
Figure 8.2: Hierarchical linking is good to use for online books.
Links and bookmarks are traditionally called anchors in the Web world, which is why they have an A tag. Bookmarks differ from links in that they mark a specific spot on a page. Just as bookmarks serve as placeholders when you read a book, they perform basically the same function on a Web page.
A page that contains bookmarks typically has a small table of contents at the top, which links the user to bookmarked headings on the page. At the end of the bookmark's section, another link takes the user back to a bookmark located at the top of the page or at the table of contents.
To create a bookmark on your page:
You can visit a bookmark on your page without creating a link to it. The steps are
You also can visit a bookmark on another page. Suppose, for example, that you have the page oriental.htm, which is named "Cooking Great Chinese Food." On it is a section called "Picking Fresh Vegetables" with the bookmark freshveggies. When you create a link to this bookmark, the URL looks like
oriental.htm#freshveggies
Figure 8.4 shows how to visit the bookmark from the page that links to it. The steps are
Deleting a bookmark is easy. The steps are
| NOTE |
An even quicker way to delete a bookmark or any other page element is to use the Delete key. |
It is convenient to be able to jump to different locations on a page, but that is not what the Web is all about. The Web is about reaching outward. To accomplish this, you provide links on your pages. Links can take users to other pages in your web, to pages in other people's webs, to newsgroups, and to other types of Internet protocols. You can even put a link on your page to get e-mail delivered to your mailbox. You can create three basic types of links:
Whenever you see blue underlined text on a page, you know that it will take you somewhere else. For that reason, it is redundant to say "Click here." Instead, make your links descriptive. Figure 8.4 shows examples of text links.
You can use the FrontPage Explorer to create a text link from the page that is currently opened in the FrontPage Editor to another page in the current web. As Figure 8.5 shows, creating a link this way involves only three easy steps. They are
Figure 8.5: Creating a text link from the FrontPage Explorer.
You use the FrontPage Editor to create a text link to another page that is opened in the Editor. The steps are
Image links are commonly used as navigational buttons and navigation bars, but images can be used for links in all sorts of ways. For example, you can provide a thumbnail of a picture, which users can click to download it or display it in a larger view.
Creating image links is just as simple as creating text links. The steps are
Sometimes, the people who visit your Web site are not using browsers that can display images. These browsers are becoming increasingly rare, but other browsers provide the option to turn image display off. Many people choose not to download images because of the time involved. This is not a problem when images are placed on a page just to be seen. When they serve a function, however, you must provide an alternative for people who do not want to download all that artwork.
To specify an alternative text representation:
Clickable images, also known as image maps, are graphics that contain hotspots. The hotspots provide links to different pages from within the same image. They are useful and enable you to add creativity to the links on your pages. Figure 8.8 shows a graphic that contains one rectangular and several polygonal hotspots.
Figure 8.8: Clickable images can contain links to several different pages on the Web.
You can turn any graphic on your page into a clickable image. Simply select the image, create a hotspot or hotspots on it, and assign a link to the hotspot. The steps are
When you edit the shapes of your hotspots so that they do not overlap too much, it is sometimes hard to see their outlines on dark backgrounds. Use the Highlight Hotspots command to find hotspots easier. The steps are
Figure 8.9: Use the Highlight Hotspots button to view hotspots easily.
You need to select a hotspot to move, resize, or delete it. To select a hotspot:
To move a hotspot:
To resize a hotspot:
To delete a hotspot:
You now know how to create a link. All the methods described so far open the Edit Link dialog box. This dialog box enables you to link to
Choose the Open Pages tab, shown in Figure 8.10, to create a link to another page that is opened in the FrontPage Editor. The steps are
Figure 8.10: Use the Open Pages tab to link to other pages that are opened in the FrontPage Editor.
Choose the Current Web tab, shown in Figure 8.11, to create a link to any page, graphic, or file that exists in the web that is currently open in the FrontPage Explorer.
Figure 8.11: Use the Current Web tab to link to other pages in the current web.
The steps are
You can create links to pages on the World Wide Web, including
pages that exist in other webs on your own Personal Web Server.
You also can create links to other Web protocols. Table 8.1 describes
the protocols to which you can link.
| Protocol | URL Example | Description |
| file | file://localhost/directory/filename.ext | Specifies a file on your local host. |
| FTP | ftp://www.anyserver.com/downloads/program.zip | File transfer protocol. Used for a file that is ac-cessible across the Internet. |
| gopher | gopher://anygopher.tc.university.edu/2 | Gopher protocol.Creates a link to a directory-based protocol. |
| http | http://www.anyserver.com/mylink.htm | Hypertext transfer protocol. Enables Web clients to retrieve information from Web hosts. |
| http | http://www.anyserver.com/mylink.htm#graphics | Creates a link to a bookmark on a page. |
| mailto | mailto:myemail@www.myprovider.com | Creates a link to an e-mail address. |
| news | news:alt.example.nosuchgroup | Retrieves files from a Usenet newsgroup. |
| Telnet | telnet:/yourname:password@yourhost:port | Used for a remote Telnet login session. |
| WAIS | wais://yourhost:port/database | Provides links to database information on Wide Area Information Servers. |
Sometimes you need to provide a relative URL. In this case, you
use the Other protocol. Suppose, for example, that the
source URL is http://www.myserver.com/personal/index.htm
and that the target URL is http://www.myserver.com/business/index.htm.
The relative URL is ../business/index.htm.
| NOTE |
Your files might end up on a system that is case-sensitive. This is typical of servers that run on UNIX systems. As a general rule, most Web developers use all lowercase letters when they enter URLs to avoid conflicts with case-sensitivity. In addition to the letters of the alphabet and the numbers 0 through 9, you can use the following symbols: -, ., +, ', _ |
Use the World Wide Web tab, shown in Figure 8.12, to create a link to a page, a file, or a protocol on the World Wide Web.
Figure 8.12: Use the World Wide Web tab to link to pages on the World Wide Web.
The steps are
Choose the New Page tab, shown in Figure 8.13, to create a link to a new page that will be placed in the currently opened web. The steps are
The FrontPage Editor has built-in browsing capabilities that enable you to follow the links in your webs and the World Wide Web. Although not a high-powered browser, it enables you to test your links as you design them.
To follow a bookmark, a text link, or an image link forward:
Sometimes the server to which you are following a link is unresponsive. You can stop the process by selecting Tools | Stop from the FrontPage Editor or by clicking the Stop button on the FrontPage Editor toolbar.
It is a fact of life on the Web that sites have a tendency to evolve and change. Ten pages quickly become dozens. They are renamed, relocated, deleted, or divided into other pages.
To change the URL of a text link or an image link:
To unlink a link:
To delete a text link or an image link:
Chapter 11 explains in more detail what extended attributes are used for. FrontPage supports the most common attributes associated with links, but the capability to add additional attributes that are not supported is available in the Edit Link dialog box.
To add extended attributes to a link:
When multiple authors work on the same web at the same time, you can easily lose track of who has done what. Likewise, when you create webs with wizards or import pages into your web, you sometimes see a red triangle beside the page when you are in the FrontPage Explorer's Outline View. This usually occurs when a page that contains a link is imported to a web before the destination page is imported. Use the Recalculate Links command to update the web display in the FrontPage Explorer. In many cases, this command gets rid of those red triangles.
To update the web display or to create the text index for the Search bot, use the Tools | Recalculate Links command. The FrontPage Explorer refreshes the display of the web in Outline View.
You have learned roughly all there is to know about creating and using links with FrontPage. You are now set to tackle building your Web site from the ground up. Choose a theme, plan the areas that you want to include on your site, and the rest will happen over time. Rome was not built in a day, nor will be your custom pages. Sites constantly evolve and change as new standards are developed for the Internet. The more you become familiar with what is out there and what you can do, the more you can incorporate into your site.
In this chapter, you learned how to navigate through your pages and out to other areas of the Internet by using bookmarks and links. You were given suggestions about what to include in your site, and you learned how to link pages together with text, images, and image maps.
In the next chapter, you learn about the basic elements that make up a page-paragraphs, headings, and text styles. You learn when to use them and how to arrange content for the best appearance.
For additional information that relates to the topics discussed in this chapter, check out the following chapters:
| Q: | I am uncertain about when to use relative URLs and how to enter them. Can you help me? |
| A: | A good example of when to use a relative URL is to provide a link to a page that is in another web on your Personal Web Server. It does not fall into the category of pages in your current web, nor does it fall into the category of World Wide Web documents. Suppose, for example, that you are working on the following page in the current web: http://yourservername/MyWeb/funstuff/comics.htm From this page, you want to link to a page in another web on your own server, such as http://yourservername/Comedy/3stooges.htm The common portion of these two webs is http://yourservername. To return to the common root, you have to go back two levels from the comics.htm page. As in the old days of DOS, you go backward one level by entering two periods (..). Therefore, when you create a link from the comics.htm page to the 3stooges.htm page, choose the Other protocol in the World Wide Web tab of the Edit Link dialog box. The relative URL will look like ../../Comedy/3stooges.htm |
| Q: | Why is it best to use relative URLs? |
| A: | Relative URLs are portable. When you develop your Web site on your local computer and subsequently relocate the pages or rename directories, the relationships between the pages are maintained, and the links will not break. In contrast, when you use absolute or base URLs, you need to edit each URL to reflect the new location. This is a tedious and time-consuming task. |
| Q: | Do all browsers support mailto: links? |
| A: | No-if a browser does not support a mailto: link, the user receives an error message. |
