Ten Ton Dreamweaver [Electronic resources] نسخه متنی

Linkin Stuff Up

Still jacked up on your caffeine high? If not, nows the time to top off the tank. Actually, creating a link in Dreamweaver is pretty straightforward. Its what goes on in the background that can get complicatedand thats why its important to understand the different types of paths, which you just learned about.

When you create a hyperlink on your page, Dreamweaver inserts the necessary code for you, allowing you to remain in a visual design environmentDreamweavers Design view. Even in Design view, you can code your links by hand in the Property Inspector or create links through point-and-click dialog boxes.

If this is your first time out, point-and-click may be the best way to goespecially if youre working at home, and your household is as difficult to concentrate in as mine is: free-loading bum friends playing video games all day, Metallica performing live in the living room (word has it theyll play for food these days), and a three-ring circus on the driveway. Besides, the dialog boxes are really easy to use and almost impossible to mess up.

Chapter 14, youll see how Dreamweavers built-in Link Checker command worksas the name implies, it checks all the links in your site for you.

Linking to Another Web Page

No matter what content or design elements you use in Dreamweaver, you really dont have a web site until you start linking your pages together. Until then, all you have is a folder of stand-alone pages. So here, youll see how to begin connecting your pages to one another so that surfers can actually navigate your site.

To try out the process here, youll need more than one web page in your site. If youve already created a few, perfect. If youve been working on just a single page, just choose File > Save As and save a copy of your file under a different name in your local site folder; you can then use that copy as your second page.

To create a link to another page in your site, follow these steps:

1.
Select a piece of text or an image on your page that you want to set a hyperlink for.

This will be the content on your page that will be clickablethe hyperlinks starting point.

Chapter 7.

Noteworthy

Keep in mind that when a visitor hovers the mouse over a link, the visitor can see the links path on the browsers Status bar. Many experienced surfers use this technique to determine whether they want to follow a link or not, so consider naming files and folders usefully.

5.
To test your hyperlink, preview the page in your web browser and click the link.

If you ever want to remove a hyperlink from your page, just select the links path in the Link field In the Property Inspector and press Delete.

Creating Links with the Point to File Icon

In addition to linking to files in your site by clicking the folder icon beside the Link field in the Property Inspector, you can take a more visual approach to creating hyperlinks: using Dreamweavers Point to File icon.

When you use the Point to File icon, you simply select the text or graphic that you want to use as the hyperlink and then point to the file in the Files panel that you want to link to. Its a neat way to work. Take a swig from your cafe mocha and lets get started.

Heres how to create a link using the Point to File icon:

1.
With your web page open, open the Files panel (Window > Files).

2.
Select the text or graphic on your page that you want to set a hyperlink for.

Again, whatever you select on your page will become clickable after the hyperlink is set.

3.
In the Property Inspector, select the Point to File icon.

4.
Drag the Point to File pointer to the web page or graphic in the Files panel that you want to link to. Then release the mouse.

[View full size image]

You can also drag the pointer to something called an anchor, which would appear elsewhere on the same page. Well talk about anchors later in this chapter.

When you release the mouse button over a link destination, Dreamweaver creates a path for the hyperlink in the Property Inspectors Link field. Thats all there is to it.

Heres an even faster way to use the Point to File icon: Select the text or graphic on your page and then hold down Shift and drag from your selected text or graphic to the Files panel. The Point to File arrow will appear, and you can harpoon yourself a document in the panel. Now thats hyperspeed hyperlinking!

Linking to Another Web Site

Often, youll want to link to another web site rather than to pages within your own site. You can link to another site from within your page contents, or you can create a Links page for your site, to contain all external links. Its all easy with Dreamweaver.

Heres how to create a link to another web site:

1.
Select the text or image on your page that you want to set a hyperlink for.

2.
Chapter 11.

3.
From the Property Inspectors Target menu, choose _blank.

Whenever youre linking to a location outside your site, you should consider setting Target to _blank, to open the link in a new browser window and keep your site open in the background. If you dont choose _blank, then the links destination will open in the same browser window, meaning that your visitor will leave your site and be on to a new one without even realizing it.

When the Link field and Target menu are set, Dreamweaver creates the hyperlink to the web site.

4.
Test your link by previewing your page in your browser and clicking your linked text or graphic.

