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.

Dreamweaver 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.

Dreamweaver Insert hyperlink

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.

Dreamweaver Insert Hyperlink

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.

Dreamweaver insert Hyperlink

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.

Dreamweaver insert Hyperlink

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 Insert Hyperlink

Dreamweaver Tutorial: Creating Hyperlinks

 

right arrow 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 Tutiorial: Create Hyperlink by Browse Dreamweaver Tutorial: Create a Hyperlink by Browsing from Property Inspector (1:00)

See related tutorials at Dreamweaver Tutorials

 


Search for Tutorials
 

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

Site Build It!

This site proudly build with Site Build It!

Powered By SiteBuildIt

 

Bluehost.com Web Hosting $6.95 

 

Dreamweaver Video Tutorials
Dreamweaver Store
All Dreamweaver 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
Create a Basic Webpage
Creating a New Web Site
Managing Web Site Definitions

Creating Basic Web Pages
Creating New Web Pages
Opening and Saving Web Pages
Closing Web Pages
Previewing Web Pages

Using Text
Add Paragraphs and Headings
Align Paragraphs and Headings
Formatting Text
Inserting Special Characters

Inserting Hyperlinks
Create Hyperlinks
Create Named Anchors
Create Email Links
Refresh Page & 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

 

[?] Subscribe To This Site

XML RSS
follow us in feedly
Add to My Yahoo!
Add to My MSN
Subscribe with Bloglines