Materials Credited to DMACC
Ag Technology Class
Web Design Unit
Dreamweaver #6 Lesson
Chapter 1
Introduction
There's a reason we call it the Web. The metaphor perfectly describes HTML's functionality. One document links to many others, which in turn link to many others, that potentially link back to where you started. The functional aspect of hypertext—the hyperlink—is what makes it all possible.
Understand this: if it can sit on a Web server, there's a way to create a link to it. We've seen the basics of assigning links to a string of text or a selected image, as well as image maps and rollovers, but we've just scratched the surface of what Dreamweaver can do with links.
In this lesson, we'll look at a smidgeon of HTML by examining pathnames (the heart of all hyperlinks). This will give you a better understanding of the file structure of your Web site and how links function. Then we'll check out anchor links—a method of linking to a specific location within a document. We'll also look at creating e-mail links (links that, when clicked, open the visitor's e-mail application with a chosen address entered in the To field), and lastly we'll check out all of Dreamweaver's link management tools.
Chapter 2
Understanding Pathnames
Okay, we know that a Web site is essentially a collection of files that reside on a computer—the computer in question being the Web server. A Web server, by use of specific server software, serves files to your browser when you click hyperlinks or type URLs (Uniform Resource Locators) in the browser's address line. The address metaphor comes in handy here because every file, whether it's an HTML document, image file, or multimedia clip, has an address on the Web server. This address is expressed using something called a pathname.
You see pathnames all the time on your own machine, whether Mac or Windows, when you use tools like the Macintosh Finder or Windows Explorer. I'm on a Windows system, so Mac users please bear with me if my examples seem Windows-centric. The same rules apply regardless of OS—be it Mac, Windows, or Unix.
Chances are you've all seen something like this before: C:\My Documents\Word Docs. This is a pathname in your operating system describing the file structure of your hard drive and your current location within it.
To understand a pathname it's easier to actually read it backwards, so this path would mean we're in a folder called Word Docs, which itself is found inside a folder called My Documents, and the My Documents folder is in the root directory of a hard drive labeled C. In a sense, that root directory on C is like the folder you created to hold the site you defined back in lesson 3. That folder (or directory) acts as the root of your site.
Getting back to Web servers—a Web server isn't radically different from your own machine. They're both computers, and all computers have a file structure. And as I said before, the pathname defines the location of a file within that file structure.
Pathnames fall into two main categories: absolute and relative.
Absolute Pathnames
This type of pathname declares the full address to a file. You could use an absolute pathname for files on your own site, but it would be overkill.
Absolute pathnames are best used when pointing to a file on another Web server. If you needed to reference a file deep within the file structure of the other Web server, you'd begin with the Hypertext Transfer Protocol (http://), followed by the domain name (www.Web_site.com) root, and then the rest of the path. For example:
http://www.web_site.com/sports/soccer.html
This pathname tells the browser to go to the root of the domain, locate a sports folder and look for a file inside it called soccer.html.
Relative Pathnames
This type of pathname uses an abbreviated address, and is best for referencing files within your own site. The specific type of relative pathname Dreamweaver uses when you define a site is called a document-relative pathname. In this type of pathname the folder of the document that contains the link is the starting point the browser uses for looking to other files. For example, the pathname sports/soccer.html tells the browser to start in the same folder the present document is in and locate a folder called sports, and then look inside sports to find the document soccer.html.
The advantage of the relative pathname is that you can move the contents of the site root folder anywhere as a group and all the links remain consistent. If you move to a new domain, who cares? Just copy the contents of the root onto the new Web server and everything's still functional. If you had absolute pathnames everywhere, you'd need to update them every time you moved the root.
Pathnames aren't only used in links, but in any type of HTML element that requires a file reference. For example, when you insert an image into a document all you're doing is placing a tag that references a pathname to the image within your site. Here's what the basic code for an inserted image looks like:
<img src="images/square.gif" width="50" height="50">
Src you might recognize from the Property inspector. In the code, it is set equal to the path to the image relative to the document the reference is in. The width and height are fairly simple to figure out.
Dreamweaver uses relative pathnames when you create links and file references once you create a local site. If you don't create a local site, Dreamweaver uses absolute pathnames reflecting your own hard drive, for example file:///C:/My Documents/Sites/My Site/images/square.gif.
If this got onto your Web server it would wreak havoc because (a) the server wouldn't have the same file structure as your computer, and (b) Web servers are different enough from your PC to be totally confused by this type of protocol: file:///C:.
By using relative pathnames, you can work on a site on any machine, transfer it to a Web server, and preserve the file relationships. This is the whole reason you want to begin by creating a site in Dreamweaver rather than just making pages ad hoc. Once you've done so, the otherwise arduous task of link maintenance becomes Dreamweaver's so you can be free to deal with more creative concerns.
Chapter 3
Named Anchors and E-Mail Links
Implementing named anchors is a two-part process: creating the named anchor within a document, and then creating a link to that named anchor—called an anchor link. A named anchor is just some code you place in your document that says, "Hey, Web browser! This line in the document has it's own name." Once that position is defined, a link to it opens the document with that line at the top of the browser window.
Anchor linking is a good strategy when you have a particularly long document and you don't want your visitors to have to scroll forever to get to the information they need. For example, you could place a table of contents at the top of the document and have the individual entries link to their corresponding contents further down the page. You've probably seen this method of linking used in frequently asked questions (FAQ) pages.
So, how do you create these anchors and links to them from within Dreamweaver? It's real simple to do. In an open document, place the cursor where you want the anchor located, and choose one of the following:
· On the Insert bar's Common palette, click the Named Anchor button (figure 6.1).
Fig. 6.1. Named Anchor button
· From the menu bar select Insert > Named Anchor.
· On your keyboard, press CTRL + ALT + A (Win) or COMMAND + OPTION + A (Mac).
Whichever method you choose displays the Named Anchor dialog box, as shown in figure 6.2.
Fig. 6.2. Named Anchor dialog box
Then, you enter a name for the anchor in the Anchor Name field and click OK. When naming an anchor, stick with letters and numbers and don't include any spaces. Use an underscore if you must separate words.
You'll then see a little yellow icon in the Document window showing the location of the named anchor you've just inserted. If you don't see a yellow icon, your preferences may have been changed. Go to the menu and choose Edit > Preferences to access the Preferences dialog box. Then click Invisible Elements in the Category field. On the right side of the dialog box, make sure the Named Anchor check box is selected (figure 6.3).
Fig. 6.3. Named Anchor check box
Now, if you still don't see an anchor marker there's one last place to check. Go to the Menu and choose View > Visual Aids > Invisible Elements to make sure you actually have invisible elements turned on.
Okay, you've just inserted this anchor, and you can see the nice yellow icon showing you where it is, but what exactly have you done? You've used Dreamweaver to insert a little line of code into your document that looks like this:
<a name="foobar"></a>
The a stands for anchor, and is the root tag. The name part is an attribute, and why we call this thing a named anchor. When you enter a name into the Named Anchor dialog box, that is what ends up after the equal sign. So, in this case, the anchor's name equals foobar.
This little tag is now a landmark inside your document. We can now reference this landmark, and if we set a link to it, when the document opens in the browser the line that this landmark sits on will be at the top of the browser window. This brings us to the second half of the equation—linking to a named anchor.
Linking to a Named Anchor
To create a link to a named anchor, select the text or image you want to make into a hyperlink, and then use any of the following methods:
· Drag the point-to-file icon next to the Property inspector Link field to the anchor icon you want to link to, either in the same document or in another open document. If you're dragging a link to an anchor in another document, that document has to be open and visible on your desktop. If this document is partially obscured by other windows, that's okay. It will come to the front once the point-to-file icon is dragged over it.
· In the Document window, hold down your SHIFT key and drag from the selected text or image to the anchor icon. Again, if the anchor is in another document you have to have it open on your desktop.
· If the anchor is in the same document as the hyperlink you're creating, in the Link field of the Property inspector, enter a pound sign (#) followed by the name of the anchor. If the anchor is not in the same document, the correct path to the file must be entered, followed by the pound sign and anchor name. So, if the file with the anchor in it is not open at the moment, the easiest thing to do is just link to the file the way you normally would. This would enter the correct pathname; then, just type the pound sign and the name of the anchor after it.
The important thing to remember is that anchor names are case-sensitive, and should not contain any spaces. Also, almost anywhere you can enter link information (in the Image Rollover dialog box, Navbar dialog box, Image Map dialog box, and so on), you can type in an anchor name, so long as you get the path right. The only place this has posed problems is in Flash text and Flash buttons, which we will get to in a later chapter. The nature of these objects seems to be oblivious to named anchors, but Macromedia knows of this bug and I believe is working on it.
Creating E-Mail Links
With an e-mail link, you're assigning a particular e-mail address to an image or piece of text, or other linkable object so that when the link is clicked the visitor's e-mail software is launched with that address already filled in with the address you define.
To create the e-mail link, select the text or image to which you want to assign the link, and use any of the following methods:
· From the Insert bar, click the Insert E-mail Link button (figure 6.4).
Fig. 6.4. Insert E-mail Link button
Then, enter the e-mail address into the E-mail field of the Insert E-mail Link dialog box (figure 6.5).
Fig. 6.5. Insert E-mail Link dialog box
· On the Property inspector's Link field, enter mailto: followed immediately by the e-mail address, without any spaces (figure 6.6).
Fig. 6.6. Link field
· From the Document window menu bar, select Insert > E-mail Link and enter the e-mail address into the E-mail field of the Insert E-mail Link dialog box.
Now, the second method above is applicable almost anywhere in Dreamweaver you're given a field to enter a URL into (in the Image Rollover dialog box, Navbar dialog box, Image Map dialog box, and so on). You'd only have to type mailto:; where is, replace it with the e-mail address you're using.
Chapter 4
Link Management
Dreamweaver's ability to update your site's links any time you move or rename a file is part of what makes it such a great tool. In order to take full advantage of these features you must, of course, set up a local site on your machine. It's that cache file we created when the local site was defined that makes link management possible.
To insure that you're notified about link updating, do the following:
1. From the Document window's menu bar, select Edit > Preferences, to open the Preferences dialog box and choose the General category.
2. Select Always or Prompt from the Update Links when Moving Files drop-down menu, as shown in figure 6.7.
Fig. 6.7. Update Links when Moving Files drop-down menu