- Understanding the Fundamentals of HTML
- Making a New Page
- The Document Window and Its Tabs
- Viewing the Source Code
- Using the HEAD Pane
- Setting the Width of Your Page
- Setting the link, alink, and vlink Colors
- Setting the Page Background Color
- Previewing Your Page
- Summary
- Q&A
- Quiz
- Exercises
- Quiz Answers
This chapter is from the book
This chapter is from the book
This chapter is from the book
Using the HEAD Pane
Of the three icons in the HEAD portion of your document, the first two are META tags. The META element provides information about the HTML page to either the server or the browser. Search engines also use information in META tags as part of their method of indexing sites, along with other criteria such as the page title. (For details on how to properly use META tags to work with search engines, please read Hour 24, "Making Your Web Site Search Engine Ready.") The third icon in the HEAD section is the TITLE tag.
You have probably witnessed the workings of HEAD tags on a page and might not even have known it. Have you ever surfed to a page that had a message similar to "Our Web site has moved, we'll take you to the new site momentarily," and within seconds another page loaded without you ever having touched your mouse? Have you ever entered a Web site and had a little window pop open automatically while the home page was loading without having clicked on anything? These things can occur as a result of instructions being given to the browser by the page.
In this section, you'll learn how to complete several tasks using the HEAD portion of the Document window in Layout mode, including how to insert and set the attributes of a <HEAD> tag, and how to change the page title.
Giving Your Page a Title
Every page that you create for your Web site should be given its own title. Do not confuse the title of the page with the filename; they are two different things. For example, you might want to create a page in your site that has information about your company. The title of the document might be "Welcome to American Graphics Institute," whereas the filename might be welcome.html. What you select as a title will appear in the title bar of the browser window and is also the title when a viewer bookmarks your page for future reference. (See Figure 3.8.)
){kind=link}
Figure 3.8 "American Graphics Institute Training," is the title of the page.
Tip
Search engines such as HotBot, Excite, and AltaVista place great importance on the title of a page when indexing Web sites. We strongly suggest that you use very descriptive titles that include keywords to facilitate satisfactory search engine indexing. For example, if your site is about flea collars, you might create a page title like, "Acme Flea Collars where your dog or cat will get rid of his fleas!" Notice that we used the word fleas twice, and used dog and cat, which are good keywords for this topic. For further details, please refer to Hour 24.
When you make a new page, Adobe GoLive automatically inserts the words "Welcome to Adobe GoLive 6" in the title field at the top left of the page. You must remember to change these words to something that better indicates the actual content of your page.
While in Layout mode, you can make the change on the page itself or in the Page Inspector. The syntax for the page title is written into the HEAD section of the document between the opening <title> and closing </title> tags.
To Do: Changing the Title on the Page Itself
Have the about.html page open, or open a new blank page for this exercise. To change the title in the title field at the top left of the Document window, complete the following steps:
-
Click and drag the mouse to select the words in the title field (see Figure 3.9).
Type your new title over the current text.
Click back in the Document window.
){kind=link}
Figure 3.9 Type your new title over the current text in the Title field.
To Do: Changing the Title in the Page Inspector
You can also use the Page Inspector to alter the title. To change the title in the Page Inspector, complete the following steps:
Double-click on the small, blue Page icon at the top left of the Document window.
If it is not already open, the Page tab of the Inspector appears.
-
In the Page Inspector, type your title into the field called Title (see Figure 3.10).
){kind=link}
Figure 3.10 Type the new title into the Title field in the Page Inspector.
If you have the HEAD pane of the Document window open, clicking the TITLE icon will also reveal the Page Inspector where you can change the page title in the same way. You can also alter the page title in Source and Outline modes, or in the Source Code window. For more information on these options, please refer to Hour 21.
Using GoLive HEAD Tags
Inserting tags into the HEAD pane of your document in Layout mode is a simple matter of locating the icon of the tag you desire in the Objects palette, dropping it into the HEAD pane, and then setting its attributes in the Inspector.
To Do: Adding a Tag to the HEAD Pane of Your Page
To add a tag to the HEAD pane of your page, complete the following steps:
In the about.html page click the triangle next to the Page icon in the upper-left corner of the Document window, which opens the HEAD section pane.
Make sure that your Objects palette is open or choose Window, Objects from the menu.
-
Click the Head button of the Objects palette (see Figure 3.11).
Even though descriptions are discussed in much greater detail in Hour 24, we will use one at a basic level for this exercise. Drag the META icon from the Objects palette and drop it into the HEAD section pane.
){kind=link}
Figure 3.11 The HEAD tab of the Objects palette.
Tip
If the HEAD section pane is closed, drag the icon from the Objects palette to the triangle at the top left of your Document window, which will toggle the HEAD pane open, and then drop the icon into it.
After the icon is placed into the HEAD pane, you need to set its attributes in the Inspector. In the Name text box enter the word description and then enter a brief description of your page in the Content text box as shown in Figure 3.12.
){kind=link}
Figure 3.12 Help search engines by adding a description in your Head