WebDevelopersJournal.comTips on Web Page Design, HTML and Graphics
SITE SEARCH
Newsletters
HTML (M-F) Text (M,TH)



Jobs at webdeveloper.com

Resources By Subject
Technical
Graphical
Authoring
Business
WDJ resources
Archive

internet.com

internet.commerce
  • Partner With Us
















Developer Channel


Find a web host with:
CGI Access DB Support Telnet Access
NT Servers UNIX Servers



Semi-automatic?

JavaScript
JavaScript Helper:
Meet Paige Turner, the least geeky geek we've ever come across.

Variables and Operators Explained:
First of a three part guide to JavaScript basics.

Controlling Forms:
Enhance your HTML forms with a touch of JS.

DHTML:
Forget how it works, let's see some in action!


Designing Web Pages with Macromedia DreamWeaver: Document Headers in Dreamweaver

by Kurt Nimmo

Since most of the visible action of a Web page happens within the <BODY> tag, it is easy to forget about the importance of the document header, or <HEAD> tag, which many text-based and WYSIWYG editors create in a default fashion without asking for input from the author.
December 4, 1999

Dreamweaver is no exception. When you open a new document, a very basic header is created.

<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

As you can see, this is a very anemic header. While the all-important META element is there, it contains a stripped down HTTP-EQUIV attribute minus powerful metacontent, such as keywords used by search engines to index the page.

Not to worry, though. Dreamweaver 2.0 provides us, after the fact, with a series of dialogs we can use to pack the header with the essential content it needs to be truly effective and get the job done. These dialogs are accessed from the Object palette, the vertical bar of icons we see when Dreamweaver is launched. If you examine the Object palette closely, you will see a downward pointing arrow in the top right corner. Click on it and you will be presented with a list of menu options to chose from. One of the these options is HEAD. After you choose HEAD, the Object palette will load up with six different icons. Each icon controls different aspects of information included within the document header. Descriptions of each follow.

Insert Meta

This dialog allows you to specify descriptive information within the bare bones META tag created by default, as shown above.

Attribute: this presents a choice between NAME or HTTP-EQUIV (short for HTTP-Equivalent). NAME allows you to set a property for the document, such as author name, the date of document creation, or a company name. HTTP-EQUIV maps the tag for server processing. When you click on Attribute, a drop-down list appears and you can choose either NAME or HTTP-EQUIV.

Value: This can be almost anything -- a description, a list of keywords, or refresh. In the example below, a list of keywords for search engines is provided. The actual keywords are inserted by using Content.

Content: Directly below the drop-down list is Content, a multiline text box where you type in the information. After you enter the information and click OK, the content is added to the META tag.

<meta name="keywords" content="apples, oranges, grapes, tangerines">

Insert Keywords

This is the same as Content, above. There is really no difference, except that the focus is on the insertion of keywords. Keep in mind, for the keyword list to work correctly, you must insert commas between the different keywords in your list.

Insert Description

Again, a bit redundant, since descriptions can be added with Insert Meta, covered above. The likely purpose of this and Insert Keywords is ease of use -- with Insert Meta, you need to define a value, such as description or keywords. These two dialogs allow you to enter this information quickly, without specifying a value. The functionality of Insert Description relates, again, to search engines on the Web. Keep in mind that some search engines limit the amount of words you can use in the description, so it is wise to keep it short.

<meta name="description" content="Big Banana Fruit Company">

Insert Refresh

This attribute automatically loads another page -- or reloads the current one -- after a specified amount of time. You can tell the browser how long to wait in seconds by adding a value in Delay (if you would like the document refreshed immediately, enter zero). The option Action presents two radio buttons -- Go To URL and Refresh This Document. With Go To URL, you can enter the URL manually or use the Browse button to find a file locally on your machine. It is wise to save your document before browsing, however, or Browse will enter full path information from your machine, including drive designation (i.e., file:///C|My Files/apples.html), which will obviously not work correctly on the Web. Dreamweaver will prompt you to save the file as a document-relative path before continuing. In the example below, the document apples.html is loaded after an interval of five seconds.

<meta http-equiv="refresh" content="5;URL=apples.html">

Insert Base

While the <BASE> element is part of the header, it is not part of the metacontent. It simply defines a base URL of the document. What good is this? Well, for instance, let's say you move the file to another server and your links are relative (that is to say, do not include server and path information), without <BASE> they may not work. Insert Base lets you set an absolute address for the document and, if needed, a frame target for the document. In the Insert Base dialog, you can manually set the HREF or choose Browse. Target presents a drop-down list where you can set the target (i.e., _blank, _parent, _self, etc.).

<base href="www.myserver.com/mydirectory/" target="_blank">

Insert Link

<LINK>, like <BASE>, is not part of the metacontent but also belongs in the header. <LINK> determines the current document's relationship with other documents. It is used for things such as document-specific navigation, printing, or style sheets. <LINK> comes with many attributes. Most of them, however, are not included in the Insert Link dialog. HREF points to a URL for the relationship you are establishing (again, Browse is included). ID indicates a unique identifier for the link (this is used primarily for style sheets). Title describes the relationship (again, used primarily with style sheets). Rel specifies a relationship between the document in the Href field, while Rev indicates a reverse relationship, again between the document listed in the Href field. Values for both Rel and Rev are Alternate, Stylesheet, Start, Next, Prev, Contents, Index, Glossary, Copyright, Chapter, Section, Subsection, Appendix, Help, and Bookmark. The complexity of <LINK> is beyond the scope of this article. For more information go to http://www.w3.org/TR/REC-html40/struct/links.html#h-12.3.

As you can see, Dreamweaver makes it easy to include document information in the <HEAD> element. Of course, it helps to understand what this element does and how you can benefit for the various elements and their respective properties.

Other DreamWeaver Articles

Easy Cascading Style Sheets Using Dreamweaver

Dreamweaver 1.2 Review

Ponytails
Tutorials and articles on HTML, Web page design, GIF animations, multimedia software and other creative aspects of Web development.

Kurt Nimmo is a Web developer, HTML educator, and design consultant in Chicago.

Suits PonytailsPropheadsContact WDJDiscussWeb AudioSearch

internet.commediabistro.comJusttechjobs.comGraphics.com

Search:

WebMediaBrands Corporate Info

Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs