Working with Other Head Content | Macromedia Dreamweaver MX 2004 Demystified

[ LiB ]

You'll probably spend more time using the various Dreamweaver Meta objects than using either of the other Head objects, but both link and base have their uses as well.

Base Tags and the Base Object

In HTML, the purpose of the base tag is to provide an absolute URL or a link target that the browser will automatically use to resolve all links within the document. It sounds more complicated than it is.

Base Tags and Absolute URLs

When a browser encounters relative URLs in an HTML document, it constructs absolute addresses from them by accessing a "base" URL, usually that of the current document itself. If your web page address is http://www.yourcompany.com/index.html and the page contains a link to images/spacer.gif , the browser combines those two addresses to construct an absolute URL for the image: http://www.yourcompany.com/images/spacer.gif .

If your document head uses the base tag to specify an alternate URL, like this:

 <base href="http://www.webwidgets.com/store/">

all relative links in the document now are calculated relative to that address. So,

 <a href="pricelist.html">Home</a>

resolves to this:

 http://www.webwidgets.com/store/pricelist.html

Likewise,

 <img src="../images/spacer.gif">

resolves to this:

 http://www.webwidgets.com/images/spacer.gif

These addresses will be used even if the actual URL of your document is entirely different, like this:

 http://www.homepagesRus.com/index.htm

When would you want to use the base tag to override your document's own URL for relative addressing? You would want to on two occasions:

