Dreamweaver Tutorial: Create a Hyperlink

This Dreamweaver tutorial will demonstrate how to create a hyperlink on your web page that will link the page to another page within your web site or to an entirely different web site. This tutorial will illustrate several ways to create hyperlinks on your Web page.

Bad or broken links which lead nowhere are a common problem on web site. Dreamweaver keeps track of your links to prevent broken links to pages within your Web site. When you move files around or change the organization of your Web site, Dreamweaver will automatically update all of the links that changed as you reorganized your files. This is a great timesaving tool and resource that Dreamweaver provides.

For example, if you changed the name of a file on your Web site that 30 pages linked to, Dreamweaver will keep track of those links and change them on all 30 pages with one keystroke, instead of you having to manually change the link on every page. That saves a ton of time.

Dreamweaver Tutorial: Linking with Insert Hyperlink

Click on your web page where you want to insert the link. From the Insert Menu, choose Insert Hyperlink.

You can also select the Insert Link button from the Insert Common Tool panel icons. This will also bring up the Insert Hyperlink dialog box.

When the Insert Hyperlink dialog box appears, you can enter the text that you want to turn into a link by typing it in the Text field. In the Link field, you should type the name or path of the file you want to link to if it's on your Web site, or type the complete URL if the link is to a different Web site.

The Hyperlink dialog box filled in with the text that will become the link (Free PowerPoint Tutorials) and the link to the file in the Link field.

You can also choose to target the page that the link goes to. By default, the file opens in _self, which means that it will open in the same browser window your visitor is currently using to view your Web page. From the Target drop-down menu, you have several choices depending on how you want the link to work. To open the link destination file in a new browser window, select _blank from the Target drop-down menu. The other options in the Target drop-down menu are related to frames.

A word about Titles: Notice that one of the options in the Hyperlink dialog box is the Title field. You can set a title for the file to which you are linking. Browsers can use this title for various things. Internet Explorer uses the Title to display in a tool tip when the mouse pointer passes over the link. Some browsers also use the title when bookmarking the link.

Dreamweaver Tutorial: Creating Hyperlinks

View the full size Dreamweaver tutorial on Creating Hyperlinks(3:22)

Dreamweaver Tutorial: Linking to Other Files

You can use hyperlinks to link to more than just other Web pages on your site or to other Web sites. You can also specify other types of files, such as PDFs, image files, MS Word documents, or multimedia files, as the destination file for links. The browser attempts to open the file in the appropriate software application. If your visitor's computer has the appropriate software installed, it will try to launch the application and open the file. Otherwise the browser will ask the user if they want to try to open the file or save it to a location on their computer.

Dreamweaver Tutorial: Create a Link Using Point to File or Browse

The Point to File feature is an alternate way to create a hyperlink to a page or file on your Web site. This feature forces you to select files that are located within your Root folder.

Select the text on your Web page that you want to turn into a link. With the text selected, click and hold the Point to File icon next to the Link field in the Property Inspector. When you click and hold the Point to File icon, the Link field turns to text, telling you to point to a file in your Files Panel to create a link.

Drag the Point to File icon onto the file you want to link to in the Files Panel and release the mouse. A line will follow your mouse to the file you are creating the link to. When you release the mouse, the name and path of the file you are linking to will appear in the Link field in the Property Inspector. The great thing about linking this way is that it eliminates any possibility of misspelling a file name or getting the link incorrect.

When you create the Link, Dreamweaver automatically creates the code behind the scenes to tell the browser what file to go to when the user click on the text link on your Web page. You can view the code that Dreamweaver created by selecting the Code or Split View buttons on the toolbar.

Dreamweaver Tutorial: Create a Hyperlink by Browsing from Property Inspector (1:00)

See related tutorials at Dreamweaver Tutorials

Guides and Tutorials - Free Technology Guides and Tutorials
© 2006 GuidesandTutorials.com - All Rights Reserved

Home | Submit Tutorials | Contact