Dreamweaver Tutorials back to dreamweaver tutorials home pagee contact form tutorial page
A value is required.Invalid format.A value is required.Invalid format.
Social Networks Follow Us on Twitter Our YouTube.com Channel Facebook Page

Text Links in Dreamweaver CS4 - beginners basics


Share this Dreamweaver Article:

Creating Links inside of your website

By far the easiest way to create a link to any web page that is inside your website or site root is to use the 'point to file' icon which is located in the properties inspector. After you have highlighted the text with your mouse you can left click on the point to file icon which looks like a target and click and drag it over to the file in your files panel which is located on the right hand side of the Dreamweaver CS4 interface:

 

point to file icon

When the link arrow has been dragged to the file and there is a blue border around it, you can then release the left mouse button and your link will be created in the properties inspector for you to see:

link visible in the properties inspector

Alternatively if you know the path to the page you want the text link to go to, you can type it manually into the links box in the properties inspector

You can also hand code the link in code view. The link syntax would look like this:


 <a href="3d-bevel-effect-adobe-fireworks.htm">You can put link text here</a>


Text Links or Hyperlinks to External Websites

To create links to external websites you will need to type the link or URL path manually intro Dreamweaver. You can do this either from the properties inspector once you have highlighted the text or you can highlight the text and go to Insert > hyperlink which will bring up the hyperlink dialogue box:

hyperlink dialogue box


The first box ‘text’ is the text that you highlighted so if your hyperlink is called ‘home’ then the word home should appear. The link box is where you can type the URL or absolute path.








  • Access key. Refers to an optional shortcut which would select the link with a single key stroke. Not neccessary to use.
  • Tab Index. Allows you to tab through links or elements like forms on a page. Not necessary for a basic link or hyperlink.

The target box has four options:

  • _self. Which opens the link in the current browser and is set as the default option
  • _parent. Which will open the page in a frameset (a web page within a web page)
  • _top. Which loads the link in the top most frameset of the browser window.
  • _blank. Which will open the link into a new browser window. Most spam filters are set to block popup windows so be aware of that.

In the 'title' box you can specify a title which will show up as a tooltip: Hover your mouse here. Optionally you can choose to put in an 'access key' for the hyperlink which should be a one letter keyboard shortcut which you can specify. Finally there is the 'tab index' box which relates to the tab order of the hyperlinks on the page. This would be specified by a number. When you are done you can click Ok, and the hyperlink will be created.

If you wanted to manually type a hyperlink into code view, the basic syntax would look like this:


  <a href="http://www.dreamweavertutorial.co.uk"></a>

want to add a title to the link and set the target to _blank ? type this:



 <a href="http://www.dreamweavertutorial.co.uk" title="this is a title" target="_blank"></a>



Related Links:

Named Anchor Text Links in Dreamweaver CS4 - Dreamweaver Article

Email Links in Dreamweaver CS4 - Dreamweaver Article

Image Map Hotspots in Dreamweaver CS4 - Dreamweaver Article



blog comments powered by Disqus

Dreamweaver Website Templates

PHP Luxury Contact Form Tutorial


Great Premium Shopping Cart

Email Marketing - Recommended links

CSS Drop Down Menu - Dreamweaver

Floating Menu - Dreamweaver

Tabbed Navigation Menu

CSS Text Boxes in Dreamweaver

CSS 3 in Dreamweaver

J Query in Dreamweaver

Transparent Overlays Dreamweaver

CSS in Adobe Dreamweaver

All Types of Links In Dreamweaver

Positioning Elements in Dreamweaver

Unordered List Images Dreamweaver

Create an RSS Feed in Dreamweaver

Website Typography in Dreamweaver

Expanding Text Boxes - Dreamweaver

Make a Donation

Donate for Dreamweaver Tutorials

paypal