What? Your link isnt working? Double-check that youve typed the URL into the Property Inspectors Link field correctly. If the link still isnt working, make sure youre connected to the webyoull need to be connected for the link to work. If this tripped you up, go pour another coffee.

Linking to an E-mail Address

Hopefully, youre still buzzing with hyperlinks. Now for something really useful to include in your site. Have you ever clicked a Contact Us link on a web site and had your e-mail program open and begin a new e-mail for you? Ever wonder how the web site knew how to do all that? Its actually very simple. All you have to do is create something called a mailto link on your pageand youre about to find out how its done!

Chapter 12.

To link to an e-mail address, try this:

1.
Select the text or graphic on your page that you want to link to an e-mail address.

This could be a Contact Us button or some text that says, "Click here to e-mail us."

Neither Peachpit Press nor Geoff Blake are liable for any damages, bodily or otherwise, resulting from consumption of an All-Nighter Buzz Float Blowout. Please consume responsibly.

Geoffs All-Nighter Buzz Float Blowout

Are you thinkin of pulling an all-nighter to cram in that web design project? You knew you shouldnt have played Halo II all afternoon, but you did anyway, didnt you? Well no worries, because with my specialty All-Nighter Buzz Float Blowout recipe, youll be bouncin off the walls straight on through til 5 a.m.! Get all buzzed out by following these steps.

How to make Geoffs All-Nighter Buzz Float Blowout:

1.
Youll need some kind of bowl. Salad bowls are too small. Maybe something your mom would bake in, or if youre in a pinch, use a roasting pan.

2.
Fill your bowl about one-third full with cola. I recommend the mega-caffeinated version, but if youve got only the cheap no-name stuff, just add two heaping tablespoons of white sugar and stir for about a minute.

3.
Add a container of chocolate cake icing and mix the entire concoction until everythings nice and thick.

4.
Now for the float part: Add three to five heaping scoops of chocolate ice cream. I prefer the kind with the chocolate chips, but its really personal preference. Then pour in four to six cups of freshly brewed coffee. If you want to get fancy, you could get into flavored coffees, but if this is your first attempt, maybe play er straight for now.

5.
Finally, the garnishing. I usually decorate my float with sprinkles, a Twix bar cut into pieces, or espresso beans if Im feeling in the mood. Zig-zag some maple syrup across the top if youre trying to impress others with your culinary skills.

6.
Serve, and enjoy!

The contrast between the cold ice cream and the hot coffee will have your taste buds hoppin. And as for you, well just make sure there isnt anything breakable around. Happy all-night sugar high!

2.
In the Link field in the Property Inspector, type mailto: followed by the e-mail address.

For example, you could type mailto:info@tentonbooks.com.

3.
If you want to force a subject line for the e-mail, type ?subject= and then type a subject.

For example, you might enter something like this: ?subject=Whachya Think of Ten Ton Dreamweaver?

4.
When youre done, press Enter (Windows) or Return (Mac).

Dreamweaver sets the e-mail address link.

Go ahead and try it. Preview your page and click your link. Your e-mail program should launch and create a new e-mail for you, complete with the e-mail address and subject line.

When a visitor clicks your mailto link, the visitors e-mail program will launch and begin a new e-mail, complete with your e-mail address and a subject line, if you specified one.

[View full size image]

Noteworthy

You can use the ability to set an e-mails subject line to help you sort messages as your e-mail software receives them. For example, if you set the subject line to read Customer Service Inquiry, then in your e-mail program, you can create a filter that places any incoming e-mail with that subject line into a specific e-mail folder. Check your e-mail programs online help to see how to set this up.

Setting Links with the Asset Panel

Like CSS, the Asset panel is always gonna be there to help you with various page-building functions. Its back again, this time to help you maintain consistency in your hyperlinks.

The Asset panel tracks any URLs (such as a web site address or an e-mail address) that youve used in your site already. This saves you from having to remember long addresses, and it makes reusing them throughout your pages easy. The Asset panel tracks only URLs, thoughnot hyperlinks to other pages within your site.

Heres how to use the Asset panel to create a hyperlink:

1.
On your page, select the text or graphic that you want to set a hyperlink for.

2.
In the Asset panel, click the URL category button on the left side of the panel.