When creating mirror sites, where sets of pages on different web servers refer to a common resource pool of images or pages, base makes it possible to just port the pages to the mirror server. Using base , the relative links can be made to point to resources that are on the original server.
When inserting HTML into email messages, all links must be either absolute or relative to a specified base . This is because email messages have no URL for the email browser to use in constructing absolute paths. (Note that some email software, most notably Hotmail, cannot correctly construct URLs using base . It's safer, therefore, to just use absolute URLs throughout and not specify a base .)

Base Tags and Link Targets

Targets in links determine in which browser window a linked document will appear. Valid targets include the assigned name of any open window or frame in a frameset, or any of the generic targetssuch as _blank for a new window, or _top for the main window in a frameset. The normal link syntax looks like this:

 <a href="widgets.html" target="_blank">

However, if the document head includes a base tag that points to a target, like this one, all links in the document are opened in that target window exactly as if the target were specified in each individual link:

 <base target="_blank">

A link coded as this behaves as thought it were coded using the full targeting syntax:

 <a href="widgets.html">

Why would you want to use the base tag to specify targets document-wide instead of specifying them individually for each link? It results in more efficient HTML, especially if your page contains many links (a resources or bibliography page, for instance). It makes life easier because you don't have to remember to specify every single target; it also makes editing simpler, if you change your mind about where links should be targeted . Instead of changing dozens of individual links, you need change only the base tag.

If you specify a target using the base tag, does that mean every single link in your document absolutely must use that target? Noyou can override the base target for specific links by specifying a different target for the link itself. So, if the <head> section specifies <base target="content">, but a link on the page specifies <a href="mypage.html" target="nav">, that particular link will open in the window named nav.

If you're a smart Dreamweaver user , of course, you could use a tag-specific Find and Replace to quickly change all those targets instead of using the base tag. Tag-specific searches are discussed in Chapter 27, "Writing Code in Dreamweaver."

Using the Base Tag in Dreamweaver

To insert a base tag into a Dreamweaver document, use the Base object in the Insert bar or menu, as shown in Figure 7.11. This object enables you to enter a URL and a target name. As with any head content, as long as you're in Design view when you insert it, it doesn't matter where the insertion point is when the object is chosen ; the base tag automatically is inserted into the head.

Figure 7.11. A base tag being inserted and later inspected, using the Base object.

Remember the following few tips when working with the base tag in the Dreamweaver environment:

Use only one base tag per document. Dreamweaver won't stop you from inserting multiple base tags in your document, but it's not legal HTML. Don't do it.

Remove empty href attributes. If you specify a base target and no base URL, Dreamweaver writes the code for the base tag like this (problem code is highlighted):

 <base href=" " target="_blank">

Although this is technically legal, it can cause the browser to misinterpret all the links on your page. (A link to spacer.gif is resolved to http://spacer.gif , which is a meaningless address.) Avoid the problem by going to Code view and manually deleting the empty href attribute.

If you find yourself repeatedly using the base tag for targeting and manually removing code, you might want to download Massimo Foti's Base Target object from the Macromedia Exchange for Dreamweaver.

Type in the absolute URL. Although Dreamweaver allows you to browse to choose the base URL, doing this creates a relative address. For standard use, the base tag requires an absolute address.
Don't forget the final slash (/). The browser ignores any part of the URL that falls after the final slash. The following base URLs are considered equivalent:

http://www.webwidgets.com/

http://www.webwidgets.com/index.html

http://www.webwidgets.com/images
Preview pages with base URLs. After you have specified an absolute base URL, you won't be able to properly preview the page (in Dreamweaver or your browser) until you've uploaded all relevant files to the server. If you really want to preview the page while you're working locally, you need to substitute the address of your local site folder. This is a URL beginning with the file:// protocol. To access that information, open one of your site's documents in Dreamweaver and use Preview in Browser (F12) to view the page in any browser. Look at the URL in the browser's address fieldthe path ends in the name of the temporary file, but it should begin with the absolute URL of your local site folder, like this (the local folder address is shown in bold):
```
  file:///Power%20Girl/Web%20Widgets/Local%20Site/   TMP2onxb308wp.htm 
```
Copy the relevant part of the address from the browser and paste it into your base tag. (Be sure to include the final slash!)
```
 <base href=" file:///Power%20Girl/Web%20Widgets/  Local%20Site/"> 
```
After you've done this, you can preview locally, but not by using Dreamweaver's Preview in Browser feature. You'll need to open the page manually from the browser. And, of course, don't forget to restore the proper base URL before uploading the page.
Don't use the Site panel to move files. When you have a base URL in place, you're in charge of the relative links. If you rearrange your site's file structure using the Site panel's File view, Dreamweaver tries to update all relative linksdon't let it! It will corrupt the links and nothing will work. To be safest, do your file rearranging outside of Dreamweaver, using your operating system's file management (Windows Explorer or Macintosh Finder).

Exercise 7.3. Add a Base Target to a Page's Links

Back to Walt's Web Widgets for this exercise. Walt has decided that he wants all the subject pages on his site to open in a new browser window so the visitor never leaves the home page. You can accomplish this quickly by adding a <base> tag specifying a target of _blank .

From the chapter_07 folder, open main.html . Make sure that head content is showing, and that the Insert bar is showing the Head category. It doesn't matter what in the Document window you have selected.
In the Insert bar, click the Base object. When the dialog box appears, leave the URL field empty. From the pop-up target menu, choose _blank . Click OK to exit the dialog box.
Set the Document window to show Code and Design view. In the Head content display bar, click the Base object icon to select your newly inserted base tag. This action also should select the code for the base tag, in Code view.
In Code view, delete the href attribute from the base tag so the tag reads as follows :
```
 <base target="_blank"> 
```

That's it! Preview the page in a browser and click any of the page's links. Each should open in a new window.

Link Tags and the Link Object

With the link tag, it's theoretically possible to specify all sorts of complex relationships between web documents. This includes specifying certain documents as next and previous in a series, linking alternative-language versions of pages, linking page glossaries, and much more. Unfortunately, none of the major browsers supports this functionality yet, although Lynx (a text-based browser) and iCab (a Macintosh browser) do, to some extent. For current use, the only reliable implementation of the link tag is to link external style sheet documents (see Chapter 11, "Using Cascading Style Sheets," for more on this).

[ LiB ]