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.

Hyperlinks, or links, are the elements on a Web page that can be clicked on and that transfer a user to another Web page or file. In Dreamweaver, you can select a text or an image in your Web page to be a link. You then specify the destination address, which is the page or file that appears when someone click on the link. The link can be to another Web page on your Web site, a Web page on a different Web site, or a file in another format that is not a Web page, such as a PDF document, an image, a Microsoft PowerPoint presentation, or multimedia file. The destination page or file can appear in the current browser window or in a new browser window.

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

 

Search for Tutorials

	Enter your search terms Submit search form
	Web www.guidesandtutorials.com

Dreamweaver 8 Tutorials

The Dreamweaver 8 Workspace Overview of the Workspace Using The Insert Toolbar Show or Hide Windows Using the Properties Inspector Customize the Document Window Creating a Web Site Creating a New Web Site Managing Web Site Definitions Creating Basic Web Pages Create a Basic Webpage Creating New Web Pages Opening and Saving Web Pages Closing Web Pages Previewing Web Pages in a Browser Using Text Add Paragraphs and Headings Align Paragraphs and Headings Formatting Text Inserting Special Characters Inserting Hyperlinks Create Hyperlinks Using Named Anchors Create Email Links Refresh Pages or Redirect Users Linking to files Using Graphics Image File Types Inserting Images Cropping and Resizing Images Changing the Brightness and Contrast of an Image Setting Image Properties Change Image Size Using HTML Tables About HTML Tables and Table Modes Inserting Tables Selecting Tables, Rows, Columns, and Cells Formatting Tables and Cells Importing Tabular Data Using Table Design Schemes to Format a Table Setting Table Colors Web Site Management Managing Links Changing Links Sitewide Finding and Fixing Broken Links Site Reports Using the Files Panel Getting and Putting Files Checking In/Out Files Synchronizing Local and Remote Sites Cascading Style Sheets Cascading Style Sheets Creating CSS Styles Defining CSS Styles Using the CSS Panel Applying and Removing CSS Styles Using Layers Creating Layers Moving and Resizing Layers Setting Layer Properties Nesting Layers Using the Layers Panel Behaviors Creating Behaviors Default Behaviors in Dreamweaver Targeting Browser Behaviors Deleting Behaviors Downloading Behaviors from the Internet Creating a Rollover Image Using Forms Understanding Forms and Scripts Creating Forms Inserting Text Boxes Inserting Hidden Fields Inserting Check Boxes Inserting a Radio Group Inserting a List Menu Inserting Jump Menu Inserting a File Field Inserting Buttons

This site proudly build with Site Build It!

 

 

 

[?] Subscribe To This Site