A list of URLs that youve used throughout your site appears.

3.
Click the Refresh Site List button at the bottom of the panel to ensure that the panel displays all the URLs used in your site.

4.
Select the URL that you want to use; then click Insert at the bottom of the panel.

Linking to a Different Location on the Same Page with Anchors

Youve seen how to create links to many different destinations, such as other pages and web sites. But wouldnt it be cool to not only link to a page, but to a specific location on a page? You may have seen this technique used on web sites that have glossary pages, where you click a letter at the top of the page and are taken to the corresponding alphabetical section that appears farther down the page. This technique is very useful in a variety of situations, and it uses something called an anchor. You can think of an anchor as a placeholder on your page.

You first insert an anchor on your page to set your links destination, and then you create a link from somewhere else on the page to that anchor. Anchors are really useful on longer pages, where a lot of scrolling would otherwise be required.

To help your visitor navigate your page easier, its always a courtesy to include "back to top" links on pages that use anchors. That way, your visitor can easily jump back to the top of your page rather than having to scroll.

Heres how to creates links with anchors, including a link to return the visitor to the top of the page:

1.
On your page, place the cursor where you want to insert an anchor. (Wherever you place your insertion point will be considered the links destination.)

2.
Choose Insert > Named Anchor.

You can also insert an anchor by clicking Named Anchor in the Common category of the Insert bar (Window > Insert).

3.
In the Named Anchor dialog box that appears, enter a name for your anchor; then click OK.

An anchor name is just a way to distinguish multiple anchors that appear on your page. Anchor names can be whatever you want, but cannot contain spacesbut if you really need one, try using an underscore instead.

Noteworthy

Anchors are not placed permanently on your page. If you accidentally insert the anchor in the wrong spot or if you want to move it to a different place on the page, just drag it to a new location or cut and paste it.

Dreamweaver inserts the anchor symbol (a gold shield with an anchor icon) on your page beside the cursor. If you dont see the anchor symbol, choose View > Visual Aids > Invisible Elements.

Now youre ready to create the link to the anchor.

4.
Scroll back to the top of your page and select the text or graphic that you want to link to the anchor.

5.
Choose Insert > Hyperlink.

6.
In the Hyperlink dialog box that opens, choose your anchor from the Link pull-down menu; then click OK.

Dreamweaver sets a link to your anchor from the text or graphic you selected.

Now create a link to return the visitor to the top of your page.

7.
Click at the top of your page and choose Insert > Named Anchor.

8.
In the Named Anchor dialog box that appears, type a name for your new anchor; then click OK.

The first anchor you inserted will scroll your visitor down the page. This second anchor, which is completely separate from the first, will now send them back to the top of the page. So make sure to use a new name for your anchorfor example, name it top.

Now youre ready to create the link that will navigate the visitor back to the top of your page.

9.
Scroll down to where you inserted your first anchor on your page and type Back to top.

10.
Select the "Back to top" text; then choose Insert > Hyperlink.

11.
In the Hyperlink dialog box that appears, choose your "top" anchor from the Link pull-down menu; then click OK.

The link back to the top of your page is created. To test the links to your anchors, preview your page in your web browser.

Linking to a Specific Location on Another Page

Anchors are useful not only for linking to a specific spot on the current page. You can also use them to link to a location on another page.

Heres how to use anchors to link to other web pages:

1.
Open the page that you want to link to and place the cursor on your page where you want to insert the anchor.

2.
Select Insert > Named Anchor.

3.
Enter a name for your anchor in the Named Anchor dialog box that appears and click OK.

Dreamweaver inserts the anchor symbol on your page. Now that the anchors been placedyour links destinationyoure ready to link to it. Youre done with this page, so it can be closed.

4.
Save and close the page.

5.
Open the page that you want to link from and select the text or graphic that will become the hyperlink.

6.
In the Property Inspector, click the folder icon beside the Link field and navigate to the file youre linking to; then click OK (Windows) or Choose (Mac).

The file name appears in the Link field.

7.
Click after the file name in the Link field, type a number sign (#), and then type the name of your anchor.

Links are case sensitive, so make sure you use the same capitalization as you used when you named your anchor.

Dreamweaver creates a link from your selection to the anchor and page that you specified. To test your link, preview the page in your web browser.